42_ft_transcendence/frontend/static/js/views/tournament/TournamentPageView.js

import { Profile } from "../../api/Profile.js";
import { Tourmanent } from "../../api/tournament/Tournament.js";
import {client, navigateTo} from "../../index.js";
import AbstractAuthenticatedView from "../abstracts/AbstractAuthenticatedView.js";

export default class extends AbstractAuthenticatedView
{
    constructor(params)
	{
        super(params, "Tournament");
		this.id = params.id;
    }

	pressButton()
	{
		this.tournament.toggle_participation();
	}

	createGraph()
	{
		console.log(this.tournament);
		let tournament_tree = document.createElement("div");

		tournament_tree.id = "tournament-tree";
		
		document.getElementById("app").appendChild(tournament_tree);
		
		for (let round_id = 0; round_id < this.tournament.levels.length; round_id++)
		{
			let current_round = document.createElement("ul");

			tournament_tree.appendChild(current_round);
		
			current_round.className = `round round-${round_id}`;

			for (let participant_i = 0; participant_i < this.tournament.levels[round_id].length; participant_i += 2)
			{
				let spacer = document.createElement("li");

				spacer.className = "spacer";
				spacer.innerText = "&nbsp;";

				current_round.appendChild(spacer);

				let game_top = document.createElement("li");

				game_top.className = "game game-top";
				game_top.innerText = `${this.tournament.levels[round_id][participant_i]}`;

				current_round.appendChild(game_top);

				let game_spacer = document.createElement("li");

				spacer.className = "game game-spacer";
				spacer.innerText = "&nbsp;";

				current_round.appendChild(game_spacer);

				let game_bottom = document.createElement("li");

				game_bottom.className = "game game-bottom";
				game_bottom.innerText = `${this.tournament.levels[round_id][participant_i + 1]}`;

				current_round.appendChild(game_bottom);
			}
		}
		
	}

	async receive(data)
	{
		if (data.detail === "update_participants")
			document.getElementById("nb_participants").innerText = `${data.participants} / ${this.tournament.nb_players}`;
		if (data.detail === "go_to")
			navigateTo(data.url);
		if (data.detail === "is_participant")
			this.updateParticipating(data.is_participant);
		if (data.detail === "error")
			document.getElementById("display").innerText = data.error_message;
		}

	async updateParticipating(state)
	{
		document.getElementById("button").value = state ? `Leave ${this.tournament.name}` : `Join ${this.tournament.name}`;
		document.getElementById("display").innerText = state ? "You are a particpant" : "You are not a participant";
	}

	/**
	 * 
	 * @param {[Profile]} oldParticipantsList 
	 * @param {[Profile]} currentParticipantsList 
	 */
	async onParticipantsUpdate(oldParticipantsList, currentParticipantsList)
	{
		
	}

	async onDisconnect(event)
	{
	}

	async onError(data)
	{

	}

	async postInit()
	{
		/**
		 * @type {Tourmanent}
		 */
		this.tournament = await client.tournaments.getTournament(this.id);

		if (this.tournament === null)
			return 404;

		this.tournament.join(this.onParticipantsUpdate.bind(this), this.onError.bind(this), this.onDisconnect.bind(this));

		let button = document.getElementById("button");
		
		button.onclick = this.pressButton.bind(this);

		document.getElementById("name").innerText = this.tournament.name;
		document.getElementById("nb_participants").innerText = this.tournament.nb_players;
		document.getElementById("nb_players_by_game").innerText = this.tournament.nb_players_by_game;
		document.getElementById("level").innerText = this.tournament.level;
		document.getElementById("state").innerText = this.tournament.state;

		if (this.tournament.started === false)
			button.disabled = false;
		this.createGraph();
	}

	async getHtml()
	{
		return `
			<link rel="stylesheet" href="/static/css/TournamentPage.css">
			<table>
				<thead>
					<tr>
						<th id="name">Loading...</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Number of players</td>
						<td id="nb_players">Loading...</td>
					</tr>
					<tr>
						<td>Number of players by game</td>
						<td id="nb_players_by_game">Loading...</td>
					</tr>
					<tr>
						<td>Number of round</td>
						<td id="level">Loading...</td>
					</tr>
					<tr>
						<td>Number of player</td>
						<td id="nb_participants">Loading...</td>
					</tr>
					<tr>
						<td>status</td>
						<td id="state">Loading...</td>
					</tr>
				</tbody>
			</table>
			<input type="button" id="button" value="Join tournament" disabled>
			<span id="display"></span>
		`;
	}
}