feast/src/assets/components/ActionButton.vue

<template>
  <button class="action-button" @click="execute">
    {{ action.name }}
  </button>
</template>

<script lang="ts">

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

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

  @Prop()
  user!: Creature

  @Prop()
  target!: Creature

  @Emit("execute")
  execute () {
    this.$emit('executed', this.action.execute(this.user, this.target))
  }
}

</script>

<style scoped>

.action-button {
  width: 100px;
  height: 100px;
}

</style>