diff --git a/src/pages/Tetris.tsx b/src/pages/Tetris.tsx index 35a62bc..9f3b6d8 100644 --- a/src/pages/Tetris.tsx +++ b/src/pages/Tetris.tsx @@ -5,6 +5,7 @@ import { useAchievements } from '@/contexts/AchievementsContext'; import { Link } from 'react-router-dom'; import GlitchCrash from '@/components/GlitchCrash'; import { Maximize2, Minimize2, Users, User } from 'lucide-react'; +import { useBrowserFullscreen } from '@/hooks/useGameDimensions'; import GameTouchButton from '@/components/GameTouchButton'; import { MobileControlsDock, MobileControlsSpacer } from '@/components/MobileControlsDock'; @@ -118,6 +119,8 @@ const Tetris = () => { const [isFullscreen, setIsFullscreen] = useState(false); const gameRef = useRef(null); + const { enterFullscreen, exitFullscreen } = useBrowserFullscreen(); + const getCellSize = useCallback(() => { if (typeof window === 'undefined') return 28; const isMobile = window.innerWidth < 768; @@ -142,21 +145,33 @@ const Tetris = () => { useEffect(() => { setCellSize(getCellSize()); }, [isFullscreen, getCellSize, gameMode]); useEffect(() => { - if (gameStarted && isMobile && !isFullscreen) setIsFullscreen(true); - }, [gameStarted, isMobile, isFullscreen]); + if (gameStarted && isMobile && !isFullscreen) { + setIsFullscreen(true); + enterFullscreen(); + } + }, [gameStarted, isMobile, isFullscreen, enterFullscreen]); - const toggleFullscreen = () => { - setIsFullscreen(prev => !prev); + const toggleFullscreen = async () => { + if (!isFullscreen) { + setIsFullscreen(true); + await enterFullscreen(); + } else { + setIsFullscreen(false); + await exitFullscreen(); + } playSound('click'); }; useEffect(() => { const handleEscape = (e: KeyboardEvent) => { - if (e.key === 'Escape' && isFullscreen) setIsFullscreen(false); + if (e.key === 'Escape' && isFullscreen) { + setIsFullscreen(false); + exitFullscreen(); + } }; window.addEventListener('keydown', handleEscape); return () => window.removeEventListener('keydown', handleEscape); - }, [isFullscreen]); + }, [isFullscreen, exitFullscreen]); useEffect(() => { const saved = localStorage.getItem(HIGHSCORE_KEY);