template next pages + text
This commit is contained in:
Didictateur
parent
7221f8a2a8
commit
af5909936c
4 changed files with 201 additions and 8 deletions
|
|
@ -13,13 +13,14 @@
|
||||||
<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="/frontend/pages/chap3.html">Chapitre 3 : Les groupes</a></li>
|
<li><a href="/frontend/pages/chap3.html">Chapitre 3 : Les groupes</a></li>
|
||||||
<li><a href="">Chapitre 4 : Avoir une main valide</a></li>
|
<li><a href="/frontend/pages/chap4.html">Chapitre 4 : Avoir une main valide</a></li>
|
||||||
<li><a href="">Chapitre 5 : Annoncer la victoire</a></li>
|
<li><a href="/frontend/pages/chap5.html">Chapitre 5 : Voler une tuile</a></li>
|
||||||
<li><a href="">Chapitre 6 : Le vent du joueur</a></li>
|
<li><a href="">Chapitre 6 : Annoncer la victoire</a></li>
|
||||||
<li><a href="">Chapitre 7 : Les Yakus</a></li>
|
<li><a href="">Chapitre 7 : Le vent du joueur</a></li>
|
||||||
<li><a href="">Chapitre 8 : Le riichi</a></li>
|
<li><a href="">Chapitre 8 : Les Yakus</a></li>
|
||||||
<li><a href="">Chapitre 9 : Le furiten</a></li>
|
<li><a href="">Chapitre 9 : Le riichi</a></li>
|
||||||
<li><a href="">Chapitre 10 : Une partie complète (complète ?)</a></li>
|
<li><a href="">Chapitre 10 : Le furiten</a></li>
|
||||||
|
<li><a href="">Chapitre 11 : Une partie complète (complète ?)</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
|
|
|
||||||
|
|
@ -66,5 +66,37 @@ const texts = {
|
||||||
- Chii pour une suite<br>
|
- Chii pour une suite<br>
|
||||||
- Pon pour un brelan<br>
|
- Pon pour un brelan<br>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
|
chap4:`
|
||||||
|
Pour gagner, il faut avoir nécessairement un main bien formée.<br>
|
||||||
|
cela a évidemment un rapport avec les groupes vus précédément.<br>
|
||||||
|
Pour être exacte, une main est bien formée si elle possède:<br>
|
||||||
|
- 4 groupes de 3 (pon ou chii)<br>
|
||||||
|
- 1 paire<br>
|
||||||
|
Je précise qu'une paire doit être formée par deux tuiles identique.<br>
|
||||||
|
<br>
|
||||||
|
Si tu as bien suivie, tu remarquera que cela correspond à un total<br>
|
||||||
|
de 14 tuiles dans sa main. Ainsi, il n'est possible d'avoir une main<br>
|
||||||
|
bien formée que lorsque l'on pioche ou vole une tuile.<br>
|
||||||
|
<br>
|
||||||
|
Plus tard, nous verrons qu'il existe deux exceptions à cette<br>
|
||||||
|
forme bien précise.
|
||||||
|
`,
|
||||||
|
|
||||||
|
chap5:`
|
||||||
|
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>
|
||||||
|
- 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>
|
||||||
|
- le pon a la priorité sur le chii<br>
|
||||||
|
- on ne peut pass 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.
|
||||||
|
`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
80
frontend/pages/chap4.html
Normal file
80
frontend/pages/chap4.html
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<!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;
|
||||||
|
bottom: 200px;
|
||||||
|
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>
|
||||||
|
<h2>Combinaisons valides</h2>
|
||||||
|
<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.chap4;
|
||||||
|
|
||||||
|
// 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>
|
||||||
80
frontend/pages/chap5.html
Normal file
80
frontend/pages/chap5.html
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<!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;
|
||||||
|
bottom: 200px;
|
||||||
|
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>
|
||||||
|
<h2>Combinaisons valides</h2>
|
||||||
|
<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.chap4;
|
||||||
|
|
||||||
|
// 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