135 lines
4.9 KiB
React
135 lines
4.9 KiB
React
import React, { useState } from "react"
|
|
import { useNavigate, useLocation } from "react-router-dom"
|
|
import Navbar from "../../components/Navbar/Navbar.jsx"
|
|
import Background from "../../assets/backgrounds/Background.jsx"
|
|
import Footer from "../../components/Footer/Footer.jsx"
|
|
import useRequireAuth from "../../hooks/useRequireAuth.jsx"
|
|
import ButtonGreen from "../../components/Buttons/ButtonGreen.jsx"
|
|
import { motion } from "framer-motion"
|
|
|
|
const GameLobbySetup = () => {
|
|
const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
|
|
const deckIds = location.state?.deckIds || []
|
|
|
|
const [maxPlayers, setMaxPlayers] = useState(4)
|
|
const [isPublic, setIsPublic] = useState(true)
|
|
|
|
const handleCreateLobby = () => {
|
|
console.log({
|
|
deckIds,
|
|
maxPlayers,
|
|
isPublic,
|
|
})
|
|
// Itt küldd el az API-nak a lobby létrehozását
|
|
// navigate("/game-lobby", { state: { lobbyId: response.lobbyId } })
|
|
}
|
|
|
|
if (deckIds.length === 0) {
|
|
navigate("/choose-deck")
|
|
return null
|
|
}
|
|
|
|
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-24 pb-20">
|
|
<motion.section
|
|
className="max-w-2xl mx-auto"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.7 }}
|
|
>
|
|
<motion.h1
|
|
className="text-5xl font-extrabold text-green-300 mb-6 text-center tracking-wide drop-shadow-lg"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.1 }}
|
|
>
|
|
Lobby Beállítások
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-lg leading-relaxed text-zinc-200 mb-10 text-center"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
{deckIds.length} pakli kiválasztva. Add meg a játék részleteit.
|
|
</motion.p>
|
|
|
|
<div className="bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl p-8 shadow-lg space-y-6">
|
|
{/* Max Players */}
|
|
<div>
|
|
<label className="block text-[color:var(--color-text)] font-semibold mb-2">
|
|
Maximális játékosszám:
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min="2"
|
|
max="10"
|
|
value={maxPlayers}
|
|
onChange={(e) => setMaxPlayers(parseInt(e.target.value) || 2)}
|
|
className="w-full px-4 py-2 rounded-lg bg-[color:var(--color-card)] text-[color:var(--color-text)] border border-[color:var(--color-surface)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Public/Private */}
|
|
<div>
|
|
<label className="block text-[color:var(--color-text)] font-semibold mb-2">Játék típusa:</label>
|
|
<div className="flex gap-4">
|
|
<button
|
|
className={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
|
|
isPublic
|
|
? "bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]"
|
|
: "bg-[color:var(--color-card)] text-[color:var(--color-text)] hover:bg-[color:var(--color-success)]/30"
|
|
}`}
|
|
onClick={() => setIsPublic(true)}
|
|
>
|
|
🌐 Publikus
|
|
</button>
|
|
<button
|
|
className={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
|
|
!isPublic
|
|
? "bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]"
|
|
: "bg-[color:var(--color-card)] text-[color:var(--color-text)] hover:bg-[color:var(--color-success)]/30"
|
|
}`}
|
|
onClick={() => setIsPublic(false)}
|
|
>
|
|
🔒 Privát
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex justify-center gap-4 mt-8">
|
|
<ButtonGreen
|
|
text="Vissza"
|
|
onClick={() => navigate("/choose-deck")}
|
|
width="w-auto px-8"
|
|
className="bg-gray-600 hover:bg-gray-700"
|
|
/>
|
|
<ButtonGreen text="Lobby Létrehozása" onClick={handleCreateLobby} width="w-auto px-8" />
|
|
</div>
|
|
</motion.section>
|
|
</main>
|
|
|
|
<footer className="mt-auto">
|
|
<Footer />
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default GameLobbySetup
|