From c06c297174729dae9d237b4427b883b9e7c9b75b Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Tue, 3 Sep 2024 13:23:58 -0700
Subject: [PATCH] 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
---
 app/assets/javascripts/items/show.js    | 15 +++++++++++++++
 app/assets/stylesheets/items/_show.sass | 12 ++++++++++++
 app/controllers/items_controller.rb     |  3 +++
 app/views/items/show.html.haml          |  8 ++++++++
 4 files changed, 38 insertions(+)
 create mode 100644 app/assets/javascripts/items/show.js

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