From 27fc028bad1919d0522593a4ada0641d221d3b38 Mon Sep 17 00:00:00 2001
From: WalkeU <gabooor1982@gmail.com>
Date: Wed, 15 Oct 2025 19:08:31 +0200
Subject: [PATCH] navbarban jol le vannak kezelve a redirect es letre lett
 hozva egy hook amivel automatikusan berakja a usernamet es ha meg nem akkor
 redirectel

---
 .../src/components/Landingpage/PlayMenu.jsx   | 77 +++++++++++++++----
 .../src/components/Navbar/Navbar.jsx          | 38 ++++++---
 .../src/hooks/useRequireAuth.jsx              | 43 +++++++++++
 .../src/pages/Landing/Home.jsx                | 18 ++---
 .../src/pages/Report/Reports.jsx              |  8 +-
 5 files changed, 140 insertions(+), 44 deletions(-)
 create mode 100644 SerpentRace_Frontend/src/hooks/useRequireAuth.jsx

diff --git a/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx b/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
index 81e65632..afa9473f 100644
--- a/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
+++ b/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
@@ -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,41 @@ 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>
+            {/* opcionális kis info ikon helye, ha később kell */}
+          </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 +99,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>
diff --git a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
index d0926eac..4fd5c9b9 100644
--- a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+++ b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
@@ -32,15 +32,23 @@ const Navbar = () => {
           </div>
           {/* Desktop Menu */}
           <div className="hidden md:flex space-x-8 items-center">
-            <Link to="/home" className={navLinkClass}>
-              Home
-            </Link>
-            <Link to="/decks" className={navLinkClass}>
-              Decks
-            </Link>
-            <Link to="/report" className={navLinkClass}>
-              Stats
-            </Link>
+            {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
             </Link>
@@ -103,9 +111,15 @@ const Navbar = () => {
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <Link to="/home" className={navLinkClass}>
-            Home
-          </Link>
+          {isLoggedIn ? (
+            <Link to="/home" className={navLinkClass}>
+              Home
+            </Link>
+          ) : (
+            <Link to="/" className={navLinkClass}>
+              Home
+            </Link>
+          )}
           <Link to="/leaderboard" className={navLinkClass}>
             Leaderboard
           </Link>
diff --git a/SerpentRace_Frontend/src/hooks/useRequireAuth.jsx b/SerpentRace_Frontend/src/hooks/useRequireAuth.jsx
new file mode 100644
index 00000000..09f5f912
--- /dev/null
+++ b/SerpentRace_Frontend/src/hooks/useRequireAuth.jsx
@@ -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]
+}
diff --git a/SerpentRace_Frontend/src/pages/Landing/Home.jsx b/SerpentRace_Frontend/src/pages/Landing/Home.jsx
index 1bf2c2fe..e999d64e 100644
--- a/SerpentRace_Frontend/src/pages/Landing/Home.jsx
+++ b/SerpentRace_Frontend/src/pages/Landing/Home.jsx
@@ -1,19 +1,16 @@
 // 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 { 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() {
-  const navigate = useNavigate()
-  const user = localStorage.getItem("username")
-
-  // Logoljuk ki a user-t minden renderkor
-  console.log("Home user:", user)
+  // 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) => {
@@ -24,12 +21,7 @@ export default function Home() {
   }
   const userObj = { name: user }
 
-  // Ha nincs bejelentkezett felhasználó a localStorage-ben, átirányítjuk a /login oldalra
-  useEffect(() => {
-    if (!user) {
-      navigate("/login")
-    }
-  }, [navigate, 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">
diff --git a/SerpentRace_Frontend/src/pages/Report/Reports.jsx b/SerpentRace_Frontend/src/pages/Report/Reports.jsx
index 2340ae51..f79b055e 100644
--- a/SerpentRace_Frontend/src/pages/Report/Reports.jsx
+++ b/SerpentRace_Frontend/src/pages/Report/Reports.jsx
@@ -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 */}