adding game mode button to matchmaking view

\

@@ -1,166 +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 { renderCube } from "../3D/cube.js"
-
-export default class extends AbstractView
-{
-	constructor(params)
-	{
-		super(params, "Game");
-		this.game = new Game(client, params.id);
-		this.keys_pressed = [];
-		this.my_player = undefined;
-		this.gl = null;
-		this.shader_prog = null;
-		this.buffers = null;
-		this.cam_pos = [0, 1000, 0];
-		this.cam_target = [0, 0, 0];
-	}
-
-	initGL()
-	{
-		const canvas = document.getElementById('glcanva');
-		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);
-	}
-
-	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 = "glcanva"; 
-
-		document.getElementById("app").appendChild(canvas);
-
-		this.initGL();
-
-		this.render_game();
-	}
-
-	draw()
-	{
-		const canvas = document.getElementById('glcanva');
-		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, [0, 1, 0]);
-
-		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();
-	}
-
-	async postInit()
-	{
-		let error_code = await this.game.init();
-
-		if (error_code)
-			return error_code;
-
-		await this.update_game_state();
-	}
-
-	async getHtml()
-	{
-		return /* HTML */ `
-			<link rel="stylesheet" href="/static/css/game.css">
-			<h2 id="game-state"></h2>
-			<div id="player_list"></div>
-		`;
-	}
-}
-

frontend/static/js/index.js

@@ -5,8 +5,8 @@ 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 GameView from "./views/GameView.js";
+import GameView2D from "./views/GameView.js";
-import GameView from "./views/GameView3D.js";
+import GameView3D from "./views/GameView3D.js";
 
 import PageNotFoundView from './views/PageNotFoundView.js' 
 
@@ -88,7 +88,8 @@ const router = async(uri) => {
         { path: "/settings", view: SettingsView },
         { path: "/matchmaking", view: MatchMakingView },
         { path: "/games/offline", view: GameOfflineView },
-        { path: "/games/:id", view: GameView },
+        { path: "/games/0/:id", view: GameView2D },
+        { path: "/games/1/:id", view: GameView3D },
     ];
 
     // Test each route for potential match

frontend/static/js/views/MatchMakingView.js

@@ -5,7 +5,8 @@ import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js"
 export default class extends AbstractAuthenticatedView {
     constructor(params)
     {
-        super(params, "Matchmaking");
+		super(params, "Matchmaking");
+		this.game_mode = 0; // 0 -> 2D; 1 -> 3D
     }
 
     async press_button()
@@ -25,6 +26,20 @@ export default class extends AbstractAuthenticatedView {
         }
     }
 
+	async press_button_game_mode()
+	{
+		if(this.game_mode === 0)
+		{
+			document.getElementById("game-mode").value = "3D";
+			this.game_mode = 1;
+		}
+		else
+		{
+			document.getElementById("game-mode").value = "2D";
+			this.game_mode = 0;
+		}
+	}
+
     ondisconnect(event)
     {
         if (event.code === 1000)
@@ -36,7 +51,7 @@ export default class extends AbstractAuthenticatedView {
     {
         if (data.detail === "game_found")
         {
-            navigateTo(`/games/${data.game_id}`);
+            navigateTo(`/games/${this.game_mode}/${data.game_id}`);
             return;
         }
         this.display_data(data)
@@ -51,6 +66,7 @@ export default class extends AbstractAuthenticatedView {
     async postInit()
     {
         document.getElementById("button").onclick = this.press_button.bind(this)
+        document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this)
     }
 
     async getHtml() {
@@ -58,6 +74,7 @@ export default class extends AbstractAuthenticatedView {
 			<h1>Select mode</h1>
             <input type="number" value="2" id="nb_players-input">
             <input type="button" value="Find a game" id="button">
+            <input type="button" value="2D" id="game-mode">
             <span id="detail"></span>
         `;
     }