chap 8 done

This commit is contained in:
Didictateur 2026-02-24 19:55:14 +01:00
parent b2ddb4718b
commit d8ef8022e0
2 changed files with 73 additions and 1 deletions

View file

@ -159,7 +159,7 @@ const texts = {
la main va valoir beaucoup de point en cas de victoire.<br>
<br>
La plupart du temps, il suffit de connaitre quelques yakus pour pouvoir jouer et<br>
s'amuser. Parmi eux, se trouvent:<br>
s'amuser. Par exemple:<br>
- brelan de dragon<br>
- brelan d'Est, ou de son propre vent<br>
- main (semie) pure: toutes les tuiles (plus des vents/dragons) de la même famille<br>

View file

@ -39,6 +39,22 @@
display: flex;
}
[id^="tiles-display"] {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
padding: 20px;
}
#tiles-container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 10px;
padding: 20px;
}
h2 {
text-align: center;
margin-top: 40px;
@ -49,6 +65,34 @@
</head>
<body>
<div id="menu"></div>
<h2>Brelan de valeur (dragons, Est ou vent du joueur)</h2>
<div id="tiles-display"></div>
<h2>Tout ordinaire</h2>
<div id="tiles-display-2"></div>
<h2>Triple suite</h2>
<div id="tiles-display-3"></div>
<h2>Suite pure</h2>
<div id="tiles-display-4"></div>
<h2>Pure</h2>
<div id="tiles-display-5"></div>
<h2>Semie pure</h2>
<div id="tiles-display-6"></div>
<h2>7 paires</h2>
<div id="tiles-display-7"></div>
<h2>Tout brelan</h2>
<div id="tiles-display-8"></div>
<h2>Pinfu (uniquement suites + double attente)</h2>
<div id="tiles-display-9"></div>
<div class="speech-bubble">
<div class="speech-text" id="speech-text"></div>
</div>
@ -74,6 +118,34 @@
? '<img class="explaining" src="/img/tilineau/speaking.png" alt="Tilineau">'
: '<img src="/img/tilineau/idle.png" alt="Tilineau">';
});
// Fonction utilitaire pour afficher les tuiles
function displayTiles(displayId, tileIndices) {
fetch('/api/tiles')
.then(r => r.json())
.then(data => {
const display = document.getElementById(displayId);
tileIndices.forEach(idx => {
const tile = data.tiles[idx];
if (tile) {
const tileDiv = document.createElement('div');
tileDiv.innerHTML = tile.svg;
display.appendChild(tileDiv);
}
});
})
.catch(error => console.error('Erreur:', error));
}
displayTiles('tiles-display', [4, 5, 6, 8, 8, 8, 14, 14, 24, 25, 26, 32, 32, 32]);
displayTiles('tiles-display-2', [4, 5, 6, 7, 7, 7, 14, 14, 20, 21, 22, 24, 24, 24]);
displayTiles('tiles-display-3', [4, 5, 6, 13, 14, 15, 22, 23, 24, 17, 17, 20, 20, 20]);
displayTiles('tiles-display-4', [9, 10, 11, 12, 13, 14, 15, 16, 17, 23, 23, 23, 27, 27]);
displayTiles('tiles-display-5', [18, 18, 18, 20, 21, 22, 21, 22, 23, 25, 25, 26, 26, 26]);
displayTiles('tiles-display-6', [18, 18, 18, 20, 21, 22, 21, 22, 23, 25, 25, 27, 27, 27]);
displayTiles('tiles-display-7', [1, 1, 6, 6, 18, 18, 19, 19, 24, 24, 28, 28, 30, 30]);
displayTiles('tiles-display-8', [2, 2, 2, 7, 7, 7, 20, 20, 25, 25, 25, 29, 29, 29]);
displayTiles('tiles-display-9', [1, 2, 3, 9, 10, 11, 15, 16, 17, 20, 21, 28, 28])
</script>
</body>
</html>