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

This commit is contained in:
Mitchell McCaffrey 2020-08-04 16:26:53 +10:00
parent 6e0eb8e3ba
commit fc4d36963f
8 changed files with 145 additions and 113 deletions

View File

@ -153,7 +153,6 @@ function Map({
disabledControls.push("pan");
disabledControls.push("measure");
disabledControls.push("pointer");
disabledControls.push("timer");
}
if (!allowFogDrawing) {
disabledControls.push("fog");

View File

@ -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 = [
{

View File

@ -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;

View File

@ -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>

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;