From 3ebbfc49676d92f4750e5997c4daff17ea02f55a Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Tue, 30 Jan 2024 06:21:32 -0800 Subject: [PATCH] Move alt style state into the outfit state This still doesn't _do_ anything, except that you can see the URL change when you switch between styles. Just a step forward is all! --- .../wardrobe-2020/WardrobePage/OutfitControls.js | 1 + .../wardrobe-2020/WardrobePage/PosePicker.js | 16 ++++++++++------ .../wardrobe-2020/WardrobePage/useOutfitState.js | 13 ++++++++++++- .../wardrobe-2020/loaders/alt-styles.js | 8 ++++---- 4 files changed, 27 insertions(+), 11 deletions(-) diff --git a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js index 52d3f088..263a0ea0 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js +++ b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js @@ -233,6 +233,7 @@ function OutfitControls({ speciesId={outfitState.speciesId} colorId={outfitState.colorId} pose={outfitState.pose} + altStyleId={outfitState.altStyleId} appearanceId={outfitState.appearanceId} dispatchToOutfit={dispatchToOutfit} onLockFocus={onLockFocus} diff --git a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js index d88ba92b..cf364216 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js +++ b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js @@ -66,6 +66,7 @@ function PosePicker({ speciesId, colorId, pose, + altStyleId, appearanceId, dispatchToOutfit, onLockFocus, @@ -90,8 +91,7 @@ function PosePicker({ const [isOpen, setIsOpen] = React.useState(false); const [tabIndex, setTabIndex] = React.useState(0); - const [styleId, setStyleId] = React.useState(null); - const altStyle = altStyles.find((s) => s.id === styleId); + const altStyle = altStyles.find((s) => s.id === altStyleId); const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" }); @@ -172,10 +172,14 @@ function PosePicker({ (p) => p.isAvailable && STANDARD_POSES.includes(p.pose), ).length; - const onChange = (e) => { + const onChangePose = (e) => { dispatchToOutfit({ type: "setPose", pose: e.target.value }); }; + const onChangeStyle = (altStyleId) => { + dispatchToOutfit({ type: "setStyle", altStyleId }); + }; + return ( {numStandardPoses == 0 && ( @@ -260,9 +264,9 @@ function PosePicker({ diff --git a/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js b/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js index 5c4073cd..4d0f4f9d 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js +++ b/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js @@ -113,7 +113,8 @@ function useOutfitState() { // IDs. It's more convenient to manage them as a Set in state, but most // callers will find it more convenient to access them as arrays! e.g. for // `.map()`. - const { id, name, speciesId, colorId, pose, appearanceId } = outfitState; + const { id, name, speciesId, colorId, pose, altStyleId, appearanceId } = + outfitState; const wornItemIds = Array.from(outfitState.wornItemIds); const closetedItemIds = Array.from(outfitState.closetedItemIds); const allItemIds = [...wornItemIds, ...closetedItemIds]; @@ -236,6 +237,7 @@ function useOutfitState() { speciesId, colorId, pose, + altStyleId, appearanceId, url, @@ -351,6 +353,10 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => { // particular about which version of the pose to show if more than one. state.appearanceId = action.appearanceId || null; }); + case "setStyle": + return produce(baseState, (state) => { + state.altStyleId = action.altStyleId; + }); case "resetToSavedOutfitData": return getOutfitStateFromOutfitData(action.savedOutfitData); default: @@ -417,6 +423,7 @@ function readOutfitStateFromSearchParams(pathname, searchParams) { speciesId: searchParams.get("species") || "1", colorId: searchParams.get("color") || "8", pose: searchParams.get("pose") || "HAPPY_FEM", + altStyleId: searchParams.get("style") || null, appearanceId: searchParams.get("state") || null, wornItemIds: new Set(searchParams.getAll("objects[]")), closetedItemIds: new Set(searchParams.getAll("closet[]")), @@ -640,6 +647,7 @@ function buildOutfitQueryString(outfitState) { speciesId, colorId, pose, + altStyleId, appearanceId, wornItemIds, closetedItemIds, @@ -657,6 +665,9 @@ function buildOutfitQueryString(outfitState) { for (const itemId of closetedItemIds) { params.append("closet[]", itemId); } + if (altStyleId != null) { + params.append("style", altStyleId); + } if (appearanceId != null) { // `state` is an old name for compatibility with old-style DTI URLs. It // refers to "PetState", the database table name for pet appearances. diff --git a/app/javascript/wardrobe-2020/loaders/alt-styles.js b/app/javascript/wardrobe-2020/loaders/alt-styles.js index 659f44ce..4f7d1f76 100644 --- a/app/javascript/wardrobe-2020/loaders/alt-styles.js +++ b/app/javascript/wardrobe-2020/loaders/alt-styles.js @@ -28,10 +28,10 @@ function normalizeAltStyles(altStylesData) { function normalizeAltStyle(altStyleData) { return { - id: altStyleData.id, - speciesId: altStyleData.species_id, - colorId: altStyleData.color_id, - bodyId: altStyleData.body_id, + id: String(altStyleData.id), + speciesId: String(altStyleData.species_id), + colorId: String(altStyleData.color_id), + bodyId: String(altStyleData.body_id), seriesName: altStyleData.series_name, adjectiveName: altStyleData.adjective_name, thumbnailUrl: altStyleData.thumbnail_url,