diff --git a/srcs/requirements/svelte/api_front/src/App.svelte b/srcs/requirements/svelte/api_front/src/App.svelte index 9c848f74..f69889fe 100644 --- 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('/'); + }; -{#if ($location !== '/')} +{#if ($location !== '/' && $showHeader)}
{/if} 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 855ef0c4..d02e162d 100644 --- 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}
- +
game options @@ -370,7 +376,7 @@ {#if showInvitations}
- +
invitations @@ -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; } 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 fc37f8c0..17f5245f 100644 --- 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} -
+
options @@ -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; } diff --git a/srcs/requirements/svelte/api_front/src/pieces/store_showHeader.ts b/srcs/requirements/svelte/api_front/src/pieces/store_showHeader.ts new file mode 100644 index 00000000..cd33edb0 --- /dev/null +++ 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);