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 { browser } from '$app/environment';
3 import { Eye, EyeOff } from 'lucide-svelte';
4
5 export let linkCode: string | null;
6 export let hidden = false;
7
8 let origin = 'bingourl';
9 if (browser) {
10 origin = window.location.origin;
11 }
12
13 const copy = () => {
14 const url = `${origin}/${linkCode}`;
15
16 if (browser) {
17 navigator.clipboard.writeText(url);
18 }
19 };
20</script>
21
22<div class="flex h-full w-full flex-col justify-center rounded-lg bg-zinc-900/50 p-2">
23 <div class="w-full text-center font-rounded font-bold uppercase">Invite Link</div>
24 <div class="flex h-8 rounded-lg border-[1px] border-zinc-700 bg-zinc-900">
25 <button
26 class="flex size-8 cursor-pointer items-center justify-center rounded-l-lg bg-zinc-800/50"
27 on:click={() => (hidden = !hidden)}
28 >
29 {#if hidden}
30 <EyeOff class="size-5 text-zinc-700" />
31 {:else}
32 <Eye class="size-5 text-zinc-700" />
33 {/if}
34 </button>
35 <button on:click={copy} class="peer w-full cursor-copy">
36 <input
37 type={hidden ? 'password' : 'text'}
38 disabled
39 value="{origin}/{linkCode}"
40 class="pointer-events-none w-full bg-transparent text-center font-rounded text-xs"
41 />
42 </button>
43 </div>
44</div>