add: Version, message styles

package.json

@@ -1,7 +1,7 @@
 {
   "name": "svin-chat",
   "version": "1.0.0",
-  "description": "Coolest chat in the world😎",
+  "description": "Coolest chat in the world 😎",
   "main": "src/index.js",
   "scripts": {
     "start": "node src/index.js",

public/css/main.css

@@ -223,6 +223,14 @@ body {
     width: 100%;
 }
 
+.align-start {
+    align-items: start;
+}
+
+.align-end {
+    align-items: end;
+}
+
 .message:last-child {
     margin-top: 8px;
 }
@@ -239,17 +247,28 @@ body {
 
 .message-text {
     margin: 0px 16px 8px 16px;
+    padding: 12px 16px 16px 16px;
     font-size: 16pt;
     font-weight: 500;
     word-break: break-word;
     color: #eee;
+    max-width: 66%;
+    border-radius: 8px;
+}
+
+.user-message {
+    background-color: #4595E5;
+}
+
+.friend-message {
+    background-color: #222;
 }
 
 .message-datetime {
-    margin: 0px 16px 16px 16px;
-    font-size: 14pt;
+    margin: 0px 16px 8px 16px;
+    font-size: 11pt;
     font-weight: 500;
-    color: #555;
+    color: #666;
 }
 
 .input-form {
@@ -258,12 +277,12 @@ body {
 }
 
 .input-form .text-input {
-    margin: 16px 0px 16px 16px;
+    margin: 16px 0px 8px 16px;
     height: 56px;
 }
 
 .input-form .button {
-    margin: 16px;
+    margin: 16px 16px 8px 16px;
     width: 84px;
     height: 56px;
 }
@@ -355,6 +374,13 @@ body {
     border-color: #3585D5;
 }
 
+.version {
+    margin: 0px 16px 8px 16px;
+    color: #444;
+    text-align: end;
+    font-size: 12pt;
+}
+
 @media screen and (max-width: 600px) {
     .hs {
         height: 12px;
@@ -423,21 +449,23 @@ body {
     
     .message-text {
         margin: 0px 14px 6px 14px;
+        padding: 10px 14px 14px 14px;
+        border-radius: 7px;
         font-size: 14pt;
     }
     
     .message-datetime {
-        margin: 0px 14px 14px 14px;
-        font-size: 12pt;
+        margin: 0px 14px 6px 14px;
+        font-size: 10pt;
     }
 
     .input-form .text-input {
-        margin: 12px 0px 12px 12px;
+        margin: 12px 0px 6px 12px;
         height: 48px;
     }
     
     .input-form .button {
-        margin: 12px;
+        margin: 12px 12px 6px 12px;
         width: 72px;
         height: 48px;
     }
@@ -464,6 +492,11 @@ body {
         border-radius: 32px;
         font-size: 14pt;
     }
+
+    .version {
+        margin: 0px 12px 6px 12px;
+        font-size: 11pt;
+    }
 }
 
 @media screen and (max-width: 400px) {
@@ -534,21 +567,23 @@ body {
     
     .message-text {
         margin: 0px 12px 4px 12px;
+        padding: 9px 12px 12px 12px;
+        border-radius: 6px;
         font-size: 13pt;
     }
     
     .message-datetime {
-        margin: 0px 12px 12px 12px;
-        font-size: 11pt;
+        margin: 0px 12px 4px 12px;
+        font-size: 9pt;
     }
 
     .input-form .text-input {
-        margin: 10px 0px 10px 10px;
+        margin: 10px 0px 5px 10px;
         height: 40px;
     }
     
     .input-form .button {
-        margin: 10px;
+        margin: 10px 10px 5px 10px;
         width: 60px;
         height: 40px;
     }
@@ -575,6 +610,11 @@ body {
         border-radius: 28px;
         font-size: 12pt;
     }
+
+    .version {
+        margin: 0px 10px 5px 10px;
+        font-size: 10pt;
+    }
 }
 
 @media screen and (max-width: 240px) {
@@ -644,22 +684,24 @@ body {
     }
     
     .message-text {
-        margin: 0px 10px 2px 10px;
+        margin: 0px 10px 4px 10px;
+        padding: 7px 10px 10px 10px;
+        border-radius: 5px;
         font-size: 12pt;
     }
     
     .message-datetime {
-        margin: 0px 10px 10px 10px;
-        font-size: 10pt;
+        margin: 0px 10px 4px 10px;
+        font-size: 8pt;
     }
 
     .input-form .text-input {
-        margin: 8px 0px 8px 8px;
+        margin: 8px 0px 4px 8px;
         height: 32px;
     }
     
     .input-form .button {
-        margin: 8px;
+        margin: 8px 8px 4px 8px;
         width: 48px;
         height: 32px;
     }
@@ -686,4 +728,9 @@ body {
         border-radius: 24px;
         font-size: 11pt;
     }
+
+    .version {
+        margin: 0px 8px 4px 8px;
+        font-size: 9pt;
+    }
 }

src/routes/chat.js

@@ -5,6 +5,7 @@ const path = require("path");
 const express = require("express");
 const ejs = require("ejs");
 const db = require("../db");
+const package = require("../../package.json");
 const { encrypt, decrypt } = require("../util/crypto");
 
 const views = path.join(__dirname, "..", "views");
@@ -19,6 +20,7 @@ router.get("/chat/:chat_id", async (req, res) => {
             const moreMessages = await db.any("SELECT 1 FROM messages WHERE chat_id = $1 AND timestamp < $2", [ chat?.id, messages[messages.length - 1]?.timestamp ]);
             res.render("layout", {
                 child: await ejs.renderFile(path.join(views, "chat.ejs"), {
+                    version: package.version,
                     username: req.user.username,
                     title: req.params.chat_id,
                     chatId: chat?.id,
@@ -38,7 +40,10 @@ router.get("/chat/:chat_id", async (req, res) => {
             console.log(err);
             res.render("layout", {
                 child: await ejs.renderFile(path.join(views, "chat.ejs"), {
+                    version: package.version,
+                    username: null,
                     title: req.params.chat_id,
+                    chatId: null,
                     empty: true,
                     messages: [],
                     hasMoreMessages: false,

src/views/chat.ejs

@@ -10,9 +10,15 @@
             <p class="empty-label">No messages</p>
         <% } %>
         <% messages.forEach(function(message) { %>
-            <div class="message">
-                <span class="message-username"><%- message.username %></span>
-                <span class="message-text"><%- message.text %></span>
+            <% if (message.username === username) { %>
+            <div class="message align-end">
+                <span class="message-text user-message">
+            <% } else { %>
+            <div class="message align-start">
+                <span class="message-text friend-message">
+            <% } %>
+                    <%- message.text %>
+                </span>
                 <span class="message-datetime"><%- message.datetime %></span>
             </div>
         <% }); %>
@@ -26,6 +32,7 @@
         <input type="text" id="message-input" name="text" placeholder="Enter message..." class="text-input" autocomplete="off" required />
         <input type="submit" value="Send" class="button" />
     </form>
+    <span class="version">SvinChat v<%- version %></span>
 </div>
 <script>
     var pollRequest = null
@@ -41,17 +48,18 @@
     }
     function addMessage(message, target) {
         var container = document.createElement("div")
-        var nameSpan = document.createElement("span")
         var textSpan = document.createElement("span")
         var datetimeSpan = document.createElement("span")
-        container.className = "message"
-        nameSpan.className = "message-username"
-        textSpan.className = "message-text"
+        if (message.username === "<%- username %>") {
+            container.className = "message align-end"
+            textSpan.className = "message-text user-message"
+        } else {
+            container.className = "message align-start"
+            textSpan.className = "message-text friend-message"
+        }
         datetimeSpan.className = "message-datetime"
-        nameSpan.innerText = message.username
         textSpan.innerText = message.text
         datetimeSpan.innerText = new Date(message.datetime).toLocaleString()
-        container.appendChild(nameSpan)
         container.appendChild(textSpan)
         container.appendChild(datetimeSpan)
         messageList.insertBefore(container, target)