Merge branch 'master' of ssh+git://git.aiterp.net/rpdata/frontend

marko/components/irc-caret-notation/component.js

@@ -0,0 +1,23 @@
+const {parse, BOLD} = require("irc-caret-notation")
+
+module.exports = class {
+  onCreate() {
+    this.state = {
+      paragraphs: [],
+      prev: "",
+    }
+  }
+
+  onInput(input) {
+    if (this.state == null) {
+      return
+    }
+
+    if (input.source != this.state.prev) {
+      this.state.prev = input.source
+      this.state.paragraphs = input.source.split("\n").filter(l => l.length > 0).map(l => parse(l, {
+        "*": (!(input.source.startsWith("(")) ? BOLD : null),
+      }))
+    }
+  }
+}

marko/components/irc-caret-notation/index.marko

@@ -0,0 +1,5 @@
+<div class=["irc-caret-notation", input.class]>
+  <p for(p in state.paragraphs)>
+    <span for(chunk in p) class=chunk.cssClasses("icn-")>${chunk.text}</span>
+  </p>
+</div>

marko/components/menu-link/index.marko

@@ -1,6 +1,6 @@
 <a on-click("onClick") href=input.href>
-  <div class=state.classes>
-    <div class="icon color-primary">${input.icon}</div>
+  <div class=[state.classes, input.weak ? "dark" : null]>
+    <div class=["icon", "color-primary"]>${input.icon}</div>
     <div class=["text", input.selected ? "color-primary" : input.textClass]>
       <include(input.renderBody) />
     </div>

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

@@ -1,5 +1,21 @@
 module.exports = class {
+  onCreate() {
+    this.state = {
+      highlights: [],
+    }
+  }
+  
   select(value) {
     this.emit("select", value)
   }
+
+  toggleHighlight(id) {
+    if (this.state.highlights.includes(id)) {
+      this.state.highlights = this.state.highlights.filter(id2 => id2 !== id)
+    } else {
+      this.state.highlights = this.state.highlights.concat(id)
+    }
+
+    this.emit("hightlights", this.state.highlights);
+  }
 }

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

@@ -4,10 +4,23 @@
     <menu-link dark key="_create" on-click("select", "post.add", null) icon="+">Add Post</menu-link>
     <menu-gap />
   </if-permitted>
-  <menu-header>Links</menu-header>
+  <menu-header>Channel</menu-header>
   <menu-link href=("/logs/?channels="+encodeURIComponent(input.log.channel.name)) icon="#">${input.log.channel.name}</menu-link>
-  <menu-link if(input.log.channel.eventName) href=("/logs/?channels="+input.log.channel.eventName) icon="E">${input.log.channel.eventName}</menu-link>
-  <for(character in input.log.characters)>
-    <menu-link href=("/logs/?characters="+character.id) icon="C">${character.name} <span class="weak">(${character.author})</span></menu-link>
-  </for>
+  <menu-gap />
+  <if(input.log.eventName)>
+    <menu-header>Event</menu-header>
+    <menu-link href=("/logs/?events="+input.log.eventName) icon="E">${input.log.eventName}</menu-link>
+    <menu-gap />
+  </if>
+  <if(input.log.characters.length > 0)>
+    <menu-header>Characters</menu-header>
+    <for(character in input.log.characters)>
+      <menu-link weak=(state.highlights.length > 0 && !state.highlights.includes(character.id)) 
+                 icon="C"
+                 on-click("toggleHighlight", character.id)>
+        ${character.name} <span class="weak">(${character.author})</span>
+      </menu-link>
+    </for>
+    <menu-gap />
+  </if>
 </menu>

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

@@ -9,6 +9,7 @@ module.exports = class {
       log: input.log,
       modal: null,
       removed: false,
+      highlights: [],
     }
   }  
   
@@ -166,6 +167,10 @@ module.exports = class {
     this.state.removed = true
   }
 
