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>
|
||||
</ul>
|
||||
</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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -172,5 +172,11 @@ const texts = {
|
|||
Une liste exhaustive des yakus les plus courants au moins courants sont présentés dans<br>
|
||||
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