the end.

mon-projet/src/pages/Accueil.jsx

@@ -6,15 +6,20 @@ function Accueil({ trilogies, setTrilogies, likes, setLikes }) {
   console.log("test");
   const [a, setA] = useState(trilogies[0].id);
   const [b, setB] = useState(trilogies[1].id);
-
+  const triloA = trilogies.find((t) => t.id === Number(a));
+  const triloB = trilogies.find((t) => t.id === Number(b));
   const likesA = likes[a] || 0;
   const likesB = likes[b] || 0;
+
   const gagnante =
-    likesA === likesB
-      ? "Égalité"
-      : likesA > likesB
-        ? trilogies.find((t) => t.id === Number(a)).nom
-        : trilogies.find((t) => t.id === Number(b)).nom;
+    !triloA || !triloB
+      ? "—" // une des deux a été supprimée
+      : likesA === likesB
+        ? "Égalité"
+        : likesA > likesB
+          ? triloA.nom
+          : triloB.nom;
+
   const [recherche, setRecherche] = useState("");
   const [nom, setNom] = useState("");
   const [niveaux, setNiveaux] = useState("");
@@ -42,9 +47,16 @@ function Accueil({ trilogies, setTrilogies, likes, setLikes }) {
   function liker(id) {
     setLikes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
   }
+
   function supprimer(id) {
     setTrilogies(trilogies.filter((t) => t.id !== id));
+    setLikes((prev) => {
+      const copie = { ...prev }; // une COPIE (on ne modifie jamais l'ancien objet)
+      delete copie[id]; // on retire l'entrée de cette trilogie
+      return copie; // on renvoie le nouvel objet
+    });
   }
+
   const total = Object.values(likes).reduce((s, n) => s + n, 0);
   return (
     <div className="body">
@@ -55,6 +67,24 @@ function Accueil({ trilogies, setTrilogies, likes, setLikes }) {
           <option value="likes">Plus likées</option>
         </select>
       </>
+      <div className="versus">
+        <select value={a} onChange={(e) => setA(e.target.value)}>
+          {trilogies.map((t) => (
+            <option key={t.id} value={t.id}>
+              {t.nom}
+            </option>
+          ))}
+        </select>
+        <select value={b} onChange={(e) => setB(e.target.value)}>
+          {trilogies.map((t) => (
+            <option key={t.id} value={t.id}>
+              {t.nom}
+            </option>
+          ))}
+        </select>
+        <p>🏆 Gagnante : {gagnante}</p>
+      </div>
+
       <div className="podium">
         {podium.map((t, index) => (
           <p key={t.id}>