74 lines
No EOL
2 KiB
HTML
74 lines
No EOL
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: fixed;
|
|
bottom: 0;
|
|
right: 160px;
|
|
z-index: 999;
|
|
transform: scaleX(-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#mascotte img {
|
|
width: 250px;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.speech-bubble {
|
|
position: fixed;
|
|
bottom: 320px;
|
|
right: 170px;
|
|
z-index: 998;
|
|
display: none;
|
|
}
|
|
|
|
.speech-bubble.visible {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="menu"></div>
|
|
<div id="tiles-display"></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/speaking.png" alt="Tilineau">'
|
|
: '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |