454 lines
20 KiB
TypeScript
454 lines
20 KiB
TypeScript
import { useState } from "react";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
import { Cake, ChevronDown, Crown } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { PageHeader } from "@/components/crapp/ui-bits";
|
|
import { BarraSottosezioni } from "@/components/crapp/BarraSottosezioni";
|
|
import { Avatar } from "@/components/crapp/Avatar";
|
|
import { formatData } from "@/lib/crapp-data";
|
|
import { microcopyObiettivo, progressoObiettivo } from "@/lib/obiettivi";
|
|
import { useRosa, useObiettivi } from "@/lib/rosa";
|
|
import { usePresenzeUltimoMeseTutti } from "@/lib/presenze-mese";
|
|
import { totaliSquadra, useScoutMatches } from "@/lib/scout-store";
|
|
import { useCsi } from "@/lib/csi";
|
|
import { partiteGiocate } from "@/lib/csi-core";
|
|
import { mediaSquadra, usePagelle } from "@/lib/pagelle";
|
|
import { StatTile } from "@/components/crapp/ui-bits";
|
|
import { Reveal } from "@/components/motion/Reveal";
|
|
import { Barra } from "@/components/motion/Barra";
|
|
import { Numero } from "@/components/motion/Numero";
|
|
import { BadgeDrawer } from "@/components/crapp/BadgeDrawer";
|
|
import {
|
|
badgeDefs,
|
|
badgeGiocatore,
|
|
badgeSegretiSbloccati,
|
|
descrizioneSoglie,
|
|
gradiOrdine,
|
|
gradoMeta,
|
|
gradoRaggiunto,
|
|
collezioneBadge,
|
|
} from "@/lib/badges";
|
|
|
|
function RuoloBadge({ ruolo }: { ruolo: string }) {
|
|
return (
|
|
<span className="inline-flex items-center rounded-full bg-accent px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-accent-foreground">
|
|
{ruolo}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export const Route = createFileRoute("/squadra")({
|
|
head: () => ({
|
|
meta: [
|
|
{ title: "Squadra CRAP Volley — CrAPP" },
|
|
{
|
|
name: "description",
|
|
content:
|
|
"Rosa completa del CRAP Volley: giocatori, dati anagrafici, statistiche stagionali e badge sbloccati.",
|
|
},
|
|
{ property: "og:title", content: "Squadra CRAP Volley — CrAPP" },
|
|
{
|
|
property: "og:description",
|
|
content: "Tutti i giocatori della rosa con dati, statistiche e obiettivi raggiunti.",
|
|
},
|
|
],
|
|
}),
|
|
component: Squadra,
|
|
});
|
|
|
|
const criteri = [
|
|
{ id: "presenze", label: "Presenze" },
|
|
{ id: "mediaVoto", label: "Media voto" },
|
|
{ id: "mvp", label: "MVP" },
|
|
{ id: "palloni", label: "Palloni" },
|
|
{ id: "cacchePartita", label: "Cacche" },
|
|
] as const;
|
|
|
|
type Criterio = (typeof criteri)[number]["id"];
|
|
|
|
function valore(
|
|
g: { presenze: number; mediaVoto: number; mvp: number; palloni: number; cacchePartita: number },
|
|
c: Criterio,
|
|
) {
|
|
return g[c] ?? 0;
|
|
}
|
|
|
|
function Squadra() {
|
|
const rosa = useRosa();
|
|
const mese = usePresenzeUltimoMeseTutti();
|
|
const scoutMatches = useScoutMatches();
|
|
const { voti: pagelle } = usePagelle();
|
|
const [aperto, setAperto] = useState<string | null>(null);
|
|
const [criterio, setCriterio] = useState<Criterio>("presenze");
|
|
const obiettivi = useObiettivi();
|
|
const team = totaliSquadra(scoutMatches);
|
|
const mediaPresenze = rosa.length
|
|
? Math.round(
|
|
(rosa.reduce((s, g) => s + g.presenze / (g.totaliEventi || 1), 0) / rosa.length) * 100,
|
|
)
|
|
: 0;
|
|
const ordinati = [...rosa].sort((a, b) => valore(b, criterio) - valore(a, criterio));
|
|
const max = ordinati[0] ? valore(ordinati[0], criterio) || 1 : 1;
|
|
const { data: csi } = useCsi();
|
|
const matchGiocati = csi ? partiteGiocate(csi.partite).length : scoutMatches.length;
|
|
const completati = obiettivi.filter((o) => progressoObiettivo(o) >= 100).length;
|
|
const mediaObiettivi = obiettivi.length
|
|
? Math.round(obiettivi.reduce((s, o) => s + progressoObiettivo(o), 0) / obiettivi.length)
|
|
: 0;
|
|
|
|
return (
|
|
<>
|
|
<PageHeader titolo="Squadra" sottotitolo={`${rosa.length} giocatori · Stagione 2026/27`} />
|
|
|
|
<BarraSottosezioni
|
|
defaultId="rosa"
|
|
voci={[
|
|
{
|
|
id: "rosa",
|
|
label: "Rosa",
|
|
contenuto: (
|
|
<div className="space-y-2">
|
|
{rosa.map((g) => {
|
|
const stati = badgeGiocatore(g);
|
|
const sbloccati = [
|
|
...stati.filter((b) => b.grado !== null),
|
|
...badgeSegretiSbloccati(g),
|
|
];
|
|
const isOpen = aperto === g.id;
|
|
return (
|
|
<article key={g.id} className="overflow-hidden rounded-3xl bg-card shadow-card">
|
|
<button
|
|
type="button"
|
|
onClick={() => setAperto(isOpen ? null : g.id)}
|
|
className="flex min-h-11 w-full items-center gap-3 p-3 text-left active:scale-[0.99]"
|
|
aria-expanded={isOpen}
|
|
>
|
|
<Avatar
|
|
id={g.id}
|
|
fallback={g.numero ? String(g.numero) : g.iniziali}
|
|
className="h-11 w-11 text-lg"
|
|
/>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate text-sm font-bold leading-tight">
|
|
{g.nome}
|
|
</span>
|
|
<span className="mt-1 flex items-center gap-2">
|
|
<RuoloBadge ruolo={g.ruolo} />
|
|
<span className="text-xs text-muted-foreground">
|
|
{g.numero ? `#${g.numero}` : "n° da definire"}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
{sbloccati.length > 0 ? (
|
|
<span className="flex max-w-[74px] shrink-0 flex-wrap items-center justify-end gap-0.5">
|
|
{sbloccati.map((b) => {
|
|
const Icon = b.def.icon;
|
|
return (
|
|
<span
|
|
key={b.def.id}
|
|
title={`${b.def.nome} — ${gradoMeta[b.grado!].label}`}
|
|
>
|
|
<Icon
|
|
className={cn("h-3.5 w-3.5", gradoMeta[b.grado!].text)}
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="sr-only">
|
|
{b.def.nome}: {gradoMeta[b.grado!].label}
|
|
</span>
|
|
</span>
|
|
);
|
|
})}
|
|
</span>
|
|
) : null}
|
|
<ChevronDown
|
|
className={cn(
|
|
"h-4 w-4 shrink-0 text-muted-foreground transition-transform",
|
|
isOpen && "rotate-180",
|
|
)}
|
|
/>
|
|
</button>
|
|
|
|
{isOpen ? (
|
|
<div className="border-t border-border px-4 pb-4 pt-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
<Cake className="h-3.5 w-3.5" /> {formatData(g.nascita)}{" "}
|
|
{g.nascita.slice(0, 4)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-3 grid grid-cols-3 gap-2">
|
|
{[
|
|
{ l: "Presenze", v: `${g.presenze}/${g.totaliEventi}` },
|
|
{ l: "Presenze 30gg", v: `${mese[g.id]?.percentuale ?? 0}%` },
|
|
{ l: "Presenze di fila", v: g.streak },
|
|
{ l: "Media voto", v: g.mediaVoto || "—" },
|
|
{ l: "MVP", v: g.mvp },
|
|
{ l: "Cacche/partita 💩", v: g.cacchePartita || "—" },
|
|
].map((s) => (
|
|
<div key={s.l} className="rounded-2xl bg-secondary p-2.5 text-center">
|
|
<p className="font-display text-xl leading-none">{s.v}</p>
|
|
<p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
|
|
{s.l}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground">
|
|
Badge sbloccati · {collezioneBadge(g).ottenuti}/
|
|
{collezioneBadge(g).totali}
|
|
</p>
|
|
{sbloccati.length === 0 ? (
|
|
<p className="mt-2 rounded-2xl bg-secondary/50 p-3 text-xs text-muted-foreground">
|
|
Nessun badge sbloccato per ora.
|
|
</p>
|
|
) : (
|
|
<div className="mt-2 grid grid-cols-2 gap-2">
|
|
{sbloccati.map((b) => {
|
|
const Icon = b.def.icon;
|
|
const meta = gradoMeta[b.grado!];
|
|
return (
|
|
<BadgeDrawer key={b.def.id} def={b.def} stato={b}>
|
|
<div
|
|
className={cn("rounded-2xl p-2.5 ring-1", meta.bg, meta.ring)}
|
|
>
|
|
<Icon className={cn("h-4 w-4", meta.text)} />
|
|
<p className="mt-1 text-xs font-bold leading-tight">
|
|
{b.def.nome}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{b.valore} {b.def.unita}
|
|
{b.prossimaSoglia
|
|
? ` · ${b.prossimaSoglia} per ${gradoMeta[b.prossimo!].label.toLowerCase()}`
|
|
: ""}
|
|
</p>
|
|
<p
|
|
className={cn(
|
|
"mt-1.5 text-xs font-bold uppercase",
|
|
meta.text,
|
|
)}
|
|
>
|
|
{meta.label}
|
|
</p>
|
|
</div>
|
|
</BadgeDrawer>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "stats",
|
|
label: "Statistiche",
|
|
contenuto: (
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<StatTile valore={`${mediaPresenze}%`} label="Media presenze" />
|
|
<StatTile valore={matchGiocati} label="Match giocati" />
|
|
<StatTile valore={mediaSquadra(pagelle) || "—"} label="Media pagelle" />
|
|
<StatTile valore={team.punti} label="Punti squadra" />
|
|
<StatTile valore={team.ace} label="Ace squadra" />
|
|
<StatTile valore={team.muri} label="Muri squadra" />
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "classifica-giocatori",
|
|
label: "Classifica",
|
|
contenuto: (
|
|
<>
|
|
<div className="mb-3 flex flex-nowrap gap-1.5">
|
|
{criteri.map((c) => (
|
|
<button
|
|
key={c.id}
|
|
type="button"
|
|
onClick={() => setCriterio(c.id)}
|
|
aria-pressed={criterio === c.id}
|
|
className={cn(
|
|
"min-h-11 min-w-0 flex-1 truncate rounded-full px-1.5 text-center text-xs font-bold uppercase transition-colors",
|
|
criterio === c.id
|
|
? "bg-accent text-accent-foreground shadow-pop"
|
|
: "bg-secondary text-muted-foreground",
|
|
)}
|
|
>
|
|
{c.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="space-y-2">
|
|
{ordinati.map((g, i) => (
|
|
<div key={g.id} className="rounded-2xl bg-card p-3 shadow-card">
|
|
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-secondary font-display text-base">
|
|
{i + 1}
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-bold">
|
|
{g.nome}
|
|
{i === 0 ? (
|
|
<Crown className="ml-1 inline h-3.5 w-3.5 text-warning" />
|
|
) : null}
|
|
</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
#{g.numero} · {g.ruolo} · {g.streak} presenze consecutive
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className="font-display text-xl tabular-nums">
|
|
{valore(g, criterio) || "—"}
|
|
</span>
|
|
</div>
|
|
<Barra
|
|
percentuale={Math.max(6, (valore(g, criterio) / max) * 100)}
|
|
altezza="h-1.5"
|
|
trackClassName="mt-2"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "obiettivi",
|
|
label: "Obiettivi",
|
|
contenuto: (
|
|
<>
|
|
<div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
|
|
<div className="flex items-end justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
|
|
Progresso collettivo
|
|
</p>
|
|
<p className="font-display text-4xl leading-none">
|
|
<Numero valore={mediaObiettivi} suffisso="%" />
|
|
</p>
|
|
</div>
|
|
<p className="text-xs text-primary-foreground/70">
|
|
{completati}/{obiettivi.length} completati
|
|
</p>
|
|
</div>
|
|
<Barra
|
|
percentuale={mediaObiettivi}
|
|
trackClassName="mt-3 bg-primary-foreground/15"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{obiettivi.map((o, i) => {
|
|
const pct = progressoObiettivo(o);
|
|
const fatto = pct >= 100;
|
|
return (
|
|
<Reveal
|
|
key={o.id}
|
|
indice={i}
|
|
className={cn(
|
|
"premi rounded-3xl bg-card p-4 shadow-card ring-1",
|
|
fatto
|
|
? "ring-success/40"
|
|
: pct >= 90
|
|
? "ring-accent/40"
|
|
: "ring-transparent",
|
|
)}
|
|
>
|
|
<div className="flex items-start gap-2">
|
|
<span className="text-lg leading-none">{o.emoji}</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-bold leading-tight">{o.titolo}</p>
|
|
<p className="text-xs text-muted-foreground">{o.descrizione}</p>
|
|
</div>
|
|
<span
|
|
className={cn(
|
|
"rounded-full px-2 py-0.5 text-xs font-bold uppercase tracking-wide",
|
|
fatto
|
|
? "bg-success text-success-foreground"
|
|
: "bg-secondary text-muted-foreground",
|
|
)}
|
|
>
|
|
{fatto ? "Completato" : `${pct}%`}
|
|
</span>
|
|
</div>
|
|
<Barra percentuale={pct} trackClassName="mt-3" />
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{o.valore}/{o.target} {o.unita} · {pct}%
|
|
{o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
|
|
</p>
|
|
<p className="mt-1 text-xs font-semibold text-accent">
|
|
{microcopyObiettivo(o)}
|
|
</p>
|
|
<p className="mt-0.5 text-xs text-muted-foreground">{o.impatto}</p>
|
|
</Reveal>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "badge",
|
|
label: "Badge",
|
|
contenuto: (
|
|
<div className="space-y-2">
|
|
{badgeDefs.map((b) => {
|
|
const Icon = b.icon;
|
|
return (
|
|
<BadgeDrawer key={b.id} def={b}>
|
|
<div className="rounded-3xl bg-card p-3 shadow-card">
|
|
<div className="flex items-center gap-2">
|
|
<Icon className="h-5 w-5 text-accent" />
|
|
<p className="text-sm font-bold leading-tight">{b.nome}</p>
|
|
<p className="ml-auto text-xs text-muted-foreground">
|
|
{descrizioneSoglie(b)}
|
|
</p>
|
|
</div>
|
|
<div className="mt-2 grid grid-cols-3 gap-1.5">
|
|
{gradiOrdine.map((grado) => {
|
|
const meta = gradoMeta[grado];
|
|
const quanti = rosa.filter((g) => {
|
|
const raggiunto = gradoRaggiunto(b, b.valore(g));
|
|
return raggiunto
|
|
? gradiOrdine.indexOf(raggiunto) >= gradiOrdine.indexOf(grado)
|
|
: false;
|
|
}).length;
|
|
return (
|
|
<div
|
|
key={grado}
|
|
className={cn(
|
|
"rounded-2xl p-2 text-center ring-1",
|
|
meta.bg,
|
|
meta.ring,
|
|
)}
|
|
>
|
|
<p className={cn("text-xs font-bold uppercase", meta.text)}>
|
|
{meta.label}
|
|
</p>
|
|
<p className="font-display text-lg leading-none">
|
|
{b.soglie[grado]}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{quanti}/{rosa.length}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</BadgeDrawer>
|
|
);
|
|
})}
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
}
|