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

Compare commits

base: kittyteam:Generator
Branches Tags
kittyteam:master kittyteam:docker_workflows kittyteam:Generator kittyteam:RWD
kittyteam:v0.0.4 kittyteam:v0.0.3 kittyteam:v0.0.2-1 kittyteam:v0.0.2 kittyteam:v0.0.1
..
compare: kittyteam:docker_workflows
Branches Tags
kittyteam:master kittyteam:docker_workflows kittyteam:Generator kittyteam:RWD
kittyteam:v0.0.4 kittyteam:v0.0.3 kittyteam:v0.0.2-1 kittyteam:v0.0.2 kittyteam:v0.0.1

7 Commits
Generator ... docker_wor

Author SHA1 Message Date
sherl
c829cb2a6b fix: docker packages and IP parsing for 127.0.0.1
Some checks failed
Release new version / release (push) Successful in 27s
Details
Update changelog / changelog (push) Successful in 26s
Details
Build and push Docker image / build (push) Failing after 3m57s
Details
2026-01-09 21:55:46 +01:00
Pc
9cba46e427 fix: optimized size of kitty photos
All checks were successful
Update changelog / changelog (push) Successful in 26s
Details
2026-01-09 14:48:37 +01:00
Nom4ne
7beb46606f Updated readme with the current state of app
All checks were successful
Update changelog / changelog (push) Successful in 25s
Details
2026-01-07 23:52:13 +01:00
Pc
cc31de6c8d fix: added interface that app.tsx uses
Some checks failed
Build and push Docker image / build (push) Failing after 4m0s
Details
Release new version / release (push) Successful in 28s
Details
Update changelog / changelog (push) Successful in 26s
Details
2026-01-06 16:50:42 +01:00
Nom4ne
6383916101 Merge pull request 'Generator' (#7) from Generator into master
All checks were successful
Update changelog / changelog (push) Successful in 28s
Details 
Reviewed-on: #7
 2026-01-06 16:41:39 +01:00
Nom4ne
32ca131dde Merge pull request 'feat: games are no working on moblie devices' (#6) from RWD into master
All checks were successful
Update changelog / changelog (push) Successful in 26s
Details 
Reviewed-on: #6
 2026-01-06 16:34:31 +01:00
Pc
4468148acb feat: games are no working on moblie devices 2026-01-06 16:31:45 +01:00
12 changed files with 402 additions and 182 deletions
Expand all files Collapse all files

1
.dockerignore
View File

@@ -1 +1,2 @@
.env .env
kittyurl-frontend/node_modules

3
Dockerfile
View File

@@ -1,11 +1,12 @@
# Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker # Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
# https://stackoverflow.com/a/56941391
FROM node:24-trixie-slim AS builder FROM node:24-trixie-slim AS builder
WORKDIR /app WORKDIR /app
COPY ./kittyurl-frontend/package*.json ./ COPY ./kittyurl-frontend/package*.json ./
RUN npm ci && npm cache clean --force RUN npm ci && npm cache clean --force
COPY ./kittyurl-frontend/ . COPY ./kittyurl-frontend/. ./
RUN npm run build RUN npm run build
FROM node:24-trixie-slim AS production FROM node:24-trixie-slim AS production

71
README.md
View File

@@ -1,2 +1,73 @@
# kittyFE # kittyFE
*Front-end for the [KittyURL](https://gitea.7o7.cx/kittyteam/kittyurl) project — create short and memorable URLs with ease!*
## Goals
Provide a responsive and modern user interface for:
* Account management (login, register, history, settings)
* Link creation (public landing page)
* Dashboard link management (for logged-in users)
* User management (admin panel)
KittyFE is built with **Vite + React (TypeScript)** to integrate seamlessly with [kittyBE](https://gitea.7o7.cx/kittyteam/kittyBE) and is easily dockerizable.
## Running kittyFE
KittyFE has been verified to work on **Node v24.11.1**.
### On bare metal
Running the front-end is as simple as:
1. **Install dependencies**
* To download the required dependencies:
```sh
npm install
```
* To install an exact copy of all dependencies (recommended for CI):
```sh
npm ci
```
2. **Configure environment variables**
Copy the `.env.example` file to `.env` and customize it to your preferences.
**Example:** Tell the frontend where the backend API is located. Your `.env` file should look like this:
```properties
VITE_API_TARGET=http://localhost:6567
```
> **Important:** All environment variables exposed to Vite must start with `VITE_`. Make sure the URL matches your running instance of `kittyBE`.
3. **Launch the development server**
```sh
npm run dev
```
4. **Open the app**
Visit:
```text
http://localhost:6568
```
(or the port shown in your terminal output).
### Building for production
To create an optimized static production build:
```sh
npm run build
```

6
kittyurl-frontend/index.html
View File

@@ -2,18 +2,18 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/kitty.png" /> <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.jpg" />
<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." />
<meta property="og:image" content="/src/assets/Ket.png" /> <meta property="og:image" content="/src/assets/Ket.jpg" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="kittyurl shortener" /> <meta name="twitter:title" content="kittyurl shortener" />
<meta name="twitter:description" content="Your go-to place for short and memorable URLs." /> <meta name="twitter:description" content="Your go-to place for short and memorable URLs." />
<meta name="twitter:image" content="/src/assets/Ket.png" /> <meta name="twitter:image" content="/src/assets/Ket.jpg" />
</head> </head>

7
kittyurl-frontend/src/App.tsx
View File

@@ -11,6 +11,13 @@ export type View = 'home' | 'login' | 'history' | 'jump-game' | 'flappy-game';
const getSubdomain = () => { const getSubdomain = () => {
const hostname = window.location.hostname; const hostname = window.location.hostname;
// Handle localhost and 127.0.0.1 cases.
// For more advanced cases (like bare IP hosting)
// a regex may be necessary.
if (hostname === 'localhost' || hostname === '127.0.0.1') {
return null;
}
const parts = hostname.split('.'); const parts = hostname.split('.');
if (parts.length <= 2) return null; if (parts.length <= 2) return null;
return parts[0]; return parts[0];

BIN
kittyurl-frontend/src/assets/Ket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
kittyurl-frontend/src/assets/Ket.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 MiB

BIN
kittyurl-frontend/src/assets/kitty.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
kittyurl-frontend/src/assets/kitty.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 MiB

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

@@ -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,64 +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>
<div className="mt-4 text-xs text-slate-400 sm:hidden">
Tap anywhere to jump
</div>
</div> </div>
); );
}; };

50
kittyurl-frontend/src/components/Generator.tsx
View File

@@ -8,11 +8,18 @@ import {
// Pobieramy adres API // Pobieramy adres API
const API_BASE = import.meta.env.VITE_API_TARGET; const API_BASE = import.meta.env.VITE_API_TARGET;
// Nazwa klucza w localStorage, gdzie trzymasz token // Nazwa klucza w localStorage
const TOKEN_KEY = 'jwt_token'; const TOKEN_KEY = 'jwt_token';
type CaseType = 'upper' | 'lower' | 'mixed'; type CaseType = 'upper' | 'lower' | 'mixed';
// 1. Definicja propsów, które przychodzą z App.tsx
interface GeneratorProps {
url: string;
setUrl: (url: string) => void;
onGenerate: () => void;
}
interface GeneratorSettings { interface GeneratorSettings {
length: number; length: number;
alphanum: boolean; alphanum: boolean;
@@ -20,8 +27,8 @@ interface GeneratorSettings {
withSubdomain: boolean; withSubdomain: boolean;
} }
// Usunęliśmy 'remoteUrl' stąd, bo teraz przychodzi z propsów (url)
interface LinkFormData { interface LinkFormData {
remoteUrl: string;
uri: string; uri: string;
subdomain: string; subdomain: string;
privacy: boolean; privacy: boolean;
@@ -43,19 +50,18 @@ interface User {
email?: string; email?: string;
} }
export const Generator: React.FC = () => { // 2. Dodajemy propsy do argumentów funkcji
export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => {
const [user, setUser] = useState<User | null>(null); const [user, setUser] = useState<User | null>(null);
// Stan formularza głównego // Stan formularza (bez remoteUrl, bo to jest teraz w 'url')
const [formData, setFormData] = useState<LinkFormData>({ const [formData, setFormData] = useState<LinkFormData>({
remoteUrl: '',
uri: '', uri: '',
subdomain: '', subdomain: '',
privacy: true, privacy: true,
expiryDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] expiryDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
}); });
// Stan ustawień generatora (GET)
const [genSettings, setGenSettings] = useState<GeneratorSettings>({ const [genSettings, setGenSettings] = useState<GeneratorSettings>({
length: 6, length: 6,
alphanum: true, alphanum: true,
@@ -63,14 +69,12 @@ export const Generator: React.FC = () => {
withSubdomain: false withSubdomain: false
}); });
// Stany UI
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [generatingUri, setGeneratingUri] = useState(false); const [generatingUri, setGeneratingUri] = useState(false);
const [errorMsg, setErrorMsg] = useState<string | null>(null); const [errorMsg, setErrorMsg] = useState<string | null>(null);
const [result, setResult] = useState<string | null>(null); const [result, setResult] = useState<string | null>(null);
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
// Helper do pobierania nagłówków z tokenem
const getAuthHeaders = () => { const getAuthHeaders = () => {
const token = localStorage.getItem(TOKEN_KEY); const token = localStorage.getItem(TOKEN_KEY);
return { return {
@@ -79,13 +83,10 @@ export const Generator: React.FC = () => {
}; };
}; };
// 1. Sprawdzenie sesji użytkownika przy starcie (używając JWT) // Sprawdzenie sesji użytkownika
// 1. Sprawdzenie sesji użytkownika przy starcie
useEffect(() => { useEffect(() => {
const checkUser = async () => { const checkUser = async () => {
const token = localStorage.getItem(TOKEN_KEY); const token = localStorage.getItem(TOKEN_KEY);
// Jeśli brak tokena, przerywamy (tryb gościa)
if (!token) return; if (!token) return;
try { try {
@@ -95,30 +96,23 @@ export const Generator: React.FC = () => {
if (res.ok) { if (res.ok) {
const data = await res.json(); const data = await res.json();
// Naprawa "Logged in as undefined":
// API może zwracać 'name', 'username' lub tylko 'email'
setUser({ setUser({
id: data.id || data._id || data.userId, id: data.id || data._id || data.userId,
username: data.username || data.name || data.email || "User", username: data.username || data.name || data.email || "User",
email: data.email email: data.email
}); });
} else { } else {
// Jeśli token jest nieważny (401), czyścimy go
console.log("Session expired. Logging out."); console.log("Session expired. Logging out.");
localStorage.removeItem(TOKEN_KEY); localStorage.removeItem(TOKEN_KEY);
setUser(null); setUser(null);
} }
} catch { } catch {
// POPRAWKA: Usunęliśmy '(err)', teraz jest samo 'catch'
// Dzięki temu linter nie krzyczy o nieużywaną zmienną
console.log("API unreachable"); console.log("API unreachable");
} }
}; };
checkUser(); checkUser();
}, []); }, []);
// 2. Generowanie URI (GET) - tutaj auth zazwyczaj nie jest wymagany, ale można dodać
const handleGenerateUri = async (type: 'random' | 'wordlist') => { const handleGenerateUri = async (type: 'random' | 'wordlist') => {
setGeneratingUri(true); setGeneratingUri(true);
setErrorMsg(null); setErrorMsg(null);
@@ -140,8 +134,6 @@ export const Generator: React.FC = () => {
endpoint = '/api/v1/link/fromWordlist'; endpoint = '/api/v1/link/fromWordlist';
} }
// GET zazwyczaj jest publiczny, więc nie musimy dodawać Bearera,
// ale jeśli API tego wymaga, dodaj: headers: getAuthHeaders()
const response = await fetch(`${API_BASE}${endpoint}?${params.toString()}`); const response = await fetch(`${API_BASE}${endpoint}?${params.toString()}`);
const data = await response.json(); const data = await response.json();
@@ -157,9 +149,9 @@ export const Generator: React.FC = () => {
} }
}; };
// 3. Zapis do bazy (POST) - WYMAGA AUTH (JWT)
const handleSubmitToDb = async () => { const handleSubmitToDb = async () => {
if (!formData.remoteUrl) { // Używamy propsa 'url' zamiast formData.remoteUrl
if (!url) {
setErrorMsg("Meow! I need a destination URL first! 🐾"); setErrorMsg("Meow! I need a destination URL first! 🐾");
return; return;
} }
@@ -174,7 +166,7 @@ export const Generator: React.FC = () => {
try { try {
const payload: LinkPayload = { const payload: LinkPayload = {
remoteUrl: formData.remoteUrl, remoteUrl: url, // <-- Tutaj wstawiamy wartość z propsa
uri: formData.uri, uri: formData.uri,
subdomain: formData.subdomain || undefined, subdomain: formData.subdomain || undefined,
privacy: formData.privacy, privacy: formData.privacy,
@@ -187,7 +179,7 @@ export const Generator: React.FC = () => {
const response = await fetch(`${API_BASE}/api/v1/link/new`, { const response = await fetch(`${API_BASE}/api/v1/link/new`, {
method: 'POST', method: 'POST',
headers: getAuthHeaders(), // Tu wstrzykujemy JWT headers: getAuthHeaders(),
body: JSON.stringify(payload) body: JSON.stringify(payload)
}); });
@@ -200,6 +192,9 @@ export const Generator: React.FC = () => {
const finalLink = data.url || `${API_BASE.replace('api.', '')}/${formData.uri}`; const finalLink = data.url || `${API_BASE.replace('api.', '')}/${formData.uri}`;
setResult(finalLink); setResult(finalLink);
// Wywołujemy callback z App.tsx (np. żeby pokazać powiadomienie)
onGenerate();
} catch (err: unknown) { } catch (err: unknown) {
if (err instanceof Error) setErrorMsg(err.message); if (err instanceof Error) setErrorMsg(err.message);
else setErrorMsg("Something went wrong saving to DB!"); else setErrorMsg("Something went wrong saving to DB!");
@@ -227,7 +222,6 @@ export const Generator: React.FC = () => {
KittyURL <PawPrint className="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" /> KittyURL <PawPrint className="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" />
</h1> </h1>
<p className="text-pink-300 font-medium">Shorten your links with a purr!</p> <p className="text-pink-300 font-medium">Shorten your links with a purr!</p>
</header> </header>
{/* Error Display */} {/* Error Display */}
@@ -277,8 +271,8 @@ export const Generator: React.FC = () => {
type="url" type="url"
placeholder="https://very-long-link.com/..." placeholder="https://very-long-link.com/..."
className="w-full p-4 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-pink-600 font-medium pr-12" className="w-full p-4 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-pink-600 font-medium pr-12"
value={formData.remoteUrl} value={url} // Używamy propsa
onChange={(e) => setFormData({ ...formData, remoteUrl: e.target.value })} onChange={(e) => setUrl(e.target.value)} // Używamy propsa
/> />
<Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 group-focus-within:text-pink-400 transition-colors" /> <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 group-focus-within:text-pink-400 transition-colors" />
</div> </div>

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

@@ -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,86 +191,111 @@ 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>
{/* Informacja dla mobile */}
<div className="mt-4 text-xs text-slate-400 sm:hidden">
Tap anywhere to jump
</div>
</div> </div>
); );
}; };