Added token rotation

src/components/map/MapToken.js

@@ -178,7 +178,7 @@ function MapToken({
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}
       opacity={tokenOpacity}
-      name={token.isVehicle ? "vehicle" : "token"}
+      name={token && token.isVehicle ? "vehicle" : "token"}
       id={tokenState.id}
     >
       <KonvaImage
@@ -188,17 +188,22 @@ function MapToken({
         x={0}
         y={0}
         image={tokenSourceImage}
+        rotation={tokenState.rotation}
+        offsetX={tokenWidth / 2}
+        offsetY={tokenHeight / 2}
       />
-      <TokenStatus
+      <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
-        tokenState={tokenState}
+        <TokenStatus
-        width={tokenWidth}
+          tokenState={tokenState}
-        height={tokenHeight}
+          width={tokenWidth}
-      />
+          height={tokenHeight}
-      <TokenLabel
+        />
-        tokenState={tokenState}
+        <TokenLabel
-        width={tokenWidth}
+          tokenState={tokenState}
-        height={tokenHeight}
+          width={tokenWidth}
-      />
+          height={tokenHeight}
+        />
+      </Group>
     </Group>
   );
 }

src/components/token/TokenMenu.js

@@ -74,6 +74,11 @@ function TokenMenu({
     onTokenChange({ ...tokenState, size: newSize });
   }
 
+  function handleRotationChange(event) {
+    const newRotation = parseInt(event.target.value);
+    onTokenChange({ ...tokenState, rotation: newRotation });
+  }
+
   function handleModalContent(node) {
     if (node) {
       // Focus input
@@ -192,6 +197,24 @@ function TokenMenu({
             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/Tokens.js

@@ -33,6 +33,7 @@ function Tokens({ onMapTokenStateCreate }) {
         x: token.x,
         y: token.y,
         lastEditedBy: userId,
+        rotation: 0,
       });
     }
   }