From ef1c875088f37e54f9bec1ebec9b1a95f3afa45f Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 22 May 2020 21:10:05 +1000
Subject: [PATCH] Added token rotation

---
 src/components/map/MapToken.js    | 27 ++++++++++++++++-----------
 src/components/token/TokenMenu.js | 23 +++++++++++++++++++++++
 src/components/token/Tokens.js    |  1 +
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
index bed4815..1408fc3 100644
--- a/src/components/map/MapToken.js
+++ b/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
-        tokenState={tokenState}
-        width={tokenWidth}
-        height={tokenHeight}
-      />
-      <TokenLabel
-        tokenState={tokenState}
-        width={tokenWidth}
-        height={tokenHeight}
-      />
+      <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
+        <TokenStatus
+          tokenState={tokenState}
+          width={tokenWidth}
+          height={tokenHeight}
+        />
+        <TokenLabel
+          tokenState={tokenState}
+          width={tokenWidth}
+          height={tokenHeight}
+        />
+      </Group>
     </Group>
   );
 }
diff --git a/src/components/token/TokenMenu.js b/src/components/token/TokenMenu.js
index 91df1c6..eecfdab 100644
--- a/src/components/token/TokenMenu.js
+++ b/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>
   );
diff --git a/src/components/token/Tokens.js b/src/components/token/Tokens.js
index 5b3a265..f514ecf 100644
--- a/src/components/token/Tokens.js
+++ b/src/components/token/Tokens.js
@@ -33,6 +33,7 @@ function Tokens({ onMapTokenStateCreate }) {
         x: token.x,
         y: token.y,
         lastEditedBy: userId,
+        rotation: 0,
       });
     }
   }