feat: games are no working on moblie devices

kittyurl-frontend/src/components/FlappyCat.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
 
-// --- MODEL KOTA ---
+// --- MODEL KOTA (Wizualizacja) ---
 interface DetailedKittyProps { isGameOver: boolean; }
 const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
     const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
@@ -32,16 +32,20 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
     );
 };
 
-// --- KONFIGURACJA NIEZALEŻNA OD FPS (Wartości na sekundę) ---
-const GAP_SIZE = 180;
+// --- KONFIGURACJA GRY ---
+const GAP_SIZE = 170;        // Przerwa między rurami
 const PIPE_WIDTH = 70;
-const PIPE_SPEED = 200;      // px/s
-const PIPE_SPAWN_RATE = 1.8; // sekundy
-const GRAVITY = 1400;        // px/s^2
-const FLAP_STRENGTH = -420;  // px/s
-const CANVAS_HEIGHT = 450;
+const PIPE_SPEED = 220;      // px/s
+const PIPE_SPAWN_RATE = 1.6; // co ile sekund rura
+const GRAVITY = 1400;        // siła grawitacji
+const FLAP_STRENGTH = -420;  // siła skoku
+
+// Logiczne wymiary gry (fizyka działa na tych wartościach, a ekran je tylko skaluje)
+const GAME_HEIGHT = 450;
+const GAME_WIDTH = 600;
 
 export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
+    // --- STANY ---
     const [isPlaying, setIsPlaying] = useState(false);
     const [gameOver, setGameOver] = useState(false);
     const [score, setScore] = useState(0);
@@ -50,10 +54,13 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         return saved ? parseInt(saved, 10) : 0;
     });
 
+    // Stany do renderowania
     const [displayKittyY, setDisplayKittyY] = useState(150);
     const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
     const [rotation, setRotation] = useState(0);
+    const [scale, setScale] = useState(1); // Skala RWD
 
+    // --- REFS (FIZYKA) ---
     const kittyYRef = useRef(150);
     const velocityRef = useRef(0);
     const pipesRef = useRef<{ x: number; topHeight: number; id: number; passed?: boolean }[]>([]);
@@ -62,6 +69,26 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
     const lastTimeRef = useRef<number>(0);
     const spawnTimerRef = useRef<number>(0);
 
+    // --- RWD: Obliczanie skali ---
+    useEffect(() => {
+        const handleResize = () => {
+            const availableWidth = window.innerWidth - 32; // margines boczny
+            const availableHeight = window.innerHeight - 100; // miejsce na nagłówek
+
+            const scaleX = availableWidth / GAME_WIDTH;
+            const scaleY = availableHeight / GAME_HEIGHT;
+
+            // Dopasuj do ekranu, ale nie powiększaj powyżej 100% (żeby nie tracić jakości)
+            const newScale = Math.min(scaleX, scaleY, 1);
+            setScale(newScale);
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Init
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // --- LOGIKA GRY ---
     const endGame = useCallback(() => {
         setGameOver(true);
         setIsPlaying(false);
@@ -81,7 +108,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         velocityRef.current = 0;
         pipesRef.current = [];
         spawnTimerRef.current = 0;
-        lastTimeRef.current = performance.now(); // Inicjalizacja czasu
+        lastTimeRef.current = performance.now();
         setDisplayKittyY(150);
         setDisplayPipes([]);
         setRotation(0);
@@ -91,64 +118,87 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
     }, [isPlaying, gameOver]);
 
+    // --- OBSŁUGA INPUTU (NAPRAWIONA) ---
+    const handleAction = useCallback((e?: React.SyntheticEvent) => {
+        // WAŻNE: Nie używamy e.preventDefault() tutaj, bo to powoduje błąd w Chrome.
+        // Zamiast tego CSS 'touch-action: none' blokuje scrollowanie.
+        if (e) {
+            e.stopPropagation();
+        }
+
+        if (!isPlaying || gameOver) {
+            startGame();
+        } else {
+            flap();
+        }
+    }, [isPlaying, gameOver, startGame, flap]);
+
+    // --- PĘTLA GRY ---
     useEffect(() => {
         const update = (currentTime: number) => {
             if (gameOver || !isPlaying) return;
 
-            // --- DYNAMICZNY DELTA TIME ---
-            // Obliczamy ile sekund upłynęło od ostatniej klatki (np. 0.0069s dla 144Hz)
+            // Delta time w sekundach
             const dt = (currentTime - lastTimeRef.current) / 1000;
             lastTimeRef.current = currentTime;
+            const frameTime = Math.min(dt, 0.1); // Limit laga
 
-            // Zabezpieczenie przed ogromnym skokiem fizyki przy lagu
-            const frameTime = Math.min(dt, 0.1);
-
-            // Fizyka grawitacji
+            // 1. Fizyka grawitacji
             velocityRef.current += GRAVITY * frameTime;
             kittyYRef.current += velocityRef.current * frameTime;
 
-            // Płynna rotacja zależna od prędkości pionowej
-            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 80));
+            // Rotacja
+            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -25), 90));
 
-            // Kolizja z sufitem/ziemią
-            if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -50) {
+            // Kolizja z sufitem/podłogą
+            if (kittyYRef.current > GAME_HEIGHT - 40 || kittyYRef.current < -50) {
                 endGame();
                 return;
             }
 
-            // Spawn rur
+            // 2. Generowanie rur
             spawnTimerRef.current += frameTime;
             if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
-                const topHeight = Math.random() * (220 - 70) + 70;
-                pipesRef.current.push({ x: 650, topHeight, id: Date.now() });
+                const minPipe = 60;
+                const maxPipe = GAME_HEIGHT - GAP_SIZE - minPipe;
+                const topHeight = Math.random() * (maxPipe - minPipe) + minPipe;
+
+                pipesRef.current.push({ x: GAME_WIDTH + 50, topHeight, id: Date.now() });
                 spawnTimerRef.current = 0;
             }
 
