add: tournament: graph de bz

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

@@ -1,3 +1,5 @@
+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";
 
@@ -14,10 +16,61 @@ export default class extends AbstractAuthenticatedView
 		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 === "nb_participants" || data.detail === "update_participants")
-			document.getElementById("nb_participants").innerText = `${data.nb_participants} / ${this.tournament.nb_players}`;
+		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")
@@ -32,36 +85,56 @@ export default class extends AbstractAuthenticatedView
 		document.getElementById("display").innerText = state ? "You are a particpant" : "You are not a participant";
 	}
 
-	async ondisconnect(event)
+	/**
+	 * 
+	 * @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.receive.bind(this), this.ondisconnect.bind(this));
+		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_players").innerText = this.tournament.nb_players;
+		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>