From 9aa2001185e172fd866cbe886d9eb9d3d81fb005 Mon Sep 17 00:00:00 2001 From: Kbz-8 Date: Mon, 6 May 2024 18:19:01 +0200 Subject: [PATCH] pong offline toujours casse mais tkt --- frontend/static/js/views/PongOfflineView.js | 121 ++++++++++++++------ frontend/static/js/views/PongOnlineView.js | 1 - 2 files changed, 86 insertions(+), 36 deletions(-) diff --git a/frontend/static/js/views/PongOfflineView.js b/frontend/static/js/views/PongOfflineView.js index 36f0a70..65d9902 100644 --- a/frontend/static/js/views/PongOfflineView.js +++ b/frontend/static/js/views/PongOfflineView.js @@ -1,4 +1,7 @@ import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js"; +import "../3D/maths/gl-matrix-min.js" +import { initShaderProgram, shaderInfos } from "../3D/shaders.js" +import { initBuffers } from "../3D/buffers.js" export class PongOfflineView extends AbstractAuthenticatedView { constructor(params) { @@ -20,6 +23,8 @@ export class PongOfflineView extends AbstractAuthenticatedView { this.round = -1; this.game_mode = 1; // 1 is 2D, 2 is 3D + + } async getHtml() { @@ -46,7 +51,7 @@ export class PongOfflineView extends AbstractAuthenticatedView { 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); + document.getElementById('gameMode').onclick = this.toggleGameMode.bind(this); } async leavePage() { @@ -55,7 +60,6 @@ export class PongOfflineView extends AbstractAuthenticatedView { async toggleGameMode() { - console.log(this.game_mode); if(this.game_mode === 1) // 3D { this.game_mode = 2; @@ -296,21 +300,17 @@ class Game { this.players = [ { - paddle: new Paddle(this.context, - this.def.PADDLEMARGIN, - this.def), + paddle: new Paddle(this.def.PADDLEMARGIN, this.def), score: 0 }, { - paddle: new Paddle(this.context, - this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH, - this.def), + paddle: new Paddle(this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH, this.def), score: 0 } ]; this.ballStartSide = 0; this.ballRespawned = false; - this.ball = new Ball(this.context, this.def, this.ballStartSide); + this.ball = new Ball(this.def, this.ballStartSide); this.interval = setInterval(this.updateGame.bind(this), 10); @@ -328,12 +328,16 @@ class Game { this.cam_up = [0, 0, -1]; } + initGame() + { + } + 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.canvas.id = "gameCanvas"; this.app.appendChild(this.canvas); this.context = canva.getContext("webgl"); @@ -361,7 +365,6 @@ class Game { this.canvas.style.backgroundColor = '#f1f1f1'; this.context = this.canvas.getContext('2d'); this.app.appendChild(this.canvas); - } finish(winner) { @@ -447,10 +450,39 @@ class Game { this.ball.y += this.ball.vy; } - this.clear(); - this.players[0].paddle.update(); - this.players[1].paddle.update(); - this.ball.update(); + if(this.ctx instanceof CanvasRenderingContext2D) + { + this.clear(); + } + else if(this.ctx instanceof WebGLRenderingContext) + { + this.context.clearColor(0.1, 0.1, 0.1, 1.0); + this.context.clearDepth(1.0); + this.context.enable(this.context.DEPTH_TEST); + this.context.depthFunc(this.context.LEQUAL); + this.context.clear(this.context.COLOR_BUFFER_BIT | this.context.DEPTH_BUFFER_BIT); + + const projectionMatrix = mat4.create(); + const viewMatrix = mat4.create(); + + mat4.perspective(projectionMatrix, (90 * Math.PI) / 180, this.context.canvas.clientWidth / this.context.canvas.clientHeight, 0.1, 10000000.0); + mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, this.cam_up); + + this.setPositionAttribute(); + this.setNormalAttribute(); + + this.context.useProgram(shaderInfos.program); + + this.context.uniformMatrix4fv(shaderInfos.uniformLocations.projectionMatrix, false, projectionMatrix); + this.context.uniformMatrix4fv(shaderInfos.uniformLocations.viewMatrix, false, viewMatrix); + } + else + { + alert('Unknown rendering context type'); + } + this.players[0].paddle.update(this.context); + this.players[1].paddle.update(this.context); + this.ball.update(this.context); } updateScore(p1Score, p2Score) { @@ -511,12 +543,12 @@ class Game { setNormalAttribute() { const numComponents = 3; - const type = this.ctx.FLOAT; + const type = this.context.FLOAT; const normalize = false; const stride = 0; const offset = 0; - this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.buffers.normal); - this.ctx.vertexAttribPointer( + this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.normal); + this.context.vertexAttribPointer( shaderInfos.attribLocations.vertexNormal, numComponents, type, @@ -524,7 +556,7 @@ class Game { stride, offset, ); - this.ctx.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal); + this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal); } setPositionAttribute() @@ -534,9 +566,9 @@ class Game { 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( + this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.vertex); + this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.buffers.index); + this.context.vertexAttribPointer( shaderInfos.attribLocations.vertexPosition, numComponents, type, @@ -544,23 +576,33 @@ class Game { stride, offset ); - this.ctx.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition); + this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition); } } class Paddle { - constructor(context, paddleSide, def) { + constructor(paddleSide, def) { this.width = def.PADDLEWIDTH; this.height = def.PADDLEHEIGHT; this.x = paddleSide; this.y = def.CANVASHEIGHT / 2 - this.height / 2; - this.ctx = context; this.update(); } - update() { - this.ctx.fillStyle = 'black'; - this.ctx.fillRect(this.x, this.y, this.width, this.height); + update(ctx) { + if(this.ctx instanceof CanvasRenderingContext2D) + { + ctx.fillStyle = 'black'; + ctx.fillRect(this.x, this.y, this.width, this.height); + } + else if(this.ctx instanceof WebGLRenderingContext) + { + // const size = this.game.config.BALL_SIZE * 2; + // const sizex = this.len() / 2; + // const posx = (this.x - this.game.config.MAP_CENTER_X); + // const posy = (this.y - this.game.config.MAP_CENTER_Y); + // renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size); + } } getCenter() { @@ -572,7 +614,7 @@ class Paddle { } class Ball { - constructor(context, def, startSide) { + constructor(def, startSide) { this.radius = def.BALLRADIUS; this.speed = def.BALLSPEED; this.x = def.CANVASWIDTH / 2; @@ -582,14 +624,23 @@ class Ball { this.vx = -this.speed; else this.vx = this.speed; - this.ctx = context; this.update(); } - update() { - this.ctx.fillStyle = 'black'; - this.ctx.beginPath(); - this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); - this.ctx.fill(); + update(ctx) { + if(this.ctx instanceof CanvasRenderingContext2D) + { + ctx.fillStyle = 'black'; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); + ctx.fill(); + } + else if(this.ctx instanceof WebGLRenderingContext) + { + //const size = this.size * 3; + //const posx = (this.position.location.x - this.size / 2) - this.game.config.MAP_SIZE_X / 2; + //const posy = (this.position.location.y - this.size / 2) - this.game.config.MAP_SIZE_Y / 2; + //renderCube(ctx, posx, 0, posy, 0, size, size, size); + } } } diff --git a/frontend/static/js/views/PongOnlineView.js b/frontend/static/js/views/PongOnlineView.js index cff1122..5351544 100644 --- a/frontend/static/js/views/PongOnlineView.js +++ b/frontend/static/js/views/PongOnlineView.js @@ -225,7 +225,6 @@ export class PongOnlineView extends AbstractAuthenticatedView document.removeEventListener('keyup', this.keyReleaseHandler); } - /** * @param {int} game_mode * @returns { Cramptex }