feast/src/components/ActionButton.vue

<template>
  <button @focus="describe" @mouseover="describe" @mouseleave="undescribe" class="action-button" @click="execute">
    <div class="action-title">{{ action.name }}</div>
    <div class="action-desc">{{ action.desc }}</div>
  </button>
</template>

<script lang="ts">

import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Action, GroupAction } from '@/game/combat'
import { Creature } from '@/game/creature'
import { nilLog } from '@/game/interface'

@Component({})
export default class ActionButton extends Vue {
  @Prop()
  action!: Action

  @Prop()
  user!: Creature

  @Prop()
  target!: Creature

  @Prop()
  combatants!: Array<Creature>

  @Emit("execute")
  execute () {
    if ((this.action as GroupAction).executeGroup !== undefined) {
      const action = (this.action as GroupAction)
      this.$emit('executed', (this.action as GroupAction).executeGroup(this.user, action.allowedGroup(this.user, this.combatants)))
    } else {
      this.$emit('executed', this.user.executeAction(this.action, this.target))
    }
    this.undescribe()
  }

  @Emit("describe")
  describe () {
    if ((this.action as GroupAction).describeGroup !== undefined) {
      const action = (this.action as GroupAction)
      this.$emit('described', action.describeGroup(this.user, action.allowedGroup(this.user, this.combatants)))
    } else {
      this.$emit('described', this.action.describe(this.user, this.target))
    }
  }

  @Emit("undescribe")
  undescribe () {
    this.$emit('described', nilLog)
  }
}

</script>

<style scoped>

.action-button {
  width: 100%;
  max-width: 300px;
  padding: 4pt;
  flex: 0 1;
  background: #333;
  border-color: #666;
  border-style: outset;
  user-select: none;
  outline: none;
}

.action-button:focus {
  background: #444;
}

.action-button:hover {
  background: #555;
}

.action-title {
  font-size: 125%;
  color: #eee;
  pointer-events: none;
}

.action-desc {
  color: #ccc;
  pointer-events: none;
}

</style>