Merge pull request 'nagyon meno lett a tabon logo SerpentRace minden' (#55 ) from tab into main

sztem jo xd
nagyon meno lett a tabon logo SerpentRace minden
2025-10-20 17:39:25 +00:00 · 2025-10-20 19:38:21 +02:00 · 2025-10-20 19:17:43 +02:00 · 2025-10-20 19:13:50 +02:00 · 2025-10-20 16:57:15 +00:00 · 2025-10-20 18:56:38 +02:00
16 changed files with 351 additions and 195 deletions
@@ -1,66 +0,0 @@
-import e, { Router } from 'express';
-import { container, DIContainer } from '../../Application/Services/DIContainer';
-import { ErrorResponseService } from '../../Application/Services/ErrorResponseService';
-import { logRequest, logError, logAuth, logWarning, logOther } from '../../Application/Services/Logger';
-import { GenerateBoardCommand } from '../../Application/Game/commands/GenerateBoardCommand';
-
-const router = Router();
-
-//function to test the search service
-async function triggerAsyncBoardGeneration(gameId: string): Promise<boolean> {
-        try {
-            // Calculate default field counts based on game configuration
-            // For now, use reasonable defaults - this should be configurable by host in the future
-            const maxSpecialFieldsPercentage = parseInt(process.env.MAX_SPECIAL_FIELDS_PERCENTAGE || '67');
-            const maxSpecialFields = Math.floor((100 * maxSpecialFieldsPercentage) / 100);
-            
-            // Default distribution: 60% positive, 25% negative, 15% luck
-            const positiveFieldCount = Math.floor(maxSpecialFields * 0.6);
-            const negativeFieldCount = Math.floor(maxSpecialFields * 0.25);
-            const luckFieldCount = Math.floor(maxSpecialFields * 0.15);
-            
-            const command: GenerateBoardCommand = {
-                gameId,
-                positiveFieldCount,
-                negativeFieldCount,
-                luckFieldCount
-            };
-
-            logOther(`Triggering async board generation for game ${gameId}`, {
-                positiveFieldCount,
-                negativeFieldCount,
-                luckFieldCount,
-                totalSpecialFields: positiveFieldCount + negativeFieldCount + luckFieldCount
-            });
-
-            // Execute board generation in background
-            await DIContainer.getInstance().generateBoardCommandHandler.execute(command);
-            return true;
-
-        } catch (error) {
-            logError(`Async board generation failed for game ${gameId}`, error as Error);
-            // Don't propagate error - board generation failure shouldn't affect game creation
-            return false;
-        }
-    }
-
-
-// Game board generation endpoint
-router.post('/gameBoardGeneration', async (req, res) => {
-    try {
-        logRequest('Game board generation endpoint accessed', req, res);
-
-        const result = await triggerAsyncBoardGeneration("######-#####-#####-######");
-        
-        if (result) {
-            logOther('Game board generation triggered successfully', result);
-            return res.json({ message: 'Game board generation triggered successfully' });
-        } else {
-            throw new Error('Game board generation failed to trigger');
-        } 
-    } catch (error : any) {
-        logError('Error in game board generation endpoint', error);
-        return ErrorResponseService.sendInternalServerError(res);
-    }
-});
-export default router;
@@ -15,6 +15,7 @@ export interface ShortDeckDto {
  type: number;
  playedNumber: number;
  ctype: number;
+  cardsCount: number;
 }

 export interface DetailDeckDto {
@@ -9,6 +9,7 @@ export class DeckMapper {
      type: deck.type,
      playedNumber: deck.playedNumber,
      ctype: deck.ctype,
+      cardsCount: deck.cards.length,
    };
  }

@@ -26,6 +27,13 @@ export class DeckMapper {
  }

  static toShortDtoList(decks: DeckAggregate[]): ShortDeckDto[] {
-    return decks.map(this.toShortDto);
+    return decks.map(deck => ({
+      id: deck.id,
+      name: deck.name,
+      type: deck.type,
+      playedNumber: deck.playedNumber,
+      ctype: deck.ctype,
+      cardsCount: deck.cards.length,
+    }));
  }
 }
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <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/pictures/Logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>SerpentRace</title>
  </head>
  <body>
    <div id="root"></div>
