diff --git a/frontend/static/js/api/Matchmaking.js b/frontend/static/js/api/Matchmaking.js index 7081c5e..b0e2240 100644 --- a/frontend/static/js/api/Matchmaking.js +++ b/frontend/static/js/api/Matchmaking.js @@ -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(); diff --git a/frontend/static/js/views/MatchMakingView.js b/frontend/static/js/views/MatchMakingView.js index 6ca775e..6c45c43 100644 --- a/frontend/static/js/views/MatchMakingView.js +++ b/frontend/static/js/views/MatchMakingView.js @@ -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 */ `

${lang.get("matchmakingTitle")}

-
- - +
-
+
diff --git a/matchmaking/consumers.py b/matchmaking/consumers.py index e6375f8..f66a9db 100644 --- a/matchmaking/consumers.py +++ b/matchmaking/consumers.py @@ -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) \ No newline at end of file diff --git a/matchmaking/models.py b/matchmaking/models.py index 2c6b3d6..f1261f0 100644 --- a/matchmaking/models.py +++ b/matchmaking/models.py @@ -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 diff --git a/matchmaking/routing.py b/matchmaking/routing.py index 22af33e..2ae19b1 100644 --- a/matchmaking/routing.py +++ b/matchmaking/routing.py @@ -2,5 +2,5 @@ from django.urls import re_path from . import consumers websocket_urlpatterns = [ - re_path(r'ws/matchmaking/(?P\d+)$', consumers.MatchMaking.as_asgi()) + re_path(r'ws/matchmaking/(?P\w+)/(?P\d+)$', consumers.MatchMaking.as_asgi()) ]