Limite le nombre de flèche dans cible intéractive en fonction du nombre de flèche par volée dans configuration - Follow Up Deployment

index.html

@@ -82,10 +82,10 @@
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                     <div>
                         <label class="block text-sm font-medium text-gray-700 mb-1">Nombre de flèches par volée</label>
-                        <select class="w-full border border-gray-300 rounded-md px-3 py-2">
-                            <option>3 flèches</option>
-                            <option selected>6 flèches</option>
-                            <option>12 flèches</option>
+                        <select id="arrowsPerVolley" class="w-full border border-gray-300 rounded-md px-3 py-2" onchange="updateMaxArrows()">
+                            <option value="3">3 flèches</option>
+                            <option value="6" selected>6 flèches</option>
+                            <option value="12">12 flèches</option>
                         </select>
                     </div>
                     <div>
@@ -232,9 +232,14 @@
         // Variables globales
         let currentVolley = [];
         let history = [];
+        let maxArrows = 6; // Default to 6 arrows
         
         // Ajouter une flèche à la volée en cours
         function addArrow(points) {
+            if (currentVolley.length >= maxArrows) {
+                alert(`Vous avez atteint la limite de ${maxArrows} flèches par volée`);
+                return;
+            }
             currentVolley.push(points);
             updateDisplay();
         }
@@ -651,6 +656,16 @@
             statsChart.update();
         }
 
+        // Mettre à jour le nombre maximum de flèches
+        function updateMaxArrows() {
+            const select = document.getElementById('arrowsPerVolley');
+            maxArrows = parseInt(select.value);
+            if (currentVolley.length > maxArrows) {
+                currentVolley = currentVolley.slice(0, maxArrows);
+                updateDisplay();
+            }
+        }
+
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
             initStatsChart();