From 941b0ea7ea47ee3e4257a604227b109c3b19173d Mon Sep 17 00:00:00 2001 From: LuckyLaszlo Date: Fri, 30 Dec 2022 07:16:39 +0100 Subject: [PATCH] GameSpectator wip + forfeit button + refactoring GameSession --- .../game_back/src/server/class/GameSession.ts | 66 ++++++---- .../game_back/src/server/wsServer.ts | 17 ++- .../src/pages/SpectatorMatchList.svelte | 35 ------ .../api_front/src/pages/game/Game.svelte | 62 ++++++---- .../src/pages/game/GameSpectator.svelte | 116 +++++++++++++++++- .../src/pages/game/client/pongSpectator.ts | 1 + .../svelte/api_front/src/pieces/Header.svelte | 4 +- .../api_front/src/pieces/MatchListElem.svelte | 29 ++++- .../api_front/src/routes/primaryRoutes.js | 4 +- 9 files changed, 236 insertions(+), 98 deletions(-) delete mode 100644 srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte diff --git a/srcs/requirements/game_server/game_back/src/server/class/GameSession.ts b/srcs/requirements/game_server/game_back/src/server/class/GameSession.ts index 322b845d..287c1c02 100644 --- a/srcs/requirements/game_server/game_back/src/server/class/GameSession.ts +++ b/srcs/requirements/game_server/game_back/src/server/class/GameSession.ts @@ -48,7 +48,10 @@ export class GameSession { timeout += c.newRoundDelay*0.5; }); } - resume(s: GameSession) { + resume(s?: GameSession) + { + if (!s) { s = this; } + s.playersMap.forEach( (client) => { client.socket.on("message", clientInputListener); }); @@ -59,7 +62,10 @@ export class GameSession { s.playersUpdateInterval = setInterval(s._playersUpdate, c.playersUpdateIntervalMS, s); s.spectatorsUpdateInterval = setInterval(s._spectatorsUpdate, c.spectatorsUpdateIntervalMS, s); } - pause(s: GameSession) { + pause(s?: GameSession) + { + if (!s) { s = this; } + s.playersMap.forEach( (client) => { client.socket.off("message", clientInputListener); }); @@ -68,6 +74,19 @@ export class GameSession { clearInterval(s.playersUpdateInterval); clearInterval(s.spectatorsUpdateInterval); } + destroy(s?: GameSession) + { + if (!s) { s = this; } + + s.pause(); + + s.spectatorsMap.forEach((client) => { + clientTerminate(client); + }); + s.playersMap.forEach((client) => { + clientTerminate(client); + }); + } instantInputDebug(client: ClientPlayer) { this._handleInput(c.fixedDeltaTime, client); } @@ -200,26 +219,35 @@ export class GameSession { ball.speed = ball.baseSpeed; ball.ballInPlay = true; } - private _checkDisconnexions() { + private _checkDisconnexions() + { if (this.playersMap.size !== 2) { this.matchEnded = true; - if (this.playersMap.size != 0) - { - console.log("Forfeit Ending"); - const gc = this.components; - const luckyWinner: ClientPlayer = this.playersMap.values().next().value; - if (luckyWinner.racket === gc.playerLeft) { - this._matchEnd(en.PlayerSide.left, true); - } - else { - this._matchEnd(en.PlayerSide.right, true); - } + if (this.playersMap.size != 0) { + this._forfeit(); + } + else { + // WIP: envoyer un truc à Nest ? Genre "match draw" + this.destroy(); } return true; } return false; } + private _forfeit() + { + this.matchEnded = true; + console.log("Forfeit Ending"); + const gc = this.components; + const luckyWinner: ClientPlayer = this.playersMap.values().next().value; + if (luckyWinner.racket === gc.playerLeft) { + this._matchEnd(en.PlayerSide.left, true); + } + else { + this._matchEnd(en.PlayerSide.right, true); + } + } private async _matchEnd(winner: en.PlayerSide, forfeit_flag: boolean = false) { this.matchEnded = true; @@ -246,15 +274,7 @@ export class GameSession { }) }); - const gameSession = this; - setTimeout(function kickRemainingClients() { - gameSession.spectatorsMap.forEach((client) => { - clientTerminate(client); - }); - gameSession.playersMap.forEach((client) => { - clientTerminate(client); - }); - }, 15000); + setTimeout(this.destroy, 15000, this); // logs if (winner === en.PlayerSide.left) { diff --git a/srcs/requirements/game_server/game_back/src/server/wsServer.ts b/srcs/requirements/game_server/game_back/src/server/wsServer.ts index d28fcff9..8b3226bb 100644 --- a/srcs/requirements/game_server/game_back/src/server/wsServer.ts +++ b/srcs/requirements/game_server/game_back/src/server/wsServer.ts @@ -40,6 +40,14 @@ function connectionListener(socket: WebSocket, request: IncomingMessage) console.log(`client ${shortId(client.id)} is alive`); }); + socket.on("error", function errorPrint(this: WebSocket, err: Error) { + console.log(`error socket ${shortId(this.id)}:`); + console.log(`${err.name}: ${err.message}`); + if (err.stack) { + console.log(`err.stack: ${err.stack}`); + } + }); + socket.on("message", function log(data: string) { try { const event: ev.ClientEvent = JSON.parse(data); @@ -96,10 +104,13 @@ async function clientAnnounceListener(this: WebSocket, data: string) const player = clientsMap.get(this.id) as ClientPlayer; player.matchOptions = announce.matchOptions; player.token = announce.token; - announce.isInvitedPerson ? player.username = announce.playerTwoUsername : player.username = announce.username; + player.username = announce.username; this.send(JSON.stringify( new ev.EventAssignId(this.id) )); // unused this.send(JSON.stringify( new ev.ServerEvent(en.EventTypes.matchmakingInProgress) )); if (announce.privateMatch) { + if (announce.isInvitedPerson) { + player.username = announce.playerTwoUsername; + } privateMatchmaking(player); } else { @@ -365,9 +376,7 @@ export function clientTerminate(client: Client) client.gameSession.playersMap.delete(client.id); if (client.gameSession.playersMap.size === 0) { - clearInterval(client.gameSession.playersUpdateInterval); - clearInterval(client.gameSession.spectatorsUpdateInterval); - clearInterval(client.gameSession.gameLoopInterval); + client.gameSession.destroy(); gameSessionsMap.delete(client.gameSession.id); } } diff --git a/srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte b/srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte deleted file mode 100644 index 9807f136..00000000 --- a/srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte +++ /dev/null @@ -1,35 +0,0 @@ - - - -
- - {#each arr as match} - - {/each} - - - - - 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 d9b37fe3..8d57ae2c 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte +++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte @@ -111,8 +111,7 @@ } } - // Pour Cherif: renommer en un truc du genre "initGameForInvitedPlayer" ? - const initGameForPrivateParty = async(invitation : any) => + const initGameForInvitedPlayer = async(invitation : any) => { idOfIntevalCheckTerminationOfTheMatch = setInterval(matchTermitation, 1000); optionsAreNotSet = false @@ -206,12 +205,18 @@ if (res.status === 200) { showInvitation() - initGameForPrivateParty(invitation) + initGameForInvitedPlayer(invitation) } //Au final c'est utile ! - initGameForPrivateParty(invitation) + initGameForInvitedPlayer(invitation) // Luke: normal de initGameForInvitedPlayer() sur un "res.status" different de 200 ? } + + function leaveMatch() { + hiddenGame = true; + pong.destroy(); + }; +
@@ -232,9 +237,16 @@ {/if} + + {#if !hiddenGame} +
+ +
+ {/if} + {#if showWaitPage === true}
@@ -282,7 +294,7 @@ {/if}
- +
@@ -343,12 +355,12 @@ /* max-height: 80vh; */ /* overflow: hidden; */ } - -#users_name { - text-align: center; - font-family: "Bit5x3"; - color: rgb(245, 245, 245); - font-size: x-large; +canvas { + /* background-color: #ff0000; */ + background-color: #333333; + max-width: 75vw; + /* max-height: 100vh; */ + width: 80%; } #div_game { @@ -358,15 +370,6 @@ color: rgb(245, 245, 245); font-size: x-large; } - -#error_notification { - text-align: center; - display: block; - font-family: "Bit5x3"; - color: rgb(143, 19, 19); - font-size: x-large; -} - #div_game fieldset { max-width: 50vw; width: auto; @@ -382,12 +385,19 @@ font-size: x-large; padding: 10px; } -canvas { - /* background-color: #ff0000; */ - background-color: #333333; - max-width: 75vw; - /* max-height: 100vh; */ - width: 80%; + +#users_name { /* UNUSED */ + text-align: center; + font-family: "Bit5x3"; + color: rgb(245, 245, 245); + font-size: x-large; +} +#error_notification { /* UNUSED */ + text-align: center; + display: block; + font-family: "Bit5x3"; + color: rgb(143, 19, 19); + font-size: x-large; } 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 7b91b348..eeafa43b 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte +++ b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte @@ -2,6 +2,7 @@ +
+ diff --git a/srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts b/srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts index e02b776b..6c2c963c 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts +++ b/srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts @@ -6,6 +6,7 @@ import { drawLoop } from "./draw.js"; import { initWebSocketSpectator } from "./ws.js"; import { initBase, destroyBase, computeMatchOptions } from "./init.js"; export { computeMatchOptions } from "./init.js"; +export { MatchOptions } from "../shared_js/enums.js" /* TODO: A way to delay the init of variables, but still use "const" not "let" ? */ import { pong, gc } from "./global.js" diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte index 26e483c6..37b8adcc 100644 --- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte +++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte @@ -24,8 +24,8 @@ Potato Pong Logo (push('/'))}>

Potato Pong