fmt
This commit is contained in:
@@ -54,7 +54,9 @@ export default function Board({
|
||||
<div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
|
||||
<span className="font-medium">{player2}</span>
|
||||
{currentTurnColor === 2 && (
|
||||
<span className="text-xs text-yellow-400 animate-pulse">● Turn</span>
|
||||
<span className="text-xs text-yellow-400 animate-pulse">
|
||||
● Turn
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,7 +82,9 @@ export default function Board({
|
||||
{/* Drop arrow indicator */}
|
||||
<div
|
||||
className={`h-2 flex items-center justify-center transition-opacity ${
|
||||
hoveredCol === col && canInteract ? "opacity-100" : "opacity-0"
|
||||
hoveredCol === col && canInteract
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-white/70" />
|
||||
@@ -98,21 +102,19 @@ export default function Board({
|
||||
className={`w-12 h-12 rounded-full border-2 transition-all duration-150 ${
|
||||
cell === 1
|
||||
? `bg-red-500 shadow-lg shadow-red-950/60 ${
|
||||
isLast
|
||||
? "border-white scale-110"
|
||||
: "border-red-700"
|
||||
isLast ? "border-white scale-110" : "border-red-700"
|
||||
}`
|
||||
: cell === 2
|
||||
? `bg-yellow-400 shadow-lg shadow-yellow-950/60 ${
|
||||
isLast
|
||||
? "border-white scale-110"
|
||||
: "border-yellow-600"
|
||||
}`
|
||||
: `bg-slate-950 border-slate-800 ${
|
||||
hoveredCol === col && canInteract
|
||||
? "border-blue-400/50"
|
||||
: ""
|
||||
}`
|
||||
? `bg-yellow-400 shadow-lg shadow-yellow-950/60 ${
|
||||
isLast
|
||||
? "border-white scale-110"
|
||||
: "border-yellow-600"
|
||||
}`
|
||||
: `bg-slate-950 border-slate-800 ${
|
||||
hoveredCol === col && canInteract
|
||||
? "border-blue-400/50"
|
||||
: ""
|
||||
}`
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -7,115 +7,115 @@ import { useConnection } from "@/lib/connection";
|
||||
import { cmd, DEFAULT_WS_URL } from "@/lib/protocol";
|
||||
|
||||
export default function Nav() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { status, role, username, send, becomePlayer } = useConnection();
|
||||
const [showPlayerModal, setShowPlayerModal] = useState(false);
|
||||
const [nextUsername, setNextUsername] = useState(username);
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { status, role, username, send, becomePlayer } = useConnection();
|
||||
const [showPlayerModal, setShowPlayerModal] = useState(false);
|
||||
const [nextUsername, setNextUsername] = useState(username);
|
||||
|
||||
const statusLabel =
|
||||
status === "connected"
|
||||
? `Connected ${role === "player" ? `as ${username}` : "as observer"}`
|
||||
: status === "reconnecting"
|
||||
? "Reconnecting..."
|
||||
: status === "connecting"
|
||||
? "Connecting..."
|
||||
: "Not connected";
|
||||
const isConnectionPage = pathname === "/";
|
||||
const statusLabel =
|
||||
status === "connected"
|
||||
? `Connected ${role === "player" ? `as ${username}` : "as observer"}`
|
||||
: status === "reconnecting"
|
||||
? "Reconnecting..."
|
||||
: status === "connecting"
|
||||
? "Connecting..."
|
||||
: "Not connected";
|
||||
const isConnectionPage = pathname === "/";
|
||||
|
||||
const disableRoleSwitch =
|
||||
status === "connecting" || status === "reconnecting";
|
||||
const disableRoleSwitch =
|
||||
status === "connecting" || status === "reconnecting";
|
||||
|
||||
const handleBecomeObserver = () => {
|
||||
const handleBecomeObserver = () => {
|
||||
send(cmd.disconnect());
|
||||
router.push("/spectate");
|
||||
};
|
||||
router.push("/spectate");
|
||||
};
|
||||
|
||||
const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const trimmed = nextUsername.trim();
|
||||
if (!trimmed) return;
|
||||
const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const trimmed = nextUsername.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
becomePlayer(trimmed);
|
||||
setShowPlayerModal(false);
|
||||
router.push("/play");
|
||||
};
|
||||
setShowPlayerModal(false);
|
||||
router.push("/play");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="bg-gray-900 border-b border-gray-800 px-4 py-3">
|
||||
<div className="max-w-7xl mx-auto flex items-center gap-4 flex-wrap">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-lg font-bold text-white flex items-center gap-2"
|
||||
>
|
||||
<span className="text-2xl">🔴</span>
|
||||
<span>Connect4</span>
|
||||
<span className="text-gray-400 text-sm font-normal">Moderator</span>
|
||||
</Link>
|
||||
return (
|
||||
<>
|
||||
<nav className="bg-gray-900 border-b border-gray-800 px-4 py-3">
|
||||
<div className="max-w-7xl mx-auto flex items-center gap-4 flex-wrap">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-lg font-bold text-white flex items-center gap-2"
|
||||
>
|
||||
<span className="text-2xl">🔴</span>
|
||||
<span>Connect4</span>
|
||||
<span className="text-gray-400 text-sm font-normal">Moderator</span>
|
||||
</Link>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{!isConnectionPage && (
|
||||
<button
|
||||
onClick={
|
||||
role === "player"
|
||||
? handleBecomeObserver
|
||||
: () => {
|
||||
setNextUsername(username);
|
||||
setShowPlayerModal(true);
|
||||
}
|
||||
}
|
||||
disabled={disableRoleSwitch}
|
||||
className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white"
|
||||
>
|
||||
{role === "player" ? "Become Observer" : "Become Player"}
|
||||
</button>
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{!isConnectionPage && (
|
||||
<button
|
||||
onClick={
|
||||
role === "player"
|
||||
? handleBecomeObserver
|
||||
: () => {
|
||||
setNextUsername(username);
|
||||
setShowPlayerModal(true);
|
||||
}
|
||||
}
|
||||
disabled={disableRoleSwitch}
|
||||
className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white"
|
||||
>
|
||||
{role === "player" ? "Become Observer" : "Become Player"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="text-xs text-gray-400 bg-gray-800 px-3 py-1 rounded-full">
|
||||
{statusLabel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="text-xs text-gray-400 bg-gray-800 px-3 py-1 rounded-full">
|
||||
{statusLabel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{showPlayerModal && (
|
||||
<div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center px-4">
|
||||
<form
|
||||
onSubmit={handleBecomePlayer}
|
||||
className="w-full max-w-sm bg-gray-900 border border-gray-700 rounded-xl p-5 flex flex-col gap-3"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-white">Become Player</h2>
|
||||
<p className="text-sm text-gray-400">
|
||||
Enter a username to connect as a player.
|
||||
</p>
|
||||
{showPlayerModal && (
|
||||
<div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center px-4">
|
||||
<form
|
||||
onSubmit={handleBecomePlayer}
|
||||
className="w-full max-w-sm bg-gray-900 border border-gray-700 rounded-xl p-5 flex flex-col gap-3"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-white">Become Player</h2>
|
||||
<p className="text-sm text-gray-400">
|
||||
Enter a username to connect as a player.
|
||||
</p>
|
||||
|
||||
<input
|
||||
autoFocus
|
||||
value={nextUsername}
|
||||
onChange={(event) => setNextUsername(event.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
|
||||
placeholder="Username"
|
||||
/>
|
||||
<input
|
||||
autoFocus
|
||||
value={nextUsername}
|
||||
onChange={(event) => setNextUsername(event.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
|
||||
placeholder="Username"
|
||||
/>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPlayerModal(false)}
|
||||
className="px-3 py-2 rounded-lg text-sm font-medium bg-gray-700 hover:bg-gray-600 text-white"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPlayerModal(false)}
|
||||
className="px-3 py-2 rounded-lg text-sm font-medium bg-gray-700 hover:bg-gray-600 text-white"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user