diff --git a/src/components/Combat.vue b/src/components/Combat.vue index 4e4accb..4519cc2 100644 --- a/src/components/Combat.vue +++ b/src/components/Combat.vue @@ -2,10 +2,10 @@
{{ encounter.currentMove.name }}
- +
- +
diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue index 5366104..3adcc4b 100644 --- a/src/components/Statblock.vue +++ b/src/components/Statblock.vue @@ -4,7 +4,9 @@
-
+
+ +

@@ -273,9 +275,25 @@ a { z-index: 0; } +.statblock[data-destroyed] > .statblock-content { + animation: destroyed 1s; + animation-fill-mode: both; + overflow: hidden; +} + +@keyframes destroyed { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + .statblock[data-eaten] .statblock-shader-eaten { - background: green; - opacity: 0.35; + background: repeating-linear-gradient(45deg, transparent, transparent 20px, green 20px, green 40px, transparent 40px); + opacity: 0.5; } .statblock[data-active] .statblock-shader-selected { @@ -289,16 +307,26 @@ a { } .statblock[data-current-turn] .statblock-shader-current-turn { - background: #0f0; - opacity: 0.3; + border: 4px dashed white; + border-radius: 8px; + width: calc(100% - 8px); + heighT: calc(100% - 8px); + opacity: 0.75; } .statblock[data-disabled] { color: #888; } +.statblock-shader-dead i { + font-size: 100pt; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); +} + .statblock[data-dead] .statblock-shader-dead { - background: red; + background: repeating-linear-gradient(45deg, red, red 20px, transparent 20px, transparent 40px, red 40px); opacity: 0.50; }