feast/src/components/Statblock.vue

<template>
  <div class="statblock">
    <h2 v-if="subject.perspective === firstperson">You</h2>
    <h2 v-if="subject.perspective !== firstperson">{{subject.name.all.capital}}</h2>
    <div class="stat-line vigors">
      <div :class="vigorClass(subject.vigors[vigor], subject.maxVigors[vigor])" v-for="vigor in Object.keys(subject.vigors)" v-bind:key="vigor">
        <i :class="vigorIcons[vigor]" />
        <div>{{subject.vigors[vigor]}}</div>
        <div class="tooltip-template">
          <div class="tooltip-title">{{ vigor }}</div>
          <div class="tooltip-body">{{ vigorDescs[vigor] }}</div>
        </div>
      </div>
    </div>
    <div class="stat-line stats">
      <div :class="statClass(subject.stats[stat], subject.baseStats[stat])" v-for="stat in Object.keys(subject.stats)" v-bind:key="stat">
        <i :class="statIcons[stat]" />
        <div>{{subject.stats[stat]}}</div>
        <div class="tooltip-template">
          <div class="tooltip-title">{{ stat }}</div>
          <div class="tooltip-body">{{ statDescs[stat] }}</div>
        </div>
      </div>
    </div>
    <div class="stat-line vore-stats">
      <div class="stat-entry" v-for="stat in Object.keys(subject.voreStats)" v-bind:key="stat">
        <i :class="voreStatIcons[stat]" />
        <div>{{subject.voreStats[stat]}}</div>
        <div class="tooltip-template">
          <div class="tooltip-title">{{ stat }}</div>
          <div class="tooltip-body">{{ voreStatDescs[stat] }}</div>
        </div>
      </div>
    </div>
    <div>Status: {{subject.status}}</div>
    <button @click="subject.perspective = firstperson">First-person</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Creature, POV } from '@/game/entity'
import { Stats, Stat, StatIcons, StatDescs, Vigor, VigorIcons, VigorDescs, VoreStatDescs, VoreStatIcons } from '@/game/combat'
import ContainerView from './ContainerView.vue'
import tippy, { createSingleton } from 'tippy.js'
import 'tippy.js/dist/tippy.css'

@Component({
  components: {
    ContainerView
  },
  methods: {
    vigorClass (value: number, max: number) {
      if (value * 5 <= max) {
        return 'stat-entry crit'
      } else if (value * 3 <= max) {
        return 'stat-entry low'
      } else {
        return 'stat-entry'
      }
    },
    statClass (value: number, normal: number) {
      if (value < normal) {
        return 'stat-entry crit'
      } else if (value > normal) {
        return 'stat-entry buff'
      } else {
        return 'stat-entry'
      }
    }
  }
})
export default class Statblock extends Vue {
  @Prop({ type: Creature, required: true })
  subject!: Creature

  private vigorIcons = VigorIcons
  private statIcons = StatIcons
  private voreStatIcons = VoreStatIcons
  private vigorDescs = VigorDescs
  private statDescs = StatDescs
  private voreStatDescs = VoreStatDescs
  private vigor = Vigor

  firstperson: POV = POV.First

  mounted () {
    const tippyInstances = Array.from(this.$el.querySelectorAll(".stat-entry")).map(elem => {
      const tooltip = elem.querySelector(".tooltip-template") as HTMLElement

      return tippy(elem, {
        content: tooltip
      })
    })
    createSingleton(tippyInstances, { delay: 500 })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
  margin-bottom: 8pt;
  font-size: 200%;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.statblock {
  margin: 16px;
  user-select: none;
}

.stat-line {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.stats,
.vore-stats {
  display: none;
}

.stat-entry {
  position: relative;
  font-size: 16pt;
  padding-top: 4pt;
  padding-bottom: 4pt;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  user-select: none;
}

.stat-entry.low {
  color: yellow;
}

.stat-entry.crit {
  color: red;
}

.stat-entry.buff {
  color: green;
}

.statblock[data-active] {
  background: #444;
  border-radius: 4px;
}

.statblock[data-active] .stats,
.statblock[data-active] .vore-stats {
  display: flex;
}
</style>

<style>

.left-stats .stat-entry::after {
  transform: translate(calc(0% + 16pt), -100%);
}
.left-stats .stat-entry::before {
  transform: translate(calc(0% + 16pt), calc(-100% + 18pt + 16pt));
}
.right-stats .stat-entry::after {
  transform: translate(calc(-100% + 16pt), -100%);
}
.right-stats .stat-entry::before {
  transform: translate(calc(-100% + 16pt), calc(-100% + 18pt + 16pt));
}

</style>