diff --git a/app/assets/javascripts/items/show.js b/app/assets/javascripts/items/show.js new file mode 100644 index 00000000..bbeaa5a4 --- /dev/null +++ b/app/assets/javascripts/items/show.js @@ -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); + } +}); diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index d02e4f4c..fe35ad7e 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -161,6 +161,18 @@ body.items-show border-color: $error-border-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 margin-top: .5em diff --git a/app/controllers/items_controller.rb b/app/controllers/items_controller.rb index 921843ad..cadb19c1 100644 --- a/app/controllers/items_controller.rb +++ b/app/controllers/items_controller.rb @@ -93,6 +93,9 @@ class ItemsController < ApplicationController @all_appearances = @item.appearances @appearances_by_occupied_zone = @item.appearances_by_occupied_zone. sort_by { |z, a| z.label } + + @preview_pet_type_options = PetType.where(color: @preview_outfit.color). + joins(:species).merge(Species.alphabetical) end format.gif do diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml index db2f3483..edbef572 100644 --- a/app/views/items/show.html.haml +++ b/app/views/items/show.html.haml @@ -33,6 +33,13 @@ "id", "human_name", @selected_preview_pet_type.species_id) = 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 %section %h3 Occupies @@ -72,3 +79,4 @@ - content_for :javascripts do = javascript_include_tag "lib/idiomorph", async: true = javascript_include_tag "outfit-viewer", async: true + = javascript_include_tag "items/show", async: true