csatlakozas-mukodesdemodemodemo

SerpentRace_Frontend/src/pages/Game/PlayerSetup.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { useNavigate, useLocation } from "react-router-dom"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
@@ -6,6 +6,7 @@ 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"
+import { createGame, joinGame } from "../../api/gameApi.js"
 
 const GameLobbySetup = () => {
   const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
@@ -16,19 +17,82 @@ const GameLobbySetup = () => {
 
   const [maxPlayers, setMaxPlayers] = useState(4)
   const [isPublic, setIsPublic] = useState(true)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [createdGameCode, setCreatedGameCode] = useState('')
+  const [showSuccess, setShowSuccess] = useState(false)
 
-  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 } })
+  const handleCreateLobby = async () => {
+    setLoading(true)
+    setError(null)
+    
+    try {
+      const username = localStorage.getItem('username')
+      
+      console.log('Creating game - username:', username)
+      
+      if (!username) {
+        setError('Kérlek jelentkezz be először!')
+        setLoading(false)
+        return
+      }
+
+      // Backend expects deckids (array), maxplayers (number), logintype (0=PUBLIC, 1=PRIVATE)
+      const gameData = {
+        deckids: deckIds, // Array of deck UUIDs
+        maxplayers: maxPlayers, // Number
+        logintype: isPublic ? 0 : 1, // 0=PUBLIC, 1=PRIVATE, 2=ORGANIZATION
+      }
+
+      console.log('Creating game with data:', gameData)
+      const response = await createGame(gameData)
+      console.log('Game created:', response)
+      
+      // Verify localStorage still has username
+      console.log('After create - username:', localStorage.getItem('username'))
+      
+      // Backend returns game object directly
+      const code = response.gamecode || response.gameCode
+      if (code) {
+        setCreatedGameCode(code)
+        setShowSuccess(true)
+      }
+      
+      // 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 joinResponse = await joinGame({
+          gameCode: code,
+          playerName: username
+        })
+        
+        if (joinResponse.gameToken) {
+          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)
+        // 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)
+        navigate('/lobby', { state: { 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')
+    } finally {
+      setLoading(false)
+    }
   }
 
   if (deckIds.length === 0) {
-    navigate("/choose-deck")
+    navigate("/choosedeck")
     return null
   }
 
@@ -67,6 +131,27 @@ 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>
+          )}
+
+          {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>
+          )}
+
           <div className="bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl p-8 shadow-lg space-y-6">
             {/* Max Players */}
             <div>
@@ -115,11 +200,17 @@ const GameLobbySetup = () => {
           <div className="flex justify-center gap-4 mt-8">
             <ButtonGreen
               text="Vissza"
-              onClick={() => navigate("/choose-deck")}
+              onClick={() => navigate("/choosedeck")}
               width="w-auto px-8"
               className="bg-gray-600 hover:bg-gray-700"
+              disabled={loading}
+            />
+            <ButtonGreen 
+              text={loading ? "Létrehozás..." : "Lobby Létrehozása"} 
+              onClick={handleCreateLobby} 
+              width="w-auto px-8"
+              disabled={loading}
             />
-            <ButtonGreen text="Lobby Létrehozása" onClick={handleCreateLobby} width="w-auto px-8" />
           </div>
         </motion.section>
       </main>