fix: static fps 60

kittyurl-frontend/src/components/FlappyCat.tsx

@@ -1,16 +1,12 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
 
-// --- MODEL KOTA ---
+// --- MODEL KOTA (bez zmian) ---
-interface DetailedKittyProps {
+interface DetailedKittyProps { isGameOver: boolean; }
-    isGameOver: boolean;
-}
-
 const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
     const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
     const stripeColor = '#ec4899';
     const earColor = '#fbcfe8';
-
     return (
         <div className="relative w-20 h-14">
             <div className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]" style={{ backgroundColor: mainColor }} />
@@ -36,13 +32,16 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
     );
 };
 
-// --- KONFIGURACJA ---
+// --- KONFIGURACJA STABILNA ---
-const GAP_SIZE = 170;
+const FPS_LIMIT = 60;
+const FRAME_MIN_TIME = 1000 / FPS_LIMIT; // ok. 16.67ms
+
+const GAP_SIZE = 180;
 const PIPE_WIDTH = 70;
-const PIPE_SPEED = 250;      // px/s
+const PIPE_SPEED = 180;
-const PIPE_SPAWN_RATE = 1.5; // sekundy
+const PIPE_SPAWN_RATE = 2.0;
-const GRAVITY = 1600;        // px/s^2
+const GRAVITY = 1200;
-const FLAP_STRENGTH = -450;  // px/s
+const FLAP_STRENGTH = -380;
 const CANVAS_HEIGHT = 450;
 
 export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
@@ -64,17 +63,17 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
     const scoreRef = useRef(0);
     const requestRef = useRef<number>(0);
     const lastTimeRef = useRef<number>(0);
+    const lastFrameTimestampRef = useRef<number>(0); // Do pilnowania FPS
     const spawnTimerRef = useRef<number>(0);
 
     const endGame = useCallback(() => {
         setGameOver(true);
         setIsPlaying(false);
-        const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
+        if (scoreRef.current > highScore) {
-        if (scoreRef.current > currentHS) {
             setHighScore(scoreRef.current);
             localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
         }
-    }, []);
+    }, [highScore]);
 
     const startGame = useCallback(() => {
         setIsPlaying(true);
@@ -86,29 +85,40 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         pipesRef.current = [];
         spawnTimerRef.current = 0;
         lastTimeRef.current = performance.now();
+        lastFrameTimestampRef.current = performance.now();
         setDisplayKittyY(150);
         setDisplayPipes([]);
     }, []);
 
     const flap = useCallback(() => {
-        if (isPlaying && !gameOver) {
+        if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
-            velocityRef.current = FLAP_STRENGTH;
-        }
     }, [isPlaying, gameOver]);
 
     useEffect(() => {
         const update = (currentTime: number) => {
             if (gameOver || !isPlaying) return;
 
+            // --- MECHANIZM FPS CAP ---
+            const elapsedSinceLastFrame = currentTime - lastFrameTimestampRef.current;
+
+            // Jeśli klatka przyszła za szybko (np. na monitorze 144Hz), pomijamy update
+            if (elapsedSinceLastFrame < FRAME_MIN_TIME) {
+                requestRef.current = requestAnimationFrame(update);
+                return;
+            }
+
+            // Obliczamy dt na podstawie rzeczywistego czasu, który upłynął
             const dt = (currentTime - lastTimeRef.current) / 1000;
             lastTimeRef.current = currentTime;
+            lastFrameTimestampRef.current = currentTime; // Aktualizujemy znacznik klatki
+
             const frameTime = Math.min(dt, 0.1);
 
             velocityRef.current += GRAVITY * frameTime;
             kittyYRef.current += velocityRef.current * frameTime;
-            setRotation(Math.min(Math.max(velocityRef.current * 0.15, -20), 90));
+            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 70));
 
-            if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -20) {
+            if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -40) {
                 endGame();
                 return;
             }
@@ -121,26 +131,20 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
             }
 
             const updatedPipes = [];
