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: {{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;
+}