134 lines
3.2 KiB
JavaScript
134 lines
3.2 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";
|
|
|
|
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");
|
|
}
|
|
|
|
addChatMessage(message)
|
|
{
|
|
this.chat.innerText += message;
|
|
}
|
|
|
|
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>
|
|
<span id="display"></span>
|
|
<textarea id="chat" rows="4" cols="50" readonly>
|
|
</textarea>
|
|
`;
|
|
}
|
|
}
|