Merge branch 'main' of https://git.mdnd-it.cc/Donat/SerpentRace into Backend_Fix

lobby duplikalas fix toastyfy plusz apro fixek lol
2025-11-18 00:12:54 +01:00 · 2025-11-17 23:07:38 +01:00
2 changed files with 227 additions and 258 deletions
@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from "react"
 import { useLocation } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
+import { notifyError, notifyWarning, notifySuccess } from "../../components/Toastify/toastifyServices"
 import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
@@ -12,6 +14,7 @@ const Lobby = () => {
  const [isStarting, setIsStarting] = useState(false)
  const sectionRef = useRef(null)
  const { goHome, goGame } = HandleNavigate()
+  const navigate = useNavigate()
  const location = useLocation()

  const [user, setUser] = useRequireAuth()
@@ -41,7 +44,7 @@ const Lobby = () => {
    }
  }, [gameToken, connect])

-  const gameCode = gameCodeFromState || gameState?.gameCode || 'Loading...'
+  const gameCode = gameCodeFromState || gameState?.gameCode || "Loading..."

  // Players list - gamemaster is separate, don't filter
  // Backend should handle this correctly
@@ -50,12 +53,12 @@ const Lobby = () => {
  // Debug logging
  useEffect(() => {
    if (import.meta.env.DEV) {
-      console.log('🎮 Lobby state update:')
-      console.log('   - isGamemaster:', isGamemaster)
-      console.log('   - gameState:', gameState)
-      console.log('   - players:', players)
-      console.log('   - currentPlayers:', currentPlayers)
-      console.log('   - pendingPlayers:', pendingPlayers)
+      console.log("🎮 Lobby state update:")
+      console.log("   - isGamemaster:", isGamemaster)
+      console.log("   - gameState:", gameState)
+      console.log("   - players:", players)
+      console.log("   - currentPlayers:", currentPlayers)
+      console.log("   - pendingPlayers:", pendingPlayers)
    }
  }, [isGamemaster, gameState, players, currentPlayers, pendingPlayers])

@@ -73,7 +76,7 @@ const Lobby = () => {
  // Auto-navigate when game starts
  useEffect(() => {
    if (gameStarted) {
-      console.log('🎮 Game started, navigating to /game')
+      console.log("🎮 Game started, navigating to /game")
      goGame()
    }
  }, [gameStarted, goGame])
@@ -83,7 +86,7 @@ const Lobby = () => {
    if (approvalStatus === 'denied') {
      alert('A gamemaster elutasította a csatlakozási kérelmedet.')
      localStorage.removeItem('gameToken')
-      goHome()
+      navigate("/home")
    } else if (approvalStatus === 'approved') {
      console.log('✅ Join approved, you can now see the lobby')
    }
@@ -91,7 +94,8 @@ const Lobby = () => {

  const handleExit = () => {
    if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
-      localStorage.removeItem('gameToken')
+      localStorage.removeItem("gameToken")
+      notifyWarning("Kiléptél a lobbyból.")
      goHome()
    }
  }
@@ -99,7 +103,7 @@ const Lobby = () => {
  const handleStartGame = async () => {
    // Prevent double-click
    if (isStarting) {
-      console.log('⚠️ Game start already in progress, ignoring duplicate request')
+      console.log("⚠️ Game start already in progress, ignoring duplicate request")
      return
    }

@@ -109,34 +113,34 @@ const Lobby = () => {
      // Get gameId from gameState
      const gameId = gameState?.gameId
      if (!gameId) {
-        alert('Hiba: Játék azonosító nem található')
+        notifyError("Hiba: Játék azonosító nem található")
        return
      }

-      console.log('Starting game with ID:', gameId)
+      console.log("Starting game with ID:", gameId)
      const response = await startGame(gameId)
-      console.log('Game start response:', response)
+      console.log("Game start response:", response)

      // Store boardData and updated game state for GameScreen
      if (response.boardData) {
-        localStorage.setItem('boardData', JSON.stringify(response.boardData))
-        console.log('✅ boardData stored in localStorage')
+        localStorage.setItem("boardData", JSON.stringify(response.boardData))
+        console.log("✅ boardData stored in localStorage")
      }

      // Navigate immediately after successful start (don't wait for WebSocket)
      console.log('🎮 Navigating to /game...')
-      goGame()
+      navigate('/game')
      
    } catch (error) {
-      console.error('Failed to start game:', error)
+      console.error("Failed to start game:", error)

      // Check if game already started
      if (error.response?.status === 409) {
-        console.log('Game already started, navigating to /game...')
+        console.log("Game already started, navigating to /game...")
        // Navigate anyway - game is already running
-        goGame()
+        navigate('/game')
      } else {
-        alert(`Nem sikerült elindítani a játékot: ${error.response?.data?.error || error.message}`)
+        notifyError(`Nem sikerült elindítani a játékot: ${error.response?.data?.error || error.message}`)
      }
    } finally {
      setIsStarting(false)
@@ -145,7 +149,7 @@ const Lobby = () => {

  const copyGameCode = () => {
    navigator.clipboard.writeText(gameCode)
-    alert('Játék kód vágólapra másolva: ' + gameCode)
+    notifySuccess("Játék kód vágólapra másolva: " + gameCode)
  }

  const handleApprovePlayer = (playerName) => {
@@ -155,8 +159,9 @@ const Lobby = () => {
  }

  const handleRejectPlayer = (playerName) => {
-    const reason = prompt(`Miért utasítod el ${playerName}-t?`, 'Nincs hely a játékban')
-    if (reason !== null) { // User didn't cancel
+    const reason = prompt(`Miért utasítod el ${playerName}-t?`, "Nincs hely a játékban")
+    if (reason !== null) {
+      // User didn't cancel
      if (rejectPlayer(playerName, reason)) {
        console.log(`❌ Player ${playerName} rejected`)
      }
@@ -183,7 +188,7 @@ const Lobby = () => {
      </div>

      {/* Waiting for Approval Screen (Non-gamemaster, PRIVATE games) */}
-      {!isGamemaster && approvalStatus === 'pending' && (
+      {!isGamemaster && approvalStatus === "pending" && (
        <div className="flex-1 flex items-center justify-center px-4 py-24">
          <div className="bg-zinc-900/95 backdrop-blur-sm rounded-3xl p-8 max-w-md w-full border border-yellow-500/50 shadow-2xl">
            <div className="text-center">
@@ -192,9 +197,7 @@ const Lobby = () => {
                  <span className="text-4xl">⏳</span>
                </div>
              </div>
-              <h2 className="text-3xl font-bold text-yellow-300 mb-4">
-                Várakozás jóváhagyásra
-              </h2>
+              <h2 className="text-3xl font-bold text-yellow-300 mb-4">Várakozás jóváhagyásra</h2>
              <p className="text-zinc-300 text-lg mb-6">
                A gamemaster még nem hagyta jóvá a csatlakozásodat.
              </p>
@@ -204,9 +207,7 @@ const Lobby = () => {
              <div className="flex flex-col gap-3">
                <div className="bg-zinc-800 rounded-lg p-4 border border-zinc-700">
                  <p className="text-zinc-400 text-xs mb-1">Játék kód:</p>
-                  <p className="text-2xl font-mono font-bold text-green-300 tracking-widest">
-                    {gameCode}
-                  </p>
+                  <p className="text-2xl font-mono font-bold text-green-300 tracking-widest">{gameCode}</p>
                </div>
                <button
                  onClick={handleExit}
@@ -221,7 +222,7 @@ const Lobby = () => {
      )}

      {/* Normal Lobby View (Gamemaster or approved players) */}
-      {(isGamemaster || approvalStatus !== 'pending') && (
+      {(isGamemaster || approvalStatus !== "pending") && (
        <div className="flex-1 flex items-center justify-center px-4 py-24">
          <section
            ref={sectionRef}
@@ -236,9 +237,7 @@ const Lobby = () => {

            {/* 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>
+              <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}
@@ -258,18 +257,18 @@ const Lobby = () => {

            {/* Connection Status */}
            <div className="mb-4 text-center">
-            <span className={`inline-block px-4 py-2 rounded-full text-sm font-semibold ${
+              <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'}
+                    ? "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>
+            <p className="text-lg text-zinc-300 mb-6 text-center">Játékosok ({currentPlayers.length}):</p>

            {/* Pending Players Section (Gamemaster only, PRIVATE games) */}
            {isGamemaster && pendingPlayers && pendingPlayers.length > 0 && (
@@ -280,19 +279,12 @@ const Lobby = () => {
                </h3>
                <ul className="flex flex-col gap-3">
                  {pendingPlayers.map((player, index) => (
-                  <li 
-                    key={index}
-                    className="bg-zinc-700 py-3 px-4 rounded-xl flex items-center gap-4"
-                  >
-                    <div
-                      className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50"
-                    >
+                    <li key={index} className="bg-zinc-700 py-3 px-4 rounded-xl flex items-center gap-4">
+                      <div className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50">
                        {getInitials(player.playerName)}
                      </div>
                      <div className="flex-1">
-                      <span className="text-white text-lg font-semibold">
-                        {player.playerName}
-                      </span>
+                        <span className="text-white text-lg font-semibold">{player.playerName}</span>
                        {player.isAuthenticated && (
                          <span className="ml-2 text-xs bg-green-600/30 text-green-300 px-2 py-0.5 rounded-full border border-green-500/50">
                            ✓ Bejelentkezve
@@ -326,9 +318,7 @@ const Lobby = () => {
            <div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
              <ul className="flex flex-col gap-4">
                {currentPlayers.length === 0 ? (
-                <li className="text-center text-zinc-400 py-4">
-                  Várakozás játékosokra...
-                </li>
+                  <li className="text-center text-zinc-400 py-4">Várakozás játékosokra...</li>
                ) : (
                  currentPlayers.map((player, index) => (
                    <li
@@ -345,13 +335,9 @@ const Lobby = () => {
                        {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>
+                        <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>
                  ))
                )}
@@ -381,18 +367,18 @@ const Lobby = () => {
                  disabled={currentPlayers.length < 2 || isStarting}
                  className={`px-8 py-3 rounded-xl font-semibold shadow-lg transition-transform transform hover:scale-105 ${
                    currentPlayers.length >= 2 && !isStarting
-                    ? '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'
+                      ? "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={
                    isStarting
-                    ? 'Játék indítása folyamatban...' 
+                      ? "Játék indítása folyamatban..."
                      : currentPlayers.length < 2
-                      ? 'Minimum 2 játékos szükséges' 
-                      : 'Játék indítása'
+                      ? "Minimum 2 játékos szükséges"
+                      : "Játék indítása"
                  }
                >
-                {isStarting ? '⏳ Indítás...' : 'Játék Indítása'}
+                  {isStarting ? "⏳ Indítás..." : "Játék Indítása"}
                </button>
              ) : (
                /* Player view - cannot start game, just wait */
@@ -20,7 +20,7 @@ const GameLobbySetup = () => {
  const [isPublic, setIsPublic] = useState(true)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
-  const [createdGameCode, setCreatedGameCode] = useState('')
+  const [createdGameCode, setCreatedGameCode] = useState("")
  const [showSuccess, setShowSuccess] = useState(false)

  const handleCreateLobby = async () => {
@@ -28,12 +28,12 @@ const GameLobbySetup = () => {
    setError(null)

    try {
-      const username = localStorage.getItem('username')
+      const username = localStorage.getItem("username")

-      console.log('Creating game - username:', username)
+      console.log("Creating game - username:", username)

      if (!username) {
-        setError('Kérlek jelentkezz be először!')
+        setError("Kérlek jelentkezz be először!")
        setLoading(false)
        return
      }
@@ -45,12 +45,12 @@ const GameLobbySetup = () => {
        logintype: isPublic ? 0 : 1, // 0=PUBLIC, 1=PRIVATE, 2=ORGANIZATION
      }

-      console.log('Creating game with data:', gameData)
+      console.log("Creating game with data:", gameData)
      const response = await createGame(gameData)
-      console.log('Game created:', response)
+      console.log("Game created:", response)

      // Verify localStorage still has username
-      console.log('After create - username:', localStorage.getItem('username'))
+      console.log("After create - username:", localStorage.getItem("username"))

      // Backend returns game object directly
      const code = response.gamecode || response.gameCode
@@ -62,31 +62,31 @@ const GameLobbySetup = () => {
      // Creator needs to join their own game to get a gameToken
      // This allows the WebSocket to recognize them as the gamemaster
      try {
-        const username = localStorage.getItem('username')
+        const username = localStorage.getItem("username")
        const joinResponse = await joinGame({
          gameCode: code,
-          playerName: username
+          playerName: username,
        })

        if (joinResponse.gameToken) {
-          localStorage.setItem('gameToken', joinResponse.gameToken)
-          console.log('Creator joined game as gamemaster, token stored')
+          localStorage.setItem("gameToken", joinResponse.gameToken)
+          console.log("Creator joined game as gamemaster, token stored")
        }
      } catch (joinError) {
-        console.error('Failed to join game as creator:', joinError)
+        console.error("Failed to join game as creator:", joinError)
        // Continue anyway - the creator can still try to join manually
      }

-      // Wait 3 seconds to show code, then navigate to lobby
-      setTimeout(() => {
-        console.log('Navigating to lobby with code:', code)
+      // Azonnali navigáció a lobbyhoz, amint létrejött a játék
+      console.log("Navigating to lobby with code:", code)
      goLobby({ gameCode: code })
-      }, 3000)
    } catch (err) {
-      console.error('Create game error:', err)
-      console.error('Error response:', err.response?.data)
-      console.error('Error status:', err.response?.status)
-      setError(err.response?.data?.message || err.response?.data?.error || 'Nem sikerült létrehozni a játékot')
+      console.error("Create game error:", err)
+      console.error("Error response:", err.response?.data)
+      console.error("Error status:", err.response?.status)
+      setError(
+        err.response?.data?.message || err.response?.data?.error || "Nem sikerült létrehozni a játékot"
+      )
    } finally {
      setLoading(false)
    }
@@ -132,26 +132,9 @@ const GameLobbySetup = () => {
            {deckIds.length} pakli kiválasztva. Add meg a játék részleteit.
          </motion.p>

-          {error && (
-            <div className="bg-red-500/20 border border-red-500 rounded-lg p-4 mb-6">
-              {error}
-            </div>
-          )}
+          {error && <div className="bg-red-500/20 border border-red-500 rounded-lg p-4 mb-6">{error}</div>}

-          {createdGameCode && (
-            <div className="bg-green-500/20 border border-green-500 rounded-lg p-6 mb-6">
-              <p className="font-bold text-xl mb-2">Játék Létrehozva! 🎉</p>
-              <p className="text-3xl font-mono tracking-wider text-green-400 mb-2">
-                {createdGameCode}
-              </p>
-              <p className="text-sm text-gray-300">
-                Oszd meg ezt a kódot más játékosokkal, hogy csatlakozhassanak!
-              </p>
-              <p className="text-sm text-gray-400 mt-2">
-                Átirányítás a lobby-hoz 3 másodperc múlva...
-              </p>
-            </div>
-          )}
+          {/* ...a kód kiírása törölve, lobbyban jelenik meg... */}

          <div className="bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl p-8 shadow-lg space-y-6">
            {/* Max Players */}
Author	SHA1	Message	Date
magdo	ce02f55a99	Merge branch 'main' of https://git.mdnd-it.cc/Donat/SerpentRace into Backend_Fix	2025-11-18 00:12:54 +01:00
Walke	dd93f054f8	lobby duplikalas fix toastyfy plusz apro fixek lol	2025-11-17 23:07:38 +01:00