Add statblocks; fix title

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
+    <Statblock :subject="player" />
+    <Statblock :subject="enemy" />
     <Combat :player="player" :enemy="enemy" />
   </div>
 </template>
@@ -8,12 +10,14 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import Combat from './components/Combat.vue'
+import Statblock from './components/Statblock.vue'
 import * as Creatures from '@/game/creatures'
 import { Creature, POV } from '@/game/entity'
 
 @Component({
   components: {
-    Combat
+    Combat,
+    Statblock
   }
 })
 export default class App extends Vue {

src/components/Combat.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="hello">
     <h1>VORE TIME</h1>
-    <h2>Oh shit it's a:</h2>
-
-    <h3> {{enemy.name.capital.all}}</h3>
-    <p> {{enemy.health}}</p>
-    <br>
+    <h2>Your moves</h2>
     <button v-for="action in player.validActions(enemy)" :key="'player-' + action.name" v-on:click="log(action.execute(player, enemy))">{{action.name}}</button>
     <button v-for="action in player.validActions(player)" :key="'palyer-' + action.name" v-on:click="log(action.execute(player, player))">{{action.name}}</button>
     <div id="log"></div>
+    <h2>Enemy moves</h2>
     <button v-for="action in enemy.validActions(player)" :key="'enemy-' + action.name" v-on:click="log(action.execute(enemy, player))">{{action.name}}</button>
     <button v-for="action in enemy.validActions(enemy)" :key="'enemy-' + action.name" v-on:click="log(action.execute(enemy, enemy))">{{action.name}}</button>
   </div>
@@ -20,7 +17,7 @@ import { Creature, POV } from '@/game/entity'
 import { log, LogEntry } from '@/game/interface'
 
 @Component
-export default class HelloWorld extends Vue {
+export default class Combat extends Vue {
   @Prop({ type: Creature, required: true })
   player!: Creature
 

src/components/Statblock.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="statblock">
+    <h2>Stats</h2>
+    <div v-if="subject.perspective === firstperson">Player</div>
+    <div v-if="subject.perspective !== firstperson">Name: {{subject.name}}</div>
+    <div>Health: {{subject.health.toFixed(0)}}</div>
+    <div>Status: {{subject.state}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
+import { Creature, POV } from '@/game/entity'
+import { Stats, Stat } from '@/game/combat'
+
+@Component
+export default class Statblock extends Vue {
+  @Prop({ type: Creature, required: true })
+  subject!: Creature
+
+  firstperson: POV = POV.First
+  constructor () {
+    super()
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/game/combat.ts

@@ -40,10 +40,10 @@ export enum Stat {
 export type Stats = {[key in Stat]: number}
 
 export enum State {
-    Normal,
-    Grappled,
-    Grappling,
-    Eaten
+    Normal = 'Normal',
+    Grappled = 'Grappled',
+    Grappling = 'Grappling',
+    Eaten = 'Eaten'
 }
 
 export interface Combatant {

vue.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  chainWebpack: config => {
+    config
+      .plugin('html')
+      .tap(args => {
+        args[0].title = 'Feast'
+        return args
+      })
+  }
+}