Add an equipment view; switch equimpent to being an object, not a Map

Vue does not play nicely with Maps.

src/App.vue

@@ -67,8 +67,8 @@ export default class App extends Vue {
     const player = new Creatures.Player()
     player.perspective = POV.Second
     player.side = Side.Heroes
-    player.equipment.set(Items.EquipmentSlot.MainHand, new Items.Sword())
-    player.equipment.set(Items.EquipmentSlot.Head, new Items.Helmet())
+    player.equipment[Items.EquipmentSlot.MainHand] = new Items.Sword()
+    player.equipment[Items.EquipmentSlot.Head] = new Items.Helmet()
     player.items.push(new Items.HealthPotion())
     player.items.push(new Items.Mace())
     player.items.push(new Items.Dagger())

src/components/EquipmentView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="equipment-view">
+    <div v-if="subject.equipment[EquipmentSlot.Head] !== undefined" class="equipment-slot equipment-head">{{ subject.equipment[EquipmentSlot.Head].name.capital.all }}</div>
+    <div v-if="subject.equipment[EquipmentSlot.Chest] !== undefined" class="equipment-slot equipment-chest">{{ subject.equipment[EquipmentSlot.Chest].name.capital.all }}</div>
+    <div v-if="subject.equipment[EquipmentSlot.MainHand] !== undefined" class="equipment-slot equipment-main-hand">{{ subject.equipment[EquipmentSlot.MainHand].name.capital.all }}</div>
+    <div v-if="subject.equipment[EquipmentSlot.OffHand] !== undefined" class="equipment-slot equipment-off-hand">{{ subject.equipment[EquipmentSlot.OffHand].name.capital.all }}</div>
+    <div v-if="subject.equipment[EquipmentSlot.Legs] !== undefined" class="equipment-slot equipment-legs">{{ subject.equipment[EquipmentSlot.Legs].name.capital.all }}</div>
+    <div v-if="subject.equipment[EquipmentSlot.Feet] !== undefined" class="equipment-slot equipment-feet">{{ subject.equipment[EquipmentSlot.Feet].name.capital.all }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
+import { Creature } from '@/game/creature'
+import { POV } from '@/game/language'
+import { Stats, Stat } from '@/game/combat'
+import { Item, ItemKindIcons, ItemKind, EquipmentSlot } from '@/game/items'
+
+@Component({
+  data () {
+    return {
+      ItemKindIcons: ItemKindIcons,
+      EquipmentSlot: EquipmentSlot
+    }
+  }
+})
+
+export default class ItemView extends Vue {
+  @Prop({ required: true })
+  subject!: Creature
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .equipment-view {
+    position: relative;
+    border: 4px outset;
+    border-radius: 4px;
+    margin: 4px;
+  }
+
+  .equipment-slot {
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    border-width: 5px;
+    border-style: outset;
+    transform: translate(-50%, -50%)
+  }
+
+  .equipment-head {
+    top: 10%;
+    left: 50%;
+  }
+
+  .equipment-chest {
+    top: 30%;
+    left: 50%;
+  }
+
+  .equipment-main-hand {
+    top: 20%;
+    left: 30%;
+  }
+
+  .equipment-off-hand {
+    top: 20%;
+    left: 70%;
+  }
+
+  .equipment-legs {
+    top: 60%;
+    left: 50%;
+  }
+
+  .equipment-feet {
+    top: 80%;
+    left: 50%;
+  }
+</style>

src/components/Profile.vue

@@ -10,6 +10,7 @@
     <div class="character-stats">
       <Statblock :subject="world.player" :initiative="0" />
     </div>
+    <EquipmentView class="character-equipment" :subject="world.player" />
   </div>
 </template>
 
@@ -19,13 +20,14 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import Statblock from './Statblock.vue'
 import ContainerView from './ContainerView.vue'
 import ItemView from './ItemView.vue'
+import EquipmentView from './EquipmentView.vue'
 import { Creature } from '@/game/creature'
 import { World } from '@/game/world'
 import { LogEntry } from '@/game/interface'
 import { Item, ItemKind, Equipment } from '@/game/items'
 @Component({
   components: {
-    Statblock, ContainerView, ItemView
+    Statblock, ContainerView, ItemView, EquipmentView
   }
 })
 
@@ -59,8 +61,9 @@ export default class Explore extends Vue {
   grid-template-areas:
   "exit      void"
   "items     stats"
+  "items     equipment"
   "containers     containers";
-  grid-template-rows: 100px 1fr 0.25fr;
+  grid-template-rows: 100px 1fr 1fr 0.25fr;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   height: 100%;
@@ -95,6 +98,10 @@ export default class Explore extends Vue {
   flex-direction: row;
 }
 
+.character-equipment {
+  grid-area: equipment;
+}
+
 .character-stats {
   background: #111;
   grid-area: stats;

src/game/creature.ts

@@ -13,8 +13,8 @@ export class Creature extends Vore implements Combatant {
 
   get effects (): Array<Effective> {
     return (this.statusEffects as Effective[]).concat(
-      Array.from(this.equipment.values()).flatMap(
-        item => item.effects
+      Object.values(this.equipment).filter(item => item !== undefined).flatMap(
+        item => (item as Equipment).effects
       )
     )
   }
@@ -25,7 +25,7 @@ export class Creature extends Vore implements Combatant {
   otherActions: Array<Action> = [];
   side: Side;
   title = "Lv. 1 Creature";
-  equipment: Map<EquipmentSlot, Equipment> = new Map()
+  equipment: {[key in EquipmentSlot]?: Equipment } = {}
   ai: AI = new NoAI()
 
   constructor (name: Noun, kind: Noun, pronouns: Pronoun, stats: Stats, preyPrefs: Set<VoreType>, predPrefs: Set<VoreType>, mass: number) {
@@ -75,11 +75,11 @@ export class Creature extends Vore implements Combatant {
   }
 
   equip (item: Equipment, slot: EquipmentSlot) {
-    const equipped = this.equipment.get(slot)
+    const equipped = this.equipment[slot]
     if (equipped !== undefined) {
       this.items.push(equipped)
     }
-    this.equipment.set(slot, item)
+    this.equipment[slot] = item
   }
 
   get status (): Array<VisibleStatus> {
@@ -110,7 +110,7 @@ export class Creature extends Vore implements Combatant {
       this.containers.flatMap(container => container.actions),
       target.otherActions,
       this.otherContainers.flatMap(container => container.actions),
-      Array.from(this.equipment.values()).flatMap(item => item.actions),
+      Object.values(this.equipment).filter(item => item !== undefined).flatMap(item => (item as Equipment).actions),
       this.items.filter(item => item.kind === ItemKind.Consumable && !item.consumed).flatMap(item => item.actions)
     )
 

src/game/maps/town.ts

@@ -21,7 +21,7 @@ function makeParty (): Creature[] {
     }
   })
   fighter.title = "Lv. 6 Fighter"
-  fighter.equipment.set(Items.EquipmentSlot.MainHand, new Items.Sword())
+  fighter.equip(new Items.Sword(), Items.EquipmentSlot.MainHand)
   const rogue = new Creatures.Human(new ProperNoun('Lidda'), FemalePronouns, {
     stats: {
       Toughness: 10,
@@ -32,7 +32,7 @@ function makeParty (): Creature[] {
     }
   })
   rogue.title = "Lv. 5 Rogue"
-  rogue.equipment.set(Items.EquipmentSlot.MainHand, new Items.Dagger())
+  rogue.equip(new Items.Dagger(), Items.EquipmentSlot.MainHand)
   const wizard = new Creatures.Human(new ProperNoun('Mialee'), FemalePronouns, {
     stats: {
       Toughness: 10,
@@ -43,7 +43,7 @@ function makeParty (): Creature[] {
     }
   })
   wizard.title = "Lv. 6 Wizard"
-  wizard.equipment.set(Items.EquipmentSlot.MainHand, new Items.Wand())
+  wizard.equip(new Items.Wand(), Items.EquipmentSlot.MainHand)
   const cleric = new Creatures.Human(new ProperNoun('Jozan'), MalePronouns, {
     stats: {
       Toughness: 15,
@@ -54,7 +54,7 @@ function makeParty (): Creature[] {
     }
   })
   cleric.title = "Lv. 5 Cleric"
-  cleric.equipment.set(Items.EquipmentSlot.MainHand, new Items.Mace())
+  cleric.equip(new Items.Mace(), Items.EquipmentSlot.MainHand)
 
   return [fighter, cleric, rogue, wizard]
 }