File size: 2,037 Bytes
012b226
 
 
 
 
 
 
e0d45d2
012b226
e0d45d2
 
 
012b226
e0d45d2
012b226
 
dd24c08
012b226
 
 
 
 
 
 
e0d45d2
012b226
e0d45d2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
012b226
 
e0d45d2
 
 
012b226
 
 
 
 
 
 
 
 
 
 
 
e0d45d2
 
 
 
012b226
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script lang="ts">
	import { onMount } from 'svelte';
	import { createClient } from '@liveblocks/client';
	import type { Client } from '@liveblocks/client';
	import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
	import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
	import App from '$lib/App.svelte';
	import About from '$lib/About.svelte';
	import { PUBLIC_API_BASE } from '$env/static/public';
	import { selectedRoomID, toggleAbout } from '$lib/store';
	import type { RoomResponse } from '$lib/types';
	import { MAX_CAPACITY } from '$lib/constants';

	let loading = true;
	let client: Client;

	$: roomId = $selectedRoomID;

	onMount(() => {
		// document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
		client = createClient({
			authEndpoint: PUBLIC_API_BASE + '/auth'
		});

		updateRooms();
	});
	async function updateRooms() {
		loading = true;
		const roomidParam = new URLSearchParams(window.location.search).get('roomid');
		const res = await fetch(PUBLIC_API_BASE + '/rooms');
		const rooms: RoomResponse[] = await res.json();

		if (roomidParam) {
			const room = rooms.find((room) => room.room_id === roomidParam);
			if (room) {
				selectedRoomID.set(roomidParam);
			}
		} else {
			const room = rooms.find((room) => room.users_count < MAX_CAPACITY) || null;
			selectedRoomID.set(room ? room.room_id : null);
		}
		loading = false;
		return { rooms };
	}
</script>

<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />

{#if !loading}
	<LiveblocksProvider {client}>
		{#if roomId}
			<RoomProvider id={roomId}>
				<App />
			</RoomProvider>
		{:else}
			<div class="flex flex-col items-center justify-center h-full">
				<h1 class="text-2xl font-bold">No room selected</h1>
				<p class="text-gray-500">Please select a room in the URL</p>
			</div>
		{/if}
	</LiveblocksProvider>
{:else}
	<div class="flex flex-col items-center justify-center h-full">
		<h1 class="text-2xl font-bold">Loading...</h1>
	</div>
{/if}