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
|
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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue