Switch to inserting events at the top of the log

src/components/Combat.vue

@@ -92,16 +92,22 @@ export default class Combat extends Vue {
   @Emit("executedLeft")
   executedLeft (entry: LogEntry) {
     const log = document.querySelector("#log")
-
     if (log !== null) {
+      const before = log.querySelector("div.log-entry")
       const holder = document.createElement("div")
+      holder.classList.add("log-entry")
+
       entry.render().forEach(element => {
         holder.appendChild(element)
       })
+
       holder.classList.add("left-move")
-      log.appendChild(holder)
+      const hline = document.createElement("div")
+      hline.classList.add("log-separator")
+      log.insertBefore(hline, before)
+      log.insertBefore(holder, hline)
 
-      log.scrollTo({ top: log.scrollHeight, left: 0 })
+      log.scrollTo({ top: 0, left: 0 })
     }
 
     this.encounter.nextMove()
@@ -113,14 +119,21 @@ export default class Combat extends Vue {
     const log = document.querySelector("#log")
 
     if (log !== null) {
+      const before = log.querySelector("div.log-entry")
       const holder = document.createElement("div")
+      holder.classList.add("log-entry")
+
       entry.render().forEach(element => {
         holder.appendChild(element)
       })
+
       holder.classList.add("right-move")
-      log.appendChild(holder)
+      const hline = document.createElement("div")
+      hline.classList.add("log-separator")
+      log.insertBefore(hline, before)
+      log.insertBefore(holder, hline)
 
-      log.scrollTo({ top: log.scrollHeight, left: 0 })
+      log.scrollTo({ top: 0, left: 0 })
     }
 
     this.encounter.nextMove()
@@ -359,7 +372,7 @@ a {
   white-space: nowrap;
 }
 
-#log > div {
+#log > div.log-entry {
   color: #888;
   padding-top: 4pt;
   padding-bottom: 4pt;
@@ -386,73 +399,59 @@ div.right-move {
   width: 75%;
 }
 
-#log > div.left-move:nth-last-child(7) {
-  padding-top: 8pt;
-  color: #988;
+#log > div.left-move:nth-child(7) {
+  color: #898;
 }
 
-#log > div.left-move:nth-last-child(6) {
-  padding-top: 12pt;
-  color: #a88;
+#log > div.left-move:nth-child(6) {
+  color: #8a8;
 }
 
-#log > div.left-move:nth-last-child(5) {
-  padding-top: 16pt;
-  color: #b88;
+#log > div.left-move:nth-child(5) {
+  color: #8b8;
 }
 
-#log > div.left-move:nth-last-child(4) {
-  padding-top: 20pt;
-  color: #c88;
+#log > div.left-move:nth-child(4) {
+  color: #8c8;
 }
 
-#log > div.left-move:nth-last-child(3) {
-  padding-top: 24pt;
-  color: #d88;
+#log > div.left-move:nth-child(3) {
+  color: #8d8;
 }
 
-#log > div.left-move:nth-last-child(2) {
-  padding-top: 28pt;
-  color: #e88;
+#log > div.left-move:nth-child(2) {
+  color: #8e8;
 }
 
-#log > div.left-move:nth-last-child(1) {
-  padding-top: 32pt;
-  color: #f88;
+#log > div.left-move:nth-child(1) {
+  color: #8f8;
 }
 
-#log > div.right-move:nth-last-child(7) {
-  padding-top: 8pt;
+#log > div.right-move:nth-child(7) {
   color: #988;
 }
 
-#log > div.right-move:nth-last-child(6) {
-  padding-top: 12pt;
+#log > div.right-move:nth-child(6) {
   color: #a88;
 }
 
-#log > div.right-move:nth-last-child(5) {
-  padding-top: 16pt;
+#log > div.right-move:nth-child(5) {
   color: #b88;
 }
 
-#log > div.right-move:nth-last-child(4) {
-  padding-top: 20pt;
+#log > div.right-move:nth-child(4) {
   color: #c88;
 }
 
-#log > div.right-move:nth-last-child(3) {
-  padding-top: 24pt;
+#log > div.right-move:nth-child(3) {
   color: #d88;
 }
 
-#log > div.right-move:nth-last-child(2) {
-  padding-top: 28pt;
+#log > div.right-move:nth-child(2) {
   color: #e88;
 }
 
-#log > div.right-move:nth-last-child(1) {
-  padding-top: 32pt;
+#log > div.right-move:nth-child(1) {
   color: #f88;
 }
 
@@ -465,4 +464,11 @@ div.right-move {
 .combatant-picker {
   flex: 1 1;
 }
+
+.log-separator {
+  width: 100%;
+  height: 4px;
+  margin: 4pt 0pt 4pt;
+  background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%);
+}
 </style>

src/game/combat/actions.ts

@@ -13,7 +13,7 @@ export class PassAction extends Action {
   }
 
   execute (user: Creature, target: Creature): LogEntry {
-    return nilLog
+    return new LogLine(`${user.name.capital} ${user.name.conjugate(new Verb('pass', 'passes'))}`)
   }
 
   describe (user: Creature, target: Creature): LogEntry {