From 6abf6bec8bf2aea7647725f31b694e5745546a6d Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Wed, 9 Nov 2022 21:01:36 +0100
Subject: [PATCH] Vary health and mana bar color according to percentage
 remaining

---
 .../character/snippets/character_details/health_bar.html        | 2 +-
 .../character/snippets/character_details/mana_bar.html          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/character/templates/character/snippets/character_details/health_bar.html b/src/character/templates/character/snippets/character_details/health_bar.html
index ed1b7e9..f9b644b 100644
--- a/src/character/templates/character/snippets/character_details/health_bar.html
+++ b/src/character/templates/character/snippets/character_details/health_bar.html
@@ -5,7 +5,7 @@
         hx-trigger="refresh_health_bar from:body"
         hx-swap="outerHTML"
     {% endif %}>
-    <div class="progress-bar bg-success" style="width: {{ character.health_remaining_percent|floatformat:"0" }}%">
+    <div class="progress-bar {% if character.health_remaining_percent > 60 %}bg-success{% elif character.health_remaining_percent > 30 %}bg-warning{% else %}bg-danger{% endif %}" style="width: {{ character.health_remaining_percent|floatformat:"0" }}%">
         PV : {{ character.health_remaining }}/{{ character.health_max }}
     </div>
 </div>
diff --git a/src/character/templates/character/snippets/character_details/mana_bar.html b/src/character/templates/character/snippets/character_details/mana_bar.html
index 64d32d5..3d7d131 100644
--- a/src/character/templates/character/snippets/character_details/mana_bar.html
+++ b/src/character/templates/character/snippets/character_details/mana_bar.html
@@ -5,7 +5,7 @@
         hx-trigger="refresh_mana_bar from:body"
         hx-swap="outerHTML"
     {% endif %}>
-    <div class="progress-bar bg-primary" style="width: {{ character.mana_remaining_percent|floatformat:"0" }}%">
+    <div class="progress-bar {% if character.mana_remaining_percent > 60 %}bg-primary{% elif character.mana_remaining_percent > 30 %}bg-warning{% else %}bg-danger{% endif %}" style="width: {{ character.mana_remaining_percent|floatformat:"0" }}%">
         PM : {{ character.mana_remaining }}/{{ character.mana_max }}
     </div>
 </div>