From 7de9f3a9f1088e184d03375af33c53433fa67902 Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Thu, 22 Dec 2022 05:15:32 +0100
Subject: [PATCH] refactoring Game.svelte (INVITATION NOT TESTED !)

---
 .../api_front/src/pages/game/Game.svelte      | 129 ++++++------------
 .../api_front/src/pages/game/client/audio.ts  |   7 +-
 .../api_front/src/pages/game/client/pong.ts   |  57 ++++----
 3 files changed, 80 insertions(+), 113 deletions(-)

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 6f2b5248..cb65d42c 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -1,41 +1,23 @@
 
 <script lang="ts">
-	/* TODO Luke: refactoring */
-	import * as enumeration from './shared_js/enums';
-	import * as constants from './client/constants';
-	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';
-	import { gameLoop } from './client/gameLoop'
-	import { drawLoop } from './client/draw';
-	import { countdown } from './client/utils'
-	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 * as enumeration from './shared_js/enums';
+	import * as pong from "./client/pong"
+	import * as pongSpectator from "./client/pongSpectator" // TODO init spectator
 
 	//user's stuff
 	let user;
 	let allUsers;
 
-	//Game's stuff nest side
+	//Game's stuff
 	let optionsAreNotSet = true;
-	let isSomeoneIsInvited = false;
-	let playerTwoUsername = "";
+	const options = new pong.InitOptions();
 	
 	//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;
+	const gameAreaId = "game_area";
 
 	//html boolean for pages
 	let showWaitPage = false;
@@ -47,37 +29,44 @@
 	let isThereAnyInvitation = false;
 	let invitations = [];
 
-
 	let waitingMessage = "Please wait..."
 	let errorMessageWhenAttemptingToGetATicket = "";
 
+
 	onMount( async() => {
 		user = await fetch('http://transcendance:8080/api/v2/user')
 		.then( x => x.json() );
 		allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
 		.then( x => x.json() );
+
+		options.playerOneUsername = user.username;
 	})
 
 	onDestroy( async() => {
-
+		// TODO: destroy() in pong
+		pong.destroy();
 	})
 
-	const initGame = async() => {
-		optionsAreNotSet = false
-		showWaitPage = true
-		if (multi_balls === true)
-			matchOption |= enumeration.MatchOptions.multiBalls
-		if (moving_walls === true )
-			matchOption |= enumeration.MatchOptions.movingWalls
+	const initGame = async() =>
+	{
+		optionsAreNotSet = false;
+		showWaitPage = true;
 
+		let matchOptions = enumeration.MatchOptions.noOption;
+		if (options.multi_balls === true) {
+			matchOptions |= enumeration.MatchOptions.multiBalls
+		}
+		if (options.moving_walls === true) {
+			matchOptions |= enumeration.MatchOptions.movingWalls
+		}
 		const responseWhenGrantToken = fetch("http://transcendance:8080/api/v2/game/ticket", {
 			method : "POST",
 			headers : {'Content-Type': 'application/json'},
 			body : JSON.stringify({
-				playerOneUsername : user.username,
-				playerTwoUsername : playerTwoUsername,
-				gameOptions : matchOption,
-				isGameIsWithInvitation : isSomeoneIsInvited
+				playerOneUsername : options.playerOneUsername,
+				playerTwoUsername : options.playerTwoUsername,
+				gameOptions : matchOptions,
+				isGameIsWithInvitation : options.isSomeoneIsInvited
 			})
 		})
 		const responseFromServer = await responseWhenGrantToken;
@@ -92,65 +81,34 @@
 				showError = false;
 				showWaitPage = false
 				optionsAreNotSet = true
-				playerTwoUsername = "";
-				matchOption = 0;
+				options.playerTwoUsername = "";
+				matchOptions = enumeration.MatchOptions.noOption;
 			}, 5000)
 		}
 		else if (token)
 		{
-			(sound === "off") ? initAudio(true) : initAudio(false);
-			initMatchOptions(matchOption)
-			initPong(new GameArea(gameAreaId))
-			initGc(new GameComponentsClient(matchOption, pong.ctx))
-			initStartFunction(start)
+			pong.init(options, gameAreaId, token);
 			hiddenGame = false;
-			isSomeoneIsInvited ?
-			initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
-			initWebSocket(matchOption, token, user.username)
 		}
 	}
 
-	const initGameForPrivateParty = async(invitation : any) => {
+	// Pour Cherif: renommer en un truc du genre "initGameForInvitedPlayer" ?
+	const initGameForPrivateParty = async(invitation : any) =>
+	{
 		optionsAreNotSet = false
 		showWaitPage = true
 		console.log("invitation : ")
 		console.log(invitation)
 		if (invitation.token)
 		{
-			initMatchOptions(matchOption)
-			initPong(new GameArea(gameAreaId))
-			initGc(new GameComponentsClient(matchOption, pong.ctx))
-			initStartFunction(start)
+			options.playerOneUsername = invitation.playerOneUsername;
+			options.playerTwoUsername = user.username;
+			pong.init(options, gameAreaId, invitation.token);
 			showWaitPage = false
 			hiddenGame = 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) => {
-			gc.text1.clear();
-			gc.text1.text = `${count}`;
-			gc.text1.update();
-		}, responseWhenGrantTokenume);
-	}
-
-	function responseWhenGrantTokenume(): void {
-		gc.text1.text = "";
-		window.addEventListener('keydown', function (e) {
-			pong.addKey(e.key);
-		});
-		window.addEventListener('keyup', function (e) {
-			pong.deleteKey(e.key);
-		});
-		pong.handleInputInterval = window.setInterval(handleInput, constants.handleInputIntervalMS);
-		pong.gameLoopInterval = window.setInterval(gameLoop, constants.gameLoopIntervalMS);
-		pong.drawLoopInterval = window.setInterval(drawLoop, constants.drawLoopIntervalMS);
-	}
-
 	const showOptions = () => {
 		showGameOption = true
 		showInvitations = false
@@ -234,26 +192,26 @@
 							<fieldset>
 								<legend>game options</legend>
 								<div>
-									<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}>
+									<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
 									<label for="multi_balls">Multiples balls</label>
 								</div>
 								<div>
