Start working on item views

src/App.vue

@@ -3,7 +3,7 @@
     <Header />
     <div id="main-area">
       <transition name="component-fade" mode='out-in'>
-        <component @profile="profileOn = true" @exit="profileOn = false" @leaveCombat="world.encounter = null" v-bind:is="mode" :world="world" :encounter="world.encounter" />
+        <component @profile="$data.profileOn = true" @exit="$data.profileOn = false" @leaveCombat="$data.world.encounter = null" v-bind:is="mode" :world="$data.world" :encounter="$data.world.encounter" />
       </transition>
     </div>
   </div>
@@ -67,7 +67,11 @@ export default class App extends Vue {
     const player = new Creatures.Wolf()
     player.perspective = POV.Second
     player.side = Side.Heroes
-
+    player.equipment.set(Items.EquipmentSlot.MainHand, new Items.Sword())
+    player.items.push(new Items.Sword())
+    player.items.push(new Items.Mace())
+    player.items.push(new Items.Dagger())
+    player.items.push(new Items.Sword())
     this.$data.world = new World(player)
 
     player.location = Town()

src/components/ContainerView.vue

@@ -74,17 +74,15 @@ function draw (delta: number, dt: number, total: number, parent: HTMLElement, ca
 @Component
 export default class ContainerView extends Vue {
   @Prop({ required: true })
-  container!: Container
+  container!: VoreContainer
 
   mounted () {
-    if ((this.container as VoreContainer).fluidColor !== undefined) {
-      const canvas = this.$el.querySelector('.container-waves') as HTMLCanvasElement
+    const canvas = this.$el.querySelector('.container-waves') as HTMLCanvasElement
 
-      canvas.width = (this.$el as HTMLElement).clientWidth
-      canvas.height = (this.$el as HTMLElement).clientHeight
-      canvas.width = canvas.width + 0
-      requestAnimationFrame((delta: number) => draw(delta, delta, Math.random() * 1000, this.$el as HTMLElement, canvas, (this.container as VoreContainer), 0, 0))
-    }
+    canvas.width = (this.$el as HTMLElement).clientWidth
+    canvas.height = (this.$el as HTMLElement).clientHeight
+    canvas.width = canvas.width + 0
+    requestAnimationFrame((delta: number) => draw(delta, delta, Math.random() * 1000, this.$el as HTMLElement, canvas, (this.container as VoreContainer), 0, 0))
 
     wiggle(this.$el.querySelector(".container-contents") as HTMLElement)
   }

src/components/Explore.vue

@@ -58,7 +58,7 @@ export default class Explore extends Vue {
   @Prop({ type: World })
   world!: World
 
-  navBtnCss (dir: Direction) {
+  navBtnCss (dir: string) {
     return {
       '--nav-direction': dir
     }

src/components/ItemView.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="item-view">
+    <div class="item-content">
+      <div class="item-name">{{ item.name.capital.all.toString() }}</div>
+    </div>
+    <i :class="'item-icon ' + $data.ItemKindIcons[item.kind]" />
+  </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 { Container, VoreContainer, Vore } from '@/game/vore'
+import { Item, ItemKindIcons } from '@/game/items'
+
+@Component({
+  data () {
+    return {
+      ItemKindIcons: ItemKindIcons
+    }
+  }
+})
+export default class ItemView extends Vue {
+  @Prop({ required: true })
+  item!: Item
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .item-view {
+    position: relative;
+    padding: 4px;
+    border: 4px outset;
+    margin: 4px;
+  }
+
+  .item-content {
+    position: relative;
+    z-index: 1;
+  }
+
+  .item-name {
+    font-family: serif;
+    font-size: 1.5rem;
+  }
+
+  .item-icon {
+    color: #666;
+    font-size: 250%;
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>

src/components/Profile.vue

@@ -2,6 +2,7 @@
   <div class="character-layout">
     <div class="character-items">
       <button @click="$emit('exit')" class="profile-exit">Exit</button>
+      <ItemView :item="item" v-for="(item, index) in world.player.items" :key="'item-' + index" />
     </div>
     <div class="character-containers">
       <ContainerView :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
@@ -17,11 +18,12 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import Statblock from './Statblock.vue'
 import ContainerView from './ContainerView.vue'
+import ItemView from './ItemView.vue'
 import { Creature } from '@/game/creature'
 import { World } from '@/game/world'
 @Component({
   components: {
-    Statblock, ContainerView
+    Statblock, ContainerView, ItemView
   }
 })
 
@@ -53,6 +55,25 @@ export default class Explore extends Vue {
 .character-items {
   background: #222;
   grid-area: items;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(100, 1fr);
+  justify-items: center;
+  align-items: start;
+}
+
+@media (max-width: 800px) {
+  .character-items {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.character-items > .item-view {
+  flex: 1 1;
+  height: 4rem;
+  max-height: 4rem;
+  width: 6rem;
+  max-width: 6rem;
 }
 
 .character-containers {

src/game/items.ts

@@ -3,9 +3,15 @@ import { Actionable, Action, DamageFormula, ConstantDamageFormula, Damage, Damag
 import { AttackAction } from './combat/actions'
 
 export enum ItemKind {
-  Key,
-  Consumable,
-  Equipment
+  Key = "Key Item",
+  Consumable = "Consumable",
+  Equipment = "Equipment"
+}
+
+export const ItemKindIcons: {[key in ItemKind]: string} = {
+  [ItemKind.Key]: "fas fa-key",
+  [ItemKind.Consumable]: "fas fa-wine-bottle",
+  [ItemKind.Equipment]: "fas fa-hammer"
 }
 
 export abstract class Item implements Actionable {
@@ -18,13 +24,13 @@ export abstract class Item implements Actionable {
 }
 
 export enum EquipmentSlot {
-  Head,
-  Chest,
-  Legs,
-  Arms,
-  MainHand,
-  OffHand,
-  Feet
+  Head = "Head",
+  Chest = "Chest",
+  Legs = "Legs",
+  Arms = "Arms",
+  MainHand = "MainHand",
+  OffHand = "OffHand",
+  Feet = "Feet"
 }
 
 export abstract class Equipment extends Item {