@@ -15,6 +15,7 @@ import About from "./pages/About/About"
 import ScrollToTop from "./components/ScrollToTop"
 import GameScreen from "./pages/Game/GameScreen"
 import Reports from "./pages/Report/Reports"
+import Lobby from "./pages/Lobby/Lobby"

 function App() {
  const [isMobile, setIsMobile] = useState(false)
@@ -46,6 +47,7 @@ function App() {
    <Router>
      <Routes>
        <Route path="/about" element={<About />} />
+        <Route path="/lobby" element={<Lobby />} />
        <Route path="/register" element={<AuthRegister />} />
        <Route path="/login" element={<AuthLogin />} />
        <Route path="/verify-email" element={<EmailVerification />} />
@@ -1,7 +1,7 @@
 import axios from "axios"

 export const API_CONFIG = {
-  baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : '') + "/api",
+  baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : "") + "/api",
  wsURL: "http://localhost:3000",
  timeout: 10000,
  retryAttempts: 3,
@@ -12,9 +12,9 @@ export const apiClient = axios.create({
  timeout: API_CONFIG.timeout,
  withCredentials: true, // Important for cookie-based auth
  headers: {
-    'Content-Type': 'application/json'
-  }
-});
+    "Content-Type": "application/json",
+  },
+})

 //login
 export const login = async (username, password) => {
@@ -36,16 +36,6 @@ export const register = async (username, email, password, fname, lname, phone) =
  }
 }

