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">
      <div class="stat-entry" :data-tooltip="vigor" v-for="vigor in Object.keys(subject.vigors)" v-bind:key="vigor"><i :class="vigorIcons[vigor]" /><div>{{subject.vigors[vigor]}}</div></div>
    </div>
    <br>
    <div class="stat-line">
      <div class="stat-entry" :data-tooltip="stat" v-for="stat in Object.keys(subject.stats)" v-bind:key="stat"><i :class="statIcons[stat]" /> {{subject.stats[stat]}}</div>
    </div>
    <br>
    <div class="stat-line">
      <div class="stat-entry" data-tooltip="Bulk"><i class="fas fa-weight-hanging" /> {{subject.bulk}}</div>
      <div class="stat-entry" data-tooltip="Prey Count"><i class="fas fa-utensils" /> {{ subject.containers.reduce((total, container) => total + container.contents.length, 0) }} </div>
    </div>
    <br>
    <div>Status: {{subject.status}}</div>
    <ContainerView v-for="container in subject.containers" :key="container.name.toString()" :container="container" />
  </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, Vigor, VigorIcons } from '@/game/combat'
import ContainerView from './ContainerView.vue'
@Component({
  components: {
    ContainerView
  }
})
export default class Statblock extends Vue {
  @Prop({ type: Creature, required: true })
  subject!: Creature

  private vigorIcons = VigorIcons
  private statIcons = StatIcons
  private vigor = Vigor

  firstperson: POV = POV.First
  constructor () {
    super()
  }
}
</script>

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

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

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

.stat-entry::after {
  opacity: 0;
  position: absolute;
  color: #eee;
  font-size: 0pt;
  content: attr(data-tooltip);
  transition: 0.1s;
  pointer-events: none;
  left: 0pt;
  top: 0pt;
  transform: translate(calc(-50% + 16pt), -100%);
  background: #555;
  padding: 8pt;
  border-radius: 8pt;
}

.stat-entry:hover::after {
  font-size: 18pt;
  opacity: 1;
}
</style>