clxxiii.dev
Two teams try and fill in any horizontal, vertical, or diagonal line on a bingo board by playing maps on osu!
osu.bingo
osu
1<script lang="ts">
2 import { createEventDispatcher } from 'svelte';
3
4 export let toggle: boolean = false;
5
6 export let onText = 'Yes';
7 export let onColor = '#16a34a';
8
9 export let offText = 'No';
10 export let offColor = '#b13e24';
11
12 export let cooldownMS = 300;
13
14 let checkbox: HTMLInputElement;
15 const dispatch = createEventDispatcher();
16
17 let cooled = false;
18 const cooldown = (ev: MouseEvent) => {
19 if (cooled) {
20 ev.preventDefault();
21 return;
22 }
23
24 cooled = true;
25 dispatch('update', checkbox.checked);
26 setTimeout(() => (cooled = false), cooldownMS);
27 };
28</script>
29
30<div
31 class="relative grid h-10 w-full grid-cols-2 grid-rows-1 rounded-lg bg-zinc-900"
32 style="--color: {toggle ? onColor : offColor}"
33>
34 <input
35 on:click={cooldown}
36 class="peer absolute z-20 h-full w-full cursor-pointer appearance-none"
37 type="checkbox"
38 bind:this={checkbox}
39 bind:checked={toggle}
40 />
41 <div
42 class="z-10 flex h-full select-none items-center justify-center font-rounded font-bold uppercase transition peer-checked:text-zinc-800"
43 >
44 {offText}
45 </div>
46 <div
47 class="z-10 flex h-full select-none items-center justify-center font-rounded font-bold uppercase text-zinc-800 transition peer-checked:text-purple-300"
48 >
49 {onText}
50 </div>
51 <div
52 class="absolute left-[0%] top-0 h-10 w-1/2 rounded-lg bg-[var(--color)] transition-all peer-checked:left-[50%]"
53 ></div>
54</div>