Game page CSS adjustements and hidden header.

2023-01-17 14:31:20 +01:00
parent d8317350b0
commit 44f9f8e21b
4 changed files with 88 additions and 52 deletions
--- a/srcs/requirements/svelte/api_front/src/App.svelte
+++ b/srcs/requirements/svelte/api_front/src/App.svelte
@@ -4,18 +4,17 @@
 	import { location } from 'svelte-spa-router';
 	import Chat from './pieces/chat/Chat.svelte';
 	import Header from './pieces/Header.svelte';
+	import { showHeader } from './pieces/store_showHeader';

-  const conditionsFailed = (event) => {
-    console.error('conditionsFailed event', event.detail);
-    // i mean i guess i can just leave this in there permanently?
-
-    // replace('/unauthorized-access');
-    replace('/');
-  };
+	const conditionsFailed = (event) => {
+		console.error('conditionsFailed event', event.detail);
+		// replace('/unauthorized-access');
+		replace('/');
+	};

 </script>

-{#if ($location !== '/')}
+{#if ($location !== '/' && $showHeader)}
 	<Header/>
 {/if}

--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -9,6 +9,7 @@
 	import { gameState } from "./client/ws";

 	import { invited_username } from '../../pieces/store_invitation';
+	import { showHeader } from '../../pieces/store_showHeader';

 	//user's stuff
 	let user;
@@ -61,6 +62,7 @@
 			clearTimeout(value);
 		});
 		pong.destroy();
+		setHiddenGame(true);
 	})

 	function resetPage() {
@@ -73,6 +75,12 @@
 		pong.destroy();
 	};

+	function leaveMatch() {
+		clearInterval(watchMatchStartInterval);
+		clearInterval(watchGameStateInterval);
+		resetPage();
+	};
+
 	const initGame = async() =>
 	{
 		showWaitPage = true;
@@ -239,20 +247,18 @@
 		});
 	}

-	function leaveMatch() {
-		clearInterval(watchMatchStartInterval);
-		clearInterval(watchGameStateInterval);
-		resetPage();
-	};
-
 	let game_page_class = "";
 	function setHiddenGame(value: boolean)
 	{
-		if (value) {
+		if (value === true) {
 			game_page_class = "";
+			window.document.body.classList.remove('dim_background');
+			showHeader.set(true);
 		}
 		else {
 			game_page_class = "dim_background";
+			window.document.body.classList.add('dim_background');
+			showHeader.set(false);
 		}
 		hiddenGame = value;
 	}
@@ -323,7 +329,7 @@
 	{#if hiddenGame}
 		{#if showGameOptions}
 			<div class="div_game" id="game_options">
-				<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
+				<button class="pong_button game_options_button" on:click={fetchInvitations}>Show invitations</button>
 				<fieldset in:fly="{{ y: 10, duration: 1000 }}">
 					<legend>game options</legend>

@@ -370,7 +376,7 @@

 		{#if showInvitations}
 			<div class="div_game" id="game_invitations">
-				<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
+				<button class="pong_button game_options_button" on:click={switchToGameOptions}>Play a Game</button>
 				<fieldset in:fly="{{ y: 10, duration: 1000 }}">
 					<legend>invitations</legend>
 					<button class="pong_button" on:click={fetchInvitations}>Reload</button>
@@ -408,6 +414,10 @@
 	background-color: #222;
 }

+:global(body.dim_background) {
+	background-color: #222;
+}
+
 #game_page {
 	margin: 0;
 	position: relative;
@@ -418,8 +428,9 @@
 	flex-grow: 1;
 }

-#game_options, #game_invitations {
-	margin-top: 20px;
+.game_options_button {
+	margin-top: 15px;
+	margin-bottom: 15px;
 }

 #canvas_container {
@@ -430,11 +441,9 @@
 	/* overflow: hidden; */
 }
 canvas {
-	/* background-color: #ff0000; */
-	background-color: #333;
-	max-width: 75vw;
 	font-family: "Bit5x3";
-	/* max-height: 100vh; */
+	background-color: #333;
+	max-width: 65vw;
 	width: 80%;
 }

@@ -460,10 +469,10 @@ canvas {
 	padding: 10px;
 }
 .avatar {
-    min-height: 100px;
-    min-width: 100px;
+	min-height: 5vw;
+	min-width: 5vw;
 	
-    max-width: 100px;
-	max-height: 100px;
+	max-width: 5vw;
+	max-height: 5vw;
 }
 </style>
--- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
@@ -10,6 +10,8 @@
 	import * as pongSpectator from "./client/pongSpectator";
 	import { gameState } from "./client/ws";

+	import { showHeader } from '../../pieces/store_showHeader';
+
 	let playerOneAvatar = "";
 	let playerTwoAvatar = "";

@@ -26,7 +28,7 @@
 	let timeoutArr = [];

 	onMount( async() => {
-		matchList = await fetchMatchList();
+		await fetchMatchList();
 	})

 	onDestroy( async() => {
@@ -35,8 +37,20 @@
 			clearTimeout(value);
 		});
 		pongSpectator.destroy();
+		setHiddenGame(true);
 	})

