ft bozo but in 3D

frontend/static/js/views/GameView3D.js

@@ -0,0 +1,102 @@
+import { client } from "../index.js";
+import { Game } from "../api/game/Game.js";
+import AbstractView from "./abstracts/AbstractView.js";
+import { initShaderProgram } from "../3D/shaders.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;
+	}
+
+	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);
+	}
+
+	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(1.0, 1.0, 1.0, 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);
+	}
+
+	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();
+		// 1 sec  fps
+		}, 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>
+		`;
+	}
+}
+