Browse Source

Enhance several visual things and count belote better

Leo VIALLON-GALINIER 11 months ago
parent
commit
b949982cae

+ 4 - 0
README.md

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

+ 4 - 4
belote.py

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

+ 1 - 1
belote_ws.py

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

+ 2 - 2
db.py

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

+ 77 - 73
static/belote-script.js

@@ -1,73 +1,77 @@
1
-/*************************
2
-   la Belote
3
-**************************/
4
-var go = function(url) {
5
-    document.location.href=url;
6
-}
7
-
8
-$(document).ready(function() {
9
-/*==============================
10
-listeners à activer à ready 
11
-===============================*/
12
-
13
-document.getElementById("username").addEventListener("click",function() {apparaitDisparaitMenu('username-items','username-fleche')});
14
-
15
-var options = document.getElementById("options");
16
-if(options){
17
-    options.addEventListener("click",function() {apparaitDisparaitAccordeon('options-valeur','options-fleche')});
18
-}
19
-var derpli = document.getElementById("dernier-pli")
20
-if(derpli){
21
-    derpli.addEventListener("click",function() {apparaitDisparaitAccordeon('dernier-pli-valeur','dernier-pli-fleche')});
22
-}
23
-
24
-
25
-/*==============================
26
-fonctions 
27
-===============================*/
28
-/* 
29
-fonction  apparaitDisparaitUserAttr 
30
-apparition/disparition d'un menu
31
-*/
32
-function apparaitDisparaitMenu (idMenu,idFleche) {
33
-	var element = document.getElementById(idMenu);
34
-	if(element.style.visibility == "hidden" || element.style.visibility == "") {
35
-		document.getElementById(idMenu).style.visibility = "visible";
36
-	}
37
-	else {
38
-		document.getElementById(idMenu).style.visibility = "hidden";
39
-	};
40
-	var elementFleche = document.getElementById(idFleche);
41
-	var splitElement = elementFleche.src.split('/');
42
-	var lastElement = splitElement[splitElement.length-1];
43
-	if(lastElement == "fleche-bas.gif") {
44
-		document.getElementById(idFleche).src = "/static/fleche-haut.gif";
45
-	}
46
-	else {
47
-		document.getElementById(idFleche).src = "/static/fleche-bas.gif";
48
-	}
49
-	return(0);
50
-}
51
-
52
-function apparaitDisparaitAccordeon (idZone,idFleche) {
53
-	var element = document.getElementById(idZone);
54
-	if(element.style.display == "none" || element.style.display == "") {
55
-		document.getElementById(idZone).style.display = "block";
56
-	}
57
-	else {
58
-		document.getElementById(idZone).style.display = "none";
59
-	};
60
-	var elementFleche = document.getElementById(idFleche);
61
-	var splitElement = elementFleche.src.split('/');
62
-	var lastElement = splitElement[splitElement.length-1];
63
-	if(lastElement == "fleche-bas.gif") {
64
-		document.getElementById(idFleche).src = "/static/fleche-haut.gif";
65
-	}
66
-	else {
67
-		document.getElementById(idFleche).src = "/static/fleche-bas.gif";
68
-	}
69
-	return(0);
70
-}
71
-
72
-/* fin de $(document).ready() */
73
-});
1
+/*************************
2
+   la Belote
3
+**************************/
4
+var go = function(url) {
5
+    document.location.href=url;
6
+}
7
+
8
+var hidealert = function(id){
9
+    $('#'+id).hide();
10
+}
11
+
12
+$(document).ready(function() {
13
+/*==============================
14
+listeners à activer à ready 
15
+===============================*/
16
+
17
+document.getElementById("username").addEventListener("click",function() {apparaitDisparaitMenu('username-items','username-fleche')});
18
+
19
+var options = document.getElementById("options");
20
+if(options){
21
+    options.addEventListener("click",function() {apparaitDisparaitAccordeon('options-valeur','options-fleche')});
22
+}
23
+var derpli = document.getElementById("dernier-pli")
24
+if(derpli){
25
+    derpli.addEventListener("click",function() {apparaitDisparaitAccordeon('dernier-pli-valeur','dernier-pli-fleche')});
26
+}
27
+
28
+
29
+/*==============================
30
+fonctions 
31
+===============================*/
32
+/* 
33
+fonction  apparaitDisparaitUserAttr 
34
+apparition/disparition d'un menu
35
+*/
36
+function apparaitDisparaitMenu (idMenu,idFleche) {
37
+	var element = document.getElementById(idMenu);
38
+	if(element.style.visibility == "hidden" || element.style.visibility == "") {
39
+		document.getElementById(idMenu).style.visibility = "visible";
40
+	}
41
+	else {
42
+		document.getElementById(idMenu).style.visibility = "hidden";
43
+	};
44
+	var elementFleche = document.getElementById(idFleche);
45
+	var splitElement = elementFleche.src.split('/');
46
+	var lastElement = splitElement[splitElement.length-1];
47
+	if(lastElement == "fleche-bas.gif") {
48
+		document.getElementById(idFleche).src = "/static/fleche-haut.gif";
49
+	}
50
+	else {
51
+		document.getElementById(idFleche).src = "/static/fleche-bas.gif";
52
+	}
53
+	return(0);
54
+}
55
+
56
+function apparaitDisparaitAccordeon (idZone,idFleche) {
57
+	var element = document.getElementById(idZone);
58
+	if(element.style.display == "none" || element.style.display == "") {
59
+		document.getElementById(idZone).style.display = "block";
60
+	}
61
+	else {
62
+		document.getElementById(idZone).style.display = "none";
63
+	};
64
+	var elementFleche = document.getElementById(idFleche);
65
+	var splitElement = elementFleche.src.split('/');
66
+	var lastElement = splitElement[splitElement.length-1];
67
+	if(lastElement == "fleche-bas.gif") {
68
+		document.getElementById(idFleche).src = "/static/fleche-haut.gif";
69
+	}
70
+	else {
71
+		document.getElementById(idFleche).src = "/static/fleche-bas.gif";
72
+	}
73
+	return(0);
74
+}
75
+
76
+/* fin de $(document).ready() */
77
+});

