147 lines
3.6 KiB
JavaScript
147 lines
3.6 KiB
JavaScript
import { client } from "../index.js";
|
|
import { Game } from "../api/game/Game.js";
|
|
import AbstractView from "./abstracts/AbstractView.js";
|
|
|
|
export default class extends AbstractView
|
|
{
|
|
constructor(params)
|
|
{
|
|
super(params, "Game");
|
|
this.game = new Game(client, params.id);
|
|
}
|
|
|
|
draw_wall(ctx, stop_x, stop_y)
|
|
{
|
|
ctx.lineTo(stop_x, stop_y);
|
|
}
|
|
|
|
draw_paddle(ctx, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, pos)
|
|
{
|
|
let rail_size = Math.abs(rail_stop_x - rail_start_x) + Math.abs(rail_stop_y - rail_start_y)
|
|
|
|
let paddle_size = rail_size * this.game.config.paddle_ratio;
|
|
|
|
let diff_x = rail_stop_x - rail_start_x,
|
|
diff_y = rail_stop_y - rail_start_y;
|
|
|
|
let pos_x = rail_start_x + diff_x * pos,
|
|
pos_y = rail_start_y + diff_y * pos;
|
|
|
|
let start_x = pos_x - (diff_x * (paddle_size / rail_size)),
|
|
start_y = pos_y - (diff_y * (paddle_size / rail_size)),
|
|
stop_x = pos_x + (diff_x * (paddle_size / rail_size)),
|
|
stop_y = pos_y + (diff_y * (paddle_size / rail_size));
|
|
|
|
console.log(start_x, start_y, stop_x, stop_y);
|
|
ctx.moveTo(start_x, start_y);
|
|
ctx.lineTo(stop_x, stop_y);
|
|
|
|
ctx.moveTo(rail_stop_x, rail_stop_y);
|
|
}
|
|
|
|
_down()
|
|
{
|
|
pl
|
|
}
|
|
|
|
draw_ball(ctx, x, y)
|
|
{
|
|
ctx.rect(x, y, this.game.config.ball_size, this.game.config.ball_size);
|
|
}
|
|
|
|
draw_sides(ctx, nb_sides)
|
|
{
|
|
let start_x,
|
|
start_y,
|
|
stop_x,
|
|
stop_y;
|
|
|
|
for (let i = 0; i <= nb_sides; i++)
|
|
{
|
|
let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI * 3 / 4);
|
|
|
|
stop_x = this.game.config.center_x + 400 * Math.cos(angle);
|
|
stop_y = this.game.config.center_y + 400 * Math.sin(angle);
|
|
|
|
if (i == 0)
|
|
ctx.moveTo(stop_x, start_y);
|
|
if (i % 2 == 0)
|
|
this.draw_wall(ctx, stop_x, stop_y);
|
|
else
|
|
this.draw_paddle(ctx, start_x, start_y, stop_x, stop_y, 0.5);
|
|
|
|
start_x = stop_x;
|
|
start_y = stop_y;
|
|
}
|
|
}
|
|
|
|
draw_game()
|
|
{
|
|
let ctx = document.getElementById('canva').getContext('2d');
|
|
|
|
ctx.beginPath()
|
|
|
|
this.draw_sides(ctx, (this.game.players_id.length +0) * 2);
|
|
this.draw_ball(ctx, this.game.ball_pos_x, this.game.ball_pos_y);
|
|
|
|
ctx.strokeStyle = "#000000";
|
|
ctx.lineWidth = 10;
|
|
ctx.stroke();
|
|
}
|
|
|
|
render_game()
|
|
{
|
|
while (true)
|
|
{
|
|
this.draw_game();
|
|
// TODO remove the line below
|
|
break;
|
|
}
|
|
}
|
|
|
|
start_game()
|
|
{
|
|
let canva = document.createElement("canvas");
|
|
|
|
canva.height = this.game.config.size_x;
|
|
canva.width = this.game.config.size_y;
|
|
canva.id = "canva";
|
|
|
|
document.getElementById("app").appendChild(canva);
|
|
|
|
this.game.join()
|
|
this.render_game();
|
|
}
|
|
|
|
async update_game_state()
|
|
{
|
|
await this.game.init();
|
|
|
|
document.getElementById("game-state").innerText = this.game.state;
|
|
|
|
//TODO invert line
|
|
//if (this.game.started === true && this.game.finished === false)
|
|
if (true)
|
|
this.start_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>
|
|
`;
|
|
}
|
|
}
|