From b293efe3dc1fd562da86ed232283a35f158f70e6 Mon Sep 17 00:00:00 2001
From: Thilo Behnke <thilo.behnke@gmx.net>
Date: Sun, 3 Jul 2022 23:53:58 +0200
Subject: [PATCH] show score in gui

---
 client/svelte-client/src/App.svelte           |  5 +++-
 .../src/components/Canvas.svelte              |  2 +-
 .../svelte-client/src/components/Fps.svelte   |  2 +-
 .../svelte-client/src/components/Score.svelte | 28 +++++++++++++++++++
 .../src/components/TickWrapper.svelte         |  1 -
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 client/svelte-client/src/components/Score.svelte

diff --git a/client/svelte-client/src/App.svelte b/client/svelte-client/src/App.svelte
index b1ee4e7..230eddc 100644
--- a/client/svelte-client/src/App.svelte
+++ b/client/svelte-client/src/App.svelte
@@ -12,6 +12,7 @@
     import {SessionType} from "./store/model/session";
     import EvenTicker from "./components/EvenTicker.svelte";
     import Line from "./components/Line.svelte";
+    import Score from "./components/Score.svelte";
 
     let sessionStore: Readable<SessionStore>;
     let debug = false;
@@ -64,9 +65,11 @@
                     <SessionInfo session={session}></SessionInfo>
                 </div>
                 <div class="game-area__canvas">
-                    <Canvas debug={debug} session={session} inputs={inputs} tick={tick} handleError={handleError} on:tick={event => tick(...event.detail)} let:dimensions={dimensions}>
+                    <Canvas debug={debug} session={session} inputs={inputs} tick={tick} handleError={handleError} let:dimensions={dimensions}>
                         <Fps></Fps>
                         <Line x={dimensions.width / 2} y={0} height={dimensions.height} dashed={true}></Line>
+                        {JSON.stringify(tick.score)}
+                        <Score dimensions={dimensions} score={tick.score}></Score>
                     </Canvas>
                 </div>
                 <div class="game-area__hud">
diff --git a/client/svelte-client/src/components/Canvas.svelte b/client/svelte-client/src/components/Canvas.svelte
index b4c8f08..8c6e492 100644
--- a/client/svelte-client/src/components/Canvas.svelte
+++ b/client/svelte-client/src/components/Canvas.svelte
@@ -95,6 +95,6 @@
         style="width: {$width}px; height: {$height}px;"
 ></canvas>
 <svelte:window on:resize|passive={handleResize}/>
-<slot dimensions={{width: $width, height: $height}}></slot>
+<slot dimensions={{width: $width, height: $height}} tick={tick}></slot>
 <style>
 </style>
diff --git a/client/svelte-client/src/components/Fps.svelte b/client/svelte-client/src/components/Fps.svelte
index 8891907..43d3c93 100644
--- a/client/svelte-client/src/components/Fps.svelte
+++ b/client/svelte-client/src/components/Fps.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Text
-        {text}
+        text={text}
         fontSize=12
         fontFamily='Courier New'
         align='left'
diff --git a/client/svelte-client/src/components/Score.svelte b/client/svelte-client/src/components/Score.svelte
new file mode 100644
index 0000000..035c13d
--- /dev/null
+++ b/client/svelte-client/src/components/Score.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+
+    import type {GameScore} from "../store/engine";
+    import Text from "./Text.svelte";
+
+    export let dimensions: { width: number, height: number };
+    export let score: GameScore;
+</script>
+
+{#if score}
+    <Text
+            text={score.player1.toString()}
+            fontSize=40
+            fontFamily='Courier New'
+            align='left'
+            baseline='top'
+            x={dimensions.width / 2 - 70}
+            y={20}/>
+
+    <Text
+            text={score.player2.toString()}
+            fontSize=40
+            fontFamily='Courier New'
+            align='left'
+            baseline='top'
+            x={dimensions.width / 2 + 45}
+            y={20}/>
+{/if}
diff --git a/client/svelte-client/src/components/TickWrapper.svelte b/client/svelte-client/src/components/TickWrapper.svelte
index 08fcc49..fa02bc1 100644
--- a/client/svelte-client/src/components/TickWrapper.svelte
+++ b/client/svelte-client/src/components/TickWrapper.svelte
@@ -37,6 +37,5 @@
         }
     }
 </script>
-{JSON.stringify($gameField.score)}
 
 <slot tick={$gameField} inputs={inputs} handleError={handleError}></slot>