From de051d9e321d6024a9c2ddbf0c1dea5952aec390 Mon Sep 17 00:00:00 2001
From: Baptiste <rebillar@insa-toulouse.fr>
Date: Sat, 5 Apr 2025 11:47:20 +0200
Subject: [PATCH] ajout de trop plein de features

---
 index.html | 133 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 113 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index 7d8959a..86d42e0 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
   <script src="tailwind_3.4.16"></script>
 </head>
 <body class="bg-gray-100 flex flex-col items-center p-6">
-  <div class="bg-white shadow-lg p-6 rounded-lg w-full max-w-md">
-    <h1 class="text-xl font-bold mb-4 text-center">Timer de Course</h1>
+  <div class="bg-white shadow-lg p-6 rounded-lg w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
+    <h1 class="text-xl font-bold mb-4 text-center">APPN Timer</h1>
     <div class="flex space-x-2 mb-4">
       <input id="nameInput" type="text" placeholder="Nom du joueur" class="border p-2 rounded w-full">
       <button id="addButton" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Ajouter</button>
@@ -16,11 +16,35 @@
     <div id="playerList" class="space-y-2"></div>
   </div>
   
+  <!-- Tableau des résultats -->
+  <div class="bg-white shadow-lg p-6 rounded-lg w-full sm:w-1/2 md:w-1/3 lg:w-1/2 mt-6">
+    <h2 class="text-lg font-bold mb-4 text-center">Résultats</h2>
+    <table class="min-w-full table-auto">
+      <thead>
+        <tr class="bg-gray-100">
+          <th class="px-4 py-2 text-left">Joueur</th>
+          <th class="px-4 py-2 text-left">Temps</th>
+          <th class="px-4 py-2 text-left">Début</th>
+          <th class="px-4 py-2 text-left">Fin</th>
+        </tr>
+      </thead>
+      <tbody id="resultsTable">
+        <!-- Les résultats seront insérés ici -->
+      </tbody>
+    </table>
+  </div>
+  
   <script>
+    function TimeMS(delta) {
+      const minutes = Math.floor(delta / 60);
+      const seconds = Math.round(delta % 60);
+      return `${minutes} min ${seconds} s`;
+    }
     document.addEventListener("DOMContentLoaded", () => {
       const playerList = document.getElementById("playerList");
       const nameInput = document.getElementById("nameInput");
       const addButton = document.getElementById("addButton");
+      const resultsTable = document.getElementById("resultsTable");
       
       const getCookies = () => {
         const cookies = document.cookie.split("; ").reduce((acc, cookie) => {
@@ -46,37 +70,53 @@
         playerList.innerHTML = "";
         Object.entries(players).forEach(([id, times]) => {
           const playerDiv = document.createElement("div");
-          playerDiv.className = "flex justify-between items-center bg-gray-200 p-2 rounded";
+          playerDiv.className = "flex justify-between items-center bg-gray-200 rounded";
           
           const button = document.createElement("button");
-          button.className = "bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600";
-          if (times.length < 2) {
-            button.textContent = id;
+          button.className = "text-white px-3 py-1 rounded w-full transition-colors duration-300 m-4";
+          
+          if (times.length === 0) {
+            button.classList.add("bg-blue-500");
+            button.textContent = `${id}`;
+            button.addEventListener("click", () => {
+              players[id].push(Date.now());
+              button.classList.remove("bg-blue-500");
+              button.classList.add("bg-green-500");
+              setCookies(players);
+              renderPlayers();
+              reloadResultsTable(); // Recharge la table des résultats après l'action
+            });
+          } else if (times.length === 1) {
+            button.classList.add("bg-green-500");
+            button.textContent = `${id} - lancé`;
+            button.addEventListener("click", () => {
+              players[id].push(Date.now());
+              button.classList.remove("bg-green-500");
+              button.classList.add("bg-gray-500");
+              button.disabled = true;  // Désactive le bouton après le deuxième clic
+              setCookies(players);
+              renderPlayers();
+              reloadResultsTable(); // Recharge la table des résultats après l'action
+            });
           } else {
             const startTime = formatTime(times[0]);
             const endTime = formatTime(times[1]);
             const delta = ((times[1] - times[0]) / 1000).toFixed(2);
-            button.textContent = `${id}: ${delta}s (Début: ${startTime}, Fin: ${endTime})`;
-            button.disabled = true;
-            button.classList.add("bg-gray-400");
+            button.classList.add("bg-gray-500");
+            button.textContent = `${id}`;
+            button.disabled = true;  // Désactive le bouton après les deux clics
+            addResultToTable(id, startTime, endTime, delta);
           }
           
-          button.addEventListener("click", () => {
-            if (players[id].length < 2) {
-              players[id].push(Date.now());
-              setCookies(players);
-              renderPlayers();
-            }
-          });
-          
           const removeBtn = document.createElement("button");
           removeBtn.textContent = "✕";
-          removeBtn.className = "bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600";
+          removeBtn.className = "bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600 m-4";
           removeBtn.addEventListener("click", () => {
             if (confirm(`Supprimer ${id} ?`)) {
               delete players[id];
               setCookies(players);
               renderPlayers();
+              reloadResultsTable(); // Recharge la table des résultats après l'action
             }
           });
           
@@ -86,16 +126,69 @@
         });
       };
 
+      const addResultToTable = (id, startTime, endTime, delta) => {
+        const row = document.createElement("tr");
+        row.className = "border-t";
+
+        const playerCell = document.createElement("td");
+        playerCell.className = "px-4 py-2";
+        playerCell.textContent = id;
+        
+        const startCell = document.createElement("td");
+        startCell.className = "px-4 py-2";
+        startCell.textContent = startTime;
+
+        const endCell = document.createElement("td");
+        endCell.className = "px-4 py-2";
+        endCell.textContent = endTime;
+
+        const deltaCell = document.createElement("td");
+        deltaCell.className = "px-4 py-2";
+        deltaCell.textContent = TimeMS(delta);
+
+        row.appendChild(playerCell);
+        row.appendChild(deltaCell);
+        row.appendChild(startCell);
+        row.appendChild(endCell);
+
+        resultsTable.appendChild(row);
+      };
+
+      const reloadResultsTable = () => {
+        // Vide le tableau avant de le remplir à nouveau
+        resultsTable.innerHTML = "";
+
+        Object.entries(players).forEach(([id, times]) => {
+          if (times.length === 2) {
+            const startTime = formatTime(times[0]);
+            const endTime = formatTime(times[1]);
+            const delta = ((times[1] - times[0]) / 1000).toFixed(2);
+            addResultToTable(id, startTime, endTime, delta);
+          }
+        });
+      };
+
       addButton.addEventListener("click", () => {
         const name = nameInput.value.trim();
         if (!name) return;
-        const id = `${name}-${Date.now()}`;
-        players[id] = [];
+        const id = `${name}`;
+        if (players.hasOwnProperty(id)) {
+            alert('Ce nom existe déjà !');
+        } else {
+            players[id] = [];
+        }
         setCookies(players);
         renderPlayers();
         nameInput.value = "";
+        reloadResultsTable(); // Recharge la table des résultats après l'action
       });
       
+      nameInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          addButton.click();  // Simule un clic sur le bouton "Ajouter" lorsque la touche "Entrée" est pressée
+        }
+      });
+
       renderPlayers();
     });
   </script>
