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

style: apply prettier formatting across codebase

Browse Source
This commit is contained in:
jessy-david-dev
2026-04-11 22:25:34 +02:00
parent b76fbf8789
commit d268905f2d
27 changed files with 2092 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/GameScreen.tsx
+226 -111
View File
@@ -25,8 +25,21 @@ type GameScreenProps = {
};
export function GameScreen({
room, playerId, html, title, loading, loadError, history, clicks, elapsed,
countdown, onNavigate, onRetry, onNextRound, onResetGame, onSurrender,
room,
playerId,
html,
title,
loading,
loadError,
history,
clicks,
elapsed,
countdown,
onNavigate,
onRetry,
onNextRound,
onResetGame,
onSurrender,
}: GameScreenProps) {
const breadcrumbEndRef = useRef<HTMLDivElement>(null);
useCtrlFBlock(room.searchAllowed);
@@ -34,125 +47,198 @@ export function GameScreen({
const isHost = myPlayer?.isHost ?? false;
const myFinished = myPlayer?.hasWon || myPlayer?.hasSurrendered;
const sortedPlayers = [...room.players].sort((a, b) => b.score - a.score);
const winner = room.roundWinner ? room.players.find((p) => p.id === room.roundWinner) : null;
const winner = room.roundWinner
? room.players.find((p) => p.id === room.roundWinner)
: null;
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 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";
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
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-8">
<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-5 sm:p-6">
{winner ? (
<>
<div className="text-4xl sm:text-5xl mb-2">🏆</div>
<div className="text-base sm:text-lg font-bold">{winner.name} a gagné la manche !</div>
</>
) : (
<div className="text-base sm:text-lg font-bold">Manche terminée !</div>
)}
</div>
<div className="text-center text-xs sm:text-sm text-[#888]">
<span className="text-[#f0f0f0]">{room.startArticle}</span>
<span className="mx-2">→</span>
<span className="text-[#7c3aed] font-bold">{room.targetArticle}</span>
</div>
<div>
<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">
{sortedPlayers.map((p, i) => (
<li key={p.id} className={`flex flex-col gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}>
<div className="flex items-center gap-2 min-h-7">
<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 truncate">{p.name}</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">✓ Trouvé</span>}
{p.hasSurrendered && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#242424] text-[#888] uppercase tracking-wide shrink-0">Forfait</span>}
<span className="font-bold text-[#7c3aed] text-sm shrink-0">{p.score} pts</span>
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-8">
<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-5 sm:p-6">
{winner ? (
<>
<div className="text-4xl sm:text-5xl mb-2">🏆</div>
<div className="text-base sm:text-lg font-bold">
{winner.name} a gagné la manche !
</div>
{p.path && p.path.length > 0 && (
<div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[11px] text-[#666] pl-6 sm:pl-7">
{p.path.map((t, j) => (
<span key={j} className="flex items-center gap-0.5">
{j > 0 && <span className="text-[#444]">›</span>}
<span className={
j === 0 ? "text-[#555]" :
j === p.path.length - 1 && p.hasWon ? "text-green-400 font-semibold" :
j === p.path.length - 1 && p.hasSurrendered ? "text-[#888]" :
"text-[#888]"
}>{t}</span>
</span>
))}
<span className="text-[#555] ml-1">({p.path.length - 1} clic{p.path.length - 1 > 1 ? "s" : ""})</span>
</div>
)}
</li>
))}
</ul>
</div>
<div className="text-center text-xs text-[#555]">
Manche {room.round}/{room.totalRounds}
</div>
{isHost ? (
<div className="flex flex-col gap-2.5">
{room.round < room.totalRounds
? <button className={btnPrimary} onClick={onNextRound}>Manche suivante</button>
: <button className={btnPrimary} onClick={onResetGame}>Partie terminée — Recommencer</button>
}
{room.round < room.totalRounds && (
<button className={btnGhost} onClick={onResetGame}>Arrêter la partie</button>
</>
) : (
<div className="text-base sm:text-lg font-bold">
Manche terminée !
</div>
)}
</div>
) : (
<p className="text-xs sm:text-sm text-[#888] text-center animate-pulse-slow">En attente de l&apos;hôte...</p>
)}
<div className="text-center text-xs sm:text-sm text-[#888]">
<span className="text-[#f0f0f0]">{room.startArticle}</span>
<span className="mx-2">→</span>
<span className="text-[#7c3aed] font-bold">
{room.targetArticle}
</span>
</div>
<div>
<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">
{sortedPlayers.map((p, i) => (
<li
key={p.id}
className={`flex flex-col gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}
>
<div className="flex items-center gap-2 min-h-7">
<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 truncate">
{p.name}
</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">
✓ Trouvé
</span>
)}
{p.hasSurrendered && (
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#242424] text-[#888] uppercase tracking-wide shrink-0">
Forfait
</span>
)}
<span className="font-bold text-[#7c3aed] text-sm shrink-0">
{p.score} pts
</span>
</div>
{p.path && p.path.length > 0 && (
<div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[11px] text-[#666] pl-6 sm:pl-7">
{p.path.map((t, j) => (
<span key={j} className="flex items-center gap-0.5">
{j > 0 && <span className="text-[#444]">›</span>}
<span
className={
j === 0
? "text-[#555]"
: j === p.path.length - 1 && p.hasWon
? "text-green-400 font-semibold"
: j === p.path.length - 1 && p.hasSurrendered
? "text-[#888]"
: "text-[#888]"
}
>
{t}
</span>
</span>
))}
<span className="text-[#555] ml-1">
({p.path.length - 1} clic
{p.path.length - 1 > 1 ? "s" : ""})
</span>
</div>
)}
</li>
))}
</ul>
</div>
<div className="text-center text-xs text-[#555]">
Manche {room.round}/{room.totalRounds}
</div>
{isHost ? (
<div className="flex flex-col gap-2.5">
{room.round < room.totalRounds ? (
<button className={btnPrimary} onClick={onNextRound}>
Manche suivante
</button>
) : (
<button className={btnPrimary} onClick={onResetGame}>
Partie terminée - Recommencer
</button>
)}
{room.round < room.totalRounds && (
<button className={btnGhost} onClick={onResetGame}>
Arrêter la partie
</button>
)}
</div>
) : (
<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>
);
);
// Entre les manches : attente que l'hôte démarre la suivante
if (room.phase === "waiting") return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] flex items-center justify-center px-4">
<div className="text-center flex flex-col items-center gap-4">
<div className="text-2xl font-black">Manche {room.round}/{room.totalRounds} terminée</div>
<p className="text-sm text-[#888] animate-pulse-slow">
{isHost ? "Lance la manche suivante quand tu veux." : "En attente que l'hôte démarre la prochaine manche..."}
</p>
{isHost && (
<div className="flex flex-col gap-2.5 w-full max-w-xs mt-2">
<button className={btnPrimary} onClick={onNextRound}>Manche suivante</button>
<button className={btnGhost} onClick={onResetGame}>Arrêter la partie</button>
if (room.phase === "waiting")
return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] flex items-center justify-center px-4">
<div className="text-center flex flex-col items-center gap-4">
<div className="text-2xl font-black">
Manche {room.round}/{room.totalRounds} terminée
</div>
)}
<p className="text-sm text-[#888] animate-pulse-slow">
{isHost
? "Lance la manche suivante quand tu veux."
: "En attente que l'hôte démarre la prochaine manche..."}
</p>
{isHost && (
<div className="flex flex-col gap-2.5 w-full max-w-xs mt-2">
<button className={btnPrimary} onClick={onNextRound}>
Manche suivante
</button>
<button className={btnGhost} onClick={onResetGame}>
Arrêter la partie
</button>
</div>
)}
</div>
</div>
</div>
);
);
// Countdown
if (room.phase === "countdown") return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] flex items-center justify-center px-4">
<div className="text-center">
<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">
<span className="text-[10px] sm:text-[11px] text-[#888] uppercase tracking-wider">Départ</span>
<span className="text-base sm:text-lg font-bold text-center">{room.startArticle}</span>
if (room.phase === "countdown")
return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] flex items-center justify-center px-4">
<div className="text-center">
<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">
<span className="text-[10px] sm:text-[11px] text-[#888] uppercase tracking-wider">
Départ
</span>
<span className="text-base sm:text-lg font-bold text-center">
{room.startArticle}
</span>
</div>
<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">
<span className="text-[10px] sm:text-[11px] text-[#888] uppercase tracking-wider">
Cible
</span>
<span className="text-lg sm:text-xl font-bold text-[#7c3aed] text-center">
{room.targetArticle}
</span>
</div>
</div>
<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">
<span className="text-[10px] sm:text-[11px] text-[#888] uppercase tracking-wider">Cible</span>
<span className="text-lg sm:text-xl font-bold text-[#7c3aed] text-center">{room.targetArticle}</span>
<div className="text-[clamp(72px,20vw,140px)] font-black leading-none text-[#7c3aed] animate-count-pop">
{countdown !== null && countdown > 0 ? countdown : "Partez !"}
</div>
</div>
<div className="text-[clamp(72px,20vw,140px)] font-black leading-none text-[#7c3aed] animate-count-pop">
{countdown !== null && countdown > 0 ? countdown : "Partez !"}
</div>
</div>
</div>
);
);
// Playing
return (
@@ -161,8 +247,12 @@ export function GameScreen({
<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-0.5 sm:gap-1">
<div className="flex items-center gap-1.5">
<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-[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>
</div>
<Breadcrumbs history={history} endRef={breadcrumbEndRef} />
</div>
@@ -181,10 +271,14 @@ export function GameScreen({
</button>
)}
{myFinished && myPlayer?.hasWon && (
<span className="text-xs font-bold text-green-400 shrink-0">✓ Trouvé !</span>
<span className="text-xs font-bold text-green-400 shrink-0">
✓ Trouvé !
</span>
)}
{myFinished && myPlayer?.hasSurrendered && (
<span className="text-xs font-bold text-[#888] shrink-0">Forfait</span>
<span className="text-xs font-bold text-[#888] shrink-0">
Forfait
</span>
)}
</div>
</div>
@@ -200,7 +294,10 @@ export function GameScreen({
{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>
@@ -208,21 +305,39 @@ export function GameScreen({
{!loading && !loadError && html && (
<div className="article-container">
<h1 className="article-title">{title}</h1>
<ArticleView html={html} onNavigate={onNavigate} disabled={loading} />
<ArticleView
html={html}
onNavigate={onNavigate}
disabled={loading}
/>
</div>
)}
</div>
{/* Sidebar - desktop seulement */}
<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-[10px] 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">
{sortedPlayers.map((p) => (
<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>
{p.hasWon && <span className="text-[10px] text-green-400 font-bold">✓ Trouvé</span>}
{p.hasSurrendered && <span className="text-[10px] text-[#888] font-bold">Forfait</span>}
{p.hasWon && (
<span className="text-[10px] text-green-400 font-bold">
✓ Trouvé
</span>
)}
{p.hasSurrendered && (
<span className="text-[10px] text-[#888] font-bold">
Forfait
</span>
)}
</li>
))}
</ul>