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

core: matchmaking: frontend impro vement

Browse Source
This commit is contained in:
starnakin 2024-03-05 17:39:16 +01:00 committed by AdrienLSH
parent dcd9765d34
commit b1afd63eb9
2 changed files with 34 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,5 +42,9 @@
"ruleTitle" : "Rules", "ruleTitle" : "Rules",
"ruleBase" : "1. Win on one of the 9 tictactoe to win the game", "ruleBase" : "1. Win on one of the 9 tictactoe to win the game",
"ruleMovement" : "2. You start on the central tictactoe, and play on the one corresponding to your choice on the next turn", "ruleMovement" : "2. You start on the central tictactoe, and play on the one corresponding to your choice on the next turn",
"ruleDraw" : "3. If your play cause a tictactoe to be full and a draw, you lose the game" "ruleDraw" : "3. If your play cause a tictactoe to be full and a draw, you lose the game",
"matchmakingTitle": "Matchmaking",
"matchmakingStartSearch": "Find a game",
"matchmakingStopSearch": "Stop matchmaking",
"matchmakingNbPlayers": "Number of players"
} }

80
frontend/static/js/views/MatchMakingView.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";
@ -7,56 +7,36 @@ export default class extends AbstractAuthenticatedView {
constructor(params) constructor(params)
{ {
super(params, "Matchmaking"); super(params, "Matchmaking");
this.game_mode = 0; // 0 -> 2D; 1 -> 3D
} }
async press_button() async toggle_search()
{ {
clear("innerText", ["detail"]); clear("innerText", ["detail"]);
if (client.matchmaking.searching) if (client.matchmaking.searching)
{ {
client.matchmaking.stop(); client.matchmaking.stop();
document.getElementById("button").value = "Find a game"; this.button.innerHTML = lang.get("matchmakingStartSearch");
} }
else else
{ {
let nb_players = document.getElementById("nb_players-input").value; let nb_players = this.input.value;
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players); await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players);
document.getElementById("button").value = "Stop matchmaking"; this.button.innerHTML = lang.get("matchmakingStopSearch");
} }
} }
async press_button_game_mode()
{
if(this.game_mode === 0)
{
document.getElementById("game-mode").value = "3D";
this.game_mode = 1;
}
else
{
document.getElementById("game-mode").value = "2D";
this.game_mode = 0;
}
}
ondisconnect(event) ondisconnect(event)
{ {
let button = document.getElementById("button") this.button.innerHTML = lang.get("matchmakingStartSearch");
if (button === null)
return
button.value = "Find a game";
} }
onreceive(data) onreceive(data)
{ {
if (data.detail === "game_found") if (data.detail === "game_found")
{ {
navigateTo(`/games/${data.game_id}/${this.game_mode}`); navigateTo(`/games/${data.game_id}`);
return; return;
} }
this.display_data(data); this.display_data(data);
@ -70,46 +50,44 @@ export default class extends AbstractAuthenticatedView {
async postInit() async postInit()
{ {
let button = document.getElementById("button"); this.button = document.getElementById("toggle-search");
this.input = document.getElementById("nb-players-input");
button.onclick = this.press_button.bind(this); this.button.onclick = this.toggle_search.bind(this);
let input = document.getElementById("nb_players-input"); this.input.addEventListener('keydown', async ev => {
input.addEventListener('keydown', async ev => {
if (ev.key !== 'Enter') if (ev.key !== 'Enter')
return; return;
if (client.matchmaking.searching) await this.toggle_search.bind(this);
client.matchmaking.stop();
let nb_players = document.getElementById("nb_players-input").value;
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players);
document.getElementById("button").value = "Stop matchmaking";
}); });
let update = () => { let update = () => {
if (input.value < 2 || input.value > 4) button.disabled = (input.value < 2 || input.value > 4);
button.disabled = true;
else
button.disabled = false;
}; };
["change", "oninput"].forEach((event_name) => { ["change", "oninput"].forEach((event_name) => {
input.addEventListener(event_name, update); this.input.addEventListener(event_name, update);
}); });
document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this);
} }
async getHtml() { async getHtml() {
return ` return /* HTML */ `
<h1>Select mode</h1> <div class='container-fluid'>
<input type="number" value="2" min="1" max="4" id="nb_players-input"> <div class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
<input type="button" value="Find a game" id="button"> <h4 class='text-center fw-semibold mb-4' id="title">${lang.get("matchmakingTitle")}</h4>
<input type="button" value="2D" id="game-mode"> <div class='form-floating mb-2'>
<span id="detail"></span> <input type='number' min='2' value='2' max='4' class='form-control' id='nb-players-input' placeholder='${lang.get("matchmakingNbPlayers")}'>
<label for='nb-players-input' id='username-label'>${lang.get("matchmakingNbPlayers")}</label>
<span class='text-danger' id='username'></span>
</div>
<div class='d-flex'>
<button type='button' class='btn btn-primary mt-3 mb-2 mx-2' id='toggle-search'>${lang.get("matchmakingStartSearch")}</button>
<span class='text-danger my-auto mx-2' id='detail'></span>
</div>
</div>
</div>
`; `;
} }