Skip to content
Snippets Groups Projects
Verified Commit 7fcb7371 authored by Louis's avatar Louis :fire:
Browse files

Remove race route

parent 9341be9b
No related branches found
No related tags found
No related merge requests found
Pipeline #506 failed with stage
in 22 seconds
<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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment