fix: games packets + static preview port
This commit is contained in:
Pc
@@ -1,12 +1,46 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
|
||||
import { DetailedKitty } from './DetailedKitty';
|
||||
|
||||
// --- STAŁE KONFIGURACYJNE (Wartości na sekundę) ---
|
||||
// --- MODEL KOTA ---
|
||||
interface DetailedKittyProps {
|
||||
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 }} />
|
||||
<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>
|
||||
<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 flex items-center justify-center text-[10px]' : '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 flex items-center justify-center text-[10px]' : '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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- KONFIGURACJA ---
|
||||
const GAP_SIZE = 170;
|
||||
const PIPE_WIDTH = 70;
|
||||
const PIPE_SPEED = 250; // px/s
|
||||
const PIPE_SPAWN_RATE = 1.5; // Sekundy
|
||||
const PIPE_SPAWN_RATE = 1.5; // sekundy
|
||||
const GRAVITY = 1600; // px/s^2
|
||||
const FLAP_STRENGTH = -450; // px/s
|
||||
const CANVAS_HEIGHT = 450;
|
||||
@@ -24,7 +58,6 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
|
||||
const [rotation, setRotation] = useState(0);
|
||||
|
||||
// Referencje do fizyki i czasu
|
||||
const kittyYRef = useRef(150);
|
||||
const velocityRef = useRef(0);
|
||||
const pipesRef = useRef<{ x: number; topHeight: number; id: number; passed?: boolean }[]>([]);
|
||||
@@ -67,28 +100,19 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
const update = (currentTime: number) => {
|
||||
if (gameOver || !isPlaying) return;
|
||||
|
||||
// 1. Obliczanie Delta Time
|
||||
const dt = (currentTime - lastTimeRef.current) / 1000;
|
||||
lastTimeRef.current = currentTime;
|
||||
|
||||
// Zabezpieczenie przed "skokami" przy lagach (max 100ms)
|
||||
const frameTime = Math.min(dt, 0.1);
|
||||
|
||||
// 2. Fizyka Kota
|
||||
velocityRef.current += GRAVITY * frameTime;
|
||||
kittyYRef.current += velocityRef.current * frameTime;
|
||||
setRotation(Math.min(Math.max(velocityRef.current * 0.15, -20), 90));
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 4. Zarządzanie Rurami (Spawning)
|
||||
spawnTimerRef.current += frameTime;
|
||||
if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
|
||||
const topHeight = Math.random() * (220 - 70) + 70;
|
||||
@@ -96,13 +120,11 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
spawnTimerRef.current = 0;
|
||||
}
|
||||
|
||||
// 5. Ruch rur i Kolizje
|
||||
const updatedPipes = [];
|
||||
for (let p of pipesRef.current) {
|
||||
// POPRAWKA: użycie 'const p' zamiast 'let p'
|
||||
for (const 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();
|
||||
@@ -110,24 +132,20 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
}
|
||||
}
|
||||
|
||||
// Punktacja
|
||||
if (p.x < 50 && !p.passed) {
|
||||
p.passed = true;
|
||||
scoreRef.current += 1;
|
||||
setScore(scoreRef.current);
|
||||
}
|
||||
|
||||
// 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);
|
||||
};
|
||||
|
||||
@@ -158,60 +176,40 @@ 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(); }}
|
||||
>
|
||||
{/* Punkty */}
|
||||
{/* 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>
|
||||
|
||||
<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-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>
|
||||
|
||||
{/* KOTEK */}
|
||||
<div
|
||||
className="absolute left-10 z-20"
|
||||
style={{
|
||||
top: `${displayKittyY}px`,
|
||||
transform: `rotate(${rotation}deg)`,
|
||||
transition: 'transform 0.1s ease-out' // Lekkie wygładzenie obrotu
|
||||
}}
|
||||
>
|
||||
<DetailedKitty isJumping={true} isNight={false} isGameOver={gameOver} />
|
||||
<div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.1s ease-out' }}>
|
||||
<DetailedKitty isGameOver={gameOver} />
|
||||
</div>
|
||||
|
||||
{/* DRAPAKI */}
|
||||
{displayPipes.map(p => (
|
||||
<React.Fragment key={p.id}>
|
||||
<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 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: CANVAS_HEIGHT - (p.topHeight + GAP_SIZE) }}
|
||||
/>
|
||||
<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>
|
||||
))}
|
||||
|
||||
{/* 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 text-xl">
|
||||
MEOW TO FLY
|
||||
</button>
|
||||
<p className="text-pink-300 text-xs mt-4 font-bold uppercase">Click or Space</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gameOver && (
|
||||
<div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40">
|
||||
<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:scale-110 transition-all">
|
||||
TRY AGAIN
|
||||
</button>
|
||||
<button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl">TRY AGAIN</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { ArrowLeft, Trophy, Sparkles, Moon, Sun } from 'lucide-react';
|
||||
|
||||
// --- ZAAWANSOWANY MODEL KOTA (Bez zmian w UI) ---
|
||||
// --- ZAAWANSOWANY MODEL KOTA (DetailedKitty) ---
|
||||
interface DetailedKittyProps {
|
||||
isJumping: boolean;
|
||||
isNight: boolean;
|
||||
@@ -15,6 +15,7 @@ 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={{
|
||||
@@ -22,10 +23,14 @@ 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 }} />
|
||||
@@ -33,16 +38,20 @@ 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,
|
||||
@@ -63,7 +72,7 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
|
||||
);
|
||||
};
|
||||
|
||||
// --- GŁÓWNY KOMPONENT GRY (Zoptymalizowany pod Delta Time) ---
|
||||
// --- GŁÓWNY KOMPONENT GRY ---
|
||||
export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [gameOver, setGameOver] = useState(false);
|
||||
@@ -74,30 +83,30 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
});
|
||||
|
||||
const [displayKittyY, setDisplayKittyY] = useState(0);
|
||||
const [displayObstacleX, setDisplayObstacleX] = useState(600);
|
||||
const [displayObstacleX, setDisplayObstacleX] = useState(650);
|
||||
|
||||
const isNight = Math.floor(score / 10) % 2 === 1;
|
||||
|
||||
// Referencje do fizyki
|
||||
// Referencje do fizyki i czasu
|
||||
const kittyYRef = useRef(0);
|
||||
const obstacleXRef = useRef(600);
|
||||
const obstacleXRef = useRef(650);
|
||||
const velocityRef = useRef(0);
|
||||
const scoreRef = useRef(0);
|
||||
const requestRef = useRef<number>(0);
|
||||
const lastTimeRef = useRef<number>(0);
|
||||
|
||||
// STAŁE FIZYKI (Wartości na sekundę)
|
||||
// STAŁE KONFIGURACYJNE (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 SPEED_INCREMENT = 15; // Przyspieszenie za każdy punkt
|
||||
const GROUND_Y = 0;
|
||||
|
||||
const endGame = useCallback(() => {
|
||||
setGameOver(true);
|
||||
setIsPlaying(false);
|
||||
const currentHighScore = parseInt(localStorage.getItem('kittyHighScore') || '0', 10);
|
||||
if (scoreRef.current > currentHighScore) {
|
||||
const currentHS = parseInt(localStorage.getItem('kittyHighScore') || '0', 10);
|
||||
if (scoreRef.current > currentHS) {
|
||||
setHighScore(scoreRef.current);
|
||||
localStorage.setItem('kittyHighScore', scoreRef.current.toString());
|
||||
}
|
||||
@@ -111,7 +120,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
kittyYRef.current = 0;
|
||||
obstacleXRef.current = 650;
|
||||
velocityRef.current = 0;
|
||||
lastTimeRef.current = performance.now(); // Reset czasu startu
|
||||
lastTimeRef.current = performance.now();
|
||||
setDisplayKittyY(0);
|
||||
setDisplayObstacleX(650);
|
||||
}, []);
|
||||
@@ -126,25 +135,23 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
const update = (time: number) => {
|
||||
if (gameOver || !isPlaying) return;
|
||||
|
||||
// Oblicz delta time (czas w sekundach)
|
||||
const deltaTime = (time - lastTimeRef.current) / 1000;
|
||||
// Delta time (dt) w sekundach
|
||||
const dt = (time - lastTimeRef.current) / 1000;
|
||||
lastTimeRef.current = time;
|
||||
const frameTime = Math.min(dt, 0.1); // Limit klatki
|
||||
|
||||
// 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;
|
||||
// Fizyka kota
|
||||
velocityRef.current += GRAVITY * frameTime;
|
||||
kittyYRef.current -= velocityRef.current * frameTime;
|
||||
|
||||
if (kittyYRef.current <= GROUND_Y) {
|
||||
kittyYRef.current = GROUND_Y;
|
||||
velocityRef.current = 0;
|
||||
}
|
||||
|
||||
// Fizyka Przeszkody
|
||||
// Ruch przeszkody
|
||||
const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
|
||||
obstacleXRef.current -= currentSpeed * dt;
|
||||
obstacleXRef.current -= currentSpeed * frameTime;
|
||||
|
||||
if (obstacleXRef.current < -60) {
|
||||
obstacleXRef.current = 700;
|
||||
@@ -153,7 +160,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
}
|
||||
|
||||
// Kolizja
|
||||
if (obstacleXRef.current < 90 && obstacleXRef.current > 20 && kittyYRef.current < 45) {
|
||||
if (obstacleXRef.current < 110 && obstacleXRef.current > 30 && kittyYRef.current < 45) {
|
||||
endGame();
|
||||
return;
|
||||
}
|
||||
@@ -191,7 +198,7 @@ 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 i Słońce/Księżyc */}
|
||||
{/* 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>
|
||||
@@ -199,7 +206,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
<Sun className="text-yellow-400 fill-yellow-200" size={48} />
|
||||
</div>
|
||||
|
||||
{/* Score UI */}
|
||||
{/* 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'}`}>
|
||||
@@ -215,7 +222,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
{/* 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' : '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>
|
||||
@@ -227,12 +234,12 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
{[...Array(9)].map((_, i) => <span key={i} className="text-2xl">🐾</span>)}
|
||||
</div>
|
||||
|
||||
{/* Ekrany informacyjne */}
|
||||
{/* 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">
|
||||
<Sparkles className="text-yellow-400 mb-2 animate-bounce" size={40} />
|
||||
<button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-lg hover:scale-105 transition-all">
|
||||
<button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-lg">
|
||||
START GAME
|
||||
</button>
|
||||
</div>
|
||||
@@ -244,7 +251,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
${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">
|
||||
<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">
|
||||
TRY AGAIN
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -33,4 +33,8 @@ export default defineConfig({
|
||||
}
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
port: 6568,
|
||||
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user