diff --git a/src/components/Explore.vue b/src/components/Explore.vue
index 4cc82f6..68c421c 100644
--- a/src/components/Explore.vue
+++ b/src/components/Explore.vue
@@ -8,8 +8,7 @@
{{ world.time.format("hh:mm:ss a") }}
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index ded663c..1f70aad 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -2,15 +2,27 @@
-
+
-
+
-
+
-
+
+
Perks
+
+
{{ perk.name }}
+
{{ perk.desc }}
+
+
+
+
@@ -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%;
diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue
index 3e6e099..bf6606d 100644
--- a/src/components/Statblock.vue
+++ b/src/components/Statblock.vue
@@ -60,6 +60,7 @@
+