Scroll to the next entity each turn

src/App.vue

@@ -40,7 +40,7 @@ export default class App extends Vue {
     this.$data.encounters = []
 
     this.$data.encounters.push(new Encounter({ name: 'Boss Fight' }, this.makeParty().concat([new Creatures.Withers(), new Creatures.Kenzie()])))
-    this.$data.encounters.push(new Encounter({ name: 'Cafat' }, this.makeParty().concat([new Creatures.Cafat(), new Creatures.Wolf()])))
+    this.$data.encounters.push(new Encounter({ name: 'Cafat' }, this.makeParty().concat([new Creatures.Cafat(), new Creatures.Wolf(), new Creatures.Wolf(), new Creatures.Wolf()])))
     this.$data.encounters.push(new Encounter({ name: 'Dragon' }, this.makeParty().concat([new Creatures.Dragon()])))
     this.$data.encounters.push(new Encounter({ name: 'Large Wah' }, this.makeParty().concat([new Creatures.Shingo()])))
 
@@ -104,6 +104,7 @@ body, html {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
+  overflow-y: hidden;
 }
 
 #app {
@@ -118,6 +119,8 @@ body, html {
   height: 100%;
   display: flex;
   flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: hidden;
 }
 
 .tippy-box {

src/components/Combat.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="combat-layout">
     <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)" />
+      <Statblock @selectPredator="right = combatant.containedIn.owner" @select="doSelectLeft(combatant, $event)" 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 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)" />
+      <Statblock @selectPredator="left = combatant.containedIn.owner" @select="doSelectRight(combatant, $event)" 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 statblock-separator-left"></div>
@@ -151,7 +151,7 @@ export default class Combat extends Vue {
     this.$nextTick(() => {
       const creature: HTMLElement|null = this.$el.querySelector("[data-current-turn]")
       if (creature !== null) {
-        creature.scrollIntoView()
+        this.scrollParentTo(creature)
       }
     })
   }
@@ -183,7 +183,18 @@ export default class Combat extends Vue {
     }
   }
 
-  doSelectLeft (combatant: Creature) {
+  scrollParentTo (element: HTMLElement): void {
+    if (element.parentElement !== null) {
+      const pos = (element.offsetLeft - element.parentElement.offsetLeft)
+      const width = element.getBoundingClientRect().width / 2
+      const offset = element.parentElement.getBoundingClientRect().width / 2
+      console.log(pos, offset)
+
+      element.parentElement.scrollTo({ left: pos + width - offset, behavior: "smooth" })
+    }
+  }
+
+  doSelectLeft (combatant: Creature, element: HTMLElement) {
     if (this.selectable(combatant)) {
       if (combatant.side !== this.$props.encounter.currentMove.side) {
         this.$data.left = combatant
@@ -191,9 +202,11 @@ export default class Combat extends Vue {
         this.$data.right = combatant
       }
     }
+
+    this.scrollParentTo(element)
   }
 
-  doSelectRight (combatant: Creature) {
+  doSelectRight (combatant: Creature, element: HTMLElement) {
     if (this.selectable(combatant)) {
       if (combatant.side !== this.$props.encounter.currentMove.side) {
         this.$data.right = combatant
@@ -201,6 +214,8 @@ export default class Combat extends Vue {
         this.$data.left = combatant
       }
     }
+
+    this.scrollParentTo(element)
   }
 
   created () {
@@ -229,6 +244,7 @@ export default class Combat extends Vue {
   min-width: 2px;
   min-height: 100%;
 }
+
 .combat-layout {
   position: relative;
   display: grid;
@@ -237,7 +253,8 @@ export default class Combat extends Vue {
   width: 100%;
   height: 100%;
   flex: 10;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
 }
 
 .log {

src/components/Statblock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="$emit('select')" class="statblock">
+  <div @click="$emit('select', $el)" class="statblock">
     <div class="statblock-shader statblock-shader-hover"></div>
     <div class="statblock-shader statblock-shader-selected marching-ants"></div>
     <div class="statblock-shader statblock-shader-selected-ally marching-ants"></div>