diff --git a/src/App.vue b/src/App.vue index 9733f41..42ea4e6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,15 @@
- +
@@ -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 + } } diff --git a/src/components/Combat.vue b/src/components/Combat.vue index ebafcd1..c29d61f 100644 --- a/src/components/Combat.vue +++ b/src/components/Combat.vue @@ -1,11 +1,11 @@ @@ -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 @@ + diff --git a/src/game/combat/perks.ts b/src/game/combat/perks.ts index 81a5466..ed820da 100644 --- a/src/game/combat/perks.ts +++ b/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() } }