pose picker foundational UI!

api/assetProxy.js

@@ -6,6 +6,7 @@ const streamPipeline = util.promisify(stream.pipeline);
 
 const VALID_URL_PATTERNS = [
   /^http:\/\/images\.neopets\.com\/items\/[a-zA-Z0-9_ -]+\.gif$/,
+  /^http:\/\/pets\.neopets\.com\/cp\/[a-z0-9]+\/[0-9]+\/[0-9]+\.png$/,
 ];
 
 export default async (req, res) => {

src/app/Item.js

@@ -10,6 +10,8 @@ import {
   useTheme,
 } from "@chakra-ui/core";
 
+import { safeImageUrl } from "./util";
+
 /**
  * Item show a basic summary of an item, in the context of the current outfit!
  *
@@ -29,10 +31,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
   return (
     <ItemContainer>
       <Box>
-        <ItemThumbnail
+        <ItemThumbnail src={safeImageUrl(item.thumbnailUrl)} isWorn={isWorn} />
-          src={`/api/assetProxy?url=${encodeURIComponent(item.thumbnailUrl)}`}
-          isWorn={isWorn}
-        />
       </Box>
       <Box width="3" />
       <Box>

src/app/OutfitControls.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css, cx } from "emotion";
 import {
   Box,
   Flex,
@@ -11,6 +11,7 @@ import {
 } from "@chakra-ui/core";
 
 import OutfitResetModal from "./OutfitResetModal";
+import PosePicker from "./PosePicker";
 import SpeciesColorPicker from "./SpeciesColorPicker";
 import useOutfitAppearance from "./useOutfitAppearance";
 
@@ -19,6 +20,8 @@ import useOutfitAppearance from "./useOutfitAppearance";
  * control things like species/color and sharing links!
  */
 function OutfitControls({ outfitState, dispatchToOutfit }) {
+  const [focusIsLocked, setFocusIsLocked] = React.useState(false);
+
   return (
     <PseudoBox
       role="group"
@@ -34,15 +37,19 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
                           "space space"
                           "picker picker"`}
       gridTemplateRows="auto minmax(1rem, 1fr) auto"
-      className={css`
+      className={cx(
+        css`
           opacity: 0;
           transition: opacity 0.2s;
 
           &:hover,
-        &:focus-within {
+          &:focus-within,
+          &.focus-is-locked {
             opacity: 1;
           }
-      `}
+        `,
+        focusIsLocked && "focus-is-locked"
+      )}
     >
       <Box gridArea="back">
         <BackButton dispatchToOutfit={dispatchToOutfit} />
@@ -62,10 +69,23 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
       </Stack>
       <Box gridArea="space" />
       <Flex gridArea="picker" justify="center">
+        {/**
+         * 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!
+         */}
+        <Box flex="1 1 0" />
+        <Box flex="0 0 auto">
           <SpeciesColorPicker
             outfitState={outfitState}
             dispatchToOutfit={dispatchToOutfit}
           />
+        </Box>
+        <Flex flex="1 1 0" align="center" pl="4">
+          <PosePicker
+            onLockFocus={() => setFocusIsLocked(true)}
+            onUnlockFocus={() => setFocusIsLocked(false)}
+          />
+        </Flex>
       </Flex>
     </PseudoBox>
   );

src/app/PosePicker.js

@@ -0,0 +1,147 @@
+import React from "react";
+import { css, cx } from "emotion";
+import {
+  Box,
+  Button,
+  Flex,
+  Image,
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+  useTheme,
+} from "@chakra-ui/core";
+
+import { safeImageUrl } from "./util";
+
+function PosePicker({ onLockFocus, onUnlockFocus }) {
+  const theme = useTheme();
+
+  return (
+    <Popover
+      placement="top-end"
+      usePortal
+      onOpen={onLockFocus}
+      onClose={onUnlockFocus}
+    >
+      {({ isOpen }) => (
+        <>
+          <PopoverTrigger>
+            <Button
+              variant="unstyled"
+              boxShadow="md"
+              d="flex"
+              alignItems="center"
+              justifyContent="center"
+              border="2px solid transparent"
+              _focus={{ borderColor: "gray.50" }}
+              _hover={{ borderColor: "gray.50" }}
+              outline="initial"
+              className={cx(
+                css`
+                  border: 2px solid transparent;
+
+                  &:focus,
+                  &:hover,
+                  &.is-open {
+                    border-color: ${theme.colors.gray["50"]};
+                  }
+                `,
+                isOpen && "is-open"
+              )}
+            >
+              <span role="img" aria-label="Choose a pose">
+                😊
+              </span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <Box p="4">
+              <table width="100%" borderSpacing="8px">
+                <thead>
+                  <tr>
+                    <th />
+                    <Box as="th" textAlign="center">
+                      😊
+                    </Box>
+                    <Box as="th" textAlign="center">
+                      😢
+                    </Box>
+                    <Box as="th" textAlign="center">
+                      🤒
+                    </Box>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <Box as="th" textAlign="right">
+                      🙍‍♂️
+                    </Box>
+                    <PoseCell>
+                      <PoseButton src="http://pets.neopets.com/cp/42j5q3zx/1/1.png" />
+                    </PoseCell>
+                    <PoseCell>
+                      <PoseButton src="http://pets.neopets.com/cp/42j5q3zx/2/1.png" />
+                    </PoseCell>
+                    <PoseCell>
+                      <PoseButton src="http://pets.neopets.com/cp/42j5q3zx/4/1.png" />
+                    </PoseCell>
+                  </tr>
+                  <tr>
+                    <Box as="th" textAlign="right">
+                      🙍‍♀️
+                    </Box>
+                    <PoseCell>
+                      <PoseButton src="http://pets.neopets.com/cp/xgnghng7/1/1.png" />
+                    </PoseCell>
+                    <PoseCell>
+                      <PoseButton src="http://pets.neopets.com/cp/xgnghng7/2/1.png" />
+                    </PoseCell>
+                    <PoseCell>
+                      <PoseButton src="http://pets.neopets.com/cp/xgnghng7/4/1.png" />
+                    </PoseCell>
+                  </tr>
+                </tbody>
+              </table>
+            </Box>
+            <PopoverArrow />
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
+  );
+}
+
+function PoseCell({ children }) {
+  return (
+    <td>
+      <Flex justify="center" p="1">
+        {children}
+      </Flex>
+    </td>
+  );
+}
+
+function PoseButton({ src }) {
+  return (
+    <Box rounded="full" boxShadow="md" overflow="hidden">
+      <Button variant="unstyled" width="auto" height="auto">
+        <Image
+          src={safeImageUrl(src)}
+          width="50px"
+          height="50px"
+          className={css`
+            opacity: 0.01;
+
+            &[src] {
+              opacity: 1;
+              transition: opacity 0.2s;
+            }
+          `}
+        />
+      </Button>
+    </Box>
+  );
+}
+
+export default PosePicker;

src/app/util.js

@@ -51,6 +51,13 @@ export function Heading2({ children, ...props }) {
   );
 }
 
+/**
+ * safeImageUrl returns an HTTPS-safe image URL for Neopets assets!
+ */
+export function safeImageUrl(url) {
+  return `/api/assetProxy?url=${encodeURIComponent(url)}`;
+}
+
 /**
  * useDebounce helps make a rapidly-changing value change less! It waits for a
  * pause in the incoming data before outputting the latest value.