adding game mode button to matchmaking view
This commit is contained in:
Kbz-8
AdrienLSH
parent
4d126c1683
commit
300c3768ed
166
\
166
\
@ -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 */ `
|
||||
<link rel="stylesheet" href="/static/css/game.css">
|
||||
<h2 id="game-state"></h2>
|
||||
<div id="player_list"></div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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' ;
|
||||
|
||||
@ -89,8 +89,8 @@ const router = async(uri) => {
|
||||
{ path: "/settings", view: SettingsView },
|
||||
{ path: "/matchmaking", view: MatchMakingView },
|
||||
{ path: "/games/offline", view: GameOfflineView },
|
||||
{ path: "/games/:id", view: GameView },
|
||||
{ path: "/tictactoe", view: TicTacToeView },
|
||||
{ path: "/games/0/:id", view: GameView2D },
|
||||
{ path: "/games/1/:id", view: GameView3D },
|
||||
];
|
||||
|
||||
// Test each route for potential match
|
||||
|
||||
@ -6,7 +6,8 @@ export default class extends AbstractAuthenticatedView {
|
||||
|
||||
constructor(params)
|
||||
{
|
||||
super(params, "Matchmaking");
|
||||
super(params, "Matchmaking");
|
||||
this.game_mode = 0; // 0 -> 2D; 1 -> 3D
|
||||
}
|
||||
|
||||
async press_button()
|
||||
@ -27,6 +28,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)
|
||||
{
|
||||
document.getElementById("button").value = "Find a game";
|
||||
@ -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);
|
||||
@ -50,36 +65,8 @@ export default class extends AbstractAuthenticatedView {
|
||||
|
||||
async postInit()
|
||||
{
|
||||
let button = document.getElementById("button");
|
||||
|
||||
button.onclick = this.press_button.bind(this);
|
||||
|
||||
let input = document.getElementById("nb_players-input");
|
||||
|
||||
input.addEventListener('keydown', async ev => {
|
||||
if (ev.key !== 'Enter')
|
||||
return;
|
||||
|
||||
if (client.matchmaking.searching)
|
||||
client.matchmaking.stop();
|
||||
|
||||
let nb_players = document.getElementById("nb_players-input").value;
|
||||
|
||||
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players);
|
||||
|
||||
document.getElementById("button").value = "Stop matchmaking";
|
||||
});
|
||||
|
||||
let update = () => {
|
||||
if (input.value < 2)
|
||||
button.disabled = true;
|
||||
else
|
||||
button.disabled = false;
|
||||
};
|
||||
|
||||
["change", "oninput"].forEach((event_name) => {
|
||||
input.addEventListener(event_name, update);
|
||||
});
|
||||
document.getElementById("button").onclick = this.press_button.bind(this)
|
||||
document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this)
|
||||
}
|
||||
|
||||
async getHtml() {
|
||||
@ -87,6 +74,7 @@ export default class extends AbstractAuthenticatedView {
|
||||
<h1>Select mode</h1>
|
||||
<input type="number" value="2" min="1" id="nb_players-input">
|
||||
<input type="button" value="Find a game" id="button">
|
||||
<input type="button" value="2D" id="game-mode">
|
||||
<span id="detail"></span>
|
||||
`;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user