kittyteam/kittyFE
3
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix: speed calculated based by user monitor hz

Browse Source
This commit is contained in:
Pc
2025-12-30 20:41:01 +01:00
parent 933c34a67e
commit b423cb8f1f
2 changed files with 94 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
kittyurl-frontend/src/components/FlappyCat.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, useCallback } from 'react'; import React, { useState, useEffect, useRef, useCallback } from 'react';
import { ArrowLeft, Trophy, Sparkles } from 'lucide-react'; import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
// --- MODEL KOTA (bez zmian) --- // --- MODEL KOTA ---
interface DetailedKittyProps { isGameOver: boolean; } interface DetailedKittyProps { isGameOver: boolean; }
const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => { const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
const mainColor = isGameOver ? '#cbd5e1' : '#f472b6'; const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
@@ -32,16 +32,13 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
); );
}; };
// --- KONFIGURACJA STABILNA --- // --- KONFIGURACJA NIEZALEŻNA OD FPS (Wartości na sekundę) ---
const FPS_LIMIT = 60;
const FRAME_MIN_TIME = 1000 / FPS_LIMIT; // ok. 16.67ms
const GAP_SIZE = 180; const GAP_SIZE = 180;
const PIPE_WIDTH = 70; const PIPE_WIDTH = 70;
const PIPE_SPEED = 180; const PIPE_SPEED = 200; // px/s
const PIPE_SPAWN_RATE = 2.0; const PIPE_SPAWN_RATE = 1.8; // sekundy
const GRAVITY = 1200; const GRAVITY = 1400; // px/s^2
const FLAP_STRENGTH = -380; const FLAP_STRENGTH = -420; // px/s
const CANVAS_HEIGHT = 450; const CANVAS_HEIGHT = 450;
export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => { export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
@@ -63,17 +60,17 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
const scoreRef = useRef(0); const scoreRef = useRef(0);
const requestRef = useRef<number>(0); const requestRef = useRef<number>(0);
const lastTimeRef = useRef<number>(0); const lastTimeRef = useRef<number>(0);
const lastFrameTimestampRef = useRef<number>(0); // Do pilnowania FPS
const spawnTimerRef = useRef<number>(0); const spawnTimerRef = useRef<number>(0);
const endGame = useCallback(() => { const endGame = useCallback(() => {
setGameOver(true); setGameOver(true);
setIsPlaying(false); setIsPlaying(false);
if (scoreRef.current > highScore) { const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
if (scoreRef.current > currentHS) {
setHighScore(scoreRef.current); setHighScore(scoreRef.current);
localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString()); localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
} }
}, [highScore]); }, []);
const startGame = useCallback(() => { const startGame = useCallback(() => {
setIsPlaying(true); setIsPlaying(true);
@@ -84,10 +81,10 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
velocityRef.current = 0; velocityRef.current = 0;
pipesRef.current = []; pipesRef.current = [];
spawnTimerRef.current = 0; spawnTimerRef.current = 0;
lastTimeRef.current = performance.now(); lastTimeRef.current = performance.now(); // Inicjalizacja czasu
lastFrameTimestampRef.current = performance.now();
setDisplayKittyY(150); setDisplayKittyY(150);
setDisplayPipes([]); setDisplayPipes([]);
setRotation(0);
}, []); }, []);
const flap = useCallback(() => { const flap = useCallback(() => {
@@ -98,31 +95,28 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
const update = (currentTime: number) => { const update = (currentTime: number) => {
if (gameOver || !isPlaying) return; if (gameOver || !isPlaying) return;
// --- MECHANIZM FPS CAP --- // --- DYNAMICZNY DELTA TIME ---
const elapsedSinceLastFrame = currentTime - lastFrameTimestampRef.current; // Obliczamy ile sekund upłynęło od ostatniej klatki (np. 0.0069s dla 144Hz)
// 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; const dt = (currentTime - lastTimeRef.current) / 1000;
lastTimeRef.current = currentTime; lastTimeRef.current = currentTime;
lastFrameTimestampRef.current = currentTime; // Aktualizujemy znacznik klatki
// Zabezpieczenie przed ogromnym skokiem fizyki przy lagu
const frameTime = Math.min(dt, 0.1); const frameTime = Math.min(dt, 0.1);
// Fizyka grawitacji
velocityRef.current += GRAVITY * frameTime; velocityRef.current += GRAVITY * frameTime;
kittyYRef.current += velocityRef.current * frameTime; kittyYRef.current += velocityRef.current * frameTime;
setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 70));
if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -40) { // Płynna rotacja zależna od prędkości pionowej
setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 80));
// Kolizja z sufitem/ziemią
if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -50) {
endGame(); endGame();
return; return;
} }
// Spawn rur
spawnTimerRef.current += frameTime; spawnTimerRef.current += frameTime;
if (spawnTimerRef.current >= PIPE_SPAWN_RATE) { if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
const topHeight = Math.random() * (220 - 70) + 70; const topHeight = Math.random() * (220 - 70) + 70;
@@ -130,26 +124,34 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
spawnTimerRef.current = 0; spawnTimerRef.current = 0;
} }
// Ruch rur i kolizje
const updatedPipes = []; const updatedPipes = [];
for (const p of pipesRef.current) { for (const p of pipesRef.current) {
p.x -= PIPE_SPEED * frameTime; p.x -= PIPE_SPEED * frameTime;
if (p.x < 100 && p.x + PIPE_WIDTH > 50) {
// Hitbox (z małym marginesem dla kota)
if (p.x < 100 && p.x + PIPE_WIDTH > 55) {
if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) { if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
endGame(); endGame();
return; return;
} }
} }
// Punktacja
if (p.x < 50 && !p.passed) { if (p.x < 50 && !p.passed) {
p.passed = true; p.passed = true;
scoreRef.current += 1; scoreRef.current += 1;
setScore(scoreRef.current); setScore(scoreRef.current);
} }
if (p.x > -PIPE_WIDTH) updatedPipes.push(p); if (p.x > -PIPE_WIDTH) updatedPipes.push(p);
} }
pipesRef.current = updatedPipes; pipesRef.current = updatedPipes;
// Update stanów do renderowania
setDisplayKittyY(kittyYRef.current); setDisplayKittyY(kittyYRef.current);
setDisplayPipes([...pipesRef.current]); setDisplayPipes([...pipesRef.current]);
requestRef.current = requestAnimationFrame(update); requestRef.current = requestAnimationFrame(update);
}; };
@@ -171,13 +173,13 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
}, [isPlaying, gameOver, startGame, flap]); }, [isPlaying, gameOver, startGame, flap]);
return ( return (
<div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans"> <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"> <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 <ArrowLeft size={20} /> Back to Menu
</button> </button>
<div <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" 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(); }} onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
> >
<div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div> <div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
@@ -188,7 +190,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 className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
</div> </div>
<div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.1s linear' }}> <div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
<DetailedKitty isGameOver={gameOver} /> <DetailedKitty isGameOver={gameOver} />
</div> </div>
@@ -216,6 +218,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
</div> </div>
)} )}
</div> </div>
<p className="mt-4 text-slate-400 text-sm font-bold uppercase tracking-widest">Physics: {lastTimeRef.current ? "Frame-Independent" : "Detecting..."}</p>
</div> </div>
); );
}; };

