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
parent d1b4141e63
commit 27fc028bad
5 changed files with 140 additions and 44 deletions
@@ -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>
-            <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
-            <div className={`${error ? "border border-error rounded-lg" : ""}`}>
+              {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-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,19 +99,22 @@ 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 className="border-t border-white/10 pt-4">
+            {username && (
              <div>
-              <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
+                <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>
  )
 }
@@ -32,6 +32,8 @@ const Navbar = () => {
          </div>
          {/* Desktop Menu */}
          <div className="hidden md:flex space-x-8 items-center">
+            {isLoggedIn ? (
+              <>
                <Link to="/home" className={navLinkClass}>
                  Home
                </Link>
@@ -41,6 +43,12 @@ const Navbar = () => {
                <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">
+          {isLoggedIn ? (
            <Link to="/home" className={navLinkClass}>
              Home
            </Link>
+          ) : (
+            <Link to="/" className={navLinkClass}>
+              Home
+            </Link>
+          )}
          <Link to="/leaderboard" className={navLinkClass}>
            Leaderboard
          </Link>
@@ -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]
+}
@@ -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">
@@ -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 */}