Allow for several combat scenes to be chosen from

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="app">
-    <Header version="pre-alpha" />
-    <Combat :encounter="encounter" />
+    <Header version="pre-alpha" @selectEncounter="selectEncounter" :encounters="encounters" />
+    <Combat v-show="$data.encounter === encounter" v-for="(encounter, index) in encounters" :key="'encounter-' + index" :encounter="encounter" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
 import Combat from './components/Combat.vue'
 import Header from './components/Header.vue'
 import * as Creatures from '@/game/creatures'
@@ -18,14 +18,35 @@ import { Encounter } from './game/combat'
 @Component({
   components: {
     Combat, Header
+  },
+  data () {
+    return {
+      encounter: null,
+      encounters: null
+    }
   }
 })
 export default class App extends Vue {
-  encounter: Encounter
-
   constructor () {
     super()
+  }
+
+  @Emit('selectEncounter')
+  selectEncounter (encounter: Encounter) {
+    this.$data.encounter = encounter
+  }
+
+  created () {
+    this.$data.encounters = []
+
+    this.$data.encounters.push(new Encounter({ name: 'Boss Fight' }, this.makeParty().concat([new Creatures.Withers(), new Creatures.Kenzie()])))
+    this.$data.encounters.push(new Encounter({ name: 'Cafat' }, this.makeParty().concat([new Creatures.Cafat(), new Creatures.Wolf()])))
+    this.$data.encounters.push(new Encounter({ name: 'Dragon' }, this.makeParty().concat([new Creatures.Dragon()])))
+
+    this.$data.encounter = this.$data.encounters[0]
+  }
 
+  makeParty (): Creature[] {
     const fighter = new Creatures.Human(new ProperNoun("Redgar"), MalePronouns, {
       stats: {
         Toughness: 20,
@@ -71,14 +92,7 @@ export default class App extends Vue {
     cleric.title = "Lv. 5 Cleric"
     cleric.items.push(Items.Mace)
 
-    const withers = new Creatures.Withers()
-    const kenzie = new Creatures.Kenzie()
-    const cafat = new Creatures.Cafat()
-    const wolf = new Creatures.Wolf()
-    const dragon = new Creatures.Dragon()
-    const combatants = [fighter, wizard, rogue, cleric, withers, kenzie, cafat, wolf, dragon]
-    this.encounter = new Encounter(combatants)
-    console.log(this.encounter)
+    return [fighter, cleric, rogue, wizard]
   }
 }
 </script>

src/components/Header.vue

@@ -3,20 +3,29 @@
     <div>
       <a href="https://classic.feast.crux.sexy">Old version</a>
     </div>
+    <div>Version: {{version}}</div>
     <div>
       <a href="https://discord.gg/2DmtgEM"><i class="fab fa-discord" /></a>
     </div>
-    <div>Version: {{version}}</div>
+    <div>
+      <button @click="select(encounter)" v-for="(encounter, index) in encounters" :key="'encounter-'+index">{{encounter.desc.name.toString()}}</button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 
 import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Encounter } from '@/game/combat'
 
 @Component({})
 export default class Header extends Vue {
   @Prop() version!: string
+  @Prop() encounters!: Encounter[]
+
+  select (encounter: Encounter) {
+    this.$emit('selectEncounter', encounter)
+  }
 }
 
 </script>

src/game/combat.ts

@@ -383,6 +383,9 @@ export abstract class StatusEffect extends Effective implements VisibleStatus {
   get bottomRight () { return '' }
 }
 
+export type EncounterDesc = {
+  name: TextLike;
+}
 /**
  * An Encounter describes a fight: who is in it and whose turn it is
  */
@@ -391,7 +394,7 @@ export class Encounter {
   currentMove: Creature
   turnTime = 100
 
-  constructor (public combatants: Creature[]) {
+  constructor (public desc: EncounterDesc, public combatants: Creature[]) {
     this.initiatives = new Map()
 
     combatants.forEach(combatant => this.initiatives.set(combatant, 0))