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 ?
Bonjour,
le plus simple est de dimensionner les cases de la même taille (ou supérieur) que le font-size (ici à 2.0em) :
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.Code:
2
3
4
5
6
7
8
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).
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)
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 :)
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
Pour le coté responsive, on peut ajouter un bout de jQuery :
Code:
2
3
4
5
6
7
8
9
10
11
12
13
On peut aussi imposer des dimensions maxi/mini à la table :
Code:
2
3
4
5
6
7
8
9
10
Voici un plateau d'échec complet, responsive et optimisé/simplifié :
Code:
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
Code:
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
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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"
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
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 :
Code:
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
Code:
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
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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)