-            // Ruch rur i kolizje
+            // 3. Ruch rur i kolizje
             const updatedPipes = [];
             for (const p of pipesRef.current) {
                 p.x -= PIPE_SPEED * frameTime;
 
-                // Hitbox (z małym marginesem dla kota)
-                if (p.x < 100 && p.x + PIPE_WIDTH > 55) {
+                // Hitbox rury (marginesy dla łatwiejszej gry)
+                const hitXLeft = p.x + 5;
+                const hitXRight = p.x + PIPE_WIDTH - 5;
+
+                // Sprawdzenie czy kot jest w poziomie rury
+                if (hitXLeft < 100 && hitXRight > 55) {
+                    // Sprawdzenie czy kot uderzył w górę lub dół
+                    // (dodajemy marginesy bezpieczeństwa)
                     if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
                         endGame();
                         return;
                     }
                 }
 
-                // Punktacja
+                // Naliczanie punktów
                 if (p.x < 50 && !p.passed) {
                     p.passed = true;
                     scoreRef.current += 1;
                     setScore(scoreRef.current);
                 }
 
-                if (p.x > -PIPE_WIDTH) updatedPipes.push(p);
+                // Usuwanie starych rur
+                if (p.x > -PIPE_WIDTH - 50) updatedPipes.push(p);
             }
             pipesRef.current = updatedPipes;
 
-            // Update stanów do renderowania
+            // 4. Renderowanie
             setDisplayKittyY(kittyYRef.current);
             setDisplayPipes([...pipesRef.current]);
 
@@ -161,64 +211,108 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         return () => cancelAnimationFrame(requestRef.current);
     }, [isPlaying, gameOver, endGame]);
 
+    // Obsługa Spacji
     useEffect(() => {
         const handleKey = (e: KeyboardEvent) => {
             if (e.code === 'Space') {
-                e.preventDefault();
-                if (!isPlaying || gameOver) startGame(); else flap();
+                e.preventDefault(); // Tu można bezpiecznie użyć preventDefault dla klawiatury
+                handleAction();
             }
         };
         window.addEventListener('keydown', handleKey);
         return () => window.removeEventListener('keydown', handleKey);
-    }, [isPlaying, gameOver, startGame, flap]);
+    }, [handleAction]);
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans select-none">
-            <button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none">
+        <div className="flex flex-col items-center justify-start pt-4 sm:justify-center min-h-[80vh] w-full font-sans select-none overflow-hidden">
+
+            <button
+                onClick={onBack}
+                className="z-50 mb-4 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none px-4 py-2 bg-white/50 rounded-full cursor-pointer"
+            >
                 <ArrowLeft size={20} /> Back to Menu
             </button>
 
+            {/* WRAPPER SKALUJĄCY GRĘ */}
             <div
