gestion de championnat de footbal

npx create-react-app gestion-championnat-football
cd gestion-championnat-football

npm install uuid

import React, { useState } from 'react';
import TeamForm from './TeamForm';
import TeamList from './TeamList';
import MatchForm from './MatchForm';
import MatchList from './MatchList';
import { v4 as uuidv4 } from 'uuid';

const ChampionshipTracker = () => {
  // États pour stocker les équipes et les matchs
  const [teams, setTeams] = useState([]);
  const [matches, setMatches] = useState([]);

  // Fonction pour ajouter une nouvelle équipe
  const addTeam = (team) => {
    setTeams([...teams, { ...team, id: uuidv4() }]);
  };

  // Fonction pour supprimer une équipe
  const deleteTeam = (id) => {
    setTeams(teams.filter((team) => team.id !== id));
  };

  // Fonction pour modifier une équipe
  const editTeam = (id, updatedTeam) => {
    setTeams(
      teams.map((team) =>
        team.id === id ? { ...team, ...updatedTeam } : team
      )
    );
  };

  // Fonction pour ajouter un nouveau match
  const addMatch = (match) => {
    setMatches([...matches, { ...match, id: uuidv4() }]);
  };

  // Calcul des points des équipes
  const calculatePoints = () => {
    const points = {};
    matches.forEach(match => {
      if (!points[match.team1]) points[match.team1] = 0;
      if (!points[match.team2]) points[match.team2] = 0;
      if (match.score1 > match.score2) {
        points[match.team1] += 3;
      } else if (match.score1 < match.score2) {
        points[match.team2] += 3;
      } else {
        points[match.team1] += 1;
        points[match.team2] += 1;
      }
    });
    return points;
  };

  const points = calculatePoints();

  return (
    <div>
      <h1>Gestion du Championnat de Football</h1>
      <TeamForm addTeam={addTeam} />
      <TeamList teams={teams} deleteTeam={deleteTeam} editTeam={editTeam} />
      <MatchForm teams={teams} addMatch={addMatch} />
      <MatchList matches={matches} />
      <h2>Points des Équipes</h2>
      <ul>
        {teams.map(team => (
          <li key={team.id}>
            {team.name}: {points[team.name] || 0} points
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChampionshipTracker;

import React, { useState } from 'react';

const TeamForm = ({ addTeam }) => {
  // États pour les champs du formulaire
  const [name, setName] = useState('');
  const [city, setCity] = useState('');

  // Gestion de la soumission du formulaire
  const handleSubmit = (e) => {
    e.preventDefault();
    addTeam({ name, city });
    setName('');
    setCity('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Nom de l'équipe</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Ville</label>
        <input
          type="text"
          value={city}
          onChange={(e) => setCity(e.target.value)}
          required
        />
      </div>
      <button type="submit">Ajouter Équipe</button>
    </form>
  );
};

export default TeamForm;

import React from 'react';
import TeamItem from './TeamItem';

const TeamList = ({ teams, deleteTeam, editTeam }) => {
  return (
    <div>
      <h2>Liste des Équipes</h2>
      {teams.map((team) => (
        <TeamItem
          key={team.id}
          team={team}
          deleteTeam={deleteTeam}
          editTeam={editTeam}
        />
      ))}
    </div>
  );
};

export default TeamList;

import React, { useState } from 'react';

const TeamItem = ({ team, deleteTeam, editTeam }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [name, setName] = useState(team.name);
  const [city, setCity] = useState(team.city);

  const handleSave = () => {
    editTeam(team.id, { name, city });
    setIsEditing(false);
  };

  return (
    <div>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <input
            type="text"
            value={city}
            onChange={(e) => setCity(e.target.value)}
          />
          <button onClick={handleSave}>Enregistrer</button>
        </div>
      ) : (
        <span>
          {team.name} ({team.city})
        </span>
      )}
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? 'Annuler' : 'Modifier'}
      </button>
      <button onClick={() => deleteTeam(team.id)}>Supprimer</button>
    </div>
  );
};

export default TeamItem;

import React, { useState } from 'react';

const MatchForm = ({ teams, addMatch }) => {
  // États pour les champs du formulaire
  const [team1, setTeam1] = useState('');
  const [team2, setTeam2] = useState('');
  const [score1, setScore1] = useState('');
  const [score2, setScore2] = useState('');

  // Gestion de la soumission du formulaire
  const handleSubmit = (e) => {
    e.preventDefault();
    addMatch({ team1, team2, score1: parseInt(score1), score2: parseInt(score2) });
    setTeam1('');
    setTeam2('');
    setScore1('');
    setScore2('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Équipe 1</label>
        <select value={team1} onChange={(e) => setTeam1(e.target.value)} required>
          <option value="">Sélectionner une équipe</option>
          {teams.map(team => (
            <option key={team.id} value={team.name}>{team.name}</option>
          ))}
        </select>
      </div>
      <div>
        <label>Équipe 2</label>
        <select value={team2} onChange={(e) => setTeam2(e.target.value)} required>
          <option value="">Sélectionner une équipe</option>
          {teams.map(team => (
            <option key={team.id} value={team.name}>{team.name}</option>
          ))}
        </select>
      </div>
      <div>
        <label>Score Équipe 1</label>
        <input
          type="number"
          value={score1}
          onChange={(e) => setScore1(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Score Équipe 2</label>
        <input
          type="number"
          value={score2}
          onChange={(e) => setScore2(e.target.value)}
          required
        />
      </div>
      <button type="submit">Ajouter Match</button>
    </form>
  );
};

export default MatchForm;

import React from 'react';
import MatchItem from './MatchItem';

const MatchList = ({ matches }) => {
  return (
    <div>
      <h2>Liste des Matchs</h2>
      {matches.map((match) => (
        <MatchItem
          key={match.id}
          match={match}
        />
      ))}
    </div>
  );
};

export default MatchList;

import React from 'react';

const MatchItem = ({ match }) => {
  return (
    <div>
      <span>
        {match.team1} {match.score1} - {match.score2} {match.team2}
      </span>
    </div>
  );
};

export default MatchItem;
Mise à jour du composant principal
Modifiez src/App.js pour utiliser le composant ChampionshipTracker.

jsx
Copy code
import React from 'react';
import './App.css';
import ChampionshipTracker from './ChampionshipTracker';

function App() {
  return (
    <div className="App">
      <ChampionshipTracker />
    </div>
  );
}

export default App;

.App {
  text-align: center;
}

form {
  margin: 20px;
}

form div {
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}

h2 {
  margin-top: 20px;
}

input, select {
  margin-right: 10px;
}

div > span {
  display: inline-block;
  margin-right: 10px;
}

npm start