Add horizontal scrolling (a bit buggy)

Each wheele vent restarts the smooth-scrolling. It will need
to keep track of where it's scrolling to.

src/components/Combat.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="combat-layout">
-    <div class="stat-column" id="left-stats">
+    <div @wheel="horizWheelLeft" class="stat-column" id="left-stats">
       <Statblock v-on:click.native="left = combatant" class="left-stats" :data-active="combatant === left" v-for="combatant in combatants.filter(c => c.side == Side.Heroes && !c.digested)" v-bind:key="combatant.name" :subject="combatant" />
     </div>
-    <div class="stat-column" id="right-stats">
+    <div @wheel="horizWheelRight" class="stat-column" id="right-stats">
       <Statblock v-on:click.native="right = combatant" class="right-stats" :data-active="combatant === right" v-for="combatant in combatants.filter(c => c.side == Side.Monsters && !c.digested)" v-bind:key="combatant.name" :subject="combatant" />
     </div>
     <div id="log">
@@ -44,7 +44,25 @@ import { Side } from '@/game/combat'
 
 @Component(
   {
-    components: { Statblock, ActionButton }
+    components: { Statblock, ActionButton },
+    methods: {
+      horizWheelLeft (event: MouseWheelEvent) {
+        const target = this.$el.querySelector("#left-stats")
+
+        console.log(target)
+        if (target !== null) {
+          target.scrollBy({ top: 0, left: event.deltaY, behavior: 'smooth' })
+        }
+      },
+      horizWheelRight (event: MouseWheelEvent) {
+        const target = this.$el.querySelector("#right-stats")
+
+        console.log(target)
+        if (target !== null) {
+          target.scrollBy({ top: 0, left: -event.deltaY, behavior: 'smooth' })
+        }
+      }
+    }
   }
 )
 export default class Combat extends Vue {