Rename {Item -> Appearance}LayerSupportModal
In preparation for extending it to non-item layers? 👀
This commit is contained in:
parent
2617052da0
commit
e8a2b8ba28
3 changed files with 58 additions and 60 deletions
|
|
@ -27,7 +27,7 @@ import {
|
|||
} from "@chakra-ui/react";
|
||||
import { ChevronRightIcon, ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
|
||||
import ItemLayerSupportUploadModal from "./ItemLayerSupportUploadModal";
|
||||
import AppearanceLayerSupportUploadModal from "./AppearanceLayerSupportUploadModal";
|
||||
import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
|
||||
import { OutfitLayers } from "../../components/OutfitPreview";
|
||||
import SpeciesColorPicker from "../../components/SpeciesColorPicker";
|
||||
|
|
@ -37,19 +37,19 @@ import useOutfitAppearance, {
|
|||
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.
|
||||
*/
|
||||
function ItemLayerSupportModal({
|
||||
function AppearanceLayerSupportModal({
|
||||
item,
|
||||
itemLayer,
|
||||
layer,
|
||||
outfitState, // speciesId, colorId, pose
|
||||
isOpen,
|
||||
onClose,
|
||||
}) {
|
||||
const [selectedBodyId, setSelectedBodyId] = React.useState(itemLayer.bodyId);
|
||||
const [selectedBodyId, setSelectedBodyId] = React.useState(layer.bodyId);
|
||||
const [selectedKnownGlitches, setSelectedKnownGlitches] = React.useState(
|
||||
itemLayer.knownGlitches
|
||||
layer.knownGlitches
|
||||
);
|
||||
|
||||
const [previewBiology, setPreviewBiology] = React.useState({
|
||||
|
|
@ -121,7 +121,7 @@ function ItemLayerSupportModal({
|
|||
`,
|
||||
{
|
||||
variables: {
|
||||
layerId: itemLayer.id,
|
||||
layerId: layer.id,
|
||||
bodyId: selectedBodyId,
|
||||
knownGlitches: selectedKnownGlitches,
|
||||
supportSecret,
|
||||
|
|
@ -134,7 +134,7 @@ function ItemLayerSupportModal({
|
|||
onClose();
|
||||
toast({
|
||||
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
|
||||
// loading them, but, ehhh…
|
||||
const [newManifestUrl, oldManifestUrl] = convertSwfUrlToPossibleManifestUrls(
|
||||
itemLayer.swfUrl
|
||||
layer.swfUrl
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -153,18 +153,18 @@ function ItemLayerSupportModal({
|
|||
<ModalOverlay>
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
Layer {itemLayer.id}: {item.name}
|
||||
Layer {layer.id}: {item.name}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Metadata>
|
||||
<MetadataLabel>DTI ID:</MetadataLabel>
|
||||
<MetadataValue>{itemLayer.id}</MetadataValue>
|
||||
<MetadataValue>{layer.id}</MetadataValue>
|
||||
<MetadataLabel>Neopets ID:</MetadataLabel>
|
||||
<MetadataValue>{itemLayer.remoteId}</MetadataValue>
|
||||
<MetadataValue>{layer.remoteId}</MetadataValue>
|
||||
<MetadataLabel>Zone:</MetadataLabel>
|
||||
<MetadataValue>
|
||||
{itemLayer.zone.label} ({itemLayer.zone.id})
|
||||
{layer.zone.label} ({layer.zone.id})
|
||||
</MetadataValue>
|
||||
<MetadataLabel>Assets:</MetadataLabel>
|
||||
<MetadataValue>
|
||||
|
|
@ -189,12 +189,12 @@ function ItemLayerSupportModal({
|
|||
</Button>
|
||||
</HStack>
|
||||
<HStack spacing="2" marginTop="1">
|
||||
{itemLayer.canvasMovieLibraryUrl ? (
|
||||
{layer.canvasMovieLibraryUrl ? (
|
||||
<Button
|
||||
as="a"
|
||||
size="xs"
|
||||
target="_blank"
|
||||
href={itemLayer.canvasMovieLibraryUrl}
|
||||
href={layer.canvasMovieLibraryUrl}
|
||||
colorScheme="teal"
|
||||
>
|
||||
Movie <ExternalLinkIcon ml="1" />
|
||||
|
|
@ -204,12 +204,12 @@ function ItemLayerSupportModal({
|
|||
No Movie
|
||||
</Button>
|
||||
)}
|
||||
{itemLayer.svgUrl ? (
|
||||
{layer.svgUrl ? (
|
||||
<Button
|
||||
as="a"
|
||||
size="xs"
|
||||
target="_blank"
|
||||
href={itemLayer.svgUrl}
|
||||
href={layer.svgUrl}
|
||||
colorScheme="teal"
|
||||
>
|
||||
SVG <ExternalLinkIcon ml="1" />
|
||||
|
|
@ -219,12 +219,12 @@ function ItemLayerSupportModal({
|
|||
No SVG
|
||||
</Button>
|
||||
)}
|
||||
{itemLayer.imageUrl ? (
|
||||
{layer.imageUrl ? (
|
||||
<Button
|
||||
as="a"
|
||||
size="xs"
|
||||
target="_blank"
|
||||
href={itemLayer.imageUrl}
|
||||
href={layer.imageUrl}
|
||||
colorScheme="teal"
|
||||
>
|
||||
PNG <ExternalLinkIcon ml="1" />
|
||||
|
|
@ -238,7 +238,7 @@ function ItemLayerSupportModal({
|
|||
as="a"
|
||||
size="xs"
|
||||
target="_blank"
|
||||
href={itemLayer.swfUrl}
|
||||
href={layer.swfUrl}
|
||||
colorScheme="teal"
|
||||
>
|
||||
SWF <ExternalLinkIcon ml="1" />
|
||||
|
|
@ -251,9 +251,9 @@ function ItemLayerSupportModal({
|
|||
>
|
||||
Upload PNG <ChevronRightIcon />
|
||||
</Button>
|
||||
<ItemLayerSupportUploadModal
|
||||
<AppearanceLayerSupportUploadModal
|
||||
item={item}
|
||||
itemLayer={itemLayer}
|
||||
layer={layer}
|
||||
isOpen={uploadModalIsOpen}
|
||||
onClose={() => setUploadModalIsOpen(false)}
|
||||
/>
|
||||
|
|
@ -261,9 +261,9 @@ function ItemLayerSupportModal({
|
|||
</MetadataValue>
|
||||
</Metadata>
|
||||
<Box height="8" />
|
||||
<ItemLayerSupportPetCompatibilityFields
|
||||
<AppearanceLayerSupportPetCompatibilityFields
|
||||
item={item}
|
||||
itemLayer={itemLayer}
|
||||
layer={layer}
|
||||
outfitState={outfitState}
|
||||
selectedBodyId={selectedBodyId}
|
||||
previewBiology={previewBiology}
|
||||
|
|
@ -271,15 +271,15 @@ function ItemLayerSupportModal({
|
|||
onChangePreviewBiology={setPreviewBiology}
|
||||
/>
|
||||
<Box height="8" />
|
||||
<ItemLayerSupportKnownGlitchesFields
|
||||
<AppearanceLayerSupportKnownGlitchesFields
|
||||
selectedKnownGlitches={selectedKnownGlitches}
|
||||
onChange={setSelectedKnownGlitches}
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<ItemLayerSupportModalRemoveButton
|
||||
<AppearanceLayerSupportModalRemoveButton
|
||||
item={item}
|
||||
itemLayer={itemLayer}
|
||||
layer={layer}
|
||||
outfitState={outfitState}
|
||||
onRemoveSuccess={onClose}
|
||||
/>
|
||||
|
|
@ -310,9 +310,9 @@ function ItemLayerSupportModal({
|
|||
);
|
||||
}
|
||||
|
||||
function ItemLayerSupportPetCompatibilityFields({
|
||||
function AppearanceLayerSupportPetCompatibilityFields({
|
||||
item,
|
||||
itemLayer,
|
||||
layer,
|
||||
outfitState,
|
||||
selectedBodyId,
|
||||
previewBiology,
|
||||
|
|
@ -386,7 +386,7 @@ function ItemLayerSupportPetCompatibilityFields({
|
|||
>
|
||||
<OutfitLayers
|
||||
loading={loading}
|
||||
visibleLayers={[...biologyLayers, itemLayer]}
|
||||
visibleLayers={[...biologyLayers, layer]}
|
||||
/>
|
||||
</Box>
|
||||
<SpeciesColorPicker
|
||||
|
|
@ -421,7 +421,7 @@ function ItemLayerSupportPetCompatibilityFields({
|
|||
);
|
||||
}
|
||||
|
||||
function ItemLayerSupportKnownGlitchesFields({
|
||||
function AppearanceLayerSupportKnownGlitchesFields({
|
||||
selectedKnownGlitches,
|
||||
onChange,
|
||||
}) {
|
||||
|
|
@ -474,9 +474,9 @@ function ItemLayerSupportKnownGlitchesFields({
|
|||
);
|
||||
}
|
||||
|
||||
function ItemLayerSupportModalRemoveButton({
|
||||
function AppearanceLayerSupportModalRemoveButton({
|
||||
item,
|
||||
itemLayer,
|
||||
layer,
|
||||
outfitState,
|
||||
onRemoveSuccess,
|
||||
}) {
|
||||
|
|
@ -486,7 +486,7 @@ function ItemLayerSupportModalRemoveButton({
|
|||
|
||||
const [mutate, { loading, error }] = useMutation(
|
||||
gql`
|
||||
mutation ItemLayerSupportRemoveButton(
|
||||
mutation AppearanceLayerSupportRemoveButton(
|
||||
$layerId: ID!
|
||||
$itemId: ID!
|
||||
$outfitSpeciesId: ID!
|
||||
|
|
@ -522,7 +522,7 @@ function ItemLayerSupportModalRemoveButton({
|
|||
`,
|
||||
{
|
||||
variables: {
|
||||
layerId: itemLayer.id,
|
||||
layerId: layer.id,
|
||||
itemId: item.id,
|
||||
outfitSpeciesId: outfitState.speciesId,
|
||||
outfitColorId: outfitState.colorId,
|
||||
|
|
@ -533,7 +533,7 @@ function ItemLayerSupportModalRemoveButton({
|
|||
onRemoveSuccess();
|
||||
toast({
|
||||
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>
|
||||
<ModalCloseButton />
|
||||
<ModalHeader>
|
||||
Remove Layer {itemLayer.id} ({itemLayer.zone.label}) from{" "}
|
||||
{item.name}?
|
||||
Remove Layer {layer.id} ({layer.zone.label}) from {item.name}?
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<Box as="p" marginBottom="4">
|
||||
This will permanently-ish remove Layer {itemLayer.id} (
|
||||
{itemLayer.zone.label}) from this item.
|
||||
This will permanently-ish remove Layer {layer.id} (
|
||||
{layer.zone.label}) from this item.
|
||||
</Box>
|
||||
<Box as="p" marginBottom="4">
|
||||
If you remove a correct layer by mistake, re-modeling should fix
|
||||
|
|
@ -563,8 +562,7 @@ function ItemLayerSupportModalRemoveButton({
|
|||
before proceeding!
|
||||
</Box>
|
||||
<Box as="p" marginBottom="4">
|
||||
Are you sure you want to remove Layer {itemLayer.id} from this
|
||||
item?
|
||||
Are you sure you want to remove Layer {layer.id} from this item?
|
||||
</Box>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
|
|
@ -625,4 +623,4 @@ function convertSwfUrlToPossibleManifestUrls(swfUrl) {
|
|||
];
|
||||
}
|
||||
|
||||
export default ItemLayerSupportModal;
|
||||
export default AppearanceLayerSupportModal;
|
||||
|
|
@ -19,11 +19,11 @@ import { safeImageUrl } from "../../util";
|
|||
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,
|
||||
* 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 [imageOnBlackUrl, setImageOnBlackUrl] = React.useState(null);
|
||||
const [imageOnWhiteUrl, setImageOnWhiteUrl] = React.useState(null);
|
||||
|
|
@ -93,7 +93,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
|
|||
setIsUploading(true);
|
||||
setUploadError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/uploadLayerImage?layerId=${itemLayer.id}`, {
|
||||
const res = await fetch(`/api/uploadLayerImage?layerId=${layer.id}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"DTI-Support-Secret": supportSecret,
|
||||
|
|
@ -122,7 +122,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
|
|||
// update, but not these!) Ultimately the eviction is the only
|
||||
// reliable method I found :/
|
||||
apolloClient.cache.evict({
|
||||
id: `AppearanceLayer:${itemLayer.id}`,
|
||||
id: `AppearanceLayer:${layer.id}`,
|
||||
fieldName: "imageUrl",
|
||||
});
|
||||
} catch (e) {
|
||||
|
|
@ -132,7 +132,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
|
|||
}, [
|
||||
imageWithAlphaBlob,
|
||||
supportSecret,
|
||||
itemLayer.id,
|
||||
layer.id,
|
||||
toast,
|
||||
onClose,
|
||||
apolloClient.cache,
|
||||
|
|
@ -163,14 +163,14 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
|
|||
textAlign="center"
|
||||
>
|
||||
{(step === 1 || step === 2) && (
|
||||
<ItemLayerSupportScreenshotStep
|
||||
itemLayer={itemLayer}
|
||||
<AppearanceLayerSupportScreenshotStep
|
||||
layer={layer}
|
||||
step={step}
|
||||
onUpload={onUpload}
|
||||
/>
|
||||
)}
|
||||
{step === 3 && (
|
||||
<ItemLayerSupportReviewStep
|
||||
<AppearanceLayerSupportReviewStep
|
||||
imageWithAlphaUrl={imageWithAlphaUrl}
|
||||
numWarnings={numWarnings}
|
||||
conflictMode={conflictMode}
|
||||
|
|
@ -211,7 +211,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
|
|||
);
|
||||
}
|
||||
|
||||
function ItemLayerSupportScreenshotStep({ itemLayer, step, onUpload }) {
|
||||
function AppearanceLayerSupportScreenshotStep({ layer, step, onUpload }) {
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
|
|
@ -250,15 +250,15 @@ function ItemLayerSupportScreenshotStep({ itemLayer, step, onUpload }) {
|
|||
Chrome help <ExternalLinkIcon marginLeft="1" />
|
||||
</Button>
|
||||
</Box>
|
||||
<ItemLayerSupportFlashPlayer
|
||||
swfUrl={itemLayer.swfUrl}
|
||||
<AppearanceLayerSupportFlashPlayer
|
||||
swfUrl={layer.swfUrl}
|
||||
backgroundColor={step === 1 ? "black" : "white"}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemLayerSupportReviewStep({
|
||||
function AppearanceLayerSupportReviewStep({
|
||||
imageWithAlphaUrl,
|
||||
numWarnings,
|
||||
conflictMode,
|
||||
|
|
@ -326,7 +326,7 @@ function ItemLayerSupportReviewStep({
|
|||
);
|
||||
}
|
||||
|
||||
function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
|
||||
function AppearanceLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
|
||||
const [isVisible, setIsVisible] = React.useState(null);
|
||||
const regionRef = React.useRef(null);
|
||||
|
||||
|
|
@ -631,4 +631,4 @@ function computeSaturation(r, g, b) {
|
|||
return s;
|
||||
}
|
||||
|
||||
export default ItemLayerSupportUploadModal;
|
||||
export default AppearanceLayerSupportUploadModal;
|
||||
|
|
@ -2,7 +2,7 @@ import * as React from "react";
|
|||
import { ClassNames } from "@emotion/react";
|
||||
import { Box, useColorModeValue, useDisclosure } from "@chakra-ui/react";
|
||||
import { EditIcon } from "@chakra-ui/icons";
|
||||
import ItemLayerSupportModal from "./ItemLayerSupportModal";
|
||||
import AppearanceLayerSupportModal from "./AppearanceLayerSupportModal";
|
||||
import { OutfitLayers } from "../../components/OutfitPreview";
|
||||
|
||||
function ItemSupportAppearanceLayer({
|
||||
|
|
@ -83,9 +83,9 @@ function ItemSupportAppearanceLayer({
|
|||
</Box>
|
||||
<Box>Neopets ID: {itemLayer.remoteId}</Box>
|
||||
<Box>DTI ID: {itemLayer.id}</Box>
|
||||
<ItemLayerSupportModal
|
||||
<AppearanceLayerSupportModal
|
||||
item={item}
|
||||
itemLayer={itemLayer}
|
||||
layer={itemLayer}
|
||||
outfitState={outfitState}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
|
|
|
|||
Loading…
Reference in a new issue