feast/src/components/Combat.vue

<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).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" />
    </div>
    <div id="log">
    </div>
    <div class="left-fader">

    </div>
    <div class="left-actions">
      <div class="vert-display">
        <i class="action-label fas fa-users" v-if="left.validGroupActions(combatants).length > 0"></i>
        <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validGroupActions(combatants)" :key="'right' + action.name" :action="action" :user="left" :target="right" :combatants="combatants" />
        <i class="action-label fas fa-user-friends" v-if="left.validActions(right).length > 0"></i>
        <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validActions(right)" :key="'left' + action.name" :action="action" :user="left" :target="right" :combatants="combatants" />
        <i class="action-label fas fa-user" v-if="left.validActions(left).length > 0"></i>
        <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="left" :combatants="combatants" />
      </div>
      <div>{{actionDescription}}</div>
    </div>
    <div class="right-fader">

    </div>
    <div class="right-actions">
      <div class="vert-display">
        <i class="action-label fas fa-users" v-if="right.validGroupActions(combatants).length > 0"></i>
        <ActionButton @described="described" @executed="executedRight" v-for="action in right.validGroupActions(combatants)" :key="'right' + action.name" :action="action" :user="right" :target="left" :combatants="combatants" />
        <i class="action-label fas fa-user-friends" v-if="right.validActions(left).length > 0"></i>
        <ActionButton @described="described" @executed="executedRight" v-for="action in right.validActions(left)" :key="'right' + action.name" :action="action" :user="right" :target="left" :combatants="combatants" />
        <i class="action-label fas fa-user" v-if="right.validActions(right).length > 0"></i>
        <ActionButton @described="described" @executed="executedRight" v-for="action in right.validActions(right)" :key="'right' + action.name" :action="action" :user="right" :target="right" :combatants="combatants" />
      </div>
    </div>
    <div id="action-desc">
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Creature, POV } from '@/game/entity'
import { LogEntry } from '@/game/interface'
import Statblock from './Statblock.vue'
import ActionButton from './ActionButton.vue'
import { Side } from '@/game/combat'

@Component(
  {
    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 {
  @Prop({ type: Creature, required: true })
  left!: Creature

  @Prop({ type: Creature, required: true })
  right!: Creature

  @Prop()
  combatants!: Array<Creature>

  Side = Side

  actionDescription = ''

  mounted () {
    const left = this.$el.querySelector("#left-stats")

    if (left !== null) {
      left.scrollTo(left.getBoundingClientRect().width * 2, 0)
    }
  }

  @Emit("executedLeft")
  executedLeft (entry: LogEntry) {
    const log = document.querySelector("#log")

    if (log !== null) {
      const holder = document.createElement("div")
      entry.render().forEach(element => {
        holder.appendChild(element)
      })
      holder.classList.add("left-move")
      log.appendChild(holder)

      log.scrollTo({ top: log.scrollHeight, left: 0 })
    }
  }

  @Emit("executedRight")
  executedRight (entry: LogEntry) {
    const log = document.querySelector("#log")

    if (log !== null) {
      const holder = document.createElement("div")
      entry.render().forEach(element => {
        holder.appendChild(element)
      })
      holder.classList.add("right-move")
      log.appendChild(holder)

      log.scrollTo({ top: log.scrollHeight, left: 0 })
    }
  }

  @Emit("described")
  described (entry: LogEntry) {
    const actionDesc = document.querySelector("#action-desc")

    if (actionDesc !== null) {
      const holder = document.createElement("div")
      entry.render().forEach(element => {
        holder.appendChild(element)
      })
      actionDesc.innerHTML = ''
      actionDesc.appendChild(holder)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.combat-layout {
  display: grid;
  grid-template-rows: fit-content(40%) 10% [main-row-start] 1fr 20% [main-row-end] ;
  grid-template-columns: 20% [main-col-start] 1fr 1fr [main-col-end] 20%;
  width: 100%;
  height: 100%;
  flex: 10;
  overflow: hidden;
}

#log {
  grid-area: main-row-start / main-col-start / main-row-end / main-col-end;
  overflow-y: scroll;
  font-size: 12pt;
  width: 100%;
  max-height: 100%;
  align-self: flex-start;
}

#left-stats,
#right-stats {
  display: flex;
}

#left-stats {
  flex-direction: row;
}

#right-stats {
  flex-direction: row;
}

#left-stats {
  grid-area: 1 / 1 / 2 / 3
}

