From 2af483f225ca3c4f9baea3a0c2287fcda2524aa7 Mon Sep 17 00:00:00 2001
From: marvin-borner@live.com
Date: Fri, 13 Apr 2018 21:51:31 +0200
Subject: Some chat design, reverted asset management - added klingon

---
 assets/css/main.css | 47 +++++++++++++++++++++++++++++++++++++----------
 assets/js/chat.js   | 16 ++++++++++------
 2 files changed, 47 insertions(+), 16 deletions(-)

(limited to 'assets')

diff --git a/assets/css/main.css b/assets/css/main.css
index 38ecd23..47a8141 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -21,7 +21,7 @@ body {
     height: 100%;
     width: 100%;
     overflow: hidden;
-    background-color: #0B1D33;
+    background-color: #0c1d34;
     color: #426A91;
     margin: 0;
     padding: 0;
@@ -55,7 +55,7 @@ FLICKITY
     height: -webkit-calc(100vh - 75px);
     height: -o-calc(100vh - 75px);
     height: calc(100vh - 75px);
-    background: #0B1D33;
+    background: #0c1d34;
     counter-increment: carousel-cell;
 }
 
@@ -99,12 +99,40 @@ GENERAL TABS
 CHAT WINDOW
 **********/
 .ChatWindow {
+    position: relative;
+    margin: 5px;
+    height: 100%;
+}
+
+.ChatMessages {
     height: 100%;
+    width: 100%;
+}
+
+.ChatMessage {
+    display: block;
     position: relative;
+    border-radius: 25px;
+    min-width: 100px;
+    max-width: 50%;
+    width: auto;
+    height: auto;
+    word-wrap: break-word;
+    padding: 10px;
+}
+
+.ServerChatMessage {
+    text-align: center;
 }
 
-.ChatResponses {
+.MessageSent {
+    float: right;
+    background-color: #12213b;
+}
 
+.MessageReceived {
+    float: left;
+    background-color: #13223c;
 }
 
 .ChatInput {
@@ -115,7 +143,7 @@ CHAT WINDOW
     z-index: 600;
     width: 100%;
     height: 40px;
-    border:none;
+    border: none;
     color: #FFF;
     background-color: #13223C;
 }
@@ -124,7 +152,6 @@ CHAT WINDOW
     display: none;
 }
 
-
 /*****
 NAVBAR
 *****/
@@ -138,7 +165,7 @@ NAVBAR
     left: 0;
     height: 75px;
     width: 100%;
-    background-color: #13223C;
+    background-color: #13223c;
 }
 
 .NavbarIconWrap {
@@ -159,14 +186,14 @@ NAVBAR
     left: 0;
     width: 20% !important;
     height: 2px;
-    background: #FF00A2;
+    background: #eb12b5;
 }
 
 .ActiveTab {
     -webkit-transition: -moz-transform .3s ease-out;
     -moz-transition: -webkit-transform .3s ease-out;
 
-    filter: invert(16%) sepia(77%) saturate(6174%) hue-rotate(316deg) brightness(107%) contrast(110%);
-    -webkit-filter: invert(16%) sepia(77%) saturate(6174%) hue-rotate(316deg) brightness(107%) contrast(110%);
-    -moz-filter: invert(16%) sepia(77%) saturate(6174%) hue-rotate(316deg) brightness(107%) contrast(110%);
+    filter: invert(19%) sepia(93%) saturate(4612%) hue-rotate(303deg) brightness(98%) contrast(101%);
+    -webkit-filter: invert(19%) sepia(93%) saturate(4612%) hue-rotate(303deg) brightness(98%) contrast(101%);
+    -moz-filter: invert(19%) sepia(93%) saturate(4612%) hue-rotate(303deg) brightness(98%) contrast(101%);
 }
diff --git a/assets/js/chat.js b/assets/js/chat.js
index c715fbd..bf13a32 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -32,7 +32,7 @@ if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('Keys
 
 var ChatTextInput = $("#ChatTextInput");
 var SubscribeTextInput = $("#SubscribeTextInput");
-var ChatResponses = $("#ChatResponses");
+var ChatMessages = $("#ChatMessages");
 
 var WebSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');
 WebSocket.onopen = function () {
@@ -41,17 +41,21 @@ WebSocket.onopen = function () {
 WebSocket.onmessage = function (e) {
     var MessageObject = JSON.parse(e.data);
     if (MessageObject.ServerMessage === false) {
-        ChatResponses.append(MessageObject.Username + " - " + MessageObject.Message + "<br>");
+        if (MessageObject.WasHimself === true) { //MessageObject.Username
+            ChatMessages.append("<div class='ChatMessage MessageSent'>" + MessageObject.Message + "</div><br><br>");
+        } else if (MessageObject.WasHimself === false) {
+            ChatMessages.append("<div class='ChatMessage MessageReceived'>" + MessageObject.Message + "</div><br><br>");
+        }
     } else if (MessageObject.ServerMessage === true) {
         if (MessageObject.ServerMessageType === "GroupJoin") {
             if (MessageObject.WasHimself === false) {
-                ChatResponses.append(MessageObject.Username + " <span data-lang='joined the group'></span><br>");
+                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span class='ServerChatMessage' data-lang='joined the group'></span>.</div><br>");
             } else if (MessageObject.WasHimself === true) {
-                ChatResponses.empty();
-                ChatResponses.append("<span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.<br>");
+                ChatMessages.empty();
+                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br>");
             }
         } else if (MessageObject.ServerMessageType === "UserDisconnect") {
-            ChatResponses.append(MessageObject.Username + " <span data-lang='has disconnected from the server'></span><br>");
+            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br>");
         }
     }
     initiateLanguage(); // need further work (performance)
-- 
cgit v1.2.3