{% extends "layout.html" %} {% block content %}
<canvas id="chart"></canvas>

<div class="sep"></div>

<div class="desc">Toi aussi abuse des pouvoirs du Rézo avec les Metzthernets !</div>

<a href="{{url_for('play')}}">
    <div id="play" class="button center">
        JOUER
    </div>
</a>

<div class="sep"></div>

<div class="desc title">Historique personnel</div>

{% if bans_hist != [] %}
    <ul id="history">
        {% for entry in bans_hist %}
            <li class="{{ entry[0] }}" class="events">
                <span class="normal">{{ entry[1] }}</span>
            </li>
        {% endfor %}
    </ul>
    {% else %}
        <p>
            Rien pour l'instant
        </p>
{% endif %}

<div class="sep"></div>

<script type="text/javascript">
    $(function () {

        var ctx = document.getElementById("chart").getContext('2d');
        var data = {
            datasets: [{
                data: [ {{ stats[0] }}, {{ stats[1] }} ],
                backgroundColor: ['#ffd7d7', '#d7ebff']
            }],
            labels: ['Tranchés', 'Vivants']
        };

        var options = {
            cutoutPercentage: 40,
            rotation: -Math.PI,
            circumference: Math.PI,
            legend: { labels: { fontSize: 18 }},
            tooltips: { bodyFontSize: 18 }
        };

        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: options
        });

    });
</script>
{% endblock %}