Bandeaux avec scroll, drapeaux et noms ok

js/indices.js

@@ -2,13 +2,15 @@
 let indicesData = [];
 
 function chargerDonnees() {
+  // Appel de l'API située dans le dossier php/
   fetch("./php/api_indices.php")
     .then((response) => response.json())
     .then((result) => {
       if (result.status === "success") {
+        // Stockage dans le tableau global JS
         indicesData = result.data;
 
-        // Mise à jour de l'affichage
+        // Mise à jour de tous les affichages
         afficherSyntheseCartes();
         afficherTableauDetails();
         alimenterBandeauxTicker();
@@ -29,9 +31,11 @@ function afficherSyntheseCartes() {
   const container = document.getElementById("cards-container");
   container.innerHTML = "";
 
+  // Trouver les indices uniques présents dans le tableau
   const indicesUniques = [...new Set(indicesData.map((item) => item.indice))];
 
   indicesUniques.forEach((nomIndice) => {
+    // Récupère le premier élément (le plus récent) pour cet indice
     const dernier = indicesData.find((item) => item.indice === nomIndice);
     if (!dernier) return;
 
@@ -88,7 +92,6 @@ function afficherTableauDetails() {
 }
 
 function alimenterBandeauxTicker() {
-  // Filtrer et trier par ordre alphabétique sur le champ 'nom' (ou 'indice' si 'nom' est vide)
   const preparerDonneesTicker = (nomIndice) => {
     let liste = indicesData.filter((item) => item.indice === nomIndice);
 
@@ -109,43 +112,45 @@ function alimenterBandeauxTicker() {
 
 function remplirUnBandeau(elementId, donneesTriees) {
   const container = document.getElementById(elementId);
-  if (!container) return;
+  if (!container) {
+    console.error("Élément introuvable :", elementId);
+    return;
+  }
 
   if (donneesTriees.length === 0) {
     container.innerHTML = `<span class="px-4 text-slate-500">Aucune donnée disponible</span>`;
     return;
   }
 
-  let htmlContent = "";
+  let blocs = "";
+  donneesTriees.forEach((item) => {
+    const isPositive = parseFloat(item.variation_pct) >= 0;
+    const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
+    const sign = isPositive ? "+" : "";
+    const nomAffichage = item.nom || item.indice;
+    const coursFormate = parseFloat(item.cours).toLocaleString("fr-FR");
+    const variationFormatee = parseFloat(item.variation_pct).toFixed(2);
 
-  // On génère une séquence d'éléments
-  const genererBlocs = () => {
-    let blocs = "";
-    donneesTriees.forEach((item) => {
-      const isPositive = parseFloat(item.variation_pct) >= 0;
-      const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
-      const sign = isPositive ? "+" : "";
-      const nomAffichage = item.nom || item.indice;
-      const coursFormate = parseFloat(item.cours).toLocaleString("fr-FR");
-      const variationFormatee = parseFloat(item.variation_pct).toFixed(2);
+    blocs += `
+            <div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80 whitespace-nowrap">
+                <span class="font-bold text-white">${nomAffichage}</span>
+                <span class="text-slate-300">${coursFormate}</span>
+                <span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
+            </div>
+        `;
+  });
 
-      blocs += `
-                <div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80">
-                    <span class="font-bold text-white">${nomAffichage}</span>
-                    <span class="text-slate-300">${coursFormate}</span>
-                    <span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
-                </div>
-            `;
-    });
-    return blocs;
-  };
+  // Duplication du contenu pour la boucle infinie fluide
+  container.innerHTML = blocs + blocs;
 
-  // On duplique le contenu pour assurer un effet de défilement infini fluide sans saccade
-  htmlContent = genererBlocs() + genererBlocs();
-  container.innerHTML = htmlContent;
+  // Vitesse uniforme et lente
+  const dureeParElement = 6;
+  const dureeTotale = Math.max(30, donneesTriees.length * dureeParElement);
+
+  container.style.animationDuration = `${dureeTotale}s`;
 }
 
-// Lancer au chargement initial
+// Lancer le chargement des données au démarrage de la page
 chargerDonnees();
 
 // Rafraîchir automatiquement toutes les 60 secondes