Added timer tool to map

src/components/map/Map.js

@@ -65,6 +65,11 @@ function Map({
       type: "chebyshev",
       scale: "5ft",
     },
+    timer: {
+      hour: 0,
+      minute: 0,
+      second: 0,
+    },
   });
 
   function handleToolSettingChange(tool, change) {
@@ -148,6 +153,7 @@ function Map({
     disabledControls.push("pan");
     disabledControls.push("measure");
     disabledControls.push("pointer");
+    disabledControls.push("timer");
   }
   if (!allowFogDrawing) {
     disabledControls.push("fog");

src/components/map/MapControls.js

@@ -9,6 +9,7 @@ import SelectMapButton from "./SelectMapButton";
 import FogToolSettings from "./controls/FogToolSettings";
 import DrawingToolSettings from "./controls/DrawingToolSettings";
 import MeasureToolSettings from "./controls/MeasureToolSettings";
+import TimerToolSettings from "./controls/TimerToolSettings";
 
 import PanToolIcon from "../../icons/PanToolIcon";
 import FogToolIcon from "../../icons/FogToolIcon";
@@ -16,6 +17,7 @@ import BrushToolIcon from "../../icons/BrushToolIcon";
 import MeasureToolIcon from "../../icons/MeasureToolIcon";
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 import PointerToolIcon from "../../icons/PointerToolIcon";
+import TimerToolIcon from "../../icons/TimerToolIcon";
 
 function MapContols({
   onMapChange,
@@ -61,8 +63,14 @@ function MapContols({
       icon: <PointerToolIcon />,
       title: "Pointer Tool",
     },
+    timer: {
+      id: "timer",
+      icon: <TimerToolIcon />,
+      title: "Timer Tool",
+      SettingsComponent: TimerToolSettings,
+    },
   };
-  const tools = ["pan", "fog", "drawing", "measure", "pointer"];
+  const tools = ["pan", "fog", "drawing", "measure", "pointer", "timer"];
 
   const sections = [
     {

src/components/map/controls/TimerToolSettings.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useContext } from "react";
+import { Flex, Input, Text, IconButton } from "theme-ui";
+
+import Divider from "../../Divider";
+
+import MapInteractionContext from "../../../contexts/MapInteractionContext";
+import TimerStartIcon from "../../../icons/TimerStartIcon";
+
+function MeasureToolSettings({ settings, onSettingChange, onToolAction }) {
+  const { interactionEmitter } = useContext(MapInteractionContext);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    function handleKeyDown({ key }) {}
+    interactionEmitter.on("keyDown", handleKeyDown);
+
+    return () => {
+      interactionEmitter.off("keyDown", handleKeyDown);
+    };
+  });
+
+  const inputStyle = {
+    width: "40px",
+    border: "none",
+    ":focus": {
+      outline: "none",
+    },
+    lineHeight: 1.2,
+    padding: 1,
+    paddingRight: 0,
+  };
+
+  return (
+    <Flex sx={{ alignItems: "center" }}>
+      <Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
+        h:
+      </Text>
+      <Input
+        sx={inputStyle}
+        value={settings.hour}
+        onChange={(e) => onSettingChange({ hour: parseInt(e.target.value) })}
+        type="number"
+        min={0}
+        max={99}
+      />
+      <Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
+        m:
+      </Text>
+      <Input
+        sx={inputStyle}
+        value={settings.minute}
+        onChange={(e) => onSettingChange({ minute: parseInt(e.target.value) })}
+        type="number"
+        min={0}
+        max={59}
+      />
+      <Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
+        s:
+      </Text>
+      <Input
+        sx={inputStyle}
+        value={settings.second}
+        onChange={(e) => onSettingChange({ second: parseInt(e.target.value) })}
+        type="number"
+        min={0}
+        max={59}
+      />
+      <IconButton
+        aria-label="Start Timer"
+        title="Start Timer"
+        onClick={() => onToolAction("timerStart")}
+        disabled={
+          settings.hour === 0 && settings.minute === 0 && settings.second === 0
+        }
+      >
+        <TimerStartIcon />
+      </IconButton>
+    </Flex>
+  );
+}
+
+export default MeasureToolSettings;

src/icons/TimerStartIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+function TimerStartIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+      transform="scale(-1 1)"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M21.18 5.01L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zm3-8h-2v-2c0-.55-.45-1-1-1s-1 .45-1 1v2H9c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1z" />
+    </svg>
+  );
+}
+
+export default TimerStartIcon;

src/icons/TimerToolIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+function TimerToolIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+      transform="scale(-1 1)"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 4v3.17c0 .53.21 1.04.59 1.42L10 12l-3.42 3.42c-.37.38-.58.89-.58 1.42V20c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-3.16c0-.53-.21-1.04-.58-1.41L14 12l3.41-3.4c.38-.38.59-.89.59-1.42V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2z" />
+    </svg>
+  );
+}
+
+export default TimerToolIcon;