diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css index d949db3b..ef988c0e 100644 --- a/srcs/requirements/svelte/api_front/public/global.css +++ b/srcs/requirements/svelte/api_front/public/global.css @@ -1,8 +1,4 @@ -.dim_background { - background-color: #222; -} - html, body { position: relative; width: 100%; diff --git a/srcs/requirements/svelte/api_front/src/App.svelte b/srcs/requirements/svelte/api_front/src/App.svelte index 1ed6baff..01902ed6 100644 --- a/srcs/requirements/svelte/api_front/src/App.svelte +++ b/srcs/requirements/svelte/api_front/src/App.svelte @@ -1,6 +1,8 @@ +{#if ($location !== '/')} +
+{/if} + diff --git a/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte b/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte index da6072d3..357ece2e 100644 --- a/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte +++ b/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte @@ -1,6 +1,5 @@ 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 1463c8ae..3cf3590f 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte +++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte @@ -3,7 +3,6 @@ import { onMount, onDestroy } from "svelte"; import { fade, fly } from 'svelte/transition'; - import Header from '../../pieces/Header.svelte'; import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils"; import * as pong from "./client/pong"; @@ -35,14 +34,15 @@ const watchGameStateIntervalRate = 142; let watchMatchStartInterval; const watchMatchStartIntervalRate = 111; + let timeoutArr = []; onMount( async() => { user = await fetchUser(); allUsers = await fetchAllUsers(); if (!user) { - showError = true; errorMessage = "User load failed"; + showError = true; return; } @@ -57,6 +57,9 @@ onDestroy( async() => { clearInterval(watchMatchStartInterval); clearInterval(watchGameStateInterval); + timeoutArr.forEach((value) => { + clearTimeout(value); + }); pong.destroy(); }) @@ -73,9 +76,9 @@ const initGame = async() => { showWaitPage = true; + const matchOptions = pong.computeMatchOptions(options); - try { - const response = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, { + fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, { method : "POST", headers : {'Content-Type': 'application/json'}, body : JSON.stringify({ @@ -84,11 +87,15 @@ gameOptions : matchOptions, isGameIsWithInvitation : options.isSomeoneIsInvited }) - }); - console.log("status : " + response.status); - const responseBody = await response.json(); - const token : string = responseBody.token; - if (response.ok && token) + }) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP ${response.status}`); + } + return response.json(); + }) + .then((body) => { + if (body.token) { if (options.isSomeoneIsInvited) { options.reset(user.username); @@ -97,25 +104,25 @@ else { watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate); watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate); - pong.init(matchOptions, options, gameAreaId, token); + pong.init(matchOptions, options, gameAreaId, body.token); setHiddenGame(false); } } - else - { - console.log(responseBody); - console.log("On refuse le ticket"); - errorMessage = responseBody.message; - showError = true; - options.reset(user.username); - setTimeout(() => { - showError = false; - errorMessage = ""; - }, 5000); + else { + throw new Error(`body.token undefined`); } - } catch (e) { - console.log(e); - } + }) + .catch((error) => { + console.log("catch initGame: ", error); + errorMessage = "Get ticket error"; + showError = true; + options.reset(user.username); + const timeout = setTimeout(() => { + showError = false; + }, 5000); + timeoutArr = timeoutArr.concat([timeout]); + }); + showWaitPage = false; } @@ -159,10 +166,11 @@ gameState.matchEnded = gameState.matchEnded; // trigger Svelte reactivity gameState.matchAborted = gameState.matchAborted; // trigger Svelte reactivity console.log("watchGameState, end"); - setTimeout(() => { + const timeout = setTimeout(() => { resetPage(); console.log("watchGameState : setTimeout"); }, 5000); + timeoutArr = timeoutArr.concat([timeout]); } } @@ -174,37 +182,61 @@ const fetchInvitations = async() => { console.log("fetchInvitations"); invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`) - .then(x => x.json()); + .then((response) => { + if (!response.ok) { + throw new Error("HTTP " + response.status); + } + return response.json(); + }) + .catch((error) => { + console.log("catch fetchInvitations: ", error); + return []; + }); + showGameOptions = false; showInvitations = true; } - const rejectInvitation = async(invitation) => { - await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/decline`, { + const rejectInvitation = async(invitation) => + { + fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/decline`, { method: "POST", headers: { 'Content-Type': 'application/json'}, body: JSON.stringify({ token : invitation.token }) }) - .then(x => x.json()) - .catch(error => console.log(error)); + .then((response) => { + if (!response.ok) { + throw new Error("HTTP " + response.status); + } + }) + .catch((error) => { + console.log("catch rejectInvitation: ", error); + }); + fetchInvitations(); } const acceptInvitation = async(invitation : any) => { - const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, { + fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, { method: "POST", headers: { 'Content-Type': 'application/json'}, body: JSON.stringify({ token : invitation.token }) - }).catch(error => console.log(error)); - - if (res && res.ok) { + }) + .then((response) => { + if (!response.ok) { + throw new Error("HTTP " + response.status); + } initInvitationGame(invitation); - } + }) + .catch((error) => { + console.log("catch rejectInvitation: ", error); + fetchInvitations(); + }); } function leaveMatch() { @@ -213,22 +245,23 @@ resetPage(); }; - function setHiddenGame(value: boolean) { + let game_page_class = ""; + function setHiddenGame(value: boolean) + { if (value) { - document.getElementById("game_page").classList.remove("dim_background"); + game_page_class = ""; } else { - document.getElementById("game_page").classList.add("dim_background"); + game_page_class = "dim_background"; } hiddenGame = value; } -
-
+
{#if showError}
@@ -318,7 +351,7 @@ {#if options.isSomeoneIsInvited} @@ -361,6 +394,10 @@