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 import type { FormEventHandler } from 'svelte/elements';
4
5 export let submitDelay = 300;
6 export let limit = 999;
7 export let allowBlank = false;
8 export let value: string;
9
10 const dispatch = createEventDispatcher();
11
12 let timer: Timer;
13 const input: FormEventHandler<HTMLInputElement> = (ev) => {
14 const value = ev.currentTarget.value;
15 if (value.length > limit) {
16 ev.currentTarget.value = ev.currentTarget.value.slice(0, limit);
17 return;
18 }
19
20 if (!allowBlank && value == '') return;
21
22 clearTimeout(timer);
23 timer = setTimeout(() => dispatch('change', value), submitDelay);
24 };
25</script>
26
27<input
28 type="text"
29 on:input={input}
30 {value}
31 class="text-s h-10 w-full rounded-lg border-[1px] border-zinc-700 bg-zinc-900 px-2 font-rounded outline-none transition-all focus:border-2 focus:border-zinc-600"
32/>