joshuafhiggins/connect4-moderator-observer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 8 Activity

fmt

Browse Source
This commit is contained in:
Joshua Higgins
2026-03-27 10:43:10 -04:00
Unverified
parent 2495f41df9
commit c8781fddaa
15 changed files with 1650 additions and 1630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
connect4-ui/app/page.tsx
View File

@@ -6,80 +6,80 @@ import { DEFAULT_WS_URL } from "@/lib/protocol";
import { useConnection } from "@/lib/connection";
export default function Home() {
const router = useRouter();
const {
connect,
role,
status,
wsUrl: connectedWsUrl,
shouldRedirectToConnect,
clearRedirectFlag,
} = useConnection();
const router = useRouter();
const {
connect,
role,
status,
wsUrl: connectedWsUrl,
shouldRedirectToConnect,
clearRedirectFlag,
} = useConnection();
const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
useEffect(() => {
if (shouldRedirectToConnect) {
clearRedirectFlag();
}
}, [shouldRedirectToConnect, clearRedirectFlag]);
useEffect(() => {
if (shouldRedirectToConnect) {
clearRedirectFlag();
}
}, [shouldRedirectToConnect, clearRedirectFlag]);
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
connect({ role: "observer", wsUrl });
router.push("/spectate");
};
connect({ role: "observer", wsUrl });
router.push("/spectate");
};
return (
<div className="max-w-3xl mx-auto py-10">
<div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 md:p-8 flex flex-col gap-6">
<div>
<h1 className="text-3xl font-bold text-white">
Connect to Moderator Server
</h1>
<p className="text-sm text-gray-400 mt-2">
Connect as an observer to watch live matches and tournaments.
</p>
</div>
return (
<div className="max-w-3xl mx-auto py-10">
<div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 md:p-8 flex flex-col gap-6">
<div>
<h1 className="text-3xl font-bold text-white">
Connect to Moderator Server
</h1>
<p className="text-sm text-gray-400 mt-2">
Connect as an observer to watch live matches and tournaments.
</p>
</div>
{shouldRedirectToConnect && (
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
Connection lost. Please reconnect to continue.
</div>
)}
{shouldRedirectToConnect && (
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
Connection lost. Please reconnect to continue.
</div>
)}
{status === "connected" && role && (
<div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
Connected to {connectedWsUrl} as observer.
</div>
)}
{status === "connected" && role && (
<div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
Connected to {connectedWsUrl} as observer.
</div>
)}
<form className="flex flex-col gap-4" onSubmit={onSubmit}>
<div>
<label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
Server URL
</label>
<input
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"
value={wsUrl}
onChange={(e) => setWsUrl(e.target.value)}
placeholder="wss://..."
/>
</div>
<form className="flex flex-col gap-4" onSubmit={onSubmit}>
<div>
<label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
Server URL
</label>
<input
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"
value={wsUrl}
onChange={(e) => setWsUrl(e.target.value)}
placeholder="wss://..."
/>
</div>
<div className="flex flex-wrap gap-2 pt-2">
<button
type="submit"
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
>
{status === "connecting" || status === "reconnecting"
? "Connecting..."
: "Connect to Server"}
</button>
</div>
</form>
</div>
</div>
);
<div className="flex flex-wrap gap-2 pt-2">
<button
type="submit"
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
>
{status === "connecting" || status === "reconnecting"
? "Connecting..."
: "Connect to Server"}
</button>
</div>
</form>
</div>
</div>
);
}