fix: games physics

2025-12-30 19:33:28 +01:00
parent bca5fc03a8
commit 502543d6ac
2 changed files with 124 additions and 116 deletions
--- a/kittyurl-frontend/src/components/FlappyCat.tsx
+++ b/kittyurl-frontend/src/components/FlappyCat.tsx
@@ -2,9 +2,14 @@
 import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
 import { DetailedKitty } from './DetailedKitty';

-const GAP_SIZE = 170; // Przerwa między drapakami
+// --- STAŁE KONFIGURACYJNE (Wartości na sekundę) ---
+const GAP_SIZE = 170;
 const PIPE_WIDTH = 70;
-const PIPE_SPAWN_RATE = 1500; // Nowy drapak co 1.5 sekundy
+const PIPE_SPEED = 250;      // px/s
+const PIPE_SPAWN_RATE = 1.5; // Sekundy
+const GRAVITY = 1600;        // px/s^2
+const FLAP_STRENGTH = -450;  // px/s
+const CANVAS_HEIGHT = 450;

 export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    const [isPlaying, setIsPlaying] = useState(false);
@@ -15,20 +20,28 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        return saved ? parseInt(saved, 10) : 0;
    });

-    // Stany pozycji do renderowania
    const [displayKittyY, setDisplayKittyY] = useState(150);
    const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
    const [rotation, setRotation] = useState(0);

-    // Referencje do fizyki (obliczenia poza Reactem dla płynności)
+    // Referencje do fizyki i czasu
    const kittyYRef = useRef(150);
    const velocityRef = useRef(0);
-    const pipesRef = useRef<{ x: number; topHeight: number; id: number }[]>([]);
+    const pipesRef = useRef<{ x: number; topHeight: number; id: number; passed?: boolean }[]>([]);
    const scoreRef = useRef(0);
    const requestRef = useRef<number>(0);
+    const lastTimeRef = useRef<number>(0);
+    const spawnTimerRef = useRef<number>(0);

-    const GRAVITY = 0.35;
-    const JUMP_STRENGTH = -7;
+    const endGame = useCallback(() => {
+        setGameOver(true);
+        setIsPlaying(false);
+        const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
+        if (scoreRef.current > currentHS) {
+            setHighScore(scoreRef.current);
+            localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
+        }
+    }, []);

    const startGame = useCallback(() => {
        setIsPlaying(true);
@@ -38,90 +51,92 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        kittyYRef.current = 150;
        velocityRef.current = 0;
        pipesRef.current = [];
+        spawnTimerRef.current = 0;
+        lastTimeRef.current = performance.now();
        setDisplayKittyY(150);
        setDisplayPipes([]);
    }, []);

    const flap = useCallback(() => {
        if (isPlaying && !gameOver) {
-            velocityRef.current = JUMP_STRENGTH;
+            velocityRef.current = FLAP_STRENGTH;
        }
    }, [isPlaying, gameOver]);

    useEffect(() => {
-        const update = () => {
+        const update = (currentTime: number) => {
            if (gameOver || !isPlaying) return;

-            // 1. Fizyka lotu
-            velocityRef.current += GRAVITY;
-            kittyYRef.current += velocityRef.current;
+            // 1. Obliczanie Delta Time
+            const dt = (currentTime - lastTimeRef.current) / 1000;
+            lastTimeRef.current = currentTime;

-            // Obrót kota zależnie od prędkości
-            setRotation(Math.min(Math.max(velocityRef.current * 4, -20), 90));
+            // Zabezpieczenie przed "skokami" przy lagach (max 100ms)
+            const frameTime = Math.min(dt, 0.1);

-            // 2. Kolizja z sufitem i podłogą
-            if (kittyYRef.current > 380 || kittyYRef.current < -50) {
+            // 2. Fizyka Kota
+            velocityRef.current += GRAVITY * frameTime;
+            kittyYRef.current += velocityRef.current * frameTime;
+
+            // Wizualny obrót (od -20 stopni przy locie w górę do 90 przy spadaniu)
+            const targetRotation = Math.min(Math.max(velocityRef.current * 0.15, -20), 90);
+            setRotation(targetRotation);
+
+            // 3. Kolizja z granicami ekranu
+            if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -20) {
                endGame();
                return;
            }

-            // 3. Ruch drapaków (rur)
-            pipesRef.current = pipesRef.current
-                .map(p => ({ ...p, x: p.x - 4 })) // Prędkość rur
-                .filter(p => p.x > -100);
+            // 4. Zarządzanie Rurami (Spawning)
+            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() });
+                spawnTimerRef.current = 0;
+            }

-            // 4. Wykrywanie kolizji z drapakami
-            pipesRef.current.forEach(p => {
-                // Kot jest na stałej pozycji X (ok. 50-100px)
-                if (p.x < 110 && p.x + PIPE_WIDTH > 40) {
-                    // Sprawdzanie czy kot uderzył w górny lub dolny drapak
-                    if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 40) {
+            // 5. Ruch rur i Kolizje
+            const updatedPipes = [];
+            for (let p of pipesRef.current) {
+                p.x -= PIPE_SPEED * frameTime;
+
+                // Sprawdzanie kolizji
+                // Kitty X jest stałe na ok. 50-90px. Kot ma szerokość ok. 40px w uproszczeniu kolizyjnym.
+                if (p.x < 100 && p.x + PIPE_WIDTH > 50) {
+                    if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
                        endGame();
+                        return;
                    }
                }

-                // Dodawanie punktów
-                if (p.x < 40 && !p.hasOwnProperty('passed')) {
-                    (p as any).passed = true;
+                // Punktacja
+                if (p.x < 50 && !p.passed) {
+                    p.passed = true;
                    scoreRef.current += 1;
                    setScore(scoreRef.current);
                }
-            });

-            // 5. Synchronizacja z widokiem
+                // Usuwanie rur poza ekranem
+                if (p.x > -PIPE_WIDTH) {
+                    updatedPipes.push(p);
+                }
+            }
+            pipesRef.current = updatedPipes;
+
+            // 6. Sync UI
            setDisplayKittyY(kittyYRef.current);
            setDisplayPipes([...pipesRef.current]);

            requestRef.current = requestAnimationFrame(update);
        };

-        const endGame = () => {
-            setGameOver(true);
-            setIsPlaying(false);
-            const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
-            if (scoreRef.current > currentHS) {
-                setHighScore(scoreRef.current);
-                localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
-            }
-        };
-
        if (isPlaying && !gameOver) {
            requestRef.current = requestAnimationFrame(update);
        }
        return () => cancelAnimationFrame(requestRef.current);
-    }, [isPlaying, gameOver]);
+    }, [isPlaying, gameOver, endGame]);

