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
Showing only changes of commit 237378c208 - Show all commits
SerpentRace_Frontend/src/components/Footer/Footer.jsx
+12 -12
View File
@@ -34,13 +34,13 @@ const Footer = () => {
return ( return (
<footer <footer
ref={footerRef} 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" }} style={{ transformOrigin: "bottom center" }}
> >
<div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4"> <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
{/* Logó */} {/* Logó */}
<div className="flex flex-col items-center"> <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} /> <Logo size={100} />
</a> </a>
<span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span> <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
@@ -48,30 +48,30 @@ const Footer = () => {
{/* Oldalak */} {/* Oldalak */}
<div className="flex flex-col gap-1"> <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 Oldalak
</span> </span>
<a href="/" className="hover:underline hover:text-green-400"> <a href="/" className="hover:underline hover:text-green-500">
Főoldal Főoldal
</a> </a>
<a href="/about" className="hover:underline hover:text-green-400"> <a href="/about" className="hover:underline hover:text-green-500">
Rólunk Rólunk
</a> </a>
<a href="/contact" className="hover:underline hover:text-green-400"> <a href="/contact" className="hover:underline hover:text-green-500">
Kapcsolat Kapcsolat
</a> </a>
</div> </div>
{/* Közösség */} {/* Közösség */}
<div className="flex flex-col gap-1"> <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 Közösség
</span> </span>
<a <a
href="https://discord.gg/" href="https://discord.gg/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="hover:underline hover:text-green-400" className="hover:underline hover:text-green-500"
> >
Discord Discord
</a> </a>
@@ -79,7 +79,7 @@ const Footer = () => {
href="https://github.com/" href="https://github.com/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="hover:underline hover:text-green-400" className="hover:underline hover:text-green-500"
> >
GitHub GitHub
</a> </a>
@@ -87,11 +87,11 @@ const Footer = () => {
{/* Elérhetőség */} {/* Elérhetőség */}
<div className="flex flex-col gap-1"> <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 Elérhetőség
</span> </span>
<span className="opacity-80">Email: info@serpentrace.hu</span> <span className="opacity-85">Email: info@serpentrace.hu</span>
<span className="opacity-80">Telefon: +36 30 123 4567</span> <span className="opacity-85">Telefon: +36 30 123 4567</span>
</div> </div>
</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 ( return (
<input <input
type={type} 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} placeholder={placeholder}
value={value} value={value}
onChange={onChange} 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 ButtonDark from "../Buttons/ButtonDark.jsx"
import InputBoxDark from "../Inputs/InputBoxDark.jsx" import InputBoxDark from "../Inputs/InputBoxDark.jsx"
const PlayMenu = ({ onJoinGame, onCreateGame, user }) => { const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
const [joinCode, setJoinCode] = useState("") const [joinCode, setJoinCode] = useState("")
const [error, setError] = 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) // gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
const username = user?.name ?? null const username = user?.name ?? null
@@ -24,7 +26,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
onCreateGame() onCreateGame()
} }
// egyszerű segéd az inicialishez // egyszerű segéd a kezdobetűk kinyerésére
const initials = username const initials = username
? username ? username
.split(" ") .split(" ")
@@ -64,31 +66,40 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }} style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> {username ? (
{username ? ( <div className="flex items-center gap-3">
<div className="flex items-center gap-3"> <div
{/* opcionális kis info ikon helye, ha később kell */} className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
<div style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
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}
>
{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>
) : ( <div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
<div className="text-sm text-gray-300">Nincs bejelentkezve</div> <span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
)} {username}
</div> </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>
<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" : ""}`}> <div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
<InputBoxDark <InputBoxDark
type="text" type="text"
@@ -103,15 +114,16 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
<ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" /> <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
</div> </div>
</div> </div>
{username ? (
<div className="border-t border-white/10 pt-4"> <div className="border-t border-white/10 pt-4">
{username && ( {username && (
<div> <div>
<h3 className="text-lg font-semibold mb-3 text-text">Új játék létrehozása</h3> <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" /> <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
</div> </div>
)} )}
</div> </div>
) : null}
</div> </div>
</div> </div>
</section> </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" 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 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 Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false)
@@ -55,6 +57,11 @@ const Navbar = () => {
<Link to="/companies" className={navLinkClass}> <Link to="/companies" className={navLinkClass}>
Contact Contact
</Link> </Link>
{!isLoggedIn && (
<Link to="/home" className={navLinkClassPlay}>
Play
</Link>
)}
{isLoggedIn && ( {isLoggedIn && (
<button <button
onClick={handleLogout} onClick={handleLogout}
@@ -129,6 +136,19 @@ const Navbar = () => {
<Link to="/companies" className={navLinkClass}> <Link to="/companies" className={navLinkClass}>
Contact Contact
</Link> </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 && ( {isLoggedIn && (
<div className="flex justify-end px-2 pb-2"> <div className="flex justify-end px-2 pb-2">
<button <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 // 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" } = {}) { export default function useRequireAuth({ key = "username", redirectTo = "/login", redirect = true } = {}) {
const navigate = useNavigate() const navigate = useNavigate()
const [value, setValue] = useState(() => { const [value, setValue] = useState(() => {
try { 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(() => { useEffect(() => {
if (!value) { if (!value && redirect) {
navigate(redirectTo) navigate(redirectTo)
} }
}, [navigate, value, redirectTo]) }, [navigate, value, redirectTo, redirect])
// Szinkronizáljuk a localStorage-t amikor a state változik // Szinkronizáljuk a localStorage-t amikor a state változik
useEffect(() => { useEffect(() => {
SerpentRace_Frontend/src/index.css
+4
View File
@@ -8,9 +8,13 @@
--color-eerie-black: #181d23; --color-eerie-black: #181d23;
--color-mint: #15803d; --color-mint: #15803d;
--color-mint-dark: #136636; --color-mint-dark: #136636;
--color-mint-darker: #11522b; --color-mint-darker: #11522b;
--color-mint-light: #16a34a;
--color-mint-lighter: #22c55e;
/* Gombok */ /* Gombok */
--color-button-primary: #16a34a; --color-button-primary: #16a34a;
--color-button-primary-hover: #15803d; --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) => ( {sortedPlayers.map((player, index) => (
<div <div
key={player.id} 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 <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`} 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() { export default function Home() {
// a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert // 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 // Dummy callbackok és user példa
const handleJoinGame = (code) => { const handleJoinGame = (code) => {
@@ -31,8 +31,13 @@ export default function Home() {
<div className="fixed top-0 left-0 right-0 z-30"> <div className="fixed top-0 left-0 right-0 z-30">
<Navbar /> <Navbar />
</div> </div>
<main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]"> <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} /> <PlayMenu
onJoinGame={handleJoinGame}
onCreateGame={handleCreateGame}
user={userObj}
setUser={setUser}
/>
{/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */} {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
</main> </main>
<Footer /> <Footer />