+  highlightsChanged(highlights) {
+    this.state.highlights = highlights.slice();
+  }
+
   get title() {
     if (this.state.log.title) {
       return this.state.log.title

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

@@ -1,4 +1,4 @@
-<logs-content-menu user=input.user log=state.log on-select("open") />
+<logs-content-menu on-hightlights("highlightsChanged") user=input.user log=state.log on-select("open") />
 <main>
   <div class="logs-content">
     <div class="header">
@@ -25,6 +25,7 @@
           prev=(state.log.posts[loop.getIndex() - 1] || {})
           post=post
           characters=state.log.characters
+          highlights=state.highlights
           last=(post.position === state.log.posts.length)
     />
   </div>

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;
@@ -80,39 +81,13 @@ module.exports = class {
     this.state.shortName = input.post.nick.split("_").shift()
     this.state.name = input.post.nick
     this.state.nameSuffix = ""
-    
-    this.state.text = input.post.text.replace(/\x02/g, "**").replace(/\x1D/g, "*").replace(/\`/g, "\\`").trim();
 
-    // Fix Ctrl-Bs
-    let left = false
-    this.state.text = this.state.text.replace(/\s*\*\*\s*/g, str => {
-      left = !left
+    this.state.text = input.post.text
 
-      if (left) {
-        return " **"
-      } else if (!left) {
-        return "** "
-      }
-
-      return str
-    })
-
-    if (this.state.text.startsWith("|")) {
-      this.state.name = ""
-      this.state.text = this.state.text.slice(1).trim();
-    }
-
-    if (input.post.kind === "text" && !this.state.text.includes("\"") && !this.state.text.includes("\''") && !this.state.text.includes("|")) {
-      const colonIndex = this.state.text.indexOf(": ");
-      if (colonIndex != -1 && colonIndex < this.state.text.indexOf(" ")) {
-        this.state.text = this.state.text.replace(": ", ": \"") + "\"";
-      } else {
-        this.state.text = '"' + this.state.text + '"'
-      }
-    }
-
-    if (this.state.text.charAt(0) == this.state.text.charAt(0).toUpperCase()) {
-      this.state.name = ""
+    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("=")) {
@@ -120,13 +95,19 @@ module.exports = class {
       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">
@@ -19,18 +19,18 @@
   </div>
   <div if(input.post.kind.startsWith("annotation.")) class="post-body" >
     <annotation level=(input.post.kind.substring(11))>
-      <markdown class="post-content" source=state.text />
+      <irc-caret-notation class="post-content" source=state.text />
     </annotation>
   </div>
   <div if(input.post.kind === "scene") class="post-body color-text">
-    <markdown class="post-content post-scene" source=state.text />
+    <irc-caret-notation class="post-content post-scene" source=state.text />
   </div>
   <div if(input.post.kind === "action") class="post-body color-text">
     $ const prefix = ((!state.multipart || state.prevWasText) ? state.shortName + state.nameSuffix + " " : "");
-    <markdown class="post-content post-action" source=(prefix + state.text) />
+    <irc-caret-notation class="post-content post-action" source=(prefix + state.text) />
   </div>
-   <div if(input.post.kind === "text") class="post-body color-text">
-    <markdown class="post-content post-text" source=state.text />
+  <div if(input.post.kind === "text") class="post-body color-text">
+    <irc-caret-notation class="post-content post-text" source=state.text />
   </div>
   <remove-post-modal enabled=(state.modal === "remove") post=input.post on-close("close") on-remove("remove") />
   <edit-post-modal enabled=(state.modal === "edit") post=input.post on-close("close") on-edited("edited") />

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

@@ -1,6 +1,6 @@
 div.post {
   margin-top: 1em;
-  margin-bottom: 1ch;
+  margin-bottom: 1.25em;
   margin-left: -12px;
   padding-left: 12px;
   padding-right: 0.5ch;
@@ -65,12 +65,54 @@ div.post {
       margin-top: 0.33em;
     }
 
+    p {
+      line-height: 1.33em;
+      margin-bottom: -0.25em;
+
+      span.icn-bold      { font-weight: 800; }
+      span.icn-underline { text-decoration: underline; }
+      span.icn-italic    { font-style: italic; }
+
+      span.icn-fg-0  { color: #fff; }
+      span.icn-fg-1  { color: #111; }
+      span.icn-fg-2  { color: #13d; }
+      span.icn-fg-3  { color: #173; }
+      span.icn-fg-4  { color: #d21; }
+      span.icn-fg-5  { color: #721; }
+      span.icn-fg-6  { color: #727; }
+      span.icn-fg-7  { color: #d71; }
+      span.icn-fg-8  { color: #aa1; }
+      span.icn-fg-9  { color: #1d3; }
+      span.icn-fg-10 { color: #177; }
+      span.icn-fg-11 { color: #1DD; }
+      span.icn-fg-12 { color: #127; }
+      span.icn-fg-13 { color: #c1a; }
+      span.icn-fg-14 { color: #444; }
+      span.icn-fg-15 { color: #aaa; }
+      span.icn-bg-0  { background-color: #fff; }
+      span.icn-bg-1  { background-color: #111; }
+      span.icn-bg-2  { background-color: #13d; }
+      span.icn-bg-3  { background-color: #173; }
+      span.icn-bg-4  { background-color: #d21; }
+      span.icn-bg-5  { background-color: #721; }
+      span.icn-bg-6  { background-color: #727; }
+      span.icn-bg-7  { background-color: #d71; }
+      span.icn-bg-8  { background-color: #aa1; }
+      span.icn-bg-9  { background-color: #1d3; }
+      span.icn-bg-10 { background-color: #177; }
+      span.icn-bg-11 { background-color: #1DD; }
+      span.icn-bg-12 { background-color: #127; }
+      span.icn-bg-13 { background-color: #c1a; }
+      span.icn-bg-14 { background-color: #444; }
+      span.icn-bg-15 { background-color: #aaa; }
+    }
     p:first-of-type {
       margin-top: 0;
       padding-top: 0;
     }
     p:last-of-type {
       padding-bottom: 0.1em;
+      margin-bottom: 0em;
     }
   } 
 }
@@ -91,11 +133,15 @@ div.post.pk-text.anchored {
 }
 
 div.post.multipart {
-  margin-top: -0.9em;
+  margin-top: -1.5em;
 
   div.post-meta {
     span {
       display: none;
     }
   }
+}
+
+div.post.dark {
+  opacity: 0.25;
 }

marko/page/story-content/components/comment/index.marko

@@ -47,7 +47,9 @@ import moment from "moment"
           </tr>
           <tr if(input.comment.fictionalDate != null)>
             <th>Date:</th>
-            <td>${moment(input.comment.fictionalDate).format("MMM D, YYYY")}</td>
+            <td>
+              <date utc value=input.comment.fictionalDate></date>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -69,7 +71,7 @@ import moment from "moment"
           <markdown class="body" source=paragraph>
             <if (input.comment.fictionalDate)>
               <span class="decoration color-menu">[</span>
-              <date class="color-menu" value=input.comment.fictionalDate></date>
+              <date utc class="color-menu" value=input.comment.fictionalDate></date>
               <span class="decoration color-menu">]&nbsp;</span>
             </if>
             <span class="decoration color-menu">&lt;</span>
@@ -108,7 +110,7 @@ import moment from "moment"
       </div>
       <chapter-meta kind="title" value=input.comment.subject />
       <chapter-meta kind="name" value=input.comment.characterName character=(input.comment.character) ukAuthor=input.comment.author />
-      <chapter-meta kind="date" value=input.comment.fictionalDate />
+      <chapter-meta utc kind="date" value=input.comment.fictionalDate />
       <chapter-meta weak kind="date" value=input.comment.createdDate />
       <chapter-meta weak kind="author" value=input.comment.author />
     </div>