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 { square } from '$lib/stores';
3 import { AlignJustify } from 'lucide-svelte';
4 import { fade } from 'svelte/transition';
5
6 export let state: number;
7 export let host: boolean = false;
8 let board_height: number;
9</script>
10
11<div class="large-grid" style="--bh: {board_height - 100}px">
12 {#if $square != null && state != 0}
13 <div
14 transition:fade={{ duration: 150 }}
15 class="z-10 col-start-1 col-end-2 row-start-1 row-end-5 h-full w-full rounded-xl"
16 >
17 <slot name="square-sidebar"></slot>
18 </div>
19 {/if}
20 <div class="col-start-1 col-end-2 row-start-1 row-end-5 h-full w-full rounded-xl shadow-xl">
21 <slot name="player-list"></slot>
22 </div>
23 <div
24 bind:clientHeight={board_height}
25 class="col-start-2 col-end-3 row-start-1 row-end-5 aspect-square h-full w-full rounded-xl bg-zinc-800/50 p-2"
26 >
27 {#if host && state == 0}
28 <slot name="host-settings"></slot>
29 {:else}
30 <slot name="board"></slot>
31 {/if}
32 </div>
33 <!-- <div class="col-start-3 col-end-4 row-start-1 row-end-3 h-full w-full rounded-xl">
34 <slot name="event-list"></slot>
35 </div> -->
36 <div class="col-start-3 col-end-4 row-start-1 row-end-5 h-full w-full rounded-xl">
37 <div
38 class="event-grid mb-4 grid h-[calc(100vh-300px-4rem-1rem-1rem)] overflow-hidden rounded-xl bg-zinc-800"
39 >
40 <div class="flex pl-2 pt-2 font-rounded text-xl">
41 <AlignJustify />
42 <span class="pl-2"> Events </span>
43 </div>
44 <div class="overflow-y-hidden">
45 <slot name="event-list"></slot>
46 </div>
47 </div>
48 <div class="h-[300px]">
49 <slot name="chat"></slot>
50 </div>
51 </div>
52</div>
53
54<style>
55 .large-grid {
56 /* screen height - heading - padding */
57 height: calc(100vh - 3rem - 2rem);
58 gap: 1rem;
59 max-width: calc(100vw - 2rem);
60
61 display: grid;
62 grid-template-rows: 3fr 3fr 3fr;
63 grid-template-columns: 3fr var(--bh) 3fr;
64 }
65 .event-grid {
66 grid-template-rows: 2rem 1fr;
67 }
68</style>