Jessy/WikiRush
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(responsive): full mobile-first pass on all screens, fix join button layout

Browse Source
This commit is contained in:
jessy-david-dev
2026-04-10 19:04:52 +02:00
parent b15418e949
commit 02dd3869d3
6 changed files with 223 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/GameScreen.tsx
+39 -40
View File
@@ -36,49 +36,48 @@ export function GameScreen({
breadcrumbEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }); breadcrumbEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" });
}, [history]); }, [history]);
const btnPrimary = "w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] cursor-pointer transition-colors";
const btnGhost = "w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors";
// Results // Results
if (room.phase === "results") return ( if (room.phase === "results") return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex items-center justify-center px-4 py-6"> <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex items-center justify-center px-4 py-8">
<div className="w-full max-w-105 flex flex-col gap-6"> <div className="w-full max-w-sm sm:max-w-md flex flex-col gap-5 sm:gap-6">
<div className="text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-6"> <div className="text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 sm:p-6">
{winner ? ( {winner ? (
<> <>
<div className="text-5xl mb-2">🏆</div> <div className="text-4xl sm:text-5xl mb-2">🏆</div>
<div className="text-lg font-bold">{winner.name} a gagné la manche !</div> <div className="text-base sm:text-lg font-bold">{winner.name} a gagné la manche !</div>
</> </>
) : ( ) : (
<div className="text-lg font-bold">Manche terminée !</div> <div className="text-base sm:text-lg font-bold">Manche terminée !</div>
)} )}
</div> </div>
<div className="text-center text-sm text-[#888]"> <div className="text-center text-xs sm:text-sm text-[#888]">
<span className="text-[#f0f0f0]">{room.startArticle}</span> <span className="text-[#f0f0f0]">{room.startArticle}</span>
<span className="mx-2">→</span> <span className="mx-2">→</span>
<span className="text-[#7c3aed] font-bold">{room.targetArticle}</span> <span className="text-[#7c3aed] font-bold">{room.targetArticle}</span>
</div> </div>
<div> <div>
<h3 className="text-xs font-bold text-[#888] uppercase tracking-wider mb-3">Classement</h3> <h3 className="text-[10px] sm:text-xs font-bold text-[#888] uppercase tracking-wider mb-3">Classement</h3>
<ul className="flex flex-col gap-2"> <ul className="flex flex-col gap-2">
{sortedPlayers.map((p, i) => ( {sortedPlayers.map((p, i) => (
<li key={p.id} className={`flex items-center gap-2.5 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}> <li key={p.id} className={`flex items-center gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}>
<span className="text-sm font-bold text-[#888] min-w-7">#{i + 1}</span> <span className="text-xs sm:text-sm font-bold text-[#888] min-w-6 sm:min-w-7">#{i + 1}</span>
<span className="flex-1 font-semibold text-sm">{p.name}</span> <span className="flex-1 font-semibold text-sm truncate">{p.name}</span>
{p.hasWon && <span className="text-[11px] font-bold px-2 py-0.5 rounded-full bg-green-900/40 text-green-300 uppercase tracking-wide">Gagnant</span>} {p.hasWon && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-green-900/40 text-green-300 uppercase tracking-wide shrink-0">Gagnant</span>}
<span className="font-bold text-[#7c3aed] text-sm">{p.score} pts</span> <span className="font-bold text-[#7c3aed] text-sm shrink-0">{p.score} pts</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
{isHost ? ( {isHost ? (
<div className="flex flex-col gap-2.5"> <div className="flex flex-col gap-2.5">
<button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] cursor-pointer" onClick={onNextRound}> <button className={btnPrimary} onClick={onNextRound}>Manche suivante</button>
Manche suivante <button className={btnGhost} onClick={onResetGame}>Nouvelle partie</button>
</button>
<button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onResetGame}>
Nouvelle partie
</button>
</div> </div>
) : ( ) : (
<p className="text-sm text-[#888] text-center animate-pulse-slow">En attente de l&apos;hôte...</p> <p className="text-xs sm:text-sm text-[#888] text-center animate-pulse-slow">En attente de l&apos;hôte...</p>
)} )}
</div> </div>
</div> </div>
@@ -86,20 +85,20 @@ export function GameScreen({
// Countdown // Countdown
if (room.phase === "countdown") return ( if (room.phase === "countdown") return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] flex items-center justify-center"> <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] flex items-center justify-center px-4">
<div className="text-center px-6"> <div className="text-center">
<div className="flex items-center justify-center gap-10 flex-wrap mb-12"> <div className="flex items-center justify-center gap-6 sm:gap-10 flex-col sm:flex-row mb-10 sm:mb-12">
<div className="flex flex-col items-center gap-1 max-w-48"> <div className="flex flex-col items-center gap-1 max-w-48">
<span className="text-[11px] text-[#888] uppercase tracking-wider">Départ</span> <span className="text-[10px] sm:text-[11px] text-[#888] uppercase tracking-wider">Départ</span>
<span className="text-lg font-bold text-center">{room.startArticle}</span> <span className="text-base sm:text-lg font-bold text-center">{room.startArticle}</span>
</div> </div>
<span className="text-2xl text-[#888]">→</span> <span className="text-xl sm:text-2xl text-[#888] rotate-90 sm:rotate-0">→</span>
<div className="flex flex-col items-center gap-1 max-w-48"> <div className="flex flex-col items-center gap-1 max-w-48">
<span className="text-[11px] text-[#888] uppercase tracking-wider">Cible</span> <span className="text-[10px] sm:text-[11px] text-[#888] uppercase tracking-wider">Cible</span>
<span className="text-xl font-bold text-[#7c3aed] text-center">{room.targetArticle}</span> <span className="text-lg sm:text-xl font-bold text-[#7c3aed] text-center">{room.targetArticle}</span>
</div> </div>
</div> </div>
<div className="text-[clamp(80px,20vw,140px)] font-black leading-none text-[#7c3aed] animate-count-pop"> <div className="text-[clamp(72px,20vw,140px)] font-black leading-none text-[#7c3aed] animate-count-pop">
{countdown !== null && countdown > 0 ? countdown : "Partez !"} {countdown !== null && countdown > 0 ? countdown : "Partez !"}
</div> </div>
</div> </div>
@@ -110,22 +109,22 @@ export function GameScreen({
return ( return (
<div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col"> <div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col">
{/* Topbar */} {/* Topbar */}
<div className="sticky top-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-b border-[#2e2e2e] flex items-center gap-3 px-3.5 py-2"> <div className="sticky top-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-b border-[#2e2e2e] flex items-center gap-2 sm:gap-3 px-3 sm:px-3.5 py-2">
<div className="flex-1 min-w-0 flex flex-col gap-1"> <div className="flex-1 min-w-0 flex flex-col gap-0.5 sm:gap-1">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<span className="text-[10px] font-bold uppercase tracking-wider text-[#888] shrink-0">Cible</span> <span className="text-[9px] sm:text-[10px] font-bold uppercase tracking-wider text-[#888] shrink-0">Cible</span>
<span className="text-xs font-bold text-[#7c3aed] truncate">{room.targetArticle}</span> <span className="text-xs font-bold text-[#7c3aed] truncate">{room.targetArticle}</span>
</div> </div>
<Breadcrumbs history={history} endRef={breadcrumbEndRef} /> <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
</div> </div>
<div className="flex gap-3 shrink-0 text-xs font-bold text-[#888] tabular-nums"> <div className="flex gap-2 sm:gap-3 shrink-0 text-[10px] sm:text-xs font-bold text-[#888] tabular-nums">
<span>{elapsed}</span> <span>{elapsed}</span>
<span>{clicks} clics</span> <span>{clicks} clics</span>
<span>{myPlayer?.score ?? 0} pts</span> <span className="hidden sm:inline">{myPlayer?.score ?? 0} pts</span>
</div> </div>
</div> </div>
{/* Content + sidebar */} {/* Content */}
<div className="flex flex-1 min-h-0"> <div className="flex flex-1 min-h-0">
<div className="flex-1 overflow-y-auto bg-white"> <div className="flex-1 overflow-y-auto bg-white">
{loading && ( {loading && (
@@ -135,7 +134,7 @@ export function GameScreen({
)} )}
{loadError && ( {loadError && (
<div className="flex flex-col items-center gap-4 py-10 px-4 text-center"> <div className="flex flex-col items-center gap-4 py-10 px-4 text-center">
<p className="text-[#888]">{loadError}</p> <p className="text-[#888] text-sm">{loadError}</p>
<button className="min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] cursor-pointer" onClick={onRetry}> <button className="min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] cursor-pointer" onClick={onRetry}>
Réessayer Réessayer
</button> </button>
@@ -149,15 +148,15 @@ export function GameScreen({
)} )}
</div> </div>
{/* Sidebar joueurs */} {/* Sidebar — desktop seulement */}
<aside className="hidden sm:flex w-40 shrink-0 bg-[#1a1a1a] border-l border-[#2e2e2e] flex-col px-3 py-4 overflow-y-auto gap-3"> <aside className="hidden md:flex w-36 lg:w-44 shrink-0 bg-[#1a1a1a] border-l border-[#2e2e2e] flex-col px-3 py-4 overflow-y-auto gap-3">
<h4 className="text-[11px] font-bold uppercase tracking-wider text-[#888]">Joueurs</h4> <h4 className="text-[10px] font-bold uppercase tracking-wider text-[#888]">Joueurs</h4>
<ul className="flex flex-col gap-2.5"> <ul className="flex flex-col gap-2.5">
{sortedPlayers.map((p) => ( {sortedPlayers.map((p) => (
<li key={p.id} className="flex flex-col gap-0.5"> <li key={p.id} className="flex flex-col gap-0.5">
<span className={`text-xs font-semibold truncate ${p.id === playerId ? "text-[#7c3aed]" : "text-[#f0f0f0]"}`}>{p.name}</span> <span className={`text-xs font-semibold truncate ${p.id === playerId ? "text-[#7c3aed]" : "text-[#f0f0f0]"}`}>{p.name}</span>
<span className="text-xs text-[#888]">{p.score} pts</span> <span className="text-xs text-[#888]">{p.score} pts</span>
{p.hasWon && <span className="text-[11px] text-green-400 font-bold">Gagné !</span>} {p.hasWon && <span className="text-[10px] text-green-400 font-bold">Gagné !</span>}
</li> </li>
))} ))}
</ul> </ul>
app/components/HomeScreen.tsx
+37 -48
View File
@@ -25,85 +25,75 @@ export function HomeScreen({
error, setError, loading, onCreateRoom, onJoinRoom, onSolo, error, setError, loading, onCreateRoom, onJoinRoom, onSolo,
session, onShowAuth, onShowProfile, onShowLeaderboard, session, onShowAuth, onShowProfile, onShowLeaderboard,
}: HomeScreenProps) { }: HomeScreenProps) {
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 whitespace-nowrap";
return ( return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center justify-center px-4 py-6 gap-8"> <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center justify-center px-4 py-16 gap-6 sm:gap-8">
{/* Topbar */} {/* Topbar */}
<div className="absolute top-4 right-4 flex items-center gap-2"> <div className="fixed top-3 right-3 flex items-center gap-1.5 sm:gap-2 z-50">
<button <button className={btnGhost} onClick={onShowLeaderboard}>🏆 Classement</button>
className="text-sm font-semibold px-3 py-1.5 rounded-lg bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
onClick={onShowLeaderboard}
>
🏆 Classement
</button>
{session?.user ? ( {session?.user ? (
<button <button
className="flex items-center gap-2 bg-[#242424] border border-[#2e2e2e] rounded-full pl-1.5 pr-3 py-1.5 cursor-pointer hover:bg-[#1a1a1a] text-sm font-medium" className="flex items-center gap-1.5 sm:gap-2 bg-[#242424] border border-[#2e2e2e] rounded-full pl-1 pr-2.5 sm:pr-3 py-1 cursor-pointer hover:bg-[#1a1a1a]"
onClick={onShowProfile} onClick={onShowProfile}
> >
<span className="w-7 h-7 rounded-full bg-[#7c3aed] text-white flex items-center justify-center text-xs font-bold"> <span className="w-7 h-7 rounded-full bg-[#7c3aed] text-white flex items-center justify-center text-xs font-bold shrink-0">
{session.user.name?.[0]?.toUpperCase() ?? "?"} {session.user.name?.[0]?.toUpperCase() ?? "?"}
</span> </span>
<span className="max-w-[120px] truncate">{session.user.name}</span> <span className="hidden sm:block max-w-28 truncate text-sm font-medium">{session.user.name}</span>
</button> </button>
) : ( ) : (
<button <button className={btnGhost} onClick={onShowAuth}>Connexion</button>
className="text-sm font-semibold px-3 py-1.5 rounded-lg bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
onClick={onShowAuth}
>
Connexion / Inscription
</button>
)} )}
</div> </div>
{/* Hero */} {/* Hero */}
<div className="text-center"> <div className="text-center">
<Image src="/wikirush.png" alt="WikiRush" width={320} height={320} className="w-[clamp(200px,55vw,320px)] h-auto mx-auto mix-blend-screen" priority /> <Image
<p className="mt-3 text-[#888] text-sm max-w-[360px] mx-auto"> src="/wikirush.png" alt="WikiRush" width={320} height={320}
className="w-40 sm:w-56 md:w-72 h-auto mx-auto mix-blend-screen"
priority
/>
<p className="mt-2 text-[#888] text-xs sm:text-sm max-w-xs sm:max-w-sm mx-auto leading-relaxed">
Navigue entre les articles Wikipedia pour atteindre la cible en premier ! Navigue entre les articles Wikipedia pour atteindre la cible en premier !
</p> </p>
</div> </div>
{/* Form */} {/* Form */}
<div className="w-full max-w-[400px] flex flex-col gap-4"> <div className="w-full max-w-sm sm:max-w-md flex flex-col gap-3 sm:gap-4">
{error && ( {error && (
<div className="flex items-center justify-between gap-3 bg-red-950/40 border border-red-600 text-red-300 px-3 py-2.5 rounded-xl text-sm"> <div className="flex items-center justify-between gap-3 bg-red-950/40 border border-red-600 text-red-300 px-3 py-2.5 rounded-xl text-xs sm:text-sm">
{error} {error}
<button onClick={() => setError(null)} className="text-base px-1.5 py-0.5 rounded hover:bg-white/10 cursor-pointer">✕</button> <button onClick={() => setError(null)} className="shrink-0 px-1.5 py-0.5 rounded hover:bg-white/10 cursor-pointer">✕</button>
</div> </div>
)} )}
<input <input
className="w-full min-h-[44px] px-3.5 bg-[#1a1a1a] border-[1.5px] border-[#2e2e2e] rounded-xl text-[#f0f0f0] text-sm outline-none focus:border-[#7c3aed]" className="w-full min-h-11 px-3.5 bg-[#1a1a1a] border-[1.5px] border-[#2e2e2e] rounded-xl text-[#f0f0f0] text-sm outline-none focus:border-[#7c3aed] transition-colors"
type="text" type="text" placeholder="Ton pseudo"
placeholder="Ton pseudo" value={playerName} onChange={(e) => setPlayerName(e.target.value)}
value={playerName} maxLength={20} onKeyDown={(e) => e.key === "Enter" && onCreateRoom()}
onChange={(e) => setPlayerName(e.target.value)}
maxLength={20}
onKeyDown={(e) => e.key === "Enter" && onCreateRoom()}
/> />
<div className="flex flex-col gap-4">
{/* Multijoueur */} {/* Multijoueur */}
<div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 flex flex-col gap-3"> <div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-4 sm:p-5 flex flex-col gap-3">
<h3 className="text-xs font-bold text-[#888] uppercase tracking-wider">Multijoueur</h3> <h3 className="text-[10px] sm:text-xs font-bold text-[#888] uppercase tracking-wider">Multijoueur</h3>
<button <button
className="w-full min-h-[44px] px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer" className="w-full min-h-11 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer transition-colors"
onClick={onCreateRoom} disabled={loading} onClick={onCreateRoom} disabled={loading}
> >
{loading ? "Création..." : "Créer une partie"} {loading ? "Création..." : "Créer une partie"}
</button> </button>
<div className="flex gap-2.5 items-center"> {/* Join row — colonne sur mobile, ligne sur sm+ */}
<div className="flex flex-col sm:flex-row gap-2">
<input <input
className="flex-1 min-h-[44px] px-3.5 bg-[#0f0f0f] border-[1.5px] border-[#2e2e2e] rounded-xl text-[#f0f0f0] font-mono text-lg tracking-widest uppercase outline-none focus:border-[#7c3aed]" className="flex-1 min-h-11 px-3.5 bg-[#0f0f0f] border-[1.5px] border-[#2e2e2e] rounded-xl text-[#f0f0f0] font-mono text-base sm:text-lg tracking-widest uppercase outline-none focus:border-[#7c3aed] transition-colors"
type="text" type="text" placeholder="CODE (ex: WIKI)"
placeholder="CODE" value={joinCode} onChange={(e) => setJoinCode(e.target.value.toUpperCase().slice(0, 4))}
value={joinCode} maxLength={4} onKeyDown={(e) => e.key === "Enter" && onJoinRoom()}
onChange={(e) => setJoinCode(e.target.value.toUpperCase().slice(0, 4))}
maxLength={4}
onKeyDown={(e) => e.key === "Enter" && onJoinRoom()}
/> />
<button <button
className="min-h-[44px] px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] disabled:opacity-50 cursor-pointer flex-shrink-0" className="w-full sm:w-auto min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] disabled:opacity-50 cursor-pointer shrink-0 transition-colors"
onClick={onJoinRoom} disabled={loading} onClick={onJoinRoom} disabled={loading}
> >
Rejoindre Rejoindre
@@ -112,16 +102,16 @@ export function HomeScreen({
</div> </div>
{/* Divider */} {/* Divider */}
<div className="relative text-center text-[#888] text-xs"> <div className="relative text-center text-[#888] text-xs py-1">
<span className="relative z-10 px-3 bg-[#0f0f0f]">ou</span> <span className="relative z-10 px-3 bg-[#0f0f0f]">ou</span>
<div className="absolute inset-x-0 top-1/2 h-px bg-[#2e2e2e] -z-0" /> <div className="absolute inset-x-0 top-1/2 h-px bg-[#2e2e2e]" />
</div> </div>
{/* Solo */} {/* Solo */}
<div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 flex flex-col gap-3"> <div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-4 sm:p-5 flex flex-col gap-3">
<h3 className="text-xs font-bold text-[#888] uppercase tracking-wider">Solo</h3> <h3 className="text-[10px] sm:text-xs font-bold text-[#888] uppercase tracking-wider">Solo</h3>
<button <button
className="w-full min-h-[44px] px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" className="w-full min-h-11 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors"
onClick={onSolo} onClick={onSolo}
> >
Jouer en solo Jouer en solo
@@ -129,6 +119,5 @@ export function HomeScreen({
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }
app/components/LeaderboardScreen.tsx
+23 -28
View File
@@ -37,11 +37,7 @@ export function LeaderboardScreen({ onBack }: { onBack: () => void }) {
}, []); }, []);
const sorted = [...rows] const sorted = [...rows]
.filter((r) => { .filter((r) => mode === "solo" ? r.soloGames > 0 : mode === "multi" ? r.multiGames > 0 : true)
if (mode === "solo") return r.soloGames > 0;
if (mode === "multi") return r.multiGames > 0;
return true;
})
.sort((a, b) => { .sort((a, b) => {
if (mode === "solo") return b.soloWins - a.soloWins || b.soloGames - a.soloGames; if (mode === "solo") return b.soloWins - a.soloWins || b.soloGames - a.soloGames;
if (mode === "multi") return b.multiWins - a.multiWins || b.multiGames - a.multiGames; if (mode === "multi") return b.multiWins - a.multiWins || b.multiGames - a.multiGames;
@@ -49,24 +45,27 @@ export function LeaderboardScreen({ onBack }: { onBack: () => void }) {
}); });
return ( return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in max-w-160 mx-auto px-4 py-6 pb-12"> <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in max-w-2xl mx-auto px-4 py-5 sm:py-6 pb-12">
{/* Header */} {/* Header */}
<div className="flex items-center gap-4 mb-6"> <div className="flex items-center gap-3 sm:gap-4 mb-5 sm:mb-6">
<button className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onBack}> <button
className="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 shrink-0"
onClick={onBack}
>
Retour Retour
</button> </button>
<h2 className="text-2xl font-black">Classement</h2> <h2 className="text-xl sm:text-2xl font-black">Classement</h2>
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="flex gap-2 mb-5"> <div className="flex gap-2 mb-4 sm:mb-5">
{(["all", "solo", "multi"] as Mode[]).map((m) => ( {(["all", "solo", "multi"] as Mode[]).map((m) => (
<button <button
key={m} key={m}
className={`flex-1 py-2 rounded-xl text-xs font-semibold border cursor-pointer transition-colors ${mode === m ? "bg-[#7c3aed] border-[#7c3aed] text-white" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888] hover:text-[#f0f0f0]"}`} className={`flex-1 py-2 rounded-xl text-xs sm:text-sm font-semibold border cursor-pointer transition-colors ${mode === m ? "bg-[#7c3aed] border-[#7c3aed] text-white" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888] hover:text-[#f0f0f0]"}`}
onClick={() => setMode(m)} onClick={() => setMode(m)}
> >
{m === "all" ? "Global" : m === "solo" ? "Solo" : "Multijoueur"} {m === "all" ? "Global" : m === "solo" ? "Solo" : "Multi"}
</button> </button>
))} ))}
</div> </div>
@@ -74,38 +73,34 @@ export function LeaderboardScreen({ onBack }: { onBack: () => void }) {
{loading ? ( {loading ? (
<div className="flex justify-center py-12"><div className="spinner" /></div> <div className="flex justify-center py-12"><div className="spinner" /></div>
) : sorted.length === 0 ? ( ) : sorted.length === 0 ? (
<p className="text-[#888] text-center py-12">Aucune partie jouée pour le moment.</p> <p className="text-[#888] text-sm text-center py-12">Aucune partie jouée pour le moment.</p>
) : ( ) : (
<div className="flex flex-col gap-2.5"> <div className="flex flex-col gap-2 sm:gap-2.5">
{sorted.map((row, i) => { {sorted.map((row, i) => {
const games = mode === "solo" ? row.soloGames : mode === "multi" ? row.multiGames : row.totalGames; const games = mode === "solo" ? row.soloGames : mode === "multi" ? row.multiGames : row.totalGames;
const wins = mode === "solo" ? row.soloWins : mode === "multi" ? row.multiWins : row.wins; const wins = mode === "solo" ? row.soloWins : mode === "multi" ? row.multiWins : row.wins;
const isTop = i < 3;
return ( return (
<div <div key={row.id} className={`flex items-center gap-2.5 sm:gap-3 px-3.5 sm:px-4 py-3 sm:py-3.5 rounded-xl border ${i < 3 ? "border-[#7c3aed] bg-[#7c3aed]/8" : "border-[#2e2e2e] bg-[#1a1a1a]"}`}>
key={row.id} <span className="text-lg sm:text-xl w-7 sm:w-8 text-center shrink-0">{MEDALS[i] ?? `#${i + 1}`}</span>
className={`flex items-center gap-3 px-4 py-3.5 rounded-xl border ${isTop ? "border-[#7c3aed] bg-[#7c3aed]/8" : "border-[#2e2e2e] bg-[#1a1a1a]"}`} <span className="flex-1 font-bold text-xs sm:text-sm truncate">{row.name}</span>
> <div className="flex gap-2.5 sm:gap-4 shrink-0">
<span className="text-xl w-8 text-center shrink-0">{MEDALS[i] ?? `#${i + 1}`}</span>
<span className="flex-1 font-bold text-sm truncate">{row.name}</span>
<div className="flex gap-4 shrink-0">
<div className="flex flex-col items-center gap-0.5"> <div className="flex flex-col items-center gap-0.5">
<span className="text-sm font-black tabular-nums">{wins}</span> <span className="text-xs sm:text-sm font-black tabular-nums">{wins}</span>
<span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">victoires</span> <span className="text-[8px] sm:text-[9px] font-bold uppercase tracking-wider text-[#888]">victoires</span>
</div> </div>
<div className="flex flex-col items-center gap-0.5"> <div className="flex flex-col items-center gap-0.5">
<span className="text-sm font-black tabular-nums">{games}</span> <span className="text-xs sm:text-sm font-black tabular-nums">{games}</span>
<span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">parties</span> <span className="text-[8px] sm:text-[9px] font-bold uppercase tracking-wider text-[#888]">parties</span>
</div> </div>
{row.avgClicks != null && ( {row.avgClicks != null && (
<div className="flex flex-col items-center gap-0.5"> <div className="hidden sm:flex flex-col items-center gap-0.5">
<span className="text-sm font-black tabular-nums">{row.avgClicks}</span> <span className="text-sm font-black tabular-nums">{row.avgClicks}</span>
<span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">moy. clics</span> <span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">moy. clics</span>
</div> </div>
)} )}
{row.bestTime != null && ( {row.bestTime != null && (
<div className="flex flex-col items-center gap-0.5"> <div className="hidden sm:flex flex-col items-center gap-0.5">
<span className="text-sm font-black tabular-nums">{fmt(row.bestTime)}</span> <span className="text-sm font-black tabular-nums">{fmt(row.bestTime)}</span>
<span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">meilleur</span> <span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">meilleur</span>
</div> </div>
app/components/LobbyScreen.tsx
+24 -41
View File
@@ -27,83 +27,66 @@ export function LobbyScreen({
}); });
} }
const btnGhost = "w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors";
const btnPrimary = "w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer transition-colors";
return ( return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center px-4 py-5 gap-6 max-w-120 mx-auto"> <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center px-4 py-5 gap-5 sm:gap-6 max-w-120 mx-auto">
<button className="self-start min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onLeave}> <button className="self-start min-h-9 px-3 rounded-lg text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onLeave}>
Quitter Quitter
</button> </button>
{/* Code block */} {/* Code */}
<div className="w-full text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-6"> <div className="w-full text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 sm:p-6">
<span className="block text-xs text-[#888] uppercase tracking-widest mb-2">Code de la salle</span> <span className="block text-[10px] sm:text-xs text-[#888] uppercase tracking-widest mb-2">Code de la salle</span>
<button <button className="flex items-center justify-center gap-2 mx-auto px-2 py-1 rounded-lg hover:bg-[#242424] cursor-pointer bg-transparent border-none" onClick={copyCode}>
className="flex items-center justify-center gap-2.5 mx-auto px-2 py-1 rounded-lg hover:bg-[#242424] cursor-pointer border-none bg-transparent" <span className="text-5xl sm:text-[clamp(42px,12vw,64px)] font-black font-mono tracking-[0.15em] text-[#7c3aed] leading-none">
onClick={copyCode}
>
<span className="text-[clamp(42px,12vw,64px)] font-black font-mono tracking-[0.15em] text-[#7c3aed] leading-none">
{room.code} {room.code}
</span> </span>
<span className={`text-xl leading-none ${copied ? "text-green-400" : "text-[#888]"}`}> <span className={`text-lg sm:text-xl leading-none transition-colors ${copied ? "text-green-400" : "text-[#888]"}`}>
{copied ? "✓" : "⧉"} {copied ? "✓" : "⧉"}
</span> </span>
</button> </button>
<span className="block text-xs text-[#888] mt-2"> <span className="block text-xs text-[#888] mt-2">{copied ? "Copié !" : "Clique pour copier"}</span>
{copied ? "Copié !" : "Clique sur le code pour le copier"}
</span>
</div> </div>
{error && ( {error && (
<div className="w-full flex items-center justify-between gap-3 bg-red-950/40 border border-red-600 text-red-300 px-3 py-2.5 rounded-xl text-sm"> <div className="w-full flex items-center justify-between gap-3 bg-red-950/40 border border-red-600 text-red-300 px-3 py-2.5 rounded-xl text-xs sm:text-sm">
{error} {error}
<button onClick={() => setError(null)} className="text-base px-1.5 rounded hover:bg-white/10 cursor-pointer">✕</button> <button onClick={() => setError(null)} className="shrink-0 px-1.5 rounded hover:bg-white/10 cursor-pointer">✕</button>
</div> </div>
)} )}
{/* Players */} {/* Players */}
<div className="w-full"> <div className="w-full">
<h3 className="text-xs font-bold text-[#888] uppercase tracking-wider mb-2"> <h3 className="text-[10px] sm:text-xs font-bold text-[#888] uppercase tracking-wider mb-2">
Joueurs ({room.players.length}/8) Joueurs ({room.players.length}/8)
</h3> </h3>
<ul className="flex flex-col gap-2"> <ul className="flex flex-col gap-2">
{room.players.map((p) => ( {room.players.map((p) => (
<li <li key={p.id} className={`flex items-center gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}>
key={p.id} <span className="flex-1 font-semibold text-sm truncate">{p.name}</span>
className={`flex items-center gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`} {p.isHost && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-purple-900/40 text-purple-300 uppercase tracking-wide shrink-0">Hôte</span>}
> {p.id === playerId && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-blue-900/40 text-blue-300 uppercase tracking-wide shrink-0">Toi</span>}
<span className="flex-1 font-semibold text-sm">{p.name}</span> <span className="text-sm font-bold text-[#7c3aed] shrink-0">{p.score} pts</span>
{p.isHost && <span className="text-[11px] font-bold px-2 py-0.5 rounded-full bg-purple-900/40 text-purple-300 uppercase tracking-wide">Hôte</span>}
{p.id === playerId && <span className="text-[11px] font-bold px-2 py-0.5 rounded-full bg-blue-900/40 text-blue-300 uppercase tracking-wide">Toi</span>}
<span className="text-sm font-bold text-[#7c3aed] min-w-12.5 text-right">{p.score} pts</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
{room.round > 0 && ( {room.round > 0 && <p className="text-xs text-[#888] text-center">Manche {room.round} terminée</p>}
<p className="text-xs text-[#888] text-center">Manche {room.round} terminée</p>
)}
{isHost ? ( {isHost ? (
<div className="w-full flex flex-col gap-2.5"> <div className="w-full flex flex-col gap-2.5">
<button <button className={btnPrimary} onClick={onStart} disabled={loading}>
className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer"
onClick={onStart} disabled={loading}
>
{loading ? "Préparation..." : room.round === 0 ? "Démarrer la partie" : "Manche suivante"} {loading ? "Préparation..." : room.round === 0 ? "Démarrer la partie" : "Manche suivante"}
</button> </button>
{room.round > 0 && ( {room.round > 0 && (
<button <button className={btnGhost} onClick={onReset}>Nouvelle partie (reset scores)</button>
className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
onClick={onReset}
>
Nouvelle partie (reset scores)
</button>
)} )}
</div> </div>
) : ( ) : (
<p className="text-sm text-[#888] text-center animate-pulse-slow"> <p className="text-sm text-[#888] text-center animate-pulse-slow">En attente que l&apos;hôte démarre...</p>
En attente que l&apos;hôte démarre...
</p>
)} )}
</div> </div>
); );
app/components/ProfileScreen.tsx
+45 -49
View File
@@ -57,54 +57,50 @@ export function ProfileScreen({ userName, onBack }: { userName: string; onBack:
const filtered = filter === "all" ? games : games.filter((g) => g.mode === filter); const filtered = filter === "all" ? games : games.filter((g) => g.mode === filter);
const stats = computeStats(filtered); const stats = computeStats(filtered);
const statCardCls = "bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-3.5 text-center flex flex-col gap-1"; 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 ( return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col max-w-175 mx-auto px-4 pb-10"> <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">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between py-4 gap-3"> <div className="flex items-center justify-between py-4 gap-2">
<button className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onBack}> <button className={btnGhost} onClick={onBack}>← Retour</button>
← Retour <div className="flex items-center gap-2">
</button> <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">
<div className="flex items-center gap-2.5">
<span className="w-10 h-10 rounded-full bg-[#7c3aed] text-white flex items-center justify-center text-lg font-bold shrink-0">
{userName[0].toUpperCase()} {userName[0].toUpperCase()}
</span> </span>
<h2 className="text-xl font-bold">{userName}</h2> <h2 className="text-base sm:text-xl font-bold truncate max-w-32 sm:max-w-none">{userName}</h2>
</div> </div>
<button <button className={btnGhost} onClick={() => signOut({ redirect: false }).then(onBack)}>
className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" Déco
onClick={() => signOut({ redirect: false }).then(onBack)}
>
Déconnexion
</button> </button>
</div> </div>
{/* Stats grid */} {/* Stats grid */}
<div className="grid grid-cols-3 gap-2.5 my-4"> <div className="grid grid-cols-3 gap-2 sm:gap-2.5 my-3 sm:my-4">
<div className={statCardCls}> <div className={statCard}>
<span className="text-[22px] font-black">{stats.total}</span> <span className="text-lg sm:text-[22px] font-black">{stats.total}</span>
<span className="text-[11px] uppercase tracking-wider text-[#888]">Parties</span> <span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Parties</span>
</div> </div>
<div className={statCardCls}> <div className={statCard}>
<span className="text-[22px] font-black">{stats.won}</span> <span className="text-lg sm:text-[22px] font-black">{stats.won}</span>
<span className="text-[11px] uppercase tracking-wider text-[#888]">Victoires</span> <span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Victoires</span>
</div> </div>
<div className={statCardCls}> <div className={statCard}>
<span className="text-[22px] font-black">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span> <span className="text-lg sm:text-[22px] font-black">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span>
<span className="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>
<div className={statCardCls}> <div className={statCard}>
<span className="text-[22px] font-black">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span> <span className="text-lg sm:text-[22px] font-black">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span>
<span className="text-[11px] uppercase tracking-wider text-[#888]">Temps moy.</span> <span className="text-[9px] sm:text-[11px] uppercase tracking-wider text-[#888]">Temps moy.</span>
</div> </div>
<div className={`${statCardCls} border-[#7c3aed]`}> <div className={`${statCard} border-[#7c3aed]`}>
<span className="text-[22px] font-black text-[#7c3aed]">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span> <span className="text-lg sm:text-[22px] font-black text-[#7c3aed]">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span>
<span className="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>
<div className={`${statCardCls} border-[#7c3aed]`}> <div className={`${statCard} border-[#7c3aed]`}>
<span className="text-[22px] font-black text-[#7c3aed]">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span> <span className="text-lg sm:text-[22px] font-black text-[#7c3aed]">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span>
<span className="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>
</div> </div>
@@ -113,7 +109,7 @@ export function ProfileScreen({ userName, onBack }: { userName: string; onBack:
{(["all", "solo", "multi"] as const).map((f) => ( {(["all", "solo", "multi"] as const).map((f) => (
<button <button
key={f} key={f}
className={`px-4 py-1.5 rounded-full text-xs font-semibold border cursor-pointer transition-colors ${filter === f ? "bg-[#7c3aed] border-[#7c3aed] text-white" : "bg-[#242424] border-[#2e2e2e] text-[#888] hover:text-[#f0f0f0]"}`} className={`px-3 sm:px-4 py-1.5 rounded-full text-xs font-semibold border cursor-pointer transition-colors ${filter === f ? "bg-[#7c3aed] border-[#7c3aed] text-white" : "bg-[#242424] border-[#2e2e2e] text-[#888] hover:text-[#f0f0f0]"}`}
onClick={() => setFilter(f)} onClick={() => setFilter(f)}
> >
{f === "all" ? "Tout" : f === "solo" ? "Solo" : "Multi"} {f === "all" ? "Tout" : f === "solo" ? "Solo" : "Multi"}
@@ -122,36 +118,36 @@ export function ProfileScreen({ userName, onBack }: { userName: string; onBack:
</div> </div>
{/* Game list */} {/* Game list */}
<div className="flex flex-col gap-2.5"> <div className="flex flex-col gap-2 sm:gap-2.5">
{loading && ( {loading && (
<div className="flex items-center gap-3 py-10 text-[#888]"><div className="spinner" /> Chargement...</div> <div className="flex items-center gap-3 py-10 text-[#888]"><div className="spinner" /> Chargement...</div>
)} )}
{!loading && filtered.length === 0 && ( {!loading && filtered.length === 0 && (
<p className="text-[#888] text-center py-10">Aucune partie enregistrée.</p> <p className="text-[#888] text-sm text-center py-10">Aucune partie enregistrée.</p>
)} )}
{filtered.map((g) => ( {filtered.map((g) => (
<div key={g.id} className={`bg-[#1a1a1a] rounded-xl px-4 py-3.5 flex flex-col gap-2 border-l-4 ${g.won ? "border-l-[#16a34a] border-y border-r border-[#2e2e2e]" : "border-l-[#2e2e2e] border-y border-r border-[#2e2e2e] opacity-70"}`}> <div key={g.id} className={`bg-[#1a1a1a] rounded-xl px-3.5 sm:px-4 py-3 sm:py-3.5 flex flex-col gap-2 border-l-4 border-y border-r ${g.won ? "border-l-[#16a34a] border-[#2e2e2e]" : "border-l-[#2e2e2e] border-[#2e2e2e] opacity-70"}`}>
<div className="flex items-center gap-2.5 text-xs"> <div className="flex items-center gap-2 text-xs">
<span className="bg-[#242424] rounded px-2 py-0.5 font-semibold text-[#888]">{g.mode === "solo" ? "Solo" : "Multi"}</span> <span className="bg-[#242424] rounded px-1.5 sm:px-2 py-0.5 font-semibold text-[#888] shrink-0">{g.mode === "solo" ? "Solo" : "Multi"}</span>
<span className="text-[#888] ml-auto">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span> <span className="text-[#888] ml-auto shrink-0">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span>
<span className={`font-bold ${g.won ? "text-[#16a34a]" : "text-[#888]"}`}>{g.won ? "Victoire" : "Abandon"}</span> <span className={`font-bold shrink-0 ${g.won ? "text-[#16a34a]" : "text-[#888]"}`}>{g.won ? "Victoire" : "Abandon"}</span>
</div> </div>
<div className="flex items-center gap-2 text-sm font-semibold flex-wrap"> <div className="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm font-semibold flex-wrap">
<span>{g.startArticle}</span> <span className="truncate max-w-[40%]">{g.startArticle}</span>
<span className="text-[#888]">→</span> <span className="text-[#888] shrink-0">→</span>
<span className="text-[#7c3aed]">{g.targetArticle}</span> <span className="text-[#7c3aed] truncate max-w-[40%]">{g.targetArticle}</span>
</div> </div>
{g.won && ( {g.won && (
<div className="flex gap-4 text-xs text-[#888]"> <div className="flex flex-wrap gap-2 sm:gap-4 text-xs text-[#888]">
<span>{g.clicks} clics</span> <span>{g.clicks} clics</span>
<span>{fmt(g.timeSeconds)}</span> <span>{fmt(g.timeSeconds)}</span>
<span>{g.path.length - 1} articles parcourus</span> <span>{g.path.length - 1} articles</span>
</div> </div>
)} )}
{g.path.length > 0 && ( {g.path.length > 0 && (
<div className="flex flex-wrap gap-1 text-xs text-[#888] pt-1 border-t border-[#2e2e2e]"> <div className="flex flex-wrap gap-1 text-xs text-[#888] pt-1.5 border-t border-[#2e2e2e]">
{g.path.map((t, i) => ( {g.path.map((t, i) => (
<span key={i} className="flex items-center gap-1"> <span key={i} className="flex items-center gap-0.5">
{i > 0 && <span className="text-[#555]">›</span>} {i > 0 && <span className="text-[#555]">›</span>}
<span className={i === g.path.length - 1 && g.won ? "text-[#16a34a] font-semibold" : ""}>{t}</span> <span className={i === g.path.length - 1 && g.won ? "text-[#16a34a] font-semibold" : ""}>{t}</span>
</span> </span>
app/components/SoloScreen.tsx
+33 -38
View File
@@ -36,40 +36,40 @@ export function SoloScreen({
breadcrumbEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }); breadcrumbEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" });
}, [history]); }, [history]);
const btnPrimary = "w-full min-h-11 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer transition-colors";
const btnGhost = "w-full min-h-11 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors";
if (phase === "setup") return ( if (phase === "setup") return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center justify-center px-4 py-6 gap-5 max-w-100 mx-auto text-center"> <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center justify-center px-4 py-8 gap-5 max-w-sm mx-auto text-center">
<button className="self-start min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}> <button className="self-start min-h-9 px-3 rounded-lg text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}>
Retour Retour
</button> </button>
<h2 className="text-3xl font-black">Mode Solo</h2> <h2 className="text-2xl sm:text-3xl font-black">Mode Solo</h2>
<p className="text-[#888] text-sm leading-relaxed"> <p className="text-[#888] text-sm sm:text-base leading-relaxed">
Deux articles aléatoires seront choisis. Atteins l&apos;article cible en cliquant uniquement sur les liens ! Deux articles aléatoires seront choisis. Atteins l&apos;article cible en cliquant uniquement sur les liens !
</p> </p>
<button <button className={btnPrimary} onClick={onStart} disabled={loading}>
className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer"
onClick={onStart} disabled={loading}
>
{loading ? "Préparation..." : "Lancer une partie"} {loading ? "Préparation..." : "Lancer une partie"}
</button> </button>
</div> </div>
); );
if (phase === "won") return ( if (phase === "won") return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex items-center justify-center px-4 py-6"> <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex items-center justify-center px-4 py-8">
<div className="w-full max-w-96 text-center flex flex-col gap-5"> <div className="w-full max-w-sm sm:max-w-md text-center flex flex-col gap-4 sm:gap-5">
<div className="text-6xl leading-none">🎉</div> <div className="text-5xl sm:text-6xl leading-none">🎉</div>
<h2 className="text-3xl font-black">Article atteint !</h2> <h2 className="text-2xl sm:text-3xl font-black">Article atteint !</h2>
<div className="flex gap-6 justify-center"> <div className="flex gap-6 sm:gap-8 justify-center">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="text-4xl font-black text-[#7c3aed]">{clicks}</span> <span className="text-3xl sm:text-4xl font-black text-[#7c3aed]">{clicks}</span>
<span className="text-xs text-[#888]">clics</span> <span className="text-xs text-[#888]">clics</span>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="text-4xl font-black text-[#7c3aed]">{elapsedDisplay}</span> <span className="text-3xl sm:text-4xl font-black text-[#7c3aed]">{elapsedDisplay}</span>
<span className="text-xs text-[#888]">temps</span> <span className="text-xs text-[#888]">temps</span>
</div> </div>
</div> </div>
<div className="bg-[#1a1a1a] rounded-xl px-4 py-3 flex flex-wrap gap-1 text-sm text-[#888]"> <div className="bg-[#1a1a1a] rounded-xl px-3 sm:px-4 py-3 flex flex-wrap gap-1 text-xs sm:text-sm text-[#888] text-left">
{history.map((t, i) => ( {history.map((t, i) => (
<span key={i} className="flex items-center gap-1"> <span key={i} className="flex items-center gap-1">
{i > 0 && <span className="text-[#555]">›</span>} {i > 0 && <span className="text-[#555]">›</span>}
@@ -78,21 +78,16 @@ export function SoloScreen({
))} ))}
</div> </div>
<div className="flex flex-col gap-2.5"> <div className="flex flex-col gap-2.5">
<button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] cursor-pointer" onClick={onNewGame}> <button className={btnPrimary} onClick={onNewGame}>Nouvelle partie</button>
Nouvelle partie <button className={btnGhost} onClick={onQuit}>Accueil</button>
</button>
<button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}>
Accueil
</button>
</div> </div>
</div> </div>
</div> </div>
); );
// playing // Playing
return ( return (
<div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col"> <div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col">
{/* Article */}
<div className="flex-1 overflow-y-auto bg-white"> <div className="flex-1 overflow-y-auto bg-white">
<div className="article-container"> <div className="article-container">
{title && <h1 className="article-title">{title}</h1>} {title && <h1 className="article-title">{title}</h1>}
@@ -103,7 +98,7 @@ export function SoloScreen({
)} )}
{loadError && ( {loadError && (
<div className="flex flex-col items-center gap-4 py-10 px-4 text-center"> <div className="flex flex-col items-center gap-4 py-10 px-4 text-center">
<p className="text-[#888]">{loadError}</p> <p className="text-[#888] text-sm">{loadError}</p>
<button className="min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] cursor-pointer" onClick={onRetry}> <button className="min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] cursor-pointer" onClick={onRetry}>
Réessayer Réessayer
</button> </button>
@@ -116,27 +111,27 @@ export function SoloScreen({
</div> </div>
{/* Bottom bar */} {/* Bottom bar */}
<div className="fixed bottom-0 left-0 right-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-t border-[#2e2e2e] flex items-center justify-between px-4 py-2.5 gap-3"> <div className="fixed bottom-0 left-0 right-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-t border-[#2e2e2e] flex items-center justify-between px-3 sm:px-4 py-2 gap-2 sm:gap-3">
<div className="flex-1 min-w-0 flex flex-col gap-1"> <div className="flex-1 min-w-0 flex flex-col gap-0.5">
<span className="text-[9px] font-bold tracking-widest text-[#888] uppercase">Vous devez trouver</span> <span className="text-[8px] sm:text-[9px] font-bold tracking-widest text-[#888] uppercase">Trouver</span>
<span className="text-base font-black text-[#7c3aed] truncate">{puzzle?.target}</span> <span className="text-sm sm:text-base font-black text-[#7c3aed] truncate">{puzzle?.target}</span>
<Breadcrumbs history={history} endRef={breadcrumbEndRef} /> <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
</div> </div>
<div className="flex items-center gap-4 shrink-0"> <div className="flex items-center gap-2 sm:gap-3 shrink-0">
<div className="flex flex-col items-center gap-0.5 min-w-11"> <div className="flex flex-col items-center gap-0.5 min-w-10">
<span className="text-[9px] font-bold tracking-wider text-[#888] uppercase">Temps</span> <span className="text-[8px] sm:text-[9px] font-bold tracking-wider text-[#888] uppercase">Temps</span>
<span className="text-sm font-black tabular-nums">{elapsedDisplay}</span> <span className="text-xs sm:text-sm font-black tabular-nums">{elapsedDisplay}</span>
</div> </div>
<div className="flex flex-col items-center gap-0.5 min-w-11"> <div className="flex flex-col items-center gap-0.5 min-w-10">
<span className="text-[9px] font-bold tracking-wider text-[#888] uppercase">Clics</span> <span className="text-[8px] sm:text-[9px] font-bold tracking-wider text-[#888] uppercase">Clics</span>
<span className="text-sm font-black tabular-nums">{clicks}</span> <span className="text-xs sm:text-sm font-black tabular-nums">{clicks}</span>
</div> </div>
{canGoBack && ( {canGoBack && (
<button className="min-h-9 px-3 rounded-xl text-xs font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] disabled:opacity-50 cursor-pointer" onClick={onBack} disabled={loading}> <button className="min-h-8 sm:min-h-9 px-2 sm:px-3 rounded-lg text-xs font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] disabled:opacity-50 cursor-pointer" onClick={onBack} disabled={loading}>
← +1 ← +1
</button> </button>
)} )}
<button className="min-h-9 px-3 rounded-xl text-xs font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}> <button className="min-h-8 sm:min-h-9 px-2 sm:px-3 rounded-lg text-xs font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}>
Quitter Quitter
</button> </button>
</div> </div>