From e3b1cabdd370b452a77c0a0248c69f0c292a9e72 Mon Sep 17 00:00:00 2001
From: marvin-borner@live.com
Date: Sat, 14 Apr 2018 12:17:22 +0200
Subject: Chat design improvements

---
 assets/js/chat.js | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

(limited to 'assets/js/chat.js')

diff --git a/assets/js/chat.js b/assets/js/chat.js
index bf13a32..a037115 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -35,27 +35,52 @@ var SubscribeTextInput = $("#SubscribeTextInput");
 var ChatMessages = $("#ChatMessages");
 
 var WebSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');
+
 WebSocket.onopen = function () {
     console.log("Chat connection established!");
 };
+
 WebSocket.onmessage = function (e) {
+    var LastMessage = $(".ChatMessage:last");
     var MessageObject = JSON.parse(e.data);
     if (MessageObject.ServerMessage === false) {
         if (MessageObject.WasHimself === true) { //MessageObject.Username
-            ChatMessages.append("<div class='ChatMessage MessageSent'>" + MessageObject.Message + "</div><br><br>");
+            if (!LastMessage.hasClass("MessageSent")) {
+                ChatMessages.append("<div class='ChatMessage MessageSent AloneMessage'>" + MessageObject.Message + "</div><br><br>");
+            } else if (LastMessage.hasClass("MessageSent")) {
+                if (LastMessage.hasClass("AloneMessage")) {
+                    LastMessage.removeClass("AloneMessage");
+                    LastMessage.addClass("TopMessage");
+                } else if (LastMessage.hasClass("BottomMessage")) {
+                    LastMessage.removeClass("BottomMessage");
+                    LastMessage.addClass("MiddleMessage");
+                }
+                ChatMessages.append("<div class='ChatMessage MessageSent BottomMessage'>" + MessageObject.Message + "</div><br><br>");
+            }
         } else if (MessageObject.WasHimself === false) {
-            ChatMessages.append("<div class='ChatMessage MessageReceived'>" + MessageObject.Message + "</div><br><br>");
+            if (!LastMessage.hasClass("MessageReceived")) {
+                ChatMessages.append("<div class='ChatMessage MessageReceived AloneMessage'>" + MessageObject.Message + "</div><br><br>");
+            } else if (LastMessage.hasClass("MessageReceived")) {
+                if (LastMessage.hasClass("AloneMessage")) {
+                    LastMessage.removeClass("AloneMessage");
+                    LastMessage.addClass("TopMessage");
+                } else if (LastMessage.hasClass("BottomMessage")) {
+                    LastMessage.removeClass("BottomMessage");
+                    LastMessage.addClass("MiddleMessage");
+                }
+                ChatMessages.append("<div class='ChatMessage MessageReceived BottomMessage'>" + MessageObject.Message + "</div><br><br>");
+            }
         }
     } else if (MessageObject.ServerMessage === true) {
         if (MessageObject.ServerMessageType === "GroupJoin") {
             if (MessageObject.WasHimself === false) {
-                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span class='ServerChatMessage' data-lang='joined the group'></span>.</div><br>");
+                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='joined the group'></span>.</div><br><br>");
             } else if (MessageObject.WasHimself === true) {
                 ChatMessages.empty();
-                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br>");
+                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br><br>");
             }
         } else if (MessageObject.ServerMessageType === "UserDisconnect") {
-            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br>");
+            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br><br>");
         }
     }
     initiateLanguage(); // need further work (performance)
-- 
cgit v1.2.3