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:
+21
-6
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user