From 774f1a2f09390483d8cbe20628f72df8564147e2 Mon Sep 17 00:00:00 2001
From: Thilo Behnke <thilo.behnke@gmx.net>
Date: Sun, 19 Jun 2022 15:46:16 +0200
Subject: [PATCH] get inputs

---
 client/svelte-client/src/Canvas.svelte  | 39 ++++++++++++++++++-------
 client/svelte-client/src/game/engine.ts |  7 +++--
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/client/svelte-client/src/Canvas.svelte b/client/svelte-client/src/Canvas.svelte
index 0f26dec..f4de4d4 100644
--- a/client/svelte-client/src/Canvas.svelte
+++ b/client/svelte-client/src/Canvas.svelte
@@ -3,7 +3,7 @@
     import {onMount, setContext} from "svelte";
     import {get, writable} from "svelte/store";
     import {drawObjects} from "./game/render";
-    import {width, height, pixelRatio, gameContext, props, engineCtx, engineCanvas} from "./game/engine";
+    import {width, height, pixelRatio, gameContext, props, engineCtx, engineCanvas, keysPressed} from "./game/engine";
 
     export let killLoopOnError = true;
 
@@ -16,6 +16,8 @@
 
     let debug = writable(false);
 
+    $: keys = $keysPressed.join(',')
+
     onMount(() => {
         ctx = canvas.getContext('2d');
         engineCtx.set(ctx)
@@ -97,17 +99,34 @@
         // height.set(window.innerHeight);
         pixelRatio.set(window.devicePixelRatio);
     }
-</script>
 
-<canvas
-        bind:this={canvas}
-        width={$width * $pixelRatio}
-        height={$height * $pixelRatio}
-        style="width: {$width}px; height: {$height}px;"
-></canvas>
-<svelte:window on:resize|passive={handleResize} />
+    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)
+    }
+</script>
+<div class="game_wrapper">
+    <canvas
+            bind:this={canvas}
+            width={$width * $pixelRatio}
+            height={$height * $pixelRatio}
+            style="width: {$width}px; height: {$height}px;"
+    ></canvas>
+    <div>{keys}</div>
+</div>
+<svelte:window on:resize|passive={handleResize} on:keydown={handleKeydown} on:keyup={handleKeyup}/>
 <slot></slot>
 
 <style>
-
+    .game_wrapper {
+        display: flex;
+    }
 </style>
diff --git a/client/svelte-client/src/game/engine.ts b/client/svelte-client/src/game/engine.ts
index 97f643f..72189a8 100644
--- a/client/svelte-client/src/game/engine.ts
+++ b/client/svelte-client/src/game/engine.ts
@@ -1,4 +1,4 @@
-import {derived, writable} from "svelte/store";
+import {derived, Writable, writable} from "svelte/store";
 import {getContext, onMount} from "svelte";
 
 export const engineCanvas = writable();
@@ -7,13 +7,16 @@ export const width = writable(800);
 export const height = writable(600);
 export const pixelRatio = writable(window.devicePixelRatio);
 
+export const keysPressed: Writable<string[]> = writable([])
+
 // A more convenient store for grabbing all game props
 export const props = deriveObject({
     width,
     height,
     pixelRatio,
     engineCanvas,
-    engineCtx
+    engineCtx,
+    keysPressed
 });
 
 export const gameContext = Symbol();