From 34bdcf9c5b741293d38ff19a028c2000186da754 Mon Sep 17 00:00:00 2001
From: Thilo Behnke <thilo.behnke@gmx.net>
Date: Sun, 19 Jun 2022 16:52:52 +0200
Subject: [PATCH] actions component

---
 client/svelte-client/src/Action.svelte | 19 +++++++++++++++++++
 client/svelte-client/src/App.svelte    | 25 ++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 client/svelte-client/src/Action.svelte

diff --git a/client/svelte-client/src/Action.svelte b/client/svelte-client/src/Action.svelte
new file mode 100644
index 0000000..e56f2b9
--- /dev/null
+++ b/client/svelte-client/src/Action.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {getContext} from "svelte";
+    import {sessionContext} from "./game/session";
+
+    let session = getContext(sessionContext);
+</script>
+
+<div class="game-actions">
+    <button on:click={() => session.createSession()}>Create Session</button>
+    <button on:click={() => session.joinSession()}>Join Session</button>
+    <button on:click={() => session.watchSession()}>Watch Session</button>
+</div>
+
+<style>
+    .game-actions {
+        display: flex;
+        justify-content: center;
+    }
+</style>
diff --git a/client/svelte-client/src/App.svelte b/client/svelte-client/src/App.svelte
index 88931f7..91d406f 100644
--- a/client/svelte-client/src/App.svelte
+++ b/client/svelte-client/src/App.svelte
@@ -4,6 +4,11 @@
 	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";
+
+	setContext(sessionContext, sessionStore)
 
 	function handleKeydown({key}) {
 		if ($keysPressed.includes(key)) {
@@ -20,17 +25,27 @@
 </script>
 
 <main>
-	<Canvas>
-		<Fps></Fps>
-	</Canvas>
-	<Input inputs={$keysPressed}></Input>
+	{JSON.stringify($sessionStore.session)}
+	<Action></Action>
+	<div class="game-area">
+		<Canvas>
+			<Fps></Fps>
+		</Canvas>
+		<Input inputs={$keysPressed}></Input>
+	</div>
 </main>
 <svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup}/>
 
 <style>
 	main {
 		display: flex;
-		justify-content: center;
+		flex-flow: column;
+		justify-content: start;
+		align-items: center;
+	}
+
+	.game-area {
+		display: flex;
 	}
 
 	h1 {