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>
2 import { fly } from 'svelte/transition';
3
4 const login = () => {
5 window.open(
6 '/auth/login/osu?from=/login_request',
7 'Log in to osu!',
8 'width=600,height=800,top=200,location=no,toolbar=no'
9 );
10 };
11</script>
12
13<div
14 transition:fly={{ delay: 500, y: 50, duration: 300 }}
15 class="h-full w-full border-2 border-black/50 bg-zinc-800/80 p-6 sm:max-h-[220px] sm:w-[400px] sm:rounded-xl sm:shadow-xl"
16>
17 <h1 class="font-rounded text-2xl font-bold">Welcome back!</h1>
18 <hr class="my-1 rounded border-2 border-zinc-900" />
19 <p class="pb-4">It's been a bit since you last played, so we can't fetch your scores.</p>
20 <p class="pb-4">If you log in again, it should all work fine!</p>
21 <button
22 class="w-full rounded-full border-pink-200 bg-pink-800 p-1 px-10 font-rounded font-bold transition hover:bg-pink-900 active:bg-pink-950"
23 on:click={login}>Log in</button
24 >
25</div>