Adrien/Riichi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chap 3

Browse source
This commit is contained in:
Didictateur 2026-02-19 00:39:46 +01:00
parent 75d7ec5d31
commit b12734adf6
3 changed files with 231 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/js/fr/texts.js
View file

@ -33,6 +33,7 @@ const texts = {
Les vents et dragons quant à eux n'ont pas de numéro. On les appelle<br> Les vents et dragons quant à eux n'ont pas de numéro. On les appelle<br>
les honneurs, et ne sont caractérisés que par leur nom. les honneurs, et ne sont caractérisés que par leur nom.
`, `,
chap2:` chap2:`
Les joueurs ne se contentent pas de regarder les tuiles. Ils<br> Les joueurs ne se contentent pas de regarder les tuiles. Ils<br>
constituent une main composée de 13 tuiles.<br> constituent une main composée de 13 tuiles.<br>
@ -45,6 +46,25 @@ const texts = {
d'une tuile de sa main, pour revenir à 13 tuiles. C'est à ce<br> d'une tuile de sa main, pour revenir à 13 tuiles. C'est à ce<br>
moment que les autres joueurs peuvent réagir à la tuile<br> moment que les autres joueurs peuvent réagir à la tuile<br>
défaussée, en la récupérant pour compléter leur propre main. 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<br>
combinaisons.<br>
<br>
En soit, c'en est même la mécanique principale. On en distingue<br>
deux types:<br>
- Les brelans : 3 tuiles identiques<br>
- Les suites : 3 tuiles consécutives de la même famille<br>
<br>
Attention, on ne peux pas non plus faire n'importe quoi avec !<br>
- Ces combinaisons nécessitent toujours 3 tuiles de la même famille<br>
- Les vents et les dragons ne peuvent pas former de suite,<br>
seulement des brelans<br>
<br>
Point vocabulaire ! Au riichi, nous utilisons les termes:<br>
- Chii pour une suite<br>
- Pon pour un brelan<br>
`,
} }
}; };

2
frontend/pages/chap2.html
View file

@ -151,7 +151,7 @@
mascolteEl.addEventListener('click', () => { mascolteEl.addEventListener('click', () => {
speechBubble.classList.toggle('visible'); speechBubble.classList.toggle('visible');
if (speechBubble.classList.contains('visible')) { if (speechBubble.classList.contains('visible')) {
mascolteEl.innerHTML = '<img class="explaining" src="../../img/tilineau/explaining.png" alt="Tilineau">'; mascolteEl.innerHTML = '<img class="explaining" src="../../img/tilineau/speaking.png" alt="Tilineau">';
} else { } else {
mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">'; mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
} }

211
frontend/pages/chap3.html
View file

@ -38,11 +38,52 @@
.speech-bubble.visible { .speech-bubble.visible {
display: flex; 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;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<div id="tiles-display"></div> <h2>Combinaisons valides</h2>
<div id="tiles-container">
<div id="tiles-display"></div>
<div id="tiles-display-2"></div>
</div>
<div id="tiles-container">
<div id="tiles-display-3"></div>
<div id="tiles-display-4"></div>
</div>
<h2>Combinaisons invalides</h2>
<div id="tiles-container">
<div id="tiles-display-5"></div>
<div id="tiles-display-6"></div>
</div>
<div id="tiles-container">
<div id="tiles-display-7"></div>
<div id="tiles-display-8"></div>
</div>
<div id="tiles-display-9"></div>
<div class="speech-bubble"> <div class="speech-bubble">
<div class="speech-text" id="speech-text"></div> <div class="speech-text" id="speech-text"></div>
</div> </div>
@ -66,9 +107,175 @@
mascolteEl.addEventListener('click', () => { mascolteEl.addEventListener('click', () => {
speechBubble.classList.toggle('visible'); speechBubble.classList.toggle('visible');
mascolteEl.innerHTML = speechBubble.classList.contains('visible') mascolteEl.innerHTML = speechBubble.classList.contains('visible')
? '<img class="explaining" src="../../img/tilineau/speaking.png" alt="Tilineau">' ? '<img class="explaining" src="../../img/tilineau/explaining.png" alt="Tilineau">'
: '<img src="../../img/tilineau/speaking.png" alt="Tilineau">'; : '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
}); });
// 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));
</script> </script>
</body> </body>
</html> </html>