[WIP] Start replacing item page preview with simpler HTML-based version

Just stripping out the big React component, and having Rails output it!

There's a lot of work rn in extracting the Impress 2020 dependency from
the `wardrobe-2020` React app, and I'm just curious to see if we can
simplify it at all by pulling this stuff *way* back to basics, and
deleting the item page part of `wardrobe-2020` altogether.

In this draft, we regress a lot of functionality: it just shows the
item on a Blue Acara, with no ability to change it! I'm gonna play with
putting more of that back in.

I also haven't actually removed any of the item page React code; I just
stopped calling it. That can be a cleanup for another time, once we're
confident in this experiment!

app/assets/stylesheets/items/_show.sass

@@ -37,3 +37,23 @@ body.items-show
   .nc-icon
     height: 16px
     width: 16px
+
+  outfit-viewer
+    position: relative
+    display: block
+    width: 300px
+    height: 300px
+    border: 1px solid $module-border-color
+    border-radius: 1em
+    overflow: hidden
+
+    margin: 0 auto .75em
+
+    outfit-layer
+      display: block
+      position: absolute
+      inset: 0
+
+      img
+        width: 100%
+        height: 100%

app/controllers/items_controller.rb

@@ -82,6 +82,16 @@ class ItemsController < ApplicationController
             group_by_owned
           @current_user_quantities = current_user.item_quantities_for(@item)
         end
+
+        @preview_pet_type = PetType.find_by_color_id_and_species_id(
+          Color.find_by_name("Blue"),
+          Species.find_by_name("Acara"),
+        )
+        @item_layers = @item.appearance_for(
+          @preview_pet_type, swf_asset_includes: [:zone]
+        ).swf_assets
+        @pet_layers = @preview_pet_type.canonical_pet_state.swf_assets.
+          includes(:zone)
       end
 
       format.gif do

app/helpers/items_helper.rb

@@ -244,5 +244,15 @@ module ItemsHelper
   def item_header_user_lists_form_state
     cookies.fetch("DTIItemPageUserListsFormState", "closed")
   end
+
+  def outfit_viewer_layers(swf_assets)
+    swf_assets.map { |a| outfit_viewer_layer(a) }.join("\n").html_safe
+  end
+
+  def outfit_viewer_layer(swf_asset)
+    content_tag "outfit-layer", style: "z-index: #{swf_asset.zone.depth}" do
+      image_tag swf_asset.image_url, alt: ""
+    end
+  end
 end
 

app/javascript/item-page.js

@@ -1,15 +1,2 @@
-import React from "react";
+// eslint-disable-next-line no-console
-import ReactDOM from "react-dom";
+console.log("OwO!");
-
-import { AppProvider, ItemPageOutfitPreview } from "./wardrobe-2020";
-
-const rootNode = document.querySelector("#outfit-preview-root");
-const itemId = rootNode.getAttribute("data-item-id");
-// TODO: Use the new React 18 APIs instead!
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(
-  <AppProvider>
-    <ItemPageOutfitPreview itemId={itemId} />
-  </AppProvider>,
-  rootNode,
-);

app/models/item.rb

@@ -595,6 +595,10 @@ class Item < ApplicationRecord
     end
   end
 
+  def appearance_for(target, ...)
+    Item.appearances_for([id], target, ...)[id]
+  end
+
   # Given a list of item IDs, return how they look on the given target (either
   # a pet type or an alt style).
   def self.appearances_for(item_ids, target, swf_asset_includes: [])

app/views/items/show.html.haml

@@ -13,7 +13,11 @@
     how we handle zones. Until then, these items will be <em>very</em> buggy,
     sorry!
 
-#outfit-preview-root{'data-item-id': @item.id}
+%outfit-viewer
+  %outfit-pet-appearance
+    = outfit_viewer_layers @pet_layers
+  %outfit-item-appearance
+    = outfit_viewer_layers @item_layers
 
 - unless @contributors_with_counts.empty?
   #item-contributors