show score in gui

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">

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>

client/svelte-client/src/components/Fps.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <Text
-        {text}
+        text={text}
         fontSize=12
         fontFamily='Courier New'
         align='left'

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}

client/svelte-client/src/components/TickWrapper.svelte

@@ -37,6 +37,5 @@
         }
     }
 </script>
-{JSON.stringify($gameField.score)}
 
 <slot tick={$gameField} inputs={inputs} handleError={handleError}></slot>