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;
}