Adjust the spacing on the log entries

src/components/Combat.vue

@@ -10,23 +10,23 @@
         {{ combatant.name }}
       </button>
     </div>
-    <Statblock class="player-stats" :subject="left" />
-    <Statblock class="enemy-stats" :subject="right" />
+    <Statblock class="left-stats" :subject="left" />
+    <Statblock class="right-stats" :subject="right" />
     <div id="log">
     </div>
     <div class="left-actions">
       <h2>Your moves</h2>
       <div class="vert-display">
-        <ActionButton @executed="executed" v-for="action in left.validActions(right)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
-        <ActionButton @executed="executed" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
+        <ActionButton @executed="executedLeft" v-for="action in left.validActions(right)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
+        <ActionButton @executed="executedLeft" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
       </div>
       <div>{{actionDescription}}</div>
     </div>
     <div class="right-actions">
       <h2>Enemy moves</h2>
       <div class="vert-display">
-        <ActionButton @executed="executedEnemy" v-for="action in right.validActions(left)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
-        <ActionButton @executed="executedEnemy" v-for="action in right.validActions(right)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
+        <ActionButton @executed="executedRight" v-for="action in right.validActions(left)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
+        <ActionButton @executed="executedRight" v-for="action in right.validActions(right)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
       </div>
     </div>
   </div>
@@ -60,8 +60,8 @@ export default class Combat extends Vue {
     super()
   }
 
-  @Emit("executed")
-  executed (entry: LogEntry) {
+  @Emit("executedLeft")
+  executedLeft (entry: LogEntry) {
     const log = document.querySelector("#log")
 
     if (log !== null) {
@@ -69,14 +69,14 @@ export default class Combat extends Vue {
       entry.render().forEach(element => {
         holder.appendChild(element)
       })
-      holder.classList.add("player-move")
+      holder.classList.add("left-move")
       log.appendChild(holder)
       log.scrollTo({ top: 10000000000, left: 0 })
     }
   }
 
-  @Emit("executedEnemy")
-  executedEnemy (entry: LogEntry) {
+  @Emit("executedRight")
+  executedRight (entry: LogEntry) {
     const log = document.querySelector("#log")
 
     if (log !== null) {
@@ -84,7 +84,7 @@ export default class Combat extends Vue {
       entry.render().forEach(element => {
         holder.appendChild(element)
       })
-      holder.classList.add("enemy-move")
+      holder.classList.add("right-move")
       log.appendChild(holder)
       log.scrollTo({ top: 10000000000, left: 0 })
     }
@@ -103,11 +103,11 @@ export default class Combat extends Vue {
   flex: 10;
 }
 
-.player-stats {
+.left-stats {
   grid-area: 2 / 1 / 3 / 2
 }
 
-.enemy-stats {
+.right-stats {
   grid-area: 2 / 3 / 3 / 4;
 }
 
@@ -174,22 +174,22 @@ a {
 
 #log > div {
   color: #888;
-  padding-top: 8pt;
-  padding-bottom: 8pt;
+  padding-top: 4pt;
+  padding-bottom: 4pt;
 }
 
-div.player-move,
-div.enemy-move {
+div.left-move,
+div.right-move {
   color: #888;
 }
 
-div.player-move {
+div.left-move {
   text-align: start;
   margin-right: 25%;
   margin-left: 5%;
 }
 
-div.enemy-move {
+div.right-move {
   text-align: end;
   margin-left: 25%;
   margin-right: 5%;
@@ -199,72 +199,74 @@ div.enemy-move {
   width: 75%;
 }
 
-#log > div.enemy-move:nth-last-child(7) {
+#log > div.left-move:nth-last-child(7) {
+  padding-top: 8pt;
   color: #988;
 }
 
-#log > div.enemy-move:nth-last-child(6) {
-  padding-top: 8pt;
+#log > div.left-move:nth-last-child(6) {
+  padding-top: 12pt;
   color: #a88;
 }
 
-#log > div.enemy-move:nth-last-child(5) {
+#log > div.left-move:nth-last-child(5) {
   padding-top: 16pt;
   color: #b88;
 }
 
-#log > div.enemy-move:nth-last-child(4) {
-  padding-top: 24pt;
+#log > div.left-move:nth-last-child(4) {
+  padding-top: 20pt;
   color: #c88;
 }
 
-#log > div.enemy-move:nth-last-child(3) {
-  padding-top: 32pt;
+#log > div.left-move:nth-last-child(3) {
+  padding-top: 24pt;
   color: #d88;
 }
 
-#log > div.enemy-move:nth-last-child(2) {
-  padding-top: 40pt;
+#log > div.left-move:nth-last-child(2) {
+  padding-top: 28pt;
   color: #e88;
 }
 
-#log > div.enemy-move:nth-last-child(1) {
-  padding-top: 48pt;
+#log > div.left-move:nth-last-child(1) {
+  padding-top: 32pt;
   color: #f88;
 }
 
-#log > div.player-move:nth-last-child(7) {
-  color: #898;
+#log > div.right-move:nth-last-child(7) {
+  padding-top: 8pt;
+  color: #988;
 }
 
-#log > div.player-move:nth-last-child(6) {
-  padding-top: 8pt;
-  color: #8a8;
+#log > div.right-move:nth-last-child(6) {
+  padding-top: 12pt;
+  color: #a88;
 }
 
-#log > div.player-move:nth-last-child(5) {
+#log > div.right-move:nth-last-child(5) {
   padding-top: 16pt;
-  color: #8b8;
+  color: #b88;
 }
 
-#log > div.player-move:nth-last-child(4) {
-  padding-top: 24pt;
-  color: #8c8;
+#log > div.right-move:nth-last-child(4) {
+  padding-top: 20pt;
+  color: #c88;
 }
 
-#log > div.player-move:nth-last-child(3) {
-  padding-top: 32pt;
-  color: #8d8;
+#log > div.right-move:nth-last-child(3) {
+  padding-top: 24pt;
+  color: #d88;
 }
 
-#log > div.player-move:nth-last-child(2) {
-  padding-top: 40pt;
-  color: #8e8;
+#log > div.right-move:nth-last-child(2) {
+  padding-top: 28pt;
+  color: #e88;
 }
 
-#log > div.player-move:nth-last-child(1) {
-  padding-top: 48pt;
-  color: #8f8;
+#log > div.right-move:nth-last-child(1) {
+  padding-top: 32pt;
+  color: #f88;
 }
 
 </style>