home: almost finished bibou oracle

templates/partials/home.html

@@ -54,6 +54,14 @@
             width="30px" alt="Instagram logo" /></a>
       </socials>
       <img width="200px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
+      <bibou-oracle>
+        <bibou-container>
+          <img class="boubou" src="/static/assets/images/boubou.webp" alt="Bibou endormi" />
+          <img class="bibou" src="/static/assets/images/bibou.webp" alt="Bibou éveillé" />
+        </bibou-container>
+        <bibou-text>
+        </bibou-text>
+      </bibou-oracle>
     </box>
     <box id="newsbox">
       <website-news>
@@ -81,9 +89,35 @@
 
 <!-- I know I know but I need it for this pretty rainbow flagish animation -->
 <script>
+  <!-- For rainbow text -->
   const el = document.querySelector('woopwoop');
   const text = el.textContent;
   el.innerHTML = text.split('').map((ch, i) =>
     `<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>`
   ).join('');
+
+
+
+  const BIBOU_QUOTES = {{bibou_quotes| tojson | safe }};
+
+  const txtEl = document.querySelector('bibou-text');
+  const ctrEl = document.querySelector('bibou-container');
+  let intervalRef = null;
+
+  const ttText = (texte) => {
+    if (intervalRef) clearInterval(intervalRef);
+
+    let accumulated = "";
+    let index = 0;
+
+    intervalRef = setInterval(() => {
+      if (index < texte.length) {accumulated += texte.charAt(index); txtEl.textContent = accumulated; index++;} else {
+        clearInterval(intervalRef); intervalRef = null;
+      }
+    }, 40);
+  }; ctrEl.addEventListener('mouseenter', () => {
+    const quote = BIBOU_QUOTES[Math.floor(Math.random() * BIBOU_QUOTES.length)];
+    ttText(quote);
+  });
+
 </script>