42_ft_transcendence/frontend/static/js/views/GameView.js

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) * 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 / 60);
    }

    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 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;
        }

        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;

        this.update_game_state();
	}

    async leavePage()
    {
        this.unregister_key();
    }

    async getHtml()
	{
        return /* HTML */ `
            <link rel="stylesheet" href="/static/css/game.css">
            <h2 id="game-state"></h2>
            <div id="player_list"></div>
        `;
    }
}