1 files changed, 111 insertions, 0 deletions
diff --git a/src/pages/DailyPage.tsx b/src/pages/DailyPage.tsx
new file mode 100644
index 0000000..5033366
--- /dev/null
+++ b/src/pages/DailyPage.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+
+import { Song } from "../types/song";
+import { GuessType } from "../types/guess";
+import { getDailySolution } from "../helpers/fetchSolution";
+import { useGameState } from "../hooks/useGameState";
+
+import { Header, InfoPopUp, Game, Footer } from "../components";
+
+import * as Styled from "../app.styled";
+
+export function DailyPage() {
+  const [todaysSolution, setTodaysSolution] = React.useState<Song | null>(null);
+
+  const firstRun = localStorage.getItem("firstRun") === null;
+
+  const initialGuess = {
+    song: undefined,
+    state: undefined,
+  } as GuessType;
+
+  // --- Stats import logic ---
+  function reloadWithoutQueryParameters() {
+    location.replace(location.pathname);
+  }
+  const urlHash = window.location.hash;
+  const urlQueryParametersStart = urlHash.indexOf("?");
+  const statsImportQueryParameter =
+    new URLSearchParams(urlHash.substring(urlQueryParametersStart)).get(
+      "statsImport"
+    ) || "";
+
+  function importStats() {
+    if (statsImportQueryParameter) {
+      const importedStats = JSON.parse(statsImportQueryParameter);
+      if (Array.isArray(importedStats)) {
+        importedStats.forEach((day) => {
+          if (Array.isArray(day.guesses)) {
+            if (day.guesses.length == 5) {
+              day.guesses.push(initialGuess);
+            }
+          }
+        });
+      }
+      localStorage.setItem("stats", JSON.stringify(importedStats));
+      reloadWithoutQueryParameters();
+    }
+  }
+
+  if (statsImportQueryParameter) {
+    if (
+      confirm(
+        "Do you want to import your previous stats? This will overwrite any stats on this site."
+      )
+    ) {
+      importStats();
+    } else {
+      reloadWithoutQueryParameters();
+    }
+  }
+
+  React.useEffect(() => {
+    getDailySolution().then((solution) => setTodaysSolution(solution));
+  }, []);
+
+  const {
+    guesses,
+    currentTry,
+    setSelectedSong,
+    didGuess,
+    skip,
+    guess,
+  } = useGameState({ solution: todaysSolution, persist: true });
+
+  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} />}
+      <Styled.Container>
+        <Game
+          guesses={guesses}
+          didGuess={didGuess}
+          todaysSolution={todaysSolution}
+          currentTry={currentTry}
+          setSelectedSong={setSelectedSong}
+          skip={skip}
+          guess={guess}
+        />
+      </Styled.Container>
+      <Footer />
+    </main>
+  );
+}