Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

guessName+Fixes #58

Merged
Walke merged 1 commits from frontendFix+Guess into main 2025-10-21 15:09:27 +02:00
Conversation 0 Commits 1 Files Changed 8
+95 -54
8 changed files with 95 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Footer/Footer.jsx
+12 -12
View File
@@ -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>
SerpentRace_Frontend/src/components/Inputs/InputBoxDark.jsx
+1 -1
View File
@@ -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}
SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
+44 -32
View File
@@ -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>
SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+20
View File
@@ -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
SerpentRace_Frontend/src/hooks/useRequireAuth.jsx
+5 -5
View File
@@ -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(() => {
SerpentRace_Frontend/src/index.css
+4
View File
@@ -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;
SerpentRace_Frontend/src/pages/Game/GameScreen.jsx
+1 -1
View File
@@ -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`}
SerpentRace_Frontend/src/pages/Landing/Home.jsx
+8 -3
View File
@@ -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 />