progress on multiplayer

client/src/lib/list.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { quadOut } from "svelte/easing";
+	import { fade, fly } from "svelte/transition";
+	import { connection, list } from "./websocket";
+    
+    const duration = 400;
+
+    let createRoomOpen = false;
+    let roomName = "";
+
+    function create() {
+        console.log("create room", roomName);
+        $connection!.createGame(roomName);
+    }
+</script>
+
+<main class="flex flex-col w-100vw h-100vh">
+    <div class="p-4 flex justify-between border-b border-b-black border-b-solid">
+        <h1 in:fly={{ delay: 0, duration, opacity: 0, y: 100, easing: quadOut }}>Rooms</h1>
+        <div class="right">
+            <button in:fly={{ delay: duration * 0.5, duration, opacity: 0, y: 100, easing: quadOut }} disabled>Quick match</button>
+            <button in:fly={{ delay: duration * 1, duration, opacity: 0, y: 100, easing: quadOut }} on:keydown={() => createRoomOpen = true} on:click={() => createRoomOpen = true}>Create room</button>
+        </div>
+    </div>
+    <div class="content h-full overflow-auto" in:fly={{ delay: duration * 1.5, duration, opacity: 0, y: 100, easing: quadOut }}>
+        {#if $list}
+            <ul>
+                {#each $list as room}
+                    <li>{room.name}</li>
+                {/each}
+            </ul>
+        {:else}    
+            Loading...
+        {/if}
+    </div>
+</main>
+
+{#if createRoomOpen}
+    <div transition:fade={{ duration: 300, easing: quadOut }} class="bg bg-black/10 fixed inset-0 backdrop-blur" on:keydown={() => createRoomOpen = false} on:click={() => createRoomOpen = false}></div>
+{/if}
+<dialog open={createRoomOpen}>
+    <div class="header flex p-8 justify-between border-b-solid border-b border-b-black">
+        <h1>Create room</h1>
+        <button class="rounded-lg" on:click={() => createRoomOpen = false}>X</button>
+    </div>
+
+    <div class="p-8 flex">
+        <input placeholder="Room name" id="room-name" type="text" bind:value={roomName} />
+        <button on:click={create}>Create</button>
+    </div>
+</dialog>
+
+<style>
+    button {
+        @apply w-64 h-10 px-2 border border-gray-300 bg-white mt-4 my-0;
+    }
+    dialog .header button {
+        @apply w-12;
+    }
+    input {
+        @apply w-64 h-10 px-2 border border-gray-300 rounded-l-lg mt-4 my-0;
+    }
+    button:first-child {
+        @apply rounded-l-lg;
+    }
+    button:last-child {
+        @apply rounded-r-lg;
+    }
+    dialog {
+        @apply hidden;
+    }
+    dialog[open] {
+        @apply block fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-0 m-0;
+    }
+</style>

client/src/lib/nameChoose.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { fly } from "svelte/transition";
+    import { quadOut } from "svelte/easing";
+	import { connection, WebsocketConnection } from "./websocket";
+
+    var shown = false;
+
+    onMount(() => {
+        shown = true;
+    });
+
+    const duration = 400;
+    var name = "";
+
+    function submit() {
+        $connection = new WebsocketConnection(name);
+    }
+</script>
+
+{#if shown}
+<main>
+    <div class="top">
+        <h1 in:fly={{ delay: 0, duration, opacity: 0, y: 100, easing: quadOut }}>What is your nickname</h1>
+        <p in:fly={{ delay: duration*0.5, duration, opacity: 0, y: 100, easing: quadOut }}>This name is publicly visible and needs to be unique among the connected players.</p>
+    </div>
+    
+    <form on:submit>
+        <input on:submit bind:value={name} type="text" min={2} max={64} in:fly={{ delay: duration*1, duration, opacity: 0, y: 100, easing: quadOut }}>
+        <button on:click={submit} on:keydown={submit} in:fly={{ delay: duration*1.5, duration, opacity: 0, y: 100, easing: quadOut }}>Continue</button>
+    </form>
+</main>
+{/if}
+
+<style>
+    * {
+        @apply box-border;
+    }
+    main {
+        @apply flex items-center justify-center flex-col h-100vh w-full;
+    }
+    h1 {
+        @apply m-0 text-4xl text-center;
+    }
+    p {
+        @apply m-2 text-gray-500 text-center;
+    }
+    input {
+        @apply w-64 h-10 px-2 border border-gray-300 rounded-l-lg mt-4 my-0;
+    }
+    button {
+        @apply w-64 h-10 px-2 border border-gray-300 bg-white rounded-r-lg mt-4 my-0;
+    }
+    form {
+        @apply h-50vh flex-grow-0;
+    }
+    .top {
+        @apply h-50vh flex flex-col justify-end items-center;
+    }
+</style>

client/src/lib/websocket.ts

@@ -160,7 +160,7 @@ interface SystemMessage {
 }
 
 export const connection: Writable<WebsocketConnection | null> = writable(null);
-export const list: Writable<{ name: string, count: number }[] | null> = writable(null);
+export const list: Writable<{ name: string }[] | null> = writable(null);
 export const listLoading = writable(true);
 export const room: Writable<{ name: string, host: string } | null> = writable(null);
 export const messages: Writable<(UserMessage | ErrorMessage | SystemMessage)[]> = writable([]);

client/src/routes/+page.svelte

@@ -50,12 +50,6 @@
     .chooser > a {
         @apply text-black no-underline cursor-pointer w-full p-8 border rounded-lg border-gray-400 border-solid;
     }
-    .chooser > .multi {
-        @apply cursor-not-allowed text-gray-500;
-    }
-    .chooser > .multi img {
-        @apply opacity-50;
-    }
     .rules {
         @apply cursor-not-allowed text-gray-500 flex justify-center items-center w-full my-8 p-4 border rounded-lg border-gray-400 border-solid;
     }

client/src/routes/multiplayer/+page.svelte

@@ -1,8 +1,8 @@
 <script>
-    import Game from "$lib/view/game/game.svelte";
-    import List from "$lib/view/menu/list.svelte";
-    import NameChoose from "$lib/view/menu/nameChoose.svelte";
-    import { connection, room } from "$lib/Websocket";
+    import Game from "$lib/game.svelte";
+    import List from "$lib/list.svelte";
+    import NameChoose from "$lib/nameChoose.svelte";
+    import { connection, room } from "$lib/websocket";
 </script>
 
 {#if !$connection}

client/tsconfig.json

@@ -11,8 +11,8 @@
 		"strict": true,
         
 		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
+			"$lib": ["./src/lib"],
+			"$lib/*": ["./src/lib/*"]
 		}
 	}
 }

pnpm-lock.yaml

@@ -41,9 +41,9 @@ importers:
 
   server:
     specifiers:
-      uWebSockets.js: github:uNetworking/uWebSockets.js#v20.10.0
+      uWebSockets.js: github:uNetworking/uWebSockets.js#v20.19.0
     dependencies:
-      uWebSockets.js: github.com/uNetworking/uWebSockets.js/806df48c9da86af7b3341f3e443388c7cd15c3de
+      uWebSockets.js: github.com/uNetworking/uWebSockets.js/42c9c0d5d31f46ca4115dc75672b0037ec970f28
 
 packages:
 
@@ -1519,8 +1519,8 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  github.com/uNetworking/uWebSockets.js/806df48c9da86af7b3341f3e443388c7cd15c3de:
-    resolution: {tarball: https://codeload.github.com/uNetworking/uWebSockets.js/tar.gz/806df48c9da86af7b3341f3e443388c7cd15c3de}
+  github.com/uNetworking/uWebSockets.js/42c9c0d5d31f46ca4115dc75672b0037ec970f28:
+    resolution: {tarball: https://codeload.github.com/uNetworking/uWebSockets.js/tar.gz/42c9c0d5d31f46ca4115dc75672b0037ec970f28}
     name: uWebSockets.js
-    version: 20.10.0
+    version: 20.19.0
     dev: false

server/package.json

@@ -4,12 +4,13 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node src"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "uWebSockets.js": "github:uNetworking/uWebSockets.js#v20.10.0"
+    "uWebSockets.js": "github:uNetworking/uWebSockets.js#v20.19.0"
   }
 }