Moved timer tool out of the map controls and into the party controls

src/components/map/Map.js

@@ -153,7 +153,6 @@ 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,7 +9,6 @@ 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";
@@ -17,7 +16,6 @@ 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,
@@ -63,14 +61,8 @@ function MapContols({
       icon: <PointerToolIcon />,
       title: "Pointer Tool",
     },
-    timer: {
-      id: "timer",
-      icon: <TimerToolIcon />,
-      title: "Timer Tool",
-      SettingsComponent: TimerToolSettings,
-    },
   };
-  const tools = ["pan", "fog", "drawing", "measure", "pointer", "timer"];
+  const tools = ["pan", "fog", "drawing", "measure", "pointer"];
 
   const sections = [
     {

src/components/map/controls/TimerToolSettings.js

@@ -1,82 +0,0 @@
-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/components/party/Party.js

@@ -6,6 +6,7 @@ import Nickname from "./Nickname";
 import ChangeNicknameButton from "./ChangeNicknameButton";
 import StartStreamButton from "./StartStreamButton";
 import SettingsButton from "../SettingsButton";
+import StartTimerButton from "./StartTimerButton";
 
 function Party({
   nickname,
@@ -16,6 +17,8 @@ function Party({
   partyStreams,
   onStreamStart,
   onStreamEnd,
+  onTimerStart,
+  onTimerEnd,
 }) {
   return (
     <Flex
@@ -61,6 +64,7 @@ function Party({
           onStreamEnd={onStreamEnd}
           stream={stream}
         />
+        <StartTimerButton />
         <SettingsButton />
       </Flex>
     </Flex>

src/components/party/StartTimerButton.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { IconButton } from "theme-ui";
+
+import StartTimerModal from "../../modals/StartTimerModal";
+import StartTimerIcon from "../../icons/StartTimerIcon";
+
+function StartTimerButton() {
+  const [isTimerModalOpen, setIsTimerModalOpen] = useState(false);
+
+  function openModal() {
+    setIsTimerModalOpen(true);
+  }
+  function closeModal() {
+    setIsTimerModalOpen(false);
+  }
+
+  return (
+    <>
+      <IconButton
+        m={1}
+        aria-label="Start Timer"
+        title="Start Timer"
+        onClick={openModal}
+      >
+        <StartTimerIcon />
+      </IconButton>
+      <StartTimerModal isOpen={isTimerModalOpen} onRequestClose={closeModal} />
+    </>
+  );
+}
+
+export default StartTimerButton;

src/icons/StartTimerIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function TimerToolIcon() {
+function StartTimerIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -16,4 +16,4 @@ function TimerToolIcon() {
   );
 }
 
-export default TimerToolIcon;
+export default StartTimerIcon;

src/icons/TimerStartIcon.js

@@ -1,19 +0,0 @@
-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/modals/StartTimerModal.js

@@ -0,0 +1,106 @@
+import React, { useState, useRef } from "react";
+import { Box, Label, Input, Button, Flex, Text } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function StartTimerModal({ isOpen, onRequestClose }) {
+  const inputRef = useRef();
+  function focusInput() {
+    inputRef.current && inputRef.current.focus();
+  }
+
+  const [hour, setHour] = useState(0);
+  const [minute, setMinute] = useState(0);
+  const [second, setSecond] = useState(0);
+
+  function handleSubmit(event) {
+    event.preventDefault();
+  }
+
+  const inputStyle = {
+    width: "70px",
+    border: "none",
+    ":focus": {
+      outline: "none",
+    },
+    fontSize: "32px",
+    padding: 2,
+    paddingLeft: 0,
+  };
+
+  function parseValue(value, max) {
+    const num = parseInt(value);
+    if (isNaN(num)) {
+      return 0;
+    }
+    return Math.min(num, max);
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      onAfterOpen={focusInput}
+    >
+      <Flex
+        sx={{
+          flexDirection: "column",
+          justifyContent: "center",
+          maxWidth: "300px",
+          flexGrow: 1,
+        }}
+        m={2}
+      >
+        <Box as="form" onSubmit={handleSubmit}>
+          <Label py={2}>Start a countdown timer</Label>
+          <Flex mb={2} sx={{ flexGrow: 1, alignItems: "baseline" }}>
+            <Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
+              H:
+            </Text>
+            <Input
+              sx={inputStyle}
+              value={`${hour}`}
+              onChange={(e) => setHour(parseValue(e.target.value, 24))}
+              type="number"
+              min={0}
+              max={24}
+            />
+            <Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
+              M:
+            </Text>
+            <Input
+              sx={inputStyle}
+              value={`${minute}`}
+              onChange={(e) => setMinute(parseValue(e.target.value, 59))}
+              type="number"
+              ref={inputRef}
+              min={0}
+              max={59}
+            />
+            <Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
+              S:
+            </Text>
+            <Input
+              sx={inputStyle}
+              value={`${second}`}
+              onChange={(e) => setSecond(parseValue(e.target.value, 59))}
+              type="number"
+              min={0}
+              max={59}
+            />
+          </Flex>
+          <Flex>
+            <Button
+              sx={{ flexGrow: 1 }}
+              disabled={hour === 0 && minute === 0 && second === 0}
+            >
+              Start Timer
+            </Button>
+          </Flex>
+        </Box>
+      </Flex>
+    </Modal>
+  );
+}
+
+export default StartTimerModal;