csatlakozas-mukodesdemodemodemo
This commit is contained in:
@@ -3,6 +3,8 @@ import { useNavigate, useLocation } from "react-router-dom"
|
||||
import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
import useRequireAuth from "../../hooks/useRequireAuth.jsx"
|
||||
import { useGameWebSocket } from "../../hooks/useGameWebSocket.js"
|
||||
import { startGame } from "../../api/gameApi.js"
|
||||
|
||||
const Lobby = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
@@ -11,6 +13,30 @@ const Lobby = () => {
|
||||
const location = useLocation()
|
||||
|
||||
const [user, setUser] = useRequireAuth()
|
||||
|
||||
// Get game code from location state or WebSocket
|
||||
const gameCodeFromState = location.state?.gameCode
|
||||
const gameToken = localStorage.getItem('gameToken')
|
||||
|
||||
const {
|
||||
isConnected,
|
||||
gameState,
|
||||
players,
|
||||
isGamemaster,
|
||||
gameStarted,
|
||||
} = useGameWebSocket(gameToken)
|
||||
|
||||
const gameCode = gameCodeFromState || gameState?.gameCode || 'Loading...'
|
||||
|
||||
// Filter out gamemaster from player list - gamemaster is NOT a player
|
||||
const currentPlayers = (players || []).filter(p => {
|
||||
// If we have userId info, filter by that
|
||||
if (p.userId) {
|
||||
return p.userId !== gameState?.createdBy
|
||||
}
|
||||
// Otherwise filter by name (less reliable but works for now)
|
||||
return true
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
@@ -23,12 +49,48 @@ const Lobby = () => {
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
// Auto-navigate when game starts
|
||||
useEffect(() => {
|
||||
if (gameStarted) {
|
||||
console.log('🎮 Game started, navigating to /game')
|
||||
navigate("/game")
|
||||
}
|
||||
}, [gameStarted, navigate])
|
||||
|
||||
const handleExit = () => {
|
||||
if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
|
||||
localStorage.removeItem('gameToken')
|
||||
navigate("/home")
|
||||
}
|
||||
}
|
||||
|
||||
const handleStartGame = async () => {
|
||||
try {
|
||||
// Get gameId from gameState
|
||||
const gameId = gameState?.gameId
|
||||
if (!gameId) {
|
||||
alert('Hiba: Játék azonosító nem található')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Starting game with ID:', gameId)
|
||||
const response = await startGame(gameId)
|
||||
console.log('Game start response:', response)
|
||||
|
||||
// Backend will broadcast game:started event to all players
|
||||
// Navigate to game page
|
||||
navigate("/game")
|
||||
} catch (error) {
|
||||
console.error('Failed to start game:', error)
|
||||
alert(`Nem sikerült elindítani a játékot: ${error.response?.data?.error || error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const copyGameCode = () => {
|
||||
navigator.clipboard.writeText(gameCode)
|
||||
alert('Játék kód vágólapra másolva: ' + gameCode)
|
||||
}
|
||||
|
||||
const getInitials = (name) => {
|
||||
return name
|
||||
.split(" ")
|
||||
@@ -57,31 +119,121 @@ const Lobby = () => {
|
||||
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
|
||||
Játék Lobby
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-300 mb-8 text-center">
|
||||
Játékosok, akik csatlakoztak ehhez a szobához:
|
||||
{/* Game Code Display */}
|
||||
<div className="bg-gradient-to-r from-green-600/20 to-teal-600/20 rounded-xl p-6 mb-6 border-2 border-green-400/50">
|
||||
<p className="text-lg text-zinc-300 mb-2 text-center font-semibold">
|
||||
Játék Kód:
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<p className="text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
|
||||
{gameCode}
|
||||
</p>
|
||||
<button
|
||||
onClick={copyGameCode}
|
||||
className="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105"
|
||||
title="Másolás vágólapra"
|
||||
>
|
||||
📋 Másolás
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 mt-3 text-center">
|
||||
Oszd meg ezt a kódot másokkal, hogy csatlakozhassanak a játékhoz!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Connection Status */}
|
||||
<div className="mb-4 text-center">
|
||||
<span className={`inline-block px-4 py-2 rounded-full text-sm font-semibold ${
|
||||
isConnected
|
||||
? 'bg-green-600/20 text-green-300 border border-green-400'
|
||||
: 'bg-red-600/20 text-red-300 border border-red-400'
|
||||
}`}>
|
||||
{isConnected ? '🟢 Kapcsolódva' : '🔴 Kapcsolat megszakadt'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-zinc-300 mb-6 text-center">
|
||||
Játékosok ({currentPlayers.length}):
|
||||
</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>
|
||||
{currentPlayers.length === 0 ? (
|
||||
<li className="text-center text-zinc-400 py-4">
|
||||
Várakozás játékosokra...
|
||||
</li>
|
||||
) : (
|
||||
currentPlayers.map((player, index) => (
|
||||
<li
|
||||
key={player.id || index}
|
||||
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(player.name || `Player ${index + 1}`)}
|
||||
</div>
|
||||
<span className="text-white text-lg flex-1">
|
||||
{player.name || `Player ${index + 1}`}
|
||||
</span>
|
||||
{player.isReady && (
|
||||
<span className="bg-green-600 text-white text-xs px-2 py-1 rounded-full">
|
||||
Kész
|
||||
</span>
|
||||
)}
|
||||
{player.isOnline && (
|
||||
<span className="text-green-400 text-xs">🟢</span>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
{/* Role indicator */}
|
||||
<div className="mb-6 text-center">
|
||||
{isGamemaster ? (
|
||||
<div className="bg-yellow-600/20 text-yellow-300 px-4 py-3 rounded-lg border border-yellow-400/50">
|
||||
<p className="font-semibold">👑 Te vagy a Gamemaster!</p>
|
||||
<p className="text-sm mt-1">Te nem játszol, csak indítod és moderálod a játékot.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-blue-600/20 text-blue-300 px-4 py-3 rounded-lg border border-blue-400/50">
|
||||
<p className="font-semibold">🎮 Te vagy egy Játékos!</p>
|
||||
<p className="text-sm mt-1">Várj, amíg a gamemaster elindítja a játékot.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4">
|
||||
{isGamemaster ? (
|
||||
/* Gamemaster view - can start game */
|
||||
<button
|
||||
onClick={handleStartGame}
|
||||
disabled={currentPlayers.length < 2}
|
||||
className={`px-8 py-3 rounded-xl font-semibold shadow-lg transition-transform transform hover:scale-105 ${
|
||||
currentPlayers.length >= 2
|
||||
? 'bg-gradient-to-r from-green-700 to-green-500 hover:from-green-600 hover:to-green-400 text-white hover:shadow-green-400/30'
|
||||
: 'bg-gray-600 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
title={currentPlayers.length < 2 ? 'Minimum 2 játékos szükséges' : 'Játék indítása'}
|
||||
>
|
||||
Játék Indítása
|
||||
</button>
|
||||
) : (
|
||||
/* Player view - cannot start game, just wait */
|
||||
<div className="text-center text-zinc-400">
|
||||
<p className="text-lg">Várakozás a gamemaster-re...</p>
|
||||
<p className="text-sm mt-2">Csak a gamemaster indíthatja el a játékot</p>
|
||||
</div>
|
||||
)}
|
||||
<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"
|
||||
className="bg-gradient-to-r from-red-700 to-red-500 hover:from-red-600 hover:to-red-400 text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-red-400/30 transition-transform transform hover:scale-105"
|
||||
>
|
||||
Kilépés
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user