From 6d5e78d7f07ea21dadf6fbbf58ec27599fc1bfca Mon Sep 17 00:00:00 2001 From: Kbz-8 Date: Wed, 21 Feb 2024 20:06:01 +0100 Subject: [PATCH] working on 3D camera --- frontend/static/js/api/game/Ball.js | 5 +- frontend/static/js/api/game/Game.js | 9 ++- frontend/static/js/views/GameView.js | 2 +- frontend/static/js/views/GameView3D.js | 108 +++++++++++++++++++++++-- 4 files changed, 111 insertions(+), 13 deletions(-) diff --git a/frontend/static/js/api/game/Ball.js b/frontend/static/js/api/game/Ball.js index 3ef00bd..40ae9c3 100644 --- a/frontend/static/js/api/game/Ball.js +++ b/frontend/static/js/api/game/Ball.js @@ -52,8 +52,9 @@ class Ball } else if(ctx instanceof WebGLRenderingContext) { - console.log((this.position.x - this.size / 2) / 10, 0, (this.position.y - this.size / 2) / 10) - renderCube(ctx, (this.position.x - this.size / 2) / 10, 0, (this.position.y - this.size / 2) / 10, 0, this.size * 10, this.size * 10, this.size * 10); + const posx = (this.position.x - this.size / 2) / 2; + const posy = (this.position.y - this.size / 2) / 2; + renderCube(ctx, posx, 0, posy, 0, this.size * 5, this.size * 5, this.size * 5); } else { diff --git a/frontend/static/js/api/game/Game.js b/frontend/static/js/api/game/Game.js index ee597e8..7ca43d2 100644 --- a/frontend/static/js/api/game/Game.js +++ b/frontend/static/js/api/game/Game.js @@ -121,9 +121,12 @@ class Game this.draw_sides(ctx); this.ball.render(ctx); - ctx.strokeStyle = "#000000"; - ctx.lineWidth = this.config.stroke_thickness; - ctx.stroke(); + if(ctx instanceof CanvasRenderingContext2D) + { + ctx.strokeStyle = "#000000"; + ctx.lineWidth = this.config.stroke_thickness; + ctx.stroke(); + } } _send(data) diff --git a/frontend/static/js/views/GameView.js b/frontend/static/js/views/GameView.js index 1c36aea..3d20f86 100644 --- a/frontend/static/js/views/GameView.js +++ b/frontend/static/js/views/GameView.js @@ -131,7 +131,7 @@ export default class extends AbstractView let tr = document.createElement("tr"); let name = document.createElement("td"); let goal = document.createElement("td"); - + name.id = `username-${player.id}`; goal.id = `goal-${player.id}`; diff --git a/frontend/static/js/views/GameView3D.js b/frontend/static/js/views/GameView3D.js index cfdbb8e..d4755d6 100644 --- a/frontend/static/js/views/GameView3D.js +++ b/frontend/static/js/views/GameView3D.js @@ -5,6 +5,8 @@ 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" +import { MyPlayer } from "../api/game/MyPlayer.js"; +import { lang } from "../index.js"; export default class extends AbstractView { @@ -18,7 +20,21 @@ export default class extends AbstractView this.shader_prog = null; this.buffers = null; this.cam_pos = [0, 500, 0]; - this.cam_target = [0, 0, 35]; + this.cam_target = [0, 0, 0]; + this.cam_up = [1, 0, 0]; + } + + keyReleaseHandler(event) + { + const idx = this.keys_pressed.indexOf(event.key); + if (idx != -1) + this.keys_pressed.splice(idx, 1); + } + + keyPressHandler(event) + { + if (!this.keys_pressed.includes(event.key)) + this.keys_pressed.push(event.key); } initGL() @@ -39,6 +55,25 @@ export default class extends AbstractView this.gl.cullFace(this.gl.BACK); } + update_goal(data) + { + document.getElementById(`goal-${data.player}`).innerText = data.nb_goal; + } + + register_key() + { + this.keyPressHandler = this.keyPressHandler.bind(this); + this.keyReleaseHandler = this.keyReleaseHandler.bind(this); + document.addEventListener('keydown', this.keyPressHandler); + document.addEventListener('keyup', this.keyReleaseHandler); + } + + unregister_key() + { + document.removeEventListener('keydown', this.keyPressHandler); + document.removeEventListener('keyup', this.keyReleaseHandler); + } + async join_game() { await this.game.join() @@ -51,6 +86,21 @@ export default class extends AbstractView document.getElementById("app").appendChild(canvas); + let index = this.game.players.findIndex((player) => player.id === client.me.id); + if (index !== -1) + { + let my_player = this.game.players[index]; + this.my_player = new MyPlayer(client, + this.game, + my_player.rail, + my_player.nb_goal, + my_player.position, + ); + this.game.players[index] = this.my_player; + } + + this.register_key(); + this.initGL(); this.render_game(); @@ -72,7 +122,7 @@ export default class extends AbstractView 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]); + mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, this.cam_up); this.setPositionAttribute(); this.setNormalAttribute(); @@ -144,6 +194,29 @@ export default class extends AbstractView await this.join_game(); } + display_players_list() + { + let players_list = document.getElementById("players_list"); + + this.game.players.forEach(player => { + + let tr = document.createElement("tr"); + let name = document.createElement("td"); + let goal = document.createElement("td"); + + name.id = `username-${player.id}`; + goal.id = `goal-${player.id}`; + + name.innerText = player.username; + goal.innerText = player.nb_goal; + + tr.appendChild(name); + tr.appendChild(goal); + + players_list.appendChild(tr); + }); + } + async postInit() { let error_code = await this.game.init(); @@ -151,16 +224,37 @@ export default class extends AbstractView if (error_code) return error_code; + await this.update_game_state(); await this.update_game_state(); } + async leavePage() + { + if (this.game.finished === false) + { + this.game.leave(); + this.game = undefined; + } + this.unregister_key(); + } + async getHtml() { - return /* HTML */ ` - -

-
- `; + return /* HTML */ ` + +

+ + + + + + + + + + +
${lang.get("gamePlayersListName")}${lang.get("gameGoalTaken")}
+ `; } }