Boutons des émotions fonctionnels + modifications esthétiques

jericho/static/index.html

@@ -8,7 +8,7 @@
   </head>
   <body>
     <header>
-      <h1>Jericho projet : Reachy Mini</h1>
+      <h1>【⚙】Jericho projet : Reachy Mini【⚙】</h1>
       <div id="conteneurHeader">
         <img src="static/images/logoReachyMini.png" alt="Photo de Reachy" width="10%" />
         <div id="robot-status">Prêt</div>
@@ -31,7 +31,7 @@
       </section>
 
       <section class="card">
-        <h2>Votre bibliothèque</h2>
+        <h2>►► Votre bibliothèque</h2>
         <div id="video-library" class="grid-library">
           <p class="empty-text">Aucune vidéo enregistrée.</p>
         </div>
@@ -43,7 +43,7 @@
 
         <div class="sync-controls">
           <button id="launch-sync-btn" class="btn-success">
-            [->] Lire vidéo + robot synchronisés
+            [►] Lire vidéo + robot synchronisés
           </button>
           <p class="sync-hint">
             Les pauses, reprises et déplacements dans la vidéo sont envoyés au robot.
@@ -53,7 +53,7 @@
       </section>
 
       <section class="card">
-        <h2>Les émotions</h2>
+        <h2>☻ Les émotions</h2>
         <div id="listeEmotions">
           <button id="joie">
             Joie

jericho/static/main.js

@@ -182,7 +182,7 @@ async function loadLibrary() {
         } else {
             projects.forEach(video => {
                 const safeName = escapeHtml(video.name);
-                const deleteBtn = `<span onclick="deleteProject(event, ${JSON.stringify(video.name).replaceAll('"', '&quot;')})" style="position:absolute; top:2px; right:4px; font-size:16px; cursor:pointer;" title="Supprimer définitivement">x</span>`;
+                const deleteBtn = `<span onclick="deleteProject(event, ${JSON.stringify(video.name).replaceAll('"', '&quot;')})" style="position:absolute; top:2px; right:4px; font-size:16px; cursor:pointer;" title="Supprimer définitivement">✗</span>`;
 
                 if (video.status === 'DONE') {
                     const nameArg = JSON.stringify(video.name).replaceAll('"', '&quot;');
@@ -281,4 +281,96 @@ videoPlayer.addEventListener('ended', () => {
     robotStatus.textContent = 'Terminé';
     sendPlayback('stop', { playing: false });
     stopSyncLoop();
+});
+
+let boutonJoie=document.getElementById('joie');
+let boutonContent=document.getElementById('content');
+let boutonSurprise=document.getElementById('surprise');
+let boutonColere=document.getElementById('colere');
+let boutonPeur=document.getElementById('peur');
+let boutonTristesse=document.getElementById('tristesse');
+let boutonNeutre=document.getElementById('neutre');
+
+boutonJoie.addEventListener("click", async () => {
+    document.querySelectorAll('#listeEmotions button').forEach(b => b.classList.remove('active-emotion'));
+    boutonJoie.classList.add('active-emotion');
+
+    await fetch('/api/emotion', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emotion: 'JOIE' })
+    });
+    robotStatus.textContent = 'Émotion : Joie';
+});
+
+boutonContent.addEventListener("click", async () => {
+    document.querySelectorAll('#listeEmotions button').forEach(b => b.classList.remove('active-emotion'));
+    boutonJoie.classList.add('active-emotion');
+
+    await fetch('/api/emotion', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emotion: 'CONTENT' })
+    });
+    robotStatus.textContent = 'Émotion : Content';
+});
+
+boutonSurprise.addEventListener("click", async () => {
+    document.querySelectorAll('#listeEmotions button').forEach(b => b.classList.remove('active-emotion'));
+    boutonJoie.classList.add('active-emotion');
+
+    await fetch('/api/emotion', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emotion: 'SURPRISE' })
+    });
+    robotStatus.textContent = 'Émotion : Surprise';
+});
+
+boutonColere.addEventListener("click", async () => {
+    document.querySelectorAll('#listeEmotions button').forEach(b => b.classList.remove('active-emotion'));
+    boutonJoie.classList.add('active-emotion');
+
+    await fetch('/api/emotion', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emotion: 'COLERE' })
+    });
+    robotStatus.textContent = 'Émotion : Colère';
+});
+
+boutonPeur.addEventListener("click", async () => {
+    document.querySelectorAll('#listeEmotions button').forEach(b => b.classList.remove('active-emotion'));
+    boutonJoie.classList.add('active-emotion');
+
+    await fetch('/api/emotion', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emotion: 'PEUR' })
+    });
+    robotStatus.textContent = 'Émotion : Peur';
+});
+
+boutonTristesse.addEventListener("click", async () => {
+    document.querySelectorAll('#listeEmotions button').forEach(b => b.classList.remove('active-emotion'));
+    boutonJoie.classList.add('active-emotion');
+
+    await fetch('/api/emotion', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emotion: 'TRISTESSE' })
+    });
+    robotStatus.textContent = 'Émotion : Tristesse';
+});
+
+boutonNeutre.addEventListener("click", async () => {
+    document.querySelectorAll('#listeEmotions button').forEach(b => b.classList.remove('active-emotion'));
+    boutonJoie.classList.add('active-emotion');
+
+    await fetch('/api/emotion', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emotion: 'NEUTRE' })
+    });
+    robotStatus.textContent = 'Émotion : Neutre';
 });

jericho/static/style.css

@@ -135,7 +135,7 @@ input[type="text"], input[type="number"] {
         margin-bottom: auto;
         padding-top : 0.7%;
         padding-bottom : 0.7%;
-        font-size: 1.3em;
+        font-size:1.2vw;
         margin-right : 2.5%;
         width : 11%;
     }