Le multijoueur fonctionne enfin. Mise à jour des scores. Et de la partie.

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

@@ -1,6 +1,6 @@
 
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { onMount, onDestroy } from "svelte";
 	import * as enumeration from './shared_js/enums'
 	import * as constants from './client/constants'
 	import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global'
@@ -14,7 +14,9 @@
 	import { initAudio } from './client/audio';
 	import { pong, gc} from './client/global'
 	import Header from '../../pieces/Header.svelte';
-	import { push } from "svelte-spa-router";
+	import { fade, fly } from 'svelte/transition'
+
+
 
 	//user's stuff
 	let user;
@@ -36,10 +38,10 @@
 	let showInvitations = false;
 	let showGameOption = true;
 	let showError = false;
-	let showCanvas = false;
 
 	let isThereAnyInvitation = false;
-	let invitations;
+	let invitations = [];
+
 
 	let waitingMessage = "Please wait..."
 	let errorMessageWhenAttemptingToGetATicket = "";
@@ -51,10 +53,13 @@
 		.then( x => x.json() );
 	})
 
-	const init = async() => {
+	onDestroy( async() => {
+
+	})
+
+	const initGame = async() => {
 		optionsAreNotSet = false
 		showWaitPage = true
-		console.log("Player two username " + playerTwoUsername)
 		if (multi_balls === true)
 			matchOption |= enumeration.MatchOptions.multiBalls
 		if (moving_walls === true )
@@ -71,11 +76,10 @@
 			})
 		})
 		const responseFromServer = await responseWhenGrantToken;
-		console.log("Response.ok : " + responseFromServer.ok )
-		console.log("//")
-		const responseInjson = await responseFromServer.json()
+		const responseInjson = await responseFromServer.json();
+		const token : string = responseInjson.token;
 		showWaitPage = false
-		if (!responseFromServer.ok || !responseInjson.token)
+		if (!responseFromServer.ok)
 		{
 			errorMessageWhenAttemptingToGetATicket = responseInjson.message;
 			showError = true;
@@ -87,25 +91,37 @@
 				matchOption = 0;
 			}, 5000)
 		}
-		else
+		else if (token)
 		{
-			const token = responseInjson.token
-			console.log("Token === " + token)
-			if (sound === "off") {
-				initAudio(true);
-			}
-			else if (sound === "on") {
-				initAudio(false);
-			}
+			(sound === "off") ? initAudio(true) : initAudio(false);
 			initMatchOptions(matchOption)
 			initPong(new GameArea())
 			initGc(new GameComponentsClient(matchOption, pong.ctx))
 			initStartFunction(start)
-			console.log("Avant init websocket")
+			isSomeoneIsIvited ?
+			initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
 			initWebSocket(matchOption, token, user.username)
 		}
 	}
 
