magdo
87 lines
2.8 KiB
React
87 lines
2.8 KiB
React
// src/pages/Home/Home.jsx
|
|
// Régi PlayMenu-s oldal, "Home" néven
|
|
|
|
import { useEffect, useState } from "react"
|
|
import useRequireAuth from "../../hooks/useRequireAuth"
|
|
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
|
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"
|
|
import { joinGame } from "../../api/gameApi.js"
|
|
|
|
export default function Home() {
|
|
const { goLogin, goLobby, goChooseDeck } = HandleNavigate()
|
|
// a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
|
|
const [user, setUser] = useRequireAuth({ redirect: false }) // no redirect on unauthenticated visitors
|
|
const [isJoining, setIsJoining] = useState(false)
|
|
|
|
// Join game handler - csatlakozás játékhoz kóddal
|
|
const handleJoinGame = async (code, playerName) => {
|
|
// playerName is now passed from PlayMenu (either logged in user or guest name)
|
|
if (!playerName) {
|
|
alert('Név megadása kötelező a játékhoz való csatlakozáshoz!');
|
|
return;
|
|
}
|
|
|
|
setIsJoining(true)
|
|
try {
|
|
const joinData = {
|
|
gameCode: code.toUpperCase(),
|
|
playerName: playerName,
|
|
}
|
|
|
|
const response = await joinGame(joinData)
|
|
|
|
// Backend returns game object directly
|
|
if (response.gameToken) {
|
|
localStorage.setItem('gameToken', response.gameToken)
|
|
}
|
|
|
|
goLobby({ gameCode: code.toUpperCase() })
|
|
} catch (err) {
|
|
const errorMsg = err.response?.data?.error || err.response?.data?.message || 'Nem sikerült csatlakozni a játékhoz'
|
|
alert(errorMsg)
|
|
} finally {
|
|
setIsJoining(false)
|
|
}
|
|
}
|
|
|
|
// Create game handler - új játék létrehozása
|
|
const handleCreateGame = () => {
|
|
if (!user) {
|
|
alert('Kérlek először jelentkezz be!')
|
|
goLogin()
|
|
return
|
|
}
|
|
|
|
// Navigate to choose deck page to start game creation flow
|
|
goChooseDeck()
|
|
}
|
|
|
|
const userObj = { name: user }
|
|
|
|
// ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be
|
|
|
|
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 min-h-[calc(100vh-64px)] flex mt-[64px] flex-col items-center justify-center px-2 sm:px-4">
|
|
<PlayMenu
|
|
onJoinGame={handleJoinGame}
|
|
onCreateGame={handleCreateGame}
|
|
user={userObj}
|
|
setUser={setUser}
|
|
/>
|
|
{/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|