Newer
Older
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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>