Merge branch 'malouze-cooking' into main

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

@@ -0,0 +1,69 @@
+function initBuffers(gl)
+{
+	const vertexBuffer = initVertexBuffer(gl);
+	const indexBuffer = initIndexBuffer(gl);
+	const normalBuffer = initNormalBuffer(gl);
+	return { vertex: vertexBuffer, index : indexBuffer, normal: normalBuffer };
+}
+
+function initVertexBuffer(gl)
+{
+	const positionBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+	const positions = [
+		// Front face
+		-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
+		// Back face
+		-1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
+		// Top face
+		-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
+		// Bottom face
+		-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
+		// Right face
+		1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
+		// Left face
+		-1.0, -1.0, -1.0, -1.0, -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;
+}
+
+function initNormalBuffer(gl)
+{
+	const normalBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+	const vertexNormals = [
+		// Front
+		0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
+		// Back
+		0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
+		// Top
+		0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
+		// Bottom
+		0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
+		// Right
+		1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
+		// Left
+		-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
+	return normalBuffer;
+}
+
+function initIndexBuffer(gl)
+{
+	const indexBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+	const indices = [
+		0, 1, 2, 0, 2, 3, // front
+		4, 5, 6, 4, 6, 7, // back
+		8, 9, 10, 8, 10, 11, // top
+		12, 13, 14, 12, 14, 15, // bottom
+		16, 17, 18, 16, 18, 19, // right
+		20,  21, 22, 20, 22, 23, // left
+	];
+	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+	return indexBuffer;
+}
+
+export { initBuffers };

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

@@ -0,0 +1,96 @@
+const vertex_shader_source = `
+	attribute vec4 aPos;
+	attribute vec3 aNormal;
+
+	uniform mat4 uModView;
+	uniform mat4 uProj;
+	uniform mat4 uNormalMat;
+
+	varying highp vec3 vLighting;
+/*
+	vec3 lightColor = vec3(1.0, 0.8, 0.8);
+	vec3 lightDir = normalize(vec3(-0.2, -1.0, -0.3));
+
+	vec3 viewPos = vec3(0.0, 0.0, 0.0);
+
+	vec3 calculateLighting()
+	{
+		vec3 norm = normalize(aNormal);
+		// ambient
+		vec3 ambient = 0.3 * lightColor;
+		// diffuse
+		float diff = max(dot(lightDir, norm), 0.0);
+		vec3 diffuse = diff * lightColor;
+		// specular
+		vec3 viewDir = normalize(viewPos - vec3(aPos.xyz));
+		vec3 reflectDir = reflect(-lightDir, norm);
+		vec3 halfwayDir = normalize(lightDir + viewDir);  
+		float spec = pow(max(dot(norm, halfwayDir), 0.0), 32.0);
+		vec3 specular = vec3(0.3) * spec; // assuming bright white light color  
+
+		return (ambient + diffuse + specular);
+	}
+*/
+	void main()
+	{
+		gl_Position = uProj * uModView * aPos;
+
+		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 vec4 transformedNormal = uNormalMat * vec4(aNormal, 1.0);
+
+		highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+		vLighting = ambientLight + (directionalLightColor * directional);
+
+//		vLighting = calculateLighting();
+	}
+`;
+
+const fragment_shader_source = `
+	varying highp vec3 vLighting;
+
+	void main()
+	{
+		highp vec3 color = vec3(1.0, 1.0, 1.0);
+		gl_FragColor = vec4(color * vLighting, 1.0);
+	}
+`;
+
+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 while compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
+		gl.deleteShader(shader);
+		return null;
+	}
+
+	return shader;
+}
+
+export { initShaderProgram };

frontend/static/js/index.js

@@ -7,7 +7,8 @@ import HomeView from "./views/HomeView.js";
 import RegisterView from "./views/accounts/RegisterView.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,228 @@
+import { client } from "../index.js";
+import { Game } from "../api/game/Game.js";
+import AbstractView from "./abstracts/AbstractView.js";
+import { initShaderProgram } from "../3D/shaders.js"
+import { initBuffers } from "../3D/buffers.js"
+import "../3D/maths/gl-matrix-min.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.programInfo = 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);
+		this.buffers = initBuffers(this.gl);
+
+		this.programInfo = {
+			program: this.shader_prog,
+			attribLocations: {
+				vertexPosition: this.gl.getAttribLocation(this.shader_prog, "aPos"),
+				vertexNormal: this.gl.getAttribLocation(this.shader_prog, "aNormal"),
+			},
+			uniformLocations: {
+				projectionMatrix: this.gl.getUniformLocation(this.shader_prog, "uProj"),
+				modelViewMatrix: this.gl.getUniformLocation(this.shader_prog, "uModView"),
+				normalMatrix: this.gl.getUniformLocation(this.shader_prog, "uNormalMat"),
+			},
+		};
+
+		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.0, 0.0, 0.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);
+
+		const fieldOfView = (90 * Math.PI) / 180;
+		const aspect = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
+		const zNear = 0.1;
+		const zFar = 100.0;
+		const projectionMatrix = mat4.create();
+
+		mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+
+		this.setPositionAttribute();
+		this.setNormalAttribute();
+
+		this.gl.useProgram(this.programInfo.program);
+
+		this.gl.uniformMatrix4fv(
+			this.programInfo.uniformLocations.projectionMatrix,
+			false,
+			projectionMatrix
+		);
+
+		// rendering player bar
+		this.renderCube(0.0, -5.0, -8.0, 0.0, 5);
+	}
+
+	renderCube(x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
+	{
+		const modelViewMatrix = mat4.create();
+
+		mat4.translate(
+			modelViewMatrix,
+			modelViewMatrix,
+			[x, y, z]
+		);
+
+		mat4.rotate(
+			modelViewMatrix,
+			modelViewMatrix,
+			angle,
+			[0, 1, 1],
+		);
+
+		mat4.scale(
+			modelViewMatrix,
+			modelViewMatrix,
+			[sx, sy, sz]
+		);
+
+		const normalMatrix = mat4.create();
+		mat4.invert(normalMatrix, modelViewMatrix);
+		mat4.transpose(normalMatrix, normalMatrix);
+
+		this.gl.uniformMatrix4fv(
+			this.programInfo.uniformLocations.modelViewMatrix,
+			false,
+			modelViewMatrix
+		);
+		this.gl.uniformMatrix4fv(
+			this.programInfo.uniformLocations.normalMatrix,
+			false,
+			normalMatrix,
+		);
+
+		const vertexCount = 36;
+		const type = this.gl.UNSIGNED_SHORT;
+		const offset = 0;
+		this.gl.drawElements(this.gl.TRIANGLES, vertexCount, type, offset);
+	}
+
+	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(
+			this.programInfo.attribLocations.vertexNormal,
+			numComponents,
+			type,
+			normalize,
+			stride,
+			offset,
+		);
+		this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexNormal);
+	}
+
+	setPositionAttribute(programInfo)
+	{
+		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(
+			this.programInfo.attribLocations.vertexPosition,
+			numComponents,
+			type,
+			normalize,
+			stride,
+			offset
+		);
+		this.gl.enableVertexAttribArray(this.programInfo.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();
+		// 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>
+		`;
+	}
+}
+