diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 014d64cc1fcaa117cf06c982659c267c828cfcfb..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,220 +0,0 @@
-<div class="bg-white">
- <div class="pb-16 pt-6 sm:pb-24">
- <nav aria-label="Breadcrumb" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
- <ol role="list" class="flex items-center space-x-4">
- <li>
- <div class="flex items-center">
- <a href="#" class="mr-4 text-sm font-medium text-gray-900">Women</a>
- <svg viewBox="0 0 6 20" aria-hidden="true" class="h-5 w-auto text-gray-300">
- <path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
- </svg>
- </div>
- </li>
- <li>
- <div class="flex items-center">
- <a href="#" class="mr-4 text-sm font-medium text-gray-900">Clothing</a>
- <svg viewBox="0 0 6 20" aria-hidden="true" class="h-5 w-auto text-gray-300">
- <path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
- </svg>
- </div>
- </li>
-
- <li class="text-sm">
- <a href="#" aria-current="page" class="font-medium text-gray-500 hover:text-gray-600">Basic Tee</a>
- </li>
- </ol>
- </nav>
- <div class="mx-auto mt-8 max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
- <div class="lg:grid lg:auto-rows-min lg:grid-cols-12 lg:gap-x-8">
- <div class="lg:col-span-5 lg:col-start-8">
- <div class="flex justify-between">
- <h1 class="text-xl font-medium text-gray-900">Basic Tee</h1>
- <p class="text-xl font-medium text-gray-900">$35</p>
- </div>
- <!-- Reviews -->
- <div class="mt-4">
- <h2 class="sr-only">Reviews</h2>
- <div class="flex items-center">
- <p class="text-sm text-gray-700">
- 3.9
- <span class="sr-only"> out of 5 stars</span>
- </p>
- <div class="ml-1 flex items-center">
- <!-- Active: "text-yellow-400", Inactive: "text-gray-200" -->
- <svg class="h-5 w-5 flex-shrink-0 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
- </svg>
- <svg class="h-5 w-5 flex-shrink-0 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
- </svg>
- <svg class="h-5 w-5 flex-shrink-0 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
- </svg>
- <svg class="h-5 w-5 flex-shrink-0 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
- </svg>
- <svg class="h-5 w-5 flex-shrink-0 text-gray-200" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
- </svg>
- </div>
- <div aria-hidden="true" class="ml-4 text-sm text-gray-300">·</div>
- <div class="ml-4 flex">
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">See all 512 reviews</a>
- </div>
- </div>
- </div>
- </div>
-
- <!-- Image gallery -->
- <div class="mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0">
- <h2 class="sr-only">Images</h2>
-
- <img src="/qui-est-ce.iiens.jpg" alt="Back of women's Basic Tee in black." class="rounded-lg max-h-screen">
- </div>
-
- <div class="mt-8 lg:col-span-5">
- <form>
- <!-- Color picker -->
- <div>
- <h2 class="text-sm font-medium text-gray-900">Color</h2>
-
- <fieldset aria-label="Choose a color" class="mt-2">
- <div class="flex items-center space-x-3">
- <!-- Active and Checked: "ring ring-offset-1" -->
- <label aria-label="Black" class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-gray-900 focus:outline-none">
- <input type="radio" name="color-choice" value="Black" class="sr-only">
- <span aria-hidden="true" class="h-8 w-8 rounded-full border border-black border-opacity-10 bg-gray-900"></span>
- </label>
- <!-- Active and Checked: "ring ring-offset-1" -->
- <label aria-label="Heather Grey" class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-gray-400 focus:outline-none">
- <input type="radio" name="color-choice" value="Heather Grey" class="sr-only">
- <span aria-hidden="true" class="h-8 w-8 rounded-full border border-black border-opacity-10 bg-gray-400"></span>
- </label>
- </div>
- </fieldset>
- </div>
-
- <!-- Size picker -->
- <div class="mt-8">
- <div class="flex items-center justify-between">
- <h2 class="text-sm font-medium text-gray-900">Size</h2>
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">See sizing chart</a>
- </div>
-
- <fieldset aria-label="Choose a size" class="mt-2">
- <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
- <!--
- In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
- Active: "ring-2 ring-indigo-500 ring-offset-2"
- Checked: "border-transparent bg-indigo-600 text-white hover:bg-indigo-700", Not Checked: "border-gray-200 bg-white text-gray-900 hover:bg-gray-50"
- -->
- <label class="flex cursor-pointer items-center justify-center rounded-md border px-3 py-3 text-sm font-medium uppercase focus:outline-none sm:flex-1">
- <input type="radio" name="size-choice" value="XXS" class="sr-only">
- <span>XXS</span>
- </label>
- <!--
- In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
- Active: "ring-2 ring-indigo-500 ring-offset-2"
- Checked: "border-transparent bg-indigo-600 text-white hover:bg-indigo-700", Not Checked: "border-gray-200 bg-white text-gray-900 hover:bg-gray-50"
- -->
- <label class="flex cursor-pointer items-center justify-center rounded-md border px-3 py-3 text-sm font-medium uppercase focus:outline-none sm:flex-1">
- <input type="radio" name="size-choice" value="XS" class="sr-only">
- <span>XS</span>
- </label>
- <!--
- In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
- Active: "ring-2 ring-indigo-500 ring-offset-2"
- Checked: "border-transparent bg-indigo-600 text-white hover:bg-indigo-700", Not Checked: "border-gray-200 bg-white text-gray-900 hover:bg-gray-50"
- -->
- <label class="flex cursor-pointer items-center justify-center rounded-md border px-3 py-3 text-sm font-medium uppercase focus:outline-none sm:flex-1">
- <input type="radio" name="size-choice" value="S" class="sr-only">
- <span>S</span>
- </label>
- <!--
- In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
- Active: "ring-2 ring-indigo-500 ring-offset-2"
- Checked: "border-transparent bg-indigo-600 text-white hover:bg-indigo-700", Not Checked: "border-gray-200 bg-white text-gray-900 hover:bg-gray-50"
- -->
- <label class="flex cursor-pointer items-center justify-center rounded-md border px-3 py-3 text-sm font-medium uppercase focus:outline-none sm:flex-1">
- <input type="radio" name="size-choice" value="M" class="sr-only">
- <span>M</span>
- </label>
- <!--
- In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
- Active: "ring-2 ring-indigo-500 ring-offset-2"
- Checked: "border-transparent bg-indigo-600 text-white hover:bg-indigo-700", Not Checked: "border-gray-200 bg-white text-gray-900 hover:bg-gray-50"
- -->
- <label class="flex cursor-pointer items-center justify-center rounded-md border px-3 py-3 text-sm font-medium uppercase focus:outline-none sm:flex-1">
- <input type="radio" name="size-choice" value="L" class="sr-only">
- <span>L</span>
- </label>
- <!--
- In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
- Active: "ring-2 ring-indigo-500 ring-offset-2"
- Checked: "border-transparent bg-indigo-600 text-white hover:bg-indigo-700", Not Checked: "border-gray-200 bg-white text-gray-900 hover:bg-gray-50"
- -->
- <label class="flex cursor-not-allowed items-center justify-center rounded-md border px-3 py-3 text-sm font-medium uppercase opacity-25 sm:flex-1">
- <input type="radio" name="size-choice" value="XL" disabled class="sr-only">
- <span>XL</span>
- </label>
- </div>
- </fieldset>
- </div>
-
- <button type="submit" class="mt-8 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Add to cart</button>
- </form>
-
- <!-- Product details -->
- <div class="mt-10">
- <h2 class="text-sm font-medium text-gray-900">Description</h2>
-
- <div class="prose prose-sm mt-4 text-gray-500">
- <p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>
- <p>Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.</p>
- </div>
- </div>
-
- <div class="mt-8 border-t border-gray-200 pt-8">
- <h2 class="text-sm font-medium text-gray-900">Fabric & Care</h2>
-
- <div class="prose prose-sm mt-4 text-gray-500">
- <ul role="list">
- <li>Only the best materials</li>
- <li>Ethically and locally made</li>
- <li>Pre-washed and pre-shrunk</li>
- <li>Machine wash cold with similar colors</li>
- </ul>
- </div>
- </div>
-
- <!-- Policies -->
- <section aria-labelledby="policies-heading" class="mt-10">
- <h2 id="policies-heading" class="sr-only">Our Policies</h2>
-
- <dl class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
- <div class="rounded-lg border border-gray-200 bg-gray-50 p-6 text-center">
- <dt>
- <svg class="mx-auto h-6 w-6 flex-shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64" />
- </svg>
- <span class="mt-4 text-sm font-medium text-gray-900">International delivery</span>
- </dt>
- <dd class="mt-1 text-sm text-gray-500">Get your order in 2 years</dd>
- </div>
- <div class="rounded-lg border border-gray-200 bg-gray-50 p-6 text-center">
- <dt>
- <svg class="mx-auto h-6 w-6 flex-shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
- </svg>
- <span class="mt-4 text-sm font-medium text-gray-900">Loyalty rewards</span>
- </dt>
- <dd class="mt-1 text-sm text-gray-500">Don't look at other tees</dd>
- </div>
- </dl>
- </section>
- </div>
- </div>
- </div>
- </div>
- </div>
-
\ No newline at end of file
diff --git a/src/routes/who/+page.svelte b/src/routes/who/+page.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ec453151a1f65489c99b06e9b32ceb637f7369e9
--- /dev/null
+++ b/src/routes/who/+page.svelte
@@ -0,0 +1,236 @@
+<script lang="ts">
+ import './style.css';
+ import { onMount } from 'svelte';
+ import Trainer from './Trainer.svelte';
+ import Final from './Final.svelte';
+
+ const pkmnTotal = 802;
+ const url = `https://pokeapi.co/api/v2/pokemon/?limit=${pkmnTotal}`;
+ const optionAmount = 4;
+ let pokemonData: Answer[] = [];
+ const prettyNames = {
+ 'nidoran-f': 'nidoran♀',
+ 'nidoran-m': 'nidoran♂',
+ 'mr-mime': 'mr. mime',
+ 'deoxys-normal': 'deoxys',
+ 'wormadam-plant': 'wormadam',
+ 'mime-jr': 'mime jr.',
+ 'giratina-altered': 'giratina',
+ 'shaymin-land': 'shaymin',
+ 'basculin-red-striped': 'basculin',
+ 'darmanitan-standard': 'darmanitan',
+ 'tornadus-incarnate': 'tornadus',
+ 'thundurus-incarnate': 'thundurus',
+ 'landorus-incarnate': 'landorus',
+ 'keldeo-ordinary': 'keldeo',
+ 'meloetta-aria': 'meloetta',
+ 'meowstic-male': 'meowstic',
+ 'aegislash-shield': 'aegislash',
+ 'pumpkaboo-average': 'pumpkaboo',
+ 'gourgeist-average': 'gourgeist',
+ 'oricorio-baile': 'oricorio',
+ 'lycanroc-midday': 'lycanroc',
+ 'wishiwashi-solo': 'wishiwashi',
+ 'type-null': 'type: null',
+ 'minior-red-meteor': 'minior',
+ 'mimikyu-disguised': 'mimikyu',
+ 'tapu-koko': 'tapu koko',
+ 'tapu-lele': 'tapu lele',
+ 'tapu-bulu': 'tapu bulu',
+ 'tapu-fini': 'tapu fini'
+ };
+
+ type Answer = {
+ url: string;
+ name: string;
+ index: number;
+ };
+
+ let pokemon: Answer[] = [];
+ let pkmnAmount = 0;
+ let score = 0;
+ let question = 0;
+ let questionAmount = 10;
+ let answer: Answer | null = null;
+ let selected: Answer | null = null;
+ let options: Answer[] = [];
+ let isPlaying = false;
+ let isDone = false;
+ let isChecked = false;
+
+ let image: string;
+
+ $: classic = pkmnAmount <= 151;
+ $: if (answer) {
+ image = getImage(classic, answer);
+ }
+
+ function getImage(classic: boolean, answer: Answer) {
+ let url = 'https://raw.githubusercontent.com/tiffachoo/pokesprites/master/pokemon/';
+ let imageUrl = `${url}${classic ? 'redblue' : 'sunmoon'}/`;
+ let number = answer.url.match(/\/(\d+)/)![1];
+ return `${imageUrl}${number}.png`;
+ }
+
+ onMount(() => {
+ let pokeList = localStorage.getItem('pokeList');
+
+ if (pokeList) {
+ pokemonData = JSON.parse(pokeList);
+ } else {
+ getData().then((res) => {
+ pokemonData = res.results;
+ localStorage.setItem('pokeList', JSON.stringify(res.results));
+ });
+ }
+ });
+
+ function prettifyName(name: string) {
+ return prettyNames[name as keyof typeof prettyNames] || name;
+ }
+
+ function getData() {
+ return fetch(url)
+ .then((res) => res.json())
+ .catch((err) => console.log('errrr'));
+ }
+ function startGame(val: number) {
+ question = 0;
+ score = 0;
+ isPlaying = true;
+ pokemon = [...pokemonData];
+
+ pkmnAmount = val || pkmnTotal;
+
+ getNextQuestion();
+ }
+ function getNextQuestion() {
+ question += 1;
+ resetAnswer();
+
+ if (question <= questionAmount) {
+ let removed: Answer;
+ for (let i = 1; i <= optionAmount; i++) {
+ removed = pokemon.splice(getRandomPokemon(i), 1)[0];
+ if (i === 1) {
+ answer = removed;
+ } else {
+ options.push(removed);
+ }
+ }
+
+ let pos = Math.floor(Math.random() * optionAmount);
+ options.splice(pos, 0, answer as Answer);
+ } else {
+ isPlaying = false;
+ isDone = true;
+ resetAnswer();
+ }
+ }
+ function selectAnswer(ans: Answer) {
+ if (!isChecked) {
+ selected = ans;
+ }
+ }
+ function checkAnswer() {
+ isChecked = true;
+
+ if (selected && answer && selected.name === answer.name) {
+ score += 10;
+ }
+ }
+ function getRandomPokemon(index: number) {
+ const diff = (question - 1) * 4 + index;
+ return Math.floor(Math.random() * (pkmnAmount + 1 - diff));
+ }
+ function resetAnswer() {
+ options = [];
+ selected = null;
+ answer = null;
+ isChecked = false;
+ }
+ function restartGame() {
+ isDone = false;
+ }
+</script>
+
+<div id="app">
+ <div class:poke-classic={classic} class="container">
+ <transition name="animate-section">
+ {#if !isPlaying && !isDone}
+ <Trainer on:start-game={(e) => startGame(e.detail)}/>
+ {/if}
+ </transition>
+
+ <transition name="animate-section">
+ {#if isPlaying}
+ <section class="poke-section">
+ <h1 class="poke-title">Who's that pokemon?</h1>
+ <div class="poke-question-wrapper">
+ <span class="poke-question">
+ <span class="poke-question-number">
+ {question}
+ </span>
+ <span class="poke-question-amount">
+ / {questionAmount}
+ </span>
+ </span>
+ <span class="poke-score">
+ {score}
+ <small>pts</small>
+ </span>
+ <div
+ class="poke-image"
+ class:poke-image-success={isChecked &&
+ selected &&
+ answer &&
+ selected.name === answer.name}
+ class:poke-image-error={isChecked &&
+ selected &&
+ answer &&
+ selected.name !== answer.name}
+ >
+ <img src={image} alt="No cheating" class="poke-image-img" />
+ </div>
+ <transition-group
+ tag="div"
+ name="animate-options"
+ class:poke-options-answers={isChecked}
+ class="poke-options"
+ >
+ {#each options as pokemon, index}
+ <button
+ data-index={index}
+ class:selected={selected && selected.index === index}
+ class:success={isChecked && answer && pokemon.name === answer.name}
+ class:error={isChecked &&
+ selected &&
+ answer &&
+ selected.index === index &&
+ selected.name !== answer.name}
+ class="poke-options-button"
+ on:click={() => selectAnswer({ ...pokemon, index })}
+ >{prettifyName(pokemon.name)}</button
+ >
+ {/each}
+ </transition-group>
+ <footer class="poke-buttons">
+ <button
+ disabled={isChecked || (selected && Object.keys(selected).length < 1)}
+ class="button"
+ on:click={checkAnswer}>Submit</button
+ >
+ <button disabled={!isChecked} class="button" on:click={getNextQuestion}>Next</button>
+ </footer>
+ </div>
+ </section>
+ {/if}
+ </transition>
+
+ <transition name="animate-section">
+ {#if isDone}
+ <Final {score} on:restart-game={restartGame}></Final>
+ {/if}
+ </transition>
+ </div>
+</div>
diff --git a/src/routes/who/Final.svelte b/src/routes/who/Final.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f11c7681a88b99113d75ee513df0d6f2d7b52828
--- /dev/null
+++ b/src/routes/who/Final.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+ import { createEventDispatcher } from 'svelte';
+
+ export let score: number;
+
+ const dispatch = createEventDispatcher<{ 'restart-game': void }>();
+</script>
+
+<section class="poke-final">
+ <h2>Final score</h2>
+ <span class="poke-final-score">
+ <span class="poke-final-score-number">{score}</span>
+ pts
+ </span>
+ <button class="button" on:click={() => dispatch('restart-game')}>Play again</button>
+</section>
diff --git a/src/routes/who/Trainer.svelte b/src/routes/who/Trainer.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..891d14324024ccf54411d9504a293479dc428b4b
--- /dev/null
+++ b/src/routes/who/Trainer.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+ import { createEventDispatcher } from 'svelte';
+
+ const dispatch = createEventDispatcher<{
+ "start-game": number;
+ }>();
+
+ let trainerHovered: string | null = null;
+
+ function trainerHover(val: string | MouseEvent | FocusEvent) {
+ trainerHovered = val as string;
+ }
+</script>
+
+<section class="poke-section">
+ <h2>What type of trainer are you?</h2>
+ <div class="poke-intro-trainer">
+ <div class="poke-ball"></div>
+ <img
+ class:active={trainerHovered === 'classic'}
+ class="poke-trainer-img poke-trainer-img-classic"
+ src="https://raw.githubusercontent.com/tiffachoo/pokesprites/master/trainers/red-rb.png"
+ alt="Trainer red"
+ />
+ <img
+ class:active={trainerHovered === 'master'}
+ class="poke-trainer-img poke-trainer-img-master"
+ src="https://raw.githubusercontent.com/tiffachoo/pokesprites/master/trainers/red-sm.png"
+ alt="Trainer red again"
+ />
+ </div>
+ <button
+ class="button spacer"
+ on:click={() => dispatch('start-game', 151)}
+ on:mouseover={() => trainerHover('classic')}
+ on:focus={() => trainerHover('classic')}
+ on:mouseout={trainerHover}
+ on:blur={trainerHover}
+ >
+ Classic
+ </button>
+ <button
+ class="button"
+ on:click={() => dispatch('start-game', 0)}
+ on:mouseover={() => trainerHover('master')}
+ on:focus={() => trainerHover('master')}
+ on:mouseout={trainerHover}
+ on:blur={trainerHover}
+ >
+ Master
+ </button>
+</section>
diff --git a/src/routes/who/style.css b/src/routes/who/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..a3ae6c7d2aea04a2a1fb568e86751d56f6a21868
--- /dev/null
+++ b/src/routes/who/style.css
@@ -0,0 +1,450 @@
+/* @import 'https://fonts.googleapis.com/css?family=VT323'; */
+@import 'https://fonts.googleapis.com/css?family=Londrina+Solid|Nunito:400,300';
+* {
+ box-sizing: border-box;
+}
+
+body {
+ /* background-color: #f65a52; */
+ font-family: "Londrina Solid", monospace;
+ font-size: 16px;
+ line-height: 1.875em;
+ color: #333;
+}
+
+.container {
+ width: 100%;
+ max-width: 400px;
+ position: relative;
+ margin: 50px auto;
+}
+
+h2 {
+ font-size: 1.25rem;
+ white-space: nowrap;
+}
+
+.spacer {
+ margin-bottom: 0.5rem;
+}
+
+.button {
+ padding: 0.5em 1.5em;
+ border-radius: 1rem;
+ border: solid 1px transparent;
+ font-family: "Londrina Solid", monospace;
+ font-size: 1.5rem;
+ background-color: #f32c22;
+ color: #333;
+ cursor: pointer;
+ transition: 0.35s;
+}
+.button:focus {
+ outline: none;
+ border: 1px dotted #f87f79;
+}
+.button:not([disabled]):hover {
+ background-color: #333;
+ color: #f65a52;
+}
+
+.poke-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ max-width: 500px;
+ margin: auto;
+}
+
+.poke-intro-trainer {
+ position: relative;
+ margin-bottom: 1rem;
+ height: 200px;
+ width: 200px;
+}
+.poke-intro-trainer .poke-trainer-img {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ height: 200px;
+ opacity: 0;
+ transition: 0.4s cubic-bezier(0.22, 0.75, 0.53, 0.99);
+}
+@media (max-width: 479px) {
+ .poke-intro-trainer .poke-trainer-img {
+ display: none;
+ }
+}
+.poke-intro-trainer .poke-trainer-img.active {
+ transform: translateX(-50%);
+ opacity: 1;
+}
+.poke-intro-trainer .poke-trainer-img-classic {
+ bottom: 5px;
+ height: 180px;
+ -ms-interpolation-mode: nearest-neighbor;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: pixelated;
+ transform: translateX(-80%);
+}
+.poke-intro-trainer .poke-trainer-img-master {
+ transform: translateX(-20%);
+}
+
+.poke-ball {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ height: 150px;
+ width: 150px;
+ border-radius: 50%;
+ background-color: #f32c22;
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+}
+.poke-ball::before, .poke-ball::after {
+ content: "";
+ position: absolute;
+}
+.poke-ball::before {
+ z-index: 2;
+ top: 50%;
+ left: 50%;
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ border: solid 6px #f65a52;
+ background-color: #fa9f9b;
+ transform: translate(-50%, -50%);
+}
+.poke-ball::after {
+ z-index: 1;
+ top: 50%;
+ height: 50%;
+ width: 100%;
+ border-top: solid 6px #f65a52;
+ background-color: #fa9f9b;
+}
+
+.poke-title {
+ position: absolute;
+ top: -2rem;
+}
+
+.poke-question {
+ position: absolute;
+ right: calc(100% + 0.5rem);
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+.poke-question-wrapper {
+ position: relative;
+ width: 250px;
+}
+.poke-question-number {
+ font-size: 8rem;
+ line-height: 0.4;
+ color: #fa9f9b;
+}
+
+.poke-score {
+ position: absolute;
+ top: 6rem;
+ right: calc(100% + 0.5rem);
+ padding-top: 1rem;
+ font-size: 1.25rem;
+ white-space: nowrap;
+ color: #333;
+}
+.poke-score::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 40px;
+ height: 6px;
+ background-color: #333;
+}
+
+.poke-image {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 250px;
+ height: 250px;
+ border-radius: 1rem;
+ border: solid 6px #333;
+ background-color: #fff;
+ overflow: hidden;
+}
+.poke-image::before, .poke-image::after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ border-radius: 50%;
+}
+.poke-image::before {
+ width: 100px;
+ height: 100px;
+ background-color: #c5d5ee;
+ opacity: 1;
+ transition: 0.65s ease-in-out;
+}
+.poke-image::after {
+ width: 100px;
+ height: 100px;
+ border: solid 12px #c5d5ee;
+ transform: scale(0);
+ transition: 0.4s ease-in-out;
+}
+.poke-image-img {
+ width: auto;
+ height: 150px;
+}
+.poke-image-success::before, .poke-image-error::before {
+ transform: scale(4);
+ opacity: 0.5;
+}
+.poke-image-success::after, .poke-image-error::after {
+ transform: scale(1);
+}
+.poke-image-success::before {
+ background-color: #7bd55a;
+}
+.poke-image-success::after {
+ border-color: #7bd55a;
+}
+.poke-image-error::before {
+ background-color: #ff8b62;
+}
+.poke-image-error::after {
+ border-color: #ff8b62;
+ width: 10px;
+ border-radius: 1rem;
+ transform: rotate(45deg);
+}
+
+.poke-options {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ z-index: 3;
+ top: -30px;
+ padding: 0 20px;
+ margin: 0 auto;
+ width: 170px;
+ border-radius: 1rem;
+ background-color: #333;
+}
+.poke-options:not(.poke-options-answers) .poke-options-button:not(.selected):hover {
+ background-color: #a9c1e6;
+ transform: translateY(-3px);
+}
+.poke-options:not(.poke-options-answers) .poke-options-button:not(.selected):active::before {
+ transform: translate(-50%, -50%) scale(1);
+}
+.poke-options.poke-options-answers .poke-options-button {
+ cursor: default;
+}
+.poke-options.poke-options-answers .poke-options-button:not(.error):not(.success) {
+ color: #94acbd;
+}
+.poke-options-button {
+ position: relative;
+ width: 100%;
+ padding: 0.5em;
+ min-width: 200px;
+ max-height: 48px;
+ border: solid 6px #333;
+ border-radius: 1rem;
+ background-color: #c5d5ee;
+ font-family: "Londrina Solid", monospace;
+ font-size: 1.125rem;
+ transition: 0.45s;
+ cursor: pointer;
+ overflow: hidden;
+}
+.poke-options-button:focus {
+ outline: none;
+}
+.poke-options-button::before {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ left: 50%;
+ top: 50%;
+ height: 200px;
+ width: 200px;
+ border-radius: 50%;
+ background-color: #94acbd;
+ transform: translate(-50%, -50%) scale(0);
+ transition: 0.2s ease-in-out;
+}
+.poke-options-button:not(:last-child) {
+ margin-bottom: 3px;
+}
+.poke-options-button.selected {
+ background-color: #94acbd;
+}
+.poke-options-button.error {
+ background-color: #ff8b62;
+}
+.poke-options-button.success {
+ background-color: #7bd55a;
+}
+
+.poke-buttons {
+ text-align: center;
+}
+@media (min-width: 480px) {
+ .poke-buttons {
+ position: absolute;
+ top: 20px;
+ left: 100%;
+ }
+ .poke-buttons .button {
+ padding-left: calc(1em + 10px);
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ transform: translateX(-10px);
+ }
+}
+.poke-buttons .button {
+ padding: 1em;
+ width: 110px;
+ height: 100px;
+ color: #fff;
+}
+.poke-buttons .button[disabled] {
+ color: #fa9f9b;
+ opacity: 0.7;
+ cursor: default;
+}
+.poke-buttons .button:not([disabled]):hover {
+ transform: translateX(0);
+}
+.poke-buttons .button:not(:last-child) {
+ margin-bottom: 6px;
+}
+
+.poke-final {
+ text-align: center;
+}
+.poke-final-score {
+ display: block;
+ position: relative;
+ margin-bottom: 1rem;
+}
+.poke-final-score::before {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ top: 50%;
+ left: 50%;
+ height: 100px;
+ width: 100px;
+ border-radius: 50%;
+ border: solid 12px #f32c22;
+ transform: translate(-50%, -50%);
+ opacity: 0.3;
+ -webkit-animation: grow 2s infinite ease-in-out;
+ animation: grow 2s infinite ease-in-out;
+}
+.poke-final-score-number {
+ font-size: 8rem;
+ line-height: 0.4;
+ color: #fa9f9b;
+}
+
+.poke-classic .poke-image-img {
+ -ms-interpolation-mode: nearest-neighbor;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: pixelated;
+}
+
+.animate-section-enter-active, .animate-section-leave-active {
+ transition: 0.4s ease-in-out;
+}
+.animate-section-enter, .animate-section-leave-to {
+ opacity: 0;
+}
+.animate-section-enter .poke-final-score-number {
+ transform: translateY(-30px);
+}
+.animate-section-leave-active {
+ transform: translateX(-30%);
+}
+.animate-section-enter-active {
+ transition-delay: 0.1s;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.animate-options-enter-active {
+ transition: 0.4s ease-in-out;
+}
+.animate-options-enter-active:nth-child(4) {
+ transition-delay: 0s;
+}
+.animate-options-enter-active:nth-child(5) {
+ transition-delay: 0.2s;
+}
+.animate-options-enter-active:nth-child(6) {
+ transition-delay: 0.4s;
+}
+.animate-options-enter-active:nth-child(7) {
+ transition-delay: 0.6s;
+}
+.animate-options-enter-active:nth-child(8) {
+ transition-delay: 0.8s;
+}
+.animate-options-enter {
+ transform: rotateX(-45deg);
+ transform-origin: top center;
+ opacity: 0;
+}
+.animate-options-leave-active {
+ position: absolute;
+ z-index: -1;
+ transition: 0.8s ease-in-out;
+}
+.animate-options-leave-active[data-index="0"] {
+ top: 0;
+}
+.animate-options-leave-active[data-index="1"] {
+ top: 51px;
+}
+.animate-options-leave-active[data-index="2"] {
+ top: 102px;
+}
+.animate-options-leave-active[data-index="3"] {
+ top: 153px;
+}
+.animate-options-leave-to {
+ opacity: 0;
+}
+
+@-webkit-keyframes grow {
+ 0%, 100% {
+ transform: translate(-50%, -50%) scale(1);
+ }
+ 50% {
+ transform: translate(-50%, -50%) scale(0.6);
+ }
+}
+
+@keyframes grow {
+ 0%, 100% {
+ transform: translate(-50%, -50%) scale(1);
+ }
+ 50% {
+ transform: translate(-50%, -50%) scale(0.6);
+ }
+}
\ No newline at end of file