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>
             )}