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">
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>

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