-    // Generator nowych drapaków
-    useEffect(() => {
-        if (!isPlaying || gameOver) return;
-        const interval = setInterval(() => {
-            const topHeight = Math.random() * (220 - 50) + 50;
-            pipesRef.current.push({ x: 650, topHeight, id: Date.now() });
-        }, PIPE_SPAWN_RATE);
-        return () => clearInterval(interval);
-    }, [isPlaying, gameOver]);
-
-    // Obsługa klawiszy
    useEffect(() => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.code === 'Space') {
@@ -134,65 +149,55 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    }, [isPlaying, gameOver, startGame, flap]);

    return (
-        <div className="flex flex-col items-center justify-center min-h-[75vh] p-4">
+        <div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans">
            <button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none">
                <ArrowLeft size={20} /> Back to Menu
            </button>

-            {/* OKNO GRY */}
            <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 select-none"
                onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
            >
-                {/* Dekoracje tła */}
-                <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>
-
                {/* Punkty */}
                <div className="absolute top-6 right-8 text-right z-30 font-black">
                    <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 className="text-pink-300 text-sm flex items-center justify-end gap-1">
+                        <Trophy size={14} /> Record: {highScore}
+                    </div>
                </div>

                {/* KOTEK */}
                <div
-                    className="absolute left-10 z-20 transition-transform duration-75"
+                    className="absolute left-10 z-20"
                    style={{
                        top: `${displayKittyY}px`,
-                        transform: `rotate(${rotation}deg)`
+                        transform: `rotate(${rotation}deg)`,
+                        transition: 'transform 0.1s ease-out' // Lekkie wygładzenie obrotu
                    }}
                >
                    <DetailedKitty isJumping={true} isNight={false} isGameOver={gameOver} />
                </div>

-                {/* DRAPAKI (Rury) */}
+                {/* DRAPAKI */}
                {displayPipes.map(p => (
                    <React.Fragment key={p.id}>
-                        {/* Górny Drapak */}
                        <div
                            className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl shadow-sm"
                            style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }}
-                        >
-                            <div className="absolute bottom-4 w-full h-2 bg-white/20" />
-                            <div className="absolute bottom-8 w-full h-2 bg-white/20" />
-                        </div>
-                        {/* Dolny Drapak */}
+                        />
                        <div
                            className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl shadow-sm"
-                            style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: 450 - (p.topHeight + GAP_SIZE) }}
-                        >
-                            <div className="absolute top-4 w-full h-2 bg-white/20" />
-                            <div className="absolute top-8 w-full h-2 bg-white/20" />
-                        </div>
+                            style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: CANVAS_HEIGHT - (p.topHeight + GAP_SIZE) }}
+                        />
                    </React.Fragment>
                ))}

