separate menu from settings

client/svelte-client/src/App.svelte

@@ -6,8 +6,10 @@
     import Input from "./Input.svelte";
     import {setContext} from "svelte";
     import {sessionContext, sessionStore} from "./game/session";
-    import Action from "./Action.svelte";
+    import ModeSelect from "./ModeSelect.svelte";
     import {network, networkContext} from "./game/network";
+    import NetworkSessionWrapper from "./NetworkSessionWrapper.svelte";
+    import GameSettings from "./GameSettings.svelte";
 
     setContext(sessionContext, sessionStore);
     setContext(networkContext, network);
@@ -54,7 +56,7 @@
     }
 
     function toggleDebug() {
-        debug = true;
+        debug = !debug;
     }
 </script>
 <main>
@@ -65,21 +67,24 @@
     {/if}
     {#if !$sessionStore.session}
         <div class="mode-select">
-            <Action
+            <ModeSelect
                     on:local-create={() => localSession()}
                     on:session-create={() => createSession()}
                     on:session-join={({detail: sessionId}) => joinSession(sessionId)}
                     on:session-watch={({detail: sessionId}) => watchSession(sessionId)}
                     on:debug-toggle={() => toggleDebug()}
-            ></Action>
+            ></ModeSelect>
         </div>
     {:else}
-        <div class="game-area">
-            <Canvas debug={debug}>
-                <Fps></Fps>
-            </Canvas>
-            <Input inputs={$keysPressed}></Input>
-        </div>
+        <NetworkSessionWrapper>
+            <GameSettings on:debug-toggle={() => toggleDebug()}></GameSettings>
+            <div class="game-area">
+                <Canvas debug={debug}>
+                    <Fps></Fps>
+                </Canvas>
+                <Input inputs={$keysPressed}></Input>
+            </div>
+        </NetworkSessionWrapper>
     {/if}
 </main>
 <svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup}/>

client/svelte-client/src/GameSettings.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {createEventDispatcher} from "svelte";
+
+    const dispatch = createEventDispatcher();
+    const toggleDebug = () => {
+        dispatch("debug-toggle")
+    }
+</script>
+
+<div class="game-settings">
+    <button on:click={() => toggleDebug()}>Toggle Debug</button>
+</div>
+
+<style>
+    .game-settings {
+        display: flex;
+        flex-flow: row nowrap;
+    }
+</style>

client/svelte-client/src/ModeSelect.svelte

@@ -27,23 +27,20 @@
         dispatch("session-watch", sessionId)
     }
 
-    const toggleDebug = () => {
-        dispatch("debug-toggle")
-    }
 </script>
 
-<div class="game-actions">
+<div class="game-mode-select">
     <button on:click={() => localSession()}>Create Local Game</button>
     <button on:click={() => createSession()}>Create Online Game</button>
     <input bind:value={sessionId}/>
-    <button on:click={() => joinSession()}>Join Online Game</button>
-    <button on:click={() => watchSession()}>Watch Online Game</button>
-    <button on:click={() => toggleDebug()}>Toggle Debug</button>
+    <button disabled={!sessionId} on:click={() => joinSession()}>Join Online Game</button>
+    <button disabled={!sessionId} on:click={() => watchSession()}>Watch Online Game</button>
 </div>
 
 <style>
-    .game-actions {
-        display: flex;
-        justify-content: center;
+    .game-mode-select {
+        display: grid;
+        grid-auto-columns: 200px;
+        grid-auto-rows: 200px;
     }
 </style>

client/svelte-client/src/NetworkSessionWrapper.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {getContext} from "svelte";
+    import {sessionContext, SessionState} from "./game/session";
+    import Canvas from "./Canvas.svelte";
+
+    export let debug;
+
+    let session = getContext(sessionContext);
+
+</script>
+
+{#if !$session.session}
+    error!
+{:else if $session.session.state === SessionState.PENDING}
+    waiting for other player...
+{:else if $session.session.state === SessionState.CLOSED}
+    game over!
+{:else if $session.session.state === SessionState.RUNNING}
+    <slot></slot>
+{:else }
+    unknown game state
+{/if}
+
+

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

@@ -64,7 +64,7 @@ async function createSession(): Promise<Session> {
     });
     return {
         session_id: "a",
-        state: SessionState.CLOSED,
+        state: SessionState.PENDING,
         players: [],
         observers: []
     }
@@ -78,7 +78,7 @@ async function joinSession(sessionId): Promise<Session> {
     });
     return {
         session_id: sessionId,
-        state: SessionState.CLOSED,
+        state: SessionState.PENDING,
         players: [],
         observers: []
     }
@@ -92,7 +92,7 @@ async function watchSession(sessionId): Promise<Session> {
     });
     return {
         session_id: sessionId,
-        state: SessionState.CLOSED,
+        state: SessionState.RUNNING,
         players: [],
         observers: []
     }