From 5469fa53eccd98b627ac6f5b042050d01d712026 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Thu, 30 Jul 2020 13:49:22 -0400
Subject: [PATCH] Make sure each Combat component has its own log

---
 src/components/Combat.vue | 40 +++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index 84d425a..511c909 100644
--- a/src/components/Combat.vue
+++ b/src/components/Combat.vue
@@ -11,7 +11,7 @@
     <div class="statblock-separator" id="statblock-separator-left"></div>
     <div class="statblock-separator" id="statblock-separator-center"></div>
     <div class="statblock-separator" id="statblock-separator-right"></div>
-    <div id="log">
+    <div class="log">
     </div>
     <div class="left-fader">
 
@@ -91,7 +91,7 @@ export default class Combat extends Vue {
 
   @Emit("executedLeft")
   executedLeft (entry: LogEntry) {
-    const log = document.querySelector("#log")
+    const log = this.$el.querySelector(".log")
     if (log !== null) {
       const before = log.querySelector("div.log-entry")
       const holder = document.createElement("div")
@@ -116,7 +116,7 @@ export default class Combat extends Vue {
 
   @Emit("executedRight")
   executedRight (entry: LogEntry) {
-    const log = document.querySelector("#log")
+    const log = this.$el.querySelector(".log")
 
     if (log !== null) {
       const before = log.querySelector("div.log-entry")
@@ -240,7 +240,7 @@ export default class Combat extends Vue {
   overflow: hidden;
 }
 
-#log {
+.log {
   grid-area: main-row-start / main-col-start / main-row-end / main-col-end;
   overflow-y: scroll;
   font-size: 12pt;
@@ -380,7 +380,7 @@ a {
   white-space: nowrap;
 }
 
-#log > div.log-entry {
+.log > div.log-entry {
   color: #888;
   padding-top: 4pt;
   padding-bottom: 4pt;
@@ -403,63 +403,63 @@ div.right-move {
   margin-right: 2%;
 }
 
-#log img {
+.log img {
   width: 75%;
 }
 
-#log > div.left-move:nth-child(7) {
+.log > div.left-move:nth-child(7) {
   color: #898;
 }
 
-#log > div.left-move:nth-child(6) {
+.log > div.left-move:nth-child(6) {
   color: #8a8;
 }
 
-#log > div.left-move:nth-child(5) {
+.log > div.left-move:nth-child(5) {
   color: #8b8;
 }
 
-#log > div.left-move:nth-child(4) {
+.log > div.left-move:nth-child(4) {
   color: #8c8;
 }
 
-#log > div.left-move:nth-child(3) {
+.log > div.left-move:nth-child(3) {
   color: #8d8;
 }
 
-#log > div.left-move:nth-child(2) {
+.log > div.left-move:nth-child(2) {
   color: #8e8;
 }
 
-#log > div.left-move:nth-child(1) {
+.log > div.left-move:nth-child(1) {
   color: #8f8;
 }
 
-#log > div.right-move:nth-child(7) {
+.log > div.right-move:nth-child(7) {
   color: #988;
 }
 
-#log > div.right-move:nth-child(6) {
+.log > div.right-move:nth-child(6) {
   color: #a88;
 }
 
-#log > div.right-move:nth-child(5) {
+.log > div.right-move:nth-child(5) {
   color: #b88;
 }
 
-#log > div.right-move:nth-child(4) {
+.log > div.right-move:nth-child(4) {
   color: #c88;
 }
 
-#log > div.right-move:nth-child(3) {
+.log > div.right-move:nth-child(3) {
   color: #d88;
 }
 
-#log > div.right-move:nth-child(2) {
+.log > div.right-move:nth-child(2) {
   color: #e88;
 }
 
-#log > div.right-move:nth-child(1) {
+.log > div.right-move:nth-child(1) {
   color: #f88;
 }