feast/src/components/ChoiceButton.vue

<template>
  <button :class="{ 'choice-button': true, 'enabled': choice.accessible(world) }">
    {{ choice.name }}
    <div class="tooltip-template">
      <div class="tooltip-title">{{ choice.name }}</div>
      <div class="tooltip-body">{{ choice.desc }}</div>
    </div>
  </button>
</template>

<script lang="ts">

import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Action } from '@/game/combat'
import { Creature } from '@/game/creature'
import { Place, Direction, Choice, World } from '@/game/world'
import tippy from 'tippy.js'

@Component({})
export default class ChoiceButton extends Vue {
  @Prop()
  choice!: Choice

  @Prop()
  world!: World

  mounted () {
    const elem = this.$el
    const tooltip = this.$el.querySelector(".tooltip-template") as HTMLElement
    tippy(
      elem,
      {
        content: tooltip,
        touch: ["hold", 500]
      }
    )
  }
}
</script>

<style scoped>

.choice-button,
.choice-button:hover,
.choice-button:active {
  width: calc(100%-16pt);
  margin: 8pt;
  background: repeating-linear-gradient(45deg, #333, #333 20px, #222 20px, #222 40px);
  color: #ccc;
  font-size: 1.25rem;
  border-color: #ccc;
  border-width: 3px;
  border-radius: 8px;
  border-style: outset;
  outline: none;
  padding: 4pt;
  user-select: none;
}

.choice-button:focus {
  background: repeating-linear-gradient(45deg, #444, #444 20px, #333 20px, #333 40px);
}

.choice-button.enabled {
  background: #555;
}

.choice-button.enabled:hover {
  background: #777;
}

.choice-button.enabled:active {
  background: #888;
  border-style: inset;
}

</style>