3D working

This commit is contained in:
Kbz-8
2024-02-22 06:01:56 +01:00
parent 81355bf7b5
commit a7fff2f1a2
13 changed files with 71 additions and 50 deletions

View File

@ -145,6 +145,11 @@ export default class extends AbstractView
});
}
toggle3D()
{
window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/1");
}
async postInit()
{
let error_code = await this.game.init();
@ -154,6 +159,7 @@ export default class extends AbstractView
await this.update_game_state();
this.display_players_list();
document.getElementById("game-mode").onclick = this.toggle3D;
}
async leavePage()
@ -171,6 +177,7 @@ export default class extends AbstractView
return /* HTML */ `
<link rel="stylesheet" href="/static/css/game.css">
<h2 id="game-state"></h2>
<input type="button" value="3D" id="game-mode">
<table>
<thead>

View File

@ -4,28 +4,28 @@ 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"
import { MyPlayer } from "../api/game/MyPlayer.js";
import { lang } from "../index.js";
import { navigateTo } from "../index.js";
export default class extends AbstractView
{
constructor(params)
{
super(params, "Game");
this.game = new Game(client, params.id);
this.game = new Game(client, params.id, this.update_goal);
this.keys_pressed = [];
this.my_player = undefined;
this.gl = null;
this.shader_prog = null;
this.buffers = null;
this.cam_pos = [0, 500, 0];
this.cam_pos = [0, 400, 0];
this.cam_target = [0, 0, 0];
this.cam_up = [1, 0, 0];
this.cam_up = [0, 0, -1];
}
keyReleaseHandler(event)
{
{
const idx = this.keys_pressed.indexOf(event.key);
if (idx != -1)
this.keys_pressed.splice(idx, 1);
@ -39,7 +39,7 @@ export default class extends AbstractView
initGL()
{
const canvas = document.getElementById('glcanva');
const canvas = document.getElementById('canva');
this.gl = canvas.getContext("webgl");
if(this.gl === null)
@ -51,8 +51,8 @@ export default class extends AbstractView
this.shader_prog = initShaderProgram(this.gl);
this.buffers = initBuffers(this.gl);
this.gl.enable(this.gl.CULL_FACE);
this.gl.cullFace(this.gl.BACK);
//this.gl.enable(this.gl.CULL_FACE);
//this.gl.cullFace(this.gl.BACK);
}
update_goal(data)
@ -82,7 +82,7 @@ export default class extends AbstractView
canvas.height = this.game.config.size_x;
canvas.width = this.game.config.size_y;
canvas.id = "glcanva";
canvas.id = "canva";
document.getElementById("app").appendChild(canvas);
@ -99,7 +99,7 @@ export default class extends AbstractView
this.game.players[index] = this.my_player;
}
this.register_key();
this.register_key();
this.initGL();
@ -108,7 +108,7 @@ export default class extends AbstractView
draw()
{
const canvas = document.getElementById('glcanva');
const canvas = document.getElementById('canva');
if(canvas === null)
return 1;
@ -217,6 +217,11 @@ export default class extends AbstractView
});
}
toggle2D()
{
window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/0");
}
async postInit()
{
let error_code = await this.game.init();
@ -224,8 +229,9 @@ export default class extends AbstractView
if (error_code)
return error_code;
await this.update_game_state();
await this.update_game_state();
this.display_players_list();
document.getElementById("game-mode").onclick = this.toggle2D;
}
async leavePage()
@ -243,6 +249,7 @@ export default class extends AbstractView
return /* HTML */ `
<link rel="stylesheet" href="/static/css/game.css">
<h2 id="game-state"></h2>
<input type="button" value="2D" id="game-mode">
<table>
<thead>

View File

@ -51,7 +51,7 @@ export default class extends AbstractAuthenticatedView {
{
if (data.detail === "game_found")
{
navigateTo(`/games/${this.game_mode}/${data.game_id}`);
navigateTo(`/games/${data.game_id}/${this.game_mode}`);
return;
}
this.display_data(data);
@ -95,7 +95,7 @@ export default class extends AbstractAuthenticatedView {
["change", "oninput"].forEach((event_name) => {
input.addEventListener(event_name, update);
});
document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this)
document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this);
}
async getHtml() {