Added default size to token modal

src/components/token/TokenSettings.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { Flex, Box, Input, IconButton, Label } from "theme-ui";
+
+import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
+
+function TokenSettings({
+  token,
+  onSettingsChange,
+  showMore,
+  onShowMoreChange,
+}) {
+  return (
+    <Flex sx={{ flexDirection: "column" }}>
+      <Flex>
+        <Box mt={2} sx={{ flexGrow: 1 }}>
+          <Label htmlFor="tokenSize">Default Size</Label>
+          <Input
+            type="number"
+            name="tokenSize"
+            value={(token && token.defaultSize) || 1}
+            onChange={(e) =>
+              onSettingsChange("defaultSize", parseInt(e.target.value))
+            }
+            disabled={!token || token.type === "default"}
+            min={1}
+            my={1}
+          />
+        </Box>
+      </Flex>
+      {showMore && (
+        <>
+          <Box my={2} sx={{ flexGrow: 1 }}>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              name="name"
+              value={(token && token.name) || ""}
+              onChange={(e) => onSettingsChange("name", e.target.value)}
+              disabled={!token || token.type === "default"}
+              my={1}
+            />
+          </Box>
+        </>
+      )}
+      <IconButton
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onShowMoreChange(!showMore);
+        }}
+        sx={{
+          transform: `rotate(${showMore ? "180deg" : "0"})`,
+          alignSelf: "center",
+        }}
+        aria-label={showMore ? "Show Less" : "Show More"}
+        title={showMore ? "Show Less" : "Show More"}
+        disabled={!token}
+      >
+        <ExpandMoreIcon />
+      </IconButton>
+    </Flex>
+  );
+}
+
+export default TokenSettings;

src/components/token/Tokens.js

@@ -1,11 +1,10 @@
-import React, { useState, useContext } from "react";
+import React, { useContext } from "react";
 import { Box, Flex } from "theme-ui";
 import shortid from "shortid";
 import SimpleBar from "simplebar-react";
 
 import ListToken from "./ListToken";
 import ProxyToken from "./ProxyToken";
-import NumberInput from "../NumberInput";
 
 import SelectTokensButton from "./SelectTokensButton";
 
@@ -20,8 +19,6 @@ function Tokens({ onMapTokenStateCreate }) {
   const { userId } = useContext(AuthContext);
   const { ownedTokens, tokens } = useContext(TokenDataContext);
 
-  const [tokenSize, setTokenSize] = useState(1);
-
   function handleProxyDragEnd(isOnMap, token) {
     if (isOnMap && onMapTokenStateCreate) {
       // Create a token state from the dragged token
@@ -30,7 +27,7 @@ function Tokens({ onMapTokenStateCreate }) {
         tokenId: token.id,
         tokenType: token.type,
         owner: userId,
-        size: tokenSize,
+        size: token.defaultSize,
         label: "",
         statuses: [],
         x: token.x,
@@ -69,13 +66,6 @@ function Tokens({ onMapTokenStateCreate }) {
           }}
         >
           <SelectTokensButton />
-          {/* <NumberInput
-            value={tokenSize}
-            onChange={setTokenSize}
-            title="Size"
-            min={1}
-            max={9}
-          /> */}
         </Flex>
       </Box>
       <ProxyToken

src/modals/SelectTokensModal.js

@@ -1,10 +1,11 @@
 import React, { useRef, useContext, useState } from "react";
-import { Flex, Label } from "theme-ui";
+import { Flex, Label, Button } from "theme-ui";
 import shortid from "shortid";
 
 import Modal from "../components/Modal";
 import ImageDrop from "../components/ImageDrop";
 import TokenTiles from "../components/token/TokenTiles";
+import TokenSettings from "../components/token/TokenSettings";
 
 import blobToBuffer from "../helpers/blobToBuffer";
 
@@ -13,7 +14,9 @@ import AuthContext from "../contexts/AuthContext";
 
 function SelectTokensModal({ isOpen, onRequestClose }) {
   const { userId } = useContext(AuthContext);
-  const { ownedTokens, addToken, removeToken } = useContext(TokenDataContext);
+  const { ownedTokens, addToken, removeToken, updateToken } = useContext(
+    TokenDataContext
+  );
   const fileInputRef = useRef();
 
   const [imageLoading, setImageLoading] = useState(false);
@@ -60,6 +63,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
           created: Date.now(),
           lastModified: Date.now(),
           owner: userId,
+          defaultSize: 1,
         });
       };
       image.src = url;
@@ -78,6 +82,15 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     setSelectedTokenId(null);
   }
 
+  /**
+   * Token settings
+   */
+  const [showMoreSettings, setShowMoreSettings] = useState(false);
+
+  async function handleTokenSettingsChange(key, value) {
+    await updateToken(selectedTokenId, { [key]: value });
+  }
+
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
       <ImageDrop onDrop={handleImageUpload} dropText="Drop token to upload">
@@ -103,6 +116,19 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
             onTokenSelect={handleTokenSelect}
             onTokenRemove={handleTokenRemove}
           />
+          <TokenSettings
+            token={selectedToken}
+            showMore={showMoreSettings}
+            onSettingsChange={handleTokenSettingsChange}
+            onShowMoreChange={setShowMoreSettings}
+          />
+          <Button
+            variant="primary"
+            disabled={imageLoading}
+            onClick={onRequestClose}
+          >
+            Done
+          </Button>
         </Flex>
       </ImageDrop>
     </Modal>

src/tokens/index.js

@@ -65,10 +65,24 @@ export const tokenSources = {
   undead,
 };
 
+function getDefaultTokenSize(key) {
+  switch (key) {
+    case "dragon":
+    case "elemental":
+    case "giant":
+    case "ooze":
+    case "titan":
+      return 2;
+    default:
+      return 1;
+  }
+}
+
 export const tokens = Object.keys(tokenSources).map((key) => ({
   key,
   name: key.charAt(0).toUpperCase() + key.slice(1),
   type: "default",
+  defaultSize: getDefaultTokenSize(key),
 }));
 
 export const unknownSource = unknown;