Spaces:
Runtime error
Runtime error
File size: 2,216 Bytes
142f91b 70b8e47 423b87b 560b99e e0d45d2 6946674 e0d45d2 8ebf51a 66ed450 e0d45d2 70b8e47 dd24c08 bc15a99 70b8e47 bc15a99 70b8e47 6946674 70b8e47 e0d45d2 70b8e47 8ebf51a e0d45d2 8ebf51a 142f91b 8ebf51a e0d45d2 423b87b bc15a99 8ebf51a bc15a99 423b87b 35946a9 |
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 68 69 70 71 72 73 74 75 76 77 78 |
<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, CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
import { Status } from '$lib/types';
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 };
}
const initialPresence = {
cursor: null,
frame: {
x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
},
status: Status.dragging,
currentPrompt: ''
};
</script>
<About
classList={$toggleAbout || loading ? 'flex' : 'hidden'}
on:click={() => ($toggleAbout = false)}
{loading}
/>
{#if !loading}
<LiveblocksProvider {client}>
{#if roomId}
<RoomProvider id={roomId} {initialPresence}>
<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>
{/if}
|