logs-content: Added character highlighter feature.

marko/page/logs-content/components/post/component.js

@@ -14,6 +14,7 @@ module.exports = class {
       multipart: false,
       anchored: false,
       prevWasText: false,
+      dark: false,
     }
 
     this.mounted = false;
@@ -83,18 +84,30 @@ module.exports = class {
 
     this.state.text = input.post.text
 
+    if (input.highlights.length > 0 && (input.post.kind === "action" || input.post.kind === "text")) {
+      this.state.dark = true
+    } else {
+      this.state.dark = false
+    }
+
     if (!input.post.nick.startsWith("=")) {
       const postNick = input.post.nick.replace("'s", "").replace("s'", "s")
       for (const character of input.characters) {
         for (const nick of character.nicks) {
           if (nick === postNick) {
-            this.state.name = character.name
+            this.state.name = character.name + character.id
             this.state.shortName = character.shortName
 
             if (input.post.nick.endsWith("'s") || input.post.nick.endsWith("'")) {
               this.state.nameSuffix = (character.shortName.endsWith("s") || character.shortName.endsWith("z")) ? "'" : "'s"
             }
 
+            if (input.highlights.length > 0) {
+              this.state.dark = !(input.highlights.includes(character.id))
+            } else {
+              this.state.dark = false
+            }
+
             return
           }
         }

marko/page/logs-content/components/post/index.marko

@@ -1,4 +1,4 @@
-<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null, state.anchored ? "anchored" : null]>
+<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null, state.anchored ? "anchored" : null, state.dark ? "dark" : null]>
   <a class="anchor" id=input.post.id />  
   <div class="post-meta-row">
     <div class="options color-menu">

marko/page/logs-content/components/post/style.less

@@ -140,4 +140,8 @@ div.post.multipart {
       display: none;
     }
   }
+}
+
+div.post.dark {
+  opacity: 0.25;
 }