text 6 + correctifs
This commit is contained in:
Didictateur
parent
79944ec771
commit
4011c1f622
5 changed files with 106 additions and 11 deletions
|
|
@ -70,6 +70,7 @@ const texts = {
|
|||
chap4:`
|
||||
Pour gagner, il faut avoir nécessairement un main bien formée.<br>
|
||||
cela a évidemment un rapport avec les groupes vus précédément.<br>
|
||||
<br>
|
||||
Pour être exacte, une main est bien formée si elle possède:<br>
|
||||
- 4 groupes de 3 (pon ou chii)<br>
|
||||
- 1 paire<br>
|
||||
|
|
@ -118,7 +119,7 @@ const texts = {
|
|||
- la tuile gagnante est piochée, c'est un "Tsumo"<br>
|
||||
- la tuile gagnante est volée, c'est un "Ron"<br>
|
||||
<br>
|
||||
Ces terme sont important, car ils doivent être pronnoncés pour<br>
|
||||
Ces terme sont importants, car ils doivent être pronnoncés pour<br>
|
||||
signaler la victoire !
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,8 +107,8 @@
|
|||
mascolteEl.addEventListener('click', () => {
|
||||
speechBubble.classList.toggle('visible');
|
||||
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
|
||||
? '<img class="explaining" src="/img/tilineau/idle.png" alt="Tilineau">'
|
||||
: '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
|
||||
? '<img class="explaining" src="/img/tilineau/speaking.png" alt="Tilineau">'
|
||||
: '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
||||
});
|
||||
|
||||
// Fonction utilitaire pour afficher les tuiles
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.speech-bubble {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
top: 250px;
|
||||
right: 170px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
|
|
@ -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,12 +65,43 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="menu"></div>
|
||||
<h2>Mains bien formées</h2>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display"></div>
|
||||
<div id="tiles-display-2"></div>
|
||||
<div id="tiles-display-3"></div>
|
||||
<div id="tiles-display-4"></div>
|
||||
<div id="tiles-display-5"></div>
|
||||
</div>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display-6"></div>
|
||||
<div id="tiles-display-7"></div>
|
||||
<div id="tiles-display-8"></div>
|
||||
<div id="tiles-display-9"></div>
|
||||
<div id="tiles-display-10"></div>
|
||||
</div>
|
||||
<h2>Mains mal formées</h2>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display-11"></div>
|
||||
<div id="tiles-display-12"></div>
|
||||
<div id="tiles-display-13"></div>
|
||||
<div id="tiles-display-14"></div>
|
||||
<div id="tiles-display-15"></div>
|
||||
</div>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display-16"></div>
|
||||
<div id="tiles-display-17"></div>
|
||||
<div id="tiles-display-18"></div>
|
||||
<div id="tiles-display-19"></div>
|
||||
<div id="tiles-display-20"></div>
|
||||
</div>
|
||||
<div class="speech-bubble">
|
||||
<div class="speech-text" id="speech-text"></div>
|
||||
</div>
|
||||
<div id="mascotte"></div>
|
||||
|
||||
<script src="/frontend/js/fr/texts.js"></script>
|
||||
<script src="/frontend/js/hand.js"></script>
|
||||
<script>
|
||||
// Charger le menu
|
||||
fetch('/components/menu.html')
|
||||
|
|
@ -63,7 +110,7 @@
|
|||
|
||||
// Afficher la mascotte et le texte
|
||||
const mascolteEl = document.getElementById('mascotte');
|
||||
mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
|
||||
mascolteEl.innerHTML = '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
||||
document.getElementById('speech-text').innerHTML = texts.riichi.chap4;
|
||||
|
||||
// Toggle bulle de dialogue au clic sur la mascotte
|
||||
|
|
@ -72,8 +119,55 @@
|
|||
speechBubble.classList.toggle('visible');
|
||||
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
|
||||
? '<img class="explaining" src="/img/tilineau/explaining.png" alt="Tilineau">'
|
||||
: '<img 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));
|
||||
}
|
||||
|
||||
// Afficher les combinaisons
|
||||
// main 1
|
||||
displayTiles('tiles-display', [10, 10, 10]);
|
||||
displayTiles('tiles-display-2', [21, 22, 23]);
|
||||
displayTiles('tiles-display-3', [11, 12, 13]);
|
||||
displayTiles('tiles-display-4', [31, 31, 31]);
|
||||
displayTiles('tiles-display-5', [32, 32]);
|
||||
|
||||
// main 2
|
||||
displayTiles('tiles-display-6', [1, 2, 3]);
|
||||
displayTiles('tiles-display-7', [1, 2, 3]);
|
||||
displayTiles('tiles-display-8', [2, 3, 4]);
|
||||
displayTiles('tiles-display-9', [4, 4, 4]);
|
||||
displayTiles('tiles-display-10', [5, 5]);
|
||||
|
||||
// main 3
|
||||
displayTiles('tiles-display-11', [9, 10, 11])
|
||||
displayTiles('tiles-display-12', [12, 13, 14])
|
||||
displayTiles('tiles-display-13', [15, 16, 17])
|
||||
displayTiles('tiles-display-14', [20, 21, 22])
|
||||
displayTiles('tiles-display-15', [23, 24, 25])
|
||||
|
||||
// main 4
|
||||
displayTiles('tiles-display-16', [0, 1, 2])
|
||||
displayTiles('tiles-display-17', [10, 11, 12])
|
||||
displayTiles('tiles-display-18', [19, 19, 19])
|
||||
displayTiles('tiles-display-19', [27, 27])
|
||||
displayTiles('tiles-display-20', [29, 29])
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
|
||||
// Afficher la mascotte et le texte
|
||||
const mascolteEl = document.getElementById('mascotte');
|
||||
mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
|
||||
mascolteEl.innerHTML = '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
||||
document.getElementById('speech-text').innerHTML = texts.riichi.chap5;
|
||||
|
||||
// Toggle bulle de dialogue au clic sur la mascotte
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
speechBubble.classList.toggle('visible');
|
||||
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
|
||||
? '<img class="explaining" src="/img/tilineau/explaining.png" alt="Tilineau">'
|
||||
: '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
|
||||
: '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
|
||||
// Afficher la mascotte et le texte
|
||||
const mascolteEl = document.getElementById('mascotte');
|
||||
mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
|
||||
mascolteEl.innerHTML = '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
||||
document.getElementById('speech-text').innerHTML = texts.riichi.chap6;
|
||||
|
||||
// Toggle bulle de dialogue au clic sur la mascotte
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
mascolteEl.addEventListener('click', () => {
|
||||
speechBubble.classList.toggle('visible');
|
||||
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
|
||||
? '<img class="explaining" src="/img/tilineau/explaining.png" alt="Tilineau">'
|
||||
: '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
|
||||
? '<img class="explaining" src="/img/tilineau/speaking.png" alt="Tilineau">'
|
||||
: '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue