Merge pull request #25 from ThomasRubini/js_client_side

Js client side

truthseeker/routes/routes_api.py

@@ -28,6 +28,19 @@ def create_game():
 
     return response
 
+@routes_api.route("/getGameMembers", methods=["GET", "POST"])
+def getMembers():
+    if not flask.session:
+        return {"error": 1, "msg": "No session"}
+    game = game_logic.get_game(flask.session["game_id"])
+    if game == None:
+        return {"error": 1, "msg": "this game doesn't exist"}
+    
+    response = {"error" : 0}
+    player_list = [member.username for member in game.members]
+    response["members"] = player_list
+    return response
+    
 @routes_api.route("/joinGame", methods=["GET", "POST"])
 def join_game():
     game_id = flask.request.values.get("game_id")
@@ -52,6 +65,28 @@ def join_game():
 
     return {"error": 0}
 
+@routes_api.route("/isOwner", methods=["GET", "POST"])
+def is_owner():
+    if not flask.session:
+        return {"error": 0, "owner": False}
+    game = game_logic.get_game(flask.session["game_id"])
+    if game == None:
+        return {"error": 0, "owner": False}
+
+    if not flask.session["is_owner"]:   
+        return {"error": 0, "owner": False}
+
+    return {"error": 0, "owner": True}
+
+@routes_api.route("/hasJoined", methods=["GET", "POST"])
+def has_joined():
+    if not flask.session:
+        return {"error": 0, "joined": False}
+    game = game_logic.get_game(flask.session["game_id"])
+    if game == None:
+        return {"error": 0, "joined": False}
+    return {"error": 0, "joined": True}
+
 @routes_api.route("/startGame", methods=["GET", "POST"])
 def start_game():
     if not flask.session:

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/api.js

@@ -0,0 +1,17 @@
+async function makeAPIRequest(endpoint, body){
+    return new Promise((resolve, reject)=>{
+        const fetchOptions = {
+            method: "POST",
+            body: new URLSearchParams(body)
+        }
+        fetch("/api/v1/"+endpoint, fetchOptions).then(resp => {
+            resp.json().then(jsonResp=>{
+                if(jsonResp["error"] == 0){
+                    resolve(jsonResp)
+                }else{
+                    reject(endpoint+": "+jsonResp["msg"])
+                }
+            });
+        })
+    })
+}

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.
  *
