diff --git a/src/routes/race/+page.svelte b/src/routes/race/+page.svelte deleted file mode 100644 index da9aa3c93938a4cfb947b292344c79570a4d9ef0..0000000000000000000000000000000000000000 --- a/src/routes/race/+page.svelte +++ /dev/null @@ -1,69 +0,0 @@ -<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