Allow for more than two combatants in the UI

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="app">
     <Header version="pre-alpha" />
-    <Combat :player="player" :enemy="enemy" />
+    <Combat :left="left" :right="right" :combatants="combatants" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Prop } from 'vue-property-decorator'
 import Combat from './components/Combat.vue'
 import Header from './components/Header.vue'
 import * as Creatures from '@/game/creatures'
@@ -19,15 +19,21 @@ import { ProperNoun } from '@/game/language'
   }
 })
 export default class App extends Vue {
-  player: Creature
-  enemy: Creature
+  left: Creature
+  right: Creature
+  combatants: Array<Creature>
   constructor () {
     super()
-    this.player = new Creatures.Wolf()
-    this.enemy = new Creatures.Cafat()
-    this.player.perspective = POV.First
-    console.log(this.player)
-    console.log(this.enemy)
+    this.left = new Creatures.Wolf()
+    this.left.name = new ProperNoun("Player")
+    this.right = new Creatures.Cafat()
+    const wolf1 = new Creatures.Wolf()
+    wolf1.name = new ProperNoun("Wolfington")
+    const wolf2 = new Creatures.Wolf()
+    this.combatants = [this.left, this.right, wolf1, wolf2]
+    this.left.perspective = POV.First
+    console.log(this.left)
+    console.log(this.right)
   }
 }
 </script>

src/components/Combat.vue

@@ -1,22 +1,32 @@
 <template>
   <div class="combat-layout">
-    <Statblock class="player-stats" :subject="player" />
-    <Statblock class="enemy-stats" :subject="enemy" />
+    <div class="left-selector">
+      <button @click="left = combatant" v-for="(combatant, index) in combatants.filter(c => c !== right && c !== left)" :key="'left' + index">
+        {{ combatant.name }}
+      </button>
+    </div>
+    <div class="right-selector">
+      <button @click="right = combatant" v-for="(combatant, index) in combatants.filter(c => c !== left && c !== right)" :key="'right' + index">
+        {{ combatant.name }}
+      </button>
+    </div>
+    <Statblock class="player-stats" :subject="left" />
+    <Statblock class="enemy-stats" :subject="right" />
     <div id="log">
     </div>
-    <div class="player-actions">
+    <div class="left-actions">
       <h2>Your moves</h2>
       <div class="vert-display">
-        <ActionButton @executed="executed" v-for="action in player.validActions(enemy)" :key="'player' + action.name" :action="action" :user="player" :target="enemy" />
-        <ActionButton @executed="executed" v-for="action in player.validActions(player)" :key="'player' + action.name" :action="action" :user="player" :target="enemy" />
+        <ActionButton @executed="executed" v-for="action in left.validActions(right)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
+        <ActionButton @executed="executed" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
       </div>
       <div>{{actionDescription}}</div>
     </div>
-    <div class="enemy-actions">
+    <div class="right-actions">
       <h2>Enemy moves</h2>
       <div class="vert-display">
-        <ActionButton @executed="executedEnemy" v-for="action in enemy.validActions(player)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
-        <ActionButton @executed="executedEnemy" v-for="action in enemy.validActions(enemy)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
+        <ActionButton @executed="executedEnemy" v-for="action in right.validActions(left)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
+        <ActionButton @executed="executedEnemy" v-for="action in right.validActions(right)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
       </div>
     </div>
   </div>
@@ -36,10 +46,13 @@ import ActionButton from './ActionButton.vue'
 )
 export default class Combat extends Vue {
   @Prop({ type: Creature, required: true })
-  player!: Creature
+  left!: Creature
 
   @Prop({ type: Creature, required: true })
-  enemy!: Creature
+  right!: Creature
+
+  @Prop()
+  combatants!: Array<Creature>
 
   actionDescription = ''
 
@@ -83,7 +96,7 @@ export default class Combat extends Vue {
 <style scoped>
 .combat-layout {
   display: grid;
-  grid-template-rows: 20% [main-row-start] 1fr 1fr [main-row-end] 20%;
+  grid-template-rows: 10% 20% [main-row-start] 1fr 1fr [main-row-end] 20%;
   grid-template-columns: minmax(80pt, 20%) [main-col-start] 1fr [main-col-end] minmax(80pt, 20%);
   width: 100%;
   height: 100%;
@@ -91,11 +104,11 @@ export default class Combat extends Vue {
 }
 
 .player-stats {
-  grid-area: 1 / 1 / 2 / 2
+  grid-area: 2 / 1 / 3 / 2
 }
 
 .enemy-stats {
-  grid-area: 1 / 3 / 2 / 4;
+  grid-area: 2 / 3 / 3 / 4;
 }
 
 #log {
@@ -107,12 +120,20 @@ export default class Combat extends Vue {
   align-self: end;
 }
 
-.player-actions {
-  grid-area: 3 / 1 / 4 / 2;
+.left-selector {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.right-selector {
+  grid-area: 1 / 3 / 2 / 4;
+}
+
+.left-actions {
+  grid-area: 4 / 1 / 5 / 2;
 }
 
-.enemy-actions {
-  grid-area: 3 / 3 / 4 / 4;
+.right-actions {
+  grid-area: 4 / 3 / 5 / 4;
 }
 
 h3 {

src/game/combat.ts

@@ -387,11 +387,7 @@ export class FeedAction extends TogetherAction {
   }
 
   execute (user: Creature, target: Creature): LogEntry {
-    if (this.test.test(user, target)) {
-      return this.container.consume(user)
-    } else {
-      return this.failLines.run(user, target)
-    }
+    return this.container.consume(user)
   }
 }
 

src/game/creatures/cafat.ts

@@ -1,8 +1,9 @@
 import { Creature, POV, Entity } from '../entity'
 import { Stat, Damage, DamageType, TransferAction, Vigor, StatTest, FeedAction, DigestAction, EatenAction, AttackAction } from '../combat'
 import { ProperNoun, TheyPronouns, ImproperNoun, POVPair, FemalePronouns, POVPairArgs } from '../language'
-import { VoreType, Stomach, InnerStomach, Container } from '../vore'
+import { VoreType, Stomach, InnerStomach, Container, Bowels } from '../vore'
 import { LogLine, LogLines, LogEntry, FAElem, CompositeLog, ImgElem } from '../interface'
+import { Wolf } from '../creatures'
 
 class BelchAction extends AttackAction {
   successLines = new POVPairArgs<Entity, Entity, { damage: Damage }>([

src/game/interface.ts

@@ -62,21 +62,21 @@ export class LogLine implements LogEntry {
   }
 
   render (): HTMLElement[] {
-    const span = document.createElement("span")
+    const div = document.createElement("div")
 
     this.parts.forEach(part => {
       if (typeof part === "string") {
         const partSpan = document.createElement("span")
         partSpan.innerText = part
-        span.appendChild(partSpan)
+        div.appendChild(partSpan)
       } else {
         (part as LogEntry).render().forEach(logPart => {
-          span.appendChild(logPart)
+          div.appendChild(logPart)
         })
       }
     })
 
-    return [span]
+    return [div]
   }
 }