From dde10422234dc3db88b35bccfea63b8bc76b0275 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Tue, 3 Feb 2026 09:38:18 +0000 Subject: [PATCH] Changes --- src/pages/AIChat.tsx | 4 ++-- src/pages/Breakout.tsx | 24 ++++++++++++++++++++---- src/pages/Pacman.tsx | 20 +++++++++++++------- src/pages/Snake.tsx | 17 +++++++++++++---- 4 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src/pages/AIChat.tsx b/src/pages/AIChat.tsx index b910acc..d634aaf 100644 --- a/src/pages/AIChat.tsx +++ b/src/pages/AIChat.tsx @@ -578,7 +578,7 @@ const AIChat = () => { className={`max-w-[90%] sm:max-w-[85%] md:max-w-[80%] p-2 sm:p-3 rounded-lg text-xs sm:text-sm overflow-x-auto ${ message.role === 'user' ? 'bg-primary/20 border border-primary/50' - : 'bg-secondary/50 border border-primary/30' + : 'bg-muted border border-primary/30' }`} > {
-
+
diff --git a/src/pages/Breakout.tsx b/src/pages/Breakout.tsx index fdb0967..4fe0c18 100644 --- a/src/pages/Breakout.tsx +++ b/src/pages/Breakout.tsx @@ -106,10 +106,26 @@ const Breakout = () => { if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; } return { width: Math.floor(width), height: Math.floor(height) }; } - if (isTwoPlayer) { - return isFullscreen ? { width: 480, height: 580 } : { width: 400, height: 500 }; + if (isFullscreen) { + const aspectRatio = 560 / 680; + if (isTwoPlayer) { + // Two canvases side by side + const maxWidth = (window.innerWidth - 100) / 2; + const maxHeight = window.innerHeight - 120; + let width = maxWidth; + let height = width / aspectRatio; + if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; } + return { width: Math.floor(width), height: Math.floor(height) }; + } + // Single player - fill screen + const maxWidth = window.innerWidth - 280; + const maxHeight = window.innerHeight - 100; + 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: 700, height: 840 } : { width: 560, height: 680 }; + return isTwoPlayer ? { width: 400, height: 500 } : { width: 560, height: 680 }; }, [isFullscreen, isTwoPlayer]); const [canvasSize, setCanvasSize] = useState(getCanvasSize); @@ -304,7 +320,7 @@ const Breakout = () => { const ctx = canvas.getContext('2d'); if (!ctx) return; - const paddleSpeed = isMobile ? 6 : (isFullscreen ? 10 : 8); + const paddleSpeed = isMobile ? 4 : (isFullscreen ? 6 : 5); if (keysRef.current.has(leftKey)) paddleRefParam.current = Math.max(0, paddleRefParam.current - paddleSpeed); if (keysRef.current.has(rightKey)) paddleRefParam.current = Math.min(canvasSize.width - paddleWidth, paddleRefParam.current + paddleSpeed); diff --git a/src/pages/Pacman.tsx b/src/pages/Pacman.tsx index 6d0ae67..446e289 100644 --- a/src/pages/Pacman.tsx +++ b/src/pages/Pacman.tsx @@ -122,7 +122,13 @@ const Pacman = () => { const maxHeight = window.innerHeight - 420; return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 18); } - return isFullscreen ? 30 : 24; + if (isFullscreen) { + // Fill screen more in fullscreen - calculate based on available space + const maxWidth = window.innerWidth - 240; // Space for side panel + const maxHeight = window.innerHeight - 100; // Space for header + return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT)); + } + return 24; }, [isFullscreen]); const [cellSize, setCellSize] = useState(getCellSize); @@ -678,7 +684,7 @@ const Pacman = () => { const renderPacman2 = () => ( - + {mouthOpen2 && } @@ -713,7 +719,7 @@ const Pacman = () => { cells.push(
{isPacmanHere &&
{renderPacman()}
} - {isPacman2Here &&
{renderPacman2()}
} + {isPacman2Here &&
{renderPacman2()}
} {ghostIndex !== -1 && !isPacmanHere && !isPacman2Here &&
{renderGhost(ghostIndex, ghosts[ghostIndex].eaten)}
} {isFruitHere && !isPacmanHere && !isPacman2Here && ghostIndex === -1 && (
@@ -764,8 +770,8 @@ const Pacman = () => {

{score.toLocaleString()}

-

P2

-

{score2.toLocaleString()}

+

P2

+

{score2.toLocaleString()}

@@ -795,7 +801,7 @@ const Pacman = () => {
{lives} / - {lives2} + {lives2}
) : ( @@ -816,7 +822,7 @@ const Pacman = () => {

WASD

-

P2

+

P2

IJKL

diff --git a/src/pages/Snake.tsx b/src/pages/Snake.tsx index 38e2036..7026fc1 100644 --- a/src/pages/Snake.tsx +++ b/src/pages/Snake.tsx @@ -13,7 +13,7 @@ import GameTouchButton from '@/components/GameTouchButton'; import MatrixCursor from '@/components/MatrixCursor'; const GRID_SIZE = 20; -const TICK_SPEED = 120; +const TICK_SPEED = 150; const MAX_SCORE = 4294967296; const HIGHSCORE_KEY = 'snake-highscore'; @@ -78,10 +78,19 @@ const Snake = () => { const maxHeight = window.innerHeight - 420; return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 20); } - if (gameMode === '2p') { - return isFullscreen ? 24 : 20; + if (isFullscreen) { + if (gameMode === '2p') { + // Two grids side by side + const maxWidth = (window.innerWidth - 100) / 2; + const maxHeight = window.innerHeight - 150; + return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE)); + } + // Single player - fill screen + const maxWidth = window.innerWidth - 280; + const maxHeight = window.innerHeight - 100; + return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE)); } - return isFullscreen ? 32 : 28; + return gameMode === '2p' ? 20 : 28; }, [isFullscreen, gameMode]); const [cellSize, setCellSize] = useState(getCellSize);