Compare commits
5 Commits
a650b3710e
...
RWD
| Author | SHA1 | Date | |
|---|---|---|---|
|
4468148acb | ||
|
|
4d5f5d9605 | ||
|
|
fbac1f34c4 | ||
|
|
de9486bece | ||
| 311d3d75e9 |
@@ -3,4 +3,5 @@ PUBLIC_URL=https://example.com # Publicly accessible website root, used for rewr
|
|||||||
USE_SUBDOMAINS=true # Whether backend allows for use of subdomains in URL generation.
|
USE_SUBDOMAINS=true # Whether backend allows for use of subdomains in URL generation.
|
||||||
DEBUG=false
|
DEBUG=false
|
||||||
# Frontend specific
|
# Frontend specific
|
||||||
<miejsce na twoje zmienne>
|
<miejsce na twoje zmienne>
|
||||||
|
VITE_API_TARGET=kitkat.example.com # Target backend for API requests.
|
||||||
@@ -1,14 +1,22 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/src/assets/kitty.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>kittyurl - shorten URLs with ease</title>
|
<title>kittyurl - shorten URLs with ease</title>
|
||||||
<meta property="og:title" content="kittyurl shortener" />
|
<meta property="og:title" content="kittyurl shortener" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:description" content="Your go-to place for short and memorable URLs." />
|
<meta property="og:description" content="Your go-to place for short and memorable URLs." />
|
||||||
</head>
|
<meta property="og:image" content="/src/assets/Ket.png" />
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="kittyurl shortener" />
|
||||||
|
<meta name="twitter:description" content="Your go-to place for short and memorable URLs." />
|
||||||
|
<meta name="twitter:image" content="/src/assets/ket.png" />
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
|||||||
BIN
kittyurl-frontend/src/assets/Ket.png
Normal file
BIN
kittyurl-frontend/src/assets/Ket.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
BIN
kittyurl-frontend/src/assets/kitty.png
Normal file
BIN
kittyurl-frontend/src/assets/kitty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
@@ -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 ---
|
// --- MODEL KOTA (Wizualizacja) ---
|
||||||
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,20 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- KONFIGURACJA NIEZALEŻNA OD FPS (Wartości na sekundę) ---
|
// --- KONFIGURACJA GRY ---
|
||||||
const GAP_SIZE = 180;
|
const GAP_SIZE = 170; // Przerwa między rurami
|
||||||
const PIPE_WIDTH = 70;
|
const PIPE_WIDTH = 70;
|
||||||
const PIPE_SPEED = 200; // px/s
|
const PIPE_SPEED = 220; // px/s
|
||||||
const PIPE_SPAWN_RATE = 1.8; // sekundy
|
const PIPE_SPAWN_RATE = 1.6; // co ile sekund rura
|
||||||
const GRAVITY = 1400; // px/s^2
|
const GRAVITY = 1400; // siła grawitacji
|
||||||
const FLAP_STRENGTH = -420; // px/s
|
const FLAP_STRENGTH = -420; // siła skoku
|
||||||
const CANVAS_HEIGHT = 450;
|
|
||||||
|
// Logiczne wymiary gry (fizyka działa na tych wartościach, a ekran je tylko skaluje)
|
||||||
|
const GAME_HEIGHT = 450;
|
||||||
|
const GAME_WIDTH = 600;
|
||||||
|
|
||||||
export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||||
|
// --- STANY ---
|
||||||
const [isPlaying, setIsPlaying] = useState(false);
|
const [isPlaying, setIsPlaying] = useState(false);
|
||||||
const [gameOver, setGameOver] = useState(false);
|
const [gameOver, setGameOver] = useState(false);
|
||||||
const [score, setScore] = useState(0);
|
const [score, setScore] = useState(0);
|
||||||
@@ -50,10 +54,13 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
return saved ? parseInt(saved, 10) : 0;
|
return saved ? parseInt(saved, 10) : 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Stany do renderowania
|
||||||
const [displayKittyY, setDisplayKittyY] = useState(150);
|
const [displayKittyY, setDisplayKittyY] = useState(150);
|
||||||
const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
|
const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
|
||||||
const [rotation, setRotation] = useState(0);
|
const [rotation, setRotation] = useState(0);
|
||||||
|
const [scale, setScale] = useState(1); // Skala RWD
|
||||||
|
|
||||||
|
// --- REFS (FIZYKA) ---
|
||||||
const kittyYRef = useRef(150);
|
const kittyYRef = useRef(150);
|
||||||
const velocityRef = useRef(0);
|
const velocityRef = useRef(0);
|
||||||
const pipesRef = useRef<{ x: number; topHeight: number; id: number; passed?: boolean }[]>([]);
|
const pipesRef = useRef<{ x: number; topHeight: number; id: number; passed?: boolean }[]>([]);
|
||||||
@@ -62,6 +69,26 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
const lastTimeRef = useRef<number>(0);
|
const lastTimeRef = useRef<number>(0);
|
||||||
const spawnTimerRef = useRef<number>(0);
|
const spawnTimerRef = useRef<number>(0);
|
||||||
|
|
||||||
|
// --- RWD: Obliczanie skali ---
|
||||||
|
useEffect(() => {
|
||||||
|
const handleResize = () => {
|
||||||
|
const availableWidth = window.innerWidth - 32; // margines boczny
|
||||||
|
const availableHeight = window.innerHeight - 100; // miejsce na nagłówek
|
||||||
|
|
||||||
|
const scaleX = availableWidth / GAME_WIDTH;
|
||||||
|
const scaleY = availableHeight / GAME_HEIGHT;
|
||||||
|
|
||||||
|
// Dopasuj do ekranu, ale nie powiększaj powyżej 100% (żeby nie tracić jakości)
|
||||||
|
const newScale = Math.min(scaleX, scaleY, 1);
|
||||||
|
setScale(newScale);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
handleResize(); // Init
|
||||||
|
return () => window.removeEventListener('resize', handleResize);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// --- LOGIKA GRY ---
|
||||||
const endGame = useCallback(() => {
|
const endGame = useCallback(() => {
|
||||||
setGameOver(true);
|
setGameOver(true);
|
||||||
setIsPlaying(false);
|
setIsPlaying(false);
|
||||||
@@ -81,7 +108,7 @@ 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(); // Inicjalizacja czasu
|
lastTimeRef.current = performance.now();
|
||||||
setDisplayKittyY(150);
|
setDisplayKittyY(150);
|
||||||
setDisplayPipes([]);
|
setDisplayPipes([]);
|
||||||
setRotation(0);
|
setRotation(0);
|
||||||
@@ -91,64 +118,87 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
|
if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
|
||||||
}, [isPlaying, gameOver]);
|
}, [isPlaying, gameOver]);
|
||||||
|
|
||||||
|
// --- OBSŁUGA INPUTU (NAPRAWIONA) ---
|
||||||
|
const handleAction = useCallback((e?: React.SyntheticEvent) => {
|
||||||
|
// WAŻNE: Nie używamy e.preventDefault() tutaj, bo to powoduje błąd w Chrome.
|
||||||
|
// Zamiast tego CSS 'touch-action: none' blokuje scrollowanie.
|
||||||
|
if (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isPlaying || gameOver) {
|
||||||
|
startGame();
|
||||||
|
} else {
|
||||||
|
flap();
|
||||||
|
}
|
||||||
|
}, [isPlaying, gameOver, startGame, flap]);
|
||||||
|
|
||||||
|
// --- PĘTLA GRY ---
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const update = (currentTime: number) => {
|
const update = (currentTime: number) => {
|
||||||
if (gameOver || !isPlaying) return;
|
if (gameOver || !isPlaying) return;
|
||||||
|
|
||||||
// --- DYNAMICZNY DELTA TIME ---
|
// Delta time w sekundach
|
||||||
// Obliczamy ile sekund upłynęło od ostatniej klatki (np. 0.0069s dla 144Hz)
|
|
||||||
const dt = (currentTime - lastTimeRef.current) / 1000;
|
const dt = (currentTime - lastTimeRef.current) / 1000;
|
||||||
lastTimeRef.current = currentTime;
|
lastTimeRef.current = currentTime;
|
||||||
|
const frameTime = Math.min(dt, 0.1); // Limit laga
|
||||||
|
|
||||||
// Zabezpieczenie przed ogromnym skokiem fizyki przy lagu
|
// 1. Fizyka grawitacji
|
||||||
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;
|
||||||
|
|
||||||
// Płynna rotacja zależna od prędkości pionowej
|
// Rotacja
|
||||||
setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 80));
|
setRotation(Math.min(Math.max(velocityRef.current * 0.12, -25), 90));
|
||||||
|
|
||||||
// Kolizja z sufitem/ziemią
|
// Kolizja z sufitem/podłogą
|
||||||
if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -50) {
|
if (kittyYRef.current > GAME_HEIGHT - 40 || kittyYRef.current < -50) {
|
||||||
endGame();
|
endGame();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Spawn rur
|
// 2. Generowanie 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 minPipe = 60;
|
||||||
pipesRef.current.push({ x: 650, topHeight, id: Date.now() });
|
const maxPipe = GAME_HEIGHT - GAP_SIZE - minPipe;
|
||||||
|
const topHeight = Math.random() * (maxPipe - minPipe) + minPipe;
|
||||||
|
|
||||||
|
pipesRef.current.push({ x: GAME_WIDTH + 50, topHeight, id: Date.now() });
|
||||||
spawnTimerRef.current = 0;
|
spawnTimerRef.current = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ruch rur i kolizje
|
// 3. 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;
|
||||||
|
|
||||||
// Hitbox (z małym marginesem dla kota)
|
// Hitbox rury (marginesy dla łatwiejszej gry)
|
||||||
if (p.x < 100 && p.x + PIPE_WIDTH > 55) {
|
const hitXLeft = p.x + 5;
|
||||||
|
const hitXRight = p.x + PIPE_WIDTH - 5;
|
||||||
|
|
||||||
|
// Sprawdzenie czy kot jest w poziomie rury
|
||||||
|
if (hitXLeft < 100 && hitXRight > 55) {
|
||||||
|
// Sprawdzenie czy kot uderzył w górę lub dół
|
||||||
|
// (dodajemy marginesy bezpieczeństwa)
|
||||||
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
|
// Naliczanie punktów
|
||||||
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);
|
// Usuwanie starych rur
|
||||||
|
if (p.x > -PIPE_WIDTH - 50) updatedPipes.push(p);
|
||||||
}
|
}
|
||||||
pipesRef.current = updatedPipes;
|
pipesRef.current = updatedPipes;
|
||||||
|
|
||||||
// Update stanów do renderowania
|
// 4. Renderowanie
|
||||||
setDisplayKittyY(kittyYRef.current);
|
setDisplayKittyY(kittyYRef.current);
|
||||||
setDisplayPipes([...pipesRef.current]);
|
setDisplayPipes([...pipesRef.current]);
|
||||||
|
|
||||||
@@ -161,66 +211,108 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
return () => cancelAnimationFrame(requestRef.current);
|
return () => cancelAnimationFrame(requestRef.current);
|
||||||
}, [isPlaying, gameOver, endGame]);
|
}, [isPlaying, gameOver, endGame]);
|
||||||
|
|
||||||
|
// Obsługa Spacji
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKey = (e: KeyboardEvent) => {
|
const handleKey = (e: KeyboardEvent) => {
|
||||||
if (e.code === 'Space') {
|
if (e.code === 'Space') {
|
||||||
e.preventDefault();
|
e.preventDefault(); // Tu można bezpiecznie użyć preventDefault dla klawiatury
|
||||||
if (!isPlaying || gameOver) startGame(); else flap();
|
handleAction();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
window.addEventListener('keydown', handleKey);
|
window.addEventListener('keydown', handleKey);
|
||||||
return () => window.removeEventListener('keydown', handleKey);
|
return () => window.removeEventListener('keydown', handleKey);
|
||||||
}, [isPlaying, gameOver, startGame, flap]);
|
}, [handleAction]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans select-none">
|
<div className="flex flex-col items-center justify-start pt-4 sm:justify-center min-h-[80vh] w-full font-sans select-none overflow-hidden">
|
||||||
<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="z-50 mb-4 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none px-4 py-2 bg-white/50 rounded-full cursor-pointer"
|
||||||
|
>
|
||||||
<ArrowLeft size={20} /> Back to Menu
|
<ArrowLeft size={20} /> Back to Menu
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* WRAPPER SKALUJĄCY GRĘ */}
|
||||||
<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"
|
style={{
|
||||||
onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
|
width: GAME_WIDTH,
|
||||||
|
height: GAME_HEIGHT,
|
||||||
|
transform: `scale(${scale})`,
|
||||||
|
transformOrigin: 'top center',
|
||||||
|
touchAction: 'none' // KLUCZOWE DLA MOBILE: blokuje gesty przeglądarki
|
||||||
|
}}
|
||||||
|
className="relative shrink-0"
|
||||||
>
|
>
|
||||||
<div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
|
<div
|
||||||
<div className="absolute top-40 right-20 text-white/30"><Sparkles size={60} /></div>
|
className="relative w-full h-full bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer"
|
||||||
|
// KLUCZOWE: Używamy onPointerDown zamiast onTouchStart/onMouseDown
|
||||||
|
onPointerDown={handleAction}
|
||||||
|
>
|
||||||
|
{/* TŁO / DEKORACJE */}
|
||||||
|
<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">
|
{/* CHMURY (Ozdoba) */}
|
||||||
<div className="text-pink-500 text-4xl">Score: {score}</div>
|
<div className="absolute bottom-10 left-10 w-24 h-8 bg-white/40 rounded-full" />
|
||||||
<div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
|
<div className="absolute top-20 left-1/2 w-32 h-10 bg-white/40 rounded-full" />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
|
{/* HUD */}
|
||||||
<DetailedKitty isGameOver={gameOver} />
|
<div className="absolute top-6 right-8 text-right z-30 font-black pointer-events-none">
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
{displayPipes.map(p => (
|
{/* GRACZ (KOT) */}
|
||||||
<React.Fragment key={p.id}>
|
<div className="absolute left-10 z-20 pointer-events-none" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
|
||||||
<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 }} />
|
<DetailedKitty isGameOver={gameOver} />
|
||||||
<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) }} />
|
</div>
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{!isPlaying && !gameOver && (
|
{/* RURY */}
|
||||||
<div className="absolute inset-0 bg-white/40 backdrop-blur-sm flex items-center justify-center z-40">
|
{displayPipes.map(p => (
|
||||||
<div className="bg-white p-10 rounded-[3rem] shadow-2xl text-center border-4 border-pink-100">
|
<React.Fragment key={p.id}>
|
||||||
<p className="text-3xl font-black text-pink-500 mb-6">Flappy Cat 🎈</p>
|
{/* Górna rura */}
|
||||||
<button className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg">START</button>
|
<div className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl pointer-events-none"
|
||||||
|
style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }} />
|
||||||
|
|
||||||
|
{/* Dolna rura */}
|
||||||
|
<div className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl pointer-events-none"
|
||||||
|
style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: GAME_HEIGHT - (p.topHeight + GAP_SIZE) }} />
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* EKRAN STARTOWY */}
|
||||||
|
{!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 mx-4 pointer-events-none">
|
||||||
|
<p className="text-3xl font-black text-pink-500 mb-6">Flappy Cat 🎈</p>
|
||||||
|
<p className="text-slate-400 mb-4 text-sm font-bold uppercase tracking-widest">Tap to Jump</p>
|
||||||
|
<div className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg inline-block">START</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{gameOver && (
|
{/* GAME OVER */}
|
||||||
<div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
|
{gameOver && (
|
||||||
<h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
|
<div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
|
||||||
<p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
|
<h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
|
||||||
<button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl">TRY AGAIN</button>
|
<p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
|
||||||
</div>
|
<button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl hover:bg-pink-600 transition-colors pointer-events-auto"
|
||||||
)}
|
onPointerDown={(e) => {
|
||||||
|
e.stopPropagation(); // Żeby kliknięcie w guzik nie podbiło kota w tle
|
||||||
|
startGame();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
TRY AGAIN
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 text-xs text-slate-400 sm:hidden">
|
||||||
|
Tap anywhere to jump
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-4 text-slate-400 text-sm font-bold uppercase tracking-widest">
|
|
||||||
Physics: {isPlaying ? "Frame-Independent" : "Ready"}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -8,41 +8,52 @@ interface GeneratorProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
|
export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
|
||||||
<div className="max-w-[800px] mx-auto pt-16 px-4 flex flex-col items-center">
|
<div className="max-w-[800px] mx-auto pt-10 sm:pt-16 px-4 flex flex-col items-center">
|
||||||
<header className="text-center mb-12">
|
{/* Header - Skalowanie tekstu i ikony */}
|
||||||
<h1 className="text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center gap-4">
|
<header className="text-center mb-8 sm:mb-12">
|
||||||
KittyURL <PawPrint size={50} fill="currentColor" />
|
<h1 className="text-4xl sm:text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2 sm:gap-4">
|
||||||
|
KittyURL <PawPrint className="w-8 h-8 sm:w-12 sm:h-12" fill="currentColor" />
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-pink-300 text-xl font-medium">Shorten your links with a purr!</p>
|
<p className="text-pink-300 text-lg sm:text-xl font-medium px-4">
|
||||||
|
Shorten your links with a purr!
|
||||||
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="w-full bg-white rounded-[3rem] shadow-2xl shadow-pink-200/50 p-10 border-4 border-white relative overflow-hidden">
|
{/* Główna karta - mniejsze paddingi i zaokrąglenia na mobile */}
|
||||||
|
<div className="w-full bg-white rounded-[2rem] sm:rounded-[3rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-10 border-4 border-white relative overflow-hidden">
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<label className="block text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">Long URL to shorten</label>
|
<label className="block text-[10px] sm:text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">
|
||||||
|
Long URL to shorten
|
||||||
|
</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<input
|
<input
|
||||||
type="url"
|
type="url"
|
||||||
placeholder="https://example.com/very-long-url"
|
placeholder="https://example.com/very-long-url"
|
||||||
className="w-full p-5 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-lg shadow-inner"
|
className="w-full p-4 sm:p-5 bg-pink-50/30 border-2 border-pink-100 rounded-xl sm:rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-base sm:text-lg shadow-inner pr-12"
|
||||||
value={url}
|
value={url}
|
||||||
onChange={(e) => setUrl(e.target.value)}
|
onChange={(e) => setUrl(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<Heart className="absolute right-5 top-1/2 -translate-y-1/2 text-pink-200" size={24} />
|
<Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 sm:w-6 sm:h-6" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={onGenerate}
|
onClick={onGenerate}
|
||||||
className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-xl flex items-center justify-center gap-3 cursor-pointer"
|
className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-4 sm:py-5 rounded-xl sm:rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-lg sm:text-xl flex items-center justify-center gap-3 cursor-pointer"
|
||||||
>
|
>
|
||||||
Generate Kitty Link <Sparkles size={24} />
|
<span className="hidden xs:inline">Generate Kitty Link</span>
|
||||||
|
<span className="xs:hidden">Generate</span>
|
||||||
|
<Sparkles className="w-5 h-5 sm:w-6 sm:h-6" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full mt-16 text-center">
|
{/* Sekcja "No links yet" - Skalowanie paddingu i ikony */}
|
||||||
<div className="bg-pink-100/50 rounded-[2.5rem] border-4 border-dashed border-pink-200 p-12">
|
<div className="w-full mt-10 sm:mt-16 text-center">
|
||||||
<Cat size={60} className="mx-auto text-pink-200 mb-4" />
|
<div className="bg-pink-100/50 rounded-[2rem] sm:rounded-[2.5rem] border-4 border-dashed border-pink-200 p-8 sm:p-12">
|
||||||
<p className="text-pink-300 font-bold">No links generated yet. Feed me a URL! 🐾</p>
|
<Cat className="mx-auto text-pink-200 mb-4 w-12 h-12 sm:w-16 sm:h-16" />
|
||||||
|
<p className="text-pink-300 font-bold text-sm sm:text-base px-2">
|
||||||
|
No links generated yet. Feed me a URL! 🐾
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,15 +1,23 @@
|
|||||||
|
import { PawPrint, ExternalLink } from 'lucide-react';
|
||||||
import { PawPrint, ExternalLink } from 'lucide-react';
|
|
||||||
|
|
||||||
export const HistoryView = ({ onBack }: { onBack: () => void }) => (
|
export const HistoryView = ({ onBack }: { onBack: () => void }) => (
|
||||||
<div className="max-w-4xl mx-auto p-6 pt-10">
|
<div className="max-w-4xl mx-auto px-4 py-6 sm:p-6 sm:pt-10">
|
||||||
<button onClick={onBack} className="mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform">
|
{/* Przycisk powrotu - mniejszy margines na mobile */}
|
||||||
<PawPrint size={20} /> Back to KittyURL
|
<button
|
||||||
|
onClick={onBack}
|
||||||
|
className="mb-6 sm:mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform text-sm sm:text-base"
|
||||||
|
>
|
||||||
|
<PawPrint size={18} /> Back to KittyURL
|
||||||
</button>
|
</button>
|
||||||
<div className="bg-white/80 backdrop-blur-md rounded-[2.5rem] p-8 shadow-xl border-2 border-pink-50">
|
|
||||||
<h2 className="text-3xl font-black text-slate-800 mb-8">Recent Paws 🐾</h2>
|
<div className="bg-white/80 backdrop-blur-md rounded-[2rem] sm:rounded-[2.5rem] p-5 sm:p-8 shadow-xl border-2 border-pink-50">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-black text-slate-800 mb-6 sm:mb-8 flex items-center gap-2">
|
||||||
|
Recent Paws <span className="text-xl sm:text-2xl">🐾</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div className="overflow-hidden rounded-2xl border border-pink-100">
|
<div className="overflow-hidden rounded-2xl border border-pink-100">
|
||||||
<table className="w-full text-left bg-white">
|
{/* Widok Tabeli (widoczny od ekranów 'sm') */}
|
||||||
|
<table className="w-full text-left bg-white hidden sm:table">
|
||||||
<thead className="bg-pink-50 text-pink-600">
|
<thead className="bg-pink-50 text-pink-600">
|
||||||
<tr>
|
<tr>
|
||||||
<th className="px-6 py-4 font-bold uppercase text-xs">Long URL</th>
|
<th className="px-6 py-4 font-bold uppercase text-xs">Long URL</th>
|
||||||
@@ -18,11 +26,34 @@ export const HistoryView = ({ onBack }: { onBack: () => void }) => (
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-pink-50">
|
<tbody className="divide-y divide-pink-50">
|
||||||
<tr className="hover:bg-pink-50/50 transition-colors">
|
<tr className="hover:bg-pink-50/50 transition-colors">
|
||||||
<td className="px-6 py-4 text-slate-400 truncate max-w-[200px]">https://very-long-link.com/cats</td>
|
<td className="px-6 py-4 text-slate-400 truncate max-w-[300px]">
|
||||||
<td className="px-6 py-4 font-bold text-pink-500 flex items-center gap-2">kitty.url/meow <ExternalLink size={14} /></td>
|
https://very-long-link.com/cats/are/the/best/animals/in/the/world
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<a href="#" className="font-bold text-pink-500 flex items-center gap-2 hover:underline">
|
||||||
|
kitty.url/meow <ExternalLink size={14} />
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{/* Widok Mobilny (Lista kart zamiast tabeli - widoczny tylko na małych ekranach) */}
|
||||||
|
<div className="sm:hidden divide-y divide-pink-50 bg-white">
|
||||||
|
<div className="p-4 space-y-2">
|
||||||
|
<div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider">Long URL</div>
|
||||||
|
<div className="text-slate-500 text-sm truncate">
|
||||||
|
https://very-long-link.com/cats/are/the/best/animals/in/the/world
|
||||||
|
</div>
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider mb-1">Kitty URL</div>
|
||||||
|
<a href="#" className="font-bold text-pink-500 flex items-center gap-1 text-sm">
|
||||||
|
kitty.url/meow <ExternalLink size={14} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Tutaj możesz mapować kolejne wpisy historii tak samo jak wyżej */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|
||||||
// --- MODEL KOTA (Animacje CSS zostają, bo są czasowe, nie klatkowe) ---
|
// --- MODEL KOTA (Bez zmian) ---
|
||||||
interface DetailedKittyProps {
|
interface DetailedKittyProps {
|
||||||
isJumping: boolean;
|
isJumping: boolean;
|
||||||
isNight: boolean;
|
isNight: boolean;
|
||||||
@@ -49,8 +49,13 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- GŁÓWNY KOMPONENT Z DYNAMICZNYM DELTA TIME ---
|
// --- STAŁE WYMIARY LOGICZNE ---
|
||||||
|
const GAME_WIDTH = 650;
|
||||||
|
const GAME_HEIGHT = 340;
|
||||||
|
|
||||||
|
// --- GŁÓWNY KOMPONENT ---
|
||||||
export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||||
|
// Stany gry
|
||||||
const [isPlaying, setIsPlaying] = useState(false);
|
const [isPlaying, setIsPlaying] = useState(false);
|
||||||
const [gameOver, setGameOver] = useState(false);
|
const [gameOver, setGameOver] = useState(false);
|
||||||
const [score, setScore] = useState(0);
|
const [score, setScore] = useState(0);
|
||||||
@@ -60,25 +65,46 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const [displayKittyY, setDisplayKittyY] = useState(0);
|
const [displayKittyY, setDisplayKittyY] = useState(0);
|
||||||
const [displayObstacleX, setDisplayObstacleX] = useState(650);
|
const [displayObstacleX, setDisplayObstacleX] = useState(GAME_WIDTH);
|
||||||
|
|
||||||
|
// RWD State: Skala
|
||||||
|
const [scale, setScale] = useState(1);
|
||||||
|
|
||||||
const isNight = Math.floor(score / 10) % 2 === 1;
|
const isNight = Math.floor(score / 10) % 2 === 1;
|
||||||
|
|
||||||
// Referencje fizyczne
|
// Referencje fizyczne
|
||||||
const kittyYRef = useRef(0);
|
const kittyYRef = useRef(0);
|
||||||
const obstacleXRef = useRef(650);
|
const obstacleXRef = useRef(GAME_WIDTH);
|
||||||
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);
|
||||||
|
|
||||||
// STAŁE KONFIGURACYJNE (Wartości na sekundę - niezależne od Hz)
|
// STAŁE KONFIGURACYJNE
|
||||||
const GRAVITY = 1800; // Kot spadnie o 1800px w ciągu sekundy (jeśli nie ma prędkości początkowej)
|
const GRAVITY = 1800;
|
||||||
const JUMP_FORCE = -550; // Prędkość startowa skoku
|
const JUMP_FORCE = -550;
|
||||||
const INITIAL_SPEED = 380; // Prędkość przeszkody w px/s
|
const INITIAL_SPEED = 380;
|
||||||
const SPEED_INCREMENT = 12; // Przyspieszenie px/s na każdy punkt
|
const SPEED_INCREMENT = 12;
|
||||||
const GROUND_Y = 0;
|
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(() => {
|
const endGame = useCallback(() => {
|
||||||
setGameOver(true);
|
setGameOver(true);
|
||||||
setIsPlaying(false);
|
setIsPlaying(false);
|
||||||
@@ -95,12 +121,11 @@ 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 = 700;
|
obstacleXRef.current = GAME_WIDTH + 50;
|
||||||
velocityRef.current = 0;
|
velocityRef.current = 0;
|
||||||
// Kluczowe: inicjalizacja czasu startu
|
|
||||||
lastTimeRef.current = performance.now();
|
lastTimeRef.current = performance.now();
|
||||||
setDisplayKittyY(0);
|
setDisplayKittyY(0);
|
||||||
setDisplayObstacleX(700);
|
setDisplayObstacleX(GAME_WIDTH + 50);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const jump = useCallback(() => {
|
const jump = useCallback(() => {
|
||||||
@@ -109,19 +134,23 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
}
|
}
|
||||||
}, [gameOver, isPlaying]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
const update = (currentTime: number) => {
|
const update = (currentTime: number) => {
|
||||||
if (gameOver || !isPlaying) return;
|
if (gameOver || !isPlaying) return;
|
||||||
|
|
||||||
// --- OBLICZANIE DELTA TIME (Dynamiczna szybkość) ---
|
|
||||||
// dt to czas w sekundach, jaki upłynął od ostatniej klatki (np. 0.016 dla 60Hz, 0.007 dla 144Hz)
|
|
||||||
const dt = (currentTime - lastTimeRef.current) / 1000;
|
const dt = (currentTime - lastTimeRef.current) / 1000;
|
||||||
lastTimeRef.current = currentTime;
|
lastTimeRef.current = currentTime;
|
||||||
|
|
||||||
// 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 (jednostki * czas)
|
// Fizyka
|
||||||
velocityRef.current += GRAVITY * frameTime;
|
velocityRef.current += GRAVITY * frameTime;
|
||||||
kittyYRef.current -= velocityRef.current * frameTime;
|
kittyYRef.current -= velocityRef.current * frameTime;
|
||||||
|
|
||||||
@@ -130,24 +159,22 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
velocityRef.current = 0;
|
velocityRef.current = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ruch przeszkody (prędkość * czas)
|
// Przeszkoda
|
||||||
const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
|
const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
|
||||||
obstacleXRef.current -= currentSpeed * frameTime;
|
obstacleXRef.current -= currentSpeed * frameTime;
|
||||||
|
|
||||||
// Reset przeszkody
|
|
||||||
if (obstacleXRef.current < -80) {
|
if (obstacleXRef.current < -80) {
|
||||||
obstacleXRef.current = 750;
|
obstacleXRef.current = GAME_WIDTH + 50;
|
||||||
scoreRef.current += 1;
|
scoreRef.current += 1;
|
||||||
setScore(scoreRef.current);
|
setScore(scoreRef.current);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Kolizja (strefa trafienia dopasowana do czasu)
|
// Kolizja
|
||||||
if (obstacleXRef.current < 100 && obstacleXRef.current > 20 && 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);
|
||||||
|
|
||||||
@@ -164,88 +191,110 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
|||||||
const handleKey = (e: KeyboardEvent) => {
|
const handleKey = (e: KeyboardEvent) => {
|
||||||
if (e.code === 'Space') {
|
if (e.code === 'Space') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!isPlaying || gameOver) startGame(); else jump();
|
handleAction();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
window.addEventListener('keydown', handleKey);
|
window.addEventListener('keydown', handleKey);
|
||||||
return () => window.removeEventListener('keydown', handleKey);
|
return () => window.removeEventListener('keydown', handleKey);
|
||||||
}, [isPlaying, gameOver, startGame, jump]);
|
}, [handleAction]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center min-h-[70vh] p-4 font-sans select-none">
|
<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="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none">
|
|
||||||
|
<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
|
<ArrowLeft size={20} /> Back
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* KONTENER SKALOWANIA */}
|
||||||
<div
|
<div
|
||||||
className={`relative w-full max-w-[650px] h-[340px] rounded-[3.5rem] shadow-2xl border-4 transition-colors duration-1000 overflow-hidden cursor-pointer
|
style={{
|
||||||
${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
|
width: GAME_WIDTH,
|
||||||
onClick={() => { if (!isPlaying || gameOver) startGame(); else jump(); }}
|
height: GAME_HEIGHT,
|
||||||
|
transform: `scale(${scale})`,
|
||||||
|
transformOrigin: 'top center',
|
||||||
|
touchAction: 'none' // Zapobiega scrollowaniu na mobile
|
||||||
|
}}
|
||||||
|
className="relative shrink-0"
|
||||||
>
|
>
|
||||||
{/* 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" style={{ bottom: `${displayKittyY + 48}px` }}>
|
|
||||||
<DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* PRZESZKODA */}
|
|
||||||
<div
|
<div
|
||||||
className={`absolute bottom-12 w-14 h-14 rounded-full border-2 flex items-center justify-center animate-spin transition-colors duration-1000
|
className={`relative w-full h-full rounded-[3.5rem] shadow-2xl border-4 transition-colors duration-1000 overflow-hidden cursor-pointer
|
||||||
${isNight ? 'bg-indigo-900 border-indigo-400 shadow-[0_0_15px_rgba(129,140,248,0.3)]' : 'bg-pink-100 border-pink-300'}`}
|
${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
|
||||||
style={{ left: `${displayObstacleX}px` }}
|
// Używamy onPointerDown zamiast onClick/onTouchStart
|
||||||
|
onPointerDown={handleAction}
|
||||||
>
|
>
|
||||||
<div className={`w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} rotate-45`} />
|
{/* Niebo */}
|
||||||
<div className={`absolute w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} -rotate-45`} />
|
<div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'}`}>
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
{/* Ziemia */}
|
{/* UI Score */}
|
||||||
<div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around
|
<div className={`absolute top-6 right-8 text-right z-10 font-black transition-colors duration-1000 ${isNight ? 'text-indigo-100' : 'text-pink-500'}`}>
|
||||||
${isNight ? 'bg-slate-900 border-indigo-900 text-indigo-950' : 'bg-pink-50 border-pink-100 text-pink-100'}`}>
|
<div className="text-3xl tracking-tighter">Score: {score}</div>
|
||||||
{[...Array(10)].map((_, i) => <span key={i} className="text-2xl grayscale opacity-50">🐾</span>)}
|
<div className={`text-sm flex items-center justify-end gap-1 ${isNight ? 'text-indigo-400' : 'text-pink-300'}`}>
|
||||||
</div>
|
<Trophy size={14} /> High: {highScore}
|
||||||
|
|
||||||
{/* Ekrany start/stop */}
|
|
||||||
{!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">
|
|
||||||
START
|
|
||||||
</button>
|
|
||||||
<p className="mt-4 text-slate-400 font-bold text-sm uppercase tracking-widest">Click or Space</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{gameOver && (
|
{/* KOTEK */}
|
||||||
<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
|
<div className="absolute left-10 pointer-events-none" style={{ bottom: `${displayKittyY + 48}px` }}>
|
||||||
${isNight ? 'bg-slate-950/90' : 'bg-pink-50/90'}`}>
|
<DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
|
||||||
<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">
|
|
||||||
TRY AGAIN
|
|
||||||
</button>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<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>
|
{/* Informacja dla mobile */}
|
||||||
<span>Physics: Delta-Time Based</span>
|
<div className="mt-4 text-xs text-slate-400 sm:hidden">
|
||||||
|
Tap anywhere to jump
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind } from 'lucide-react';
|
import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind, Cat } from 'lucide-react';
|
||||||
// Używamy 'import type' dla zadowolenia verbatimModuleSyntax
|
|
||||||
import type { View } from '../App';
|
import type { View } from '../App';
|
||||||
|
|
||||||
interface NavbarProps {
|
interface NavbarProps {
|
||||||
@@ -9,49 +8,66 @@ interface NavbarProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const Navbar = ({ onNavigate, isAuthenticated, onLogout }: NavbarProps) => (
|
export const Navbar = ({ onNavigate, isAuthenticated, onLogout }: NavbarProps) => (
|
||||||
<nav className="max-w-5xl mx-auto py-6 px-6 flex justify-end gap-3">
|
<nav className="max-w-5xl mx-auto py-4 px-4 flex items-center justify-between gap-4">
|
||||||
{/* Przycisk Jump Game */}
|
{/* LEWA STRONA: Przycisk Home w stylu Kitty */}
|
||||||
<button
|
<button
|
||||||
onClick={() => onNavigate('jump-game')}
|
onClick={() => onNavigate('home')}
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95"
|
className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-black text-white transition-all active:scale-95 shadow-lg shadow-pink-200"
|
||||||
>
|
>
|
||||||
<Gamepad2 size={18} /> Jump
|
<Cat size={20} fill="currentColor" />
|
||||||
|
<span className="text-lg tracking-tighter">KittyURL</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Przycisk Flappy Cat */}
|
{/* PRAWA STRONA: Pozostałe przyciski zgrupowane w divie */}
|
||||||
<button
|
<div className="flex flex-wrap justify-end gap-2 sm:gap-3">
|
||||||
onClick={() => onNavigate('flappy-game')}
|
{/* Przycisk Jump Game */}
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95"
|
|
||||||
>
|
|
||||||
<Wind size={18} /> Flappy
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Przycisk History */}
|
|
||||||
<button
|
|
||||||
onClick={() => onNavigate('history')}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95"
|
|
||||||
>
|
|
||||||
<HistoryIcon size={18} /> History
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Dynamiczny przycisk Logowania / Wylogowania */}
|
|
||||||
{isAuthenticated ? (
|
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => onNavigate('jump-game')}
|
||||||
onLogout();
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95 text-sm sm:text-base"
|
||||||
onNavigate('home');
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95"
|
|
||||||
>
|
>
|
||||||
<LogOut size={18} /> Logout
|
<Gamepad2 size={18} />
|
||||||
|
<span className="hidden md:inline">Jump</span>
|
||||||
</button>
|
</button>
|
||||||
) : (
|
|
||||||
|
{/* Przycisk Flappy Cat */}
|
||||||
<button
|
<button
|
||||||
onClick={() => onNavigate('login')}
|
onClick={() => onNavigate('flappy-game')}
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-bold text-white shadow-lg shadow-pink-200 transition-all active:scale-95"
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95 text-sm sm:text-base"
|
||||||
>
|
>
|
||||||
<LogIn size={18} /> Sign In
|
<Wind size={18} />
|
||||||
|
<span className="hidden md:inline">Flappy</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
|
{/* Przycisk History */}
|
||||||
|
<button
|
||||||
|
onClick={() => onNavigate('history')}
|
||||||
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95 text-sm sm:text-base"
|
||||||
|
>
|
||||||
|
<HistoryIcon size={18} />
|
||||||
|
<span className="hidden md:inline">History</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Logowanie / Wylogowanie */}
|
||||||
|
{isAuthenticated ? (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
onLogout();
|
||||||
|
onNavigate('home');
|
||||||
|
}}
|
||||||
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95 text-sm sm:text-base"
|
||||||
|
>
|
||||||
|
<LogOut size={18} />
|
||||||
|
<span className="hidden md:inline">Logout</span>
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => onNavigate('login')}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-bold text-white transition-all active:scale-95 text-sm sm:text-base shadow-lg shadow-pink-200"
|
||||||
|
>
|
||||||
|
<LogIn size={18} />
|
||||||
|
<span className="hidden sm:inline">Sign In</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
@@ -1,40 +1,50 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig, loadEnv } from 'vite'
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react'
|
||||||
import tailwindcss from '@tailwindcss/vite'
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
import path from 'path' // Importuj moduł path
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig(({ mode }) => {
|
||||||
plugins: [
|
// Ustawiamy ścieżkę do folderu, w którym faktycznie znajduje się plik .env
|
||||||
react(),
|
// path.resolve(__dirname, '..') oznacza: "wyjdź jeden poziom wyżej względem tego pliku"
|
||||||
tailwindcss(),
|
const envDirectory = path.resolve(__dirname, '..');
|
||||||
],
|
|
||||||
server: {
|
// Ładujemy env z określonej lokalizacji
|
||||||
port: 6568,
|
const env = loadEnv(mode, envDirectory, '');
|
||||||
proxy: {
|
|
||||||
'/api': {
|
const apiTarget = env.VITE_API_TARGET;
|
||||||
target: 'https://ktty.is',
|
|
||||||
changeOrigin: true,
|
return {
|
||||||
secure: false,
|
plugins: [
|
||||||
// Dodatkowe nagłówki pomagają oszukać zabezpieczenia serwera (np. Cloudflare)
|
react(),
|
||||||
headers: {
|
tailwindcss(),
|
||||||
'Origin': 'https://ktty.is',
|
],
|
||||||
'Referer': 'https://ktty.is/'
|
server: {
|
||||||
},
|
port: 6568,
|
||||||
configure: (proxy) => {
|
proxy: {
|
||||||
proxy.on('error', (err) => {
|
'/api': {
|
||||||
console.log('[Proxy Error]:', err.message);
|
target: apiTarget,
|
||||||
});
|
changeOrigin: true,
|
||||||
proxy.on('proxyReq', (_, req) => {
|
secure: false,
|
||||||
console.log(`[Proxy] Wysyłam do zdalnego serwera: ${req.method} ${req.url}`);
|
headers: {
|
||||||
});
|
'Origin': apiTarget,
|
||||||
proxy.on('proxyRes', (proxyRes, req) => {
|
'Referer': `${apiTarget}/`
|
||||||
console.log(`[Proxy] Odpowiedź z ktty.is: ${proxyRes.statusCode} ${req.url}`);
|
},
|
||||||
});
|
configure: (proxy) => {
|
||||||
},
|
proxy.on('error', (err) => {
|
||||||
|
console.log('[Proxy Error]:', err.message);
|
||||||
|
});
|
||||||
|
proxy.on('proxyReq', (_, req) => {
|
||||||
|
console.log(`[Proxy] Wysyłam do: ${apiTarget}${req.url}`);
|
||||||
|
});
|
||||||
|
proxy.on('proxyRes', (proxyRes, req) => {
|
||||||
|
console.log(`[Proxy] Odpowiedź: ${proxyRes.statusCode} ${req.url}`);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
preview: {
|
||||||
preview: {
|
port: 6568,
|
||||||
port: 6568,
|
},
|
||||||
|
}
|
||||||
},
|
|
||||||
})
|
})
|
||||||
Reference in New Issue
Block a user