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

Improve game UI layouts

Browse Source 
- Increase and unify 2P preview and desktop screen sizes across games
- Adjust Tetris 2P previews and main grid cell sizes for larger visuals
- Expand Next piece previews and adjust related sizing in Tetris
- Apply responsive size tweaks to Breakout, Snake, Pacman cell sizing
- Enhance mobile/desktop balance to better utilize screen space

X-Lovable-Edit-ID: edt-a04b5a0f-5801-4bc9-8dd5-2f224df555fb
This commit is contained in:
gpt-engineer-app[bot]
2026-01-09 11:20:39 +00:00
parent 192164ee74 0bf52ba489
commit 870ee5fde1
4 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Breakout.tsx
+3 -3
View File
@@ -50,19 +50,19 @@ const Breakout = () => {
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
const getCanvasSize = useCallback(() => {
if (typeof window === 'undefined') return { width: 480, height: 580 };
if (typeof window === 'undefined') return { width: 560, height: 680 };
const isMobile = window.innerWidth < 768;
if (isMobile) {
const maxWidth = window.innerWidth - 32;
// Reserve space for header + fixed controls dock on mobile
const maxHeight = window.innerHeight - 380;
const aspectRatio = 480 / 580;
const aspectRatio = 560 / 680;
let width = maxWidth;
let height = width / aspectRatio;
if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; }
return { width: Math.floor(width), height: Math.floor(height) };
}
return isFullscreen ? { width: 600, height: 720 } : { width: 480, height: 580 };
return isFullscreen ? { width: 700, height: 840 } : { width: 560, height: 680 };
}, [isFullscreen]);
const [canvasSize, setCanvasSize] = useState(getCanvasSize);
src/pages/Pacman.tsx
+3 -3
View File
@@ -91,15 +91,15 @@ const Pacman = () => {
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
const getCellSize = useCallback(() => {
if (typeof window === 'undefined') return 20;
if (typeof window === 'undefined') return 24;
const isMobile = window.innerWidth < 768;
if (isMobile) {
const maxWidth = window.innerWidth - 40;
// Reserve space for header + fixed controls dock on mobile
const maxHeight = window.innerHeight - 420;
return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 16);
return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 18);
}
return isFullscreen ? 26 : 20;
return isFullscreen ? 30 : 24;
}, [isFullscreen]);
const [cellSize, setCellSize] = useState(getCellSize);
src/pages/Snake.tsx
+4 -4
View File
@@ -68,17 +68,17 @@ const Snake = () => {
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
const getCellSize = useCallback(() => {
if (typeof window === 'undefined') return 24;
if (typeof window === 'undefined') return 28;
const isMobile = window.innerWidth < 768;
if (isMobile) {
const maxWidth = window.innerWidth - 40;
const maxHeight = window.innerHeight - 420;
return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 18);
return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 20);
}
if (gameMode === '2p') {
return isFullscreen ? 20 : 16;
return isFullscreen ? 24 : 20;
}
return isFullscreen ? 28 : 24;
return isFullscreen ? 32 : 28;
}, [isFullscreen, gameMode]);
const [cellSize, setCellSize] = useState(getCellSize);
src/pages/Tetris.tsx
+14 -14
View File
@@ -141,17 +141,17 @@ const Tetris = () => {
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
const getCellSize = useCallback(() => {
if (typeof window === 'undefined') return 24;
if (typeof window === 'undefined') return 28;
const isMobile = window.innerWidth < 768;
if (isMobile) {
const maxWidth = window.innerWidth - 40;
const maxHeight = window.innerHeight - 440;
return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 22);
return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 24);
}
if (gameMode === '2p') {
return isFullscreen ? 22 : 18;
return isFullscreen ? 26 : 22;
}
return isFullscreen ? 30 : 24;
return isFullscreen ? 34 : 28;
}, [isFullscreen, gameMode]);
const [cellSize, setCellSize] = useState(getCellSize);
@@ -679,13 +679,13 @@ const Tetris = () => {
</div>
{/* P1 Next Piece */}
<div className="border-2 border-primary/50 p-2 bg-background/50 flex flex-col items-center justify-center min-h-[60px]">
<p className="font-pixel text-[10px] text-foreground/60">P1 NEXT</p>
<div className="flex flex-col gap-1">
<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-1">
<div key={y} className="flex gap-0.5">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-2 h-2 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
<div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
))}
</div>
))}
@@ -726,13 +726,13 @@ const Tetris = () => {
</div>
{/* P2 Next Piece */}
<div className="border-2 border-purple-500/50 p-2 bg-background/50 flex flex-col items-center justify-center min-h-[60px]">
<p className="font-pixel text-[10px] text-purple-400">P2 NEXT</p>
<div className="flex flex-col gap-1">
<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-1">
<div key={y} className="flex gap-0.5">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-2 h-2 ${val ? 'bg-purple-400 box-glow' : 'bg-transparent'}`} />
<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>
))}