switch rooms api

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -3,17 +3,18 @@
 	import Pin from '$lib/Icons/Pin.svelte';
 	import People from '$lib/Icons/People.svelte';
 	import { onMount } from 'svelte';
-
+	import { PUBLIC_API_BASE } from '$env/static/public';
+	import type { RoomResponse } from '$lib/types';
+	import { selectedRoomID } from '$lib/store';
+	import { MAX_CAPACITY } from '$lib/constants';
 	export let isLoading = false;
 	let boxEl: HTMLElement;
 
-	let rooms = Array(20)
-		.fill(0)
-		.map((_, i) => ({ label: `room ${i}`, total: ~~Math.random() * 20, capacity: 20 }));
+	let rooms: RoomResponse[] = [];
 
-	let selectedRoomID = 0;
 	let collapsed = true;
-	$: selectedRoom = rooms[selectedRoomID];
+	$: selectedRoom = rooms.find((room) => room.id === $selectedRoomID);
+	$: loadingRooms = rooms.length > 0;
 
 	function clickHandler(event: Event) {
 		if (!boxEl.contains(event.target as Node)) {
@@ -21,71 +22,94 @@
 		}
 	}
 	onMount(() => {
+		refreshRooms();
 		window.addEventListener('click', clickHandler, true);
+		const interval = setInterval(refreshRooms, 3000);
 		return () => {
 			window.removeEventListener('click', clickHandler, true);
+			clearInterval(interval);
 		};
 	});
