103 lines
3.8 KiB
HTML
103 lines
3.8 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 max-w-md">
|
|
<h1 class="text-xl font-bold mb-4 text-center">Timer de Course</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>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const playerList = document.getElementById("playerList");
|
|
const nameInput = document.getElementById("nameInput");
|
|
const addButton = document.getElementById("addButton");
|
|
|
|
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 p-2 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;
|
|
} 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.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.addEventListener("click", () => {
|
|
if (confirm(`Supprimer ${id} ?`)) {
|
|
delete players[id];
|
|
setCookies(players);
|
|
renderPlayers();
|
|
}
|
|
});
|
|
|
|
playerDiv.appendChild(button);
|
|
playerDiv.appendChild(removeBtn);
|
|
playerList.appendChild(playerDiv);
|
|
});
|
|
};
|
|
|
|
addButton.addEventListener("click", () => {
|
|
const name = nameInput.value.trim();
|
|
if (!name) return;
|
|
const id = `${name}-${Date.now()}`;
|
|
players[id] = [];
|
|
setCookies(players);
|
|
renderPlayers();
|
|
nameInput.value = "";
|
|
});
|
|
|
|
renderPlayers();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|