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

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

@@ -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>
@@ -223,16 +230,16 @@ 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>
{/* 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>
@@ -241,10 +248,10 @@ 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">
<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>