changes in Game.svelte

+ playerOne is always in left
+ kick players after match end
+ slow down ball and player
+ re in Makefile

Makefile

@@ -24,8 +24,7 @@ start_dev:
 start_prod:
 	docker compose -f ${DOCKERCOMPOSEPATH} start prod
 
-restart:stop
+re: down dev
-		@make up
 
 down:
 	docker compose -f ${DOCKERCOMPOSEPATH} -v down

memo.txt

@@ -2,13 +2,14 @@ DONE :
 
 
 TODO :
-	routes gameServer -> Nest :
+	- refactoring,
-		- validation
+		Write independent init script like old pong.ts,
-		- creation de partie
+		to limit the numbers of imports and clutter in svelte script.
-		- fin de partie
+	- If in game, destroy game scripts stuff when changing page.
+		(I need to dig deeper in svelte to know how this could work)
 	- mode spectateur
-	- quelques routes cote serveur
+		- quelques routes cote serveur
-	- une interface cote front (liste des matchs en cours)
+		- une interface cote front (liste des matchs en cours)
 	- etat du client (en ligne, en jeu, ...)
 	- le chat
 
@@ -20,6 +21,9 @@ TODO :
 BUG :
 	- Bug de son étonnant dans le front, ça pop une fois de temps en temps :
 	Uncaught (in promise) DOMException: The element has no supported sources.
+	18.ogg et 24.ogg bug peut-etre.
+	- l'avatar ne se charge pas après avoir redémarré les containers (mais sans avoir supprimé les volumes)
+	normal ou oubli ?
 -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
 
 - Comment fonctionne .env ? Comment faire pour ne pas le push sur le depot ?

srcs/requirements/game_server/game_back/src/server/class/GameSession.ts

@@ -4,7 +4,7 @@ import * as ev from "../../shared_js/class/Event.js"
 import * as c from "../constants.js"
 import { ClientPlayer, ClientSpectator } from "./Client";
 import { GameComponentsServer } from "./GameComponentsServer.js";
-import { clientInputListener } from "../wsServer.js";
+import { clientInputListener, clientTerminate } from "../wsServer.js";
 import { random } from "../utils.js";
 import { Ball } from "../../shared_js/class/Rectangle.js";
 import { wallsMovements } from "../../shared_js/wallsMovement.js";
@@ -246,6 +246,16 @@ export class GameSession {
 			})
 		});
 
+		const gameSession = this;
+		setTimeout(function kickRemainingClients() {
+				gameSession.spectatorsMap.forEach((client) => {
+					clientTerminate(client);
+				});
+				gameSession.playersMap.forEach((client) => {
+					clientTerminate(client);
+				});
+		}, 15000);
+
 		// logs
 		if (winner === en.PlayerSide.left) {
 			console.log("Player Left WIN");

srcs/requirements/game_server/game_back/src/server/wsServer.ts

@@ -202,19 +202,21 @@ function createGameSession(playersArr: ClientPlayer[], matchOptions: en.MatchOpt
 		client.gameSession = gameSession;
 		gameSession.playersMap.set(client.id, client);
 		gameSession.unreadyPlayersMap.set(client.id, client);
-	});
-
-	// WIP: Not pretty, hardcoded two players.
-	// Could be done in gameSession maybe ?
-	playersArr[0].racket = gameSession.components.playerRight;
-	playersArr[1].racket = gameSession.components.playerLeft;
-
-	playersArr.forEach((client) => {
 		client.socket.once("message", playerReadyConfirmationListener);
 	});
 
