Merge branch 'release/v1.3.0' into feature/dice

.env.production

@@ -1,2 +1,2 @@
-REACT_APP_BROKER_URL=https://agent.owlbear.rodeo
+REACT_APP_BROKER_URL=https://agent.owlbear.dev
-REACT_APP_ICE_SERVERS_URL=https://agent.owlbear.rodeo/iceservers
+REACT_APP_ICE_SERVERS_URL=https://agent.owlbear.dev/iceservers

package.json

@@ -11,24 +11,31 @@
     "ammo.js": "kripken/ammo.js#aab297a4164779c3a9d8dc8d9da26958de3cb778",
     "babylonjs": "^4.1.0",
     "babylonjs-loaders": "^4.1.0",
+    "case": "^1.6.3",
     "dexie": "^2.0.4",
     "fake-indexeddb": "^3.0.0",
     "interactjs": "^1.9.7",
+    "konva": "^6.0.0",
     "normalize-wheel": "^1.0.1",
     "raw.macro": "^0.3.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-konva": "^16.13.0-3",
     "react-markdown": "^4.3.1",
     "react-modal": "^3.11.2",
+    "react-resize-detector": "^4.2.3",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^1.2.2",
     "react-scripts": "3.4.0",
+    "react-spring": "^8.0.27",
+    "react-use-gesture": "^7.0.15",
     "shortid": "^2.2.15",
     "simple-peer": "^9.6.2",
     "simplebar-react": "^2.1.0",
     "simplify-js": "^1.2.4",
     "socket.io-client": "^2.3.0",
     "theme-ui": "^0.3.1",
+    "use-image": "^1.0.5",
     "webrtc-adapter": "^7.5.1"
   },
   "scripts": {

src/App.js

@@ -11,6 +11,9 @@ import ReleaseNotes from "./routes/ReleaseNotes";
 
 import { AuthProvider } from "./contexts/AuthContext";
 import { DatabaseProvider } from "./contexts/DatabaseContext";
+import { MapDataProvider } from "./contexts/MapDataContext";
+import { TokenDataProvider } from "./contexts/TokenDataContext";
+import { MapLoadingProvider } from "./contexts/MapLoadingContext";
 
 function App() {
   return (
@@ -29,7 +32,13 @@ function App() {
                 <FAQ />
               </Route>
               <Route path="/game/:id">
+                <MapLoadingProvider>
+                  <MapDataProvider>
+                    <TokenDataProvider>
                       <Game />
+                    </TokenDataProvider>
+                  </MapDataProvider>
+                </MapLoadingProvider>
               </Route>
               <Route path="/">
                 <Home />

src/components/ImageDrop.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Box, Flex, Text } from "theme-ui";
+
+function ImageDrop({ onDrop, dropText, children }) {
+  const [dragging, setDragging] = useState(false);
+  function handleImageDragEnter(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(true);
+  }
+
+  function handleImageDragLeave(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(false);
+  }
+
+  function handleImageDrop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const file = event.dataTransfer.files[0];
+    if (file && file.type.startsWith("image")) {
+      onDrop(file);
+    }
+    setDragging(false);
+  }
+
+  return (
+    <Box onDragEnter={handleImageDragEnter}>
+      {children}
+      {dragging && (
+        <Flex
+          bg="overlay"
+          sx={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            left: 0,
+            bottom: 0,
+            justifyContent: "center",
+            alignItems: "center",
+            cursor: "copy",
+          }}
+          onDragLeave={handleImageDragLeave}
+          onDragOver={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer.dropEffect = "copy";
+          }}
+          onDrop={handleImageDrop}
+        >
+          <Text sx={{ pointerEvents: "none" }}>
+            {dropText || "Drop image to upload"}
+          </Text>
+        </Flex>
+      )}
+    </Box>
+  );
+}
+
+export default ImageDrop;

src/components/Markdown.js

