forked from OpenNeo/impress
[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
|
||||
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%
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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!");
|
||||
|
|
|
@ -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: [])
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue