Use Ctrl+Shift for shortcuts (#187)

This avoids accidentally triggering them after pressing Ctrl+Enter
to start the game. There are also fewer conflicts, so we can choose more
intuitive keys.

Also, add a shortcut for focus mode.

Also, disable focus mode when spectating and make card orientation UI
more intuitive.

Author: eltoder

src/components/BoardLayoutDialog.js

@@ -50,10 +50,10 @@ function BoardLayoutDialog(props) {
     setCardOrientation,
   } = useContext(SettingsContext);
 
-  const menuItems = (...items) =>
-    items.map((item) => (
-      <MenuItem key={item} value={item}>
-        {item}
+  const menuItems = (items) =>
+    Object.entries(items).map(([key, name]) => (
+      <MenuItem key={key} value={key}>
+        {name}
       </MenuItem>
     ));
 
@@ -71,7 +71,7 @@ function BoardLayoutDialog(props) {
               value={layoutOrientation}
               onChange={(e) => setLayoutOrientation(e.target.value)}
             >
-              {menuItems("portrait", "landscape")}
+              {menuItems({ portrait: "portrait", landscape: "landscape" })}
             </Select>
           </FormControl>
           <FormControl className={classes.formControl}>
@@ -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" })
+              }
             </Select>
           </FormControl>
         </div>

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();

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"

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) =>

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 }) {
       <Grid container spacing={2}>
         <Box clone order={{ xs: 3, sm: 1 }}>
           <Grid item xs={12} sm={4} md={3} className={classes.sideColumn}>
-            {(focusMode !== "on" || gameEnded) && (
+            {(focusMode !== "on" || spectating || gameEnded) && (
               <Paper style={{ display: "flex", height: "100%", padding: 8 }}>
                 <Chat
                   title="Game Chat"
@@ -492,7 +495,7 @@ function GamePage({ match }) {
         </Box>
         <Box clone order={{ xs: 2, sm: 3 }}>
           <Grid item xs={12} md={3} className={classes.sideColumn}>
-            {(focusMode !== "on" || gameEnded) && (
+            {(focusMode !== "on" || spectating || gameEnded) && (
               <Box order={{ xs: 2, md: 1 }} style={{ maxHeight: "100%" }}>
                 <GameSidebar
                   game={game}

src/pages/HelpPage.js

@@ -194,12 +194,13 @@ function HelpPage() {
           ["New private game", "Shift+Enter"],
           ["Start game", "Ctrl+Enter"],
           ["Play again", "Ctrl+Enter"],
-          ["Mute or unmute sound", "Ctrl+S"],
-          ["Change theme", "Ctrl+E"],
-          ["Change board orientation", "Ctrl+O"],
-          ["Change cards orientation", "Ctrl+I"],
-          ["Pause or resume game", "Ctrl+P"],
-          ["Quit game", "Ctrl+Q"],
+          ["Mute or unmute sound", "Ctrl+Shift+S"],
+          ["Enable or disable focus mode", "Ctrl+Shift+F"],
+          ["Change theme", "Ctrl+Shift+H"],
+          ["Change board orientation", "Ctrl+Shift+B"],
+          ["Change cards orientation", "Ctrl+Shift+C"],
+          ["Pause or resume game", "Ctrl+Shift+P"],
+          ["Quit game", "Ctrl+Shift+Q"],
           ["Unselect cards", "Space or Escape"],
         ])}