starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tree tournament in coming

Browse Source
This commit is contained in:
Xamora 2024-04-27 08:49:28 +02:00
parent 0bc61f7dba
commit 4e3366bd5f
3 changed files with 48 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/static/js/views/tournament/TournamentPageView.js
View File

@ -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>
`;
}
}

9
frontend/static/js/views/tournament/TournamentsListView.js
View File

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