app/assets/stylesheets/items/_show.sass

@@ -37,34 +37,3 @@ 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%
-
-  .species-color-picker
-    .error-icon
-      cursor: help
-      margin-right: .25em
-
-    &[data-is-valid="false"]
-      select
-        border-color: $error-border-color
-        color: $error-color
-

app/controllers/items_controller.rb

@@ -82,17 +82,6 @@ class ItemsController < ApplicationController
             group_by_owned
           @current_user_quantities = current_user.item_quantities_for(@item)
         end
-
-        @selected_preview_pet_type = load_selected_preview_pet_type
-        @preview_pet_type = load_preview_pet_type
-
-        @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)
-
-        @preview_error = validate_preview
       end
 
       format.gif do
@@ -199,38 +188,6 @@ class ItemsController < ApplicationController
         SwfAsset.preload_manifests(swf_assets)
       end
   end
-
-  def load_selected_preview_pet_type
-    color_id = params.dig(:preview, :color_id)
-    species_id = params.dig(:preview, :species_id)
-
-    return load_default_preview_pet_type if color_id.nil? || species_id.nil?
-
-    PetType.find_or_initialize_by(color_id:, species_id:)
-  end
-
-  def load_preview_pet_type
-    if @selected_preview_pet_type.persisted?
-      @selected_preview_pet_type
-    else
-      load_default_preview_pet_type
-    end
-  end
-
-  def load_default_preview_pet_type
-    PetType.find_by_color_id_and_species_id(
-      Color.find_by_name("Blue"),
-      Species.find_by_name("Acara"),
-    )
-  end
-
-  def validate_preview
-    if @selected_preview_pet_type.new_record?
-      :pet_type_does_not_exist
-    elsif @item_layers.empty?
-      :no_item_data
-    end
-  end
   
   def search_error(e)
     @items = []

app/helpers/items_helper.rb

@@ -260,15 +260,5 @@ 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,2 +1,15 @@
-// eslint-disable-next-line no-console
+import React from "react";
-console.log("OwO!");
+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,
+);

app/models/item.rb

@@ -593,10 +593,6 @@ 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,27 +13,7 @@
     how we handle zones. Until then, these items will be <em>very</em> buggy,
     sorry!
 
-= turbo_frame_tag "item-preview" do
+#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
-
-  = form_for item_path(@item), method: :get, class: "species-color-picker",
-    data: {"is-valid": @preview_error.nil?} do |f|
-    - if @preview_error == :pet_type_does_not_exist
-      %span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
-    - elsif @preview_error == :no_item_data
-      %span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
-
-    = select_tag "preview[color_id]",
-      options_from_collection_for_select(Color.funny.alphabetical,
-        "id", "human_name", @selected_preview_pet_type.color_id)
-    = select_tag "preview[species_id]",
-      options_from_collection_for_select(Species.alphabetical,
-        "id", "human_name", @selected_preview_pet_type.species_id)
-    = submit_tag "Go", name: nil
 
 - unless @contributors_with_counts.empty?
   #item-contributors