173 lines
No EOL
4.9 KiB
HTML
173 lines
No EOL
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tuto Riichi</title>
|
|
<link rel="stylesheet" href="/frontend/css/style.css">
|
|
<link rel="stylesheet" href="/frontend/css/speech-bubble.css">
|
|
<link rel="stylesheet" href="/frontend/css/hand.css">
|
|
<style>
|
|
#menu {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
#mascotte {
|
|
position: absolute;
|
|
top: 670px;
|
|
right: 100px;
|
|
z-index: 999;
|
|
transform: scaleX(-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#mascotte img {
|
|
width: 250px;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.speech-bubble {
|
|
position: absolute;
|
|
top: 250px;
|
|
right: 170px;
|
|
z-index: 1;
|
|
display: none;
|
|
}
|
|
|
|
.speech-bubble.visible {
|
|
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;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</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')
|
|
.then(r => r.text())
|
|
.then(html => document.getElementById('menu').innerHTML = html);
|
|
|
|
// Afficher la mascotte et le texte
|
|
const mascolteEl = document.getElementById('mascotte');
|
|
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
|
|
const speechBubble = document.querySelector('.speech-bubble');
|
|
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/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> |