@@ -7,7 +7,6 @@ function Paragraph(props) {
 }
 
 function Heading({ level, ...props }) {
-  console.log(props);
   const fontSize = level === 1 ? 5 : level === 2 ? 3 : 1;
   return (
     <Text

src/components/map/Map.js

@@ -1,28 +1,24 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useState, useContext, useEffect } from "react";
-import { Box, Image } from "theme-ui";
 
-import ProxyToken from "../token/ProxyToken";
+import MapControls from "./MapControls";
-import TokenMenu from "../token/TokenMenu";
+import MapInteraction from "./MapInteraction";
 import MapToken from "./MapToken";
 import MapDrawing from "./MapDrawing";
 import MapFog from "./MapFog";
-import MapControls from "./MapControls";
 import MapDice from "./MapDice";
+
+import TokenDataContext from "../../contexts/TokenDataContext";
+import MapLoadingContext from "../../contexts/MapLoadingContext";
+
+import TokenMenu from "../token/TokenMenu";
+import TokenDragOverlay from "../token/TokenDragOverlay";
 import LoadingOverlay from "../LoadingOverlay";
 
 import { omit } from "../../helpers/shared";
-import useDataSource from "../../helpers/useDataSource";
-import MapInteraction from "./MapInteraction";
-
-import { mapSources as defaultMapSources } from "../../maps";
-
-const mapTokenProxyClassName = "map-token__proxy";
-const mapTokenMenuClassName = "map-token__menu";
 
 function Map({
   map,
   mapState,
-  tokens,
   onMapTokenStateChange,
   onMapTokenStateRemove,
   onMapChange,
@@ -36,23 +32,17 @@ function Map({
   allowMapDrawing,
   allowFogDrawing,
   disabledTokens,
-  loading,
 }) {
-  const mapSource = useDataSource(map, defaultMapSources);
+  const { tokensById } = useContext(TokenDataContext);
+  const { isLoading } = useContext(MapLoadingContext);
 
-  function handleProxyDragEnd(isOnMap, tokenState) {
+  const gridX = map && map.gridX;
-    if (isOnMap && onMapTokenStateChange) {
+  const gridY = map && map.gridY;
-      onMapTokenStateChange(tokenState);
+  const gridSizeNormalized = {
-    }
+    x: gridX ? 1 / gridX : 0,
-
+    y: gridY ? 1 / gridY : 0,
-    if (!isOnMap && onMapTokenStateRemove) {
+  };
-      onMapTokenStateRemove(tokenState);
+  const tokenSizePercent = gridSizeNormalized.x;
-    }
-  }
-
-  /**
-   * Map drawing
-   */
 
   const [selectedToolId, setSelectedToolId] = useState("pan");
   const [toolSettings, setToolSettings] = useState({
@@ -102,6 +92,7 @@ function Map({
   }
 
   const [mapShapes, setMapShapes] = useState([]);
+
   function handleMapShapeAdd(shape) {
     onMapDraw({ type: "add", shapes: [shape] });
   }
@@ -111,6 +102,7 @@ function Map({
   }
 
   const [fogShapes, setFogShapes] = useState([]);
+
   function handleFogShapeAdd(shape) {
     onFogDraw({ type: "add", shapes: [shape] });
   }
@@ -192,97 +184,12 @@ function Map({
     disabledSettings.fog.push("redo");
   }
 
-  /**
-   * Member setup
-   */
-
-  const mapRef = useRef(null);
-
-  const gridX = map && map.gridX;
-  const gridY = map && map.gridY;
-  const gridSizeNormalized = { x: 1 / gridX || 0, y: 1 / gridY || 0 };
-  const tokenSizePercent = gridSizeNormalized.x * 100;
-  const aspectRatio = (map && map.width / map.height) || 1;
-
-  const mapImage = (
-    <Box
-      sx={{
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      }}
-    >
-      <Image
-        ref={mapRef}
-        className="mapImage"
-        sx={{
-          width: "100%",
-          userSelect: "none",
-          touchAction: "none",
-        }}
-        src={mapSource}
-      />
-    </Box>
-  );
-
-  const mapTokens = (
-    <Box
-      sx={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: "none",
-      }}
-    >
-      {mapState &&
-        Object.values(mapState.tokens).map((tokenState) => (
-          <MapToken
-            key={tokenState.id}
-            token={tokens.find((token) => token.id === tokenState.tokenId)}
-            tokenState={tokenState}
-            tokenSizePercent={tokenSizePercent}
-            className={`${mapTokenProxyClassName} ${mapTokenMenuClassName}`}
-          />
-        ))}
-    </Box>
-  );
-
-  const mapDrawing = (
-    <MapDrawing
-      width={map ? map.width : 0}
-      height={map ? map.height : 0}
-      selectedTool={selectedToolId !== "fog" ? selectedToolId : "none"}
-      toolSettings={toolSettings[selectedToolId]}
-      shapes={mapShapes}
-      onShapeAdd={handleMapShapeAdd}
-      onShapeRemove={handleMapShapeRemove}
-      gridSize={gridSizeNormalized}
-    />
-  );
-
-  const mapFog = (
-    <MapFog
-      width={map ? map.width : 0}
-      height={map ? map.height : 0}
-      isEditing={selectedToolId === "fog"}
-      toolSettings={toolSettings["fog"]}
-      shapes={fogShapes}
-      onShapeAdd={handleFogShapeAdd}
-      onShapeRemove={handleFogShapeRemove}
-      onShapeEdit={handleFogShapeEdit}
-      gridSize={gridSizeNormalized}
-    />
-  );
-
   const mapControls = (
     <MapControls
       onMapChange={onMapChange}
       onMapStateChange={onMapStateChange}
       currentMap={map}
+      currentMapState={mapState}
       onSelectedToolChange={setSelectedToolId}
       selectedToolId={selectedToolId}
       toolSettings={toolSettings}
@@ -292,38 +199,119 @@ function Map({
       disabledSettings={disabledSettings}
     />
   );
+
+  const [isTokenMenuOpen, setIsTokenMenuOpen] = useState(false);
+  const [tokenMenuOptions, setTokenMenuOptions] = useState({});
+  const [draggingTokenOptions, setDraggingTokenOptions] = useState();
+  function handleTokenMenuOpen(tokenStateId, tokenImage) {
+    setTokenMenuOptions({ tokenStateId, tokenImage });
+    setIsTokenMenuOpen(true);
+  }
+
+  // Sort so vehicles render below other tokens
+  function sortMapTokenStates(a, b) {
+    const tokenA = tokensById[a.tokenId];
+    const tokenB = tokensById[b.tokenId];
+    if (tokenA && tokenB) {
+      return tokenB.isVehicle - tokenA.isVehicle;
+    } else if (tokenA) {
+      return 1;
+    } else if (tokenB) {
+      return -1;
+    } else {
+      return 0;
+    }
+  }
+
+  const mapTokens =
+    mapState &&
+    Object.values(mapState.tokens)
+      .sort(sortMapTokenStates)
+      .map((tokenState) => (
+        <MapToken
+          key={tokenState.id}
+          token={tokensById[tokenState.tokenId]}
+          tokenState={tokenState}
+          tokenSizePercent={tokenSizePercent}
+          onTokenStateChange={onMapTokenStateChange}
+          onTokenMenuOpen={handleTokenMenuOpen}
+          onTokenDragStart={(e) =>
+            setDraggingTokenOptions({ tokenState, tokenImage: e.target })
+          }
+          onTokenDragEnd={() => setDraggingTokenOptions(null)}
+          draggable={
+            (selectedToolId === "pan" || selectedToolId === "erase") &&
+            !(tokenState.id in disabledTokens)
+          }
+          mapState={mapState}
+        />
+      ));
+
+  const tokenMenu = (
+    <TokenMenu
+      isOpen={isTokenMenuOpen}
+      onRequestClose={() => setIsTokenMenuOpen(false)}
+      onTokenStateChange={onMapTokenStateChange}
+      tokenState={mapState && mapState.tokens[tokenMenuOptions.tokenStateId]}
+      tokenImage={tokenMenuOptions.tokenImage}
+    />
+  );
+
+  const tokenDragOverlay = draggingTokenOptions && (
+    <TokenDragOverlay
+      onTokenStateRemove={(state) => {
+        onMapTokenStateRemove(state);
+        setDraggingTokenOptions(null);
+      }}
+      onTokenStateChange={onMapTokenStateChange}
+      tokenState={draggingTokenOptions && draggingTokenOptions.tokenState}
+      tokenImage={draggingTokenOptions && draggingTokenOptions.tokenImage}
+      token={tokensById[draggingTokenOptions.tokenState.tokenId]}
+      mapState={mapState}
+    />
+  );
+
+  const mapDrawing = (
+    <MapDrawing
+      shapes={mapShapes}
+      onShapeAdd={handleMapShapeAdd}
+      onShapeRemove={handleMapShapeRemove}
+      selectedToolId={selectedToolId}
+      selectedToolSettings={toolSettings[selectedToolId]}
+      gridSize={gridSizeNormalized}
+    />
+  );
+
+  const mapFog = (
+    <MapFog
+      shapes={fogShapes}
+      onShapeAdd={handleFogShapeAdd}
+      onShapeRemove={handleFogShapeRemove}
+      onShapeEdit={handleFogShapeEdit}
+      selectedToolId={selectedToolId}
+      selectedToolSettings={toolSettings[selectedToolId]}
+      gridSize={gridSizeNormalized}
+    />
+  );
+
   return (
-    <>
     <MapInteraction
       map={map}
-        aspectRatio={aspectRatio}
+      controls={
-        isEnabled={selectedToolId === "pan"}
-        sideContent={
         <>
-            <MapDice />
           {mapControls}
-            {loading && <LoadingOverlay />}
+          {tokenMenu}
+          {tokenDragOverlay}
+          <MapDice />
+          {isLoading && <LoadingOverlay />}
         </>
       }
+      selectedToolId={selectedToolId}
     >
-        {map && mapImage}
+      {mapDrawing}
-        {map && mapDrawing}
+      {mapTokens}
-        {map && mapFog}
+      {mapFog}
-        {map && mapTokens}
     </MapInteraction>
-      <ProxyToken
-        tokenClassName={mapTokenProxyClassName}
-        onProxyDragEnd={handleProxyDragEnd}
-        tokens={mapState && mapState.tokens}
-        disabledTokens={disabledTokens}
-      />
-      <TokenMenu
-        tokenClassName={mapTokenMenuClassName}
-        onTokenChange={onMapTokenStateChange}
-        tokens={mapState && mapState.tokens}
-        disabledTokens={disabledTokens}
-      />
-    </>
   );
 }
 

src/components/map/MapControls.js

@@ -22,6 +22,7 @@ function MapContols({
   onMapChange,
   onMapStateChange,
   currentMap,
+  currentMapState,
   selectedToolId,
   onSelectedToolChange,
   toolSettings,
@@ -73,6 +74,7 @@ function MapContols({
           onMapChange={onMapChange}
           onMapStateChange={onMapStateChange}
           currentMap={currentMap}
+          currentMapState={currentMapState}
         />
       ),
     },

src/components/map/MapDrawing.js

@@ -1,123 +1,81 @@
-import React, { useRef, useEffect, useState, useContext } from "react";
+import React, { useContext, useState, useCallback } from "react";
 import shortid from "shortid";
+import { Group, Line, Rect, Circle } from "react-konva";
+
+import MapInteractionContext from "../../contexts/MapInteractionContext";
 
 import { compare as comparePoints } from "../../helpers/vector2";
 import {
   getBrushPositionForTool,
   getDefaultShapeData,
   getUpdatedShapeData,
-  isShapeHovered,
-  drawShape,
   simplifyPoints,
-  getRelativePointerPosition,
+  getStrokeWidth,
 } from "../../helpers/drawing";
 
-import MapInteractionContext from "../../contexts/MapInteractionContext";
+import colors from "../../helpers/colors";
+import useMapBrush from "../../helpers/useMapBrush";
 
 function MapDrawing({
-  width,
-  height,
-  selectedTool,
-  toolSettings,
   shapes,
   onShapeAdd,
   onShapeRemove,
+  selectedToolId,
+  selectedToolSettings,
   gridSize,
 }) {
-  const canvasRef = useRef();
+  const { stageScale, mapWidth, mapHeight } = useContext(MapInteractionContext);
-  const containerRef = useRef();
-
-  const [isPointerDown, setIsPointerDown] = useState(false);
   const [drawingShape, setDrawingShape] = useState(null);
-  const [pointerPosition, setPointerPosition] = useState({ x: -1, y: -1 });
 
-  const shouldHover = selectedTool === "erase";
+  const shouldHover = selectedToolId === "erase";
   const isEditing =
-    selectedTool === "brush" ||
+    selectedToolId === "brush" ||
-    selectedTool === "shape" ||
+    selectedToolId === "shape" ||
-    selectedTool === "erase";
+    selectedToolId === "erase";
 
-  const { scaleRef } = useContext(MapInteractionContext);
+  const handleShapeDraw = useCallback(
-
+    (brushState, mapBrushPosition) => {
-  // Reset pointer position when tool changes
+      function startShape() {
-  useEffect(() => {
-    setPointerPosition({ x: -1, y: -1 });
-  }, [selectedTool]);
-
-  function handleStart(event) {
-    if (!isEditing) {
-      return;
-    }
-    if (event.touches && event.touches.length !== 1) {
-      setIsPointerDown(false);
-      setDrawingShape(null);
-      return;
-    }
-    const pointer = event.touches ? event.touches[0] : event;
-    const position = getRelativePointerPosition(pointer, containerRef.current);
-    setPointerPosition(position);
-    setIsPointerDown(true);
         const brushPosition = getBrushPositionForTool(
-      position,
+          mapBrushPosition,
-      selectedTool,
+          selectedToolId,
-      toolSettings,
+          selectedToolSettings,
           gridSize,
           shapes
         );
         const commonShapeData = {
-      color: toolSettings && toolSettings.color,
+          color: selectedToolSettings && selectedToolSettings.color,
-      blend: toolSettings && toolSettings.useBlending,
+          blend: selectedToolSettings && selectedToolSettings.useBlending,
           id: shortid.generate(),
         };
-    if (selectedTool === "brush") {
+        if (selectedToolId === "brush") {
           setDrawingShape({
             type: "path",
-        pathType: toolSettings.type,
+            pathType: selectedToolSettings.type,
             data: { points: [brushPosition] },
-        strokeWidth: toolSettings.type === "stroke" ? 1 : 0,
+            strokeWidth: selectedToolSettings.type === "stroke" ? 1 : 0,
             ...commonShapeData,
           });
-    } else if (selectedTool === "shape") {
+        } else if (selectedToolId === "shape") {
           setDrawingShape({
             type: "shape",
-        shapeType: toolSettings.type,
+            shapeType: selectedToolSettings.type,
-        data: getDefaultShapeData(toolSettings.type, brushPosition),
+            data: getDefaultShapeData(selectedToolSettings.type, brushPosition),
             strokeWidth: 0,
             ...commonShapeData,
           });
         }
       }
 
-  function handleMove(event) {
+      function continueShape() {
-    if (!isEditing) {
-      return;
-    }
-    if (event.touches && event.touches.length !== 1) {
-      return;
-    }
-    const pointer = event.touches ? event.touches[0] : event;
-    // Set pointer position every frame for erase tool and fog
-    if (shouldHover) {
-      const position = getRelativePointerPosition(
-        pointer,
-        containerRef.current
-      );
-      setPointerPosition(position);
-    }
-    if (isPointerDown) {
-      const position = getRelativePointerPosition(
-        pointer,
-        containerRef.current
-      );
-      setPointerPosition(position);
         const brushPosition = getBrushPositionForTool(
-        position,
+          mapBrushPosition,
-        selectedTool,
+          selectedToolId,
-        toolSettings,
+          selectedToolSettings,
           gridSize,
           shapes
         );
-      if (selectedTool === "brush") {
+        if (selectedToolId === "brush") {
           setDrawingShape((prevShape) => {
             const prevPoints = prevShape.data.points;
             if (
@@ -132,14 +90,14 @@ function MapDrawing({
             const simplified = simplifyPoints(
               [...prevPoints, brushPosition],
               gridSize,
-            scaleRef.current
+              stageScale
             );
             return {
               ...prevShape,
               data: { points: simplified },
             };
           });
-      } else if (selectedTool === "shape") {
+        } else if (selectedToolId === "shape") {
           setDrawingShape((prevShape) => ({
             ...prevShape,
             data: getUpdatedShapeData(
@@ -151,110 +109,147 @@ function MapDrawing({
           }));
         }
       }
-  }
 
-  function handleStop(event) {
+      function endShape() {
-    if (!isEditing) {
+        if (selectedToolId === "brush" && drawingShape) {
-      return;
-    }
-    if (event.touches && event.touches.length !== 0) {
-      return;
-    }
-    if (selectedTool === "brush" && drawingShape) {
           if (drawingShape.data.points.length > 1) {
             onShapeAdd(drawingShape);
           }
-    } else if (selectedTool === "shape" && drawingShape) {
+        } else if (selectedToolId === "shape" && drawingShape) {
           onShapeAdd(drawingShape);
         }
-
-    if (selectedTool === "erase" && hoveredShapeRef.current && isPointerDown) {
-      onShapeRemove(hoveredShapeRef.current.id);
-    }
-    setIsPointerDown(false);
         setDrawingShape(null);
       }
 
-  // Add listeners for draw events on map to allow drawing past the bounds
+      switch (brushState) {
-  // of the container
+        case "first":
-  useEffect(() => {
+          startShape();
-    const map = document.querySelector(".map");
+          return;
-    map.addEventListener("mousedown", handleStart);
+        case "drawing":
-    map.addEventListener("mousemove", handleMove);
+          continueShape();
-    map.addEventListener("mouseup", handleStop);
+          return;
-    map.addEventListener("touchstart", handleStart);
+        case "last":
-    map.addEventListener("touchmove", handleMove);
+          endShape();
-    map.addEventListener("touchend", handleStop);
+          return;
-
+        default:
-    return () => {
+          return;
-      map.removeEventListener("mousedown", handleStart);
-      map.removeEventListener("mousemove", handleMove);
-      map.removeEventListener("mouseup", handleStop);
-      map.removeEventListener("touchstart", handleStart);
-      map.removeEventListener("touchmove", handleMove);
-      map.removeEventListener("touchend", handleStop);
-    };
-  });
-
-  /**
-   * Rendering
-   */
-  const hoveredShapeRef = useRef(null);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas) {
-      const context = canvas.getContext("2d");
-
-      context.clearRect(0, 0, width, height);
-      let hoveredShape = null;
-      for (let shape of shapes) {
-        if (shouldHover) {
-          if (isShapeHovered(shape, context, pointerPosition, width, height)) {
-            hoveredShape = shape;
       }
-        }
+    },
-        drawShape(shape, context, gridSize, width, height);
+    [
-      }
+      selectedToolId,
-      if (drawingShape) {
+      selectedToolSettings,
-        drawShape(drawingShape, context, gridSize, width, height);
-      }
-      if (hoveredShape) {
-        const shape = { ...hoveredShape, color: "#BB99FF", blend: true };
-        drawShape(shape, context, gridSize, width, height);
-      }
-      hoveredShapeRef.current = hoveredShape;
-    }
-  }, [
-    shapes,
-    width,
-    height,
-    pointerPosition,
-    isPointerDown,
-    selectedTool,
-    drawingShape,
       gridSize,
-    shouldHover,
+      stageScale,
-  ]);
+      onShapeAdd,
+      shapes,
+      drawingShape,
+    ]
+  );
+
+  useMapBrush(isEditing, handleShapeDraw);
+
+  function handleShapeClick(_, shape) {
+    if (selectedToolId === "erase") {
+      onShapeRemove(shape.id);
+    }
+  }
+
+  function handleShapeMouseOver(event, shape) {
+    if (shouldHover) {
+      const path = event.target;
+      const hoverColor = "#BB99FF";
+      path.fill(hoverColor);
+      if (shape.type === "path") {
+        path.stroke(hoverColor);
+      }
+      path.getLayer().draw();
+    }
+  }
+
+  function handleShapeMouseOut(event, shape) {
+    if (shouldHover) {
+      const path = event.target;
+      const color = colors[shape.color] || shape.color;
+      path.fill(color);
+      if (shape.type === "path") {
+        path.stroke(color);
+      }
+      path.getLayer().draw();
+    }
+  }
+
+  function renderShape(shape) {
+    const defaultProps = {
+      key: shape.id,
+      onMouseOver: (e) => handleShapeMouseOver(e, shape),
+      onMouseOut: (e) => handleShapeMouseOut(e, shape),
+      onClick: (e) => handleShapeClick(e, shape),
+      onTap: (e) => handleShapeClick(e, shape),
+      fill: colors[shape.color] || shape.color,
+      opacity: shape.blend ? 0.5 : 1,
+    };
+    if (shape.type === "path") {
+      return (
+        <Line
+          points={shape.data.points.reduce(
+            (acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
+            []
+          )}
+          stroke={colors[shape.color] || shape.color}
+          tension={0.5}
+          closed={shape.pathType === "fill"}
+          fillEnabled={shape.pathType === "fill"}
+          lineCap="round"
+          strokeWidth={getStrokeWidth(
+            shape.strokeWidth,
+            gridSize,
+            mapWidth,
+            mapHeight
+          )}
+          {...defaultProps}
+        />
+      );
+    } else if (shape.type === "shape") {
+      if (shape.shapeType === "rectangle") {
+        return (
+          <Rect
+            x={shape.data.x * mapWidth}
+            y={shape.data.y * mapHeight}
+            width={shape.data.width * mapWidth}
+            height={shape.data.height * mapHeight}
+            {...defaultProps}
+          />
+        );
+      } else if (shape.shapeType === "circle") {
+        const minSide = mapWidth < mapHeight ? mapWidth : mapHeight;
+        return (
+          <Circle
+            x={shape.data.x * mapWidth}
+            y={shape.data.y * mapHeight}
+            radius={shape.data.radius * minSide}
+            {...defaultProps}
+          />
+        );
+      } else if (shape.shapeType === "triangle") {
+        return (
+          <Line
+            points={shape.data.points.reduce(
+              (acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
+              []
+            )}
+            closed={true}
+            {...defaultProps}
+          />
+        );
+      }
+    }
+  }
 
   return (
-    <div
+    <Group>
-      style={{
+      {shapes.map(renderShape)}
-        position: "absolute",
+      {drawingShape && renderShape(drawingShape)}
-        top: 0,
+    </Group>
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: "none",
-      }}
-      ref={containerRef}
-    >
-      <canvas
-        ref={canvasRef}
-        width={width}
-        height={height}
-        style={{ width: "100%", height: "100%" }}
-      />
-    </div>
   );
 }
 

src/components/map/MapFog.js

@@ -1,104 +1,74 @@
-import React, { useRef, useEffect, useState, useContext } from "react";
+import React, { useContext, useState, useCallback } from "react";
 import shortid from "shortid";
+import { Group, Line } from "react-konva";
+import useImage from "use-image";
+
+import diagonalPattern from "../../images/DiagonalPattern.png";
+
+import MapInteractionContext from "../../contexts/MapInteractionContext";
 
 import { compare as comparePoints } from "../../helpers/vector2";
 import {
   getBrushPositionForTool,
-  isShapeHovered,
-  drawShape,
   simplifyPoints,
-  getRelativePointerPosition,
+  getStrokeWidth,
 } from "../../helpers/drawing";
 
-import MapInteractionContext from "../../contexts/MapInteractionContext";
+import colors from "../../helpers/colors";
-
+import useMapBrush from "../../helpers/useMapBrush";
-import diagonalPattern from "../../images/DiagonalPattern.png";
 
 function MapFog({
-  width,
-  height,
-  isEditing,
-  toolSettings,
   shapes,
   onShapeAdd,
   onShapeRemove,
   onShapeEdit,
+  selectedToolId,
+  selectedToolSettings,
   gridSize,
 }) {
-  const canvasRef = useRef();
+  const { stageScale, mapWidth, mapHeight } = useContext(MapInteractionContext);
-  const containerRef = useRef();
-
-  const [isPointerDown, setIsPointerDown] = useState(false);
   const [drawingShape, setDrawingShape] = useState(null);
-  const [pointerPosition, setPointerPosition] = useState({ x: -1, y: -1 });
 
+  const isEditing = selectedToolId === "fog";
   const shouldHover =
     isEditing &&
-    (toolSettings.type === "toggle" || toolSettings.type === "remove");
+    (selectedToolSettings.type === "toggle" ||
+      selectedToolSettings.type === "remove");
 
-  const { scaleRef } = useContext(MapInteractionContext);
+  const [patternImage] = useImage(diagonalPattern);
 
-  // Reset pointer position when tool changes
+  const handleShapeDraw = useCallback(
-  useEffect(() => {
+    (brushState, mapBrushPosition) => {
-    setPointerPosition({ x: -1, y: -1 });
+      function startShape() {
-  }, [isEditing, toolSettings]);
-
-  function handleStart(event) {
-    if (!isEditing) {
-      return;
-    }
-    if (event.touches && event.touches.length !== 1) {
-      setIsPointerDown(false);
-      setDrawingShape(null);
-      return;
-    }
-    const pointer = event.touches ? event.touches[0] : event;
-    const position = getRelativePointerPosition(pointer, containerRef.current);
-    setPointerPosition(position);
-    setIsPointerDown(true);
         const brushPosition = getBrushPositionForTool(
-      position,
+          mapBrushPosition,
-      "fog",
+          selectedToolId,
-      toolSettings,
+          selectedToolSettings,
           gridSize,
           shapes
         );
-    if (isEditing && toolSettings.type === "add") {
+        if (selectedToolSettings.type === "add") {
           setDrawingShape({
             type: "fog",
             data: { points: [brushPosition] },
             strokeWidth: 0.5,
             color: "black",
-        blend: true, // Blend while drawing
+            blend: false,
             id: shortid.generate(),
             visible: true,
           });
         }
       }
 
-  function handleMove(event) {
+      function continueShape() {
-    if (!isEditing) {
-      return;
-    }
-    if (event.touches && event.touches.length !== 1) {
-      return;
-    }
-    const pointer = event.touches ? event.touches[0] : event;
-    const position = getRelativePointerPosition(pointer, containerRef.current);
-    // Set pointer position every frame for erase tool and fog
-    if (shouldHover) {
-      setPointerPosition(position);
-    }
-    if (isPointerDown) {
-      setPointerPosition(position);
         const brushPosition = getBrushPositionForTool(
-        position,
+          mapBrushPosition,
-        "fog",
+          selectedToolId,
-        toolSettings,
+          selectedToolSettings,
           gridSize,
           shapes
         );
-      if (isEditing && toolSettings.type === "add" && drawingShape) {
+        if (selectedToolSettings.type === "add") {
           setDrawingShape((prevShape) => {
             const prevPoints = prevShape.data.points;
             if (
@@ -117,16 +87,9 @@ function MapFog({
           });
         }
       }
-  }
 
-  function handleStop(event) {
+      function endShape() {
-    if (!isEditing) {
+        if (selectedToolSettings.type === "add" && drawingShape) {
-      return;
-    }
-    if (event.touches && event.touches.length !== 0) {
-      return;
-    }
-    if (isEditing && toolSettings.type === "add" && drawingShape) {
           if (drawingShape.data.points.length > 1) {
             const shape = {
               ...drawingShape,
@@ -135,141 +98,116 @@ function MapFog({
                   drawingShape.data.points,
                   gridSize,
                   // Downscale fog as smoothing doesn't currently work with edge snapping
-              scaleRef.current / 2
+                  stageScale / 2
                 ),
               },
-          blend: false,
             };
             onShapeAdd(shape);
           }
         }
-
-    if (hoveredShapeRef.current && isPointerDown) {
-      if (toolSettings.type === "remove") {
-        onShapeRemove(hoveredShapeRef.current.id);
-      } else if (toolSettings.type === "toggle") {
-        onShapeEdit({
-          ...hoveredShapeRef.current,
-          visible: !hoveredShapeRef.current.visible,
-        });
-      }
-    }
         setDrawingShape(null);
-    setIsPointerDown(false);
       }
 
-  // Add listeners for draw events on map to allow drawing past the bounds
+      switch (brushState) {
-  // of the container
+        case "first":
-  useEffect(() => {
+          startShape();
-    const map = document.querySelector(".map");
+          return;
-    map.addEventListener("mousedown", handleStart);
+        case "drawing":
-    map.addEventListener("mousemove", handleMove);
+          continueShape();
-    map.addEventListener("mouseup", handleStop);
+          return;
-    map.addEventListener("touchstart", handleStart);
+        case "last":
-    map.addEventListener("touchmove", handleMove);
+          endShape();
-    map.addEventListener("touchend", handleStop);
+          return;
-
+        default:
-    return () => {
+          return;
-      map.removeEventListener("mousedown", handleStart);
-      map.removeEventListener("mousemove", handleMove);
-      map.removeEventListener("mouseup", handleStop);
-      map.removeEventListener("touchstart", handleStart);
-      map.removeEventListener("touchmove", handleMove);
-      map.removeEventListener("touchend", handleStop);
-    };
-  });
-
-  /**
-   * Rendering
-   */
-  const hoveredShapeRef = useRef(null);
-  const diagonalPatternRef = useRef();
-
-  useEffect(() => {
-    let image = new Image();
-    image.src = diagonalPattern;
-    diagonalPatternRef.current = image;
-  }, []);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas) {
-      const context = canvas.getContext("2d");
-
-      context.clearRect(0, 0, width, height);
-      let hoveredShape = null;
-      if (isEditing) {
-        const editPattern = context.createPattern(
-          diagonalPatternRef.current,
-          "repeat"
-        );
-        for (let shape of shapes) {
-          if (shouldHover) {
-            if (
-              isShapeHovered(shape, context, pointerPosition, width, height)
-            ) {
-              hoveredShape = shape;
       }
-          }
-          drawShape(
-            {
-              ...shape,
-              blend: true,
-              color: shape.visible ? "black" : editPattern,
     },
-            context,
+    [
+      selectedToolId,
+      selectedToolSettings,
       gridSize,
-            width,
+      stageScale,
-            height
+      onShapeAdd,
+      shapes,
+      drawingShape,
+    ]
+  );
+
+  useMapBrush(isEditing, handleShapeDraw);
+
+  function handleShapeClick(_, shape) {
+    if (!isEditing) {
+      return;
+    }
+
+    if (selectedToolSettings.type === "remove") {
+      onShapeRemove(shape.id);
+    } else if (selectedToolSettings.type === "toggle") {
+      onShapeEdit({ ...shape, visible: !shape.visible });
+    }
+  }
+
+  function handleShapeMouseOver(event, shape) {
+    if (shouldHover) {
+      const path = event.target;
+      if (shape.visible) {
+        const hoverColor = "#BB99FF";
+        path.fill(hoverColor);
+      } else {
+        path.opacity(1);
+      }
+      path.getLayer().draw();
+    }
+  }
+
+  function handleShapeMouseOut(event, shape) {
+    if (shouldHover) {
+      const path = event.target;
+      if (shape.visible) {
+        const color = colors[shape.color] || shape.color;
+        path.fill(color);
+      } else {
+        path.opacity(0.5);
+      }
+      path.getLayer().draw();
+    }
+  }
+
+  function renderShape(shape) {
+    return (
+      <Line
+        key={shape.id}
+        onMouseOver={(e) => handleShapeMouseOver(e, shape)}
+        onMouseOut={(e) => handleShapeMouseOut(e, shape)}
+        onClick={(e) => handleShapeClick(e, shape)}
+        onTap={(e) => handleShapeClick(e, shape)}
+        points={shape.data.points.reduce(
+          (acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
+          []
+        )}
+        stroke={colors[shape.color] || shape.color}
+        fill={colors[shape.color] || shape.color}
+        closed
+        lineCap="round"
+        strokeWidth={getStrokeWidth(
+          shape.strokeWidth,
+          gridSize,
+          mapWidth,
+          mapHeight
+        )}
+        visible={isEditing || shape.visible}
+        opacity={isEditing ? 0.5 : 1}
+        fillPatternImage={patternImage}
+        fillPriority={isEditing && !shape.visible ? "pattern" : "color"}
+      />
     );
   }
-        if (drawingShape) {
-          drawShape(drawingShape, context, gridSize, width, height);
-        }
-        if (hoveredShape) {
-          const shape = { ...hoveredShape, color: "#BB99FF", blend: true };
-          drawShape(shape, context, gridSize, width, height);
-        }
-      } else {
-        // Not editing
-        for (let shape of shapes) {
-          if (shape.visible) {
-            drawShape(shape, context, gridSize, width, height);
-          }
-        }
-      }
-      hoveredShapeRef.current = hoveredShape;
-    }
-  }, [
-    shapes,
-    width,
-    height,
-    pointerPosition,
-    isEditing,
-    drawingShape,
-    gridSize,
-    shouldHover,
-  ]);
 
   return (
-    <div
+    <Group>
-      style={{
+      {shapes.map(renderShape)}
-        position: "absolute",
+      {drawingShape && renderShape(drawingShape)}
-        top: 0,
+    </Group>
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: "none",
-      }}
-      ref={containerRef}
-    >
-      <canvas
-        ref={canvasRef}
-        width={width}
-        height={height}
-        style={{ width: "100%", height: "100%" }}
-      />
-    </div>
   );
 }
 

src/components/map/MapInteraction.js

@@ -1,162 +1,236 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState, useContext } from "react";
 import { Box } from "theme-ui";
-import interact from "interactjs";
+import { useGesture } from "react-use-gesture";
-import normalizeWheel from "normalize-wheel";
+import ReactResizeDetector from "react-resize-detector";
+import useImage from "use-image";
+import { Stage, Layer, Image } from "react-konva";
+
+import usePreventOverscroll from "../../helpers/usePreventOverscroll";
+import useDataSource from "../../helpers/useDataSource";
+
+import { mapSources as defaultMapSources } from "../../maps";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
+import MapStageContext from "../../contexts/MapStageContext";
+import AuthContext from "../../contexts/AuthContext";
 
-const zoomSpeed = -0.001;
+const wheelZoomSpeed = 0.001;
+const touchZoomSpeed = 0.005;
 const minZoom = 0.1;
 const maxZoom = 5;
 
-function MapInteraction({
+function MapInteraction({ map, children, controls, selectedToolId }) {
-  map,
+  const mapSource = useDataSource(map, defaultMapSources);
-  aspectRatio,
+  const [mapSourceImage] = useImage(mapSource);
-  isEnabled,
-  children,
-  sideContent,
-}) {
-  const mapContainerRef = useRef();
-  const mapMoveContainerRef = useRef();
-  const mapTranslateRef = useRef({ x: 0, y: 0 });
-  const mapScaleRef = useRef(1);
-  function setTranslateAndScale(newTranslate, newScale) {
-    const moveContainer = mapMoveContainerRef.current;
-    moveContainer.style.transform = `translate(${newTranslate.x}px, ${newTranslate.y}px) scale(${newScale})`;
-    mapScaleRef.current = newScale;
-    mapTranslateRef.current = newTranslate;
-  }
 
+  const [stageWidth, setStageWidth] = useState(1);
+  const [stageHeight, setStageHeight] = useState(1);
+  const [stageScale, setStageScale] = useState(1);
+  // "none" | "first" | "dragging" | "last"
+  const [stageDragState, setStageDragState] = useState("none");
+  const [preventMapInteraction, setPreventMapInteraction] = useState(false);
+
+  const stageWidthRef = useRef(stageWidth);
+  const stageHeightRef = useRef(stageHeight);
+  // Avoid state udpates when panning the map by using a ref and updating the konva element directly
+  const stageTranslateRef = useRef({ x: 0, y: 0 });
+  const mapDragPositionRef = useRef({ x: 0, y: 0 });
+
+  // Reset transform when map changes
   useEffect(() => {
-    function handleMove(event, isGesture) {
+    const layer = mapLayerRef.current;
-      const scale = mapScaleRef.current;
+    if (map && layer) {
-      const translate = mapTranslateRef.current;
+      const mapHeight = stageWidthRef.current * (map.height / map.width);
-
+      const newTranslate = {
-      let newScale = scale;
+        x: 0,
-      let newTranslate = translate;
+        y: -(mapHeight - stageHeightRef.current) / 2,
-
-      if (isGesture) {
-        newScale = Math.max(Math.min(scale + event.ds, maxZoom), minZoom);
-      }
-
-      if (isEnabled || isGesture) {
-        newTranslate = {
-          x: translate.x + event.dx,
-          y: translate.y + event.dy,
       };
-      }
+      layer.x(newTranslate.x);
-      setTranslateAndScale(newTranslate, newScale);
+      layer.y(newTranslate.y);
-    }
+      layer.draw();
-    const mapInteract = interact(".map")
+      stageTranslateRef.current = newTranslate;
-      .gesturable({
-        listeners: {
-          move: (e) => handleMove(e, true),
-        },
-      })
-      .draggable({
-        inertia: true,
-        listeners: {
-          move: (e) => handleMove(e, false),
-        },
-        cursorChecker: () => {
-          return isEnabled && map ? "move" : "default";
-        },
-      })
-      .on("doubletap", (event) => {
-        event.preventDefault();
-        if (isEnabled) {
-          setTranslateAndScale({ x: 0, y: 0 }, 1);
-        }
-      });
 
-    return () => {
+      setStageScale(1);
-      mapInteract.unset();
+    }
-    };
-  }, [isEnabled, map]);
-
-  // Reset map transform when map changes
-  useEffect(() => {
-    setTranslateAndScale({ x: 0, y: 0 }, 1);
   }, [map]);
 
-  // Bind the wheel event of the map via a ref
+  // Convert a client space XY to be normalized to the map image
-  // in order to support non-passive event listening
+  function getMapDragPosition(xy) {
-  // to allow the track pad zoom to be interrupted
+    const [x, y] = xy;
-  // see https://github.com/facebook/react/issues/14856
+    const container = containerRef.current;
-  useEffect(() => {
+    const mapImage = mapImageRef.current;
-    const mapContainer = mapContainerRef.current;
+    if (container && mapImage) {
+      const containerRect = container.getBoundingClientRect();
+      const mapRect = mapImage.getClientRect();
 
-    function handleZoom(event) {
+      const offsetX = x - containerRect.left - mapRect.x;
-      // Stop overscroll on chrome and safari
+      const offsetY = y - containerRect.top - mapRect.y;
-      // also stop pinch to zoom on chrome
-      event.preventDefault();
 
-      // Try and normalize the wheel event to prevent OS differences for zoom speed
+      const normalizedX = offsetX / mapRect.width;
-      const normalized = normalizeWheel(event);
+      const normalizedY = offsetY / mapRect.height;
 
-      const scale = mapScaleRef.current;
+      return { x: normalizedX, y: normalizedY };
-      const translate = mapTranslateRef.current;
+    }
-
-      const deltaY = normalized.pixelY * zoomSpeed;
-      const newScale = Math.max(Math.min(scale + deltaY, maxZoom), minZoom);
-
-      setTranslateAndScale(translate, newScale);
   }
 
-    if (mapContainer) {
+  const pinchPreviousDistanceRef = useRef();
-      mapContainer.addEventListener("wheel", handleZoom, {
+  const pinchPreviousOriginRef = useRef();
-        passive: false,
+
-      });
+  const bind = useGesture({
+    onWheel: ({ delta }) => {
+      const newScale = Math.min(
+        Math.max(stageScale + delta[1] * wheelZoomSpeed, minZoom),
+        maxZoom
+      );
+      setStageScale(newScale);
+    },
+    onPinch: ({ da, origin, first }) => {
+      const [distance] = da;
+      const [originX, originY] = origin;
+      if (first) {
+        pinchPreviousDistanceRef.current = distance;
+        pinchPreviousOriginRef.current = { x: originX, y: originY };
       }
 
-    return () => {
+      // Apply scale
-      if (mapContainer) {
+      const distanceDelta = distance - pinchPreviousDistanceRef.current;
-        mapContainer.removeEventListener("wheel", handleZoom);
+      const originXDelta = originX - pinchPreviousOriginRef.current.x;
-      }
+      const originYDelta = originY - pinchPreviousOriginRef.current.y;
+      const newScale = Math.min(
+        Math.max(stageScale + distanceDelta * touchZoomSpeed, minZoom),
+        maxZoom
+      );
+      setStageScale(newScale);
+
+      // Apply translate
+      const stageTranslate = stageTranslateRef.current;
+      const layer = mapLayerRef.current;
+      const newTranslate = {
+        x: stageTranslate.x + originXDelta / newScale,
+        y: stageTranslate.y + originYDelta / newScale,
+      };
+      layer.x(newTranslate.x);
+      layer.y(newTranslate.y);
+      layer.draw();
+      stageTranslateRef.current = newTranslate;
+
+      pinchPreviousDistanceRef.current = distance;
+      pinchPreviousOriginRef.current = { x: originX, y: originY };
+    },
+    onDrag: ({ delta, xy, first, last, pinching }) => {
+      if (preventMapInteraction || pinching) {
+        return;
+      }
+
+      const [dx, dy] = delta;
+      const stageTranslate = stageTranslateRef.current;
+      const layer = mapLayerRef.current;
+      if (selectedToolId === "pan") {
+        const newTranslate = {
+          x: stageTranslate.x + dx / stageScale,
+          y: stageTranslate.y + dy / stageScale,
+        };
+        layer.x(newTranslate.x);
+        layer.y(newTranslate.y);
+        layer.draw();
+        stageTranslateRef.current = newTranslate;
+      }
+      mapDragPositionRef.current = getMapDragPosition(xy);
+      const newDragState = first ? "first" : last ? "last" : "dragging";
+      if (stageDragState !== newDragState) {
+        setStageDragState(newDragState);
+      }
+    },
+    onDragEnd: () => {
+      setStageDragState("none");
+    },
+  });
+
+  function handleResize(width, height) {
+    setStageWidth(width);
+    setStageHeight(height);
+    stageWidthRef.current = width;
+    stageHeightRef.current = height;
+  }
+
+  function getCursorForTool(tool) {
+    switch (tool) {
+      case "pan":
+        return "move";
+      case "fog":
+      case "brush":
+      case "shape":
+        return "crosshair";
+      default:
+        return "default";
+    }
+  }
+
+  const containerRef = useRef();
+  usePreventOverscroll(containerRef);
+
+  const mapWidth = stageWidth;
+  const mapHeight = map ? stageWidth * (map.height / map.width) : stageHeight;
+
+  const mapStageRef = useContext(MapStageContext);
+  const mapLayerRef = useRef();
+  const mapImageRef = useRef();
+
+  const auth = useContext(AuthContext);
+
+  const mapInteraction = {
+    stageScale,
+    stageWidth,
+    stageHeight,
+    stageDragState,
+    setPreventMapInteraction,
+    mapWidth,
+    mapHeight,
+    mapDragPositionRef,
   };
-  }, []);
 
   return (
     <Box
       sx={{
         flexGrow: 1,
         position: "relative",
-        overflow: "hidden",
+        cursor: getCursorForTool(selectedToolId),
-        backgroundColor: "rgba(0, 0, 0, 0.1)",
-        userSelect: "none",
         touchAction: "none",
       }}
-      bg="background"
+      ref={containerRef}
-    >
+      {...bind()}
-      <Box
       className="map"
-        sx={{
-          position: "relative",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-        }}
-        ref={mapContainerRef}
     >
-        <Box ref={mapMoveContainerRef}>
+      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
-          <Box
+        <Stage
-            sx={{
+          width={stageWidth}
-              width: "100%",
+          height={stageHeight}
-              height: 0,
+          scale={{ x: stageScale, y: stageScale }}
-              paddingBottom: `${(1 / aspectRatio) * 100}%`,
+          x={stageWidth / 2}
-            }}
+          y={stageHeight / 2}
+          offset={{ x: stageWidth / 2, y: stageHeight / 2 }}
+          ref={mapStageRef}
+        >
+          <Layer ref={mapLayerRef}>
+            <Image
+              image={mapSourceImage}
+              width={mapWidth}
+              height={mapHeight}
+              id="mapImage"
+              ref={mapImageRef}
             />
-          <MapInteractionProvider
+            {/* Forward auth context to konva elements */}
-            value={{
+            <AuthContext.Provider value={auth}>
-              translateRef: mapTranslateRef,
+              <MapInteractionProvider value={mapInteraction}>
-              scaleRef: mapScaleRef,
-            }}
-          >
                 {children}
               </MapInteractionProvider>
-        </Box>
+            </AuthContext.Provider>
-      </Box>
+          </Layer>
-      {sideContent}
+        </Stage>
+      </ReactResizeDetector>
+      <MapInteractionProvider value={mapInteraction}>
+        {controls}
+      </MapInteractionProvider>
     </Box>
   );
 }

src/components/map/MapMenu.js

@@ -1,8 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import Modal from "react-modal";
-
 import { useThemeUI } from "theme-ui";
 
+import MapInteractionContext from "../../contexts/MapInteractionContext";
+
+import usePrevious from "../../helpers/usePrevious";
+
 function MapMenu({
   isOpen,
   onRequestClose,
@@ -21,6 +24,17 @@ function MapMenu({
   // callback
   const [modalContentNode, setModalContentNode] = useState(null);
 
+  // Toggle map interaction when menu is opened
+  const wasOpen = usePrevious(isOpen);
+  const { setPreventMapInteraction } = useContext(MapInteractionContext);
+  useEffect(() => {
+    if (isOpen && !wasOpen) {
+      setPreventMapInteraction(true);
+    } else if (wasOpen && !isOpen) {
+      setPreventMapInteraction(false);
+    }
+  }, [isOpen, setPreventMapInteraction, wasOpen]);
+
   useEffect(() => {
     // Close modal if interacting with any other element
     function handlePointerDown(event) {
@@ -45,6 +59,7 @@ function MapMenu({
         { once: true }
       );
     }
+
     return () => {
       if (modalContentNode) {
         document.body.removeEventListener("pointerdown", handlePointerDown);

src/components/map/MapSettings.js

@@ -34,7 +34,7 @@ function MapSettings({
             onChange={(e) =>
               onSettingsChange("gridX", parseInt(e.target.value))
             }
-            disabled={map === null || map.type === "default"}
+            disabled={!map || map.type === "default"}
             min={1}
             my={1}
           />
@@ -48,7 +48,7 @@ function MapSettings({
             onChange={(e) =>
               onSettingsChange("gridY", parseInt(e.target.value))
             }
-            disabled={map === null || map.type === "default"}
+            disabled={!map || map.type === "default"}
             min={1}
             my={1}
           />
@@ -61,19 +61,15 @@ function MapSettings({
             <Flex my={1}>
               <Label>
                 <Checkbox
-                  checked={
+                  checked={mapState && mapState.editFlags.includes("fog")}
-                    mapState !== null && mapState.editFlags.includes("fog")
+                  disabled={!mapState}
-                  }
-                  disabled={mapState === null}
                   onChange={(e) => handleFlagChange(e, "fog")}
                 />
                 Fog
               </Label>
               <Label>
                 <Checkbox
-                  checked={
+                  checked={mapState && mapState.editFlags.includes("drawing")}
-                    mapState !== null && mapState.editFlags.includes("drawing")
-                  }
                   disabled={mapState === null}
                   onChange={(e) => handleFlagChange(e, "drawing")}
                 />
@@ -81,10 +77,8 @@ function MapSettings({
               </Label>
               <Label>
                 <Checkbox
-                  checked={
+                  checked={mapState && mapState.editFlags.includes("tokens")}
-                    mapState !== null && mapState.editFlags.includes("tokens")
+                  disabled={!mapState}
-                  }
-                  disabled={mapState === null}
                   onChange={(e) => handleFlagChange(e, "tokens")}
                 />
                 Tokens
@@ -97,7 +91,7 @@ function MapSettings({
               name="name"
               value={(map && map.name) || ""}
               onChange={(e) => onSettingsChange("name", e.target.value)}
-              disabled={map === null || map.type === "default"}
+              disabled={!map || map.type === "default"}
               my={1}
             />
           </Box>
@@ -115,7 +109,7 @@ function MapSettings({
         }}
         aria-label={showMore ? "Show Less" : "Show More"}
         title={showMore ? "Show Less" : "Show More"}
-        disabled={map === null}
+        disabled={!map}
       >
         <ExpandMoreIcon />
       </IconButton>

src/components/map/MapTile.js

@@ -6,7 +6,7 @@ import ResetMapIcon from "../../icons/ResetMapIcon";
 import ExpandMoreDotIcon from "../../icons/ExpandMoreDotIcon";
 
 import useDataSource from "../../helpers/useDataSource";
-import { mapSources as defaultMapSources } from "../../maps";
+import { mapSources as defaultMapSources, unknownSource } from "../../maps";
 
 function MapTile({
   map,
@@ -15,9 +15,9 @@ function MapTile({
   onMapSelect,
   onMapRemove,
   onMapReset,
-  onSubmit,
+  onDone,
 }) {
-  const mapSource = useDataSource(map, defaultMapSources);
+  const mapSource = useDataSource(map, defaultMapSources, unknownSource);
   const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
   const isDefault = map.type === "default";
   const hasMapState =
@@ -108,7 +108,7 @@ function MapTile({
       }}
       onDoubleClick={(e) => {
         if (!isMapTileMenuOpen) {
-          onSubmit(e);
+          onDone(e);
         }
       }}
     >

src/components/map/MapTiles.js

@@ -17,7 +17,7 @@ function MapTiles({
   onMapAdd,
   onMapRemove,
   onMapReset,
-  onSubmit,
+  onDone,
 }) {
   const { databaseStatus } = useContext(DatabaseContext);
   return (
@@ -69,7 +69,7 @@ function MapTiles({
               onMapSelect={onMapSelect}
               onMapRemove={onMapRemove}
               onMapReset={onMapReset}
-              onSubmit={onSubmit}
+              onDone={onDone}
             />
           ))}
         </Flex>

src/components/map/MapToken.js

@@ -1,69 +1,230 @@
-import React, { useRef } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
-import { Box, Image } from "theme-ui";
+import { Image as KonvaImage, Group } from "react-konva";
+import { useSpring, animated } from "react-spring/konva";
+import useImage from "use-image";
 
-import TokenLabel from "../token/TokenLabel";
-import TokenStatus from "../token/TokenStatus";
-
-import usePreventTouch from "../../helpers/usePreventTouch";
 import useDataSource from "../../helpers/useDataSource";
+import useDebounce from "../../helpers/useDebounce";
+import usePrevious from "../../helpers/usePrevious";
 
-import { tokenSources } from "../../tokens";
+import AuthContext from "../../contexts/AuthContext";
+import MapInteractionContext from "../../contexts/MapInteractionContext";
 
-function MapToken({ token, tokenState, tokenSizePercent, className }) {
+import TokenStatus from "../token/TokenStatus";
-  const imageSource = useDataSource(token, tokenSources);
+import TokenLabel from "../token/TokenLabel";
 
+import { tokenSources, unknownSource } from "../../tokens";
+
+function MapToken({
+  token,
+  tokenState,
+  tokenSizePercent,
+  onTokenStateChange,
+  onTokenMenuOpen,
+  onTokenDragStart,
+  onTokenDragEnd,
+  draggable,
+  mapState,
+}) {
+  const { userId } = useContext(AuthContext);
+  const {
+    setPreventMapInteraction,
+    mapWidth,
+    mapHeight,
+    stageScale,
+  } = useContext(MapInteractionContext);
+
+  const tokenSource = useDataSource(token, tokenSources, unknownSource);
+  const [tokenSourceImage, tokenSourceStatus] = useImage(tokenSource);
+  const [tokenAspectRatio, setTokenAspectRatio] = useState(1);
+
+  useEffect(() => {
+    if (tokenSourceImage) {
+      setTokenAspectRatio(tokenSourceImage.width / tokenSourceImage.height);
+    }
+  }, [tokenSourceImage]);
+
+  function handleDragStart(event) {
+    const tokenImage = event.target;
+    const tokenImageRect = tokenImage.getClientRect();
+
+    if (token.isVehicle) {
+      // Find all other tokens on the map
+      const layer = tokenImage.getLayer();
+      const tokens = layer.find(".token");
+      for (let other of tokens) {
+        if (other === tokenImage) {
+          continue;
+        }
+        const otherRect = other.getClientRect();
+        const otherCenter = {
+          x: otherRect.x + otherRect.width / 2,
+          y: otherRect.y + otherRect.height / 2,
+        };
+        // Check the other tokens center overlaps this tokens bounding box
+        if (
+          otherCenter.x > tokenImageRect.x &&
+          otherCenter.x < tokenImageRect.x + tokenImageRect.width &&
+          otherCenter.y > tokenImageRect.y &&
+          otherCenter.y < tokenImageRect.y + tokenImageRect.height
+        ) {
+          // Save and restore token position after moving layer
+          const position = other.absolutePosition();
+          other.moveTo(tokenImage);
+          other.absolutePosition(position);
+        }
+      }
+    }
+
+    onTokenDragStart(event);
+  }
+
+  function handleDragEnd(event) {
+    const tokenImage = event.target;
+
+    const mountChanges = {};
+    if (token.isVehicle) {
+      const layer = tokenImage.getLayer();
+      const mountedTokens = tokenImage.find(".token");
+      for (let mountedToken of mountedTokens) {
+        // Save and restore token position after moving layer
+        const position = mountedToken.absolutePosition();
+        mountedToken.moveTo(layer);
+        mountedToken.absolutePosition(position);
+        mountChanges[mountedToken.id()] = {
+          ...mapState.tokens[mountedToken.id()],
+          x: mountedToken.x() / mapWidth,
+          y: mountedToken.y() / mapHeight,
+          lastEditedBy: userId,
+        };
+      }
+    }
+
+    setPreventMapInteraction(false);
+    onTokenStateChange({
+      ...mountChanges,
+      [tokenState.id]: {
+        ...tokenState,
+        x: tokenImage.x() / mapWidth,
+        y: tokenImage.y() / mapHeight,
+        lastEditedBy: userId,
+      },
+    });
+    onTokenDragEnd(event);
+  }
+
+  function handleClick(event) {
+    if (draggable) {
+      const tokenImage = event.target;
+      onTokenMenuOpen(tokenState.id, tokenImage);
+    }
+  }
+
+  const [tokenOpacity, setTokenOpacity] = useState(1);
+  function handlePointerDown() {
+    if (draggable) {
+      setPreventMapInteraction(true);
+    }
+  }
+
+  function handlePointerUp() {
+    if (draggable) {
+      setPreventMapInteraction(false);
+    }
+  }
+
+  function handlePointerOver() {
+    if (!draggable) {
+      setTokenOpacity(0.5);
+    }
+  }
+
+  function handlePointerOut() {
+    if (!draggable) {
+      setTokenOpacity(1.0);
+    }
+  }
+
+  const tokenWidth = tokenSizePercent * mapWidth * tokenState.size;
+  const tokenHeight =
+    tokenSizePercent * (mapWidth / tokenAspectRatio) * tokenState.size;
+
+  const debouncedStageScale = useDebounce(stageScale, 50);
   const imageRef = useRef();
-  // Stop touch to prevent 3d touch gesutre on iOS
+  useEffect(() => {
-  usePreventTouch(imageRef);
+    const image = imageRef.current;
+    if (
+      image &&
+      tokenSourceStatus === "loaded" &&
+      tokenWidth > 0 &&
+      tokenHeight > 0
+    ) {
+      image.cache({
+        pixelRatio: debouncedStageScale * window.devicePixelRatio,
+      });
+      image.drawHitFromCache();
+      // Force redraw
+      image.getLayer().draw();
+    }
+  }, [debouncedStageScale, tokenWidth, tokenHeight, tokenSourceStatus]);
+
+  // Animate to new token positions if edited by others
+  const tokenX = tokenState.x * mapWidth;
+  const tokenY = tokenState.y * mapHeight;
+  const previousWidth = usePrevious(mapWidth);
+  const previousHeight = usePrevious(mapHeight);
+  const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
+  const skipAnimation = tokenState.lastEditedBy === userId || resized;
+  const props = useSpring({
+    x: tokenX,
+    y: tokenY,
+    immediate: skipAnimation,
+  });
 
   return (
-    <Box
+    <animated.Group
-      style={{
+      {...props}
-        transform: `translate(${tokenState.x * 100}%, ${tokenState.y * 100}%)`,
+      width={tokenWidth}
-        width: "100%",
+      height={tokenHeight}
-        height: "100%",
+      draggable={draggable}
-      }}
+      onMouseDown={handlePointerDown}
-      sx={{
+      onMouseUp={handlePointerUp}
-        position: "absolute",
+      onMouseOver={handlePointerOver}
-        pointerEvents: "none",
+      onMouseOut={handlePointerOut}
-      }}
+      onTouchStart={handlePointerDown}
+      onTouchEnd={handlePointerUp}
+      onClick={handleClick}
+      onTap={handleClick}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      opacity={tokenOpacity}
+      name={token && token.isVehicle ? "vehicle" : "token"}
+      id={tokenState.id}
     >
-      <Box
+      <KonvaImage
-        style={{
-          width: `${tokenSizePercent * (tokenState.size || 1)}%`,
-        }}
-        sx={{
-          position: "absolute",
-          pointerEvents: "all",
-        }}
-      >
-        <Box
-          sx={{
-            position: "absolute",
-            display: "flex", // Set display to flex to fix height being calculated wrong
-            width: "100%",
-            flexDirection: "column",
-          }}
-        >
-          <Image
-            className={className}
-            sx={{
-              userSelect: "none",
-              touchAction: "none",
-              width: "100%",
-            }}
-            src={imageSource}
-            // pass id into the dom element which is then used by the ProxyToken
-            data-id={tokenState.id}
         ref={imageRef}
+        width={tokenWidth}
+        height={tokenHeight}
+        x={0}
+        y={0}
+        image={tokenSourceImage}
+        rotation={tokenState.rotation}
+        offsetX={tokenWidth / 2}
+        offsetY={tokenHeight / 2}
       />
-          {tokenState.statuses && (
+      <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
-            <TokenStatus statuses={tokenState.statuses} />
+        <TokenStatus
-          )}
+          tokenState={tokenState}
-          {tokenState.label && <TokenLabel label={tokenState.label} />}
+          width={tokenWidth}
-        </Box>
+          height={tokenHeight}
-      </Box>
+        />
-    </Box>
+        <TokenLabel
+          tokenState={tokenState}
+          width={tokenWidth}
+          height={tokenHeight}
+        />
+      </Group>
+    </animated.Group>
   );
 }
 

src/components/map/SelectMapButton.js

@@ -1,16 +1,30 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import { IconButton } from "theme-ui";
 
 import SelectMapModal from "../../modals/SelectMapModal";
 import SelectMapIcon from "../../icons/SelectMapIcon";
 
-function SelectMapButton({ onMapChange, onMapStateChange, currentMap }) {
+import MapDataContext from "../../contexts/MapDataContext";
-  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+import MapInteractionContext from "../../contexts/MapInteractionContext";
+
+function SelectMapButton({
+  onMapChange,
+  onMapStateChange,
+  currentMap,
+  currentMapState,
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const { setPreventMapInteraction } = useContext(MapInteractionContext);
+  const { updateMapState } = useContext(MapDataContext);
   function openModal() {
-    setIsAddModalOpen(true);
+    currentMapState && updateMapState(currentMapState.mapId, currentMapState);
+    setIsModalOpen(true);
+    setPreventMapInteraction(true);
   }
   function closeModal() {
-    setIsAddModalOpen(false);
+    setIsModalOpen(false);
+    setPreventMapInteraction(false);
   }
 
   function handleDone() {
@@ -27,7 +41,7 @@ function SelectMapButton({ onMapChange, onMapStateChange, currentMap }) {
         <SelectMapIcon />
       </IconButton>
       <SelectMapModal
-        isOpen={isAddModalOpen}
+        isOpen={isModalOpen}
         onRequestClose={closeModal}
         onDone={handleDone}
         onMapChange={onMapChange}

src/components/token/ListToken.js

@@ -4,10 +4,10 @@ import { Box, Image } from "theme-ui";
 import usePreventTouch from "../../helpers/usePreventTouch";
 import useDataSource from "../../helpers/useDataSource";
 
-import { tokenSources } from "../../tokens";
+import { tokenSources, unknownSource } from "../../tokens";
 
 function ListToken({ token, className }) {
-  const imageSource = useDataSource(token, tokenSources);
+  const imageSource = useDataSource(token, tokenSources, unknownSource);
 
   const imageRef = useRef();
   // Stop touch to prevent 3d touch gesutre on iOS
@@ -19,7 +19,13 @@ function ListToken({ token, className }) {
         src={imageSource}
         ref={imageRef}
         className={className}
-        sx={{ userSelect: "none", touchAction: "none" }}
+        sx={{
+          userSelect: "none",
+          touchAction: "none",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
         // pass id into the dom element which is then used by the ProxyToken
         data-id={token.id}
       />

src/components/token/ProxyToken.js

@@ -1,12 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useContext } from "react";
 import ReactDOM from "react-dom";
 import { Image, Box } from "theme-ui";
 import interact from "interactjs";
 
 import usePortal from "../../helpers/usePortal";
 
-import TokenLabel from "./TokenLabel";
+import MapStageContext from "../../contexts/MapStageContext";
-import TokenStatus from "./TokenStatus";
 
 /**
  * @callback onProxyDragEnd
@@ -19,46 +18,33 @@ import TokenStatus from "./TokenStatus";
  * @param {string} tokenClassName The class name to attach the interactjs handler to
  * @param {onProxyDragEnd} onProxyDragEnd Called when the proxy token is dropped
  * @param {Object} tokens An optional mapping of tokens to use as a base when calling OnProxyDragEnd
- * @param {Object} disabledTokens An optional mapping of tokens that shouldn't allow movement
 
  */
-function ProxyToken({
+function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
-  tokenClassName,
-  onProxyDragEnd,
-  tokens,
-  disabledTokens,
-}) {
   const proxyContainer = usePortal("root");
 
   const [imageSource, setImageSource] = useState("");
-  const [tokenId, setTokenId] = useState(null);
   const proxyRef = useRef();
 
   // Store the tokens in a ref and access in the interactjs loop
   // This is needed to stop interactjs from creating multiple listeners
   const tokensRef = useRef(tokens);
-  const disabledTokensRef = useRef(disabledTokens);
   useEffect(() => {
     tokensRef.current = tokens;
-    disabledTokensRef.current = disabledTokens;
+  }, [tokens]);
-  }, [tokens, disabledTokens]);
 
   const proxyOnMap = useRef(false);
+  const mapStageRef = useContext(MapStageContext);
 
   useEffect(() => {
     interact(`.${tokenClassName}`).draggable({
       listeners: {
         start: (event) => {
           let target = event.target;
-          const id = target.dataset.id;
-          if (id in disabledTokensRef.current) {
-            return;
-          }
 
           // Hide the token and copy it's image to the proxy
           target.parentElement.style.opacity = "0.25";
           setImageSource(target.src);
-          setTokenId(id);
 
           let proxy = proxyRef.current;
           if (proxy) {
@@ -105,23 +91,29 @@ function ProxyToken({
         end: (event) => {
           let target = event.target;
           const id = target.dataset.id;
-          if (id in disabledTokensRef.current) {
-            return;
-          }
           let proxy = proxyRef.current;
           if (proxy) {
-            const mapImage = document.querySelector(".mapImage");
+            const mapStage = mapStageRef.current;
-            if (onProxyDragEnd && mapImage) {
+            if (onProxyDragEnd && mapStage) {
-              const mapImageRect = mapImage.getBoundingClientRect();
+              const mapImageRect = mapStage
+                .findOne("#mapImage")
+                .getClientRect();
+
+              const map = document.querySelector(".map");
+              const mapRect = map.getBoundingClientRect();
 
               let x = parseFloat(proxy.getAttribute("data-x")) || 0;
               let y = parseFloat(proxy.getAttribute("data-y")) || 0;
+
+              // TODO: This seems to be wrong when map is zoomed
+
               // Convert coordiantes to be relative to the map
-              x = x - mapImageRect.left;
+              x = x - mapRect.left - mapImageRect.x;
-              y = y - mapImageRect.top;
+              y = y - mapRect.top - mapImageRect.y;
+
               // Normalize to map width
-              x = x / (mapImageRect.right - mapImageRect.left);
+              x = x / mapImageRect.width;
-              y = y / (mapImageRect.bottom - mapImageRect.top);
+              y = y / mapImageRect.height;
 
               // Get the token from the supplied tokens if it exists
               const token = tokensRef.current[id] || {};
@@ -145,7 +137,7 @@ function ProxyToken({
         },
       },
     });
-  }, [onProxyDragEnd, tokenClassName, proxyContainer]);
+  }, [onProxyDragEnd, tokenClassName, proxyContainer, mapStageRef]);
 
   if (!imageSource) {
     return null;
@@ -175,12 +167,6 @@ function ProxyToken({
             width: "100%",
           }}
         />
-        {tokens[tokenId] && tokens[tokenId].statuses && (
-          <TokenStatus statuses={tokens[tokenId].statuses} />
-        )}
-        {tokens[tokenId] && tokens[tokenId].label && (
-          <TokenLabel label={tokens[tokenId].label} />
-        )}
       </Box>
     </Box>,
     proxyContainer
@@ -189,7 +175,6 @@ function ProxyToken({
 
 ProxyToken.defaultProps = {
   tokens: {},
-  disabledTokens: {},
 };
 
 export default ProxyToken;

src/components/token/SelectTokensButton.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { IconButton } from "theme-ui";
+
+import SelectTokensIcon from "../../icons/SelectTokensIcon";
+
+import SelectTokensModal from "../../modals/SelectTokensModal";
+
+function SelectTokensButton() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  function openModal() {
+    setIsModalOpen(true);
+  }
+  function closeModal() {
+    setIsModalOpen(false);
+  }
+
+  function handleDone() {
+    closeModal();
+  }
+  return (
+    <>
+      <IconButton
+        aria-label="Edit Tokens"
+        title="Edit Tokens"
+        onClick={openModal}
+      >
+        <SelectTokensIcon />
+      </IconButton>
+      <SelectTokensModal
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        onDone={handleDone}
+      />
+    </>
+  );
+}
+
+export default SelectTokensButton;

src/components/token/TokenDragOverlay.js

@@ -0,0 +1,133 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Box, IconButton } from "theme-ui";
+
+import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
+
+import AuthContext from "../../contexts/AuthContext";
+import MapInteractionContext from "../../contexts/MapInteractionContext";
+
+function TokenDragOverlay({
+  onTokenStateRemove,
+  onTokenStateChange,
+  token,
+  tokenState,
+  tokenImage,
+  mapState,
+}) {
+  const { userId } = useContext(AuthContext);
+  const { setPreventMapInteraction, mapWidth, mapHeight } = useContext(
+    MapInteractionContext
+  );
+
+  const [isRemoveHovered, setIsRemoveHovered] = useState(false);
+  const removeTokenRef = useRef();
+
+  // Detect token hover on remove icon manually to support touch devices
+  useEffect(() => {
+    const map = document.querySelector(".map");
+    const mapRect = map.getBoundingClientRect();
+
+    function detectRemoveHover() {
+      const pointerPosition = tokenImage.getStage().getPointerPosition();
+      const screenSpacePointerPosition = {
+        x: pointerPosition.x + mapRect.left,
+        y: pointerPosition.y + mapRect.top,
+      };
+      const removeIconPosition = removeTokenRef.current.getBoundingClientRect();
+
+      if (
+        screenSpacePointerPosition.x > removeIconPosition.left &&
+        screenSpacePointerPosition.y > removeIconPosition.top &&
+        screenSpacePointerPosition.x < removeIconPosition.right &&
+        screenSpacePointerPosition.y < removeIconPosition.bottom
+      ) {
+        if (!isRemoveHovered) {
+          setIsRemoveHovered(true);
+        }
+      } else if (isRemoveHovered) {
+        setIsRemoveHovered(false);
+      }
+    }
+
+    let handler;
+    if (tokenState && tokenImage) {
+      handler = setInterval(detectRemoveHover, 100);
+    }
+
+    return () => {
+      if (handler) {
+        clearInterval(handler);
+      }
+    };
+  }, [tokenState, tokenImage, isRemoveHovered]);
+
+  // Detect drag end of token image and remove it if it is over the remove icon
+  useEffect(() => {
+    function handleTokenDragEnd() {
+      if (isRemoveHovered) {
+        // Handle other tokens when a vehicle gets deleted
+        if (token.isVehicle) {
+          const layer = tokenImage.getLayer();
+          const mountedTokens = tokenImage.find(".token");
+          for (let mountedToken of mountedTokens) {
+            // Save and restore token position after moving layer
+            const position = mountedToken.absolutePosition();
+            mountedToken.moveTo(layer);
+            mountedToken.absolutePosition(position);
+            onTokenStateChange({
+              [mountedToken.id()]: {
+                ...mapState.tokens[mountedToken.id()],
+                x: mountedToken.x() / mapWidth,
+                y: mountedToken.y() / mapHeight,
+                lastEditedBy: userId,
+              },
+            });
+          }
+        }
+        onTokenStateRemove(tokenState);
+        setPreventMapInteraction(false);
+      }
+    }
+    tokenImage.on("dragend", handleTokenDragEnd);
+    return () => {
+      tokenImage.off("dragend", handleTokenDragEnd);
+    };
+  }, [
+    tokenImage,
+    token,
+    tokenState,
+    isRemoveHovered,
+    mapWidth,
+    mapHeight,
+    userId,
+    onTokenStateChange,
+    onTokenStateRemove,
+    setPreventMapInteraction,
+    mapState.tokens,
+  ]);
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        bottom: "32px",
+        left: "50%",
+        borderRadius: "50%",
+        transform: isRemoveHovered
+          ? "translateX(-50%) scale(2.0)"
+          : "translateX(-50%) scale(1.5)",
+        transition: "transform 250ms ease",
+        color: isRemoveHovered ? "primary" : "text",
+        pointerEvents: "none",
+      }}
+      bg="overlay"
+      ref={removeTokenRef}
+    >
+      <IconButton>
+        <RemoveTokenIcon />
+      </IconButton>
+    </Box>
+  );
+}
+
+export default TokenDragOverlay;

src/components/token/TokenLabel.js

@@ -1,51 +1,49 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
-import { Image, Box, Text } from "theme-ui";
+import { Rect, Text, Group } from "react-konva";
 
-import tokenLabel from "../../images/TokenLabel.png";
+function TokenLabel({ tokenState, width, height }) {
+  const fontSize = height / 6 / tokenState.size;
+  const paddingY = height / 16 / tokenState.size;
+  const paddingX = height / 8 / tokenState.size;
+
+  const [rectWidth, setRectWidth] = useState(0);
+  useEffect(() => {
+    const text = textRef.current;
+    if (text && tokenState.label) {
+      setRectWidth(text.getTextWidth() + paddingX);
+    } else {
+      setRectWidth(0);
+    }
+  }, [tokenState.label, paddingX]);
+
+  const textRef = useRef();
 
-function TokenLabel({ label }) {
   return (
-    <Box
+    <Group y={height - (fontSize + paddingY) / 2}>
-      sx={{
+      <Rect
-        position: "absolute",
+        y={-paddingY / 2}
-        transform: "scale(0.3) translate(0, 20%)",
+        width={rectWidth}
-        transformOrigin: "bottom center",
+        offsetX={width / 2}
-        pointerEvents: "none",
+        x={width - rectWidth / 2}
-        width: "100%",
+        height={fontSize + paddingY}
-        display: "flex", // Set display to flex to fix height being calculated wrong
+        fill="hsla(230, 25%, 18%, 0.8)"
-        flexDirection: "column",
+        cornerRadius={(fontSize + paddingY) / 2}
-      }}
+      />
-    >
-      <Image sx={{ width: "100%" }} src={tokenLabel} />
-      <svg
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-        }}
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <foreignObject width="100%" height="100%">
       <Text
-            as="p"
+        ref={textRef}
-            variant="heading"
+        width={width}
-            sx={{
+        text={tokenState.label}
-              // This value is actually 66%
+        fontSize={fontSize}
-              fontSize: "66px",
+        lineHeight={1}
-              width: "100px",
+        align="center"
-              height: "100px",
+        verticalAlign="bottom"
-              textAlign: "center",
+        fill="white"
-              verticalAlign: "middle",
+        paddingX={paddingX}
-              lineHeight: 1.4,
+        paddingY={paddingY}
-            }}
+        wrap="none"
-            color="hsl(210, 50%, 96%)"
+        ellipsis={true}
-          >
+      />
-            {label}
+    </Group>
-          </Text>
-        </foreignObject>
-      </svg>
-    </Box>
   );
 }
 

src/components/token/TokenMenu.js

@@ -1,119 +1,78 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
-import interact from "interactjs";
+import { Box, Input, Slider, Flex, Text } from "theme-ui";
-import { Box, Input } from "theme-ui";
 
 import MapMenu from "../map/MapMenu";
 
 import colors, { colorOptions } from "../../helpers/colors";
 
-/**
+import usePrevious from "../../helpers/usePrevious";
- * @callback onTokenChange
- * @param {Object} token the token that was changed
- */
 
-/**
+const defaultTokenMaxSize = 6;
- *
+function TokenMenu({
- * @param {string} tokenClassName The class name to attach the interactjs handler to
+  isOpen,
- * @param {onProxyDragEnd} onTokenChange Called when the the token data is changed
+  onRequestClose,
- * @param {Object} tokens An mapping of tokens to use as a base when calling onTokenChange
+  tokenState,
- * @param {Object} disabledTokens An optional mapping of tokens that shouldn't allow interaction
+  tokenImage,
- */
+  onTokenStateChange,
-function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
+}) {
-  const [isOpen, setIsOpen] = useState(false);
+  const wasOpen = usePrevious(isOpen);
 
-  function handleRequestClose() {
+  const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
-    setIsOpen(false);
-  }
-
-  // Store the tokens in a ref and access in the interactjs loop
-  // This is needed to stop interactjs from creating multiple listeners
-  const tokensRef = useRef(tokens);
-  const disabledTokensRef = useRef(disabledTokens);
-  useEffect(() => {
-    tokensRef.current = tokens;
-    disabledTokensRef.current = disabledTokens;
-  }, [tokens, disabledTokens]);
-
-  const [currentToken, setCurrentToken] = useState({});
   const [menuLeft, setMenuLeft] = useState(0);
   const [menuTop, setMenuTop] = useState(0);
+  useEffect(() => {
+    if (isOpen && !wasOpen && tokenState) {
+      setTokenMaxSize(Math.max(tokenState.size, defaultTokenMaxSize));
+      // Update menu position
+      if (tokenImage) {
+        const imageRect = tokenImage.getClientRect();
+        const map = document.querySelector(".map");
+        const mapRect = map.getBoundingClientRect();
+
+        // Center X for the menu which is 156px wide
+        setMenuLeft(mapRect.left + imageRect.x + imageRect.width / 2 - 156 / 2);
+        // Y 12px from the bottom
+        setMenuTop(mapRect.top + imageRect.y + imageRect.height + 12);
+      }
+    }
+  }, [isOpen, tokenState, wasOpen, tokenImage]);
 
   function handleLabelChange(event) {
-    // Slice to remove Label: text
+    const label = event.target.value;
-    const label = event.target.value.slice(7);
+    onTokenStateChange({ [tokenState.id]: { ...tokenState, label: label } });
-    if (label.length <= 1) {
-      setCurrentToken((prevToken) => ({
-        ...prevToken,
-        label: label,
-      }));
-
-      onTokenChange({ ...currentToken, label: label });
-    }
   }
 
   function handleStatusChange(status) {
-    const statuses = currentToken.statuses;
+    const statuses = tokenState.statuses;
     let newStatuses = [];
     if (statuses.includes(status)) {
       newStatuses = statuses.filter((s) => s !== status);
     } else {
       newStatuses = [...statuses, status];
     }
-    setCurrentToken((prevToken) => ({
+    onTokenStateChange({
-      ...prevToken,
+      [tokenState.id]: { ...tokenState, statuses: newStatuses },
-      statuses: newStatuses,
+    });
-    }));
-    onTokenChange({ ...currentToken, statuses: newStatuses });
   }
 
-  useEffect(() => {
+  function handleSizeChange(event) {
-    function handleTokenMenuOpen(event) {
+    const newSize = parseInt(event.target.value);
-      const target = event.target;
+    onTokenStateChange({ [tokenState.id]: { ...tokenState, size: newSize } });
-      const id = target.getAttribute("data-id");
-      if (id in disabledTokensRef.current) {
-        return;
-      }
-      const token = tokensRef.current[id] || {};
-      setCurrentToken(token);
-
-      const targetRect = target.getBoundingClientRect();
-      setMenuLeft(targetRect.left);
-      setMenuTop(targetRect.bottom);
-
-      setIsOpen(true);
   }
 
-    // Add listener for tap gesture
+  function handleRotationChange(event) {
-    const tokenInteract = interact(`.${tokenClassName}`).on(
+    const newRotation = parseInt(event.target.value);
-      "tap",
+    onTokenStateChange({
-      handleTokenMenuOpen
+      [tokenState.id]: { ...tokenState, rotation: newRotation },
-    );
+    });
-
-    function handleMapContextMenu(event) {
-      event.preventDefault();
-      if (event.target.classList.contains(tokenClassName)) {
-        handleTokenMenuOpen(event);
   }
-    }
-
-    // Handle context menu on the map level as handling
-    // on the token level lead to the default menu still
-    // being displayed
-    const map = document.querySelector(".map");
-    map.addEventListener("contextmenu", handleMapContextMenu);
-
-    return () => {
-      map.removeEventListener("contextmenu", handleMapContextMenu);
-      tokenInteract.unset();
-    };
-  }, [tokenClassName]);
 
   function handleModalContent(node) {
     if (node) {
       // Focus input
       const tokenLabelInput = node.querySelector("#changeTokenLabel");
       tokenLabelInput.focus();
-      tokenLabelInput.setSelectionRange(7, 8);
+      tokenLabelInput.select();
 
       // Ensure menu is in bounds
       const nodeRect = node.getBoundingClientRect();
@@ -134,23 +93,32 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
   return (
     <MapMenu
       isOpen={isOpen}
-      onRequestClose={handleRequestClose}
+      onRequestClose={onRequestClose}
       top={`${menuTop}px`}
       left={`${menuLeft}px`}
       onModalContent={handleModalContent}
     >
-      <Box sx={{ width: "104px" }} p={1}>
+      <Box sx={{ width: "156px" }} p={1}>
-        <Box
+        <Flex
           as="form"
           onSubmit={(e) => {
             e.preventDefault();
-            handleRequestClose();
+            onRequestClose();
           }}
+          sx={{ alignItems: "center" }}
         >
+          <Text
+            as="label"
+            variant="body2"
+            sx={{ width: "45%", fontSize: "16px" }}
+            p={1}
+          >
+            Label:
+          </Text>
           <Input
             id="changeTokenLabel"
             onChange={handleLabelChange}
-            value={`Label: ${currentToken.label}`}
+            value={(tokenState && tokenState.label) || ""}
             sx={{
               padding: "4px",
               border: "none",
@@ -160,7 +128,7 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
             }}
             autoComplete="off"
           />
-        </Box>
+        </Flex>
         <Box
           sx={{
             display: "flex",
@@ -172,8 +140,8 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
             <Box
               key={color}
               sx={{
-                width: "25%",
+                width: "16.66%",
-                paddingTop: "25%",
+                paddingTop: "16.66%",
                 borderRadius: "50%",
                 transform: "scale(0.75)",
                 backgroundColor: colors[color],
@@ -182,7 +150,9 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
               onClick={() => handleStatusChange(color)}
               aria-label={`Token label Color ${color}`}
             >
-              {currentToken.statuses && currentToken.statuses.includes(color) && (
+              {tokenState &&
+                tokenState.statuses &&
+                tokenState.statuses.includes(color) && (
                   <Box
                     sx={{
                       width: "100%",
@@ -197,6 +167,42 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
             </Box>
           ))}
         </Box>
+        <Flex sx={{ alignItems: "center" }}>
+          <Text
+            as="label"
+            variant="body2"
+            sx={{ width: "40%", fontSize: "16px" }}
+            p={1}
+          >
+            Size:
+          </Text>
+          <Slider
+            value={(tokenState && tokenState.size) || 1}
+            onChange={handleSizeChange}
+            step={1}
+            min={1}
+            max={tokenMaxSize}
+            mr={1}
+          />
+        </Flex>
+        <Flex sx={{ alignItems: "center" }}>
+          <Text
+            as="label"
+            variant="body2"
+            sx={{ width: "95%", fontSize: "16px" }}
+            p={1}
+          >
+            Rotation:
+          </Text>
+          <Slider
+            value={(tokenState && tokenState.rotation) || 0}
+            onChange={handleRotationChange}
+            step={45}
+            min={0}
+            max={360}
+            mr={1}
+          />
+        </Flex>
       </Box>
     </MapMenu>
   );

src/components/token/TokenSettings.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { Flex, Box, Input, IconButton, Label, Checkbox } 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 mt={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>
+          <Box my={2}>
+            <Label>
+              <Checkbox
+                checked={token && token.isVehicle}
+                disabled={!token || token.type === "default"}
+                onChange={(e) =>
+                  onSettingsChange("isVehicle", e.target.checked)
+                }
+              />
+              Vehicle / Mount
+            </Label>
+          </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/TokenStatus.js

@@ -1,46 +1,24 @@
 import React from "react";
-import { Box } from "theme-ui";
+import { Circle, Group } from "react-konva";
 
 import colors from "../../helpers/colors";
 
-function TokenStatus({ statuses }) {
+function TokenStatus({ tokenState, width, height }) {
   return (
-    <Box
+    <Group x={width} y={height} offsetX={width / 2} offsetY={height / 2}>
-      sx={{
+      {tokenState.statuses.map((status, index) => (
-        position: "absolute",
+        <Circle
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-      }}
-    >
-      {statuses.map((status, index) => (
-        <Box
           key={status}
-          sx={{
+          width={width}
-            width: "100%",
+          height={height}
-            height: "100%",
-            position: "absolute",
-            opacity: 0.8,
-            transform: `scale(${1 - index / 10})`,
-          }}
-        >
-          <svg
-            style={{ position: "absolute" }}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              r={47}
-              cx={50}
-              cy={50}
-              fill="none"
           stroke={colors[status]}
-              strokeWidth={4}
+          strokeWidth={width / 20 / tokenState.size}
+          scaleX={1 - index / 10 / tokenState.size}
+          scaleY={1 - index / 10 / tokenState.size}
+          opacity={0.8}
         />
-          </svg>
-        </Box>
       ))}
-    </Box>
+    </Group>
   );
 }
 

src/components/token/TokenTile.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { Flex, Image, Text, Box, IconButton } from "theme-ui";
+
+import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
+
+import useDataSource from "../../helpers/useDataSource";
+import {
+  tokenSources as defaultTokenSources,
+  unknownSource,
+} from "../../tokens";
+
+function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
+  const tokenSource = useDataSource(token, defaultTokenSources, unknownSource);
+  const isDefault = token.type === "default";
+
+  return (
+    <Flex
+      onClick={() => onTokenSelect(token)}
+      sx={{
+        borderColor: "primary",
+        borderStyle: isSelected ? "solid" : "none",
+        borderWidth: "4px",
+        position: "relative",
+        width: "150px",
+        height: "150px",
+        borderRadius: "4px",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "pointer",
+      }}
+      m={2}
+      bg="muted"
+    >
+      <Image
+        sx={{ width: "100%", height: "100%", objectFit: "contain" }}
+        src={tokenSource}
+      />
+      <Flex
+        sx={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background:
+            "linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
+          alignItems: "flex-end",
+          justifyContent: "center",
+        }}
+        p={2}
+      >
+        <Text
+          as="p"
+          variant="heading"
+          color="hsl(210, 50%, 96%)"
+          sx={{ textAlign: "center" }}
+        >
+          {token.name}
+        </Text>
+      </Flex>
+      {isSelected && !isDefault && (
+        <Box sx={{ position: "absolute", top: 0, right: 0 }}>
+          <IconButton
+            aria-label="Remove Map"
+            title="Remove Map"
+            onClick={() => {
+              onTokenRemove(token.id);
+            }}
+            bg="overlay"
+            sx={{ borderRadius: "50%" }}
+            m={1}
+          >
+            <RemoveTokenIcon />
+          </IconButton>
+        </Box>
+      )}
+    </Flex>
+  );
+}
+
+export default TokenTile;

src/components/token/TokenTiles.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { Flex } from "theme-ui";
+import SimpleBar from "simplebar-react";
+
+import AddIcon from "../../icons/AddIcon";
+
+import TokenTile from "./TokenTile";
+
+function TokenTiles({
+  tokens,
+  onTokenAdd,
+  onTokenSelect,
+  selectedToken,
+  onTokenRemove,
+}) {
+  return (
+    <SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
+      <Flex
+        py={2}
+        bg="muted"
+        sx={{
+          flexWrap: "wrap",
+          width: "500px",
+          borderRadius: "4px",
+        }}
+      >
+        <Flex
+          onClick={onTokenAdd}
+          sx={{
+            ":hover": {
+              color: "primary",
+            },
+            ":focus": {
+              outline: "none",
+            },
+            ":active": {
+              color: "secondary",
+            },
+            width: "150px",
+            height: "150px",
+            borderRadius: "4px",
+            justifyContent: "center",
+            alignItems: "center",
+            cursor: "pointer",
+          }}
+          m={2}
+          bg="muted"
+          aria-label="Add Token"
+          title="Add Token"
+        >
+          <AddIcon large />
+        </Flex>
+        {tokens.map((token) => (
+          <TokenTile
+            key={token.id}
+            token={token}
+            isSelected={selectedToken && token.id === selectedToken.id}
+            onTokenSelect={onTokenSelect}
+            onTokenRemove={onTokenRemove}
+          />
+        ))}
+      </Flex>
+    </SimpleBar>
+  );
+}
+
+export default TokenTiles;

src/components/token/Tokens.js

@@ -1,34 +1,38 @@
-import React, { useState, useContext } from "react";
+import React, { useContext } from "react";
-import { Box } from "theme-ui";
+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";
 
 import { fromEntries } from "../../helpers/shared";
 
 import AuthContext from "../../contexts/AuthContext";
+import TokenDataContext from "../../contexts/TokenDataContext";
 
 const listTokenClassName = "list-token";
 
-function Tokens({ onCreateMapTokenState, tokens }) {
+function Tokens({ onMapTokenStateCreate }) {
-  const [tokenSize, setTokenSize] = useState(1);
   const { userId } = useContext(AuthContext);
+  const { ownedTokens, tokens } = useContext(TokenDataContext);
 
   function handleProxyDragEnd(isOnMap, token) {
-    if (isOnMap && onCreateMapTokenState) {
+    if (isOnMap && onMapTokenStateCreate) {
       // Create a token state from the dragged token
-      onCreateMapTokenState({
+      onMapTokenStateCreate({
         id: shortid.generate(),
         tokenId: token.id,
         owner: userId,
-        size: tokenSize,
+        size: token.defaultSize,
         label: "",
         statuses: [],
         x: token.x,
         y: token.y,
+        lastEditedBy: userId,
+        rotation: 0,
       });
     }
   }
@@ -43,8 +47,10 @@ function Tokens({ onCreateMapTokenState, tokens }) {
           overflow: "hidden",
         }}
       >
-        <SimpleBar style={{ height: "calc(100% - 58px)", overflowX: "hidden" }}>
+        <SimpleBar style={{ height: "calc(100% - 48px)", overflowX: "hidden" }}>
-          {tokens.map((token) => (
+          {ownedTokens
+            .filter((token) => token.owner === userId)
+            .map((token) => (
               <ListToken
                 key={token.id}
                 token={token}
@@ -52,15 +58,16 @@ function Tokens({ onCreateMapTokenState, tokens }) {
               />
             ))}
         </SimpleBar>
-        <Box pt={1} bg="muted" sx={{ height: "58px" }}>
+        <Flex
-          <NumberInput
+          bg="muted"
-            value={tokenSize}
+          sx={{
-            onChange={setTokenSize}
+            justifyContent: "center",
-            title="Size"
+            height: "48px",
-            min={1}
+            alignItems: "center",
-            max={9}
+          }}
-          />
+        >
-        </Box>
+          <SelectTokensButton />
+        </Flex>
       </Box>
       <ProxyToken
         tokenClassName={listTokenClassName}

src/contexts/MapDataContext.js

@@ -0,0 +1,166 @@
+import React, { useEffect, useState, useContext } from "react";
+
+import AuthContext from "./AuthContext";
+import DatabaseContext from "./DatabaseContext";
+
+import { maps as defaultMaps } from "../maps";
+
+const MapDataContext = React.createContext();
+
+const defaultMapState = {
+  tokens: {},
+  // An index into the draw actions array to which only actions before the
+  // index will be performed (used in undo and redo)
+  mapDrawActionIndex: -1,
+  mapDrawActions: [],
+  fogDrawActionIndex: -1,
+  fogDrawActions: [],
+  // Flags to determine what other people can edit
+  editFlags: ["drawing", "tokens"],
+};
+
+export function MapDataProvider({ children }) {
+  const { database } = useContext(DatabaseContext);
+  const { userId } = useContext(AuthContext);
+
+  const [maps, setMaps] = useState([]);
+  const [mapStates, setMapStates] = useState([]);
+  // Load maps from the database and ensure state is properly setup
+  useEffect(() => {
+    if (!userId || !database) {
+      return;
+    }
+    async function getDefaultMaps() {
+      const defaultMapsWithIds = [];
+      for (let i = 0; i < defaultMaps.length; i++) {
+        const defaultMap = defaultMaps[i];
+        const id = `__default-${defaultMap.name}`;
+        defaultMapsWithIds.push({
+          ...defaultMap,
+          id,
+          owner: userId,
+          // Emulate the time increasing to avoid sort errors
+          created: Date.now() + i,
+          lastModified: Date.now() + i,
+          gridType: "grid",
+        });
+        // Add a state for the map if there isn't one already
+        const state = await database.table("states").get(id);
+        if (!state) {
+          await database.table("states").add({ ...defaultMapState, mapId: id });
+        }
+      }
+      return defaultMapsWithIds;
+    }
+
+    async function loadMaps() {
+      let storedMaps = await database.table("maps").toArray();
+      const sortedMaps = storedMaps.sort((a, b) => b.created - a.created);
+      const defaultMapsWithIds = await getDefaultMaps();
+      const allMaps = [...sortedMaps, ...defaultMapsWithIds];
+      setMaps(allMaps);
+      const storedStates = await database.table("states").toArray();
+      setMapStates(storedStates);
+    }
+
+    loadMaps();
+  }, [userId, database]);
+
+  async function addMap(map) {
+    await database.table("maps").add(map);
+    const state = { ...defaultMapState, mapId: map.id };
+    await database.table("states").add(state);
+    setMaps((prevMaps) => [map, ...prevMaps]);
+    setMapStates((prevStates) => [state, ...prevStates]);
+  }
+
+  async function removeMap(id) {
+    await database.table("maps").delete(id);
+    await database.table("states").delete(id);
+    setMaps((prevMaps) => {
+      const filtered = prevMaps.filter((map) => map.id !== id);
+      return filtered;
+    });
+    setMapStates((prevMapsStates) => {
+      const filtered = prevMapsStates.filter((state) => state.mapId !== id);
+      return filtered;
+    });
+  }
+
+  async function resetMap(id) {
+    const state = { ...defaultMapState, mapId: id };
+    await database.table("states").put(state);
+    setMapStates((prevMapStates) => {
+      const newStates = [...prevMapStates];
+      const i = newStates.findIndex((state) => state.mapId === id);
+      if (i > -1) {
+        newStates[i] = state;
+      }
+      return newStates;
+    });
+    return state;
+  }
+
+  async function updateMap(id, update) {
+    const change = { ...update, lastModified: Date.now() };
+    await database.table("maps").update(id, change);
+    setMaps((prevMaps) => {
+      const newMaps = [...prevMaps];
+      const i = newMaps.findIndex((map) => map.id === id);
+      if (i > -1) {
+        newMaps[i] = { ...newMaps[i], ...change };
+      }
+      return newMaps;
+    });
+  }
+
+  async function updateMapState(id, update) {
+    await database.table("states").update(id, update);
+    setMapStates((prevMapStates) => {
+      const newStates = [...prevMapStates];
+      const i = newStates.findIndex((state) => state.mapId === id);
+      if (i > -1) {
+        newStates[i] = { ...newStates[i], ...update };
+      }
+      return newStates;
+    });
+  }
+
+  async function putMap(map) {
+    await database.table("maps").put(map);
+    setMaps((prevMaps) => {
+      const newMaps = [...prevMaps];
+      const i = newMaps.findIndex((m) => m.id === map.id);
+      if (i > -1) {
+        newMaps[i] = { ...newMaps[i], ...map };
+      } else {
+        newMaps.unshift(map);
+      }
+      return newMaps;
+    });
+  }
+
+  function getMap(mapId) {
+    return maps.find((map) => map.id === mapId);
+  }
+
+  const ownedMaps = maps.filter((map) => map.owner === userId);
+
+  const value = {
+    maps,
+    ownedMaps,
+    mapStates,
+    addMap,
+    removeMap,
+    resetMap,
+    updateMap,
+    updateMapState,
+    putMap,
+    getMap,
+  };
+  return (
+    <MapDataContext.Provider value={value}>{children}</MapDataContext.Provider>
+  );
+}
+
+export default MapDataContext;

src/contexts/MapInteractionContext.js

@@ -1,8 +1,14 @@
 import React from "react";
 
 const MapInteractionContext = React.createContext({
-  translateRef: null,
+  stageScale: 1,
-  scaleRef: null,
+  stageWidth: 1,
+  stageHeight: 1,
+  stageDragState: "none",
+  setPreventMapInteraction: () => {},
+  mapWidth: 1,
+  mapHeight: 1,
+  mapDragPositionRef: { current: undefined },
 });
 export const MapInteractionProvider = MapInteractionContext.Provider;
 

src/contexts/MapLoadingContext.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+const MapLoadingContext = React.createContext();
+
+export function MapLoadingProvider({ children }) {
+  const [loadingAssetCount, setLoadingAssetCount] = useState(0);
+
+  function assetLoadStart() {
+    setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets + 1);
+  }
+
+  function assetLoadFinish() {
+    setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets - 1);
+  }
+
+  const isLoading = loadingAssetCount > 0;
+
+  const value = {
+    assetLoadStart,
+    assetLoadFinish,
+    isLoading,
+  };
+
+  return (
+    <MapLoadingContext.Provider value={value}>
+      {children}
+    </MapLoadingContext.Provider>
+  );
+}
+
+export default MapLoadingContext;

src/contexts/MapStageContext.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+const MapStageContext = React.createContext({
+  mapStageRef: { current: null },
+});
+export const MapStageProvider = MapStageContext.Provider;
+
+export default MapStageContext;

src/contexts/TokenDataContext.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useState, useContext } from "react";
+
+import AuthContext from "./AuthContext";
+import DatabaseContext from "./DatabaseContext";
+
+import { tokens as defaultTokens } from "../tokens";
+
+const TokenDataContext = React.createContext();
+
+export function TokenDataProvider({ children }) {
+  const { database } = useContext(DatabaseContext);
+  const { userId } = useContext(AuthContext);
+
+  const [tokens, setTokens] = useState([]);
+
+  useEffect(() => {
+    if (!userId || !database) {
+      return;
+    }
+    function getDefaultTokes() {
+      const defaultTokensWithIds = [];
+      for (let defaultToken of defaultTokens) {
+        defaultTokensWithIds.push({
+          ...defaultToken,
+          id: `__default-${defaultToken.name}`,
+          owner: userId,
+        });
+      }
+      return defaultTokensWithIds;
+    }
+
+    async function loadTokens() {
+      let storedTokens = await database.table("tokens").toArray();
+      const sortedTokens = storedTokens.sort((a, b) => b.created - a.created);
+      const defaultTokensWithIds = getDefaultTokes();
+      const allTokens = [...sortedTokens, ...defaultTokensWithIds];
+      setTokens(allTokens);
+    }
+
+    loadTokens();
+  }, [userId, database]);
+
+  async function addToken(token) {
+    await database.table("tokens").add(token);
+    setTokens((prevTokens) => [token, ...prevTokens]);
+  }
+
+  async function removeToken(id) {
+    await database.table("tokens").delete(id);
+    setTokens((prevTokens) => {
+      const filtered = prevTokens.filter((token) => token.id !== id);
+      return filtered;
+    });
+  }
+
+  async function updateToken(id, update) {
+    const change = { ...update, lastModified: Date.now() };
+    await database.table("tokens").update(id, change);
+    setTokens((prevTokens) => {
+      const newTokens = [...prevTokens];
+      const i = newTokens.findIndex((token) => token.id === id);
+      if (i > -1) {
+        newTokens[i] = { ...newTokens[i], ...change };
+      }
+      return newTokens;
+    });
+  }
+
+  async function putToken(token) {
+    await database.table("tokens").put(token);
+    setTokens((prevTokens) => {
+      const newTokens = [...prevTokens];
+      const i = newTokens.findIndex((t) => t.id === token.id);
+      if (i > -1) {
+        newTokens[i] = { ...newTokens[i], ...token };
+      } else {
+        newTokens.unshift(token);
+      }
+      return newTokens;
+    });
+  }
+
+  function getToken(tokenId) {
+    return tokens.find((token) => token.id === tokenId);
+  }
+
+  const ownedTokens = tokens.filter((token) => token.owner === userId);
+
+  const tokensById = tokens.reduce((obj, token) => {
+    obj[token.id] = token;
+    return obj;
+  }, {});
+
+  const value = {
+    tokens,
+    ownedTokens,
+    addToken,
+    removeToken,
+    updateToken,
+    putToken,
+    getToken,
+    tokensById,
+  };
+
+  return (
+    <TokenDataContext.Provider value={value}>
+      {children}
+    </TokenDataContext.Provider>
+  );
+}
+
+export default TokenDataContext;

src/database.js

@@ -26,6 +26,69 @@ function loadVersions(db) {
           map.file = mapBuffers[map.id];
         });
     });
+  // v1.3.0 - Added new default tokens
+  db.version(3)
+    .stores({})
+    .upgrade((tx) => {
+      return tx
+        .table("states")
+        .toCollection()
+        .modify((state) => {
+          function mapTokenId(id) {
+            switch (id) {
+              case "__default-Axes":
+                return "__default-Barbarian";
+              case "__default-Bird":
+                return "__default-Druid";
+              case "__default-Book":
+                return "__default-Wizard";
+              case "__default-Crown":
+                return "__default-Humanoid";
+              case "__default-Dragon":
+                return "__default-Dragon";
+              case "__default-Eye":
+                return "__default-Warlock";
+              case "__default-Fist":
+                return "__default-Monk";
+              case "__default-Horse":
+                return "__default-Fey";
+              case "__default-Leaf":
+                return "__default-Druid";
+              case "__default-Lion":
+                return "__default-Monstrosity";
+              case "__default-Money":
+                return "__default-Humanoid";
+              case "__default-Moon":
+                return "__default-Cleric";
+              case "__default-Potion":
+                return "__default-Sorcerer";
+              case "__default-Shield":
+                return "__default-Paladin";
+              case "__default-Skull":
+                return "__default-Undead";
+              case "__default-Snake":
+                return "__default-Beast";
+              case "__default-Sun":
+                return "__default-Cleric";
+              case "__default-Swords":
+                return "__default-Fighter";
+              case "__default-Tree":
+                return "__default-Plant";
+              case "__default-Triangle":
+                return "__default-Sorcerer";
+              default:
+                return "__default-Fighter";
+            }
+          }
+          for (let stateId in state.tokens) {
+            state.tokens[stateId].tokenId = mapTokenId(
+              state.tokens[stateId].tokenId
+            );
+            state.tokens[stateId].lastEditedBy = "";
+            state.tokens[stateId].rotation = 0;
+          }
+        });
+    });
 }
 
 // Get the dexie database used in DatabaseContext

src/docs/releaseNotes/v1.2.1.md

@@ -0,0 +1,10 @@
+# v1.2.1
+
+## Minor Changes
+
+- Changed the way maps are stored and sent to other players which should fix a few of the issues with maps not sending properly.
+- Added relay servers to use as a fallback for when players aren't able to create a direct connection, this should fix most issues with connection failures.
+- Fixed a bug that would stop users from uploading custom maps when web storage was disabled (this mainly happened with Firefox in Private Mode).
+- Added a new release notes page on the site which shows all the release notes in one place.
+
+[Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/ggyiz8/beta_v121_release_connection_issues_and_map/)

src/helpers/blobToBuffer.js

@@ -3,8 +3,21 @@ async function blobToBuffer(blob) {
     const arrayBuffer = await blob.arrayBuffer();
     return new Uint8Array(arrayBuffer);
   } else {
-    const arrayBuffer = new Response(blob).arrayBuffer();
+    return new Promise((resolve, reject) => {
-    return new Uint8Array(arrayBuffer);
+      const reader = new FileReader();
+
+      function onLoadEnd(event) {
+        reader.removeEventListener("loadend", onLoadEnd, false);
+        if (event.error) {
+          reject(event.error);
+        } else {
+          resolve(Buffer.from(reader.result));
+        }
+      }
+
+      reader.addEventListener("loadend", onLoadEnd, false);
+      reader.readAsArrayBuffer(blob);
+    });
   }
 }
 

src/helpers/drawing.js

@@ -2,7 +2,6 @@ import simplify from "simplify-js";
 
 import * as Vector2 from "./vector2";
 import { toDegrees } from "./shared";
-import colors from "./colors";
 
 const snappingThreshold = 1 / 5;
 export function getBrushPositionForTool(
@@ -140,207 +139,13 @@ export function getUpdatedShapeData(type, data, brushPosition, gridSize) {
   }
 }
 
-const defaultStrokeSize = 1 / 10;
+const defaultStrokeWidth = 1 / 10;
-export function getStrokeSize(multiplier, gridSize, canvasWidth, canvasHeight) {
+export function getStrokeWidth(multiplier, gridSize, mapWidth, mapHeight) {
   const gridPixelSize = Vector2.multiply(gridSize, {
-    x: canvasWidth,
+    x: mapWidth,
-    y: canvasHeight,
+    y: mapHeight,
   });
-  return Vector2.min(gridPixelSize) * defaultStrokeSize * multiplier;
+  return Vector2.min(gridPixelSize) * defaultStrokeWidth * multiplier;
-}
-
-export function shapeHasFill(shape) {
-  return (
-    shape.type === "fog" ||
-    shape.type === "shape" ||
-    (shape.type === "path" && shape.pathType === "fill")
-  );
-}
-
-export function pointsToQuadraticBezier(points) {
-  const quadraticPoints = [];
-
-  // Draw a smooth curve between the points where each control point
-  // is the current point in the array and the next point is the center of
-  // the current point and the next point
-  for (let i = 1; i < points.length - 2; i++) {
-    const start = points[i - 1];
-    const controlPoint = points[i];
-    const next = points[i + 1];
-    const end = Vector2.divide(Vector2.add(controlPoint, next), 2);
-
-    quadraticPoints.push({ start, controlPoint, end });
-  }
-  // Curve through the last two points
-  quadraticPoints.push({
-    start: points[points.length - 2],
-    controlPoint: points[points.length - 1],
-    end: points[points.length - 1],
-  });
-
-  return quadraticPoints;
-}
-
-export function pointsToPathSmooth(points, close, canvasWidth, canvasHeight) {
-  const path = new Path2D();
-  if (points.length < 2) {
-    return path;
-  }
-  path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
-
-  const quadraticPoints = pointsToQuadraticBezier(points);
-  for (let quadPoint of quadraticPoints) {
-    const pointScaled = Vector2.multiply(quadPoint.end, {
-      x: canvasWidth,
-      y: canvasHeight,
-    });
-    const controlScaled = Vector2.multiply(quadPoint.controlPoint, {
-      x: canvasWidth,
-      y: canvasHeight,
-    });
-    path.quadraticCurveTo(
-      controlScaled.x,
-      controlScaled.y,
-      pointScaled.x,
-      pointScaled.y
-    );
-  }
-
-  if (close) {
-    path.closePath();
-  }
-  return path;
-}
-
-export function pointsToPathSharp(points, close, canvasWidth, canvasHeight) {
-  const path = new Path2D();
-  path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
-  for (let point of points.slice(1)) {
-    path.lineTo(point.x * canvasWidth, point.y * canvasHeight);
-  }
-  if (close) {
-    path.closePath();
-  }
-
-  return path;
-}
-
-export function circleToPath(x, y, radius, canvasWidth, canvasHeight) {
-  const path = new Path2D();
-  const minSide = canvasWidth < canvasHeight ? canvasWidth : canvasHeight;
-  path.arc(
-    x * canvasWidth,
-    y * canvasHeight,
-    radius * minSide,
-    0,
-    2 * Math.PI,
-    true
-  );
-  return path;
-}
-
-export function rectangleToPath(
-  x,
-  y,
-  width,
-  height,
-  canvasWidth,
-  canvasHeight
-) {
-  const path = new Path2D();
-  path.rect(
-    x * canvasWidth,
-    y * canvasHeight,
-    width * canvasWidth,
-    height * canvasHeight
-  );
-  return path;
-}
-
-export function shapeToPath(shape, canvasWidth, canvasHeight) {
-  const data = shape.data;
-  if (shape.type === "path") {
-    return pointsToPathSmooth(
-      data.points,
-      shape.pathType === "fill",
-      canvasWidth,
-      canvasHeight
-    );
-  } else if (shape.type === "shape") {
-    if (shape.shapeType === "circle") {
-      return circleToPath(
-        data.x,
-        data.y,
-        data.radius,
-        canvasWidth,
-        canvasHeight
-      );
-    } else if (shape.shapeType === "rectangle") {
-      return rectangleToPath(
-        data.x,
-        data.y,
-        data.width,
-        data.height,
-        canvasWidth,
-        canvasHeight
-      );
-    } else if (shape.shapeType === "triangle") {
-      return pointsToPathSharp(data.points, true, canvasWidth, canvasHeight);
-    }
-  } else if (shape.type === "fog") {
-    return pointsToPathSharp(
-      shape.data.points,
-      true,
-      canvasWidth,
-      canvasHeight
-    );
-  }
-}
-
-export function isShapeHovered(
-  shape,
-  context,
-  hoverPosition,
-  canvasWidth,
-  canvasHeight
-) {
-  const path = shapeToPath(shape, canvasWidth, canvasHeight);
-  if (shapeHasFill(shape)) {
-    return context.isPointInPath(
-      path,
-      hoverPosition.x * canvasWidth,
-      hoverPosition.y * canvasHeight
-    );
-  } else {
-    return context.isPointInStroke(
-      path,
-      hoverPosition.x * canvasWidth,
-      hoverPosition.y * canvasHeight
-    );
-  }
-}
-
-export function drawShape(shape, context, gridSize, canvasWidth, canvasHeight) {
-  const path = shapeToPath(shape, canvasWidth, canvasHeight);
-  const color = colors[shape.color] || shape.color;
-  const fill = shapeHasFill(shape);
-
-  context.globalAlpha = shape.blend ? 0.5 : 1.0;
-  context.fillStyle = color;
-  context.strokeStyle = color;
-  if (shape.strokeWidth > 0) {
-    context.lineCap = "round";
-    context.lineWidth = getStrokeSize(
-      shape.strokeWidth,
-      gridSize,
-      canvasWidth,
-      canvasHeight
-    );
-    context.stroke(path);
-  }
-  if (fill) {
-    context.fill(path);
-  }
 }
 
 const defaultSimplifySize = 1 / 100;
@@ -350,12 +155,3 @@ export function simplifyPoints(points, gridSize, scale) {
     (Vector2.min(gridSize) * defaultSimplifySize) / scale
   );
 }
-
-export function getRelativePointerPosition(event, container) {
-  if (container) {
-    const containerRect = container.getBoundingClientRect();
-    const x = (event.clientX - containerRect.x) / containerRect.width;
-    const y = (event.clientY - containerRect.y) / containerRect.height;
-    return { x, y };
-  }
-}

src/helpers/useDataSource.js

@@ -2,14 +2,14 @@ import { useEffect, useState } from "react";
 
 // Helper function to load either file or default data
 // into a URL and ensure that it is revoked if needed
-function useDataSource(data, defaultSources) {
+function useDataSource(data, defaultSources, unknownSource) {
   const [dataSource, setDataSource] = useState(null);
   useEffect(() => {
     if (!data) {
-      setDataSource(null);
+      setDataSource(unknownSource);
       return;
     }
-    let url = null;
+    let url = unknownSource;
     if (data.type === "file") {
       url = URL.createObjectURL(new Blob([data.file]));
     } else if (data.type === "default") {
@@ -22,7 +22,7 @@ function useDataSource(data, defaultSources) {
         URL.revokeObjectURL(url);
       }
     };
-  }, [data, defaultSources]);
+  }, [data, defaultSources, unknownSource]);
 
   return dataSource;
 }

src/helpers/useMapBrush.js

@@ -0,0 +1,71 @@
+import { useContext, useRef, useEffect } from "react";
+
+import MapInteractionContext from "../contexts/MapInteractionContext";
+
+import { compare } from "./vector2";
+
+import usePrevious from "./usePrevious";
+
+/**
+ * @callback onBrushUpdate
+ * @param {string} drawState "first" | "drawing" | "last"
+ * @param {Object} brushPosition the normalized x and y coordinates of the brush on the map
+ */
+
+/**
+ * Helper to get the maps drag position as it changes
+ * @param {boolean} shouldUpdate
+ * @param {onBrushUpdate} onBrushUpdate
+ */
+function useMapBrush(shouldUpdate, onBrushUpdate) {
+  const { stageDragState, mapDragPositionRef } = useContext(
+    MapInteractionContext
+  );
+
+  const requestRef = useRef();
+  const previousDragState = usePrevious(stageDragState);
+  const previousBrushPositionRef = useRef(mapDragPositionRef.current);
+
+  useEffect(() => {
+    function updateBrush(forceUpdate) {
+      const drawState =
+        stageDragState === "dragging" ? "drawing" : stageDragState;
+      const brushPosition = mapDragPositionRef.current;
+      const previousBrushPostition = previousBrushPositionRef.current;
+      // Only update brush when it has moved
+      if (
+        !compare(brushPosition, previousBrushPostition, 0.0001) ||
+        forceUpdate
+      ) {
+        onBrushUpdate(drawState, brushPosition);
+        previousBrushPositionRef.current = brushPosition;
+      }
+    }
+
+    function animate() {
+      if (!shouldUpdate) {
+        return;
+      }
+      requestRef.current = requestAnimationFrame(animate);
+      updateBrush(false);
+    }
+
+    requestRef.current = requestAnimationFrame(animate);
+
+    if (stageDragState !== previousDragState && shouldUpdate) {
+      updateBrush(true);
+    }
+
+    return () => {
+      cancelAnimationFrame(requestRef.current);
+    };
+  }, [
+    shouldUpdate,
+    onBrushUpdate,
+    stageDragState,
+    mapDragPositionRef,
+    previousDragState,
+  ]);
+}
+
+export default useMapBrush;

src/helpers/usePreventOverscroll.js

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+function usePreventOverscroll(elementRef) {
+  useEffect(() => {
+    // Stop overscroll on chrome and safari
+    // also stop pinch to zoom on chrome
+    function preventOverscroll(event) {
+      event.preventDefault();
+    }
+    const element = elementRef.current;
+    if (element) {
+      element.addEventListener("wheel", preventOverscroll, {
+        passive: false,
+      });
+    }
+
+    return () => {
+      if (element) {
+        element.removeEventListener("wheel", preventOverscroll);
+      }
+    };
+  }, [elementRef]);
+}
+
+export default usePreventOverscroll;

src/helpers/useSession.js

@@ -136,7 +136,7 @@ function useSession(
     function addPeer(id, initiator, sync) {
       const connection = new Peer({
         initiator,
-        trickle: false,
+        trickle: true,
         config: { iceServers },
       });
 

src/icons/RemoveTokenIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function RemoveTokenIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z" />
+    </svg>
+  );
+}
+
+export default RemoveTokenIcon;

src/icons/SelectTokensIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function SelectMapIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z" />
+    </svg>
+  );
+}
+
+export default SelectMapIcon;

src/maps/index.js

@@ -1,3 +1,5 @@
+import Case from "case";
+
 import blankImage from "./Blank Grid 22x22.jpg";
 import grassImage from "./Grass Grid 22x22.jpg";
 import sandImage from "./Sand Grid 22x22.jpg";
@@ -5,6 +7,8 @@ import stoneImage from "./Stone Grid 22x22.jpg";
 import waterImage from "./Water Grid 22x22.jpg";
 import woodImage from "./Wood Grid 22x22.jpg";
 
+import unknownImage from "./Unknown Grid 22x22.jpg";
+
 export const mapSources = {
   blank: blankImage,
   grass: grassImage,
@@ -16,10 +20,12 @@ export const mapSources = {
 
 export const maps = Object.keys(mapSources).map((key) => ({
   key,
-  name: key.charAt(0).toUpperCase() + key.slice(1),
+  name: Case.capital(key),
   gridX: 22,
   gridY: 22,
   width: 1024,
   height: 1024,
   type: "default",
 }));
+
+export const unknownSource = unknownImage;

src/modals/SelectMapModal.js

@@ -1,32 +1,18 @@
-import React, { useRef, useState, useEffect, useContext } from "react";
+import React, { useRef, useState, useContext } from "react";
-import { Box, Button, Flex, Label, Text } from "theme-ui";
+import { Button, Flex, Label } from "theme-ui";
 import shortid from "shortid";
 
 import Modal from "../components/Modal";
 import MapTiles from "../components/map/MapTiles";
 import MapSettings from "../components/map/MapSettings";
+import ImageDrop from "../components/ImageDrop";
 
-import AuthContext from "../contexts/AuthContext";
-import DatabaseContext from "../contexts/DatabaseContext";
-
-import usePrevious from "../helpers/usePrevious";
 import blobToBuffer from "../helpers/blobToBuffer";
 
-import { maps as defaultMaps } from "../maps";
+import MapDataContext from "../contexts/MapDataContext";
+import AuthContext from "../contexts/AuthContext";
 
 const defaultMapSize = 22;
-const defaultMapState = {
-  tokens: {},
-  // An index into the draw actions array to which only actions before the
-  // index will be performed (used in undo and redo)
-  mapDrawActionIndex: -1,
-  mapDrawActions: [],
-  fogDrawActionIndex: -1,
-  fogDrawActions: [],
-  // Flags to determine what other people can edit
-  editFlags: ["drawing", "tokens"],
-};
-
 const defaultMapProps = {
   // Grid type
   // TODO: add support for hex horizontal and hex vertical
@@ -42,68 +28,26 @@ function SelectMapModal({
   // The map currently being view in the map screen
   currentMap,
 }) {
-  const { database } = useContext(DatabaseContext);
   const { userId } = useContext(AuthContext);
-
+  const {
-  const wasOpen = usePrevious(isOpen);
+    ownedMaps,
+    mapStates,
+    addMap,
+    removeMap,
+    resetMap,
+    updateMap,
+    updateMapState,
+  } = useContext(MapDataContext);
 
   const [imageLoading, setImageLoading] = useState(false);
 
   // The map selected in the modal
-  const [selectedMap, setSelectedMap] = useState(null);
+  const [selectedMapId, setSelectedMapId] = useState(null);
-  const [selectedMapState, setSelectedMapState] = useState(null);
-  const [maps, setMaps] = useState([]);
-  // Load maps from the database and ensure state is properly setup
-  useEffect(() => {
-    if (!userId || !database) {
-      return;
-    }
-    async function getDefaultMaps() {
-      const defaultMapsWithIds = [];
-      for (let i = 0; i < defaultMaps.length; i++) {
-        const defaultMap = defaultMaps[i];
-        const id = `__default-${defaultMap.name}`;
-        defaultMapsWithIds.push({
-          ...defaultMap,
-          id,
-          owner: userId,
-          // Emulate the time increasing to avoid sort errors
-          created: Date.now() + i,
-          lastModified: Date.now() + i,
-          ...defaultMapProps,
-        });
-        // Add a state for the map if there isn't one already
-        const state = await database.table("states").get(id);
-        if (!state) {
-          await database.table("states").add({ ...defaultMapState, mapId: id });
-        }
-      }
-      return defaultMapsWithIds;
-    }
 
-    async function loadMaps() {
+  const selectedMap = ownedMaps.find((map) => map.id === selectedMapId);
-      let storedMaps = await database
+  const selectedMapState = mapStates.find(
-        .table("maps")
+    (state) => state.mapId === selectedMapId
-        .where({ owner: userId })
+  );
-        .toArray();
-      const sortedMaps = storedMaps.sort((a, b) => b.created - a.created);
-      const defaultMapsWithIds = await getDefaultMaps();
-      const allMaps = [...sortedMaps, ...defaultMapsWithIds];
-      setMaps(allMaps);
-
-      // reload map state as is may have changed while the modal was closed
-      if (selectedMap) {
-        const state = await database.table("states").get(selectedMap.id);
-        if (state) {
-          setSelectedMapState(state);
-        }
-      }
-    }
-
-    if (!wasOpen && isOpen) {
-      loadMaps();
-    }
-  }, [userId, database, isOpen, wasOpen, selectedMap]);
 
   const fileInputRef = useRef();
 
@@ -180,108 +124,55 @@ function SelectMapModal({
   }
 
   async function handleMapAdd(map) {
-    await database.table("maps").add(map);
+    await addMap(map);
-    const state = { ...defaultMapState, mapId: map.id };
+    setSelectedMapId(map.id);
-    await database.table("states").add(state);
-    setMaps((prevMaps) => [map, ...prevMaps]);
-    setSelectedMap(map);
-    setSelectedMapState(state);
   }
 
   async function handleMapRemove(id) {
-    await database.table("maps").delete(id);
+    await removeMap(id);
-    await database.table("states").delete(id);
+    setSelectedMapId(null);
-    setMaps((prevMaps) => {
-      const filtered = prevMaps.filter((map) => map.id !== id);
-      setSelectedMap(filtered[0]);
-      database.table("states").get(filtered[0].id).then(setSelectedMapState);
-      return filtered;
-    });
     // Removed the map from the map screen if needed
-    if (currentMap && currentMap.id === selectedMap.id) {
+    if (currentMap && currentMap.id === selectedMapId) {
       onMapChange(null, null);
     }
   }
 
-  async function handleMapSelect(map) {
+  function handleMapSelect(map) {
-    const state = await database.table("states").get(map.id);
+    setSelectedMapId(map.id);
-    setSelectedMapState(state);
-    setSelectedMap(map);
   }
 
   async function handleMapReset(id) {
-    const state = { ...defaultMapState, mapId: id };
+    const newState = await resetMap(id);
-    await database.table("states").put(state);
-    setSelectedMapState(state);
     // Reset the state of the current map if needed
-    if (currentMap && currentMap.id === selectedMap.id) {
+    if (currentMap && currentMap.id === selectedMapId) {
-      onMapStateChange(state);
+      onMapStateChange(newState);
     }
   }
 
-  async function handleSubmit(e) {
+  async function handleDone() {
-    e.preventDefault();
+    if (selectedMapId) {
-    if (selectedMap) {
       onMapChange(selectedMap, selectedMapState);
       onDone();
     }
     onDone();
   }
 
-  /**
-   * Drag and Drop
-   */
-  const [dragging, setDragging] = useState(false);
-  function handleImageDragEnter(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    setDragging(true);
-  }
-
-  function handleImageDragLeave(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    setDragging(false);
-  }
-
-  function handleImageDrop(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const file = event.dataTransfer.files[0];
-    if (file && file.type.startsWith("image")) {
-      handleImageUpload(file);
-    }
-    setDragging(false);
-  }
-
   /**
    * Map settings
    */
   const [showMoreSettings, setShowMoreSettings] = useState(false);
 
   async function handleMapSettingsChange(key, value) {
-    const change = { [key]: value, lastModified: Date.now() };
+    await updateMap(selectedMapId, { [key]: value });
-    database.table("maps").update(selectedMap.id, change);
-    const newMap = { ...selectedMap, ...change };
-    setMaps((prevMaps) => {
-      const newMaps = [...prevMaps];
-      const i = newMaps.findIndex((map) => map.id === selectedMap.id);
-      if (i > -1) {
-        newMaps[i] = newMap;
-      }
-      return newMaps;
-    });
-    setSelectedMap(newMap);
   }
 
   async function handleMapStateSettingsChange(key, value) {
-    database.table("states").update(selectedMap.id, { [key]: value });
+    await updateMapState(selectedMapId, { [key]: value });
-    setSelectedMapState((prevState) => ({ ...prevState, [key]: value }));
   }
 
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
-      <Box as="form" onSubmit={handleSubmit} onDragEnter={handleImageDragEnter}>
+      <ImageDrop onDrop={handleImageUpload} dropText="Drop map to upload">
         <input
           onChange={(event) => handleImageUpload(event.target.files[0])}
           type="file"
@@ -298,14 +189,14 @@ function SelectMapModal({
             Select or import a map
           </Label>
           <MapTiles
-            maps={maps}
+            maps={ownedMaps}
             onMapAdd={openImageDialog}
             onMapRemove={handleMapRemove}
             selectedMap={selectedMap}
             selectedMapState={selectedMapState}
             onMapSelect={handleMapSelect}
             onMapReset={handleMapReset}
-            onSubmit={handleSubmit}
+            onDone={handleDone}
           />
           <MapSettings
             map={selectedMap}
@@ -315,35 +206,15 @@ function SelectMapModal({
             showMore={showMoreSettings}
             onShowMoreChange={setShowMoreSettings}
           />
-          <Button variant="primary" disabled={imageLoading}>
+          <Button
+            variant="primary"
+            disabled={imageLoading}
+            onClick={handleDone}
+          >
             Done
           </Button>
-          {dragging && (
-            <Flex
-              bg="muted"
-              sx={{
-                position: "absolute",
-                top: 0,
-                right: 0,
-                left: 0,
-                bottom: 0,
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "copy",
-              }}
-              onDragLeave={handleImageDragLeave}
-              onDragOver={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                e.dataTransfer.dropEffect = "copy";
-              }}
-              onDrop={handleImageDrop}
-            >
-              <Text sx={{ pointerEvents: "none" }}>Drop map to upload</Text>
         </Flex>
-          )}
+      </ImageDrop>
-        </Flex>
-      </Box>
     </Modal>
   );
 }

src/modals/SelectTokensModal.js

@@ -0,0 +1,140 @@
+import React, { useRef, useContext, useState } from "react";
+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";
+
+import TokenDataContext from "../contexts/TokenDataContext";
+import AuthContext from "../contexts/AuthContext";
+
+function SelectTokensModal({ isOpen, onRequestClose }) {
+  const { userId } = useContext(AuthContext);
+  const { ownedTokens, addToken, removeToken, updateToken } = useContext(
+    TokenDataContext
+  );
+  const fileInputRef = useRef();
+
+  const [imageLoading, setImageLoading] = useState(false);
+
+  const [selectedTokenId, setSelectedTokenId] = useState(null);
+  const selectedToken = ownedTokens.find(
+    (token) => token.id === selectedTokenId
+  );
+
+  function openImageDialog() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }
+
+  function handleTokenAdd(token) {
+    addToken(token);
+  }
+
+  function handleImageUpload(file) {
+    let name = "Unknown Map";
+    if (file.name) {
+      // Remove file extension
+      name = file.name.replace(/\.[^/.]+$/, "");
+      // Removed grid size expression
+      name = name.replace(/(\[ ?|\( ?)?\d+ ?(x|X) ?\d+( ?\]| ?\))?/, "");
+      // Clean string
+      name = name.replace(/ +/g, " ");
+      name = name.trim();
+    }
+    let image = new Image();
+    setImageLoading(true);
+    blobToBuffer(file).then((buffer) => {
+      // Copy file to avoid permissions issues
+      const blob = new Blob([buffer]);
+      // Create and load the image temporarily to get its dimensions
+      const url = URL.createObjectURL(blob);
+      image.onload = function () {
+        handleTokenAdd({
+          file: buffer,
+          name,
+          type: "file",
+          id: shortid.generate(),
+          created: Date.now(),
+          lastModified: Date.now(),
+          owner: userId,
+          defaultSize: 1,
+          isVehicle: false,
+        });
+        setImageLoading(false);
+      };
+      image.src = url;
+
+      // Set file input to null to allow adding the same image 2 times in a row
+      fileInputRef.current.value = null;
+    });
+  }
+
+  function handleTokenSelect(token) {
+    setSelectedTokenId(token.id);
+  }
+
+  async function handleTokenRemove(id) {
+    await removeToken(id);
+    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">
+        <input
+          onChange={(event) => handleImageUpload(event.target.files[0])}
+          type="file"
+          accept="image/*"
+          style={{ display: "none" }}
+          ref={fileInputRef}
+        />
+        <Flex
+          sx={{
+            flexDirection: "column",
+          }}
+        >
+          <Label pt={2} pb={1}>
+            Edit or import a token
+          </Label>
+          <TokenTiles
+            tokens={ownedTokens}
+            onTokenAdd={openImageDialog}
+            selectedToken={selectedToken}
+            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>
+  );
+}
+
+export default SelectTokensModal;

src/modals/SettingsModal.js

@@ -18,7 +18,26 @@ function SettingsModal({ isOpen, onRequestClose }) {
 
   async function handleClearCache() {
     await database.table("maps").where("owner").notEqual(userId).delete();
-    // TODO: With custom tokens look up all tokens that aren't being used in a state
+    // Find all other peoples tokens who aren't benig used in a map state and delete them
+    const tokens = await database
+      .table("tokens")
+      .where("owner")
+      .notEqual(userId)
+      .toArray();
+    const states = await database.table("states").toArray();
+    for (let token of tokens) {
+      let inUse = false;
+      for (let state of states) {
+        for (let tokenState of Object.values(state.tokens)) {
+          if (token.id === tokenState.tokenId) {
+            inUse = true;
+          }
+        }
+      }
+      if (!inUse) {
+        database.table("tokens").delete(token.id);
+      }
+    }
     window.location.reload();
   }
 

src/routes/Game.js

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useCallback, useContext } from "react";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useContext,
+  useRef,
+} from "react";
 import { Flex, Box, Text } from "theme-ui";
 import { useParams } from "react-router-dom";
 
@@ -17,15 +23,17 @@ import AuthModal from "../modals/AuthModal";
 
 import AuthContext from "../contexts/AuthContext";
 import DatabaseContext from "../contexts/DatabaseContext";
-
+import TokenDataContext from "../contexts/TokenDataContext";
-import { tokens as defaultTokens } from "../tokens";
+import MapDataContext from "../contexts/MapDataContext";
+import MapLoadingContext from "../contexts/MapLoadingContext";
+import { MapStageProvider } from "../contexts/MapStageContext";
 
 function Game() {
-  const { database } = useContext(DatabaseContext);
   const { id: gameId } = useParams();
   const { authenticationStatus, userId, nickname, setNickname } = useContext(
     AuthContext
   );
+  const { assetLoadStart, assetLoadFinish } = useContext(MapLoadingContext);
 
   const { peers, socket } = useSession(
     gameId,
@@ -37,64 +45,70 @@ function Game() {
     handlePeerError
   );
 
+  const { putToken, getToken } = useContext(TokenDataContext);
+  const { putMap, getMap } = useContext(MapDataContext);
+
   /**
    * Map state
    */
 
-  const [map, setMap] = useState(null);
+  const [currentMap, setCurrentMap] = useState(null);
-  const [mapState, setMapState] = useState(null);
+  const [currentMapState, setCurrentMapState] = useState(null);
-  const [mapLoading, setMapLoading] = useState(false);
 
   const canEditMapDrawing =
-    map !== null &&
+    currentMap !== null &&
-    mapState !== null &&
+    currentMapState !== null &&
-    (mapState.editFlags.includes("drawing") || map.owner === userId);
+    (currentMapState.editFlags.includes("drawing") ||
+      currentMap.owner === userId);
 
   const canEditFogDrawing =
-    map !== null &&
+    currentMap !== null &&
-    mapState !== null &&
+    currentMapState !== null &&
-    (mapState.editFlags.includes("fog") || map.owner === userId);
+    (currentMapState.editFlags.includes("fog") || currentMap.owner === userId);
 
   const disabledMapTokens = {};
   // If we have a map and state and have the token permission disabled
   // and are not the map owner
   if (
-    mapState !== null &&
+    currentMapState !== null &&
-    map !== null &&
+    currentMap !== null &&
-    !mapState.editFlags.includes("tokens") &&
+    !currentMapState.editFlags.includes("tokens") &&
-    map.owner !== userId
+    currentMap.owner !== userId
   ) {
-    for (let token of Object.values(mapState.tokens)) {
+    for (let token of Object.values(currentMapState.tokens)) {
       if (token.owner !== userId) {
         disabledMapTokens[token.id] = true;
       }
     }
   }
 
+  const { database } = useContext(DatabaseContext);
   // Sync the map state to the database after 500ms of inactivity
-  const debouncedMapState = useDebounce(mapState, 500);
+  const debouncedMapState = useDebounce(currentMapState, 500);
   useEffect(() => {
     if (
       debouncedMapState &&
       debouncedMapState.mapId &&
-      map &&
+      currentMap &&
-      map.owner === userId &&
+      currentMap.owner === userId &&
       database
     ) {
+      // Update the database directly to avoid re-renders
       database
         .table("states")
         .update(debouncedMapState.mapId, debouncedMapState);
     }
-  }, [map, debouncedMapState, userId, database]);
+  }, [currentMap, debouncedMapState, userId, database]);
 
   function handleMapChange(newMap, newMapState) {
-    setMapState(newMapState);
+    setCurrentMapState(newMapState);
-    setMap(newMap);
+    setCurrentMap(newMap);
     for (let peer of Object.values(peers)) {
       // Clear the map so the new map state isn't shown on an old map
       peer.connection.send({ id: "map", data: null });
       peer.connection.send({ id: "mapState", data: newMapState });
       sendMapDataToPeer(peer, newMap);
+      sendTokensToPeer(peer, newMapState);
     }
   }
 
@@ -110,42 +124,14 @@ function Game() {
   }
 
   function handleMapStateChange(newMapState) {
-    setMapState(newMapState);
+    setCurrentMapState(newMapState);
     for (let peer of Object.values(peers)) {
       peer.connection.send({ id: "mapState", data: newMapState });
     }
   }
 
-  async function handleMapTokenStateChange(token) {
-    if (mapState === null) {
-      return;
-    }
-    setMapState((prevMapState) => ({
-      ...prevMapState,
-      tokens: {
-        ...prevMapState.tokens,
-        [token.id]: token,
-      },
-    }));
-    for (let peer of Object.values(peers)) {
-      const data = { [token.id]: token };
-      peer.connection.send({ id: "tokenStateEdit", data });
-    }
-  }
-
-  function handleMapTokenStateRemove(token) {
-    setMapState((prevMapState) => {
-      const { [token.id]: old, ...rest } = prevMapState.tokens;
-      return { ...prevMapState, tokens: rest };
-    });
-    for (let peer of Object.values(peers)) {
-      const data = { [token.id]: token };
-      peer.connection.send({ id: "tokenStateRemove", data });
-    }
-  }
-
   function addMapDrawActions(actions, indexKey, actionsKey) {
-    setMapState((prevMapState) => {
+    setCurrentMapState((prevMapState) => {
       const newActions = [
         ...prevMapState[actionsKey].slice(0, prevMapState[indexKey] + 1),
         ...actions,
@@ -161,11 +147,11 @@ function Game() {
 
   function updateDrawActionIndex(change, indexKey, actionsKey, peerId) {
     const newIndex = Math.min(
-      Math.max(mapState[indexKey] + change, -1),
+      Math.max(currentMapState[indexKey] + change, -1),
-      mapState[actionsKey].length - 1
+      currentMapState[actionsKey].length - 1
     );
 
-    setMapState((prevMapState) => ({
+    setCurrentMapState((prevMapState) => ({
       ...prevMapState,
       [indexKey]: newIndex,
     }));
@@ -230,6 +216,67 @@ function Game() {
     }
   }
 
+  /**
+   * Token state
+   */
+
+  // Get all tokens from a token state and send it to a peer
+  function sendTokensToPeer(peer, state) {
+    let sentTokens = {};
+    for (let tokenState of Object.values(state.tokens)) {
+      const token = getToken(tokenState.tokenId);
+      if (
+        token &&
+        token.type === "file" &&
+        !(tokenState.tokenId in sentTokens)
+      ) {
+        sentTokens[tokenState.tokenId] = true;
+        // Omit file from token peer will request file if needed
+        const { file, ...rest } = token;
+        peer.connection.send({ id: "token", data: rest });
+      }
+    }
+  }
+
+  async function handleMapTokenStateCreate(tokenState) {
+    // If file type token send the token to the other peers
+    const token = getToken(tokenState.tokenId);
+    if (token && token.type === "file") {
+      const { file, ...rest } = token;
+      for (let peer of Object.values(peers)) {
+        peer.connection.send({ id: "token", data: rest });
+      }
+    }
+    handleMapTokenStateChange({ [tokenState.id]: tokenState });
+  }
+
+  function handleMapTokenStateChange(change) {
+    if (currentMapState === null) {
+      return;
+    }
+    setCurrentMapState((prevMapState) => ({
+      ...prevMapState,
+      tokens: {
+        ...prevMapState.tokens,
+        ...change,
+      },
+    }));
+    for (let peer of Object.values(peers)) {
+      peer.connection.send({ id: "tokenStateEdit", data: change });
+    }
+  }
+
+  function handleMapTokenStateRemove(tokenState) {
+    setCurrentMapState((prevMapState) => {
+      const { [tokenState.id]: old, ...rest } = prevMapState.tokens;
+      return { ...prevMapState, tokens: rest };
+    });
+    for (let peer of Object.values(peers)) {
+      const data = { [tokenState.id]: tokenState };
+      peer.connection.send({ id: "tokenStateRemove", data });
+    }
+  }
+
   /**
    * Party state
    */
@@ -259,63 +306,84 @@ function Game() {
 
   function handlePeerData({ data, peer }) {
     if (data.id === "sync") {
-      if (mapState) {
+      if (currentMapState) {
-        peer.connection.send({ id: "mapState", data: mapState });
+        peer.connection.send({ id: "mapState", data: currentMapState });
+        sendTokensToPeer(peer, currentMapState);
       }
-      if (map) {
+      if (currentMap) {
-        sendMapDataToPeer(peer, map);
+        sendMapDataToPeer(peer, currentMap);
       }
     }
     if (data.id === "map") {
       const newMap = data.data;
       // If is a file map check cache and request the full file if outdated
       if (newMap && newMap.type === "file") {
-        database
+        const cachedMap = getMap(newMap.id);
-          .table("maps")
-          .get(newMap.id)
-          .then((cachedMap) => {
         if (cachedMap && cachedMap.lastModified === newMap.lastModified) {
-              setMap(cachedMap);
+          setCurrentMap(cachedMap);
         } else {
-              setMapLoading(true);
+          assetLoadStart();
-              peer.connection.send({ id: "mapRequest" });
+          peer.connection.send({ id: "mapRequest", data: newMap.id });
         }
-          });
       } else {
-        setMap(newMap);
+        setCurrentMap(newMap);
       }
     }
     // Send full map data including file
     if (data.id === "mapRequest") {
+      const map = getMap(data.data);
       peer.connection.send({ id: "mapResponse", data: map });
     }
     // A new map response with a file attached
     if (data.id === "mapResponse") {
-      setMapLoading(false);
+      assetLoadFinish();
       if (data.data && data.data.type === "file") {
         const newMap = { ...data.data, file: data.data.file };
-        // Store in db
+        putMap(newMap).then(() => {
-        database
+          setCurrentMap(newMap);
-          .table("maps")
-          .put(newMap)
-          .then(() => {
-            setMap(newMap);
         });
       } else {
-        setMap(data.data);
+        setCurrentMap(data.data);
       }
     }
     if (data.id === "mapState") {
-      setMapState(data.data);
+      setCurrentMapState(data.data);
+    }
+    if (data.id === "token") {
+      const newToken = data.data;
+      if (newToken && newToken.type === "file") {
+        const cachedToken = getToken(newToken.id);
+        if (
+          !cachedToken ||
+          cachedToken.lastModified !== newToken.lastModified
+        ) {
+          assetLoadStart();
+          peer.connection.send({
+            id: "tokenRequest",
+            data: newToken.id,
+          });
+        }
+      }
+    }
+    if (data.id === "tokenRequest") {
+      const token = getToken(data.data);
+      peer.connection.send({ id: "tokenResponse", data: token });
+    }
+    if (data.id === "tokenResponse") {
+      assetLoadFinish();
+      const newToken = data.data;
+      if (newToken && newToken.type === "file") {
+        putToken(newToken);
+      }
     }
     if (data.id === "tokenStateEdit") {
-      setMapState((prevMapState) => ({
+      setCurrentMapState((prevMapState) => ({
         ...prevMapState,
         tokens: { ...prevMapState.tokens, ...data.data },
       }));
     }
     if (data.id === "tokenStateRemove") {
-      setMapState((prevMapState) => ({
+      setCurrentMapState((prevMapState) => ({
         ...prevMapState,
         tokens: omit(prevMapState.tokens, Object.keys(data.data)),
       }));
@@ -330,7 +398,7 @@ function Game() {
       addMapDrawActions(data.data, "mapDrawActionIndex", "mapDrawActions");
     }
     if (data.id === "mapDrawIndex") {
-      setMapState((prevMapState) => ({
+      setCurrentMapState((prevMapState) => ({
         ...prevMapState,
         mapDrawActionIndex: data.data,
       }));
@@ -339,7 +407,7 @@ function Game() {
       addMapDrawActions(data.data, "fogDrawActionIndex", "fogDrawActions");
     }
     if (data.id === "mapFogIndex") {
-      setMapState((prevMapState) => ({
+      setCurrentMapState((prevMapState) => ({
         ...prevMapState,
         fogDrawActionIndex: data.data,
       }));
@@ -438,30 +506,19 @@ function Game() {
     }
   }, [stream, peers, handleStreamEnd]);
 
-  /**
+  // A ref to the Konva stage
-   * Token data
+  // the ref will be assigned in the MapInteraction component
-   */
+  const mapStageRef = useRef();
-  const [tokens, setTokens] = useState([]);
-  useEffect(() => {
-    if (!userId) {
-      return;
-    }
-    const defaultTokensWithIds = [];
-    for (let defaultToken of defaultTokens) {
-      defaultTokensWithIds.push({
-        ...defaultToken,
-        id: `__default-${defaultToken.name}`,
-        owner: userId,
-      });
-    }
-    setTokens(defaultTokensWithIds);
-  }, [userId]);
 
   return (
-    <>
+    <MapStageProvider value={mapStageRef}>
       <Flex sx={{ flexDirection: "column", height: "100%" }}>
         <Flex
-          sx={{ justifyContent: "space-between", flexGrow: 1, height: "100%" }}
+          sx={{
+            justifyContent: "space-between",
+            flexGrow: 1,
+            height: "100%",
+          }}
         >
           <Party
             nickname={nickname}
@@ -474,10 +531,8 @@ function Game() {
             onStreamEnd={handleStreamEnd}
           />
           <Map
-            map={map}
+            map={currentMap}
-            mapState={mapState}
+            mapState={currentMapState}
-            tokens={tokens}
-            loading={mapLoading}
             onMapTokenStateChange={handleMapTokenStateChange}
             onMapTokenStateRemove={handleMapTokenStateRemove}
             onMapChange={handleMapChange}
@@ -492,10 +547,7 @@ function Game() {
             allowFogDrawing={canEditFogDrawing}
             disabledTokens={disabledMapTokens}
           />
-          <Tokens
+          <Tokens onMapTokenStateCreate={handleMapTokenStateCreate} />
-            tokens={tokens}
-            onCreateMapTokenState={handleMapTokenStateChange}
-          />
         </Flex>
       </Flex>
       <Banner isOpen={!!peerError} onRequestClose={() => setPeerError(null)}>
@@ -508,7 +560,7 @@ function Game() {
       </Banner>
       <AuthModal isOpen={authenticationStatus === "unauthenticated"} />
       {authenticationStatus === "unknown" && <LoadingOverlay />}
-    </>
+    </MapStageProvider>
   );
 }
 

src/routes/ReleaseNotes.js

@@ -7,6 +7,7 @@ import Markdown from "../components/Markdown";
 
 const v110 = raw("../docs/releaseNotes/v1.1.0.md");
 const v120 = raw("../docs/releaseNotes/v1.2.0.md");
+const v121 = raw("../docs/releaseNotes/v1.2.1.md");
 
 function ReleaseNotes() {
   return (
@@ -29,6 +30,9 @@ function ReleaseNotes() {
         <Text mb={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
           Release Notes
         </Text>
+        <div id="v121">
+          <Markdown source={v121} />
+        </div>
         <div id="v120">
           <Markdown source={v120} />
         </div>