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