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

fix: games packets + static preview port

Browse Source
This commit is contained in:
Pc
2025-12-30 20:22:40 +01:00
parent 502543d6ac
commit d32c5133b5
3 changed files with 95 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>