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!
This commit is contained in:
parent
741d52175b
commit
3ebbfc4967
4 changed files with 27 additions and 11 deletions
|
@ -233,6 +233,7 @@ function OutfitControls({
|
||||||
speciesId={outfitState.speciesId}
|
speciesId={outfitState.speciesId}
|
||||||
colorId={outfitState.colorId}
|
colorId={outfitState.colorId}
|
||||||
pose={outfitState.pose}
|
pose={outfitState.pose}
|
||||||
|
altStyleId={outfitState.altStyleId}
|
||||||
appearanceId={outfitState.appearanceId}
|
appearanceId={outfitState.appearanceId}
|
||||||
dispatchToOutfit={dispatchToOutfit}
|
dispatchToOutfit={dispatchToOutfit}
|
||||||
onLockFocus={onLockFocus}
|
onLockFocus={onLockFocus}
|
||||||
|
|
|
@ -66,6 +66,7 @@ function PosePicker({
|
||||||
speciesId,
|
speciesId,
|
||||||
colorId,
|
colorId,
|
||||||
pose,
|
pose,
|
||||||
|
altStyleId,
|
||||||
appearanceId,
|
appearanceId,
|
||||||
dispatchToOutfit,
|
dispatchToOutfit,
|
||||||
onLockFocus,
|
onLockFocus,
|
||||||
|
@ -90,8 +91,7 @@ function PosePicker({
|
||||||
const [isOpen, setIsOpen] = React.useState(false);
|
const [isOpen, setIsOpen] = React.useState(false);
|
||||||
const [tabIndex, setTabIndex] = React.useState(0);
|
const [tabIndex, setTabIndex] = React.useState(0);
|
||||||
|
|
||||||
const [styleId, setStyleId] = React.useState(null);
|
const altStyle = altStyles.find((s) => s.id === altStyleId);
|
||||||
const altStyle = altStyles.find((s) => s.id === styleId);
|
|
||||||
|
|
||||||
const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
|
const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
|
||||||
|
|
||||||
|
@ -172,10 +172,14 @@ function PosePicker({
|
||||||
(p) => p.isAvailable && STANDARD_POSES.includes(p.pose),
|
(p) => p.isAvailable && STANDARD_POSES.includes(p.pose),
|
||||||
).length;
|
).length;
|
||||||
|
|
||||||
const onChange = (e) => {
|
const onChangePose = (e) => {
|
||||||
dispatchToOutfit({ type: "setPose", pose: e.target.value });
|
dispatchToOutfit({ type: "setPose", pose: e.target.value });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onChangeStyle = (altStyleId) => {
|
||||||
|
dispatchToOutfit({ type: "setStyle", altStyleId });
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover
|
<Popover
|
||||||
placement={placement}
|
placement={placement}
|
||||||
|
@ -241,7 +245,7 @@ function PosePicker({
|
||||||
<>
|
<>
|
||||||
<PosePickerTable
|
<PosePickerTable
|
||||||
poseInfos={poseInfos}
|
poseInfos={poseInfos}
|
||||||
onChange={onChange}
|
onChange={onChangePose}
|
||||||
initialFocusRef={initialFocusRef}
|
initialFocusRef={initialFocusRef}
|
||||||
/>
|
/>
|
||||||
{numStandardPoses == 0 && (
|
{numStandardPoses == 0 && (
|
||||||
|
@ -260,9 +264,9 @@ function PosePicker({
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel paddingX="4" paddingY="0">
|
<TabPanel paddingX="4" paddingY="0">
|
||||||
<StyleSelect
|
<StyleSelect
|
||||||
selectedStyleId={styleId}
|
selectedStyleId={altStyleId}
|
||||||
altStyles={altStyles}
|
altStyles={altStyles}
|
||||||
onChange={setStyleId}
|
onChange={onChangeStyle}
|
||||||
initialFocusRef={initialFocusRef}
|
initialFocusRef={initialFocusRef}
|
||||||
/>
|
/>
|
||||||
<StyleExplanation />
|
<StyleExplanation />
|
||||||
|
|
|
@ -113,7 +113,8 @@ function useOutfitState() {
|
||||||
// IDs. It's more convenient to manage them as a Set in state, but most
|
// 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
|
// callers will find it more convenient to access them as arrays! e.g. for
|
||||||
// `.map()`.
|
// `.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 wornItemIds = Array.from(outfitState.wornItemIds);
|
||||||
const closetedItemIds = Array.from(outfitState.closetedItemIds);
|
const closetedItemIds = Array.from(outfitState.closetedItemIds);
|
||||||
const allItemIds = [...wornItemIds, ...closetedItemIds];
|
const allItemIds = [...wornItemIds, ...closetedItemIds];
|
||||||
|
@ -236,6 +237,7 @@ function useOutfitState() {
|
||||||
speciesId,
|
speciesId,
|
||||||
colorId,
|
colorId,
|
||||||
pose,
|
pose,
|
||||||
|
altStyleId,
|
||||||
appearanceId,
|
appearanceId,
|
||||||
url,
|
url,
|
||||||
|
|
||||||
|
@ -351,6 +353,10 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => {
|
||||||
// particular about which version of the pose to show if more than one.
|
// particular about which version of the pose to show if more than one.
|
||||||
state.appearanceId = action.appearanceId || null;
|
state.appearanceId = action.appearanceId || null;
|
||||||
});
|
});
|
||||||
|
case "setStyle":
|
||||||
|
return produce(baseState, (state) => {
|
||||||
|
state.altStyleId = action.altStyleId;
|
||||||
|
});
|
||||||
case "resetToSavedOutfitData":
|
case "resetToSavedOutfitData":
|
||||||
return getOutfitStateFromOutfitData(action.savedOutfitData);
|
return getOutfitStateFromOutfitData(action.savedOutfitData);
|
||||||
default:
|
default:
|
||||||
|
@ -417,6 +423,7 @@ function readOutfitStateFromSearchParams(pathname, searchParams) {
|
||||||
speciesId: searchParams.get("species") || "1",
|
speciesId: searchParams.get("species") || "1",
|
||||||
colorId: searchParams.get("color") || "8",
|
colorId: searchParams.get("color") || "8",
|
||||||
pose: searchParams.get("pose") || "HAPPY_FEM",
|
pose: searchParams.get("pose") || "HAPPY_FEM",
|
||||||
|
altStyleId: searchParams.get("style") || null,
|
||||||
appearanceId: searchParams.get("state") || null,
|
appearanceId: searchParams.get("state") || null,
|
||||||
wornItemIds: new Set(searchParams.getAll("objects[]")),
|
wornItemIds: new Set(searchParams.getAll("objects[]")),
|
||||||
closetedItemIds: new Set(searchParams.getAll("closet[]")),
|
closetedItemIds: new Set(searchParams.getAll("closet[]")),
|
||||||
|
@ -640,6 +647,7 @@ function buildOutfitQueryString(outfitState) {
|
||||||
speciesId,
|
speciesId,
|
||||||
colorId,
|
colorId,
|
||||||
pose,
|
pose,
|
||||||
|
altStyleId,
|
||||||
appearanceId,
|
appearanceId,
|
||||||
wornItemIds,
|
wornItemIds,
|
||||||
closetedItemIds,
|
closetedItemIds,
|
||||||
|
@ -657,6 +665,9 @@ function buildOutfitQueryString(outfitState) {
|
||||||
for (const itemId of closetedItemIds) {
|
for (const itemId of closetedItemIds) {
|
||||||
params.append("closet[]", itemId);
|
params.append("closet[]", itemId);
|
||||||
}
|
}
|
||||||
|
if (altStyleId != null) {
|
||||||
|
params.append("style", altStyleId);
|
||||||
|
}
|
||||||
if (appearanceId != null) {
|
if (appearanceId != null) {
|
||||||
// `state` is an old name for compatibility with old-style DTI URLs. It
|
// `state` is an old name for compatibility with old-style DTI URLs. It
|
||||||
// refers to "PetState", the database table name for pet appearances.
|
// refers to "PetState", the database table name for pet appearances.
|
||||||
|
|
|
@ -28,10 +28,10 @@ function normalizeAltStyles(altStylesData) {
|
||||||
|
|
||||||
function normalizeAltStyle(altStyleData) {
|
function normalizeAltStyle(altStyleData) {
|
||||||
return {
|
return {
|
||||||
id: altStyleData.id,
|
id: String(altStyleData.id),
|
||||||
speciesId: altStyleData.species_id,
|
speciesId: String(altStyleData.species_id),
|
||||||
colorId: altStyleData.color_id,
|
colorId: String(altStyleData.color_id),
|
||||||
bodyId: altStyleData.body_id,
|
bodyId: String(altStyleData.body_id),
|
||||||
seriesName: altStyleData.series_name,
|
seriesName: altStyleData.series_name,
|
||||||
adjectiveName: altStyleData.adjective_name,
|
adjectiveName: altStyleData.adjective_name,
|
||||||
thumbnailUrl: altStyleData.thumbnail_url,
|
thumbnailUrl: altStyleData.thumbnail_url,
|
||||||
|
|
Loading…
Reference in a new issue