sunrise-sunset: create the sunrise-sunset photo guessing page

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

@@ -1,21 +1,11 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
+  import type { PageData } from "./$types.js";
+  import Navbar from "$lib/components/Navbar.svelte";
+  import { writable } from "svelte/store";
 
-	const pictures: {
-		imageUrl: string;
-		daytime: 'sunrise' | 'sunset';
-	}[] = [
-		{
-			imageUrl: '/example',
-			daytime: 'sunrise'
-		},
-		{
-			imageUrl: '/examplele',
-			daytime: 'sunset'
-		}
-	];
+  export let data: PageData;
 
-	const pictureStore = writable(pictures[0]);
+  $: picture = data.body.photo;
 
   const guessHistory = writable({
     correct: 0,
@@ -23,9 +13,9 @@
     total: 0
   });
 
-	function onOptionSelected(option: 'sunrise' | 'sunset') {
+  function onOptionSelected(option: "sunrise" | "sunset") {
     $guessHistory.total += 1;
-		if (option === $pictureStore.daytime) {
+    if (option === picture.sunrise_or_sunset) {
       $guessHistory.correct += 1;
     } else {
       $guessHistory.incorrect += 1;
@@ -34,23 +24,33 @@
   }
 </script>
 
-<h1>Sunrise, Sunset?</h1>
+<Navbar />
+
+<section class="header">
+  <h1>Sunrise, Sunset?</h1>
+</section>
 
 <section class="picture">
-	<img src={$pictureStore.imageUrl} alt="Sunrise or Sunset?" />
+  <img src={picture.small_url} alt="Sunrise or Sunset?" />
 </section>
 
 <section class="options">
   <div class="options__buttons-container">
-		<button class="options__button" on:click={() => onOptionSelected('sunrise')}>Sunrise</button>
-		<button class="options__button" on:click={() => onOptionSelected('sunset')}>Sunset</button>
+    <button class="options__button" on:click={() => onOptionSelected("sunrise")}
+      >Sunrise</button
+    >
+    <button class="options__button" on:click={() => onOptionSelected("sunset")}
+      >Sunset</button
+    >
   </div>
 </section>
 
 <section class="score">
   {#if $guessHistory.total > 0}
     <p class="score__text">
-			You've guessed correctly {Number($guessHistory.correct / $guessHistory.total)}% of the time
+      You've guessed correctly {Number(
+        $guessHistory.correct / $guessHistory.total
+      )}% of the time
     </p>
   {:else}
     <p class="score__text">You've not guessed yet.</p>
@@ -58,6 +58,23 @@
 </section>
 
 <style lang="scss" type="text/postcss">
+  .header {
+    display: grid;
+    place-content: center;
+    padding: 12px 0px;
+  }
+
+  .picture {
+    display: grid;
+    place-content: center;
+    padding: 12px 0px;
+  }
+
+  .picture img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
   .options {
     width: 100%;
     display: flex;

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

@@ -0,0 +1,17 @@
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types.js';
+import { type DailyPhoto } from '../api/sunrise-sunset-photo.json/SunriseSunsetController.js';
+
+export const load: PageLoad = async ({ fetch }) => {
+    const response = await fetch('/api/sunrise-sunset-photo.json');
+
+    if (response.ok) {
+        const json: DailyPhoto = await response.json();
+        return {
+            status: 200,
+            body: json as DailyPhoto,
+        };
+    }
+
+    throw error(500, 'Failed to fetch sunrise-sunset photo');
+};