feat: games are no working on moblie devices

fix: typo fix in image path
feat: opengraph icons
2026-01-06 16:31:45 +01:00 · 2025-12-31 17:58:34 +01:00 · 2025-12-31 17:41:26 +01:00 · 2025-12-31 13:28:27 +01:00
10 changed files with 471 additions and 253 deletions
--- a/.env.default
+++ b/.env.default
@@ -4,3 +4,4 @@ USE_SUBDOMAINS=true            # Whether backend allows for use of subdomains in
 DEBUG=false
 # Frontend specific
 <miejsce na twoje zmienne>
+VITE_API_TARGET=kitkat.example.com # Target backend for API requests.
--- a/kittyurl-frontend/index.html
+++ b/kittyurl-frontend/index.html
@@ -1,14 +1,22 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
-  <head>
+<head>
    <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" />
    <title>kittyurl - shorten URLs with ease</title>
    <meta property="og:title" content="kittyurl shortener" />
    <meta property="og:type" content="website" />
    <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>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
--- a/kittyurl-frontend/src/assets/Ket.png
+++ b/kittyurl-frontend/src/assets/Ket.png
--- a/kittyurl-frontend/src/assets/kitty.png
+++ b/kittyurl-frontend/src/assets/kitty.png
--- a/kittyurl-frontend/src/components/FlappyCat.tsx
+++ b/kittyurl-frontend/src/components/FlappyCat.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';

-// --- MODEL KOTA ---
+// --- MODEL KOTA (Wizualizacja) ---
 interface DetailedKittyProps { isGameOver: boolean; }
 const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
    const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
@@ -32,16 +32,20 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
    );
 };

-// --- KONFIGURACJA NIEZALEŻNA OD FPS (Wartości na sekundę) ---
-const GAP_SIZE = 180;
+// --- KONFIGURACJA GRY ---
+const GAP_SIZE = 170;        // Przerwa między rurami
 const PIPE_WIDTH = 70;
-const PIPE_SPEED = 200;      // px/s
-const PIPE_SPAWN_RATE = 1.8; // sekundy
-const GRAVITY = 1400;        // px/s^2
-const FLAP_STRENGTH = -420;  // px/s
-const CANVAS_HEIGHT = 450;
+const PIPE_SPEED = 220;      // px/s
+const PIPE_SPAWN_RATE = 1.6; // co ile sekund rura
+const GRAVITY = 1400;        // siła grawitacji
+const FLAP_STRENGTH = -420;  // siła skoku
+
+// 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 }) => {
+    // --- STANY ---
    const [isPlaying, setIsPlaying] = useState(false);
    const [gameOver, setGameOver] = useState(false);
    const [score, setScore] = useState(0);
@@ -50,10 +54,13 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        return saved ? parseInt(saved, 10) : 0;
    });

+    // Stany do renderowania
    const [displayKittyY, setDisplayKittyY] = useState(150);
    const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
    const [rotation, setRotation] = useState(0);
+    const [scale, setScale] = useState(1); // Skala RWD

+    // --- REFS (FIZYKA) ---
    const kittyYRef = useRef(150);
    const velocityRef = useRef(0);
    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 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(() => {
        setGameOver(true);
        setIsPlaying(false);
@@ -81,7 +108,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        velocityRef.current = 0;
        pipesRef.current = [];
        spawnTimerRef.current = 0;
-        lastTimeRef.current = performance.now(); // Inicjalizacja czasu
+        lastTimeRef.current = performance.now();
        setDisplayKittyY(150);
        setDisplayPipes([]);
        setRotation(0);
@@ -91,64 +118,87 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
    }, [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(() => {
        const update = (currentTime: number) => {
            if (gameOver || !isPlaying) return;

-            // --- DYNAMICZNY DELTA TIME ---
-            // Obliczamy ile sekund upłynęło od ostatniej klatki (np. 0.0069s dla 144Hz)
+            // Delta time w sekundach
            const dt = (currentTime - lastTimeRef.current) / 1000;
            lastTimeRef.current = currentTime;
+            const frameTime = Math.min(dt, 0.1); // Limit laga

-            // Zabezpieczenie przed ogromnym skokiem fizyki przy lagu
-            const frameTime = Math.min(dt, 0.1);
-
-            // Fizyka grawitacji
+            // 1. Fizyka grawitacji
            velocityRef.current += GRAVITY * frameTime;
            kittyYRef.current += velocityRef.current * frameTime;

-            // Płynna rotacja zależna od prędkości pionowej
-            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 80));
+            // Rotacja
+            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -25), 90));

