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-07 08:46:53 +00:00
parent fdf6b08c07
commit 015dcb72c1
5 changed files with 269 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Pacman.tsx
+76 -36
View File
@@ -604,57 +604,97 @@ const Pacman = () => {
</div>
{!isMobile && (
<div className="flex flex-col gap-2 min-w-[140px]">
<div className="flex flex-col gap-3 min-w-[160px]">
{/* Score Panel */}
{gameMode === '2p' ? (
<div className="border border-primary/50 p-3 bg-background/50">
<p className="font-pixel text-[10px] text-foreground/60 mb-1">SCORES</p>
<div className="flex gap-2 justify-center">
<div className="text-center"><p className="font-pixel text-[8px] text-foreground/80">P1</p><p className="font-minecraft text-lg text-primary text-glow">{score.toLocaleString()}</p></div>
<div className="text-center"><p className="font-pixel text-[8px] text-foreground/80">P2</p><p className="font-minecraft text-lg text-primary text-glow">{score2.toLocaleString()}</p></div>
<div className="border-2 border-primary/50 p-4 bg-background/60">
<p className="font-pixel text-[10px] text-foreground/50 uppercase tracking-wider mb-2">Scores</p>
<div className="grid grid-cols-2 gap-3">
<div className="text-center">
<p className="font-pixel text-[8px] text-primary">P1</p>
<p className="font-minecraft text-lg text-primary text-glow">{score.toLocaleString()}</p>
</div>
<div className="text-center">
<p className="font-pixel text-[8px]" style={{ color: 'hsl(120 70% 50%)' }}>P2</p>
<p className="font-minecraft text-lg" style={{ color: 'hsl(120 70% 50%)', textShadow: '0 0 10px hsl(120 70% 50%)' }}>{score2.toLocaleString()}</p>
</div>
</div>
</div>
) : (
<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>
{gameMode === '2p' && (
<div className="border border-primary/50 p-3 bg-background/50">
<p className="font-pixel text-[10px] text-foreground/60 mb-1">LIVES</p>
<div className="flex gap-2 justify-center">
<div className="text-center"><p className="font-pixel text-[8px] text-foreground/80">P1</p><p className="font-minecraft text-sm text-primary">{lives}</p></div>
<div className="text-center"><p className="font-pixel text-[8px] text-foreground/80">P2</p><p className="font-minecraft text-sm text-primary">{lives2}</p></div>
</div>
<div className="border-2 border-primary/50 p-4 bg-background/60">
<p className="font-pixel text-[10px] text-foreground/50 uppercase tracking-wider">Score</p>
<p className="font-minecraft text-2xl text-primary text-glow-strong">{score.toLocaleString()}</p>
</div>
)}
{gameMode === '1p' && (
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">LIVES</p><p className="font-minecraft text-lg text-primary text-glow">{lives}</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>
{/* High Score */}
<div className="border border-primary/30 p-3 bg-background/40">
<p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider">High Score</p>
<p className="font-minecraft text-lg text-primary/80">{highScore.toLocaleString()}</p>
<p className="font-pixel text-[8px] text-foreground/30 mt-1">max: 4,294,967,296</p>
</div>
{/* Level & Lives */}
<div className="grid grid-cols-2 gap-2">
<div className="border border-primary/30 p-3 bg-background/40 text-center">
<p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider">Level</p>
<p className="font-minecraft text-xl text-primary">{level}</p>
</div>
{gameMode === '2p' ? (
<>
<p className="font-pixel text-[8px] text-foreground/80">P1: WASD / ←→↑↓</p>
<p className="font-pixel text-[8px] text-foreground/80">P2: I J K L</p>
<p className="font-pixel text-[8px] text-foreground/80">P: Pause</p>
</>
<div className="border border-primary/30 p-3 bg-background/40">
<p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider text-center">Lives</p>
<div className="flex justify-center gap-2 mt-1">
<span className="font-minecraft text-sm text-primary">{lives}</span>
<span className="text-foreground/30">/</span>
<span className="font-minecraft text-sm" style={{ color: 'hsl(120 70% 50%)' }}>{lives2}</span>
</div>
</div>
) : (
<>
<p className="font-pixel text-[10px] text-foreground/80">WASD / ←→↑↓</p>
<p className="font-pixel text-[10px] text-foreground/80">P: Pause</p>
</>
<div className="border border-primary/30 p-3 bg-background/40 text-center">
<p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider">Lives</p>
<p className="font-minecraft text-lg text-primary text-glow">{'♥'.repeat(lives)}</p>
</div>
)}
</div>
{/* Controls */}
<div className="border border-primary/20 p-3 bg-background/30">
<p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider mb-2">Controls</p>
{gameMode === '2p' ? (
<div className="grid grid-cols-2 gap-2 text-center">
<div>
<p className="font-pixel text-[8px] text-primary">P1</p>
<p className="font-pixel text-[9px] text-foreground/60">WASD</p>
</div>
<div>
<p className="font-pixel text-[8px]" style={{ color: 'hsl(120 70% 50%)' }}>P2</p>
<p className="font-pixel text-[9px] text-foreground/60">IJKL</p>
</div>
</div>
) : (
<div className="space-y-1">
<p className="font-pixel text-[10px] text-foreground/60">WASD / ←→↑↓</p>
<p className="font-pixel text-[10px] text-foreground/60">P: Pause</p>
</div>
)}
{gameMode === '2p' && <p className="font-pixel text-[9px] text-foreground/40 text-center mt-2">P: Pause</p>}
</div>
{/* Action Buttons */}
{showModeSelection ? (
<div className="flex flex-col gap-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-2 px-4 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-2 px-4 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/50 text-center uppercase tracking-wider">Select Mode</p>
<button onClick={() => { setGameMode('1p'); setShowModeSelection(false); }} className="font-minecraft text-sm py-3 px-4 border-2 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-4 border-2 border-primary/60 bg-background/50 text-primary hover:bg-primary/20 transition-all">2 PLAYERS</button>
</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={startGame} className="font-minecraft text-sm py-3 px-4 border-2 border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
{gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START GAME'}
</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>
<button onClick={() => setIsPaused(p => !p)} className="font-minecraft text-sm py-3 px-4 border-2 border-primary/60 bg-background/50 text-primary hover:bg-primary/20 transition-all">
{isPaused ? 'RESUME' : 'PAUSE'}
</button>
)}
</div>
)}