Allow flipping the board layout on mobile (#184)

Author: ekzhang

src/App.js

@@ -36,6 +36,22 @@ function App() {
     "keyboardLayout",
     "QWERTY",
   );
+  const [layoutOrientation, setLayoutOrientation] = useStorage(
+    "layout",
+    "portrait",
+  );
+  const [cardOrientation, setCardOrientation] = useStorage(
+    "orientation",
+    "vertical",
+  );
+
+  const toggleLayoutOrientation = () => {
+    setLayoutOrientation((x) => (x === "portrait" ? "landscape" : "portrait"));
+  };
+  const toggleCardOrientation = () => {
+    setCardOrientation((x) => (x === "vertical" ? "horizontal" : "vertical"));
+  };
+
   const [volume, setVolume] = useStorage("volume", "on");
 
   useEffect(() => {
@@ -127,7 +143,16 @@ function App() {
           ) : (
             <UserContext.Provider value={user}>
               <SettingsContext.Provider
-                value={{ keyboardLayout, setKeyboardLayout, volume, setVolume }}
+                value={{
+                  keyboardLayout,
+                  setKeyboardLayout,
+                  volume,
+                  setVolume,
+                  layoutOrientation,
+                  toggleLayoutOrientation,
+                  cardOrientation,
+                  toggleCardOrientation,
+                }}
               >
                 <ConnectionsTracker />
                 <WelcomeDialog />

src/components/Game.js

@@ -11,7 +11,6 @@ import ResponsiveSetCard from "../components/ResponsiveSetCard";
 import { SettingsContext } from "../context";
 import useDimensions from "../hooks/useDimensions";
 import useKeydown from "../hooks/useKeydown";
-import useStorage from "../hooks/useStorage";
 import { generateCards, standardLayouts } from "../util";
 
 const gamePadding = 8;
@@ -27,15 +26,14 @@ function Game({
   answer,
   lastSet,
 }) {
-  const [layoutOrientation, setLayoutOrientation] = useStorage(
-    "layout",
-    "portrait",
-  );
-  const [cardOrientation, setCardOrientation] = useStorage(
-    "orientation",
-    "vertical",
-  );
-  const { keyboardLayout, volume } = useContext(SettingsContext);
+  const {
+    keyboardLayout,
+    volume,
+    layoutOrientation,
+    toggleLayoutOrientation,
+    cardOrientation,
+    toggleCardOrientation,
+  } = useContext(SettingsContext);
   const keyboardLayoutDesc = standardLayouts[keyboardLayout];
   const isHorizontal = cardOrientation === "horizontal";
   const isLandscape = layoutOrientation === "landscape";
@@ -177,11 +175,11 @@ function Game({
       ) {
         event.preventDefault();
         if (volume === "on") playLayout();
-        setCardOrientation(isHorizontal ? "vertical" : "horizontal");
+        toggleCardOrientation();
       } else if (key.toLowerCase() === keyboardLayoutDesc.layoutChangeKey) {
         event.preventDefault();
         if (volume === "on") playLayout();
-        setLayoutOrientation(isLandscape ? "portrait" : "landscape");
+        toggleLayoutOrientation();
       }
     }
   });

src/components/Navbar.js

@@ -13,7 +13,9 @@ import Toolbar from "@mui/material/Toolbar";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { useContext, useState } from "react";
+import useSound from "use-sound";
 
+import layoutSfx from "../assets/layoutChangeSound.mp3";
 import { version } from "../config";
 import { SettingsContext, UserContext } from "../context";
 import firebase from "../firebase";
@@ -33,6 +35,7 @@ function Navbar({
 }) {
   const user = useContext(UserContext);
   const settings = useContext(SettingsContext);
+  const [playLayout] = useSound(layoutSfx);
   const [anchorEl, setAnchorEl] = useState(null);
   const [changeName, setChangeName] = useState(false);
   const [changeUserColor, setChangeUserColor] = useState(false);
@@ -181,6 +184,16 @@ function Navbar({
           >
             Change keyboard layout
           </MenuItem>
+          <MenuItem
+            onClick={() => {
+              if (settings.volume === "on") playLayout();
+              settings.toggleLayoutOrientation();
+              settings.toggleCardOrientation();
+              handleCloseMenu();
+            }}
+          >
+            Flip board layout
+          </MenuItem>
           <MenuItem
             onClick={() => {
               setShowOptions(true);