add optional extra content to each message

.gitignore

@@ -1 +1,2 @@
 outchat.db
+api_extra.php

api.php

@@ -47,9 +47,13 @@ if ($action === 'createMessage') {
     $name = $database->escapeString(htmlspecialchars($_POST['name']));
     $text = $database->escapeString(htmlspecialchars($_POST['text']));
 
-    $statement = $database->prepare('INSERT INTO messages (name, text, timestamp) VALUES (:name, :text, :timestamp)');
+    $statement = $database->prepare('INSERT INTO messages (name, text, extra, timestamp) VALUES (:name, :text, :extra, :timestamp)');
     $statement->bindValue(':name', $name, SQLITE3_TEXT);
     $statement->bindValue(':text', $text, SQLITE3_TEXT);
+    if (file_exists('api_extra.php')) {
+        $extra_content = require 'api_extra.php';
+        $statement->bindValue(':extra', $extra_content(), SQLITE3_TEXT);
+    }
     $statement->bindValue(':timestamp', $timestamp, SQLITE3_INTEGER);
     $statement->execute();
 }

main.css

@@ -35,11 +35,24 @@ body {
 
 .message__info-name {
     font-weight: 700;
-    margin-right: 15px;
+    margin-right: 10px;
     font-size: 18px;
     line-height: .8;
 }
 
+.message__info-extra {
+    color: #969696;
+    margin-right: 10px;
+}
+
+.message__info-extra:before {
+    content: "(";
+}
+
+.message__info-extra:after {
+    content: ")";
+}
+
 .message__text {
     position: relative;
     white-space: pre-line;

main.js

@@ -58,8 +58,8 @@ function getMessages() {
                         scrollWindowDown();
                     }, 100);
                 }
-                for (message of data) {
-                    createMessageNode(message.name, message.text_processed, message.timestamp, message.datetime);
+                for (let message of data) {
+                    createMessageNode(message.name, message.text_processed, message.extra, message.timestamp, message.datetime);
                 }
             }
         })
@@ -68,13 +68,15 @@ function getMessages() {
         });
 }
 
-function createMessageNode(name, text, timestamp, datetime) {
+function createMessageNode(name, text, extra, timestamp, datetime) {
     const elementMain = document.createElement('div', {class: 'message'});
     const elementText = document.createElement('div', {class: 'message__text'});
     const elementInfo = document.createElement('div', {class: 'message__info'});
     const elementName = document.createElement('div', {id: 'message__info-name'});
+    const elementExtra = document.createElement('div', {class: 'message__info-extra'});
     const elementDatetime = document.createElement('div', {id: 'message__info-datetime'});
     const contentName = document.createTextNode(name);
+    const contentExtra = document.createTextNode(extra);
     const contentDatetime = document.createTextNode('[' + datetime + ']');
     //const contentText = document.createTextNode(text)
 
@@ -84,16 +86,21 @@ function createMessageNode(name, text, timestamp, datetime) {
     elementInfo.classList.add('message__info');
     elementDatetime.classList.add('message__info-datetime');
     elementName.classList.add('message__info-name');
+    elementExtra.classList.add('message__info-extra');
 
     // "hash" name color
     elementName.style.color = "#" + intToRGB(hashCode(name));
 
     // append everything to chat
     elementName.appendChild(contentName);
+    elementExtra.appendChild(contentExtra);
     elementDatetime.appendChild(contentDatetime);
     elementText.innerHTML = text;
 
     elementInfo.appendChild(elementName);
+    if (extra) {
+        elementInfo.appendChild(elementExtra);
+    }
     elementInfo.appendChild(elementDatetime);
 
     elementMain.appendChild(elementInfo);

outchat-ddl.sql

@@ -1,7 +1,9 @@
-CREATE TABLE `messages` (
-	`id`	INTEGER PRIMARY KEY AUTOINCREMENT,
-	`name`	TEXT,
-	`text`	TEXT,
-	`timestamp`	INTEGER
+CREATE TABLE `messages`
+(
+    `id`        INTEGER PRIMARY KEY AUTOINCREMENT,
+    `name`      TEXT,
+    `text`      TEXT,
+    `extra`     TEXT,
+    `timestamp` INTEGER
 );