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

core: tournament: redesign tournamentCreateView

Browse Source
This commit is contained in:
starnakin 2024-03-11 10:04:52 +01:00 committed by AdrienLSH
parent 4323747e96
commit 1352041a19
3 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,17 +32,13 @@ class Tourmanents
* @param {Number} nb_players * @param {Number} nb_players
* @param {Number} nb_players_by_game * @param {Number} nb_players_by_game
* @param {String} name * @param {String} name
* @returns * @returns {Response}
*/ */
async createTournament(nb_players, nb_players_by_game, name = "") async createTournament(nb_players, nb_players_by_game, name = "")
{ {
let response = await this.client._post("/api/tournaments/", {nb_players: nb_players, nb_players_by_game: nb_players_by_game, name: name}); let response = await this.client._post("/api/tournaments/", {nb_players: nb_players, nb_players_by_game: nb_players_by_game, name: name});
if (response.status !== 200) return response;
return response.status;
let response_data = await response.json();
return response_data;
} }
/** /**

7
frontend/static/js/lang/en.json
View File

@ -46,5 +46,10 @@
"matchmakingTitle": "Matchmaking", "matchmakingTitle": "Matchmaking",
"matchmakingStartSearch": "Find a game", "matchmakingStartSearch": "Find a game",
"matchmakingStopSearch": "Stop matchmaking", "matchmakingStopSearch": "Stop matchmaking",
"matchmakingNbPlayers": "Number of players" "matchmakingNbPlayers": "Number of players",
"TournamentCreateTitle": "Create tournament",
"TournamentCreateButton": "Create tournament",
"TournamentCreateTournamentName": "Tournament Name",
"TournamentCreateNbPlayerByGame": "Number of player in a game",
"TournamentCreateNbPlayer": "Number of players in the tournament"
} }

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

@ -1,4 +1,4 @@
import {client, navigateTo} from "../../index.js"; import {client, lang, navigateTo} from "../../index.js";
import { clear, fill_errors } from "../../utils/formUtils.js"; import { clear, fill_errors } from "../../utils/formUtils.js";
import AbstractAuthenticatedView from "../abstracts/AbstractAuthenticatedView.js"; import AbstractAuthenticatedView from "../abstracts/AbstractAuthenticatedView.js";
@ -13,13 +13,11 @@ export default class extends AbstractAuthenticatedView
async create() async create()
{ {
let name = document.getElementById("name-input").value; let name = document.getElementById("name-input").value;
let nb_players = document.getElementById("nb_players-input").value; let nb_players = document.getElementById("nb-players-input").value;
let nb_players_by_game = document.getElementById("nb_players_by_game-input").value; let nb_players_by_game = document.getElementById("nb-players-by-game-input").value;
let response_data = await client.tournaments.createTournament(nb_players, nb_players_by_game, name); let response = await client.tournaments.createTournament(nb_players, nb_players_by_game, name);
let response_data = await response.json();
if (response_data === null)
return;
let id = response_data.id; let id = response_data.id;
if (id !== undefined) if (id !== undefined)
@ -37,16 +35,33 @@ export default class extends AbstractAuthenticatedView
document.getElementById("create-button").onclick = this.create; document.getElementById("create-button").onclick = this.create;
} }
async getHtml() async getHtml() {
{
return ` return /* HTML */ `
<input type="text" id="name-input" placeholder="Tournament name"> <div class='container-fluid'>
<span id="name"></span> <div class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
<input type="number" id="nb_players-input" placeholder="Number of players in tournament"> <h4 class='text-center fw-semibold mb-4' id="title">${lang.get("TournamentCreateTitle")}</h4>
<span id="nb_players"></span> <div class='form-floating mb-2'>
<input type="number" id="nb_players_by_game-input" placeholder="Number of players by game"> <input type='text' class='form-control' id='name-input' placeholder='${lang.get("TournamentCreateTournamentName")}'>
<span id="nb_players_by_game"></span> <label for='name-input' id='name-label'>${lang.get("TournamentCreateTournamentName")}</label>
<input type="button" id="create-button" value="Create tournament"> <span class='text-danger' id='name'></span>
</div>
<div class='form-floating mb-2'>
<input type='number' class='form-control' min='2' max='4' value='2' id='nb-players-by-game-input' placeholder='${lang.get("TournamentCreateNbPlayerByGame")}'>
<label for='nb-players-by-game-input' id='nb-players-by-game-label'>${lang.get("TournamentCreateNbPlayerByGame")}</label>
<span class='text-danger' id='nb_players_by_game'></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>
</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>
<span class='text-danger my-auto mx-2' id='detail'></span>
</div>
</div>
</div>
`; `;
} }
} }