chap 7 done
This commit is contained in:
Didictateur
parent
d5ce25e660
commit
a8f1d26e3f
3 changed files with 256 additions and 2 deletions
|
|
@ -16,8 +16,8 @@
|
|||
<li><a href="/frontend/pages/chap4.html">Chapitre 4 : Les main bien formées</a></li>
|
||||
<li><a href="/frontend/pages/chap5.html">Chapitre 5 : Voler une tuile</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="/frontend/pages/chap7.html">Chapitre 7 : Le vent du joueur</a></li>
|
||||
<li><a href="/frontend/pages/chap8.html">Chapitre 8 : Les Yakus</a></li>
|
||||
<li><a href="">Chapitre 9 : Le riichi</a></li>
|
||||
<li><a href="">Chapitre 10 : Le furiten</a></li>
|
||||
<li><a href="">Chapitre 11 : Une partie complète (complète ?)</a></li>
|
||||
|
|
|
|||
175
frontend/pages/chap7.html
Normal file
175
frontend/pages/chap7.html
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!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: 100px;
|
||||
right: 170px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.speech-bubble.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#winds-box {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 200px;
|
||||
left: 50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(30, 30, 50, 0.9);
|
||||
border: 3px solid rgba(150, 180, 220, 0.8);
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.wind {
|
||||
position: absolute;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.wind:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.wind.north { top: 5px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #ff6b6b, #ff8787); }
|
||||
.wind.east { left: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #4ecdc4, #44a08d); }
|
||||
.wind.south { bottom: 5px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f9ca24, #f0932b); }
|
||||
.wind.west { right: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 250px;
|
||||
background: rgb(231, 142, 224);
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 25px solid rgb(231, 142, 224);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu"></div>
|
||||
<div class="speech-bubble">
|
||||
<div class="speech-text" id="speech-text"></div>
|
||||
</div>
|
||||
<div id="mascotte"></div>
|
||||
|
||||
<!-- schema -->
|
||||
<div id="winds-box" style="position: absolute; top:200px; left: 850px">
|
||||
<div class="wind east">E</div>
|
||||
<div class="wind south">S</div>
|
||||
<div class="wind west">O</div>
|
||||
<div class="wind north">N</div>
|
||||
</div>
|
||||
|
||||
<div id="winds-box" style="position: absolute; top:700px; left: 400px">
|
||||
<div class="wind east">E</div>
|
||||
<div class="wind south">S</div>
|
||||
<div class="wind west">O</div>
|
||||
<div class="wind north">N</div>
|
||||
</div>
|
||||
|
||||
<div id="winds-box" style="position: absolute; top:700px; left: 1300px">
|
||||
<div class="wind east">N</div>
|
||||
<div class="wind south">E</div>
|
||||
<div class="wind west">S</div>
|
||||
<div class="wind north">O</div>
|
||||
</div>
|
||||
|
||||
<!-- flèches -->
|
||||
<div class="arrow" style="top: 420px; left: 700px; transform: rotate(45deg)"></div>
|
||||
<div class="arrow" style="top: 420px; left: 1200px; transform: rotate(-45deg)"></div>
|
||||
|
||||
<!-- textes -->
|
||||
<h2 style="position: absolute; top: 100px; left: 860px">Position initiale</h2>
|
||||
<h2 style="position: absolute; top: 900px; left: 370px">L'Est gagne la manche</h2>
|
||||
<h2 style="position: absolute; top: 900px; left: 1230px">L'Est ne gagne pas la manche</h2>
|
||||
|
||||
<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.chap7;
|
||||
|
||||
// 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">';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
frontend/pages/chap8.html
Normal file
79
frontend/pages/chap8.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/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">';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue