guessName+Fixes
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user