-									<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={moving_walls}>
+									<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.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">
+									<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
 									<label for="sound_on">on</label>
-									<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
+									<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
 									<label for="sound_off">off</label>
 								</div>
 								<div>
-									<input type="checkbox" id="isSomeoneIsInvited" bind:checked={isSomeoneIsInvited}>
+									<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
 									<label for="moving_walls">Invite a friend</label>
 								</div>
-								{#if isSomeoneIsInvited === true}
-									<select bind:value={playerTwoUsername}>
+								{#if options.isSomeoneIsInvited === true}
+									<select bind:value={options.playerTwoUsername}>
 										{#each allUsers as user }
 											<option value={user.username}>{user.username}</option>
 										{/each}
@@ -293,7 +251,8 @@
 			</div>
 		{/if}
 	{/if}
-</div>
+
+</div> <!-- div "game_page" -->
 
 <style>
 @font-face {
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/client/audio.ts b/srcs/requirements/svelte/api_front/src/pages/game/client/audio.ts
index 62188dc5..07b846d2 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/client/audio.ts
+++ b/srcs/requirements/svelte/api_front/src/pages/game/client/audio.ts
@@ -4,8 +4,13 @@ import * as c from "./constants.js"
 export const soundPongArr: HTMLAudioElement[] = [];
 export const soundRoblox = new Audio("http://transcendance:8080/sound/roblox-oof.ogg");
 
-export function initAudio(muteFlag: boolean)
+export function initAudio(sound: string)
 {
+	let muteFlag = true;
+	if (sound === "on") {
+		muteFlag = false;
+	}
+
 	for	(let i = 0; i <= 32; i++) {
 		soundPongArr.push(new Audio("http://transcendance:8080/sound/pong/"+i+".ogg"));
 		soundPongArr[i].volume = c.soundPongVolume;
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts b/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
index 07363807..d3111d64 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
+++ b/srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
@@ -1,9 +1,4 @@
 
-initDom();
-function initDom() {
-	document.getElementById("play_pong_button").addEventListener("click", init);
-}
-
 import * as c from "./constants.js"
 import * as en from "../shared_js/enums.js"
 import { GameArea } from "./class/GameArea.js";
@@ -21,35 +16,43 @@ import { initAudio } from "./audio.js";
 import { pong, gc } from "./global.js"
 import { initPong, initGc, initMatchOptions, initStartFunction } from "./global.js"
 
+export class InitOptions {
+	sound = "off";
+	multi_balls = false;
+	moving_walls = false;
+	isSomeoneIsInvited = false;
+	playerOneUsername = "";
+	playerTwoUsername = "";
+}
 
-function init()
+export function init(options: InitOptions, gameAreaId: string, token: string)
 {
-	console.log("multi_balls:"+(<HTMLInputElement>document.getElementById("multi_balls")).checked);
-	console.log("moving_walls:"+(<HTMLInputElement>document.getElementById("moving_walls")).checked);
-	console.log("sound_on:"+(<HTMLInputElement>document.getElementById("sound_on")).checked);
+	let matchOptions = en.MatchOptions.noOption;
+	if (options.multi_balls === true) {
+		matchOptions |= en.MatchOptions.multiBalls
+	}
+	if (options.moving_walls === true) {
+		matchOptions |= en.MatchOptions.movingWalls
+	}
 
-	let soundMutedFlag = false;
-	if ( (<HTMLInputElement>document.getElementById("sound_off")).checked ) {
-		soundMutedFlag = true;
-	}
-	initAudio(soundMutedFlag);
-
-	let matchOptions: en.MatchOptions = en.MatchOptions.noOption;
-	if ( (<HTMLInputElement>document.getElementById("multi_balls")).checked ) {
-		matchOptions |= en.MatchOptions.multiBalls;
-	}
-	if ( (<HTMLInputElement>document.getElementById("moving_walls")).checked ) {
-		matchOptions |= en.MatchOptions.movingWalls;
-	}
 	initMatchOptions(matchOptions);
+	initAudio(options.sound);
 
-	document.getElementById("div_game_options").remove();
-	document.getElementById("div_game_instructions").remove();
-
-	initPong(new GameArea());
+	initPong(new GameArea(gameAreaId));
 	initGc(new GameComponentsClient(matchOptions, pong.ctx));
 	initStartFunction(start);
-	initWebSocket(matchOptions);
+
+	if (options.isSomeoneIsInvited) {
+		initWebSocket(matchOptions, token, options.playerOneUsername, true, options.playerTwoUsername);
+	}
+	else {
+		initWebSocket(matchOptions, token, options.playerOneUsername);
+	}
+}
+
+export function destroy()
+{
+	// TODO
 }
 
 function start()