NEO-MOKU

{gameMode === 'pvc' ? `vs AI (${difficulty.toUpperCase()})` : 'Multiplayer'}

{/* GAME STATUS BAR */}

{turn === 'black' && !winner && ⚡} {winner === 'black' && 👑}

PLAYER 1

{isThinking ? 💭 : (turn === 'white' && !winner ? ⚡ : '')} {winner === 'white' && 👑}

{gameMode === 'pvc' ? 'AI BOT' : 'PLAYER 2'}

{/* BOARD AREA */}

{/* Grid Lines */}

{(board || []).map((cell, i) => { const isWinningCell = (winningLine || []).includes(i); const isLastMove = i === lastMoveIndex; return (

makeMove(i)} style={{ position: 'relative', cursor: (!cell && !winner) ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'center' }} > {/* Grid Crosshair - Subtle white/cyan for better visibility on mid-tone bg */}

{/* Stone */} {cell && (

)} {/* Move Preview */} {!cell && !winner && (

)}

); })}

{/* FOOTER ACTIONS */}

{winner ? ( ) : (

{gameMode === 'pvc' ? (turn === 'black' ? 'Your Turn' : 'AI Thinking...') : (turn === 'black' ? "Black's Turn" : "White's Turn")}

)}

{/* TUTORIAL MODAL */} {showTutorial && (

How to Play

The goal is simple: Connect 5 stones in a row!

{/* Horizontal Win */} {/* Diagonal Win */}

Rules

Black plays first.
Players take turns placing one stone.
First to get exactly 5 in a row (horizontally, vertically, or diagonally) wins!

)} {/* SETTINGS MENU OVERLAY */} {showMenu && (

Game Settings

GAME MODE

{gameMode === 'pvc' && (

DIFFICULTY

{['easy', 'medium', 'hard'].map(d => ( ))}

)}

)} {/* CONFETTI */} {showConfetti && (

{[...Array(30)].map((_, i) => (

))}

)} {/* GLOBAL STYLES */}

); }