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/Snake.tsx
+64 -39
View File
@@ -546,31 +546,42 @@ const Snake = () => {
</div>
{!isMobile && gameMode === '1p' && (
<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 className="flex flex-col gap-3 min-w-[160px]">
{/* Score Panel */}
<div className="border-2 border-primary/50 p-4 bg-background/60 space-y-1">
<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>
<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>
{/* High Score Panel */}
<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>
<div className="border border-primary/50 p-3 bg-background/50">
<p className="font-pixel text-[10px] text-foreground/60">LENGTH</p>
<p className="font-minecraft text-lg text-primary text-glow">{snake.length}</p>
{/* Stats */}
<div className="border border-primary/30 p-3 bg-background/40">
<p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider">Length</p>
<p className="font-minecraft text-xl text-primary">{snake.length}</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>
{/* 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>
<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>
</div>
{/* Action Button */}
{!gameStarted || gameOver || gameComplete ? (
<button onClick={() => startGame('1p')} 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 onClick={() => startGame('1p')} 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">
<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>
)}
@@ -578,38 +589,52 @@ const Snake = () => {
)}
{!isMobile && gameMode === '2p' && (
<div className="flex flex-col gap-2 min-w-[160px]">
<div className="border border-primary/50 p-3 bg-background/50">
<div className="flex items-center gap-2 mb-1">
<div className="w-3 h-3 rounded-sm" style={{ backgroundColor: players[0].color }} />
<p className="font-pixel text-[10px] text-foreground/60">P1 (WASD)</p>
<div className="flex flex-col gap-3 min-w-[180px]">
{/* Player 1 */}
<div className="border-2 border-primary/60 p-4 bg-background/60">
<div className="flex items-center gap-2 mb-2">
<div className="w-4 h-4 rounded-sm" style={{ backgroundColor: players[0].color, boxShadow: '0 0 8px ' + players[0].color }} />
<p className="font-pixel text-xs text-primary">Player 1</p>
<span className="font-pixel text-[8px] text-foreground/40 ml-auto">WASD</span>
</div>
<p className="font-minecraft text-lg text-primary text-glow">{players[0].score}</p>
{!players[0].alive && <p className="font-pixel text-[8px] text-destructive">DEAD</p>}
<p className="font-minecraft text-2xl text-primary text-glow-strong">{players[0].score}</p>
{!players[0].alive && <p className="font-pixel text-[10px] text-destructive mt-1 animate-pulse">☠ ELIMINATED</p>}
</div>
<div className="border border-purple-500/50 p-3 bg-background/50">
<div className="flex items-center gap-2 mb-1">
<div className="w-3 h-3 rounded-sm" style={{ backgroundColor: players[1].color }} />
<p className="font-pixel text-[10px] text-foreground/60">P2 (↑↓←→)</p>
{/* Player 2 */}
<div className="border-2 border-purple-500/60 p-4 bg-background/60">
<div className="flex items-center gap-2 mb-2">
<div className="w-4 h-4 rounded-sm" style={{ backgroundColor: players[1].color, boxShadow: '0 0 8px ' + players[1].color }} />
<p className="font-pixel text-xs text-purple-400">Player 2</p>
<span className="font-pixel text-[8px] text-foreground/40 ml-auto">Arrows</span>
</div>
<p className="font-minecraft text-lg text-purple-400">{players[1].score}</p>
{!players[1].alive && <p className="font-pixel text-[8px] text-destructive">DEAD</p>}
<p className="font-minecraft text-2xl text-purple-400" style={{ textShadow: '0 0 10px hsl(280 70% 50%)' }}>{players[1].score}</p>
{!players[1].alive && <p className="font-pixel text-[10px] text-destructive mt-1 animate-pulse">☠ ELIMINATED</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-[9px] text-primary">P1: W A S D</p>
<p className="font-pixel text-[9px] text-purple-400">P2: ↑ ↓ ← →</p>
<p className="font-pixel text-[9px] text-foreground/80 mt-1">P: Pause</p>
{/* Controls Summary */}
<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>
<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-[10px] text-foreground/60">W A S D</p>
</div>
<div>
<p className="font-pixel text-[8px] text-purple-400">P2</p>
<p className="font-pixel text-[10px] text-foreground/60">↑ ↓ ← →</p>
</div>
</div>
<p className="font-pixel text-[9px] text-foreground/40 text-center mt-2">P: Pause</p>
</div>
{/* Action Button */}
{!gameStarted || gameOver ? (
<button onClick={() => startGame('2p')} 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">
{gameOver ? 'PLAY AGAIN' : 'START'}
<button onClick={() => startGame('2p')} 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">
{gameOver ? 'PLAY AGAIN' : '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">
<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>
)}