application de gestion de la Coupe du Monde

npx create-react-app gestion-coupe-du-monde
cd gestion-coupe-du-monde

npm install uuid

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

const WorldCupTracker = () => {
  const [teams, setTeams] = useState([]);
  const [matches, setMatches] = useState([]);
  const [groupMatches, setGroupMatches] = 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 match de groupe
  const addGroupMatch = (match) => {
    setGroupMatches([...groupMatches, { ...match, id: uuidv4() }]);
  };

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

  // Calcul des points des équipes
  const calculatePoints = () => {
    const points = {};
    groupMatches.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 de la Coupe du Monde</h1>
      <TeamForm addTeam={addTeam} />
      <TeamList teams={teams} deleteTeam={deleteTeam} editTeam={editTeam} />
      <GroupStage teams={teams} addGroupMatch={addGroupMatch} groupMatches={groupMatches} points={points} />
      <KnockoutStage teams={teams} matches={matches} addMatch={addMatch} />
    </div>
  );
};

export default WorldCupTracker;

import React, { useState } from 'react';

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

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

  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>Groupe</label>
        <select value={group} onChange={(e) => setGroup(e.target.value)} required>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
        </select>
      </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 [group, setGroup] = useState(team.group);

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

  return (
    <div>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <select value={group} onChange={(e) => setGroup(e.target.value)}>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>
          <button onClick={handleSave}>Enregistrer</button>
        </div>
      ) : (
        <span>
          {team.name} (Groupe {team.group})
        </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 GroupStage = ({ teams, addGroupMatch, groupMatches, points }) => {
  const [team1, setTeam1] = useState('');
  const [team2, setTeam2] = useState('');
  const [score1, setScore1] = useState('');
  const [score2, setScore2] = useState('');
  const [group, setGroup] = useState('A');

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

  const groupedTeams = teams.filter(team => team.group === group);

  return (
    <div>
      <h2>Phase de Groupes</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Groupe</label>
          <select value={group} onChange={(e) => setGroup(e.target.value)} required>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>
        </div>
        <div>
          <label>Équipe 1</label>
          <select value={team1} onChange={(e) => setTeam1(e.target.value)} required>
            <option value="">Sélectionner une équipe</option>
            {groupedTeams.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>
            {groupedTeams.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 de Groupe</button>
      </form>
      <h3>Matchs de Groupe</h3>
      {groupMatches.filter(match => match.group === group).map(match => (
        <div key={match.id}>
          {match.team1} {match.score1} - {match.score2} {match.team2}
        </div>
      ))}
      <h3>Classement du Groupe {group}</h3>
      <ul>
        {groupedTeams.map(team => (
          <li key={team.id}>
            {team.name}: {points[team.name] || 0} points
          </li>
        ))}
      </ul>
    </div>
  );
};

export default GroupStage;

import React, { useState } from 'react';

const KnockoutStage = ({ teams, matches, addMatch }) => {
  const [team1, setTeam1] = useState('');
  const [team2, setTeam2] = useState('');
  const [score1, setScore1] = useState('');
  const [score2, setScore2] = useState('');
  const [stage, setStage] = useState('Huitièmes de finale');

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

  return (
    <div>
      <h2>Phases Éliminatoires</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Phase</label>
          <select value={stage} onChange={(e) => setStage(e.target.value)} required>
            <option value="Huitièmes de finale">Huitièmes de finale</option>
            <option value="Quarts de finale">Quarts de finale</option>
            <option value="Demi-finales">Demi-finales</option>
            <option value="Finale">Finale</option>
          </select>
        </div>
        <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>
      <h3>Matchs des Phases Éliminatoires</h3>
      {matches.map(match => (
        <div key={match.id}>
          <strong>{match.stage}</strong>: {match.team1} {match.score1} - {match.score2} {match.team2}
        </div>
      ))}
    </div>
  );
};

export default KnockoutStage;

import React from 'react';
import './App.css';
import WorldCupTracker from './WorldCupTracker';

function App() {
  return (
    <div className="App">
      <WorldCupTracker />
    </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