128
kittyurl-frontend/src/components/KittyGame.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, useCallback } from 'react'; import React, { useState, useEffect, useRef, useCallback } from 'react';
import { ArrowLeft, Trophy, Sparkles, Moon, Sun } from 'lucide-react'; import { ArrowLeft, Trophy, Sparkles, Moon, Sun } from 'lucide-react';
// --- ZAAWANSOWANY MODEL KOTA (DetailedKitty) --- // --- MODEL KOTA (Animacje CSS zostają, bo są czasowe, nie klatkowe) ---
interface DetailedKittyProps { interface DetailedKittyProps {
isJumping: boolean; isJumping: boolean;
isNight: boolean; isNight: boolean;
@@ -15,13 +15,8 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
return ( return (
<div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}> <div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}>
<div <div className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]"
className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]" style={{ backgroundColor: mainColor, animation: !isGameOver ? 'tail-wag 0.8s ease-in-out infinite' : 'none' }} />
style={{
backgroundColor: mainColor,
animation: !isGameOver ? 'tail-wag 0.8s ease-in-out infinite' : 'none'
}}
/>
<div className="absolute inset-0 rounded-[2rem] overflow-hidden shadow-sm" style={{ backgroundColor: mainColor }}> <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/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 className="absolute top-0 left-1/2 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
@@ -41,27 +36,20 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
</div> </div>
<div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" /> <div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
</div> </div>
{/* Łapki */}
<div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top" <div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top"
style={{ style={{ backgroundColor: mainColor, animation: !isJumping && !isGameOver ? 'kitty-walk 0.2s infinite' : 'none', transform: isJumping ? 'rotate(45deg)' : 'none' }}>
backgroundColor: mainColor,
animation: !isJumping && !isGameOver ? 'kitty-walk 0.2s infinite' : 'none',
transform: isJumping ? 'rotate(45deg)' : 'none'
}}>
<div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" /> <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
</div> </div>
<div className="absolute bottom-[-10px] right-5 w-3 h-6 rounded-full origin-top" <div className="absolute bottom-[-10px] right-5 w-3 h-6 rounded-full origin-top"
style={{ style={{ backgroundColor: mainColor, animation: !isJumping && !isGameOver ? 'kitty-walk-alt 0.2s infinite' : 'none', transform: isJumping ? 'rotate(-45deg)' : 'none' }}>
backgroundColor: mainColor,
animation: !isJumping && !isGameOver ? 'kitty-walk-alt 0.2s infinite' : 'none',
transform: isJumping ? 'rotate(-45deg)' : 'none'
}}>
<div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" /> <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
</div> </div>
</div> </div>
); );
}; };
// --- GŁÓWNY KOMPONENT GRY --- // --- GŁÓWNY KOMPONENT Z DYNAMICZNYM DELTA TIME ---
export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => { export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const [gameOver, setGameOver] = useState(false); const [gameOver, setGameOver] = useState(false);
@@ -76,23 +64,19 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
const isNight = Math.floor(score / 10) % 2 === 1; const isNight = Math.floor(score / 10) % 2 === 1;
// --- REF DO FPS I FIZYKI --- // Referencje fizyczne
const kittyYRef = useRef(0); const kittyYRef = useRef(0);
const obstacleXRef = useRef(650); const obstacleXRef = useRef(650);
const velocityRef = useRef(0); const velocityRef = useRef(0);
const scoreRef = useRef(0); const scoreRef = useRef(0);
const requestRef = useRef<number>(0); const requestRef = useRef<number>(0);
const lastTimeRef = useRef<number>(0); const lastTimeRef = useRef<number>(0);
const lastFrameTimestampRef = useRef<number>(0);
// --- STAŁE --- // STAŁE KONFIGURACYJNE (Wartości na sekundę - niezależne od Hz)
const TARGET_FPS = 60; const GRAVITY = 1800; // Kot spadnie o 1800px w ciągu sekundy (jeśli nie ma prędkości początkowej)
const FRAME_MIN_TIME = 1000 / TARGET_FPS; // ok. 16.67ms const JUMP_FORCE = -550; // Prędkość startowa skoku
const INITIAL_SPEED = 380; // Prędkość przeszkody w px/s
const GRAVITY = 1800; const SPEED_INCREMENT = 12; // Przyspieszenie px/s na każdy punkt
const JUMP_FORCE = -550;
const INITIAL_SPEED = 350;
const SPEED_INCREMENT = 15;
const GROUND_Y = 0; const GROUND_Y = 0;
const endGame = useCallback(() => { const endGame = useCallback(() => {
@@ -111,12 +95,12 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
setScore(0); setScore(0);
scoreRef.current = 0; scoreRef.current = 0;
kittyYRef.current = 0; kittyYRef.current = 0;
obstacleXRef.current = 650; obstacleXRef.current = 700;
velocityRef.current = 0; velocityRef.current = 0;
// Kluczowe: inicjalizacja czasu startu
lastTimeRef.current = performance.now(); lastTimeRef.current = performance.now();
lastFrameTimestampRef.current = performance.now();
setDisplayKittyY(0); setDisplayKittyY(0);
setDisplayObstacleX(650); setDisplayObstacleX(700);
}, []); }, []);
const jump = useCallback(() => { const jump = useCallback(() => {
@@ -126,24 +110,18 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
}, [gameOver, isPlaying]); }, [gameOver, isPlaying]);
useEffect(() => { useEffect(() => {
const update = (time: number) => { const update = (currentTime: number) => {
if (gameOver || !isPlaying) return; if (gameOver || !isPlaying) return;
// --- MECHANIZM FPS CAP --- // --- OBLICZANIE DELTA TIME (Dynamiczna szybkość) ---
const elapsedSinceLastFrame = time - lastFrameTimestampRef.current; // dt to czas w sekundach, jaki upłynął od ostatniej klatki (np. 0.016 dla 60Hz, 0.007 dla 144Hz)
if (elapsedSinceLastFrame < FRAME_MIN_TIME) { const dt = (currentTime - lastTimeRef.current) / 1000;
requestRef.current = requestAnimationFrame(update); lastTimeRef.current = currentTime;
return;
}
// Delta time (dt) w sekundach
const dt = (time - lastTimeRef.current) / 1000;
lastTimeRef.current = time;
lastFrameTimestampRef.current = time; // Aktualizujemy czas klatki
// Zabezpieczenie przed "skokiem" (np. gdy użytkownik zmieni kartę w przeglądarce)
const frameTime = Math.min(dt, 0.1); const frameTime = Math.min(dt, 0.1);
// Fizyka kota // Fizyka kota (jednostki * czas)
velocityRef.current += GRAVITY * frameTime; velocityRef.current += GRAVITY * frameTime;
kittyYRef.current -= velocityRef.current * frameTime; kittyYRef.current -= velocityRef.current * frameTime;
@@ -152,24 +130,27 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
velocityRef.current = 0; velocityRef.current = 0;
} }
// Ruch przeszkody // Ruch przeszkody (prędkość * czas)
const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT); const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
obstacleXRef.current -= currentSpeed * frameTime; obstacleXRef.current -= currentSpeed * frameTime;
if (obstacleXRef.current < -60) { // Reset przeszkody
obstacleXRef.current = 700; if (obstacleXRef.current < -80) {
obstacleXRef.current = 750;
scoreRef.current += 1; scoreRef.current += 1;
setScore(scoreRef.current); setScore(scoreRef.current);
} }
// Kolizja // Kolizja (strefa trafienia dopasowana do czasu)
if (obstacleXRef.current < 110 && obstacleXRef.current > 30 && kittyYRef.current < 45) { if (obstacleXRef.current < 100 && obstacleXRef.current > 20 && kittyYRef.current < 45) {
endGame(); endGame();
return; return;
} }
// Renderowanie wizualne
setDisplayKittyY(kittyYRef.current); setDisplayKittyY(kittyYRef.current);
setDisplayObstacleX(obstacleXRef.current); setDisplayObstacleX(obstacleXRef.current);
requestRef.current = requestAnimationFrame(update); requestRef.current = requestAnimationFrame(update);
}; };
@@ -191,16 +172,17 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
}, [isPlaying, gameOver, startGame, jump]); }, [isPlaying, gameOver, startGame, jump]);
return ( return (
<div className="flex flex-col items-center justify-center min-h-[70vh] p-4 font-sans"> <div className="flex flex-col items-center justify-center min-h-[70vh] 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"> <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 <ArrowLeft size={20} /> Back
</button> </button>
<div <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 className={`relative w-full max-w-[650px] h-[340px] rounded-[3.5rem] shadow-2xl border-4 transition-colors duration-1000 overflow-hidden cursor-pointer
${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(); }} onClick={() => { if (!isPlaying || gameOver) startGame(); else jump(); }}
> >
{/* Niebo */}
<div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'}`}> <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} /> <Moon className="text-indigo-200 fill-indigo-100" size={48} />
</div> </div>
@@ -208,6 +190,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
<Sun className="text-yellow-400 fill-yellow-200" size={48} /> <Sun className="text-yellow-400 fill-yellow-200" size={48} />
</div> </div>
{/* UI Score */}
<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={`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-3xl tracking-tighter">Score: {score}</div>
<div className={`text-sm flex items-center justify-end gap-1 ${isNight ? 'text-indigo-400' : 'text-pink-300'}`}> <div className={`text-sm flex items-center justify-end gap-1 ${isNight ? 'text-indigo-400' : 'text-pink-300'}`}>
@@ -215,46 +198,55 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
</div> </div>
</div> </div>
{/* KOTEK */}
<div className="absolute left-10" style={{ bottom: `${displayKittyY + 48}px` }}> <div className="absolute left-10" style={{ bottom: `${displayKittyY + 48}px` }}>
<DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} /> <DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
</div> </div>
{/* PRZESZKODA */}
<div <div
className={`absolute bottom-12 w-12 h-12 rounded-full border-2 flex items-center justify-center animate-spin transition-colors duration-1000 className={`absolute bottom-12 w-14 h-14 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'}`} ${isNight ? 'bg-indigo-900 border-indigo-400 shadow-[0_0_15px_rgba(129,140,248,0.3)]' : 'bg-pink-100 border-pink-300'}`}
style={{ left: `${displayObstacleX}px` }} style={{ left: `${displayObstacleX}px` }}
> >
<div className={`w-8 h-1 border-t-2 rotate-45 ${isNight ? 'border-indigo-300' : 'border-pink-400'}`}></div> <div className={`w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} rotate-45`} />
<div className={`absolute w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} -rotate-45`} />
</div> </div>
{/* Ziemia */}
<div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around <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-950' : 'bg-pink-50 border-pink-100 text-pink-100'}`}>
{[...Array(9)].map((_, i) => <span key={i} className="text-2xl">🐾</span>)} {[...Array(10)].map((_, i) => <span key={i} className="text-2xl grayscale opacity-50">🐾</span>)}
</div> </div>
{/* Ekrany start/stop */}
{!isPlaying && !gameOver && ( {!isPlaying && !gameOver && (
<div className="absolute inset-0 bg-white/20 backdrop-blur-[4px] flex items-center justify-center"> <div className="absolute inset-0 bg-white/20 backdrop-blur-[4px] flex items-center justify-center z-20">
<div className="bg-white p-10 rounded-[3rem] shadow-2xl flex flex-col items-center border-4 border-pink-100"> <div className="bg-white p-12 rounded-[3.5rem] shadow-2xl flex flex-col items-center border-4 border-pink-100 transform hover:scale-105 transition-transform">
<Sparkles className="text-yellow-400 mb-2 animate-bounce" size={40} /> <Sparkles className="text-yellow-400 mb-4 animate-pulse" size={50} />
<button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-lg"> <button className="bg-pink-500 text-white px-12 py-5 rounded-2xl font-black text-2xl shadow-lg hover:bg-pink-600 transition-colors">
START GAME START
</button> </button>
<p className="mt-4 text-slate-400 font-bold text-sm uppercase tracking-widest">Click or Space</p>
</div> </div>
</div> </div>
)} )}
{gameOver && ( {gameOver && (
<div className={`absolute inset-0 backdrop-blur-md flex flex-col items-center justify-center text-center p-6 transition-colors duration-1000 <div className={`absolute inset-0 backdrop-blur-md flex flex-col items-center justify-center text-center p-6 z-30 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> <h3 className={`text-6xl font-black mb-4 ${isNight ? 'text-white' : 'text-pink-600'}`}>Oh No! 😿</h3>
<p className={`font-bold mb-8 text-2xl ${isNight ? 'text-indigo-300' : 'text-pink-400'}`}>Score: {score}</p> <div className={`text-3xl font-bold mb-8 ${isNight ? 'text-indigo-300' : 'text-pink-400'}`}>Score: {score}</div>
<button className="bg-pink-500 text-white border-4 border-white px-12 py-4 rounded-2xl font-black text-xl hover:scale-105 transition-all shadow-xl"> <button className="bg-pink-500 text-white border-4 border-white px-14 py-5 rounded-2xl font-black text-2xl hover:scale-110 transition-all shadow-xl active:scale-95">
TRY AGAIN TRY AGAIN
</button> </button>
</div> </div>
)} )}
</div> </div>
<p className="mt-4 text-slate-400 text-sm font-medium">Space / Click to Jump</p> <div className="mt-6 flex gap-6 text-slate-300 font-bold uppercase text-xs tracking-[0.2em]">
<span>Speed: {Math.round(INITIAL_SPEED + score * SPEED_INCREMENT)} px/s</span>
<span>Physics: Delta-Time Based</span>
</div>
</div> </div>
); );
}; };