Spaces:
Runtime error
Runtime error
File size: 3,074 Bytes
012b226 e0d45d2 012b226 a7fe81f e0d45d2 a7fe81f 8ebf51a 012b226 e0d45d2 012b226 dd24c08 012b226 a7fe81f 012b226 e0d45d2 012b226 8ebf51a e0d45d2 3d2cb9e e0d45d2 3d2cb9e e0d45d2 3d2cb9e 90beb82 e0d45d2 3d2cb9e 90beb82 e0d45d2 8ebf51a a7fe81f 8ebf51a 012b226 759b9dd e0d45d2 759b9dd 7e89314 759b9dd 012b226 8ebf51a 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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<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, canvasSize } from '$lib/store';
import type { RoomResponse } from '$lib/types';
import { MAX_CAPACITY, 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 });
// detect browser is mobile
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
) {
$canvasSize = {
width: 512 * 8,
height: 512 * 8
};
}
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();
const emptyRoom = rooms.find((room) => room.users_count < MAX_CAPACITY) || null;
let roomAvailable = false;
if (roomidParam) {
const room = rooms.find((room) => room.room_id === roomidParam) || null;
roomAvailable = room ? room.users_count < MAX_CAPACITY : false;
if (room && roomAvailable) {
$selectedRoomID = room.room_id;
const state = { roomid: room.room_id };
const queryString = '?' + new URLSearchParams(state).toString();
window.history.replaceState(null, '', queryString);
window.parent.postMessage({ queryString: queryString }, '*');
}
}
if (emptyRoom && !roomAvailable) {
selectedRoomID.set(emptyRoom.room_id);
const state = { roomid: emptyRoom.room_id };
const queryString = '?' + new URLSearchParams(state).toString();
window.history.replaceState(null, '', queryString);
window.parent.postMessage({ queryString: queryString }, '*');
}
loading = false;
return { rooms };
}
const initialPresence = {
cursor: null,
frame: {
x: $canvasSize.width / 2 - FRAME_SIZE / 2,
y: $canvasSize.height / 2 - FRAME_SIZE / 2
},
status: Status.dragging,
currentPrompt: ''
};
</script>
<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
{#if loading}
<div class="inset-0 fixed bg-white animate-pulse" />
{:else}
<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}
|