Spaces:
Runtime error
Runtime error
move about and prerender
Browse files- frontend/src/lib/About.svelte +59 -0
- frontend/src/lib/App.svelte +1 -58
- frontend/src/lib/Menu.svelte +2 -1
- frontend/src/lib/PaintFrame.svelte +5 -3
- frontend/src/lib/store.ts +2 -1
- frontend/src/routes/+/+layout.svelte +0 -5
- frontend/src/routes/+/+page.svelte +31 -16
- frontend/src/routes/+/+page.ts +1 -24
- frontend/src/routes/+page.svelte +31 -16
- frontend/src/routes/+page.ts +1 -24
frontend/src/lib/About.svelte
ADDED
@@ -0,0 +1,59 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
|
3 |
+
export let classList = '';
|
4 |
+
</script>
|
5 |
+
|
6 |
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
7 |
+
<div
|
8 |
+
on:click
|
9 |
+
class="fixed {classList} w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll"
|
10 |
+
>
|
11 |
+
<div class="max-w-md">
|
12 |
+
<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
|
13 |
+
<p>
|
14 |
+
Hugging Face face GPU Spaces <a
|
15 |
+
href="https://huggingface.co/docs/hub/spaces-gpus"
|
16 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
17 |
+
>https://huggingface.co/docs/hub/spaces-gpus</a
|
18 |
+
>
|
19 |
+
Diffusers
|
20 |
+
<a
|
21 |
+
href="https://huggingface.co/docs/diffusers/index"
|
22 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
23 |
+
>https://huggingface.co/docs/diffusers/index</a
|
24 |
+
>
|
25 |
+
</p>
|
26 |
+
<p>
|
27 |
+
Thanks to <a
|
28 |
+
href="https://twitter.com/lkwq007"
|
29 |
+
target="_blank"
|
30 |
+
rel="noopener noreferrer"
|
31 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
32 |
+
>
|
33 |
+
Lnyan</a
|
34 |
+
>
|
35 |
+
for the original outpaiting technique implemented on
|
36 |
+
<a
|
37 |
+
href="https://github.com/lkwq007/stablediffusion-infinity"
|
38 |
+
target="_blank"
|
39 |
+
rel="noopener noreferrer"
|
40 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
41 |
+
>Stable Diffusion Infinity
|
42 |
+
</a>.
|
43 |
+
</p>
|
44 |
+
<p class="mb-6">
|
45 |
+
Runwayml Inpaiting Stable Diffusion
|
46 |
+
<a
|
47 |
+
href="https://github.com/runwayml/stable-diffusion"
|
48 |
+
target="_blank"
|
49 |
+
rel="noopener noreferrer"
|
50 |
+
>
|
51 |
+
https://github.com/runwayml/stable-diffusion</a
|
52 |
+
>
|
53 |
+
</p>
|
54 |
+
<p class="text-base flex items-center">
|
55 |
+
Multiplayer API by
|
56 |
+
<LiveBlocks classList="ml-2" />
|
57 |
+
</p>
|
58 |
+
</div>
|
59 |
+
</div>
|
frontend/src/lib/App.svelte
CHANGED
@@ -14,7 +14,6 @@
|
|
14 |
import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
|
15 |
import { base64ToBlob, uploadImage } from '$lib/utils';
|
16 |
import { nanoid } from 'nanoid';
|
17 |
-
import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
|
18 |
import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
|
19 |
|
20 |
/**
|
@@ -169,68 +168,12 @@
|
|
169 |
}
|
170 |
};
|
171 |
}
|
172 |
-
let showAbout = false;
|
173 |
</script>
|
174 |
|
175 |
<!-- Show the current user's cursor location -->
|
176 |
<div class="text touch-none pointer-events-none">
|
177 |
{$loadingState}
|
178 |
</div>
|
179 |
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
180 |
-
<div
|
181 |
-
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll
|
182 |
-
{showAbout ? 'flex' : 'hidden'}"
|
183 |
-
on:click={() => (showAbout = false)}
|
184 |
-
>
|
185 |
-
<div class="max-w-md">
|
186 |
-
<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
|
187 |
-
<p>
|
188 |
-
Hugging Face face GPU Spaces <a
|
189 |
-
href="https://huggingface.co/docs/hub/spaces-gpus"
|
190 |
-
class="text-blue-400 hover:text-blue-600 underline"
|
191 |
-
>https://huggingface.co/docs/hub/spaces-gpus</a
|
192 |
-
>
|
193 |
-
Diffusers
|
194 |
-
<a
|
195 |
-
href="https://huggingface.co/docs/diffusers/index"
|
196 |
-
class="text-blue-400 hover:text-blue-600 underline"
|
197 |
-
>https://huggingface.co/docs/diffusers/index</a
|
198 |
-
>
|
199 |
-
</p>
|
200 |
-
<p>
|
201 |
-
Thanks to <a
|
202 |
-
href="https://twitter.com/lkwq007"
|
203 |
-
target="_blank"
|
204 |
-
rel="noopener noreferrer"
|
205 |
-
class="text-blue-400 hover:text-blue-600 underline"
|
206 |
-
>
|
207 |
-
Lnyan</a
|
208 |
-
>
|
209 |
-
for the original outpaiting technique implemented on
|
210 |
-
<a
|
211 |
-
href="https://github.com/lkwq007/stablediffusion-infinity"
|
212 |
-
target="_blank"
|
213 |
-
rel="noopener noreferrer"
|
214 |
-
class="text-blue-400 hover:text-blue-600 underline"
|
215 |
-
>Stable Diffusion Infinity
|
216 |
-
</a>.
|
217 |
-
</p>
|
218 |
-
<p class="mb-6">
|
219 |
-
Runwayml Inpaiting Stable Diffusion
|
220 |
-
<a
|
221 |
-
href="https://github.com/runwayml/stable-diffusion"
|
222 |
-
target="_blank"
|
223 |
-
rel="noopener noreferrer"
|
224 |
-
>
|
225 |
-
https://github.com/runwayml/stable-diffusion</a
|
226 |
-
>
|
227 |
-
</p>
|
228 |
-
<p class="text-base flex items-center">
|
229 |
-
Multiplayer API by
|
230 |
-
<LiveBlocks classList="ml-2" />
|
231 |
-
</p>
|
232 |
-
</div>
|
233 |
-
</div>
|
234 |
{#if showModal}
|
235 |
<PromptModal on:paint={onPaint} on:close={onClose} initPrompt={$myPresence?.currentPrompt} />
|
236 |
{/if}
|
@@ -266,7 +209,7 @@
|
|
266 |
<ShareWithCommunity />
|
267 |
</div> -->
|
268 |
<div class="fixed bottom-32 left-0 right-0 z-10 my-2">
|
269 |
-
<Menu on:prompt={onPrompt} {isLoading}
|
270 |
</div>
|
271 |
|
272 |
<style lang="postcss" scoped>
|
|
|
14 |
import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
|
15 |
import { base64ToBlob, uploadImage } from '$lib/utils';
|
16 |
import { nanoid } from 'nanoid';
|
|
|
17 |
import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
|
18 |
|
19 |
/**
|
|
|
168 |
}
|
169 |
};
|
170 |
}
|
|
|
171 |
</script>
|
172 |
|
173 |
<!-- Show the current user's cursor location -->
|
174 |
<div class="text touch-none pointer-events-none">
|
175 |
{$loadingState}
|
176 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
177 |
{#if showModal}
|
178 |
<PromptModal on:paint={onPaint} on:close={onClose} initPrompt={$myPresence?.currentPrompt} />
|
179 |
{/if}
|
|
|
209 |
<ShareWithCommunity />
|
210 |
</div> -->
|
211 |
<div class="fixed bottom-32 left-0 right-0 z-10 my-2">
|
212 |
+
<Menu on:prompt={onPrompt} {isLoading} />
|
213 |
</div>
|
214 |
|
215 |
<style lang="postcss" scoped>
|
frontend/src/lib/Menu.svelte
CHANGED
@@ -3,6 +3,7 @@
|
|
3 |
import PPButton from '$lib/Buttons/PPButton.svelte';
|
4 |
import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
|
5 |
import AboutButton from '$lib/Buttons/AboutButton.svelte';
|
|
|
6 |
|
7 |
const dispatch = createEventDispatcher();
|
8 |
|
@@ -22,7 +23,7 @@
|
|
22 |
</script>
|
23 |
|
24 |
<div class="flex items-center justify-between px-12">
|
25 |
-
<AboutButton on:click={() =>
|
26 |
|
27 |
<button
|
28 |
on:click={() => dispatch('prompt')}
|
|
|
3 |
import PPButton from '$lib/Buttons/PPButton.svelte';
|
4 |
import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
|
5 |
import AboutButton from '$lib/Buttons/AboutButton.svelte';
|
6 |
+
import { toggleAbout } from '$lib/store';
|
7 |
|
8 |
const dispatch = createEventDispatcher();
|
9 |
|
|
|
23 |
</script>
|
24 |
|
25 |
<div class="flex items-center justify-between px-12">
|
26 |
+
<AboutButton on:click={() => ($toggleAbout = !$toggleAbout)} />
|
27 |
|
28 |
<button
|
29 |
on:click={() => dispatch('prompt')}
|
frontend/src/lib/PaintFrame.svelte
CHANGED
@@ -235,8 +235,10 @@
|
|
235 |
class="absolute bottom-0 origin-bottom-left"
|
236 |
style={`transform: scale(${Math.max(2.5 - transform.k, 1)});`}
|
237 |
>
|
|
|
238 |
<div
|
239 |
-
class="pl-3 pr-5 py-1 bg-blue-700/90 text-white text-lg xl:text-2xl rounded-tr-xl font-medium tracking-wide"
|
|
|
240 |
>
|
241 |
{#if $loadingState !== ''}
|
242 |
<div class="">
|
@@ -249,7 +251,7 @@
|
|
249 |
<p>{$loadingState}...</p>
|
250 |
</div>
|
251 |
{:else}
|
252 |
-
🤚 Drag me
|
253 |
{/if}
|
254 |
</div>
|
255 |
</div>
|
@@ -301,7 +303,7 @@
|
|
301 |
<div
|
302 |
bind:this={frameElement}
|
303 |
class="absolute top-0 left-0 ring-8 hand
|
304 |
-
{dragEnabled ? 'block' : 'hidden'}"
|
305 |
style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
|
306 |
/>
|
307 |
</div>
|
|
|
235 |
class="absolute bottom-0 origin-bottom-left"
|
236 |
style={`transform: scale(${Math.max(2.5 - transform.k, 1)});`}
|
237 |
>
|
238 |
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
239 |
<div
|
240 |
+
class="pl-3 pr-5 py-1 bg-blue-700/90 text-white text-lg xl:text-2xl rounded-tr-xl font-medium tracking-wide cursor-pointer"
|
241 |
+
on:click={() => toggleDrag()}
|
242 |
>
|
243 |
{#if $loadingState !== ''}
|
244 |
<div class="">
|
|
|
251 |
<p>{$loadingState}...</p>
|
252 |
</div>
|
253 |
{:else}
|
254 |
+
<span class="select-none"> {dragEnabled ? '🤚 Drag me' : '🤚 Enable Drag'}</span>
|
255 |
{/if}
|
256 |
</div>
|
257 |
</div>
|
|
|
303 |
<div
|
304 |
bind:this={frameElement}
|
305 |
class="absolute top-0 left-0 ring-8 hand
|
306 |
+
{dragEnabled ? 'block cursor-move' : 'hidden cursor-pointer'}"
|
307 |
style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
|
308 |
/>
|
309 |
</div>
|
frontend/src/lib/store.ts
CHANGED
@@ -5,4 +5,5 @@ export const loadingState = writable<string>('');
|
|
5 |
export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
|
6 |
export const canvasEl = writable<HTMLCanvasElement>();
|
7 |
export const maskEl = writable<HTMLCanvasElement>();
|
8 |
-
export const selectedRoomID = writable<string | null>();
|
|
|
|
5 |
export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
|
6 |
export const canvasEl = writable<HTMLCanvasElement>();
|
7 |
export const maskEl = writable<HTMLCanvasElement>();
|
8 |
+
export const selectedRoomID = writable<string | null>();
|
9 |
+
export const toggleAbout = writable<boolean>(false);
|
frontend/src/routes/+/+layout.svelte
DELETED
@@ -1,5 +0,0 @@
|
|
1 |
-
<script>
|
2 |
-
import '../../app.css';
|
3 |
-
</script>
|
4 |
-
|
5 |
-
<slot />
|
|
|
|
|
|
|
|
|
|
|
|
frontend/src/routes/+/+page.svelte
CHANGED
@@ -1,13 +1,3 @@
|
|
1 |
-
<script context="module" lang="ts">
|
2 |
-
export const prerender = true;
|
3 |
-
</script>
|
4 |
-
|
5 |
-
<!--
|
6 |
-
The main code for this component is in src/PixelArtTogether.svelte
|
7 |
-
This file contains the Liveblocks providers, based on the
|
8 |
-
liveblocks-react library
|
9 |
-
https://liveblocks.io/docs/api-reference/liveblocks-react#LiveblocksProvider
|
10 |
-
-->
|
11 |
<script lang="ts">
|
12 |
import { onMount } from 'svelte';
|
13 |
import { createClient } from '@liveblocks/client';
|
@@ -15,12 +5,13 @@
|
|
15 |
import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
|
16 |
import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
|
17 |
import App from '$lib/App.svelte';
|
18 |
-
import
|
19 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
20 |
-
import { selectedRoomID } from '$lib/store';
|
21 |
-
|
|
|
22 |
|
23 |
-
let
|
24 |
let client: Client;
|
25 |
|
26 |
$: roomId = $selectedRoomID;
|
@@ -31,11 +22,31 @@
|
|
31 |
authEndpoint: PUBLIC_API_BASE + '/auth'
|
32 |
});
|
33 |
|
34 |
-
|
35 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
36 |
</script>
|
37 |
|
38 |
-
{
|
|
|
|
|
39 |
<LiveblocksProvider {client}>
|
40 |
{#if roomId}
|
41 |
<RoomProvider id={roomId}>
|
@@ -48,4 +59,8 @@
|
|
48 |
</div>
|
49 |
{/if}
|
50 |
</LiveblocksProvider>
|
|
|
|
|
|
|
|
|
51 |
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
<script lang="ts">
|
2 |
import { onMount } from 'svelte';
|
3 |
import { createClient } from '@liveblocks/client';
|
|
|
5 |
import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
|
6 |
import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
|
7 |
import App from '$lib/App.svelte';
|
8 |
+
import About from '$lib/About.svelte';
|
9 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
10 |
+
import { selectedRoomID, toggleAbout } from '$lib/store';
|
11 |
+
import type { RoomResponse } from '$lib/types';
|
12 |
+
import { MAX_CAPACITY } from '$lib/constants';
|
13 |
|
14 |
+
let loading = true;
|
15 |
let client: Client;
|
16 |
|
17 |
$: roomId = $selectedRoomID;
|
|
|
22 |
authEndpoint: PUBLIC_API_BASE + '/auth'
|
23 |
});
|
24 |
|
25 |
+
updateRooms();
|
26 |
});
|
27 |
+
async function updateRooms() {
|
28 |
+
loading = true;
|
29 |
+
const roomidParam = new URLSearchParams(window.location.search).get('roomid');
|
30 |
+
const res = await fetch(PUBLIC_API_BASE + '/rooms');
|
31 |
+
const rooms: RoomResponse[] = await res.json();
|
32 |
+
|
33 |
+
if (roomidParam) {
|
34 |
+
const room = rooms.find((room) => room.room_id === roomidParam);
|
35 |
+
if (room) {
|
36 |
+
selectedRoomID.set(roomidParam);
|
37 |
+
}
|
38 |
+
} else {
|
39 |
+
const room = rooms.find((room) => room.users_count < MAX_CAPACITY) || null;
|
40 |
+
selectedRoomID.set(room ? room.room_id : null);
|
41 |
+
}
|
42 |
+
loading = false;
|
43 |
+
return { rooms };
|
44 |
+
}
|
45 |
</script>
|
46 |
|
47 |
+
<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
|
48 |
+
|
49 |
+
{#if !loading}
|
50 |
<LiveblocksProvider {client}>
|
51 |
{#if roomId}
|
52 |
<RoomProvider id={roomId}>
|
|
|
59 |
</div>
|
60 |
{/if}
|
61 |
</LiveblocksProvider>
|
62 |
+
{:else}
|
63 |
+
<div class="flex flex-col items-center justify-center h-full">
|
64 |
+
<h1 class="text-2xl font-bold">Loading...</h1>
|
65 |
+
</div>
|
66 |
{/if}
|
frontend/src/routes/+/+page.ts
CHANGED
@@ -1,24 +1 @@
|
|
1 |
-
|
2 |
-
import type { RoomResponse } from '$lib/types';
|
3 |
-
import { selectedRoomID } from '$lib/store';
|
4 |
-
import { MAX_CAPACITY } from '$lib/constants';
|
5 |
-
import type { PageLoad } from './$types';
|
6 |
-
export const prerender = true
|
7 |
-
export const ssr = false
|
8 |
-
|
9 |
-
export const load: PageLoad = async ({ url }) => {
|
10 |
-
const roomidParam = url.searchParams.get('roomid');
|
11 |
-
const res = await fetch(PUBLIC_API_BASE + '/rooms');
|
12 |
-
const rooms: RoomResponse[] = await res.json();
|
13 |
-
|
14 |
-
if (roomidParam) {
|
15 |
-
const room = rooms.find(room => room.room_id === roomidParam);
|
16 |
-
if (room) {
|
17 |
-
selectedRoomID.set(roomidParam);
|
18 |
-
}
|
19 |
-
} else {
|
20 |
-
const room = rooms.find(room => room.users_count < MAX_CAPACITY) || null;
|
21 |
-
selectedRoomID.set(room ? room.room_id : null);
|
22 |
-
}
|
23 |
-
return { rooms };
|
24 |
-
}
|
|
|
1 |
+
export const prerender = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
frontend/src/routes/+page.svelte
CHANGED
@@ -1,13 +1,3 @@
|
|
1 |
-
<script context="module" lang="ts">
|
2 |
-
export const prerender = true;
|
3 |
-
</script>
|
4 |
-
|
5 |
-
<!--
|
6 |
-
The main code for this component is in src/PixelArtTogether.svelte
|
7 |
-
This file contains the Liveblocks providers, based on the
|
8 |
-
liveblocks-react library
|
9 |
-
https://liveblocks.io/docs/api-reference/liveblocks-react#LiveblocksProvider
|
10 |
-
-->
|
11 |
<script lang="ts">
|
12 |
import { onMount } from 'svelte';
|
13 |
import { createClient } from '@liveblocks/client';
|
@@ -15,12 +5,13 @@
|
|
15 |
import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
|
16 |
import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
|
17 |
import App from '$lib/App.svelte';
|
18 |
-
import
|
19 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
20 |
-
import { selectedRoomID } from '$lib/store';
|
21 |
-
|
|
|
22 |
|
23 |
-
let
|
24 |
let client: Client;
|
25 |
|
26 |
$: roomId = $selectedRoomID;
|
@@ -31,11 +22,31 @@
|
|
31 |
authEndpoint: PUBLIC_API_BASE + '/auth'
|
32 |
});
|
33 |
|
34 |
-
|
35 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
36 |
</script>
|
37 |
|
38 |
-
{
|
|
|
|
|
39 |
<LiveblocksProvider {client}>
|
40 |
{#if roomId}
|
41 |
<RoomProvider id={roomId}>
|
@@ -48,4 +59,8 @@
|
|
48 |
</div>
|
49 |
{/if}
|
50 |
</LiveblocksProvider>
|
|
|
|
|
|
|
|
|
51 |
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
<script lang="ts">
|
2 |
import { onMount } from 'svelte';
|
3 |
import { createClient } from '@liveblocks/client';
|
|
|
5 |
import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
|
6 |
import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
|
7 |
import App from '$lib/App.svelte';
|
8 |
+
import About from '$lib/About.svelte';
|
9 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
10 |
+
import { selectedRoomID, toggleAbout } from '$lib/store';
|
11 |
+
import type { RoomResponse } from '$lib/types';
|
12 |
+
import { MAX_CAPACITY } from '$lib/constants';
|
13 |
|
14 |
+
let loading = true;
|
15 |
let client: Client;
|
16 |
|
17 |
$: roomId = $selectedRoomID;
|
|
|
22 |
authEndpoint: PUBLIC_API_BASE + '/auth'
|
23 |
});
|
24 |
|
25 |
+
updateRooms();
|
26 |
});
|
27 |
+
async function updateRooms() {
|
28 |
+
loading = true;
|
29 |
+
const roomidParam = new URLSearchParams(window.location.search).get('roomid');
|
30 |
+
const res = await fetch(PUBLIC_API_BASE + '/rooms');
|
31 |
+
const rooms: RoomResponse[] = await res.json();
|
32 |
+
|
33 |
+
if (roomidParam) {
|
34 |
+
const room = rooms.find((room) => room.room_id === roomidParam);
|
35 |
+
if (room) {
|
36 |
+
selectedRoomID.set(roomidParam);
|
37 |
+
}
|
38 |
+
} else {
|
39 |
+
const room = rooms.find((room) => room.users_count < MAX_CAPACITY) || null;
|
40 |
+
selectedRoomID.set(room ? room.room_id : null);
|
41 |
+
}
|
42 |
+
loading = false;
|
43 |
+
return { rooms };
|
44 |
+
}
|
45 |
</script>
|
46 |
|
47 |
+
<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
|
48 |
+
|
49 |
+
{#if !loading}
|
50 |
<LiveblocksProvider {client}>
|
51 |
{#if roomId}
|
52 |
<RoomProvider id={roomId}>
|
|
|
59 |
</div>
|
60 |
{/if}
|
61 |
</LiveblocksProvider>
|
62 |
+
{:else}
|
63 |
+
<div class="flex flex-col items-center justify-center h-full">
|
64 |
+
<h1 class="text-2xl font-bold">Loading...</h1>
|
65 |
+
</div>
|
66 |
{/if}
|
frontend/src/routes/+page.ts
CHANGED
@@ -1,24 +1 @@
|
|
1 |
-
|
2 |
-
import type { RoomResponse } from '$lib/types';
|
3 |
-
import { selectedRoomID } from '$lib/store';
|
4 |
-
import { MAX_CAPACITY } from '$lib/constants';
|
5 |
-
import type { PageLoad } from './$types';
|
6 |
-
export const prerender = true
|
7 |
-
export const ssr = false
|
8 |
-
|
9 |
-
export const load: PageLoad = async ({ url }) => {
|
10 |
-
const roomidParam = url.searchParams.get('roomid');
|
11 |
-
const res = await fetch(PUBLIC_API_BASE + '/rooms');
|
12 |
-
const rooms: RoomResponse[] = await res.json();
|
13 |
-
|
14 |
-
if (roomidParam) {
|
15 |
-
const room = rooms.find(room => room.room_id === roomidParam);
|
16 |
-
if (room) {
|
17 |
-
selectedRoomID.set(roomidParam);
|
18 |
-
}
|
19 |
-
} else {
|
20 |
-
const room = rooms.find(room => room.users_count < MAX_CAPACITY) || null;
|
21 |
-
selectedRoomID.set(room ? room.room_id : null);
|
22 |
-
}
|
23 |
-
return { rooms };
|
24 |
-
}
|
|
|
1 |
+
export const prerender = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|