From 237378c208b26c06405b434d4bbe642b39e4fbbc Mon Sep 17 00:00:00 2001
From: WalkeU <gabooor1982@gmail.com>
Date: Tue, 21 Oct 2025 15:08:28 +0200
Subject: [PATCH] guessName+Fixes

---
 .../src/components/Footer/Footer.jsx          | 24 +++---
 .../src/components/Inputs/InputBoxDark.jsx    |  2 +-
 .../src/components/Landingpage/PlayMenu.jsx   | 76 +++++++++++--------
 .../src/components/Navbar/Navbar.jsx          | 20 +++++
 .../src/hooks/useRequireAuth.jsx              | 10 +--
 SerpentRace_Frontend/src/index.css            |  4 +
 .../src/pages/Game/GameScreen.jsx             |  2 +-
 .../src/pages/Landing/Home.jsx                | 11 ++-
 8 files changed, 95 insertions(+), 54 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/Footer/Footer.jsx b/SerpentRace_Frontend/src/components/Footer/Footer.jsx
index 7d58f102..45c3394c 100644
--- a/SerpentRace_Frontend/src/components/Footer/Footer.jsx
+++ b/SerpentRace_Frontend/src/components/Footer/Footer.jsx
@@ -34,13 +34,13 @@ const Footer = () => {
   return (
     <footer
       ref={footerRef}
-      className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
+      className="relative bg-zinc-900 text-zinc-400 border-t-2 border-zinc-800 mt-auto py-8"
       style={{ transformOrigin: "bottom center" }}
     >
       <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
         {/* Logó */}
         <div className="flex flex-col items-center">
-          <a href="/" className="hover:scale-105 hover:brightness-125">
+          <a href="/" className="hover:scale-105 hover:brightness-110">
             <Logo size={100} />
           </a>
           <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
@@ -48,30 +48,30 @@ const Footer = () => {
 
         {/* Oldalak */}
         <div className="flex flex-col gap-1">
-          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
+          <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Oldalak
           </span>
-          <a href="/" className="hover:underline hover:text-green-400">
+          <a href="/" className="hover:underline hover:text-green-500">
             Főoldal
           </a>
-          <a href="/about" className="hover:underline hover:text-green-400">
+          <a href="/about" className="hover:underline hover:text-green-500">
             Rólunk
           </a>
-          <a href="/contact" className="hover:underline hover:text-green-400">
+          <a href="/contact" className="hover:underline hover:text-green-500">
             Kapcsolat
           </a>
         </div>
 
         {/* Közösség */}
         <div className="flex flex-col gap-1">
-          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
+          <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Közösség
           </span>
           <a
             href="https://discord.gg/"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400"
+            className="hover:underline hover:text-green-500"
           >
             Discord
           </a>
@@ -79,7 +79,7 @@ const Footer = () => {
             href="https://github.com/"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400"
+            className="hover:underline hover:text-green-500"
           >
             GitHub
           </a>
@@ -87,11 +87,11 @@ const Footer = () => {
 
         {/* Elérhetőség */}
         <div className="flex flex-col gap-1">
-          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
+          <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Elérhetőség
           </span>
-          <span className="opacity-80">Email: info@serpentrace.hu</span>
-          <span className="opacity-80">Telefon: +36 30 123 4567</span>
+          <span className="opacity-85">Email: info@serpentrace.hu</span>
+          <span className="opacity-85">Telefon: +36 30 123 4567</span>
         </div>
       </div>
 
diff --git a/SerpentRace_Frontend/src/components/Inputs/InputBoxDark.jsx b/SerpentRace_Frontend/src/components/Inputs/InputBoxDark.jsx
index 4aa564f3..5276eb83 100644
--- a/SerpentRace_Frontend/src/components/Inputs/InputBoxDark.jsx
+++ b/SerpentRace_Frontend/src/components/Inputs/InputBoxDark.jsx
@@ -7,7 +7,7 @@ export default function InputBox({ type, placeholder, value, onChange, width })
   return (
     <input
       type={type}
-      className={`${widthClass} py-3 px-4 border border-battleship-gray rounded-lg focus:border-mint focus:outline-none text-text placeholder-text-muted bg-background font-semibold text-lg`}
+      className={`${widthClass} py-3 px-4 border border-battleship-gray rounded-lg focus:border-mint-lighter focus:outline-none text-text placeholder-text-muted bg-background font-semibold text-lg`}
       placeholder={placeholder}
       value={value}
       onChange={onChange}
diff --git a/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx b/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
index d055a31b..72cbe2eb 100644
--- a/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
+++ b/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
@@ -4,9 +4,11 @@ import logoImg from "../../assets/pictures/Logo.png" // <-- EZT ADD HOZZÁ
 import ButtonDark from "../Buttons/ButtonDark.jsx"
 import InputBoxDark from "../Inputs/InputBoxDark.jsx"
 
-const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
+const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
   const [joinCode, setJoinCode] = useState("")
   const [error, setError] = useState("")
+  const [guestName, setGuestName] = useState("")
+  const [guestError, setGuestError] = useState("")
 
   // gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
   const username = user?.name ?? null
@@ -24,7 +26,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
     onCreateGame()
   }
 
-  // egyszerű segéd az inicialishez
+  // egyszerű segéd a kezdobetűk kinyerésére
   const initials = username
     ? username
         .split(" ")
@@ -64,31 +66,40 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
           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>
+            {username ? (
+              <div className="flex items-center gap-3">
+                <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-sm text-gray-300">Nincs bejelentkezve</div>
-              )}
-            </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="w-full">
+                <div className="font-semibold mb-3 text-text">Nincs bejelentkezve — játssz vendégként:</div>
+                <InputBoxDark
+                  type="text"
+                  placeholder="Nickname..."
+                  value={guestName}
+                  onChange={(e) => {
+                    setGuestName(e.target.value)
+                    setGuestError("")
+                  }}
+                  width="w-full"
+                />
+                {guestError && <div className="text-xs mt-2 text-error">{guestError}</div>}
+              </div>
+            )}
           </div>
 
           <div>
-            <h2 className="text-xl font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
+            <h2 className="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"
@@ -103,15 +114,16 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
               <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
             </div>
           </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>
+          {username ? (
+            <div className="border-t border-white/10 pt-4">
+              {username && (
+                <div>
+                  <h3 className="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>
+          ) : null}
         </div>
       </div>
     </section>
diff --git a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
index 4fd5c9b9..c5f266b4 100644
--- a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+++ b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
@@ -3,6 +3,8 @@ import Logo from "../../assets/pictures/Logo"
 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 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)
@@ -55,6 +57,11 @@ const Navbar = () => {
             <Link to="/companies" className={navLinkClass}>
               Contact
             </Link>
+            {!isLoggedIn && (
+              <Link to="/home" className={navLinkClassPlay}>
+                Play
+              </Link>
+            )}
             {isLoggedIn && (
               <button
                 onClick={handleLogout}
@@ -129,6 +136,19 @@ const Navbar = () => {
           <Link to="/companies" className={navLinkClass}>
             Contact
           </Link>
+          {!isLoggedIn && (
+            <div className="px-2">
+              <button
+                onClick={() => {
+                  setMenuOpen(false)
+                  navigate("/home")
+                }}
+                className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all"
+              >
+                Játék
+              </button>
+            </div>
+          )}
           {isLoggedIn && (
             <div className="flex justify-end px-2 pb-2">
               <button
diff --git a/SerpentRace_Frontend/src/hooks/useRequireAuth.jsx b/SerpentRace_Frontend/src/hooks/useRequireAuth.jsx
index 3a2d581d..8fd4c9b2 100644
--- a/SerpentRace_Frontend/src/hooks/useRequireAuth.jsx
+++ b/SerpentRace_Frontend/src/hooks/useRequireAuth.jsx
@@ -20,8 +20,8 @@ export function isAuthenticated(key = "username") {
   }
 }
 
-// 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" } = {}) {
+// Default hook: ad vissza egy [value, setValue] párt, szinkronizálja localStorage-t és opcionálisan átirányít, ha nincs érték
+export default function useRequireAuth({ key = "username", redirectTo = "/login", redirect = true } = {}) {
   const navigate = useNavigate()
   const [value, setValue] = useState(() => {
     try {
@@ -31,12 +31,12 @@ export default function useRequireAuth({ key = "username", redirectTo = "/login"
     }
   })
 
-  // Ha nincs érték, átirányítjuk (komponens mount-oláskor)
+  // Ha nincs érték és redirect engedélyezve van, átirányítjuk (komponens mount-oláskor)
   useEffect(() => {
-    if (!value) {
+    if (!value && redirect) {
       navigate(redirectTo)
     }
-  }, [navigate, value, redirectTo])
+  }, [navigate, value, redirectTo, redirect])
 
   // Szinkronizáljuk a localStorage-t amikor a state változik
   useEffect(() => {
diff --git a/SerpentRace_Frontend/src/index.css b/SerpentRace_Frontend/src/index.css
index c62959a3..a73bc306 100644
--- a/SerpentRace_Frontend/src/index.css
+++ b/SerpentRace_Frontend/src/index.css
@@ -8,9 +8,13 @@
   --color-eerie-black: #181d23;
 
   --color-mint: #15803d;
+
   --color-mint-dark: #136636;
   --color-mint-darker: #11522b;
 
+  --color-mint-light: #16a34a;
+  --color-mint-lighter: #22c55e;
+
   /* Gombok */
   --color-button-primary: #16a34a;
   --color-button-primary-hover: #15803d;
diff --git a/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx b/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx
index bf9bfeef..30038663 100644
--- a/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx
+++ b/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx
@@ -189,7 +189,7 @@ const GameScreen = () => {
               {sortedPlayers.map((player, index) => (
                 <div
                   key={player.id}
-                  className="flex items-center mb-3 p-2 bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors"
+                  className="flex items-center mb-3 p-2 bg-gray-900 rounded-lg hover:bg-gray-700 transition-colors"
                 >
                   <div
                     className={`w-8 h-8 ${player.color} rounded-full mr-3 flex items-center justify-center text-white text-sm font-bold shadow-md`}
diff --git a/SerpentRace_Frontend/src/pages/Landing/Home.jsx b/SerpentRace_Frontend/src/pages/Landing/Home.jsx
index e999d64e..5dc095bc 100644
--- a/SerpentRace_Frontend/src/pages/Landing/Home.jsx
+++ b/SerpentRace_Frontend/src/pages/Landing/Home.jsx
@@ -10,7 +10,7 @@ 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()
+  const [user, setUser] = useRequireAuth({ redirect: false }) // no redirect on unauthenticated visitors
 
   // Dummy callbackok és user példa
   const handleJoinGame = (code) => {
@@ -31,8 +31,13 @@ export default function Home() {
       <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={userObj} />
+      <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] flex-col items-center justify-center">
+        <PlayMenu
+          onJoinGame={handleJoinGame}
+          onCreateGame={handleCreateGame}
+          user={userObj}
+          setUser={setUser}
+        />
         {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
       </main>
       <Footer />
-- 
2.52.0