Select and scroll to the current predator of a creature

src/App.vue

@@ -40,8 +40,9 @@ 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(), new Creatures.Wolf(), new Creatures.Wolf()])))
+    this.$data.encounters.push(new Encounter({ name: 'Cafat' }, this.makeParty().concat([new Creatures.Cafat()])))
     this.$data.encounters.push(new Encounter({ name: 'Dragon' }, this.makeParty().concat([new Creatures.Dragon()])))
+    this.$data.encounters.push(new Encounter({ name: 'Wolves' }, this.makeParty().concat([new Creatures.Wolf(), new Creatures.Wolf(), new Creatures.Wolf(), new Creatures.Wolf()])))
     this.$data.encounters.push(new Encounter({ name: 'Large Wah' }, this.makeParty().concat([new Creatures.Shingo()])))
 
     this.$data.encounter = this.$data.encounters[0]
@@ -104,7 +105,6 @@ body, html {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
-  overflow-y: hidden;
 }
 
 #app {
@@ -119,8 +119,6 @@ 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, $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)" />
+      <Statblock @selected="scrollParentTo($event)" @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, $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)" />
+      <Statblock @selected="scrollParentTo($event)" @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>
@@ -143,16 +143,27 @@ export default class Combat extends Vue {
   pickNext () {
     if (this.encounter.currentMove.side === Side.Heroes) {
       this.$data.left = this.encounter.currentMove
+
+      if (this.encounter.currentMove.containedIn !== null) {
+        this.$data.right = this.encounter.currentMove.containedIn.owner
+      }
     } else if (this.encounter.currentMove.side === Side.Monsters) {
       this.$data.right = this.encounter.currentMove
-    }
 
+      if (this.encounter.currentMove.containedIn !== null) {
+        this.$data.left = this.encounter.currentMove.containedIn.owner
+      }
+    }
     // scroll to the newly selected creature
     this.$nextTick(() => {
       const creature: HTMLElement|null = this.$el.querySelector("[data-current-turn]")
       if (creature !== null) {
         this.scrollParentTo(creature)
       }
+      const target: HTMLElement|null = this.$el.querySelector("[data-active]")
+      if (creature !== null) {
+        this.scrollParentTo(target)
+      }
     })
   }
 

src/components/Statblock.vue

@@ -57,7 +57,6 @@
           </div>
         </div>
       </div>
-      <button @click.stop="$emit('selectPredator')" v-if="subject.containedIn !== null">Select predator</button>
       <button v-if="subject.perspective === POV.Third" @click.stop="subject.perspective = POV.Second">Second-person</button>
       <button v-if="subject.perspective === POV.First" @click.stop="subject.perspective = POV.Third">Third-person</button>
       <button v-if="subject.perspective === POV.Second" @click.stop="subject.perspective = POV.First">First-person</button>