Refactor game results display and scoring logic in templates and CSS

This commit is contained in:
Edgar P. Burkhart 2025-06-15 15:46:35 +02:00
parent e039889488
commit 2278345f32
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 118 additions and 40 deletions

View file

@ -17,7 +17,7 @@ form a[role="button"] {
width: 100%;
}
i.owner {
i.owner, .gold {
color: var(--pico-color-amber-200);
}
@ -160,10 +160,28 @@ table select {
color: var(--pico-color-sand-300);
}
}
.score {
font-weight: 900;
color: var(--pico-color-zinc-500);
margin-left: .5em;
}
}
.score {
font-weight: 900;
color: var(--pico-color-zinc-500);
}
.correct {
.score, i {
color: var(--pico-color-lime-200);}
}
.wrong {
.score, i {
color: var(--pico-color-red-500);}
}
table.results {
white-space: nowrap;
}
.sc i {
margin-right: .5em;
}

View file

@ -0,0 +1,49 @@
{% load game %}
{% if musikgame.over %}
<h2>
<i class="ri-list-ordered"></i> Résultats
</h2>
<details open>
<summary role="button">
<i class="ri-list-ordered-2"></i> Résultats
</summary>
<div class="overflow-auto">
<table class="striped results">
<thead>
<tr>
<th>
<i class="ri-list-ordered-2"></i>
</th>
<th>
<i class="ri-music-2-fill"></i> Musique
</th>
<th>
<i class="ri-user-line"></i> Joueur
</th>
{% for player in musikgame.musicgameresults_set.all %}
<th>{{ player.player.username }}</th>
<th class="sc">
{% if forloop.first %}<i class="ri-medal-fill gold"></i>{% endif %}
<span class="score">{{ player.score }}</span>
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for music in musikgame.musicgameorder_set.all %}
<tr>
<td>{{ music.order }}</td>
<td>
<a href="https://youtu.be/{{ music.music_video.yt_id }}">{{ music.music_video.title }}</a>
</td>
<td>{{ music.player }}</td>
{% for player in musikgame.musicgameresults_set.all %}
{% answer player music %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</details>
{% endif %}

View file

@ -63,40 +63,5 @@
{% endfor %}
</ol>
</details>
{% if musikgame.over %}
<h2>
<i class="ri-list-ordered"></i> Résultats
</h2>
<details open>
<summary role="button">
<i class="ri-list-ordered-2"></i> Résultats
</summary>
<table class="striped">
<thead>
<tr>
<th>
<i class="ri-list-ordered-2"></i>
</th>
<th>
<i class="ri-music-2-fill"></i> Musique
</th>
<th>
<i class="ri-user-line"></i> Joueur
</th>
</tr>
</thead>
<tbody>
{% for music in musikgame.musicgameorder_set.all %}
<tr>
<td>{{ music.order }}</td>
<td>
<a href="https://youtu.be/{{ music.music_video.yt_id }}">{{ music.music_video.title }}</a>
</td>
<td>{{ music.player }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</details>
{% endif %}
{% include "game/include/game_results.html" %}
{% endblock content %}

View file

@ -0,0 +1,16 @@
{% if empty %}
<td class="empty"></td>
<td class="empty sc">
<i class="ri-checkbox-blank-circle-fill"></i><span class="score">{{ score }}</span>
</td>
{% elif correct %}
<td class="correct">{{ answer }}</td>
<td class="correct sc">
<i class="ri-checkbox-circle-fill"></i><span class="score">{{ score }}</span>
</td>
{% else %}
<td class="wrong">{{ answer }}</td>
<td class="wrong sc">
<i class="ri-close-circle-fill"></i><span class="score">{{ score }}</span>
</td>
{% endif %}

30
game/templatetags/game.py Normal file
View file

@ -0,0 +1,30 @@
from django import template
from .. import models
register = template.Library()
@register.inclusion_tag("tags/game/answer.html")
def answer(player, music):
res = {
"answer": "",
"correct": False,
"score": 0,
"empty": False,
}
answer = models.MusicGameAnswer.objects.filter(
player=player.player, game=music
).first()
if answer:
res["answer"] = answer.answer
res["correct"] = answer.answer == music.player
if music.player == player.player:
res["score"] = 0 if res["correct"] else "500"
else:
res["score"] = music.value if res["correct"] else 0
else:
res["empty"] = True
return res