Adjust explore layout; make hlines animate in explore and combat

src/components/Combat.vue

@@ -94,9 +94,9 @@ export default class Combat extends Vue {
 
   @Emit("executedLeft")
   executedLeft (entry: LogEntry) {
-    this.writeLog(entry, "left-move")
+    this.writeLog(entry, "left")
 
-    this.writeLog(this.encounter.nextMove(), "center-move")
+    this.writeLog(this.encounter.nextMove(), "center")
     this.pickNext()
   }
 
@@ -104,13 +104,13 @@ export default class Combat extends Vue {
 
   @Emit("executedRight")
   executedRight (entry: LogEntry) {
-    this.writeLog(entry, "right-move")
+    this.writeLog(entry, "right")
 
-    this.writeLog(this.encounter.nextMove(), "center-move")
+    this.writeLog(this.encounter.nextMove(), "center")
     this.pickNext()
   }
 
-  writeLog (entry: LogEntry, cls = "") {
+  writeLog (entry: LogEntry, side = "") {
     const log = this.$el.querySelector(".log")
     if (log !== null) {
       const elements = entry.render()
@@ -123,12 +123,15 @@ export default class Combat extends Vue {
           holder.appendChild(element)
         })
 
-        if (cls !== "") {
-          holder.classList.add(cls)
+        if (side !== "") {
+          holder.classList.add(side + "-move")
         }
 
         const hline = document.createElement("div")
         hline.classList.add("log-separator")
+        if (side !== "") {
+          hline.classList.add("log-separator-" + side)
+        }
         log.insertBefore(hline, before)
         log.insertBefore(holder, hline)
 
@@ -145,7 +148,7 @@ export default class Combat extends Vue {
         new LogLine(
           `game o-vore lmaoooooooo`
         ),
-        "center-move"
+        "center"
       )
     } else {
       if (this.encounter.currentMove.side === Side.Heroes) {
@@ -522,12 +525,33 @@ div.right-move {
 }
 
 .log-separator {
-  width: 100%;
+  animation: log-keyframes 0.5s;
   height: 4px;
-  margin: 4pt 0pt 4pt;
   background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%);
 }
 
+.log-separator-left {
+  margin: 4pt auto 4pt 0;
+}
+
+.log-separator-center {
+  margin: 4pt auto 4pt;
+}
+
+.log-separator-right {
+  margin: 4pt 0 4pt auto;
+}
+
+@keyframes log-keyframes {
+  from {
+    width: 0%;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
 .left-move {
   animation: left-fly-in 1s;
 }

src/components/Explore.vue

@@ -66,21 +66,24 @@ export default class Explore extends Vue {
   writeLog (entry: LogEntry) {
     const log = this.$el.querySelector(".explore-log")
     if (log !== null) {
-      const before = log.querySelector("div.explore-log-entry")
-      const holder = document.createElement("div")
-      holder.classList.add("explore-log-entry")
-
-      entry.render().forEach(element => {
-        holder.appendChild(element)
-      })
-
-      holder.classList.add("explore-entry")
-      const hline = document.createElement("div")
-      hline.classList.add("explore-log-separator")
-      log.insertBefore(hline, before)
-      log.insertBefore(holder, hline)
-
-      log.scrollTo({ top: 0, left: 0 })
+      const rendered = entry.render()
+      if (rendered.length > 0) {
+        const before = log.querySelector("div.explore-log-entry")
+        const holder = document.createElement("div")
+        holder.classList.add("explore-log-entry")
+
+        entry.render().forEach(element => {
+          holder.appendChild(element)
+        })
+
+        holder.classList.add("explore-entry")
+        const hline = document.createElement("div")
+        hline.classList.add("explore-log-separator")
+        log.insertBefore(hline, before)
+        log.insertBefore(holder, hline)
+
+        log.scrollTo({ top: 0, left: 0 })
+      }
     }
   }
 }
@@ -93,7 +96,7 @@ export default class Explore extends Vue {
   flex: 10;
   position: relative;
   display: grid;
-  grid-template-areas: "statblock containers containers"
+  grid-template-areas: "containers containers statblock"
                        "log log worldinfo"
                        "log log info     "
                        "log log choices  "
@@ -111,12 +114,14 @@ export default class Explore extends Vue {
   flex-direction: row;
   flex-wrap: nowrap;
   overflow-x: scroll;
+  justify-content: flex-end;
 }
 
 .explore-log {
   grid-area: log;
   background: #222;
   overflow-y: scroll;
+  padding: 8pt;
 }
 
 .explore-worldinfo {
@@ -197,9 +202,19 @@ export default class Explore extends Vue {
 }
 
 .explore-log-separator {
-  width: 100%;
+  animation: explore-log-keyframes 0.5s;
   height: 4px;
-  margin: 16pt 0pt 16pt;
+  margin: 16pt auto 16pt;
   background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%);
 }
+
+@keyframes explore-log-keyframes {
+  from {
+    width: 0%;
+  }
+
+  to {
+    width: 100%;
+  }
+}
 </style>

src/game/maps/town.ts

@@ -3,7 +3,7 @@ import { ProperNoun, ImproperNoun, MalePronouns, FemalePronouns, TheyPronouns }
 import { Encounter } from '../combat'
 import * as Creatures from '../creatures'
 import * as Items from '../items'
-import { LogLine, nilLog } from '../interface'
+import { LogLine, nilLog, LogLines } from '../interface'
 import { Creature } from '../creature'
 import { DevourAction } from '../combat/actions'
 import { SurrenderEffect } from '../combat/effects'
@@ -134,7 +134,10 @@ export const Town = (): Place => {
       "Nap",
       "Zzzzzz",
       (world, executor) => {
-        return world.advance(moment.duration(1, "hour"))
+        return new LogLines(
+          `You lie down for a nice nap...`,
+          world.advance(moment.duration(1, "hour"))
+        )
       }
     )
   )