diff --git a/src/components/BoardLayoutDialog.js b/src/components/BoardLayoutDialog.js index 0050f78..a5d2812 100644 --- a/src/components/BoardLayoutDialog.js +++ b/src/components/BoardLayoutDialog.js @@ -50,10 +50,10 @@ function BoardLayoutDialog(props) { setCardOrientation, } = useContext(SettingsContext); - const menuItems = (...items) => - items.map((item) => ( - - {item} + const menuItems = (items) => + Object.entries(items).map(([key, name]) => ( + + {name} )); @@ -71,7 +71,7 @@ function BoardLayoutDialog(props) { value={layoutOrientation} onChange={(e) => setLayoutOrientation(e.target.value)} > - {menuItems("portrait", "landscape")} + {menuItems({ portrait: "portrait", landscape: "landscape" })} @@ -80,7 +80,10 @@ function BoardLayoutDialog(props) { value={cardOrientation} onChange={(e) => setCardOrientation(e.target.value)} > - {menuItems("vertical", "horizontal")} + { + // Stored values are named backwards of what most people expect. + menuItems({ horizontal: "vertical", vertical: "horizontal" }) + } diff --git a/src/components/Game.js b/src/components/Game.js index e293ffa..d3f2cf6 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -9,7 +9,7 @@ import { animated, to, useTransition } from "@react-spring/web"; import ResponsiveSetCard from "../components/ResponsiveSetCard"; import { SettingsContext } from "../context"; import useDimensions from "../hooks/useDimensions"; -import useKeydown, { getModifierState } from "../hooks/useKeydown"; +import useKeydown, { getKeyState } from "../hooks/useKeydown"; const useStyles = makeStyles({ staticCard: { @@ -174,13 +174,10 @@ function Game({ ? keyboardLayout.horizontalLayout : keyboardLayout.verticalLayout; useKeydown((event) => { - const mod = getModifierState(event); - if (mod !== "" && mod !== "Shift") { + const { key, modifier } = getKeyState(event); + if (modifier !== "" && modifier !== "Shift") { return; } - // Ignore CapsLock: make key case depend only on Shift. - const key = - mod === "Shift" ? event.key.toUpperCase() : event.key.toLowerCase(); if (key === "escape" || key === " ") { event.preventDefault(); onClear(); diff --git a/src/components/Navbar.js b/src/components/Navbar.js index adb4315..9047617 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -17,7 +17,7 @@ import { version } from "../config"; import { SettingsContext, UserContext } from "../context"; import firebase from "../firebase"; import useFirebaseRef from "../hooks/useFirebaseRef"; -import useKeydown, { getModifierState } from "../hooks/useKeydown"; +import useKeydown, { getKeyState } from "../hooks/useKeydown"; import AccountOptionsDialog from "./AccountOptionsDialog"; import BoardLayoutDialog from "./BoardLayoutDialog"; import ColorChoiceDialog from "./ColorChoiceDialog"; @@ -120,19 +120,23 @@ function Navbar() { } useKeydown((event) => { - if (getModifierState(event) === "Control") { - if (event.key === "s") { + const { key, modifier } = getKeyState(event); + if (modifier === "Control|Shift") { + if (key === "S") { event.preventDefault(); handleChangeVolume(); - } else if (event.key === "e") { + } else if (key === "F") { + event.preventDefault(); + handleChangeFocusMode(); + } else if (key === "H") { event.preventDefault(); handleChangeTheme(); - } else if (event.key === "o") { + } else if (key === "B") { event.preventDefault(); settings.setLayoutOrientation((layoutOrientation) => layoutOrientation === "portrait" ? "landscape" : "portrait" ); - } else if (event.key === "i") { + } else if (key === "C") { event.preventDefault(); settings.setCardOrientation((cardOrientation) => cardOrientation === "vertical" ? "horizontal" : "vertical" diff --git a/src/hooks/useKeydown.js b/src/hooks/useKeydown.js index 40fef4a..7303a8b 100644 --- a/src/hooks/useKeydown.js +++ b/src/hooks/useKeydown.js @@ -9,6 +9,14 @@ export function getModifierState(event) { return res.slice(1); } +export function getKeyState(event) { + return { + // Ignore CapsLock: make key case depend only on Shift. + key: event.shiftKey ? event.key.toUpperCase() : event.key.toLowerCase(), + modifier: getModifierState(event), + }; +} + function useKeydown(handler) { useEffect(() => { const patchedHandler = (event) => diff --git a/src/pages/GamePage.js b/src/pages/GamePage.js index df223fa..14f7278 100644 --- a/src/pages/GamePage.js +++ b/src/pages/GamePage.js @@ -36,7 +36,7 @@ import { removeCard, } from "../game"; import useFirebaseRef from "../hooks/useFirebaseRef"; -import useKeydown, { getModifierState } from "../hooks/useKeydown"; +import useKeydown, { getKeyState } from "../hooks/useKeydown"; import { formatANoun, sleep } from "../util"; import LoadingPage from "./LoadingPage"; import NotFoundPage from "./NotFoundPage"; @@ -167,16 +167,19 @@ function GamePage({ match }) { }, [finished.gameId, gameId]); useKeydown((event) => { - if (getModifierState(event) === "Control") { - if (event.key === "Enter") { + const { key, modifier } = getKeyState(event); + if (modifier === "Control") { + if (key === "enter") { event.preventDefault(); handlePlayAgain(); - } else if (event.key === "q") { - event.preventDefault(); - setRedirect("/"); - } else if (event.key === "p") { + } + } else if (modifier === "Control|Shift") { + if (key === "P") { event.preventDefault(); togglePause(); + } else if (key === "Q") { + event.preventDefault(); + setRedirect("/"); } } }); @@ -412,7 +415,7 @@ function GamePage({ match }) { - {(focusMode !== "on" || gameEnded) && ( + {(focusMode !== "on" || spectating || gameEnded) && ( - {(focusMode !== "on" || gameEnded) && ( + {(focusMode !== "on" || spectating || gameEnded) && (