From a03e2c397dd6ec6a5bf5511f7afa29d650d17aca Mon Sep 17 00:00:00 2001 From: Xamora Date: Tue, 12 Mar 2024 10:28:52 +0100 Subject: [PATCH] Tournament 1vs1 offline --- frontend/static/js/api/Client.js | 6 +-- frontend/static/js/api/chat/Notice.js | 2 +- frontend/static/js/views/GameOfflineView.js | 44 +++++++++++++++++---- 3 files changed, 40 insertions(+), 12 deletions(-) diff --git a/frontend/static/js/api/Client.js b/frontend/static/js/api/Client.js index 480c88e..ba54f0c 100644 --- a/frontend/static/js/api/Client.js +++ b/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'; diff --git a/frontend/static/js/api/chat/Notice.js b/frontend/static/js/api/chat/Notice.js index f7d5aaa..23e65e0 100644 --- a/frontend/static/js/api/chat/Notice.js +++ b/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(); } diff --git a/frontend/static/js/views/GameOfflineView.js b/frontend/static/js/views/GameOfflineView.js index e4761b3..540110b 100644 --- a/frontend/static/js/views/GameOfflineView.js +++ b/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 {

Game

+ `; } 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}`;