Refactor game results display and scoring logic in templates and CSS
This commit is contained in:
parent
e039889488
commit
2278345f32
5 changed files with 118 additions and 40 deletions
|
@ -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;
|
||||
}
|
||||
|
|
49
game/templates/game/include/game_results.html
Normal file
49
game/templates/game/include/game_results.html
Normal 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 %}
|
|
@ -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 %}
|
||||
|
|
16
game/templates/tags/game/answer.html
Normal file
16
game/templates/tags/game/answer.html
Normal 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
30
game/templatetags/game.py
Normal 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
|
Loading…
Add table
Add a link
Reference in a new issue