overhaul how daily is updated from server to client

2 files changed, 23 insertions, 16 deletions

diff --git a/src/components/Game/index.tsx b/src/components/Game/index.tsx
index cde682d..59f9289 100644
--- a/src/components/Game/index.tsx
+++ b/src/components/Game/index.tsx
@@ -11,6 +11,7 @@ import * as Styled from "./index.styled";
 interface Props {
   guesses: GuessType[];
   todaysSolution: Song;
+  dailyDate?: string;
   currentTry: number;
   didGuess: boolean;
   setSelectedSong: React.Dispatch<React.SetStateAction<Song | undefined>>;
@@ -24,17 +25,10 @@ function getUtcDate() {
   return new Date().toISOString().split("T")[0];
 }
 
-function checkDailyIsGenerated(): boolean {
-  const CDN_URL = import.meta.env.VITE_CDN_URL;
-  if (!CDN_URL) return false;
-
-  const date = getUtcDate();
-  return !!localStorage.getItem(`${CDN_URL}/${date}.mp3`);
-}
-
 export function Game({
   guesses,
   todaysSolution,
+  dailyDate,
   currentTry,
   didGuess,
   setSelectedSong,
@@ -43,22 +37,23 @@ export function Game({
   mode = "daily",
   onPlayAgain,
 }: Props) {
-  const [sessionDate] = React.useState(() => getUtcDate());
   const recentFinishedPlay = localStorage.getItem("recentFinishedPlay");
   const hasFinishedCurrentRound = didGuess || currentTry >= guesses.length;
-  const isGameOver = hasFinishedCurrentRound;
+  const hasFinishedResponseDaily =
+    mode === "daily" && !!dailyDate && recentFinishedPlay === dailyDate;
+  const isGameOver = hasFinishedCurrentRound || hasFinishedResponseDaily;
   const isBlocked =
     mode === "daily" &&
-    !!recentFinishedPlay &&
-    new Date(sessionDate) > new Date(recentFinishedPlay) &&
-    !checkDailyIsGenerated();
+    !!dailyDate &&
+    !hasFinishedResponseDaily &&
+    new Date(getUtcDate()) > new Date(dailyDate);
 
   React.useEffect(() => {
     if (mode !== "daily") return;
     if (!hasFinishedCurrentRound) return;
 
-    localStorage.setItem("recentFinishedPlay", sessionDate);
-  }, [mode, hasFinishedCurrentRound, sessionDate]);
+    localStorage.setItem("recentFinishedPlay", dailyDate ?? getUtcDate());
+  }, [mode, hasFinishedCurrentRound, dailyDate]);
 
   if (isBlocked) {
     return <h1>Daily MIXX is not available yet. Check back soon!</h1>;
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
index 841d256..bbf35b0 100644
--- a/src/components/Player/index.tsx
+++ b/src/components/Player/index.tsx
@@ -33,6 +33,7 @@ export function Player({ currentTry }: Props) {
   const [play, setPlay] = React.useState(false);
   const [currentTime, setCurrentTime] = React.useState(0);
   const [isReady, setIsReady] = React.useState(false);
+  const [isUnavailable, setIsUnavailable] = React.useState(false);
   const [volume, setVolume] = React.useState(loadVolume);
 
   const CDN_URL =
@@ -65,12 +66,21 @@ export function Player({ currentTry }: Props) {
   );
 
   React.useEffect(() => {
+    setIsReady(false);
+    setIsUnavailable(false);
+
     const audio = new Audio(`${CDN_URL}/${dateString}.mp3`);
     audio.volume = loadVolume();
     audioRef.current = audio;
 
     audio.addEventListener("loadeddata", () => {
       setIsReady(true);
+      setIsUnavailable(false);
+    });
+
+    audio.addEventListener("error", () => {
+      setIsReady(false);
+      setIsUnavailable(true);
     });
 
     audio.addEventListener("timeupdate", () => {
@@ -138,7 +148,9 @@ export function Player({ currentTry }: Props) {
 
   return (
     <>
-      {isReady ? (
+      {isUnavailable ? (
+        <p>We are still generating the audio! Come back later.</p>
+      ) : isReady ? (
         <>
           <Styled.ProgressBackground>
             {currentTime !== 0 && (