From c2317d540496acb392bc95a689070008146be095 Mon Sep 17 00:00:00 2001
From: AdrienLSH <git.adrienlsh@42l.fr>
Date: Mon, 4 Dec 2023 16:51:24 +0100
Subject: [PATCH 1/6] la putain de sa mere

---
 frontend/static/js/index.js      |  5 ++-
 frontend/static/js/views/Game.js | 63 ++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 frontend/static/js/views/Game.js

diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js
index e923833..56d5aca 100644
--- a/frontend/static/js/index.js
+++ b/frontend/static/js/index.js
@@ -8,6 +8,8 @@ import HomeView from "./views/HomeView.js";
 import RegisterView from "./views/accounts/RegisterView.js";
 import LogoutView from "./views/accounts/LogoutView.js";
 
+import GameView from "./views/Game.js"
+
 import { Client } from "./api/client.js";
 import AbstractRedirectView from "./views/AbstractRedirectView.js";
 import MeView from "./views/MeView.js";
@@ -44,6 +46,7 @@ const router = async (uri = "") => {
         { path: "/chat", view: Chat },
         { path: "/home", view: HomeView },
         { path: "/me", view: MeView },
+        { path: "/game", view: GameView },
     ];
 
     // Test each route for potential match
@@ -96,4 +99,4 @@ document.addEventListener("DOMContentLoaded", () => {
     router(location.pathname);
 });
 
-export { client, navigateTo }
\ No newline at end of file
+export { client, navigateTo }
diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js
new file mode 100644
index 0000000..312c405
--- /dev/null
+++ b/frontend/static/js/views/Game.js
@@ -0,0 +1,63 @@
+import AbstractView from './AbstractView.js'
+
+export default class extends AbstractView {
+	constructor(params) {
+		super(params, 'Game');
+	}
+
+	async getHtml() {
+		return `
+			<h1>Game</h1>
+			<button id='startGameButton'>Start Game</button>
+		`;
+	}
+
+	async postInit() {
+		document.getElementById('startGameButton').onclick = this.startGame;
+	}
+
+	startGame() {
+		this.game = new Game;
+	}
+}
+
+class Game {
+	constructor() {
+		this.canvas = document.createElement('canvas');
+		this.canvas.width = 480;
+		this.canvas.height = 270;
+		this.canvas.style.border = '1px solid #d3d3d3';
+		this.canvas.style.backgroundColor = '#f1f1f1';
+		this.context = this.canvas.getContext('2d');
+		this.paddle = new Paddle(this.context);
+		document.getElementById('app').appendChild(this.canvas);
+
+		this.interval = setInterval(this.updateGame, 20);
+	}
+
+	clear() {
+		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+	}
+
+	updateGame() {
+		this.clear();
+		this.paddle.y += 1;
+		this.paddle.update();
+	}
+}
+
+class Paddle {
+	constructor(context) {
+		this.width = 10;
+		this.height = 70;
+		this.x = 5;
+		this.y = 100;
+		this.ctx = context;
+		this.update();
+	}
+
+	update() {
+		this.ctx.fillStyle = 'black';
+		this.ctx.fillRect(this.x, this.y, this.width, this.height);
+	}
+}

From 12056554fc45ffdba038103e54b7643917dcc11f Mon Sep 17 00:00:00 2001
From: AdrienLSH <git.adrienlsh@42l.fr>
Date: Tue, 5 Dec 2023 12:18:34 +0100
Subject: [PATCH 2/6] game: moving paddle :)

---
 frontend/static/js/views/Game.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js
