Enhance several visual things and count belote better

This commit is contained in:
Léo 2020-05-08 20:40:22 +02:00
parent 48d9004ec6
commit b949982cae
13 changed files with 536 additions and 485 deletions

View File

@ -24,6 +24,10 @@ L'ensemble de ce dépôt est sous licence GPL v3.
* Le dossier `templates` contient les template jinja2 pour le rendu web
* Le dossier `static` contient les scripts, images et feuilles de style
Si aucun utilisateur n'existe dans la base de donnée, un premier utilisateur
de login `admin` et de mot de passe `admin` est créé.
A vous de changer le mot de passe avant mise en ligne !
## Licence
This program is free software: you can redistribute it and/or modify

View File

@ -78,8 +78,8 @@ def home():
@app.route('/login', methods=['GET', 'POST'])
def login():
if fll.current_user:
flask.redirect(URL_DEFAULT)
if fll.current_user.is_authenticated:
return flask.redirect(URL_DEFAULT)
if flask.request.method=="POST":
username = flask.request.form['username']
password = flask.request.form['password']
@ -94,7 +94,7 @@ def login():
return flask.redirect(URL_DEFAULT)
else:
app.logger.warning('Login fail for user {} from {}'.format(user, flask.request.remote_addr))
flask.flash('Invalid username/password combination')
flask.flash('Nom d\'utilisateur ou mot de passe incorrect')
return flask.render_template('login.html', user=None)
@app.route('/logout')
@ -417,5 +417,5 @@ def delete_game(user=None, game=None):
if __name__ == '__main__':
socketio.run(app, debug=True, host='127.0.0.1', port=8080 )
socketio.run(app, debug=True, host='0.0.0.0', port=8080 )

View File

@ -147,7 +147,7 @@ class CustomNamespaceJoin(fio.Namespace):
if self.game().isadmin(current_user):
if 'username' is not None:
if self.game().leave(username):
fio.emit('leave', {'username':username})
fio.emit('leave', {'username':username}, broadcast=True)
def on_fixplayers(self, data):
if self.game().isadmin(current_user):

4
db.py
View File

@ -302,9 +302,9 @@ class Game(db.Model):
# Chute
if self.get_player(self.preneur).nr %2 ==0 and self.points_0 < self.points_1:
self.points_0 = belote_0
self.points_1 = 162
self.points_1 = 162 + belote_1
if self.get_player(self.preneur).nr %2 ==1 and self.points_1 < self.points_0:
self.points_0 = 162
self.points_0 = 162 + belote_0
self.points_1 = belote_1
# Retirer la carte du jeu !

View File

