davideandClaude Opus 5
5c49294ad1
`rounded-3xl bg-card p-4 shadow-card` era ricopiato a mano 22 volte: cambiare raggio od ombra voleva dire toccare venti file. `Card` in `ui-bits.tsx` è ora l'unica definizione delle superfici, con la gerarchia dei raggi scritta invece che implicita (contenitore 3xl, elemento interno 2xl, controllo full). Tocco e tastiera: - i chip presenza di `EventoCard` erano alti ~28 px ed è il controllo più toccato dell'app: ora `min-h-11`, con 8 px di spazio fra l'uno e l'altro; - stessa cura per il link «Apri partita», la chiusura di `CelebrazioneBadge` e il titolo di `SezioneTendina`; - `aria-pressed` sui controlli a stato, `aria-controls` sulle tendine (che avevano `aria-expanded` senza il pannello a cui si riferisce), `aria-busy` sui caricamenti; - `BottomNav`: lo stato attivo era comunicato solo dal colore. Ora cambia anche il peso del testo, compare una barretta sopra l'icona e c'è `aria-current="page"`. La voce «Home» diventa «Oggi», che dice cosa contiene. La barra è un materiale traslucido con bordo sfumato al posto della riga netta. - `Barra` espone `role="progressbar"` con i valori. Il testo sotto i 12 px è sparito (108 occorrenze fra `text-[9px]`, `text-[10px]` e `text-[11px]`): sotto quella soglia la leggibilità cala e su iOS non scala con Dynamic Type. La gerarchia la fanno peso e maiuscolo. `Avatar` aveva `alt="Foto di 12"` quando il fallback è il numero di maglia — non descrive niente e il nome è già scritto accanto, quindi alt vuoto. Aggiunti `width`/`height` per non far saltare il layout al caricamento. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
import { Flame } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Card } from "@/components/crapp/ui-bits";
|
|
import type { Giocatore } from "@/lib/crapp-data";
|
|
import { serieGiocatore, serieMigliore } from "@/lib/serie";
|
|
import { Barra } from "@/components/motion/Barra";
|
|
import { Reveal } from "@/components/motion/Reveal";
|
|
|
|
/** Griglia completa delle serie di presenza (profilo). */
|
|
export function SerieGriglia({ g }: { g: Giocatore }) {
|
|
const serie = serieGiocatore(g);
|
|
return (
|
|
<div className="space-y-2">
|
|
{serie.map((s, i) => {
|
|
const Icon = s.def.icon;
|
|
const attiva = s.valore > 0;
|
|
return (
|
|
<Reveal key={s.def.tipo} indice={i} className="premi rounded-3xl bg-card p-4 shadow-card">
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className={cn(
|
|
"grid h-10 w-10 shrink-0 place-items-center rounded-2xl",
|
|
attiva
|
|
? "bg-accent-grad text-accent-foreground"
|
|
: "bg-secondary text-muted-foreground",
|
|
)}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-bold leading-tight">{s.def.label}</p>
|
|
<p className="text-xs text-muted-foreground">{s.def.descrizione}</p>
|
|
</div>
|
|
<span className="inline-flex items-center gap-1 font-display text-2xl leading-none">
|
|
<Flame
|
|
className={cn("h-4 w-4", attiva ? "text-accent" : "text-muted-foreground/40")}
|
|
/>
|
|
{s.valore}
|
|
</span>
|
|
</div>
|
|
<Barra percentuale={s.progresso} trackClassName="mt-3" />
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{s.prossimo ? `${s.valore}/${s.prossimo} · ` : ""}
|
|
{s.messaggio}
|
|
</p>
|
|
</Reveal>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Riepilogo compatto per la home. */
|
|
export function SerieHome({ g }: { g: Giocatore }) {
|
|
const top = serieMigliore(g);
|
|
const Icon = top.def.icon;
|
|
return (
|
|
<Card>
|
|
<div className="flex items-center gap-3">
|
|
<span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-accent-grad text-accent-foreground">
|
|
<Icon className="h-5 w-5" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-bold leading-tight">
|
|
Serie {top.def.label.toLowerCase()}: {top.valore}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">{top.messaggio}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 grid grid-cols-3 gap-2">
|
|
{serieGiocatore(g).map((s) => (
|
|
<div key={s.def.tipo} className="rounded-2xl bg-secondary p-2 text-center">
|
|
<p className="font-display text-xl leading-none">{s.valore}</p>
|
|
<p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
|
|
{s.def.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|