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 subject.items" :key="'item-' + index" />
    </div>
    <div class="character-containers">
      <ContainerView :container="container" v-for="(container, index) in subject.containers" :key="'explore-container-' + index" />
    </div>
    <div class="character-stats">
      <Statblock :subject="subject" :initiative="0" />
    </div>
    <div class="character-perks">
      <h2>Perks</h2>
      <div
        class="perk"
        v-for="(perk,index) in subject.perks"
        :key="'perk-' + index"
      >
        <div class="perk-name">{{ perk.name }}</div>
        <div class="perk-desc">{{ perk.desc }}</div>
      </div>
    </div>

    <EquipmentView class="character-equipment" :world="world" :subject="subject" />
  </div>
</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator'
import Statblock from '@/components/Statblock.vue'
import ContainerView from '@/components/ContainerView.vue'
import ItemView from '@/components/ItemView.vue'
import EquipmentView from '@/components/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 Profile extends Vue {
  @Prop()
  world!: World

  @Prop()
  subject!: Creature

  useItem (item: Item): void {
    if (this.subject.side === this.world.player.side) {
      switch (item.kind) {
        case ItemKind.Key:
          break
        case ItemKind.Consumable:
          item.actions[0].execute(this.subject, this.subject)
          break
        case ItemKind.Equipment:
          this.subject.equip(item as Equipment, (item as Equipment).slot)
          this.subject.items = this.subject.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     perks"
  "items     equipment"
  "containers     containers";
  grid-template-rows: 100px 1fr fit-content(25%) 1fr 0.25fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  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: #222;
  grid-area: stats;
}

.character-perks {
  background: #222;
  grid-area: perks;
}

.perk {
  text-align: left;
  text-indent: 16pt;
  margin-left: 16pt;
  margin-right: 16pt;
  margin-bottom: 8pt;
}

.perk-name {
  color: #bbb;
}

.perk-desc {
  font-size: 75%;
}

.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>