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
50323d7
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Compteur de Points - Tir à l'Arc</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .score-point { | |
| display: inline-flex; | |
| width: 24px; | |
| height: 24px; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| border-radius: 4px; | |
| } | |
| .target-cell { | |
| width: 60px; | |
| height: 60px; | |
| text-align: center; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| padding: 3px; | |
| border: none; | |
| outline: none; | |
| font-size: 1.2rem; | |
| } | |
| .target-cell:hover { | |
| transform: scale(1.1); | |
| } | |
| @media (min-width: 768px) { | |
| .target-cell { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 1.2rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .target-cell { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 1.2rem; | |
| } | |
| } | |
| .target-10, .target-9 { background-color: #f59e0b; color: white; } | |
| .target-8, .target-7 { background-color: #ef4444; color: white; } | |
| .target-6, .target-5 { background-color: #3b82f6; color: white; } | |
| .target-4, .target-3 { background-color: #000000; color: white; } | |
| .target-2, .target-1 { background-color: #ffffff; color: #000000; border: 1px solid #ccc; } | |
| .target-0 { background-color: #ffffff; color: #000000; border: 1px solid #ccc; } | |
| @media (max-width: 640px) { | |
| .target-cell { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 1.2rem; | |
| padding: 4px; | |
| margin: 0 2px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2"> | |
| <i class="fas fa-bullseye mr-2"></i>Volée comptée | |
| </h1> | |
| <p class="text-gray-600">Enregistrez et suivez vos performances</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Configuration --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-3 mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Configuration</h2> | |
| <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 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> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Type de cible</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2"> | |
| <option>Blason 122cm</option> | |
| <option>Blason 80cm</option> | |
| <option>Blason 60cm</option> | |
| <option>Blason 40cm</option> | |
| <option>Tri-Spots Verticale</option> | |
| <option>Tri-Spots Las-Vegas</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Type de cible</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2"> | |
| <option>70m</option> | |
| <option>60m</option> | |
| <option>50m</option> | |
| <option>40m</option> | |
| <option>30m</option> | |
| <option>25m</option> | |
| <option>20m</option> | |
| <option>15m</option> | |
| <option>10m</option> | |
| <option>na</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cible interactive --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-2"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Cible interactive</h2> | |
| <div class="flex justify-center mb-6 flex-wrap gap-2"> | |
| <button class="target-cell target-10 rounded font-bold" onclick="addArrow(10)">10</button> | |
| <button class="target-cell target-9 rounded font-bold" onclick="addArrow(9)">9</button> | |
| <button class="target-cell target-8 rounded font-bold" onclick="addArrow(8)">8</button> | |
| <button class="target-cell target-7 rounded font-bold" onclick="addArrow(7)">7</button> | |
| <button class="target-cell target-6 rounded font-bold" onclick="addArrow(6)">6</button> | |
| <button class="target-cell target-5 rounded font-bold" onclick="addArrow(5)">5</button> | |
| <button class="target-cell target-4 rounded font-bold" onclick="addArrow(4)">4</button> | |
| <button class="target-cell target-3 rounded font-bold" onclick="addArrow(3)">3</button> | |
| <button class="target-cell target-2 rounded font-bold" onclick="addArrow(2)">2</button> | |
| <button class="target-cell target-1 rounded font-bold" onclick="addArrow(1)">1</button> | |
| <button class="target-cell target-0 rounded font-bold" onclick="addArrow(0)">M</button> | |
| </div> | |
| <!-- Boutons d'action --> | |
| <div class="flex justify-center mt-6 space-x-6"> | |
| <button onclick="undoLastArrow()" class="px-6 py-5 text-2xl bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition flex items-center justify-center w-20 h-20"> | |
| <i class="fas fa-undo"></i></button> | |
| <button onclick="clearVolley()" class="px-6 py-5 text-2xl bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition flex items-center justify-center w-20 h-20"> | |
| <i class="fas fa-trash-alt"></i></button> | |
| <button onclick="saveVolley()" class="px-6 py-5 text-2xl bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition flex items-center justify-center w-20 h-20"> | |
| <i class="fas fa-save"></i></button> | |
| </div> | |
| </div> | |
| <!-- Statistiques --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Volée en cours</h2> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Flèches:</span> | |
| <span id="arrow-count" class="font-bold">0</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Total:</span> | |
| <span id="total-score" class="font-bold text-2xl text-indigo-600">0</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="font-medium">Moyenne:</span> | |
| <span id="average-score" class="font-bold">0.0</span> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <h3 class="font-medium mb-2">Détail des flèches:</h3> | |
| <div id="arrows-list" class="min-h-12 overflow-x-auto"> | |
| <span class="text-gray-400 italic">Aucune flèche enregistrée</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Résumé global --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mt-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Résumé global</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-indigo-50 p-4 rounded-lg text-center"> | |
| <div class="text-indigo-800 font-bold text-3xl" id="total-volleys">0</div> | |
| <div class="text-gray-600">Volées</div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg text-center"> | |
| <div class="text-green-800 font-bold text-3xl" id="total-arrows">0</div> | |
| <div class="text-gray-600">Flèches</div> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg text-center"> | |
| <div class="text-blue-800 font-bold text-3xl" id="global-average">0.0</div> | |
| <div class="text-gray-600">Moyenne</div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg text-center"> | |
| <div class="text-yellow-800 font-bold text-3xl" id="best-score">0</div> | |
| <div class="text-gray-600">Meilleur score</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Statistiques --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mt-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Statistiques</h2> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-4"> | |
| <select id="chartSelector" class="border border-gray-300 rounded-md px-3 py-2 w-full md:w-auto"> | |
| <option value="score">Scores et moyennes</option> | |
| <option value="distribution">Distribution des flèches</option> | |
| </select> | |
| <select id="dataSelector" class="border border-gray-300 rounded-md px-3 py-2 w-full md:w-auto"> | |
| <option value="both">Afficher les deux</option> | |
| <option value="total">Total points uniquement</option> | |
| <option value="average">Moyennes uniquement</option> | |
| </select> | |
| </div> | |
| <div class="relative h-80" id="scoreChartContainer"> | |
| <canvas id="statsChart"></canvas> | |
| </div> | |
| <div class="relative h-80 hidden" id="distributionChartContainer"> | |
| <canvas id="distributionChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Historique --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mt-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Historique</h2> | |
| <div id="history-list" class="space-y-2 max-h-96 overflow-y-auto"> | |
| <div class="text-gray-400 italic">Aucune volée sauvegardée</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // 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(); | |
| } | |
| // Annuler la dernière flèche | |
| function undoLastArrow() { | |
| if (currentVolley.length > 0) { | |
| currentVolley.pop(); | |
| updateDisplay(); | |
| } | |
| } | |
| // Effacer la volée en cours | |
| function clearVolley() { | |
| if (currentVolley.length > 0 && confirm("Voulez-vous vraiment effacer cette volée ?")) { | |
| currentVolley = []; | |
| updateDisplay(); | |
| } | |
| } | |
| // Sauvegarder la volée en cours | |
| function saveVolley() { | |
| if (currentVolley.length === 0) { | |
| alert("Aucune flèche à sauvegarder !"); | |
| return; | |
| } | |
| const now = new Date(); | |
| const timestamp = now.toLocaleTimeString() + ' ' + now.toLocaleDateString(); | |
| history.push({ | |
| timestamp: timestamp, | |
| arrows: [...currentVolley], | |
| total: currentVolley.reduce((a, b) => a + b, 0) | |
| }); | |
| currentVolley = []; | |
| updateDisplay(); | |
| updateHistory(); | |
| updateGlobalStats(); | |
| updateDistributionChart(); | |
| } | |
| // Mettre à jour l'affichage de la volée en cours | |
| function updateDisplay() { | |
| const arrowCount = document.getElementById('arrow-count'); | |
| const totalScore = document.getElementById('total-score'); | |
| const averageScore = document.getElementById('average-score'); | |
| const arrowsList = document.getElementById('arrows-list'); | |
| arrowCount.textContent = currentVolley.length; | |
| if (currentVolley.length > 0) { | |
| const total = currentVolley.reduce((a, b) => a + b, 0); | |
| const average = (total / currentVolley.length).toFixed(1); | |
| totalScore.textContent = total; | |
| averageScore.textContent = average; | |
| // Afficher les flèches | |
| arrowsList.innerHTML = currentVolley.map(points => | |
| `<span class="score-point target-${points} font-medium mx-1">${points}</span>` | |
| ).join(' '); | |
| } else { | |
| totalScore.textContent = '0'; | |
| averageScore.textContent = '0.0'; | |
| arrowsList.innerHTML = '<span class="text-gray-400 italic">Aucune flèche enregistrée</span>'; | |
| } | |
| } | |
| // Supprimer une volée de l'historique | |
| function deleteVolley(index) { | |
| if (confirm("Voulez-vous vraiment supprimer cette volée ?")) { | |
| history.splice(index, 1); | |
| updateHistory(); | |
| updateGlobalStats(); | |
| } | |
| } | |
| // Mettre à jour l'historique | |
| function updateHistory() { | |
| const historyList = document.getElementById('history-list'); | |
| if (history.length === 0) { | |
| historyList.innerHTML = '<div class="text-gray-400 italic">Aucune volée sauvegardée</div>'; | |
| return; | |
| } | |
| historyList.innerHTML = ''; | |
| // Trier par date récente | |
| history.slice().reverse().forEach((volley, index) => { | |
| const originalIndex = history.length - 1 - index; // Calculer l'index original | |
| const volleyElement = document.createElement('div'); | |
| volleyElement.className = 'bg-gray-50 p-3 rounded-lg hover:bg-gray-100 transition cursor-pointer'; | |
| volleyElement.onclick = () => showVolleyDetails(volley); | |
| const header = document.createElement('div'); | |
| header.className = 'flex justify-between items-center mb-1'; | |
| const title = document.createElement('span'); | |
| title.className = 'font-medium'; | |
| title.textContent = `Volée ${history.length - index}`; | |
| const rightSection = document.createElement('div'); | |
| rightSection.className = 'flex items-center gap-2'; | |
| const date = document.createElement('span'); | |
| date.className = 'text-sm text-gray-500'; | |
| date.textContent = volley.timestamp; | |
| const deleteBtn = document.createElement('button'); | |
| deleteBtn.className = 'text-red-500 hover:text-red-700 transition text-lg p-1'; | |
| deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>'; | |
| deleteBtn.title = "Supprimer cette volée"; | |
| deleteBtn.onclick = (e) => { | |
| e.stopPropagation(); | |
| deleteVolley(originalIndex); | |
| }; | |
| rightSection.appendChild(date); | |
| rightSection.appendChild(deleteBtn); | |
| header.appendChild(title); | |
| header.appendChild(rightSection); | |
| const details = document.createElement('div'); | |
| details.className = 'flex flex-col'; | |
| const scoreRow = document.createElement('div'); | |
| scoreRow.className = 'flex justify-between items-center mb-1'; | |
| const score = document.createElement('span'); | |
| score.className = 'font-bold text-indigo-600'; | |
| score.textContent = volley.total + ' pts (' + (volley.total / volley.arrows.length).toFixed(1) + ')'; | |
| const arrowCount = document.createElement('span'); | |
| arrowCount.className = 'text-sm text-gray-600'; | |
| arrowCount.textContent = volley.arrows.length + ' flèches'; | |
| scoreRow.appendChild(score); | |
| scoreRow.appendChild(arrowCount); | |
| const arrowsDetail = document.createElement('div'); | |
| arrowsDetail.className = 'flex flex-wrap gap-1 mt-1'; | |
| arrowsDetail.innerHTML = volley.arrows.map(points => | |
| `<span class="score-point target-${points} font-medium">${points}</span>` | |
| ).join(' '); | |
| details.appendChild(scoreRow); | |
| details.appendChild(arrowsDetail); | |
| volleyElement.appendChild(header); | |
| volleyElement.appendChild(details); | |
| historyList.appendChild(volleyElement); | |
| }); | |
| } | |
| // Afficher les détails d'une volée | |
| function showVolleyDetails(volley) { | |
| let details = `Volée du ${volley.timestamp}\n\n`; | |
| details += `Total: ${volley.total} points\n`; | |
| details += `Nombre de flèches: ${volley.arrows.length}\n`; | |
| details += `Moyenne: ${(volley.total / volley.arrows.length).toFixed(1)}\n\n`; | |
| details += `Détail des flèches:\n${volley.arrows.join(', ')}`; | |
| alert(details); | |
| } | |
| // Variables pour les graphiques | |
| let statsChart = null; | |
| let distributionChart = null; | |
| // Initialiser le graphique de distribution | |
| function initDistributionChart() { | |
| const ctx = document.getElementById('distributionChart').getContext('2d'); | |
| distributionChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1', 'M'], | |
| datasets: [{ | |
| label: 'Nombre de flèches', | |
| data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], | |
| backgroundColor: [ | |
| '#f59e0b', '#f59e0b', | |
| '#ef4444', '#ef4444', | |
| '#3b82f6', '#3b82f6', | |
| '#000000', '#000000', | |
| '#ffffff', '#ffffff', | |
| '#ffffff' | |
| ], | |
| borderColor: [ | |
| '#d97706', '#d97706', | |
| '#dc2626', '#dc2626', | |
| '#2563eb', '#2563eb', | |
| '#000000', '#000000', | |
| '#9ca3af', '#9ca3af', | |
| '#9ca3af' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: 'Nombre de flèches' | |
| } | |
| }, | |
| x: { | |
| title: { | |
| display: true, | |
| text: 'Points' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Mettre à jour le graphique de distribution | |
| function updateDistributionChart() { | |
| if (!distributionChart) return; | |
| const counts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // 10 à 0 (M) | |
| history.forEach(volley => { | |
| volley.arrows.forEach(points => { | |
| if (points >= 0 && points <= 10) { | |
| counts[10 - points]++; // 10 est à l'index 0, 9 à 1, etc. | |
| } | |
| }); | |
| }); | |
| distributionChart.data.datasets[0].data = counts; | |
| distributionChart.update(); | |
| } | |
| // Basculer entre les graphiques | |
| function toggleCharts() { | |
| const selector = document.getElementById('chartSelector'); | |
| const scoreContainer = document.getElementById('scoreChartContainer'); | |
| const distributionContainer = document.getElementById('distributionChartContainer'); | |
| const scoreButtons = document.getElementById('scoreChartButtons'); | |
| const dataSelector = document.getElementById('dataSelector'); | |
| if (selector.value === 'score') { | |
| scoreContainer.classList.remove('hidden'); | |
| distributionContainer.classList.add('hidden'); | |
| scoreButtons.classList.remove('hidden'); | |
| dataSelector.classList.remove('hidden'); | |
| } else { | |
| scoreContainer.classList.add('hidden'); | |
| distributionContainer.classList.remove('hidden'); | |
| scoreButtons.classList.add('hidden'); | |
| dataSelector.classList.add('hidden'); | |
| updateDistributionChart(); | |
| } | |
| } | |
| // Initialiser le graphique | |
| function initStatsChart() { | |
| const ctx = document.getElementById('statsChart').getContext('2d'); | |
| statsChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: [], | |
| datasets: [ | |
| { | |
| label: 'Total points', | |
| data: [], | |
| backgroundColor: 'rgba(14, 165, 233, 0.8)', | |
| borderColor: 'rgb(14, 165, 233)', | |
| borderWidth: 1, | |
| yAxisID: 'y', | |
| type: 'bar' | |
| }, | |
| { | |
| label: 'Moyenne', | |
| data: [], | |
| borderColor: 'rgb(0, 0, 0)', | |
| backgroundColor: 'rgba(0, 0, 0, 0.2)', | |
| tension: 0.1, | |
| yAxisID: 'y1', | |
| type: 'line' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| type: 'linear', | |
| display: true, | |
| position: 'left', | |
| title: { | |
| display: true, | |
| text: 'Total points' | |
| }, | |
| min: 0, | |
| grid: { | |
| drawOnChartArea: true | |
| } | |
| }, | |
| y1: { | |
| type: 'linear', | |
| display: true, | |
| position: 'right', | |
| title: { | |
| display: true, | |
| text: 'Moyenne' | |
| }, | |
| min: 0, | |
| max: 10, | |
| grid: { | |
| drawOnChartArea: false | |
| }, | |
| ticks: { | |
| stepSize: 1 | |
| } | |
| }, | |
| x: { | |
| stacked: false, | |
| grid: { | |
| display: false | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: true | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Mettre à jour le graphique | |
| function updateStatsChart() { | |
| if (!statsChart) return; | |
| const labels = []; | |
| const totals = []; | |
| const averages = []; | |
| history.forEach((volley, index) => { | |
| labels.push(`Volée ${index + 1}`); | |
| totals.push(volley.total); | |
| averages.push(volley.total / volley.arrows.length); | |
| }); | |
| statsChart.data.labels = labels; | |
| statsChart.data.datasets[0].data = totals; | |
| statsChart.data.datasets[1].data = averages; | |
| statsChart.update(); | |
| } | |
| // Mettre à jour les statistiques globales | |
| function updateGlobalStats() { | |
| const totalVolleys = document.getElementById('total-volleys'); | |
| const totalArrows = document.getElementById('total-arrows'); | |
| const globalAverage = document.getElementById('global-average'); | |
| const bestScore = document.getElementById('best-score'); | |
| totalVolleys.textContent = history.length; | |
| if (history.length > 0) { | |
| const totalArrowsCount = history.reduce((sum, volley) => sum + volley.arrows.length, 0); | |
| const totalPoints = history.reduce((sum, volley) => sum + volley.total, 0); | |
| const avg = (totalPoints / totalArrowsCount).toFixed(1); | |
| const best = Math.max(...history.map(volley => volley.total)); | |
| totalArrows.textContent = totalArrowsCount; | |
| globalAverage.textContent = avg; | |
| bestScore.textContent = best; | |
| } else { | |
| totalArrows.textContent = '0'; | |
| globalAverage.textContent = '0.0'; | |
| bestScore.textContent = '0'; | |
| } | |
| } | |
| // Fonction pour basculer l'affichage d'un dataset | |
| function toggleDataset(index) { | |
| if (!statsChart) return; | |
| const meta = statsChart.getDatasetMeta(index); | |
| const button = index === 0 ? document.getElementById('toggle-total') : document.getElementById('toggle-average'); | |
| // Basculer la visibilité | |
| meta.hidden = !meta.hidden; | |
| // Mettre à jour le style du bouton | |
| if (meta.hidden) { | |
| button.classList.remove('bg-sky-100', 'text-sky-800'); | |
| button.classList.add('bg-gray-100', 'text-gray-500'); | |
| button.innerHTML = `<i class="fas fa-times mr-2"></i>${index === 0 ? 'Total points' : 'Moyennes'}`; | |
| } else { | |
| button.classList.remove('bg-gray-100', 'text-gray-500'); | |
| button.classList.add(index === 0 ? 'bg-sky-100' : 'bg-gray-100', index === 0 ? 'text-sky-800' : 'text-gray-800'); | |
| button.innerHTML = `<i class="fas fa-check mr-2"></i>${index === 0 ? 'Total points' : 'Moyennes'}`; | |
| } | |
| 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(); | |
| initDistributionChart(); | |
| updateDisplay(); | |
| updateHistory(); | |
| updateGlobalStats(); | |
| updateStatsChart(); | |
| updateDistributionChart(); | |
| document.getElementById('chartSelector').addEventListener('change', toggleCharts); | |
| document.getElementById('dataSelector').addEventListener('change', function() { | |
| const value = this.value; | |
| if (statsChart) { | |
| statsChart.data.datasets[0].hidden = value === 'average'; | |
| statsChart.data.datasets[1].hidden = value === 'total'; | |
| statsChart.update(); | |
| } | |
| }); | |
| }); | |
| // Mettre à jour le graphique quand l'historique change | |
| function updateHistory() { | |
| const historyList = document.getElementById('history-list'); | |
| if (history.length === 0) { | |
| historyList.innerHTML = '<div class="text-gray-400 italic">Aucune volée sauvegardée</div>'; | |
| updateStatsChart(); | |
| return; | |
| } | |
| historyList.innerHTML = ''; | |
| // Trier par date récente | |
| history.slice().reverse().forEach((volley, index) => { | |
| const originalIndex = history.length - 1 - index; | |
| const volleyElement = document.createElement('div'); | |
| volleyElement.className = 'bg-gray-50 p-3 rounded-lg hover:bg-gray-100 transition cursor-pointer'; | |
| volleyElement.onclick = () => showVolleyDetails(volley); | |
| const header = document.createElement('div'); | |
| header.className = 'flex justify-between items-center mb-1'; | |
| const title = document.createElement('span'); | |
| title.className = 'font-medium'; | |
| title.textContent = `Volée ${history.length - index}`; | |
| const rightSection = document.createElement('div'); | |
| rightSection.className = 'flex items-center gap-2'; | |
| const date = document.createElement('span'); | |
| date.className = 'text-sm text-gray-500'; | |
| date.textContent = volley.timestamp; | |
| const deleteBtn = document.createElement('button'); | |
| deleteBtn.className = 'text-red-500 hover:text-red-700 transition text-lg p-1'; | |
| deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>'; | |
| deleteBtn.title = "Supprimer cette volée"; | |
| deleteBtn.onclick = (e) => { | |
| e.stopPropagation(); | |
| deleteVolley(originalIndex); | |
| }; | |
| rightSection.appendChild(date); | |
| rightSection.appendChild(deleteBtn); | |
| header.appendChild(title); | |
| header.appendChild(rightSection); | |
| const details = document.createElement('div'); | |
| details.className = 'flex flex-col'; | |
| const scoreRow = document.createElement('div'); | |
| scoreRow.className = 'flex justify-between items-center mb-1'; | |
| const score = document.createElement('span'); | |
| score.className = 'font-bold text-indigo-600'; | |
| score.textContent = volley.total + ' pts (' + (volley.total / volley.arrows.length).toFixed(1) + ')'; | |
| const arrowCount = document.createElement('span'); | |
| arrowCount.className = 'text-sm text-gray-600'; | |
| arrowCount.textContent = volley.arrows.length + ' fl.'; | |
| scoreRow.appendChild(score); | |
| scoreRow.appendChild(arrowCount); | |
| const arrowsDetail = document.createElement('div'); | |
| arrowsDetail.className = 'flex flex-wrap gap-1 mt-1'; | |
| arrowsDetail.innerHTML = volley.arrows.map(points => | |
| `<span class="score-point target-${points} font-medium">${points}</span>` | |
| ).join(' '); | |
| details.appendChild(scoreRow); | |
| details.appendChild(arrowsDetail); | |
| volleyElement.appendChild(header); | |
| volleyElement.appendChild(details); | |
| historyList.appendChild(volleyElement); | |
| }); | |
| updateStatsChart(); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jerome-dreville/arc-volee-compte" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |