sunrise-sunset: start to componentise the design

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

@@ -8,10 +8,12 @@
   import Navbar from "$lib/components/Navbar.svelte";
 
   import MetaTags from "./MetaTags.svelte";
+  import OptionsSection from "./OptionsSection.svelte";
+  import ScoreCardSection from "./ScoreCardSection.svelte";
   import type { ISunriseSunsetGuessingHistory } from "./ISunriseSunsetGuessingHistory.js";
 
   let hasGuessingHistoryBeenLoaded = false;
-  let debug = false;
+  let debug = true;
   let visibleNotification: "none" | "success" | "failure" = "none";
 
   const guessingHistory = writable<ISunriseSunsetGuessingHistory>({
@@ -57,7 +59,8 @@
     }
   }
 
-  function onOptionSelected(option: "sunrise" | "sunset") {
+  function onOptionSelected(event: { option: "sunrise" | "sunset" }) {
+    const { option } = event;
     $guessingHistory.mostRecentGuessDate = todaysDateString;
     $guessingHistory.totalNumberOfGuesses += 1;
     $guessingHistory.guesses = [...$guessingHistory.guesses, option];
@@ -128,47 +131,22 @@
         </div>
       {/if}
     </section>
-    <section class="options">
-      <div class="options__buttons-container">
-        <button
-          disabled={$guessingHistory.mostRecentGuessDate === todaysDateString}
-          class="options__button option--sunrise"
-          on:click={() => onOptionSelected("sunrise")}>Sunrise</button
-        >
-        <button
-          disabled={$guessingHistory.mostRecentGuessDate === todaysDateString}
-          class="options__button option--sunset"
-          id="button-sunset"
-          on:click={() => onOptionSelected("sunset")}>Sunset</button
-        >
-      </div>
-      {#if $guessingHistory.mostRecentGuessDate === todaysDateString}
-        <p class="options__text">
-          You've already guessed today. Come back tomorrow.
-        </p>
-      {/if}
-    </section>
 
-    <section class="score">
+    <OptionsSection
-      <div class="score__card">
+      isDisabled={$guessingHistory.mostRecentGuessDate === todaysDateString}
-        <h2 class="score__title">Your Score</h2>
+      hasAlreadyGuessedToday={$guessingHistory.mostRecentGuessDate ===
-        {#if $guessingHistory.mostRecentGuessDate !== undefined}
+        todaysDateString}
-          <p class="score__text">
+      on:optionSelected={(event) => {
-            You've made {$guessingHistory.totalNumberOfGuesses}
+        onOptionSelected(event.detail);
-            {$guessingHistory.totalNumberOfGuesses === 1 ? "guess" : "guesses"} so
+      }}
-            far.
+    />
-          </p>
+
-          <p class="score__text">
+    <ScoreCardSection
-            You've guessed correctly {Number(
+      doesUserHaveGuessingHistory={$guessingHistory.mostRecentGuessDate !==
-              $guessingHistory.correctDays.length /
+        undefined}
-                $guessingHistory.totalNumberOfGuesses
+      correctGuessCount={$guessingHistory.correctDays.length}
-            ) * 100}% of the time.
+      incorrectGuessCount={$guessingHistory.incorrectDays.length}
-          </p>
+    />
-        {:else}
-          <p class="score__text">You've not guessed yet.</p>
-        {/if}
-      </div>
-    </section>
   {/if}
 </div>
 
@@ -218,59 +196,6 @@
     max-height: 100%;
   }
 
-  .options {
-    padding: 12px;
-    display: grid;
-    place-items: center;
-    grid-template-columns: 100%;
-  }
-
-  .options__buttons-container {
-    display: grid;
-    gap: 12px;
-    grid-template-columns: 50% 50%;
-    place-content: center;
-    max-width: 500px;
-  }
-
-  .options__button {
-    border: 1px solid #000;
-    text-align: center;
-    border-radius: 4px;
-    padding: 12px;
-    font-size: 1.2rem;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .options__button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .option--sunrise {
-    border-color: var(--colour-orage);
-    background-color: var(--colour-orage);
-    color: white;
-  }
-
-  .option--sunrise:hover:not(:disabled) {
-    color: white;
-    background-color: var(--colour-orange-lightened);
-  }
-
-  .option--sunset {
-    border-color: var(--colour-grey-lightened);
-    background-color: var(--colour-grey-lightened);
-    color: white;
-  }
-
-  .option--sunset:hover:not(:disabled) {
-    color: white;
-    background-color: var(--colour-grey);
-    border-color: var(--colour-dark-grey);
-  }
-
   .notification {
   }
 
@@ -280,27 +205,4 @@
     text-align: center;
     font-size: 1.2rem;
   }
-
-  .score {
-    display: grid;
-    place-content: center;
-    text-align: center;
-    padding: 12px 0px;
-  }
-
-  .score__card {
-    display: grid;
-    place-content: center;
-    background: white;
-    text-align: center;
-    padding: 12px;
-    border-radius: 4px;
-    // gentle grey border, with soft shadow
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
-  }
-
-  .score__title {
-    font-size: 1.2rem;
-  }
 </style>

src/routes/sunrise-sunset/OptionsSection.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let isDisabled: boolean;
+  export let hasAlreadyGuessedToday: boolean;
+
+  const eventDispatcher = createEventDispatcher<{
+    optionSelected: { option: "sunrise" | "sunset" };
+  }>();
+
+  function onOptionSelected(option: "sunrise" | "sunset") {
+    eventDispatcher("optionSelected", { option });
+  }
+</script>
+
+<section class="options">
+  <div class="options__buttons-container">
+    <button
+      disabled={isDisabled}
+      class="options__button option--sunrise"
+      on:click={() => onOptionSelected("sunrise")}>Sunrise</button
+    >
+    <button
+      disabled={isDisabled}
+      class="options__button option--sunset"
+      id="button-sunset"
+      on:click={() => onOptionSelected("sunset")}>Sunset</button
+    >
+  </div>
+  {#if hasAlreadyGuessedToday}
+    <p class="options__text">
+      You've already guessed today. Come back tomorrow.
+    </p>
+  {/if}
+</section>
+
+<style type="text/postcss">
+  .options {
+    padding: 12px;
+    display: grid;
+    place-items: center;
+    grid-template-columns: 100%;
+  }
+
+  .options__buttons-container {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: 50% 50%;
+    place-content: center;
+    max-width: 500px;
+  }
+
+  .options__button {
+    border: 1px solid #000;
+    text-align: center;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .options__button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option--sunrise {
+    border-color: var(--colour-orage);
+    background-color: var(--colour-orage);
+    color: white;
+  }
+
+  .option--sunrise:hover:not(:disabled) {
+    color: white;
+    background-color: var(--colour-orange-lightened);
+  }
+
+  .option--sunset {
+    border-color: var(--colour-grey-lightened);
+    background-color: var(--colour-grey-lightened);
+    color: white;
+  }
+
+  .option--sunset:hover:not(:disabled) {
+    color: white;
+    background-color: var(--colour-grey);
+    border-color: var(--colour-dark-grey);
+  }
+</style>

src/routes/sunrise-sunset/ScoreCardSection.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  export let doesUserHaveGuessingHistory: boolean;
+  export let correctGuessCount: number;
+  export let incorrectGuessCount: number;
+
+  $: totalGuessCount = correctGuessCount + incorrectGuessCount;
+</script>
+
+<section class="score">
+  <div class="score__card">
+    <h2 class="score__title">Your Score Card</h2>
+    {#if doesUserHaveGuessingHistory}
+      <p class="score__text">
+        You've made {totalGuessCount}
+        {totalGuessCount === 1 ? "guess" : "guesses"} so far.
+      </p>
+      <p class="score__text">
+        You've guessed correctly {Number(correctGuessCount / totalGuessCount) *
+          100}% of the time.
+      </p>
+    {:else}
+      <p class="score__text">You've not guessed yet.</p>
+    {/if}
+  </div>
+</section>
+
+<style type="text/postcss">
+  .score {
+    display: flex;
+    place-content: center;
+    text-align: center;
+    padding: 12px;
+  }
+
+  .score__card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 500px;
+    place-content: center;
+    background: white;
+    text-align: center;
+    padding: 12px;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  .score__title {
+    font-size: 1.2rem;
+  }
+</style>