ft bozo but in 3D

frontend/static/js/3D/buffers.js

@@ -0,0 +1,20 @@
+function initBuffers(gl)
+{
+	const positionBuffer = initPositionBuffer(gl);
+
+	return { position: positionBuffer };
+}
+
+function initPositionBuffer(gl)
+{
+	const positionBuffer = gl.createBuffer();
+
+	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+	const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
+
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+	return positionBuffer;
+}
+
+export { initBuffers };

frontend/static/js/3D/shaders.js

@@ -0,0 +1,61 @@
+const vertex_shader_source = `
+	attribute vec4 aPos;
+	attribute vec4 aColor;
+
+	uniform mat4 uModView;
+	uniform mat4 uProj;
+
+	varying lowp vec4 vColor;
+
+	void main()
+	{
+		gl_Position = uProj * uModView * aPos;
+		vColor = aColor;
+	}
+`;
+
+const fragment_shader_source = `
+	varying lowp vec4 vColor;
+
+	void main()
+	{
+		gl_FragColor = vColor;
+	}
+`;
+
+function initShaderProgram(gl)
+{
+	const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertex_shader_source);
+	const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);
+
+	const shaderProgram = gl.createProgram();
+	gl.attachShader(shaderProgram, vertexShader);
+	gl.attachShader(shaderProgram, fragmentShader);
+	gl.linkProgram(shaderProgram);
+
+	if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
+	{
+		alert(`Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
+		return null;
+	}
+	return shaderProgram;
+}
+
+function loadShader(gl, type, source)
+{
+	const shader = gl.createShader(type);
+
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+
+	if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
+	{
+		alert(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
+		gl.deleteShader(shader);
+		return null;
+	}
+
+	return shader;
+}
+
+export { initShaderProgram };

frontend/static/js/index.js

@@ -5,7 +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 GameView from "./views/GameView.js";
+import GameView from "./views/GameView3D.js";
 
 import PageNotFoundView from './views/PageNotFoundView.js' ;
 

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>
+		`;
+	}
+}
+