From ea17e76c39583c371c6685dc3376fff89dbf1af4 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sun, 30 Jun 2024 23:09:28 -0700
Subject: [PATCH] [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 | 20 ++++++++++++++++++++
 app/controllers/items_controller.rb     | 10 ++++++++++
 app/helpers/items_helper.rb             | 10 ++++++++++
 app/javascript/item-page.js             | 17 ++---------------
 app/models/item.rb                      |  4 ++++
 app/views/items/show.html.haml          |  6 +++++-
 6 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 0c0c2f6e..4958c1d6 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/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%
diff --git a/app/controllers/items_controller.rb b/app/controllers/items_controller.rb
index e086c031..cc75d736 100644
--- a/app/controllers/items_controller.rb
+++ b/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
diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb
index 31f0bfde..7a4021b7 100644
--- a/app/helpers/items_helper.rb
+++ b/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
 
diff --git a/app/javascript/item-page.js b/app/javascript/item-page.js
index 5d8d56b0..afc9235c 100644
--- a/app/javascript/item-page.js
+++ b/app/javascript/item-page.js
@@ -1,15 +1,2 @@
-import React from "react";
-import ReactDOM from "react-dom";
-
-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,
-);
+// eslint-disable-next-line no-console
+console.log("OwO!");
diff --git a/app/models/item.rb b/app/models/item.rb
index e246be6f..5739e082 100644
--- a/app/models/item.rb
+++ b/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: [])
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index 84f3aeea..b4416fdd 100644
--- a/app/views/items/show.html.haml
+++ b/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