import { useState, useEffect } from 'react'; import { AnimatePresence } from 'framer-motion'; import { useTetris } from './hooks/useTetris'; import { Board } from './components/Board'; import { Controls } from './components/Controls'; import { SidePiece, Stats } from './components/HoldNext'; import { MainMenu, GameOverMenu, PauseMenu, SettingsMenu } from './components/Menus'; import { yandexSdk } from './services/yandex'; type GameView = 'menu' | 'playing' | 'settings' | 'leaderboard'; export function App() { const [view, setView] = useState('menu'); const [ghostEnabled, setGhostEnabled] = useState(true); const { gameState, moveLeft, moveRight, moveDown, rotatePiece, togglePause, resetGame, continueGame, ghostPos, } = useTetris(); // Yandex SDK Init useEffect(() => { yandexSdk.init(); }, []); // Handle game over in SDK useEffect(() => { if (gameState.isGameOver) { yandexSdk.setLeaderboardScore(gameState.score); } }, [gameState.isGameOver, gameState.score]); // Keyboard support useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (view !== 'playing' || gameState.isPaused || gameState.isGameOver) return; switch (e.key) { case 'ArrowLeft': moveLeft(); break; case 'ArrowRight': moveRight(); break; case 'ArrowDown': moveDown(); break; case 'ArrowUp': rotatePiece(true); break; case 'p': togglePause(); break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [view, gameState.isPaused, gameState.isGameOver, moveLeft, moveRight, moveDown, rotatePiece, togglePause]); const startGame = () => { resetGame(); setView('playing'); }; const handleRevive = async () => { const success = await yandexSdk.showRewarded(); if (success) { continueGame(); } }; return (

{/* Background Decor */}

{/* Main Game Interface */}

{/* Compact Header */}

{/* Game Layout - Main Board (Expanded) */}

{/* Controls at Bottom */}

rotatePiece(true)} onPause={togglePause} onStart={() => { if (view !== 'playing') startGame(); else if (gameState.isGameOver) resetGame(); else if (gameState.isPaused) togglePause(); }} />

{/* Menus / Overlays */} {view === 'menu' && ( setView('settings')} onLeaderboard={() => {}} /> )} {view === 'settings' && ( setView('menu')} ghostEnabled={ghostEnabled} setGhostEnabled={setGhostEnabled} /> )} {gameState.isPaused && ( { togglePause(); setView('menu'); }} /> )} {gameState.isGameOver && ( setView('menu')} onContinue={handleRevive} /> )}

); }