Merge remote changes into javitasok-plusz

2025-10-27 21:01:57 +01:00
parent d3dcb7f7da d915a7fe1c
commit 46369ed112
22 changed files with 471 additions and 212 deletions
@@ -70,12 +70,6 @@ const Footer = () => {
          >
            Rólunk
          </button>
-          <button
-            onClick={goContacts}
-            className="text-left hover:underline hover:text-green-500 transition-colors"
-          >
-            Kapcsolat
-          </button>
        </div>

        {/* Közösség */}
@@ -7,10 +7,12 @@ import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
 import { motion } from "framer-motion"
 import { isAuthenticated } from "../../hooks/useRequireAuth" // <-- added import
 import { useNavigate } from "react-router-dom" // <-- NEW
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // <-- NEW

-const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onNavigateToContacts }) => {
-  const auth = isAuthenticated() // <-- check without redirect
-  const navigate = useNavigate() // <-- NEW
+// 🔧 HIBA JAVÍTVA: függvénydefiníció hozzáadva
+const LandingPage = () => {
+  const { goLanding, goAbout, goHome, goLogin, goAuth } = HandleNavigate()
+  const auth = isAuthenticated() // a hitelesítési állapot meghatározásához

  return (
    <div className="w-full">
@@ -45,6 +47,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onN
            A SerpentRace egy társasjáték, ahol új barátokra lelhetsz, közösséget építhetsz és tanulhatsz –
            mindezt szórakozva!
          </motion.p>
+
          <motion.div
            className="text-xl md:text-2xl font-bold text-emerald-400 mb-10"
            initial={{ opacity: 0, y: 20 }}
@@ -63,12 +66,12 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onN
            {/* If not authenticated show Login/Register; if authenticated show Home button */}
            {!auth ? (
              <>
-                <ButtonGreen text="Bejelentkezés" onClick={onNavigateToPlay} width="w-60" />
-                <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
-                <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" /> 
+                <ButtonGreen text="Bejelentkezés" onClick={goLogin} width="w-60" />
+                <ButtonGreen text="Regisztráció" onClick={goAuth} width="w-60" />
+                <ButtonGreen text="Játék" onClick={goHome} width="w-60" />
              </>
            ) : (
-              <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" />
+              <ButtonGreen text="Játék" onClick={goHome} width="w-60" />
            )}
          </motion.div>
        </div>
@@ -178,7 +181,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onN

            <ButtonGreen
              text="Kapcsolatfelvétel"
-              onClick={onNavigateToContacts}
+              onClick={goAbout}
              className="px-12 py-4 text-xl font-bold"
            />
          </motion.div>
@@ -1,18 +1,17 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
 import { Link } from "react-router-dom"
-import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"// ✅ importáld a navigációs hookot
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // ✅ importáld a navigációs hookot
+import { FaSignOutAlt, FaChartBar, FaUser, FaBars } from "react-icons/fa"

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

 const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false)
-  const isLoggedIn = Boolean(
-    localStorage.getItem("authLevel") && localStorage.getItem("username")
-  )
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))

  // ✅ Használjuk a HandleNavigate hookot
  const { goLanding, goAbout, goHome, goLogin, goContacts } = HandleNavigate()
@@ -25,16 +24,23 @@ const Navbar = () => {

  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-0">
+      {/* removed mx-auto and px-* classes; use full width + responsive padding-inline using clamp */}
+      <div
+        className="w-full"
+        style={{
+          /* minimális padding 12px, növel a képernyővel, max 30px */
+          paddingInline: "clamp(12px, calc((100vw - 1024px) / 2), 80px)",
+        }}
+      >
        <div className="flex justify-between h-16 items-center">
          {/* Logo + Brand */}
          <div className="flex-shrink-0 flex items-center gap-2">
-            <button onClick={goLanding} className="flex items-center mt-1 h-9">
+            <button onClick={goLanding} className=" cursor-pointer flex items-center mt-1 h-9">
              <Logo size={36} />
            </button>
            <button
              onClick={goLanding}
-              className="flex items-center h-9 text-white font-bold text-2xl tracking-tight"
+              className="cursor-pointer flex items-center h-9 text-white font-bold text-2xl tracking-tight"
            >
              SerpentRace
            </button>
@@ -43,22 +49,16 @@ const Navbar = () => {
          {/* Desktop Menu */}
          <div className="hidden md:flex items-center space-x-6">
            {/* Bal oldali linkek */}
-            <button onClick={goLanding} className={navLinkClass}>
-              Főoldal
-            </button>
            <button onClick={goAbout} className={navLinkClass}>
              Rólunk
            </button>
-            <button onClick={goContacts} className={navLinkClass}>
-              Kapcsolat
-            </button>

            {/* Csak bejelentkezve */}
            {isLoggedIn && (
              <>
-                <Link to="/decks" className={navLinkClass}>Paklik</Link>
-                <Link to="/report" className={navLinkClass}>Statisztikák</Link>
-                <Link to="/profile" className={navLinkClass}>Profil</Link>
+                <Link to="/decks" className={navLinkClass}>
+                  Paklik
+                </Link>
              </>
            )}

@@ -88,26 +88,54 @@ const Navbar = () => {
                </Link>
              </div>
            ) : (
-              <button
-                onClick={handleLogout}
-                className="ml-2 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
-                title="Kijelentkezés"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
+              // Ha be van jelentkezve: mutatunk egy kis lenyíló gombot (ikon), ami tartalmazza a Profil, Statisztikák és Kijelentkezés linkeket
+              <div className="relative">
+                <button
+                  onClick={() => setUserMenuOpen((s) => !s)}
+                  className="ml-2 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
+                  title="Felhasználói menü"
                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
-                  />
-                </svg>
-              </button>
+                  <FaBars className="h-5 w-5" />
+                </button>
+
+                {userMenuOpen && (
+                  <div className="absolute right-0 mt-2 w-44 bg-white/5 backdrop-blur-sm border border-gray-700 rounded-lg shadow-lg overflow-hidden z-40">
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        // navigálás statisztikák
+                        goLanding // fallback, majd ha kell: goReport
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaChartBar className="w-4 h-4" />
+                      <span className="text-sm">Statisztikák</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        // profil
+                        window.location.href = "/profile"
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaUser className="w-4 h-4" />
+                      <span className="text-sm">Profil</span>
+                    </button>
+                    <div className="h-px bg-white/5" />
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        handleLogout()
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaSignOutAlt className="w-4 h-4" />
+                      <span className="text-sm">Kijelentkezés</span>
+                    </button>
+                  </div>
+                )}
+              </div>
            )}
          </div>

@@ -133,12 +161,7 @@ const Navbar = () => {
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 8h16M4 16h16"
-                  />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
                )}
              </svg>
            </button>
@@ -149,24 +172,50 @@ const Navbar = () => {
      {/* Mobile Menu */}
      {menuOpen && (
        <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <button onClick={() => { goLanding(); setMenuOpen(false) }} className={navLinkClass}>Főoldal</button>
-          <button onClick={() => { goAbout(); setMenuOpen(false) }} className={navLinkClass}>Rólunk</button>
-          <button onClick={() => { goContacts(); setMenuOpen(false) }} className={navLinkClass}>Kapcsolat</button>
+          <button
+            onClick={() => {
+              goAbout()
+              setMenuOpen(false)
+            }}
+            className={navLinkClass}
+          >
+            Rólunk
+          </button>
+          <button
+            onClick={() => {
+              goContacts()
+              setMenuOpen(false)
+            }}
+            className={navLinkClass}
+          >
+            Kapcsolat
+          </button>

          {isLoggedIn && (
            <>
-              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>Paklik</Link>
-              <Link to="/report" onClick={() => setMenuOpen(false)} className={navLinkClass}>Statisztikák</Link>
-              <Link to="/profile" onClick={() => setMenuOpen(false)} className={navLinkClass}>Profil</Link>
+              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
+                Paklik
+              </Link>
            </>
          )}

-          <button onClick={() => { goHome(); setMenuOpen(false) }} className={navLinkClassPlay}>Játék</button>
+          <button
+            onClick={() => {
+              goHome()
+              setMenuOpen(false)
+            }}
+            className={navLinkClassPlay}
+          >
+            Játék
+          </button>

          {!isLoggedIn ? (
            <div className="flex flex-col space-y-2">
              <button
-                onClick={() => { goLogin(); setMenuOpen(false) }}
+                onClick={() => {
+                  goLogin()
+                  setMenuOpen(false)
+                }}
                className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
              >
                Bejelentkezés
@@ -190,23 +239,10 @@ const Navbar = () => {
                  handleLogout()
                  setMenuOpen(false)
                }}
-                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
+                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
                title="Kijelentkezés"
              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
-                  />
-                </svg>
+                <FaSignOutAlt className="h-6 w-6" />
              </button>
            </div>
          )}