[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!
This commit is contained in:
Emi Matchu 2024-06-30 23:09:28 -07:00 committed by Matchu
parent a37dda6af7
commit ea17e76c39
6 changed files with 51 additions and 16 deletions

View file

@ -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%

View file

@ -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

View file

@ -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

View file

@ -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!");

View file

@ -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: [])

View file

@ -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