28172 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour Olivier,

Bonne idée le codepen.

Je suis en train de finaliser la partie entière à mettre dans le array. J'ai externalisé les data (le array 'movesCollection') dans un fichier data.js avec export. Je l'importe ensuite dans le fichier JS principal mais il faut bien sur mettre dans le code HTML 'script type="module" ' et faire un import.

Pour le site, ce n'est pas celui que j'avais trouvé. il me semble que le design du site " https://www.chess.com/fr/games/view/16372061 " est plus joli. C'est à partir de ce site que j'ai vu le 'play' et coloriser les cases d'origine et d'arrivée.

A bientôt.
Ah oui. Je ne suis pas encore allé voir le code source mais le design est bien plus à jour effectivement.

Et en plus la partie sur ton site semble correcte car, avec celui que j'ai mis en lien, il semble que le fichier des coups est corrompu, je ne comprenais pas la fin de la partie. Là, avec ton lien, l'enchaînement des coups et l'échec et mat sont tout de suite plus logiques.
Bonsoir,

voila la partie entiere des data (fichier 'data.js').

je prevois de reorganiser le array 'movesCollection' par la suite :

- en index 1 de l'array de chaque coup : le numero du coup
- en 2 le nom de la piece
- en 3 la case de depart
- en 4 soit 'x' si la piece prend, soit '' si elle n'y a pas de prise
- en 5 la case d arrivee
- en 6 '+' si echec ou '++' si mat (il faudra penser au pat, on pourra mettre '=' par exemple)
- en 7 la position du roi en echec pour pouvoir la mettre en surbrillance

il faudra aussi voir le pble du roque. ici, il faut cliquer 2 fois, j'ai fait au plus simple .


export let movesCollection = [
    ['a2', 'a4', 'p'], ['g8', 'f6', 'c'],
    ['d2', 'd4', 'p'], ['d7', 'd5', 'p'],
    ['g1', 'f3', 'c'], ['c8', 'f5', 'f'],
    ['f3', 'h4', 'c'], ['f5', 'e4', 'f'],
    ['f2', 'f3', 'p'], ['e4', 'g6', 'f'],
    ['b1', 'c3', 'c'], ['c7', 'c5', 'p'],
    ['e2', 'e4', 'p'], ['c5', 'd4', 'p', 'x'],
    ['h4', 'g6', 'c', 'x'], ['h7', 'g6', 'p', 'x'],
    ['d1', 'd4', 'd', 'x'], ['b8', 'c6', 'c'],
    ['d4', 'f2', 'd'], ['d5', 'd4', 'p'],

    ['c3', 'd1', 'c'], ['e7', 'e5', 'p'],
    ['f1', 'c4', 'f'], ['a8', 'c8', 't'],
    ['f2', 'e2', 'd'], ['f8', 'b4', 'f', '+'],
    ['e1', 'f1', 'r'], ['c6', 'a5', 'c'],
    ['c4', 'd3', 'f'], ['h8', 'f8', 't', 'o-o'],
                       ['e8', 'g8', 'r', 'o-o'],
    ['d1', 'f2', 'c'], ['d8', 'b6', 'd'],
    ['h2', 'h4', 'p'], ['f6', 'h5', 'c'],
    ['h1', 'h3', 't'], ['b6', 'f6', 'd'],
    ['g2', 'g4', 'p'], ['h5', 'f4', 'c'],
    ['c1', 'f4', 'f', 'x'], ['f6', 'f4', 'd', 'x'],

    ['h4', 'h5', 'p'], ['g6', 'g5', 'p'],
    ['a1', 'd1', 't'], ['a7', 'a6', 'p'],
    ['f1', 'g2', 'r'], ['c8', 'c7', 't'],
    ['h3', 'h1', 't'], ['f8', 'c8', 't'],
    ['f2', 'h3', 'c'], ['f4', 'f6', 'd'], 
    ['d1', 'a1', 't'], ['a5', 'c6', 'c'],
    ['h1', 'c1', 't'], ['b4', 'd6', 'f'],
    ['e2', 'd2', 'd'], ['d6', 'b4', 'f'],
    ['c2', 'c3', 'p'], ['b4', 'e7', 'f'],
    ['h3', 'f2', 'c'], ['d4', 'c3', 'p', 'x'],

    ['b2', 'c3', 'p', 'x'], ['c6', 'd8', 'c'],
    ['d3', 'b1', 'f'], ['d8', 'e6', 'c'],
    ['f2', 'h3', 'c'], ['e7', 'c5', 'f'],
    ['b1', 'a2', 'f'], ['c8', 'd8', 't'],
    ['d2', 'e2', 'd'], ['e6', 'f4', 'c', '+'],
    ['h3', 'f4', 'c', 'x'], ['g5', 'f4', 'p', 'x'],
    ['g2', 'h3', 'r'], ['g7', 'g6', 'p'],
    ['c1', 'd1', 't'], ['c7', 'd7', 't'],
    ['d1', 'd7', 't','x'], ['d8', 'd7', 't', 'x'],
    ['a1', 'd1', 't'], ['c5', 'f2', 'f'],

    ['a2', 'f7', 'f', '+'], ['g8', 'f8', 'r'],
    ['e2', 'f2', 'd', 'x'], ['d7', 'd1', 't', 'x'],
    ['f7', 'g6', 'f'], ['f6', 'd6', 'd'],
    ['g4', 'g5', 'p'], ['d6', 'd3', 'd'],
    ['f2', 'c5', 'd', '+'], ['d3', 'd6', 'd'],
    ['c5', 'c8', 'd', '+'], ['f8', 'g7', 'r'],
    ['c8', 'b7', 'd', '+'], ['g7', 'f8', 'r'],
    ['b7', 'f7', 'd', '++']
]


