Fixing the Low HP/Dead Display (#92)

* Fix name and HP colouring for low and 0 HP * Safety on negative numbers --------- Co-authored-by: Joshua Moon <[email protected]>
DevChatter · Feb 16, 2023 · e343b42 · e343b42
1 parent 1d4bb61
commit e343b42
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/InteractiveSeven.Web/wwwroot/Status/Index.html b/src/InteractiveSeven.Web/wwwroot/Status/Index.html
@@ -124,7 +124,7 @@
             <span v-bind:class="'name ' + (data.stats.currentHp == 0? 'dead ' : '') + (data.stats.currentHp == 7777? 'rainbow ' : '')">{{data.name}}</span>
             <span class="aqua">LV </span><span class="level">{{data.stats.level}}</span> <span class="status"></span>
             <span class="status" v-if="data.stats.status.length > 0"> {{data.stats.status[data.statusIndex]}}</span><br />
-            <span class="aqua">HP </span><span v-bind:class="'current-hp ' + (data.stats.currentHp > 0 && data.stats.currentHp < data.stats.maxHp / 4? 'hp-low' : '')">{{data.stats.currentHp}}</span> / <span class="max-hp">{{data.stats.maxHp}}</span><br />
+            <span class="aqua">HP </span><span v-bind:class="'current-hp ' + (data.stats.currentHp > 0 && data.stats.currentHp < data.stats.maxHp / 4? 'hp-low' : '') + (data.stats.currentHp <= 0 ? 'dead ' : '')">{{data.stats.currentHp}}</span> / <span class="max-hp">{{data.stats.maxHp}}</span><br />
             <span class="aqua">MP </span><span class="current-mp">{{data.stats.currentMp}}</span> / <span class="max-mp">{{data.stats.maxMp}}</span><br />
             <div class="slide active-slide" v-if="slide === 'materia'">
                 <ul v-bind:class="'wpn slots ' + (data.weapon.growth === 0? 'no-growth' : '')">

diff --git a/src/InteractiveSeven.Web/wwwroot/css/site.css b/src/InteractiveSeven.Web/wwwroot/css/site.css
@@ -94,8 +94,8 @@
     color: #c71585 !important;
 }
 
-.hp-low .current-hp, .mp-low:not(.dead) .current-mp {
-    color: #ffa500;
+.hp-low:not(.dead), .mp-low:not(.dead) {
+    color: #ffa500 !important;
 }
 
 
@@ -222,8 +222,8 @@
     width: 60px;
 }
 
-.ff7 .text .character.dead * {
-    color: #ab0000;
+.dead {
+    color: #ab0000 !important;
 }
 
 .ff7 {