style: apply prettier formatting across codebase
This commit is contained in:
jessy-david-dev
@@ -48,20 +48,29 @@ export function PublicProfileScreen({
|
||||
useEffect(() => {
|
||||
fetch(`/api/users/${userId}`)
|
||||
.then((r) => {
|
||||
if (r.status === 404) { setNotFound(true); return null; }
|
||||
if (r.status === 404) {
|
||||
setNotFound(true);
|
||||
return null;
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then((d) => { if (d) setProfile(d); })
|
||||
.then((d) => {
|
||||
if (d) setProfile(d);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [userId]);
|
||||
|
||||
const statCard = "bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-3 sm:p-3.5 text-center flex flex-col gap-1";
|
||||
const btnGhost = "min-h-9 px-3 rounded-lg text-xs sm:text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors";
|
||||
const statCard =
|
||||
"bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-3 sm:p-3.5 text-center flex flex-col gap-1";
|
||||
const btnGhost =
|
||||
"min-h-9 px-3 rounded-lg text-xs sm:text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors";
|
||||
|
||||
return (
|
||||
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col max-w-2xl mx-auto px-4 pb-10">
|
||||
<div className="flex items-center gap-3 py-4">
|
||||
<button className={btnGhost} onClick={onBack}>← Retour</button>
|
||||
<button className={btnGhost} onClick={onBack}>
|
||||
← Retour
|
||||
</button>
|
||||
{profile && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-[#7c3aed] text-white flex items-center justify-center text-base sm:text-lg font-bold shrink-0">
|
||||
@@ -70,64 +79,109 @@ export function PublicProfileScreen({
|
||||
<div>
|
||||
<h2 className="text-base sm:text-xl font-bold">{profile.name}</h2>
|
||||
<p className="text-[10px] text-[#555]">
|
||||
Membre depuis {new Date(profile.createdAt).toLocaleDateString("fr-FR", { month: "long", year: "numeric" })}
|
||||
Membre depuis{" "}
|
||||
{new Date(profile.createdAt).toLocaleDateString("fr-FR", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading && <div className="text-[#888] text-sm py-10 text-center animate-pulse">Chargement...</div>}
|
||||
{notFound && <p className="text-[#888] text-sm py-10 text-center">Joueur introuvable.</p>}
|
||||
{loading && (
|
||||
<div className="text-[#888] text-sm py-10 text-center animate-pulse">
|
||||
Chargement...
|
||||
</div>
|
||||
)}
|
||||
{notFound && (
|
||||
<p className="text-[#888] text-sm py-10 text-center">
|
||||
Joueur introuvable.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{profile && (
|
||||
<div className="flex flex-col gap-5">
|
||||
{/* Stats principales */}
|
||||
<div className="grid grid-cols-3 gap-2 sm:gap-2.5">
|
||||
<div className={statCard}>
|
||||
<span className="text-lg sm:text-[22px] font-black">{profile.stats.total}</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Parties</span>
|
||||
<span className="text-lg sm:text-[22px] font-black">
|
||||
{profile.stats.total}
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">
|
||||
Parties
|
||||
</span>
|
||||
</div>
|
||||
<div className={statCard}>
|
||||
<span className="text-lg sm:text-[22px] font-black">{profile.stats.wins}</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Victoires</span>
|
||||
<span className="text-lg sm:text-[22px] font-black">
|
||||
{profile.stats.wins}
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">
|
||||
Victoires
|
||||
</span>
|
||||
</div>
|
||||
<div className={statCard}>
|
||||
<span className="text-lg sm:text-[22px] font-black">{profile.stats.winRate}%</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Win rate</span>
|
||||
<span className="text-lg sm:text-[22px] font-black">
|
||||
{profile.stats.winRate}%
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">
|
||||
Win rate
|
||||
</span>
|
||||
</div>
|
||||
<div className={statCard}>
|
||||
<span className="text-lg sm:text-[22px] font-black">
|
||||
{profile.stats.avgClicks ?? "-"}
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Clics moy.</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">
|
||||
Clics moy.
|
||||
</span>
|
||||
</div>
|
||||
<div className={`${statCard} border-[#7c3aed]`}>
|
||||
<span className="text-lg sm:text-[22px] font-black text-[#7c3aed]">
|
||||
{profile.stats.bestClicks ?? "-"}
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Meilleur clics</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">
|
||||
Meilleur clics
|
||||
</span>
|
||||
</div>
|
||||
<div className={`${statCard} border-[#7c3aed]`}>
|
||||
<span className="text-lg sm:text-[22px] font-black text-[#7c3aed]">
|
||||
{profile.stats.bestTime ? fmt(profile.stats.bestTime) : "-"}
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Meilleur temps</span>
|
||||
<span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">
|
||||
Meilleur temps
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats par mode */}
|
||||
<div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-4 flex flex-col gap-2">
|
||||
<h3 className="text-[10px] font-bold text-[#555] uppercase tracking-widest mb-1">Par mode</h3>
|
||||
<h3 className="text-[10px] font-bold text-[#555] uppercase tracking-widest mb-1">
|
||||
Par mode
|
||||
</h3>
|
||||
{(["solo", "multi", "daily", "blitz"] as const).map((m) => {
|
||||
const s = profile.stats[m];
|
||||
if (s.games === 0) return null;
|
||||
return (
|
||||
<div key={m} className="flex items-center justify-between text-sm py-1.5 border-b border-[#2e2e2e] last:border-0">
|
||||
<span className="font-semibold text-[#f0f0f0]">{MODE_LABELS[m]}</span>
|
||||
<div
|
||||
key={m}
|
||||
className="flex items-center justify-between text-sm py-1.5 border-b border-[#2e2e2e] last:border-0"
|
||||
>
|
||||
<span className="font-semibold text-[#f0f0f0]">
|
||||
{MODE_LABELS[m]}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 text-[#888] text-xs">
|
||||
<span><span className="text-[#f0f0f0] font-bold">{s.wins}</span> victoires</span>
|
||||
<span><span className="text-[#f0f0f0] font-bold">{s.games}</span> parties</span>
|
||||
<span>
|
||||
<span className="text-[#f0f0f0] font-bold">{s.wins}</span>{" "}
|
||||
victoires
|
||||
</span>
|
||||
<span>
|
||||
<span className="text-[#f0f0f0] font-bold">
|
||||
{s.games}
|
||||
</span>{" "}
|
||||
parties
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user