join game in js

truthseeker/routes/routes_ui.py

@@ -24,7 +24,7 @@ def legal():
 @routes_ui.route("/lobby/<game_id>")
 def lobby(game_id):
     # rendered by the javascript client-side
-    return flask.render_template("lobby.html")
+    return flask.render_template("lobby.html",gameid=game_id)
 
 @routes_ui.route("/solo")
 def solo():

truthseeker/static/js/game_lobby.js

@@ -1,5 +1,4 @@
 // Display functions
-
 /**
  * Display the invalid rounds count message element, by removing the hidden CSS class.
  *
@@ -296,8 +295,8 @@ function getChallengeModeRoundsCount() {
  * @returns the code of the room
  */
 function getRoomCode() {
-    //FIXME get the real room code
-    return "ABCDEF";
+    gameid = document.getElementById("gameid")
+    return gameid;
 }
 
 // Lobby initialization
@@ -317,6 +316,21 @@ function getRoomCode() {
  * </p>
  */
 function initLobby() {
+    
+    gameid = getRoomCode(); 
+    socket = io({
+        auth:{
+            game_id: gameid
+        }
+    });
+
+    socket.on("connect", () => {
+        console.log("Connected !")
+    })
+
+    socket.on("playersjoin", (err) => {
+        console.log(`Failed to connect to socket: ${err.message}`);
+    });
     if (hasJoinedRoom()) {
         displayRoomView();
         if (isRoomOwner()) {

truthseeker/static/js/game_start_page.js

@@ -125,7 +125,7 @@ function createMultiPlayerRoom() {
 
     hideInvalidInputErrorMessage();
 
-    startGame()
+    startGame();
 }
 
 function joinMultiPlayerRoom() {
@@ -135,7 +135,7 @@ function joinMultiPlayerRoom() {
 
     hideInvalidInputErrorMessage();
 
-    //TODO: code to join multi player game
+    joinGame();
 }
 
 /**
@@ -211,12 +211,36 @@ function changeTheme() {
 async function startGame(){
     username = document.getElementById("game_username").value;
     let data = {}
-    data["username"] = username
-    await makeAPIRequest("createGame",data);
+    data["username"] = username;
+    response = makeAPIRequest("createGame",data);
+    response.then((value) => {
+        if (value["error"] != 0){
+            alert(value["msg"]);
+        }
+        else{
+            gameid = value["game_id"]
+            window.location.href = "/lobby/" + gameid;
+        }
+      });
+
 }
 async function joinGame(){
-    username = document.getElementById("game_username").value();
-    gameid = document.getElementById("game_room_code").value();
+    username = document.getElementById("game_username").value;
+    gameid = document.getElementById("game_room_code").value;
+    console.log(username);
+    data = {}
+    data["username"] = username;
+    data["game_id"] = gameid;
+    response = makeAPIRequest("joinGame",data);
+    response.then((value)=>{
+        console.log(value);
+        if (value["error"] != 0){
+            //alert(value["msg"]);
+        }
+        else{
+            //window.location.href = "/lobby/" + gameid;
+        }
+    })
 }
 // Set event listeners
 

truthseeker/templates/index.html

@@ -72,8 +72,8 @@
                 <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
             </div>
         </footer>
-        <script src="/static/js/api.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
+        <script src="/static/js/api.js"></script>
         <script src="/static/js/game_common.js"></script>
         <script src="/static/js/game_start_page.js"></script>
     </body>

truthseeker/templates/lobby.html

@@ -61,10 +61,10 @@
                 </div>
             </div>
         </noscript>
-        <script src="/static/js/api.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
+        <script src="/static/js/api.js"></script>
         <script src="/static/js/game_common.js"></script>
         <script src="/static/js/game_lobby.js"></script>
-
+        <input type="hidden" id="game_id" name="game_id" value={{gameid}} />
     </body>
 </html>