tree tournament in coming

frontend/static/css/TournamentPage.css

@@ -48,4 +48,4 @@ li.game-spacer{
 
 li.game-bottom{ 
 	border-top:1px solid #aaa;
-}
+}

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

@@ -16,57 +16,6 @@ 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.round.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.round[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.round[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.round[round_id][participant_i + 1]}`;
-
-				current_round.appendChild(game_bottom);
-			}
-		}
-		
-	}
-
 	async receive(data)
 	{
 		if (data.detail === "update_participants")
@@ -127,7 +76,45 @@ export default class extends AbstractAuthenticatedView
 
 		if (this.tournament.started === false)
 			button.disabled = false;
-		this.createGraph();
+
+		console.log(this.tournament);
+
+		this.display_tree_tournament(this.tournament.nb_participants, this.tournament.participantList);
+	}
+
+	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()
@@ -156,7 +143,9 @@ export default class extends AbstractAuthenticatedView
 				</tbody>
 			</table>
 			<input type="button" id="button" value="Join tournament" disabled>
-			<span id="display"></span>
+			<br>
+			<svg id="tree" height="3000" width="3000">
+			</svg>
 		`;
 	}
 }

frontend/static/js/views/tournament/TournamentsListView.js

@@ -38,12 +38,13 @@ export default class extends AbstractAuthenticatedView
 
 			// name	
 			let td = document.createElement("td");
-			td.innerText = tournament.name;
+			let button_tournament = document.createElement("a");
-			td.onclick = async () => {
+			button_tournament.innerText = tournament.name;
+			button_tournament.onclick = async () => {
 				await navigateTo(String(tournament.id));
 			}
-			td.style.cursor = "pointer";
+			button_tournament.href = "";
-			td.style.textDecoration = "underline";
+			td.appendChild(button_tournament);
 			tr.appendChild(td);
 
 			// state