198 lines
7.5 KiB
HTML
198 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Timer de Course</title>
|
|
<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 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>
|
|
</div>
|
|
<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>
|
|
<div class="overflow-x-auto">
|
|
<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>
|
|
</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) => {
|
|
const [key, value] = cookie.split("=");
|
|
acc[key] = value ? JSON.parse(decodeURIComponent(value)) : {};
|
|
return acc;
|
|
}, {});
|
|
return cookies.players || {};
|
|
};
|
|
|
|
const setCookies = (players) => {
|
|
document.cookie = `players=${encodeURIComponent(JSON.stringify(players))}; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
|
};
|
|
|
|
let players = getCookies();
|
|
|
|
const formatTime = (timestamp) => {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
|
};
|
|
|
|
const renderPlayers = () => {
|
|
playerList.innerHTML = "";
|
|
Object.entries(players).forEach(([id, times]) => {
|
|
const playerDiv = document.createElement("div");
|
|
playerDiv.className = "flex justify-between items-center bg-gray-200 rounded";
|
|
|
|
const button = document.createElement("button");
|
|
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.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);
|
|
}
|
|
|
|
const removeBtn = document.createElement("button");
|
|
removeBtn.textContent = "✕";
|
|
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
|
|
}
|
|
});
|
|
|
|
playerDiv.appendChild(button);
|
|
playerDiv.appendChild(removeBtn);
|
|
playerList.appendChild(playerDiv);
|
|
});
|
|
};
|
|
|
|
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 whitespace-nowrap";
|
|
playerCell.textContent = id;
|
|
|
|
const startCell = document.createElement("td");
|
|
startCell.className = "px-4 py-2 whitespace-nowrap";
|
|
startCell.textContent = startTime;
|
|
|
|
const endCell = document.createElement("td");
|
|
endCell.className = "px-4 py-2 whitespace-nowrap";
|
|
endCell.textContent = endTime;
|
|
|
|
const deltaCell = document.createElement("td");
|
|
deltaCell.className = "px-4 py-2 whitespace-nowrap";
|
|
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}`;
|
|
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>
|
|
</body>
|
|
</html>
|