il faut modifier la balise <script> en consequence en ajoutant 'type="module" '

<script type="module" src="app.js"></script>
Sacré travail.

Avant d'aller trop loin, si j'étais toi, plutôt que de franciser des dénominations - comme ici les pièces -, j'utiliserais l'anglais pour des raisons... on va dire... "universalistes" :
"https://www.iechecs.com/notation.htm" a écrit :
K = Roi
Q = Dame
B = Fou (Bishop)
N = Cavalier (kNight)
R = Tour (Rook)

Basé sur la notation PGN (Portable Game Notation) anglaise.
Il n'y a rien pour les pions mais dans les programmes anglophones j'ai vu passer le "P" (Pawn).

IMPORTANT : devant un projet si intéressant, qui sort largement de la question d'origine, je t'encourage à ouvrir ton propre sujet. Ce serait amplement mérité. Tu aurais au moins 1 lecteur... Smiley cligne
Modifié par Olivier C (10 Jun 2023 - 06:52)
Bonjour Olivier,

Merci, c'est vrai je melange un peu francais anglais Smiley smile . Quand je suis dans le code, je prend ce qui vient sponténément : move play c'est facile, mais pour le reste c'est pas tres spontané alors j'utilise le francais. Pareil pour la denomination des fonctions. Mais comme il n'a pas vocation à etre un programme commercial, alors pas trop grave.

Ca y est, j'ai fait hier la gestion du roque et la mise en rouge du roi quand il est en echec.

Je pense que ca pourrait effectivement servir à des club d'echecs (open source), pour leurs adherents. Il suffit de changer le fichier data.js (d'ailleurs, on aurait pu le mettre en fichier json), ils pourraient rejouer leur propre partie et voir leur erreur ... .

Sur un site, ce serait php qui gererait une partie.

Merci j'arrete là pour le forum.
Modérateur
Bonjour,
alain_47 a écrit :
Je n'ai pas trouvé pour mettre les 'blancs' blancs.

Les pieces noires sont en couleur pleine mais les pieces blanches semblent etre en couleur transparente. Le contour est noir mais l'intérieur est transparent, donc on voit le background.

Généralement, les polices de caractères, c'est unicolore. Mais dans le cas présent, on peut s'en sortir en utilisant les caractères des 'noirs' aussi pour les 'blancs' avec des propriété css qui peuvent afficher les contours des caractères en une autre couleur.

Par exemple :
.white
{
	color: #fff;
	-webkit-text-fill-color: #fff;
	-webkit-text-stroke-width: max(0.1vmin,0.5px);
	-webkit-text-stroke-color: #000;
}

Un jsfiddle : https://jsfiddle.net/parsimonhi/z3ohdnwq/

Amicalement,
Modifié par parsimonhi (12 Jun 2023 - 04:29)
parsimonhi a écrit :
Généralement, les polices de caractères, c'est unicolore. Mais dans le cas présent, on peut s'en sortir en utilisant les caractères des 'noirs' aussi pour les 'blancs' avec des propriété css qui peuvent afficher les contours des caractères en une autre couleur.

