From a060ddf4e984f739f619e9fffbe2cacbd7eef9ea Mon Sep 17 00:00:00 2001
From: simplonco <simplonco@simplonco.co>
Date: Sat, 14 Jan 2023 21:34:53 +0100
Subject: [PATCH]   changed default behavior of arrows in game + small css
 improvments in game

---
 srcs/requirements/svelte/api_front/public/global.css   |  2 ++
 .../svelte/api_front/src/pages/game/Game.svelte        |  9 +++++++--
 .../svelte/api_front/src/pages/game/client/pong.ts     | 10 ++++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css
index 1390d18f..3383d87c 100644
--- a/srcs/requirements/svelte/api_front/public/global.css
+++ b/srcs/requirements/svelte/api_front/public/global.css
@@ -13,6 +13,8 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	/* tmp? */
 	background: bisque;
+	display: flex;
+	flex-direction: column;
 }
 
 a {
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
index b45ab9bb..ad93cf74 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -348,11 +348,16 @@
 }
 #game_page {
 	margin: 0;
-	padding: 20px;
 	background-color: #222425;
 	position: relative;
 	width: 100%;
-	height: 100%;
+	height: auto;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+#game_option {
+	margin-top: 20px;
 }
 #canvas_container {
 	margin-top: 20px;
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts b/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
index 2dc874b7..30bfb089 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
+++ b/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
@@ -59,14 +59,20 @@ function start_after_countdown()
 	abortControllerKeydown = new AbortController();
 	window.addEventListener(
 		'keydown',
-		(e) => { pong.addKey(e.key); },
+		(e) => {
+			e.preventDefault();
+			pong.addKey(e.key);
+		},
 		{signal: abortControllerKeydown.signal}
 	);
 
 	abortControllerKeyup = new AbortController();
 	window.addEventListener(
 		'keyup',
-		(e) => { pong.deleteKey(e.key); },
+		(e) => {
+			e.preventDefault();
+			pong.deleteKey(e.key);
+		},
 		{signal: abortControllerKeyup.signal}
 	);