starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compabilité avec téléphone pour pong offline, ajout d'un peu de css, et obligation d'être connecté pour aller dans les Games views online/offline

Browse Source
This commit is contained in:
Xamora 2024-04-04 10:06:24 +02:00
parent 361eae73f0
commit c49e721e5a
4 changed files with 101 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/static/css/game.css
View File

@ -5,3 +5,4 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

19
frontend/static/css/gameOffline.css Normal file
View File

@ -0,0 +1,19 @@
#gameCanvas {
display: block;
}
#up1:active, #down1:active, #up2:active, #down2:active {
color: red;
}
#up1, #down1, #up2, #down2 {
min-height: 60px;
min-width: 60px;
font-size: 40px;
}
#up2, #down2 {
position: relative;
float: right;
}

111
frontend/static/js/views/GameOfflineView.js
View File

@ -1,6 +1,6 @@
import AbstractView from "./abstracts/AbstractView.js"; import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
export default class extends AbstractView { export default class extends AbstractAuthenticatedView {
constructor(params) { constructor(params) {
super(params, 'Game'); super(params, 'Game');
this.game = null; this.game = null;
@ -10,6 +10,7 @@ export default class extends AbstractView {
async getHtml() { async getHtml() {
return ` return `
<link rel="stylesheet" href="/static/css/gameOffline.css">
<h1>Game</h1> <h1>Game</h1>
<button id='startGameButton'>Start Game</button> <button id='startGameButton'>Start Game</button>
<button id='stopGameButton'>Stop Game</button> <button id='stopGameButton'>Stop Game</button>
@ -18,8 +19,10 @@ export default class extends AbstractView {
} }
async postInit() { async postInit() {
this.app = document.getElementById("app");
document.getElementById('startGameButton').onclick = this.startGame.bind(this); document.getElementById('startGameButton').onclick = this.startGame.bind(this);
document.getElementById('stopGameButton').onclick = this.stopGame.bind(this); document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
document.getElementById('stopGameButton').hidden = 1;
document.getElementById('startTournament').onclick = this.startTournament.bind(this); document.getElementById('startTournament').onclick = this.startTournament.bind(this);
} }
@ -30,28 +33,56 @@ export default class extends AbstractView {
startTournament() { startTournament() {
let startTournament = document.getElementById("startTournament"); let startTournament = document.getElementById("startTournament");
let player1 = document.createElement("input"); let player1 = document.createElement("input");
player1.id="player1"; player1.type="text"; player1.name="message"; player1.placeholder="Player 1"; player1.maxLength=20; player1.id="player1"; player1.type="text"; player1.name="message"; player1.placeholder="Player 1"; player1.maxLength=20; player1.value = "";
startTournament.before(player1); startTournament.before(player1);
let player2 = document.createElement("input"); let player2 = document.createElement("input");
player2.id="player2"; player2.type="text"; player2.name="message"; player2.placeholder="Player 2"; player2.maxLength=20; player2.id="player2"; player2.type="text"; player2.name="message"; player2.placeholder="Player 2"; player2.maxLength=20; player2.value = "";
player1.after(player2); player1.after(player2);
/*let player3 = document.createElement("input");
player3.id="player3"; player3.type="text"; player3.name="message"; player3.placeholder="Player 3"; player3.maxLength=20;
player2.after(player3);
let player4 = document.createElement("input");
player4.id="player4"; player4.type="text"; player4.name="message"; player4.placeholder="Player 4"; player4.maxLength=40;
player3.after(player4);*/
startTournament.onclick = () => { startTournament.onclick = () => {
if (player1.value.length > 0) if (player1.value.length > 0)
this.player1 = player1.value; this.player1 = player1.value;
if (player2.value.length > 0) if (player2.value.length > 0)
this.player2 = player2.value; this.player2 = player2.value;
this.startGame(); /*if (player3.value.length > 0)
this.player3 = player3.value;
if (player4.value.length > 0)
this.player4 = player4.value;*/
player1.remove();
player2.remove();
this.startGame(this.player1, this.player2);
startTournament.onclick = this.startTournament.bind(this);
} }
} }
createButton() createButton()
{ {
this.up1 = document.createElement("button"); this.up1 = document.createElement("button");
this.up1.textContent = "↑";
this.up1.id = "up1";
this.down1 = document.createElement("button"); this.down1 = document.createElement("button");
this.down1.textContent = "↓";
this.down1.id = "down1";
this.up2 = document.createElement("button"); this.up2 = document.createElement("button");
this.up2.textContent = "↑";
this.up2.id = "up2";
this.down2 = document.createElement("button"); this.down2 = document.createElement("button");
this.down2.textContent = "↓";
this.down2.id = "down2";
this.up1.setAttribute("user_id", 1); this.up1.setAttribute("user_id", 1);
this.up1.setAttribute("direction", "up"); this.up1.setAttribute("direction", "up");
@ -63,45 +94,51 @@ export default class extends AbstractView {
this.down2.setAttribute("user_id", 2); this.down2.setAttribute("user_id", 2);
this.down2.setAttribute("direction", "down"); this.down2.setAttribute("direction", "down");
document.addEventListener('touchstart', this.keyDownHandler);
document.addEventListener('touchend', this.keyUpHandler);
[this.up1, this.up2, this.down1, this.down2].forEach(button => { [this.up1, this.up2, this.down1, this.down2].forEach(button => {
button.onmousedown = this.game.keyDownHandler.bind(this.game); button.onmousedown = this.game.keyDownHandler.bind(this.game);
button.onmouseup = this.game.keyUpHandler.bind(this.game); button.onmouseup = this.game.keyUpHandler.bind(this.game);
button.ontouchstart = this.game.keyDownHandler.bind(this.game);
button.ontouchend = this.game.keyUpHandler.bind(this.game);
}); });
document.getElementById("app").append(this.up1, this.down1, this.up2, this.down2); document.getElementById("gameCanvas").after(this.up2, this.down2);
document.getElementById("gameCanvas").after(this.up1, this.down1);
} }
destroyButton() startGame(player1, player2) {
{ if (player1 == null || player2 == null) {
[this.up1, this.up2, this.down1, this.down2].forEach(button => { player1 = this.player1;
button.remove(); player2 = this.player2;
}); }
}
startGame() {
if (this.game == null) { if (this.game == null) {
document.getElementById('startGameButton').innerHTML = 'Reset Game'; document.getElementById('startGameButton').innerHTML = 'Reset Game';
this.game = new Game(this.player1, this.player2); this.game = new Game(player1, player2);
this.createButton(); this.createButton();
} }
else { else {
document.getElementById('app').removeChild(this.game.canvas); this.app.removeChild(this.game.canvas);
document.getElementById('app').removeChild(this.game.scoresDisplay); this.app.removeChild(this.game.scoresDisplay);
this.game.cleanup(); this.game.cleanup();
this.game = new Game(this.player1, this.player2); this.game = new Game(player1, player2);
this.createButton();
} }
document.getElementById('startTournament').hidden = 1;
document.getElementById('stopGameButton').hidden = 0;
} }
stopGame() { stopGame() {
if (!this.game) if (!this.game)
return; return;
document.getElementById('app').removeChild(this.game.canvas); this.app.removeChild(this.game.canvas);
document.getElementById('app').removeChild(this.game.scoresDisplay); this.app.removeChild(this.game.scoresDisplay);
this.game.cleanup(); this.game.cleanup();
this.game = null; this.game = null;
this.destroyButton();
document.getElementById('startGameButton').innerHTML = 'Start Game'; document.getElementById('startGameButton').innerHTML = 'Start Game';
document.getElementById('startTournament').hidden = 0;
document.getElementById('stopGameButton').hidden = 1;
this.app.style.maxWidth = null;
} }
} }
@ -119,9 +156,15 @@ class Game {
BALLSPEED: 2, BALLSPEED: 2,
BALLSPEEDINCR: 0.15, BALLSPEEDINCR: 0.15,
MAXBOUNCEANGLE: 10 * (Math.PI / 12), MAXBOUNCEANGLE: 10 * (Math.PI / 12),
MAXSCORE: 1 MAXSCORE: 0
}; };
this.app = document.getElementById("app");
this.app.style.maxWidth = Number(this.def.CANVASWIDTH) + "px";
this.player1 = player1;
this.player2 = player2;
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.canvas.id = 'gameCanvas'; this.canvas.id = 'gameCanvas';
this.canvas.width = this.def.CANVASWIDTH; this.canvas.width = this.def.CANVASWIDTH;
@ -129,12 +172,10 @@ class Game {
this.canvas.style.border = '1px solid #d3d3d3'; this.canvas.style.border = '1px solid #d3d3d3';
this.canvas.style.backgroundColor = '#f1f1f1'; this.canvas.style.backgroundColor = '#f1f1f1';
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
document.getElementById('app').appendChild(this.canvas); this.app.appendChild(this.canvas);
this.scoresDisplay = document.createElement('p'); this.scoresDisplay = document.createElement('p');
this.scoresDisplay.innerHTML = 'Scores: 0 - 0'; this.scoresDisplay.innerHTML = `${this.player1}: 0 - ${this.player2}: 0`;
document.getElementById('app').appendChild(this.scoresDisplay); this.app.appendChild(this.scoresDisplay);
this.player1 = player1;
this.player2 = player2;
this.players = [ this.players = [
{ {
@ -169,6 +210,10 @@ class Game {
document.removeEventListener('keydown', this.keyDownHandler); document.removeEventListener('keydown', this.keyDownHandler);
document.removeEventListener('keyup', this.keyUpHandler); document.removeEventListener('keyup', this.keyUpHandler);
this.canvas.style.display = 'none'; this.canvas.style.display = 'none';
["up1", "up2", "down1", "down2", "player1", "player2"].forEach(button => {
if (document.getElementById(button) != null)
document.getElementById(button).remove();
});
} }
clear() { clear() {
@ -177,10 +222,14 @@ class Game {
updateGame() { updateGame() {
//Paddle movement //Paddle movement
/*let log = document.getElementById("log");
console.log(log);
log.setAttribute("log", this.keys)
log.innerText = "keys: " + log.getAttribute("log");*/
if ((this.keys.includes('s') || this.keys.includes('down1')) && 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.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
this.players[0].paddle.y += this.def.PADDLESPEED; this.players[0].paddle.y += this.def.PADDLESPEED;
if ((this.keys.includes('2') || this.keys.includes('up1')) && if ((this.keys.includes('w') || this.keys.includes('up1')) &&
this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN) this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
this.players[0].paddle.y -= this.def.PADDLESPEED; this.players[0].paddle.y -= this.def.PADDLESPEED;
@ -228,7 +277,7 @@ class Game {
this.scoresDisplay.innerHTML = this.player2 + ' wins!! GGS'; this.scoresDisplay.innerHTML = this.player2 + ' wins!! GGS';
this.cleanup(); this.cleanup();
} else { } else {
this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`; this.scoresDisplay.innerHTML = `${this.player1}: ${p1Score} - ${this.player2}: ${p2Score}`;
this.ballStartSide = 1 - this.ballStartSide; this.ballStartSide = 1 - this.ballStartSide;
this.ball = new Ball(this.context, this.def, this.ballStartSide); this.ball = new Ball(this.context, this.def, this.ballStartSide);
this.ballRespawned = true; this.ballRespawned = true;
@ -268,12 +317,10 @@ class Game {
} }
keyDownHandler(ev) { keyDownHandler(ev) {
let attributes = ev.originalTarget.attributes; let attributes = ev.originalTarget.attributes;
let key = ev.key === undefined ? `${attributes.direction.value}${attributes.user_id.value}` : ev.key; let key = ev.key === undefined ? `${attributes.direction.value}${attributes.user_id.value}` : ev.key;
if (!this.keys.includes(key)) if (!this.keys.includes(key))
this.keys.push(key); this.keys.push(key);
} }

4
frontend/static/js/views/GameView.js
View File

@ -1,6 +1,5 @@
import { client, reloadView, lang } from "../index.js"; import { client, reloadView, lang } from "../index.js";
import { Game } from "../api/game/Game.js"; import { Game } from "../api/game/Game.js";
import AbstractView from "./abstracts/AbstractView.js";
import { MyPlayer } from "../api/game/MyPlayer.js"; import { MyPlayer } from "../api/game/MyPlayer.js";
import { Player } from "../api/game/Player.js"; import { Player } from "../api/game/Player.js";
import { initShaderProgram, shaderInfos } from "../3D/shaders.js" import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
@ -9,8 +8,9 @@ import "../3D/maths/gl-matrix-min.js"
import "../chartjs/chart.umd.min.js"; import "../chartjs/chart.umd.min.js";
import { get_labels, transformData } from "../utils/graph.js"; import { get_labels, transformData } from "../utils/graph.js";
import { sleep } from "../utils/sleep.js"; import { sleep } from "../utils/sleep.js";
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
export default class extends AbstractView export default class extends AbstractAuthenticatedView
{ {
constructor(params) constructor(params)
{ {