Fix some other lingering problems with id instead of class

src/components/Combat.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="combat-layout">
-    <div @wheel="horizWheelLeft" class="statblock-row" id="left-stats">
+    <div @wheel="horizWheelLeft" class="statblock-row left-stats">
       <Statblock @selectPredator="right = combatant.containedIn.owner" @select="doSelectLeft(combatant)" class="left-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left && combatant !== encounter.currentMove" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
       <div class="spacer"></div>
     </div>
-    <div @wheel="horizWheelRight" class="statblock-row" id="right-stats">
+    <div @wheel="horizWheelRight" class="statblock-row right-stats">
       <Statblock @selectPredator="left = combatant.containedIn.owner" @select="doSelectRight(combatant)" class="right-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right && combatant !== encounter.currentMove" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
       <div class="spacer"></div>
     </div>
-    <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 class="statblock-separator statblock-separator-left"></div>
+    <div class="statblock-separator statblock-separator-center"></div>
+    <div class="statblock-separator statblock-separator-right"></div>
     <div class="log">
     </div>
     <div class="left-fader">
@@ -40,7 +40,7 @@
         <ActionButton @described="described" @executed="executedRight" v-for="(action, index) in right.validActions(right)" :key="'right-' + action.name + '-' + index" :action="action" :user="right" :target="right" :combatants="combatants" />
       </div>
     </div>
-    <div id="action-desc">
+    <div class="action-description">
     </div>
   </div>
 </template>
@@ -77,7 +77,7 @@ export default class Combat extends Vue {
 
   @Emit("described")
   described (entry: LogEntry) {
-    const actionDesc = document.querySelector("#action-desc")
+    const actionDesc = this.$el.querySelector(".action-description")
 
     if (actionDesc !== null) {
       const holder = document.createElement("div")
@@ -168,7 +168,7 @@ export default class Combat extends Vue {
   }
 
   horizWheelLeft (event: MouseWheelEvent) {
-    const target = this.$el.querySelector("#left-stats") as HTMLElement
+    const target = this.$el.querySelector(".left-stats") as HTMLElement
 
     if (target !== null) {
       this.doScroll(target, event.deltaY > 0 ? 200 : -200, 0)
@@ -176,7 +176,7 @@ export default class Combat extends Vue {
   }
 
   horizWheelRight (event: MouseWheelEvent) {
-    const target = this.$el.querySelector("#right-stats") as HTMLElement
+    const target = this.$el.querySelector(".right-stats") as HTMLElement
 
     if (target !== null) {
       this.doScroll(target, event.deltaY > 0 ? 200 : -200, 0)
@@ -210,7 +210,7 @@ export default class Combat extends Vue {
   }
 
   mounted () {
-    const leftStats = this.$el.querySelector("#left-stats")
+    const leftStats = this.$el.querySelector(".left-stats")
 
     if (leftStats !== null) {
       leftStats.scrollTo(leftStats.getBoundingClientRect().width * 2, 0)
@@ -249,36 +249,36 @@ export default class Combat extends Vue {
   align-self: flex-start;
 }
 
-#left-stats,
-#right-stats {
+.left-stats,
+.right-stats {
   display: flex;
 }
 
-#left-stats {
+.left-stats {
   flex-direction: row;
 }
 
-#right-stats {
+.right-stats {
   flex-direction: row;
 }
 
-#left-stats {
+.left-stats {
   grid-area: 1 / 1 / 2 / 3
 }
 
-#right-stats {
+.right-stats {
   grid-area: 1 / 3 / 2 / 5;
 }
 
-#statblock-separator-left {
+.statblock-separator-left {
   grid-area: 1 / 1 / 2 / 1;
 }
 
-#statblock-separator-center {
+.statblock-separator-center {
   grid-area: 1 / 3 / 2 / 3;
 }
 
-#statblock-separator-right {
+.statblock-separator-right {
   grid-area: 1 / 5 / 2 / 5;
 }
 
@@ -329,7 +329,7 @@ export default class Combat extends Vue {
   width: 100%;
 }
 
-#action-desc {
+.action-description {
   grid-area: 2 / main-col-start / main-row-start / main-col-end;
   padding: 8pt;
   text-align: center;