mirror of
https://github.com/JorySeverijnse/ui-fixer-supreme.git
synced 2026-01-29 17:58:38 +00:00
395 lines
22 KiB
TypeScript
395 lines
22 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useSettings } from '@/contexts/SettingsContext';
|
|
import { useAchievements } from '@/contexts/AchievementsContext';
|
|
import { Link } from 'react-router-dom';
|
|
import GlitchCrash from '@/components/GlitchCrash';
|
|
import { Maximize2, Minimize2 } from 'lucide-react';
|
|
import { useBrowserFullscreen } from '@/hooks/useGameDimensions';
|
|
import GameTouchButton from '@/components/GameTouchButton';
|
|
|
|
const GRID_WIDTH = 21;
|
|
const GRID_HEIGHT = 21;
|
|
const TICK_SPEED = 180;
|
|
const POWER_DURATION = 8000;
|
|
const MAX_SCORE = 4294967296;
|
|
const HIGHSCORE_KEY = 'pacman-highscore';
|
|
|
|
type Direction = 'up' | 'down' | 'left' | 'right';
|
|
type Position = { x: number; y: number };
|
|
|
|
const MAZE_TEMPLATE = [
|
|
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
|
[1,3,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,3,1],
|
|
[1,0,1,1,0,1,1,1,1,0,1,0,1,1,1,1,0,1,1,0,1],
|
|
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
|
[1,0,1,1,0,1,0,1,1,1,1,1,1,1,0,1,0,1,1,0,1],
|
|
[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
|
|
[1,1,1,1,0,1,1,1,1,0,1,0,1,1,1,1,0,1,1,1,1],
|
|
[1,1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1],
|
|
[1,1,1,1,0,1,0,1,1,0,0,0,1,1,0,1,0,1,1,1,1],
|
|
[2,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,2],
|
|
[1,1,1,1,0,1,0,1,1,1,1,1,1,1,0,1,0,1,1,1,1],
|
|
[1,1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1],
|
|
[1,1,1,1,0,1,0,1,1,1,1,1,1,1,0,1,0,1,1,1,1],
|
|
[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1],
|
|
[1,0,1,1,0,1,1,1,1,0,1,0,1,1,1,1,0,1,1,0,1],
|
|
[1,3,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,3,1],
|
|
[1,1,0,1,0,1,0,1,1,1,1,1,1,1,0,1,0,1,0,1,1],
|
|
[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
|
|
[1,0,1,1,1,1,1,1,1,0,1,0,1,1,1,1,1,1,1,0,1],
|
|
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
|
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
|
];
|
|
|
|
const Pacman = () => {
|
|
const { playSound } = useSettings();
|
|
const { checkGameScoreAchievements, unlockMaxScore } = useAchievements();
|
|
const [pacman, setPacman] = useState<Position>({ x: 10, y: 15 });
|
|
const [direction, setDirection] = useState<Direction>('right');
|
|
const [nextDirection, setNextDirection] = useState<Direction>('right');
|
|
const [mouthOpen, setMouthOpen] = useState(true);
|
|
const [ghosts, setGhosts] = useState<{ pos: Position; dir: Direction; eaten: boolean }[]>([
|
|
{ pos: { x: 9, y: 9 }, dir: 'left', eaten: false },
|
|
{ pos: { x: 10, y: 9 }, dir: 'up', eaten: false },
|
|
{ pos: { x: 11, y: 9 }, dir: 'right', eaten: false },
|
|
]);
|
|
const [dots, setDots] = useState<Set<string>>(new Set());
|
|
const [powerPellets, setPowerPellets] = useState<Set<string>>(new Set());
|
|
const [isPowered, setIsPowered] = useState(false);
|
|
const [score, setScore] = useState(0);
|
|
const [highScore, setHighScore] = useState(0);
|
|
const [gameOver, setGameOver] = useState(false);
|
|
const [gameComplete, setGameComplete] = useState(false);
|
|
const [gameStarted, setGameStarted] = useState(false);
|
|
const [isPaused, setIsPaused] = useState(false);
|
|
const [showGlitchCrash, setShowGlitchCrash] = useState(false);
|
|
const [level, setLevel] = useState(1);
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const gameRef = useRef<HTMLDivElement>(null);
|
|
const powerTimerRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
|
|
|
|
const getCellSize = useCallback(() => {
|
|
if (typeof window === 'undefined') return 20;
|
|
const isMobile = window.innerWidth < 768;
|
|
if (isMobile) {
|
|
const maxWidth = window.innerWidth - 40;
|
|
const maxHeight = window.innerHeight - 300;
|
|
return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 16);
|
|
}
|
|
return isFullscreen ? 26 : 20;
|
|
}, [isFullscreen]);
|
|
|
|
const [cellSize, setCellSize] = useState(getCellSize);
|
|
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => setCellSize(getCellSize());
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, [getCellSize]);
|
|
|
|
useEffect(() => { setCellSize(getCellSize()); }, [isFullscreen, getCellSize]);
|
|
|
|
useEffect(() => {
|
|
if (gameStarted && isMobile && !isFullscreen) { setIsFullscreen(true); enterFullscreen(); }
|
|
}, [gameStarted, isMobile, isFullscreen, enterFullscreen]);
|
|
|
|
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); exitFullscreen(); } };
|
|
window.addEventListener('keydown', handleEscape);
|
|
return () => window.removeEventListener('keydown', handleEscape);
|
|
}, [isFullscreen, exitFullscreen]);
|
|
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem(HIGHSCORE_KEY);
|
|
if (saved) setHighScore(Math.min(parseInt(saved, 10), MAX_SCORE));
|
|
}, []);
|
|
|
|
// Check score achievements
|
|
useEffect(() => {
|
|
if (score > 0) {
|
|
checkGameScoreAchievements('pacman', score);
|
|
if (score >= MAX_SCORE) unlockMaxScore();
|
|
}
|
|
}, [score, checkGameScoreAchievements, unlockMaxScore]);
|
|
|
|
const initDots = useCallback(() => {
|
|
const newDots = new Set<string>();
|
|
const newPowerPellets = new Set<string>();
|
|
for (let y = 0; y < GRID_HEIGHT; y++) {
|
|
for (let x = 0; x < GRID_WIDTH; x++) {
|
|
if (MAZE_TEMPLATE[y][x] === 0) newDots.add(`${x},${y}`);
|
|
else if (MAZE_TEMPLATE[y][x] === 3) newPowerPellets.add(`${x},${y}`);
|
|
}
|
|
}
|
|
newDots.delete('10,15'); newDots.delete('9,9'); newDots.delete('10,9'); newDots.delete('11,9');
|
|
return { dots: newDots, powerPellets: newPowerPellets };
|
|
}, []);
|
|
|
|
const canMove = (pos: Position, dir: Direction): boolean => {
|
|
let newX = pos.x, newY = pos.y;
|
|
switch (dir) { case 'up': newY--; break; case 'down': newY++; break; case 'left': newX--; break; case 'right': newX++; break; }
|
|
if (newX < 0) return MAZE_TEMPLATE[newY]?.[GRID_WIDTH - 1] !== 1;
|
|
if (newX >= GRID_WIDTH) return MAZE_TEMPLATE[newY]?.[0] !== 1;
|
|
if (newY < 0 || newY >= GRID_HEIGHT) return false;
|
|
return MAZE_TEMPLATE[newY][newX] !== 1;
|
|
};
|
|
|
|
const moveEntity = (pos: Position, dir: Direction): Position => {
|
|
let newX = pos.x, newY = pos.y;
|
|
switch (dir) { case 'up': newY--; break; case 'down': newY++; break; case 'left': newX--; break; case 'right': newX++; break; }
|
|
if (newX < 0) newX = GRID_WIDTH - 1;
|
|
if (newX >= GRID_WIDTH) newX = 0;
|
|
return { x: newX, y: newY };
|
|
};
|
|
|
|
const activatePowerMode = () => {
|
|
if (powerTimerRef.current) clearTimeout(powerTimerRef.current);
|
|
setIsPowered(true);
|
|
powerTimerRef.current = setTimeout(() => { setIsPowered(false); setGhosts(prev => prev.map(g => ({ ...g, eaten: false }))); }, POWER_DURATION);
|
|
};
|
|
|
|
const startGame = () => {
|
|
if (powerTimerRef.current) clearTimeout(powerTimerRef.current);
|
|
setPacman({ x: 10, y: 15 }); setDirection('right'); setNextDirection('right'); setMouthOpen(true);
|
|
setGhosts([{ pos: { x: 9, y: 9 }, dir: 'left', eaten: false }, { pos: { x: 10, y: 9 }, dir: 'up', eaten: false }, { pos: { x: 11, y: 9 }, dir: 'right', eaten: false }]);
|
|
const { dots: newDots, powerPellets: newPowerPellets } = initDots();
|
|
setDots(newDots); setPowerPellets(newPowerPellets); setIsPowered(false); setScore(0); setLevel(1);
|
|
setGameOver(false); setGameComplete(false); setIsPaused(false); setGameStarted(true);
|
|
playSound('success'); gameRef.current?.focus();
|
|
};
|
|
|
|
useEffect(() => { return () => { if (powerTimerRef.current) clearTimeout(powerTimerRef.current); }; }, []);
|
|
|
|
useEffect(() => {
|
|
if (!gameStarted || gameOver || gameComplete || isPaused) return;
|
|
const interval = setInterval(() => {
|
|
setMouthOpen(prev => !prev);
|
|
if (canMove(pacman, nextDirection)) setDirection(nextDirection);
|
|
const actualDir = canMove(pacman, nextDirection) ? nextDirection : direction;
|
|
if (canMove(pacman, actualDir)) {
|
|
const newPos = moveEntity(pacman, actualDir);
|
|
setPacman(newPos);
|
|
const posKey = `${newPos.x},${newPos.y}`;
|
|
if (powerPellets.has(posKey)) {
|
|
setPowerPellets(prev => { const np = new Set(prev); np.delete(posKey); return np; });
|
|
activatePowerMode();
|
|
setScore(prev => {
|
|
const ns = Math.min(prev + 50, MAX_SCORE);
|
|
if (ns >= MAX_SCORE) setShowGlitchCrash(true);
|
|
if (ns > highScore) { setHighScore(ns); localStorage.setItem(HIGHSCORE_KEY, ns.toString()); }
|
|
return ns;
|
|
});
|
|
playSound('success');
|
|
} else if (dots.has(posKey)) {
|
|
setDots(prev => { const nd = new Set(prev); nd.delete(posKey); return nd; });
|
|
setScore(prev => {
|
|
const ns = Math.min(prev + 10, MAX_SCORE);
|
|
if (ns >= MAX_SCORE) setShowGlitchCrash(true);
|
|
if (ns > highScore) { setHighScore(ns); localStorage.setItem(HIGHSCORE_KEY, ns.toString()); }
|
|
return ns;
|
|
});
|
|
playSound('hover');
|
|
}
|
|
}
|
|
setGhosts(prev => prev.map(ghost => {
|
|
if (ghost.eaten) return ghost;
|
|
const directions: Direction[] = ['up', 'down', 'left', 'right'];
|
|
const opposite: Record<Direction, Direction> = { up: 'down', down: 'up', left: 'right', right: 'left' };
|
|
const validDirs = directions.filter(d => d !== opposite[ghost.dir] && canMove(ghost.pos, d));
|
|
if (validDirs.length === 0) {
|
|
const anyValid = directions.filter(d => canMove(ghost.pos, d));
|
|
if (anyValid.length === 0) return ghost;
|
|
const dir = anyValid[Math.floor(Math.random() * anyValid.length)];
|
|
return { ...ghost, pos: moveEntity(ghost.pos, dir), dir };
|
|
}
|
|
const dx = pacman.x - ghost.pos.x, dy = pacman.y - ghost.pos.y;
|
|
let preferredDirs: Direction[] = [];
|
|
if (isPowered) { preferredDirs = Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? ['left', 'up', 'down', 'right'] : ['right', 'down', 'up', 'left']) : (dy > 0 ? ['up', 'left', 'right', 'down'] : ['down', 'right', 'left', 'up']); }
|
|
else { preferredDirs = Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? ['right', 'down', 'up', 'left'] : ['left', 'up', 'down', 'right']) : (dy > 0 ? ['down', 'right', 'left', 'up'] : ['up', 'left', 'right', 'down']); }
|
|
if (Math.random() < 0.6) { for (const dir of preferredDirs) { if (validDirs.includes(dir)) return { ...ghost, pos: moveEntity(ghost.pos, dir), dir }; } }
|
|
const dir = validDirs[Math.floor(Math.random() * validDirs.length)];
|
|
return { ...ghost, pos: moveEntity(ghost.pos, dir), dir };
|
|
}));
|
|
}, TICK_SPEED);
|
|
return () => clearInterval(interval);
|
|
}, [gameStarted, gameOver, gameComplete, isPaused, pacman, direction, nextDirection, dots, powerPellets, highScore, isPowered, playSound]);
|
|
|
|
useEffect(() => {
|
|
if (!gameStarted || gameOver || gameComplete) return;
|
|
for (let i = 0; i < ghosts.length; i++) {
|
|
const ghost = ghosts[i];
|
|
if (ghost.pos.x === pacman.x && ghost.pos.y === pacman.y) {
|
|
if (isPowered && !ghost.eaten) {
|
|
setGhosts(prev => prev.map((g, idx) => idx === i ? { ...g, eaten: true, pos: { x: 10, y: 9 } } : g));
|
|
setScore(prev => {
|
|
const ns = Math.min(prev + 200, MAX_SCORE);
|
|
if (ns >= MAX_SCORE) setShowGlitchCrash(true);
|
|
if (ns > highScore) { setHighScore(ns); localStorage.setItem(HIGHSCORE_KEY, ns.toString()); }
|
|
return ns;
|
|
});
|
|
playSound('success');
|
|
} else if (!ghost.eaten) { setGameOver(true); playSound('error'); return; }
|
|
}
|
|
}
|
|
if (dots.size === 0 && powerPellets.size === 0) {
|
|
setScore(prev => {
|
|
const ns = Math.min(prev + 500, MAX_SCORE);
|
|
if (ns >= MAX_SCORE) setShowGlitchCrash(true);
|
|
if (ns > highScore) { setHighScore(ns); localStorage.setItem(HIGHSCORE_KEY, ns.toString()); }
|
|
return ns;
|
|
});
|
|
setLevel(prev => prev + 1);
|
|
const { dots: newDots, powerPellets: newPowerPellets } = initDots();
|
|
setDots(newDots); setPowerPellets(newPowerPellets);
|
|
playSound('success');
|
|
}
|
|
}, [pacman, ghosts, dots, powerPellets, gameStarted, gameOver, gameComplete, highScore, isPowered, playSound, initDots]);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (!gameStarted) return;
|
|
switch (e.key) {
|
|
case 'ArrowUp': case 'w': e.preventDefault(); setNextDirection('up'); break;
|
|
case 'ArrowDown': case 's': e.preventDefault(); setNextDirection('down'); break;
|
|
case 'ArrowLeft': case 'a': e.preventDefault(); setNextDirection('left'); break;
|
|
case 'ArrowRight': case 'd': e.preventDefault(); setNextDirection('right'); break;
|
|
case 'p': e.preventDefault(); if (!gameOver && !gameComplete) setIsPaused(prev => !prev); break;
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [gameStarted, gameOver, gameComplete]);
|
|
|
|
const getPacmanRotation = () => { switch (direction) { case 'right': return 0; case 'down': return 90; case 'left': return 180; case 'up': return 270; } };
|
|
|
|
const renderPacman = () => (
|
|
<svg viewBox="0 0 100 100" className="w-full h-full" style={{ transform: `rotate(${getPacmanRotation()}deg)` }}>
|
|
<circle cx="50" cy="50" r="45" fill="hsl(var(--primary))" />
|
|
{mouthOpen && <path d="M 50 50 L 95 25 L 95 75 Z" fill="hsl(var(--background))" />}
|
|
<circle cx="50" cy="25" r="6" fill="hsl(var(--background))" />
|
|
</svg>
|
|
);
|
|
|
|
const renderGhost = (index: number, eaten: boolean) => {
|
|
const colors = ['hsl(0 70% 50%)', 'hsl(300 70% 50%)', 'hsl(180 70% 50%)'];
|
|
const scaredColor = 'hsl(220 70% 50%)';
|
|
if (eaten) return null;
|
|
return (
|
|
<svg viewBox="0 0 100 100" className="w-full h-full">
|
|
<path d={`M 10 95 L 10 45 Q 10 5 50 5 Q 90 5 90 45 L 90 95 L 75 80 L 60 95 L 50 80 L 40 95 L 25 80 L 10 95 Z`} fill={isPowered ? scaredColor : colors[index % colors.length]} className={isPowered ? 'animate-pulse' : ''} />
|
|
<ellipse cx="35" cy="45" rx="12" ry="15" fill="white" /><ellipse cx="65" cy="45" rx="12" ry="15" fill="white" />
|
|
<circle cx="38" cy="48" r="6" fill="hsl(var(--background))" /><circle cx="68" cy="48" r="6" fill="hsl(var(--background))" />
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const renderGrid = () => {
|
|
const cells = [];
|
|
const spriteSize = Math.max(cellSize * 0.7, 12);
|
|
for (let y = 0; y < GRID_HEIGHT; y++) {
|
|
for (let x = 0; x < GRID_WIDTH; x++) {
|
|
const isWall = MAZE_TEMPLATE[y][x] === 1;
|
|
const isTunnel = MAZE_TEMPLATE[y][x] === 2;
|
|
const isPacmanHere = pacman.x === x && pacman.y === y;
|
|
const ghostIndex = ghosts.findIndex(g => g.pos.x === x && g.pos.y === y && !g.eaten);
|
|
const isDot = dots.has(`${x},${y}`);
|
|
const isPowerPellet = powerPellets.has(`${x},${y}`);
|
|
cells.push(
|
|
<div key={`${x}-${y}`} className={`flex items-center justify-center transition-colors duration-100 ${isWall ? 'bg-primary/20 border border-primary/40' : isTunnel ? 'bg-background/30' : 'bg-background/50 border border-primary/5'}`} style={{ width: cellSize, height: cellSize }}>
|
|
{isPacmanHere && <div style={{ width: spriteSize, height: spriteSize }}>{renderPacman()}</div>}
|
|
{ghostIndex !== -1 && !isPacmanHere && <div style={{ width: spriteSize, height: spriteSize }}>{renderGhost(ghostIndex, ghosts[ghostIndex].eaten)}</div>}
|
|
{isDot && !isPacmanHere && ghostIndex === -1 && <div className="w-1.5 h-1.5 bg-primary/80 rounded-full" />}
|
|
{isPowerPellet && !isPacmanHere && ghostIndex === -1 && <div className="w-3 h-3 bg-primary rounded-full animate-pulse box-glow" />}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
return cells;
|
|
};
|
|
|
|
if (showGlitchCrash) return <GlitchCrash onComplete={() => window.location.reload()} />;
|
|
|
|
return (
|
|
<motion.div ref={gameRef} tabIndex={0} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}
|
|
className={`flex flex-col outline-none ${isFullscreen ? 'fixed inset-0 z-50 bg-background p-4' : 'h-full'}`}>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-4">
|
|
<Link to="/games" className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</Link>
|
|
<h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">Pac-Man</h1>
|
|
</div>
|
|
<button onClick={toggleFullscreen} className="p-2 border border-primary/50 hover:bg-primary/20 transition-colors" title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
|
|
{isFullscreen ? <Minimize2 size={16} className="text-primary" /> : <Maximize2 size={16} className="text-primary" />}
|
|
</button>
|
|
</div>
|
|
|
|
<div className={`flex ${isMobile ? 'flex-col items-center' : 'flex-row gap-4'} flex-1 ${isFullscreen ? 'justify-center items-center' : ''}`}>
|
|
<div className="border-2 border-primary box-glow p-1 bg-background/80">
|
|
<div className="grid" style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, ${cellSize}px)` }}>{renderGrid()}</div>
|
|
</div>
|
|
|
|
{!isMobile && (
|
|
<div className="flex flex-col gap-2 min-w-[140px]">
|
|
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">SCORE</p><p className="font-minecraft text-xl text-primary text-glow">{score.toLocaleString()}</p></div>
|
|
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">HIGH SCORE</p><p className="font-minecraft text-lg text-primary text-glow">{highScore.toLocaleString()}</p><p className="font-pixel text-[8px] text-foreground/30">max: 4,294,967,296</p></div>
|
|
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">LEVEL</p><p className="font-minecraft text-lg text-primary text-glow">{level}</p></div>
|
|
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60 mb-1">CONTROLS</p><p className="font-pixel text-[10px] text-foreground/80">← → ↑ ↓ / WASD</p><p className="font-pixel text-[10px] text-foreground/80">P: Pause</p></div>
|
|
{!gameStarted || gameOver || gameComplete ? (
|
|
<button onClick={startGame} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}</button>
|
|
) : (
|
|
<button onClick={() => setIsPaused(p => !p)} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all">{isPaused ? 'RESUME' : 'PAUSE'}</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{isMobile && (
|
|
<div className="mt-4 flex flex-col items-center gap-2 w-full">
|
|
<div className="flex gap-4 text-center">
|
|
<div><p className="font-pixel text-[8px] text-foreground/60">SCORE</p><p className="font-minecraft text-sm text-primary">{score.toLocaleString()}</p></div>
|
|
<div><p className="font-pixel text-[8px] text-foreground/60">HIGH</p><p className="font-minecraft text-sm text-primary">{highScore.toLocaleString()}</p></div>
|
|
<div><p className="font-pixel text-[8px] text-foreground/60">LVL</p><p className="font-minecraft text-sm text-primary">{level}</p></div>
|
|
</div>
|
|
{gameStarted && !gameOver && !gameComplete && (
|
|
<div className="grid grid-cols-3 gap-1 mt-2">
|
|
<div />
|
|
<GameTouchButton onAction={() => setNextDirection('up')} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg">↑</GameTouchButton>
|
|
<div />
|
|
<GameTouchButton onAction={() => setNextDirection('left')} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg">←</GameTouchButton>
|
|
<button onClick={() => setIsPaused(p => !p)} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">{isPaused ? '▶' : '❚❚'}</button>
|
|
<GameTouchButton onAction={() => setNextDirection('right')} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg">→</GameTouchButton>
|
|
<div />
|
|
<GameTouchButton onAction={() => setNextDirection('down')} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg">↓</GameTouchButton>
|
|
<div />
|
|
</div>
|
|
)}
|
|
{(!gameStarted || gameOver || gameComplete) && (
|
|
<button onClick={startGame} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{!isMobile && (gameOver || isPaused || gameComplete) && gameStarted && (
|
|
<div className="fixed inset-0 bg-background/80 flex items-center justify-center z-50">
|
|
<div className="border-2 border-primary box-glow-strong p-6 bg-background text-center">
|
|
<h2 className="font-minecraft text-2xl text-primary text-glow-strong mb-3">{gameComplete ? 'GAME COMPLETE!' : gameOver ? 'GAME OVER' : 'PAUSED'}</h2>
|
|
{(gameOver || gameComplete) && (<><p className="font-pixel text-sm text-foreground/80 mb-1">Final Score: {score.toLocaleString()}</p><p className="font-pixel text-xs text-foreground/60 mb-3">Level: {level}</p></>)}
|
|
<button onClick={(gameOver || gameComplete) ? startGame : () => setIsPaused(false)} className="font-minecraft text-sm py-2 px-6 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{(gameOver || gameComplete) ? 'PLAY AGAIN' : 'RESUME'}</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default Pacman;
|