+
+	async function refreshRooms() {
+		rooms = await fetch(PUBLIC_API_BASE + '/rooms').then((res) => res.json());
+	}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch] 
+{#if loadingRooms}
+	<div
+		class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch] 
 	{isLoading ? 'opacity-50' : ''}
 	{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
-	title="Choose a different room"
-	bind:this={boxEl}
->
-	{#if !collapsed}
+		title="Choose a different room"
+		bind:this={boxEl}
+	>
+		{#if !collapsed}
+			<div class="absolute left-0 right-0 bottom-full rounded-t-xl bg-violet-100 px-1">
+				<ul class="relative overflow-scroll max-h-72">
+					<li class="grid-row gap-2 pb-3 sticky top-0 bg-violet-100 py-2">
+						<Room />
+						<span> room </span>
+						<People />
+						<span> players </span>
+					</li>
+					{#each rooms as room}
+						<li>
+							<!-- svelte-ignore a11y-invalid-attribute -->
+							<a
+								href="#"
+								on:click|preventDefault={() => {
+									$selectedRoomID = room.id;
+									collapsed = true;
+								}}
+								class="grid-row gap-2 hover:bg-gray-300
+						   {room.id === $selectedRoomID ? 'text-green-600' : ''}"
+							>
+								<span>
+									{#if room.id === $selectedRoomID}
+										<Pin />
+									{/if}
+								</span>
+								<span>room {room.id} </span>
+								<span />
+								<span>{room.users_count} / {MAX_CAPACITY}</span>
+							</a>
+						</li>
+					{/each}
+				</ul>
+				<div class="border-t-2 border-t-gray-400 border-opacity-50" />
+			</div>
+		{/if}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
-			class="absolute z-20 left-0 right-0 bottom-full rounded-t-xl bg-violet-100 px-1 overflow-y-scroll max-h-80"
+			class={isLoading ? 'cursor-wait' : 'cursor-pointer'}
+			on:click={() => (isLoading ? null : (collapsed = !collapsed))}
 		>
-			<ul class="relative">
-				<li class="grid-row gap-2 pb-3 sticky top-0 bg-violet-100 py-2">
+			{#if selectedRoom}
+				<div class="grid-row gap-2">
 					<Room />
-					<span> room </span>
+					<span>
+						room {selectedRoom?.id}
+					</span>
 					<People />
-					<span> players </span>
-				</li>
-				{#each rooms as room, i}
-					<li>
-						<!-- svelte-ignore a11y-invalid-attribute -->
-						<a
-							href="#"
-							on:click|preventDefault={() => {
-								selectedRoomID = i;
-								collapsed = true;
-							}}
-							class="grid-row gap-2 hover:bg-gray-300
-						   {i === selectedRoomID ? 'text-green-600' : ''}"
-						>
-							<span>
-								{#if i === selectedRoomID}
-									<Pin />
-								{/if}
-							</span>
-							<span> {room.label} </span>
-							<span />
-							<span>{room.total} / {room.capacity}</span>
-						</a>
-					</li>
-				{/each}
-			</ul>
-			<div class="border-t-2 border-t-gray-400 border-opacity-50" />
+					<span>
+						{selectedRoom?.users_count} / {MAX_CAPACITY}
+					</span>
+				</div>
+			{:else}
+				<div class="grid-row gap-2">
+					<Room />
+					<span>
+						Loading...
+						<People />
+						<span> ... / ... </span>
+					</span>
+				</div>
+			{/if}
 		</div>
-	{/if}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div
-		class="grid-row gap-2 relative
-		{isLoading ? 'cursor-wait' : 'cursor-pointer'}"
-		on:click={() => (isLoading ? null : (collapsed = !collapsed))}
-	>
-		<Room />
-		<span> {selectedRoom.label} </span>
-		<People />
-		<span> {selectedRoom.total} / {selectedRoom.capacity} </span>
 	</div>
-</div>
+{/if}
 
 <style lang="postcss" scoped>
 	.grid-row {

frontend/src/lib/Menu.svelte

@@ -4,7 +4,9 @@
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
 	import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
 	const dispatch = createEventDispatcher();
+	
 	export let isLoading = false;
+
 	const onKeyup = (e: KeyboardEvent) => {
 		if (e.key === 'Enter') {
 			dispatch('prompt');

frontend/src/lib/constants.ts

@@ -7,3 +7,5 @@ export const COLORS = Object.values(colors)
 
 export const EMOJIS = ['🐝', '🐌', '🐞', '🐜', '🦋', '🐛', '🐝', '🐞', '🦟', '🦗', '🕷', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑', '🐠', '🐟', '🐡', '🐬', '🦈', '🐳', '🐋', '🐊', '🐅', '🐆', '🦓', '🦍', '🦧', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🐃', '🐂', '🐄', '🐎', '🐖',
 	'🐏', '🐑', '🐐', '🐕', '🐩', '🐈', '🐓', '🦃', '🦅', '🦆', '🦢', '🦉', '🦚', '🦜', '🦇', '🐁', '🐀', '🐿', '🐇', '🐿', '🦔', '🦇', '🐻', '🐻', '🐨', '🐼', '🐵', '🙈', '🙉', '🙊', '🐒', '🐉', '🐲', '🦕', '🦖', '🐊', '🐢', '🦎', '🐍', '🐦', '🐧', '🦅', '🦆', '🦉', '🦇']
+
+export const MAX_CAPACITY = 20;

frontend/src/lib/store.ts

@@ -4,4 +4,5 @@ import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 export const loadingState = writable<string>('');
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
 export const canvasEl = writable<HTMLCanvasElement>();
-export const maskEl = writable<HTMLCanvasElement>();
+export const maskEl = writable<HTMLCanvasElement>();
+export const selectedRoomID = writable<number | null>();

frontend/src/lib/types.ts

@@ -34,3 +34,9 @@ export type PromptImgObject = {
 };
 
 export type PromptImgKey = string;
+
+export interface RoomResponse {
+	id: number;
+	room_id: string;
+	users_count: number;
+}

frontend/src/routes/+layout.ts

@@ -1,6 +0,0 @@
-import { PUBLIC_API_BASE } from '$env/static/public';
-
-export async function load({ fetch }) {
-    const rooms = await fetch(PUBLIC_API_BASE + "/rooms").then((res) => res.json());
-    return { rooms };
-}

frontend/src/routes/+page.svelte

@@ -17,26 +17,21 @@
 	import App from '$lib/App.svelte';
 	import type { PageData } from './$types';
 	import { PUBLIC_API_BASE } from '$env/static/public';
-
+	import { selectedRoomID } from '$lib/store';
 	export let data: PageData;
 
-	let roomId: string;
+	let rooms = data.rooms;
 	let loaded = false;
 	let client: Client;
 
-	$: {
-		console.log('data changed', data);
+	$: roomId = rooms.find((room) => room.id === $selectedRoomID)?.room_id;
+
+	$:{
+		console.log("ROOM ID", $selectedRoomID);
 	}
 	onMount(() => {
-		document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
-
-		// Add random id to room param if not set, and return the id string
-		// e.g. /?room=758df70b5e94c13289df6
-		roomId = 'sd-multiplayer-room-0';
-
-		// Connect to the authentication API for Liveblocks
+		// document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
 		client = createClient({
-			// publicApiKey: 'pk_test_JlUZGH3kQmhmZQiqU2l8eIi5'
 			authEndpoint: PUBLIC_API_BASE + '/auth'
 		});
 
@@ -45,12 +40,16 @@
 </script>
 
 {#if loaded}
-	<!-- Provides Liveblocks hooks to children -->
 	<LiveblocksProvider {client}>
-		<!-- Create a room from id e.g. `sveltekit-pixel-art-758df70b5e94c13289df6` -->
-		<RoomProvider id={roomId}>
-			<!-- Main app component -->
-			<App />
-		</RoomProvider>
+		{#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>
 {/if}

frontend/src/routes/+page.ts

@@ -0,0 +1,14 @@
+import { PUBLIC_API_BASE } from '$env/static/public';
+import type { RoomResponse } from '$lib/types';
+import { selectedRoomID } from '$lib/store';
+import { MAX_CAPACITY } from '$lib/constants';
+
+export const prerender = true
+export const ssr = false
+export async function load() {
+    const res = await fetch(PUBLIC_API_BASE + '/rooms');
+    const rooms: RoomResponse[] = await res.json();
+    const room = rooms.find(room => room.users_count < MAX_CAPACITY) || null;
+    selectedRoomID.set(room ? room.id : null);
+    return { rooms };
+}

stablediffusion-infinity/app.py

@@ -264,7 +264,7 @@ def get_room_count(room_id: str, jwtToken: str = ''):
 
 
 @app.on_event("startup")
-@repeat_every(seconds=60*5)
+@repeat_every(seconds=60)
 async def sync_rooms():
     print("Syncing rooms")
     try:
@@ -290,7 +290,7 @@ async def get_rooms(db: sqlite3.Connection = Depends(get_db)):
 
 
 @app.post('/api/auth')
-async def autorize(request: Request):
+async def autorize(request: Request, db: sqlite3.Connection = Depends(get_db)):
     data = await request.json()
     room = data["room"]
     payload = {
@@ -302,6 +302,12 @@ async def autorize(request: Request):
     response = requests.post(f"https://api.liveblocks.io/v2/rooms/{room}/authorize",
                              headers={"Authorization": f"Bearer {LIVEBLOCKS_SECRET}"}, json=payload)
     if response.status_code == 200:
+        # user in, incremente room count
+        # cursor = db.cursor()
+        # cursor.execute(
+        #     "UPDATE rooms SET users_count = users_count + 1 WHERE room_id = ?", (room,))
+        # db.commit()
+        sync_rooms()
         return response.json()
     else:
         raise Exception(response.status_code, response.text)