-//verify email
-export const verifyEmail = async (token) => {
-  try {
-    const response = await apiClient.get(`/users/verify-email/${token}`)
-    return response.data
-  } catch (error) {
-    throw error
-  }
-}
-
 // Get current user's game statistics
 export const getUserStats = async () => {
  try {
@@ -63,7 +63,7 @@ const sortOptions = [

 const DeckManager = () => {
  const navigate = useNavigate()
-  
+
  const [selectedType, setSelectedType] = useState("All")
  const [selectedOrigin, setSelectedOrigin] = useState("Mind")
  const [sortBy, setSortBy] = useState("date-desc")
@@ -125,9 +125,9 @@ const DeckManager = () => {

  return (
    <div className="w-full flex flex-col bg-[color:var(--color-background)]">
-      <div className="w-full max-w-6xl mx-auto px-4 py-10">
+      <div className="w-full max-w-[1200px] mx-auto px-4 py-10">
        {/* Filters */}
-        <div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
+        <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
          <div className="flex gap-2 items-center w-full md:w-auto">
            <SearchBox
              value={search}
@@ -266,8 +266,8 @@ const DeckManager = () => {
        {/* Decks Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
          {/* Create New Deck (Mockup) */}
-          <div 
-            onClick={() => navigate('/deck-creator')}
+          <div
+            onClick={() => navigate("/deck-creator")}
            className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
          >
            <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
@@ -318,14 +318,9 @@ const DeckManager = () => {
          })}
        </div>
      </div>
-      
+
      {/* Deck Info Popup */}
-      {selectedDeck && (
-        <DeckInfoPopUp 
-          deck={selectedDeck} 
-          onClose={() => setSelectedDeck(null)} 
-        />
-      )}
+      {selectedDeck && <DeckInfoPopUp deck={selectedDeck} onClose={() => setSelectedDeck(null)} />}
    </div>
  )
 }
@@ -8,6 +8,9 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
  const [joinCode, setJoinCode] = useState("")
  const [error, setError] = useState("")

+  // gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
+  const username = user?.name ?? null
+
  const handleJoin = () => {
    if (!joinCode.trim()) {
      setError("Add meg a játék kódját!")
@@ -21,9 +24,19 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
    onCreateGame()
  }

+  // egyszerű segéd az inicialishez
+  const initials = username
+    ? username
+        .split(" ")
+        .map((s) => s[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase()
+    : ""
+
  return (
    <section
-      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
+      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden"
      style={{
        background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
      }}
@@ -32,10 +45,10 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
      <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
        <LogoCard
          imageSrc={logoImg}
-          containerHeight="450px"
-          containerWidth="450px"
-          imageHeight="450px"
-          imageWidth="450px"
+          containerHeight="420px"
+          containerWidth="420px"
+          imageHeight="420px"
+          imageWidth="420px"
          rotateAmplitude={7}
          scaleOnHover={1.03}
          showMobileWarning={false}
@@ -43,12 +56,40 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
          displayOverlayContent={false}
        />
      </div>
+
      {/* Jobb oldali panel */}
-      <div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
-        <div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
+      <div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8">
+        <div
+          className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
+          style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              {username ? (
+                <div className="flex items-center gap-3">
+                  {/* opcionális kis info ikon helye, ha később kell */}
+                  <div
+                    className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
+                    style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
+                  >
+                    {initials}
+                  </div>
+                  <div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
+                    {" "}
+                    <span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
+                      {username}
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-sm text-gray-300">Nincs bejelentkezve</div>
+              )}
+            </div>
+          </div>
+
          <div>
-            <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
-            <div className={`${error ? "border border-error rounded-lg" : ""}`}>
+            <h2 className="text-xl font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
+            <div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
              <InputBoxDark
                type="text"
                placeholder="Játék kódja"
@@ -57,17 +98,20 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
                width="w-full"
              />
            </div>
-            {error && <div className="text-xs mt-1 text-error">{error}</div>}
+            {error && <div className="text-xs mt-2 text-error">{error}</div>}
            <div className="mt-4">
              <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
            </div>
          </div>
-          {user && (
-            <div>
-              <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
-              <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
-            </div>
-          )}
+
+          <div className="border-t border-white/10 pt-4">
+            {username && (
+              <div>
+                <h3 className="text-lg font-semibold mb-3 text-text">Új játék létrehozása</h3>
+                <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
+              </div>
+            )}
+          </div>
        </div>
      </div>
    </section>
@@ -1,41 +1,83 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
-import About from "../../pages/About/About"
-import Home from "../../pages/Landing/Home"
+import { Link, useNavigate } from "react-router-dom"

 const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"

 const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false)
+  const navigate = useNavigate()
+  // Check if authLevel and username exist in localStorage
+  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
+
+  // Logout function: töröljük az adatokat és navigálunk a /login-ra (SPA, nincs reload)
+  const handleLogout = () => {
+    localStorage.removeItem("authLevel")
+    localStorage.removeItem("username")
+    navigate("/login")
+  }

  return (
-  
    <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          {/* Logo */}
          <div className="flex-shrink-0 flex items-center gap-2">
-            <a href="/" className="flex items-center mt-1 h-9">
+            <Link to="/" className="flex items-center mt-1 h-9">
              <Logo size={36} />
-            </a>
-            <a href="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
+            </Link>
+            <Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
              SerpentRace
-            </a>
+            </Link>
          </div>
          {/* Desktop Menu */}
-          <div className="hidden md:flex space-x-8">
-            <a href="/home" className={navLinkClass}>
-              Home
-            </a>
-            <a href="/report" className={navLinkClass}>
-              Stats
-            </a>
-            <a href="/about" className={navLinkClass}>
+          <div className="hidden md:flex space-x-8 items-center">
+            {isLoggedIn ? (
+              <>
+                <Link to="/home" className={navLinkClass}>
+                  Home
+                </Link>
+                <Link to="/decks" className={navLinkClass}>
+                  Decks
+                </Link>
+                <Link to="/report" className={navLinkClass}>
+                  Stats
+                </Link>
+              </>
+            ) : (
+              <Link to="/" className={navLinkClass}>
+                Home
+              </Link>
+            )}
+            <Link to="/about" className={navLinkClass}>
              About
-            </a>
-            <a href="/companies" className={navLinkClass}>
+            </Link>
+            <Link to="/companies" className={navLinkClass}>
              Contact
-            </a>
+            </Link>
+            {isLoggedIn && (
+              <button
+                onClick={handleLogout}
+                className="ml-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
+                title="Logout"
+              >
+                {/* Simple logout icon */}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-white"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
+                  />
+                </svg>
+              </button>
+            )}
          </div>
          {/* Mobile Hamburger */}
          <div className="md:hidden flex items-center">
@@ -69,18 +111,48 @@ const Navbar = () => {
      {/* Mobile Menu */}
      {menuOpen && (
        <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <a href="#" className={navLinkClass}>
-            Home
-          </a>
-          <a href="#" className={navLinkClass}>
+          {isLoggedIn ? (
+            <Link to="/home" className={navLinkClass}>
+              Home
+            </Link>
+          ) : (
+            <Link to="/" className={navLinkClass}>
+              Home
+            </Link>
+          )}
+          <Link to="/leaderboard" className={navLinkClass}>
            Leaderboard
-          </a>
-          <a href="#" className={navLinkClass}>
+          </Link>
+          <Link to="/about" className={navLinkClass}>
            About
-          </a>
-          <a href="#" className={navLinkClass}>
+          </Link>
+          <Link to="/companies" className={navLinkClass}>
            Contact
-          </a>
+          </Link>
+          {isLoggedIn && (
+            <div className="flex justify-end px-2 pb-2">
+              <button
+                onClick={handleLogout}
+                className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
+                title="Logout"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-white"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
        </div>
      )}
    </nav>
@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+
+export function requireAuthSync({ key = "username", redirectTo = "/login", replace = true } = {}) {
+  const value = localStorage.getItem(key)
+  if (!value) {
+    if (replace) window.location.replace(redirectTo)
+    else window.location.assign(redirectTo)
+    return false
+  }
+  return true
+}
+
+// Default hook: ad vissza egy [value, setValue] párt, szinkronizálja localStorage-t és átirányít, ha nincs érték
+export default function useRequireAuth({ key = "username", redirectTo = "/login" } = {}) {
+  const navigate = useNavigate()
+  const [value, setValue] = useState(() => {
+    try {
+      return localStorage.getItem(key)
+    } catch {
+      return null
+    }
+  })
+
+  // Ha nincs érték, átirányítjuk (komponens mount-oláskor)
+  useEffect(() => {
+    if (!value) {
+      navigate(redirectTo)
+    }
+  }, [navigate, value, redirectTo])
+
+  // Szinkronizáljuk a localStorage-t amikor a state változik
+  useEffect(() => {
+    try {
+      if (value == null) localStorage.removeItem(key)
+      else localStorage.setItem(key, value)
+    } catch {
+      // fail silently
+    }
+  }, [key, value])
+
+  return [value, setValue]
+}
@@ -6,7 +6,7 @@ import Button from "../../components/Buttons/Button"
 import { motion } from "framer-motion"
 import { useState } from "react"
 import { register } from "../../api/userApi"
-import { useNavigate } from "react-router-dom"
+import { useNavigate, useLocation } from "react-router-dom"

 export default function RegisterForm() {
  const [lastname, setLastname] = useState("")
@@ -19,6 +19,7 @@ export default function RegisterForm() {
  const [error, setError] = useState("")
  const [showErrorPopup, setShowErrorPopup] = useState(false)
  const navigate = useNavigate()
+  const location = useLocation()

  function validateEmail(email) {
    return /\S+@\S+\.\S+/.test(email)
@@ -50,7 +51,15 @@ export default function RegisterForm() {
      const response = await register(username, email, password, firstname, lastname, phone)
      // Check for 201 Created status
      if (response && response.status === 201) {
-        navigate("/login", { state: { success: true } })
+        // Ha már a /login útvonalon van a user, a sima navigate nem biztos, hogy újraindítja a komponenst.
+        // Ilyenkor előbb beállítjuk a state-et, majd kényszerítünk egy teljes oldalletöltést.
+        if (location.pathname === "/login") {
+          navigate("/login", { state: { success: true } })
+          // teljes újratöltés, hogy a login oldal újra feldolgozza a state-et
+          window.location.reload()
+        } else {
+          navigate("/login", { state: { success: true } })
+        }
      } else {
        let msg = "Sikertelen regisztráció."
        if (response && response.data && response.data.error) {
@@ -1,7 +1,7 @@
 // src/pages/Decks/DeckManagerPage.jsx
 // Deck Management Page (with Navbar, no Footer)

-import DeckManager from "../../components/Landingpage/DeckManager.jsx"
+import DeckManager from "../../components/DeckCreator/DeckManager.jsx"
 import Navbar from "../../components/Navbar/Navbar.jsx"

 export default function DeckManagerPage() {
@@ -1,46 +0,0 @@
-// src/pages/Home/Home.jsx
-// Régi PlayMenu-s oldal, "Home" néven
-
-import { useState, useEffect } from "react"
-import { useNavigate } from "react-router-dom"
-import Navbar from "../../components/Navbar/Navbar"
-import Footer from "../../components/Footer/Footer.jsx"
-import Background from "../../assets/backgrounds/Background.jsx"
-import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
-
-export default function Home() {
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    const username = localStorage.getItem("username")
-    const authLevel = localStorage.getItem("authLevel")
-    if (!username || !authLevel) {
-      navigate("/login")
-    }
-  }, [navigate])
-
-  // Dummy callbackok és user példa
-  const handleJoinGame = (code) => {
-    alert(`Csatlakozás játékhoz: ${code}`)
-  }
-  const handleCreateGame = () => {
-    alert("Új játék létrehozása")
-  }
-  const user = { name: localStorage.getItem("username") }
-
-  return (
-    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
-      <div className="fixed inset-0 -z-10 pointer-events-none">
-        <Background />
-      </div>
-      <div className="fixed top-0 left-0 right-0 z-30">
-        <Navbar />
-      </div>
-      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
-        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
-      </main>
-      <Footer />
-    </div>
-  )
-}
@@ -1,13 +1,17 @@
 // src/pages/Home/Home.jsx
 // Régi PlayMenu-s oldal, "Home" néven

-import { useState } from "react"
-import Navbar from "../../components/Navbar/Navbar.jsx"
+import { useEffect } from "react"
+import useRequireAuth from "../../hooks/useRequireAuth"
+import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"

 export default function Home() {
+  // a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
+  const [user, setUser] = useRequireAuth()
+
  // Dummy callbackok és user példa
  const handleJoinGame = (code) => {
    alert(`Csatlakozás játékhoz: ${code}`)
@@ -15,7 +19,9 @@ export default function Home() {
  const handleCreateGame = () => {
    alert("Új játék létrehozása")
  }
-  const user = { name: "Teszt Elek" }
+  const userObj = { name: user }
+
+  // ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be

  return (
    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -26,7 +32,7 @@ export default function Home() {
        <Navbar />
      </div>
      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
+        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={userObj} />
        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
      </main>
      <Footer />
@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from "react"
+import { useNavigate, useLocation } from "react-router-dom"
+import Navbar from "../../components/Navbar/Navbar"
+import Background from "../../assets/backgrounds/Background.jsx"
+import useRequireAuth from "../../hooks/useRequireAuth"
+
+const Lobby = () => {
+  const [visible, setVisible] = useState(false)
+  const sectionRef = useRef(null)
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  
+  const [user, setUser] = useRequireAuth()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setVisible(true)
+      },
+      { threshold: 0.3 }
+    )
+    if (sectionRef.current) observer.observe(sectionRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const handleExit = () => {
+    if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
+      navigate("/home")
+    }
+  }
+
+  const getInitials = (name) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .slice(0, 2)
+      .toUpperCase()
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen overflow-y-auto relative">
+      <div className="fixed top-0 left-0 w-full h-full -z-10">
+        <Background />
+      </div>
+
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+
+      <main className="flex-grow text-white px-6 pt-16 mt-0 mb-20 flex items-center justify-center">
+        <section
+          ref={sectionRef}
+          className={`w-full max-w-3xl rounded-2xl p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
+            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+          }`}
+          style={{ background: "rgba(0,0,0,0.25)" }}
+        >
+          <h1 className="text-4xl md:text-5xl font-extrabold text-green-300 mb-4 text-center tracking-wide drop-shadow-lg">
+            {user} Lobby-ja
+          </h1>
+
+          <p className="text-lg text-zinc-300 mb-8 text-center">
+            Játékosok, akik csatlakoztak ehhez a szobához:
+          </p>
+
+          <div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
+            <ul className="flex flex-col gap-4">
+              <li className="bg-zinc-700 py-3 px-4 rounded-xl text-green-400 font-semibold flex items-center gap-4 shadow hover:shadow-green-500/20 transition">
+                <div
+                  className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
+                  style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
+                >
+                  {getInitials(user)}
+                </div>
+                <span className="text-white text-lg">{user}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div className="flex justify-center">
+            <button
+              onClick={handleExit}
+              className="bg-gradient-to-r from-green-700 to-green-500 hover:from-green-600 hover:to-green-400 text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-green-400/30 transition-transform transform hover:scale-105"
+            >
+              Kilépés
+            </button>
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}
+
+export default Lobby
@@ -4,8 +4,11 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import { getUserStats } from "../../api/userApi.js"
+import useRequireAuth from "../../hooks/useRequireAuth.jsx"

 export default function Reports() {
+  const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
+
  return (
    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
      {/* Háttér */}
@@ -24,9 +27,8 @@ export default function Reports() {
          {/* Fejléc */}
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-white">Játék Riportok</h2>
-            <p className="text-gray-300 mt-2">
-              Áttekintés a legutóbbi játékokról és statisztikákról
-            </p>
+            <p className="text-gray-300 mt-2">Áttekintés a legutóbbi játékokról és statisztikákról</p>
+            {username && <p className="text-sm text-gray-400 mt-1">Bejelentkezett: {username}</p>}
          </div>

          {/* Statisztikai kártyák */}
Author	SHA1	Message	Date
Walke	1c01e4ce24	Merge pull request 'nagyon meno lett a tabon logo SerpentRace minden' (#55 ) from tab into main sztem jo xd	2025-10-20 17:39:25 +00:00
Walke	8b5cf2c1e5	nagyon meno lett a tabon logo SerpentRace minden	2025-10-20 19:38:21 +02:00
magdo	2d7778f7d1	test removed	2025-10-20 19:17:43 +02:00
magdo	aa3587b60a	deck card count added	2025-10-20 19:13:50 +02:00
Walke	99fa7ebd98	Merge pull request 'registracional jol navigal a loginra' (#54 ) from regnavigationfix into main Reviewed-on: #54 :D	2025-10-20 16:57:15 +00:00
Walke	23c4b838d4	registracional jol navigal a loginra	2025-10-20 18:56:38 +02:00
Walke	bfe977d35b	Merge remote-tracking branch 'origin/deck_kezeles'	2025-10-20 18:01:41 +02:00
Walke	8d24e8ffa6	Merge pull request 'Lobby' (#50 ) from barni1020 into main Reviewed-on: #50	2025-10-20 15:22:13 +00:00
Barni	1bf3253128	Lobby	2025-10-20 17:14:37 +02:00
Walke	96487fb065	Merge pull request 'Filter bar fix' (#49 ) from deckmanagerfrontendfix into main Reviewed-on: #49	2025-10-18 15:52:30 +00:00
Walke	9ef83f7963	Filter bar fix	2025-10-18 17:50:39 +02:00
Walke	27fc028bad	navbarban jol le vannak kezelve a redirect es letre lett hozva egy hook amivel automatikusan berakja a usernamet es ha meg nem akkor redirectel	2025-10-15 19:08:31 +02:00
Walke	d1b4141e63	Merge pull request 'redirect fix' (#48 ) from authlocalstorage into main Reviewed-on: #48	2025-10-15 16:40:22 +00:00
Walke	76fa204ae8	redirect fix	2025-10-15 18:39:43 +02:00