From dcd104cca74b06e8ebc396876e8c7e0e97c5d805 Mon Sep 17 00:00:00 2001
From: Eric Zhang <ekzhang1@gmail.com>
Date: Mon, 24 Feb 2025 20:02:43 -0500
Subject: [PATCH] Allow flipping the board layout on mobile (#184)

---
 src/App.js               | 27 ++++++++++++++++++++++++++-
 src/components/Game.js   | 22 ++++++++++------------
 src/components/Navbar.js | 13 +++++++++++++
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6e84985..c0858db 100644
--- a/src/App.js
+++ b/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 />
diff --git a/src/components/Game.js b/src/components/Game.js
index ed9eb77..32eefe4 100644
--- a/src/components/Game.js
+++ b/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();
       }
     }
   });
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 8a49ed8..a2938af 100644
--- a/src/components/Navbar.js
+++ b/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);