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 { ArrowRightLeft, Crown, SquareArrowOutUpRight } from 'lucide-svelte';
3 import { fly } from 'svelte/transition';
4 import DeveloperBadge from './DeveloperBadge.svelte';
5
6 export let movable: boolean;
7 const move = async (ev: MouseEvent) => {
8 // Prevent from opening user page
9 ev.preventDefault();
10
11 const currentTeam = gameuser.team_name;
12 const nextTeam = currentTeam == 'RED' ? 'BLUE' : 'RED';
13 const data = new FormData();
14 data.set('user_id', gameuser.id);
15 data.set('team', nextTeam);
16 await fetch(`?/switch_team`, {
17 body: data,
18 method: 'POST'
19 });
20 };
21
22 export let gameuser: Bingo.Card.FullUser;
23</script>
24
25<a
26 transition:fly={{ duration: 250, y: 0, x: -100 }}
27 class="group z-0 mt-1 flex h-8 w-full justify-between gap-2 rounded p-1 transition hover:bg-zinc-800"
28 target="_blank"
29 rel="noopener noreferrer"
30 href="https://osu.ppy.sh/u/{gameuser.user_id}"
31>
32 <DeveloperBadge id={gameuser.user_id} />
33 <img src={gameuser.user.avatar_url} class="size-6 rounded-full" alt="" />
34 <span class="col-start-2 col-end-3 mr-1 flex h-6 w-full items-center text-left">
35 <div class="flex w-full items-center overflow-hidden whitespace-nowrap">
36 {gameuser.user.username}
37 <SquareArrowOutUpRight
38 class="ml-1 text-transparent transition group-hover:text-zinc-400"
39 size={12}
40 />
41 </div>
42 {#if gameuser.host}
43 <span class="p-1">
44 <Crown class="size-4 text-yellow-600" />
45 </span>
46 {/if}
47 </span>
48 <span
49 class="col-start-3 col-end-4 flex h-6 items-center font-rounded text-xs italic text-zinc-600"
50 >
51 {#if gameuser.user.global_rank}
52 <span class="p-1">
53 #{gameuser.user.global_rank.toLocaleString()}
54 </span>
55 {/if}
56 {#if movable}
57 <button
58 on:click={move}
59 class="z-10 flex h-6 w-0 items-center justify-center rounded transition-all hover:bg-zinc-900 hover:text-blue-400 group-hover:w-6"
60 >
61 <ArrowRightLeft class="size-4" />
62 </button>
63 {/if}
64 </span>
65</a>