mirror of
https://github.com/Crocmagnon/charasheet.git
synced 2024-11-05 14:23:53 +01:00
Improve effects display
This commit is contained in:
parent
5426c4ac3c
commit
27afcc7791
6 changed files with 45 additions and 25 deletions
|
@ -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" />
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 %}
|
||||
|
|
32
src/party/templates/party/snippets/effect_card.html
Normal file
32
src/party/templates/party/snippets/effect_card.html
Normal file
|
@ -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 %}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue