3D working

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

@@ -14,7 +14,7 @@ function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
 		modelMatrix,
 		modelMatrix,
 		angle,
-		[0, 1, 1],
+		[0, 1, 0],
 	);
 
 	mat4.scale(
@@ -23,6 +23,12 @@ 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/3D/shaders.js

@@ -15,7 +15,7 @@ const vertex_shader_source = `
 
 		highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
 		highp vec3 directionalLightColor = vec3(1, 1, 1);
-		highp vec3 directionalVector = normalize(vec3(1, 15, -1.75));
+		highp vec3 directionalVector = vec3(-10, 2, -10);
 
 		highp vec4 transformedNormal = uNormalMat * vec4(aNormal, 1.0);
 

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

@@ -52,9 +52,10 @@ class Ball
 		}
 		else if(ctx instanceof WebGLRenderingContext)
 		{
-			const posx = (this.position.x - this.size / 2) / 2;
+			const size = this.size * 3;
-			const posy = (this.position.y - this.size / 2) / 2;
+			const posx = (this.position.x - this.size / 2) - this.game.config.size_x / 2;
-			renderCube(ctx, posx, 0, posy, 0, this.size * 5, this.size * 5, this.size * 5);
+			const posy = (this.position.y - this.size / 2) - this.game.config.size_y / 2;
+			renderCube(ctx, posx, 0, posy, 0, size, size, size);
 		}
 		else
 		{
@@ -76,7 +77,7 @@ class Ball
         this.draw(ctx);
     }
 
-    from_json (data)
+    from_json(data)
     {
         this.position = this.position.from_json(data.position);
         this.size = data.size;

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

@@ -75,7 +75,7 @@ class Game
          * @type {GameConfig}
          */
         this.config = new GameConfig(this.client);
-        
+
 
         let ret = await this.config.init();
         if (ret !== 0)
@@ -186,7 +186,7 @@ class Game
         this.walls = [];
         const walls_data = data.walls;
         walls_data.forEach((wall_data) => {
-            this.walls.push(new Wall().from_json(wall_data));
+            this.walls.push(new Wall(this).from_json(wall_data));
         });
 
         /**

frontend/static/js/api/game/GameConfig.js

@@ -14,8 +14,8 @@ class GameConfig
     async init()
     {
         let response = await this.client._get("/api/games/");
-        
+
-        if (response.status !== 200)
+		if (response.status !== 200)
             return response.status;
 
         let response_data = await response.json();
@@ -24,7 +24,7 @@ class GameConfig
          * @type {Number}
          */
         this.size_x = response_data.MAP_SIZE_X;
-        
+
         /**
          * @type {Number}
          */
@@ -86,4 +86,4 @@ class GameConfig
     }
 }
 
-export { GameConfig };
+export { GameConfig };

frontend/static/js/api/game/Player.js

@@ -1,7 +1,6 @@
 import { Game } from "./Game.js";
 import { Point } from "./Point.js";
 import { Segment } from "./Segment.js";
-import { renderCube } from "../../3D/cube.js"
 
 class Player
 {
@@ -44,7 +43,12 @@ class Player
         /**
          * @type {Segment}
          */
-        this.rail = rail === undefined ? new Segment() : rail;
+        this.rail = rail === undefined ? new Segment(game) : rail;
+
+        /**
+         * @type {String}
+         */
+        this.username = username;
     }
 
     /**
@@ -84,13 +88,11 @@ class Player
             paddle_start_y = paddle_center.y - (diff_y * (paddle_length / 2 / rail_length)),
             paddle_stop_x = paddle_center.x + (diff_x * (paddle_length / 2 / rail_length)),
             paddle_stop_y = paddle_center.y + (diff_y * (paddle_length / 2 / rail_length));
-        
+
         let paddle_start = new Point(paddle_start_x, paddle_start_y),
             paddle_stop = new Point (paddle_stop_x, paddle_stop_y);
-        
+
-        let paddle = new Segment(paddle_start, paddle_stop);
+        let paddle = new Segment(this.game, paddle_start, paddle_stop);
-        
-        console.log(paddle)
 
         paddle.draw(ctx);
     }

frontend/static/js/api/game/Point.js

@@ -1,5 +1,3 @@
-
-
 class Point
 {
     /**
@@ -27,4 +25,4 @@ class Point
     }
 }
 
-export { Point };
+export { Point };

frontend/static/js/api/game/Segment.js

@@ -7,13 +7,15 @@ class Segment
      * @param {Point} start
      * @param {Point} stop
      */
-    constructor(start, stop)
+    constructor(game, start, stop)
     {
         /**
          * @type {Point}
          */
         this.start = start === undefined ? new Point() : start;
 
+		this.game = game;
+
         /**
          * @type {Point}
          */
@@ -37,11 +39,8 @@ class Segment
         return (x ** 2 + y ** 2) ** (1 / 2);
     }
 
-    /**
+	draw(ctx)
-     * @param {CanvasRenderingContext2D} ctx 
+	{
-     */
-    draw(ctx)
-    {
 		if(ctx instanceof CanvasRenderingContext2D)
 		{
 			ctx.moveTo(this.start.x, this.start.y);
@@ -49,19 +48,23 @@ class Segment
 		}
 		else if(ctx instanceof WebGLRenderingContext)
 		{
-			renderCube(ctx, this.start.x, -3, this.start.y, 0, 0.5, 0.5, 0.5);
+			const size = this.game.config.ball_size * 2;
+			const sizex = this.len() / 2;
+			const posx = (this.start.x - this.game.config.center_x);
+			const posy = (this.start.y - this.game.config.center_y);
+			renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
 		}
 		else
 		{
 			alert('Unknown rendering context type');
 		}
-    }
+	}
 
     from_json(data)
     {
         this.start = this.start.from_json(data.start);
         this.stop = this.stop.from_json(data.stop);
-        
+
         return this;
     }
 }

frontend/static/js/api/game/Wall.js

@@ -5,18 +5,18 @@ class Wall
     /**
      * @param {Segment} start
      */
-    constructor (rail)
+    constructor (game, rail)
     {
         /**
          * @type {Segment}
          */
-        this.rail = rail === undefined ? new Segment() : rail;
+        this.rail = rail === undefined ? new Segment(game) : rail;
     }
 
-    draw(ctx)
+	draw(ctx)
 	{
 		this.rail.draw(ctx);
-    }
+	}
 
     from_json(data)
     {

frontend/static/js/index.js

@@ -89,8 +89,9 @@ const router = async(uri) => {
         { path: "/settings", view: SettingsView },
         { path: "/matchmaking", view: MatchMakingView },
         { path: "/games/offline", view: GameOfflineView },
-        { path: "/games/0/:id", view: GameView2D },
+		{ path: "/tictactoe", view: TicTacToeView },
-        { path: "/games/1/:id", view: GameView3D },
+        { path: "/games/:id/0", view: GameView2D },
+        { path: "/games/:id/1", view: GameView3D },
     ];
 
     // Test each route for potential match

frontend/static/js/views/GameView.js

@@ -145,6 +145,11 @@ export default class extends AbstractView
         });
     }
 
+	toggle3D()
+	{
+		window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/1");
+	}
+
 	async postInit()
 	{
 		let error_code = await this.game.init();
@@ -154,6 +159,7 @@ export default class extends AbstractView
 
         await this.update_game_state();
         this.display_players_list();
+		document.getElementById("game-mode").onclick = this.toggle3D;
 	}
 
     async leavePage()
@@ -171,6 +177,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="3D" id="game-mode">
 
             <table>
                 <thead>

frontend/static/js/views/GameView3D.js

@@ -4,28 +4,28 @@ 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"
 import { MyPlayer } from "../api/game/MyPlayer.js";
 import { lang } from "../index.js";
+import { navigateTo } from "../index.js";
 
 export default class extends AbstractView
 {
 	constructor(params)
 	{
 		super(params, "Game");
-		this.game = new Game(client, params.id);
+		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, 500, 0];
+		this.cam_pos = [0, 400, 0];
 		this.cam_target = [0, 0, 0];
-		this.cam_up = [1, 0, 0];
+		this.cam_up = [0, 0, -1];
 	}
 
 	keyReleaseHandler(event)
-    {
+	{
 		const idx = this.keys_pressed.indexOf(event.key);
 		if (idx != -1)
 			this.keys_pressed.splice(idx, 1);
@@ -39,7 +39,7 @@ export default class extends AbstractView
 
 	initGL()
 	{
-		const canvas = document.getElementById('glcanva');
+		const canvas = document.getElementById('canva');
 		this.gl = canvas.getContext("webgl");
 
 		if(this.gl === null)
@@ -51,8 +51,8 @@ export default class extends AbstractView
 		this.shader_prog = initShaderProgram(this.gl);
 		this.buffers = initBuffers(this.gl);
 
-		this.gl.enable(this.gl.CULL_FACE);
+		//this.gl.enable(this.gl.CULL_FACE);
-		this.gl.cullFace(this.gl.BACK);
+		//this.gl.cullFace(this.gl.BACK);
 	}
 
     update_goal(data)
@@ -82,7 +82,7 @@ export default class extends AbstractView
 
 		canvas.height = this.game.config.size_x;
 		canvas.width = this.game.config.size_y;
-		canvas.id = "glcanva"; 
+		canvas.id = "canva"; 
 
 		document.getElementById("app").appendChild(canvas);
 
@@ -99,7 +99,7 @@ export default class extends AbstractView
             this.game.players[index] = this.my_player;
         }
 
-        this.register_key();
+		this.register_key();
 
 		this.initGL();
 
@@ -108,7 +108,7 @@ export default class extends AbstractView
 
 	draw()
 	{
-		const canvas = document.getElementById('glcanva');
+		const canvas = document.getElementById('canva');
 		if(canvas === null)
 			return 1;
 
@@ -217,6 +217,11 @@ export default class extends AbstractView
         });
     }
 
+	toggle2D()
+	{
+		window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/0");
+	}
+
 	async postInit()
 	{
 		let error_code = await this.game.init();
@@ -224,8 +229,9 @@ export default class extends AbstractView
 		if (error_code)
 			return error_code;
 
-        await this.update_game_state();
 		await this.update_game_state();
+		this.display_players_list();
+		document.getElementById("game-mode").onclick = this.toggle2D;
 	}
 
     async leavePage()
@@ -243,6 +249,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="2D" id="game-mode">
 
             <table>
                 <thead>

frontend/static/js/views/MatchMakingView.js

@@ -51,7 +51,7 @@ export default class extends AbstractAuthenticatedView {
     {
         if (data.detail === "game_found")
         {
-            navigateTo(`/games/${this.game_mode}/${data.game_id}`);
+            navigateTo(`/games/${data.game_id}/${this.game_mode}`);
             return;
         }
         this.display_data(data);
@@ -65,8 +65,37 @@ export default class extends AbstractAuthenticatedView {
 
     async postInit()
     {
-        document.getElementById("button").onclick = this.press_button.bind(this)
+        let button = document.getElementById("button");
-        document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this)
+        
+        button.onclick = this.press_button.bind(this);
+
+        let input = document.getElementById("nb_players-input");
+
+        input.addEventListener('keydown', async ev => {
+            if (ev.key !== 'Enter')
+                return;
+
+            if (client.matchmaking.searching)
+                client.matchmaking.stop();
+            
+            let nb_players = document.getElementById("nb_players-input").value;
+    
+            await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players);
+    
+            document.getElementById("button").value = "Stop matchmaking";
+        });
+
+        let update = () => {
+            if (input.value < 2)
+                button.disabled = true;
+            else
+                button.disabled = false;
+        };
+
+        ["change", "oninput"].forEach((event_name) => {
+            input.addEventListener(event_name, update);
+        });
+        document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this);
     }
 
     async getHtml() {