{% 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">
        <div style="width:100%;margin:20px;"> </div>
        
      <fieldset class="fieldset" id="listpart"><legend style="font-size:25px;">Liste des joueurs</legend>
        <ul id="players">
        {% for p in game.get_players() %}
        {% if p['username'] == admin %}
            <li id="player_{{ p['username'] }}"> {{ p['name'] }} ({{ p['username'] }}) (admin)</li>
        {% else %}
            {% if p['username'] == user.login %}
                <li id="player_{{ p['username'] }}"> {{ p['name'] }} ({{ p['username'] }}) <a href="javascript:leave()">(quitter le jeu)</a></li>
            {% elif user.login == admin %}
                <li id="player_{{ p['username'] }}"> {{ p['name'] }} ({{ p['username'] }}) <a href="javascript:ban('{{ p['username'] }}')">(bannir)</a></li>
            {% else %}
                <li id="player_{{ p['username'] }}"> {{ p['name'] }} ({{ p['username'] }})</li>
            {% endif %}
        {% endif %}
        {% endfor %}
        </ul>
      </fieldset>
        {% if user.login == admin %}
      <fieldset class="fieldset"><legend style="font-size:25px;">Gestion des participants</legend>
            <form action="javascript:addplayer()">
            Ajouter par nom d'utilisateur : 
            <input type="text" id="addplayer" />
            <input type="submit" value="Ajouter">
            </form>

            <br />
            Vous pouvez aussi donner l'adresse du jeu (lire dans la barre d'adresse).
        </fieldset>
       <fieldset class="fieldset" id="gostart"><legend style="font-size:25px;">Démarrer le jeu</legend>
            <a href="javascript:gostart()">Commencer</a>
      </fieldset>
        {% else %}
      <fieldset class="fieldset"><legend style="font-size:25px;">Info</legend>
            <p>Veuillez attendre que le maitre du jeu lance la partie...</p>
            <p>Rechargez la page si cela traine trop.</p>
        </fieldset>
        {% endif %}

{% endblock %}

{% block script %}

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

{% if game.fixplayers %}
var fix = true;
{% else %}
var fix = false;
{% endif %}

{% if user.login == admin %}
    if (players.length < 4){
        $('#gostart').hide();
    }
    else{
        $('#add_player').hide();
    }
{% endif %}

var socket = io(window.location.pathname);

socket.on('connect', function() {
    socket.emit('join', {data: 'I\'m connected!'});
});

socket.on('join', function(data){
    console.log('Join received', data['username'], data['name']);
    add_u(data['username'], data['name']);
    {% if user.login == admin %}
        if (players.length == 4){
            $('#gostart').show();
            $('#add_player').hide();
        }
    {% endif %}
});

var add_u = function(username, name){
    if(players.indexOf(username)<0){
        players.push(username);
        html = `<li id="player_${username}"> ${name} (${username})`
        if(username == '{{ admin }}'){html+= ` (admin)`;}
        else if(username == '{{ user.login }}'){html+= ` <a href="javascript:leave()">(quitter le jeu)</a>`;}
        {% if user.login == admin -%}
        else{html+= ` <a href="javascript:ban('${username}')">(bannir)</a>`;}
        {%- endif %}
        html += `</li>`
        $('#players').append(html)
        fix_f();
    }
}

socket.on('leave', function(data){
    console.log('Leave received', data['username']);
    username = data['username'];
    players.splice(players.indexOf(username), 1);
    $('#player_' + username).remove();

    {% if user.login == admin %}
        $('#gostart').hide();
        $('#add_player').show();
    {% else %}
    if (username == '{{ user.login }}'){
        console.log("Vous avez été banni");
        $('#listpart').prepend(`
          <div class="alert" id="alert0">
          <button type="button" class="close" onclick="javascript:hidealert('alert0')">&times;</button>
          Vous avez été banni !
        </div>
            `);
    }
    {% endif %}
});

socket.on('fixplayers', function(data){
    fix = True;
    fix_f();
});

var fix_f=function(){
    if(fix){
        $('#players li a').remove();
    {% if user.login == admin %}
        $('#add_player').hide();
    {% endif %}
    }
}
fix_f();

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

var leave = function(){
    socket.emit('leave', {});
    document.location.href ="/games";
}

{% if user.login == admin %}
var ban = function(username){
    socket.emit('ban', {'username': username});
}

var gostart = function(){
    socket.emit('fixplayers', {});
    document.location.href="/game/{{ game.id }}/start";
}

var addplayer = function(){
    username = $('#addplayer').val();
    if(username !=""){
        $('#addplayer').val('');
        socket.emit('add_player',{'username':username})
    }
}
{% endif %}
</script>
{% endblock %}