Added initial token label

Added token pop up menu
Added token label
Added better token positioning
Split tokens into list and map variants
Moved size input to more generic number input
Changed game handler names to be more consistent

src/components/MapToken.js

@@ -0,0 +1,57 @@
+import React, { useRef } from "react";
+import { Box, Image } from "theme-ui";
+
+import TokenLabel from "./TokenLabel";
+
+import usePreventTouch from "../helpers/usePreventTouch";
+
+function MapToken({ token, tokenSizePercent, className }) {
+  const imageRef = useRef();
+  // Stop touch to prevent 3d touch gesutre on iOS
+  usePreventTouch(imageRef);
+
+  return (
+    <Box
+      style={{
+        transform: `translate(${token.x * 100}%, ${token.y * 100}%)`,
+        width: "100%",
+        height: "100%",
+      }}
+      sx={{
+        position: "absolute",
+        pointerEvents: "none",
+      }}
+    >
+      <Box
+        style={{
+          width: `${tokenSizePercent * (token.size || 1)}%`,
+        }}
+        sx={{
+          position: "absolute",
+          pointerEvents: "all",
+        }}
+      >
+        <Box sx={{ position: "absolute", display: "flex", width: "100%" }}>
+          <Image
+            className={className}
+            sx={{
+              userSelect: "none",
+              touchAction: "none",
+              width: "100%",
+              position: "absolute", // Fix image stretch in safari
+            }}
+            src={token.image}
+            // pass data into the dom element used to pass state to the ProxyToken
+            data-id={token.id}
+            data-size={token.size}
+            data-label={token.label}
+            ref={imageRef}
+          />
+          {token.label && <TokenLabel label={token.label} />}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default MapToken;