-            // Kolizja z sufitem/ziemią
-            if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -50) {
+            // Kolizja z sufitem/podłogą
+            if (kittyYRef.current > GAME_HEIGHT - 40 || kittyYRef.current < -50) {
                endGame();
                return;
            }

-            // Spawn rur
+            // 2. Generowanie rur
            spawnTimerRef.current += frameTime;
            if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
-                const topHeight = Math.random() * (220 - 70) + 70;
-                pipesRef.current.push({ x: 650, topHeight, id: Date.now() });
+                const minPipe = 60;
+                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;
            }

-            // Ruch rur i kolizje
+            // 3. Ruch rur i kolizje
            const updatedPipes = [];
            for (const p of pipesRef.current) {
                p.x -= PIPE_SPEED * frameTime;

-                // Hitbox (z małym marginesem dla kota)
-                if (p.x < 100 && p.x + PIPE_WIDTH > 55) {
+                // Hitbox rury (marginesy dla łatwiejszej gry)
+                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) {
                        endGame();
                        return;
                    }
                }

-                // Punktacja
+                // Naliczanie punktów
                if (p.x < 50 && !p.passed) {
                    p.passed = true;
                    scoreRef.current += 1;
                    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;

-            // Update stanów do renderowania
+            // 4. Renderowanie
            setDisplayKittyY(kittyYRef.current);
            setDisplayPipes([...pipesRef.current]);

@@ -161,66 +211,108 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        return () => cancelAnimationFrame(requestRef.current);
    }, [isPlaying, gameOver, endGame]);

+    // Obsługa Spacji
    useEffect(() => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.code === 'Space') {
-                e.preventDefault();
-                if (!isPlaying || gameOver) startGame(); else flap();
+                e.preventDefault(); // Tu można bezpiecznie użyć preventDefault dla klawiatury
+                handleAction();
            }
        };
        window.addEventListener('keydown', handleKey);
        return () => window.removeEventListener('keydown', handleKey);
