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

import { client, reloadView } from "../index.js";
import { Game } from "../api/game/Game.js";
import AbstractView from "./abstracts/AbstractView.js";
import { MyPlayer } from "../api/game/MyPlayer.js";
import { Player } from "../api/game/Player.js";
import { lang } from "../index.js";
import "https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js";
import { get_labels, transformData } from "../utils/graph.js";

export default class extends AbstractView
{
    constructor(params)
	{
        super(params, "Game");
        this.game = new Game(client, params.id, this.on_goal, this.on_finish);
        this.keys_pressed = [];
        this.my_player = undefined;
    }

	keyReleaseHandler(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);
	}

    render_game()
    {
        const canva = document.getElementById('canva');

        if (canva === null)
            return 1;

        /**
         * @type {CanvasRenderingContext2D}
         */
        let ctx = canva.getContext('2d');

        ctx.beginPath();

        this.game.render(ctx);

        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    /**
     * @param {Player} player
     * @returns { Promise }
     */
    async on_goal(player)
    {
        document.getElementById(`goal-${player.id}`).innerText = player.score.length;
    }

    /**
     * @param {*} data
     * @returns { Promise } 
     */
    async on_finish(data)
    {
        await reloadView();
    }

    render()
    {
        let loop_id = setInterval(() => {
            if (this.game === undefined)
                clearInterval(loop_id);
            this.my_player?.update_paddle(this.keys_pressed);
            this.render_game();
            this.game?.time.new_frame();
            //clearInterval(loop_id);
        // 1 sec  fps
        }, 1000 / 60);
    }

    register_key()
    {
		this.keyPressHandler = this.keyPressHandler.bind(this);
		this.keyReleaseHandler = this.keyReleaseHandler.bind(this);
        document.addEventListener('keydown', this.keyPressHandler);
		document.addEventListener('keyup', this.keyReleaseHandler);
    }

    unregister_key()
    {
        document.removeEventListener('keydown', this.keyPressHandler);
		document.removeEventListener('keyup', this.keyReleaseHandler);
    }

    createGameBoard()
    {
        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);
    }

    createMyPlayer()
    {
        let index = this.game.players.findIndex((player) => player.id === client.me.id);

        if (index !== -1)
        {
            let my_player = this.game.players[index];
            this.my_player = new MyPlayer(client,
                                          this.game,
                                          my_player.score,
                                          my_player.rail,
                                          my_player.position,
                                         );
            this.game.players[index] = this.my_player;
        }
    }

    async join_game()
    {
        await this.game.join();

        this.createGameBoard();

        this.createMyPlayer();

        this.displayPlayersList();

        this.register_key();

        this.render();
    }

    async update_game_state()
    {
        document.getElementById("game-state").innerText = this.game.state;

        if (this.game.finished === false)
            await this.join_game();
        else
            this.createGraph();
    }

    createGraph()
    {
        let graph = document.createElement("canvas");

        graph.height = 450;
        graph.width = 800;
        graph.id = "graph";

        document.getElementById("app").appendChild(graph);

        if (graph === null)
            return;
 
        let datasets = [];

        this.game.players.forEach(player => {

            let data = transformData(player.score);

            data = [{x: 0, y: 0}, ...data];
             
            console.log(data);

            data.push({x: Math.round((this.game.stop_timestamp - this.game.start_timestamp) / 1000),
                       y: data[data.length - 1].y});

            datasets.push({
                data: data,
                label: player.username,
                borderColor: `#${Math.floor(Math.random()*16777215).toString(16)}`,
                fill: false,
            });
        });

        this.chart = new Chart(graph, {
            type: "line",
            data: {
                labels: get_labels(datasets),
                datasets: datasets,
            }
        });
    }

    displayPlayersList()
    {
        let table = document.createElement("table"),
            thead = document.createElement("thead"),
            tr = document.createElement("tr"),
            usernameTitle = document.createElement("th"),
            goalTitle = document.createElement("th"),
            playersList = document.createElement("tbody")
        ;
        
        usernameTitle.innerText = lang.get("gamePlayersListName");
        goalTitle.innerText = lang.get("gameGoalTaken");

        tr.appendChild(usernameTitle);
        tr.appendChild(goalTitle);

        table.appendChild(thead);
        table.appendChild(playersList);

        document.getElementById("app").appendChild(table);

        this.game.players.forEach(player => {

            let tr = document.createElement("tr");
            let name = document.createElement("td");
            let goal = document.createElement("td");

            name.id = `username-${player.id}`;
            name.innerText = player.username;

            goal.id = `goal-${player.id}`;
            goal.innerText = player.score.length;

            tr.appendChild(name);
            tr.appendChild(goal);

            playersList.appendChild(tr);
        });
    }

	async postInit()
	{
		let error_code = await this.game.init();

        if (error_code)
            return error_code;

        await this.update_game_state();
	}

    async leavePage()
    {
        if (this.game.finished === false)
        {
            this.game.leave();
            this.game = undefined;
        }
        this.unregister_key();
    }

    async getHtml()
	{
        return /* HTML */ `
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
            <link rel="stylesheet" href="/static/css/game.css">
            <h2 id="game-state"></h2>
        `;
    }
}