@ -1,73 +1,77 @@
/*************************
la Belote
**************************/
var go = function(url) {
document.location.href=url;
}
$(document).ready(function() {
/*==============================
listeners à activer à ready
===============================*/
document.getElementById("username").addEventListener("click",function() {apparaitDisparaitMenu('username-items','username-fleche')});
var options = document.getElementById("options");
if(options){
options.addEventListener("click",function() {apparaitDisparaitAccordeon('options-valeur','options-fleche')});
}
var derpli = document.getElementById("dernier-pli")
if(derpli){
derpli.addEventListener("click",function() {apparaitDisparaitAccordeon('dernier-pli-valeur','dernier-pli-fleche')});
}
/*==============================
fonctions
===============================*/
/*
fonction apparaitDisparaitUserAttr
apparition/disparition d'un menu
*/
function apparaitDisparaitMenu (idMenu,idFleche) {
var element = document.getElementById(idMenu);
if(element.style.visibility == "hidden" || element.style.visibility == "") {
document.getElementById(idMenu).style.visibility = "visible";
}
else {
document.getElementById(idMenu).style.visibility = "hidden";
};
var elementFleche = document.getElementById(idFleche);
var splitElement = elementFleche.src.split('/');
var lastElement = splitElement[splitElement.length-1];
if(lastElement == "fleche-bas.gif") {
document.getElementById(idFleche).src = "/static/fleche-haut.gif";
}
else {
document.getElementById(idFleche).src = "/static/fleche-bas.gif";
}
return(0);
}
function apparaitDisparaitAccordeon (idZone,idFleche) {
var element = document.getElementById(idZone);
if(element.style.display == "none" || element.style.display == "") {
document.getElementById(idZone).style.display = "block";
}
else {
document.getElementById(idZone).style.display = "none";
};
var elementFleche = document.getElementById(idFleche);
var splitElement = elementFleche.src.split('/');
var lastElement = splitElement[splitElement.length-1];
if(lastElement == "fleche-bas.gif") {
document.getElementById(idFleche).src = "/static/fleche-haut.gif";
}
else {
document.getElementById(idFleche).src = "/static/fleche-bas.gif";
}
return(0);
}
/* fin de $(document).ready() */
});
/*************************
la Belote
**************************/
var go = function(url) {
document.location.href=url;
}
var hidealert = function(id){
$('#'+id).hide();
}
$(document).ready(function() {
/*==============================
listeners à activer à ready
===============================*/
document.getElementById("username").addEventListener("click",function() {apparaitDisparaitMenu('username-items','username-fleche')});
var options = document.getElementById("options");
if(options){
options.addEventListener("click",function() {apparaitDisparaitAccordeon('options-valeur','options-fleche')});
}
var derpli = document.getElementById("dernier-pli")
if(derpli){
derpli.addEventListener("click",function() {apparaitDisparaitAccordeon('dernier-pli-valeur','dernier-pli-fleche')});
}
/*==============================
fonctions
===============================*/
/*
fonction apparaitDisparaitUserAttr
apparition/disparition d'un menu
*/
function apparaitDisparaitMenu (idMenu,idFleche) {
var element = document.getElementById(idMenu);
if(element.style.visibility == "hidden" || element.style.visibility == "") {
document.getElementById(idMenu).style.visibility = "visible";
}
else {
document.getElementById(idMenu).style.visibility = "hidden";
};
var elementFleche = document.getElementById(idFleche);
var splitElement = elementFleche.src.split('/');
var lastElement = splitElement[splitElement.length-1];
if(lastElement == "fleche-bas.gif") {
document.getElementById(idFleche).src = "/static/fleche-haut.gif";
}
else {
document.getElementById(idFleche).src = "/static/fleche-bas.gif";
}
return(0);
}
function apparaitDisparaitAccordeon (idZone,idFleche) {
var element = document.getElementById(idZone);
if(element.style.display == "none" || element.style.display == "") {
document.getElementById(idZone).style.display = "block";
}
else {
document.getElementById(idZone).style.display = "none";
};
var elementFleche = document.getElementById(idFleche);
var splitElement = elementFleche.src.split('/');
var lastElement = splitElement[splitElement.length-1];
if(lastElement == "fleche-bas.gif") {
document.getElementById(idFleche).src = "/static/fleche-haut.gif";
}
else {
document.getElementById(idFleche).src = "/static/fleche-bas.gif";
}
return(0);
}
/* fin de $(document).ready() */
});

View File

