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

feat: confetti, winner popup, bracket view

Browse Source
This commit is contained in:
Joshua Higgins
2026-03-30 16:53:13 -04:00
Unverified
parent 77724ba260
commit e4fa58f327
13 changed files with 640 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
"use client";
import { FormEvent, useEffect, useState } from "react";
import { SubmitEvent, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { DEFAULT_WS_URL } from "@/lib/protocol";
import { useConnection } from "@/lib/connection";
@@ -24,7 +24,7 @@ export default function Home() {
}
}, [shouldRedirectToConnect, clearRedirectFlag]);
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
const onSubmit = (event: SubmitEvent<HTMLFormElement>) => {
event.preventDefault();
connect({ role: "observer", wsUrl });
@@ -35,26 +35,12 @@ export default function Home() {
<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>
<h1 className="text-3xl font-bold text-white">Connect to 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>
)}
{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">
@@ -68,6 +54,18 @@ export default function Home() {
/>
</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>
)}
<div className="flex flex-wrap gap-2 pt-2">
<button
type="submit"
@@ -75,7 +73,7 @@ export default function Home() {
>
{status === "connecting" || status === "reconnecting"
? "Connecting..."
: "Connect to Server"}
: "Connect"}
</button>
</div>
</form>