pong offline toujours casse mais tkt

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,
+				paddle: new Paddle(this.def.PADDLEMARGIN, this.def),
-							this.def.PADDLEMARGIN,
-							this.def),
 				score: 0
 			},
 			{
-				paddle: new Paddle(this.context,
+				paddle: new Paddle(this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH, this.def),
-							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,6 +328,10 @@ class Game {
 		this.cam_up = [0, 0, -1];
 	}
 
+	initGame()
+	{
+	}
+
 	initWebGL()
 	{
 		this.canvas = document.createElement("canvas");
@@ -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;
 		}
 
+		if(this.ctx instanceof CanvasRenderingContext2D)
+		{
 			this.clear();
-		this.players[0].paddle.update();
+		}
-		this.players[1].paddle.update();
+		else if(this.ctx instanceof WebGLRenderingContext)
-		this.ball.update();
+		{
+			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.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.normal);
-		this.ctx.vertexAttribPointer(
+		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.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.vertex);
-		this.ctx.bindBuffer(this.ctx.ELEMENT_ARRAY_BUFFER, this.buffers.index);
+		this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.buffers.index);
-		this.ctx.vertexAttribPointer(
+		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() {
+	update(ctx) {
-		this.ctx.fillStyle = 'black';
+		if(this.ctx instanceof CanvasRenderingContext2D)
-		this.ctx.fillRect(this.x, this.y, this.width, this.height);
+		{
+			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() {
+	update(ctx) {
-		this.ctx.fillStyle = 'black';
+		if(this.ctx instanceof CanvasRenderingContext2D)
-		this.ctx.beginPath();
+		{
-		this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+			ctx.fillStyle = 'black';
-		this.ctx.fill();
+			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);
+		}
 	}
 }

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 }