Move validity opacity setting into separate state

src/components/App.js

@@ -51,6 +51,12 @@ export default function App() {
     getInitialState(savedDisplay, hasVisited),
   );
 
+  // Determine the opacity for the validity indicator
+  const savedValidityOpacity =
+    JSON.parse(localStorage.getItem("crossjigValidityOpacity")) ?? 0.15;
+  const [validityOpacity, setValidityOpacity] =
+    React.useState(savedValidityOpacity);
+
   // Set up states that will be used by the handleAppInstalled and handleBeforeInstallPrompt listeners
   const [installPromptEvent, setInstallPromptEvent] = React.useState();
   const [showInstallButton, setShowInstallButton] = React.useState(true);
@@ -166,6 +172,13 @@ export default function App() {
     window.localStorage.setItem("crossjigDisplay", JSON.stringify(display));
   }, [display]);
 
+  React.useEffect(() => {
+    window.localStorage.setItem(
+      "crossjigValidityOpacity",
+      JSON.stringify(validityOpacity),
+    );
+  }, [validityOpacity]);
+
   React.useEffect(() => {
     window.localStorage.setItem("crossjigState", JSON.stringify(gameState));
   }, [gameState]);
@@ -197,6 +210,8 @@ export default function App() {
           setDisplay={setDisplay}
           dispatchGameState={dispatchGameState}
           gameState={gameState}
+          setValidityOpacity={setValidityOpacity}
+          originalValidityOpacity={validityOpacity}
         />
       );
 
@@ -224,11 +239,8 @@ export default function App() {
           </div>
           <Game
             dispatchGameState={dailyDispatchGameState}
-            gameState={{
-              ...dailyGameState,
-              // todo in the settings, pass in the dailyDispatcher too and update the validityOpacity in the daily state as well. then remove this line.
-              validityOpacity: gameState.validityOpacity,
-            }}
+            gameState={dailyGameState}
+            validityOpacity={validityOpacity}
             setDisplay={setDisplay}
           ></Game>
         </div>
@@ -309,7 +321,7 @@ export default function App() {
           </div>
           <CustomCreation
             dispatchCustomState={dispatchCustomState}
-            validityOpacity={gameState.validityOpacity}
+            validityOpacity={validityOpacity}
             customState={customState}
             setDisplay={setDisplay}
           ></CustomCreation>
@@ -362,6 +374,7 @@ export default function App() {
           <Game
             dispatchGameState={dispatchGameState}
             gameState={gameState}
+            validityOpacity={validityOpacity}
           ></Game>
         </div>
       );

src/components/Game.js

@@ -4,7 +4,7 @@ import Result from "./Result";
 import Board from "./Board";
 import DragGroup from "./DragGroup";
 
-function Game({dispatchGameState, gameState, setDisplay}) {
+function Game({dispatchGameState, gameState, setDisplay, validityOpacity}) {
   // dragCount ensures a different key each time, so a fresh DragGroup is mounted even if there's
   // no render between one drag ending and the next one starting.
   const dragGroup = gameState.dragState ? (
@@ -20,7 +20,7 @@ function Game({dispatchGameState, gameState, setDisplay}) {
       style={{
         "--grid-rows": gameState.gridSize,
         "--grid-columns": gameState.gridSize,
-        "--validity-opacity": gameState.validityOpacity,
+        "--validity-opacity": validityOpacity,
       }}
     >
       <Board
@@ -30,7 +30,7 @@ function Game({dispatchGameState, gameState, setDisplay}) {
         dragDestination={gameState.dragState?.destination}
         gameIsSolved={gameState.gameIsSolved}
         dispatchGameState={dispatchGameState}
-        indicateValidity={gameState.validityOpacity > 0}
+        indicateValidity={validityOpacity > 0}
       ></Board>
       {gameState.allPiecesAreUsed ? (
         <Result

src/components/Settings.js

@@ -1,16 +1,23 @@
 import React from "react";
 
-export default function Settings({setDisplay, dispatchGameState, gameState}) {
+export default function Settings({
+  setDisplay,
+  dispatchGameState,
+  gameState,
+  setValidityOpacity,
+  originalValidityOpacity,
+}) {
   function handleNewGame(event) {
     event.preventDefault();
     const newNumLetters = event.target.elements.numLetters.value;
     const newValidityOpacity =
       event.target.elements.validityOpacity.value / 100;
 
+    setValidityOpacity(newValidityOpacity);
+
     dispatchGameState({
       action: "newGame",
       numLetters: newNumLetters,
-      validityOpacity: newValidityOpacity,
     });
     setDisplay("game");
   }
@@ -46,7 +53,7 @@ export default function Settings({setDisplay, dispatchGameState, gameState}) {
             <div className="setting-info">{`Valid words are indicated with a strikethrough. This controls the brightness of the strikethrough.`}</div>
             <div
               id="validity-example"
-              style={{"--validity-opacity": gameState.validityOpacity}}
+              style={{"--validity-opacity": originalValidityOpacity}}
             >
               EXAMPLE
             </div>
@@ -61,13 +68,10 @@ export default function Settings({setDisplay, dispatchGameState, gameState}) {
               type="range"
               min={0}
               max={100}
-              defaultValue={gameState.validityOpacity * 100 || 15}
+              defaultValue={originalValidityOpacity * 100 || 15}
               onChange={(event) => {
                 const newValidityOpacity = event.target.value / 100;
-                dispatchGameState({
-                  action: "changeValidityOpacity",
-                  newValidityOpacity,
-                });
+                setValidityOpacity(newValidityOpacity);
               }}
             />
             <div id="validityOpacity-info" className="setting-info">

src/logic/gameInit.js

@@ -30,7 +30,6 @@ function validateSavedState(savedState) {
 
 export function gameInit({
   numLetters,
-  validityOpacity = 0.15,
   useSaved = true,
   isDaily = false,
   isCustom = false,
@@ -157,7 +156,6 @@ export function gameInit({
     hintTally: 0,
     dragCount: 0,
     dragState: undefined,
-    validityOpacity,
     isCustom,
   };
 }

src/logic/gameReducer.js

@@ -555,11 +555,6 @@ export function gameReducer(currentGameState, payload) {
       seed: payload.representativeString,
       isCustom: true,
     });
-  } else if (payload.action === "changeValidityOpacity") {
-    return {
-      ...currentGameState,
-      validityOpacity: payload.newValidityOpacity,
-    };
   } else if (payload.action === "getHint") {
     sendAnalytics("hint");