Initial independent version of CrAPP

2026-08-06 08:36:47 +02:00
commit 330669176d
167 changed files with 24096 additions and 0 deletions
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Crown, Vote } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { giocatori } from "@/lib/crapp-data";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+import { conteggioPartita, mioVoto, useVotaMvp, useVotiMvp, type VotoMvp } from "@/lib/mvp-voti";
+
+/** Pannello di votazione MVP di una partita: un voto a testa, modificabile. */
+export function VotazioneMvp({ matchId }: { matchId: string }) {
+  const io = useGiocatoreCorrente();
+  const voti = useVotiMvp();
+  const vota = useVotaMvp();
+  const [aperto, setAperto] = useState(false);
+
+  const tutti: VotoMvp[] = voti.data ?? [];
+  const conteggio = conteggioPartita(tutti, matchId);
+  const mio = io ? mioVoto(tutti, matchId, io.id) : null;
+  const totale = conteggio.reduce((s, c) => s + c.voti, 0);
+  const testa = conteggio[0];
+  const pareggio = conteggio.length > 1 && conteggio[1]!.voti === testa?.voti;
+
+  async function invia(id: string, nome: string) {
+    if (!io) return;
+    try {
+      await vota.mutateAsync({
+        match_id: matchId,
+        votante_id: io.id,
+        votato_id: id,
+        votato_nome: nome,
+      });
+      setAperto(false);
+      toast.success(`Voto MVP registrato: ${nome}`);
+    } catch {
+      toast.error("Voto non riuscito, riprova");
+    }
+  }
+
+  return (
+    <div className="mt-3 rounded-2xl bg-secondary/60 p-3">
+      <div className="flex items-center justify-between gap-2">
+        <p className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <Vote className="h-3.5 w-3.5" /> Voto MVP · {totale} {totale === 1 ? "voto" : "voti"}
+        </p>
+        <button
+          type="button"
+          onClick={() => setAperto((v) => !v)}
+          disabled={!io}
+          className="rounded-full bg-accent px-3 py-1 text-[10px] font-bold uppercase text-accent-foreground disabled:opacity-50"
+        >
+          {mio ? "Cambia voto" : "Vota"}
+        </button>
+      </div>
+
+      <p className="mt-2 text-xs">
+        {testa && !pareggio ? (
+          <span className="inline-flex items-center gap-1 font-bold">
+            <Crown className="h-3.5 w-3.5 text-warning" /> {testa.nome} ({testa.voti})
+          </span>
+        ) : (
+          <span className="text-muted-foreground">
+            {totale === 0 ? "Nessun voto: MVP da eleggere" : "Parità: servono altri voti"}
+          </span>
+        )}
+      </p>
+      {mio ? (
+        <p className="mt-1 text-[11px] text-muted-foreground">Hai votato {mio.votato_nome}</p>
+      ) : null}
+
+      {aperto ? (
+        <div className="mt-3 grid max-h-60 grid-cols-2 gap-1.5 overflow-y-auto">
+          {giocatori.map((g) => (
+            <button
+              key={g.id}
+              type="button"
+              disabled={vota.isPending}
+              onClick={() => invia(g.id, g.nome)}
+              className={cn(
+                "truncate rounded-xl px-2.5 py-2 text-left text-xs font-semibold transition-colors",
+                mio?.votato_id === g.id
+                  ? "bg-accent text-accent-foreground"
+                  : "bg-card text-foreground",
+              )}
+            >
+              {g.nome}
+            </button>
+          ))}
+        </div>
+      ) : conteggio.length > 0 ? (
+        <div className="mt-2 flex flex-wrap gap-1.5">
+          {conteggio.map((c) => (
+            <span key={c.id} className="rounded-lg bg-card px-2 py-1 text-[11px] font-semibold">
+              {c.nome} · {c.voti}
+            </span>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}