62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useAuth } from "@/components/AuthProvider";
|
|
import { LoginForm } from "@/components/LoginForm";
|
|
import { CampaignList } from "@/components/CampaignList";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function Home() {
|
|
const { user, loading } = useAuth();
|
|
const router = useRouter();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<div className="text-center font-mono text-sm text-slate-600 animate-pulse">
|
|
<div className="text-3xl mb-2">🔊</div>
|
|
Connecting to submarine network...
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<div className="w-full max-w-md">
|
|
<div className="text-center mb-8">
|
|
<div className="text-5xl mb-3">🤡💥</div>
|
|
<h1 className="text-3xl font-bold font-mono text-cyan-300 tracking-wider uppercase mb-2">
|
|
BaraBingo
|
|
</h1>
|
|
<p className="text-sm font-mono text-slate-500">
|
|
Barotrauma Chaos Bingo — mark the madness as it happens
|
|
</p>
|
|
</div>
|
|
<LoginForm />
|
|
<div className="mt-6 text-center">
|
|
<p className="text-[10px] text-slate-700 font-mono">
|
|
First user to register as “admin” gets command access
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center min-h-[60vh] pt-8 gap-6">
|
|
<div className="text-center">
|
|
<div className="text-4xl mb-2">🌊🎮</div>
|
|
<h1 className="text-2xl font-mono text-cyan-300 uppercase tracking-wider">
|
|
Welcome, {user.nickname}
|
|
</h1>
|
|
<p className="text-xs text-slate-500 font-mono mt-1">
|
|
Pick a campaign and dive in
|
|
</p>
|
|
</div>
|
|
<CampaignList onSelect={(id) => router.push(`/game/${id}`)} />
|
|
</div>
|
|
);
|
|
}
|