core: split: game and pong

frontend/static/js/views/PongOfflineView.js

@@ -1,6 +1,6 @@
 import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
 
-export default class extends AbstractAuthenticatedView {
+export class PongOfflineView extends AbstractAuthenticatedView {
 	constructor(params) {
 		super(params, 'Game');
 		this.game = null;

frontend/static/js/views/PongOnlineView.js

@@ -1,7 +1,4 @@
 import { client, reloadView, lang } from "../index.js";
-import { Game } from "../api/game/Game.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"
@@ -9,12 +6,16 @@ import "../chartjs/chart.umd.min.js";
 import { get_labels, transformData } from "../utils/graph.js";
 import { sleep } from "../utils/sleep.js";
 import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
+import { PongGame } from "../api/game/pong/PongGame.js";
+import { MyPlayer } from "../api/game/pong/PongMyPlayer.js";
+import { PongPlayer } from "../api/game/pong/PongPlayer.js";
 
-export default class extends AbstractAuthenticatedView
+export class PongOnlineView extends AbstractAuthenticatedView
 {
 	constructor(params)
 	{
 		super(params, "Game");
+
 		this.game_id = params.id;
 		this.ctx = null;
 		this.shader_prog = null;
@@ -23,13 +24,18 @@ export default class extends AbstractAuthenticatedView
 		this.cam_target = [0, 0, 0];
 		this.cam_up = [0, 0, -1];
 		this.game_mode = 1; // 1 is 2D, 2 is 3D
+
+		/**
+		 * @type {MyPlayer}
+		 */
+		this.myPlayer;
     }
 
 	initWebGL()
 	{
 		let canva = document.createElement("canvas");
-		canva.height = this.game.config.size_x;
-		canva.width = this.game.config.size_y;
+		canva.height = this.game.config.MAP_SIZE_X;
+		canva.width = this.game.config.MAP_SIZE_Y;
 		canva.id = "canva"; 
 		document.getElementById("app").appendChild(canva);
 
@@ -51,8 +57,8 @@ export default class extends AbstractAuthenticatedView
 	init2D()
 	{
 		let canva = document.createElement("canvas");
-		canva.height = this.game.config.size_x;
-		canva.width = this.game.config.size_y;
+		canva.height = this.game.config.MAP_SIZE_X;
+		canva.width = this.game.config.MAP_SIZE_Y;
 		canva.id = "canva"; 
 		document.getElementById("app").appendChild(canva);
 
@@ -111,7 +117,7 @@ export default class extends AbstractAuthenticatedView
 		this.ctx.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition);
 	}
 
-	render_game()
+	renderGame()
 	{
 		const canva = document.getElementById('canva');
 		if (canva === null)
@@ -156,10 +162,10 @@ export default class extends AbstractAuthenticatedView
 	}
 
 	/**
-	 * @param {Player} player
+	 * @param {PongPlayer} player
 	 * @returns { Promise }
 	 */
-	async on_goal(player)
+	async onGoal(player)
 	{
 		document.getElementById(`goal-${player.id}`).innerText = player.score.length;
 	}
@@ -168,7 +174,7 @@ export default class extends AbstractAuthenticatedView
 	 * @param {*} data
 	 * @returns { Promise } 
 	 */
-	async on_finish(data /* unused */)
+	async onFinish(data /* unused */)
 	{
 		await reloadView();
 	}
@@ -178,8 +184,8 @@ export default class extends AbstractAuthenticatedView
 		let loop_id = setInterval(() => {
 			if (this.game === undefined)
 				clearInterval(loop_id);
-			this.my_player?.update_paddle(this.keys_pressed);
-			this.render_game();
+			this.myPlayer?.updatePaddle(this.keys_pressed);
+			this.renderGame();
 			this.game?.time?.new_frame();
 			//clearInterval(loop_id);
 		// 1 sec  fps
@@ -205,7 +211,7 @@ export default class extends AbstractAuthenticatedView
 		this.createGameBoard(this.game_mode);
 	}
 
-	register_key()
+	registerKey()
 	{
 		this.keyPressHandler = this.keyPressHandler.bind(this);
 		this.keyReleaseHandler = this.keyReleaseHandler.bind(this);
@@ -213,12 +219,13 @@ export default class extends AbstractAuthenticatedView
 		document.addEventListener('keyup', this.keyReleaseHandler);
 	}
 
-	unregister_key()
+	unregisterKey()
 	{
 		document.removeEventListener('keydown', this.keyPressHandler);
 		document.removeEventListener('keyup', this.keyReleaseHandler);
 	}
 
+
 	/**
 	 * @param {int} game_mode
 	 * @returns { Cramptex } 
@@ -237,34 +244,39 @@ export default class extends AbstractAuthenticatedView
 
 		if (index !== -1)
 		{
-			let my_player = this.game.players[index];
-			this.my_player = new MyPlayer(client,
+			let myPlayer = this.game.players[index];
+
+			this.myPlayer = new MyPlayer(client,
 										  this.game,
-										  my_player.score,
-										  my_player.rail,
-										  my_player.position,
+										  myPlayer.score,
+										  myPlayer.rail,
+										  myPlayer.position,
 										 );
-			this.game.players[index] = this.my_player;
+
+			this.game.players[index] = this.myPlayer;
 		}
 	}
 
-	async join_game()
+	async joinGame()
 	{
 		document.getElementById("game-mode").onclick = this.toggleGameMode.bind(this);
+
 		await this.game.join();
+		await this.game.waitInit();
+
 		this.createGameBoard(1); // create the board for 2D game by default. Can switch to 3D with a toggle
 		this.createMyPlayer();
 		this.displayPlayersList();
-		this.register_key();
+		this.registerKey();
 		this.render();
 	}
 
-	async update_game_state()
+	async  updateGameState()
 	{
 		document.getElementById("game-state").innerText = this.game.state;
 
 		if (this.game.finished === false)
-			await this.join_game();
+			await this.joinGame();
 		else
 		{
 			this.createGraph();
@@ -360,7 +372,7 @@ export default class extends AbstractAuthenticatedView
 		});
 	}
 
-	async on_disconnect()
+	async onDisconnect()
 	{
 		sleep(500);
 		await reloadView();
@@ -368,16 +380,15 @@ export default class extends AbstractAuthenticatedView
 
 	async postInit()
 	{
-		this.game = new Game(client, this.game_id, this.on_disconnect, this.on_goal, this.on_finish);
+		this.game = new PongGame(client, this.game_id, this.onDisconnect, this.onGoal, this.onFinish);
 		this.keys_pressed = [];
-		this.my_player = undefined;
 
 		let error_code = await this.game.init();
 
 		if (error_code)
 			return error_code;
 
-		await this.update_game_state();
+		await this.updateGameState();
 	}
 
 	async leavePage()
@@ -388,7 +399,7 @@ export default class extends AbstractAuthenticatedView
 			this.game = undefined;
 		}
 		this.game = undefined;
-		this.unregister_key();
+		this.unregisterKey();
 	}
 
 	async getHtml()

frontend/static/js/views/TicTacToeOfflineView.js

@@ -1,8 +1,7 @@
 import { lang } from "../index.js";
 import AbstractView from "./abstracts/AbstractView.js";
 
-
-export default class extends AbstractView 
+export class TicTacToeOfflineView extends AbstractView 
 {
     constructor(params)
 	{

frontend/static/js/views/TicTacToeOnlineView.js

@@ -1,8 +1,8 @@
 import AbstractView from "./abstracts/AbstractView.js";
 import { lang } from "../index.js";
-import { TicTacToe } from "../api/game/TicTacToeGame.js"
+import { TicTacToe } from "../api/game/tictactoe/TicTacToeGame.js"
 
-export default class extends AbstractView
+export class TicTacToeOnlineView extends AbstractView
 {
     constructor(params, titleKey)
     {