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 type { GameUserEvent } from '$lib/emitter';
3 import { ArrowLeft, ArrowRight, ArrowRightLeft } from 'lucide-svelte';
4
5 export let event: GameUserEvent;
6</script>
7
8<!-- {JSON.stringify(event)} -->
9{#if event.data.type == 'join'}
10 <div class="flex h-8 w-full px-4">
11 <span class="text-green-700">
12 <ArrowRight />
13 </span>
14 <a href="https://osu.ppy.sh/u/{event.data.user.user_id}" class="flex gap-1 pl-2">
15 <img class="size-6 rounded-full" src={event.data.user.user.avatar_url} alt="" />
16 {event.data.user.user.username}
17 </a>
18 <span class="pl-1">has joined</span>
19 <span
20 data-team={event.data.user.team_name.toLowerCase()}
21 class="pl-1 font-bold data-[team=blue]:text-blue-600 data-[team=red]:text-amber-700"
22 >
23 {event.data.user.team_name.toLowerCase()} team
24 </span>
25 </div>
26{:else if event.data.type == 'switch'}
27 <div class="flex h-8 w-full px-4">
28 <span class="text-blue-700">
29 <ArrowRightLeft />
30 </span>
31 <a href="https://osu.ppy.sh/u/{event.data.user.user_id}" class="flex gap-1 pl-2">
32 <img class="size-6 rounded-full" src={event.data.user.user.avatar_url} alt="" />
33 {event.data.user.user.username}
34 </a>
35 <span class="pl-1">switched to</span>
36 <span
37 data-team={event.data.user.team_name.toLowerCase()}
38 class="pl-1 font-bold data-[team=blue]:text-blue-600 data-[team=red]:text-amber-700"
39 >
40 {event.data.user.team_name.toLowerCase()} team
41 </span>
42 </div>
43{:else if event.data.type == 'leave'}
44 <div class="flex h-8 w-full px-4">
45 <span class="text-red-700">
46 <ArrowLeft />
47 </span>
48 <a href="https://osu.ppy.sh/u/{event.data.user.user_id}" class="flex gap-1 pl-2">
49 <img class="size-6 rounded-full" src={event.data.user.user.avatar_url} alt="" />
50 {event.data.user.user.username}
51 </a>
52 <span class="pl-1">left the game</span>
53 </div>
54{/if}