fix url redirect

frontend/src/lib/App.svelte

@@ -15,7 +15,7 @@
 	import { base64ToBlob, uploadImage } from '$lib/utils';
 	import { nanoid } from 'nanoid';
 
-	const myPresence = useMyPresence();
+	const myPresence = useMyPresence({ addToHistory: true });
 	const others = useOthers();
 
 	function getKey(position: { x: number; y: number }): PromptImgKey {

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -20,7 +20,7 @@
 	$: loadingRooms = $rooms.length > 0;
 
 	function clickHandler(event: Event) {
-		if (!boxEl.contains(event.target as Node)) {
+		if (boxEl && !boxEl.contains(event.target as Node)) {
 			collapsed = true;
 		}
 	}
@@ -59,7 +59,7 @@
 							<People />
 							<span> players </span>
 						</li>
-						{#each $rooms as room}
+						{#each $rooms as room, i}
 							<li>
 								<!-- svelte-ignore a11y-invalid-attribute -->
 								<a
@@ -73,7 +73,7 @@
 											<Pin />
 										{/if}
 									</span>
-									<span>room {room.id} </span>
+									<span>room {room.room_id.split('-')[3]} </span>
 									<span />
 									<span />
 									<span>{room.users_count} / {MAX_CAPACITY}</span>
@@ -93,7 +93,7 @@
 					<div class="grid-row gap-2">
 						<Room />
 						<span>
-							room {selectedRoom?.id}
+							room {selectedRoom?.room_id.split('-')[3]}
 						</span>
 						<span />
 						<People />

frontend/src/lib/PaintCanvas.svelte

@@ -10,7 +10,7 @@
 	import type { PromptImgObject } from '$lib/types';
 	import { CANVAS_SIZE, FRAME_SIZE, GRID_SIZE } from '$lib/constants';
 
-	const myPresence = useMyPresence();
+	const myPresence = useMyPresence({ addToHistory: true });
 	const promptImgStorage = useObject('promptImgStorage');
 
 	const height = CANVAS_SIZE.height;

frontend/src/lib/PaintFrame.svelte

@@ -13,7 +13,7 @@
 	import { canvasEl, maskEl, loadingState } from '$lib/store';
 
 	import { Status } from './types';
-	const myPresence = useMyPresence();
+	const myPresence = useMyPresence({ addToHistory: true });
 
 	const dispatch = createEventDispatcher();
 

frontend/src/lib/PromptModal.svelte

@@ -8,7 +8,7 @@
 	let prompt: string;
 	let inputEl: HTMLInputElement;
 	let boxEl: HTMLDivElement;
-	const myPresence = useMyPresence();
+	const myPresence =  useMyPresence({ addToHistory: true });
 
 	const onKeyup = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') {

frontend/src/lib/constants.ts

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

frontend/src/lib/liveblocks/useMyPresence.ts

@@ -20,12 +20,13 @@ import { useRoom } from "./useRoom";
  * it takes an object and works like `useUpdateMyPresence` in Liveblocks
  */
 
-export function useMyPresence(): any {
+export function useMyPresence(_options: { addToHistory: boolean } = {}) {
   const room = useRoom();
   const { subscribe, set } = writable<Presence>();
 
-  function update(newPresence) {
-    room.updatePresence(newPresence);
+  function update(newPresence, options?: { addToHistory: boolean }
+  ) {
+    room.updatePresence(newPresence, { ..._options, ...options });
   }
 
   const unsubscribePresence = room.subscribe("my-presence", (presence) => {

frontend/src/lib/liveblocks/useUpdateMyPresence.ts

@@ -15,6 +15,6 @@ import { useMyPresence } from "./useMyPresence";
  */
 
 export function useUpdateMyPresence(): (val: any) => void {
-  const presence = useMyPresence();
+  const presence = useMyPresence({ addToHistory: true });
   return (updatedPresence) => presence.update(updatedPresence);
 }

frontend/src/routes/+page.svelte

@@ -32,15 +32,22 @@
 		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);
-			if (room) {
-				selectedRoomID.set(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 };
+				window.history.replaceState(null, '', '?' + new URLSearchParams(state).toString());
 			}
-		} else {
-			const room = rooms.find((room) => room.users_count < MAX_CAPACITY) || null;
-			selectedRoomID.set(room ? room.room_id : null);
+		}
+		if (emptyRoom && !roomAvailable) {
+			selectedRoomID.set(emptyRoom.room_id);
+			const state = { roomid: emptyRoom.room_id };
+			window.history.replaceState(null, '', '?' + new URLSearchParams(state).toString());
 		}
 		loading = false;
 		return { rooms };