From f63e6b12fc63da88e92c831ca3b32d6d896b27bf Mon Sep 17 00:00:00 2001
From: Thilo Behnke <thilo.behnke@gmx.net>
Date: Sun, 19 Jun 2022 22:18:20 +0200
Subject: [PATCH] select game mode before game starts

---
 client/svelte-client/src/Action.svelte |  11 +-
 client/svelte-client/src/App.svelte    | 182 ++++++++++++++-----------
 client/svelte-client/src/Canvas.svelte |   1 -
 client/svelte-client/src/game/event.ts |   0
 4 files changed, 108 insertions(+), 86 deletions(-)
 delete mode 100644 client/svelte-client/src/game/event.ts

diff --git a/client/svelte-client/src/Action.svelte b/client/svelte-client/src/Action.svelte
index d1a2e7c..a2050ae 100644
--- a/client/svelte-client/src/Action.svelte
+++ b/client/svelte-client/src/Action.svelte
@@ -5,6 +5,10 @@
 
     let sessionId = '';
 
+    const localSession = () => {
+        dispatch("local-create")
+    }
+
     const createSession = () => {
         dispatch("session-create")
     }
@@ -29,10 +33,11 @@
 </script>
 
 <div class="game-actions">
-    <button on:click={() => createSession()}>Create Session</button>
+    <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 Session</button>
-    <button on:click={() => watchSession()}>Watch Session</button>
+    <button on:click={() => joinSession()}>Join Online Game</button>
+    <button on:click={() => watchSession()}>Watch Online Game</button>
     <button on:click={() => toggleDebug()}>Toggle Debug</button>
 </div>
 
diff --git a/client/svelte-client/src/App.svelte b/client/svelte-client/src/App.svelte
index 1884ada..6ee6316 100644
--- a/client/svelte-client/src/App.svelte
+++ b/client/svelte-client/src/App.svelte
@@ -1,97 +1,115 @@
 <script lang="ts">
-	import { FieldWrapper } from "wasm-app";
-	import Canvas from "./Canvas.svelte";
-	import Fps from "./Fps.svelte";
-	import {keysPressed} from "./game/engine";
-	import Input from "./Input.svelte";
-	import {setContext} from "svelte";
-	import {sessionContext, sessionStore} from "./game/session";
-	import Action from "./Action.svelte";
-	import {network, networkContext} from "./game/network";
+    import {FieldWrapper} from "wasm-app";
+    import Canvas from "./Canvas.svelte";
+    import Fps from "./Fps.svelte";
+    import {keysPressed} from "./game/engine";
+    import Input from "./Input.svelte";
+    import {setContext} from "svelte";
+    import {sessionContext, sessionStore} from "./game/session";
+    import Action from "./Action.svelte";
+    import {network, networkContext} from "./game/network";
 
-	setContext(sessionContext, sessionStore);
-	setContext(networkContext, network);
+    setContext(sessionContext, sessionStore);
+    setContext(networkContext, network);
 
-	let debug = false;
+    let debug = false;
 
-	function handleKeydown({key}) {
-		if ($keysPressed.includes(key)) {
-			return;
-		}
-		$keysPressed = [...$keysPressed, key]
-	}
-	function handleKeyup({key}) {
-		if (!$keysPressed.includes(key)) {
-			return;
-		}
-		$keysPressed = $keysPressed.filter(key => key !== key)
-	}
-	function createSession() {
-		$network.loading = true;
-		sessionStore.createNetworkSession().then(() => {
-			$network.loading = false;
-		})
-	}
-	function joinSession(sessionId) {
-		$network.loading = true;
-		sessionStore.joinNetworkSession(sessionId).then(() => {
-			$network.loading = false;
-		})
-	}
-	function watchSession(sessionId) {
-		$network.loading = true;
-		sessionStore.watchNetworkSession(sessionId).then(() => {
-			$network.loading = false;
-		})
-	}
+    function handleKeydown({key}) {
+        if ($keysPressed.includes(key)) {
+            return;
+        }
+        $keysPressed = [...$keysPressed, key]
+    }
 
-	function toggleDebug() {
-		debug = true;
-	}
+    function handleKeyup({key}) {
+        if (!$keysPressed.includes(key)) {
+            return;
+        }
+        $keysPressed = $keysPressed.filter(key => key !== key)
+    }
+
+    function localSession() {
+        sessionStore.createLocalSession();
+    }
+
+    function createSession() {
+        $network.loading = true;
+        sessionStore.createNetworkSession().then(() => {
+            $network.loading = false;
+        })
+    }
+
+    function joinSession(sessionId) {
+        $network.loading = true;
+        sessionStore.joinNetworkSession(sessionId).then(() => {
+            $network.loading = false;
+        })
+    }
+
+    function watchSession(sessionId) {
+        $network.loading = true;
+        sessionStore.watchNetworkSession(sessionId).then(() => {
+            $network.loading = false;
+        })
+    }
+
+    function toggleDebug() {
+        debug = true;
+    }
 </script>
 <main>
-	{#if $network.loading}
-		loading...
-	{:else}
-		{JSON.stringify($sessionStore)}
-	{/if}
-	<Action
-			on:session-create={() => createSession()}
-			on:session-join={({detail: sessionId}) => joinSession(sessionId)}
-			on:session-watch={({detail: sessionId}) => watchSession(sessionId)}
-			on:debug-toggle={() => toggleDebug()}
-	></Action>
-	<div class="game-area">
-		<Canvas debug={debug}>
-			<Fps></Fps>
-		</Canvas>
-		<Input inputs={$keysPressed}></Input>
-	</div>
+    {#if $network.loading}
+        loading...
+    {:else}
+        {JSON.stringify($sessionStore)}
+    {/if}
+    {#if !$sessionStore.session}
+        <div class="mode-select">
+            <Action
+                    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>
+        </div>
+    {:else}
+        <div class="game-area">
+            <Canvas debug={debug}>
+                <Fps></Fps>
+            </Canvas>
+            <Input inputs={$keysPressed}></Input>
+        </div>
+    {/if}
 </main>
 <svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup}/>
 
 <style>
-	main {
-		display: flex;
-		flex-flow: column;
-		justify-content: start;
-		align-items: center;
-	}
+    main {
+        display: flex;
+        flex-flow: column;
+        justify-content: start;
+        align-items: center;
+    }
 
-	.game-area {
-		display: flex;
-	}
+    .mode-select {
 
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
+    }
 
-	@media (min-width: 640px) {
-		main {
-			max-width: none;
-		}
-	}
+    .game-area {
+        display: flex;
+    }
+
+    h1 {
+        color: #ff3e00;
+        text-transform: uppercase;
+        font-size: 4em;
+        font-weight: 100;
+    }
+
+    @media (min-width: 640px) {
+        main {
+            max-width: none;
+        }
+    }
 </style>
diff --git a/client/svelte-client/src/Canvas.svelte b/client/svelte-client/src/Canvas.svelte
index 1f22b1b..cfda9e1 100644
--- a/client/svelte-client/src/Canvas.svelte
+++ b/client/svelte-client/src/Canvas.svelte
@@ -26,7 +26,6 @@
     let listeners = [];
 
     let session = getContext(sessionContext);
-    console.log(session)
 
     onMount(() => {
         ctx = canvas.getContext('2d');
diff --git a/client/svelte-client/src/game/event.ts b/client/svelte-client/src/game/event.ts
deleted file mode 100644
index e69de29..0000000