Refactor game results display and scoring logic in templates and CSS

base/static/css/main.css

@@ -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;
+}

game/templates/game/include/game_results.html

@@ -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 %}

game/templates/game/musikgame_detail.html

@@ -63,40 +63,5 @@
             {% endfor %}
         </ol>
     </details>
-    {% if musikgame.over %}
+    {% include "game/include/game_results.html" %}
-        <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 %}
 {% endblock content %}

game/templates/tags/game/answer.html

@@ -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 %}

game/templatetags/game.py

@@ -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