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

tournament: add: les crampte

Browse Source
This commit is contained in:
starnakin
2024-04-22 17:03:45 +02:00
parent 1d8c2c633a
commit aafc61d40a
6 changed files with 191 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/static/js/views/tournament/TournamentCreateView.js
View File

@ -16,10 +16,9 @@ export default class extends AbstractAuthenticatedView
if (name.length == 0)
name = lang.get("TournamentCreateTournamentName");
console.log(name);
let nb_players = document.getElementById("nb-players-input").value;
let nb_participant = document.getElementById("nb-participant-input").value;
let response = await client.tournaments.createTournament(nb_players, name);
let response = await client.tournaments.createTournament(nb_participant, name);
let response_data = await response.json();
let id = response_data.id;
@ -29,7 +28,7 @@ export default class extends AbstractAuthenticatedView
return;
}
clearIds("innerHTML", ["name", "nb_players"]);
clearIds("innerHTML", ["name", "nb_participants"]);
fill_errors(response_data, "innerHTML");
}
@ -50,9 +49,16 @@ export default class extends AbstractAuthenticatedView
<span class='text-danger' id='name'></span>
</div>
<div class='form-floating mb-2'>
<input type='number' class='form-control' min='2' value='4' id='nb-players-input' placeholder='${lang.get("TournamentCreateNbPlayer")}'>
<label for='nb-players-input' id='nb-players-label'>${lang.get("TournamentCreateNbPlayer")}</label>
<span class='text-danger' id='nb_players'></span>
<select class='form-control' id="nb-participant-input">
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
<option value="16">16</option>
<option value="32">32</option>
<option value="64">64</option>
</select>
<label for='nb-participant-input' id='nb-participant-label'>${lang.get("TournamentCreateNbPlayer")}</label>
<span class='text-danger' id='nb_participants'></span>
</div>
<div class='d-flex'>
<button type='button' class='btn btn-primary mt-3 mb-2 mx-2' id='create-button'>${lang.get("TournamentCreateButton")}</button>

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

@ -3,6 +3,10 @@ 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)
@ -13,95 +17,49 @@ export default class extends AbstractAuthenticatedView
pressButton()
{
this.tournament.toggle_participation();
this.tournament.setParticipation(!this.tournament.isParticipating);
this.updateParticipating()
}
createGraph()
updateParticipating()
{
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")
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)
{
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()
@ -114,20 +72,27 @@ export default class extends AbstractAuthenticatedView
if (this.tournament === null)
return 404;
this.tournament.join(this.onParticipantsUpdate.bind(this), this.onError.bind(this), this.onDisconnect.bind(this));
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.nb_participants;
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.createGraph();
this.chat = document.getElementById("chat");
}
addChatMessage(message)
{
this.chat.innerText += message;
}
async getHtml()
@ -150,13 +115,19 @@ export default class extends AbstractAuthenticatedView
<td id="nb_participants">Loading...</td>
</tr>
<tr>
<td>status</td>
<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>
`;
}
}