Emi Matchu
0e314482f7
I haven't been running Prettier consistently on things in this project. Now, it's quick-runnable, and I've got it on everything! Also, I just think tabs are the right default for this kind of thing, and I'm glad to get to switch over to it! (In `package.json`.)
582 lines
13 KiB
JavaScript
582 lines
13 KiB
JavaScript
import React from "react";
|
|
import gql from "graphql-tag";
|
|
import { useMutation, useQuery } from "@apollo/client";
|
|
import {
|
|
Box,
|
|
Button,
|
|
IconButton,
|
|
Select,
|
|
Spinner,
|
|
Switch,
|
|
Wrap,
|
|
WrapItem,
|
|
useDisclosure,
|
|
UnorderedList,
|
|
ListItem,
|
|
} from "@chakra-ui/react";
|
|
import {
|
|
ArrowBackIcon,
|
|
ArrowForwardIcon,
|
|
CheckCircleIcon,
|
|
EditIcon,
|
|
} from "@chakra-ui/icons";
|
|
|
|
import HangerSpinner from "../../components/HangerSpinner";
|
|
import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
|
|
import useSupport from "./useSupport";
|
|
import AppearanceLayerSupportModal from "./AppearanceLayerSupportModal";
|
|
import { petAppearanceForPosePickerFragment } from "../PosePicker";
|
|
|
|
function PosePickerSupport({
|
|
speciesId,
|
|
colorId,
|
|
pose,
|
|
appearanceId,
|
|
initialFocusRef,
|
|
dispatchToOutfit,
|
|
}) {
|
|
const { loading, error, data } = useQuery(
|
|
gql`
|
|
query PosePickerSupport($speciesId: ID!, $colorId: ID!) {
|
|
petAppearances(speciesId: $speciesId, colorId: $colorId) {
|
|
id
|
|
pose
|
|
isGlitched
|
|
layers {
|
|
id
|
|
zone {
|
|
id
|
|
label
|
|
}
|
|
|
|
# For AppearanceLayerSupportModal
|
|
remoteId
|
|
bodyId
|
|
swfUrl
|
|
svgUrl
|
|
imageUrl: imageUrlV2(idealSize: SIZE_600)
|
|
canvasMovieLibraryUrl
|
|
}
|
|
restrictedZones {
|
|
id
|
|
label
|
|
}
|
|
|
|
# For AppearanceLayerSupportModal to know the name
|
|
species {
|
|
id
|
|
name
|
|
}
|
|
color {
|
|
id
|
|
name
|
|
}
|
|
|
|
# Also, anything the PosePicker wants that isn't here, so that we
|
|
# don't have to refetch anything when we change the canonical poses.
|
|
...PetAppearanceForPosePicker
|
|
}
|
|
|
|
...CanonicalPetAppearances
|
|
}
|
|
${canonicalPetAppearancesFragment}
|
|
${petAppearanceForPosePickerFragment}
|
|
`,
|
|
{ variables: { speciesId, colorId } },
|
|
);
|
|
|
|
// Resize the Popover when we toggle loading state, because it probably will
|
|
// affect the content size. appearanceId might also affect content size, if
|
|
// it occupies different zones.
|
|
//
|
|
// NOTE: This also triggers an additional necessary resize when the component
|
|
// first mounts, because PosePicker lazy-loads it, so it actually
|
|
// mounting affects size too.
|
|
React.useLayoutEffect(() => {
|
|
// HACK: To trigger a Popover resize, we simulate a window resize event,
|
|
// because Popover listens for window resizes to reposition itself.
|
|
// I've also filed an issue requesting an official API!
|
|
// https://github.com/chakra-ui/chakra-ui/issues/1853
|
|
window.dispatchEvent(new Event("resize"));
|
|
}, [loading, appearanceId]);
|
|
|
|
const canonicalAppearanceIdsByPose = {
|
|
HAPPY_MASC: data?.happyMasc?.id,
|
|
SAD_MASC: data?.sadMasc?.id,
|
|
SICK_MASC: data?.sickMasc?.id,
|
|
HAPPY_FEM: data?.happyFem?.id,
|
|
SAD_FEM: data?.sadFem?.id,
|
|
SICK_FEM: data?.sickFem?.id,
|
|
UNCONVERTED: data?.unconverted?.id,
|
|
UNKNOWN: data?.unknown?.id,
|
|
};
|
|
const canonicalAppearanceIds = Object.values(
|
|
canonicalAppearanceIdsByPose,
|
|
).filter((id) => id);
|
|
|
|
const providedAppearanceId = appearanceId;
|
|
if (!providedAppearanceId) {
|
|
appearanceId = canonicalAppearanceIdsByPose[pose];
|
|
}
|
|
|
|
// If you don't already have `appearanceId` in the outfit state, opening up
|
|
// PosePickerSupport adds it! That way, if you make changes that affect the
|
|
// canonical poses, we'll still stay navigated to this one.
|
|
React.useEffect(() => {
|
|
if (!providedAppearanceId && appearanceId) {
|
|
dispatchToOutfit({
|
|
type: "setPose",
|
|
pose,
|
|
appearanceId,
|
|
});
|
|
}
|
|
}, [providedAppearanceId, appearanceId, pose, dispatchToOutfit]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Box display="flex" justifyContent="center">
|
|
<HangerSpinner size="sm" />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<Box color="red.400" marginTop="8">
|
|
{error.message}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const currentPetAppearance = data.petAppearances.find(
|
|
(pa) => pa.id === appearanceId,
|
|
);
|
|
if (!currentPetAppearance) {
|
|
return (
|
|
<Box color="red.400" marginTop="8">
|
|
Pet appearance with ID {JSON.stringify(appearanceId)} not found
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<PosePickerSupportNavigator
|
|
petAppearances={data.petAppearances}
|
|
currentPetAppearance={currentPetAppearance}
|
|
canonicalAppearanceIds={canonicalAppearanceIds}
|
|
dropdownRef={initialFocusRef}
|
|
dispatchToOutfit={dispatchToOutfit}
|
|
/>
|
|
<Metadata
|
|
fontSize="sm"
|
|
// Build a new copy of this tree when the appearance changes, to reset
|
|
// things like element focus and mutation state!
|
|
key={currentPetAppearance.id}
|
|
>
|
|
<MetadataLabel>DTI ID:</MetadataLabel>
|
|
<MetadataValue>{appearanceId}</MetadataValue>
|
|
<MetadataLabel>Pose:</MetadataLabel>
|
|
<MetadataValue>
|
|
<PosePickerSupportPoseFields
|
|
petAppearance={currentPetAppearance}
|
|
speciesId={speciesId}
|
|
colorId={colorId}
|
|
/>
|
|
</MetadataValue>
|
|
<MetadataLabel>Layers:</MetadataLabel>
|
|
<MetadataValue>
|
|
<Wrap spacing="1">
|
|
{currentPetAppearance.layers
|
|
.map((layer) => [`${layer.zone.label} (${layer.zone.id})`, layer])
|
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
|
.map(([text, layer]) => (
|
|
<WrapItem key={layer.id}>
|
|
<PetLayerSupportLink
|
|
outfitState={{ speciesId, colorId, pose }}
|
|
petAppearance={currentPetAppearance}
|
|
layer={layer}
|
|
>
|
|
{text}
|
|
<EditIcon marginLeft="1" />
|
|
</PetLayerSupportLink>
|
|
</WrapItem>
|
|
))}
|
|
</Wrap>
|
|
</MetadataValue>
|
|
<MetadataLabel>Restricts:</MetadataLabel>
|
|
<MetadataValue maxHeight="64" overflowY="auto">
|
|
{currentPetAppearance.restrictedZones.length > 0 ? (
|
|
<UnorderedList>
|
|
{currentPetAppearance.restrictedZones
|
|
.map((zone) => `${zone.label} (${zone.id})`)
|
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
|
.map((zoneText) => (
|
|
<ListItem key={zoneText}>{zoneText}</ListItem>
|
|
))}
|
|
</UnorderedList>
|
|
) : (
|
|
<Box fontStyle="italic" opacity="0.8">
|
|
None
|
|
</Box>
|
|
)}
|
|
</MetadataValue>
|
|
</Metadata>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function PetLayerSupportLink({ outfitState, petAppearance, layer, children }) {
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
return (
|
|
<>
|
|
<Button size="xs" onClick={onOpen}>
|
|
{children}
|
|
</Button>
|
|
<AppearanceLayerSupportModal
|
|
outfitState={outfitState}
|
|
petAppearance={petAppearance}
|
|
layer={layer}
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function PosePickerSupportNavigator({
|
|
petAppearances,
|
|
currentPetAppearance,
|
|
canonicalAppearanceIds,
|
|
dropdownRef,
|
|
dispatchToOutfit,
|
|
}) {
|
|
const currentIndex = petAppearances.indexOf(currentPetAppearance);
|
|
const prevPetAppearance = petAppearances[currentIndex - 1];
|
|
const nextPetAppearance = petAppearances[currentIndex + 1];
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
justifyContent="flex-end"
|
|
marginBottom="4"
|
|
// Space for the position-absolute PosePicker mode switcher
|
|
paddingLeft="12"
|
|
>
|
|
<IconButton
|
|
aria-label="Go to previous appearance"
|
|
icon={<ArrowBackIcon />}
|
|
size="sm"
|
|
marginRight="2"
|
|
isDisabled={prevPetAppearance == null}
|
|
onClick={() =>
|
|
dispatchToOutfit({
|
|
type: "setPose",
|
|
pose: prevPetAppearance.pose,
|
|
appearanceId: prevPetAppearance.id,
|
|
})
|
|
}
|
|
/>
|
|
<Select
|
|
size="sm"
|
|
width="auto"
|
|
value={currentPetAppearance.id}
|
|
ref={dropdownRef}
|
|
onChange={(e) => {
|
|
const id = e.target.value;
|
|
const petAppearance = petAppearances.find((pa) => pa.id === id);
|
|
dispatchToOutfit({
|
|
type: "setPose",
|
|
pose: petAppearance.pose,
|
|
appearanceId: petAppearance.id,
|
|
});
|
|
}}
|
|
>
|
|
{petAppearances.map((pa) => (
|
|
<option key={pa.id} value={pa.id}>
|
|
{POSE_NAMES[pa.pose]}{" "}
|
|
{canonicalAppearanceIds.includes(pa.id) && "⭐️"}
|
|
{pa.isGlitched && "👾"} ({pa.id})
|
|
</option>
|
|
))}
|
|
</Select>
|
|
<IconButton
|
|
aria-label="Go to next appearance"
|
|
icon={<ArrowForwardIcon />}
|
|
size="sm"
|
|
marginLeft="2"
|
|
isDisabled={nextPetAppearance == null}
|
|
onClick={() =>
|
|
dispatchToOutfit({
|
|
type: "setPose",
|
|
pose: nextPetAppearance.pose,
|
|
appearanceId: nextPetAppearance.id,
|
|
})
|
|
}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function PosePickerSupportPoseFields({ petAppearance, speciesId, colorId }) {
|
|
const { supportSecret } = useSupport();
|
|
|
|
const [mutatePose, poseMutation] = useMutation(
|
|
gql`
|
|
mutation PosePickerSupportSetPetAppearancePose(
|
|
$appearanceId: ID!
|
|
$pose: Pose!
|
|
$supportSecret: String!
|
|
) {
|
|
setPetAppearancePose(
|
|
appearanceId: $appearanceId
|
|
pose: $pose
|
|
supportSecret: $supportSecret
|
|
) {
|
|
id
|
|
pose
|
|
}
|
|
}
|
|
`,
|
|
{
|
|
refetchQueries: [
|
|
{
|
|
query: gql`
|
|
query PosePickerSupportRefetchCanonicalAppearances(
|
|
$speciesId: ID!
|
|
$colorId: ID!
|
|
) {
|
|
...CanonicalPetAppearances
|
|
}
|
|
${canonicalPetAppearancesFragment}
|
|
`,
|
|
variables: { speciesId, colorId },
|
|
},
|
|
],
|
|
},
|
|
);
|
|
|
|
const [mutateIsGlitched, isGlitchedMutation] = useMutation(
|
|
gql`
|
|
mutation PosePickerSupportSetPetAppearanceIsGlitched(
|
|
$appearanceId: ID!
|
|
$isGlitched: Boolean!
|
|
$supportSecret: String!
|
|
) {
|
|
setPetAppearanceIsGlitched(
|
|
appearanceId: $appearanceId
|
|
isGlitched: $isGlitched
|
|
supportSecret: $supportSecret
|
|
) {
|
|
id
|
|
isGlitched
|
|
}
|
|
}
|
|
`,
|
|
{
|
|
refetchQueries: [
|
|
{
|
|
query: gql`
|
|
query PosePickerSupportRefetchCanonicalAppearances(
|
|
$speciesId: ID!
|
|
$colorId: ID!
|
|
) {
|
|
...CanonicalPetAppearances
|
|
}
|
|
${canonicalPetAppearancesFragment}
|
|
`,
|
|
variables: { speciesId, colorId },
|
|
},
|
|
],
|
|
},
|
|
);
|
|
|
|
return (
|
|
<Box>
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
<Select
|
|
size="sm"
|
|
value={petAppearance.pose}
|
|
flex="0 1 200px"
|
|
icon={
|
|
poseMutation.loading ? (
|
|
<Spinner />
|
|
) : poseMutation.data ? (
|
|
<CheckCircleIcon />
|
|
) : undefined
|
|
}
|
|
onChange={(e) => {
|
|
const pose = e.target.value;
|
|
mutatePose({
|
|
variables: {
|
|
appearanceId: petAppearance.id,
|
|
pose,
|
|
supportSecret,
|
|
},
|
|
optimisticResponse: {
|
|
__typename: "Mutation",
|
|
setPetAppearancePose: {
|
|
__typename: "PetAppearance",
|
|
id: petAppearance.id,
|
|
pose,
|
|
},
|
|
},
|
|
}).catch((e) => {
|
|
/* Discard errors here; we'll show them in the UI! */
|
|
});
|
|
}}
|
|
isInvalid={poseMutation.error != null}
|
|
>
|
|
{Object.entries(POSE_NAMES).map(([pose, name]) => (
|
|
<option key={pose} value={pose}>
|
|
{name}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
<Select
|
|
size="sm"
|
|
marginLeft="2"
|
|
flex="0 1 150px"
|
|
value={petAppearance.isGlitched}
|
|
icon={
|
|
isGlitchedMutation.loading ? (
|
|
<Spinner />
|
|
) : isGlitchedMutation.data ? (
|
|
<CheckCircleIcon />
|
|
) : undefined
|
|
}
|
|
onChange={(e) => {
|
|
const isGlitched = e.target.value === "true";
|
|
mutateIsGlitched({
|
|
variables: {
|
|
appearanceId: petAppearance.id,
|
|
isGlitched,
|
|
supportSecret,
|
|
},
|
|
optimisticResponse: {
|
|
__typename: "Mutation",
|
|
setPetAppearanceIsGlitched: {
|
|
__typename: "PetAppearance",
|
|
id: petAppearance.id,
|
|
isGlitched,
|
|
},
|
|
},
|
|
}).catch((e) => {
|
|
/* Discard errors here; we'll show them in the UI! */
|
|
});
|
|
}}
|
|
isInvalid={isGlitchedMutation.error != null}
|
|
>
|
|
<option value="false">Valid</option>
|
|
<option value="true">Glitched</option>
|
|
</Select>
|
|
</Box>
|
|
{poseMutation.error && (
|
|
<Box color="red.400">{poseMutation.error.message}</Box>
|
|
)}
|
|
{isGlitchedMutation.error && (
|
|
<Box color="red.400">{isGlitchedMutation.error.message}</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function PosePickerSupportSwitch({ isChecked, onChange }) {
|
|
return (
|
|
<Box as="label" display="flex" flexDirection="row" alignItems="center">
|
|
<Box fontSize="sm">
|
|
<span role="img" aria-label="Support">
|
|
💖
|
|
</span>
|
|
</Box>
|
|
<Switch
|
|
colorScheme="pink"
|
|
marginLeft="1"
|
|
size="sm"
|
|
isChecked={isChecked}
|
|
onChange={onChange}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const POSE_NAMES = {
|
|
HAPPY_MASC: "Happy Masc",
|
|
HAPPY_FEM: "Happy Fem",
|
|
SAD_MASC: "Sad Masc",
|
|
SAD_FEM: "Sad Fem",
|
|
SICK_MASC: "Sick Masc",
|
|
SICK_FEM: "Sick Fem",
|
|
UNCONVERTED: "Unconverted",
|
|
UNKNOWN: "Unknown",
|
|
};
|
|
|
|
const canonicalPetAppearancesFragment = gql`
|
|
fragment CanonicalPetAppearances on Query {
|
|
happyMasc: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: HAPPY_MASC
|
|
) {
|
|
id
|
|
}
|
|
|
|
sadMasc: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: SAD_MASC
|
|
) {
|
|
id
|
|
}
|
|
|
|
sickMasc: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: SICK_MASC
|
|
) {
|
|
id
|
|
}
|
|
|
|
happyFem: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: HAPPY_FEM
|
|
) {
|
|
id
|
|
}
|
|
|
|
sadFem: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: SAD_FEM
|
|
) {
|
|
id
|
|
}
|
|
|
|
sickFem: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: SICK_FEM
|
|
) {
|
|
id
|
|
}
|
|
|
|
unconverted: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: UNCONVERTED
|
|
) {
|
|
id
|
|
}
|
|
|
|
unknown: petAppearance(
|
|
speciesId: $speciesId
|
|
colorId: $colorId
|
|
pose: UNKNOWN
|
|
) {
|
|
id
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default PosePickerSupport;
|