import React from "react"; import { ClassNames } from "@emotion/react"; import { Box, Button, DarkMode, Flex, FormControl, FormHelperText, FormLabel, HStack, IconButton, ListItem, Menu, MenuItem, MenuList, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, Portal, Stack, Switch, Tooltip, UnorderedList, useClipboard, useToast, } from "@chakra-ui/react"; import { ArrowBackIcon, CheckIcon, ChevronDownIcon, DownloadIcon, LinkIcon, SettingsIcon, } from "@chakra-ui/icons"; import { MdPause, MdPlayArrow } from "react-icons/md"; import { getBestImageUrlForLayer } from "../components/OutfitPreview"; import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge"; import PosePicker from "./PosePicker"; import SpeciesColorPicker from "../components/SpeciesColorPicker"; import { loadImage, loadable, useLocalStorage } from "../util"; import useCurrentUser from "../components/useCurrentUser"; import useOutfitAppearance from "../components/useOutfitAppearance"; import OutfitKnownGlitchesBadge from "./OutfitKnownGlitchesBadge"; import usePreferArchive from "../components/usePreferArchive"; const LoadableLayersInfoModal = loadable(() => import("./LayersInfoModal")); /** * OutfitControls is the set of controls layered over the outfit preview, to * control things like species/color and sharing links! */ function OutfitControls({ outfitState, dispatchToOutfit, showAnimationControls, appearance, }) { const [focusIsLocked, setFocusIsLocked] = React.useState(false); const onLockFocus = React.useCallback( () => setFocusIsLocked(true), [setFocusIsLocked] ); const onUnlockFocus = React.useCallback( () => setFocusIsLocked(false), [setFocusIsLocked] ); // HACK: As of 1.0.0-rc.0, Chakra's `toast` function rebuilds unnecessarily, // which triggers unnecessary rebuilds of the `onSpeciesColorChange` // callback, which causes the `React.memo` on `SpeciesColorPicker` to // fail, which harms performance. But it seems to work just fine if we // hold onto the first copy of the function we get! :/ const _toast = useToast(); // eslint-disable-next-line react-hooks/exhaustive-deps const toast = React.useMemo(() => _toast, []); const onSpeciesColorChange = React.useCallback( (species, color, isValid, closestPose) => { if (isValid) { dispatchToOutfit({ type: "setSpeciesAndColor", speciesId: species.id, colorId: color.id, pose: closestPose, }); } else { // NOTE: This shouldn't be possible to trigger, because the // `stateMustAlwaysBeValid` prop should prevent it. But we have // it as a fallback, just in case! toast({ title: `We haven't seen a ${color.name} ${species.name} before! 😓`, status: "warning", }); } }, [dispatchToOutfit, toast] ); const maybeUnlockFocus = (e) => { // We lock focus when a touch-device user taps the area. When they tap // empty space, we treat that as a toggle and release the focus lock. if (e.target === e.currentTarget) { onUnlockFocus(); } }; return ( {({ css, cx }) => ( { const opacity = parseFloat( getComputedStyle(e.currentTarget).opacity ); if (opacity < 0.5) { // If the controls aren't visible right now, then clicks on them are // probably accidental. Ignore them! (We prevent default to block // built-in behaviors like link nav, and we stop propagation to block // our own custom click handlers. I don't know if I can prevent the // select clicks though?) e.preventDefault(); e.stopPropagation(); // We also show the controls, by locking focus. We'll undo this when // the user taps elsewhere (because it will trigger a blur event from // our child components), in `maybeUnlockFocus`. setFocusIsLocked(true); } }} data-test-id="wardrobe-outfit-controls" > {showAnimationControls && } {outfitState.speciesId && outfitState.colorId && ( {/** * We try to center the species/color picker, but the left spacer will * shrink more than the pose picker container if we run out of space! */} )} )} ); } function OutfitControlsContextMenu({ outfitState, children }) { // NOTE: We track these separately, rather than in one atomic state object, // because I want to still keep the menu in the right position when it's // animating itself closed! const [isOpen, setIsOpen] = React.useState(false); const [position, setPosition] = React.useState({ x: 0, y: 0 }); const [layersInfoModalIsOpen, setLayersInfoModalIsOpen] = React.useState(false); const { visibleLayers } = useOutfitAppearance(outfitState); const [downloadImageUrl, prepareDownload] = useDownloadableImage(visibleLayers); return ( { setIsOpen(true); setPosition({ x: e.pageX, y: e.pageY }); e.preventDefault(); }} > {children} setIsOpen(false)}> } as="a" // eslint-disable-next-line no-script-url href={downloadImageUrl || "#"} onClick={(e) => { if (!downloadImageUrl) { e.preventDefault(); } }} download={(outfitState.name || "Outfit") + ".png"} onMouseEnter={prepareDownload} onFocus={prepareDownload} cursor={!downloadImageUrl && "wait"} > Download } onClick={() => setLayersInfoModalIsOpen(true)} > Layers (SWF, PNG) setLayersInfoModalIsOpen(false)} visibleLayers={visibleLayers} /> ); } function OutfitHTML5Badge({ appearance }) { const petIsUsingHTML5 = appearance.petAppearance?.layers.every(layerUsesHTML5); const itemsNotUsingHTML5 = appearance.items.filter((item) => item.appearance.layers.some((l) => !layerUsesHTML5(l)) ); itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name)); const usesHTML5 = petIsUsingHTML5 && itemsNotUsingHTML5.length === 0; let tooltipLabel; if (usesHTML5) { tooltipLabel = ( <>This outfit is converted to HTML5, and ready to use on Neopets.com! ); } else { tooltipLabel = ( This outfit isn't converted to HTML5 yet, so it might not appear in Neopets.com customization yet. Once it's ready, it could look a bit different than our temporary preview here. It might even be animated! {!petIsUsingHTML5 && ( This pet is not yet converted. )} {itemsNotUsingHTML5.length > 0 && ( <> The following items aren't yet converted: {itemsNotUsingHTML5.map((item) => ( {item.name} ))} )} ); } return ( ); } /** * BackButton takes you back home, or to Your Outfits if this outfit is yours. */ function BackButton({ outfitState }) { const currentUser = useCurrentUser(); const outfitBelongsToCurrentUser = outfitState.creator && outfitState.creator.id === currentUser.id; return ( } aria-label="Leave this outfit" d="inline-flex" // Not sure why requires this to style right! ^^` data-test-id="wardrobe-nav-back-button" /> ); } /** * DownloadButton downloads the outfit as an image! */ function DownloadButton({ outfitState }) { const { visibleLayers } = useOutfitAppearance(outfitState); const [downloadImageUrl, prepareDownload] = useDownloadableImage(visibleLayers); return ( } aria-label="Download" as="a" // eslint-disable-next-line no-script-url href={downloadImageUrl || "#"} onClick={(e) => { if (!downloadImageUrl) { e.preventDefault(); } }} download={(outfitState.name || "Outfit") + ".png"} onMouseEnter={prepareDownload} onFocus={prepareDownload} cursor={!downloadImageUrl && "wait"} /> ); } /** * CopyLinkButton copies the outfit URL to the clipboard! */ function CopyLinkButton({ outfitState }) { const { onCopy, hasCopied } = useClipboard(outfitState.url); return ( : } aria-label="Copy link" onClick={onCopy} /> ); } function PlayPauseButton() { const [isPaused, setIsPaused] = useLocalStorage("DTIOutfitIsPaused", true); // We show an intro animation if this mounts while paused. Whereas if we're // not paused, we initialize as if we had already finished. const [blinkInState, setBlinkInState] = React.useState( isPaused ? { type: "ready" } : { type: "done" } ); const buttonRef = React.useRef(null); React.useLayoutEffect(() => { if (blinkInState.type === "ready" && buttonRef.current) { setBlinkInState({ type: "started", position: { left: buttonRef.current.offsetLeft, top: buttonRef.current.offsetTop, }, }); } }, [blinkInState, setBlinkInState]); return ( {({ css }) => ( <> {blinkInState.type === "started" && ( setBlinkInState({ type: "done" })} // Don't disrupt the hover state of the controls! (And the button // doesn't seem to click correctly, not sure why, but instead of // debugging I'm adding this :p) pointerEvents="none" className={css` @keyframes fade-in-out { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } opacity: 0; animation: fade-in-out 2s; `} /> )} )} ); } const PlayPauseButtonContent = React.forwardRef( ({ isPaused, setIsPaused, ...props }, ref) => { return ( : } onClick={() => setIsPaused(!isPaused)} {...props} > {isPaused ? <>Paused : <>Playing} ); } ); function SettingsButton({ onLockFocus, onUnlockFocus }) { return ( ); } function HiResModeSetting() { const [hiResMode, setHiResMode] = useLocalStorage("DTIHiResMode", false); const [preferArchive, setPreferArchive] = usePreferArchive(); return ( Hi-res mode (SVG) Crisper at higher resolutions, but not always accurate setHiResMode(e.target.checked)} /> Use DTI's image archive Turn this on when images.neopets.com is slow! setPreferArchive(e.target.checked)} /> ); } const TranslucentButton = React.forwardRef(({ children, ...props }, ref) => { return ( ); }); /** * ControlButton is a UI helper to render the cute round buttons we use in * OutfitControls! */ function ControlButton({ icon, "aria-label": ariaLabel, ...props }) { return ( ); } /** * useDownloadableImage loads the image data and generates the downloadable * image URL. */ function useDownloadableImage(visibleLayers) { const [hiResMode] = useLocalStorage("DTIHiResMode", false); const [preferArchive] = usePreferArchive(); const [downloadImageUrl, setDownloadImageUrl] = React.useState(null); const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]); const toast = useToast(); const prepareDownload = React.useCallback(async () => { // Skip if the current image URL is already correct for these layers. const layerIds = visibleLayers.map((l) => l.id); if (layerIds.join(",") === preparedForLayerIds.join(",")) { return; } // Skip if there are no layers. (This probably means we're still loading!) if (layerIds.length === 0) { return; } setDownloadImageUrl(null); // NOTE: You could argue that we may as well just always use PNGs here, // regardless of hi-res mode… but using the same src will help both // performance (can use cached SVG), and predictability (image will // look like what you see here). const imagePromises = visibleLayers.map((layer) => loadImage(getBestImageUrlForLayer(layer, { hiResMode }), { crossOrigin: "anonymous", preferArchive, }) ); let images; try { images = await Promise.all(imagePromises); } catch (e) { console.error("Error building downloadable image", e); toast({ status: "error", title: "Oops, sorry, we couldn't download the image!", description: "Check your connection, then reload the page and try again.", }); return; } const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); canvas.width = 600; canvas.height = 600; for (const image of images) { context.drawImage(image, 0, 0); } console.debug( "Generated image for download", layerIds, canvas.toDataURL("image/png") ); setDownloadImageUrl(canvas.toDataURL("image/png")); setPreparedForLayerIds(layerIds); }, [preparedForLayerIds, visibleLayers, toast, hiResMode, preferArchive]); return [downloadImageUrl, prepareDownload]; } export default OutfitControls;