forked from OpenNeo/impress
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:
parent
36f8efadbf
commit
c06c297174
4 changed files with 38 additions and 0 deletions
15
app/assets/javascripts/items/show.js
Normal file
15
app/assets/javascripts/items/show.js
Normal 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);
|
||||
}
|
||||
});
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue