added chat

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():

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;
+}

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);
 }

truthinquiry/templates/game.html

@@ -40,6 +40,23 @@
                 </svg>
             </button>
             <ul class="suspects" id="interrogation_suspects"></ul>
+            <Section>
+                <button id="open_chat_button" class="open-button">Chat</button>
+                <div class="chat-popup" id="chatbox">
+                    <div class="form-container">
+                      <h1>Chat</h1>
+                        <div class="messages_received_container">
+                            <ul id="message_list" class="messages">
+                            </ul>
+                        </div>
+                      <label for="msg"><b>Message</b></label>
+                      <textarea id="chat_message_box" placeholder="Type message.." name="msg" required></textarea>
+                  
+                      <button id="chat_button_send" class="btn">Send</button>
+                      <button id="close_chat_button" type="button" class="btn cancel">Close</button>
+                    </div>
+                  </div>
+            </Section>
         </section>
         <section class="emotion_and_culprit_choices hidden">
             <h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>