<script> export const prerender = true; 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>