merging the game views

frontend/static/js/index.js

@@ -4,8 +4,7 @@ import Search from "./views/Search.js";
 import HomeView from "./views/HomeView.js";
 import LogoutView from "./views/accounts/LogoutView.js";
 import GameOfflineView from "./views/GameOfflineView.js";
-import GameView2D from "./views/GameView.js";
+import GameView from "./views/GameView.js";
-import GameView3D from "./views/GameView3D.js";
 
 import PageNotFoundView from './views/PageNotFoundView.js' ;
 
@@ -92,7 +91,7 @@ const router = async(uri) => {
         { path: "/matchmaking", view: MatchMakingView },
         { path: "/games/offline", view: GameOfflineView },
 		{ path: "/tictactoe", view: TicTacToeView },
-        { path: "/games/pong/:id", view: GameView2D },
+        { path: "/games/pong/:id", view: GameView },
         { path: "/games/tictactoe/:id", view: TicTacToeOnlineView },
     ];
 

frontend/static/js/views/GameView.js

@@ -3,6 +3,9 @@ import { Game } from "../api/game/Game.js";
 import AbstractView from "./abstracts/AbstractView.js";
 import { MyPlayer } from "../api/game/MyPlayer.js";
 import { Player } from "../api/game/Player.js";
+import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
+import { initBuffers } from "../3D/buffers.js"
+import "../3D/maths/gl-matrix-min.js"
 import "../chartjs/chart.umd.min.js";
 import { get_labels, transformData } from "../utils/graph.js";
 import { sleep } from "../utils/sleep.js";
@@ -13,6 +16,47 @@ export default class extends AbstractView
 	{
 		super(params, "Game");
 		this.game_id = params.id;
+		this.ctx = null;
+		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];
+		this.game_mode = 1; // 1 is 2D, 2 is 3D
+    }
+
+	initWebGL()
+	{
+		let canva = document.createElement("canvas");
+		canva.height = this.game.config.size_x;
+		canva.width = this.game.config.size_y;
+		canva.id = "canva"; 
+		document.getElementById("app").appendChild(canva);
+
+		this.ctx = 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()
+	{
+		let canva = document.createElement("canvas");
+		canva.height = this.game.config.size_x;
+		canva.width = this.game.config.size_y;
+		canva.id = "canva"; 
+		document.getElementById("app").appendChild(canva);
+
+		this.ctx = canva.getContext('2d');
 	}
 
 	keyReleaseHandler(event)
@@ -28,25 +72,87 @@ export default class extends AbstractView
 			this.keys_pressed.push(event.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);
+	}
+
 	render_game()
 	{
 		const canva = document.getElementById('canva');
-
 		if (canva === null)
 			return 1;
 
-        /**
+		if(this.ctx instanceof CanvasRenderingContext2D)
-         * @type {CanvasRenderingContext2D}
+		{
-         */
+			this.ctx.beginPath();
-        let ctx = canva.getContext('2d');
+			this.game.render(this.ctx);
+			this.ctx.strokeStyle = "#000000";
+			this.ctx.lineWidth = 1;
+			this.ctx.stroke();
+		}
+		else if(this.ctx instanceof WebGLRenderingContext)
+		{
+			this.ctx.clearColor(0.1, 0.1, 0.1, 1.0);
+			this.ctx.clearDepth(1.0);
+			this.ctx.enable(this.ctx.DEPTH_TEST);
+			this.ctx.depthFunc(this.ctx.LEQUAL);
+			this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);
 
-        ctx.beginPath();
+			const projectionMatrix = mat4.create();
+			const viewMatrix = mat4.create();
 
-        this.game.render(ctx);
+			mat4.perspective(projectionMatrix, (90 * Math.PI) / 180, this.ctx.canvas.clientWidth / this.ctx.canvas.clientHeight, 0.1, 10000000.0);
+			mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, this.cam_up);
 
