add basic room listing, websocket tests

src/components/Room.svelte

@@ -5,13 +5,56 @@
 </script>
 
 <div class="room">
-	<h3>{room.name}</h3>
+	<h3>{room.name} <span class="game">({room.preferredGameName || "No preferred game"})</span></h3>
 	<p>{room.description}</p>
+	<div class="player-count">
+		{room.players.length} / {room.maxPlayers} | {#if room.players.length > 4}
+			{#each room.players.slice(0, 4) as player}
+				{player.nickname}{#if player !== room.players[3]},{" "}
+				{/if}
+			{/each}
+			and {room.players.length - 4}
+			{room.players.length - 4 === 1 ? "other" : "others"}
+		{:else}
+			{#each room.players as player}
+				{player.nickname}{#if player !== room.players[room.players.length - 1]},{" "}
+				{/if}
+			{/each}
+		{/if} | {room.hasPassword ? "Private" : "Public"}
+	</div>
+	<div class="top-right">
+		{room.address}:{room.port}
+	</div>
 </div>
 
 <style>
 	.room {
 		border: solid thin #353e52;
 		padding: 8px 12px;
+		background-color: var(--color-primary);
+		border-radius: 16px;
+		box-shadow: 0 0 48px 0 rgba(39, 56, 75, 0.5);
+		position: relative;
+	}
+
+	.player-count {
+		margin-top: 4px;
+	}
+
+	.game {
+		margin-left: 4px;
+	}
+
+	.top-right {
+		position: absolute;
+		top: 8px;
+		right: 12px;
+	}
+
+	.top-right,
+	.player-count,
+	.game {
+		opacity: 0.5;
+		font-size: 16px;
 	}
 </style>

src/hooks.server.ts

@@ -2,9 +2,25 @@ import { db } from "$lib/server/db";
 import "reflect-metadata";
 import { building } from "$app/environment";
 import type { Handle } from "@sveltejs/kit";
+import {WebSocketServer} from "ws";
+
+let server: WebSocketServer;
+
+function initServer() {
+	server = new WebSocketServer({
+		port: 21563,
+		path: "/net"
+	});
+	server.on("connection", (socket) => {
+		socket.on("message", (data) => {
+			socket.send(data);
+		})
+	})
+}
 
 const runAllTheInitFunctions = async () => {
 	if (!db.isInitialized) await db.initialize();
+	if (!server) initServer();
 };
 
 if (!building) {

src/routes/account/+page.svelte

@@ -46,6 +46,31 @@
 			alert("Failed to delete account: " + response.error);
 		}
 	}
+
+	async function getWsMessage(event: MessageEvent): Promise<string> {
+		return new Promise((resolve, reject) => {
+			if (event.data instanceof Blob) {
+				const reader = new FileReader();
+
+				reader.onload = () => {
+					resolve((reader.result as string) || "");
+				};
+
+				reader.readAsText(event.data);
+			} else {
+				resolve(event.data);
+			}
+		});
+	}
+
+	onMount(() => {
+		const ws = new WebSocket("wss://sjqr2hlh-21563.uks1.devtunnels.ms/net");
+		ws.onmessage = async (event) => {
+			const msg = await getWsMessage(event);
+			console.log(msg);
+		};
+		ws.onopen = () => ws.send("hello, world");
+	});
 </script>
 
 <div class="panel-blur main-panel">
@@ -68,9 +93,13 @@
 	</p>
 	<h2>Rooms</h2>
 	<div class="rooms">
-		{#each data.rooms as room}
-			<Room {room} />
-		{/each}
+		{#if data.rooms.length > 0}
+			{#each data.rooms as room}
+				<Room {room} />
+			{/each}
+		{:else}
+			<p>No rooms are currently being hosted.</p>
+		{/if}
 	</div>
 </div>
 
@@ -87,6 +116,8 @@
 		max-width: 1000px;
 		padding: 28px 36px;
 		padding-top: 12px;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.main-panel > h2 {
@@ -113,4 +144,21 @@
 		margin-top: 4px;
 		margin-bottom: 16px;
 	}
+
+	.rooms {
+		margin-top: -16px;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+		height: 0px;
+		flex-grow: 1;
+		overflow-y: auto;
+		--mask-image: linear-gradient(transparent, black 8px, black calc(100% - 32px), transparent),
+			linear-gradient(to left, black 8px, transparent 8px);
+		padding-top: 8px;
+		padding-bottom: 32px;
+		mask-image: var(--mask-image);
+		-webkit-mask-image: var(--mask-image);
+		background-color: transparent;
+	}
 </style>

src/routes/lobby/[id]/+server.ts

@@ -11,8 +11,10 @@ export async function POST({ request, params }) {
 	const user = await useAuth(request.headers.get("authorization") || "");
 	if (!user) return new Response(null, { status: 401 });
 	if (user.id !== room.host.id) return new Response(null, { status: 401 });
-	console.log(body.players);
-	room.setPlayerList(body.players);
+	if (body.players.length === 0 && room.roomInfo.owner) {
+		console.log(room.roomInfo.players);
+		room.setPlayerList([{ gameId: 0, gameName: "", nickname: room.roomInfo.owner }]);
+	}
 	return json({ message: "Lobby updated successfully" });
 }