Display mana and health in character sheet as well

src/character/templates/character/character_details.html

@@ -269,48 +269,60 @@
                         <td><span id="health-remaining">{{ character.health_remaining }}</span> / {{ character.health_max }}</td>
                     </tr>
                     <tr>
-                        <th scope="row">
-                            Points de mana
-                            {% if character|managed_by:user %}
-                                <div class="btn-group btn-group-sm float-end" role="group">
-                                    <button
-                                        hx-get="{% url "character:mana_change" pk=character.pk %}?value=ko"
-                                        hx-target="#mana-remaining"
-                                        hx-swap="innerHTML"
-                                        type="button"
-                                        class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
-                                    <button
-                                        hx-get="{% url "character:mana_change" pk=character.pk %}?value=-1"
-                                        hx-target="#mana-remaining"
-                                        hx-swap="innerHTML"
-                                        type="button"
-                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
-                                    <button
-                                        hx-get="{% url "character:mana_change" pk=character.pk %}?value=1"
-                                        hx-target="#mana-remaining"
-                                        hx-swap="innerHTML"
-                                        type="button"
-                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
-                                    <button
-                                        hx-get="{% url "character:mana_change" pk=character.pk %}?value=max"
-                                        hx-target="#mana-remaining"
-                                        hx-swap="innerHTML"
-                                        type="button"
-                                        class="btn btn-outline-success"><i class="fa-solid fa-battery-full"></i></button>
-                                </div>
-                            {% endif %}
-                        </th>
-                        <td data-bs-toggle="tooltip"
-                            data-bs-placement="left"
-                            {% if character.profile.mana_max_compute == 1 %}
-                                data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_magic }} (mod. {{ character.profile.magical_strength }})"
-                            {% elif character.profile.mana_max_compute == 2 %}
-                                data-bs-title="2 x {{ character.level }} (niveau) + {{ character.modifier_magic }} (mod. {{ character.profile.magical_strength }})"
-                            {% endif %}
-                        >
-                            <span id="mana-remaining">{{ character.mana_remaining }}</span> / {{ character.mana_max }}
+                        <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
+                                {% if character|managed_by:user %}
+                                    <div class="btn-group btn-group-sm float-end" role="group">
+                                        <button
+                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=ko"
+                                            hx-target="#mana-remaining"
+                                            hx-swap="innerHTML"
+                                            type="button"
+                                            class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
+                                        <button
+                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=-1"
+                                            hx-target="#mana-remaining"
+                                            hx-swap="innerHTML"
+                                            type="button"
+                                            class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
+                                        <button
+                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=1"
+                                            hx-target="#mana-remaining"
+                                            hx-swap="innerHTML"
+                                            type="button"
+                                            class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
+                                        <button
+                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=max"
+                                            hx-target="#mana-remaining"
+                                            hx-swap="innerHTML"
+                                            type="button"
+                                            class="btn btn-outline-success"><i class="fa-solid fa-battery-full"></i></button>
+                                    </div>
+                                {% endif %}
+                            </th>
+                            <td data-bs-toggle="tooltip"
+                                data-bs-placement="left"
+                                {% if character.profile.mana_max_compute == 1 %}
+                                    data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_magic }} (mod. {{ character.profile.magical_strength }})"
+                                {% elif character.profile.mana_max_compute == 2 %}
+                                    data-bs-title="2 x {{ character.level }} (niveau) + {{ character.modifier_magic }} (mod. {{ character.profile.magical_strength }})"
+                                {% endif %}
+                            >
+                                <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">
-                <div class="progress-bar bg-success" style="width: {{ character.health_remaining_percent|floatformat:"0" }}%">
-                    PV : {{ character.health_remaining }}/{{ character.health_max }}
-                </div>
-            </div>
+            {% include "character/snippets/character_details/health_bar.html" %}
             {% if character.mana_max > 0 %}
-                <div class="progress mt-1">
-                    <div class="progress-bar bg-primary" style="width: {{ character.mana_remaining_percent|floatformat:"0" }}%">
-                        PM : {{ character.mana_remaining }}/{{ character.mana_max }}
-                    </div>
+                <div class="mt-1">
+                    {% include "character/snippets/character_details/mana_bar.html" %}
                 </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(