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}
|
||||
colorId={outfitState.colorId}
|
||||
pose={outfitState.pose}
|
||||
altStyleId={outfitState.altStyleId}
|
||||
appearanceId={outfitState.appearanceId}
|
||||
dispatchToOutfit={dispatchToOutfit}
|
||||
onLockFocus={onLockFocus}
|
||||
|
|
|
@ -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 (
|
||||
<Popover
|
||||
placement={placement}
|
||||
|
@ -241,7 +245,7 @@ function PosePicker({
|
|||
<>
|
||||
<PosePickerTable
|
||||
poseInfos={poseInfos}
|
||||
onChange={onChange}
|
||||
onChange={onChangePose}
|
||||
initialFocusRef={initialFocusRef}
|
||||
/>
|
||||
{numStandardPoses == 0 && (
|
||||
|
@ -260,9 +264,9 @@ function PosePicker({
|
|||
</TabPanel>
|
||||
<TabPanel paddingX="4" paddingY="0">
|
||||
<StyleSelect
|
||||
selectedStyleId={styleId}
|
||||
selectedStyleId={altStyleId}
|
||||
altStyles={altStyles}
|
||||
onChange={setStyleId}
|
||||
onChange={onChangeStyle}
|
||||
initialFocusRef={initialFocusRef}
|
||||
/>
|
||||
<StyleExplanation />
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue