Storing window's innerheight and innerwidth in redux' state to make it easier to follow for components.

src/components/map/Reticle.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Point } from '../../lib/geo';
+import { MapState } from '../../store/map';
 
 const Reticle: React.FC<{}> = () => {
-  const center: Point = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
-  const radius = Math.min(window.innerWidth, window.innerHeight) / 8;
+
+  const windowState = useSelector(
+    (state: { map: MapState }) => state.map.window
+  );
+
+  const center: Point = { x: windowState.width / 2, y: windowState.height / 2 };
+  const radius = Math.min(windowState.width, windowState.height) / 6;
 
   return (
     <g>

src/components/map/whiteboard.tsx

@@ -11,11 +11,14 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
   const whiteBoardState = useSelector(
     (state: { map: MapState }) => state.map.whiteboard
   );
+  const windowState = useSelector(
+    (state: { map: MapState }) => state.map.window
+  );
 
   return (
     <svg
-      width={window.innerWidth}
-      height={window.innerHeight}
+      width={windowState.width}
+      height={windowState.height}
       className='whiteboard'
     >
       {props.fixedChildren}