Use Ctrl+Shift for shortcuts

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, 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,15 @@ export function getModifierState(event) {
   return res.slice(1);
 }
 
+export function getKeyState(event) {
+  const modifier = getModifierState(event);
+  // Ignore CapsLock: make key case depend only on Shift.
+  const key = modifier.includes("Shift")
+    ? event.key.toUpperCase()
+    : event.key.toLowerCase();
+  return { key, modifier };
+}
+
 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"],
         ])}