-        ctx.strokeStyle = "#000000";
+			this.setPositionAttribute();
-        ctx.lineWidth = 1;
+			this.setNormalAttribute();
-        ctx.stroke();
+
+			this.ctx.useProgram(shaderInfos.program);
+
+			this.ctx.uniformMatrix4fv(shaderInfos.uniformLocations.projectionMatrix, false, projectionMatrix);
+			this.ctx.uniformMatrix4fv(shaderInfos.uniformLocations.viewMatrix, false, viewMatrix);
+
+			this.game.render(this.ctx);
+		}
+		else
+		{
+			alert('Unknown rendering context type');
+		}
 	}
 
 	/**
@@ -62,7 +168,7 @@ export default class extends AbstractView
 	 * @param {*} data
 	 * @returns { Promise } 
 	 */
-    async on_finish(data)
+	async on_finish(data /* unused */)
 	{
 		await reloadView();
 	}
@@ -80,6 +186,25 @@ export default class extends AbstractView
 		}, 1000 / 60);
 	}
 
+	async toggleGameMode()
+	{
+		if(this.game_mode === 1) // 3D
+		{
+			this.game_mode = 2;
+			document.getElementById("game-mode").value = "Switch to 2D";
+		}
+		else if(this.game_mode === 2) // 2D
+		{
+			this.game_mode = 1;
+			document.getElementById("game-mode").value = "Switch to 3D";
+		}
+		const canva = document.getElementById('canva');
+		if (canva === null)
+			return;
+		document.getElementById("app").removeChild(canva);
+		this.createGameBoard(this.game_mode);
+	}
+
 	register_key()
 	{
 		this.keyPressHandler = this.keyPressHandler.bind(this);
@@ -94,15 +219,16 @@ export default class extends AbstractView
 		document.removeEventListener('keyup', this.keyReleaseHandler);
 	}
 
-    createGameBoard()
+	/**
+	 * @param {int} game_mode
+	 * @returns { Cramptex } 
+	 */
+	createGameBoard(game_mode)
 	{
-        let canva = document.createElement("canvas");
+		if(game_mode === 1)
-
+			this.init2D();
-        canva.height = this.game.config.size_x;
+		else if(game_mode === 2)
-        canva.width = this.game.config.size_y;
+			this.initWebGL();
-        canva.id = "canva"; 
-
-        document.getElementById("app").appendChild(canva);
 	}
 
 	createMyPlayer()
@@ -124,16 +250,12 @@ export default class extends AbstractView
 
 	async join_game()
 	{
+		document.getElementById("game-mode").onclick = this.toggleGameMode.bind(this);
 		await this.game.join();
-
+		this.createGameBoard(1); // create the board for 2D game by default. Can switch to 3D with a toggle
-        this.createGameBoard();
-
 		this.createMyPlayer();
-
 		this.displayPlayersList();
-
 		this.register_key();
-
 		this.render();
 	}
 
@@ -144,7 +266,12 @@ export default class extends AbstractView
 		if (this.game.finished === false)
 			await this.join_game();
 		else
+		{
 			this.createGraph();
+			let toggle = document.getElementById("game-mode");
+			if(toggle !== null)
+				toggle.remove();
+		}
 	}
 
 	createGraph()
@@ -179,7 +306,7 @@ export default class extends AbstractView
 			datasets.push({
 				data: data,
 				label: player.username,
-                borderColor: `#${Math.floor(Math.random()*16777215).toString(16)}`,
+				borderColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
 				fill: false,
 			});
 		});
@@ -269,6 +396,7 @@ export default class extends AbstractView
 		return /* HTML */ `
 			<link rel="stylesheet" href="/static/css/game.css">
 			<h2 id="game-state"></h2>
+			<input type="button" value="Switch to 3D" id="game-mode">
 		`;
 	}
 }

frontend/static/js/views/GameView3D.js

