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/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/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="/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="/frontend/pages/chap7.html">Chapitre 7 : Le vent du joueur</a></li>
|
||||||
<li><a href="">Chapitre 8 : Les Yakus</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 9 : Le riichi</a></li>
|
||||||
<li><a href="">Chapitre 10 : Le furiten</a></li>
|
<li><a href="">Chapitre 10 : Le furiten</a></li>
|
||||||
<li><a href="">Chapitre 11 : Une partie complète (complète ?)</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