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