import { client } from "../index.js"; import { Game } from "../api/game/Game.js"; import AbstractView from "./abstracts/AbstractView.js"; import { Time } from "../api/game/Time.js"; import { MyPlayer } from "../api/game/MyPlayer.js"; export default class extends AbstractView { constructor(params) { super(params, "Game"); this.game = new Game(client, params.id); this.keys_pressed = []; this.time = new Time() this.my_player = undefined; } 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 paddle_pos_x = rail_start_x + diff_x * pos, paddle_pos_y = rail_start_y + diff_y * pos; let start_x = paddle_pos_x - (diff_x * (paddle_size / 2 / rail_size)), start_y = paddle_pos_y - (diff_y * (paddle_size / 2 / rail_size)), stop_x = paddle_pos_x + (diff_x * (paddle_size / 2 / rail_size)), stop_y = paddle_pos_y + (diff_y * (paddle_size / 2 / rail_size)); ctx.moveTo(start_x, start_y); ctx.lineTo(stop_x, stop_y); ctx.moveTo(rail_stop_x, rail_stop_y); } keyStretchHandler(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); } 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; let radius = Math.min(this.game.config.size_x, this.game.config.size_y) / 2 - 10; 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 + radius * Math.cos(angle); stop_y = this.game.config.center_y + radius * 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, this.game.players[(i - 1) / 2].pos); start_x = stop_x; start_y = stop_y; } } draw_game() { let ctx = document.getElementById('canva').getContext('2d'); ctx.beginPath() ctx.clearRect(0, 0, this.game.config.size_x, this.game.config.size_y); 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() { let loop_id = setInterval(() => { if (this.my_player) this.my_player.update_paddle(this.keys_pressed); this.draw_game(); this.time.new_frame() //clearInterval(loop_id); }, 1000 / 50); } register_key() { document.addEventListener('keydown', this.keyPressHandler.bind(this)); document.addEventListener('keyup', this.keyStretchHandler.bind(this)); } unregister_key() { document.removeEventListener('keydown', this.keyPressHandler); document.removeEventListener('keyup', this.keyStretchHandler); } 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.register_key() this.render_game(); } update_game_state() { document.getElementById("game-state").innerText = this.game.state; if (this.game.started === true && this.game.finished === false) this.start_game(); } async postInit() { let error_code = await this.game.init(); if (error_code) return error_code; let index = this.game.players.findIndex((player) => player.id); if (index !== -1) { let my_player = this.game.players[index]; this.my_player = new MyPlayer(client, my_player.pos, my_player.nb_goal, my_player.game, this.time); this.game.players[index] = this.my_player; } this.update_game_state(); } async leavePage() { this.unregister_key(); } async getHtml() { return /* HTML */ `

`; } }