diff --git "a/\\" "b/\\" deleted file mode 100644 index d03060c..0000000 --- "a/\\" +++ /dev/null @@ -1,166 +0,0 @@ -import { client } from "../index.js"; -import { Game } from "../api/game/Game.js"; -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" - -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.cam_pos = [0, 1000, 0]; - this.cam_target = [0, 0, 0]; - } - - 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.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.1, 0.1, 0.1, 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 projectionMatrix = mat4.create(); - const viewMatrix = mat4.create(); - - mat4.perspective(projectionMatrix, (90 * Math.PI) / 180, this.gl.canvas.clientWidth / this.gl.canvas.clientHeight, 0.1, 10000000.0); - mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, [0, 1, 0]); - - this.setPositionAttribute(); - this.setNormalAttribute(); - - this.gl.useProgram(shaderInfos.program); - - this.gl.uniformMatrix4fv(shaderInfos.uniformLocations.projectionMatrix, false, projectionMatrix); - this.gl.uniformMatrix4fv(shaderInfos.uniformLocations.viewMatrix, false, viewMatrix); - - this.game.render(this.gl); - } - - 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( - shaderInfos.attribLocations.vertexNormal, - numComponents, - type, - normalize, - stride, - offset, - ); - this.gl.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal); - } - - setPositionAttribute() - { - 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( - shaderInfos.attribLocations.vertexPosition, - numComponents, - type, - normalize, - stride, - offset - ); - this.gl.enableVertexAttribArray(shaderInfos.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(); - }, 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 */ ` - -
- - `; - } -} - diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index 58cbaa8..98125af 100644 --- a/frontend/static/js/index.js +++ b/frontend/static/js/index.js @@ -5,8 +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/GameView3D.js"; +import GameView2D from "./views/GameView.js"; +import GameView3D from "./views/GameView3D.js"; import PageNotFoundView from './views/PageNotFoundView.js' @@ -88,7 +88,8 @@ const router = async(uri) => { { path: "/settings", view: SettingsView }, { path: "/matchmaking", view: MatchMakingView }, { path: "/games/offline", view: GameOfflineView }, - { path: "/games/:id", view: GameView }, + { path: "/games/0/:id", view: GameView2D }, + { path: "/games/1/:id", view: GameView3D }, ]; // Test each route for potential match diff --git a/frontend/static/js/views/MatchMakingView.js b/frontend/static/js/views/MatchMakingView.js index 0414fa2..f0d3547 100644 --- a/frontend/static/js/views/MatchMakingView.js +++ b/frontend/static/js/views/MatchMakingView.js @@ -5,7 +5,8 @@ import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js" export default class extends AbstractAuthenticatedView { constructor(params) { - super(params, "Matchmaking"); + super(params, "Matchmaking"); + this.game_mode = 0; // 0 -> 2D; 1 -> 3D } async press_button() @@ -25,6 +26,20 @@ export default class extends AbstractAuthenticatedView { } } + async press_button_game_mode() + { + if(this.game_mode === 0) + { + document.getElementById("game-mode").value = "3D"; + this.game_mode = 1; + } + else + { + document.getElementById("game-mode").value = "2D"; + this.game_mode = 0; + } + } + ondisconnect(event) { if (event.code === 1000) @@ -36,7 +51,7 @@ export default class extends AbstractAuthenticatedView { { if (data.detail === "game_found") { - navigateTo(`/games/${data.game_id}`); + navigateTo(`/games/${this.game_mode}/${data.game_id}`); return; } this.display_data(data) @@ -51,6 +66,7 @@ export default class extends AbstractAuthenticatedView { async postInit() { document.getElementById("button").onclick = this.press_button.bind(this) + document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this) } async getHtml() { @@ -58,6 +74,7 @@ export default class extends AbstractAuthenticatedView {