-                {/* Ekran Startowy */}
+                {/* Ekrany informacyjne */}
                {!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 max-w-xs w-full">
                            <p className="text-3xl font-black text-pink-500 mb-6 tracking-tighter">Flappy Cat 🎈</p>
-                            <button className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce shadow-lg shadow-pink-200 text-xl">
+                            <button className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce shadow-lg text-xl">
                                MEOW TO FLY
                            </button>
                            <p className="text-pink-300 text-xs mt-4 font-bold uppercase">Click or Space</p>
@@ -200,12 +205,11 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                    </div>
                )}

-                {/* Ekran Koniec Gry */}
                {gameOver && (
                    <div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40">
                        <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:scale-110 transition-all active:scale-95">
+                        <button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl hover:scale-110 transition-all">
                            TRY AGAIN
                        </button>
                    </div>
--- a/kittyurl-frontend/src/components/KittyGame.tsx
+++ b/kittyurl-frontend/src/components/KittyGame.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { ArrowLeft, Trophy, Sparkles, Moon, Sun } from 'lucide-react';

-// --- ZAAWANSOWANY MODEL KOTA (DetailedKitty) ---
+// --- ZAAWANSOWANY MODEL KOTA (Bez zmian w UI) ---
 interface DetailedKittyProps {
    isJumping: boolean;
    isNight: boolean;
@@ -15,8 +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={{
@@ -24,39 +22,27 @@ 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 }}>
-                {/* Paski dekoracyjne */}
                <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 }}>
-                {/* Uszy */}
                <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 }} />
                </div>
                <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>
-
-                {/* Oczy */}
                <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>
-
-                {/* Wąsy */}
                <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 (Animowane) */}
            <div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top"
                style={{
                    backgroundColor: mainColor,
@@ -77,7 +63,7 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
    );
 };

-// --- GŁÓWNY KOMPONENT GRY ---
+// --- GŁÓWNY KOMPONENT GRY (Zoptymalizowany pod Delta Time) ---
 export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    const [isPlaying, setIsPlaying] = useState(false);
    const [gameOver, setGameOver] = useState(false);
