From ab969009ec03a4bf5aef324631f216870a2e9235 Mon Sep 17 00:00:00 2001
From: lindenlinden <angrycrocodile1@gmail.com>
Date: Tue, 24 Jun 2025 23:05:06 +1000
Subject: [PATCH 1/2] Added Focus Mode

---
 src/App.js               |  3 +++
 src/components/Navbar.js | 12 +++++++++
 src/pages/GamePage.js    | 56 +++++++++++++++++++++-------------------
 3 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/App.js b/src/App.js
index 69ef7fe..c9d1481 100644
--- a/src/App.js
+++ b/src/App.js
@@ -89,6 +89,7 @@ function App() {
   );
   const [volume, setVolume] = useStorage("volume", "on");
   const [notifications, setNotifications] = useStorage("notifications", "on");
+  const [focusMode, setFocusMode] = useStorage("focusMode", "off");
 
   useEffect(() => {
     return firebase.auth().onAuthStateChanged((user) => {
@@ -162,6 +163,8 @@ function App() {
                 setVolume,
                 notifications,
                 setNotifications,
+                focusMode,
+                setFocusMode,
                 layoutOrientation,
                 setLayoutOrientation,
                 cardOrientation,
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index e5d8ec5..adb4315 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -115,6 +115,10 @@ function Navbar() {
     );
   }
 
+  function handleChangeFocusMode() {
+    settings.setFocusMode((focusMode) => (focusMode === "on" ? "off" : "on"));
+  }
+
   useKeydown((event) => {
     if (getModifierState(event) === "Control") {
       if (event.key === "s") {
@@ -221,6 +225,14 @@ function Navbar() {
             {settings.notifications === "on" ? "Disable" : "Enable"}{" "}
             notifications
           </MenuItem>
+          <MenuItem
+            onClick={() => {
+              handleChangeFocusMode();
+              handleCloseMenu();
+            }}
+          >
+            {settings.focusMode === "on" ? "Disable" : "Enable"} focus mode
+          </MenuItem>
           <MenuItem
             onClick={() => {
               handleChangeTheme();
diff --git a/src/pages/GamePage.js b/src/pages/GamePage.js
index 076a3b7..c8ff47f 100644
--- a/src/pages/GamePage.js
+++ b/src/pages/GamePage.js
@@ -111,7 +111,7 @@ function ensureConnected() {
 
 function GamePage({ match }) {
   const user = useContext(UserContext);
-  const { volume, notifications } = useContext(SettingsContext);
+  const { volume, notifications, focusMode } = useContext(SettingsContext);
   const gameId = match.params.id;
   const nextGameId = useMemo(() => getNextGameId(gameId), [gameId]);
   const classes = useStyles();
@@ -432,16 +432,18 @@ 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}>
-            <Paper style={{ display: "flex", height: "100%", padding: 8 }}>
-              <Chat
-                title="Game Chat"
-                messageLimit={200}
-                gameId={gameId}
-                history={history}
-                startedAt={game.startedAt}
-                gameMode={gameMode}
-              />
-            </Paper>
+            {focusMode === "on" && !gameEnded ? null : (
+              <Paper style={{ display: "flex", height: "100%", padding: 8 }}>
+                <Chat
+                  title="Game Chat"
+                  messageLimit={200}
+                  gameId={gameId}
+                  history={history}
+                  startedAt={game.startedAt}
+                  gameMode={gameMode}
+                />
+              </Paper>
+            )}
           </Grid>
         </Box>
         <Box clone order={{ xs: 1, sm: 2 }} position="relative">
@@ -510,21 +512,23 @@ function GamePage({ match }) {
         </Box>
         <Box clone order={{ xs: 2, sm: 3 }}>
           <Grid item xs={12} md={3} className={classes.sideColumn}>
-            <Box order={{ xs: 2, md: 1 }} style={{ maxHeight: "100%" }}>
-              <GameSidebar
-                game={game}
-                scores={scores}
-                leaderboard={leaderboard}
-                pause={gameData.pause}
-                endedAt={
-                  game.status === "done"
-                    ? game.endedAt
-                    : !answer && history.length > 0
-                      ? history[history.length - 1].time
-                      : 0
-                }
-              />
-            </Box>
+            {focusMode === "on" && !gameEnded ? null : (
+              <Box order={{ xs: 2, md: 1 }} style={{ maxHeight: "100%" }}>
+                <GameSidebar
+                  game={game}
+                  scores={scores}
+                  leaderboard={leaderboard}
+                  pause={gameData.pause}
+                  endedAt={
+                    game.status === "done"
+                      ? game.endedAt
+                      : !answer && history.length > 0
+                        ? history[history.length - 1].time
+                        : 0
+                  }
+                />
+              </Box>
+            )}
             {game.enableHint && (
               <Box order={{ xs: 1, md: 2 }}>
                 <Box mt={{ xs: 0, md: 2 }} mb={1}>

From 03ecd53f797c712a1cfccbd4c0948ed4e6f67296 Mon Sep 17 00:00:00 2001
From: Eugene Toder <eltoder@gmail.com>
Date: Sun, 29 Jun 2025 22:45:29 -0400
Subject: [PATCH 2/2] Cosmetic change

---
 src/pages/GamePage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/GamePage.js b/src/pages/GamePage.js
index c8ff47f..29775a2 100644
--- a/src/pages/GamePage.js
+++ b/src/pages/GamePage.js
@@ -432,7 +432,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 ? null : (
+            {(focusMode !== "on" || gameEnded) && (
               <Paper style={{ display: "flex", height: "100%", padding: 8 }}>
                 <Chat
                   title="Game Chat"
@@ -512,7 +512,7 @@ function GamePage({ match }) {
         </Box>
         <Box clone order={{ xs: 2, sm: 3 }}>
           <Grid item xs={12} md={3} className={classes.sideColumn}>
-            {focusMode === "on" && !gameEnded ? null : (
+            {(focusMode !== "on" || gameEnded) && (
               <Box order={{ xs: 2, md: 1 }} style={{ maxHeight: "100%" }}>
                 <GameSidebar
                   game={game}