Adrien/Riichi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chap3 template

Browse source
This commit is contained in:
Didictateur 2026-02-18 20:48:40 +01:00
parent c1f4dfcd23
commit 75d7ec5d31
2 changed files with 75 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/menu.html
View file

@ -12,7 +12,7 @@
<ul class="submenu"> <ul class="submenu">
<li><a href="/frontend/pages/chap1.html">Chapitre 1 : Les tuiles</a></li> <li><a href="/frontend/pages/chap1.html">Chapitre 1 : Les tuiles</a></li>
<li><a href="/frontend/pages/chap2.html">Chapitre 2 : La main</a></li> <li><a href="/frontend/pages/chap2.html">Chapitre 2 : La main</a></li>
<li><a href="">Chapitre 3 : Les groupes</a></li> <li><a href="/frontend/pages/chap3.html">Chapitre 3 : Les groupes</a></li>
</ul> </ul>
</li> </li>
<li> <li>

74
frontend/pages/chap3.html Normal file
View file

@ -0,0 +1,74 @@
<!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>