-            // POPRAWKA: użycie 'const p' zamiast 'let p'
             for (const p of pipesRef.current) {
                 p.x -= PIPE_SPEED * frameTime;
-
                 if (p.x < 100 && p.x + PIPE_WIDTH > 50) {
                     if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
                         endGame();
                         return;
                     }
                 }
-
                 if (p.x < 50 && !p.passed) {
                     p.passed = true;
                     scoreRef.current += 1;
                     setScore(scoreRef.current);
                 }
-
+                if (p.x > -PIPE_WIDTH) updatedPipes.push(p);
-                if (p.x > -PIPE_WIDTH) {
-                    updatedPipes.push(p);
-                }
             }
             pipesRef.current = updatedPipes;
 
@@ -176,7 +180,6 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                 className="relative w-full max-w-[600px] h-[450px] bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer select-none"
                 onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
             >
-                {/* DEKORACJE - 'Sparkles' jest teraz używane i zaimportowane */}
                 <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>
 
@@ -185,7 +188,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                     <div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
                 </div>
 
-                <div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.1s ease-out' }}>
+                <div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.1s linear' }}>
                     <DetailedKitty isGameOver={gameOver} />
                 </div>
 

kittyurl-frontend/src/components/KittyGame.tsx

@@ -15,7 +15,6 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
 
     return (
         <div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}>
-            {/* OGON */}
             <div
                 className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]"
                 style={{
@@ -23,14 +22,10 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
                     animation: !isGameOver ? 'tail-wag 0.8s ease-in-out infinite' : 'none'
                 }}
             />
-
-            {/* TUŁÓW */}
             <div className="absolute inset-0 rounded-[2rem] overflow-hidden shadow-sm" style={{ backgroundColor: mainColor }}>
                 <div className="absolute top-0 left-1/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
                 <div className="absolute top-0 left-1/2 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
             </div>
-
-            {/* GŁOWA */}
             <div className="absolute -right-4 -top-6 w-14 h-13 rounded-full shadow-sm" style={{ backgroundColor: mainColor }}>
                 <div className="absolute -top-2 left-1 w-5 h-6 rounded-t-full rotate-[-15deg]" style={{ backgroundColor: mainColor }}>
                     <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
@@ -38,20 +33,14 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
                 <div className="absolute -top-2 right-1 w-5 h-6 rounded-t-full rotate-[15deg]" style={{ backgroundColor: mainColor }}>
                     <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
                 </div>
