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

const TEXT_CONVENTION = {
	"error": "[ERROR]"
}

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

	pressButton()
	{
		this.tournament.setParticipation(!this.tournament.isParticipating);
		this.updateParticipating()
	}

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

	async onDisconnect(event)
	{

	}

	async onError(data)
	{
		this.addChatMessage(`${TEXT_CONVENTION} data.error_message`);
	}

	async onFinish()
	{
		document.getElementById("state").innerText = "finished"
	}

	async onStart()
	{
		document.getElementById("state").innerText = "started"
	}

	async onGoTo(data)
	{
		await navigateTo(`/games/pong/${data.game_id}`)
	}

	async onAddParticipant(nb_participants)
	{
		document.getElementById("nb_participants").innerText = nb_participants;
	}

	async onDelParticipant(nb_participants)
	{
		document.getElementById("nb_participants").innerText = nb_participants;
	}

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

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

		this.tournament.join(this.onAddParticipant, this.onDelParticipant, this.onStart, this.onFinish, this.onError, this.onGoTo, this.onDisconnect);

		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.participantList.length;
		document.getElementById("expected_nb_participants").innerText = this.tournament.nb_participants;
		document.getElementById("round").innerText = this.tournament.round;
		document.getElementById("state").innerText = this.tournament.state;

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

		this.chat = document.getElementById("chat");

		console.log(this.tournament);
		this.display_tree_tournament(this.tournament.nb_participants, this.tournament.participantList);
	}

	addChatMessage(message)
	{
		this.chat.innerText += message;
	}

	async display_tree_tournament(nb_participants, participants) {
		const svg = document.getElementById('tree');
		  
		svg.innerHTML = '';

		let width = 100;
		let height = 25;
		let gap_y = height + 25;
		let gap_x = width + 25;
		let start_y = height / 2;

		let rounds = Math.log2(nb_participants) + 1; 

		for (let i = 0; i < rounds; i++) { 
			let number_square = nb_participants / Math.pow(2, i)
			for(let j = 0; j < number_square; j++) {
				const y = start_y + gap_y * j * Math.pow(2, i) + (gap_y / 2 * Math.pow(2, i));
				svg.appendChild(await this.create_square(gap_x * i, y, width, height, "white", "black"));
			}
		}

	}

	async create_square(x, y, width, height, fill, stroke) {
		const square = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		square.setAttribute("id", square)
		square.setAttribute("x", x);
		square.setAttribute("y", y);
		square.setAttribute("width", width);
		square.setAttribute("height", height);
		square.setAttribute("fill", fill);
		square.setAttribute("stroke", stroke);
		return square
	}

	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 round</td>
						<td id="round">Loading...</td>
					</tr>
					<tr>
						<td>Number of participants</td>
						<td id="nb_participants">Loading...</td>
					</tr>
					<tr>
						<td>Expected number of participants</td>
						<td id="expected_nb_participants">Loading...</td>
					</tr>
					<tr>
						<td>state</td>
						<td id="state">Loading...</td>
					</tr>
				</tbody>
			</table>
			<input type="button" id="button" value="Join tournament" disabled>
			<textarea id="chat" rows="4" cols="50" readonly>
			</textarea>
			<br>
			<svg id="tree" height="3000" width="3000">
			</svg>
		`;
	}
}