#right-stats {
  grid-area: 1 / 3 / 2 / 5;
}

.stat-column {
  overflow-x: scroll;
  overflow-y: auto;
}

.left-fader {
  grid-area: 2 / 1 / 4 / 2;
}

.right-fader {
  grid-area: 2 / 4 / 4 / 5;
}

.left-fader,
.right-fader {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, #111, #00000000 10%, #00000000 90%, #111 100%);
  height: 100%;
  width: 100%;
}

.left-actions {
  grid-area: 2 / 1 / 4 / 2;
}

.right-actions {
  grid-area: 2 / 4 / 4 / 5;
}

.left-actions,
.right-actions {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#action-desc {
  grid-area: 2 / main-col-start / main-row-start / main-col-end;
  padding: 8pt;
  text-align: center;
  font-size: 16px;
}

h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.horiz-display {
  display: flex;
  justify-content: center;
}
.vert-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: start;
  height: 100%;
  overflow-y: auto;
  padding: 64px 0 64px;
}
.statblock:hover {
  background: #444;
}
.statblock:hover[data-active] {
  background: #666;
}
.statblock:hover[data-active-ally] {
  background: #966;
}
.action-label {
  font-size: 200%;
}
</style>

<style>

.log-damage {
  font-weight: bold;
}

.damage-instance {
  white-space: nowrap;
}

#log > div {
  color: #888;
  padding-top: 4pt;
  padding-bottom: 4pt;
}

div.left-move,
div.right-move {
  color: #888;
}

div.left-move {
  text-align: start;
  margin-right: 25%;
  margin-left: 2%;
}

div.right-move {
  text-align: end;
  margin-left: 25%;
  margin-right: 2%;
}

#log img {
  width: 75%;
}

#log > div.left-move:nth-last-child(7) {
  padding-top: 8pt;
  color: #988;
}

#log > div.left-move:nth-last-child(6) {
  padding-top: 12pt;
  color: #a88;
}

#log > div.left-move:nth-last-child(5) {
  padding-top: 16pt;
  color: #b88;
}

#log > div.left-move:nth-last-child(4) {
  padding-top: 20pt;
  color: #c88;
}

#log > div.left-move:nth-last-child(3) {
  padding-top: 24pt;
  color: #d88;
}

#log > div.left-move:nth-last-child(2) {
  padding-top: 28pt;
  color: #e88;
}

#log > div.left-move:nth-last-child(1) {
  padding-top: 32pt;
  color: #f88;
}

#log > div.right-move:nth-last-child(7) {
  padding-top: 8pt;
  color: #988;
}

#log > div.right-move:nth-last-child(6) {
  padding-top: 12pt;
  color: #a88;
}

#log > div.right-move:nth-last-child(5) {
  padding-top: 16pt;
  color: #b88;
}

#log > div.right-move:nth-last-child(4) {
  padding-top: 20pt;
  color: #c88;
}

#log > div.right-move:nth-last-child(3) {
  padding-top: 24pt;
  color: #d88;
}

#log > div.right-move:nth-last-child(2) {
  padding-top: 28pt;
  color: #e88;
}

#log > div.right-move:nth-last-child(1) {
  padding-top: 32pt;
  color: #f88;
}

.left-selector,
.right-selector {
  display: flex;
  flex-wrap: wrap;
}

.combatant-picker {
  flex: 1 1;
}
</style>