add basic room listing, websocket tests

package-lock.json

@@ -18,7 +18,8 @@
 				"sqlite3": "^5.1.7",
 				"typeorm": "^0.3.20",
 				"uuid": "^9.0.1",
-				"vite-plugin-vsharp": "^1.7.3"
+				"vite-plugin-vsharp": "^1.7.3",
+				"ws": "^8.16.0"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -28,6 +29,7 @@
 				"@types/cookie": "^0.6.0",
 				"@types/jsonwebtoken": "^9.0.6",
 				"@types/uuid": "^9.0.8",
+				"@types/ws": "^8.5.10",
 				"autoprefixer": "^10.4.16",
 				"express": "^4.18.3",
 				"flowbite": "^2.3.0",
@@ -1606,6 +1608,15 @@
 			"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.9.tgz",
 			"integrity": "sha512-FCTsikRozryfayPuiI46QzH3fnrOoctTjvOYZkho9BTFLCOZ2rgZJHMOVgCOfttjPJcgOx52EpkY0CMfy87MIw=="
 		},
+		"node_modules/@types/ws": {
+			"version": "8.5.10",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+			"integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/@yr/monotone-cubic-spline": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
@@ -7380,6 +7391,26 @@
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
 		},
+		"node_modules/ws": {
+			"version": "8.16.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+			"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/y18n": {
 			"version": "5.0.8",
 			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -20,6 +20,7 @@
 		"@types/cookie": "^0.6.0",
 		"@types/jsonwebtoken": "^9.0.6",
 		"@types/uuid": "^9.0.8",
+		"@types/ws": "^8.5.10",
 		"autoprefixer": "^10.4.16",
 		"express": "^4.18.3",
 		"flowbite": "^2.3.0",
@@ -53,6 +54,7 @@
 		"sqlite3": "^5.1.7",
 		"typeorm": "^0.3.20",
 		"uuid": "^9.0.1",
-		"vite-plugin-vsharp": "^1.7.3"
+		"vite-plugin-vsharp": "^1.7.3",
+		"ws": "^8.16.0"
 	}
 }

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" });
 }