From fb6637a0a1f6b2de13995883d8235b5ca8d3e345 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Thu, 16 Jul 2020 15:54:40 -0400
Subject: [PATCH] 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 | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index 4ba1a04..14af977 100644
--- a/src/components/Combat.vue
+++ b/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 {