From 2bc42e3349a95d130e067e3eab6d7a40935e7cc1 Mon Sep 17 00:00:00 2001 From: Kbz-8 Date: Mon, 6 May 2024 15:22:48 +0200 Subject: [PATCH] pong offline est casse mais tkt c'est juste pour push et aller bosser a 42 --- frontend/static/js/views/PongOfflineView.js | 114 ++++++++++++++++++-- 1 file changed, 105 insertions(+), 9 deletions(-) diff --git a/frontend/static/js/views/PongOfflineView.js b/frontend/static/js/views/PongOfflineView.js index 5916710..36f0a70 100644 --- a/frontend/static/js/views/PongOfflineView.js +++ b/frontend/static/js/views/PongOfflineView.js @@ -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 { +
@@ -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 {