From 225b337a2739e9cfe5461722246206a73a9ac8e3 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Fri, 5 Dec 2025 20:06:34 +0000 Subject: [PATCH] Changes --- src/components/MatrixRain.tsx | 29 +++++++++++++++-------------- src/components/Sidebar.tsx | 7 +------ src/pages/Breakout.tsx | 7 ++++--- src/pages/Pacman.tsx | 5 +++-- src/pages/Snake.tsx | 5 +++-- src/pages/Tetris.tsx | 6 +++--- 6 files changed, 29 insertions(+), 30 deletions(-) diff --git a/src/components/MatrixRain.tsx b/src/components/MatrixRain.tsx index fc496e7..dc0edbe 100644 --- a/src/components/MatrixRain.tsx +++ b/src/components/MatrixRain.tsx @@ -22,6 +22,7 @@ const MatrixRain = ({ color = '#00FF00' }: MatrixRainProps) => { const fontSize = 16; let columns: number; let rainDrops: number[] = []; + let animationStarted = false; const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'; const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; @@ -29,10 +30,9 @@ const MatrixRain = ({ color = '#00FF00' }: MatrixRainProps) => { const alphabet = katakana + latin + nums; const init = () => { - // On mobile, use visualViewport for accurate dimensions - const isMobile = window.innerWidth < 768; - const width = isMobile && window.visualViewport ? window.visualViewport.width : window.innerWidth; - const height = isMobile && window.visualViewport ? window.visualViewport.height : window.innerHeight; + // Use document dimensions for reliability + const width = document.documentElement.clientWidth || window.innerWidth; + const height = document.documentElement.clientHeight || window.innerHeight; canvas.width = width; canvas.height = height; @@ -41,17 +41,12 @@ const MatrixRain = ({ color = '#00FF00' }: MatrixRainProps) => { for (let x = 0; x < columns; x++) { rainDrops[x] = Math.random() * canvas.height / fontSize; } + animationStarted = true; }; - // Delay init slightly on mobile to ensure viewport is ready - const isMobile = window.innerWidth < 768; - if (isMobile) { - setTimeout(init, 100); - } else { - init(); - } - const draw = () => { + if (!animationStarted) return; + ctx.fillStyle = 'rgba(0, 0, 0, 0.04)'; ctx.fillRect(0, 0, canvas.width, canvas.height); @@ -69,13 +64,19 @@ const MatrixRain = ({ color = '#00FF00' }: MatrixRainProps) => { } }; + // Initialize after a brief delay to ensure DOM is ready + const initTimeout = setTimeout(init, 50); const interval = setInterval(draw, 30); - const handleResize = () => init(); + const handleResize = () => { + init(); + }; + window.addEventListener('resize', handleResize); - window.addEventListener('orientationchange', () => setTimeout(init, 100)); + window.addEventListener('orientationchange', () => setTimeout(init, 150)); return () => { + clearTimeout(initTimeout); clearInterval(interval); window.removeEventListener('resize', handleResize); }; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 10e3aef..0a1cfe6 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { motion, AnimatePresence } from 'framer-motion'; import { cn } from '@/lib/utils'; @@ -22,11 +22,6 @@ const Sidebar = () => { const { playSound } = useSettings(); const [isExpanded, setIsExpanded] = useState(false); - // Auto-collapse sidebar on mobile when route changes - useEffect(() => { - setIsExpanded(false); - }, [location.pathname]); - const currentPage = navItems.find(item => item.path === location.pathname)?.label || 'Menu'; const toggleMenu = () => { diff --git a/src/pages/Breakout.tsx b/src/pages/Breakout.tsx index 4cc5aee..b45a753 100644 --- a/src/pages/Breakout.tsx +++ b/src/pages/Breakout.tsx @@ -50,10 +50,11 @@ const Breakout = () => { if (typeof window === 'undefined') return { width: 480, height: 580 }; const isMobile = window.innerWidth < 768; if (isMobile) { - const maxWidth = window.innerWidth - 24; - const maxHeight = window.innerHeight - 220; + const maxWidth = window.innerWidth - 32; + // Reserve space for: header(50) + stats(40) + controls(80) + margins(30) = 200 + const maxHeight = window.innerHeight - 200; const aspectRatio = 480 / 580; - let width = maxWidth; + let width = Math.min(maxWidth, 400); let height = width / aspectRatio; if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; } return { width: Math.floor(width), height: Math.floor(height) }; diff --git a/src/pages/Pacman.tsx b/src/pages/Pacman.tsx index 949061e..c950c64 100644 --- a/src/pages/Pacman.tsx +++ b/src/pages/Pacman.tsx @@ -74,8 +74,9 @@ const Pacman = () => { const isMobile = window.innerWidth < 768; if (isMobile) { const maxWidth = window.innerWidth - 32; - const maxHeight = window.innerHeight - 260; - return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 14); + // Reserve space for: header(50) + stats(40) + controls(120) + margins(30) = 240 + const maxHeight = window.innerHeight - 240; + return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 16); } return isFullscreen ? 26 : 20; }, [isFullscreen]); diff --git a/src/pages/Snake.tsx b/src/pages/Snake.tsx index 80899fa..3dd9f17 100644 --- a/src/pages/Snake.tsx +++ b/src/pages/Snake.tsx @@ -40,8 +40,9 @@ const Snake = () => { const isMobile = window.innerWidth < 768; if (isMobile) { const maxWidth = window.innerWidth - 32; - const maxHeight = window.innerHeight - 260; - return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 16); + // Reserve space for: header(50) + stats(40) + controls(120) + margins(30) = 240 + const maxHeight = window.innerHeight - 240; + return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 18); } return isFullscreen ? 28 : 24; }, [isFullscreen]); diff --git a/src/pages/Tetris.tsx b/src/pages/Tetris.tsx index 72e77e8..1e09026 100644 --- a/src/pages/Tetris.tsx +++ b/src/pages/Tetris.tsx @@ -77,9 +77,9 @@ const Tetris = () => { const isMobile = window.innerWidth < 768; if (isMobile) { const maxWidth = window.innerWidth - 32; - // Reserve more space for controls on mobile - const maxHeight = window.innerHeight - 280; - return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 18); + // Reserve space for: header(50) + stats(40) + controls(120) + margins(30) = 240 + const maxHeight = window.innerHeight - 240; + return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 20); } return isFullscreen ? 30 : 24; }, [isFullscreen]);