Allow items to be unequipped

src/components/EquipmentView.vue

@@ -1,11 +1,6 @@
 <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>
+    <button @click="unequip(slot)" :class="equipmentClass(slot)" :style="equipmentCss(slot)" v-for="slot in Object.keys(EquipmentSlot)" :key="slot">{{ subject.equipment[slot] === undefined ? slot : subject.equipment[slot].name.capital.all }}</button>
   </div>
 </template>
 
@@ -28,6 +23,63 @@ import { Item, ItemKindIcons, ItemKind, EquipmentSlot } from '@/game/items'
 export default class ItemView extends Vue {
   @Prop({ required: true })
   subject!: Creature
+
+  unequip (slot: EquipmentSlot) {
+    this.subject.unequip(slot)
+  }
+
+  equipmentClass (slot: EquipmentSlot) {
+    const classes: string[] = []
+    classes.push("equipment-slot")
+
+    if (this.subject.equipment[slot] !== undefined) {
+      classes.push("equipment-slot-active")
+    } else {
+      classes.push("equipment-slot-empty")
+    }
+
+    return classes.reduce((info: any, cls: string) => { info[cls] = true; return info }, {})
+  }
+
+  equipmentCss (slot: EquipmentSlot) {
+    const css = {
+      top: "",
+      left: ""
+    }
+
+    switch (slot) {
+      case EquipmentSlot.Head:
+        css.top = "10%"
+        css.left = "50%"
+        break
+      case EquipmentSlot.Chest:
+        css.top = "35%"
+        css.left = "25%"
+        break
+      case EquipmentSlot.Arms:
+        css.top = "35%"
+        css.left = "75%"
+        break
+      case EquipmentSlot.MainHand:
+        css.top = "60%"
+        css.left = "15%"
+        break
+      case EquipmentSlot.OffHand:
+        css.top = "60%"
+        css.left = "85%"
+        break
+      case EquipmentSlot.Legs:
+        css.top = "60%"
+        css.left = "50%"
+        break
+      case EquipmentSlot.Feet:
+        css.top = "90%"
+        css.left = "50%"
+        break
+    }
+
+    return css
+  }
 }
 
 </script>
@@ -47,36 +99,23 @@ export default class ItemView extends Vue {
     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%;
+    transform: translate(-50%, -50%);
+    background: #333;
+    color: #eee;
+    margin: 0px;
+    padding: 0px;
   }
 
-  .equipment-off-hand {
-    top: 20%;
-    left: 70%;
+  .equipment-slot-active:hover {
+    background: #555;
   }
 
-  .equipment-legs {
-    top: 60%;
-    left: 50%;
+  .equipment-slot-active:active {
+    background: #555;
+    border-style: inset;
   }
 
-  .equipment-feet {
-    top: 80%;
-    left: 50%;
+  .equipment-slot-empty {
+    color: #666;
   }
 </style>

src/components/Profile.vue

@@ -59,7 +59,7 @@ export default class Explore extends Vue {
   position: relative;
   display: grid;
   grid-template-areas:
-  "exit      void"
+  "exit      stats"
   "items     stats"
   "items     equipment"
   "containers     containers";

src/game/creature.ts

@@ -77,11 +77,19 @@ export class Creature extends Vore implements Combatant {
   equip (item: Equipment, slot: EquipmentSlot) {
     const equipped = this.equipment[slot]
     if (equipped !== undefined) {
-      this.items.push(equipped)
+      this.unequip(slot)
     }
     this.equipment[slot] = item
   }
 
+  unequip (slot: EquipmentSlot) {
+    const item = this.equipment[slot]
+    if (item !== undefined) {
+      this.items.push(item)
+      this.equipment[slot] = undefined
+    }
+  }
+
   get status (): Array<VisibleStatus> {
     const results: Array<VisibleStatus> = []