Oui, c'est ce que je lui disais plus haut mais pour l'instant il préfère laisser comme ça.

Du coup de m'y suis mis moi aussi : CodePen.

upload/1686543871-35007-chess.jpg

Parfaitement inutile (au vu de ce qui existe déjà), donc absolument indispensable !
Modifié par Olivier C (12 Jun 2023 - 06:25)
Bonjour à tous les deux et merci.

Je vais voir tout ca.

Au niveau du jeu, il est fonctionnel : le roque et la mise en echec sont opérationnels.

Hier soir, j'ai commencé à la partie "affichage des coups joués". J'avais fait une esquisse des 18 premiers coups "à la main" en HTML pour avoir un visuel mais bien sur beaucoup trop long. Donc c'est le JS qui va le faire automatiquement à partir du fichier data.js (avec createElement et appendChild dans des boucles).

Pour le fichier data.js, je l'ai modifié pour qu'il soit plus complet ; maintenant il est du genre

export let movesCollection = [
    ['01',  'p', 'a2', ' ', 'a4', ''],      ['01', 'c', 'g8', ' ', 'f6', ''],
    ['02',  'p', 'd2', ' ', 'd4', ''],      ['02', 'p', 'd7', ' ', 'd5', ''],
    ['03',  'c', 'g1', ' ', 'f3', ''],      ['03', 'f', 'c8', ' ', 'f5', ''],
    ['04',  'c', 'f3', ' ', 'h4', ''],      ['04', 'f', 'f5', ' ', 'e4', ''],
    ['05',  'p', 'f2', ' ', 'f3', ''],      ['05', 'f', 'e4', ' ', 'g6', ''],
    ['06',  'c', 'b1', ' ', 'c3', ''],      ['06', 'p', 'c7', ' ', 'c5', ''],
    ['07',  'p', 'e2', ' ', 'e4', ''],      ['07', 'p', 'c5', 'x', 'd4', ''],
    ['08',  'c', 'h4', 'x', 'g6', ''],      ['08', 'p', 'h7', 'x', 'g6', ''],
    ['09',  'd', 'd1', 'x', 'd4', ''],      ['09', 'c', 'b8', ' ', 'c6', ''],
    ['10',  'd', 'd4', ' ', 'f2', ''],      ['10', 'p', 'd5', ' ', 'd4', ''],

    ['11', 'c', 'c3', ' ', 'd1', ''],       ['11', 'p', 'e7', ' ', 'e5', ''],
    ['12', 'f', 'f1', ' ', 'c4', ''],       ['12', 't', 'a8', ' ', 'c8', ''],
    ['13', 'd', 'f2', ' ', 'e2', ''],       ['13', 'f', 'f8', ' ', 'b4', '+', 'e1'],
    ['14', 'r', 'e1', ' ', 'f1', '/'],       ['14', 'c', 'c6', ' ', 'a5', ''],
    ['15', 'f', 'c4', ' ', 'd3', ''],       ['15', 't', 'o-o', 'n', ' ', ''],
    ['16', 'c', 'd1', ' ', 'f2', ''],       ['16', 'd', 'd8', ' ', 'b6', ''],
    ['17', 'p', 'h2', ' ', 'h4', ''],       ['17', 'c', 'f6', ' ', 'h5', ''],
    ['18', 't', 'h1', ' ', 'h3', ''],       ['18', 'd', 'b6', ' ', 'f6', ''],
    .....................


Je me rends compte que j'ai mis l'échiquier dans un <table> (ah les vieilles habitudes). En principe, ce sont des données seulement qu on doit mettre dans un <table> (semantiquement). Il faudrait que je le refasse dans des <div> avec <section> à la place des <tr> par exemple, mais au final, ca donnera la meme chose. Je prefere le faire sous forme de ligne et colonne, c'est plus facile à coder ensuite pour le jeu.

Merci à tous les deux et bonne journée.
Modifié par alain_47 (12 Jun 2023 - 08:09)
Rebonjour,

Olivier, je viens d'aller voir ton codepen. Très joli travail.

Une toute petite chose, dans le codepen il semble y avoir une coquille dans le fichier CSS (il y a un 'color' qui s'est glissé en dehors des accolades).


.chess .active::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.4em solid Tomato;
}
.chess .active::after,
color: #000,  <===== ici
.chess .active * {
  z-index: 3;
}
* {
  box-sizing: border-box;
}
body {
  display: grid;


Encore bravo.
alain_47 a écrit :
Olivier, je viens d'aller voir ton codepen. Très joli travail.

En fait ce prototype a une erreur structurelle : je m'appuie trop sur le HTML généré pour la gestion des coups alors qu'il faudrait que je stocke tout dans un tableau JavaScript et que le HTML serve seulement d'interface.

C'est ce que je ferais dans une version postérieure.

Merci pour la coquille. L'autocomplétion d'un CodePen sur mobile c'est pas terrible...
Modifié par Olivier C (12 Jun 2023 - 12:00)
alain_47 a écrit :
Je me rends compte que j'ai mis l'échiquier dans un &lt;table&gt; (ah les vieilles habitudes). En principe, ce sont des données seulement qu on doit mettre dans un &lt;table&gt; (sémantiquement). Il faudrait que je le refasse dans des &lt;div&gt; avec &lt;section&gt; à la place des &lt;tr&gt; par exemple, mais au final, ça donnera la même chose. Je préfère le faire sous forme de ligne et colonne, c'est plus facile à coder ensuite pour le jeu.

J'ai réfléchi moi aussi à la structure et j'ai failli pencher pour les tables avant de me dire que c'était une fausse bonne idée et que ça allait m'empêtrer à terme.

Alors j'ai préféré revenir à la simplicité des div en leur allouant une unique ID chacune, donc de "a1" à "h8" :
<div class="chess">
  <div id="a8"></div>
  <div id="b8"></div>
  <div id="c8"></div>
  <div id="d8"></div>
  <div id="e8"></div>
  <div id="f8"></div>
  <div id="g8"></div>
  <div id="h8"></div>
  <div id="a7"></div>
  <div id="b7"></div>
  <div id="c7"></div>
  <!-- etc -->

Bon, je ne me suis pas farcis le HTML à la main car j'utilise Pug comme moteur de template, pour la génération du HTML c'est magique :
.chess
  - for (let i = 8; i > 0; i--)
    - for (let a = 0; a < 8; a++)
      div(id=String.fromCharCode(97 + a) + i)

Par la suite ça simplifie de beaucoup le JavaScript, au lieu d'avoir une multitude de sélecteurs :nth-child() pour chercher par ligne puis par colonne on atteint directement sa cible avec un bon vieux .getElementById().
Modifié par Olivier C (12 Jun 2023 - 19:57)
Je verrais plus tard comment parser un fichier PGN pour le rendre exploitable par mon programme. En attendant voici la célèbre "Partie de l'Opéra" retranscrite sous forme de tableau JS :
const game = [ // Partie de l'Opéra | Paul Morphy vs. Duke Karl (1858)
  ['wp', 'e2', 'e4'], ['bp', 'e7', 'e5'],
  ['wn', 'g1', 'f3'], ['bp', 'd7', 'd6'],
  ['wp', 'd2', 'd4'], ['bb', 'c8', 'g4'],
  ['wp', 'd4', 'e5', 'x'], ['bb', 'g4', 'f3', 'x'],
  ['wq', 'd1', 'f3', 'x'], ['bp', 'd6', 'e5', 'x'],
  ['wb', 'f1', 'c4'], ['bn', 'g8', 'f6'],
  ['wq', 'f3', 'b3'], ['bq', 'd8', 'e7'],
  ['wn', 'b1', 'c3'], ['bp', 'c7', 'c6'],
  ['wb', 'c1', 'g5'], ['bp', 'b7', 'b5'],
  ['wn', 'c3', 'b5', 'x'], ['bp', 'c6', 'b5', 'x'],
  ['wb', 'c4', 'b5', 'x'], ['bn', 'b8', 'd7'],
  ['wk', 'e1', 'c1', '0-0-0'], ['wr', 'a1', 'd1', '0-0-0'], ['br', 'a8', 'd8'],
  ['wr', 'd1', 'd7', 'x'], ['br', 'd8', 'd7', 'x'],
  ['wr', 'h1', 'd1'], ['bq', 'e7', 'e6'],
  ['wb', 'b5', 'd7', 'x', '+'], ['bn', 'f6', 'd7', 'x'],
  ['wq', 'b3', 'b8', '+'], ['bn', 'd7', 'b8', 'x'],
  ['wr', 'd1', 'd8', '#']
]

À la structure de mon tableau on voit que je n'ai pas encore géré les roques (ni les prises en passant d'ailleurs)...
Modifié par Olivier C (13 Jun 2023 - 00:55)