From e1769f5c6ae8ae19fa144937dde76a1d51e96a2f Mon Sep 17 00:00:00 2001
From: Thomas <thomas.wilson@oxwash.com>
Date: Tue, 24 Jan 2023 21:12:19 +0000
Subject: [PATCH] sunrise-sunset: create the sunrise-sunset photo guessing page

---
 src/routes/sunrise-sunset/+page.svelte | 145 ++++++++++++++-----------
 src/routes/sunrise-sunset/+page.ts     |  17 +++
 2 files changed, 98 insertions(+), 64 deletions(-)
 create mode 100644 src/routes/sunrise-sunset/+page.ts

diff --git a/src/routes/sunrise-sunset/+page.svelte b/src/routes/sunrise-sunset/+page.svelte
index 51f691d..7a76213 100644
--- a/src/routes/sunrise-sunset/+page.svelte
+++ b/src/routes/sunrise-sunset/+page.svelte
@@ -1,86 +1,103 @@
 <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,
-		incorrect: 0,
-		total: 0
-	});
+  const guessHistory = writable({
+    correct: 0,
+    incorrect: 0,
+    total: 0
+  });
 
-	function onOptionSelected(option: 'sunrise' | 'sunset') {
-		$guessHistory.total += 1;
-		if (option === $pictureStore.daytime) {
-			$guessHistory.correct += 1;
-		} else {
-			$guessHistory.incorrect += 1;
-		}
-		console.log(option);
-	}
+  function onOptionSelected(option: "sunrise" | "sunset") {
+    $guessHistory.total += 1;
+    if (option === picture.sunrise_or_sunset) {
+      $guessHistory.correct += 1;
+    } else {
+      $guessHistory.incorrect += 1;
+    }
+    console.log(option);
+  }
 </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>
-	</div>
+  <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
+    >
+  </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
-		</p>
-	{:else}
-		<p class="score__text">You've not guessed yet.</p>
-	{/if}
+  {#if $guessHistory.total > 0}
+    <p class="score__text">
+      You've guessed correctly {Number(
+        $guessHistory.correct / $guessHistory.total
+      )}% of the time
+    </p>
+  {:else}
+    <p class="score__text">You've not guessed yet.</p>
+  {/if}
 </section>
 
 <style lang="scss" type="text/postcss">
-	.options {
-		width: 100%;
-		display: flex;
-		justify-content: center;
-	}
+  .header {
+    display: grid;
+    place-content: center;
+    padding: 12px 0px;
+  }
 
-	.options__buttons-container {
-		display: grid;
-		grid-template-columns: 50% 50%;
-		gap: 12px;
-	}
+  .picture {
+    display: grid;
+    place-content: center;
+    padding: 12px 0px;
+  }
 
-	.options__button {
-		background-color: #fff;
-		border: 1px solid #000;
-		border-radius: 4px;
-		padding: 12px;
-		font-size: 1.2rem;
-		cursor: pointer;
-	}
+  .picture img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 
-	.options__button:hover {
-		background-color: #000;
-		color: #fff;
-	}
+  .options {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .options__buttons-container {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    gap: 12px;
+  }
+
+  .options__button {
+    background-color: #fff;
+    border: 1px solid #000;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 1.2rem;
+    cursor: pointer;
+  }
+
+  .options__button:hover {
+    background-color: #000;
+    color: #fff;
+  }
 </style>
diff --git a/src/routes/sunrise-sunset/+page.ts b/src/routes/sunrise-sunset/+page.ts
new file mode 100644
index 0000000..ea644c4
--- /dev/null
+++ b/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');
+};