From 1a07065f6abf7e9003ffdb8e4c394096ec967044 Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Sun, 15 Jan 2023 20:52:08 +0100
Subject: [PATCH] CSS smalls changes (headers, ranking colors) + mode "cinema"
 in Game.svelte

---
 .../svelte/api_front/public/global.css        |  3 ++
 .../api_front/src/pages/SplashPage.svelte     | 10 -------
 .../api_front/src/pages/game/Game.svelte      | 30 +++++++++----------
 .../src/pages/game/GameSpectator.svelte       | 25 ++++++++--------
 .../api_front/src/pages/game/Ranking.svelte   | 13 +++-----
 .../svelte/api_front/src/pieces/Header.svelte | 15 ++--------
 6 files changed, 36 insertions(+), 60 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css
index b07ffb9c..d949db3b 100644
--- a/srcs/requirements/svelte/api_front/public/global.css
+++ b/srcs/requirements/svelte/api_front/public/global.css
@@ -1,4 +1,7 @@
 
+.dim_background {
+	background-color: #222;
+}
 
 html, body {
 	position: relative;
diff --git a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
index f3dccddf..c944f34e 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -42,16 +42,6 @@
 </div>
 
 <style>
-@font-face {
-	font-family: "Bit5x3";
-	src:
-		url("/fonts/Bit5x3.woff2") format("woff2"),
-		local("Bit5x3"),
-		url("/fonts/Bit5x3.woff") format("woff");
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
 
 .container {
   height: 100%;
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 62aa8725..f0e44f3d 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -61,7 +61,7 @@
 	})
 
 	function resetPage() {
-		hiddenGame = true;
+		setHiddenGame(true);
 		showGameOptions = true;
 		showInvitations = false;
 		showError = false;
@@ -98,7 +98,7 @@
 					watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
 					watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
 					pong.init(matchOptions, options, gameAreaId, token);
-					hiddenGame = false;
+					setHiddenGame(false);
 				}
 			}
 			else
@@ -136,7 +136,7 @@
 			}
 			pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
 			showWaitPage = false;
-			hiddenGame = false;
+			setHiddenGame(false);
 		}
 	}
 
@@ -213,6 +213,16 @@
 		resetPage();
 	};
 
+	function setHiddenGame(value: boolean) {
+		if (value) {
+			document.getElementById("game_page").classList.remove("dim_background");
+		}
+		else {
+			document.getElementById("game_page").classList.add("dim_background");
+		}
+		hiddenGame = value;
+	}
+
 </script>
 
 <Header />
@@ -352,19 +362,9 @@
 </div> <!-- div "game_page" -->
 
 <style>
-@font-face {
-	font-family: "Bit5x3";
-	src:
-		url("/fonts/Bit5x3.woff2") format("woff2"),
-		local("Bit5x3"),
-		url("/fonts/Bit5x3.woff") format("woff");
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
+
 #game_page {
 	margin: 0;
-	background-color: #222425;
 	position: relative;
 	width: 100%;
 	height: auto;
@@ -384,7 +384,7 @@
 }
 canvas {
 	/* background-color: #ff0000; */
-	background-color: #333333;
+	background-color: #333;
 	max-width: 75vw;
 	/* max-height: 100vh; */
 	width: 80%;
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
index dfa4d63b..1863cac9 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
@@ -45,7 +45,7 @@
 		playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
 		playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
 
-		hiddenGame = false;
+		setHiddenGame(false);
 	};
 
 	const watchGameState = () => {
@@ -70,7 +70,7 @@
 	};
 
 	async function resetPage() {
-		hiddenGame = true;
+		setHiddenGame(true);
 		pongSpectator.destroy();
 		matchList = await fetchMatchList();
 	};
@@ -93,6 +93,16 @@
 		});
 	};
 
+	function setHiddenGame(value: boolean) {
+		if (value) {
+			document.getElementById("game_page").classList.remove("dim_background");
+		}
+		else {
+			document.getElementById("game_page").classList.add("dim_background");
+		}
+		hiddenGame = value;
+	}
+
 </script>
 <!--  -->
 
@@ -164,21 +174,10 @@
 
 <!--  -->
 <style>
-@font-face {
-	font-family: "Bit5x3";
-	src:
-		url("/fonts/Bit5x3.woff2") format("woff2"),
-		local("Bit5x3"),
-		url("/fonts/Bit5x3.woff") format("woff");
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
 
 #game_page {
 	margin: 0;
 	padding: 20px;
-	background-color: #222425;
 	position: relative;
 	width: 100%;
 	height: 100%;
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
index af39892f..ae3e87f1 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
@@ -46,9 +46,9 @@
 				<tr>
 					<th>{i + 1}</th>
 					{#if user.username === currentUser.username}
-						<td><b>You ({user.username})</b></td>
+						<td><b>{user.username} [You]</b></td>
 					{:else}
-					<td>{user.username}</td>
+						<td>{user.username}</td>
 					{/if}
 					<td>{user.stats.winGame}</td>
 					<td>{user.stats.loseGame}</td>
@@ -63,7 +63,7 @@
 
 <style>
 
-		.principal-div {
+	.principal-div {
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -90,15 +90,10 @@
 	}
 
 	.stats-table tbody tr:nth-of-type(even) {
-		background-color: #f3f3f3;
+		background-color: #555;
 	}
 
 	.stats-table tbody tr:last-of-type {
 		border-bottom: 2px solid #618174;
 	}
-
-	.stats-table tbody tr.active-row {
-		font-weight: bold;
-		color: #618174;
-	}
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index 9dfb38f1..35aa8e7d 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -34,24 +34,13 @@
 </div>
 
 <style>
-  @font-face {
-    font-family: "Bit5x3";
-    src:
-      url("/fonts/Bit5x3.woff2") format("woff2"),
-      local("Bit5x3"),
-      url("/fonts/Bit5x3.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-  }
-
   .header div.center button.selected {
     text-decoration: underline;
-    background-color: #2B3A67;
+    background-color: #8c0000;
   }
 
   .header div.center button {
-    background-color: #8c0000;
+    background-color: #444;
     border-color: #071013;
     color: white;
     font-family: "Bit5x3";