network session wrapper + session event handler prep

client/svelte-client/src/LocalSessionWrapper.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-    import {keyboardInputs, Session} from "./game/session";
+    import {localSessionInputs, Session} from "./game/session";
 
     export let session: Session;
 </script>
 
-<slot inputs={$keyboardInputs}></slot>
-
-
+<slot inputs={$localSessionInputs}></slot>

client/svelte-client/src/NetworkSessionWrapper.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+
+    import type {NetworkSession} from "./game/session";
+    import {
+        hostNetworkSessionInputs,
+        observerNetworkSessionInputs,
+        peerNetworkSessionInputs
+    } from "./game/session";
+
+    export let session: NetworkSession;
+</script>
+
+{#if !session}
+    <h3>no session</h3>
+{:else if session.type === 'HOST'}
+    <h3>Host</h3>
+    <slot inputs={$hostNetworkSessionInputs}></slot>
+{:else if session.type === 'PEER'}
+    <h3>Peer</h3>
+    <slot inputs={$peerNetworkSessionInputs}></slot>
+{:else if session.type === 'OBSERVER'}
+    <h3>Peer</h3>
+    <slot inputs={$observerNetworkSessionInputs}></slot>
+{/if}

client/svelte-client/src/SessionWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import {keyboardInputs, Session, SessionState, SessionType} from "./game/session";
+    import {localSessionInputs, Session, SessionState, SessionType} from "./game/session";
     import LocalSessionWrapper from "./LocalSessionWrapper.svelte";
+    import NetworkSessionWrapper from "./NetworkSessionWrapper.svelte";
 
     export let session: Session;
 </script>
@@ -13,12 +14,14 @@
     </LocalSessionWrapper>
 {:else}
     {#if session.state === SessionState.PENDING}
-        <h1>waiting for other player...</h1>
+        <h3>waiting for other player...</h3>
     {:else if session.state === SessionState.CLOSED}
-        <h1>game over!</h1>
+        <h3>game over!</h3>
     {:else if session.state === SessionState.RUNNING}
-        <slot inputs={$keyboardInputs}></slot>
+        <NetworkSessionWrapper let:inputs={inputs}>
+            <slot inputs={$localSessionInputs}></slot>
+        </NetworkSessionWrapper>
     {:else }
-        <h1>unknown game state</h1>
+        <h3>unknown game state</h3>
     {/if}
 {/if}

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

@@ -10,7 +10,8 @@ export enum SessionType {
 }
 
 export type Player = {
-    id: string
+    id: string,
+    nr: number
 }
 
 export type Observer = {
@@ -39,11 +40,15 @@ export type Input = {
     player: number
 }
 
-enum InputMethod {
-    UNDEFINED, KEYBOARD, NETWORK
+export type InputEventPayload = {
+    session_id: string,
+    inputs: Input[],
+    player_id: string,
+    player_nr: number,
+    ts: number,
 }
 
-export const keyboardInputs = derived(
+const player1KeyboardInputs = derived(
     keysPressed,
     $keysPressed => {
         return $keysPressed.map((key): Input => {
@@ -52,6 +57,18 @@ export const keyboardInputs = derived(
                     return {input: 'UP', obj_id: 0, player: 1};
                 case 's':
                     return {input: 'DOWN', obj_id: 0, player: 1}
+                default:
+                    return null
+            }
+        }).filter(it => !!it);
+    }
+)
+
+const player2KeyboardInputs = derived(
+    keysPressed,
+    $keysPressed => {
+        return $keysPressed.map((key): Input => {
+            switch(key.toLowerCase()) {
                 case 'arrowup':
                     return {input: 'UP', obj_id: 1, player: 2}
                 case 'arrowdown':
@@ -63,10 +80,30 @@ export const keyboardInputs = derived(
     }
 )
 
-const inputMethod = writable(InputMethod.UNDEFINED)
+const sessionEvents = readable([], function(set) {
+    // TODO: Setup ws
 
-function initialValue(): Session {
-    return null
-}
+    setInterval(() => {
+        set([])
+    }, 10)
+
+    // TODO: Destroy ws
+    return () => {}
+})
+
+const inputEvents = derived(sessionEvents, ([$sessionEvents]) => $sessionEvents.filter(({input}) => input === 'topic'));
+
+const player1InputEvents = derived(inputEvents, ([$inputEvents]) => {
+    return $inputEvents.filter(({player_nr}) => player_nr === 1)
+})
+
+const player2InputEvents = derived(inputEvents, ([$inputEvents]) => {
+    return $inputEvents.filter(({player_nr}) => player_nr === 2)
+})
+
+export const localSessionInputs = derived([player1KeyboardInputs, player2KeyboardInputs], ([$player1KeyboardInputs, $player2KeyboardInputs]) => [...$player1KeyboardInputs, ...$player2KeyboardInputs])
+export const hostNetworkSessionInputs = derived([player1KeyboardInputs, player2InputEvents], ([player1, player2]) => [...player1, ...player2])
+export const peerNetworkSessionInputs = derived([player1InputEvents, player2KeyboardInputs], ([player1, player2]) => [...player1, ...player2])
+export const observerNetworkSessionInputs = derived([player1InputEvents, player2InputEvents], ([player1, player2]) => [...player1, ...player2])
 
 export const sessionStore = writable<Session>(null);