+	const initGameForPrivateParty = async(invitation : any) => {
+		optionsAreNotSet = false
+		showWaitPage = true
+		console.log("invitation : ")
+		console.log(invitation)
+		if (invitation.token)
+		{
+			initMatchOptions(matchOption)
+			initPong(new GameArea())
+			initGc(new GameComponentsClient(matchOption, pong.ctx))
+			initStartFunction(start)
+			showWaitPage = false
+			initWebSocket(matchOption, invitation.token, invitation.playerOneUsername, true, user.username)
+		}
+	}
+
+
+
 	function start() : void {
 		gc.text1.pos.assign(constants.w*0.5, constants.h*0.75);
 		countdown(constants.matchStartDelay/1000, (count: number) => {
@@ -138,28 +154,38 @@
 		showInvitations = true;
 		invitations = await fetch("http://transcendance:8080/api/v2/game/invitations")
 		.then(x => x.json())
-		console.log(...invitations)
+		invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false
 	}
 
-	const rejectInvitation = async() => {
+	const rejectInvitation = async(invitation) => {
 		await fetch("http://transcendance:8080/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))
+		showInvitation()
+	}
 
-	const acceptInvitation = async() => {
+	const acceptInvitation = async(invitation : any) => {
 		await fetch("http://transcendance:8080/api/v2/game/accept",{
 			method: "POST",
 			headers: { 'Content-Type': 'application/json'},
 			body: JSON.stringify({
+				token : invitation.token
+			})
+		})
+		.then(x => x.json())
+		.catch(error => {
+			console.log(error)
 
 		})
-	})
-}
+		showInvitation()
+		initGameForPrivateParty(invitation)
+	}
 
 </script>
 
@@ -169,90 +195,100 @@
 	<div id="preload_font">.</div>
 
 	{#if showError === true}
-	<div id="div_game">
-		<fieldset>
-			<legend>Error</legend>
-					<p>{errorMessageWhenAttemptingToGetATicket}</p>
-					<button id="pong_button">Retry</button>
-		</fieldset>
-	</div>
+		<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
+			<fieldset>
+				<legend>Error</legend>
+						<p>{errorMessageWhenAttemptingToGetATicket}</p>
+						<button id="pong_button">Retry</button>
+			</fieldset>
+		</div>
 	{/if}
 
-{#if optionsAreNotSet}
-	{#if showGameOption === true}
-		<form on:submit|preventDefault={init}>
-			<div id="div_game">
-				<button id="pong_button" on:click={showInvitation}>Show invitations</button>
-					<fieldset>
-						<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>
-							<!-- svelte-ignore a11y-label-has-associated-control -->
-							<label>sound :</label>
-							<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" name="moving_walls" 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>
-	{/if}
-	{#if showInvitations}
-			<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}>V</button>
-										<button id="pong_button" on:click={rejectInvitation}>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>
-	{/if}
-{/if}
-
-	<div id="canvas_container">
-		{#if showWaitPage === true}
-		<div id="div_game">
+	{#if showWaitPage === true}
+		<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
 			<fieldset>
 				<legend>Connecting to the game...</legend>
 						<p>{waitingMessage}</p>
 			</fieldset>
 		</div>
 	{/if}
-		<canvas id="gameArea"></canvas>
-	</div>
+
+
+
+{#if optionsAreNotSet}
+	{#if showGameOption === true}
+		<div id="game_option">
+			<form on:submit|preventDefault={() => initGame()}>
+				<div id="div_game">
+					<button id="pong_button" on:click={showInvitation}>Show invitations</button>
+						<fieldset>
+							<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 !
+									<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}
+
+
+
+<div id="canvas_container">
+	<!-- <p> =) </p> -->
+</div>
 
 </body>
 
@@ -284,6 +320,14 @@ body {
 	/* max-height: 80vh; */
 	/* overflow: hidden; */
 }
+
+#users_name {
+	text-align: center;
+	font-family: "Bit5x3";
+	color: rgb(245, 245, 245);
+	font-size: x-large;
+}
+
 #div_game {
 	text-align: center;
 	font-family: "Bit5x3";

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

@@ -9,10 +9,13 @@ export class GameArea {
 	canvas: HTMLCanvasElement;
 	ctx: CanvasRenderingContext2D;
 	constructor() {
-		this.canvas = document.getElementById("gameArea");
+		this.canvas = document.createElement("canvas");
 		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/ws.ts

@@ -34,6 +34,8 @@ export const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refa
 export function initWebSocket(options: en.MatchOptions, token: string, username: string, privateMatch = false, playerTwoUsername?: string)
 {
 	socket = new WebSocket(wsUrl, "json");
+	console.log("Infos from ws.ts : options => " + options + " token => " + token + " username => " + username + " priavte match => " +  privateMatch
+	 + " player two => " + playerTwoUsername)
 	socket.addEventListener("open", (event) => {
 		if (privateMatch) {
 			socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, token, username, privateMatch, playerTwoUsername) ));