Added chat timestamps, started work on nameplate settings

src/app/chatMetadata.js

@@ -26,8 +26,9 @@ class chatMetadata{
      * @param {String} msg - Contents of the message, with links replaced with numbered file-seperator markers
      * @param {String} type - Message Type Identifier, used for client-side processing.
      * @param {Array} links - Array of URLs/Links included in the message.
+     * @param {Number} timestamp - UTC Epoch from when message was sent
      */
-    constructor(user, flair, highLevel, msg, type, links){
+    constructor(user, flair, highLevel, msg, type, links, timestamp = new Date.now()){
         /**
          * Name of user who sent the message
          */
@@ -57,6 +58,11 @@ class chatMetadata{
          * Array of URLs/Links included in the message.
          */
         this.links = links;
+
+        /**
+         * Datetime message was sent
+         */
+        this.timestamp = timestamp;
     }
 }
 

src/schemas/channel/chatSchema.js

@@ -51,6 +51,10 @@ const chatSchema = new mongoose.Schema({
         type: [linkSchema],
         required: true,
     },
+    timestamp: {
+        type: mongoose.SchemaTypes.Number,
+        default: Date.now()
+    }
 });
 
 module.exports = chatSchema;

src/views/partial/panels/settings.ejs

@@ -46,6 +46,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
             <select>
             </select>
         </span>
+        <span id="settings-panel-nameplate-format" class="settings-panel-setting">
+            <p>Chat nameplate: </p>
+            <select>
+                <option value="left">Left</option>
+                <option value="top">Top</option>
+                <option value="timestamp">Top w/ timestamp</option>
+            </select>
+        </span>
         <span id="settings-panel-min-chat-width" class="settings-panel-setting">
             <p>Aspect Ratio Lock Limiter: </p>
             <input type="number">

www/css/channel.css

@@ -171,6 +171,10 @@ p.panel-head-element{
     font-size: 10pt;
 }
 
+.chat-entry-nameplate{
+    display: flex;
+}
+
 .chat-entry-username, .pm-panel-sesh-entry-username{
     margin: auto 0.2em auto 0;
     text-wrap: nowrap;

www/js/channel/chatPostprocessor.js

@@ -108,11 +108,19 @@ class chatPostprocessor{
             `${classSuffix}-${color}`
         );
 
+        //Create Date object from message timestamp
+        let timestamp = new Date(this.rawData.timestamp);
+
+        //Create nameplate span to hold username and high level
+        let nameplate = document.createElement('span');
+        nameplate.classList.add(`${classSuffixAlt}-buffer`, `${classSuffix}-entry-nameplate`, );
+        nameplate.title = timestamp.toLocaleString();
+
         //Create high-level label
         let highLevel = document.createElement('p');
         highLevel.classList.add(`${classSuffixAlt}-buffer`,`${classSuffix}-entry-high-level`,"high-level");
         highLevel.textContent = utils.unescapeEntities(`${this.rawData.highLevel}`);
-        this.chatEntry.appendChild(highLevel);
+        nameplate.appendChild(highLevel);
 
         //If we're not using classic flair
         if(this.rawData.flair != "classic"){
@@ -120,7 +128,7 @@ class chatPostprocessor{
             flair = `flair-${this.rawData.flair}`;
         }
 
-        //Create username label
+        //Create username label to the nameplate
         let userLabel = document.createElement('p');
         userLabel.classList.add(`${classSuffixAlt}-buffer`, `${classSuffix}-entry-username`, );
         
@@ -132,8 +140,11 @@ class chatPostprocessor{
         //Inject flair span into user label before the colon
         userLabel.innerHTML = `${flairSpan.outerHTML}: `;
 
-        //Append user label
+        //Append user label to the nameplate
-        this.chatEntry.appendChild(userLabel);
+        nameplate.appendChild(userLabel);
+
+        //Append nameplate to the chat entry
+        this.chatEntry.appendChild(nameplate);
 
         //Create chat body
         this.chatBody = document.createElement('p');