Move stuff into the App component

src/App.vue

@@ -1,20 +1,31 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="what's a blockchain" seen="yes"/>
+    <Combat :player="player" :enemy="enemy" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import HelloWorld from './components/HelloWorld.vue'
+import Combat from './components/Combat.vue'
+import * as Creatures from '@/game/creatures'
+import { Creature, POV } from '@/game/entity'
 
 @Component({
   components: {
-    HelloWorld
+    Combat
   }
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+  player: Creature
+  enemy: Creature
+  constructor () {
+    super()
+    this.player = new Creatures.Wolf()
+    this.player.perspective = POV.First
+    this.enemy = new Creatures.Wolf()
+  }
+}
 </script>
 
 <style>

src/components/Combat.vue

@@ -0,0 +1,55 @@
+<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>
+    <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>
+    <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>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
+import { Creature, POV } from '@/game/entity'
+import { log, LogEntry } from '@/game/interface'
+
+@Component
+export default class HelloWorld extends Vue {
+  @Prop({ type: Creature, required: true })
+  player!: Creature
+
+  @Prop({ type: Creature, required: true })
+  enemy!: Creature
+
+  private log: (entry: LogEntry) => void;
+
+  constructor () {
+    super()
+    this.log = log
+  }
+}
+</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/components/HelloWorld.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>VORE TIME</h1>
-    <p>
-      {{ meme }}
-    </p>
-    <button v-on:click="dab">VORE</button>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
-import { Creature } from '@/game/entity'
-import { Wolf } from '@/game/creatures/wolf'
-
-/// <reference path="game/feast.ts" />
-/// <reference path="game/creatures.ts" />
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-  @Prop() public seen!: boolean;
-  private player: Creature;
-  private enemy: Creature;
-
-  private meme = 'hm';
-
-  mounted () {
-    this.meme = 'Yeet'
-  }
-
-  @Emit()
-  dab () {
-    this.meme = 'Yeeeeet'
-  }
-
-  @Watch('meme')
-  onPropertyChanged (value: string, oldValue: string) {
-    this.msg = value + oldValue
-  }
-
-  constructor () {
-    super()
-    this.player = new Wolf()
-    this.enemy = new Wolf()
-  }
-}
-</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

@@ -43,7 +43,7 @@ export enum State {
     Normal,
     Grappled,
     Grappling,
-    Eaten,
+    Eaten
 }
 
 export interface Combatant {
@@ -148,7 +148,10 @@ export class StruggleAction extends PairAction {
     }
 
     execute (user: Creature, target: Creature): LogEntry {
-      if (user.containedIn) { return new CompositeLog(this.lines[user.perspective][target.perspective](user, target), user.containedIn.release(user)) } else { return new LogLines("The prey wasn't actually eaten...") }
+      if (user.containedIn) {
+        user.state = State.Normal
+        return new CompositeLog(this.lines[user.perspective][target.perspective](user, target), user.containedIn.release(user))
+      } else { return new LogLines("The prey wasn't actually eaten...") }
     }
 }
 

src/game/creatures/wolf.ts

@@ -18,7 +18,7 @@ export class Wolf extends Creature {
     super(new ImproperNoun('wolf', 'wolves'), MalePronouns, { [Stat.STR]: 10, [Stat.DEX]: 10, [Stat.CON]: 10 }, new Set([VoreType.Oral]), new Set([VoreType.Oral]), 25)
     this.actions.push(new BiteAction())
 
-    const stomach = new Stomach(this, 50, new Damage({ amount: 5, type: DamageType.Acid }, { amount: 5, type: DamageType.Crush }))
+    const stomach = new Stomach(this, 50, new Damage({ amount: 50, type: DamageType.Acid }, { amount: 500, type: DamageType.Crush }))
 
     this.containers.add(stomach)
     this.actions.push(new DevourAction(stomach))

src/game/interface.ts

@@ -34,5 +34,5 @@ export class CompositeLog implements LogEntry {
 }
 
 export function log (entry: LogEntry): void {
-  entry.render().forEach(elem => document.body.appendChild(elem))
+  entry.render().forEach(elem => document.querySelector('#log')?.appendChild(elem))
 }

src/game/vore.ts

@@ -56,6 +56,7 @@ abstract class NormalContainer implements Container {
 
     release (prey: Prey): LogEntry {
       prey.containedIn = null
+      this.contents.delete(prey)
       return new LogLines('ANTI-MUNCH')
     }