OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Rename {Item -> Appearance}LayerSupportModal

Browse source 
In preparation for extending it to non-item layers? 👀
This commit is contained in:
Emi Matchu 2021-04-21 21:29:10 -07:00
parent 2617052da0
commit e8a2b8ba28
3 changed files with 58 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/app/WardrobePage/support/ItemLayerSupportModal.js → src/app/WardrobePage/support/AppearanceLayerSupportModal.js
View file

@ -27,7 +27,7 @@ import {
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { ChevronRightIcon, ExternalLinkIcon } from "@chakra-ui/icons"; import { ChevronRightIcon, ExternalLinkIcon } from "@chakra-ui/icons";
import ItemLayerSupportUploadModal from "./ItemLayerSupportUploadModal"; import AppearanceLayerSupportUploadModal from "./AppearanceLayerSupportUploadModal";
import Metadata, { MetadataLabel, MetadataValue } from "./Metadata"; import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
import { OutfitLayers } from "../../components/OutfitPreview"; import { OutfitLayers } from "../../components/OutfitPreview";
import SpeciesColorPicker from "../../components/SpeciesColorPicker"; import SpeciesColorPicker from "../../components/SpeciesColorPicker";
@ -37,19 +37,19 @@ import useOutfitAppearance, {
import useSupport from "./useSupport"; import useSupport from "./useSupport";
/** /**
* ItemLayerSupportModal offers Support info and tools for a specific item * AppearanceLayerSupportModal offers Support info and tools for a specific item
* appearance layer. Open it by clicking a layer from ItemSupportDrawer. * appearance layer. Open it by clicking a layer from ItemSupportDrawer.
*/ */
function ItemLayerSupportModal({ function AppearanceLayerSupportModal({
item, item,
itemLayer, layer,
outfitState, // speciesId, colorId, pose outfitState, // speciesId, colorId, pose
isOpen, isOpen,
onClose, onClose,
}) { }) {
const [selectedBodyId, setSelectedBodyId] = React.useState(itemLayer.bodyId); const [selectedBodyId, setSelectedBodyId] = React.useState(layer.bodyId);
const [selectedKnownGlitches, setSelectedKnownGlitches] = React.useState( const [selectedKnownGlitches, setSelectedKnownGlitches] = React.useState(
itemLayer.knownGlitches layer.knownGlitches
); );
const [previewBiology, setPreviewBiology] = React.useState({ const [previewBiology, setPreviewBiology] = React.useState({
@ -121,7 +121,7 @@ function ItemLayerSupportModal({
`, `,
{ {
variables: { variables: {
layerId: itemLayer.id, layerId: layer.id,
bodyId: selectedBodyId, bodyId: selectedBodyId,
knownGlitches: selectedKnownGlitches, knownGlitches: selectedKnownGlitches,
supportSecret, supportSecret,
@ -134,7 +134,7 @@ function ItemLayerSupportModal({
onClose(); onClose();
toast({ toast({
status: "success", status: "success",
title: `Saved layer ${itemLayer.id}: ${item.name}`, title: `Saved layer ${layer.id}: ${item.name}`,
}); });
}, },
} }
@ -145,7 +145,7 @@ function ItemLayerSupportModal({
// the GraphQL request for non-Support users. We could also just try // the GraphQL request for non-Support users. We could also just try
// loading them, but, ehhh… // loading them, but, ehhh…
const [newManifestUrl, oldManifestUrl] = convertSwfUrlToPossibleManifestUrls( const [newManifestUrl, oldManifestUrl] = convertSwfUrlToPossibleManifestUrls(
itemLayer.swfUrl layer.swfUrl
); );
return ( return (
@ -153,18 +153,18 @@ function ItemLayerSupportModal({
<ModalOverlay> <ModalOverlay>
<ModalContent> <ModalContent>
<ModalHeader> <ModalHeader>
Layer {itemLayer.id}: {item.name} Layer {layer.id}: {item.name}
</ModalHeader> </ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody> <ModalBody>
<Metadata> <Metadata>
<MetadataLabel>DTI ID:</MetadataLabel> <MetadataLabel>DTI ID:</MetadataLabel>
<MetadataValue>{itemLayer.id}</MetadataValue> <MetadataValue>{layer.id}</MetadataValue>
<MetadataLabel>Neopets ID:</MetadataLabel> <MetadataLabel>Neopets ID:</MetadataLabel>
<MetadataValue>{itemLayer.remoteId}</MetadataValue> <MetadataValue>{layer.remoteId}</MetadataValue>
<MetadataLabel>Zone:</MetadataLabel> <MetadataLabel>Zone:</MetadataLabel>
<MetadataValue> <MetadataValue>
{itemLayer.zone.label} ({itemLayer.zone.id}) {layer.zone.label} ({layer.zone.id})
</MetadataValue> </MetadataValue>
<MetadataLabel>Assets:</MetadataLabel> <MetadataLabel>Assets:</MetadataLabel>
<MetadataValue> <MetadataValue>
@ -189,12 +189,12 @@ function ItemLayerSupportModal({
</Button> </Button>
</HStack> </HStack>
<HStack spacing="2" marginTop="1"> <HStack spacing="2" marginTop="1">
{itemLayer.canvasMovieLibraryUrl ? ( {layer.canvasMovieLibraryUrl ? (
<Button <Button
as="a" as="a"
size="xs" size="xs"
target="_blank" target="_blank"
href={itemLayer.canvasMovieLibraryUrl} href={layer.canvasMovieLibraryUrl}
colorScheme="teal" colorScheme="teal"
> >
Movie <ExternalLinkIcon ml="1" /> Movie <ExternalLinkIcon ml="1" />
@ -204,12 +204,12 @@ function ItemLayerSupportModal({
No Movie No Movie
</Button> </Button>
)} )}
{itemLayer.svgUrl ? ( {layer.svgUrl ? (
<Button <Button
as="a" as="a"
size="xs" size="xs"
target="_blank" target="_blank"
href={itemLayer.svgUrl} href={layer.svgUrl}
colorScheme="teal" colorScheme="teal"
> >
SVG <ExternalLinkIcon ml="1" /> SVG <ExternalLinkIcon ml="1" />
@ -219,12 +219,12 @@ function ItemLayerSupportModal({
No SVG No SVG
</Button> </Button>
)} )}
{itemLayer.imageUrl ? ( {layer.imageUrl ? (
<Button <Button
as="a" as="a"
size="xs" size="xs"
target="_blank" target="_blank"
href={itemLayer.imageUrl} href={layer.imageUrl}
colorScheme="teal" colorScheme="teal"
> >
PNG <ExternalLinkIcon ml="1" /> PNG <ExternalLinkIcon ml="1" />
@ -238,7 +238,7 @@ function ItemLayerSupportModal({
as="a" as="a"
size="xs" size="xs"
target="_blank" target="_blank"
href={itemLayer.swfUrl} href={layer.swfUrl}
colorScheme="teal" colorScheme="teal"
> >
SWF <ExternalLinkIcon ml="1" /> SWF <ExternalLinkIcon ml="1" />
@ -251,9 +251,9 @@ function ItemLayerSupportModal({
> >
Upload PNG <ChevronRightIcon /> Upload PNG <ChevronRightIcon />
</Button> </Button>
<ItemLayerSupportUploadModal <AppearanceLayerSupportUploadModal
item={item} item={item}
itemLayer={itemLayer} layer={layer}
isOpen={uploadModalIsOpen} isOpen={uploadModalIsOpen}
onClose={() => setUploadModalIsOpen(false)} onClose={() => setUploadModalIsOpen(false)}
/> />
@ -261,9 +261,9 @@ function ItemLayerSupportModal({
</MetadataValue> </MetadataValue>
</Metadata> </Metadata>
<Box height="8" /> <Box height="8" />
<ItemLayerSupportPetCompatibilityFields <AppearanceLayerSupportPetCompatibilityFields
item={item} item={item}
itemLayer={itemLayer} layer={layer}
outfitState={outfitState} outfitState={outfitState}
selectedBodyId={selectedBodyId} selectedBodyId={selectedBodyId}
previewBiology={previewBiology} previewBiology={previewBiology}
@ -271,15 +271,15 @@ function ItemLayerSupportModal({
onChangePreviewBiology={setPreviewBiology} onChangePreviewBiology={setPreviewBiology}
/> />
<Box height="8" /> <Box height="8" />
<ItemLayerSupportKnownGlitchesFields <AppearanceLayerSupportKnownGlitchesFields
selectedKnownGlitches={selectedKnownGlitches} selectedKnownGlitches={selectedKnownGlitches}
onChange={setSelectedKnownGlitches} onChange={setSelectedKnownGlitches}
/> />
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<ItemLayerSupportModalRemoveButton <AppearanceLayerSupportModalRemoveButton
item={item} item={item}
itemLayer={itemLayer} layer={layer}
outfitState={outfitState} outfitState={outfitState}
onRemoveSuccess={onClose} onRemoveSuccess={onClose}
/> />
@ -310,9 +310,9 @@ function ItemLayerSupportModal({
); );
} }
function ItemLayerSupportPetCompatibilityFields({ function AppearanceLayerSupportPetCompatibilityFields({
item, item,
itemLayer, layer,
outfitState, outfitState,
selectedBodyId, selectedBodyId,
previewBiology, previewBiology,
@ -386,7 +386,7 @@ function ItemLayerSupportPetCompatibilityFields({
> >
<OutfitLayers <OutfitLayers
loading={loading} loading={loading}
visibleLayers={[...biologyLayers, itemLayer]} visibleLayers={[...biologyLayers, layer]}
/> />
</Box> </Box>
<SpeciesColorPicker <SpeciesColorPicker
@ -421,7 +421,7 @@ function ItemLayerSupportPetCompatibilityFields({
); );
} }
function ItemLayerSupportKnownGlitchesFields({ function AppearanceLayerSupportKnownGlitchesFields({
selectedKnownGlitches, selectedKnownGlitches,
onChange, onChange,
}) { }) {
@ -474,9 +474,9 @@ function ItemLayerSupportKnownGlitchesFields({
); );
} }
function ItemLayerSupportModalRemoveButton({ function AppearanceLayerSupportModalRemoveButton({
item, item,
itemLayer, layer,
outfitState, outfitState,
onRemoveSuccess, onRemoveSuccess,
}) { }) {
@ -486,7 +486,7 @@ function ItemLayerSupportModalRemoveButton({
const [mutate, { loading, error }] = useMutation( const [mutate, { loading, error }] = useMutation(
gql` gql`
mutation ItemLayerSupportRemoveButton( mutation AppearanceLayerSupportRemoveButton(
$layerId: ID! $layerId: ID!
$itemId: ID! $itemId: ID!
$outfitSpeciesId: ID! $outfitSpeciesId: ID!
@ -522,7 +522,7 @@ function ItemLayerSupportModalRemoveButton({
`, `,
{ {
variables: { variables: {
layerId: itemLayer.id, layerId: layer.id,
itemId: item.id, itemId: item.id,
outfitSpeciesId: outfitState.speciesId, outfitSpeciesId: outfitState.speciesId,
outfitColorId: outfitState.colorId, outfitColorId: outfitState.colorId,
@ -533,7 +533,7 @@ function ItemLayerSupportModalRemoveButton({
onRemoveSuccess(); onRemoveSuccess();
toast({ toast({
status: "success", status: "success",
title: `Removed layer ${itemLayer.id} from ${item.name}`, title: `Removed layer ${layer.id} from ${item.name}`,
}); });
}, },
} }
@ -549,13 +549,12 @@ function ItemLayerSupportModalRemoveButton({
<ModalContent> <ModalContent>
<ModalCloseButton /> <ModalCloseButton />
<ModalHeader> <ModalHeader>
Remove Layer {itemLayer.id} ({itemLayer.zone.label}) from{" "} Remove Layer {layer.id} ({layer.zone.label}) from {item.name}?
{item.name}?
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
<Box as="p" marginBottom="4"> <Box as="p" marginBottom="4">
This will permanently-ish remove Layer {itemLayer.id} ( This will permanently-ish remove Layer {layer.id} (
{itemLayer.zone.label}) from this item. {layer.zone.label}) from this item.
</Box> </Box>
<Box as="p" marginBottom="4"> <Box as="p" marginBottom="4">
If you remove a correct layer by mistake, re-modeling should fix If you remove a correct layer by mistake, re-modeling should fix
@ -563,8 +562,7 @@ function ItemLayerSupportModalRemoveButton({
before proceeding! before proceeding!
</Box> </Box>
<Box as="p" marginBottom="4"> <Box as="p" marginBottom="4">
Are you sure you want to remove Layer {itemLayer.id} from this Are you sure you want to remove Layer {layer.id} from this item?
item?
</Box> </Box>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
@ -625,4 +623,4 @@ function convertSwfUrlToPossibleManifestUrls(swfUrl) {
]; ];
} }
export default ItemLayerSupportModal; export default AppearanceLayerSupportModal;

28
src/app/WardrobePage/support/ItemLayerSupportUploadModal.js → src/app/WardrobePage/support/AppearanceLayerSupportUploadModal.js
View file

@ -19,11 +19,11 @@ import { safeImageUrl } from "../../util";
import useSupport from "./useSupport"; import useSupport from "./useSupport";
/** /**
* ItemLayerSupportUploadModal helps Support users create and upload PNGs for * AppearanceLayerSupportUploadModal helps Support users create and upload PNGs for
* broken appearance layers. Useful when the auto-converters are struggling, * broken appearance layers. Useful when the auto-converters are struggling,
* e.g. the SWF uses a color filter our server-side Flash player can't support! * e.g. the SWF uses a color filter our server-side Flash player can't support!
*/ */
function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) { function AppearanceLayerSupportUploadModal({ item, layer, isOpen, onClose }) {
const [step, setStep] = React.useState(1); const [step, setStep] = React.useState(1);
const [imageOnBlackUrl, setImageOnBlackUrl] = React.useState(null); const [imageOnBlackUrl, setImageOnBlackUrl] = React.useState(null);
const [imageOnWhiteUrl, setImageOnWhiteUrl] = React.useState(null); const [imageOnWhiteUrl, setImageOnWhiteUrl] = React.useState(null);
@ -93,7 +93,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
setIsUploading(true); setIsUploading(true);
setUploadError(null); setUploadError(null);
try { try {
const res = await fetch(`/api/uploadLayerImage?layerId=${itemLayer.id}`, { const res = await fetch(`/api/uploadLayerImage?layerId=${layer.id}`, {
method: "POST", method: "POST",
headers: { headers: {
"DTI-Support-Secret": supportSecret, "DTI-Support-Secret": supportSecret,
@ -122,7 +122,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
// update, but not these!) Ultimately the eviction is the only // update, but not these!) Ultimately the eviction is the only
// reliable method I found :/ // reliable method I found :/
apolloClient.cache.evict({ apolloClient.cache.evict({
id: `AppearanceLayer:${itemLayer.id}`, id: `AppearanceLayer:${layer.id}`,
fieldName: "imageUrl", fieldName: "imageUrl",
}); });
} catch (e) { } catch (e) {
@ -132,7 +132,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
}, [ }, [
imageWithAlphaBlob, imageWithAlphaBlob,
supportSecret, supportSecret,
itemLayer.id, layer.id,
toast, toast,
onClose, onClose,
apolloClient.cache, apolloClient.cache,
@ -163,14 +163,14 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
textAlign="center" textAlign="center"
> >
{(step === 1 || step === 2) && ( {(step === 1 || step === 2) && (
<ItemLayerSupportScreenshotStep <AppearanceLayerSupportScreenshotStep
itemLayer={itemLayer} layer={layer}
step={step} step={step}
onUpload={onUpload} onUpload={onUpload}
/> />
)} )}
{step === 3 && ( {step === 3 && (
<ItemLayerSupportReviewStep <AppearanceLayerSupportReviewStep
imageWithAlphaUrl={imageWithAlphaUrl} imageWithAlphaUrl={imageWithAlphaUrl}
numWarnings={numWarnings} numWarnings={numWarnings}
conflictMode={conflictMode} conflictMode={conflictMode}
@ -211,7 +211,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
); );
} }
function ItemLayerSupportScreenshotStep({ itemLayer, step, onUpload }) { function AppearanceLayerSupportScreenshotStep({ layer, step, onUpload }) {
return ( return (
<> <>
<Box> <Box>
@ -250,15 +250,15 @@ function ItemLayerSupportScreenshotStep({ itemLayer, step, onUpload }) {
Chrome help <ExternalLinkIcon marginLeft="1" /> Chrome help <ExternalLinkIcon marginLeft="1" />
</Button> </Button>
</Box> </Box>
<ItemLayerSupportFlashPlayer <AppearanceLayerSupportFlashPlayer
swfUrl={itemLayer.swfUrl} swfUrl={layer.swfUrl}
backgroundColor={step === 1 ? "black" : "white"} backgroundColor={step === 1 ? "black" : "white"}
/> />
</> </>
); );
} }
function ItemLayerSupportReviewStep({ function AppearanceLayerSupportReviewStep({
imageWithAlphaUrl, imageWithAlphaUrl,
numWarnings, numWarnings,
conflictMode, conflictMode,
@ -326,7 +326,7 @@ function ItemLayerSupportReviewStep({
); );
} }
function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) { function AppearanceLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
const [isVisible, setIsVisible] = React.useState(null); const [isVisible, setIsVisible] = React.useState(null);
const regionRef = React.useRef(null); const regionRef = React.useRef(null);
@ -631,4 +631,4 @@ function computeSaturation(r, g, b) {
return s; return s;
} }
export default ItemLayerSupportUploadModal; export default AppearanceLayerSupportUploadModal;

6
src/app/WardrobePage/support/ItemSupportAppearanceLayer.js
View file

@ -2,7 +2,7 @@ import * as React from "react";
import { ClassNames } from "@emotion/react"; import { ClassNames } from "@emotion/react";
import { Box, useColorModeValue, useDisclosure } from "@chakra-ui/react"; import { Box, useColorModeValue, useDisclosure } from "@chakra-ui/react";
import { EditIcon } from "@chakra-ui/icons"; import { EditIcon } from "@chakra-ui/icons";
import ItemLayerSupportModal from "./ItemLayerSupportModal"; import AppearanceLayerSupportModal from "./AppearanceLayerSupportModal";
import { OutfitLayers } from "../../components/OutfitPreview"; import { OutfitLayers } from "../../components/OutfitPreview";
function ItemSupportAppearanceLayer({ function ItemSupportAppearanceLayer({
@ -83,9 +83,9 @@ function ItemSupportAppearanceLayer({
</Box> </Box>
<Box>Neopets ID: {itemLayer.remoteId}</Box> <Box>Neopets ID: {itemLayer.remoteId}</Box>
<Box>DTI ID: {itemLayer.id}</Box> <Box>DTI ID: {itemLayer.id}</Box>
<ItemLayerSupportModal <AppearanceLayerSupportModal
item={item} item={item}
itemLayer={itemLayer} layer={itemLayer}
outfitState={outfitState} outfitState={outfitState}
isOpen={isOpen} isOpen={isOpen}
onClose={onClose} onClose={onClose}