Lobby

SerpentRace_Frontend/src/App.jsx

@@ -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 />} />

SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx

@@ -85,7 +85,6 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
                 <div className="text-sm text-gray-300">Nincs bejelentkezve</div>
               )}
             </div>
-            {/* opcionális kis info ikon helye, ha később kell */}
           </div>
 
           <div>

SerpentRace_Frontend/src/pages/Lobby/Lobby.jsx

@@ -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