@ -1,388 +1,411 @@
/* =========================
la Belote
========================= */
/****************/
/* Reset */
/****************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
/****************/
/* généralités */
/****************/
body {
margin: 0px;
background-color: #13995E;
}
div.clear {
clear: both;
}
div.clearfix-head::after {
content:"";
clear: both;
display: table;
border: 1px solid black;
width: 100%;
}
div.clearfix::after{
content:"";
clear: both;
display: table;
}
div, p, li, a, th, td {
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 17px;
color: #092E1E;
}
/****************/
/* conteneur */
/****************/
#conteneur {
margin-top: 8px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 600px;
width: 1200px;
/* border: 1px solid #092E1E; */
}
/****************/
/* entete */
/****************/
#entete {
position: relative;
height: 66px;
margin: 2px;
/*
border: 1px solid #092E1E;
*/
}
#logo {
margin: 2px 10px 2px 2px;
float: left;
}
#logo img {
height: 60px;
width: 60px;
display: block;
margin-left: auto;
margin-right: auto;
}
#titre {
width: 55%;
line-height: 60px;
margin: 2px 15px 2px 2px;
text-align: center;
font-size: 140%;
font-weight: bold;
float: left;
}
#username {
width: 20%;
height: 60px;
line-height: 60px;
margin: 2px 15px 2px 30px;
float: right;
font-size: 140%;
font-weight: bold;
text-align: right;
}
#username-fleche {
height: 14px;
width: 14px;
cursor: pointer;
padding-left: 10px;
vertical-align: baseline;
}
#username-items {
position: absolute;
top: 68px;
right: 0px;
width: 180px;
visibility: hidden;
margin-top: 2px ;
padding: 5px;
border: 1px solid #092E1E;
overflow: hidden;
z-index: 100;
background-color: #b7a86b;
}
.menu-item:hover {
cursor: pointer;
background-color: #15A160;
}
/****************/
/* zone-de-contenu */
/****************/
#zone-de-contenu {
width:50%;
margin:auto;
}
#zone-de-contenu>div {
margin:auto;
}
.tablelist {
width:100%;
}
/****************/
/* zone-de-jeu */
/****************/
#zone-de-jeu {
height: 438px;
margin: 2px;
/*
border: 1px solid #092E1E;
*/
}
#plateau {
height: 320px;
width: 740px;
position: relative;
margin: 3px;
}
#joueur-0 {
position: absolute;
top: 55px;
left: 190px;
text-align: right;
}
#joueur-1 {
position: absolute;
top: 145px;
left: 80px;
text-align: right;
}
#joueur-2 {
position: absolute;
top: 245px;
left: 190px;
text-align: right;
}
#joueur-3 {
position: absolute;
top: 145px;
left: 500px;
}
#jeu-0 {
position: absolute;
top: 30px;
left: 300px;
}
#jeu-1 {
position: absolute;
top: 120px;
left: 190px;
}
#jeu-2 {
position: absolute;
top: 220px;
left: 300px;
}
#jeu-3 {
position: absolute;
top: 120px;
left: 420px;
}
#suivant {
position: absolute;
bottom: 15px;
right: 40px;
}
#suivant input {
width: 130px;
}
#ov {
height: 310px;
width: 390px;
padding: 5px 25px 5px 25px;
position: relative;
top: -322px;
left: 746px;
margin: 2px;
border: 1px solid #092E1E;
}
#table-atout {
width: 98%;
}
#table-atout td {
padding: 4px;
text-align: center;
vertical-align: middle;
}
#atout {
margin: 0px auto 0px auto;
}
#choix {
height: 150px;
margin-top: 20px;
padding: 6px;
overflow-x: hidden;
overflow-y: auto;
}
#options-fleche {
width: 11px;
height: 11px;
float: right;
cursor: pointer;
vertical-align: baseline;
}
#options-valeur {
display: none;
}
#dernier-pli-fleche {
width: 11px;
height: 11px;
float: right;
cursor: pointer;
vertical-align: baseline;
}
#dernier-pli-valeur {
display: none;
}
#dernier-pli {
margin-top: 10px;
}
#dernier-pli-valeur {
padding-left: 50px;
}
#jeu-en-main {
height: 76px;
width: 642px;
position: relative;
top: -320px;
left: 0px;
margin: 2px;
padding: 15px 58px 15px 40px;
border: 1px solid #092E1E;
}
#a-vous {
float: left;
width: 90px;
height: 59px;
padding-top: 20px;
text-align: center;
margin-right: 20px;
visibility: hidden;
background:white;
font-weight: bold;
}
#points {
height: 98px;
width: 390px;
position: relative;
top: -430px;
left: 746px;
margin: 2px;
border: 1px solid #092E1E;
padding: 4px 25px 4px 25px;
}
#points p {
text-align: center;
margin: 5px 0px 5px 0px;
}
#points table {
width: 98%;
border-collapse: collapse;
border: 1px solid #092E1E;
}
#points table td {
padding: 0px 2px 0px 2px;
text-align: center;
border: 1px solid #092E1E;
}
.joueur {
width: 90px;
overflow: hidden;
text-decoration: underscore;
}
.carte {
height: 77px;
width: 53px;
/* carte : hauteur = 1,54 * largueur; */
border: 1px solid #092E1E;
background-color: #117F4A;
}
.carte-en-main, .carte-dernier-pli {
float: left;
margin-right: 9px;
}
.item-choix {
padding: 4px;
border: 1px solid #092E1E;
}
.item-choix-valeur {
padding: 4px;
border-right: 1px solid #092E1E;
border-bottom: 1px solid #092E1E;
border-left: 1px solid #092E1E;
}
/************************/
/* zone-de-conversation */
/************************/
#zone-de-conversation {
height: 84px;
margin: 2px;
position: relative;
}
#chat {
width: 61%;
height: 87%;
float: left;
background-color: #C4E8D7;
margin: 2px 15px 2px 2px;
border-top: 2px solid #888;
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
border-left: 2px solid #888;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
}
#message {
width: 34%;
float: right;
margin: 1px 15px 2px 2px;
position: absolute;
right: 2px;
top: 3px;
}
#message p {
padding-bottom: 4px;
}
#texte-msg {
width:80%;
background-color: #C4E8D7;
margin-right: 5px;
}
button#add{
min-width:180px;
margin:auto;
padding:10px;
background: #b7a86b;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
display:block;
}
thead{
font-weight: bold;
}
fieldset.fieldset {
border:1px solid green;
padding:30px;
margin:20px;
}
/* =========================
la Belote
========================= */
/****************/
/* Reset */
/****************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
/****************/
/* généralités */
/****************/
body {
margin: 0px;
background-color: #13995E;
}
div.clear {
clear: both;
}
div.clearfix-head::after {
content:"";
clear: both;
display: table;
border: 1px solid black;
width: 100%;
}
div.clearfix::after{
content:"";
clear: both;
display: table;
}
div, p, li, a, th, td {
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 17px;
color: #092E1E;
}
/****************/
/* conteneur */
/****************/
#conteneur {
margin-top: 8px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 600px;
width: 1200px;
/* border: 1px solid #092E1E; */
}
/****************/
/* entete */
/****************/
#entete {
position: relative;
height: 66px;
margin: 2px;
/*
border: 1px solid #092E1E;
*/
}
#logo {
margin: 2px 10px 2px 2px;
float: left;
}
#logo img {
height: 60px;
width: 60px;
display: block;
margin-left: auto;
margin-right: auto;
}
#titre {
width: 55%;
line-height: 60px;
margin: 2px 15px 2px 2px;
text-align: center;
font-size: 140%;
font-weight: bold;
float: left;
}
#username {
width: 20%;
height: 60px;
line-height: 60px;
margin: 2px 15px 2px 30px;
float: right;
font-size: 140%;
font-weight: bold;
text-align: right;
}
#username-fleche {
height: 14px;
width: 14px;
cursor: pointer;
padding-left: 10px;
vertical-align: baseline;
}
#username-items {
position: absolute;
top: 68px;
right: 0px;
width: 180px;
visibility: hidden;
margin-top: 2px ;
padding: 5px;
border: 1px solid #092E1E;
overflow: hidden;
z-index: 100;
background-color: #b7a86b;
}
.menu-item:hover {
cursor: pointer;
background-color: #15A160;
}
/****************/
/* zone-de-contenu */
/****************/
#zone-de-contenu {
width:50%;
margin:auto;
}
#zone-de-contenu>div {
margin:auto;
}
.tablelist {
width:100%;
}
/****************/
/* zone-de-jeu */
/****************/
#zone-de-jeu {
height: 438px;
margin: 2px;
/*
border: 1px solid #092E1E;
*/
}
#plateau {
height: 320px;
width: 740px;
position: relative;
margin: 3px;
}
#joueur-0 {
position: absolute;
top: 55px;
left: 190px;
text-align: right;
}
#joueur-1 {
position: absolute;
top: 145px;
left: 80px;
text-align: right;
}
#joueur-2 {
position: absolute;
top: 245px;
left: 190px;
text-align: right;
}
#joueur-3 {
position: absolute;
top: 145px;
left: 500px;
}
#jeu-0 {
position: absolute;
top: 30px;
left: 300px;
}
#jeu-1 {
position: absolute;
top: 120px;
left: 190px;
}
#jeu-2 {
position: absolute;
top: 220px;
left: 300px;
}
#jeu-3 {
position: absolute;
top: 120px;
left: 420px;
}
#suivant {
position: absolute;
bottom: 15px;
right: 40px;
}
#suivant input {
width: 130px;
}
#ov {
height: 310px;
width: 390px;
padding: 5px 25px 5px 25px;
position: relative;
top: -322px;
left: 746px;
margin: 2px;
border: 1px solid #092E1E;
}
#table-atout {
width: 98%;
}
#table-atout td {
padding: 4px;
text-align: center;
vertical-align: middle;
}
#atout {
margin: 0px auto 0px auto;
}
#choix {
height: 150px;
margin-top: 20px;
padding: 6px;
overflow-x: hidden;
overflow-y: auto;
}
#options-fleche {
width: 11px;
height: 11px;
float: right;
cursor: pointer;
vertical-align: baseline;
}
#options-valeur {
display: none;
}
#dernier-pli-fleche {
width: 11px;
height: 11px;
float: right;
cursor: pointer;
vertical-align: baseline;
}
#dernier-pli-valeur {
display: none;
}
#dernier-pli {
margin-top: 10px;
}
#dernier-pli-valeur {
padding-left: 50px;
}
#jeu-en-main {
height: 76px;
width: 642px;
position: relative;
top: -320px;
left: 0px;
margin: 2px;
padding: 15px 58px 15px 40px;
border: 1px solid #092E1E;
}
#a-vous {
float: left;
width: 90px;
height: 59px;
padding-top: 20px;
text-align: center;
margin-right: 20px;
visibility: hidden;
background:white;
font-weight: bold;
}
#points {
height: 98px;
width: 390px;
position: relative;
top: -430px;
left: 746px;
margin: 2px;
border: 1px solid #092E1E;
padding: 4px 25px 4px 25px;
}
#points p {
text-align: center;
margin: 5px 0px 5px 0px;
}
#points table {
width: 98%;
border-collapse: collapse;
border: 1px solid #092E1E;
}
#points table td {
padding: 0px 2px 0px 2px;
text-align: center;
border: 1px solid #092E1E;
}
.joueur {
width: 90px;
overflow: hidden;
text-decoration: underscore;
border-color: black;
border-style: solid none solid none;
}
.carte {
height: 77px;
width: 53px;
/* carte : hauteur = 1,54 * largueur; */
border: 1px solid #092E1E;
background-color: #117F4A;
}
.carte-en-main, .carte-dernier-pli {
float: left;
margin-right: 9px;
}
.item-choix {
padding: 4px;
border: 1px solid #092E1E;
}
.item-choix-valeur {
padding: 4px;
border-right: 1px solid #092E1E;
border-bottom: 1px solid #092E1E;
border-left: 1px solid #092E1E;
}
/************************/
/* zone-de-conversation */
/************************/
#zone-de-conversation {
height: 84px;
margin: 2px;
position: relative;
}
#chat {
width: 61%;
height: 87%;
float: left;
background-color: #C4E8D7;
margin: 2px 15px 2px 2px;
border-top: 2px solid #888;
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
border-left: 2px solid #888;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
}
#message {
width: 34%;
float: right;
margin: 1px 15px 2px 2px;
position: absolute;
right: 2px;
top: 3px;
}
#message p {
padding-bottom: 4px;
}
#texte-msg {
width:80%;
background-color: #C4E8D7;
margin-right: 5px;
}
button#add{
min-width:180px;
margin:auto;
padding:10px;
background: #b7a86b;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
display:block;
}
thead{
font-weight: bold;
}
fieldset.fieldset {
border:1px solid green;
padding:30px;
margin:20px;
}
.alert{
width:80%;
margin: 10px auto 10px auto;
padding:10px;
background: #FF9E77;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
display:block;
border: 1px solid #DF531C;
}
.alert > .close{
background: #EC784A;
border: none;
}
table.tablelogin td{
padding: 10px 0px 10px 0px;

View File

@ -112,8 +112,8 @@ var set_cartes = function(){
$('#jeu-3').html('');
}else{
for(i=first_player;i<first_player+4;i++){
j = i-first_player
k = i%4
j = i-first_player;
k = (i+6-jeu['nr'])%4;
if (jeu['played'].length > j && jeu['played'][j]!= ''){
$('#jeu-'+ k).html(`<img src="/static/cards/${jeu['played'][j]}.png" width=100% />`);
}else{
@ -133,18 +133,25 @@ var set_derpli = function(){
var set_players = function(){
for(i=0;i<4;i++){
$('#joueur-'+i).html(`${jeu['playersinfo'][jeu['players'][i]]}`);
name = jeu['playersinfo'][jeu['players'][i]];
if(jeu['players'][i]==jeu['admin']){
name = name + '&nbsp;*';
}
k = (i+6-jeu['nr'])%4;
$('#joueur-'+k).html(name);
}
}
var set_current_player = function(){
for(i=0;i<4;i++){
$('#joueur-'+i).css('font-weight', 'normal');
$('#joueur-'+i).css('text-decoration', 'none');
$('#joueur-'+i).css('border-width', '0px');
$('#joueur-'+i).css('background', 'none');
}
i = (jeu['turn']+jeu['first_player']+8)%4;
i = (jeu['turn']+jeu['first_player']-jeu['nr']+18)%4;
$('#joueur-'+i).css('font-weight', 'bold');
$('#joueur-'+i).css('text-decoration', 'underline overline');
$('#joueur-'+i).css('border-width', '1px 0px 1px 0px');
$('#joueur-'+i).css('background', '#55B78D');
if((jeu['turn']+jeu['first_player']+8)%4 == jeu['nr']){
$('#a-vous').css('visibility', 'visible');
}else{

View File

@ -10,8 +10,8 @@
<fieldset class="fieldset"><legend style="font-size:25px;">Nom du jeu</legend>
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<div class="alert" id="alert{{loop.index}}">
<button type="button" class="close" onclick="javascript:hidealert('alert{{loop.index}}')">&times;</button>
{{ message }}
</div>
{% endfor %}

View File

@ -11,8 +11,8 @@
<fieldset class="fieldset"><legend style="font-size:25px;">Utilisateur</legend>
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<div class="alert" id="alert{{loop.index}}">
<button type="button" class="close" onclick="javascript:hidealert('alert{{loop.index}}')">&times;</button>
{{ message }}
</div>
{% endfor %}

View File

@ -12,7 +12,7 @@
<div id="zone-de-contenu">
<div style="width:100%;margin:20px;"> </div>
<fieldset class="fieldset"><legend style="font-size:25px;">Liste des joueurs</legend>
<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 %}
@ -117,6 +117,15 @@ socket.on('leave', function(data){
{% 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>
</div>
`);
}
{% endif %}
});

View File

@ -8,7 +8,11 @@
<div id="zone-de-contenu">
<fieldset class="fieldset"><legend style="font-size:25px;">Bienvenue</legend>
<p> Bienvenue sur le jeu de belote !</p>
{% if not user == None %}
<p> Rendez-vous sur <a href="/games">la page des jeux</a></p>
{% else %}
<p> Vous devez vous identifier pour jouer, rendez vous sur <a href="/login">la page de login</a></p>
{% endif %}
</fieldset>
</div>
{% endblock %}

View File

@ -10,13 +10,13 @@
<div style="width:100%;margin:20px;"> </div>
<fieldset class="fieldset"><legend style="font-size:25px;">Identifiez-vous</legend>
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<div class="alert" id="alert{{loop.index}}">
<button type="button" class="close" onclick="javascript:hidealert('alert{{loop.index}}')">&times;</button>
{{ message }}
</div>
{% endfor %}
<table width=100%>
<table width=100% class="tablelogin">
<tr><td>Nom d'utilisateur : </td><td> <input type="text" name="username" placeholder="Votre nom d'utilisateur" /></td></tr>
<tr><td> Mot de passe : </td><td> <input type="password" name="password" placeholder="Votre mot de passe"/></td></tr>
<tr><td>&nbsp;</td> <td><input id="submit" type="submit" value="&nbsp;Entrer&nbsp;"></td></tr>

View File

@ -10,9 +10,9 @@
<fieldset class="fieldset"><legend style="font-size:25px;">Nom du jeu</legend>
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
{{ message }}
<div class="alert" id="alert{{loop.index}}">
<button type="button" class="close" onclick="javascript:hidealert('alert{{loop.index}}')">&times;</button>
{{ message }}
</div>
{% endfor %}
<form action="" method="POST" accept-charset="utf-8">