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

Improve Tetris mobile controls layout

Browse Source 
Align Tetris mobile controls with Snake/Pacman by adopting a 3x3 D-pad grid, update spacing, and swap to compact padding for buttons. Replaces previous flat control row with grid-based layout and adds consistent mobile control spacing.

X-Lovable-Edit-ID: edt-91632e52-833e-44a5-b01b-9a0704bb93a2
This commit is contained in:
gpt-engineer-app[bot]
2026-01-13 09:59:47 +00:00
parent 14372e374b 49909763bd
commit a16afe2637
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Tetris.tsx
+17 -9
View File
@@ -579,7 +579,7 @@ const Tetris = () => {
{isMobile && gameMode === '1p' && ( {isMobile && gameMode === '1p' && (
<> <>
<MobileControlsSpacer heightClassName="h-36" /> <MobileControlsSpacer />
<MobileControlsDock> <MobileControlsDock>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<div className="flex gap-4 text-center"> <div className="flex gap-4 text-center">
@@ -588,16 +588,24 @@ const Tetris = () => {
<div><p className="font-pixel text-[8px] text-foreground/60">LINES</p><p className="font-minecraft text-sm text-primary">{lines}</p></div> <div><p className="font-pixel text-[8px] text-foreground/60">LINES</p><p className="font-minecraft text-sm text-primary">{lines}</p></div>
</div> </div>
{gameStarted && !gameOver ? ( {gameStarted && !gameOver ? (
<div className="flex gap-2"> <div className="flex gap-3 items-center mt-2">
<GameTouchButton onAction={moveLeft} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel" interval={100}>←</GameTouchButton> {/* D-pad style controls */}
<GameTouchButton onAction={moveDown} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel" interval={100}>↓</GameTouchButton> <div className="grid grid-cols-3 gap-1">
<GameTouchButton onAction={moveRight} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel" interval={100}>→</GameTouchButton> <div />
<button onClick={rotatePiece} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">↻</button> <button onClick={rotatePiece} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg select-none">↻</button>
<button onClick={hardDrop} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">⬇</button> <div />
<button onClick={togglePause} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">{isPaused ? '▶' : '❚❚'}</button> <GameTouchButton onAction={moveLeft} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>←</GameTouchButton>
<button onClick={togglePause} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">{isPaused ? '▶' : '❚❚'}</button>
<GameTouchButton onAction={moveRight} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>→</GameTouchButton>
<div />
<GameTouchButton onAction={moveDown} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>↓</GameTouchButton>
<div />
</div>
{/* Hard drop button */}
<button onClick={hardDrop} className="p-4 px-6 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg select-none h-full">⬇</button>
</div> </div>
) : ( ) : (
<button onClick={() => startGame('1p')} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary">{gameOver ? 'RETRY' : 'START'}</button> <button onClick={() => startGame('1p')} 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">{gameOver ? 'RETRY' : 'START'}</button>
)} )}
</div> </div>
</MobileControlsDock> </MobileControlsDock>