can show/hide dialogue

frontend/js/fr/texts.js

@@ -11,7 +11,9 @@ const texts = {
     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.
+    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 !
     `
   }
 };

index.html

@@ -39,6 +39,7 @@
       right: 160px;
       z-index: 999;
       transform: scaleX(-1);
+      cursor: pointer;
     }
 
     #mascotte img {
@@ -49,9 +50,14 @@
 
     .speech-bubble {
       position: fixed;
-      bottom: 350px;
+      bottom: 320px;
       right: 170px;
       z-index: 998;
+      display: flex;
+    }
+
+    .speech-bubble.hidden {
+      display: none;
     }
   </style>
 </head>
@@ -72,11 +78,18 @@
       .then(html => document.getElementById('menu').innerHTML = html);
 
     // 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
     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 = [];
 
     // Récupérer les tuiles