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