-	playersArr[0].socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.right) ));
+	// REFACTORING: Not pretty, hardcoded two players.
-	playersArr[1].socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.left) ));
+	// Could be done in gameSession maybe ?
+	const gameSessionPlayersIterator = gameSession.playersMap.values();
+	let player: ClientPlayer;
+	player = (<ClientPlayer>gameSessionPlayersIterator.next().value);
+	player.racket = gameSession.components.playerLeft;
+	player.socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.left) ));
+
+	player = (<ClientPlayer>gameSessionPlayersIterator.next().value);
+	player.racket = gameSession.components.playerRight;
+	player.socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.right) ));
+	// REFACTORING
 
 	setTimeout(function abortMatch() {
 		if (gameSession.unreadyPlayersMap.size !== 0)
@@ -335,7 +337,7 @@ const pingInterval = setInterval( () => {
 }, 4200);
 
 
-function clientTerminate(client: Client)
+export function clientTerminate(client: Client)
 {
 	client.socket.terminate();
 	if (client.gameSession)

srcs/requirements/game_server/game_back/src/shared_js/constants.ts

@@ -11,8 +11,8 @@ export	const pw = Math.floor(w*0.017);
 export	const ph = pw*6;
 export	const ballSize = pw;
 export	const wallSize = Math.floor(w*0.01);
-export	const racketSpeed = Math.floor(w*0.66); // pixel per second
+export	const racketSpeed = Math.floor(w*0.60); // pixel per second
-export	const ballSpeed = Math.floor(w*0.66); // pixel per second
+export	const ballSpeed = Math.floor(w*0.55); // pixel per second
 export	const ballSpeedIncrease = Math.floor(ballSpeed*0.05); // pixel per second
 
 export	const normalizedSpeed = false; // for consistency in speed independent of direction

srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Header from '../pieces/Header.svelte';
 	import MatchListElem from "../pieces/MatchListElem.svelte";
 
 	let arr = [
@@ -21,6 +22,7 @@
 </script>
 <!--  -->
 
+<Header/>
 <menu>
 	{#each arr as match}
 		<MatchListElem match={match}/>

srcs/requirements/svelte/api_front/src/pages/game/Game.svelte

@@ -1,9 +1,9 @@
 
 <script lang="ts">
-	import { onMount, onDestroy } from "svelte";
+	/* TODO Luke: refactoring */
-	import * as enumeration from './shared_js/enums'
+	import * as enumeration from './shared_js/enums';
-	import * as constants from './client/constants'
+	import * as constants from './client/constants';
-	import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global'
+	import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global';
 	import { GameArea } from './client/class/GameArea';
 	import { GameComponentsClient } from './client/class/GameComponentsClient';
 	import { handleInput } from './client/handleInput';
@@ -13,8 +13,10 @@
 	import { initWebSocket } from './client/ws';
 	import { initAudio } from './client/audio';
 	import { pong, gc} from './client/global'
+
+	import { onMount, onDestroy } from "svelte";
 	import Header from '../../pieces/Header.svelte';
-	import { fade, fly } from 'svelte/transition'
+	import { fade, fly } from 'svelte/transition';
 
 
 
@@ -24,11 +26,13 @@
 
 	//Game's stuff nest side
 	let optionsAreNotSet = true;
-	let isSomeoneIsIvited = false;
+	let isSomeoneIsInvited = false;
 	let playerTwoUsername = "";
-
+	
-	//Game's stuff gameserver side
+	//Game's stuff client side only
 	let sound = "on";
+	let gameAreaId = "game_area";
+	//Game's stuff gameserver side
 	let multi_balls = false;
 	let moving_walls = false;
 	let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
@@ -38,6 +42,7 @@
 	let showInvitations = false;
 	let showGameOption = true;
 	let showError = false;
+	let hiddenGame = true;
 
 	let isThereAnyInvitation = false;
 	let invitations = [];
@@ -72,7 +77,7 @@
 				playerOneUsername : user.username,
 				playerTwoUsername : playerTwoUsername,
 				gameOptions : matchOption,
-				isGameIsWithInvitation : isSomeoneIsIvited
+				isGameIsWithInvitation : isSomeoneIsInvited
 			})
 		})
 		const responseFromServer = await responseWhenGrantToken;
@@ -95,10 +100,11 @@
 		{
 			(sound === "off") ? initAudio(true) : initAudio(false);
 			initMatchOptions(matchOption)
-			initPong(new GameArea())
+			initPong(new GameArea(gameAreaId))
 			initGc(new GameComponentsClient(matchOption, pong.ctx))
 			initStartFunction(start)
-			isSomeoneIsIvited ?
+			hiddenGame = false;
+			isSomeoneIsInvited ?
 			initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
 			initWebSocket(matchOption, token, user.username)
 		}
@@ -112,10 +118,11 @@
 		if (invitation.token)
 		{
 			initMatchOptions(matchOption)
-			initPong(new GameArea())
+			initPong(new GameArea(gameAreaId))
 			initGc(new GameComponentsClient(matchOption, pong.ctx))
 			initStartFunction(start)
 			showWaitPage = false
+			hiddenGame = false;
 			initWebSocket(matchOption, invitation.token, invitation.playerOneUsername, true, user.username)
 		}
 	}