@@ -24,6 +23,14 @@ function displayRoomCode() {
  * Display the players list element.
  */
 function displayPlayerList() {
+    response = makeAPIRequest("getGameMembers");
+    response.then((value) =>{
+        player_list = document.getElementsByClassName("player_names")[0];
+        value["members"].forEach(username => {
+            player_list.appendChild(document.createTextNode(username+"\n"));
+        });
+
+    });
     document.getElementsByClassName("players_list")[0].classList.remove("hidden");
 }
 
@@ -50,6 +57,10 @@ function displayJoinRoomView() {
     document.getElementsByClassName("join_room_view")[0].classList.remove("hidden");
 }
 
+
+function hideJoinRoomView() {
+    document.getElementsByClassName("join_room_view")[0].classList.add("hidden");
+}
 /**
  * Show an error message on the first game_start_failed CSS element.
  *
@@ -89,7 +100,7 @@ function hideInvalidRoundsCountErrorMessage(invalidRoundsCountMessageElement) {
 // Start game functions
 
 function startHistoryGame() {
-    //TODO: start the history game and handle server errors + connection errors
+    makeAPIRequest("startGame");
 }
 
 function startChallengeGame() {
@@ -104,17 +115,23 @@ function startChallengeGame() {
 // Join room functions
 
 function joinRoom() {
-    unsetListenerToJoinRoomButton();
     if (isNickNameInvalid()) {
         displayInvalidNickNameErrorMessage("Le nom saisi n'est pas valide.");
-        setListenerToJoinRoomButton();
         return;
     }
 
     hideInvalidNickNameErrorMessage();
-    //TODO: join the game room and handle server errors + connection errors
+    data = {}
+    data["username"] = document.getElementById("game_username").value;
+    data["game_id"] = getRoomCode();
+    response = makeAPIRequest("joinGame",data);
+    response.then((value)=>{
+        displayRoomView();
+        displayPlayerList();
+        initSock();
+        hideJoinRoomView();
+    })
 }
-
 // Room code functions
 
 /**
@@ -128,7 +145,8 @@ function joinRoom() {
  */
 function copyCode() {
     // Get the room code from the displayed text to avoid an extra API call
-    let roomCode = document.getElementsByClassName("room_code")[0].textContent;
+    let roomCode = getRoomCode();
+    console.log(roomCode);
     if (roomCode == "") {
         alert("Veuillez patientez, le code d'équipe est en cours de génération.");
     }
@@ -211,14 +229,14 @@ function unsetListenerToCopyCodeButton() {
 
 // Utility functions
 
-function isRoomOwner() {
+async function isRoomOwner() {
-    //FIXME: check if player is room owner
+    response = await makeAPIRequest("isOwner");
-    return true;
+    return response["owner"];
 }
 
-function hasJoinedRoom() {
+async function hasJoinedRoom() {
-    //FIXME: check if player has joined the room
+    response = await makeAPIRequest("hasJoined");
-    return true;
+    return response["joined"];
 }
 
 /**
@@ -296,8 +314,29 @@ function getChallengeModeRoundsCount() {
  * @returns the code of the room
  */
 function getRoomCode() {
-    //FIXME get the real room code
+    gameid = document.getElementById("game_id").value;
-    return "ABCDEF";
+    return gameid;
+}
+
+function initSock(){
+    socket = io({
+        auth:{
+            game_id: gameid
+        }
+    });
+
+    socket.on("connect", () => {
+        console.log("Connected !")
+    })
+
+    socket.on("gamestart",()=>{
+        window.location.href = "/multi";
+    })
+    socket.on("playersjoin", (username) => {
+        console.log(`${username} joined`);
+        player_list = document.getElementsByClassName("player_names")[0];
+        player_list.appendChild(document.createTextNode(username)+"\n");
+    });
 }
 
 // Lobby initialization
@@ -305,7 +344,7 @@ function getRoomCode() {
 /**
  * Initialize the lobby page.
  *
- * <p>
+ * p>
  * If the player has joined the room, the room view will be shown. In the case the player is the
  * owner of the room, the room code and the multi player mode choice will be shown and the
  * listeners to the game buttons will be done.
@@ -316,10 +355,14 @@ function getRoomCode() {
  * join room button will be set.
  * </p>
  */
-function initLobby() {
+async function initLobby() {
-    if (hasJoinedRoom()) {
+    
+    gameid = getRoomCode(); 
+
+    if (await hasJoinedRoom()) {
+        initSock();
         displayRoomView();
-        if (isRoomOwner()) {
+        if (await isRoomOwner()) {
             displayRoomCode();
             displayMultiPlayerModeChoices();
             setListenersToGameButtons();

truthseeker/static/js/game_start_page.js

@@ -125,7 +125,7 @@ function createMultiPlayerRoom() {
 
     hideInvalidInputErrorMessage();
 
-    //TODO: code to create multi player game
+    startGame();
 }
 
 function joinMultiPlayerRoom() {
@@ -135,7 +135,7 @@ function joinMultiPlayerRoom() {
 
     hideInvalidInputErrorMessage();
 
-    //TODO: code to join multi player game
+    joinGame();
 }
 
 /**
@@ -208,6 +208,51 @@ function changeTheme() {
     }
 }
 
+async function startSoloGame(){
+    username = document.getElementById("game_username").value;
+    let data = {}
+    data["username"] = username;
+    await makeAPIRequest("createGame",data);
+    start = makeAPIRequest("startGame");
+    start.then(()=>{
+        window.location.href = "/solo";
+    })
+}
+
+async function startGame(){
+    username = document.getElementById("game_username").value;
+    let 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;
+    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
 
 document.getElementById("play_button").addEventListener("click", showGameModeSelection);

truthseeker/templates/index.html

@@ -72,6 +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="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

@@ -8,6 +8,7 @@
         <meta charset="UTF-8">
     </head>
     <body class="game_app">
+        <input type="hidden" id="game_id" name="game_id" value={{gameid}} />
         <div class="join_room_view hidden">
             <h1 class="room_title">Salon</h1>
             <input type="text" id="game_username" placeholder="Entrez un pseudo" value="" required="required" maxlength="20">
@@ -61,6 +62,8 @@
                 </div>
             </div>
         </noscript>
+        <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>
     </body>