Snails

src/lib/components/Button.svelte

+<button
+	on:click
+	type="button"
+	class="rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+	<slot />
+</button>

src/lib/components/Input.svelte

+<script>
+	export let value
+	export let name
+</script>
+
+
+<div>
+	<input
+		on:change
+		on:blur
+		on:focus
+		bind:value
+		type="text"
+		name="{name}"
+		class="block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+		placeholder="Benjamin Froggit"
+	>
+</div>
\ No newline at end of file

src/lib/components/Sneditor.svelte

+<script>
+	import { createEventDispatcher } from 'svelte'
+	import Input from "./Input.svelte";
+	import Button from "./Button.svelte";
+	const dispatch = createEventDispatcher()
+
+	let snails = [{ name: '' }]
+
+	function addSnail() {
+		snails = [...snails, { name: '' }]
+	}
+	function onSave() {
+		dispatch('save', { snails })
+	}
+</script>
+
+<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+	<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+	<div class="fixed inset-0 z-10 overflow-y-auto">
+		<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+			<div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+
+				<h2 class="mb-4 text-base font-semibold leading-6 text-gray-900">SNAILS</h2>
+
+				<p class="mb-4">Snails are your friends, and help you make decisions</p>
+
+				<div class="flex flex-col gap-y-2">
+					{#each snails as snail}
+						<div class="item">
+							<Input type="text" bind:value={snail.name} />
+						</div>
+					{/each}
+				</div>
+
+				<div class="mt-4 flex justify-between">
+					<Button on:click={addSnail}>Another One</Button>
+					<Button on:click={onSave}>Save</Button>
+				</div>
+
+			</div>
+		</div>
+	</div>
+</div>

src/routes/+layout.svelte

+<script>
+	import "../app.css";
+</script>
+
+<slot />
\ No newline at end of file

src/routes/+page.svelte

+<script>
+	import log from '$lib/assets/SNAIL.png'
+
+	import tune from '$lib/assets/snail.mp3'
+	import Sneditor from '$lib/components/Sneditor.svelte'
+
+	let aud
+	let isModalOpen = true
+
+	let updateSnails = ({ detail }) => {
+		const snails = detail.snails
+		console.log(snails)
+		snailList = snails.map(({ name }) => ({ title: name, color: Math.floor(Math.random() * 360), progress: 0 }))
+		isModalOpen = false
+		aud.play()
+		if (interval) {
+			clearInterval(interval)
+		}
+		interval = setInterval(chuggachuggachuggachuggachoochoo, 1500)
+	}
+
+	let snailList = []
+
+	function chuggachuggachuggachuggachoochoo() {
+		snailList = snailList.map(snail => ({
+			...snail,
+			progress: Math.min(100, snail.progress + Math.random() * 10)
+		}))
+	}
+
+	$: {
+		let found = snailList.find(snail => snail.progress >= 100)
+		if (found) {
+			alert(`${found.title} has won!`)
+			clearInterval(interval)
+		}
+	}
+
+	let interval = null
+</script>
+
+<div class="title-list">
+
+</div>
+
+{#if isModalOpen}
+	<Sneditor on:save={updateSnails} />
+{/if}
+
+{#if !isModalOpen}
+<div class="snail-list">
+	{#each snailList as snail}
+		<div class="snail-track">
+			<img
+					class="snailboi"
+					alt="Snail representing {snail.title}"
+					style="filter: hue-rotate({snail.color}deg); margin-left: {snail.progress}%;"
+					title="{snail.title}"
+					src="{log}"
+			/>
+		</div>
+	{/each}
+</div>
+{/if}
+
+<audio src="{tune}" loop bind:this={aud} />
+
+
+<style>
+	.snailboi {
+		width: 250px;
+		height: auto;
+		transition: margin 1.5s linear;
+	}
+
+	.snail-list {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.snail-track {
+		width: 100%;
+	}
+</style>
\ No newline at end of file

src/routes/race/+page.svelte

+<script>
+	import log from '$lib/assets/SNAIL.png'
+
+	// let snails = null;
+
+	let snails = [
+		{ color: Math.floor(Math.random() * 360), title: 'foo', progress: 0 },
+		{ color: Math.floor(Math.random() * 360), title: 'bar', progress: 0 },
+		{ color: Math.floor(Math.random() * 360), title: 'baz', progress: 0 },
+		{ color: Math.floor(Math.random() * 360), title: 'flfofo', progress: 0 },
+	]
+
+	function randoSnail() {
+		snails = snails.map(snail => ({ ...snail, color: Math.floor(Math.random() * 360) }))
+	}
+
+	function chuggachuggachuggachuggachoochoo() {
+		snails = snails.map(snail => ({
+			...snail,
+			progress: Math.min(100, snail.progress + Math.random() * 10)
+		}))
+	}
+
+	let interval = setInterval(chuggachuggachuggachuggachoochoo, 1000)
+
+</script>
+
+<h1>SNAIL</h1>
+
+<div>
+
+</div>
+
+<div class="snail-list">
+	{#each snails as snail}
+		<div class="snail-track">
+			<img
+					class="snailboi"
+					alt="Snail representing {snail.title}"
+					style="filter: hue-rotate({snail.color}deg); margin-left: {snail.progress}%;"
+					title="{snail.title}"
+					src="{log}"
+			/>
+		</div>
+	{/each}
+</div>
+
+<button on:click="{randoSnail}">Rando Snail</button>
+
+<style>
+	.snailboi {
+		width: 250px;
+		height: auto;
+		transition: margin 1s linear;
+	}
+
+	.snail-list {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.snail-track {
+		width: 100%;
+		padding-left: 10%;
+	}
+</style>
\ No newline at end of file

svelte.config.js

+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+const dev = process.argv.includes('dev');
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// default options are shown. On some platforms
+			// these options are set automatically — see below
+			pages: 'public',
+			assets: 'public',
+			precompress: true,
+			strict: true
+		}),
+		paths: {
+			base: dev ? '' : '/snails',
+		}
+	},
+	preprocess: vitePreprocess()
+};
+
+export default config;

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

tests/test.js

+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+});

vite.config.js

+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	preprocess: vitePreprocess()
+});