can show/hide dialogue
This commit is contained in:
parent
5d168c6652
commit
750cf94b5b
2 changed files with 18 additions and 3 deletions
|
|
@ -11,7 +11,9 @@ const texts = {
|
||||||
te guider à travers les règles du jeu pour que tu puisses profiter d'une partie.<br><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>
|
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>
|
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.
|
pas, tu es entre de bonnes mains.<br><br>
|
||||||
|
Pour obtenir mon aide et ouvrir et fermer ce dialogue, il suffit de cliquer sur moi, je ne vais<br>
|
||||||
|
pas te mordre !
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
17
index.html
17
index.html
|
|
@ -39,6 +39,7 @@
|
||||||
right: 160px;
|
right: 160px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mascotte img {
|
#mascotte img {
|
||||||
|
|
@ -49,9 +50,14 @@
|
||||||
|
|
||||||
.speech-bubble {
|
.speech-bubble {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 350px;
|
bottom: 320px;
|
||||||
right: 170px;
|
right: 170px;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speech-bubble.hidden {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -72,11 +78,18 @@
|
||||||
.then(html => document.getElementById('menu').innerHTML = html);
|
.then(html => document.getElementById('menu').innerHTML = html);
|
||||||
|
|
||||||
// Afficher la mascotte
|
// Afficher la mascotte
|
||||||
document.getElementById('mascotte').innerHTML = '<img src="img/tilineau/speaking.png" alt="Tilineau">';
|
const mascolteEl = document.getElementById('mascotte');
|
||||||
|
mascolteEl.innerHTML = '<img src="img/tilineau/speaking.png" alt="Tilineau">';
|
||||||
|
|
||||||
// Afficher le texte de bienvenue
|
// Afficher le texte de bienvenue
|
||||||
document.getElementById('speech-text').innerHTML = texts.homePage.welcome;
|
document.getElementById('speech-text').innerHTML = texts.homePage.welcome;
|
||||||
|
|
||||||
|
// Toggle bulle de dialogue au clic sur la mascotte
|
||||||
|
const speechBubble = document.querySelector('.speech-bubble');
|
||||||
|
mascolteEl.addEventListener('click', () => {
|
||||||
|
speechBubble.classList.toggle('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
let allTiles = [];
|
let allTiles = [];
|
||||||
|
|
||||||
// Récupérer les tuiles
|
// Récupérer les tuiles
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue