152 lines
3.9 KiB
JavaScript
152 lines
3.9 KiB
JavaScript
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();
|
|
}
|
|
|
|
async receive(data)
|
|
{
|
|
if (data.detail === "update_participants")
|
|
document.getElementById("nb_participants").innerText = `${data.participants} / ${this.tournament.nb_participants}`;
|
|
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_participants;
|
|
document.getElementById("round").innerText = this.tournament.round;
|
|
document.getElementById("state").innerText = this.tournament.state;
|
|
|
|
if (this.tournament.started === false)
|
|
button.disabled = false;
|
|
|
|
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()
|
|
{
|
|
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>status</td>
|
|
<td id="state">Loading...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<input type="button" id="button" value="Join tournament" disabled>
|
|
<br>
|
|
<svg id="tree" height="3000" width="3000">
|
|
</svg>
|
|
`;
|
|
}
|
|
}
|