Merge pull request #48 from skedwards88/whatsnew

Change the what's new announcement logic
skedwards88 · Sep 9, 2024 · 0b27240 · 0b27240
2 parents 73e45c8 + bdb3889
commit 0b27240
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 17 deletions.
diff --git a/src/common/getInitialState.js b/src/common/getInitialState.js
@@ -1,13 +1,9 @@
-export function getInitialState(
-  savedDisplay,
-  hasVisitedEver,
-  hasVisitedRecently,
-) {
+export function getInitialState(savedDisplay, hasVisitedEver, hasSeenWhatsNew) {
   if (!hasVisitedEver) {
     return "rules";
   }
 
-  if (!hasVisitedRecently) {
+  if (!hasSeenWhatsNew) {
     return "whatsNew";
   }
 

diff --git a/src/common/getInitialState.test.js b/src/common/getInitialState.test.js
@@ -7,19 +7,19 @@ describe("getInitialState", () => {
     expect(getInitialState("game", false, false)).toBe("rules");
   });
 
-  test("returns 'whatsNew' if hasVisitedRecently is false", () => {
+  test("returns 'whatsNew' if hasSeenWhatsNew is false", () => {
     expect(getInitialState("game", true, false)).toBe("whatsNew");
   });
 
-  test("returns 'game' if hasVisitedEver and hasVisitedRecently are true and savedDisplay is 'game", () => {
+  test("returns 'game' if hasVisitedEver and hasSeenWhatsNew are true and savedDisplay is 'game", () => {
     expect(getInitialState("game", true, true)).toBe("game");
   });
 
-  test("returns 'daily' if hasVisitedEver and hasVisitedRecently are true and savedDisplay is 'daily", () => {
+  test("returns 'daily' if hasVisitedEver and hasSeenWhatsNew are true and savedDisplay is 'daily", () => {
     expect(getInitialState("daily", true, true)).toBe("daily");
   });
 
-  test("returns 'game' if hasVisitedEver and hasVisitedRecently are and savedDisplay is not 'game' or 'daily", () => {
+  test("returns 'game' if hasVisitedEver and hasSeenWhatsNew are and savedDisplay is not 'game' or 'daily", () => {
     expect(getInitialState("rules", true, true)).toBe("game");
   });
 });
diff --git a/src/components/App.js b/src/components/App.js
@@ -37,9 +37,23 @@ export default function App() {
   const [isCustom, seed, numLetters] = parseUrlQuery();
 
   // Determine when the player last visited the game
-  // This is used to determine whether to show the rules or an announcement instead of the game
+  // This is used to determine whether to show the rules instead of the game
   const hasVisitedEver = hasVisitedSince("crossjigLastVisited", "20240429");
-  const hasVisitedRecently = hasVisitedSince("crossjigLastVisited", "20240908");
+
+  const savedHasSeenWhatsNew = JSON.parse(
+    localStorage.getItem("crossjigHasSeenWhatsNew20240909"),
+  );
+
+  const [hasSeenWhatsNew, setHasSeenWhatsNew] = React.useState(
+    savedHasSeenWhatsNew ?? false,
+  );
+
+  React.useEffect(() => {
+    window.localStorage.setItem(
+      "crossjigHasSeenWhatsNew20240909",
+      JSON.stringify(hasSeenWhatsNew),
+    );
+  }, [hasSeenWhatsNew]);
 
   const [lastVisited] = React.useState(getDailySeed());
   React.useEffect(() => {
@@ -52,7 +66,7 @@ export default function App() {
   // Determine what view to show the user
   const savedDisplay = JSON.parse(localStorage.getItem("crossjigDisplay"));
   const [display, setDisplay] = React.useState(
-    getInitialState(savedDisplay, hasVisitedEver, hasVisitedRecently),
+    getInitialState(savedDisplay, hasVisitedEver, hasSeenWhatsNew),
   );
 
   // Determine the opacity for the validity indicator
@@ -202,7 +216,12 @@ export default function App() {
 
   switch (display) {
     case "rules":
-      return <Rules setDisplay={setDisplay}></Rules>;
+      return (
+        <Rules
+          setDisplay={setDisplay}
+          setHasSeenWhatsNew={setHasSeenWhatsNew}
+        ></Rules>
+      );
 
     case "heart":
       return <Heart setDisplay={setDisplay} repoName="crossjig" />;
@@ -377,7 +396,12 @@ export default function App() {
       );
 
     case "whatsNew":
-      return <WhatsNew setDisplay={setDisplay}></WhatsNew>;
+      return (
+        <WhatsNew
+          setDisplay={setDisplay}
+          setHasSeenWhatsNew={setHasSeenWhatsNew}
+        ></WhatsNew>
+      );
 
     default:
       return (

diff --git a/src/components/Rules.js b/src/components/Rules.js
@@ -1,7 +1,7 @@
 import React from "react";
 import packageJson from "../../package.json";
 
-export default function Rules({setDisplay}) {
+export default function Rules({setDisplay, setHasSeenWhatsNew}) {
   return (
     <div className="App rules">
       <h1 id="rulesHeader">Crossjig: How to play</h1>
@@ -41,6 +41,7 @@ export default function Rules({setDisplay}) {
         className="close"
         onClick={() => {
           setDisplay("game");
+          setHasSeenWhatsNew(true);
         }}
       >
         {"Play"}

diff --git a/src/components/WhatsNew.js b/src/components/WhatsNew.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function WhatsNew({setDisplay}) {
+export default function WhatsNew({setDisplay, setHasSeenWhatsNew}) {
   return (
     <div className="App info">
       <div id="rulesText">
@@ -12,6 +12,7 @@ export default function WhatsNew({setDisplay}) {
             className="rulesIcon"
             onClick={() => {
               setDisplay("custom");
+              setHasSeenWhatsNew(true);
             }}
           ></button>{" "}
           to build your own crossjig to share with friends.
@@ -20,6 +21,7 @@ export default function WhatsNew({setDisplay}) {
       <button
         onClick={() => {
           setDisplay("game");
+          setHasSeenWhatsNew(true);
         }}
       >
         {"Back to game"}