add defeated image over the combatant image

reonZ · Nov 13, 2024 · d59b473 · d59b473
1 parent 6315343
commit d59b473
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/styles/_tracker.scss b/styles/_tracker.scss
@@ -88,24 +88,38 @@
                 display: flex;
                 overflow: hidden;
 
-                img {
+                > * {
                     position: absolute;
+                    display: flex;
+                }
+
+                img {
+                    inset: 0;
                     border: none;
                     pointer-events: none;
-                    transform: scale(var(--scaleX), var(--scaleY));
-                    mask-image: var(--mask);
+
+                    &.token-img {
+                        z-index: 0;
+                        transform: scale(var(--scaleX), var(--scaleY));
+                        mask-image: var(--mask);
+                    }
+
+                    &.defeated-img {
+                        z-index: 1;
+                        filter: invert(19%) sepia(93%) saturate(6259%) hue-rotate(357deg)
+                            brightness(70%) contrast(130%) drop-shadow(0px 0px 2px black);
+                    }
                 }
 
                 .alt {
-                    display: flex;
+                    inset: 0;
+                    z-index: 2;
                     font-size: 1.8em;
                     align-items: center;
-                    z-index: 1;
                 }
 
                 .targets {
-                    position: absolute;
-                    display: flex;
+                    z-index: 3;
                     justify-content: center;
                     gap: 1px;
 

diff --git a/templates/tracker/tracker.hbs b/templates/tracker/tracker.hbs
@@ -37,8 +37,11 @@
         data-initiative="{{combatant.initiative}}" style="--disposition-color: {{color}}">
 
         <div class="avatar">
-            <img src="{{combatant.texture.img}}"
+            <img class="token-img" src="{{combatant.texture.img}}"
                 style="--scaleX: {{combatant.texture.scaleX}}; --scaleY: {{combatant.texture.scaleY}}; --mask: {{combatant.texture.mask}};">
+            {{#if combatant.defeated}}
+            <img class="defeated-img" src="systems/pf2e/icons/damage/double.svg">
+            {{/if}}
             <div class="alt">
                 <i class="fa-solid fa-arrow-right-to-bracket"></i>
             </div>