{% extends "base.html" %}

{% block title %} Jeu {% endblock %}

{% block titre %} Jeu {{ game.name }} {% endblock %}

{% block head %}
{% include ['scripts-perso.html', 'scripts.html'] %}
{% endblock %}

{% block contenu %}
<div id="zone-de-contenu">
      <fieldset class="fieldset"><legend style="font-size:25px;">Liste des joueurs</legend>
        <p>Faites les équipes :</p>
        <ul id="players">
        </ul>
      </fieldset>
      <fieldset class="fieldset"><legend style="font-size:25px;">Commencer</legend>
            <a href="javascript:gostart()">Commencer</a>
      </fieldset>
</div>

{% endblock %}

{% block script %}
<script type="text/javascript" charset="utf-8">
var players_order = [
    {% for p in game.get_players() %}
    '{{ p['username'] }}',
    {% endfor %}
];
var players = {
    {% for p in game.get_players() %}
    '{{ p['username'] }}': '{{ p['name'] }}',
    {% endfor %}
};

var put_players = function(){
    var html = '';
    for(i=0;i<players_order.length;i++){
        html+= `<li> <div style="float:right"> <a href="javascript:up(${i})">Monter</a> &nbsp; <a href="javascript:down(${i})">Descendre</a></div> ${players[players_order[i]]} ( ${players_order[i]} ) <div style="clear:both"></div></li>`;
    }
    $('#players').html(html);
}

put_players();

var up=function(i){
    t = players_order[i];
    if(i==0){
        n=players_order.length-1;
    }else{
        n = i-1;
    }
    players_order[i] = players_order[n]
    players_order[n] = t
    put_players();
}

var down = function(i){
    t = players_order[i];
    if(i==players_order.length-1){
        n=0;
    }else{
        n = i+1;
    }
    players_order[i] = players_order[n]
    players_order[n] = t
    put_players();
}

var socket = io('/game/{{ game.id }}/join');

socket.on('connect', function() {
});


socket.on('start', function(data){
    document.location.href="/game/{{ game.id }}";
});


var gostart = function(){
    socket.emit('start', {'order':players_order});
    document.location.href="/game/{{ game.id }}";
}
</script>
{% endblock %}