Make the combat log look a lot nicer

src/components/Combat.vue

@@ -15,8 +15,8 @@
     <div class="enemy-actions">
       <h2>Enemy moves</h2>
       <div class="vert-display">
-        <ActionButton @executed="executed" v-for="action in enemy.validActions(player)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
-        <ActionButton @executed="executed" v-for="action in enemy.validActions(enemy)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
+        <ActionButton @executed="executedEnemy" v-for="action in enemy.validActions(player)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
+        <ActionButton @executed="executedEnemy" v-for="action in enemy.validActions(enemy)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
       </div>
     </div>
   </div>
@@ -52,10 +52,27 @@ export default class Combat extends Vue {
     const log = document.querySelector("#log")
 
     if (log !== null) {
+      const holder = document.createElement("div")
       entry.render().forEach(element => {
-        log.appendChild(element)
+        holder.appendChild(element)
       })
-      log.appendChild(document.createElement("br"))
+      holder.classList.add("player-move")
+      log.appendChild(holder)
+      log.scrollTo({ top: 10000000000, left: 0 })
+    }
+  }
+
+  @Emit("executedEnemy")
+  executedEnemy (entry: LogEntry) {
+    const log = document.querySelector("#log")
+
+    if (log !== null) {
+      const holder = document.createElement("div")
+      entry.render().forEach(element => {
+        holder.appendChild(element)
+      })
+      holder.classList.add("enemy-move")
+      log.appendChild(holder)
       log.scrollTo({ top: 10000000000, left: 0 })
     }
   }
@@ -82,10 +99,11 @@ export default class Combat extends Vue {
 
 #log {
   grid-area: main-row-start / main-col-start / main-row-end / main-col-end;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   font-size: 16pt;
+  width: 100%;
+  max-height: 100%;
+  align-self: end;
 }
 
 .player-actions {
@@ -123,8 +141,93 @@ a {
 
 <style>
 
-#log p:nth-last-child(1) {
+#log > div {
+  color: #888;
+  padding-top: 8pt;
+  padding-bottom: 8pt;
+}
+
+div.player-move,
+div.enemy-move {
+  color: #888;
+}
+
+div.player-move {
+  text-align: start;
+  margin-left: 48pt;
+}
+
+div.enemy-move {
+  text-align: end;
+  margin-right: 48pt;
+}
+
+#log > div.enemy-move:nth-last-child(7) {
+  color: #988;
+}
+
+#log > div.enemy-move:nth-last-child(6) {
+  padding-top: 8pt;
+  color: #a88;
+}
+
+#log > div.enemy-move:nth-last-child(5) {
   padding-top: 16pt;
+  color: #b88;
+}
+
+#log > div.enemy-move:nth-last-child(4) {
+  padding-top: 24pt;
+  color: #c88;
+}
+
+#log > div.enemy-move:nth-last-child(3) {
+  padding-top: 32pt;
+  color: #d88;
+}
+
+#log > div.enemy-move:nth-last-child(2) {
+  padding-top: 40pt;
+  color: #e88;
+}
+
+#log > div.enemy-move:nth-last-child(1) {
+  padding-top: 48pt;
+  color: #f88;
+}
+
+#log > div.player-move:nth-last-child(7) {
+  color: #898;
+}
+
+#log > div.player-move:nth-last-child(6) {
+  padding-top: 8pt;
+  color: #8a8;
+}
+
+#log > div.player-move:nth-last-child(5) {
+  padding-top: 16pt;
+  color: #8b8;
+}
+
+#log > div.player-move:nth-last-child(4) {
+  padding-top: 24pt;
+  color: #8c8;
+}
+
+#log > div.player-move:nth-last-child(3) {
+  padding-top: 32pt;
+  color: #8d8;
+}
+
+#log > div.player-move:nth-last-child(2) {
+  padding-top: 40pt;
+  color: #8e8;
+}
+
+#log > div.player-move:nth-last-child(1) {
+  padding-top: 48pt;
+  color: #8f8;
 }
 
 </style>