Implement map zooming

2 files changed, 13 insertions, 11 deletions

diff --git a/src/components/map/elements/HoverTile.js b/src/components/map/elements/HoverTile.js
index a8bb2085..02d31714 100644
--- a/src/components/map/elements/HoverTile.js
+++ b/src/components/map/elements/HoverTile.js
@@ -4,10 +4,12 @@ import {Rect} from "react-konva";
 import {ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR} from "../../../colors/index";
 import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-const HoverTile = ({pixelX, pixelY, isValid, onClick}) => (
+const HoverTile = ({pixelX, pixelY, isValid, scale, onClick}) => (
     <Rect
         x={pixelX}
         y={pixelY}
+        scaleX={scale}
+        scaleY={scale}
         width={TILE_SIZE_IN_PIXELS}
         height={TILE_SIZE_IN_PIXELS}
         fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
index 4c22c23c..3327525c 100644
--- a/src/components/map/elements/TilePlusIcon.js
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -4,19 +4,19 @@ import {Group, Line} from "react-konva";
 import {TILE_PLUS_COLOR} from "../../../colors/index";
 import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-const TilePlusIcon = ({pixelX, pixelY}) => {
+const TilePlusIcon = ({pixelX, pixelY, scale}) => {
     const linePoints = [
         [
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
-            pixelY + TILE_PLUS_MARGIN_IN_PIXELS,
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
-            pixelY + TILE_SIZE_IN_PIXELS - TILE_PLUS_MARGIN_IN_PIXELS,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            pixelY + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
         ],
         [
-            pixelX + TILE_PLUS_MARGIN_IN_PIXELS,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
-            pixelX + TILE_SIZE_IN_PIXELS - TILE_PLUS_MARGIN_IN_PIXELS,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
+            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            pixelX + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * scale,
         ],
     ];
     return (
@@ -27,7 +27,7 @@ const TilePlusIcon = ({pixelX, pixelY}) => {
                     points={points}
                     lineCap="round"
                     stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
                     listening={false}
                 />
             ))}