menu with rooms hook

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-
 	import Room from '$lib/Icons/Room.svelte';
 	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';
+	import { useRooms } from '$lib/liveblocks';
+	import type { RoomResponse } from '$lib/types';
+
 	export let isLoading = false;
 	let boxEl: HTMLElement;
 
-	let rooms: RoomResponse[] = [];
+	const rooms = useRooms();
 
 	let collapsed = true;
-	$: selectedRoom = rooms.find((room) => room.room_id === $selectedRoomID);
-	$: loadingRooms = rooms.length > 0;
+	$: selectedRoom = $rooms.find((room) => room.room_id === $selectedRoomID);
+	$: loadingRooms = $rooms.length > 0;
 
 	function clickHandler(event: Event) {
 		if (!boxEl.contains(event.target as Node)) {
@@ -24,18 +24,12 @@
 		}
 	}
 	onMount(() => {
-		refreshRooms();
 		window.addEventListener('pointerdown', clickHandler, true);
-		const interval = setInterval(refreshRooms, 3000);
 		return () => {
 			window.removeEventListener('pointerdown', clickHandler, true);
-			clearInterval(interval);
 		};
 	});
 
-	async function refreshRooms() {
-		rooms = await fetch(PUBLIC_API_BASE + '/rooms').then((res) => res.json());
-	}
 	function changeRoom(room: RoomResponse) {
 		$selectedRoomID = room.room_id;
 		collapsed = true;
@@ -62,7 +56,7 @@
 							<People />
 							<span> players </span>
 						</li>
-						{#each rooms as room}
+						{#each $rooms as room}
 							<li>
 								<!-- svelte-ignore a11y-invalid-attribute -->
 								<a

frontend/src/lib/Icons/IconCommunity.svelte

@@ -9,8 +9,8 @@
 	aria-hidden="true"
 	focusable="false"
 	role="img"
-	width="25"
-	height="25"
+	width="1em"
+	height="1em"
 	preserveAspectRatio="xMidYMid meet"
 	viewBox="0 0 32 32"
 >

frontend/src/lib/Icons/Move.svelte

@@ -4,8 +4,8 @@
 
 <svg
 	class={classList}
-	width="40"
-	height="40"
+	width="1em"
+	height="1em"
 	viewBox="0 0 11 11"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/Icons/Pin.svelte

@@ -2,7 +2,7 @@
 	export let classList = '';
 </script>
 
-<svg class={classList} height="15" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class={classList} height="1em" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		d="M3.5 4.58599C3.74063 4.58599 3.94669 4.4961 4.11819 4.31633C4.2894 4.13687 4.375 3.92102 4.375 3.66879C4.375 3.41656 4.2894 3.20056 4.11819 3.02079C3.94669 2.84132 3.74063 2.75159 3.5 2.75159C3.25937 2.75159 3.05346 2.84132 2.88225 3.02079C2.71075 3.20056 2.625 3.41656 2.625 3.66879C2.625 3.92102 2.71075 4.13687 2.88225 4.31633C3.05346 4.4961 3.25937 4.58599 3.5 4.58599ZM3.5 7.95669C4.38958 7.10064 5.04948 6.32285 5.47969 5.62334C5.9099 4.92413 6.125 4.30318 6.125 3.76051C6.125 2.92739 5.87154 2.24515 5.36462 1.71378C4.858 1.18273 4.23646 0.917197 3.5 0.917197C2.76354 0.917197 2.14185 1.18273 1.63494 1.71378C1.12831 2.24515 0.875 2.92739 0.875 3.76051C0.875 4.30318 1.0901 4.92413 1.52031 5.62334C1.95052 6.32285 2.61042 7.10064 3.5 7.95669ZM3.5 9C3.44167 9 3.38333 8.98853 3.325 8.9656C3.26667 8.94267 3.21562 8.9121 3.17188 8.87389C2.10729 7.8879 1.3125 6.97269 0.7875 6.12825C0.2625 5.28352 0 4.49427 0 3.76051C0 2.61401 0.351896 1.70064 1.05569 1.02038C1.75919 0.340127 2.57396 0 3.5 0C4.42604 0 5.24081 0.340127 5.94431 1.02038C6.6481 1.70064 7 2.61401 7 3.76051C7 4.49427 6.7375 5.28352 6.2125 6.12825C5.6875 6.97269 4.89271 7.8879 3.82812 8.87389C3.78438 8.9121 3.73333 8.94267 3.675 8.9656C3.61667 8.98853 3.55833 9 3.5 9Z"
 		fill="#338D4C"

frontend/src/lib/Icons/Room.svelte

@@ -2,7 +2,7 @@
 	export let classList = '';
 </script>
 
-<svg class={classList} height="15" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class={classList} height="1em" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<rect x="1" y="1" width="7" height="7" rx="1" stroke="#2F6DCB" />
 	<rect
 		x="3.05566"

frontend/src/lib/Icons/Undo.svelte

@@ -4,8 +4,7 @@
 
 <svg
 	class={classList}
-	width="40"
-	height="29"
+	width="1em"
 	viewBox="0 0 10 9"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/Menu.svelte

@@ -4,6 +4,9 @@
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
 	import AboutButton from '$lib/Buttons/AboutButton.svelte';
 	import { toggleAbout } from '$lib/store';
+	// import { useBroadcastEvent } from '$lib/liveblocks';
+
+	// const broadcast = useBroadcastEvent();
 
 	const dispatch = createEventDispatcher();
 
@@ -23,7 +26,12 @@
 </script>
 
 <div class="flex items-center justify-between px-12">
-	<AboutButton on:click={() => ($toggleAbout = !$toggleAbout)} />
+	<AboutButton
+		on:click={() => {
+			$toggleAbout = !$toggleAbout;
+			// broadcast({ type: 'EMOJI', emoji: '🔥' });
+		}}
+	/>
 
 	<button
 		on:click={() => dispatch('prompt')}

frontend/src/lib/types.ts

@@ -39,4 +39,15 @@ export interface RoomResponse {
 	id: number;
 	room_id: string;
 	users_count: number;
-}
+}
+
+
+export enum ConnectionStatus {
+	"closed" = "closed",
+	"authenticating" = "authenticating",
+	"unavailable" = "unavailable",
+	"failed" = "failed",
+	"open" = "open",
+	"connecting" = "connecting",
+}
+export type TConnectionStatus = keyof typeof ConnectionStatus