-    }, [isPlaying, gameOver, startGame, flap]);
+    }, [handleAction]);

    return (
-        <div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans select-none">
-            <button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-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="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
            </button>

+            {/* WRAPPER SKALUJĄCY GRĘ */}
            <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"
-                onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
+                style={{
+                    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="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">
-                    <div className="text-pink-500 text-4xl">Score: {score}</div>
+                    {/* CHMURY (Ozdoba) */}
+                    <div className="absolute bottom-10 left-10 w-24 h-8 bg-white/40 rounded-full" />
+                    <div className="absolute top-20 left-1/2 w-32 h-10 bg-white/40 rounded-full" />
+
+                    {/* HUD */}
+                    <div className="absolute top-6 right-8 text-right z-30 font-black pointer-events-none">
+                        <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>

-                <div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
+                    {/* GRACZ (KOT) */}
+                    <div className="absolute left-10 z-20 pointer-events-none" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
                        <DetailedKitty isGameOver={gameOver} />
                    </div>

+                    {/* RURY */}
                    {displayPipes.map(p => (
                        <React.Fragment key={p.id}>
-                        <div className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl" style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }} />
-                        <div className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl" style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: CANVAS_HEIGHT - (p.topHeight + GAP_SIZE) }} />
+                            {/* Górna rura */}
+                            <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">
+                            <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>
-                            <button className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg">START</button>
+                                <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>
                    )}

+                    {/* GAME OVER */}
                    {gameOver && (
                        <div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
                            <h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
                            <p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
-                        <button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl">TRY AGAIN</button>
+                            <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>
-            <p className="mt-4 text-slate-400 text-sm font-bold uppercase tracking-widest">
-                Physics: {isPlaying ? "Frame-Independent" : "Ready"}
-            </p>
+            </div>
+
+            <div className="mt-4 text-xs text-slate-400 sm:hidden">
+                Tap anywhere to jump
+            </div>
        </div>
    );
 };
--- a/kittyurl-frontend/src/components/Generator.tsx
+++ b/kittyurl-frontend/src/components/Generator.tsx
@@ -8,41 +8,52 @@ interface GeneratorProps {
 }

 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">
-        <header className="text-center mb-12">
-            <h1 className="text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center gap-4">
-                KittyURL <PawPrint size={50} fill="currentColor" />
+    <div className="max-w-[800px] mx-auto pt-10 sm:pt-16 px-4 flex flex-col items-center">
+        {/* Header - Skalowanie tekstu i ikony */}
+        <header className="text-center mb-8 sm:mb-12">
+            <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>
-            <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>

-        <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">
-                <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">
                    <input
                        type="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}
                        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>

            <button
                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>
        </div>

-        <div className="w-full mt-16 text-center">
-            <div className="bg-pink-100/50 rounded-[2.5rem] border-4 border-dashed border-pink-200 p-12">
-                <Cat size={60} className="mx-auto text-pink-200 mb-4" />
-                <p className="text-pink-300 font-bold">No links generated yet. Feed me a URL! 🐾</p>
+        {/* Sekcja "No links yet" - Skalowanie paddingu i ikony */}
+        <div className="w-full mt-10 sm:mt-16 text-center">
+            <div className="bg-pink-100/50 rounded-[2rem] sm:rounded-[2.5rem] border-4 border-dashed border-pink-200 p-8 sm:p-12">
+                <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>
--- a/kittyurl-frontend/src/components/HistoryView.tsx
+++ b/kittyurl-frontend/src/components/HistoryView.tsx
@@ -1,15 +1,23 @@
-
-import { PawPrint, ExternalLink } from 'lucide-react';
+import { PawPrint, ExternalLink } from 'lucide-react';

 export const HistoryView = ({ onBack }: { onBack: () => void }) => (
-    <div className="max-w-4xl mx-auto p-6 pt-10">
-        <button onClick={onBack} className="mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform">
-            <PawPrint size={20} /> Back to KittyURL
+    <div className="max-w-4xl mx-auto px-4 py-6 sm:p-6 sm:pt-10">
+        {/* Przycisk powrotu - mniejszy margines na mobile */}
+        <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>
-        <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">
-                <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">
                        <tr>
                            <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>
                    <tbody className="divide-y divide-pink-50">
                        <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 font-bold text-pink-500 flex items-center gap-2">kitty.url/meow <ExternalLink size={14} /></td>
+                            <td className="px-6 py-4 text-slate-400 truncate max-w-[300px]">
+                                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>
                    </tbody>
                </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>
--- a/kittyurl-frontend/src/components/KittyGame.tsx
+++ b/kittyurl-frontend/src/components/KittyGame.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from '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 {
    isJumping: 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 }) => {
+    // Stany gry
    const [isPlaying, setIsPlaying] = useState(false);
    const [gameOver, setGameOver] = useState(false);
    const [score, setScore] = useState(0);
@@ -60,25 +65,46 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    });

    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;

    // Referencje fizyczne
    const kittyYRef = useRef(0);
-    const obstacleXRef = useRef(650);
+    const obstacleXRef = useRef(GAME_WIDTH);
    const velocityRef = useRef(0);
    const scoreRef = useRef(0);
    const requestRef = useRef<number>(0);
    const lastTimeRef = useRef<number>(0);

-    // STAŁE KONFIGURACYJNE (Wartości na sekundę - niezależne od Hz)
-    const GRAVITY = 1800;        // Kot spadnie o 1800px w ciągu sekundy (jeśli nie ma prędkości początkowej)
-    const JUMP_FORCE = -550;     // Prędkość startowa skoku
-    const INITIAL_SPEED = 380;   // Prędkość przeszkody w px/s
-    const SPEED_INCREMENT = 12;  // Przyspieszenie px/s na każdy punkt
+    // STAŁE KONFIGURACYJNE
+    const GRAVITY = 1800;
+    const JUMP_FORCE = -550;
+    const INITIAL_SPEED = 380;
+    const SPEED_INCREMENT = 12;
    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(() => {
        setGameOver(true);
        setIsPlaying(false);
@@ -95,12 +121,11 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        setScore(0);
        scoreRef.current = 0;
        kittyYRef.current = 0;
-        obstacleXRef.current = 700;
+        obstacleXRef.current = GAME_WIDTH + 50;
        velocityRef.current = 0;
-        // Kluczowe: inicjalizacja czasu startu
        lastTimeRef.current = performance.now();
        setDisplayKittyY(0);
-        setDisplayObstacleX(700);
+        setDisplayObstacleX(GAME_WIDTH + 50);
    }, []);

    const jump = useCallback(() => {
@@ -109,19 +134,23 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        }
    }, [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(() => {
        const update = (currentTime: number) => {
            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;
            lastTimeRef.current = currentTime;
-
-            // Zabezpieczenie przed "skokiem" (np. gdy użytkownik zmieni kartę w przeglądarce)
            const frameTime = Math.min(dt, 0.1);

-            // Fizyka kota (jednostki * czas)
+            // Fizyka
            velocityRef.current += GRAVITY * frameTime;
            kittyYRef.current -= velocityRef.current * frameTime;

@@ -130,24 +159,22 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                velocityRef.current = 0;
            }

-            // Ruch przeszkody (prędkość * czas)
+            // Przeszkoda
            const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
            obstacleXRef.current -= currentSpeed * frameTime;

-            // Reset przeszkody
            if (obstacleXRef.current < -80) {
-                obstacleXRef.current = 750;
+                obstacleXRef.current = GAME_WIDTH + 50;
                scoreRef.current += 1;
                setScore(scoreRef.current);
            }

-            // Kolizja (strefa trafienia dopasowana do czasu)
+            // Kolizja
            if (obstacleXRef.current < 100 && obstacleXRef.current > 20 && kittyYRef.current < 45) {
                endGame();
                return;
            }

-            // Renderowanie wizualne
            setDisplayKittyY(kittyYRef.current);
            setDisplayObstacleX(obstacleXRef.current);

@@ -164,23 +191,39 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.code === 'Space') {
                e.preventDefault();
-                if (!isPlaying || gameOver) startGame(); else jump();
+                handleAction();
            }
        };
        window.addEventListener('keydown', handleKey);
        return () => window.removeEventListener('keydown', handleKey);
-    }, [isPlaying, gameOver, startGame, jump]);
+    }, [handleAction]);

    return (
-        <div className="flex flex-col items-center justify-center min-h-[70vh] p-4 font-sans select-none">
-            <button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-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="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
            </button>

+            {/* KONTENER SKALOWANIA */}
            <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={{
+                    width: GAME_WIDTH,
+                    height: GAME_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top center',
+                    touchAction: 'none' // Zapobiega scrollowaniu na mobile
+                }}
+                className="relative shrink-0"
+            >
+                <div
+                    className={`relative w-full h-full rounded-[3.5rem] shadow-2xl border-4 transition-colors duration-1000 overflow-hidden cursor-pointer
                    ${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
-                onClick={() => { if (!isPlaying || gameOver) startGame(); else jump(); }}
+                    // Używamy onPointerDown zamiast onClick/onTouchStart
+                    onPointerDown={handleAction}
                >
                    {/* Niebo */}
                    <div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'}`}>
@@ -199,13 +242,13 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                    </div>

                    {/* KOTEK */}
-                <div className="absolute left-10" style={{ bottom: `${displayKittyY + 48}px` }}>
+                    <div className="absolute left-10 pointer-events-none" style={{ bottom: `${displayKittyY + 48}px` }}>
                        <DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
                    </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
+                        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` }}
                    >
@@ -214,38 +257,44 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                    </div>

                    {/* Ziemia */}
-                <div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around
+                    <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>

-                {/* Ekrany start/stop */}
+                    {/* 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">
+                                <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">Click or Space</p>
+                                <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">
+                            <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 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>
-                <span>Physics: Delta-Time Based</span>
+            </div>
+
+            {/* Informacja dla mobile */}
+            <div className="mt-4 text-xs text-slate-400 sm:hidden">
+                Tap anywhere to jump
            </div>
        </div>
    );
--- a/kittyurl-frontend/src/components/Navbar.tsx
+++ b/kittyurl-frontend/src/components/Navbar.tsx
@@ -1,5 +1,4 @@
-import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind } from 'lucide-react';
-// Używamy 'import type' dla zadowolenia verbatimModuleSyntax
+import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind, Cat } from 'lucide-react';
 import type { View } from '../App';

 interface NavbarProps {
@@ -9,49 +8,66 @@ interface 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">
+        {/* LEWA STRONA: Przycisk Home w stylu Kitty */}
+        <button
+            onClick={() => onNavigate('home')}
+            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"
+        >
+            <Cat size={20} fill="currentColor" />
+            <span className="text-lg tracking-tighter">KittyURL</span>
+        </button>
+
+        {/* PRAWA STRONA: Pozostałe przyciski zgrupowane w divie */}
+        <div className="flex flex-wrap justify-end gap-2 sm:gap-3">
            {/* Przycisk Jump Game */}
            <button
                onClick={() => onNavigate('jump-game')}
-            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-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"
            >
-            <Gamepad2 size={18} /> Jump
+                <Gamepad2 size={18} />
+                <span className="hidden md:inline">Jump</span>
            </button>

            {/* Przycisk Flappy Cat */}
            <button
                onClick={() => onNavigate('flappy-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"
+                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"
            >
-            <Wind size={18} /> Flappy
+                <Wind size={18} />
+                <span className="hidden md:inline">Flappy</span>
            </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"
+                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} /> History
+                <HistoryIcon size={18} />
+                <span className="hidden md:inline">History</span>
            </button>

-        {/* Dynamiczny przycisk Logowania / Wylogowania */}
+            {/* Logowanie / Wylogowanie */}
            {isAuthenticated ? (
                <button
                    onClick={() => {
                        onLogout();
                        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"
+                    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} /> Logout
+                    <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 shadow-lg shadow-pink-200 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-bold text-white transition-all active:scale-95 text-sm sm:text-base shadow-lg shadow-pink-200"
                >
-                <LogIn size={18} /> Sign In
+                    <LogIn size={18} />
+                    <span className="hidden sm:inline">Sign In</span>
                </button>
            )}
+        </div>
    </nav>
 );
--- a/kittyurl-frontend/vite.config.ts
+++ b/kittyurl-frontend/vite.config.ts
@@ -1,8 +1,19 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import path from 'path' // Importuj moduł path

-export default defineConfig({
+export default defineConfig(({ mode }) => {
+    // Ustawiamy ścieżkę do folderu, w którym faktycznie znajduje się plik .env
+    // path.resolve(__dirname, '..') oznacza: "wyjdź jeden poziom wyżej względem tego pliku"
+    const envDirectory = path.resolve(__dirname, '..');
+
+    // Ładujemy env z określonej lokalizacji
+    const env = loadEnv(mode, envDirectory, '');
+
+    const apiTarget = env.VITE_API_TARGET;
+
+    return {
        plugins: [
            react(),
            tailwindcss(),
@@ -11,23 +22,22 @@ export default defineConfig({
            port: 6568,
            proxy: {
                '/api': {
-                target: 'https://ktty.is',
+                    target: apiTarget,
                    changeOrigin: true,
                    secure: false,
-                // Dodatkowe nagłówki pomagają oszukać zabezpieczenia serwera (np. Cloudflare)
                    headers: {
-                    'Origin': 'https://ktty.is',
-                    'Referer': 'https://ktty.is/'
+                        'Origin': apiTarget,
+                        'Referer': `${apiTarget}/`
                    },
                    configure: (proxy) => {
                        proxy.on('error', (err) => {
                            console.log('[Proxy Error]:', err.message);
                        });
                        proxy.on('proxyReq', (_, req) => {
-                        console.log(`[Proxy] Wysyłam do zdalnego serwera: ${req.method} ${req.url}`);
+                            console.log(`[Proxy] Wysyłam do: ${apiTarget}${req.url}`);
                        });
                        proxy.on('proxyRes', (proxyRes, req) => {
-                        console.log(`[Proxy] Odpowiedź z ktty.is: ${proxyRes.statusCode} ${req.url}`);
+                            console.log(`[Proxy] Odpowiedź: ${proxyRes.statusCode} ${req.url}`);
                        });
                    },
                }
@@ -35,6 +45,6 @@ export default defineConfig({
        },
        preview: {
            port: 6568,
-        
        },
+    }
 })
Author	SHA1	Message	Date
Pc	4468148acb	feat: games are no working on moblie devices	2026-01-06 16:31:45 +01:00
Pc	4d5f5d9605	fix: typo fix in image path	2025-12-31 17:58:34 +01:00
Pc	fbac1f34c4	feat: opengraph icons	2025-12-31 17:41:26 +01:00
Pc	de9486bece	feat: responsive desing feat: load api from .env	2025-12-31 13:28:27 +01:00