144 lines
No EOL
3.9 KiB
HTML
144 lines
No EOL
3.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: fixed;
|
|
bottom: 200px;
|
|
right: 170px;
|
|
z-index: 998;
|
|
display: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="menu"></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-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/speaking.png" alt="Tilineau">';
|
|
document.getElementById('speech-text').innerHTML = texts.riichi.chap3;
|
|
|
|
// 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/speaking.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
|
|
displayTiles('tiles-display', [10, 10, 10]);
|
|
displayTiles('tiles-display-2', [11, 12, 13]);
|
|
displayTiles('tiles-display-3', [30, 30, 30]);
|
|
displayTiles('tiles-display-4', [32, 32, 32]);
|
|
displayTiles('tiles-display-5', [21, 22]);
|
|
displayTiles('tiles-display-6', [11, 12, 13, 14]);
|
|
displayTiles('tiles-display-7', [27, 28, 29]);
|
|
displayTiles('tiles-display-8', [31, 32, 33]);
|
|
displayTiles('tiles-display-9', [3, 13, 23, 6, 16, 26]);
|
|
</script>
|
|
</body>
|
|
</html> |