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

pong offline est casse mais tkt c'est juste pour push et aller bosser a 42

Browse Source
This commit is contained in:
Kbz-8
2024-05-06 15:22:48 +02:00
parent e4fd6dcea5
commit 2bc42e3349
1 changed files with 105 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/static/js/views/PongOfflineView.js
View File

@ -18,6 +18,8 @@ export class PongOfflineView extends AbstractAuthenticatedView {
this.final_winner = undefined;
this.round = -1;
this.game_mode = 1; // 1 is 2D, 2 is 3D
}
async getHtml() {
@ -28,6 +30,7 @@ export class PongOfflineView extends AbstractAuthenticatedView {
<button id='resetGameButton'>Reset Game</button>
<button id='stopGameButton'>Stop Game</button>
<button id='startTournament'>Start Tournament</button>
<button id='gameMode'>Switch to 3D</button>
<div id="display"></div>
<div id="display-button"></div>
<svg id="tree" height="3000" width="3000"></svg>
@ -42,12 +45,29 @@ export class PongOfflineView extends AbstractAuthenticatedView {
document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
document.getElementById('stopGameButton').hidden = 1;
document.getElementById('startTournament').onclick = this.startTournament.bind(this);
document.getElementById('gameMode').hidden = 1;
document.getElementById("gameMode").onclick = this.toggleGameMode.bind(this);
}
async leavePage() {
this.game?.cleanup();
}
async toggleGameMode()
{
console.log(this.game_mode);
if(this.game_mode === 1) // 3D
{
this.game_mode = 2;
document.getElementById("gameMode").innerText = "Switch to 2D";
}
else if(this.game_mode === 2) // 2D
{
this.game_mode = 1;
document.getElementById("gameMode").innerText = "Switch to 3D";
}
}
startTournament() {
let startTournament = document.getElementById("startTournament");
let player1 = document.createElement("input");
@ -164,6 +184,7 @@ export class PongOfflineView extends AbstractAuthenticatedView {
document.getElementById('startGameButton').hidden = 1;
document.getElementById('stopGameButton').hidden = 0;
document.getElementById('resetGameButton').hidden = 0;
document.getElementById('gameMode').hidden = 0;
}
stopGame() {
@ -178,6 +199,7 @@ export class PongOfflineView extends AbstractAuthenticatedView {
document.getElementById('startGameButton').hidden = 0;
document.getElementById('stopGameButton').hidden = 1;
document.getElementById('resetGameButton').hidden = 1;
document.getElementById('gameMode').hidden = 1;
this.app.style.maxWidth = null;
}
@ -262,18 +284,12 @@ class Game {
this.app = document.getElementById("display");
this.app.style.maxWidth = Number(this.def.CANVASWIDTH) + "px";
this.canvas = null;
this.context = null;
this.player_name1 = player_name1;
this.player_name2 = player_name2;
this.canvas = document.createElement('canvas');
this.canvas.id = 'gameCanvas';
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');
this.app.appendChild(this.canvas);
this.scoresDisplay = document.createElement('p');
this.scoresDisplay.innerHTML = `${this.player_name1}: 0 - ${this.player_name2}: 0`;
this.app.appendChild(this.scoresDisplay);
@ -304,6 +320,48 @@ class Game {
document.addEventListener('keydown', this.keyDownHandler);
document.addEventListener('keyup', this.keyUpHandler);
// stufs for 3D
this.shader_prog = null;
this.buffers = null;
this.cam_pos = [0, 400, 0];
this.cam_target = [0, 0, 0];
this.cam_up = [0, 0, -1];
}
initWebGL()
{
this.canvas = document.createElement("canvas");
this.canvas.height = this.game.config.MAP_SIZE_X;
this.canvas.width = this.game.config.MAP_SIZE_Y;
this.canvas.id = "gameCanvas";
this.app.appendChild(this.canvas);
this.context = canva.getContext("webgl");
if(this.ctx === null)
{
alert("Unable to initialize WebGL. Your browser or machine may not support it. You may also be a bozo");
return;
}
this.shader_prog = initShaderProgram(this.ctx);
this.buffers = initBuffers(this.ctx);
this.ctx.enable(this.ctx.CULL_FACE);
this.ctx.cullFace(this.ctx.BACK);
}
init2D()
{
this.canvas = document.createElement('canvas');
this.canvas.id = 'gameCanvas';
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');
this.app.appendChild(this.canvas);
}
finish(winner) {
@ -450,6 +508,44 @@ class Game {
this.keys.push(key);
}
setNormalAttribute()
{
const numComponents = 3;
const type = this.ctx.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.buffers.normal);
this.ctx.vertexAttribPointer(
shaderInfos.attribLocations.vertexNormal,
numComponents,
type,
normalize,
stride,
offset,
);
this.ctx.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal);
}
setPositionAttribute()
{
const numComponents = 3;
const type = this.ctx.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.buffers.vertex);
this.ctx.bindBuffer(this.ctx.ELEMENT_ARRAY_BUFFER, this.buffers.index);
this.ctx.vertexAttribPointer(
shaderInfos.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset
);
this.ctx.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition);
}
}
class Paddle {