+	async function resetPage() {
+		setHiddenGame(true);
+		pongSpectator.destroy();
+		await fetchMatchList();
+	};
+
+	function leaveMatch() {
+		clearInterval(watchGameStateInterval);
+		resetPage();
+	};
+
 	async function initGameSpectator(match: Match)
 	{
 		watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
@@ -68,20 +82,9 @@
 		}
 	}

-	function leaveMatch() {
-		clearInterval(watchGameStateInterval);
-		resetPage();
-	};
-
-	async function resetPage() {
-		setHiddenGame(true);
-		pongSpectator.destroy();
-		matchList = await fetchMatchList();
-	};
-
 	async function fetchMatchList()
 	{
-		return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
+		matchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
 		.then((response) => {
 			if (!response.ok) {
 				throw new Error("All matchs not retrieved");
@@ -100,11 +103,15 @@
 	let game_page_class = "";
 	function setHiddenGame(value: boolean)
 	{
-		if (value) {
+		if (value === true) {
 			game_page_class = "";
+			window.document.body.classList.remove('dim_background');
+			showHeader.set(true);
 		}
 		else {
 			game_page_class = "dim_background";
+			window.document.body.classList.add('dim_background');
+			showHeader.set(false);
 		}
 		hiddenGame = value;
 	}
@@ -145,7 +152,7 @@
 <!--  -->

 	{#if hiddenGame}
-		<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
+		<div class="div_game game_options" in:fly="{{ y: 10, duration: 1000 }}">
 			<fieldset>
 				<legend>options</legend>
 				<button class="pong_button" on:click={fetchMatchList}>Reload</button>
@@ -194,14 +201,34 @@
 	background-color: #222;
 }

-#game_page {
+:global(body.dim_background) {
+	background-color: #222;
+}
+
+/* Possible rollback, demander à Hugo */
+/* #game_page {
 	margin: 0;
 	padding: 20px;
 	position: relative;
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;
+} */
+#game_page {
+	margin: 0;
+	position: relative;
+	width: 100%;
+	height: auto;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
 }
+
+.game_options {
+	margin-top: 15px;
+	margin-bottom: 15px;
+}
+
 #canvas_container {
 	margin-top: 20px;
 	text-align: center;
@@ -210,14 +237,11 @@
 	/* overflow: hidden; */
 }
 canvas {
-	/* background-color: #ff0000; */
-	background-color: #333333;
-	max-width: 75vw;
 	font-family: "Bit5x3";
-	/* max-height: 100vh; */
+	background-color: #333;
+	max-width: 65vw;
 	width: 80%;
 }
-
 .div_game {
 	text-align: center;
 	font-family: "PressStart2P";
@@ -244,10 +268,10 @@ canvas {
 	font-size: 1vw;
 }
 .avatar {
-    min-height: 100px;
-    min-width: 100px;
+	min-height: 5vw;
+	min-width: 5vw;
 	
-    max-width: 100px;
-	max-height: 100px;
+	max-width: 5vw;
+	max-height: 5vw;
 }
 </style>
--- a/srcs/requirements/svelte/api_front/src/pieces/store_showHeader.ts
+++ b/srcs/requirements/svelte/api_front/src/pieces/store_showHeader.ts
@@ -0,0 +1,4 @@
+
+import { writable } from 'svelte/store';
+
+export const showHeader = writable(true);