wilson/thomaswilson-sveltekit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Thomas 2023-01-24 21:12:19 +00:00
parent 2e0fc8de97
commit e1769f5c6a
2 changed files with 98 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
src/routes/sunrise-sunset/+page.svelte
View file

@ -1,86 +1,103 @@
<script lang="ts"> <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: { export let data: PageData;
imageUrl: string;
daytime: 'sunrise' | 'sunset';
}[] = [
{
imageUrl: '/example',
daytime: 'sunrise'
},
{
imageUrl: '/examplele',
daytime: 'sunset'
}
];
const pictureStore = writable(pictures[0]); $: picture = data.body.photo;
const guessHistory = writable({ const guessHistory = writable({
correct: 0, correct: 0,
incorrect: 0, incorrect: 0,
total: 0 total: 0
}); });
function onOptionSelected(option: 'sunrise' | 'sunset') { function onOptionSelected(option: "sunrise" | "sunset") {
$guessHistory.total += 1; $guessHistory.total += 1;
if (option === $pictureStore.daytime) { if (option === picture.sunrise_or_sunset) {
$guessHistory.correct += 1; $guessHistory.correct += 1;
} else { } else {
$guessHistory.incorrect += 1; $guessHistory.incorrect += 1;
} }
console.log(option); console.log(option);
} }
</script> </script>
<h1>Sunrise, Sunset?</h1> <Navbar />
<section class="header">
<h1>Sunrise, Sunset?</h1>
</section>
<section class="picture"> <section class="picture">
<img src={$pictureStore.imageUrl} alt="Sunrise or Sunset?" /> <img src={picture.small_url} alt="Sunrise or Sunset?" />
</section> </section>
<section class="options"> <section class="options">
<div class="options__buttons-container"> <div class="options__buttons-container">
<button class="options__button" on:click={() => onOptionSelected('sunrise')}>Sunrise</button> <button class="options__button" on:click={() => onOptionSelected("sunrise")}
<button class="options__button" on:click={() => onOptionSelected('sunset')}>Sunset</button> >Sunrise</button
</div> >
<button class="options__button" on:click={() => onOptionSelected("sunset")}
>Sunset</button
>
</div>
</section> </section>
<section class="score"> <section class="score">
{#if $guessHistory.total > 0} {#if $guessHistory.total > 0}
<p class="score__text"> <p class="score__text">
You've guessed correctly {Number($guessHistory.correct / $guessHistory.total)}% of the time You've guessed correctly {Number(
</p> $guessHistory.correct / $guessHistory.total
{:else} )}% of the time
<p class="score__text">You've not guessed yet.</p> </p>
{/if} {:else}
<p class="score__text">You've not guessed yet.</p>
{/if}
</section> </section>
<style lang="scss" type="text/postcss"> <style lang="scss" type="text/postcss">
.options { .header {
width: 100%; display: grid;
display: flex; place-content: center;
justify-content: center; padding: 12px 0px;
} }
.options__buttons-container { .picture {
display: grid; display: grid;
grid-template-columns: 50% 50%; place-content: center;
gap: 12px; padding: 12px 0px;
} }
.options__button { .picture img {
background-color: #fff; max-width: 100%;
border: 1px solid #000; max-height: 100%;
border-radius: 4px; }
padding: 12px;
font-size: 1.2rem;
cursor: pointer;
}
.options__button:hover { .options {
background-color: #000; width: 100%;
color: #fff; 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> </style>

17
src/routes/sunrise-sunset/+page.ts Normal file
View file

@ -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');
};