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

Improve 2P Tetris preview match

Browse Source 
Align 2P Next Piece previews to match 1P styling in Tetris.tsx by restoring consistent layout, sizing, and borders for both P1 and P2 preview blocks. Updated P1 and P2 Next Piece sections to use identical structure, padding, and typography for a unified desktop UI.

X-Lovable-Edit-ID: edt-ee763eca-490c-4169-af1e-2c648707e7bf
This commit is contained in:
gpt-engineer-app[bot]
2026-01-09 11:32:36 +00:00
parent 870ee5fde1 cce562a1f7
commit b3a743d03a
1 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Tetris.tsx
+24 -20
View File
@@ -679,16 +679,18 @@ const Tetris = () => {
</div>
{/* P1 Next Piece */}
<div className="border-2 border-primary/50 p-3 bg-background/50 flex flex-col items-center justify-center min-h-[80px]">
<p className="font-pixel text-[10px] text-foreground/60 mb-2">P1 NEXT</p>
<div className="flex flex-col gap-0.5">
{player1.nextPiece.shape.map((row, y) => (
<div key={y} className="flex gap-0.5">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
))}
</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-3">Next</p>
<div className="flex justify-center">
<div className="flex flex-col gap-1">
{player1.nextPiece.shape.map((row, y) => (
<div key={y} className="flex gap-1">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
))}
</div>
))}
</div>
</div>
</div>
@@ -726,16 +728,18 @@ const Tetris = () => {
</div>
{/* P2 Next Piece */}
<div className="border-2 border-purple-500/50 p-3 bg-background/50 flex flex-col items-center justify-center min-h-[80px]">
<p className="font-pixel text-[10px] text-purple-400 mb-2">P2 NEXT</p>
<div className="flex flex-col gap-0.5">
{player2.nextPiece.shape.map((row, y) => (
<div key={y} className="flex gap-0.5">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-purple-400' : 'bg-transparent'}`} style={{ boxShadow: val ? '0 0 6px hsl(280 70% 50%)' : 'none' }} />
))}
</div>
))}
<div className="border-2 border-purple-500/50 p-4 bg-background/60">
<p className="font-pixel text-[10px] text-purple-400/70 uppercase tracking-wider mb-3">Next</p>
<div className="flex justify-center">
<div className="flex flex-col gap-1">
{player2.nextPiece.shape.map((row, y) => (
<div key={y} className="flex gap-1">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-purple-400' : 'bg-transparent'}`} style={{ boxShadow: val ? '0 0 6px hsl(280 70% 50%)' : 'none' }} />
))}
</div>
))}
</div>
</div>
</div>
</>