-
-
- {socketStatusLabel()}
-
+
+
+
-
- {gameStatus !== "playing" && (
-
-
- {gameStatus === "checkmate" && "Checkmate!"}
- {gameStatus === "stalemate" && "Stalemate!"}
- {gameStatus === "draw" && "Draw!"}
- {gameStatus === "resigned" && "Resigned!"}
-
-
- )}
-
- {game.isCheck() && gameStatus === "playing" && (
-
-
Check!
+
- )}
-
-
- Game ID: {gameId?.slice(0, 12)}...
-
-
- {/* Move History */}
-
-
-
- {movePairs.length === 0 ? (
-
- No moves yet.{" "}
- {isMyTurn ? "Your turn to move!" : "Waiting for opponent..."}
-
- ) : (
- movePairs.map((pair, i) => (
+
+
+ {Array.from({ length: 64 }).map((_, i) => (
-
- {i + 1}.
-
-
- {pair[0]}
-
-
- {pair[1] ?? ""}
-
-
- ))
- )}
+ className={`${
+ (Math.floor(i / 8) + (i % 8)) % 2 === 0
+ ? "bg-gray-700/30"
+ : "bg-gray-600/20"
+ } rounded-sm shimmer-bg`}
+ />
+ ))}
+
-
- {/* Cheat Detection Panel */}
-
setIsCheatPanelExpanded((prev: boolean) => !prev)}
- />
-
- {/* Controls — desktop only, mobile controls are above the sidebar */}
-
-
-
+
-
- {/* Reconnection button */}
- {socketStatus === "disconnected" && gameStatus === "playing" && (
-
- )}
+ ),
+ },
+);
- {overlayResult && (
-
router.push("/")}
- onPlayOnline={() => router.push("/")}
- />
- )}
-
- );
+export default function PlayOnlinePage() {
+ return
;
}
diff --git a/frontend/components/chess/HeroChessGame.tsx b/frontend/components/chess/HeroChessGame.tsx
new file mode 100644
index 0000000..0679969
--- /dev/null
+++ b/frontend/components/chess/HeroChessGame.tsx
@@ -0,0 +1,591 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import dynamic from "next/dynamic";
+import { Chess } from "chess.js";
+import { FaUser } from "react-icons/fa";
+import { RiAliensFill } from "react-icons/ri";
+import { useChessSocket } from "@/hook/useChessSocket";
+import { useMatchmaking } from "@/hook/useMatchmaking";
+import { useStockfishWASM, AnalysisResult } from "@/components/chess/StockfishWASM";
+import { useRouter } from "next/navigation";
+import { useMatchmakingContext } from "@/context/matchmakingContext";
+import { getChessVariantById } from "@/lib/chessVariants";
+import { GameResultOverlay } from "@/components/GameResultOverlay";
+import type { GameResult } from "@/components/GameResultOverlay";
+import { CapturedPieces } from "@/components/chess/CapturedPieces";
+import { EvaluationBar } from "@/components/chess/EvaluationBar";
+import { MoveHistory } from "@/components/chess/MoveHistory";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
+
+const ChessboardComponent = dynamic(
+ () => import("@/components/chess/ChessboardComponent"),
+ { ssr: false },
+);
+const GameModeButtons = dynamic(() => import("@/components/GameModeButtons"), {
+ ssr: false,
+});
+const AiPersonalityModal = dynamic(
+ () =>
+ import("@/app/components/matchmaking/AiPersonalityModal").then((m) => ({
+ default: m.AiPersonalityModal,
+ })),
+ { ssr: false },
+);
+const MatchmakingModal = dynamic(
+ () =>
+ import("@/app/components/matchmaking/MatchmakingModal").then((m) => ({
+ default: m.MatchmakingModal,
+ })),
+ { ssr: false },
+);
+const ChessVariantSelector = dynamic(
+ () =>
+ import("@/components/ChessVariantSelector").then((m) => ({
+ default: m.ChessVariantSelector,
+ })),
+ { ssr: false },
+);
+
+interface HeroChessGameProps {
+ onlinePlayerCount: number | null;
+ heroBranding: React.ReactNode;
+}
+
+export default function HeroChessGame({
+ onlinePlayerCount,
+ heroBranding,
+}: HeroChessGameProps) {
+ const [game] = useState(new Chess());
+ const [position, setPosition] = useState("start");
+ const [viewIndex, setViewIndex] = useState
(null);
+ const [gameMode, setGameMode] = useState<"online" | "bot" | null>(null);
+ const router = useRouter();
+ const [isPersonalityModalOpen, setIsPersonalityModalOpen] = useState(false);
+ const [isMatchmakingModalOpen, setIsMatchmakingModalOpen] = useState(false);
+ const [botAnalysis, setBotAnalysis] = useState(null);
+
+ const [heroGameResult, setHeroGameResult] = useState(null);
+ const [heroMoveCount, setHeroMoveCount] = useState(0);
+
+ const { aiPersonality, chessVariant, setChessVariant } =
+ useMatchmakingContext();
+ const selectedVariant = getChessVariantById(chessVariant);
+
+ const {
+ status: matchmakingStatus,
+ playerColor,
+ error: matchmakingError,
+ joinMatchmaking,
+ cancelMatchmaking,
+ sendMove: matchmakingSendMove,
+ lastOpponentMove,
+ gameId,
+ } = useMatchmaking();
+
+ const {
+ status: socketStatus,
+ sendMove: socketSendMove,
+ disconnect: disconnectSocket,
+ reconnect: reconnectSocket,
+ } = useChessSocket(gameId);
+
+ const { analyzePosition, isReady: stockfishReady, isAnalyzing } = useStockfishWASM({
+ jsBridgePath: "/assets/stockfish.js",
+ defaultTimeLimit: 250,
+ });
+
+ const currentDisplayPosition = React.useMemo(() => {
+ if (viewIndex === null) return position;
+ const tempGame = new Chess();
+ const history = game.history();
+ for (let i = 0; i <= viewIndex; i++) {
+ try { tempGame.move(history[i]); } catch {}
+ }
+ return tempGame.fen();
+ }, [position, viewIndex, game]);
+
+ const handleMoveClick = useCallback((index: number) => {
+ setViewIndex(index === game.history().length - 1 ? null : index);
+ }, [game]);
+
+ const sendMove = useCallback(
+ (from: string, to: string, promotion?: string) => {
+ if (gameId) {
+ socketSendMove({ from, to, promotion: promotion || "q" });
+ } else {
+ matchmakingSendMove(from, to, promotion);
+ }
+ },
+ [gameId, socketSendMove, matchmakingSendMove],
+ );
+
+ useEffect(() => {
+ if (matchmakingStatus === "match_found" && gameId) {
+ router.push(`/play/${gameId}`);
+ }
+ }, [matchmakingStatus, gameId, router]);
+
+ useEffect(() => {
+ if (!lastOpponentMove || gameMode !== "online") return;
+ try {
+ const move = game.move({
+ from: lastOpponentMove.from,
+ to: lastOpponentMove.to,
+ promotion: lastOpponentMove.promotion ?? "q",
+ });
+ if (move) {
+ setPosition(game.fen());
+ setViewIndex(null);
+ }
+ } catch {
+ // illegal move from server — ignore
+ }
+ }, [lastOpponentMove, game, gameMode]);
+
+ useEffect(() => {
+ let active = true;
+
+ const playBotMove = async () => {
+ const isHeroMode = gameMode === null;
+ const isBotMode = gameMode === "bot";
+ if (!stockfishReady || isAnalyzing || !(isHeroMode || isBotMode)) return;
+ if (game.turn() !== "b" || game.isGameOver()) return;
+
+ try {
+ let depth = 5;
+ if (isBotMode) {
+ depth = 10;
+ if (aiPersonality === "aggressive") depth = 15;
+ if (aiPersonality === "defensive") depth = 18;
+ }
+
+ const fenBeforeAnalysis = game.fen();
+ const result = await analyzePosition(fenBeforeAnalysis, depth);
+ if (
+ active &&
+ result.bestMove &&
+ game.fen() === fenBeforeAnalysis &&
+ !game.isGameOver()
+ ) {
+ setBotAnalysis(result);
+ const from = result.bestMove.substring(0, 2);
+ const to = result.bestMove.substring(2, 4);
+ const promotion =
+ result.bestMove.length > 4 ? result.bestMove.substring(4, 5) : undefined;
+ game.move({ from, to, promotion });
+ setPosition(game.fen());
+ setViewIndex(null);
+ setHeroMoveCount((c) => c + 1);
+ }
+ } catch (e) {
+ console.error("Bot failed to move:", e);
+ }
+ };
+
+ const timer = setTimeout(playBotMove, 400);
+ return () => {
+ active = false;
+ clearTimeout(timer);
+ };
+ }, [position, gameMode, analyzePosition, aiPersonality, game, stockfishReady, isAnalyzing]);
+
+ useEffect(() => {
+ if (!game.isGameOver()) return;
+ if (gameMode !== null && gameMode !== "bot") return;
+
+ if (game.isCheckmate()) {
+ setHeroGameResult(game.turn() === "w" ? "black_wins" : "white_wins");
+ } else if (game.isStalemate()) {
+ setHeroGameResult("stalemate");
+ } else {
+ setHeroGameResult("draw");
+ }
+ }, [position, game, gameMode]);
+
+ const isMyTurn = (() => {
+ if (gameMode === null) {
+ return game.turn() === "w";
+ }
+ if (gameMode === "bot") {
+ return game.turn() === "w";
+ }
+ if (gameMode === "online") {
+ return (
+ socketStatus === "connected" &&
+ ((playerColor === "white" && game.turn() === "w") ||
+ (playerColor === "black" && game.turn() === "b"))
+ );
+ }
+ return true;
+ })();
+
+ const handleMove = useCallback(
+ ({
+ sourceSquare,
+ targetSquare,
+ }: {
+ sourceSquare: string;
+ targetSquare: string;
+ }) => {
+ if (!isMyTurn || game.isGameOver()) return false;
+ if (viewIndex !== null) {
+ setViewIndex(null);
+ return false;
+ }
+
+ try {
+ const move = game.move({
+ from: sourceSquare,
+ to: targetSquare,
+ promotion: "q",
+ });
+ if (move === null) return false;
+
+ setBotAnalysis(null);
+ setHeroMoveCount((c) => c + 1);
+ requestAnimationFrame(() => setPosition(game.fen()));
+ if (gameMode === "online") {
+ sendMove(sourceSquare, targetSquare, "q");
+ }
+
+ setPosition(game.fen());
+ setViewIndex(null);
+ return true;
+ } catch {
+ return false;
+ }
+ },
+ [isMyTurn, game, gameMode, sendMove, viewIndex],
+ );
+
+ const handleHeroPlayAgain = useCallback(() => {
+ game.reset();
+ setPosition("start");
+ setBotAnalysis(null);
+ setHeroGameResult(null);
+ setHeroMoveCount(0);
+ }, [game]);
+
+ const handleExit = () => {
+ if (gameMode === "online") {
+ cancelMatchmaking();
+ disconnectSocket();
+ }
+ game.reset();
+ setPosition("start");
+ setGameMode(null);
+ setBotAnalysis(null);
+ setHeroGameResult(null);
+ setHeroMoveCount(0);
+ };
+
+ const handleSetGameMode = (mode: "online" | "bot" | null) => {
+ if (mode === "online") {
+ setGameMode(mode);
+ setIsMatchmakingModalOpen(true);
+ } else if (mode === "bot") {
+ setGameMode(mode);
+ setIsPersonalityModalOpen(true);
+ } else {
+ setGameMode(mode);
+ }
+ };
+
+ const handleMatchmakingConfirm = (type: "Rated" | "Casual") => {
+ setIsMatchmakingModalOpen(false);
+ joinMatchmaking(type, chessVariant);
+ };
+
+ const handleMatchmakingClose = () => {
+ setIsMatchmakingModalOpen(false);
+ setGameMode(null);
+ };
+
+ const handlePersonalityConfirm = () => {
+ setIsPersonalityModalOpen(false);
+ game.reset();
+ setPosition("start");
+ setBotAnalysis(null);
+ setHeroGameResult(null);
+ setHeroMoveCount(0);
+ };
+
+ const handlePersonalityClose = () => {
+ setIsPersonalityModalOpen(false);
+ setGameMode(null);
+ };
+
+ const handlePlayOnlineFromResult = () => {
+ setHeroGameResult(null);
+ handleSetGameMode("online");
+ };
+
+ const onlineStatusLabel = () => {
+ if (socketStatus === "reconnecting") return "🔄 Reconnecting...";
+ if (matchmakingStatus === "match_found") return "✅ Match found! Starting…";
+ if (socketStatus === "connected")
+ return `🟢 Online Match (you are ${playerColor})`;
+ if (matchmakingStatus === "error" || socketStatus === "error")
+ return `❌ ${matchmakingError ?? "Connection error"}`;
+ return "Online Match";
+ };
+
+ return (
+
+
+
+
+
+
+
+ {botAnalysis && (
+
+
+ Eval:{" "}
+ {botAnalysis.evaluation != null
+ ? `${botAnalysis.evaluation > 0 ? "+" : ""}${botAnalysis.evaluation.toFixed(2)}`
+ : "N/A"}
+
+ |
+ D{botAnalysis.depth}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {heroMoveCount > 0
+ ? `Move ${Math.ceil(heroMoveCount / 2)}`
+ : "Make your first move!"}
+
+ {!stockfishReady && (
+
+
+ Loading engine...
+
+ )}
+ {stockfishReady && heroMoveCount === 0 && (
+
+
+ Engine ready
+
+ )}
+
+
+
+
+
+
+
+
+ {heroBranding}
+
+
+
+
+
+
+
+ Choose Your Arena
+
+
+ Play online, train with bots, or solve puzzles to earn XLM
+
+
+
+
+
+
+ {gameMode && (
+
+
+
+ {gameMode === "online" ? (
+
+ ) : (
+
+ )}
+
+
+
+ {gameMode === "online"
+ ? onlineStatusLabel()
+ : "Playing vs Bot"}
+
+
+ {selectedVariant.label} / {selectedVariant.averageGameTime}
+
+
+
+
+
+ )}
+
+ {gameMode === "online" && matchmakingStatus === "searching" && (
+
+
+
+
+ Looking for opponent...
+
+
+
+
+
+
+ {onlinePlayerCount} Players online
+
+
+ Queueing for {selectedVariant.label}
+
+
+
+
+
+ )}
+
+ {gameMode === "online" && socketStatus === "reconnecting" && (
+
+
+
+
+
+ Reconnecting...
+
+
+ Attempting to restore connection
+
+
+
+
+
+ )}
+
+ {heroGameResult && (
+
+ )}
+
+
+
+
+
+ {Array.from({ length: 64 }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Opponent
+
+ {playerColor === "white" ? "Black" : "White"}
+
+
+
+
+
+
+ {formatTime(playerColor === "white" ? blackTime : whiteTime)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
You
+
+ {playerColor}
+ {isMyTurn && (
+
+ (Your turn)
+
+ )}
+
+
+
+
+
+
+ {formatTime(playerColor === "white" ? whiteTime : blackTime)}
+
+
+
+
+
+
+
+
+
+
+ {socketStatusLabel()}
+
+
+
+
+
+
+
+
+
+ Game Status
+
+
+
+
+ {socketStatusLabel()}
+
+
+
+
+ {gameStatus !== "playing" && (
+
+
+ {gameStatus === "checkmate" && "Checkmate!"}
+ {gameStatus === "stalemate" && "Stalemate!"}
+ {gameStatus === "draw" && "Draw!"}
+ {gameStatus === "resigned" && "Resigned!"}
+
+
+ )}
+
+ {game.isCheck() && gameStatus === "playing" && (
+
+ )}
+
+
+ Game ID: {gameId?.slice(0, 12)}...
+
+
+
+
+
+
+ {movePairs.length === 0 ? (
+
+ No moves yet.{" "}
+ {isMyTurn ? "Your turn to move!" : "Waiting for opponent..."}
+
+ ) : (
+ movePairs.map((pair, i) => (
+
+
+ {i + 1}.
+
+
+ {pair[0]}
+
+
+ {pair[1] ?? ""}
+
+
+ ))
+ )}
+
+
+
+
setIsCheatPanelExpanded((prev: boolean) => !prev)}
+ />
+
+
+
+
+
+
+ {socketStatus === "disconnected" && gameStatus === "playing" && (
+
+ )}
+
+
+
+
+ {overlayResult && (
+
router.push("/")}
+ onPlayOnline={() => router.push("/")}
+ />
+ )}
+