301 lines
15 KiB
TypeScript
301 lines
15 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { ArrowLeft, Trophy, Sparkles, Moon, Sun } from 'lucide-react';
|
|
|
|
// --- MODEL KOTA (Bez zmian) ---
|
|
interface DetailedKittyProps {
|
|
isJumping: boolean;
|
|
isNight: boolean;
|
|
isGameOver: boolean;
|
|
}
|
|
|
|
const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGameOver }) => {
|
|
const mainColor = isGameOver ? (isNight ? '#475569' : '#cbd5e1') : (isNight ? '#f8fafc' : '#f472b6');
|
|
const stripeColor = isNight ? '#cbd5e1' : '#ec4899';
|
|
const earColor = isNight ? '#334155' : '#fbcfe8';
|
|
|
|
return (
|
|
<div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}>
|
|
<div 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' }} />
|
|
<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>
|
|
<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 }} />
|
|
</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>
|
|
<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-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, 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>
|
|
<div className="absolute bottom-[-10px] right-5 w-3 h-6 rounded-full origin-top"
|
|
style={{ 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>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- STAŁE WYMIARY LOGICZNE ---
|
|
const GAME_WIDTH = 650;
|
|
const GAME_HEIGHT = 340;
|
|
|
|
// --- GŁÓWNY KOMPONENT ---
|
|
export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|
// Stany gry
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [gameOver, setGameOver] = useState(false);
|
|
const [score, setScore] = useState(0);
|
|
const [highScore, setHighScore] = useState<number>(() => {
|
|
const saved = localStorage.getItem('kittyHighScore');
|
|
return saved ? parseInt(saved, 10) : 0;
|
|
});
|
|
|
|
const [displayKittyY, setDisplayKittyY] = useState(0);
|
|
const [displayObstacleX, setDisplayObstacleX] = useState(GAME_WIDTH);
|
|
|
|
// RWD State: Skala
|
|
const [scale, setScale] = useState(1);
|
|
|
|
const isNight = Math.floor(score / 10) % 2 === 1;
|
|
|
|
// Referencje fizyczne
|
|
const kittyYRef = useRef(0);
|
|
const obstacleXRef = useRef(GAME_WIDTH);
|
|
const velocityRef = useRef(0);
|
|
const scoreRef = useRef(0);
|
|
const requestRef = useRef<number>(0);
|
|
const lastTimeRef = useRef<number>(0);
|
|
|
|
// STAŁE KONFIGURACYJNE
|
|
const GRAVITY = 1800;
|
|
const JUMP_FORCE = -550;
|
|
const INITIAL_SPEED = 380;
|
|
const SPEED_INCREMENT = 12;
|
|
const GROUND_Y = 0;
|
|
|
|
// --- RWD LOGIC ---
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
const availableWidth = window.innerWidth - 32; // marginesy boczne
|
|
const availableHeight = window.innerHeight - 100; // miejsce na nagłówek
|
|
|
|
const scaleX = availableWidth / GAME_WIDTH;
|
|
const scaleY = availableHeight / GAME_HEIGHT;
|
|
|
|
// Skalujemy w dół jeśli ekran jest mały, ale max 1 (nie powiększamy na dużych ekranach)
|
|
setScale(Math.min(scaleX, scaleY, 1));
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
handleResize();
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
const endGame = useCallback(() => {
|
|
setGameOver(true);
|
|
setIsPlaying(false);
|
|
const currentHS = parseInt(localStorage.getItem('kittyHighScore') || '0', 10);
|
|
if (scoreRef.current > currentHS) {
|
|
setHighScore(scoreRef.current);
|
|
localStorage.setItem('kittyHighScore', scoreRef.current.toString());
|
|
}
|
|
}, []);
|
|
|
|
const startGame = useCallback(() => {
|
|
setIsPlaying(true);
|
|
setGameOver(false);
|
|
setScore(0);
|
|
scoreRef.current = 0;
|
|
kittyYRef.current = 0;
|
|
obstacleXRef.current = GAME_WIDTH + 50;
|
|
velocityRef.current = 0;
|
|
lastTimeRef.current = performance.now();
|
|
setDisplayKittyY(0);
|
|
setDisplayObstacleX(GAME_WIDTH + 50);
|
|
}, []);
|
|
|
|
const jump = useCallback(() => {
|
|
if (kittyYRef.current <= GROUND_Y && !gameOver && isPlaying) {
|
|
velocityRef.current = JUMP_FORCE;
|
|
}
|
|
}, [gameOver, isPlaying]);
|
|
|
|
// --- OBSŁUGA WEJŚCIA (Touch & Mouse) ---
|
|
const handleAction = useCallback((e?: React.SyntheticEvent) => {
|
|
// Nie używamy e.preventDefault() tutaj, bo CSS touch-action załatwia sprawę
|
|
if (e) e.stopPropagation();
|
|
|
|
if (!isPlaying || gameOver) startGame(); else jump();
|
|
}, [isPlaying, gameOver, startGame, jump]);
|
|
|
|
useEffect(() => {
|
|
const update = (currentTime: number) => {
|
|
if (gameOver || !isPlaying) return;
|
|
|
|
const dt = (currentTime - lastTimeRef.current) / 1000;
|
|
lastTimeRef.current = currentTime;
|
|
const frameTime = Math.min(dt, 0.1);
|
|
|
|
// Fizyka
|
|
velocityRef.current += GRAVITY * frameTime;
|
|
kittyYRef.current -= velocityRef.current * frameTime;
|
|
|
|
if (kittyYRef.current <= GROUND_Y) {
|
|
kittyYRef.current = GROUND_Y;
|
|
velocityRef.current = 0;
|
|
}
|
|
|
|
// Przeszkoda
|
|
const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
|
|
obstacleXRef.current -= currentSpeed * frameTime;
|
|
|
|
if (obstacleXRef.current < -80) {
|
|
obstacleXRef.current = GAME_WIDTH + 50;
|
|
scoreRef.current += 1;
|
|
setScore(scoreRef.current);
|
|
}
|
|
|
|
// Kolizja
|
|
if (obstacleXRef.current < 100 && obstacleXRef.current > 20 && kittyYRef.current < 45) {
|
|
endGame();
|
|
return;
|
|
}
|
|
|
|
setDisplayKittyY(kittyYRef.current);
|
|
setDisplayObstacleX(obstacleXRef.current);
|
|
|
|
requestRef.current = requestAnimationFrame(update);
|
|
};
|
|
|
|
if (isPlaying && !gameOver) {
|
|
requestRef.current = requestAnimationFrame(update);
|
|
}
|
|
return () => cancelAnimationFrame(requestRef.current);
|
|
}, [isPlaying, gameOver, endGame]);
|
|
|
|
useEffect(() => {
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.code === 'Space') {
|
|
e.preventDefault();
|
|
handleAction();
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKey);
|
|
return () => window.removeEventListener('keydown', handleKey);
|
|
}, [handleAction]);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-start pt-8 sm:justify-center min-h-[80vh] w-full font-sans select-none overflow-hidden">
|
|
|
|
<button
|
|
onClick={onBack}
|
|
className="z-50 mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none bg-white/50 px-4 py-2 rounded-full cursor-pointer"
|
|
>
|
|
<ArrowLeft size={20} /> Back
|
|
</button>
|
|
|
|
{/* KONTENER SKALOWANIA */}
|
|
<div
|
|
style={{
|
|
width: GAME_WIDTH,
|
|
height: GAME_HEIGHT,
|
|
transform: `scale(${scale})`,
|
|
transformOrigin: 'top center',
|
|
touchAction: 'none' // Zapobiega scrollowaniu na mobile
|
|
}}
|
|
className="relative shrink-0"
|
|
>
|
|
<div
|
|
className={`relative w-full h-full 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'}`}
|
|
// Używamy onPointerDown zamiast onClick/onTouchStart
|
|
onPointerDown={handleAction}
|
|
>
|
|
{/* Niebo */}
|
|
<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" size={48} />
|
|
</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="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'}`}>
|
|
<Trophy size={14} /> High: {highScore}
|
|
</div>
|
|
</div>
|
|
|
|
{/* KOTEK */}
|
|
<div className="absolute left-10 pointer-events-none" style={{ bottom: `${displayKittyY + 48}px` }}>
|
|
<DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
|
|
</div>
|
|
|
|
{/* PRZESZKODA */}
|
|
<div
|
|
className={`absolute bottom-12 w-14 h-14 rounded-full border-2 flex items-center justify-center animate-spin transition-colors duration-1000 pointer-events-none
|
|
${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` }}
|
|
>
|
|
<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>
|
|
|
|
{/* Ziemia */}
|
|
<div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around pointer-events-none
|
|
${isNight ? 'bg-slate-900 border-indigo-900 text-indigo-950' : 'bg-pink-50 border-pink-100 text-pink-100'}`}>
|
|
{[...Array(10)].map((_, i) => <span key={i} className="text-2xl grayscale opacity-50">🐾</span>)}
|
|
</div>
|
|
|
|
{/* EKRAN STARTOWY */}
|
|
{!isPlaying && !gameOver && (
|
|
<div className="absolute inset-0 bg-white/20 backdrop-blur-[4px] flex items-center justify-center z-20">
|
|
<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-4 animate-pulse" size={50} />
|
|
<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 pointer-events-none">
|
|
START
|
|
</button>
|
|
<p className="mt-4 text-slate-400 font-bold text-sm uppercase tracking-widest">Tap or Space</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* GAME OVER */}
|
|
{gameOver && (
|
|
<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'}`}>
|
|
<h3 className={`text-6xl font-black mb-4 ${isNight ? 'text-white' : 'text-pink-600'}`}>Oh No! 😿</h3>
|
|
<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-14 py-5 rounded-2xl font-black text-2xl hover:scale-110 transition-all shadow-xl active:scale-95 pointer-events-auto"
|
|
onPointerDown={(e) => { e.stopPropagation(); startGame(); }}
|
|
>
|
|
TRY AGAIN
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Informacja dla mobile */}
|
|
<div className="mt-4 text-xs text-slate-400 sm:hidden">
|
|
Tap anywhere to jump
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |