jory/personal_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2026-01-15 09:53:27 +00:00
parent ea9c60ab34
commit 037d88d44a
5 changed files with 198 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Pacman.tsx
+24 -14
View File
@@ -6,8 +6,8 @@ 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';
import { MobileControlsDock, MobileControlsSpacer } from '@/components/MobileControlsDock';
import { useSwipeControls } from '@/hooks/useSwipeControls';
const GRID_WIDTH = 21;
const GRID_HEIGHT = 21;
@@ -105,6 +105,19 @@ const Pacman = () => {
const [cellSize, setCellSize] = useState(getCellSize);
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
// Swipe controls for mobile
const { getSwipeHandlers } = useSwipeControls({
onSwipe: (dir) => {
if (gameMode === '1p' && gameStarted && !gameOver && !gameComplete && !isPaused) {
setNextDirection(dir as Direction);
}
},
onTap: () => {
if (gameStarted && !gameOver && !gameComplete) setIsPaused(p => !p);
},
enabled: isMobile && gameStarted && !gameOver && !gameComplete,
});
useEffect(() => {
const handleResize = () => setCellSize(getCellSize());
window.addEventListener('resize', handleResize);
@@ -731,21 +744,18 @@ const Pacman = () => {
{showModeSelection ? (
<div className="flex flex-col gap-2 mt-2">
<p className="font-pixel text-[10px] text-foreground/60 text-center">SELECT MODE</p>
<button onClick={() => { setGameMode('1p'); setShowModeSelection(false); }} 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">1 PLAYER</button>
<button onClick={() => { setGameMode('2p'); setShowModeSelection(false); }} 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">2 PLAYERS</button>
<p className="font-pixel text-[10px] text-foreground/60 text-center">MOBILE: 1 PLAYER ONLY</p>
<button onClick={() => { setGameMode('1p'); setShowModeSelection(false); }} 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">START GAME</button>
</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
className="w-full h-24 border border-primary/30 rounded-lg bg-primary/5 flex items-center justify-center touch-none mt-2"
{...getSwipeHandlers()}
>
<p className="font-pixel text-xs text-primary/60 text-center pointer-events-none">
SWIPE TO MOVE<br />
<span className="text-[10px] text-foreground/40">TAP TO PAUSE</span>
</p>
</div>
) : (
<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">