Extremely lo-fi new species face picker for simplified item previews

The basics are working great! There's a few known missing things though:
- Add reasonable noscript behavior
- Disable options where there's no valid appearance
- Lay it out actually _good_, instead of just images dumped there
This commit is contained in:
Emi Matchu 2024-09-03 13:23:58 -07:00
parent 36f8efadbf
commit c06c297174
4 changed files with 38 additions and 0 deletions

View file

@ -0,0 +1,15 @@
// When the species *face* picker changes, update and submit the main picker form.
document.addEventListener("click", (e) => {
if (!e.target.matches(".species-face-picker input[type=radio]")) return;
try {
const mainPicker = document.querySelector("#item-preview .species-color-picker");
const mainSpeciesField =
mainPicker.querySelector("[name='preview[species_id]']");
mainSpeciesField.value = e.target.value;
mainPicker.requestSubmit(); // `submit` doesn't get captured by Turbo!
} catch (error) {
e.preventDefault();
console.error("Couldn't update species picker: ", error);
}
});

View file

@ -161,6 +161,18 @@ body.items-show
border-color: $error-border-color border-color: $error-border-color
color: $error-color color: $error-color
.species-face-picker
input[type=radio]
position: absolute
left: -10000px
top: auto
width: 1px
height: 1px
overflow: hidden
&:not(:checked) + img
opacity: .5
.item-zones-info .item-zones-info
margin-top: .5em margin-top: .5em

View file

@ -93,6 +93,9 @@ class ItemsController < ApplicationController
@all_appearances = @item.appearances @all_appearances = @item.appearances
@appearances_by_occupied_zone = @item.appearances_by_occupied_zone. @appearances_by_occupied_zone = @item.appearances_by_occupied_zone.
sort_by { |z, a| z.label } sort_by { |z, a| z.label }
@preview_pet_type_options = PetType.where(color: @preview_outfit.color).
joins(:species).merge(Species.alphabetical)
end end
format.gif do format.gif do

View file

@ -33,6 +33,13 @@
"id", "human_name", @selected_preview_pet_type.species_id) "id", "human_name", @selected_preview_pet_type.species_id)
= submit_tag "Go", name: nil = submit_tag "Go", name: nil
%form.species-face-picker
- @preview_pet_type_options.each do |pet_type|
%label
= radio_button_tag "species_face_id", pet_type.species_id,
checked: pet_type == @preview_outfit.pet_type
= pet_type_image pet_type, :happy, :face
.item-zones-info .item-zones-info
%section %section
%h3 Occupies %h3 Occupies
@ -72,3 +79,4 @@
- content_for :javascripts do - content_for :javascripts do
= javascript_include_tag "lib/idiomorph", async: true = javascript_include_tag "lib/idiomorph", async: true
= javascript_include_tag "outfit-viewer", async: true = javascript_include_tag "outfit-viewer", async: true
= javascript_include_tag "items/show", async: true