-                className="relative w-full max-w-[600px] h-[450px] bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer"
-                onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
+                style={{
+                    width: GAME_WIDTH,
+                    height: GAME_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top center',
+                    touchAction: 'none' // KLUCZOWE DLA MOBILE: blokuje gesty przeglądarki
+                }}
+                className="relative shrink-0"
             >
-                <div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
-                <div className="absolute top-40 right-20 text-white/30"><Sparkles size={60} /></div>
+                <div
+                    className="relative w-full h-full bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer"
+                    // KLUCZOWE: Używamy onPointerDown zamiast onTouchStart/onMouseDown
+                    onPointerDown={handleAction}
+                >
+                    {/* TŁO / DEKORACJE */}
+                    <div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
+                    <div className="absolute top-40 right-20 text-white/30"><Sparkles size={60} /></div>
 
-                <div className="absolute top-6 right-8 text-right z-30 font-black">
-                    <div className="text-pink-500 text-4xl">Score: {score}</div>
-                    <div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
-                </div>
+                    {/* CHMURY (Ozdoba) */}
+                    <div className="absolute bottom-10 left-10 w-24 h-8 bg-white/40 rounded-full" />
+                    <div className="absolute top-20 left-1/2 w-32 h-10 bg-white/40 rounded-full" />
 
-                <div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
-                    <DetailedKitty isGameOver={gameOver} />
-                </div>
+                    {/* HUD */}
+                    <div className="absolute top-6 right-8 text-right z-30 font-black pointer-events-none">
+                        <div className="text-pink-500 text-4xl drop-shadow-sm">Score: {score}</div>
+                        <div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
+                    </div>
 
-                {displayPipes.map(p => (
-                    <React.Fragment key={p.id}>
-                        <div className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl" style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }} />
-                        <div className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl" style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: CANVAS_HEIGHT - (p.topHeight + GAP_SIZE) }} />
-                    </React.Fragment>
-                ))}
+                    {/* GRACZ (KOT) */}
+                    <div className="absolute left-10 z-20 pointer-events-none" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
+                        <DetailedKitty isGameOver={gameOver} />
+                    </div>
 
-                {!isPlaying && !gameOver && (
-                    <div className="absolute inset-0 bg-white/40 backdrop-blur-sm flex items-center justify-center z-40">
-                        <div className="bg-white p-10 rounded-[3rem] shadow-2xl text-center border-4 border-pink-100">
-                            <p className="text-3xl font-black text-pink-500 mb-6">Flappy Cat 🎈</p>
-                            <button className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg">START</button>
+                    {/* RURY */}
+                    {displayPipes.map(p => (
+                        <React.Fragment key={p.id}>
+                            {/* Górna rura */}
+                            <div className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl pointer-events-none"
+                                style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }} />
+
+                            {/* Dolna rura */}
+                            <div className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl pointer-events-none"
+                                style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: GAME_HEIGHT - (p.topHeight + GAP_SIZE) }} />
+                        </React.Fragment>
+                    ))}
+
+                    {/* EKRAN STARTOWY */}
+                    {!isPlaying && !gameOver && (
+                        <div className="absolute inset-0 bg-white/40 backdrop-blur-sm flex items-center justify-center z-40">
+                            <div className="bg-white p-10 rounded-[3rem] shadow-2xl text-center border-4 border-pink-100 mx-4 pointer-events-none">
+                                <p className="text-3xl font-black text-pink-500 mb-6">Flappy Cat 🎈</p>
+                                <p className="text-slate-400 mb-4 text-sm font-bold uppercase tracking-widest">Tap to Jump</p>
+                                <div className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg inline-block">START</div>
+                            </div>
                         </div>
-                    </div>
-                )}
+                    )}
 
-                {gameOver && (
-                    <div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
-                        <h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
-                        <p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
-                        <button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl">TRY AGAIN</button>
-                    </div>
-                )}
+                    {/* GAME OVER */}
+                    {gameOver && (
+                        <div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
+                            <h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
+                            <p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
+                            <button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl hover:bg-pink-600 transition-colors pointer-events-auto"
+                                onPointerDown={(e) => {
+                                    e.stopPropagation(); // Żeby kliknięcie w guzik nie podbiło kota w tle
+                                    startGame();
+                                }}
+                            >
+                                TRY AGAIN
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <div className="mt-4 text-xs text-slate-400 sm:hidden">
+                Tap anywhere to jump
             </div>
-            
         </div>
     );
 };