From a184c7557584e103e80876bad67e9d6f95f9aa2b Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Tue, 3 Sep 2024 13:46:29 -0700
Subject: [PATCH] Handle noscript for the new species face picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We mark the options as `inert` and `aria-hidden` while the JS is still
loading—and if the `noscript` tag tells us it's never coming, it covers
up the picker with a brief explainer!
---
 app/assets/javascripts/items/show.js    |  6 ++++++
 app/assets/stylesheets/items/_show.sass | 16 ++++++++++++++++
 app/views/items/show.html.haml          | 17 ++++++++++++-----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/items/show.js b/app/assets/javascripts/items/show.js
index bbeaa5a4..ca83954c 100644
--- a/app/assets/javascripts/items/show.js
+++ b/app/assets/javascripts/items/show.js
@@ -13,3 +13,9 @@ document.addEventListener("click", (e) => {
         console.error("Couldn't update species picker: ", error);
     }
 });
+
+// Now that the face picker is ready to go, mark it as usable.
+for (const options of document.querySelectorAll(".species-face-picker-options")) {
+    options.removeAttribute("inert");
+    options.removeAttribute("aria-hidden");
+}
diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index fe35ad7e..81decc33 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -162,6 +162,8 @@ body.items-show
         color: $error-color
 
   .species-face-picker
+    position: relative
+
     input[type=radio]
       position: absolute
       left: -10000px
@@ -173,6 +175,20 @@ body.items-show
       &:not(:checked) + img
         opacity: .5
 
+    noscript
+      position: absolute
+      inset: 0
+      background: rgba(white, .75)
+      z-index: 1
+
+      display: flex
+      align-items: center
+      justify-content: center
+      text-align: center
+
+    &:has(.species-face-picker-options[inert])
+      cursor: wait
+
   .item-zones-info
     margin-top: .5em
 
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index edbef572..436f9e88 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -34,11 +34,18 @@
     = 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
+    %noscript
+      This fancy species picker requires Javascript, but you can still use the
+      dropdowns instead!
+    .species-face-picker-options{
+      "inert": true, # waits for JS to remove
+      "aria-hidden": true, # waits for JS to remove
+    }
+      - @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