rebillar/appn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ajout de trop plein de features

Browse source
This commit is contained in:
Baptiste Rebillard 2025-04-05 11:47:20 +02:00
parent 33a6a60491
commit de051d9e32
1 changed files with 113 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
index.html
View file

@ -7,8 +7,8 @@
<script src="tailwind_3.4.16"></script> <script src="tailwind_3.4.16"></script>
</head> </head>
<body class="bg-gray-100 flex flex-col items-center p-6"> <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"> <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">Timer de Course</h1> <h1 class="text-xl font-bold mb-4 text-center">APPN Timer</h1>
<div class="flex space-x-2 mb-4"> <div class="flex space-x-2 mb-4">
<input id="nameInput" type="text" placeholder="Nom du joueur" class="border p-2 rounded w-full"> <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> <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 id="playerList" class="space-y-2"></div>
</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> <script>
function TimeMS(delta) {
const minutes = Math.floor(delta / 60);
const seconds = Math.round(delta % 60);
return `${minutes} min ${seconds} s`;
}
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const playerList = document.getElementById("playerList"); const playerList = document.getElementById("playerList");
const nameInput = document.getElementById("nameInput"); const nameInput = document.getElementById("nameInput");
const addButton = document.getElementById("addButton"); const addButton = document.getElementById("addButton");
const resultsTable = document.getElementById("resultsTable");
const getCookies = () => { const getCookies = () => {
const cookies = document.cookie.split("; ").reduce((acc, cookie) => { const cookies = document.cookie.split("; ").reduce((acc, cookie) => {
@ -46,37 +70,53 @@
playerList.innerHTML = ""; playerList.innerHTML = "";
Object.entries(players).forEach(([id, times]) => { Object.entries(players).forEach(([id, times]) => {
const playerDiv = document.createElement("div"); 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"); const button = document.createElement("button");
button.className = "bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600"; button.className = "text-white px-3 py-1 rounded w-full transition-colors duration-300 m-4";
if (times.length < 2) {
button.textContent = id; 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 { } else {
const startTime = formatTime(times[0]); const startTime = formatTime(times[0]);
const endTime = formatTime(times[1]); const endTime = formatTime(times[1]);
const delta = ((times[1] - times[0]) / 1000).toFixed(2); const delta = ((times[1] - times[0]) / 1000).toFixed(2);
button.textContent = `${id}: ${delta}s (Début: ${startTime}, Fin: ${endTime})`; button.classList.add("bg-gray-500");
button.disabled = true; button.textContent = `${id}`;
button.classList.add("bg-gray-400"); 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"); const removeBtn = document.createElement("button");
removeBtn.textContent = "✕"; 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", () => { removeBtn.addEventListener("click", () => {
if (confirm(`Supprimer ${id} ?`)) { if (confirm(`Supprimer ${id} ?`)) {
delete players[id]; delete players[id];
setCookies(players); setCookies(players);
renderPlayers(); renderPlayers();
reloadResultsTable(); // Recharge la table des résultats après l'action
} }
}); });
@ -86,14 +126,67 @@
}); });
}; };
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", () => { addButton.addEventListener("click", () => {
const name = nameInput.value.trim(); const name = nameInput.value.trim();
if (!name) return; if (!name) return;
const id = `${name}-${Date.now()}`; const id = `${name}`;
players[id] = []; if (players.hasOwnProperty(id)) {
alert('Ce nom existe déjà !');
} else {
players[id] = [];
}
setCookies(players); setCookies(players);
renderPlayers(); renderPlayers();
nameInput.value = ""; 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(); renderPlayers();