index 312c405..62b8e80 100644
--- a/frontend/static/js/views/Game.js
+++ b/frontend/static/js/views/Game.js
@@ -3,6 +3,7 @@ import AbstractView from './AbstractView.js'
 export default class extends AbstractView {
 	constructor(params) {
 		super(params, 'Game');
+		this.game = null;
 	}
 
 	async getHtml() {
@@ -17,7 +18,8 @@ export default class extends AbstractView {
 	}
 
 	startGame() {
-		this.game = new Game;
+		if (this.game == null)
+			this.game = new Game;
 	}
 }
 
@@ -29,10 +31,15 @@ class Game {
 		this.canvas.style.border = '1px solid #d3d3d3';
 		this.canvas.style.backgroundColor = '#f1f1f1';
 		this.context = this.canvas.getContext('2d');
+
 		this.paddle = new Paddle(this.context);
 		document.getElementById('app').appendChild(this.canvas);
 
-		this.interval = setInterval(this.updateGame, 20);
+		this.interval = setInterval(this.updateGame.bind(this), 10);
+
+		this.keys = [];
+		document.addEventListener('keydown', this.keyDownHandler.bind(this));
+		document.addEventListener('keyup', this.keyUpHandler.bind(this));
 	}
 
 	clear() {
@@ -40,10 +47,25 @@ class Game {
 	}
 
 	updateGame() {
+		if (this.keys.includes('s'))
+			this.paddle.y += 3;
+		if (this.keys.includes('w'))
+			this.paddle.y -= 3;
+
 		this.clear();
-		this.paddle.y += 1;
 		this.paddle.update();
 	}
+
+	keyUpHandler(ev) {
+		const idx = this.keys.indexOf(ev.key);
+		if (idx != -1)
+			this.keys.splice(idx, 1);
+	}
+
+	keyDownHandler(ev) {
+		if (this.keys.indexOf(ev.key) == -1)
+			this.keys.push(ev.key);
+	}
 }
 
 class Paddle {

From aa35514c4400b63ca9a2f43a85d7fbba236a27cb Mon Sep 17 00:00:00 2001
From: AdrienLSH <git.adrienlsh@42l.fr>
Date: Sun, 10 Dec 2023 11:05:00 +0100
Subject: [PATCH 3/6] do u guys wanna see my balls ?

---
 frontend/static/js/views/Game.js | 87 ++++++++++++++++++++++++++++----
 1 file changed, 78 insertions(+), 9 deletions(-)

diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js
index 62b8e80..4354d0a 100644
--- a/frontend/static/js/views/Game.js
+++ b/frontend/static/js/views/Game.js
@@ -10,22 +10,41 @@ export default class extends AbstractView {
 		return `
 			<h1>Game</h1>
 			<button id='startGameButton'>Start Game</button>
+			<button id='stopGameButton'>Stop Game</button>
 		`;
 	}
 
 	async postInit() {
-		document.getElementById('startGameButton').onclick = this.startGame;
+		document.getElementById('startGameButton').onclick = this.startGame.bind(this);
+		document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
 	}
 
 	startGame() {
-		if (this.game == null)
+		if (this.game == null) {
+			document.getElementById('startGameButton').innerHTML = 'Reset Game';
 			this.game = new Game;
+		}
+		else {
+			document.getElementById('app').removeChild(this.game.canvas);
+			this.game.cleanup();
+			this.game = new Game;
+		}
+	}
+
+	stopGame() {
+		if (!this.game)
+			return;
+		document.getElementById('app').removeChild(this.game.canvas);
+		this.game.cleanup();
+		this.game = null;
+		document.getElementById('startGameButton').innerHTML = 'Start Game';
 	}
 }
 
 class Game {
 	constructor() {
 		this.canvas = document.createElement('canvas');
+		this.canvas.id = 'gameCanvas';
 		this.canvas.width = 480;
 		this.canvas.height = 270;
 		this.canvas.style.border = '1px solid #d3d3d3';
@@ -33,13 +52,22 @@ class Game {
 		this.context = this.canvas.getContext('2d');
 
 		this.paddle = new Paddle(this.context);
+		this.ball = new Ball(this.context);
 		document.getElementById('app').appendChild(this.canvas);
 
 		this.interval = setInterval(this.updateGame.bind(this), 10);
 
 		this.keys = [];
-		document.addEventListener('keydown', this.keyDownHandler.bind(this));
-		document.addEventListener('keyup', this.keyUpHandler.bind(this));
+		this.keyUpHandler = this.keyUpHandler.bind(this);
+		this.keyDownHandler = this.keyDownHandler.bind(this);
+		document.addEventListener('keydown', this.keyDownHandler);
+		document.addEventListener('keyup', this.keyUpHandler);
+	}
+
+	cleanup() {
+		clearInterval(this.interval);
+		document.removeEventListener('keydown', this.keyDownHandler);
+		document.removeEventListener('keyup', this.keyUpHandler);
 	}
 
 	clear() {
@@ -47,13 +75,34 @@ class Game {
 	}
 
 	updateGame() {
-		if (this.keys.includes('s'))
-			this.paddle.y += 3;
-		if (this.keys.includes('w'))
-			this.paddle.y -= 3;
+
+		if (this.keys.includes('Escape'))
+			this.cleanup();
+
+		if (this.keys.includes('s') &&
+			this.paddle.y + this.paddle.height < this.canvas.height - this.paddle.x)
+				this.paddle.y += this.paddle.speed;
+		if (this.keys.includes('w') &&
+			this.paddle.y > 0 + this.paddle.x)
+				this.paddle.y -= this.paddle.speed;
+
+		if (this.ball.x - this.ball.radius <= this.paddle.x + this.paddle.width
+			&& (this.ball.y >= this.paddle.y && this.ball.y <= this.paddle.y + this.paddle.height))
+			this.ball.vx *= -1;
+		if (this.ball.x - this.ball.radius <= 0)
+			this.ball.vx *= -1;
+		else if (this.ball.x + this.ball.radius >= this.canvas.width)
+			this.ball.vx *= -1;
+		if (this.ball.y - this.ball.radius <= 0)
+			this.ball.vy *= -1;
+		else if (this.ball.y + this.ball.radius >= this.canvas.height)
+			this.ball.vy *= -1;
+		this.ball.x += this.ball.vx;
+		this.ball.y += this.ball.vy;
 
 		this.clear();
 		this.paddle.update();
+		this.ball.update();
 	}
 
 	keyUpHandler(ev) {
@@ -63,7 +112,7 @@ class Game {
 	}
 
 	keyDownHandler(ev) {
-		if (this.keys.indexOf(ev.key) == -1)
+		if (!this.keys.includes(ev.key))
 			this.keys.push(ev.key);
 	}
 }
@@ -74,6 +123,7 @@ class Paddle {
 		this.height = 70;
 		this.x = 5;
 		this.y = 100;
+		this.speed = 3;
 		this.ctx = context;
 		this.update();
 	}
@@ -83,3 +133,22 @@ class Paddle {
 		this.ctx.fillRect(this.x, this.y, this.width, this.height);
 	}
 }
+
+class Ball {
+	constructor(context) {
+		this.radius = 5;
+		this.x = 240;
+		this.y = 135;
+		this.vx = 2;
+		this.vy = 2;
+		this.ctx = context;
+		this.update();
+	}
+
+	update() {
+		this.ctx.fillStyle = 'black';
+		this.ctx.beginPath();
+		this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+		this.ctx.fill();
+	}
+}

From ca6dba276306d2650a44c531a9d2fe078cde166e Mon Sep 17 00:00:00 2001
From: AdrienLSH <git.adrienlsh@42l.fr>
Date: Tue, 12 Dec 2023 12:10:48 +0100
Subject: [PATCH 4/6] add: ball angle calculations

---
 frontend/static/js/views/Game.js | 113 +++++++++++++++++++++++--------
 1 file changed, 84 insertions(+), 29 deletions(-)

diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js
index 4354d0a..2851c04 100644
--- a/frontend/static/js/views/Game.js
+++ b/frontend/static/js/views/Game.js
@@ -43,18 +43,40 @@ export default class extends AbstractView {
 
 class Game {
 	constructor() {
+		//Global variables
+		this.globVars = {
+			CANVASHEIGHT: 270,
+			CANVASWIDTH: 480,
+			PADDLEHEIGHT: 70,
+			PADDLEWIDTH: 10,
+			PADDLEMARGIN: 5,
+			PADDLESPEED: 3,
+			BALLRADIUS: 5,
+			BALLSPEED: 2,
+			MAXBOUNCEANGLE: 10 * (Math.PI / 12)
+		};
+
 		this.canvas = document.createElement('canvas');
 		this.canvas.id = 'gameCanvas';
-		this.canvas.width = 480;
-		this.canvas.height = 270;
+		this.canvas.width = this.globVars.CANVASWIDTH;
+		this.canvas.height = this.globVars.CANVASHEIGHT;
 		this.canvas.style.border = '1px solid #d3d3d3';
 		this.canvas.style.backgroundColor = '#f1f1f1';
 		this.context = this.canvas.getContext('2d');
-
-		this.paddle = new Paddle(this.context);
-		this.ball = new Ball(this.context);
 		document.getElementById('app').appendChild(this.canvas);
 
+		this.paddles = [
+			new Paddle(this.context,
+				this.globVars.PADDLEMARGIN,
+				this.globVars
+			),
+			new Paddle(this.context,
+				this.globVars.CANVASWIDTH - this.globVars.PADDLEMARGIN - this.globVars.PADDLEWIDTH,
+				this.globVars
+			)
+		];
+		this.ball = new Ball(this.context, this.globVars);
+
 		this.interval = setInterval(this.updateGame.bind(this), 10);
 
 		this.keys = [];
@@ -79,20 +101,27 @@ class Game {
 		if (this.keys.includes('Escape'))
 			this.cleanup();
 
+		//Paddle movement
 		if (this.keys.includes('s') &&
-			this.paddle.y + this.paddle.height < this.canvas.height - this.paddle.x)
-				this.paddle.y += this.paddle.speed;
+			this.paddles[0].y + this.globVars.PADDLEHEIGHT < this.globVars.CANVASHEIGHT - this.globVars.PADDLEMARGIN)
+				this.paddles[0].y += this.globVars.PADDLESPEED;
 		if (this.keys.includes('w') &&
-			this.paddle.y > 0 + this.paddle.x)
-				this.paddle.y -= this.paddle.speed;
+			this.paddles[0].y > 0 + this.globVars.PADDLEMARGIN)
+				this.paddles[0].y -= this.globVars.PADDLESPEED;
+
+		if (this.keys.includes('ArrowDown') &&
+			this.paddles[1].y + this.globVars.PADDLEHEIGHT < this.globVars.CANVASHEIGHT - this.globVars.PADDLEMARGIN)
+				this.paddles[1].y += this.globVars.PADDLESPEED;
+		if (this.keys.includes('ArrowUp') &&
+			this.paddles[1].y > 0 + this.globVars.PADDLEMARGIN)
+				this.paddles[1].y -= this.globVars.PADDLESPEED;
+
+		//Ball collisions
+		if (this.detectCollision(this.paddles[0], this.ball))
+			this.calculateBallVelocity(this.paddles[0].getCenter().y, this.ball);
+		else if (this.detectCollision(this.paddles[1], this.ball))
+			this.calculateBallVelocity(this.paddles[1].getCenter().y, this.ball, -1);
 
-		if (this.ball.x - this.ball.radius <= this.paddle.x + this.paddle.width
-			&& (this.ball.y >= this.paddle.y && this.ball.y <= this.paddle.y + this.paddle.height))
-			this.ball.vx *= -1;
-		if (this.ball.x - this.ball.radius <= 0)
-			this.ball.vx *= -1;
-		else if (this.ball.x + this.ball.radius >= this.canvas.width)
-			this.ball.vx *= -1;
 		if (this.ball.y - this.ball.radius <= 0)
 			this.ball.vy *= -1;
 		else if (this.ball.y + this.ball.radius >= this.canvas.height)
@@ -101,10 +130,30 @@ class Game {
 		this.ball.y += this.ball.vy;
 
 		this.clear();
-		this.paddle.update();
+		this.paddles[0].update();
+		this.paddles[1].update();
 		this.ball.update();
 	}
 
+	detectCollision(paddle, ball) {
+		let paddleCenter = paddle.getCenter();
+		let dx = Math.abs(ball.x - paddleCenter.x);
+		let dy = Math.abs(ball.y - paddleCenter.y);
+		if (dx <= ball.radius + paddle.width / 2 &&
+			dy <= ball.radius + paddle.height / 2)
+				return true;
+		return false;
+	}
+
+	calculateBallVelocity(paddleCenterY, ball, side = 1) {
+		let relativeIntersectY = paddleCenterY - ball.y;
+		let normRelIntersectY = relativeIntersectY / this.globVars.PADDLEHEIGHT / 2;
+		let bounceAngle = normRelIntersectY * this.globVars.MAXBOUNCEANGLE;
+
+		ball.vx = this.globVars.BALLSPEED * side * Math.cos(bounceAngle);
+		ball.vy = this.globVars.BALLSPEED * -Math.sin(bounceAngle);
+	}
+
 	keyUpHandler(ev) {
 		const idx = this.keys.indexOf(ev.key);
 		if (idx != -1)
@@ -118,12 +167,11 @@ class Game {
 }
 
 class Paddle {
-	constructor(context) {
-		this.width = 10;
-		this.height = 70;
-		this.x = 5;
-		this.y = 100;
-		this.speed = 3;
+	constructor(context, paddleSide, globVars) {
+		this.width = globVars.PADDLEWIDTH;
+		this.height = globVars.PADDLEHEIGHT;
+		this.x = paddleSide;
+		this.y = globVars.CANVASHEIGHT / 2 - this.height / 2;
 		this.ctx = context;
 		this.update();
 	}
@@ -132,15 +180,22 @@ class Paddle {
 		this.ctx.fillStyle = 'black';
 		this.ctx.fillRect(this.x, this.y, this.width, this.height);
 	}
+
+	getCenter() {
+		return {
+			x: this.x + this.width / 2,
+			y: this.y + this.height / 2
+		};
+	}
 }
 
 class Ball {
-	constructor(context) {
-		this.radius = 5;
-		this.x = 240;
-		this.y = 135;
-		this.vx = 2;
-		this.vy = 2;
+	constructor(context, globVars) {
+		this.radius = globVars.BALLRADIUS;
+		this.x = globVars.CANVASWIDTH / 2;
+		this.y = globVars.CANVASHEIGHT / 2;
+		this.vx = -globVars.BALLSPEED;
+		this.vy = 0;
 		this.ctx = context;
 		this.update();
 	}

From 754e5867f2f0778e2122292a5f06cc592e6cf9ca Mon Sep 17 00:00:00 2001
From: AdrienLSH <git.adrienlsh@42l.fr>
Date: Tue, 12 Dec 2023 15:58:50 +0100
Subject: [PATCH 5/6] welp I guess we're done

---
 frontend/static/js/views/Game.js | 124 ++++++++++++++++++++-----------
 1 file changed, 79 insertions(+), 45 deletions(-)

diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js
index 2851c04..57b936e 100644
--- a/frontend/static/js/views/Game.js
+++ b/frontend/static/js/views/Game.js
@@ -35,6 +35,7 @@ export default class extends AbstractView {
 		if (!this.game)
 			return;
 		document.getElementById('app').removeChild(this.game.canvas);
+		document.getElementById('app').removeChild(this.game.scoresDisplay);
 		this.game.cleanup();
 		this.game = null;
 		document.getElementById('startGameButton').innerHTML = 'Start Game';
@@ -44,7 +45,7 @@ export default class extends AbstractView {
 class Game {
 	constructor() {
 		//Global variables
-		this.globVars = {
+		this.def = {
 			CANVASHEIGHT: 270,
 			CANVASWIDTH: 480,
 			PADDLEHEIGHT: 70,
@@ -53,29 +54,39 @@ class Game {
 			PADDLESPEED: 3,
 			BALLRADIUS: 5,
 			BALLSPEED: 2,
-			MAXBOUNCEANGLE: 10 * (Math.PI / 12)
+			BALLSPEEDINCR: 0.15,
+			MAXBOUNCEANGLE: 10 * (Math.PI / 12),
+			MAXSCORE: 6
 		};
 
 		this.canvas = document.createElement('canvas');
 		this.canvas.id = 'gameCanvas';
-		this.canvas.width = this.globVars.CANVASWIDTH;
-		this.canvas.height = this.globVars.CANVASHEIGHT;
+		this.canvas.width = this.def.CANVASWIDTH;
+		this.canvas.height = this.def.CANVASHEIGHT;
 		this.canvas.style.border = '1px solid #d3d3d3';
 		this.canvas.style.backgroundColor = '#f1f1f1';
 		this.context = this.canvas.getContext('2d');
 		document.getElementById('app').appendChild(this.canvas);
+		this.scoresDisplay = document.createElement('p');
+		this.scoresDisplay.innerHTML = 'Scores: 0 - 0';
+		document.getElementById('app').appendChild(this.scoresDisplay);
 
-		this.paddles = [
-			new Paddle(this.context,
-				this.globVars.PADDLEMARGIN,
-				this.globVars
-			),
-			new Paddle(this.context,
-				this.globVars.CANVASWIDTH - this.globVars.PADDLEMARGIN - this.globVars.PADDLEWIDTH,
-				this.globVars
-			)
+		this.players = [
+			{
+				paddle: new Paddle(this.context,
+							this.def.PADDLEMARGIN,
+							this.def),
+				score: 0
+			},
+			{
+				paddle: new Paddle(this.context,
+							this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH,
+							this.def),
+				score: 0
+			}
 		];
-		this.ball = new Ball(this.context, this.globVars);
+		this.ballStartSide = 0;
+		this.ball = new Ball(this.context, this.def, this.ballStartSide);
 
 		this.interval = setInterval(this.updateGame.bind(this), 10);
 
@@ -90,6 +101,7 @@ class Game {
 		clearInterval(this.interval);
 		document.removeEventListener('keydown', this.keyDownHandler);
 		document.removeEventListener('keyup', this.keyUpHandler);
+		this.canvas.style.display = 'none';
 	}
 
 	clear() {
@@ -97,30 +109,32 @@ class Game {
 	}
 
 	updateGame() {
-
-		if (this.keys.includes('Escape'))
-			this.cleanup();
-
 		//Paddle movement
 		if (this.keys.includes('s') &&
-			this.paddles[0].y + this.globVars.PADDLEHEIGHT < this.globVars.CANVASHEIGHT - this.globVars.PADDLEMARGIN)
-				this.paddles[0].y += this.globVars.PADDLESPEED;
+			this.players[0].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
+				this.players[0].paddle.y += this.def.PADDLESPEED;
 		if (this.keys.includes('w') &&
-			this.paddles[0].y > 0 + this.globVars.PADDLEMARGIN)
-				this.paddles[0].y -= this.globVars.PADDLESPEED;
+			this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
+				this.players[0].paddle.y -= this.def.PADDLESPEED;
 
 		if (this.keys.includes('ArrowDown') &&
-			this.paddles[1].y + this.globVars.PADDLEHEIGHT < this.globVars.CANVASHEIGHT - this.globVars.PADDLEMARGIN)
-				this.paddles[1].y += this.globVars.PADDLESPEED;
+			this.players[1].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
+				this.players[1].paddle.y += this.def.PADDLESPEED;
 		if (this.keys.includes('ArrowUp') &&
-			this.paddles[1].y > 0 + this.globVars.PADDLEMARGIN)
-				this.paddles[1].y -= this.globVars.PADDLESPEED;
+			this.players[1].paddle.y > 0 + this.def.PADDLEMARGIN)
+				this.players[1].paddle.y -= this.def.PADDLESPEED;
+
+		//GOOAAAAL
+		if (this.ball.x <= 0)
+			this.updateScore(this.players[0].score, ++this.players[1].score);
+		else if (this.ball.x >= this.def.CANVASWIDTH)
+			this.updateScore(++this.players[0].score, this.players[1].score);
 
 		//Ball collisions
-		if (this.detectCollision(this.paddles[0], this.ball))
-			this.calculateBallVelocity(this.paddles[0].getCenter().y, this.ball);
-		else if (this.detectCollision(this.paddles[1], this.ball))
-			this.calculateBallVelocity(this.paddles[1].getCenter().y, this.ball, -1);
+		if (this.detectCollision(this.players[0].paddle, this.ball))
+			this.calculateBallVelocity(this.players[0].paddle.getCenter().y, this.ball);
+		else if (this.detectCollision(this.players[1].paddle, this.ball))
+			this.calculateBallVelocity(this.players[1].paddle.getCenter().y, this.ball, -1);
 
 		if (this.ball.y - this.ball.radius <= 0)
 			this.ball.vy *= -1;
@@ -130,11 +144,26 @@ class Game {
 		this.ball.y += this.ball.vy;
 
 		this.clear();
-		this.paddles[0].update();
-		this.paddles[1].update();
+		this.players[0].paddle.update();
+		this.players[1].paddle.update();
 		this.ball.update();
 	}
 
+	updateScore(p1Score, p2Score) {
+		if (p1Score > this.def.MAXSCORE) {
+			this.scoresDisplay.innerHTML = 'Player 1 wins!! GGS';
+			this.cleanup();
+		}
+		else if (p2Score > this.def.MAXSCORE) {
+			this.scoresDisplay.innerHTML = 'Player 2 wins!! GGS';
+			this.cleanup();
+		} else {
+			this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`;
+			this.ballStartSide = 1 - this.ballStartSide;
+			this.ball = new Ball(this.context, this.def, this.ballStartSide);
+		}
+	}
+
 	detectCollision(paddle, ball) {
 		let paddleCenter = paddle.getCenter();
 		let dx = Math.abs(ball.x - paddleCenter.x);
@@ -147,11 +176,12 @@ class Game {
 
 	calculateBallVelocity(paddleCenterY, ball, side = 1) {
 		let relativeIntersectY = paddleCenterY - ball.y;
-		let normRelIntersectY = relativeIntersectY / this.globVars.PADDLEHEIGHT / 2;
-		let bounceAngle = normRelIntersectY * this.globVars.MAXBOUNCEANGLE;
+		let normRelIntersectY = relativeIntersectY / this.def.PADDLEHEIGHT / 2;
+		let bounceAngle = normRelIntersectY * this.def.MAXBOUNCEANGLE;
 
-		ball.vx = this.globVars.BALLSPEED * side * Math.cos(bounceAngle);
-		ball.vy = this.globVars.BALLSPEED * -Math.sin(bounceAngle);
+		ball.speed += this.def.BALLSPEEDINCR;
+		ball.vx = ball.speed * side * Math.cos(bounceAngle);
+		ball.vy = ball.speed * -Math.sin(bounceAngle);
 	}
 
 	keyUpHandler(ev) {
@@ -167,11 +197,11 @@ class Game {
 }
 
 class Paddle {
-	constructor(context, paddleSide, globVars) {
-		this.width = globVars.PADDLEWIDTH;
-		this.height = globVars.PADDLEHEIGHT;
+	constructor(context, paddleSide, def) {
+		this.width = def.PADDLEWIDTH;
+		this.height = def.PADDLEHEIGHT;
 		this.x = paddleSide;
-		this.y = globVars.CANVASHEIGHT / 2 - this.height / 2;
+		this.y = def.CANVASHEIGHT / 2 - this.height / 2;
 		this.ctx = context;
 		this.update();
 	}
@@ -190,12 +220,16 @@ class Paddle {
 }
 
 class Ball {
-	constructor(context, globVars) {
-		this.radius = globVars.BALLRADIUS;
-		this.x = globVars.CANVASWIDTH / 2;
-		this.y = globVars.CANVASHEIGHT / 2;
-		this.vx = -globVars.BALLSPEED;
+	constructor(context, def, startSide) {
+		this.radius = def.BALLRADIUS;
+		this.speed = def.BALLSPEED;
+		this.x = def.CANVASWIDTH / 2;
+		this.y = def.CANVASHEIGHT / 2;
 		this.vy = 0;
+		if (startSide === 0)
+			this.vx = -this.speed;
+		else
+			this.vx = this.speed;
 		this.ctx = context;
 		this.update();
 	}

From 63e1520e6af153666e110c1d6cc76c4f712d82f1 Mon Sep 17 00:00:00 2001
From: AdrienLSH <git.adrienlsh@42l.fr>
Date: Tue, 12 Dec 2023 18:25:16 +0100
Subject: [PATCH 6/6] add: ball respawn timeout

---
 frontend/static/js/views/Game.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js
index 57b936e..87dd0cb 100644
--- a/frontend/static/js/views/Game.js
+++ b/frontend/static/js/views/Game.js
@@ -86,6 +86,7 @@ class Game {
 			}
 		];
 		this.ballStartSide = 0;
+		this.ballRespawned = false;
 		this.ball = new Ball(this.context, this.def, this.ballStartSide);
 
 		this.interval = setInterval(this.updateGame.bind(this), 10);
@@ -140,8 +141,11 @@ class Game {
 			this.ball.vy *= -1;
 		else if (this.ball.y + this.ball.radius >= this.canvas.height)
 			this.ball.vy *= -1;
-		this.ball.x += this.ball.vx;
-		this.ball.y += this.ball.vy;
+
+		if (!this.ballRespawned) {
+			this.ball.x += this.ball.vx;
+			this.ball.y += this.ball.vy;
+		}
 
 		this.clear();
 		this.players[0].paddle.update();
@@ -161,6 +165,9 @@ class Game {
 			this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`;
 			this.ballStartSide = 1 - this.ballStartSide;
 			this.ball = new Ball(this.context, this.def, this.ballStartSide);
+			this.ballRespawned = true;
+			new Promise(r => setTimeout(r, 300))
+				.then(_ => this.ballRespawned = false);
 		}
 	}