style: apply prettier formatting across codebase
This commit is contained in:
jessy-david-dev
+137
-66
@@ -29,75 +29,120 @@ type SoloScreenProps = {
|
||||
};
|
||||
|
||||
export function SoloScreen({
|
||||
phase, puzzle, html, title, loading, loadError, history, clicks,
|
||||
elapsedDisplay, canGoBack, onStart, onNavigate, onBack, onQuit, onNewGame, onRetry,
|
||||
phase,
|
||||
puzzle,
|
||||
html,
|
||||
title,
|
||||
loading,
|
||||
loadError,
|
||||
history,
|
||||
clicks,
|
||||
elapsedDisplay,
|
||||
canGoBack,
|
||||
onStart,
|
||||
onNavigate,
|
||||
onBack,
|
||||
onQuit,
|
||||
onNewGame,
|
||||
onRetry,
|
||||
}: SoloScreenProps) {
|
||||
const breadcrumbEndRef = useRef<HTMLDivElement>(null);
|
||||
const { allowed: searchAllowed, toggle: toggleSearch } = useSearchAllowed();
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
breadcrumbEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" });
|
||||
breadcrumbEndRef.current?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "end",
|
||||
});
|
||||
}, [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";
|
||||
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 (
|
||||
<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 px-3 rounded-lg text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}>
|
||||
Retour
|
||||
</button>
|
||||
<h2 className="text-2xl sm:text-3xl font-black">Mode Solo</h2>
|
||||
<p className="text-[#888] text-sm sm:text-base leading-relaxed">
|
||||
Deux articles aléatoires seront choisis. Atteins l'article cible en cliquant uniquement sur les liens !
|
||||
</p>
|
||||
<button
|
||||
onClick={toggleSearch}
|
||||
className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
|
||||
>
|
||||
<span>🔍 Recherche Ctrl+F</span>
|
||||
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}>
|
||||
{searchAllowed ? "Autorisée" : "Bloquée"}
|
||||
</span>
|
||||
</button>
|
||||
<button className={btnPrimary} onClick={onStart} disabled={loading}>
|
||||
{loading ? "Préparation..." : "Lancer une partie"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
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-8 gap-5 max-w-sm mx-auto text-center">
|
||||
<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
|
||||
</button>
|
||||
<h2 className="text-2xl sm:text-3xl font-black">Mode Solo</h2>
|
||||
<p className="text-[#888] text-sm sm:text-base leading-relaxed">
|
||||
Deux articles aléatoires seront choisis. Atteins l'article cible
|
||||
en cliquant uniquement sur les liens !
|
||||
</p>
|
||||
<button
|
||||
onClick={toggleSearch}
|
||||
className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
|
||||
>
|
||||
<span>🔍 Recherche Ctrl+F</span>
|
||||
<span
|
||||
className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
|
||||
>
|
||||
{searchAllowed ? "Autorisée" : "Bloquée"}
|
||||
</span>
|
||||
</button>
|
||||
<button className={btnPrimary} onClick={onStart} disabled={loading}>
|
||||
{loading ? "Préparation..." : "Lancer une partie"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
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-8">
|
||||
<div className="w-full max-w-sm sm:max-w-md text-center flex flex-col gap-4 sm:gap-5">
|
||||
<div className="text-5xl sm:text-6xl leading-none">🎉</div>
|
||||
<h2 className="text-2xl sm:text-3xl font-black">Article atteint !</h2>
|
||||
<div className="flex gap-6 sm:gap-8 justify-center">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-3xl sm:text-4xl font-black text-[#7c3aed]">{clicks}</span>
|
||||
<span className="text-xs text-[#888]">clics</span>
|
||||
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-8">
|
||||
<div className="w-full max-w-sm sm:max-w-md text-center flex flex-col gap-4 sm:gap-5">
|
||||
<div className="text-5xl sm:text-6xl leading-none">🎉</div>
|
||||
<h2 className="text-2xl sm:text-3xl font-black">Article atteint !</h2>
|
||||
<div className="flex gap-6 sm:gap-8 justify-center">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-3xl sm:text-4xl font-black text-[#7c3aed]">
|
||||
{clicks}
|
||||
</span>
|
||||
<span className="text-xs text-[#888]">clics</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-3xl sm:text-4xl font-black text-[#7c3aed]">
|
||||
{elapsedDisplay}
|
||||
</span>
|
||||
<span className="text-xs text-[#888]">temps</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-3xl sm:text-4xl font-black text-[#7c3aed]">{elapsedDisplay}</span>
|
||||
<span className="text-xs text-[#888]">temps</span>
|
||||
<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) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
{i > 0 && <span className="text-[#555]">›</span>}
|
||||
<span
|
||||
className={
|
||||
i === history.length - 1
|
||||
? "text-[#16a34a] font-semibold"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{t}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<ShareBar
|
||||
text={`🎉 J'ai atteint "${puzzle?.target}" en ${clicks} clics et ${elapsedDisplay} sur WikiRush !`}
|
||||
/>
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<button className={btnPrimary} onClick={onNewGame}>
|
||||
Nouvelle partie
|
||||
</button>
|
||||
<button className={btnGhost} onClick={onQuit}>
|
||||
Accueil
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
{i > 0 && <span className="text-[#555]">›</span>}
|
||||
<span className={i === history.length - 1 ? "text-[#16a34a] font-semibold" : ""}>{t}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<ShareBar text={`🎉 J'ai atteint "${puzzle?.target}" en ${clicks} clics et ${elapsedDisplay} sur WikiRush !`} />
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<button className={btnPrimary} onClick={onNewGame}>Nouvelle partie</button>
|
||||
<button className={btnGhost} onClick={onQuit}>Accueil</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
// Playing
|
||||
return (
|
||||
@@ -113,13 +158,20 @@ export function SoloScreen({
|
||||
{loadError && (
|
||||
<div className="flex flex-col items-center gap-4 py-10 px-4 text-center">
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{!loading && !loadError && html && (
|
||||
<ArticleView html={html} onNavigate={onNavigate} disabled={loading} />
|
||||
<ArticleView
|
||||
html={html}
|
||||
onNavigate={onNavigate}
|
||||
disabled={loading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,25 +179,44 @@ export function SoloScreen({
|
||||
{/* 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-3 sm:px-4 py-2 gap-2 sm:gap-3">
|
||||
<div className="flex-1 min-w-0 flex flex-col gap-0.5">
|
||||
<span className="text-[8px] sm:text-[9px] font-bold tracking-widest text-[#888] uppercase">Trouver</span>
|
||||
<span className="text-sm sm:text-base font-black text-[#7c3aed] truncate">{puzzle?.target}</span>
|
||||
<span className="text-[8px] sm:text-[9px] font-bold tracking-widest text-[#888] uppercase">
|
||||
Trouver
|
||||
</span>
|
||||
<span className="text-sm sm:text-base font-black text-[#7c3aed] truncate">
|
||||
{puzzle?.target}
|
||||
</span>
|
||||
<Breadcrumbs history={history} endRef={breadcrumbEndRef} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 sm:gap-3 shrink-0">
|
||||
<div className="flex flex-col items-center gap-0.5 min-w-10">
|
||||
<span className="text-[8px] sm:text-[9px] font-bold tracking-wider text-[#888] uppercase">Temps</span>
|
||||
<span className="text-xs sm:text-sm font-black tabular-nums">{elapsedDisplay}</span>
|
||||
<span className="text-[8px] sm:text-[9px] font-bold tracking-wider text-[#888] uppercase">
|
||||
Temps
|
||||
</span>
|
||||
<span className="text-xs sm:text-sm font-black tabular-nums">
|
||||
{elapsedDisplay}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-0.5 min-w-10">
|
||||
<span className="text-[8px] sm:text-[9px] font-bold tracking-wider text-[#888] uppercase">Clics</span>
|
||||
<span className="text-xs sm:text-sm font-black tabular-nums">{clicks}</span>
|
||||
<span className="text-[8px] sm:text-[9px] font-bold tracking-wider text-[#888] uppercase">
|
||||
Clics
|
||||
</span>
|
||||
<span className="text-xs sm:text-sm font-black tabular-nums">
|
||||
{clicks}
|
||||
</span>
|
||||
</div>
|
||||
{canGoBack && (
|
||||
<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}>
|
||||
<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
|
||||
</button>
|
||||
)}
|
||||
<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}>
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user