Tournament 1vs1 offline

frontend/static/js/api/Client.js

@@ -5,7 +5,7 @@ import { Channels } from './chat/Channels.js';
 import { MyProfile } from "./MyProfile.js";
 import { navigateTo } from "../index.js";
 import { Tourmanents } from "./tournament/Tournaments.js";
-import {Notice} from "./chat/Notice.js";
+import { Notice } from "./chat/Notice.js";
 import { Channel } from "./chat/Channel.js";
 import LanguageManager from './LanguageManager.js';
 
@@ -192,7 +192,7 @@ class Client
 		{
 			this.me = new MyProfile(this);
 			await this.me.init();
-			this.notice.reconnect();
+			this.notice.connect();
 			document.getElementById('navbarLoggedOut').classList.add('d-none');
 			document.getElementById('navbarLoggedIn').classList.remove('d-none');
 			document.getElementById('navbarDropdownButton').innerHTML = this.me.username;
@@ -201,7 +201,7 @@ class Client
 		else
 		{
 			this.me = undefined;
-			this.notice.reconnect();
+			this.notice.disconnect();
 			document.getElementById('navbarLoggedOut').classList.remove('d-none');
 			document.getElementById('navbarLoggedIn').classList.add('d-none');
 			document.getElementById('navbarDropdownButton').innerHTML = 'Me';

frontend/static/js/api/chat/Notice.js

@@ -11,7 +11,7 @@ class Notice {
 		for (let i in data_variable)
 			this.data[data_variable[i]] = [];
 
-		this.connect();
+		//this.connect();
 
 	}
 

frontend/static/js/views/GameOfflineView.js

@@ -4,6 +4,8 @@ export default class extends AbstractView {
 	constructor(params) {
 		super(params, 'Game');
 		this.game = null;
+		this.player1 = "Player 1";
+		this.player2 = "Player 2";
 	}
 
 	async getHtml() {
@@ -11,28 +13,49 @@ export default class extends AbstractView {
 			<h1>Game</h1>
 			<button id='startGameButton'>Start Game</button>
 			<button id='stopGameButton'>Stop Game</button>
+			<button id='startTournament'>Start Tournament</button>
 		`;
 	}
 
 	async postInit() {
 		document.getElementById('startGameButton').onclick = this.startGame.bind(this);
 		document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
+		document.getElementById('startTournament').onclick = this.startTournament.bind(this);
 	}
 
 	async leavePage() {
 		this.game?.cleanup();
 	}
 
+	startTournament() {
+		let startTournament = document.getElementById("startTournament");
+		let player1 = document.createElement("input");
+		player1.id="player1"; player1.type="text"; player1.name="message"; player1.placeholder="Player 1"; player1.maxLength=20;
+		startTournament.before(player1);
+
+		let player2 = document.createElement("input");
+		player2.id="player2"; player2.type="text"; player2.name="message"; player2.placeholder="Player 2"; player2.maxLength=20;
+		player1.after(player2);
+
+		startTournament.onclick = () => {
+			if (player1.value.length > 0)
+				this.player1 = player1.value;
+			if (player2.value.length > 0)
+				this.player2 = player2.value;
+			this.startGame();
+		}
+	}
+
 	startGame() {
 		if (this.game == null) {
 			document.getElementById('startGameButton').innerHTML = 'Reset Game';
-			this.game = new Game();
+			this.game = new Game(this.player1, this.player2);
 		}
 		else {
 			document.getElementById('app').removeChild(this.game.canvas);
 			document.getElementById('app').removeChild(this.game.scoresDisplay);
 			this.game.cleanup();
-			this.game = new Game();
+			this.game = new Game(this.player1, this.player2);
 		}
 	}
 
@@ -48,7 +71,7 @@ export default class extends AbstractView {
 }
 
 class Game {
-	constructor() {
+	constructor(player1, player2) {
 		//Global variables
 		this.def = {
 			CANVASHEIGHT: 270,
@@ -61,7 +84,7 @@ class Game {
 			BALLSPEED: 2,
 			BALLSPEEDINCR: 0.15,
 			MAXBOUNCEANGLE: 10 * (Math.PI / 12),
-			MAXSCORE: 6
+			MAXSCORE: 1
 		};
 
 		this.canvas = document.createElement('canvas');
@@ -75,6 +98,8 @@ class Game {
 		this.scoresDisplay = document.createElement('p');
 		this.scoresDisplay.innerHTML = 'Scores: 0 - 0';
 		document.getElementById('app').appendChild(this.scoresDisplay);
+		this.player1 = player1;
+		this.player2 = player2;
 
 		this.players = [
 			{
@@ -101,6 +126,8 @@ class Game {
 		this.keyDownHandler = this.keyDownHandler.bind(this);
 		document.addEventListener('keydown', this.keyDownHandler);
 		document.addEventListener('keyup', this.keyUpHandler);
+
+		console.log(this);
 	}
 
 	cleanup() {
@@ -132,9 +159,9 @@ class Game {
 
 		//GOOAAAAL
 		if (this.ball.x <= 0)
-			this.updateScore(this.players[0].score, ++this.players[1].score);
+			this.updateScore.bind(this)(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);
+			this.updateScore.bind(this)(++this.players[0].score, this.players[1].score);
 
 		//Ball collisions
 		if (this.detectCollision(this.players[0].paddle, this.ball))
@@ -159,12 +186,13 @@ class Game {
 	}
 
 	updateScore(p1Score, p2Score) {
+		console.log(this);
 		if (p1Score > this.def.MAXSCORE) {
-			this.scoresDisplay.innerHTML = 'Player 1 wins!! GGS';
+			this.scoresDisplay.innerHTML = this.player1 + ' wins!! GGS';
 			this.cleanup();
 		}
 		else if (p2Score > this.def.MAXSCORE) {
-			this.scoresDisplay.innerHTML = 'Player 2 wins!! GGS';
+			this.scoresDisplay.innerHTML = this.player2 + ' wins!! GGS';
 			this.cleanup();
 		} else {
 			this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`;