Belote/templates/game_join.html

167 lines
4.7 KiB
HTML
Raw Normal View History

2020-04-25 10:08:19 +00:00
{% 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"><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();
{% 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 %}