58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import ChessGame from "@/components/chess-game"
|
|
import { Button } from "@/components/ui/button"
|
|
import { GameMode } from "@/lib/chess-types"
|
|
|
|
export default function Home() {
|
|
const [gameMode, setGameMode] = useState<GameMode | null>(null)
|
|
|
|
if (gameMode === null) {
|
|
return (
|
|
<main className="flex min-h-screen flex-col items-center justify-center p-4 bg-gray-100">
|
|
<h1 className="text-3xl font-bold mb-6 text-center">Web Chess Game</h1>
|
|
<div className="flex flex-col items-center gap-4">
|
|
<p className="text-lg text-gray-600 mb-4">Choose your game mode:</p>
|
|
<div className="flex gap-4">
|
|
<Button
|
|
onClick={() => setGameMode(GameMode.CLASSIC)}
|
|
className="px-8 py-4 text-lg"
|
|
variant="default"
|
|
>
|
|
New Game (Classic)
|
|
</Button>
|
|
<Button
|
|
onClick={() => setGameMode(GameMode.GHOST)}
|
|
className="px-8 py-4 text-lg"
|
|
variant="outline"
|
|
>
|
|
New Game (Ghost)
|
|
</Button>
|
|
</div>
|
|
<div className="mt-4 text-sm text-gray-500 max-w-md text-center">
|
|
<p><strong>Classic:</strong> Traditional chess rules</p>
|
|
<p><strong>Ghost:</strong> Goal is to lose all your pieces. Must capture when possible!</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main className="flex min-h-screen flex-col items-center justify-center p-4 bg-gray-100">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<h1 className="text-3xl font-bold text-center">Web Chess Game</h1>
|
|
<Button
|
|
onClick={() => setGameMode(null)}
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
Change Mode
|
|
</Button>
|
|
</div>
|
|
<ChessGame gameMode={gameMode} />
|
|
</main>
|
|
)
|
|
}
|