core: recreation of matchmaking, add: matchmaking support multiple modes

frontend/static/js/api/chat/channel.js

@@ -14,7 +14,7 @@ class Channel {
 
 	// reload = function to use when we receive a message
 	async connect(reload) {
-		let url = `ws://${window.location.host}/ws/chat/${this.channel_id}/`;
+		let url = `wss://${window.location.host}/ws/chat/${this.channel_id}/`;
 
 		this.chatSocket = new WebSocket(url);
 		this.chatSocket.onmessage = (event) =>{

frontend/static/js/api/matchmaking.js

@@ -11,18 +11,21 @@ class MatchMaking
 		 * @type {Client}
 		 */
 		this.client = client
+		this.searching = false;
 	}
 		
-	async start(func)
+	async start(func, mode)
 	{
 		if (!await this.client.isAuthentificate())
 			return null;
 		
-		let url = `wss://${window.location.host}/ws/matchmaking/`;
+		let url = `wss://${window.location.host}/ws/matchmaking/${mode}`;
 		
-		this._chatSocket = new WebSocket(url);
+		this._socket = new WebSocket(url);
 		
-		this._chatSocket.onmessage = function (event) {
+		this.searching = true;
+
+		this._socket.onmessage = function (event) {
 			const data = JSON.parse(event.data);
 			func(data.game_id)
 		};
@@ -30,7 +33,8 @@ class MatchMaking
 
 	async stop()
 	{
-		this._chatSocket.close()
+		this.searching = false;
+		this._socket.close()
 	}
 }
 

frontend/static/js/views/MatchMakingView.js

@@ -7,18 +7,42 @@ function game_found(game_id)
 }
 
 export default class extends AbstractView {
-    constructor(params) {
-        super(params, "Dashboard");
+    constructor(params)
+    {
+        super(params, "Matchmaking");
+    }
+
+    async press_button()
+    {
+        if (client.matchmaking.searching)
+        {
+            client.matchmaking.stop();
+            document.getElementById("button").value = "Find a game"
+        }
+        else
+        {
+            await this.matchmaking();
+            document.getElementById("button").value = "Stop matchmaking"
+        }
+    }
+
+    async matchmaking()
+    {
+        let nb_players = document.getElementById("nb_players-input").value
+
+        client.matchmaking.start(game_found, nb_players);
     }
 
     async postInit()
     {
-        await client.matchmaking.start(game_found)
+        document.getElementById("button").onclick = this.matchmaking
     }
 
     async getHtml() {
         return `
-			<h1>finding<h1>
+			<h1>Select mode<h1>
+            <input type="number" value="2" id="nb_players-input">
+            <input type="button" value="Find a game" id="button">
         `;
     }