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 { fade } from 'svelte/transition';
3 import LargeGrid from './grids/LargeGrid.svelte';
4 // import MediumGrid from './grids/MediumGrid.svelte';
5 // import MobileGrid from './grids/MobileGrid.svelte';
6
7 export let state: number;
8 export let host: boolean = false;
9</script>
10
11<div transition:fade class="ml-4 mt-4 grid">
12 <LargeGrid {state} {host}>
13 <slot name="player-list" slot="player-list"></slot>
14 <slot name="square-sidebar" slot="square-sidebar"></slot>
15 <slot name="board" slot="board"></slot>
16 <slot name="event-list" slot="event-list"></slot>
17 <slot name="chat" slot="chat"></slot>
18 <slot name="host-settings" slot="host-settings"></slot>
19 </LargeGrid>
20</div>
21
22<!-- -->
23<!-- Half Screen Grid -->
24<!-- <div class="hidden md:grid xl:hidden"> -->
25<!-- <MediumGrid {state} {host}> -->
26<!-- <slot name="player-list" slot="player-list"></slot> -->
27<!-- <slot name="square-sidebar" slot="square-sidebar"></slot> -->
28<!-- <slot name="board" slot="board"></slot> -->
29<!-- <slot name="event-list" slot="event-list"></slot> -->
30<!-- <slot name="chat" slot="chat"></slot> -->
31<!-- <slot name="host-settings" slot="host-settings"></slot> -->
32<!-- </MediumGrid> -->
33<!-- </div> -->
34<!-- -->
35<!-- Mobile Grid -->
36<!-- <div class="grid md:hidden"> -->
37<!-- <MobileGrid {state} {host}> -->
38<!-- <slot name="player-list" slot="player-list"></slot> -->
39<!-- <slot name="square-sidebar" slot="square-sidebar"></slot> -->
40<!-- <slot name="board" slot="board"></slot> -->
41<!-- <slot name="event-list" slot="event-list"></slot> -->
42<!-- <slot name="chat" slot="chat"></slot> -->
43<!-- <slot name="host-settings" slot="host-settings"></slot> -->
44<!-- </MobileGrid> -->
45<!-- </div> -->
46<!-- -->