Improve effects display

.idea/charasheet.iml

@@ -19,6 +19,7 @@
       <excludeFolder url="file://$MODULE_DIR$/src/test_reports" />
       <excludeFolder url="file://$MODULE_DIR$/src/character/tests/test_reports" />
       <excludeFolder url="file://$MODULE_DIR$/src/common/static/vendor" />
+      <excludeFolder url="file://$MODULE_DIR$/src/party/tests/test_reports" />
     </content>
     <orderEntry type="jdk" jdkName="Python 3.11 (charasheet)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />

src/common/static/style.css

@@ -22,18 +22,3 @@ img.profile-pic {
     max-height: 240px;
     object-fit: cover;
 }
-
-#effects-list {
-    display: flex;
-    flex-direction: row;
-}
-
-.effect {
-    width: 100px;
-    margin-right: 3em;
-    align-self: flex-end;
-}
-
-.effect .bar {
-    background-color: red;
-}

src/party/models.py

@@ -100,3 +100,10 @@ class BattleEffect(TimeStampedModel, models.Model):
     )
 
     objects = BattleEffectManager()
+
+    @property
+    def remaining_percent(self) -> float:
+        max_display_percent = 5
+        if self.remaining_rounds >= max_display_percent or self.remaining_rounds < 0:
+            return 100
+        return self.remaining_rounds / max_display_percent * 100

src/party/templates/party/party_details.html

@@ -11,7 +11,7 @@
         <a href="{% url "party:reset_stats" pk=party.pk %}" id="reset-stats">Réinitialiser
             les stats</a>
     </p>
-    <h2>Personnages</h2>
+    <h2 class="mt-4">Personnages</h2>
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
         {% for character in party.characters.all %}
             {% include "character/snippets/characters_list/character_card.html" %}
@@ -21,7 +21,7 @@
     </div>
     {% with party.invited_characters.all as invites %}
         {% if invites %}
-            <h2>Invités</h2>
+            <h2 class="mt-4">Invités</h2>
             <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
                 {% for character in invites %}
                     {% include "character/snippets/characters_list/character_card.html" %}
@@ -29,6 +29,6 @@
             </div>
         {% endif %}
     {% endwith %}
-    <h2>Combat</h2>
+    <h2 class="mt-4">Combat</h2>
     {% include "party/snippets/effects.html" %}
 {% endblock %}

src/party/templates/party/snippets/effect_card.html

@@ -0,0 +1,32 @@
+{% with rounds=effect.remaining_rounds %}
+    <div class="col">
+        <div class="card {% if rounds == 0 %}text-bg-secondary{% endif %} effect" data-id="{{ effect.pk }}">
+            <div class="card-body">
+                <h5 class="card-title">{{ effect.name }}</h5>
+                <h6 class="card-subtitle mb-2 {% if rounds != 0 %}text-muted{% endif %}">
+                    {{ effect.created_by.get_full_name|default:effect.created_by.username }} <i class="fa-solid fa-arrow-right"></i>
+                    {{ effect.target }}
+                </h6>
+                <p class="card-text">{{ effect.description }}</p>
+            </div>
+            <div class="card-footer text-center">
+                {% if rounds == 0 %}
+                    Terminé !
+                {% else %}
+                    <div class="progress" id="health-bar">
+                        <div class="progress-bar {% if effect.remaining_percent >= 60 %}bg-success{% elif effect.remaining_percent >= 30 %}bg-warning{% else %}bg-danger{% endif %}"
+                            style="width: {{ effect.remaining_percent|floatformat:"0" }}%">
+                            {% if rounds == -1 %}
+                                Permanent
+                            {% elif rounds == 1 %}
+                                Dernier
+                            {% else %}
+                                {{ rounds }} tours
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+{% endwith %}

src/party/templates/party/snippets/effects.html

@@ -9,14 +9,9 @@
             class="btn btn-primary"><i class="fa-solid fa-plus"></i> Ajouter un effet
         </button>
     </div>
-    <div id="effects-list">
+    <div id="effects-cards" class="row mt-1 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
         {% for effect in party.effects.all %}
-            <div class="effect">
-                <div style="height: calc({{ effect.remaining_rounds }}px * 20)" class="bar"></div>
-                <div class="name">{{ effect.name }}</div>
-                <div class="target">sur : {{ effect.target }}</div>
-                <div class="description text-secondary small">{{ effect.description }}</div>
-            </div>
+            {% include "party/snippets/effect_card.html" %}
         {% endfor %}
     </div>
 </div>