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

matchmaking support multigame

Browse Source
This commit is contained in:
starnakin 2024-03-25 14:53:15 +01:00 committed by AdrienLSH
parent 4128f6ae01
commit d1bea7dfd7
5 changed files with 79 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/static/js/api/Matchmaking.js
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();

88
frontend/static/js/views/MatchMakingView.js
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>

16
matchmaking/consumers.py
View File

@ -18,17 +18,27 @@ class MatchMaking(WebsocketConsumer):
def connect(self):
user: User = self.scope["user"]
if (user.is_anonymous or not user.is_authenticated):
return
self.channel_layer.group_add(self.group_name, self.channel_name)
self.mode: int = int(self.scope['url_route']['kwargs']['mode'])
self.gamemode: str = self.scope['url_route']['kwargs']['gamemode']
self.group_name = self.mode
waiting_room: WaitingRoom = normal.get(self.mode)
waiting_room: WaitingRoom = normal.get(self.gamemode, self.mode)
waiting_room.append(Waiter(user.pk, self))
if (self.mode < 2 or self.mode > 4):
data: dict = {
"detail": "The mode must be > 1 and < 4.",
}
self.send(json.dumps(data))
self.disconnect(1000)
return
if (self.mode < 2 or self.mode > 4):
data: dict = {
"detail": "The mode must be > 1 and < 4.",
@ -45,7 +55,7 @@ class MatchMaking(WebsocketConsumer):
def disconnect(self, close_code):
super().close(close_code)
waiting_room: WaitingRoom = normal.get(self.mode)
waiting_room: WaitingRoom = normal.get(self.gamemode, self.mode)
waiter: Waiter = waiting_room.get_member_by_socket(self)
if (waiter is not None):
waiting_room.remove(waiter, close_code)

10
matchmaking/models.py
View File

@ -13,9 +13,10 @@ class Waiter(AbstractRoomMember):
class WaitingRoom(AbstractRoom):
def __init__(self, room_manager,mode):
def __init__(self, room_manager, gamemode: str, mode: int):
super().__init__(room_manager)
self.mode = mode
self.gamemode = gamemode
def append(self, waiter: Waiter):
tmp: Waiter = self.get_member_by_user_id(waiter.user_id)
@ -27,12 +28,13 @@ class WaitingRoom(AbstractRoom):
class WaitingRoomManager(AbstractRoomManager):
def get(self, mode: int):
def get(self, gamemode: str, mode: int):
for waiting_room in self._room_list:
waiting_room: WaitingRoom
if (waiting_room.mode == mode):
if (waiting_room.mode == mode and waiting_room.gamemode == gamemode):
return waiting_room
tmp: WaitingRoom = WaitingRoom(self, mode)
tmp: WaitingRoom = WaitingRoom(self, gamemode, mode)
super().append(tmp)
return tmp

2
matchmaking/routing.py
View File

@ -2,5 +2,5 @@ from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/matchmaking/(?P<mode>\d+)$', consumers.MatchMaking.as_asgi())
re_path(r'ws/matchmaking/(?P<gamemode>\w+)/(?P<mode>\d+)$', consumers.MatchMaking.as_asgi())
]