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 { Crown } from 'lucide-svelte';
3 import DeveloperBadge from './DeveloperBadge.svelte';
4
5 export let chat: Bingo.Card.FullChat;
6
7 const time = new Date(chat.time).toLocaleTimeString('en-US', {
8 hour: 'numeric',
9 minute: 'numeric',
10 hour12: true
11 });
12</script>
13
14<div class="group relative w-full p-1 px-3 hover:bg-[rgba(0,0,0,0.2)]">
15 <DeveloperBadge id={chat.user.user_id} />
16 {#if chat.user.host}
17 <Crown class="group inline size-4 text-yellow-600" />
18 <span></span>
19 {/if}
20 <img src={chat.user.user.avatar_url} class="inline h-6 rounded-full" alt="" />
21 <span class="font-bold">{chat.user.user.username}: </span>
22 {chat.text}
23 <div
24 class="invisible absolute bottom-0 right-0 select-none p-1 font-rounded text-xs text-zinc-700 group-hover:visible"
25 >
26 {time}
27 </div>
28</div>