premier dialogue
This commit is contained in:
Didictateur
parent
42cf4d20f6
commit
a46f105954
3 changed files with 97 additions and 0 deletions
65
frontend/css/speech-bubble.css
Normal file
65
frontend/css/speech-bubble.css
Normal 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
17
frontend/js/fr/texts.js
Normal 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
15
index.html
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Tuto Riichi</title>
|
<title>Tuto Riichi</title>
|
||||||
<link rel="stylesheet" href="frontend/css/style.css">
|
<link rel="stylesheet" href="frontend/css/style.css">
|
||||||
|
<link rel="stylesheet" href="frontend/css/speech-bubble.css">
|
||||||
<style>
|
<style>
|
||||||
#menu {
|
#menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -45,14 +46,25 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.speech-bubble {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 350px;
|
||||||
|
right: 170px;
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="menu"></div>
|
<div id="menu"></div>
|
||||||
<div id="tile-container"></div>
|
<div id="tile-container"></div>
|
||||||
<div id="tile-rain"></div>
|
<div id="tile-rain"></div>
|
||||||
|
<div class="speech-bubble">
|
||||||
|
<div class="speech-text" id="speech-text"></div>
|
||||||
|
</div>
|
||||||
<div id="mascotte"></div>
|
<div id="mascotte"></div>
|
||||||
|
|
||||||
|
<script src="frontend/js/fr/texts.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Charger le menu
|
// Charger le menu
|
||||||
fetch('components/menu.html')
|
fetch('components/menu.html')
|
||||||
|
|
@ -62,6 +74,9 @@
|
||||||
// Afficher la mascotte
|
// Afficher la mascotte
|
||||||
document.getElementById('mascotte').innerHTML = '<img src="img/tilineau/speaking.png" alt="Tilineau">';
|
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 = [];
|
let allTiles = [];
|
||||||
|
|
||||||
// Récupérer les tuiles
|
// Récupérer les tuiles
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue