Display mana and health in character sheet as well

src/character/templates/character/character_details.html

@@ -268,6 +268,12 @@
                         </th>
                         <td><span id="health-remaining">{{ character.health_remaining }}</span> / {{ character.health_max }}</td>
                     </tr>
+                    <tr>
+                        <td colspan="2">
+                            {% include "character/snippets/character_details/health_bar.html" %}
+                        </td>
+                    </tr>
+                    {% if character.mana_max > 0 %}
                         <tr>
                             <th scope="row">
                                 Points de mana
@@ -311,6 +317,12 @@
                                 <span id="mana-remaining">{{ character.mana_remaining }}</span> / {{ character.mana_max }}
                             </td>
                         </tr>
+                        <tr>
+                            <td colspan="2">
+                                {% include "character/snippets/character_details/mana_bar.html" %}
+                            </td>
+                        </tr>
+                    {% endif %}
                     <tr>
                         <th scope="row">
                             Points de récup.

src/character/templates/character/snippets/character_details/health_bar.html

@@ -0,0 +1,11 @@
+{% load character_extras %}
+<div class="progress" id="health-bar"
+    {% if character|managed_by:user %}
+        hx-get="{% url "character:get_health_bar" pk=character.pk %}"
+        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" }}%">
+        PV : {{ character.health_remaining }}/{{ character.health_max }}
+    </div>
+</div>

src/character/templates/character/snippets/character_details/mana_bar.html

@@ -0,0 +1,11 @@
+{% load character_extras %}
+<div class="progress" id="mana-bar"
+    {% if character|managed_by:user %}
+        hx-get="{% url "character:get_mana_bar" pk=character.pk %}"
+        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" }}%">
+        PM : {{ character.mana_remaining }}/{{ character.mana_max }}
+    </div>
+</div>

src/character/templates/character/snippets/characters_list/character_card.html

@@ -9,16 +9,10 @@
                 {{ character.race.name }} {{ character.profile.name }} niv. {{ character.level }}<br>
                 {{ character.get_gender_display }}, {{ character.age }} ans, {{ character.height_m }}m, {{ character.weight }}kg
             </p>
-            <div class="progress">
+            {% include "character/snippets/character_details/health_bar.html" %}
-                <div class="progress-bar bg-success" style="width: {{ character.health_remaining_percent|floatformat:"0" }}%">
-                    PV : {{ character.health_remaining }}/{{ character.health_max }}
-                </div>
-            </div>
             {% if character.mana_max > 0 %}
-                <div class="progress mt-1">
+                <div class="mt-1">
-                    <div class="progress-bar bg-primary" style="width: {{ character.mana_remaining_percent|floatformat:"0" }}%">
+                    {% include "character/snippets/character_details/mana_bar.html" %}
-                        PM : {{ character.mana_remaining }}/{{ character.mana_max }}
-                    </div>
                 </div>
             {% endif %}
             <p class="card-text mt-3">

src/character/urls.py

@@ -38,6 +38,16 @@ urlpatterns = [
         views.character_armor_change,
         name="armor_change",
     ),
+    path(
+        "<int:pk>/get_health_bar/",
+        views.character_get_health_bar,
+        name="get_health_bar",
+    ),
+    path(
+        "<int:pk>/get_mana_bar/",
+        views.character_get_mana_bar,
+        name="get_mana_bar",
+    ),
     path(
         "<int:pk>/get_initiative/",
         views.character_get_initiative,

src/character/views.py

@@ -80,7 +80,8 @@ def character_health_change(request, pk: int):
     value = get_updated_value(request, character.health_remaining, character.health_max)
     character.health_remaining = value
     character.save(update_fields=["health_remaining"])
-    return HttpResponse(value)
+    response = HttpResponse(value)
+    return trigger_client_event(response, "refresh_health_bar", {})
 
 
 @login_required
@@ -94,7 +95,8 @@ def character_mana_change(request, pk: int):
     value = get_updated_value(request, character.mana_remaining, character.mana_max)
     character.mana_remaining = value
     character.save(update_fields=["mana_remaining"])
-    return HttpResponse(value)
+    response = HttpResponse(value)
+    return trigger_client_event(response, "refresh_mana_bar", {})
 
 
 @login_required
@@ -200,6 +202,32 @@ def character_get_defense(request, pk: int):
     return HttpResponse(character.defense)
 
 
+@login_required
+def character_get_health_bar(request, pk: int):
+    character = get_object_or_404(
+        Character.objects.managed_by(request.user).only(
+            "health_max", "health_remaining"
+        ),
+        pk=pk,
+    )
+    context = {"character": character}
+    return render(
+        request, "character/snippets/character_details/health_bar.html", context
+    )
+
+
+@login_required
+def character_get_mana_bar(request, pk: int):
+    character = get_object_or_404(
+        Character.objects.managed_by(request.user).select_related("profile"),
+        pk=pk,
+    )
+    context = {"character": character}
+    return render(
+        request, "character/snippets/character_details/mana_bar.html", context
+    )
+
+
 @login_required
 def character_get_initiative(request, pk: int):
     character = get_object_or_404(