@@ -1,7 +1,7 @@
<template>
<div class="combat-layout">
<div @wheel="horizWheelLeft" class="stat-column" id="left-stats">
<Statblock @selectAlly="right = combatant" @select="left = combatant" class="left-stats" :data-active="combatant === left" :data-active-ally="combatant === right" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes && !c.digested)" v-bind:key="'left-stat-' + index" :subject="combatant" />
<Statblock @selectAlly="right = combatant" @select="left = combatant" class="left-stats" :data-active="combatant === left" :data-active-ally="combatant === right" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes && !c.digested).slice().reverse() " v-bind:key="'left-stat-' + index" :subject="combatant" />
</div>
<div @wheel="horizWheelRight" class="stat-column" id="right-stats">
<Statblock @selectAlly="left = combatant" @select="right = combatant" class="right-stats" :data-active="combatant === right" :data-active-ally="combatant === left" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters && !c.digested)" v-bind:key="'right-stat-' + index" :subject="combatant" />
@@ -85,8 +85,12 @@ export default class Combat extends Vue {
actionDescription = ''
constructor () {
super()
mounted () {
const left = this.$el.querySelector("#left-stats")
if (left !== null) {
left.scrollTo(left.getBoundingClientRect().width * 2, 0)
}
}
@Emit("executedLeft")
@@ -164,7 +168,7 @@ export default class Combat extends Vue {
}
#left-stats {
flex-direction: row-reverse ;
flex-direction: row;
}
#right-stats {
@@ -180,6 +184,7 @@ export default class Combat extends Vue {
}
.stat-column {
overflow-x: scroll;
overflow-y: auto;
}