diff --git a/frontend/js/fr/texts.js b/frontend/js/fr/texts.js
index d994a58..ef3c3bd 100644
--- a/frontend/js/fr/texts.js
+++ b/frontend/js/fr/texts.js
@@ -33,6 +33,7 @@ const texts = {
Les vents et dragons quant à eux n'ont pas de numéro. On les appelle
les honneurs, et ne sont caractérisés que par leur nom.
`,
+
chap2:`
Les joueurs ne se contentent pas de regarder les tuiles. Ils
constituent une main composée de 13 tuiles.
@@ -45,6 +46,25 @@ const texts = {
d'une tuile de sa main, pour revenir à 13 tuiles. C'est à ce
moment que les autres joueurs peuvent réagir à la tuile
défaussée, en la récupérant pour compléter leur propre main.
- `
+ `,
+
+ chap3: `
+ Avec ces tuiles, les joueurs peuvent s'amuser à former des
+ combinaisons.
+
+ En soit, c'en est même la mécanique principale. On en distingue
+ deux types:
+ - Les brelans : 3 tuiles identiques
+ - Les suites : 3 tuiles consécutives de la même famille
+
+ Attention, on ne peux pas non plus faire n'importe quoi avec !
+ - Ces combinaisons nécessitent toujours 3 tuiles de la même famille
+ - Les vents et les dragons ne peuvent pas former de suite,
+ seulement des brelans
+
+ Point vocabulaire ! Au riichi, nous utilisons les termes:
+ - Chii pour une suite
+ - Pon pour un brelan
+ `,
}
};
diff --git a/frontend/pages/chap2.html b/frontend/pages/chap2.html
index 46f2900..0b4659a 100644
--- a/frontend/pages/chap2.html
+++ b/frontend/pages/chap2.html
@@ -151,7 +151,7 @@
mascolteEl.addEventListener('click', () => {
speechBubble.classList.toggle('visible');
if (speechBubble.classList.contains('visible')) {
- mascolteEl.innerHTML = '
';
+ mascolteEl.innerHTML = '
';
} else {
mascolteEl.innerHTML = '';
}
diff --git a/frontend/pages/chap3.html b/frontend/pages/chap3.html
index e0ad01f..e7f654d 100644
--- a/frontend/pages/chap3.html
+++ b/frontend/pages/chap3.html
@@ -38,11 +38,52 @@
.speech-bubble.visible {
display: flex;
}
+
+ [id^="tiles-display"] {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ padding: 20px;
+ }
+
+ #tiles-container {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 60px;
+ padding: 20px;
+ }
+
+ h2 {
+ text-align: center;
+ margin-top: 40px;
+ margin-bottom: 20px;
+ color: white;
+ }
-
+ Combinaisons valides
+
+
+ Combinaisons invalides
+
+
+
@@ -66,9 +107,175 @@
mascolteEl.addEventListener('click', () => {
speechBubble.classList.toggle('visible');
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
- ? ''
+ ? ''
: '';
});
+
+ // Afficher les pons et les chiis
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay = document.getElementById('tiles-display');
+ const tile = data.tiles[10];
+
+ if (tile) {
+ for (let i = 0; i < 3; i++) {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay.appendChild(tileDiv);
+ }
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay2 = document.getElementById('tiles-display-2');
+ const tile1 = data.tiles[11];
+ const tile2 = data.tiles[12];
+ const tile3 = data.tiles[13];
+
+ if (tile1 && tile2 && tile3) {
+ const tiles = [tile1, tile2, tile3];
+ tiles.forEach(tile => {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay2.appendChild(tileDiv);
+ });
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay = document.getElementById('tiles-display-3');
+ const tile = data.tiles[30];
+
+ if (tile) {
+ for (let i = 0; i < 3; i++) {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay.appendChild(tileDiv);
+ }
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay = document.getElementById('tiles-display-4');
+ const tile = data.tiles[32];
+
+ if (tile) {
+ for (let i = 0; i < 3; i++) {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay.appendChild(tileDiv);
+ }
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay2 = document.getElementById('tiles-display-5');
+ const tile1 = data.tiles[21];
+ const tile2 = data.tiles[22];
+
+ if (tile1 && tile2) {
+ const tiles = [tile1, tile2];
+ tiles.forEach(tile => {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay2.appendChild(tileDiv);
+ });
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay2 = document.getElementById('tiles-display-6');
+ const tile1 = data.tiles[11];
+ const tile2 = data.tiles[12];
+ const tile3 = data.tiles[13];
+ const tile4 = data.tiles[14];
+
+ if (tile1 && tile2) {
+ const tiles = [tile1, tile2, tile3, tile4];
+ tiles.forEach(tile => {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay2.appendChild(tileDiv);
+ });
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay2 = document.getElementById('tiles-display-7');
+ const tile1 = data.tiles[27];
+ const tile2 = data.tiles[28];
+ const tile3 = data.tiles[29];
+
+ if (tile1 && tile2 && tile3) {
+ const tiles = [tile1, tile2, tile3];
+ tiles.forEach(tile => {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay2.appendChild(tileDiv);
+ });
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay2 = document.getElementById('tiles-display-8');
+ const tile1 = data.tiles[31];
+ const tile2 = data.tiles[32];
+ const tile3 = data.tiles[33];
+
+ if (tile1 && tile2 && tile3) {
+ const tiles = [tile1, tile2, tile3];
+ tiles.forEach(tile => {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay2.appendChild(tileDiv);
+ });
+ }
+ })
+ .catch(error => console.error('Erreur:', error));
+
+ fetch('http://localhost:5000/api/tiles')
+ .then(r => r.json())
+ .then(data => {
+ const tilesDisplay2 = document.getElementById('tiles-display-9');
+ const tile1 = data.tiles[3];
+ const tile2 = data.tiles[13];
+ const tile3 = data.tiles[23];
+ const tile4 = data.tiles[6];
+ const tile5 = data.tiles[16];
+ const tile6 = data.tiles[26];
+
+ if (tile1 && tile2 && tile3 && tile4 && tile5 && tile6) {
+ const tiles = [tile1, tile2, tile3, tile4, tile5, tile6];
+ tiles.forEach(tile => {
+ const tileDiv = document.createElement('div');
+ tileDiv.innerHTML = tile.svg;
+ tilesDisplay2.appendChild(tileDiv);
+ });
+ }
+ })
+ .catch(error => console.error('Erreur:', error));