Let the profile of any creature be shown; display perks

src/App.vue

@@ -3,7 +3,15 @@
     <Header :version="version" />
     <div id="main-area">
       <transition name="component-fade" mode='out-in'>
-        <component @profile="$data.profileOn = true" @exit="$data.profileOn = false" @give-in="gameOver()" @leave-combat="$data.world.encounter = null" v-bind:is="mode" :world="$data.world" :encounter="$data.world.encounter" />
+        <component
+          @profile="profile"
+          @exit="$data.profileSubject = null"
+          @give-in="gameOver()"
+          @leave-combat="$data.world.encounter = null"
+          v-bind:is="mode"
+          :world="$data.world"
+          :subject="$data.profileSubject"
+          :encounter="$data.world.encounter" />
       </transition>
     </div>
   </div>
@@ -34,7 +42,7 @@ import { Town } from './game/maps/town'
     return {
       world: null,
       home: null,
-      profileOn: false,
+      profileSubject: null,
       props: {
         Explore: {
           world: this
@@ -51,10 +59,10 @@ export default class App extends Vue {
   }
 
   get mode () {
-    if (this.$data.world.encounter !== null) {
-      return "Combat"
-    } else if (this.$data.profileOn) {
+    if (this.$data.profileSubject !== null) {
       return "Profile"
+    } else if (this.$data.world.encounter !== null) {
+      return "Combat"
     } else {
       return "Explore"
     }
@@ -83,6 +91,10 @@ export default class App extends Vue {
     this.$data.world.encounter = null
     this.$data.world.player.location = this.$data.home
   }
+
+  profile (subject: Creature) {
+    this.$data.profileSubject = subject
+  }
 }
 </script>
 

src/components/Combat.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="combat-layout">
     <div @wheel="horizWheelLeft" class="statblock-row left-stats">
-      <Statblock @selected="scrollParentTo($event)" @select="doSelectLeft(combatant, $event)" class="left-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left && combatant !== encounter.currentMove" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <Statblock v-on="$listeners" @selected="scrollParentTo($event)" @select="doSelectLeft(combatant, $event)" class="left-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left && combatant !== encounter.currentMove" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
       <div class="spacer"></div>
     </div>
     <div @wheel="horizWheelRight" class="statblock-row right-stats">
-      <Statblock @selected="scrollParentTo($event)" @select="doSelectRight(combatant, $event)" class="right-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right && combatant !== encounter.currentMove" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <Statblock v-on="$listeners" @selected="scrollParentTo($event)" @select="doSelectRight(combatant, $event)" class="right-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right && combatant !== encounter.currentMove" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
       <div class="spacer"></div>
     </div>
     <div class="statblock-separator statblock-separator-left"></div>

src/components/Explore.vue

@@ -8,8 +8,7 @@
       <p class="worldinfo-date">{{ world.time.format("hh:mm:ss a") }}</p>
     </div>
     <div class="explore-statblock">
-      <Statblock :subject="world.player" />
-      <button class="show-profile" @click="$emit('profile')">Show profile</button>
+      <Statblock v-on="$listeners" :subject="world.player" />
     </div>
     <div class="explore-wallet">
       <WalletView :subject="world.player" />

src/components/Profile.vue

@@ -2,15 +2,27 @@
   <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" />
+      <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 world.player.containers" :key="'explore-container-' + index" />
+      <ContainerView :container="container" v-for="(container, index) in subject.containers" :key="'explore-container-' + index" />
     </div>
     <div class="character-stats">
-      <Statblock :subject="world.player" :initiative="0" />
+      <Statblock :subject="subject" :initiative="0" />
     </div>
-    <EquipmentView class="character-equipment" :subject="world.player" />
+    <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" :subject="subject" />
   </div>
 </template>
 
@@ -31,20 +43,20 @@ import { Item, ItemKind, Equipment } from '@/game/items'
   }
 })
 
-export default class Explore extends Vue {
+export default class Profile extends Vue {
   @Prop()
-  world!: World
+  subject!: Creature
 
   useItem (item: Item): void {
     switch (item.kind) {
       case ItemKind.Key:
         break
       case ItemKind.Consumable:
-        item.actions[0].execute(this.world.player, this.world.player)
+        item.actions[0].execute(this.subject, this.subject)
         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)
+        this.subject.equip(item as Equipment, (item as Equipment).slot)
+        this.subject.items = this.subject.items.filter(i => item !== i)
         break
     }
   }
@@ -61,10 +73,12 @@ export default class Explore extends Vue {
   grid-template-areas:
   "exit      stats"
   "items     stats"
+  "items     perks"
   "items     equipment"
   "containers     containers";
-  grid-template-rows: 100px 1fr 1fr 0.25fr;
+  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;
@@ -102,10 +116,31 @@ export default class Explore extends Vue {
 }
 
 .character-stats {
-  background: #111;
+  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%;

src/components/Statblock.vue

@@ -60,6 +60,7 @@
       <button @click.stop="subject.perspective = POV.First">1st</button>
       <button @click.stop="subject.perspective = POV.Second">2nd</button>
       <button @click.stop="subject.perspective = POV.Third">3rd</button>
+      <button class="show-profile" @click="$emit('profile', subject)">Show profile</button>
     </div>
   </div>
 </template>

src/game/combat/perks.ts

@@ -4,7 +4,7 @@ import { Creature } from '../creature'
 import { TestCategory } from './tests'
 
 export abstract class Perk extends Effective {
-  constructor (name: TextLike, desc: TextLike) {
+  constructor (public name: TextLike, public desc: TextLike) {
     super()
   }
 }