+ 411 - 388
static/belote.css

@@ -1,388 +1,411 @@
1
-/* =========================
2
-     la Belote
3
-========================= */
4
-/****************/
5
-/*    Reset     */
6
-/****************/
7
-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}
8
-body{line-height:1}
9
-ol,ul{list-style:none}
10
-blockquote,q{quotes:none}
11
-blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
12
-:focus{outline:0}
13
-ins{text-decoration:none}
14
-del{text-decoration:line-through}
15
-table{border-collapse:collapse;border-spacing:0}
16
-/****************/
17
-/*  généralités */
18
-/****************/
19
-body {
20
-	margin: 0px;
21
-	background-color: #13995E;
22
-}
23
-div.clear {
24
-	clear: both;
25
-}
26
-div.clearfix-head::after {
27
-	content:"";
28
-	clear: both;
29
-	display: table;
30
-        border: 1px solid black;
31
-        width: 100%;
32
-}
33
-div.clearfix::after{
34
-        content:"";
35
-	clear: both;
36
-	display: table;
37
-}
38
-div, p, li, a, th, td {
39
-	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
40
-	font-size: 15px;
41
-	line-height: 17px;
42
-	color: #092E1E;
43
-}
44
-/****************/
45
-/* conteneur    */
46
-/****************/
47
-#conteneur { 
48
-	margin-top: 8px;
49
-	margin-right: auto;
50
-	margin-bottom: 0px;
51
-	margin-left: auto;
52
-	height: 600px;
53
-	width: 1200px;
54
-	/* border: 1px solid #092E1E; */
55
-}
56
-/****************/
57
-/* entete       */
58
-/****************/
59
-#entete {
60
-	position: relative;
61
-	height: 66px;
62
-	margin: 2px;
63
-/*
64
-	border: 1px solid #092E1E;
65
-*/
66
-}
67
-#logo {
68
-	margin: 2px 10px 2px 2px;
69
-	float: left;
70
-}
71
-#logo img {
72
-	height: 60px;
73
-	width: 60px;
74
-	display: block;
75
-	margin-left: auto;
76
-	margin-right: auto;
77
-}
78
-#titre {
79
-	width: 55%;
80
-	line-height: 60px;
81
-	margin: 2px 15px 2px 2px;
82
-	text-align: center;
83
-	font-size: 140%;
84
-	font-weight: bold;
85
-	float: left;
86
-}
87
-#username {
88
-	width: 20%;
89
-	height: 60px;
90
-	line-height: 60px;
91
-	margin: 2px 15px 2px 30px;
92
-	float: right;
93
-	
94
-	font-size: 140%;
95
-	font-weight: bold;
96
-	text-align: right;
97
-}
98
-#username-fleche {
99
-	height: 14px;
100
-	width: 14px;
101
-	cursor: pointer;
102
-	padding-left: 10px;
103
-	vertical-align: baseline;
104
-}
105
-#username-items {
106
-	position: absolute; 
107
-	top: 68px;
108
-	right: 0px;
109
-	width: 180px;
110
-	visibility: hidden;
111
-	margin-top: 2px ;
112
-	padding: 5px;
113
-	border: 1px solid #092E1E;
114
-	overflow: hidden;
115
-	z-index: 100;
116
-	background-color: #b7a86b;
117
-}
118
-.menu-item:hover {
119
-	cursor: pointer;
120
-	background-color: #15A160;
121
-}
122
-
123
-/****************/
124
-/* zone-de-contenu  */
125
-/****************/
126
-#zone-de-contenu {
127
-    width:50%;
128
-    margin:auto;
129
-}
130
-#zone-de-contenu>div {
131
-    margin:auto;
132
-}
133
-.tablelist {
134
-    width:100%;
135
-}
136
-/****************/
137
-/* zone-de-jeu  */
138
-/****************/
139
-#zone-de-jeu {
140
-	height: 438px;
141
-	margin: 2px;
142
-/*
143
-	border: 1px solid #092E1E;
144
-*/
145
-}
146
-#plateau {
147
-	height: 320px;
148
-	width: 740px;
149
-	position: relative;
150
-	margin: 3px;
151
-}
152
-#joueur-0 {
153
-	position: absolute;
154
-	top: 55px; 
155
-	left: 190px;
156
-	text-align: right;
157
-}
158
-#joueur-1 {
159
-	position: absolute;
160
-	top: 145px; 
161
-	left: 80px; 
162
-	text-align: right;
163
-}
164
-#joueur-2 {
165
-	position: absolute;
166
-	top: 245px; 
167
-	left: 190px; 
168
-	text-align: right;
169
-}
170
-#joueur-3 {
171
-	position: absolute;
172
-	top: 145px; 
173
-	left: 500px; 
174
-}
175
-#jeu-0 {
176
-	position: absolute;
177
-	top: 30px; 
178
-	left: 300px; 
179
-}
180
-#jeu-1 {
181
-	position: absolute;
182
-	top: 120px; 
183
-	left: 190px; 
184
-}
185
-#jeu-2 {
186
-	position: absolute;
187
-	top: 220px; 
188
-	left: 300px; 
189
-}
190
-#jeu-3 {
191
-	position: absolute;
192
-	top: 120px; 
193
-	left: 420px; 
194
-}
195
-#suivant {
196
-position: absolute;
197
-	bottom: 15px; 
198
-	right: 40px; 
199
-}
200
-#suivant input {
201
-	width: 130px;
202
-}
203
-
204
-#ov {
205
-	height: 310px;
206
-	width: 390px;
207
-	padding: 5px 25px 5px 25px;
208
-	position: relative;
209
-	top: -322px;
210
-	left: 746px;
211
-	margin: 2px;
212
-	border: 1px solid #092E1E;
213
-	
214
-}
215
-#table-atout {
216
-	width: 98%;
217
-}
218
-#table-atout td {
219
-	padding: 4px;
220
-	text-align: center;
221
-	vertical-align: middle;
222
-}
223
-#atout {
224
-	margin: 0px auto 0px auto;
225
-}
226
-#choix {
227
-	height: 150px;
228
-	margin-top: 20px;
229
-	padding: 6px;
230
-	overflow-x: hidden;
231
-	overflow-y: auto;
232
-}
233
-#options-fleche {
234
-	width: 11px;
235
-	height: 11px; 
236
-	float: right;
237
-	cursor: pointer;
238
-	vertical-align: baseline;
239
-}
240
-#options-valeur {
241
-	display: none; 
242
-}
243
-#dernier-pli-fleche {
244
-	width: 11px;
245
-	height: 11px; 
246
-	float: right;
247
-	cursor: pointer;
248
-	vertical-align: baseline;
249
-}
250
-#dernier-pli-valeur {
251
-	display: none; 
252
-}
253
-#dernier-pli {
254
-	margin-top: 10px;
255
-}
256
-#dernier-pli-valeur {
257
-	padding-left: 50px;
258
-}
259
-#jeu-en-main {
260
-	height: 76px;
261
-	width: 642px; 
262
-	position: relative;
263
-	top: -320px;
264
-	left: 0px; 
265
-	margin: 2px;
266
-	padding: 15px 58px 15px 40px;
267
-	border: 1px solid #092E1E;
268
-}
269
-#a-vous {
270
-	float: left;
271
-	width: 90px;
272
-	height: 59px;
273
-	padding-top: 20px;
274
-	text-align: center;
275
-	margin-right: 20px;
276
-	visibility: hidden;
277
-        background:white;
278
-        font-weight: bold;
279
-}
280
-#points {
281
-	height: 98px;
282
-	width: 390px;
283
-	position: relative;
284
-	top: -430px;
285
-	left: 746px; 
286
-	margin: 2px;
287
-	border: 1px solid #092E1E;
288
-	padding: 4px 25px 4px 25px;
289
-}
290
-#points p {
291
-	text-align: center;
292
-	margin: 5px 0px 5px 0px;
293
-}
294
-#points table {
295
-	width: 98%;
296
-	border-collapse: collapse;
297
-	border: 1px solid #092E1E;
298
-}
299
-#points table td  {
300
-	padding: 0px 2px 0px 2px;
301
-	text-align: center;
302
-	border: 1px solid #092E1E;
303
-}
304
-.joueur {
305
-	width: 90px;
306
-	overflow: hidden;
307
-	text-decoration: underscore;
308
-}
309
-.carte {
310
-	height: 77px;
311
-	width: 53px;
312
-	/* carte : hauteur = 1,54 * largueur;  */
313
-	border: 1px solid #092E1E;
314
-	background-color: #117F4A;
315
-}
316
-.carte-en-main, .carte-dernier-pli {
317
-	float: left;
318
-	margin-right: 9px;
319
-}
320
-.item-choix {
321
-	padding: 4px;
322
-	border: 1px solid #092E1E;
323
-}
324
-.item-choix-valeur {
325
-	padding: 4px;
326
-	border-right: 1px solid #092E1E;
327
-	border-bottom: 1px solid #092E1E;
328
-	border-left: 1px solid #092E1E;
329
-}
330
-/************************/
331
-/* zone-de-conversation */
332
-/************************/
333
-#zone-de-conversation {
334
-	height: 84px;
335
-	margin: 2px;
336
-	position: relative;
337
-}
338
-#chat {
339
-	width: 61%;
340
-	height: 87%;
341
-	float: left;
342
-	background-color: #C4E8D7;
343
-	margin: 2px 15px 2px 2px;
344
-	border-top: 2px solid #888;
345
-	border-right: 2px solid #DDD;
346
-	border-bottom: 2px solid #DDD;
347
-	border-left: 2px solid #888;
348
-	position: absolute;
349
-	overflow-x: hidden;
350
-	overflow-y: auto;
351
-}
352
-#message {
353
-	width: 34%;
354
-	float: right;
355
-	margin: 1px 15px 2px 2px;
356
-	position: absolute; 
357
-	right: 2px;
358
-	top: 3px;
359
-}
360
-#message p {
361
-	padding-bottom: 4px;
362
-}
363
-#texte-msg {
364
-	width:80%;
365
-	background-color: #C4E8D7;
366
-	margin-right: 5px;
367
-}
368
-button#add{
369
-    min-width:180px;
370
-    margin:auto;
371
-    padding:10px;
372
-    background: #b7a86b;
373
-    -moz-border-radius: 10px;
374
-    -webkit-border-radius: 10px;
375
-    -khtml-border-radius: 10px;
376
-    border-radius: 10px;
377
-    display:block;
378
-}
379
-
380
-thead{
381
-    font-weight: bold;
382
-}
383
-
384
-fieldset.fieldset {
385
-    border:1px solid green;
386
-    padding:30px;
387
-    margin:20px;
388
-}
1
+/* =========================
2
+     la Belote
3
+========================= */
4
+/****************/
5
+/*    Reset     */
6
+/****************/
7
+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}
8
+body{line-height:1}
9
+ol,ul{list-style:none}
10
+blockquote,q{quotes:none}
11
+blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
12
+:focus{outline:0}
13
+ins{text-decoration:none}
14
+del{text-decoration:line-through}
15
+table{border-collapse:collapse;border-spacing:0}
16
+/****************/
17
+/*  généralités */
18
+/****************/
19
+body {
20
+	margin: 0px;
21
+	background-color: #13995E;
22
+}
23
+div.clear {
24
+	clear: both;
25
+}
26
+div.clearfix-head::after {
27
+	content:"";
28
+	clear: both;
29
+	display: table;
30
+        border: 1px solid black;
31
+        width: 100%;
32
+}
33
+div.clearfix::after{
34
+        content:"";
35
+	clear: both;
36
+	display: table;
37
+}
38
+div, p, li, a, th, td {
39
+	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
40
+	font-size: 15px;
41
+	line-height: 17px;
42
+	color: #092E1E;
43
+}
44
+/****************/
45
+/* conteneur    */
46
+/****************/
47
+#conteneur { 
48
+	margin-top: 8px;
49
+	margin-right: auto;
50
+	margin-bottom: 0px;
51
+	margin-left: auto;
52
+	height: 600px;
53
+	width: 1200px;
54
+	/* border: 1px solid #092E1E; */
55
+}
56
+/****************/
57
+/* entete       */
58
+/****************/
59
+#entete {
60
+	position: relative;
61
+	height: 66px;
62
+	margin: 2px;
63
+/*
64
+	border: 1px solid #092E1E;
65
+*/
66
+}
67
+#logo {
68
+	margin: 2px 10px 2px 2px;
69
+	float: left;
70
+}
71
+#logo img {
72
+	height: 60px;
73
+	width: 60px;
74
+	display: block;
75
+	margin-left: auto;
76
+	margin-right: auto;
77
+}
78
+#titre {
79
+	width: 55%;
80
+	line-height: 60px;
81
+	margin: 2px 15px 2px 2px;
82
+	text-align: center;
83
+	font-size: 140%;
84
+	font-weight: bold;
85
+	float: left;
86
+}
87
+#username {
88
+	width: 20%;
89
+	height: 60px;
90
+	line-height: 60px;
91
+	margin: 2px 15px 2px 30px;
92
+	float: right;
93
+	
94
+	font-size: 140%;
95
+	font-weight: bold;
96
+	text-align: right;
97
+}
98
+#username-fleche {
99
+	height: 14px;
100
+	width: 14px;
101
+	cursor: pointer;
102
+	padding-left: 10px;
103
+	vertical-align: baseline;
104
+}
105
+#username-items {
106
+	position: absolute; 
107
+	top: 68px;
108
+	right: 0px;
109
+	width: 180px;
110
+	visibility: hidden;
111
+	margin-top: 2px ;
112
+	padding: 5px;
113
+	border: 1px solid #092E1E;
114
+	overflow: hidden;
115
+	z-index: 100;
116
+	background-color: #b7a86b;
117
+}
118
+.menu-item:hover {
119
+	cursor: pointer;
120
+	background-color: #15A160;
121
+}
122
+
123
+/****************/
124
+/* zone-de-contenu  */
125
+/****************/
126
+#zone-de-contenu {
127
+    width:50%;
128
+    margin:auto;
129
+}
130
+#zone-de-contenu>div {
131
+    margin:auto;
132
+}
133
+.tablelist {
134
+    width:100%;
135
+}
136
+/****************/
137
+/* zone-de-jeu  */
138
+/****************/
139
+#zone-de-jeu {
140
+	height: 438px;
141
+	margin: 2px;
142
+/*
143
+	border: 1px solid #092E1E;
144
+*/
145
+}
146
+#plateau {
147
+	height: 320px;
148
+	width: 740px;
149
+	position: relative;
150
+	margin: 3px;
151
+}
152
+#joueur-0 {
153
+	position: absolute;
154
+	top: 55px; 
155
+	left: 190px;
156
+	text-align: right;
157
+}
158
+#joueur-1 {
159
+	position: absolute;
160
+	top: 145px; 
161
+	left: 80px; 
162
+	text-align: right;
163
+}
164
+#joueur-2 {
165
+	position: absolute;
166
+	top: 245px; 
167
+	left: 190px; 
168
+	text-align: right;
169
+}
170
+#joueur-3 {
171
+	position: absolute;
172
+	top: 145px; 
173
+	left: 500px; 
174
+}
175
+#jeu-0 {
176
+	position: absolute;
177
+	top: 30px; 
178
+	left: 300px; 
179
+}
180
+#jeu-1 {
181
+	position: absolute;
182
+	top: 120px; 
183
+	left: 190px; 
184
+}
185
+#jeu-2 {
186
+	position: absolute;
187
+	top: 220px; 
188
+	left: 300px; 
189
+}
190
+#jeu-3 {
191
+	position: absolute;
192
+	top: 120px; 
193
+	left: 420px; 
194
+}
195
+#suivant {
196
+position: absolute;
197
+	bottom: 15px; 
198
+	right: 40px; 
199
+}
200
+#suivant input {
201
+	width: 130px;
202
+}
203
+
204
+#ov {
205
+	height: 310px;
206
+	width: 390px;
207
+	padding: 5px 25px 5px 25px;
208
+	position: relative;
209
+	top: -322px;
210
+	left: 746px;
211
+	margin: 2px;
212
+	border: 1px solid #092E1E;
213
+	
214
+}
215
+#table-atout {
216
+	width: 98%;
217
+}
218
+#table-atout td {
219
+	padding: 4px;
220
+	text-align: center;
221
+	vertical-align: middle;
222
+}
223
+#atout {
224
+	margin: 0px auto 0px auto;
225
+}
226
+#choix {
227
+	height: 150px;
228
+	margin-top: 20px;
229
+	padding: 6px;
230
+	overflow-x: hidden;
231
+	overflow-y: auto;
232
+}
233
+#options-fleche {
234
+	width: 11px;
235
+	height: 11px; 
236
+	float: right;
237
+	cursor: pointer;
238
+	vertical-align: baseline;
239
+}
240
+#options-valeur {
241
+	display: none; 
242
+}
243
+#dernier-pli-fleche {
244
+	width: 11px;
245
+	height: 11px; 
246
+	float: right;
247
+	cursor: pointer;
248
+	vertical-align: baseline;
249
+}
250
+#dernier-pli-valeur {
251
+	display: none; 
252
+}
253
+#dernier-pli {
254
+	margin-top: 10px;
255
+}
256
+#dernier-pli-valeur {
257
+	padding-left: 50px;
258
+}
259
+#jeu-en-main {
260
+	height: 76px;
261
+	width: 642px; 
262
+	position: relative;
263
+	top: -320px;
264
+	left: 0px; 
265
+	margin: 2px;
266
+	padding: 15px 58px 15px 40px;
267
+	border: 1px solid #092E1E;
268
+}
269
+#a-vous {
270
+	float: left;
271
+	width: 90px;
272
+	height: 59px;
273
+	padding-top: 20px;
274
+	text-align: center;
275
+	margin-right: 20px;
276
+	visibility: hidden;
277
+        background:white;
278
+        font-weight: bold;
279
+}
280
+#points {
281
+	height: 98px;
282
+	width: 390px;
283
+	position: relative;
284
+	top: -430px;
285
+	left: 746px; 
286
+	margin: 2px;
287
+	border: 1px solid #092E1E;
288
+	padding: 4px 25px 4px 25px;
289
+}
290
+#points p {
291
+	text-align: center;
292
+	margin: 5px 0px 5px 0px;
293
+}
294
+#points table {
295
+	width: 98%;
296
+	border-collapse: collapse;
297
+	border: 1px solid #092E1E;
298
+}
299
+#points table td  {
300
+	padding: 0px 2px 0px 2px;
301
+	text-align: center;
302
+	border: 1px solid #092E1E;
303
+}
304
+.joueur {
305
+	width: 90px;
306
+	overflow: hidden;
307
+	text-decoration: underscore;
308
+        border-color: black;
309
+        border-style: solid none solid none;
310
+}
311
+.carte {
312
+	height: 77px;
313
+	width: 53px;
314
+	/* carte : hauteur = 1,54 * largueur;  */
315
+	border: 1px solid #092E1E;
316
+	background-color: #117F4A;
317
+}
318
+.carte-en-main, .carte-dernier-pli {
319
+	float: left;
320
+	margin-right: 9px;
321
+}
322
+.item-choix {
323
+	padding: 4px;
324
+	border: 1px solid #092E1E;
325
+}
326
+.item-choix-valeur {
327
+	padding: 4px;
328
+	border-right: 1px solid #092E1E;
329
+	border-bottom: 1px solid #092E1E;
330
+	border-left: 1px solid #092E1E;
331
+}
332
+/************************/
333
+/* zone-de-conversation */
334
+/************************/
335
+#zone-de-conversation {
336
+	height: 84px;
337
+	margin: 2px;
338
+	position: relative;
339
+}
340
+#chat {
341
+	width: 61%;
342
+	height: 87%;
343
+	float: left;
344
+	background-color: #C4E8D7;
345
+	margin: 2px 15px 2px 2px;
346
+	border-top: 2px solid #888;
347
+	border-right: 2px solid #DDD;
348
+	border-bottom: 2px solid #DDD;
349
+	border-left: 2px solid #888;
350
+	position: absolute;
351
+	overflow-x: hidden;
352
+	overflow-y: auto;
353
+}
354
+#message {
355
+	width: 34%;
356
+	float: right;
357
+	margin: 1px 15px 2px 2px;
358
+	position: absolute; 
359
+	right: 2px;
360
+	top: 3px;
361
+}
362
+#message p {
363
+	padding-bottom: 4px;
364
+}
365
+#texte-msg {
366
+	width:80%;
367
+	background-color: #C4E8D7;
368
+	margin-right: 5px;
369
+}
370
+button#add{
371
+    min-width:180px;
372
+    margin:auto;
373
+    padding:10px;
374
+    background: #b7a86b;
375
+    -moz-border-radius: 10px;
376
+    -webkit-border-radius: 10px;
377
+    -khtml-border-radius: 10px;
378
+    border-radius: 10px;
379
+    display:block;
380
+}
381
+
382
+thead{
383
+    font-weight: bold;
384
+}
385
+
386
+fieldset.fieldset {
387
+    border:1px solid green;
388
+    padding:30px;
389
+    margin:20px;
390
+}
391
+
392
+.alert{
393
+    width:80%;
394
+    margin: 10px auto 10px auto;
395
+    padding:10px;
396
+    background: #FF9E77;
397
+    -moz-border-radius: 10px;
398
+    -webkit-border-radius: 10px;
399
+    -khtml-border-radius: 10px;
400
+    border-radius: 10px;
401
+    display:block;
402
+    border: 1px solid #DF531C;
403
+}
404
+
405
+.alert > .close{
406
+    background: #EC784A;
407
+    border: none;
408
+}
409
+
410
+table.tablelogin td{
411
+    padding: 10px 0px 10px 0px;

+ 13 - 6
static/game_script.js

@@ -112,8 +112,8 @@ var set_cartes = function(){
112 112
         $('#jeu-3').html('');
113 113
     }else{
114 114
         for(i=first_player;i<first_player+4;i++){
115
-            j = i-first_player
116
-            k = i%4
115
+            j = i-first_player;
116
+            k = (i+6-jeu['nr'])%4;
117 117
             if (jeu['played'].length > j && jeu['played'][j]!= ''){
118 118
                 $('#jeu-'+ k).html(`<img src="/static/cards/${jeu['played'][j]}.png" width=100% />`);
119 119
             }else{
@@ -133,18 +133,25 @@ var set_derpli = function(){
133 133
 
134 134
 var set_players = function(){
135 135
     for(i=0;i<4;i++){
136
-        $('#joueur-'+i).html(`${jeu['playersinfo'][jeu['players'][i]]}`);
136
+        name = jeu['playersinfo'][jeu['players'][i]];
137
+        if(jeu['players'][i]==jeu['admin']){
138
+            name = name + '&nbsp;*';
139
+        }
140
+        k = (i+6-jeu['nr'])%4;
141
+        $('#joueur-'+k).html(name);
137 142
     }
138 143
 }
139 144
 
140 145
 var set_current_player = function(){
141 146
     for(i=0;i<4;i++){
142 147
         $('#joueur-'+i).css('font-weight', 'normal');
143
-        $('#joueur-'+i).css('text-decoration', 'none');
148
+        $('#joueur-'+i).css('border-width', '0px');
149
+        $('#joueur-'+i).css('background', 'none');
144 150
     }
145
-    i = (jeu['turn']+jeu['first_player']+8)%4;
151
+    i = (jeu['turn']+jeu['first_player']-jeu['nr']+18)%4;
146 152
     $('#joueur-'+i).css('font-weight', 'bold');
147
-    $('#joueur-'+i).css('text-decoration', 'underline overline');
153
+    $('#joueur-'+i).css('border-width', '1px 0px 1px 0px');
154
+        $('#joueur-'+i).css('background', '#55B78D');
148 155
     if((jeu['turn']+jeu['first_player']+8)%4 == jeu['nr']){
149 156
         $('#a-vous').css('visibility', 'visible');
150 157
     }else{

+ 2 - 2
templates/admin_game_add.html

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

+ 2 - 2
templates/admin_user_edit.html

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

+ 10 - 1
templates/game_join.html

@@ -12,7 +12,7 @@
12 12
 <div id="zone-de-contenu">
13 13
         <div style="width:100%;margin:20px;"> </div>
14 14
         
15
-      <fieldset class="fieldset"><legend style="font-size:25px;">Liste des joueurs</legend>
15
+      <fieldset class="fieldset" id="listpart"><legend style="font-size:25px;">Liste des joueurs</legend>
16 16
         <ul id="players">
17 17
         {% for p in game.get_players() %}
18 18
         {% if p['username'] == admin %}
@@ -117,6 +117,15 @@ socket.on('leave', function(data){
117 117
     {% if user.login == admin %}
118 118
         $('#gostart').hide();
119 119
         $('#add_player').show();
120
+    {% else %}
121
+    if (username == {{ user.login }}){
122
+        console.log("Vous avez été banni");
123
+        $('#listpart').prepend(`
124
+          <div class="alert" id="alert0">
125
+          <button type="button" class="close" onclick="javascript:hidealert('alert0')">&times;</button>
126
+        </div>
127
+            `);
128
+    }
120 129
     {% endif %}
121 130
 });
122 131
 

+ 4 - 0
templates/index.html

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

+ 3 - 3
templates/login.html

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

+ 3 - 3
templates/password.html

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