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>
80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import { useEffect } from "react";
|
|
import { X } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useVotiSocial } from "@/lib/badge-social";
|
|
import { useNotificheSmart } from "@/lib/notifiche-smart";
|
|
import { useGiocatoreCorrente } from "@/lib/user-store";
|
|
import { coriandoli, useMotoRidotto } from "@/lib/motion";
|
|
|
|
const toni: Record<string, string> = {
|
|
badge: "ring-oro/50",
|
|
segreto: "ring-accent/60",
|
|
serie: "ring-accent/40",
|
|
squadra: "ring-info/50",
|
|
social: "ring-success/50",
|
|
};
|
|
|
|
/** Focus card celebrativa: compare una sola volta per traguardo. */
|
|
export function CelebrazioneBadge() {
|
|
const io = useGiocatoreCorrente();
|
|
const voti = useVotiSocial();
|
|
const { notifica, restanti, chiudi } = useNotificheSmart(io, voti.data ?? []);
|
|
const ridotto = useMotoRidotto();
|
|
const chiave = notifica?.id ?? notifica?.titolo ?? null;
|
|
const infermeria = notifica?.id === "segreto:s-infermeria";
|
|
const ritardi = notifica?.id === "segreto:s-ritardi";
|
|
|
|
useEffect(() => {
|
|
if (!chiave) return;
|
|
void coriandoli(ridotto);
|
|
}, [chiave, ridotto]);
|
|
|
|
if (!notifica) return null;
|
|
|
|
return (
|
|
<div className="anim-reveal fixed inset-0 z-50 grid place-items-end bg-foreground/40 p-4 pb-28 backdrop-blur-sm">
|
|
<div
|
|
className={cn(
|
|
"anim-pop w-full max-w-md rounded-3xl bg-card p-5 shadow-pop ring-2",
|
|
toni[notifica.tono] ?? "ring-accent/40",
|
|
)}
|
|
role="status"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<span
|
|
className={cn(
|
|
"grid h-14 w-14 shrink-0 place-items-center rounded-2xl bg-accent-grad text-3xl",
|
|
infermeria && !ridotto && "anim-battito",
|
|
ritardi && !ridotto && "anim-oscilla",
|
|
)}
|
|
>
|
|
{notifica.emoji}
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-xs font-bold uppercase tracking-wide text-accent">
|
|
{notifica.tono === "segreto" ? "Badge segreto sbloccato" : "Traguardo raggiunto"}
|
|
</p>
|
|
<p className="mt-0.5 font-display text-2xl leading-none">{notifica.titolo}</p>
|
|
<p className="mt-1.5 text-sm text-muted-foreground">{notifica.testo}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={chiudi}
|
|
aria-label="Chiudi"
|
|
className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-secondary text-muted-foreground"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={chiudi}
|
|
className="mt-4 w-full rounded-2xl bg-accent-grad px-4 py-3 text-sm font-bold uppercase tracking-wide text-accent-foreground"
|
|
>
|
|
{restanti > 0 ? `Avanti (${restanti})` : "Grande!"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|