Adrien/Riichi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

premier dialogue

Browse source
This commit is contained in:
Didictateur 2026-02-18 17:11:28 +01:00
parent 42cf4d20f6
commit a46f105954
3 changed files with 97 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
frontend/css/speech-bubble.css Normal file
View file

@ -0,0 +1,65 @@
.speech-bubble {
background: white;
border: 2px solid #333;
border-radius: 10px;
padding: 12px 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 10px;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -12px;
right: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 0 solid transparent;
border-top: 12px solid #333;
}
.speech-bubble::before {
content: '';
position: absolute;
bottom: -8px;
right: 22px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 0 solid transparent;
border-top: 10px solid white;
}
.speech-text {
flex: 1;
white-space: nowrap;
}
.dialog-buttons {
display: flex;
gap: 5px;
margin-left: 10px;
}
.dialog-btn {
padding: 4px 8px;
border: 1px solid #333;
background: #f0f0f0;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.dialog-btn:hover:not(:disabled) {
background: #333;
color: white;
}
.dialog-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

17
frontend/js/fr/texts.js Normal file
View file

@ -0,0 +1,17 @@
const texts = {
homePage: {
welcome: `
Bienvenue dans le monde du Riichi Mahjong !<br><br>
Installe toi confortablement, et prépare toi à découvrir ce vaste univers.<br>
Tu as fais un très bon choix en venant ici, et je suis sûr que tu vas adorer ce jeu !<br><br>
Le Riichi Mahjong est un jeu de société d'origine chinoise, qui a été adapté au Japon et qui est<br>
maintenant joué dans le monde entier. C'est un jeu de stratégie, de chance et de psychologie, où<br>
les joueurs s'affrontent pour former des combinaisons de tuiles et remporter la partie.<br><br>
Que tu sois complètement nouveau, ou légèrement familier, ce site est fait pour toi. Nous allons<br>
te guider à travers les règles du jeu pour que tu puisses profiter d'une partie.<br><br>
Alors prépare tes tuiles, rassemble tes amis, et plonge dans l'aventure du Riichi Mahjong !<br><br><br>
Ah, j'ai oublié de me présenter ! Je suis Tilineau, ton guide à partir de maintenant. Ne t'inquiète<br>
pas, tu es entre de bonnes mains.
`
}
};

15
index.html
View file

@ -4,6 +4,7 @@
<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">
<style>
#menu {
position: relative;
@ -45,14 +46,25 @@
height: auto;
display: block;
}
.speech-bubble {
position: fixed;
bottom: 350px;
right: 170px;
z-index: 998;
}
</style>
</head>
<body>
<div id="menu"></div>
<div id="tile-container"></div>
<div id="tile-rain"></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')
@ -62,6 +74,9 @@
// Afficher la mascotte
document.getElementById('mascotte').innerHTML = '<img src="img/tilineau/speaking.png" alt="Tilineau">';
// Afficher le texte de bienvenue
document.getElementById('speech-text').innerHTML = texts.homePage.welcome;
let allTiles = [];
// Récupérer les tuiles