Fix tetris fullscreen

Restore and unify fullscreen across games by reintroducing useBrowserFullscreen in Tetris and aligning fullscreen behavior with other games. Ensure mobile auto-fullscreen and Escape handling work, and fix related imports and toggle logic.

X-Lovable-Edit-ID: edt-ab4b55a8-5fc4-4eb0-a4d8-1e13abc55f69
This commit is contained in:
gpt-engineer-app[bot]
2026-01-13 10:05:25 +00:00
+21 -6
View File
@@ -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<HTMLDivElement>(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);