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 { Clock } from 'lucide-svelte';
3
4 export let time: Date | undefined;
5 export let clock = true;
6
7 const soonMS = 60 * 1000;
8
9 let interval: Timer;
10 let text: string;
11 let soon = false;
12
13 $: time && startTimer(time);
14 const startTimer = (time: Date) => {
15 if (typeof time == 'string') {
16 time = new Date(time);
17 }
18
19 const updateText = () => {
20 const difference = new Date(time.valueOf() - new Date().valueOf());
21 const mins = difference.getMinutes();
22 const secs = difference.getSeconds();
23
24 text = `${mins}:${secs < 10 ? '0' + secs : secs}`;
25 soon = time.valueOf() - Date.now() < soonMS;
26 };
27
28 updateText();
29 clearInterval(interval);
30 interval = setInterval(updateText, 1000);
31 };
32</script>
33
34{#if time}
35 <span data-soon={soon} class="flex items-center gap-x-1 data-[soon=true]:animate-warning">
36 {#if text}
37 {text}
38 {#if clock}
39 <Clock class="size-4" />
40 {/if}
41 {/if}
42 </span>
43{/if}