From 24ca4e2a36614933d404974794deee2c95faab4a Mon Sep 17 00:00:00 2001
From: Thilo Behnke <thilo.behnke@gmx.net>
Date: Sun, 19 Jun 2022 16:04:06 +0200
Subject: [PATCH] working controls

---
 client/svelte-client/src/App.svelte     | 20 +++++++++++--
 client/svelte-client/src/Canvas.svelte  | 40 +++++++------------------
 client/svelte-client/src/Input.svelte   | 38 +++++++++++++++++++++++
 client/svelte-client/src/game/engine.ts | 20 +++++++++++++
 4 files changed, 85 insertions(+), 33 deletions(-)
 create mode 100644 client/svelte-client/src/Input.svelte

diff --git a/client/svelte-client/src/App.svelte b/client/svelte-client/src/App.svelte
index d0b2586..88931f7 100644
--- a/client/svelte-client/src/App.svelte
+++ b/client/svelte-client/src/App.svelte
@@ -2,16 +2,30 @@
 	import { FieldWrapper } from "wasm-app";
 	import Canvas from "./Canvas.svelte";
 	import Fps from "./Fps.svelte";
-	const field = FieldWrapper.new();
-	console.log({field})
-	export let name: string;
+	import {keysPressed} from "./game/engine";
+	import Input from "./Input.svelte";
+
+	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>
 
 <main>
 	<Canvas>
 		<Fps></Fps>
 	</Canvas>
+	<Input inputs={$keysPressed}></Input>
 </main>
+<svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup}/>
 
 <style>
 	main {
diff --git a/client/svelte-client/src/Canvas.svelte b/client/svelte-client/src/Canvas.svelte
index f4de4d4..63edfde 100644
--- a/client/svelte-client/src/Canvas.svelte
+++ b/client/svelte-client/src/Canvas.svelte
@@ -3,9 +3,10 @@
     import {onMount, setContext} from "svelte";
     import {get, writable} from "svelte/store";
     import {drawObjects} from "./game/render";
-    import {width, height, pixelRatio, gameContext, props, engineCtx, engineCanvas, keysPressed} from "./game/engine";
+    import {width, height, pixelRatio, gameContext, props, engineCtx, engineCanvas, playerInputs} from "./game/engine";
 
     export let killLoopOnError = true;
+    export let inputs = [];
 
     const field = FieldWrapper.new();
 
@@ -16,8 +17,6 @@
 
     let debug = writable(false);
 
-    $: keys = $keysPressed.join(',')
-
     onMount(() => {
         ctx = canvas.getContext('2d');
         engineCtx.set(ctx)
@@ -70,7 +69,7 @@
     }
 
     function tick(dt) {
-        field.tick([], dt);
+        field.tick($playerInputs, dt);
     }
 
     function render(objects, dt) {
@@ -99,34 +98,15 @@
         // height.set(window.innerHeight);
         pixelRatio.set(window.devicePixelRatio);
     }
-
-    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}/>
+<canvas
+        bind:this={canvas}
+        width={$width * $pixelRatio}
+        height={$height * $pixelRatio}
+        style="width: {$width}px; height: {$height}px;"
+></canvas>
+<svelte:window on:resize|passive={handleResize}/>
 <slot></slot>
 
 <style>
-    .game_wrapper {
-        display: flex;
-    }
 </style>
diff --git a/client/svelte-client/src/Input.svelte b/client/svelte-client/src/Input.svelte
new file mode 100644
index 0000000..2b38049
--- /dev/null
+++ b/client/svelte-client/src/Input.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    const controls: string[] = ["w", "s", "arrowup", "arrowdown"]
+    export let inputs: string[] = [];
+
+    $: filteredInputs = inputs.map(i => i.toLowerCase()).filter(i => controls.includes(i))
+</script>
+
+<div class="game_inputs">
+    {#each controls as control}
+        <div class="game_input game_input--{filteredInputs.includes(control) ? 'active' : 'inactive'}">
+            {control}
+        </div>
+    {/each}
+</div>
+
+
+<style>
+    .game_inputs {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+    }
+
+    .game_input {
+        border: 1px solid grey;
+        border-radius: 0.5em;
+        text-align: center;
+    }
+
+    .game_input--inactive {
+        color: black;
+    }
+
+    .game_input--active {
+        color: white;
+        background-color: red;
+    }
+</style>
diff --git a/client/svelte-client/src/game/engine.ts b/client/svelte-client/src/game/engine.ts
index 72189a8..dc73f66 100644
--- a/client/svelte-client/src/game/engine.ts
+++ b/client/svelte-client/src/game/engine.ts
@@ -9,6 +9,26 @@ export const pixelRatio = writable(window.devicePixelRatio);
 
 export const keysPressed: Writable<string[]> = writable([])
 
+export const playerInputs = derived(
+    keysPressed,
+    $keysPressed => {
+        return $keysPressed.map(key => {
+            switch(key.toLowerCase()) {
+                case 'w':
+                    return {input: 'UP', obj_id: 0, player: 1}
+                case 's':
+                    return {input: 'DOWN', obj_id: 0, player: 1}
+                case 'arrowup':
+                    return {input: 'UP', obj_id: 1, player: 2}
+                case 'arrowdown':
+                    return {input: 'DOWN', obj_id: 1, player: 2}
+                default:
+                    return null
+            }
+        }).filter(it => !!it);
+    }
+)
+
 // A more convenient store for grabbing all game props
 export const props = deriveObject({
     width,