matchmaking support multigame

This commit is contained in:
2024-03-25 14:53:15 +01:00
committed by AdrienLSH
parent 4128f6ae01
commit d1bea7dfd7
5 changed files with 79 additions and 48 deletions

View File

@ -21,14 +21,12 @@ class MatchMaking
* @param {Number} mode The number of players in a game
* @returns {Promise<?>}
*/
async start(receive_func, disconnect_func, mode, gamemode)
async start(receive_func, disconnect_func, gamemode, mode)
{
if (!await this.client.isAuthenticated())
return null;
this.gamemode = gamemode
let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${mode}`;
let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${gamemode}/${mode}`;
this._socket = new WebSocket(url);
@ -51,10 +49,7 @@ class MatchMaking
this.disconnect_func(event);
}
/**
* @returns {Promise<?>}
*/
async stop()
stop()
{
if (this._socket)
this._socket.close();

View File

@ -19,8 +19,7 @@ export default class extends AbstractAuthenticatedView {
}
else
{
let nb_players = this.input.value;
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players, this.gamemode);
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), this.gamemode_input.value, this.nb_players_input.value);
this.button.innerHTML = lang.get("matchmakingStopSearch");
}
@ -29,6 +28,7 @@ export default class extends AbstractAuthenticatedView {
ondisconnect(event)
{
this.button.innerHTML = lang.get("matchmakingStartSearch");
clearIds("innerText", ["detail"]);
}
onreceive(data)
@ -36,9 +36,9 @@ export default class extends AbstractAuthenticatedView {
if (data.detail === "game_found")
{
if (this.gamemode.value == "pong")
navigateTo(`/games/${data.game_id}`);
navigateTo(`/games/${data.gamemode}/${data.game_id}`);
else
navigateTo(`/games/${this.gamemode.value}/${data.game_id}`);
navigateTo(`/games/${data.gamemode}/${data.game_id}`);
return;
}
this.display_data(data);
@ -50,59 +50,83 @@ export default class extends AbstractAuthenticatedView {
fill_errors(data, "innerText");
}
async postInit()
addEnterEvent()
{
this.button = document.getElementById("toggle-search");
this.input = document.getElementById("nb-players-input");
this.gamemode = document.getElementById("game-choice");
console.log(this.nb_players_input, this.gamemode_input);
let container = document.getElementById("nb-players-container");
let gameChoice = document.getElementById("game-choice");
[this.nb_players_input, this.gamemode_input].forEach((input) => {
this.button.onclick = this.toggle_search.bind(this);
input.addEventListener('keydown', async ev => {
this.input.addEventListener('keydown', async ev => {
if (ev.key !== 'Enter')
return;
if (ev.key !== 'Enter')
return;
await this.toggle_search.bind(this);
await this.toggle_search.bind(this);
});
});
}
gameChoice.addEventListener("change", function()
{
if (this.value === "tictactoe")
{
container.style.display = 'none';
document.getElementById("nb-players-input").value = 2;
}
else
container.style.display = 'block';
})
addChangeNbPlayersEvent()
{
let update = () => {
this.button.disabled = (this.input.value < 2 || this.input.value > 4);
};
["change", "oninput"].forEach((event_name) => {
this.input.addEventListener(event_name, update);
this.nb_players_input.addEventListener(event_name, update);
});
}
addChangeGameModeEvent()
{
let nb_players_div = document.getElementById("nb-players-div");
this.gamemode_input.addEventListener("change", () => {
if (this.gamemode_input.value === "tictactoe")
{
nb_players_div.style.display = 'none';
this.nb_players_input.value = 2;
}
else
nb_players_div.style.display = 'block';
client.matchmaking.stop();
});
}
addEvents()
{
this.addEnterEvent();
this.addChangeGameModeEvent();
this.addChangeNbPlayersEvent();
}
async postInit()
{
this.button = document.getElementById("toggle-search");
this.nb_players_input = document.getElementById("nb-players-input");
this.gamemode_input = document.getElementById("gamemode-input");
this.button.onclick = this.toggle_search.bind(this);
this.addEvents()
}
async getHtml() {
return /* HTML */ `
<div class='container-fluid'>
<div class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
<h4 class='text-center fw-semibold mb-4' id="title">${lang.get("matchmakingTitle")}</h4>
<div>
<div class='form-floating mb-2'>
<select class='form-control' id='game-choice'>
<div class='form-floating mb-2' id='gamemode-div'>
<select class='form-control' id='gamemode-input'>
<option value='pong'>Pong</option>
<option value='tictactoe'>ticTacToe</option>
</select>
<label for='game-choice'>${lang.get("gamemodeChoice")}</label>
<label for='gamemode-input'>${lang.get("gamemodeChoice")}</label>
</div>
<div class='form-floating mb-2' id='nb-players-container'>
<div class='form-floating mb-2' id='nb-players-div'>
<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>