initial guess MV mode

1 files changed, 76 insertions, 0 deletions

diff --git a/src/pages/MVPage.tsx b/src/pages/MVPage.tsx
new file mode 100644
index 0000000..c135918
--- /dev/null
+++ b/src/pages/MVPage.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+
+import { DailySolution, getDailyMVSolution } from "../helpers/fetchSolution";
+import { useGameState } from "../hooks/useGameState";
+
+import { Header, InfoPopUp, Game, Footer } from "../components";
+
+import * as Styled from "../app.styled";
+
+export function MVPage() {
+  const [todaysSolution, setTodaysSolution] =
+    React.useState<DailySolution | null>(null);
+
+  const firstRun = localStorage.getItem("firstRun") === null;
+
+  React.useEffect(() => {
+    getDailyMVSolution().then((solution) => setTodaysSolution(solution));
+  }, []);
+
+  const {
+    guesses,
+    currentTry,
+    setSelectedSong,
+    didGuess,
+    skip,
+    guess,
+    isSubmitting,
+  } = useGameState({
+    solution: todaysSolution?.song ?? null,
+    persist: true,
+    sessionDate: todaysSolution?.date,
+    sessionToken: todaysSolution?.sessionToken,
+    initialSig: todaysSolution?.initialSig,
+    mode: "dailyMV",
+  });
+
+  const [isInfoPopUpOpen, setIsInfoPopUpOpen] =
+    React.useState<boolean>(firstRun);
+
+  const openInfoPopUp = React.useCallback(() => {
+    setIsInfoPopUpOpen(true);
+  }, []);
+
+  const closeInfoPopUp = React.useCallback(() => {
+    if (firstRun) {
+      localStorage.setItem("firstRun", "false");
+    }
+    setIsInfoPopUpOpen(false);
+  }, [localStorage.getItem("firstRun")]);
+
+  if (todaysSolution === null) {
+    return null;
+  }
+
+  return (
+    <main>
+      <Header openInfoPopUp={openInfoPopUp} />
+      {isInfoPopUpOpen && <InfoPopUp onClose={closeInfoPopUp} gameMode="dailyMV" />}
+      <Styled.Container>
+        <Game
+          guesses={guesses}
+          didGuess={didGuess}
+          todaysSolution={todaysSolution.song}
+          dailyDate={todaysSolution.date}
+          currentTry={currentTry}
+          setSelectedSong={setSelectedSong}
+          skip={skip}
+          guess={guess}
+          mode="dailyMV"
+          isSubmitting={isSubmitting}
+        />
+      </Styled.Container>
+      <Footer />
+    </main>
+  );
+}