121 lines
3.1 KiB
JavaScript
121 lines
3.1 KiB
JavaScript
import { client, navigateTo } from "../index.js";
|
|
import { clear, fill_errors } from "../utils/formUtils.js";
|
|
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
|
|
|
|
export default class extends AbstractAuthenticatedView {
|
|
|
|
constructor(params)
|
|
{
|
|
super(params, "Matchmaking");
|
|
this.game_mode = 0; // 0 -> 2D; 1 -> 3D
|
|
}
|
|
|
|
async press_button()
|
|
{
|
|
clear("innerText", ["detail"]);
|
|
if (client.matchmaking.searching)
|
|
{
|
|
client.matchmaking.stop();
|
|
document.getElementById("button").value = "Find a game";
|
|
}
|
|
else
|
|
{
|
|
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";
|
|
}
|
|
}
|
|
|
|
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)
|
|
{
|
|
let button = document.getElementById("button")
|
|
|
|
if (button === null)
|
|
return
|
|
|
|
button.value = "Find a game";
|
|
}
|
|
|
|
onreceive(data)
|
|
{
|
|
if (data.detail === "game_found")
|
|
{
|
|
navigateTo(`/games/${data.game_id}/${this.game_mode}`);
|
|
return;
|
|
}
|
|
this.display_data(data);
|
|
}
|
|
|
|
display_data(data)
|
|
{
|
|
clear("innerText", ["detail"]);
|
|
fill_errors(data, "innerText");
|
|
}
|
|
|
|
async postInit()
|
|
{
|
|
let button = document.getElementById("button");
|
|
|
|
button.onclick = this.press_button.bind(this);
|
|
|
|
let input = document.getElementById("nb_players-input");
|
|
|
|
input.addEventListener('keydown', async ev => {
|
|
if (ev.key !== 'Enter')
|
|
return;
|
|
|
|
if (client.matchmaking.searching)
|
|
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 = () => {
|
|
if (input.value < 2 || input.value > 4)
|
|
button.disabled = true;
|
|
else
|
|
button.disabled = false;
|
|
};
|
|
|
|
["change", "oninput"].forEach((event_name) => {
|
|
input.addEventListener(event_name, update);
|
|
});
|
|
document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this);
|
|
}
|
|
|
|
async getHtml() {
|
|
return `
|
|
<h1>Select mode</h1>
|
|
<input type="number" value="2" min="1" max="4" id="nb_players-input">
|
|
<input type="button" value="Find a game" id="button">
|
|
<input type="button" value="2D" id="game-mode">
|
|
<span id="detail"></span>
|
|
`;
|
|
}
|
|
|
|
async leavePage()
|
|
{
|
|
await client.matchmaking.stop();
|
|
}
|
|
}
|