fixing 3D

frontend/static/js/3D/cube.js

@@ -23,12 +23,6 @@ function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
 		[sx, sy, sz]
 	);
 
-	mat4.translate(
-		modelMatrix,
-		modelMatrix,
-		[-1, 0, 0] // wtf, this works ?
-	);
-
 	const normalMatrix = mat4.create();
 	mat4.invert(normalMatrix, modelMatrix);
 	mat4.transpose(normalMatrix, normalMatrix);

frontend/static/js/views/PongOfflineView.js

@@ -2,6 +2,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"
+import { renderCube } from "../3D/cube.js"
 
 export class PongOfflineView extends AbstractAuthenticatedView {
 	constructor(params) {
@@ -23,8 +24,6 @@ export class PongOfflineView extends AbstractAuthenticatedView {
 		this.round = -1; 
 
 		this.game_mode = 1; // 1 is 2D, 2 is 3D
-
-
 	}
 
 	async getHtml() {
@@ -171,20 +170,20 @@ export class PongOfflineView extends AbstractAuthenticatedView {
 			player2 = this.player2;
 		}
 		if (this.game == null) {
-			this.game = new Game(this, player1, player2);
+			this.game = new Game(this.game_mode, this, player1, player2);
 			this.createButton();
 		}
 		else {
 			this.app.removeChild(this.game.canvas);
 			this.app.removeChild(this.game.scoresDisplay);
 			this.game.cleanup();
-			this.game = new Game(this, player1, player2);
+			this.game = new Game(this.game_mode, this, player1, player2);
 			this.createButton();
 		}
 
 		if (this.round >= 0) {
 			await this.display_tree_tournament();
-		}
+		}
 		document.getElementById('startTournament').hidden = 1;
 		document.getElementById('startGameButton').hidden = 1;
 		document.getElementById('stopGameButton').hidden = 0;
@@ -267,7 +266,7 @@ export class PongOfflineView extends AbstractAuthenticatedView {
 }
 
 class Game {
-	constructor(this_pong, player_name1, player_name2) {
+	constructor(game_mode, this_pong, player_name1, player_name2) {
 
 		this.pong = this_pong;
 
@@ -324,11 +323,11 @@ class Game {
 		// stufs for 3D
 		this.shader_prog = null;
 		this.buffers = null;
-		this.cam_pos = [0, 400, 0];
+		this.cam_pos = [0, 150, -10];
 		this.cam_target = [0, 0, 0];
 		this.cam_up = [0, 0, -1];
 
-		this.initGame(1);
+		this.initGame(game_mode);
 	}
 
 	initGame(mode)
@@ -342,12 +341,14 @@ class Game {
 	initWebGL()
 	{
 		this.canvas = document.createElement("canvas");
-		this.canvas.height = this.config.MAP_SIZE_X;
+		this.canvas.width = this.def.CANVASWIDTH;
-		this.canvas.width = this.config.MAP_SIZE_Y;
+		this.canvas.height = this.def.CANVASHEIGHT;
 		this.canvas.id = "gameCanvas";
+		this.canvas.style.border = '1px solid #d3d3d3';
+		this.canvas.style.backgroundColor = '#f1f1f1';
 		this.app.appendChild(this.canvas);
 
-		this.context = canva.getContext("webgl");
+		this.context = this.canvas.getContext("webgl");
 
 		if(this.context === null)
 		{
@@ -355,11 +356,11 @@ class Game {
 			return;
 		}
 
-		this.shader_prog = initShaderProgram(this.ctx);
+		this.shader_prog = initShaderProgram(this.context);
-		this.buffers = initBuffers(this.ctx);
+		this.buffers = initBuffers(this.context);
 
-		this.ctx.enable(this.ctx.CULL_FACE);
+		this.context.enable(this.context.CULL_FACE);
-		this.ctx.cullFace(this.ctx.BACK);
+		this.context.cullFace(this.context.BACK);
 	}
 
 	init2D()
@@ -575,7 +576,7 @@ class Game {
 	setPositionAttribute()
 	{
 		const numComponents = 3;
-		const type = this.ctx.FLOAT;
+		const type = this.context.FLOAT;
 		const normalize = false;
 		const stride = 0;
 		const offset = 0;
@@ -599,6 +600,7 @@ class Paddle {
 		this.height = def.PADDLEHEIGHT;
 		this.x = paddleSide;
 		this.y = def.CANVASHEIGHT / 2 - this.height / 2;
+		this.def = def;
 		this.update();
 	}
 
@@ -610,11 +612,9 @@ class Paddle {
 		}
 		else if(ctx instanceof WebGLRenderingContext)
 		{
-		//	const size = this.game.config.BALL_SIZE * 2;
+			const posx = (this.x - this.def.CANVASWIDTH / 2);
-		//	const sizex = this.len() / 2;
+			const posy = (this.y - this.def.CANVASHEIGHT / 3);
-		//	const posx = (this.x - this.game.config.MAP_CENTER_X);
+			renderCube(ctx, posx, 0, posy, 0, this.width, this.width, this.height / 2);
-		//	const posy = (this.y - this.game.config.MAP_CENTER_Y);
-		//	renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
 		}
 	}
 
@@ -637,6 +637,7 @@ class Ball {
 			this.vx = -this.speed;
 		else
 			this.vx = this.speed;
+		this.def = def;
 		this.update();
 	}
 
@@ -650,10 +651,10 @@ class Ball {
 		}
 		else if(ctx instanceof WebGLRenderingContext)
 		{
-			//const size = this.size * 3;
+			const size = this.radius;
-			//const posx = (this.position.location.x - this.size / 2) - this.game.config.MAP_SIZE_X / 2;
+			const posx = (this.x - this.radius / 2) - this.def.CANVASWIDTH / 2;
-			//const posy = (this.position.location.y - this.size / 2) - this.game.config.MAP_SIZE_Y / 2;
+			const posy = (this.y - this.radius / 2) - this.def.CANVASHEIGHT / 2;
-			//renderCube(ctx, posx, 0, posy, 0, size, size, size);
+			renderCube(ctx, posx, 0, posy, 0, size, size, size);
 		}
 	}
 }