bugfixing

client/svelte-client/src/components/NetworkSessionWrapper.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
 
-    import {sessionInputs} from "../store/session";
+    import {networkSessionStateEvents, sessionInputs} from "../store/session";
     import type {NetworkSession} from "../store/model/session";
+    import {SessionState} from "../store/model/session";
+    import CopyToClipboard from "./CopyToClipboard.svelte";
+    import api from "../api/session";
 
     export let session: NetworkSession;
+    let sessionEvents;
     let networkSessionInputs;
+    let joinLink;
 
-    $: if (session) {
+    $: if(session) {
+        sessionEvents = networkSessionStateEvents(session);
+        joinLink = api.createJoinLink(session.session_id);
+    }
+
+    $: if (session && session.state === SessionState.RUNNING) {
         networkSessionInputs = sessionInputs(session)
     }
 </script>
@@ -14,5 +24,18 @@
 {#if !session}
     <h3>no session</h3>
 {:else}
-    <slot inputs={$networkSessionInputs}></slot>
+    {#if sessionEvents}
+        events: {JSON.stringify(sessionEvents)}
+    {/if}
+    {#if session.state === SessionState.PENDING}
+        <h3>waiting for other player...</h3>
+        <CopyToClipboard text={joinLink}></CopyToClipboard>
+    {:else if session.state === SessionState.CLOSED}
+        <h3>game over!</h3>
+    {:else if session.state === SessionState.RUNNING}
+        <slot inputs={$networkSessionInputs}></slot>
+    {:else }
+        <h3>unknown game state</h3>
+    {/if}
 {/if}
+

client/svelte-client/src/components/SessionWrapper.svelte

@@ -8,11 +8,6 @@
 
     export let session: Session;
 
-    let joinLink;
-    $: if(session) {
-        console.log(session);
-        joinLink = api.createJoinLink(session.session_id);
-    }
 </script>
 
 <div class="session-wrapper">
@@ -23,18 +18,9 @@
             <slot inputs={inputs}></slot>
         </LocalSessionWrapper>
     {:else}
-        {#if session.state === SessionState.PENDING}
-            <h3>waiting for other player...</h3>
-            <CopyToClipboard text={joinLink}></CopyToClipboard>
-        {:else if session.state === SessionState.CLOSED}
-            <h3>game over!</h3>
-        {:else if session.state === SessionState.RUNNING}
-            <NetworkSessionWrapper session={session} let:inputs={inputs}>
-                <slot inputs={inputs}></slot>
-            </NetworkSessionWrapper>
-        {:else }
-            <h3>unknown game state</h3>
-        {/if}
+        <NetworkSessionWrapper session={session} let:inputs={inputs}>
+            <slot inputs={inputs}></slot>
+        </NetworkSessionWrapper>
     {/if}
 </div>
 

client/svelte-client/src/store/session.ts

@@ -43,8 +43,10 @@ const player2KeyboardInputs = derived(
     }
 )
 
-const networkSessionEvents = (session: NetworkSession) => readable([], function(set) {
+const networkEvents = (session: NetworkSession) => readable([], function(set) {
     const websocket = writable<WebSocket>(null);
+
+    console.log("creating ws to receive/send websocket events for session: ", JSON.stringify(session))
     api.createEventWebsocket(session).then(ws => {
         websocket.set(ws);
     });
@@ -54,6 +56,7 @@ const networkSessionEvents = (session: NetworkSession) => readable([], function(
         if (!websocket) {
             return;
         }
+        console.log("ws ready, registering message handler")
         $websocket.onmessage = event => {
             events.set([...get(events), event])
         }
@@ -70,8 +73,9 @@ const networkSessionEvents = (session: NetworkSession) => readable([], function(
     }
 })
 
-const networkInputEvents = (session: NetworkSession): Readable<unknown[]> => derived(networkSessionEvents(session), $sessionEvents => $sessionEvents.filter(({input}) => input === 'topic'));
+export const networkSessionStateEvents = (session: NetworkSession): Readable<unknown[]> => derived(networkEvents(session), $sessionEvents => $sessionEvents.filter(({topic}) => topic === 'session'));
 
+const networkInputEvents = (session: NetworkSession): Readable<unknown[]> => derived(networkEvents(session), $sessionEvents => $sessionEvents.filter(({topic}) => topic === 'input'));
 export const sessionInputs = (session: Session) => readable([], function(setInputs) {
     let player1Inputs = writable([]);
     let player2Inputs = writable([]);