add text 6
This commit is contained in:
Didictateur
parent
e2084e5414
commit
a3cbd5ada0
5 changed files with 109 additions and 9 deletions
|
|
@ -15,7 +15,7 @@
|
|||
<li><a href="/frontend/pages/chap3.html">Chapitre 3 : Les groupes</a></li>
|
||||
<li><a href="/frontend/pages/chap4.html">Chapitre 4 : Avoir une main valide</a></li>
|
||||
<li><a href="/frontend/pages/chap5.html">Chapitre 5 : Voler une tuile</a></li>
|
||||
<li><a href="">Chapitre 6 : Annoncer la victoire</a></li>
|
||||
<li><a href="/frontend/pages/chap6.html">Chapitre 6 : Annoncer la victoire</a></li>
|
||||
<li><a href="">Chapitre 7 : Le vent du joueur</a></li>
|
||||
<li><a href="">Chapitre 8 : Les Yakus</a></li>
|
||||
<li><a href="">Chapitre 9 : Le riichi</a></li>
|
||||
|
|
|
|||
|
|
@ -87,16 +87,39 @@ const texts = {
|
|||
Maintenant, passons aux choses sérieuses: le vole !<br>
|
||||
Enfin... Le vole de tuile en tout cas. Lorsque quelqu'un<br>
|
||||
défausse une tuile, tu as la possibilité de la récupérer<br>
|
||||
si elle t'arrange. Mais attention, même voler doit se<br>
|
||||
faire dans les règles de l'art:<br>
|
||||
si elle t'arrange.<br>
|
||||
<br>
|
||||
Mais attention, même voler doit se faire dans les règles<br>
|
||||
de l'art:<br>
|
||||
- seule la dernière tuile défaussée peut être volée<br>
|
||||
- tu peux voler n'importe qui pour former un pon<br>
|
||||
- tu ne peux voler que le joueur précédent pour un chii<br>
|
||||
- tu ne peux voler que la personne précédente pour un chii<br>
|
||||
- le pon a la priorité sur le chii<br>
|
||||
- on ne peut pass voler pour former une paire<br>
|
||||
- on ne peut pas voler pour former une paire<br>
|
||||
<br>
|
||||
Tu as tout retenu ? Ne t'inquiètes pas, ça va vite devenir<br>
|
||||
clair si tu t'y entraines.
|
||||
`,
|
||||
|
||||
chap6:`
|
||||
Avant d'attaquer le point clef du Riichi, nous allons<br>
|
||||
nous pencher un peu plus sur la déclaration de la victoire.<br>
|
||||
<br>
|
||||
Pour commencer, lorsqu'une personne est à une seule tuile<br>
|
||||
de la victoire (4 groupes de prêts, et presque pour le dernier),<br>
|
||||
nous disons qu'elle est en Tenpai. C'est l'équivalent du "Uno"<br>
|
||||
version MahJong.<br>
|
||||
<br>
|
||||
À ce moment là, si une personne défausse une tuile qui complète<br>
|
||||
sa main - que ça complète un pon, un chii ou même une pair - elle<br>
|
||||
gagne immédiatement.<br>
|
||||
<br>
|
||||
Pour être précis, il y a deux situations:<br>
|
||||
- la tuile gagnante est piochée, c'est un "Tsumo"<br>
|
||||
- la tuile gagnante est volée, c'est un "Ron"<br>
|
||||
<br>
|
||||
Ces terme sont important, car ils doivent être pronnoncés pour<br>
|
||||
signaler la victoire !
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
@ -49,7 +49,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="menu"></div>
|
||||
<h2>Combinaisons valides</h2>
|
||||
<div class="speech-bubble">
|
||||
<div class="speech-text" id="speech-text"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.speech-bubble {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
top: 250px;
|
||||
right: 170px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
|
|
@ -49,7 +49,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="menu"></div>
|
||||
<h2>Combinaisons valides</h2>
|
||||
<div class="speech-bubble">
|
||||
<div class="speech-text" id="speech-text"></div>
|
||||
</div>
|
||||
|
|
@ -65,7 +64,7 @@
|
|||
// 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.chap4;
|
||||
document.getElementById('speech-text').innerHTML = texts.riichi.chap5;
|
||||
|
||||
// Toggle bulle de dialogue au clic sur la mascotte
|
||||
const speechBubble = document.querySelector('.speech-bubble');
|
||||
|
|
|
|||
79
frontend/pages/chap6.html
Normal file
79
frontend/pages/chap6.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!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: 150px;
|
||||
right: 170px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.speech-bubble.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu"></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/speaking.png" alt="Tilineau">';
|
||||
document.getElementById('speech-text').innerHTML = texts.riichi.chap6;
|
||||
|
||||
// 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">';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue