actions component

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>

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 {