@@ -92,14 +78,19 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {

    const isNight = Math.floor(score / 10) % 2 === 1;

+    // Referencje do fizyki
    const kittyYRef = useRef(0);
    const obstacleXRef = useRef(600);
    const velocityRef = useRef(0);
    const scoreRef = useRef(0);
    const requestRef = useRef<number>(0);
+    const lastTimeRef = useRef<number>(0);

-    const GRAVITY = 0.6;
-    const JUMP_STRENGTH = -11;
+    // STAŁE FIZYKI (Wartości na sekundę)
+    const GRAVITY = 1800;        // px/s^2
+    const JUMP_FORCE = -550;     // Moc skoku
+    const INITIAL_SPEED = 350;   // px/s
+    const SPEED_INCREMENT = 15;  // Przyspieszenie z każdym punktem
    const GROUND_Y = 0;

    const endGame = useCallback(() => {
@@ -118,38 +109,51 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        setScore(0);
        scoreRef.current = 0;
        kittyYRef.current = 0;
-        obstacleXRef.current = 600;
+        obstacleXRef.current = 650;
        velocityRef.current = 0;
+        lastTimeRef.current = performance.now(); // Reset czasu startu
        setDisplayKittyY(0);
-        setDisplayObstacleX(600);
+        setDisplayObstacleX(650);
    }, []);

    const jump = useCallback(() => {
        if (kittyYRef.current <= GROUND_Y && !gameOver && isPlaying) {
-            velocityRef.current = JUMP_STRENGTH;
+            velocityRef.current = JUMP_FORCE;
        }
    }, [gameOver, isPlaying]);

    useEffect(() => {
-        const update = () => {
+        const update = (time: number) => {
            if (gameOver || !isPlaying) return;

-            velocityRef.current += GRAVITY;
-            kittyYRef.current -= velocityRef.current;
+            // Oblicz delta time (czas w sekundach)
+            const deltaTime = (time - lastTimeRef.current) / 1000;
+            lastTimeRef.current = time;
+
+            // Ogranicz deltaTime, aby uniknąć gigantycznych skoków przy lagach
+            const dt = Math.min(deltaTime, 0.1);
+
+            // Fizyka Skoku
+            velocityRef.current += GRAVITY * dt;
+            kittyYRef.current -= velocityRef.current * dt;
+
            if (kittyYRef.current <= GROUND_Y) {
                kittyYRef.current = GROUND_Y;
                velocityRef.current = 0;
            }

-            obstacleXRef.current -= 5 + (scoreRef.current * 0.2);
-            if (obstacleXRef.current < -50) {
-                obstacleXRef.current = 650;
+            // Fizyka Przeszkody
+            const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
+            obstacleXRef.current -= currentSpeed * dt;
+
+            if (obstacleXRef.current < -60) {
+                obstacleXRef.current = 700;
                scoreRef.current += 1;
                setScore(scoreRef.current);
            }

-            // DOSTOSOWANA KOLIZJA: Uwzględnia większy model kota
-            if (obstacleXRef.current < 110 && obstacleXRef.current > 30 && kittyYRef.current < 45) {
+            // Kolizja
+            if (obstacleXRef.current < 90 && obstacleXRef.current > 20 && kittyYRef.current < 45) {
                endGame();
                return;
            }
@@ -177,25 +181,25 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    }, [isPlaying, gameOver, startGame, jump]);

    return (
-        <div className="flex flex-col items-center justify-center min-h-[70vh] p-4">
+        <div className="flex flex-col items-center justify-center min-h-[70vh] p-4 font-sans">
            <button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none">
                <ArrowLeft size={20} /> Back to Home
            </button>

            <div
                className={`relative w-full max-w-[650px] h-[320px] rounded-[3.5rem] shadow-2xl border-4 transition-colors duration-1000 overflow-hidden cursor-pointer select-none
-          ${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
+                ${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 */}
+                {/* Niebo i Słońce/Księżyc */}
                <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>
                <div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? '-translate-y-20 opacity-0' : 'translate-y-0 opacity-100'}`}>
-                    <Sun className="text-yellow-400 fill-yellow-200 animate-spin-slow" size={48} />
+                    <Sun className="text-yellow-400 fill-yellow-200" size={48} />
                </div>

-                {/* Wyniki */}
+                {/* Score UI */}
                <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'}`}>
@@ -208,10 +212,10 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                    <DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
                </div>

-                {/* PRZESZKODA (Kłębek wełny) */}
+                {/* 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 shadow-lg shadow-indigo-500/30' : 'bg-pink-200 border-pink-400'}`}
+                    ${isNight ? 'bg-indigo-900 border-indigo-400 shadow-lg shadow-indigo-500/30' : 'bg-pink-200 border-pink-400'}`}
                    style={{ left: `${displayObstacleX}px` }}
                >
                    <div className={`w-8 h-1 border-t-2 rotate-45 ${isNight ? 'border-indigo-300' : 'border-pink-400'}`}></div>
@@ -219,7 +223,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {

                {/* 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'}`}>
+                    ${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>

@@ -237,7 +241,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {

                {gameOver && (
                    <div className={`absolute inset-0 backdrop-blur-md flex flex-col items-center justify-center text-center p-6 transition-colors duration-1000
-            ${isNight ? 'bg-slate-950/90' : 'bg-pink-50/90'}`}>
+                        ${isNight ? 'bg-slate-950/90' : 'bg-pink-50/90'}`}>
                        <h3 className={`text-5xl font-black mb-4 ${isNight ? 'text-white' : 'text-pink-600'}`}>Meow! 😿</h3>
                        <p className={`font-bold mb-8 text-2xl ${isNight ? 'text-indigo-300' : 'text-pink-400'}`}>Score: {score}</p>
                        <button className="bg-pink-500 text-white border-4 border-white px-12 py-4 rounded-2xl font-black text-xl hover:bg-pink-600 transition-all shadow-xl">