+ {disabled && gameState.currentPlayerId === 'ai' && gameState.status === 'playing' && (
+
+
+
+ 🤖 AI's Turn - Board Locked
+
+
+
+ )}
+
+
+
+
+
+
+
+ {gameState.status === 'playing' && (
+ <>
+ Current turn: {' '}
+
+ {gameState.currentPlayerId === 'player1' ? 'Your turn (X)' : 'AI thinking... (O)'}
+
+ >
+ )}
+ {gameState.status === 'finished' && gameState.winner && (
+
+ {gameState.winner === 'player1' && 'You won! 🎉'}
+ {gameState.winner === 'ai' && 'AI won! 🤖'}
+ {gameState.winner === 'draw' && "It's a draw! 🤝"}
+
+ )}
+
+
+ 💡 Click and drag to rotate • Scroll to zoom
+
+
+
+ )
+}
diff --git a/web/src/components/ui/GameControls.tsx b/web/src/components/ui/GameControls.tsx
index 66391ca..bc2aa4e 100644
--- a/web/src/components/ui/GameControls.tsx
+++ b/web/src/components/ui/GameControls.tsx
@@ -19,6 +19,10 @@ interface GameControlsProps {
onDelete?: () => void
/** Whether to show the delete button */
showDelete?: boolean
+ /** Callback for toggling 3D view */
+ onViewToggle?: () => void
+ /** Whether 3D mode is active */
+ is3DMode?: boolean
/** Additional custom controls */
children?: ReactNode
/** Additional CSS classes */
@@ -41,6 +45,8 @@ export function GameControls({
showReset = false,
onDelete,
showDelete = false,
+ onViewToggle,
+ is3DMode = false,
children,
className = ''
}: GameControlsProps) {
@@ -105,6 +111,23 @@ export function GameControls({
Delete Game
)}
+
+ {onViewToggle && (
+