Belote/templates/game_start.html
2020-04-25 12:08:19 +02:00

89 lines
2.0 KiB
HTML

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