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/Breakout.tsx
+42 -8
View File
@@ -267,16 +267,50 @@ const Breakout = () => {
</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">LIVES</p><p className="font-minecraft text-lg text-primary text-glow">{'♥'.repeat(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><p className="font-pixel text-[10px] text-foreground/80">← → / A D</p><p className="font-pixel text-[10px] text-foreground/80">P: Pause</p></div>
<div className="flex flex-col gap-3 min-w-[160px]">
{/* Score Panel */}
<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>
{/* 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>
<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>
<div className="space-y-1">
<p className="font-pixel text-[10px] text-foreground/60">← → / A D</p>
<p className="font-pixel text-[10px] text-foreground/60">P: Pause</p>
</div>
</div>
{/* Action Button */}
{!gameStarted || gameOver ? (
<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">{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">
{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>
)}