@@ -1,266 +0,0 @@
-import { client } from "../index.js";
-import { Game } from "../api/game/Game.js";
-import AbstractView from "./abstracts/AbstractView.js";
-import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
-import { initBuffers } from "../3D/buffers.js"
-import "../3D/maths/gl-matrix-min.js"
-import { MyPlayer } from "../api/game/MyPlayer.js";
-import { lang } from "../index.js";
-
-export default class extends AbstractView
-{
-	constructor(params)
-	{
-		super(params, "Game");
-		this.game = new Game(client, params.id, this.update_goal);
-		this.keys_pressed = [];
-		this.my_player = undefined;
-		this.gl = null;
-		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];
-	}
-
-	keyReleaseHandler(event)
-	{
-		let 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()
-	{
-		const canvas = document.getElementById('canva');
-		this.gl = canvas.getContext("webgl");
-
-		if(this.gl === 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.gl);
-		this.buffers = initBuffers(this.gl);
-
-		this.gl.enable(this.gl.CULL_FACE);
-		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();
-
-		let canvas = document.createElement("canvas");
-
-		canvas.height = this.game.config.size_x;
-		canvas.width = this.game.config.size_y;
-		canvas.id = "canva"; 
-
-		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();
-	}
-
-	draw()
-	{
-		const canvas = document.getElementById('canva');
-		if(canvas === null)
-			return 1;
-
-		this.gl.clearColor(0.1, 0.1, 0.1, 1.0);
-		this.gl.clearDepth(1.0);
-		this.gl.enable(this.gl.DEPTH_TEST);
-		this.gl.depthFunc(this.gl.LEQUAL);
-		this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
-
-		const projectionMatrix = mat4.create();
-		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, this.cam_up);
-
-		this.setPositionAttribute();
-		this.setNormalAttribute();
-
-		this.gl.useProgram(shaderInfos.program);
-
-		this.gl.uniformMatrix4fv(shaderInfos.uniformLocations.projectionMatrix, false, projectionMatrix);
-		this.gl.uniformMatrix4fv(shaderInfos.uniformLocations.viewMatrix, false, viewMatrix);
-
-		this.game.render(this.gl);
-	}
-
-	setNormalAttribute()
-	{
-		const numComponents = 3;
-		const type = this.gl.FLOAT;
-		const normalize = false;
-		const stride = 0;
-		const offset = 0;
-		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.normal);
-		this.gl.vertexAttribPointer(
-			shaderInfos.attribLocations.vertexNormal,
-			numComponents,
-			type,
-			normalize,
-			stride,
-			offset,
-		);
-		this.gl.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal);
-	}
-
-	setPositionAttribute()
-	{
-		const numComponents = 3;
-		const type = this.gl.FLOAT;
-		const normalize = false;
-		const stride = 0;
-		const offset = 0;
-		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.vertex);
-		this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffers.index);
-		this.gl.vertexAttribPointer(
-			shaderInfos.attribLocations.vertexPosition,
-			numComponents,
-			type,
-			normalize,
-			stride,
-			offset
-		);
-		this.gl.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition);
-	}
-
-	render_game()
-	{
-		let loop_id = setInterval(() => {
-			if (this.game === undefined)
-				clearInterval(loop_id);
-			if (this.my_player)
-				this.my_player.update_paddle(this.keys_pressed);
-			this.draw();
-			this.game?.time.new_frame();
-		}, 1000 / 60);
-	}
-
-	async update_game_state()
-	{
-		document.getElementById("game-state").innerText = this.game.state;
-
-		if (this.game.finished === false)
-			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);
-        });
-    }
-
-	toggle2D()
-	{
-		window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/0");
-	}
-
-	async postInit()
-	{
-		let error_code = await this.game.init();
-
-		if (error_code)
-			return error_code;
-
-		await this.update_game_state();
-		this.display_players_list();
-		document.getElementById("game-mode").onclick = this.toggle2D;
-	}
-
-    async leavePage()
-    {
-        if (this.game.finished === false)
-        {
-            this.game.leave();
-            this.game = undefined;
-        }
-        this.unregister_key();
-    }
-
-	async getHtml()
-	{
-        return /* HTML */ `
-            <link rel="stylesheet" href="/static/css/game.css">
-            <h2 id="game-state"></h2>
-            <input type="button" value="2D" id="game-mode">
-
-            <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>
-        `;
-	}
-}
-