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

Adjust Tetris mobile UI controls

Browse Source 
Improve Tetris UI on mobile by resizing board area, swapping pause and hard drop positions to center, and ensuring full screen visibility. Reworked D-pad layout to place hard drop in center and pause on the right, and tweaked getCellSize to reduce reserved height for better screen fit.

X-Lovable-Edit-ID: edt-baa5a5b2-2105-47a9-aa68-be9321c1ee16
This commit is contained in:
gpt-engineer-app[bot]
2026-01-13 10:02:10 +00:00
parent a16afe2637 8cc68824bd
commit 236fdaa5bb
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Tetris.tsx
+10 -10
View File
@@ -123,8 +123,8 @@ const Tetris = () => {
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
if (isMobile) { if (isMobile) {
const maxWidth = window.innerWidth - 40; const maxWidth = window.innerWidth - 40;
const maxHeight = window.innerHeight - 440; const maxHeight = window.innerHeight - 320;
return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 24); return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 20);
} }
if (gameMode === '2p') return isFullscreen ? 26 : 22; if (gameMode === '2p') return isFullscreen ? 26 : 22;
return isFullscreen ? 34 : 28; return isFullscreen ? 34 : 28;
@@ -588,21 +588,21 @@ 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-3 items-center mt-2"> <div className="flex gap-3 items-center mt-1">
{/* D-pad style controls */} {/* D-pad style controls */}
<div className="grid grid-cols-3 gap-1"> <div className="grid grid-cols-3 gap-1">
<div /> <div />
<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={rotatePiece} className="p-3 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg select-none">↻</button>
<div /> <div />
<GameTouchButton onAction={moveLeft} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>←</GameTouchButton> <GameTouchButton onAction={moveLeft} className="p-3 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> <button onClick={hardDrop} className="p-3 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg select-none">⬇</button>
<GameTouchButton onAction={moveRight} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>→</GameTouchButton> <GameTouchButton onAction={moveRight} className="p-3 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>→</GameTouchButton>
<div /> <div />
<GameTouchButton onAction={moveDown} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>↓</GameTouchButton> <GameTouchButton onAction={moveDown} className="p-3 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>↓</GameTouchButton>
<div /> <div />
</div> </div>
{/* Hard drop button */} {/* Pause button on the side */}
<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> <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>
</div> </div>
) : ( ) : (
<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> <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>