Construction grille jeu d'échec en css + unicode : pourquoi n'est-ce pas carré ?

**tails** · 17/06/2015, 12h57

Bonjour à tous,

j'ai essayé de construire un diagramme de jeu d'échec (sans les coordonnées ni le trait pour l'instant) Ici même (jsFiddle).
Le problème est que le résultat est loin d'être un carré parfait : notamment si l'on zoom davantage.

Quel le meilleur moyen de résoudre ce problème ?

Invité · 17/06/2015, 13h10

Bonjour,
le plus simple est de dimensionner les cases de la même taille (ou supérieur) que le font-size (ici à 2.0em) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
table.chess_table  tr.chess_table_line  td.chess_table_cell {
  font-family: serif;
  font-size: 2.0em;
  width: 2.0em;
  height: 2.0em;
  text-align: center;
  padding:0;
}

N.B. la classe "white_piece" serait à mettre sur les span plutôt que sur les td, puisqu'elle concerne la pièce, et non la case.

**tails** · 17/06/2015, 13h17

Bonjour,

les px pour moi ça ne sera tout simplement pas possible, car le diagramme se veut responsive :
en effet je pense faire du dev mobile avec ce projet qui s'apparente à une sorte de "plugin" dans mon appli (avec Cordova, et peut être Bootstrap aussi).

Donc imaginez juste la galère au niveau Web design en utilisant les px.

Sinon, ok pour la classe white_piece, je vais essayer (je commence à être à cours de temps ce midi ... à continuer plus tard).

Invité · 17/06/2015, 13h18

Jai modifié mon message précédent :

=> dimensionner les cases de la même taille (ou supérieur) que le font-size (ici à 2.0em)

**tails** · 17/06/2015, 13h21

Ok là je suis d'accord

Et c'est même parfait

Bien sûr charge à moi-même d'ajuster la taille de la case qui parait encore trop grande : c'est encore le grand défi qui m'attend au niveau des cases+pièces.

Merci bien

**tails** · 17/06/2015, 13h38

Je crois même que le problème vient d'ailleurs

dans le sélecteur span, j'avais mis du bottom pour positionner le texte de la pièce
du coup quand je met une largeur/hauteur inférieure à la taille fonte, après avoir retiré ce fameux bottom dans le span, le résultat est meilleur.

Le résultat à jour est ici même

Invité · 17/06/2015, 13h50

Pour le coté responsive, on peut ajouter un bout de jQuery :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function resize_table_chess()
{
  $('.chess_table_cell').width( 'auto' ).height( 'auto' );
  var maxWH = Math.max( $('.chess_table_cell:first-child').width(),$('.chess_table_cell:first-child').height() );
  $('.chess_table_cell').each(function(){
    $(this).width( maxWH ).height( maxWH );
    $(this).find('span').css({'font-size':maxWH/2}); // redimensionne les pièces du jeu
  }); 
};
$(window).on( 'load resize', function(){
	resize_table_chess();
});

On peut aussi imposer des dimensions maxi/mini à la table :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
table.chess_table {
    width:100%;
    max-width:64em;
    min-width:16em;
    margin:0 auto; /* centrage */
 
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
}

Invité · 17/06/2015, 14h43

Voici un plateau d'échec complet, responsive et optimisé/simplifié :

http://codepen.io/jreaux62/pen/ZGJPYP

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<table class="chess_table">
      <tr>
        <td id="A8" class="WP">♖</td>
        <td id="B8" class="WP">♘</td>
        <td id="C8" class="WP">♗</td>
        <td id="D8" class="WP">♕</td>
        <td id="E8" class="WP">♔</td>
        <td id="F8" class="WP">♗</td>
        <td id="G8" class="WP">♘</td>
        <td id="H8" class="WP">♖</td>
        <th>8</th>
    </tr>
      <tr>
        <td id="A7" class="WP">♙</td>
        <td id="B7" class="WP">♙</td>
        <td id="C7" class="WP">♙</td>
        <td id="D7" class="WP">♙</td>
        <td id="E7" class="WP">♙</td>
        <td id="F7" class="WP">♙</td>
        <td id="G7" class="WP">♙</td>
        <td id="H7" class="WP">♙</td>
        <th>7</th>
   </tr>
      <tr>
        <td id="A6"></td>
        <td id="B6"></td>
        <td id="C6"></td>
        <td id="D6"></td>
        <td id="E6"></td>
        <td id="F6"></td>
        <td id="G6"></td>
        <td id="H6"></td>
        <th>6</th>
    </tr>
      <tr>
        <td id="A5"></td>
        <td id="B5"></td>
        <td id="C5"></td>
        <td id="D5"></td>
        <td id="E5"></td>
        <td id="F5"></td>
        <td id="G5"></td>
        <td id="H5"></td>
        <th>5</th>
    </tr>
      <tr>
        <td id="A4"></td>
        <td id="B4"></td>
        <td id="C4"></td>
        <td id="D4"></td>
        <td id="E4"></td>
        <td id="F4"></td>
        <td id="G4"></td>
        <td id="H4"></td>
         <th>4</th>
     </tr>
      <tr>
        <td id="A3"></td>
        <td id="B3"></td>
        <td id="C3"></td>
        <td id="D3"></td>
        <td id="E3"></td>
        <td id="F3"></td>
        <td id="G3"></td>
        <td id="H3"></td>
         <th>3</th>
     </tr>
      <tr>
        <td id="A2" class="BP">♟</td>
        <td id="B2" class="BP">♟</td>
        <td id="C2" class="BP">♟</td>
        <td id="D2" class="BP">♟</td>
        <td id="E2" class="BP">♟</td>
        <td id="F2" class="BP">♟</td>
        <td id="G2" class="BP">♟</td>
        <td id="H2" class="BP">♟</td>
        <th>2</th>
    </tr>
      <tr>
        <td id="A1" class="BP">♜</td>
        <td id="B1" class="BP">♞</td>
        <td id="C1" class="BP">♝</td>
        <td id="D1" class="BP">♛</td>
        <td id="E1" class="BP">♚</td>
        <td id="F1" class="BP">♝</td>
        <td id="G1" class="BP">♞</td>
        <td id="H1" class="BP">♜</td>
        <th>1</th>
      </tr>
       <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th></th>
      </tr>
  </table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
table.chess_table {
width:100%;
max-width:64em;
min-width:4em;
 border-collapse: collapse;
 border-spacing: 0;
 box-sizing: border-box;
 margin:0 auto;
 padding:0;
}
 
table.chess_table tr td {
 font-family: serif;
 font-size: 1em;
 text-align: center;
 margin:0;
 padding:0;
}
 
table.chess_table tr:nth-child(odd) td:nth-child(odd) {
 background-color: rgb(217, 245, 2);
}
table.chess_table tr:nth-child(odd) td:nth-child(even) {
 background-color: rgb(89, 34, 21);
}
table.chess_table tr:nth-child(even) td:nth-child(odd) {
 background-color: rgb(89, 34, 21);
}
table.chess_table tr:nth-child(even) td:nth-child(even) {
 background-color: rgb(217, 245, 2);
}
table.chess_table tr td.WP { /* blancs */
 color: rgb(179, 48, 63); 
}
table.chess_table tr td.BP { /* noirs */
 color: rgb(0, 0, 0); 
}
table.chess_table tr th {
 color: #333;
}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function resize_table_chess( id )
{
  $(id).width( 'auto' ).height( 'auto' );
  $(id+' td, '+id+' th').width( 'auto' ).height( 'auto' );
  $(id+' td').css({ 'font-size':0.1+'em' });
  // on redimensionne pour que le plateau tienne dans la page
  var sizT = Math.max( Math.max( $(id).width(), $(id).height()), Math.min( $(window).width(), $(window).height())-20 );
  $(id).width( sizT ).height( sizT );
  // on redimensionne les cases ET les pièces du jeu
  var maxWH = sizT/9; // 9x9 cases
  $(id+' td, '+id+' th').width( maxWH ).height( maxWH );
  $(id+' td').css({ 'font-size':maxWH/16/1.5+'em' });
};
$(window).on( 'load resize', function(){
	resize_table_chess('.chess_table');
});

**tails** · 17/06/2015, 19h55

Merci beaucoup

Il ne me reste plus qu'à l'améliorer légèrement :

les coordonnées de part et d'autre de l'échiquier (*)
choix du joueur en bas de l'échiquier (blanc ou noir) (**) : n'influe que sur l'affichage des coordonnées.
affichage du joueur au trait (*)
choix de la taille de case (*)
génération des pièces dans la grille en fonction du code FEN (***)

Le tout en conservant l'aspect responsive.

Je vais essayer d'apporter ces modifications, et proposerais le fruit de mon travail (css+Jquery bien sûr) sur cette même discussion.

Evidement, il est question de vous créditer également le mérite du travail (en mentionnant votre pseudo) en utilisant cette "appliquette", ce "widget"

**tails** · 17/06/2015, 20h07

Nouvelle version du widget : les coordonnées sont affichées de part et d'autre de l'échiquier : widget

Maintenant je m'attaque à l'affichage du joueur au trait.

Sinon, j'ai hébergé mon projet sur Github : https://github.com/loloof64/chess_diagram_web_widget

Invité · 18/06/2015, 09h01

Bonjour,
tu as quelques erreurs dans ton code :

HTML : </tr> manquant
CSS : simplifiable
jQuery : on a maintenant une grille de 10x10 cases.

Pour info : tu fais une utilisation impropre du mot Diagramme.
Ici, on a affaire à un "tableau", une "grille", ou simplement un "plateau de jeu".

J'ai mis à jour le mien :

http://codepen.io/jreaux62/pen/ZGJPYP

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
 
<table class="chess_table">
       <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th></th>
      </tr>
      <tr>
        <th>8</th>
        <td id="A8" class="BP">♜</td>
        <td id="B8" class="BP">♞</td>
        <td id="C8" class="BP">♝</td>
        <td id="D8" class="BP">♛</td>
        <td id="E8" class="BP">♚</td>
        <td id="F8" class="BP">♝</td>
        <td id="G8" class="BP">♞</td>
        <td id="H8" class="BP">♜</td>
        <th>8</th>
      </tr>
       <tr>
        <th>7</th>
        <td id="A7" class="BP">♟</td>
        <td id="B7" class="BP">♟</td>
        <td id="C7" class="BP">♟</td>
        <td id="D7" class="BP">♟</td>
        <td id="E7" class="BP">♟</td>
        <td id="F7" class="BP">♟</td>
        <td id="G7" class="BP">♟</td>
        <td id="H7" class="BP">♟</td>
        <th>7</th>
    </tr>
       <tr>
        <th>6</th>
        <td id="A6"></td>
        <td id="B6"></td>
        <td id="C6"></td>
        <td id="D6"></td>
        <td id="E6"></td>
        <td id="F6"></td>
        <td id="G6"></td>
        <td id="H6"></td>
        <th>6</th>
    </tr>
      <tr>
        <th>5</th>
        <td id="A5"></td>
        <td id="B5"></td>
        <td id="C5"></td>
        <td id="D5"></td>
        <td id="E5"></td>
        <td id="F5"></td>
        <td id="G5"></td>
        <td id="H5"></td>
        <th>5</th>
    </tr>
      <tr>
        <th>4</th>
        <td id="A4"></td>
        <td id="B4"></td>
        <td id="C4"></td>
        <td id="D4"></td>
        <td id="E4"></td>
        <td id="F4"></td>
        <td id="G4"></td>
        <td id="H4"></td>
         <th>4</th>
     </tr>
      <tr>
        <th>3</th>
        <td id="A3"></td>
        <td id="B3"></td>
        <td id="C3"></td>
        <td id="D3"></td>
        <td id="E3"></td>
        <td id="F3"></td>
        <td id="G3"></td>
        <td id="H3"></td>
         <th>3</th>
     </tr>
      <tr>
        <th>2</th>
        <td id="A2" class="WP">♙</td>
        <td id="B2" class="WP">♙</td>
        <td id="C2" class="WP">♙</td>
        <td id="D2" class="WP">♙</td>
        <td id="E2" class="WP">♙</td>
        <td id="F2" class="WP">♙</td>
        <td id="G2" class="WP">♙</td>
        <td id="H2" class="WP">♙</td>
        <th>2</th>
      </tr>
      <tr>
        <th>1</th>
        <td id="A1" class="WP">♖</td>
        <td id="B1" class="WP">♘</td>
        <td id="C1" class="WP">♗</td>
        <td id="D1" class="WP">♕</td>
        <td id="E1" class="WP">♔</td>
        <td id="F1" class="WP">♗</td>
        <td id="G1" class="WP">♘</td>
        <td id="H1" class="WP">♖</td>
        <th>1</th>
      </tr>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th class="turn_square"></th>
      </tr>
  </table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* {margin:0; padding:0; }
table.chess_table {
 width:100%; min-width:8em; max-width:64em; 
 margin:0 auto; padding:0;
 border-collapse: collapse; border-spacing: 0;
 box-sizing: border-box;
}
 
table.chess_table tr td {
 margin:0; padding:0;
 font-size: 1em; font-family: serif; text-align: center;
}
 
table.chess_table tr:nth-child(odd) td:nth-child(odd),
table.chess_table tr:nth-child(even) td:nth-child(even){
 background-color: rgb(217, 245, 2);
}
table.chess_table tr:nth-child(odd) td:nth-child(even),
table.chess_table tr:nth-child(even) td:nth-child(odd){
 background-color: rgb(89, 34, 21);
}
table.chess_table tr td.WP { /* blancs */
 color: rgb(179, 48, 63); 
}
table.chess_table tr td.BP { /* noirs */
 color: rgb(0, 0, 0); 
}
table.chess_table tr th {
 color: black; font-size:1em;
}
 
table.chess_table tr th.turn_square {
  border: 0.1em solid black;
}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function resize_table_chess( id )
{
  $(id).width( 'auto' ).height( 'auto' );
  $(id+' td, '+id+' th').width( 'auto' ).height( 'auto' ).css({ 'font-size':0.1+'em' });
  // on redimensionne pour que le plateau tienne dans la fenêtre
  var sizT = Math.max( Math.max( $(id).width(), $(id).height()), Math.min( $(window).width(), $(window).height())-5 ); // -5px : marge
  $(id).width( sizT ).height( sizT );
  // on redimensionne les cases ET les pièces du jeu
  var maxWH = sizT/10; // 10x10 cases
  $(id+' td, '+id+' th').width( maxWH ).height( maxWH );
  $(id+' td').css({ 'font-size':Math.floor(100*maxWH/16/1.4)/100+'em' });
  $(id+' th').css({ 'font-size':Math.floor(100*maxWH/16/2.5)/100+'em' });
};
$(window).on( 'load resize', function(){
	resize_table_chess('.chess_table');
});

**tails** · 19/06/2015, 09h43

Merci

Concernant les nombreuses erreurs de ma version codepen, c'est un peu normal, car maintenant je ne travaille que sur la version que j'ai postée sur Github.
Ta proposition est certes plus correcte que la mienne, mais elle ne prend pas en compte le paramétrage responsive que j'ai codé dans la version Github (pourcentages de taille de la page en mode portrait/paysage).

~~Enfin, j'ai demandé l'autorisation de l'auteur pour utiliser des jolies images svg : Virtual pieces de Peter Wong~~
Pour les images, je compte utiliser des SVG Open Sources : Wikimedia commons

Après, le mot diagramme est mal utilisé, je le reconnais. J'avoue même que, côté anglophone, ma première idée était de parler de "board" (plateau).

Mais ce qui me préoccupe le plus

l'aspect responsive en mode portrait/paysage
le jeu d'icônes~~, dont l'autorisation pourrait venir (j'ai confiance).~~ (Ce problème est résolu)

~~Sinon, une question simple : pour un meilleur rendu sur diverses tailles d'écran : il vaut mieux prendre des images SVG ou bien des images PNG conviennent ? (Android => de small à xxxLarge !!!)~~
(question bête => Svg ami du web design)

Construction grille jeu d'échec en css + unicode : pourquoi n'est-ce pas carré ?

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager