[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:
parent
a37dda6af7
commit
ea17e76c39
6 changed files with 51 additions and 16 deletions
|
@ -37,3 +37,23 @@ body.items-show
|
||||||
.nc-icon
|
.nc-icon
|
||||||
height: 16px
|
height: 16px
|
||||||
width: 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%
|
||||||
|
|
|
@ -82,6 +82,16 @@ class ItemsController < ApplicationController
|
||||||
group_by_owned
|
group_by_owned
|
||||||
@current_user_quantities = current_user.item_quantities_for(@item)
|
@current_user_quantities = current_user.item_quantities_for(@item)
|
||||||
end
|
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
|
end
|
||||||
|
|
||||||
format.gif do
|
format.gif do
|
||||||
|
|
|
@ -244,5 +244,15 @@ module ItemsHelper
|
||||||
def item_header_user_lists_form_state
|
def item_header_user_lists_form_state
|
||||||
cookies.fetch("DTIItemPageUserListsFormState", "closed")
|
cookies.fetch("DTIItemPageUserListsFormState", "closed")
|
||||||
end
|
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
|
end
|
||||||
|
|
||||||
|
|
|
@ -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,
|
|
||||||
);
|
|
||||||
|
|
|
@ -595,6 +595,10 @@ class Item < ApplicationRecord
|
||||||
end
|
end
|
||||||
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
|
# Given a list of item IDs, return how they look on the given target (either
|
||||||
# a pet type or an alt style).
|
# a pet type or an alt style).
|
||||||
def self.appearances_for(item_ids, target, swf_asset_includes: [])
|
def self.appearances_for(item_ids, target, swf_asset_includes: [])
|
||||||
|
|
|
@ -13,7 +13,11 @@
|
||||||
how we handle zones. Until then, these items will be <em>very</em> buggy,
|
how we handle zones. Until then, these items will be <em>very</em> buggy,
|
||||||
sorry!
|
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?
|
- unless @contributors_with_counts.empty?
|
||||||
#item-contributors
|
#item-contributors
|
||||||
|
|
Loading…
Reference in a new issue