1 Commits

Author SHA1 Message Date
Walke d23328763b footer fix meg landingon 2025-10-15 15:24:06 +02:00
24 changed files with 204 additions and 479 deletions
-7
View File
@@ -32,10 +32,3 @@ MINIO_USE_SSL=false
MAX_SPECIAL_FIELDS_PERCENTAGE=67 MAX_SPECIAL_FIELDS_PERCENTAGE=67
MAX_GENERATION_TIME_SECONDS=20 MAX_GENERATION_TIME_SECONDS=20
GENERATION_ERROR_TOLERANCE=15 GENERATION_ERROR_TOLERANCE=15
# EMAIL SERVICE CONFIGURATION
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@domain.com
EMAIL_PASS=your_email_password
EMAIL_FROM=noreply@serpentrace.com
+1 -1
View File
@@ -1,5 +1,5 @@
/* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.483\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.483/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */ /* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.475\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.475/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
/*! /*!
* /** * /**
+1 -1
View File
@@ -1,5 +1,5 @@
#!/usr/bin/env node #!/usr/bin/env node
/* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.483\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.483/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */ /* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.475\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.475/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
/** /**
@@ -23,9 +23,9 @@ async function isTokenBlacklisted(token: string): Promise<boolean> {
/** /**
* Extract token from request (cookie or Authorization header) * Extract token from request (cookie or Authorization header)
*/ */
function extractToken(req: Request, type: 'auth' | 'refresh'): string | null { function extractToken(req: Request): string | null {
// First try to get token from cookie // First try to get token from cookie
const cookieToken = req.cookies[`${type}_token`]; const cookieToken = req.cookies['auth_token'];
if (cookieToken) { if (cookieToken) {
return cookieToken; return cookieToken;
} }
@@ -42,9 +42,8 @@ function extractToken(req: Request, type: 'auth' | 'refresh'): string | null {
export async function authRequired(req: Request, res: Response, next: NextFunction) { export async function authRequired(req: Request, res: Response, next: NextFunction) {
try { try {
// Extract token from request // Extract token from request
const token = extractToken(req, "auth"); const token = extractToken(req);
const refreshToken = extractToken(req, "refresh"); if (!token) {
if (!token || !refreshToken) {
logAuth('Authentication failed - No token provided', undefined, { logAuth('Authentication failed - No token provided', undefined, {
ip: req.ip, ip: req.ip,
userAgent: req.get ? req.get('User-Agent') : 'unknown', userAgent: req.get ? req.get('User-Agent') : 'unknown',
@@ -96,9 +95,8 @@ export async function authRequired(req: Request, res: Response, next: NextFuncti
export async function adminRequired(req: Request, res: Response, next: NextFunction) { export async function adminRequired(req: Request, res: Response, next: NextFunction) {
try { try {
// Extract token from request // Extract token from request
const token = extractToken(req, "auth"); const token = extractToken(req);
const refreshToken = extractToken(req, "refresh"); if (!token) {
if (!token || !refreshToken) {
logWarning('Admin access denied - No token provided', { logWarning('Admin access denied - No token provided', {
ip: req.ip, ip: req.ip,
path: req.path path: req.path
@@ -281,7 +281,9 @@ export class JWTService {
} else { } else {
// For cookie auth, create token pair and set cookies // For cookie auth, create token pair and set cookies
const newTokenPair = this.create(freshPayload, res); const newTokenPair = this.create(freshPayload, res);
this.setTokenCookies(res, newTokenPair); res.setHeader('X-New-Access-Token', newTokenPair.accessToken);
res.setHeader('X-New-Refresh-Token', newTokenPair.refreshToken);
res.setHeader('X-Token-Refreshed', 'true');
} }
return true; return true;
+1 -1
View File
@@ -42,7 +42,7 @@ EMAIL_PORT=465
EMAIL_SECURE=true EMAIL_SECURE=true
EMAIL_USER=noreply@serpentrace.hu EMAIL_USER=noreply@serpentrace.hu
EMAIL_PASS=ZUx720ece&Cin&F{ EMAIL_PASS=ZUx720ece&Cin&F{
EMAIL_FROM=noreply@serpentrace.hu EMAIL_FROM=noreply@serpentrace.com
# CHAT SYSTEM CONFIGURATION # CHAT SYSTEM CONFIGURATION
CHAT_INACTIVITY_TIMEOUT_MINUTES=30 CHAT_INACTIVITY_TIMEOUT_MINUTES=30
-2
View File
@@ -15,7 +15,6 @@ import About from "./pages/About/About"
import ScrollToTop from "./components/ScrollToTop" import ScrollToTop from "./components/ScrollToTop"
import GameScreen from "./pages/Game/GameScreen" import GameScreen from "./pages/Game/GameScreen"
import Reports from "./pages/Report/Reports" import Reports from "./pages/Report/Reports"
import Lobby from "./pages/Lobby/Lobby"
function App() { function App() {
const [isMobile, setIsMobile] = useState(false) const [isMobile, setIsMobile] = useState(false)
@@ -47,7 +46,6 @@ function App() {
<Router> <Router>
<Routes> <Routes>
<Route path="/about" element={<About />} /> <Route path="/about" element={<About />} />
<Route path="/lobby" element={<Lobby />} />
<Route path="/register" element={<AuthRegister />} /> <Route path="/register" element={<AuthRegister />} />
<Route path="/login" element={<AuthLogin />} /> <Route path="/login" element={<AuthLogin />} />
<Route path="/verify-email" element={<EmailVerification />} /> <Route path="/verify-email" element={<EmailVerification />} />
-15
View File
@@ -1,15 +0,0 @@
import { apiClient } from './userApi'
// Create a new deck in the backend
export const createDeck = async (deck) => {
try {
const response = await apiClient.post('/decks', deck)
return response.data
} catch (err) {
throw err
}
}
export default {
createDeck
}
+34 -16
View File
@@ -1,26 +1,54 @@
import axios from "axios" import axios from "axios"
export const API_CONFIG = { export const API_CONFIG = {
baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : '') + "/api", baseURL: import.meta.env.VITE_API_URL + "/api",
wsURL: "http://localhost:3000", wsURL: "http://localhost:3000",
timeout: 10000, timeout: 10000,
retryAttempts: 3, retryAttempts: 3,
} }
export const apiClient = axios.create({ const apiClient = axios.create({
baseURL: API_CONFIG.baseURL, baseURL: API_CONFIG.baseURL,
timeout: API_CONFIG.timeout, timeout: API_CONFIG.timeout,
withCredentials: true, // Important for cookie-based auth withCredentials: true, // Important for cookie-based auth
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
},
})
// Add request interceptor for debugging
apiClient.interceptors.request.use(
(config) => {
console.log("Request URL:", config.url)
console.log("Request headers:", config.headers)
console.log("Current cookies:", document.cookie)
return config
},
(error) => {
return Promise.reject(error)
} }
}); )
// Add response interceptor for debugging cookies
apiClient.interceptors.response.use(
(response) => {
console.log("Response status:", response.status)
console.log("Response headers:", response.headers)
console.log("Set-Cookie headers:", response.headers["set-cookie"])
console.log("Cookies after response:", document.cookie)
return response
},
(error) => {
console.error("API Error:", error.response?.data || error.message)
return Promise.reject(error)
}
)
//login //login
export const login = async (username, password) => { export const login = async (username, password) => {
try { try {
const response = await apiClient.post("/users/login", { username, password }) const response = await apiClient.post("/users/login", { username, password })
return response return response.data
} catch (error) { } catch (error) {
throw error throw error
} }
@@ -30,7 +58,7 @@ export const login = async (username, password) => {
export const register = async (username, email, password, fname, lname, phone) => { export const register = async (username, email, password, fname, lname, phone) => {
try { try {
const response = await apiClient.post("/users/create", { username, email, password, fname, lname, phone }) const response = await apiClient.post("/users/create", { username, email, password, fname, lname, phone })
return response return { ...response.data, status: response.status }
} catch (error) { } catch (error) {
throw error throw error
} }
@@ -45,13 +73,3 @@ export const verifyEmail = async (token) => {
throw error throw error
} }
} }
// Get current user's game statistics
export const getUserStats = async () => {
try {
const response = await apiClient.get("/users/me/stats")
return response.data
} catch (error) {
throw error
}
}
@@ -1,69 +1,54 @@
import React, { useEffect, useRef, useState } from "react" import React from "react"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import Logo from "../../assets/pictures/Logo" import Logo from "../../assets/pictures/Logo"
const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}></span> const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}></span>
const Footer = () => { const Footer = () => {
const [isVisible, setIsVisible] = useState(false)
const footerRef = useRef(null)
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting)
},
{ threshold: 0.3 }
)
if (footerRef.current) {
observer.observe(footerRef.current)
}
return () => {
if (footerRef.current) {
observer.unobserve(footerRef.current)
}
}
}, [])
const scrollToTop = () => { const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" }) window.scrollTo({ top: 0, behavior: "smooth" })
} }
return ( return (
<footer <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-white border-t-2 border-zinc-800 mt-auto py-8"
style={{ transformOrigin: "bottom center" }} style={{ transformOrigin: "bottom center" }}
> >
<style>
{`
.footer-animate {
transition: opacity 0.8s ease, transform 0.8s ease;
}
`}
</style>
<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 footer-animate">
<a href="/" className="hover:scale-105 hover:brightness-125"> <a href="/" className="transition-transform duration-500 hover:scale-105 hover:brightness-125">
<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>
</div> </div>
{/* Oldalak */} {/* Oldalak */}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 footer-animate">
<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-400 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-400 transition">
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-400 transition">
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-400 transition">
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 footer-animate">
<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-400 underline underline-offset-4 mb-2 drop-shadow-sm">
Közösség Közösség
</span> </span>
@@ -71,7 +56,7 @@ const Footer = () => {
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-400 transition"
> >
Discord Discord
</a> </a>
@@ -79,14 +64,14 @@ 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-400 transition"
> >
GitHub GitHub
</a> </a>
</div> </div>
{/* Elérhetőség */} {/* Elérhetőség */}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 footer-animate">
<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-400 underline underline-offset-4 mb-2 drop-shadow-sm">
Elérhetőség Elérhetőség
</span> </span>
@@ -95,20 +80,18 @@ const Footer = () => {
</div> </div>
</div> </div>
<div className="text-center mt-8 text-sm opacity-70"> <div className="text-center mt-8 text-sm opacity-70 footer-animate">
© {new Date().getFullYear()} SerpentRace. Minden jog fenntartva. © {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
</div> </div>
{/* Scroll to top */} {/* Scroll to top */}
{isVisible && (
<button <button
onClick={scrollToTop} onClick={scrollToTop}
className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110" className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition transform hover:scale-110"
aria-label="Ugrás az oldal tetejére" aria-label="Ugrás az oldal tetejére"
> >
<ArrowUpIcon /> <ArrowUpIcon />
</button> </button>
)}
</footer> </footer>
) )
} }
@@ -107,9 +107,9 @@ const DeckManager = () => {
return ( return (
<div className="w-full flex flex-col bg-[color:var(--color-background)]"> <div className="w-full flex flex-col bg-[color:var(--color-background)]">
<div className="w-full max-w-[1200px] mx-auto px-4 py-10"> <div className="w-full max-w-6xl mx-auto px-4 py-10">
{/* Filters */} {/* Filters */}
<div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg"> <div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
<div className="flex gap-2 items-center w-full md:w-auto"> <div className="flex gap-2 items-center w-full md:w-auto">
<SearchBox <SearchBox
value={search} value={search}
@@ -249,7 +249,7 @@ const DeckManager = () => {
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
{/* Create New Deck (Mockup) */} {/* Create New Deck (Mockup) */}
<div <div
onClick={() => navigate("/deck-creator")} onClick={() => navigate('/deck-creator')}
className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg" className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
> >
<FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" /> <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
@@ -296,7 +296,12 @@ const DeckManager = () => {
</div> </div>
{/* Deck Info Popup */} {/* Deck Info Popup */}
{selectedDeck && <DeckInfoPopUp deck={selectedDeck} onClose={() => setSelectedDeck(null)} />} {selectedDeck && (
<DeckInfoPopUp
deck={selectedDeck}
onClose={() => setSelectedDeck(null)}
/>
)}
</div> </div>
) )
} }
@@ -6,7 +6,13 @@ import ButtonGreen from "../Buttons/ButtonGreen.jsx"
import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa" import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
import { motion } from "framer-motion" import { motion } from "framer-motion"
const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => { import { useNavigate } from "react-router-dom"
const LandingPage = ({ onNavigateToPlay }) => {
const navigate = useNavigate()
const handleNavigateToAuth = () => {
navigate("/register")
}
return ( return (
<div className="w-full"> <div className="w-full">
{/* Hero Section */} {/* Hero Section */}
@@ -55,8 +61,8 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 1 }} transition={{ duration: 0.7, delay: 1 }}
> >
<ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" /> <ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
<ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" /> <ButtonGreen text="Regisztráció" onClick={handleNavigateToAuth} width="w-60" />
</motion.div> </motion.div>
</div> </div>
</motion.section> </motion.section>
@@ -165,7 +171,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
<ButtonGreen <ButtonGreen
text="Kapcsolatfelvétel" text="Kapcsolatfelvétel"
onClick={onNavigateToAuth} onClick={handleNavigateToAuth}
className="px-12 py-4 text-xl font-bold" className="px-12 py-4 text-xl font-bold"
/> />
</motion.div> </motion.div>
@@ -8,9 +8,6 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
const [joinCode, setJoinCode] = useState("") const [joinCode, setJoinCode] = useState("")
const [error, setError] = useState("") const [error, setError] = useState("")
// gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
const username = user?.name ?? null
const handleJoin = () => { const handleJoin = () => {
if (!joinCode.trim()) { if (!joinCode.trim()) {
setError("Add meg a játék kódját!") setError("Add meg a játék kódját!")
@@ -24,19 +21,9 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
onCreateGame() onCreateGame()
} }
// egyszerű segéd az inicialishez
const initials = username
? username
.split(" ")
.map((s) => s[0])
.join("")
.slice(0, 2)
.toUpperCase()
: ""
return ( return (
<section <section
className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden" className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
style={{ style={{
background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)", background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
}} }}
@@ -45,10 +32,10 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
<div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10"> <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
<LogoCard <LogoCard
imageSrc={logoImg} imageSrc={logoImg}
containerHeight="420px" containerHeight="450px"
containerWidth="420px" containerWidth="450px"
imageHeight="420px" imageHeight="450px"
imageWidth="420px" imageWidth="450px"
rotateAmplitude={7} rotateAmplitude={7}
scaleOnHover={1.03} scaleOnHover={1.03}
showMobileWarning={false} showMobileWarning={false}
@@ -56,40 +43,12 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
displayOverlayContent={false} displayOverlayContent={false}
/> />
</div> </div>
{/* Jobb oldali panel */} {/* Jobb oldali panel */}
<div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8"> <div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
<div <div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
>
<div className="flex items-center justify-between">
<div> <div>
{username ? ( <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
<div className="flex items-center gap-3"> <div className={`${error ? "border border-error rounded-lg" : ""}`}>
{/* 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>
</div>
) : (
<div className="text-sm text-gray-300">Nincs bejelentkezve</div>
)}
</div>
</div>
<div>
<h2 className="text-xl font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
<div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
<InputBoxDark <InputBoxDark
type="text" type="text"
placeholder="Játék kódja" placeholder="Játék kódja"
@@ -98,22 +57,19 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
width="w-full" width="w-full"
/> />
</div> </div>
{error && <div className="text-xs mt-2 text-error">{error}</div>} {error && <div className="text-xs mt-1 text-error">{error}</div>}
<div className="mt-4"> <div className="mt-4">
<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>
{user && (
<div className="border-t border-white/10 pt-4">
{username && (
<div> <div>
<h3 className="text-lg font-semibold mb-3 text-text">Új játék létrehozása</h3> <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
<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>
</div> </div>
</div>
</section> </section>
) )
} }
@@ -1,83 +1,41 @@
import React, { useState } from "react" import React, { useState } from "react"
import Logo from "../../assets/pictures/Logo" import Logo from "../../assets/pictures/Logo"
import { Link, useNavigate } from "react-router-dom" import About from "../../pages/About/About"
import Home from "../../pages/Landing/Home"
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 Navbar = () => { const Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false)
const navigate = useNavigate()
// Check if authLevel and username exist in localStorage
const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
// Logout function: töröljük az adatokat és navigálunk a /login-ra (SPA, nincs reload)
const handleLogout = () => {
localStorage.removeItem("authLevel")
localStorage.removeItem("username")
navigate("/login")
}
return ( return (
<nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg"> <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-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center"> <div className="flex justify-between h-16 items-center">
{/* Logo */} {/* Logo */}
<div className="flex-shrink-0 flex items-center gap-2"> <div className="flex-shrink-0 flex items-center gap-2">
<Link to="/" className="flex items-center mt-1 h-9"> <a href="/" className="flex items-center mt-1 h-9">
<Logo size={36} /> <Logo size={36} />
</Link> </a>
<Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight"> <a href="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
SerpentRace SerpentRace
</Link> </a>
</div> </div>
{/* Desktop Menu */} {/* Desktop Menu */}
<div className="hidden md:flex space-x-8 items-center"> <div className="hidden md:flex space-x-8">
{isLoggedIn ? ( <a href="/home" className={navLinkClass}>
<>
<Link to="/home" className={navLinkClass}>
Home Home
</Link> </a>
<Link to="/decks" className={navLinkClass}> <a href="/report" className={navLinkClass}>
Decks
</Link>
<Link to="/report" className={navLinkClass}>
Stats Stats
</Link> </a>
</> <a href="/about" className={navLinkClass}>
) : (
<Link to="/" className={navLinkClass}>
Home
</Link>
)}
<Link to="/about" className={navLinkClass}>
About About
</Link> </a>
<Link to="/companies" className={navLinkClass}> <a href="/companies" className={navLinkClass}>
Contact Contact
</Link> </a>
{isLoggedIn && (
<button
onClick={handleLogout}
className="ml-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
title="Logout"
>
{/* Simple logout icon */}
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
/>
</svg>
</button>
)}
</div> </div>
{/* Mobile Hamburger */} {/* Mobile Hamburger */}
<div className="md:hidden flex items-center"> <div className="md:hidden flex items-center">
@@ -111,48 +69,18 @@ const Navbar = () => {
{/* Mobile Menu */} {/* Mobile Menu */}
{menuOpen && ( {menuOpen && (
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1"> <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
{isLoggedIn ? ( <a href="#" className={navLinkClass}>
<Link to="/home" className={navLinkClass}>
Home Home
</Link> </a>
) : ( <a href="#" className={navLinkClass}>
<Link to="/" className={navLinkClass}>
Home
</Link>
)}
<Link to="/leaderboard" className={navLinkClass}>
Leaderboard Leaderboard
</Link> </a>
<Link to="/about" className={navLinkClass}> <a href="#" className={navLinkClass}>
About About
</Link> </a>
<Link to="/companies" className={navLinkClass}> <a href="#" className={navLinkClass}>
Contact Contact
</Link> </a>
{isLoggedIn && (
<div className="flex justify-end px-2 pb-2">
<button
onClick={handleLogout}
className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
title="Logout"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
/>
</svg>
</button>
</div>
)}
</div> </div>
)} )}
</nav> </nav>
@@ -1,43 +0,0 @@
import { useState, useEffect } from "react"
import { useNavigate } from "react-router-dom"
export function requireAuthSync({ key = "username", redirectTo = "/login", replace = true } = {}) {
const value = localStorage.getItem(key)
if (!value) {
if (replace) window.location.replace(redirectTo)
else window.location.assign(redirectTo)
return false
}
return true
}
// 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" } = {}) {
const navigate = useNavigate()
const [value, setValue] = useState(() => {
try {
return localStorage.getItem(key)
} catch {
return null
}
})
// Ha nincs érték, átirányítjuk (komponens mount-oláskor)
useEffect(() => {
if (!value) {
navigate(redirectTo)
}
}, [navigate, value, redirectTo])
// Szinkronizáljuk a localStorage-t amikor a state változik
useEffect(() => {
try {
if (value == null) localStorage.removeItem(key)
else localStorage.setItem(key, value)
} catch {
// fail silently
}
}, [key, value])
return [value, setValue]
}
@@ -5,7 +5,7 @@ import InputBox from "../../components/Inputs/InputBox"
import Button from "../../components/Buttons/Button" import Button from "../../components/Buttons/Button"
import { motion } from "framer-motion" import { motion } from "framer-motion"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { useLocation, useNavigate } from "react-router-dom" import { useLocation } from "react-router-dom"
import { login } from "../../api/userApi" import { login } from "../../api/userApi"
export default function LoginForm() { export default function LoginForm() {
@@ -13,9 +13,7 @@ export default function LoginForm() {
const [password, setPassword] = useState("") const [password, setPassword] = useState("")
const [error, setError] = useState("") const [error, setError] = useState("")
const location = useLocation() const location = useLocation()
const navigate = useNavigate()
const [showSuccess, setShowSuccess] = useState(false) const [showSuccess, setShowSuccess] = useState(false)
const [showErrorPopup, setShowErrorPopup] = useState(false)
useEffect(() => { useEffect(() => {
if (location.state && location.state.success) { if (location.state && location.state.success) {
@@ -31,40 +29,22 @@ export default function LoginForm() {
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault() e.preventDefault()
setError("") setError("")
setShowErrorPopup(false)
if (!email || !password) { if (!email || !password) {
setError("Minden mező kitöltése kötelező.") setError("Minden mező kitöltése kötelező.")
setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000)
return return
} }
if (!validateEmail(email)) { if (!validateEmail(email)) {
setError("Hibás email formátum.") setError("Hibás email formátum.")
setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000)
return return
} }
// Backend API // Backend API
login(email, password) login(email, password)
.then((response) => { .then((data) => {
console.log(response) console.log(data)
// Csak a response.status-t ellenőrizd! console.log("Bejelentkezés:", { email, password })
if (response && response.status === 200) {
if (response.data && response.data.user) {
localStorage.setItem("username", response.data.user.username)
localStorage.setItem("authLevel", response.data.user.authLevel)
}
navigate("/home")
} else {
setError("Hibás bejelentkezési adatok.")
setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000)
}
}) })
.catch((error) => { .catch((error) => {
setError("Hibás bejelentkezési adatok.") setError("Hibás bejelentkezési adatok.")
setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000)
}) })
} }
@@ -82,11 +62,7 @@ export default function LoginForm() {
Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni. Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni.
</div> </div>
)} )}
{showErrorPopup && error && ( {error && <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>}
<div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<InputBox <InputBox
type="email" type="email"
@@ -51,10 +51,12 @@ export default function RegisterForm() {
// Check for 201 Created status // Check for 201 Created status
if (response && response.status === 201) { if (response && response.status === 201) {
navigate("/login", { state: { success: true } }) navigate("/login", { state: { success: true } })
console.log(response)
console.log("Regisztráció:", { username, email, password, firstname, lastname, phone })
} else { } else {
let msg = "Sikertelen regisztráció." let msg = "Sikertelen regisztráció."
if (response && response.data && response.data.error) { if (response && response.error) {
msg = response.data.error msg = response.error
} }
setError(msg) setError(msg)
setShowErrorPopup(true) setShowErrorPopup(true)
@@ -7,7 +7,6 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx" import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
import CardsList from "../../components/DeckCreator/CardsList.jsx" import CardsList from "../../components/DeckCreator/CardsList.jsx"
import CardEditor from "../../components/DeckCreator/CardEditor.jsx" import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
import { createDeck } from '../../api/deckApi'
export default function DeckCreator() { export default function DeckCreator() {
const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined) const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
@@ -87,23 +86,12 @@ export default function DeckCreator() {
const handleSaveDeck = async () => { const handleSaveDeck = async () => {
try { try {
// TODO: API mentés
console.log("Deck mentése:", deck) console.log("Deck mentése:", deck)
alert("✅ Deck sikeresen mentve!")
const payload = {
name: deck.name,
type: (deck.type || 'Question').toString().toUpperCase(),
ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE',
description: deck.description || '',
cards: deck.cards.map(c => ({ ...c, text: c.question || c.statement || c.text || '' }))
}
const saved = await createDeck(payload)
setDeck(prev => ({ ...prev, id: saved.id ?? prev.id, creationdate: saved.creationdate ?? prev.creationdate, updatedate: saved.updatedate ?? prev.updatedate }))
console.log('Deck saved (backend):', saved)
alert('✅ Deck sikeresen mentve!')
} catch (error) { } catch (error) {
console.error('Mentési hiba:', error) console.error("Mentési hiba:", error)
alert('❌ Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error))) alert("❌ Hiba történt a mentés során!")
} }
} }
@@ -1,7 +1,7 @@
// src/pages/Decks/DeckManagerPage.jsx // src/pages/Decks/DeckManagerPage.jsx
// Deck Management Page (with Navbar, no Footer) // Deck Management Page (with Navbar, no Footer)
import DeckManager from "../../components/DeckCreator/DeckManager.jsx" import DeckManager from "../../components/Landingpage/DeckManager.jsx"
import Navbar from "../../components/Navbar/Navbar.jsx" import Navbar from "../../components/Navbar/Navbar.jsx"
export default function DeckManagerPage() { export default function DeckManagerPage() {
@@ -0,0 +1,35 @@
// src/pages/Home/Home.jsx
// Régi PlayMenu-s oldal, "Home" néven
import { useState } from "react"
import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx"
import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
export default function Home() {
// Dummy callbackok és user példa
const handleJoinGame = (code) => {
alert(`Csatlakozás játékhoz: ${code}`)
}
const handleCreateGame = () => {
alert("Új játék létrehozása")
}
const user = { name: "Teszt Elek" }
return (
<div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
<div className="fixed inset-0 -z-10 pointer-events-none">
<Background />
</div>
<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-[640px]">
<PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
{/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
</main>
<Footer />
</div>
)
}
@@ -1,17 +1,13 @@
// src/pages/Home/Home.jsx // src/pages/Home/Home.jsx
// Régi PlayMenu-s oldal, "Home" néven // Régi PlayMenu-s oldal, "Home" néven
import { useEffect } from "react" import { useState } from "react"
import useRequireAuth from "../../hooks/useRequireAuth" import Navbar from "../../components/Navbar/Navbar.jsx"
import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer.jsx" import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx" import Background from "../../assets/backgrounds/Background.jsx"
import PlayMenu from "../../components/Landingpage/PlayMenu.jsx" 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
const [user, setUser] = useRequireAuth()
// Dummy callbackok és user példa // Dummy callbackok és user példa
const handleJoinGame = (code) => { const handleJoinGame = (code) => {
alert(`Csatlakozás játékhoz: ${code}`) alert(`Csatlakozás játékhoz: ${code}`)
@@ -19,9 +15,7 @@ export default function Home() {
const handleCreateGame = () => { const handleCreateGame = () => {
alert("Új játék létrehozása") alert("Új játék létrehozása")
} }
const userObj = { name: user } const user = { name: "Teszt Elek" }
// ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be
return ( return (
<div className="w-full min-h-screen flex flex-col relative overflow-x-hidden"> <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -32,7 +26,7 @@ export default function Home() {
<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 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
<PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={userObj} /> <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
{/* 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 />
@@ -1,23 +1,23 @@
// src/pages/Landing/Landingpage.jsx // src/pages/Landing/Landingpage.jsx
// Főoldal - Landing Page // Főoldal - Landing Page
import { useState } from "react"
import { useNavigate } from "react-router-dom"
import Navbar from "../../components/Navbar/Navbar" import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer.jsx" import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx" import Background from "../../assets/backgrounds/Background.jsx"
import LandingPage from "../../components/Landingpage/LandingPage.jsx" import LandingPage from "../../components/Landingpage/LandingPage.jsx"
export default function LandingPageMain() { export default function LandingPageMain() {
const navigate = useNavigate(); // Navigációs callbackok
const handleNavigateToPlay = () => { const handleNavigateToPlay = () => {
navigate("/login"); // Itt lehet navigálni a játék oldalra
}; alert("Navigáció a játék oldalra")
}
const handleNavigateToAuth = () => { const handleNavigateToAuth = () => {
navigate("/register"); // Itt lehet navigálni a bejelentkezés oldalra
}; alert("Navigáció a bejelentkezés oldalra")
}
return ( return (
<div className="w-full min-h-screen flex flex-col relative overflow-x-hidden"> <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -32,5 +32,5 @@ export default function LandingPageMain() {
</main> </main>
<Footer /> <Footer />
</div> </div>
); )
} }
@@ -1,96 +0,0 @@
import React, { useEffect, useRef, useState } from "react"
import { useNavigate, useLocation } from "react-router-dom"
import Navbar from "../../components/Navbar/Navbar"
import Background from "../../assets/backgrounds/Background.jsx"
import useRequireAuth from "../../hooks/useRequireAuth"
const Lobby = () => {
const [visible, setVisible] = useState(false)
const sectionRef = useRef(null)
const navigate = useNavigate()
const location = useLocation()
const [user, setUser] = useRequireAuth()
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) setVisible(true)
},
{ threshold: 0.3 }
)
if (sectionRef.current) observer.observe(sectionRef.current)
return () => observer.disconnect()
}, [])
const handleExit = () => {
if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
navigate("/home")
}
}
const getInitials = (name) => {
return name
.split(" ")
.map((n) => n[0])
.join("")
.slice(0, 2)
.toUpperCase()
}
return (
<div className="flex flex-col min-h-screen overflow-y-auto relative">
<div className="fixed top-0 left-0 w-full h-full -z-10">
<Background />
</div>
<div className="fixed top-0 left-0 right-0 z-30">
<Navbar />
</div>
<main className="flex-grow text-white px-6 pt-16 mt-0 mb-20 flex items-center justify-center">
<section
ref={sectionRef}
className={`w-full max-w-3xl rounded-2xl p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
}`}
style={{ background: "rgba(0,0,0,0.25)" }}
>
<h1 className="text-4xl md:text-5xl font-extrabold text-green-300 mb-4 text-center tracking-wide drop-shadow-lg">
{user} Lobby-ja
</h1>
<p className="text-lg text-zinc-300 mb-8 text-center">
Játékosok, akik csatlakoztak ehhez a szobához:
</p>
<div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
<ul className="flex flex-col gap-4">
<li className="bg-zinc-700 py-3 px-4 rounded-xl text-green-400 font-semibold flex items-center gap-4 shadow hover:shadow-green-500/20 transition">
<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)" }}
>
{getInitials(user)}
</div>
<span className="text-white text-lg">{user}</span>
</li>
</ul>
</div>
<div className="flex justify-center">
<button
onClick={handleExit}
className="bg-gradient-to-r from-green-700 to-green-500 hover:from-green-600 hover:to-green-400 text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-green-400/30 transition-transform transform hover:scale-105"
>
Kilépés
</button>
</div>
</section>
</main>
</div>
)
}
export default Lobby
@@ -3,12 +3,8 @@ import { useState } from "react"
import Navbar from "../../components/Navbar/Navbar.jsx" import Navbar from "../../components/Navbar/Navbar.jsx"
import Footer from "../../components/Footer/Footer.jsx" import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx" import Background from "../../assets/backgrounds/Background.jsx"
import { getUserStats } from "../../api/userApi.js"
import useRequireAuth from "../../hooks/useRequireAuth.jsx"
export default function Reports() { export default function Reports() {
const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
return ( return (
<div className="w-full min-h-screen flex flex-col relative overflow-x-hidden"> <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
{/* Háttér */} {/* Háttér */}
@@ -27,8 +23,9 @@ export default function Reports() {
{/* Fejléc */} {/* Fejléc */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-3xl font-bold text-white">Játék Riportok</h2> <h2 className="text-3xl font-bold text-white">Játék Riportok</h2>
<p className="text-gray-300 mt-2">Áttekintés a legutóbbi játékokról és statisztikákról</p> <p className="text-gray-300 mt-2">
{username && <p className="text-sm text-gray-400 mt-1">Bejelentkezett: {username}</p>} Áttekintés a legutóbbi játékokról és statisztikákról
</p>
</div> </div>
{/* Statisztikai kártyák */} {/* Statisztikai kártyák */}