feast/src/components/Profile.vue

<template>
  <div class="character-layout">
    <button @click="$emit('exit')" class="profile-exit">Exit</button>
    <div class="character-items">
      <ItemView @click.native="useItem(item)" :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" />
    </div>
    <div class="character-stats">
      <Statblock :subject="world.player" :initiative="0" />
    </div>
    <EquipmentView class="character-equipment" :subject="world.player" />
  </div>
</template>

<script lang="ts">

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, EquipmentView
  }
})

export default class Explore extends Vue {
  @Prop()
  world!: World

  useItem (item: Item): void {
    switch (item.kind) {
      case ItemKind.Key:
        break
      case ItemKind.Consumable:
        item.actions[0].execute(this.world.player, this.world.player)
        break
      case ItemKind.Equipment:
        this.world.player.equip(item as Equipment, (item as Equipment).slot)
        this.world.player.items = this.world.player.items.filter(i => item !== i)
        break
    }
  }
}

</script>

<style scoped>

.character-layout {
  flex: 10;
  position: relative;
  display: grid;
  grid-template-areas:
  "exit      stats"
  "items     stats"
  "items     equipment"
  "containers     containers";
  grid-template-rows: 100px 1fr 1fr 0.25fr;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  margin: auto;
}

.character-items {
  background: #222;
  grid-area: items;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-template-rows: repeat(10, 1fr);
  justify-items: center;
  align-items: start;
  overflow-x: hidden;
  overflow-y: scroll;
}

.character-items > .item-view {
  flex: 1 1;
  height: 4rem;
  max-height: 4rem;
  width: 6rem;
  max-width: 6rem;
}

.character-containers {
  background: #222;
  grid-area: containers;
  display: flex;
  flex-direction: row;
}

.character-equipment {
  grid-area: equipment;
}

.character-stats {
  background: #111;
  grid-area: stats;
}

.profile-exit {
  grid-area: exit;
  width: 100%;
  padding: 4pt;
  flex: 0 1;
  background: #333;
  border-color: #666;
  border-style: outset;
  user-select: none;
  color: #eee;
  font-size: 36px;
}

.profile-exit:hover {
  background: #444;
}

.profile-exit:active {
  background: #666;
  border-style: inset;
}
</style>