working on 3D camera

frontend/static/js/api/game/Ball.js

@@ -52,8 +52,9 @@ class Ball
 		}
 		else if(ctx instanceof WebGLRenderingContext)
 		{
-			console.log((this.position.x - this.size / 2) / 10, 0, (this.position.y - this.size / 2) / 10)
+			const posx = (this.position.x - this.size / 2) / 2;
-			renderCube(ctx, (this.position.x - this.size / 2) / 10, 0, (this.position.y - this.size / 2) / 10, 0, this.size * 10, this.size * 10, this.size * 10);
+			const posy = (this.position.y - this.size / 2) / 2;
+			renderCube(ctx, posx, 0, posy, 0, this.size * 5, this.size * 5, this.size * 5);
 		}
 		else
 		{

frontend/static/js/api/game/Game.js

@@ -121,9 +121,12 @@ class Game
         this.draw_sides(ctx);
         this.ball.render(ctx);
 
-        ctx.strokeStyle = "#000000";
+		if(ctx instanceof CanvasRenderingContext2D)
-        ctx.lineWidth = this.config.stroke_thickness;
+		{
-        ctx.stroke();
+			ctx.strokeStyle = "#000000";
+			ctx.lineWidth = this.config.stroke_thickness;
+			ctx.stroke();
+		}
     }
 
     _send(data)

frontend/static/js/views/GameView.js

@@ -131,7 +131,7 @@ export default class extends AbstractView
             let tr = document.createElement("tr");
             let name = document.createElement("td");
             let goal = document.createElement("td");
-            
+
             name.id = `username-${player.id}`;
             goal.id = `goal-${player.id}`;
 

frontend/static/js/views/GameView3D.js

@@ -5,6 +5,8 @@ import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
 import { initBuffers } from "../3D/buffers.js"
 import "../3D/maths/gl-matrix-min.js"
 import { renderCube } from "../3D/cube.js"
+import { MyPlayer } from "../api/game/MyPlayer.js";
+import { lang } from "../index.js";
 
 export default class extends AbstractView
 {
@@ -18,7 +20,21 @@ export default class extends AbstractView
 		this.shader_prog = null;
 		this.buffers = null;
 		this.cam_pos = [0, 500, 0];
-		this.cam_target = [0, 0, 35];
+		this.cam_target = [0, 0, 0];
+		this.cam_up = [1, 0, 0];
+	}
+
+	keyReleaseHandler(event)
+    {
+		const idx = this.keys_pressed.indexOf(event.key);
+		if (idx != -1)
+			this.keys_pressed.splice(idx, 1);
+	}
+
+    keyPressHandler(event)
+    {
+		if (!this.keys_pressed.includes(event.key))
+			this.keys_pressed.push(event.key);
 	}
 
 	initGL()
@@ -39,6 +55,25 @@ export default class extends AbstractView
 		this.gl.cullFace(this.gl.BACK);
 	}
 
+    update_goal(data)
+    {
+        document.getElementById(`goal-${data.player}`).innerText = data.nb_goal;
+    }
+
+    register_key()
+    {
+		this.keyPressHandler = this.keyPressHandler.bind(this);
+		this.keyReleaseHandler = this.keyReleaseHandler.bind(this);
+        document.addEventListener('keydown', this.keyPressHandler);
+		document.addEventListener('keyup', this.keyReleaseHandler);
+    }
+
+    unregister_key()
+    {
+        document.removeEventListener('keydown', this.keyPressHandler);
+		document.removeEventListener('keyup', this.keyReleaseHandler);
+    }
+
 	async join_game()
 	{
 		await this.game.join()
@@ -51,6 +86,21 @@ export default class extends AbstractView
 
 		document.getElementById("app").appendChild(canvas);
 
+        let index = this.game.players.findIndex((player) => player.id === client.me.id);
+        if (index !== -1)
+        {
+            let my_player = this.game.players[index];
+            this.my_player = new MyPlayer(client,
+                                          this.game,
+                                          my_player.rail,
+                                          my_player.nb_goal,
+                                          my_player.position,
+                                        );
+            this.game.players[index] = this.my_player;
+        }
+
+        this.register_key();
+
 		this.initGL();
 
 		this.render_game();
@@ -72,7 +122,7 @@ export default class extends AbstractView
 		const viewMatrix = mat4.create();
 
 		mat4.perspective(projectionMatrix, (90 * Math.PI) / 180, this.gl.canvas.clientWidth / this.gl.canvas.clientHeight, 0.1, 10000000.0);
-		mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, [0, 1, 0]);
+		mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, this.cam_up);
 
 		this.setPositionAttribute();
 		this.setNormalAttribute();
@@ -144,6 +194,29 @@ export default class extends AbstractView
 			await this.join_game();
 	}
 
+    display_players_list()
+    {
+        let players_list = document.getElementById("players_list");
+
+        this.game.players.forEach(player => {
+
+            let tr = document.createElement("tr");
+            let name = document.createElement("td");
+            let goal = document.createElement("td");
+
+            name.id = `username-${player.id}`;
+            goal.id = `goal-${player.id}`;
+
+            name.innerText = player.username;
+            goal.innerText = player.nb_goal;
+
+            tr.appendChild(name);
+            tr.appendChild(goal);
+
+            players_list.appendChild(tr);
+        });
+    }
+
 	async postInit()
 	{
 		let error_code = await this.game.init();
@@ -151,16 +224,37 @@ export default class extends AbstractView
 		if (error_code)
 			return error_code;
 
+        await this.update_game_state();
 		await this.update_game_state();
 	}
 
+    async leavePage()
+    {
+        if (this.game.finished === false)
+        {
+            this.game.leave();
+            this.game = undefined;
+        }
+        this.unregister_key();
+    }
+
 	async getHtml()
 	{
-		return /* HTML */ `
+        return /* HTML */ `
-			<link rel="stylesheet" href="/static/css/game.css">
+            <link rel="stylesheet" href="/static/css/game.css">
-			<h2 id="game-state"></h2>
+            <h2 id="game-state"></h2>
-			<div id="player_list"></div>
+
-		`;
+            <table>
+                <thead>
+                    <tr>
+                        <th scope="col">${lang.get("gamePlayersListName")}</th>
+                        <th scope="col">${lang.get("gameGoalTaken")}</th>
+                    </tr>
+                </thead>
+                <tbody id="players_list">
+                </tbody>
+            </table>
+        `;
 	}
 }