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

tournament in coming

Browse Source
This commit is contained in:
starnakin
2024-04-18 20:08:13 +02:00
parent 630ef709ab
commit ae0a5abfcd
11 changed files with 265 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
frontend/static/js/api/tournament/Tournament.js
View File

@ -1,71 +1,53 @@
import { AExchangeable } from "../AExchangable.js";
import { Client } from "../Client.js";
import { Profile } from "../Profile.js";
class Tourmanent
class Tourmanent extends AExchangeable
{
/**
*
* @param {Client} client
* @param {Number} id the id of the tournament
* @param {Number} name
* @param {Number} nb_players
* @param {Number} nb_players_by_game
* @param {Number} round
* @param {Boolean} started
* @param {Boolean} finished
* @param {[]} rounds
* @param {String} state
*/
constructor(client, id, name = undefined, nb_players = undefined, round = undefined, started = undefined, finished = undefined, rounds = undefined, state = undefined)
constructor(client, id)
{
/**
* @type {Client}
*/
this.client = client;
super();
/**
* @type {String} the name of the tournament
*/
this.name = name || `${nb_players_by_game}x1, ${nb_players} players`;
/**
* @type {Number}
*/
this.nb_players = nb_players;
/**
* @type {Number}
*/
this.round = round;
/**
* @type {Number}
*/
this.started = started;
/**
* @type {Number}
*/
this.finished = finished;
/**
* @type {[]}
*/
this.rounds = rounds;
/**
* @type {String} must be "finished", or "started", or "waiting". Any other return all elements
*/
this.state = state;
/**
* @type {Number}
*/
this.id = id;
/**
* @type {Boolean} if a websocket connection is enabled
* @type {Client}
*/
this.connected = false;
this.client = client;
/**
* @type {Number}
*/
this.nb_participants;
/**
* @type {[Profile]} proutman à encore frappé
*/
this.participantList = []
/**
* @type {Boolean}
*/
this.started;
/**
* @type {Number}
*/
this.finished;
/**
* @type {"finished" | "started" | "waiting"} must be "finished", or "started", or "waiting". Any other return all elements
*/
this.state;
}
/**
@ -81,13 +63,7 @@ class Tourmanent
let response_data = await response.json();
this.name = response_data.name || `${response_data.nb_players} players tournament`;
this.nb_players = response_data.nb_players;
this.round = response_data.round;
this.started = response_data.started;
this.finished = response_data.finished;
this.rounds = response_data.rounds;
this.state = response_data.state;
this.import(response_data);
}
leave(event)
@ -99,18 +75,12 @@ class Tourmanent
this.disconnectHandler(event);
}
toggle_participation()
/**
* @param {Object} data
*/
async _receiveParticipantUpdate(data)
{
if (!this.connected)
return;
this._socket.send(JSON.stringify({participate: ""}));
}
async onPlayersUpdate(data)
{
oldPlayerList = this.par
await this.playersUpdateHandler();
this.par
}
async onError(data)
@ -126,20 +96,22 @@ class Tourmanent
{
const data = JSON.parse(event.data);
if (data?.detail === "error")
if (data.detail === "error")
this.onError(data);
else if (data?.detail === "players_update")
this.onPlayersUpdate(data);
else if (["del_participant", "add_participant"].includes(data.detail))
this._receiveParticipantUpdate(data);
}
/**
* Join the tournament Websocket
* @param {CallableFunction} errorHandler
* @param {CallableFunction} playersUpdateHandler
* @param {CallableFunction} addParticipantHandler called when a participants join the tournament
* @param {CallableFunction} delParticipantHandler called when a participants leave the tournament
* @param {CallableFunction} disconnectHandler
* @param {CallableFunction} goToHandler called when the next game will start
* @returns {?}
*/
async join(playersUpdateHandler, errorHandler, disconnectHandler)
async join(participantsUpdateHandler, errorHandler, goToHandler, disconnectHandler)
{
if (!await this.client.isAuthenticated())
return null;
@ -151,9 +123,10 @@ class Tourmanent
this.connected = true;
this.isParticipating = false;
this.playersUpdateHandler = playersUpdateHandler;
this.participantsUpdateHandler = participantsUpdateHandler;
this.errorHandler = errorHandler;
this.disconnectHandler = disconnectHandler;
this.goToHandler = goToHandler;
this._socket.onmessage = this.onReceive.bind(this);

18
frontend/static/js/api/tournament/Tournaments.js
View File

@ -29,13 +29,13 @@ class Tourmanents
/**
*
* @param {Number} nb_players
* @param {Number} nb_participants
* @param {String} name
* @returns {Response}
*/
async createTournament(nb_players, name = "")
async createTournament(nb_participants, name = "")
{
let response = await this.client._post("/api/tournaments/", {nb_players: nb_players, name: name});
let response = await this.client._post("/api/tournaments/", {nb_participants: nb_participants, name: name});
return response;
}
@ -58,15 +58,9 @@ class Tourmanents
let tournaments = [];``
response_data.forEach(tournament_data => {
tournaments.push(new Tourmanent(this.client,
tournament_data.name,
tournament_data.nb_players,
tournament_data.round,
tournament_data.started,
tournament_data.finished,
tournament_data.rounds,
tournament_data.id,
tournament_data.state));
let tournament = new Tourmanent(this.client, tournament_data.id);
tournament.import(tournament_data);
tournaments.push(tournament);
});
return tournaments;

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

@ -13,6 +13,10 @@ export default class extends AbstractAuthenticatedView
async create()
{
let name = document.getElementById("name-input").value;
if (name.length == 0)
name = lang.get("TournamentCreateTournamentName");
console.log(name);
let nb_players = document.getElementById("nb-players-input").value;
let response = await client.tournaments.createTournament(nb_players, name);

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

@ -25,7 +25,7 @@ export default class extends AbstractAuthenticatedView
document.getElementById("app").appendChild(tournament_tree);
for (let round_id = 0; round_id < this.tournament.levels.length; round_id++)
for (let round_id = 0; round_id < this.tournament.round.length; round_id++)
{
let current_round = document.createElement("ul");
@ -33,7 +33,7 @@ export default class extends AbstractAuthenticatedView
current_round.className = `round round-${round_id}`;
for (let participant_i = 0; participant_i < this.tournament.levels[round_id].length; participant_i += 2)
for (let participant_i = 0; participant_i < this.tournament.round[round_id].length; participant_i += 2)
{
let spacer = document.createElement("li");
@ -45,7 +45,7 @@ export default class extends AbstractAuthenticatedView
let game_top = document.createElement("li");
game_top.className = "game game-top";
game_top.innerText = `${this.tournament.levels[round_id][participant_i]}`;
game_top.innerText = `${this.tournament.round[round_id][participant_i]}`;
current_round.appendChild(game_top);
@ -59,7 +59,7 @@ export default class extends AbstractAuthenticatedView
let game_bottom = document.createElement("li");
game_bottom.className = "game game-bottom";
game_bottom.innerText = `${this.tournament.levels[round_id][participant_i + 1]}`;
game_bottom.innerText = `${this.tournament.round[round_id][participant_i + 1]}`;
current_round.appendChild(game_bottom);
}
@ -70,7 +70,7 @@ export default class extends AbstractAuthenticatedView
async receive(data)
{
if (data.detail === "update_participants")
document.getElementById("nb_participants").innerText = `${data.participants} / ${this.tournament.nb_players}`;
document.getElementById("nb_participants").innerText = `${data.participants} / ${this.tournament.nb_participants}`;
if (data.detail === "go_to")
navigateTo(data.url);
if (data.detail === "is_participant")
@ -121,9 +121,8 @@ export default class extends AbstractAuthenticatedView
button.onclick = this.pressButton.bind(this);
document.getElementById("name").innerText = this.tournament.name;
document.getElementById("nb_participants").innerText = this.tournament.nb_players;
document.getElementById("nb_players_by_game").innerText = this.tournament.nb_players_by_game;
document.getElementById("level").innerText = this.tournament.level;
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)
@ -142,20 +141,12 @@ export default class extends AbstractAuthenticatedView
</tr>
</thead>
<tbody>
<tr>
<td>Number of players</td>
<td id="nb_players">Loading...</td>
</tr>
<tr>
<td>Number of players by game</td>
<td id="nb_players_by_game">Loading...</td>
</tr>
<tr>
<td>Number of round</td>
<td id="level">Loading...</td>
<td id="round">Loading...</td>
</tr>
<tr>
<td>Number of player</td>
<td>Number of participants</td>
<td id="nb_participants">Loading...</td>
</tr>
<tr>

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

@ -13,41 +13,14 @@ export default class extends AbstractAuthenticatedView
{
let state = document.getElementById("state-select").value;
this.tournaments = await client.tournaments.search(state);
}
add_nb_player_by_game_selector()
{
let nb_players_by_game_list = new Set();
this.tournaments.forEach(tournament => {
nb_players_by_game_list.add(tournament.nb_players_by_game);
});
let select = document.getElementById("nb-players-by-game-select");
let new_children = [];
const opt = document.createElement("option");
opt.value = "all";
opt.text = "All";
new_children.push(opt);
nb_players_by_game_list.forEach(nb_players_by_game => {
const opt = document.createElement("option");
opt.value = nb_players_by_game;
opt.text = nb_players_by_game;
new_children.push(opt);
});
select.replaceChildren(...new_children);
//console.log(this.tournaments);
}
internal_search()
{
let nb_players_by_game = document.getElementById("nb-players-by-game-select").value;
this.display_tournaments = [];
this.tournaments.forEach(tournament => {
if (nb_players_by_game === "all" || nb_players_by_game == tournament.nb_players_by_game)
this.display_tournaments.push(tournament);
});
}
@ -58,6 +31,7 @@ export default class extends AbstractAuthenticatedView
const new_children = [];
console.log(this.display_tournaments);
this.display_tournaments.forEach(tournament => {
let tr = document.createElement("tr");
@ -72,14 +46,9 @@ export default class extends AbstractAuthenticatedView
td.innerText = tournament.state;
tr.appendChild(td);
// nb_players
// nb_participants
td = document.createElement("td");
td.innerText = tournament.nb_players;
tr.appendChild(td);
// nb_players_by_game
td = document.createElement("td");
td.innerText = tournament.nb_players_by_game;
td.innerText = tournament.nb_participants;
tr.appendChild(td);
new_children.push(tr);
@ -96,7 +65,6 @@ export default class extends AbstractAuthenticatedView
async update_search()
{
await this.external_search();
this.add_nb_player_by_game_selector();
this.update_query();
}
@ -104,7 +72,6 @@ export default class extends AbstractAuthenticatedView
{
await this.update_search();
document.getElementById("state-select").onchange = this.update_search.bind(this);
document.getElementById("nb-players-by-game-select").onchange = this.update_query.bind(this);
}
async getHtml()
@ -116,14 +83,11 @@ export default class extends AbstractAuthenticatedView
<option value="finished">Finished</option>
<option value="all">All</option>
</select>
<select id="nb-players-by-game-select">
</select>
<table>
<thead>
<td>Name</td>
<td>Status</td>
<td>Max numbers of players</td>
<td>Max numbers of players by game</td>
<td>Max numbers of participants</td>
</thead>
<tbody id="tournaments-list">
</tbody>