matchmaking support multigame

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/${gamemode}/${mode}`;
-
-		let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${mode}`;
 
 		this._socket = new WebSocket(url);
 		
@@ -51,10 +49,7 @@ class MatchMaking
 		this.disconnect_func(event);
 	}
 
-	/**
+	stop()
-	 * @returns {Promise<?>}
-	 */
-	async stop()
 	{
 		if (this._socket)
 			this._socket.close();

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), this.gamemode_input.value, this.nb_players_input.value);
-            await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players, this.gamemode);
 
             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");
+        console.log(this.nb_players_input, this.gamemode_input);
-        this.input = document.getElementById("nb-players-input");
-        this.gamemode = document.getElementById("game-choice");
 
-        let container = document.getElementById("nb-players-container");
+        [this.nb_players_input, this.gamemode_input].forEach((input) => {
-        let gameChoice = document.getElementById("game-choice");
 
-        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')
+                await this.toggle_search.bind(this);
-                return;
+            });
-
-            await this.toggle_search.bind(this);
         });
+    }
 
-        gameChoice.addEventListener("change", function()
+    addChangeNbPlayersEvent()
-        {
+    {
-            if (this.value === "tictactoe")
-            {
-                container.style.display = 'none';
-                document.getElementById("nb-players-input").value = 2;
-            }
-            else
-                container.style.display = 'block';
-        })
-
         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'>
+                    <div class='form-floating mb-2' id='gamemode-div'>
-                        <select class='form-control' id='game-choice'>
+                        <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>

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)

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
 

matchmaking/routing.py

@@ -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())
 ]