liste des yakus (nom seulement)
This commit is contained in:
Didictateur
parent
d8ef8022e0
commit
f9567f1a1d
3 changed files with 423 additions and 1 deletions
|
|
@ -52,7 +52,7 @@
|
||||||
<li><a href="">Chapitre 5 : Une partie à trois</a></li>
|
<li><a href="">Chapitre 5 : Une partie à trois</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="">Liste des Yakus</a></li>
|
<li><a href="/frontend/pages/liste_yakus.html">Liste des Yakus</a></li>
|
||||||
<li><a href="">Ressources</a></li>
|
<li><a href="">Ressources</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -172,5 +172,11 @@ const texts = {
|
||||||
Une liste exhaustive des yakus les plus courants au moins courants sont présentés dans<br>
|
Une liste exhaustive des yakus les plus courants au moins courants sont présentés dans<br>
|
||||||
l'onglet dédié.
|
l'onglet dédié.
|
||||||
`
|
`
|
||||||
|
},
|
||||||
|
|
||||||
|
liste_yakus:{
|
||||||
|
explanation:`
|
||||||
|
Liste des yakus les plus courants selon Tenhou février 2026
|
||||||
|
`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
416
frontend/pages/liste_yakus.html
Normal file
416
frontend/pages/liste_yakus.html
Normal file
|
|
@ -0,0 +1,416 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Liste des Yakus - Tuto Riichi</title>
|
||||||
|
<link rel="stylesheet" href="/frontend/css/style.css">
|
||||||
|
<link rel="stylesheet" href="/frontend/css/speech-bubble.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
margin: 40px 0 50px 0;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yakus-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
display: grid;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaku-card {
|
||||||
|
background: rgba(45, 85, 60, 0.8);
|
||||||
|
border: 2px solid rgba(82, 183, 136, 0.6);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 100px;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaku-card:hover {
|
||||||
|
background: rgba(45, 85, 60, 1);
|
||||||
|
border-color: rgba(82, 183, 136, 1);
|
||||||
|
box-shadow: 0 0 20px rgba(82, 183, 136, 0.3);
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaku-info h3 {
|
||||||
|
color: #52b788;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaku-info p {
|
||||||
|
color: #c8e6c9;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaku-percentage {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, #52b788, #40916c);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.percentage-number {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.percentage-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #e8f5e9;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaku-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: rgba(82, 183, 136, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaku-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #52b788, #74c69d);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="menu"></div>
|
||||||
|
<div class="speech-bubble">
|
||||||
|
<div class="speech-text" id="speech-text"></div>
|
||||||
|
</div>
|
||||||
|
<div id="mascotte"></div>
|
||||||
|
|
||||||
|
<h1>Yakus les plus courants</h1>
|
||||||
|
|
||||||
|
<div class="yakus-container" id="yakus-list"></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.liste_yakus.explanation;
|
||||||
|
|
||||||
|
// 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/idle.png" alt="Tilineau">';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Données des yakus
|
||||||
|
const yakus = [
|
||||||
|
{
|
||||||
|
name: 'Riichi',
|
||||||
|
description: '',
|
||||||
|
percentage: 41.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Brelan de dragon',
|
||||||
|
description: '',
|
||||||
|
percentage: 23.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tanyao',
|
||||||
|
description: '',
|
||||||
|
percentage: 23.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Pinfu',
|
||||||
|
description: '',
|
||||||
|
percentage: 19.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tout caché tiré',
|
||||||
|
description: '',
|
||||||
|
percentage: 17.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Ippatsu',
|
||||||
|
description: '',
|
||||||
|
percentage: 9.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Vent de la manche',
|
||||||
|
description: '',
|
||||||
|
percentage: 8.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Vent du joueur',
|
||||||
|
description: '',
|
||||||
|
percentage: 8.17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Semie pure',
|
||||||
|
description: '',
|
||||||
|
percentage: 6.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'iipeiko',
|
||||||
|
description: '',
|
||||||
|
percentage: 4.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'sanshoku',
|
||||||
|
description: '',
|
||||||
|
percentage: 3.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tout brelan',
|
||||||
|
description: '',
|
||||||
|
percentage: 3.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '7 paires',
|
||||||
|
description: '',
|
||||||
|
percentage: 2.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ittsu',
|
||||||
|
description: '',
|
||||||
|
percentage: 1.6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Chanta',
|
||||||
|
description: '',
|
||||||
|
percentage: 1.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Pure',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.87
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Trois brelans cachés',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.68
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Under the river',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.57
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Terminal partout',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.32
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Under the sea',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.31
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '(after a kong)',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.28
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Double riichi?',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Trois petits dragons',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tout terminal et honneur',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.058
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Vole d'un Khan",
|
||||||
|
description: '',
|
||||||
|
percentage: 0.057
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '(rayanpeiko)',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.042
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Triple brelan mixte',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.038
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Quatre brelans cachés',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.036
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Triple grands dragons',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.032
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '13 orphelins',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.022
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Quatre petits vents',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.0095
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tout honneur',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.0054
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'su anko tanko',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.0038
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Trois Khan',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.0035
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tout terminal',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.00059
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Quatre grands vents',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.00059
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bénédiction du ciel',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.00044
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bénédiction de la terre',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.00044
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Neufs portes',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.00044
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tout vert',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.00030
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Quatres khans',
|
||||||
|
description: '',
|
||||||
|
percentage: 0.00015
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Afficher les yakus
|
||||||
|
const yakusList = document.getElementById('yakus-list');
|
||||||
|
yakus.forEach(yaku => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'yaku-card';
|
||||||
|
|
||||||
|
const info = document.createElement('div');
|
||||||
|
info.className = 'yaku-info';
|
||||||
|
|
||||||
|
const title = document.createElement('h3');
|
||||||
|
title.textContent = yaku.name;
|
||||||
|
|
||||||
|
const desc = document.createElement('p');
|
||||||
|
desc.textContent = yaku.description;
|
||||||
|
|
||||||
|
const bar = document.createElement('div');
|
||||||
|
bar.className = 'yaku-bar';
|
||||||
|
|
||||||
|
const barFill = document.createElement('div');
|
||||||
|
barFill.className = 'yaku-bar-fill';
|
||||||
|
barFill.style.width = yaku.percentage + '%';
|
||||||
|
bar.appendChild(barFill);
|
||||||
|
|
||||||
|
info.appendChild(title);
|
||||||
|
info.appendChild(desc);
|
||||||
|
info.appendChild(bar);
|
||||||
|
|
||||||
|
const percentage = document.createElement('div');
|
||||||
|
percentage.className = 'yaku-percentage';
|
||||||
|
|
||||||
|
const number = document.createElement('div');
|
||||||
|
number.className = 'percentage-number';
|
||||||
|
number.textContent = yaku.percentage + '%';
|
||||||
|
|
||||||
|
const label = document.createElement('div');
|
||||||
|
label.className = 'percentage-label';
|
||||||
|
label.textContent = 'Fréquence';
|
||||||
|
|
||||||
|
percentage.appendChild(number);
|
||||||
|
percentage.appendChild(label);
|
||||||
|
|
||||||
|
card.appendChild(info);
|
||||||
|
card.appendChild(percentage);
|
||||||
|
|
||||||
|
yakusList.appendChild(card);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue