From 0bc5d275d97af58a5ce48b3d5e1e6cf611c0033b Mon Sep 17 00:00:00 2001
From: starnakin <camille@chauvet.pro>
Date: Mon, 25 Mar 2024 16:51:45 +0100
Subject: [PATCH] game: offline: support mobile

---
 frontend/static/js/views/GameOfflineView.js | 61 ++++++++++++++++++---
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/frontend/static/js/views/GameOfflineView.js b/frontend/static/js/views/GameOfflineView.js
index 540110b..1ffc414 100644
--- a/frontend/static/js/views/GameOfflineView.js
+++ b/frontend/static/js/views/GameOfflineView.js
@@ -46,10 +46,44 @@ export default class extends AbstractView {
 		}
 	}
 
+	createButton()
+	{
+		this.up1 = document.createElement("button");
+		this.down1 = document.createElement("button");
+		this.up2 = document.createElement("button");
+		this.down2 = document.createElement("button");
+
+		this.up1.setAttribute("user_id", 1);
+		this.up1.setAttribute("direction", "up");
+		this.up2.setAttribute("user_id", 2);
+		this.up2.setAttribute("direction", "up");
+
+		this.down1.setAttribute("user_id", 1);
+		this.down1.setAttribute("direction", "down");
+		this.down2.setAttribute("user_id", 2);
+		this.down2.setAttribute("direction", "down");
+
+		[this.up1, this.up2, this.down1, this.down2].forEach(button => {
+			button.onmousedown = this.game.keyDownHandler.bind(this.game);
+			button.onmouseup = this.game.keyUpHandler.bind(this.game);
+		});
+
+		document.getElementById("app").append(this.up1, this.down1, this.up2, this.down2);
+
+	}
+
+	destroyButton()
+	{
+		[this.up1, this.up2, this.down1, this.down2].forEach(button => {
+			button.remove();
+		});
+	}
+
 	startGame() {
 		if (this.game == null) {
 			document.getElementById('startGameButton').innerHTML = 'Reset Game';
 			this.game = new Game(this.player1, this.player2);
+			this.createButton();
 		}
 		else {
 			document.getElementById('app').removeChild(this.game.canvas);
@@ -66,6 +100,7 @@ export default class extends AbstractView {
 		document.getElementById('app').removeChild(this.game.scoresDisplay);
 		this.game.cleanup();
 		this.game = null;
+		this.destroyButton();
 		document.getElementById('startGameButton').innerHTML = 'Start Game';
 	}
 }
@@ -127,7 +162,6 @@ class Game {
 		document.addEventListener('keydown', this.keyDownHandler);
 		document.addEventListener('keyup', this.keyUpHandler);
 
-		console.log(this);
 	}
 
 	cleanup() {
@@ -143,17 +177,17 @@ class Game {
 
 	updateGame() {
 		//Paddle movement
-		if (this.keys.includes('s') &&
+		if ((this.keys.includes('s') || this.keys.includes('down1')) &&
 			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') &&
+		if ((this.keys.includes('2') || this.keys.includes('up1')) &&
 			this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
 				this.players[0].paddle.y -= this.def.PADDLESPEED;
 
-		if (this.keys.includes('ArrowDown') &&
+		if ((this.keys.includes('ArrowDown') || this.keys.includes('down2')) &&
 			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') &&
+		if ((this.keys.includes('ArrowUp') || this.keys.includes('up2')) &&
 			this.players[1].paddle.y > 0 + this.def.PADDLEMARGIN)
 				this.players[1].paddle.y -= this.def.PADDLESPEED;
 
@@ -186,7 +220,6 @@ class Game {
 	}
 
 	updateScore(p1Score, p2Score) {
-		console.log(this);
 		if (p1Score > this.def.MAXSCORE) {
 			this.scoresDisplay.innerHTML = this.player1 + ' wins!! GGS';
 			this.cleanup();
@@ -225,14 +258,24 @@ class Game {
 	}
 
 	keyUpHandler(ev) {
-		const idx = this.keys.indexOf(ev.key);
+		let attributes = ev.originalTarget.attributes;
+
+		let key = ev.key === undefined ? `${attributes.direction.value}${attributes.user_id.value}` : ev.key;
+
+		const idx = this.keys.indexOf(key);
 		if (idx != -1)
 			this.keys.splice(idx, 1);
 	}
 
 	keyDownHandler(ev) {
-		if (!this.keys.includes(ev.key))
-			this.keys.push(ev.key);
+
+		let attributes = ev.originalTarget.attributes;
+
+		let key = ev.key === undefined ? `${attributes.direction.value}${attributes.user_id.value}` : ev.key;
+
+
+		if (!this.keys.includes(key))
+			this.keys.push(key);
 	}
 }