103 lines
2.1 KiB
JavaScript
103 lines
2.1 KiB
JavaScript
import { client } from "../index.js";
|
|
import { Game } from "../api/game/Game.js";
|
|
import AbstractView from "./abstracts/AbstractView.js";
|
|
import { initShaderProgram } from "../3D/shaders.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;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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(1.0, 1.0, 1.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);
|
|
}
|
|
|
|
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>
|
|
`;
|
|
}
|
|
}
|
|
|