Smarter/smarter/templates/game/results.j2

{% extends "base.j2" %}

{% block title %} Game results {% endblock %}

{% block head %}

<script src="https://cdn.socket.io/4.8.1/socket.io.min.js" integrity="sha384-mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRTMh1RR0Q6+" crossorigin="anonymous"></script>
{% if is_owner %}
<script src="{{ url_for('static', filename='js/results_owner.js') }}"></script>
{% else %}
<script src="{{ url_for('static', filename='js/results.js') }}"></script>
{% endif %}

{% endblock %}

{% block main %}
<div class="container text-center">
    <div class="row mt-3 justify-content-between">
        <h1 class="text-primary-emphasis col"> Question set: {{ name }} </h1>
        {% if is_owner %}
        <div class="col">
            <button id="deleteGame" class="btn btn-outline-danger">Delete game</button>
        </div>
        {% else %}
        <h1 class="text-primary-emphasis col"> Owned by <strong>{{ owner }}</strong> </h1>
        <div class="col">
            <button id="leaveGame" class="btn btn-outline-danger">Leave game</button>
        </div>
        {% endif %}
    </div>
    <hr class="border-primary">
    {% if not is_owner %}
    <div class="row justify-content-center">
        <div class="d-none col-md-5 mt-1 alert bg-info-subtle text-success border-success-subtle" id="gameDeletedAlert">
            This game has been deleted by the owner. Results will not be accessible after exiting or refreshing the page.
        </div>
    </div>
    {% endif %}

    <h1 class="text-primary-emphasis"> Leaderboard </h1>

    <table class="table table-info border-primary-subtle">
        <thead>
            <tr>
                <th scope="col" class="text-primary-emphasis">#</th>
                <th scope="col" class="text-primary-emphasis">Username</th>
                <th scope="col" class="text-primary-emphasis">Correct answers</th>
            </tr>
        </thead>
        <tbody>
            {% for player in players %}
            <tr>
                <th scope="row" class="text-primary-emphasis">{{ loop.index }}</th>
                <td class="text-primary-emphasis">{{ player.username }}</td>
                <td class="text-primary-emphasis">{{ player.correct_answers }} / {{ total }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}