From 427bff7aa92704287d60bd844453242baf0cb388 Mon Sep 17 00:00:00 2001
From: Quentin ANIERE <quentin.aniere@gmail.com>
Date: Tue, 26 Apr 2022 21:52:01 +0200
Subject: [PATCH] Improve chat design

---
 index.js       |  2 +-
 src/index.html |  2 +-
 src/script.js  | 12 ++++++++++-
 src/style.css  | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index 8887a8e..31b186e 100644
--- a/index.js
+++ b/index.js
@@ -23,7 +23,7 @@ const io = socketio(socketHTTPSServer, {
 });
 
 function getCurrentTime() {
-    
+
     function addZero(i) {
         if (i < 10) {
             i = "0" + i;
diff --git a/src/index.html b/src/index.html
index 61b4f4a..04f6d60 100644
--- a/src/index.html
+++ b/src/index.html
@@ -66,7 +66,7 @@
     </div>
     <div id="chat">
         <ul id="messages">
-            <li><b>Rappel:</b> Tous les messages doivent parler de Denis !</li>
+            <li class="is-received"><b>Rappel:</b> Tous les messages doivent parler de Denis !</li>
         </ul>
         <input id="message-input" type="text" placeholder="Écrivez votre message sur Denis ici..." autofocus>
         <img id="send" src="./images/send.png">
diff --git a/src/script.js b/src/script.js
index 694fb30..738f891 100644
--- a/src/script.js
+++ b/src/script.js
@@ -2,9 +2,19 @@ var socket;
 var username = "";
 
 function addMessage(author, message) {
+
     var li = document.createElement("li");
     li.innerHTML = "<b>" + author + ": </b>";
-    li.innerText += message;
+    li.innerHTML += message;
+
+    if(author != username) {
+        li.classList.add("is-received");
+
+    } else {
+        li.classList.add("is-sended");
+    }
+    
+
     document.getElementById("messages").appendChild(li);
     document.getElementById("messages").scrollTop = document.getElementById("messages").scrollHeight;
 }
diff --git a/src/style.css b/src/style.css
index 9f12fde..7db6c2b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -116,6 +116,60 @@ body {
 }
 
 
+.is-received {
+	position: relative;
+	background: #e5e5ea;
+	border-radius: .4em;
+    
+    width: 90%;
+    padding: 0.5vh;
+    margin: 1vh;
+    margin-left: 20px;
+    min-height: 30px;
+}
+
+.is-received::after {
+	content: "";
+	position: absolute;
+	left: -10px;
+	top: 50%;
+	width: 10px;
+	height: 0;
+	border: 1.281em solid transparent;
+	border-right-color: #e5e5ea;
+	border-left: 0;
+	border-top: 0;
+	margin-top: -0.641em;
+	margin-left: -1.281em;
+}
+
+.is-sended {
+	position: relative;
+	background: #007bff;
+	border-radius: .4em;
+
+    width: 90%;
+    padding: 0.5vh;
+    margin: 1vh;
+    margin-left: 20px;
+    min-height: 30px;
+}
+
+.is-sended::after {
+	content: "";
+	position: absolute;
+	right: 0;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 0.625em solid transparent;
+	border-left-color: #007bff;
+	border-right: 0;
+	border-bottom: 0;
+	margin-top: -0.312em;
+	margin-right: -0.625em;
+}
+
 @media screen and (max-width: 1024px) {
 
     body {