contextProvider

SerpentRace_Frontend/src/pages/Game/GameScreen.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react"
 import { getVerticalOffset } from "../../utils/randomUtils"
 import Dice from "../../utils/dice/Dice"
-import { useGameWebSocket } from "../../hooks/useGameWebSocket"
+import { useGameWebSocketContext } from "../../contexts/GameWebSocketContext"
 import JokerApprovalModal from "./JokerApprovalModal"
 import CardDisplayModal from "./CardDisplayModal"
 import ConsequenceModal from "./ConsequenceModal"
@@ -45,8 +45,7 @@ const getDefaultFieldType = (count) => {
 }
 
 const GameScreen = () => {
-  // WebSocket connection
-  const gameToken = localStorage.getItem('gameToken')
+  // WebSocket connection from context (maintains connection across navigation)
   const { 
     isConnected, 
     gameState, 
@@ -61,7 +60,7 @@ const GameScreen = () => {
     submitPositionGuess,
     addEventListener,
     removeEventListener
-  } = useGameWebSocket(gameToken)
+  } = useGameWebSocketContext()
   
   // Try to get boardData from WebSocket, fallback to localStorage
   const boardData = useMemo(() => {
@@ -626,7 +625,7 @@ const GameScreen = () => {
                   <div>👥 Players: {backendPlayers?.length || 0}</div>
                   <div>🎲 Board Fields: {boardData?.fields?.length || 0}</div>
                   <div>🏁 Current Turn: {currentTurn || 'N/A'}</div>
-                  <div>🔑 Token: {gameToken ? '✅' : '❌'}</div>
+                  {/* <div>🔑 Token: {gameToken ? '✅' : '❌'}</div> */}
                 </div>
               </div>
             )}

SerpentRace_Frontend/src/pages/Game/Lobby.jsx

@@ -4,7 +4,7 @@ import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
 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 { useGameWebSocketContext } from "../../contexts/GameWebSocketContext"
 import { startGame } from "../../api/gameApi.js"
 
 const Lobby = () => {
@@ -20,7 +20,9 @@ const Lobby = () => {
   const gameCodeFromState = location.state?.gameCode
   const gameToken = localStorage.getItem('gameToken')
   
+  // Use the shared WebSocket context
   const { 
+    connect,
     isConnected, 
     gameState, 
     players,
@@ -30,7 +32,14 @@ const Lobby = () => {
     approvalStatus,
     approvePlayer,
     rejectPlayer,
-  } = useGameWebSocket(gameToken)
+  } = useGameWebSocketContext()
+  
+  // Connect to WebSocket when component mounts
+  useEffect(() => {
+    if (gameToken) {
+      connect(gameToken)
+    }
+  }, [gameToken, connect])
 
   const gameCode = gameCodeFromState || gameState?.gameCode || 'Loading...'
   
@@ -67,18 +76,18 @@ const Lobby = () => {
       console.log('🎮 Game started, navigating to /game')
       goGame()
     }
-  }, [gameStarted, navigate])
+  }, [gameStarted, goGame])
 
   // Handle approval status changes
   useEffect(() => {
     if (approvalStatus === 'denied') {
       alert('A gamemaster elutasította a csatlakozási kérelmedet.')
       localStorage.removeItem('gameToken')
-      navigate("/home")
+      goHome()
     } else if (approvalStatus === 'approved') {
       console.log('✅ Join approved, you can now see the lobby')
     }
-  }, [approvalStatus, navigate])
+  }, [approvalStatus, goHome])
 
   const handleExit = () => {
     if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
@@ -116,7 +125,7 @@ const Lobby = () => {
       
       // Navigate immediately after successful start (don't wait for WebSocket)
       console.log('🎮 Navigating to /game...')
-      navigate('/game')
+      goGame()
       
     } catch (error) {
       console.error('Failed to start game:', error)
@@ -125,7 +134,7 @@ const Lobby = () => {
       if (error.response?.status === 409) {
         console.log('Game already started, navigating to /game...')
         // Navigate anyway - game is already running
-        navigate('/game')
+        goGame()
       } else {
         alert(`Nem sikerült elindítani a játékot: ${error.response?.data?.error || error.message}`)
       }