diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue index 1c14cef..d9d76dc 100644 --- a/src/components/Statblock.vue +++ b/src/components/Statblock.vue @@ -13,6 +13,14 @@
{{ subject.desc }}
+
+ +
+
{{ status.name }}
+
{{ status.desc }}
+
+
+
@@ -44,7 +52,6 @@
-
Status: {{subject.status}}
@@ -57,9 +64,9 @@ import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator' import { Creature } from '@/game/entity' import { POV } from '@/game/language' -import { Stats, Stat, StatIcons, StatDescs, Vigor, VigorIcons, VigorDescs, VoreStatDescs, VoreStatIcons } from '@/game/combat' +import { Stats, Stat, StatIcons, StatDescs, Vigor, VigorIcons, VigorDescs, VoreStatDescs, VoreStatIcons, VisibleStatus } from '@/game/combat' import ContainerView from './ContainerView.vue' -import tippy, { createSingleton } from 'tippy.js' +import tippy, { delegate, createSingleton } from 'tippy.js' import 'tippy.js/dist/tippy.css' @Component({ @@ -119,6 +126,22 @@ export default class Statblock extends Vue { }) createSingleton(tippyInstances, { delay: 500 }) } + + @Watch('subject.status') + private statusChanged (a: Array) { + this.$nextTick(() => { + const icons = Array.from(this.$el.querySelectorAll(".statblock-status-icons i")) as Array + + icons.map(elem => { + const tooltip = elem.querySelector(".tooltip-template") as HTMLElement + console.log(elem, tooltip) + + return tippy(elem, { + content: tooltip + }) + }) + }) + } } @@ -269,6 +292,16 @@ a { .statblock[data-active] .if-not-selected { display: none; } + +.statblock-status-icons { + display: flex; + justify-content: space-evenly; + min-height: 16pt; +} + +.statblock-status-icons > i { + font-size: 16pt; +}