42_ft_transcendence/frontend/static/js/api/game/Game.js

import { sleep } from "../../utils/sleep.js";
import { Ball } from "./Ball.js";
import { GameConfig } from "./GameConfig.js"
import { Player } from "./Player.js";
import { Time } from "./Time.js";
import { Wall } from "./Wall.js";
import { Client } from "../client.js";

class Game
{
	/**
	 * @param  {Client} client
	 */
	constructor(client, id)
	{
		/**
		 * @type {Client}
		 */
        this.client = client;
        this.id = id;
    }

    /**
     * 
     * @returns {Promise<Number>}
     */
    async init()
    {
        let response = await this.client._get(`/api/games/${this.id}`);

        if (response.status !== 200)
            return response.status;
        
        let response_data = await response.json();
    
        /**
         * @type {[Number]}
         */
        this.players_id = response_data.players_id;

        /**
         * @type {String}
         */
        this.state = response_data.state;

        /**
         * @type {Boolean}
         */
        this.started = response_data.started;

        /**
         * @type {Boolean}
         */
        this.finished = response_data.finished;

        /**
         * @type {Number}
         */
        this.winner_id = this.finished ? response_data.winner_id : undefined;

        if (this.finished === true)
            return 0;

        /**
         * @type {GameConfig}
         */
        this.config = new GameConfig(this.client);
        

        let ret = await this.config.init();
        if (ret !== 0)
            return ret;

        /**
         * @type {Time}
         */
        this.time = new Time();

        /**
         * @type {Boolean}
         */
        this._inited = false;

        return 0;
    }

    /**
     * 
     * @param {CanvasRenderingContext2D} ctx 
     */
    draw_sides(ctx)
    {
        this.walls.forEach(wall => {
            wall.draw(ctx);
        });
        this.players.forEach(player => {
            player.draw(ctx);
        });
    }

    /**
     * 
     * @param {CanvasRenderingContext2D} ctx 
     */
    render(ctx)
    {
        ctx.clearRect(0, 0, this.config.size_x, this.config.size_y);
        this.draw_sides(ctx);
        this.ball.render(ctx);

        ctx.strokeStyle = "#000000";
        ctx.lineWidth = this.config.stroke_thickness;
        ctx.stroke();
    }

    _send(data)
    {
        if (this._socket === undefined)
            return;
        
		if (this._socket.readyState === WebSocket.OPEN)
		{
			this._socket.send(JSON.stringify(data));
		}
    }

    /**
     * @param {Number} position 
     * @param {Number} time 
     */
    _send_paddle_position(position, time)
    {
        this._send({"detail": "update_my_paddle_pos", ...{"time": time, "position": position}});
    }

    _receive_update_paddle(data)
    {
        let player = this.players.find((player) => player.id === data.user_id);

        player.from_json(data);
    }

    _receive_ball(data)
    {
        this.ball.from_json(data);
    }

    _receive(data)
    {
        if (data.detail === "update_paddle")
            this._receive_update_paddle(data);
        else if (data.detail === "update_ball")
            this._receive_ball(data)
        else if (data.detail === "init_game")
            this._init_game(data);
    }

    _init_game(data)
    {
        /**
         * @type {Ball}
         */
        this.ball = (new Ball(this)).from_json(data.ball)

        /**
         * @type {[Wall]}
         */
        this.walls = [];
        const walls_data = data.walls;
        walls_data.forEach((wall_data) => {
            this.walls.push(new Wall().from_json(wall_data));
        });

        /**
         * @type {[Player]}
         */
        this.players = []
        const players_data = data.players;
        players_data.forEach((player_data) => {
            this.players.push(new Player(this).from_json(player_data));
        });

        this._inited = true;
    }

    async wait_init()
    {
        while (this._inited !== true)
            await sleep(100);
    }

    async join()
    {
        if (this.finished === true)
        {
            console.error("The Game is not currently ongoing.");
            return;
        }

        let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/games/${this.id}`;

        this._socket = new WebSocket(url);

        this._socket.onmessage = (event) => {
			const data = JSON.parse(event.data);
			this._receive(data);
		};

        return this.wait_init();
    }

    leave()
    {
        this._socket.close();
        this._socket = undefined;
    }
}

export { Game }