was mucking about with trying to integerate the game but will leave that for some other time

srcs/requirements/svelte/api_front/src/pages/GamePage.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+
+  import { initDom } from "../game/client/pong.js";
+  import {onMount} from 'svelte';
+
+  onMount(() => {
+    initDom();
+  })
+
+
+</script>
+
+<body>
+	<div id="div_game_options">
+		<fieldset>
+			<legend>game options</legend>
+			<div>
+				<input type="checkbox" id="multi_balls" name="multi_balls">
+				<label for="multi_balls">multiples balls</label>
+			</div>
+			<div>
+				<input type="checkbox" id="moving_walls" name="moving_walls">
+				<label for="moving_walls">moving walls</label>
+			</div>
+			<div>
+				<label>sound :</label>
+				<input type="radio" id="sound_on" name="sound_selector" checked>
+				<label for="sound_on">on</label>
+				<input type="radio" id="sound_off" name="sound_selector">
+				<label for="sound_off">off</label>
+			</div>
+			<div>
+				<button id="play_pong_button">PLAY</button>
+			</div>
+		</fieldset>
+	</div>
+
+	<div id="div_game_instructions">
+		<h2>--- keys ---</h2>
+		<p>move up: 'w' or 'up arrow'</p>
+		<p>move down: 's' OR 'down arrow'</p>
+		<p>grid on/off: 'g'</p>
+	</div>
+
+	<div id="canvas_container">
+		<!-- <p> =) </p> -->
+	</div>
+
+	<!-- <script src="http://localhost:8080/js/pong.js" type="module" defer></script> -->
+</body>
+
+<style>
+  @font-face {
+    font-family: "Bit5x3";
+    src: url("/fonts/Bit5x3.woff2") format("woff2"),
+      url("/fonts/Bit5x3.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+  body {
+    margin: 0;
+    background-color: #222425;
+  }
+  #canvas_container {
+    margin-top: 20px;
+    text-align: center;
+    /* border: dashed rgb(245, 245, 245) 5px; */
+    /* max-height: 80vh; */
+    /* overflow: hidden; */
+  }
+  #div_game_instructions {
+    text-align: center;
+    font-family: "Bit5x3";
+    color: rgb(245, 245, 245);
+    font-size: large;
+  }
+  #div_game_options {
+    margin-top: 20px;
+    text-align: center;
+    font-family: "Bit5x3";
+    color: rgb(245, 245, 245);
+    font-size: x-large;
+  }
+  #div_game_options fieldset {
+    max-width: 50vw;
+    width: auto;
+    margin: 0 auto;
+  }
+  #div_game_options fieldset div {
+    padding: 10px;
+  }
+  #play_pong_button {
+    font-family: "Bit5x3";
+    color: rgb(245, 245, 245);
+    background-color: #333333;
+    font-size: x-large;
+    padding: 10px;
+  }
+  canvas {
+    background-color: #333333;
+    max-width: 75vw;
+    /* max-height: 100vh; */
+    width: 80%;
+  }
+</style>

srcs/requirements/svelte/api_front/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
 
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
 }