-
                 <div className={`absolute top-5 left-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 text-[10px] flex items-center justify-center' : 'bg-slate-900'}`}>
                     {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
                 </div>
                 <div className={`absolute top-5 right-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 text-[10px] flex items-center justify-center' : 'bg-slate-900'}`}>
                     {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
                 </div>
-
-                <div className="absolute top-7 -left-2 w-3 h-[1px] bg-slate-300 rotate-[10deg] opacity-40" />
-                <div className="absolute top-9 -left-2 w-3 h-[1px] bg-slate-300 rotate-[-10deg] opacity-40" />
                 <div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
             </div>
-
-            {/* ŁAPKI */}
             <div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top"
                 style={{
                     backgroundColor: mainColor,
@@ -87,19 +76,23 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
 
     const isNight = Math.floor(score / 10) % 2 === 1;
 
-    // Referencje do fizyki i czasu
+    // --- REF DO FPS I FIZYKI ---
     const kittyYRef = useRef(0);
     const obstacleXRef = useRef(650);
     const velocityRef = useRef(0);
     const scoreRef = useRef(0);
     const requestRef = useRef<number>(0);
     const lastTimeRef = useRef<number>(0);
+    const lastFrameTimestampRef = useRef<number>(0);
 
-    // STAŁE KONFIGURACYJNE (Wartości na sekundę)
+    // --- STAŁE ---
-    const GRAVITY = 1800;        // px/s^2
+    const TARGET_FPS = 60;
-    const JUMP_FORCE = -550;     // Moc skoku
+    const FRAME_MIN_TIME = 1000 / TARGET_FPS; // ok. 16.67ms
-    const INITIAL_SPEED = 350;   // px/s
+
-    const SPEED_INCREMENT = 15;  // Przyspieszenie za każdy punkt
+    const GRAVITY = 1800;
+    const JUMP_FORCE = -550;
+    const INITIAL_SPEED = 350;
+    const SPEED_INCREMENT = 15;
     const GROUND_Y = 0;
 
     const endGame = useCallback(() => {
@@ -121,6 +114,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         obstacleXRef.current = 650;
         velocityRef.current = 0;
         lastTimeRef.current = performance.now();
+        lastFrameTimestampRef.current = performance.now();
         setDisplayKittyY(0);
         setDisplayObstacleX(650);
     }, []);
@@ -135,10 +129,19 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         const update = (time: number) => {
             if (gameOver || !isPlaying) return;
 
+            // --- MECHANIZM FPS CAP ---
+            const elapsedSinceLastFrame = time - lastFrameTimestampRef.current;
+            if (elapsedSinceLastFrame < FRAME_MIN_TIME) {
+                requestRef.current = requestAnimationFrame(update);
+                return;
+            }
+
             // Delta time (dt) w sekundach
             const dt = (time - lastTimeRef.current) / 1000;
             lastTimeRef.current = time;
-            const frameTime = Math.min(dt, 0.1); // Limit klatki
+            lastFrameTimestampRef.current = time; // Aktualizujemy czas klatki
+
+            const frameTime = Math.min(dt, 0.1);
 
             // Fizyka kota
             velocityRef.current += GRAVITY * frameTime;
@@ -198,7 +201,6 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                 ${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
                 onClick={() => { if (!isPlaying || gameOver) startGame(); else jump(); }}
             >
-                {/* Niebo (Używamy Moon i Sun) */}
                 <div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'}`}>
                     <Moon className="text-indigo-200 fill-indigo-100" size={48} />
                 </div>
@@ -206,7 +208,6 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                     <Sun className="text-yellow-400 fill-yellow-200" size={48} />
                 </div>
 
-                {/* Wyniki (Używamy Trophy) */}
                 <div className={`absolute top-6 right-8 text-right z-10 font-black transition-colors duration-1000 ${isNight ? 'text-indigo-100' : 'text-pink-500'}`}>
                     <div className="text-3xl tracking-tighter">Score: {score}</div>
                     <div className={`text-sm flex items-center justify-end gap-1 ${isNight ? 'text-indigo-400' : 'text-pink-300'}`}>
@@ -214,12 +215,10 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                     </div>
                 </div>
 
-                {/* KOTEK */}
                 <div className="absolute left-10" style={{ bottom: `${displayKittyY + 48}px` }}>
                     <DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
                 </div>
 
-                {/* PRZESZKODA */}
                 <div
                     className={`absolute bottom-12 w-12 h-12 rounded-full border-2 flex items-center justify-center animate-spin transition-colors duration-1000
                     ${isNight ? 'bg-indigo-900 border-indigo-400' : 'bg-pink-200 border-pink-400'}`}
@@ -228,13 +227,11 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                     <div className={`w-8 h-1 border-t-2 rotate-45 ${isNight ? 'border-indigo-300' : 'border-pink-400'}`}></div>
                 </div>
 
-                {/* Ziemia */}
                 <div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around
                 ${isNight ? 'bg-slate-900 border-indigo-900 text-indigo-900' : 'bg-pink-50 border-pink-100 text-pink-200'}`}>
                     {[...Array(9)].map((_, i) => <span key={i} className="text-2xl">🐾</span>)}
                 </div>
 
-                {/* Ekrany informacyjne (Używamy Sparkles) */}
                 {!isPlaying && !gameOver && (
                     <div className="absolute inset-0 bg-white/20 backdrop-blur-[4px] flex items-center justify-center">
                         <div className="bg-white p-10 rounded-[3rem] shadow-2xl flex flex-col items-center border-4 border-pink-100">
@@ -257,6 +254,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                     </div>
                 )}
             </div>
+            <p className="mt-4 text-slate-400 text-sm font-medium">Space / Click to Jump</p>
         </div>
     );
 };