apps/web/src/components/game-end-view.tsx

@@ -232,7 +232,7 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
       )}
 
       {gameRecap && gameRecap.length > 0 && (
-        <RoundsRecap recap={gameRecap} nameOf={nameOf} />
+        <RoundsRecap recap={gameRecap} nameOf={nameOf} playerId={playerId} />
       )}
 
       <div className="flex flex-col gap-2">
@@ -322,9 +322,11 @@ function TracksRecap({ tracks }: { tracks: BlindtestTrackInfo[] }) {
 function RoundsRecap({
   recap,
   nameOf,
+  playerId,
 }: {
   recap: RoundRecap[]
   nameOf: (id: string) => string
+  playerId: string | null
 }) {
   return (
     <details className="rounded-xl border text-left">
@@ -334,6 +336,13 @@ function RoundsRecap({
       <ul className="flex flex-col gap-2 p-3 pt-0">
         {recap.map((r) => {
           const pointsBy = new Map(r.scorers.map((s) => [s.playerId, s.points]))
+          const found = r.answers.filter((a) => a.correct).length
+          // Tri : plus de points d'abord, puis bonnes réponses.
+          const answers = [...r.answers].sort(
+            (a, b) =>
+              (pointsBy.get(b.playerId) ?? 0) - (pointsBy.get(a.playerId) ?? 0) ||
+              Number(b.correct) - Number(a.correct)
+          )
           return (
             <li key={r.index} className="bg-muted/40 flex gap-3 rounded-lg p-2">
               {r.youtubeId ? (
@@ -353,6 +362,8 @@ function RoundsRecap({
                 <p className="text-muted-foreground text-[10px] uppercase">
                   {r.index + 1} ·{" "}
                   {r.category ?? (r.type === "blindtest" ? "Blindtest" : "Quiz")}
+                  {" · "}
+                  <span className="text-green-500">✓ {found}</span>
                 </p>
                 {r.type !== "blindtest" && (
                   <p className="line-clamp-1 text-xs">{r.label}</p>
@@ -367,15 +378,22 @@ function RoundsRecap({
                   )}
                 </p>
                 <ul className="mt-1 flex flex-col gap-0.5">
-                  {r.answers.length === 0 ? (
+                  {answers.length === 0 ? (
                     <li className="text-muted-foreground text-[10px]">
                       Aucune réponse
                     </li>
                   ) : (
-                    r.answers.map((a) => (
+                    answers.map((a) => (
                       <li key={a.playerId} className="text-[10px]">
-                        <span className="text-muted-foreground">
+                        <span
-                          {nameOf(a.playerId)} :{" "}
+                          className={
+                            a.playerId === playerId
+                              ? "font-semibold"
+                              : "text-muted-foreground"
+                          }
+                        >
+                          {nameOf(a.playerId)}
+                          {a.playerId === playerId && " (toi)"} :{" "}
                         </span>
                         <span
                           className={