everything

connect4-ui/components/Nav.tsx

@@ -1,39 +1,121 @@
 "use client";
 import Link from "next/link";
+import { FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
-
-const links = [
-  { href: "/spectate", label: "👁 Spectate", desc: "Watch live matches" },
-  { href: "/tournament", label: "🏆 Tournament", desc: "Tournament standings" },
-  { href: "/play", label: "🎮 Play", desc: "Join as a player" },
-];
+import { useConnection } from "@/lib/connection";
+import { cmd, DEFAULT_WS_URL } from "@/lib/protocol";
 
 export default function Nav() {
-  const path = usePathname();
-  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-6">
-        <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="flex gap-1 ml-4">
-          {links.map(({ href, label }) => (
-            <Link
-              key={href}
-              href={href}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                path === href
-                  ? "bg-blue-600 text-white"
-                  : "text-gray-300 hover:bg-gray-800 hover:text-white"
-              }`}
-            >
-              {label}
-            </Link>
-          ))}
-        </div>
-      </div>
-    </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 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 handleBecomeObserver = () => {
+    send(cmd.disconnect());
+		router.push("/spectate");
+	};
+
+	const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const trimmed = nextUsername.trim();
+		if (!trimmed) return;
+
+    becomePlayer(trimmed);
+		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>
+
+					<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>
+
+			{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"
+						/>
+
+						<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>
+			)}
+		</>
+	);
 }