@@ -186,13 +193,16 @@
 		showInvitation()
 		initGameForPrivateParty(invitation)
 	}
-
 </script>
 
 <Header />
+<!-- <div id="game_page"> Replacement for <body>.
+	Might become useless after CSS rework. -->
+<div id="game_page">
 
-<body>
+	<div id="canvas_container" hidden={hiddenGame}>
-	<div id="preload_font">.</div>
+		<canvas id={gameAreaId}/>
+	</div>
 
 	{#if showError === true}
 		<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
@@ -215,106 +225,93 @@
 
 
 
-{#if optionsAreNotSet}
+	{#if optionsAreNotSet}
-	{#if showGameOption === true}
+		{#if showGameOption === true}
-		<div id="game_option">
+			<div id="game_option">
-			<form on:submit|preventDefault={() => initGame()}>
+				<form on:submit|preventDefault={() => initGame()}>
-				<div id="div_game">
+					<div id="div_game">
-					<button id="pong_button" on:click={showInvitation}>Show invitations</button>
+						<button id="pong_button" on:click={showInvitation}>Show invitations</button>
-						<fieldset>
+							<fieldset>
-							<legend>game options</legend>
+								<legend>game options</legend>
-							<div>
-								<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}>
-								<label for="multi_balls">Multiples balls</label>
-							</div>
-							<div>
-								<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={moving_walls}>
-								<label for="moving_walls">Moving walls</label>
-							</div>
-							<div>
-								<p>sound :</p>
-								<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
-								<label for="sound_on">on</label>
-								<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
-								<label for="sound_off">off</label>
-							</div>
-							<div>
-								<input type="checkbox" id="isSomeoneIsIvited" bind:checked={isSomeoneIsIvited}>
-								<label for="moving_walls">Invite a friend</label>
-							</div>
-							{#if isSomeoneIsIvited === true}
-								<select bind:value={playerTwoUsername}>
-									{#each allUsers as user }
-										<option value={user.username}>{user.username}</option>
-									{/each}
-								</select>
-							{/if}
-							<div>
-								<button id="pong_button" >PLAY</button>
-							</div>
-						</fieldset>
-				</div>
-
-			</form>
-		</div>
-	{/if}
-
-	{#if showInvitations}
-		<div id="invitations_options" in:fly="{{ y: 10, duration: 1000 }}">
-			<div id="div_game">
-				<button id="pong_button" on:click={showOptions}>Play a Game</button>
-				<fieldset>
-					<legend>Current invitation(s)</legend>
-					{#if isThereAnyInvitation}
-							{#each invitations as invitation }
 								<div>
-									{invitation.playerOneUsername} has invited you to play a pong !
+									<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}>
-									<button id="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
+									<label for="multi_balls">Multiples balls</label>
-									<button id="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
 								</div>
-							{/each}
+								<div>
-					{/if}
+									<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={moving_walls}>
-					{#if isThereAnyInvitation === false}
+									<label for="moving_walls">Moving walls</label>
-						<p>Currently, no one asked to play with you.</p>
+								</div>
-							<button id="pong_button" on:click={showInvitation}>Reload</button>
+								<div>
-					{/if}
+									<p>sound :</p>
-				</fieldset>
+									<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
+									<label for="sound_on">on</label>
+									<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
+									<label for="sound_off">off</label>
+								</div>
+								<div>
+									<input type="checkbox" id="isSomeoneIsInvited" bind:checked={isSomeoneIsInvited}>
+									<label for="moving_walls">Invite a friend</label>
+								</div>
+								{#if isSomeoneIsInvited === true}
+									<select bind:value={playerTwoUsername}>
+										{#each allUsers as user }
+											<option value={user.username}>{user.username}</option>
+										{/each}
+									</select>
+								{/if}
+								<div>
+									<button id="pong_button" >PLAY</button>
+								</div>
+							</fieldset>
+					</div>
+
+				</form>
 			</div>
-		</div>
+		{/if}
+
+		{#if showInvitations}
+			<div id="invitations_options" in:fly="{{ y: 10, duration: 1000 }}">
+				<div id="div_game">
+					<button id="pong_button" on:click={showOptions}>Play a Game</button>
+					<fieldset>
+						<legend>Current invitation(s)</legend>
+						{#if isThereAnyInvitation}
+								{#each invitations as invitation }
+									<div>
+										{invitation.playerOneUsername} has invited you to play a pong !
+										<button id="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
+										<button id="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
+									</div>
+								{/each}
+						{/if}
+						{#if isThereAnyInvitation === false}
+							<p>Currently, no one asked to play with you.</p>
+								<button id="pong_button" on:click={showInvitation}>Reload</button>
+						{/if}
+					</fieldset>
+				</div>
+			</div>
+		{/if}
 	{/if}
-{/if}
-
-
-
-<div id="canvas_container">
-	<!-- <p> =) </p> -->
 </div>
 
-</body>
-
-
-
 <style>
-
 @font-face {
 	font-family: "Bit5x3";
-	src: url("/fonts/Bit5x3.woff2") format("woff2"),local("Bit5x3"), url("/fonts/Bit5x3.woff") format("woff");
+	src:
+		url("/fonts/Bit5x3.woff2") format("woff2"),
+		local("Bit5x3"),
+		url("/fonts/Bit5x3.woff") format("woff");
 	font-weight: normal;
 	font-style: normal;
 	font-display: swap;
 }
-#preload_font {
+#game_page {
-	font-family: "Bit5x3";
-	opacity:0;
-	height:0;
-	width:0;
-	display:inline-block;
-}
-body {
 	margin: 0;
 	background-color: #222425;
 }
 #canvas_container {
+	margin-top: 20px;
 	text-align: center;
 	/* border: dashed rgb(245, 245, 245) 5px; */
 	/* max-height: 80vh; */
@@ -329,6 +326,7 @@ body {
 }
 
 #div_game {
+	margin-top: 20px;
 	text-align: center;
 	font-family: "Bit5x3";
 	color: rgb(245, 245, 245);
@@ -359,7 +357,8 @@ body {
 	padding: 10px;
 }
 canvas {
-	background-color: #ff0000;
+	/* background-color: #ff0000; */
+	background-color: #333333;
 	max-width: 75vw;
 	/* max-height: 100vh; */
 	width: 80%;

srcs/requirements/svelte/api_front/src/pages/game/client/class/GameArea.ts

@@ -8,14 +8,18 @@ export class GameArea {
 	drawLoopInterval: number = 0;
 	canvas: HTMLCanvasElement;
 	ctx: CanvasRenderingContext2D;
-	constructor() {
+	constructor(canvas_id: string) {
-		this.canvas = document.createElement("canvas");
+		const canvas = document.getElementById("game_area");
+		if (canvas && canvas instanceof HTMLCanvasElement) {
+			this.canvas = canvas;
+		}
+		else {
+			console.log("GameArea init error, invalid canvas_id");
+			return;
+		}
 		this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D;
 		this.canvas.width = c.CanvasWidth;
 		this.canvas.height = c.CanvasWidth / c.CanvasRatio;
-		let container = document.getElementById("canvas_container");
-		if (container)
-			container.insertBefore(this.canvas, container.childNodes[0]);
 	}
 	addKey(key: string) {
 		key = key.toLowerCase();

srcs/requirements/svelte/api_front/src/pages/game/client/handleInput.ts

@@ -4,6 +4,7 @@ import * as ev from "../shared_js/class/Event.js"
 import * as en from "../shared_js/enums.js"
 import { InputHistory }  from "./class/InputHistory.js"
 import * as c from "./constants.js";
+import { matchEnded } from "./ws.js";
 
 export let gridDisplay = false;
 
@@ -43,7 +44,9 @@ export function handleInput()
 		playerMovements(delta_time, keys);
 	}
 
-	socket.send(JSON.stringify(inputState));
+	if (!matchEnded) {
+		socket.send(JSON.stringify(inputState));
+	}
 	// setTimeout(testInputDelay, 100);
 	inputHistoryArr.push(new InputHistory(inputState, delta_time));
 

srcs/requirements/svelte/api_front/src/pages/game/client/ws.ts

@@ -10,6 +10,8 @@ import { soundRoblox } from "./audio.js"
 import { sleep } from "./utils.js";
 import { Vector, VectorInteger } from "../shared_js/class/Vector.js";
 
+export let matchEnded = false;
+
 class ClientInfo {
 	id = "";
 	side: en.PlayerSide;
@@ -187,6 +189,8 @@ function scoreUpdate(data: ev.EventScoreUpdate)
 
 function matchEnd(data: ev.EventMatchEnd)
 {
+	matchEnded = true;
+	socket.close();
 	if (data.winner === clientInfo.side) {
 		msg.win();
 		if (data.forfeit) {
@@ -196,13 +200,8 @@ function matchEnd(data: ev.EventMatchEnd)
 	else {
 		msg.lose();
 	}
-	// matchEnded = true; // unused
 }
 
-// export let matchEnded = false; // unused
-
-
-
 /* Spectator */
 
 export function initWebSocketSpectator(gameSessionId: string)
@@ -301,6 +300,8 @@ function scoreUpdateSpectator(data: ev.EventScoreUpdate)
 function matchEndSpectator(data: ev.EventMatchEnd)
 {
 	console.log("matchEndSpectator");
+	matchEnded = true;
+	socket.close();
 	// WIP
 	/* msg.win();
 	if (data.forfeit) {

srcs/requirements/svelte/api_front/src/pages/game/shared_js/constants.ts

@@ -11,8 +11,8 @@ export	const pw = Math.floor(w*0.017);
 export	const ph = pw*6;
 export	const ballSize = pw;
 export	const wallSize = Math.floor(w*0.01);
-export	const racketSpeed = Math.floor(w*0.66); // pixel per second
+export	const racketSpeed = Math.floor(w*0.60); // pixel per second
-export	const ballSpeed = Math.floor(w*0.66); // pixel per second
+export	const ballSpeed = Math.floor(w*0.55); // pixel per second
 export	const ballSpeedIncrease = Math.floor(ballSpeed*0.05); // pixel per second
 
 export	const normalizedSpeed = false; // for consistency in speed independent of direction

srcs/requirements/svelte/api_front/src/pieces/Header.svelte

@@ -25,6 +25,7 @@
   <h1>Potato Pong</h1>
   <nav>
 	<button on:click={() => (push('/game'))}>Game</button>
+	<button on:click={() => (push('/matchlist'))}>Match List</button>
     {#if $location !== '/profile'}
       <button on:click={() => (push('/profile'))}>My Profile</button>
     {:else if $location === '/profile'}