sunrise-sunset: start to componentise the design
This commit is contained in:
Thomas
parent
7f83444d0f
commit
210fa2f4a6
3 changed files with 162 additions and 118 deletions
|
|
@ -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">
|
||||
<div class="score__card">
|
||||
<h2 class="score__title">Your Score</h2>
|
||||
{#if $guessingHistory.mostRecentGuessDate !== undefined}
|
||||
<p class="score__text">
|
||||
You've made {$guessingHistory.totalNumberOfGuesses}
|
||||
{$guessingHistory.totalNumberOfGuesses === 1 ? "guess" : "guesses"} so
|
||||
far.
|
||||
</p>
|
||||
<p class="score__text">
|
||||
You've guessed correctly {Number(
|
||||
$guessingHistory.correctDays.length /
|
||||
$guessingHistory.totalNumberOfGuesses
|
||||
) * 100}% of the time.
|
||||
</p>
|
||||
{:else}
|
||||
<p class="score__text">You've not guessed yet.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
<OptionsSection
|
||||
isDisabled={$guessingHistory.mostRecentGuessDate === todaysDateString}
|
||||
hasAlreadyGuessedToday={$guessingHistory.mostRecentGuessDate ===
|
||||
todaysDateString}
|
||||
on:optionSelected={(event) => {
|
||||
onOptionSelected(event.detail);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ScoreCardSection
|
||||
doesUserHaveGuessingHistory={$guessingHistory.mostRecentGuessDate !==
|
||||
undefined}
|
||||
correctGuessCount={$guessingHistory.correctDays.length}
|
||||
incorrectGuessCount={$guessingHistory.incorrectDays.length}
|
||||
/>
|
||||
{/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>
|
||||
|
|
|
|||
90
src/routes/sunrise-sunset/OptionsSection.svelte
Normal file
90
src/routes/sunrise-sunset/OptionsSection.svelte
Normal file
|
|
@ -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>
|
||||
52
src/routes/sunrise-sunset/ScoreCardSection.svelte
Normal file
52
src/routes/sunrise-sunset/ScoreCardSection.svelte
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue