151 lines
No EOL
4.2 KiB
HTML
151 lines
No EOL
4.2 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: 110px;
|
|
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>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>
|
|
<div id="mascotte"></div>
|
|
|
|
<script src="/frontend/js/fr/texts.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.chap8;
|
|
|
|
// 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/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> |