275 lines
10 KiB
HTML
275 lines
10 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="css/tailwind_3.4.16"></script>
|
|
<link rel="stylesheet" href="css/styles.css"> <!-- Import the external CSS file -->
|
|
</head>
|
|
<body class="bg-gray-100 flex flex-col items-center p-6 pt-24">
|
|
<nav class="bg-gray-800 text-white w-full p-6 shadow-lg fixed top-0 left-0 z-50">
|
|
<div class="container mx-auto flex space-x-8 text-lg font-bold">
|
|
<a href="index.html" class="hover:text-gray-300">Home</a>
|
|
<a href="map.html" class="hover:text-gray-300">Map</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="header-container">
|
|
<h1 class="header-title">APPN Timer</h1>
|
|
<p class="header-subtitle">Gérez vos courses facilement pour le cours d'APPN</p>
|
|
</div>
|
|
<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">Ajouter un joueur</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 startAllButton = document.getElementById("startAllButton");
|
|
|
|
startAllButton.addEventListener("click", () => {
|
|
Object.keys(players).forEach((id) => {
|
|
if (players[id].length === 0) {
|
|
players[id].push(Date.now());
|
|
}
|
|
});
|
|
setCookies(players);
|
|
renderPlayers();
|
|
reloadResultsTable();
|
|
});
|
|
|
|
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>
|
|
|
|
<!-- Bouton pour exporter les résultats en CSV -->
|
|
<div class="mt-4">
|
|
<button id="exportButton" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
|
|
Exporter en CSV
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button id="startAllButton" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
|
|
Lancer tous les chronos
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const exportToCSV = () => {
|
|
const rows = [["Joueur", "Temps", "Début", "Fin"]]; // En-têtes du fichier CSV
|
|
|
|
// Parcourt les lignes du tableau des résultats
|
|
Array.from(resultsTable.querySelectorAll("tr")).forEach((row) => {
|
|
const cells = Array.from(row.querySelectorAll("td")).map((cell) => cell.textContent);
|
|
if (cells.length > 0) {
|
|
rows.push(cells); // Ajoute les données de chaque ligne au tableau
|
|
}
|
|
});
|
|
|
|
// Convertit les données en format CSV
|
|
const csvContent = rows.map((row) => row.join(",")).join("\n");
|
|
|
|
// Crée un fichier Blob pour le téléchargement
|
|
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
// Crée un lien de téléchargement
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = "resultats.csv";
|
|
link.style.display = "none";
|
|
document.body.appendChild(link);
|
|
|
|
// Simule un clic pour télécharger le fichier
|
|
link.click();
|
|
|
|
// Nettoie le DOM
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
// Ajoute un gestionnaire d'événement au bouton d'exportation
|
|
document.getElementById("exportButton").addEventListener("click", exportToCSV);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|