diff --git a/truthinquiry/routes/routes_api.py b/truthinquiry/routes/routes_api.py index 9b0f23b..779697f 100644 --- a/truthinquiry/routes/routes_api.py +++ b/truthinquiry/routes/routes_api.py @@ -230,6 +230,24 @@ def game_progress(): return {"error": 0} +@routes_api.route("/chatMessage", methods=["GET", "POST"]) +def chat_message(): + if not flask.session: + return {"error": 1, "msg": "No session"} + game_id = flask.session["game_id"] + if not game_logic.check_game_id(game_id): + return {"error": 1, "msg": "invalid game_id"} + game = game_logic.get_game(game_id) + if game is None: + return {"error": 1, "msg": "this game doesn't exist"} + + username = flask.session["username"] + message_received = flask.request.values.get("msg") + + message_sent = f"{username} : {message_received}" + socket_io.emit("chatMessage", message_sent, room="game."+game.game_id) + + return {"error": 0} @routes_api.route("/submitAnswers", methods=["GET", "POST"]) def check_anwser(): diff --git a/truthinquiry/static/css/game_ui_game.css b/truthinquiry/static/css/game_ui_game.css index 50f872b..e3caaa7 100644 --- a/truthinquiry/static/css/game_ui_game.css +++ b/truthinquiry/static/css/game_ui_game.css @@ -335,3 +335,77 @@ background-color: #000000d0; #return_lobby_button { border: transparent; } + +* {box-sizing: border-box;} + +/* chat */ +/* Button used to open the chat form - fixed at the bottom of the page */ +.open-button { + background-color: #555; + color: white; + padding: 16px 20px; + border: none; + cursor: pointer; + opacity: 0.8; + position: fixed; + bottom: 23px; + right: 28px; + width: 280px; +} + +/* The popup chat - hidden by default */ +.chat-popup { + display: none; + position: fixed; + bottom: 0; + color: #555; + right: 15px; + border: 3px solid #f1f1f1; + z-index: 9; +} + +/* Add styles to the form container */ +.form-container { + max-width: 300px; + padding: 10px; + background-color: white; +} + +/* Full-width textarea */ +.form-container textarea { + width: 100%; + padding: 15px; + margin: 5px 0 22px 0; + border: none; + background: #f1f1f1; + resize: none; + min-height: 5em; +} + +/* When the textarea gets focus, do something */ +.form-container textarea:focus { + background-color: #ddd; + outline: none; +} + +/* Set a style for the submit/send button */ +.form-container .btn { + background-color: #04AA6D; + color: white; + padding: 16px 20px; + border: none; + cursor: pointer; + width: 100%; + margin-bottom:10px; + opacity: 0.8; +} + +/* Add a red background color to the cancel button */ +.form-container .cancel { + background-color: red; +} + +/* Add some hover effects to buttons */ +.form-container .btn:hover, .open-button:hover { + opacity: 1; +} \ No newline at end of file diff --git a/truthinquiry/static/js/game.js b/truthinquiry/static/js/game.js index 2ec12c6..35ef4c6 100644 --- a/truthinquiry/static/js/game.js +++ b/truthinquiry/static/js/game.js @@ -48,6 +48,32 @@ function unsetQuestionButtonsListeners() { .removeEventListener("click", askTypeOneQuestion); } +function setChatBoxButtonsListeners() { + document.getElementById("close_chat_button") + .addEventListener("click", closeForm); + document.getElementById("open_chat_button") + .addEventListener("click", openForm); + document.getElementById("chat_button_send") + .addEventListener("click", sendChatMessage); + +} + + +/** + * Shows the chat box + */ +function openForm() { + document.getElementById("chatbox").style.display = "block"; + } + +/** + * Hides the chat box + */ + function closeForm() { + document.getElementById("chatbox").style.display = "none"; + } + + /** * Go back to interrogation view, by hiding the interrogation suspect view. */ @@ -335,6 +361,13 @@ function renderInterrogation() { }); } +function sendChatMessage(){ + const message = document.getElementById("chat_message_box").value; + const data = {}; + data["msg"] = message; + makeAPIRequest("chatMessage",data); + document.getElementById("chat_message_box").value = ''; +} function renderIntroduction(){ document.getElementById("username").textContent += username; @@ -364,6 +397,13 @@ function initSock() { socket.on("gameprogress", username => { console.log(username); }); + + socket.on("chatMessage", message => { + const message_received = document.createElement("li"); + message_received.classList.add("message"); + message_received.textContent = message; + document.getElementById("message_list").appendChild(message_received); + }); socket.on("gamefinished", finalResults => { hideFirstClassElement("emotion_and_culprit_choices"); @@ -465,6 +505,7 @@ async function initGame() { renderInterrogation(); setQuestionButtonsListeners() setIntroductionAndInterrogationListeners(); + setChatBoxButtonsListeners(); showFirstClassElement("introduction"); setGameBackground(INTRO_IMAGE_PATH); } diff --git a/truthinquiry/templates/game.html b/truthinquiry/templates/game.html index 818dfe5..335108b 100644 --- a/truthinquiry/templates/game.html +++ b/truthinquiry/templates/game.html @@ -40,6 +40,23 @@