sunrise-sunset: Update notification styles

src/routes/sunrise-sunset/+page.svelte

@@ -2,19 +2,19 @@
   import type { PageData } from "./$types.js";
   import { format as formatDate } from "date-fns";
   import { onMount } from "svelte";
-  import { spring } from "svelte/motion";
+  import { writable, type Writable } from "svelte/store";
-  import { fade } from "svelte/transition";
-  import { writable } from "svelte/store";
   import Navbar from "$lib/components/Navbar.svelte";
 
   import MetaTags from "./MetaTags.svelte";
   import OptionsSection from "./OptionsSection.svelte";
   import ScoreCardSection from "./ScoreCardSection.svelte";
+  import NotificationSection from "./NotificationSection.svelte";
   import type { ISunriseSunsetGuessingHistory } from "./ISunriseSunsetGuessingHistory.js";
 
   let hasGuessingHistoryBeenLoaded = false;
-  let debug = true;
+  let debug = false;
-  let visibleNotification: "none" | "success" | "failure" = "none";
+  let visibleNotification: Writable<"none" | "success" | "failure"> =
+    writable("none");
 
   const guessingHistory = writable<ISunriseSunsetGuessingHistory>({
     mostRecentGuessDate: undefined,
@@ -24,12 +24,6 @@
     incorrectDays: []
   });
 
-  const notificationSpring = spring(20, {
-    stiffness: 0.1,
-    damping: 0.15,
-    precision: 0.01
-  });
-
   export let data: PageData;
   const now = new Date();
   const todaysDateString = formatDate(now, "yyyy-MM-dd");
@@ -38,9 +32,8 @@
   $: picture = data.body.photo;
 
   function debugRemoveLocalStorage() {
-    notificationSpring.set(20);
     localStorage.removeItem(localStorageKey);
-    visibleNotification = "none";
+    visibleNotification.set("none");
     guessingHistory.set({
       mostRecentGuessDate: undefined,
       totalNumberOfGuesses: 0,
@@ -51,11 +44,10 @@
   }
 
   function revealNotification(wasCorrect: boolean) {
-    notificationSpring.set(0);
     if (wasCorrect) {
-      visibleNotification = "success";
+      visibleNotification.set("success");
     } else {
-      visibleNotification = "failure";
+      visibleNotification.set("failure");
     }
   }
 
@@ -92,6 +84,13 @@
     const storedGuessHistory = localStorage.getItem(localStorageKey);
     if (storedGuessHistory) {
       guessingHistory.set(JSON.parse(storedGuessHistory));
+      const wasTodayGuessed =
+        $guessingHistory.mostRecentGuessDate === todaysDateString;
+      if (wasTodayGuessed) {
+        revealNotification(
+          $guessingHistory.correctDays.includes(todaysDateString)
+        );
+      }
     }
     hasGuessingHistoryBeenLoaded = true;
   });
@@ -120,17 +119,7 @@
   </section>
 
   {#if hasGuessingHistoryBeenLoaded}
-    <section class="notification">
+    <NotificationSection {visibleNotification} />
-      {#if visibleNotification !== "none"}
-        <div
-          class="notification--success"
-          transition:fade={{ duration: 200 }}
-          style="transform: translateY({$notificationSpring}px);"
-        >
-          {visibleNotification === "success" ? "Correct 🎉" : "Incorrect 💔"}
-        </div>
-      {/if}
-    </section>
 
     <OptionsSection
       isDisabled={$guessingHistory.mostRecentGuessDate === todaysDateString}
@@ -195,14 +184,4 @@
     max-width: 100%;
     max-height: 100%;
   }
-
-  .notification {
-  }
-
-  .notification--success {
-    color: var(--colour-dark-grey);
-    padding: 12px;
-    text-align: center;
-    font-size: 1.2rem;
-  }
 </style>

src/routes/sunrise-sunset/NotificationSection.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { spring } from "svelte/motion";
+  import { fade } from "svelte/transition";
+  import type { Writable } from "svelte/store";
+
+  export let visibleNotification: Writable<"none" | "success" | "failure">;
+  let hasAnimationTriggered = false;
+  const revealResultDelayDurationMs = 550;
+
+  const resultSpring = spring(20, {
+    stiffness: 0.1,
+    damping: 0.15,
+    precision: 0.01
+  });
+
+  function triggerAnimation() {
+    hasAnimationTriggered = true;
+    setTimeout(() => {
+      resultSpring.set(0);
+    }, revealResultDelayDurationMs);
+  }
+
+  function resetAnimation() {
+    hasAnimationTriggered = false;
+    resultSpring.set(20);
+  }
+
+  visibleNotification.subscribe((value) => {
+    if (value === "none") {
+      resetAnimation();
+      return;
+    } else if (hasAnimationTriggered) {
+      return;
+    }
+
+    triggerAnimation();
+  });
+</script>
+
+<section class="notification">
+  {#if $visibleNotification !== "none"}
+    <div class="notification--success">
+      <p class="notification__prefix" transition:fade={{ duration: 250 }}>
+        Today's Guess:
+      </p>
+      <p
+        class="notification__result"
+        transition:fade={{ duration: 300, delay: revealResultDelayDurationMs }}
+        style="transform: translateY({$resultSpring}px);"
+      >
+        {$visibleNotification === "success" ? "Correct 🎉" : "Incorrect 💔"}
+      </p>
+    </div>
+  {/if}
+</section>
+
+<style type="text/postcss">
+  .notification {
+  }
+
+  .notification--success {
+    color: var(--colour-dark-grey);
+    padding: 12px;
+    text-align: center;
+    font-size: 1.2rem;
+  }
+
+  .notification__prefix {
+    font-size: 1.1rem;
+    padding-bottom: 0;
+  }
+
+  .notification__result {
+    font-size: 1.4rem;
+    font-weight: 600;
+  }
+</style>