diff --git a/truthseeker/routes/routes_api.py b/truthseeker/routes/routes_api.py index da09201..d27c022 100644 --- a/truthseeker/routes/routes_api.py +++ b/truthseeker/routes/routes_api.py @@ -27,6 +27,19 @@ def create_game(): APP.discord_bot.update_games_presence() 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(): @@ -51,7 +64,29 @@ def join_game(): APP.socketio_app.emit("playersjoin", [flask.session["username"]], room="game."+game.game_id) 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: diff --git a/truthseeker/routes/routes_ui.py b/truthseeker/routes/routes_ui.py index 9342c17..a439b70 100644 --- a/truthseeker/routes/routes_ui.py +++ b/truthseeker/routes/routes_ui.py @@ -24,7 +24,7 @@ def legal(): @routes_ui.route("/lobby/") 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(): diff --git a/truthseeker/static/js/api.js b/truthseeker/static/js/api.js new file mode 100644 index 0000000..803dd3f --- /dev/null +++ b/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"]) + } + }); + }) + }) +} diff --git a/truthseeker/static/js/game_lobby.js b/truthseeker/static/js/game_lobby.js index c47c880..e941514 100644 --- a/truthseeker/static/js/game_lobby.js +++ b/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() { - //FIXME: check if player is room owner - return true; +async function isRoomOwner() { + response = await makeAPIRequest("isOwner"); + return response["owner"]; } -function hasJoinedRoom() { - //FIXME: check if player has joined the room - return true; +async function hasJoinedRoom() { + response = await makeAPIRequest("hasJoined"); + return response["joined"]; } /** @@ -296,8 +314,29 @@ function getChallengeModeRoundsCount() { * @returns the code of the room */ function getRoomCode() { - //FIXME get the real room code - return "ABCDEF"; + gameid = document.getElementById("game_id").value; + 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> * 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. *

*/ -function initLobby() { - if (hasJoinedRoom()) { +async function initLobby() { + + gameid = getRoomCode(); + + if (await hasJoinedRoom()) { + initSock(); displayRoomView(); - if (isRoomOwner()) { + if (await isRoomOwner()) { displayRoomCode(); displayMultiPlayerModeChoices(); setListenersToGameButtons(); diff --git a/truthseeker/static/js/game_start_page.js b/truthseeker/static/js/game_start_page.js index 52b68c0..a57470d 100644 --- a/truthseeker/static/js/game_start_page.js +++ b/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); diff --git a/truthseeker/templates/index.html b/truthseeker/templates/index.html index c5cb68b..2eff2bd 100644 --- a/truthseeker/templates/index.html +++ b/truthseeker/templates/index.html @@ -72,6 +72,8 @@ Mentions légales + + diff --git a/truthseeker/templates/lobby.html b/truthseeker/templates/lobby.html index e3bdfdc..220099e 100644 --- a/truthseeker/templates/lobby.html +++ b/truthseeker/templates/lobby.html @@ -8,6 +8,7 @@ + + +