412 lines
9.7 KiB
JavaScript
412 lines
9.7 KiB
JavaScript
/* =========================================================
|
||
FOOTBALL STATS API - LOGIQUE PRINCIPALE (FRONT/BACK MIX)
|
||
---------------------------------------------------------
|
||
Ici on gère toute la logique de l'application :
|
||
- joueurs
|
||
- équipes
|
||
- tournois
|
||
- statistiques
|
||
- stockage local (localStorage)
|
||
========================================================= */
|
||
|
||
|
||
/* =========================
|
||
STOCKAGE LOCAL (MEMOIRE)
|
||
-------------------------
|
||
On récupère les données si elles existent déjà dans le navigateur.
|
||
Sinon on initialise des tableaux vides.
|
||
========================= */
|
||
|
||
let players = JSON.parse(localStorage.getItem("players")) || [];
|
||
let teams = JSON.parse(localStorage.getItem("teams")) || [];
|
||
let tournaments = JSON.parse(localStorage.getItem("tournaments")) || [];
|
||
|
||
|
||
/* =========================
|
||
SAUVEGARDE AUTOMATIQUE
|
||
-------------------------
|
||
Permet de sauvegarder toutes les données à chaque modification.
|
||
Ici on utilise localStorage pour simuler une base de données locale.
|
||
========================= */
|
||
|
||
function save(){
|
||
localStorage.setItem("players", JSON.stringify(players));
|
||
localStorage.setItem("teams", JSON.stringify(teams));
|
||
localStorage.setItem("tournaments", JSON.stringify(tournaments));
|
||
}
|
||
|
||
|
||
/* =========================
|
||
NAVIGATION ENTRE ONGLETS
|
||
-------------------------
|
||
Fonction simple pour afficher un onglet et cacher les autres.
|
||
========================= */
|
||
|
||
function showTab(id){
|
||
document.querySelectorAll(".tab").forEach(t => t.style.display = "none");
|
||
document.getElementById(id).style.display = "block";
|
||
}
|
||
|
||
|
||
/* =========================
|
||
MODULE JOUEURS
|
||
-------------------------
|
||
Gestion complète des joueurs :
|
||
- ajout
|
||
- affichage
|
||
- suppression
|
||
========================= */
|
||
|
||
function addPlayer(){
|
||
const name = document.getElementById("playerName").value;
|
||
|
||
// Création d’un objet joueur avec stats par défaut
|
||
players.push({
|
||
id: Date.now(), // ID unique basé sur le timestamp
|
||
name,
|
||
goals: 0,
|
||
assists: 0,
|
||
fouls: 0
|
||
});
|
||
|
||
save();
|
||
renderPlayers();
|
||
renderStats();
|
||
}
|
||
|
||
|
||
/* Affichage des joueurs dans l'interface */
|
||
function renderPlayers(){
|
||
const div = document.getElementById("playersList");
|
||
div.innerHTML = "";
|
||
|
||
players.forEach(p => {
|
||
div.innerHTML += `
|
||
<div class="card player-card">
|
||
<div class="player-info">
|
||
<b>${p.name}</b>
|
||
<div class="stats">
|
||
⚽ ${p.goals} | 🎯 ${p.assists} | ❌ ${p.fouls}
|
||
</div>
|
||
</div>
|
||
|
||
<button class="delete-btn" onclick="deletePlayer(${p.id})">✖</button>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
|
||
/* Suppression d’un joueur + nettoyage dans les équipes */
|
||
function deletePlayer(id){
|
||
|
||
// suppression du joueur
|
||
players = players.filter(p => p.id != id);
|
||
|
||
// suppression du joueur dans toutes les équipes
|
||
teams.forEach(t => {
|
||
t.players = t.players.filter(pid => pid != id);
|
||
});
|
||
|
||
save();
|
||
|
||
renderPlayers();
|
||
renderTeams();
|
||
renderStats();
|
||
}
|
||
|
||
|
||
/* =========================
|
||
MODULE EQUIPES
|
||
-------------------------
|
||
Création et gestion des équipes + assignation des joueurs
|
||
========================= */
|
||
|
||
function addTeam(){
|
||
const name = document.getElementById("teamName").value;
|
||
|
||
teams.push({
|
||
id: Date.now(),
|
||
name,
|
||
players: [] // liste des IDs joueurs
|
||
});
|
||
|
||
save();
|
||
renderTeams();
|
||
}
|
||
|
||
|
||
/* Ajouter un joueur dans une équipe */
|
||
function addPlayerToTeam(playerId, teamId){
|
||
const team = teams.find(t => t.id == teamId);
|
||
|
||
if(!team.players.includes(playerId)){
|
||
team.players.push(playerId);
|
||
}
|
||
|
||
save();
|
||
renderTeams();
|
||
}
|
||
|
||
|
||
/* Retirer un joueur d’une équipe */
|
||
function removePlayerFromTeam(playerId, teamId){
|
||
const team = teams.find(t => t.id == teamId);
|
||
team.players = team.players.filter(p => p != playerId);
|
||
|
||
save();
|
||
renderTeams();
|
||
}
|
||
|
||
|
||
/* Affichage des équipes */
|
||
function renderTeams(){
|
||
const div = document.getElementById("teamsList");
|
||
div.innerHTML = "";
|
||
|
||
teams.forEach(t => {
|
||
div.innerHTML += `
|
||
<div class="card">
|
||
|
||
<!-- HEADER -->
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<b>${t.name}</b>
|
||
<button class="delete-btn" onclick="deleteTeam(${t.id})">✖</button>
|
||
</div>
|
||
|
||
<!-- JOUEURS DANS L'ÉQUIPE -->
|
||
<div style="margin-top:10px;">
|
||
${t.players.map(pid => {
|
||
const player = players.find(p => p.id == pid);
|
||
if(!player) return "";
|
||
|
||
return `
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin:5px 0;">
|
||
${player.name}
|
||
<button onclick="removePlayerFromTeam(${player.id}, ${t.id})">❌</button>
|
||
</div>
|
||
`;
|
||
}).join("")}
|
||
</div>
|
||
|
||
<!-- AJOUT JOUEUR -->
|
||
<div style="margin-top:10px;">
|
||
<select onchange="addPlayerToTeam(Number(this.value), ${t.id})">
|
||
<option>Ajouter joueur</option>
|
||
${players
|
||
.filter(p => !t.players.includes(p.id))
|
||
.map(p => `<option value="${p.id}">${p.name}</option>`)
|
||
.join("")
|
||
}
|
||
</select>
|
||
</div>
|
||
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
/* Suppression équipe */
|
||
function deleteTeam(id){
|
||
teams = teams.filter(t => t.id != id);
|
||
save();
|
||
renderTeams();
|
||
}
|
||
|
||
|
||
/* =========================
|
||
MODULE TOURNOIS
|
||
========================= */
|
||
|
||
function addTournament(){
|
||
const name = document.getElementById("tournamentName").value;
|
||
|
||
tournaments.push({
|
||
id: Date.now(),
|
||
name,
|
||
teams: [],
|
||
matches: []
|
||
});
|
||
|
||
save();
|
||
renderTournaments();
|
||
}
|
||
|
||
|
||
/* Ajout d’équipe dans un tournoi */
|
||
function addTeamToTournament(teamId, tournamentId){
|
||
const t = tournaments.find(x => x.id == tournamentId);
|
||
|
||
if(!t.teams.includes(teamId)){
|
||
t.teams.push(teamId);
|
||
}
|
||
|
||
save();
|
||
renderTournaments();
|
||
}
|
||
|
||
|
||
/* Ajout d’un match dans un tournoi */
|
||
function addMatch(tournamentId, team1, team2, s1, s2){
|
||
const t = tournaments.find(x => x.id == tournamentId);
|
||
|
||
t.matches.push({
|
||
team1,
|
||
team2,
|
||
score1: s1,
|
||
score2: s2
|
||
});
|
||
|
||
save();
|
||
renderTournaments();
|
||
}
|
||
|
||
|
||
/* Affichage tournois */
|
||
function renderTournaments(){
|
||
const div = document.getElementById("tournamentsList");
|
||
div.innerHTML = "";
|
||
|
||
tournaments.forEach(t => {
|
||
div.innerHTML += `
|
||
<div class="card">
|
||
|
||
<!-- HEADER -->
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<b>${t.name}</b>
|
||
<button class="delete-btn" onclick="deleteTournament(${t.id})">✖</button>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<!-- EQUIPES -->
|
||
<div>
|
||
<b>Teams:</b><br>
|
||
${
|
||
t.teams.length > 0
|
||
? t.teams.map(id => teams.find(x => x.id == id)?.name).join(" vs ")
|
||
: "Aucune équipe"
|
||
}
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<!-- AJOUT EQUIPE -->
|
||
<select onchange="addTeamToTournament(Number(this.value), ${t.id})">
|
||
<option>Ajouter équipe</option>
|
||
${teams.map(x => `<option value="${x.id}">${x.name}</option>`).join("")}
|
||
</select>
|
||
|
||
<br><br>
|
||
|
||
<!-- AJOUT MATCH -->
|
||
<button onclick="renderMatchForm(${t.id})">Ajouter match</button>
|
||
|
||
<div id="match-${t.id}" style="margin-top:10px;"></div>
|
||
|
||
<!-- MATCHS -->
|
||
<div style="margin-top:10px;">
|
||
${
|
||
t.matches.length > 0
|
||
? t.matches.map(m => `
|
||
${teams.find(x => x.id == m.team1)?.name || "?"} ${m.score1}
|
||
- ${m.score2}
|
||
${teams.find(x => x.id == m.team2)?.name || "?"}
|
||
`).join("<br>")
|
||
: "Aucun match"
|
||
}
|
||
</div>
|
||
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
// Supprimer un tournoi
|
||
function deleteTournament(id){
|
||
tournaments = tournaments.filter(t => t.id != id);
|
||
|
||
save(); // sauvegarde en localStorage
|
||
renderTournaments(); // refresh affichage
|
||
}
|
||
|
||
/* Formulaire dynamique de match */
|
||
function renderMatchForm(id){
|
||
const div = document.getElementById("match-" + id);
|
||
|
||
div.innerHTML = `
|
||
<select id="t1-${id}">
|
||
${teams.map(t => `<option value="${t.id}">${t.name}</option>`).join("")}
|
||
</select>
|
||
|
||
<select id="t2-${id}">
|
||
${teams.map(t => `<option value="${t.id}">${t.name}</option>`).join("")}
|
||
</select>
|
||
|
||
<input id="s1-${id}" placeholder="score 1">
|
||
<input id="s2-${id}" placeholder="score 2">
|
||
|
||
<button onclick="
|
||
addMatch(
|
||
${id},
|
||
Number(document.getElementById('t1-${id}').value),
|
||
Number(document.getElementById('t2-${id}').value),
|
||
Number(document.getElementById('s1-${id}').value),
|
||
Number(document.getElementById('s2-${id}').value)
|
||
)
|
||
">Valider</button>
|
||
`;
|
||
}
|
||
|
||
|
||
/* =========================
|
||
MODULE STATS JOUEURS
|
||
========================= */
|
||
|
||
function renderStats(){
|
||
const div = document.getElementById("statsList");
|
||
div.innerHTML = "";
|
||
|
||
players.forEach(p => {
|
||
div.innerHTML += `
|
||
<div class="card">
|
||
<b>${p.name}</b><br>
|
||
|
||
Goals:
|
||
<input id="g${p.id}" value="${p.goals}">
|
||
|
||
Assists:
|
||
<input id="a${p.id}" value="${p.assists}">
|
||
|
||
Fouls:
|
||
<input id="f${p.id}" value="${p.fouls}">
|
||
|
||
<button onclick="saveStats(${p.id})">Save</button>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
|
||
/* Sauvegarde des stats */
|
||
function saveStats(id){
|
||
const p = players.find(x => x.id == id);
|
||
|
||
p.goals = Number(document.getElementById("g" + id).value);
|
||
p.assists = Number(document.getElementById("a" + id).value);
|
||
p.fouls = Number(document.getElementById("f" + id).value);
|
||
|
||
save();
|
||
renderPlayers();
|
||
}
|
||
|
||
|
||
/* =========================
|
||
INITIALISATION APP
|
||
========================= */
|
||
|
||
window.onload = () => {
|
||
showTab("players");
|
||
renderPlayers();
|
||
renderTeams();
|
||
renderTournaments();
|
||
renderStats();
|
||
}; |
