feast/src/components/Combat.vue

<template>
  <div class="combat-layout">
    <div class="left-selector">
      <button class="combatant-picker" @click="left = combatant" v-for="(combatant, index) in combatants.filter(c => c !== right && c !== left)" :key="'left' + index">
        {{ combatant.name }}
      </button>
    </div>
    <div class="right-selector">
      <button class="combatant-picker" @click="right = combatant" v-for="(combatant, index) in combatants.filter(c => c !== left && c !== right)" :key="'right' + index">
        {{ combatant.name }}
      </button>
    </div>
    <Statblock class="left-stats" :subject="left" />
    <Statblock class="right-stats" :subject="right" />
    <div id="log">
    </div>
    <div class="left-actions">
      <div class="vert-display">
        <h2>Moves</h2>
        <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validActions(right)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
        <h2>Self-moves</h2>
        <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
      </div>
      <div>{{actionDescription}}</div>
    </div>
    <div class="right-actions">
      <div class="vert-display">
        <h2>Moves</h2>
        <ActionButton @described="described" @executed="executedRight" v-for="action in right.validActions(left)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
        <h2>Self-moves</h2>
        <ActionButton @described="described" @executed="executedRight" v-for="action in right.validActions(right)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
      </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'

@Component(
  {
    components: { Statblock, ActionButton }
  }
)
export default class Combat extends Vue {
  @Prop({ type: Creature, required: true })
  left!: Creature

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

  @Prop()
  combatants!: Array<Creature>

  actionDescription = ''

  constructor () {
    super()
  }

  @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: 10000000000, 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: 10000000000, 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: 10% [main-row-start] 10%  1fr 1fr [main-row-end] 20%;
  grid-template-columns: minmax(80pt, 20%) [main-col-start] 1fr [main-col-end] minmax(80pt, 20%);
  width: 100%;
  height: 100%;
  flex: 10;
}

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

.right-stats {
  grid-area: 2 / 3 / 3 / 4;
}

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

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

.right-selector {
  grid-area: 1 / 3 / 2 / 4;
}

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

.right-actions {
  grid-area: 4 / 3 / 6 / 4;
}

#action-desc {
  grid-area: main-row-end / main-col-start / 6 / main-col-end
}

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: wrap;
  justify-content: start;
  height: 100%;
}
</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: 5%;
}

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

#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>