Fix broken routing by unifying game state via Context API

src/App.jsx

@@ -1,12 +1,20 @@
 import React from 'react';
+import { GameStateProvider, useGameStateContext } from './context/GameStateContext';
 import SetupScreen from './components/Setup/SetupScreen';
 import CameraScreen from './components/Camera/CameraScreen';
 import ResultsScreen from './components/Results/ResultsScreen';
 import HistoryScreen from './components/History/HistoryScreen';
-import useGameState from './hooks/useGameState';
 
 const App = () => {
-  const { gameState } = useGameState();
+  return (
+    <GameStateProvider>
+      <AppContent />
+    </GameStateProvider>
+  );
+};
+
+const AppContent = () => {
+  const { gameState } = useGameStateContext();
 
   const renderScreen = () => {
     switch (gameState.currentScreen) {
@@ -30,4 +38,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

src/components/Camera/CameraScreen.tsx

@@ -1,16 +1,16 @@
 import React, { useRef, useEffect } from 'react';
 import { GameState } from '../../types';
-import useGameState from '../../hooks/useGameState';
+import { useGameStateContext } from '../../context/GameStateContext';
 import Detection from '../Detection/Detection';
 import Assignment from '../Assignment/Assignment';
 
 const CameraScreen: React.FC = () => {
   const { 
     gameState, 
+    setCurrentScreen, 
     setCameraStream, 
-    scanTable, 
-    showResults 
-  } = useGameState();
+    scanTable 
+  } = useGameStateContext();
   
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -99,7 +99,7 @@ const CameraScreen: React.FC = () => {
     <div className="screen camera-screen">
       <div className="camera-header">
         <h2>🎥 Round <span>{gameState.currentRound}</span></h2>
-        <button onClick={() => window.location.hash = '#setup'} className="secondary">
+        <button onClick={() => gameState.setCurrentScreen('setup')} className="secondary">
           End Round
         </button>
       </div>

src/components/History/HistoryScreen.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Game } from '../../types';
-import useGameState from '../../hooks/useGameState';
+import { useGameStateContext } from '../../context/GameStateContext';
 
 const HistoryScreen: React.FC = () => {
-  const { gameState, setCurrentScreen } = useGameState();
+  const { gameState, setCurrentScreen } = useGameStateContext();
 
   const renderHistory = () => {
     if (!gameState.gameHistory || gameState.gameHistory.length === 0) {

src/components/Results/ResultsScreen.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { GameState } from '../../types';
-import useGameState from '../../hooks/useGameState';
+import { useGameStateContext } from '../../context/GameStateContext';
 
 const ResultsScreen: React.FC = () => {
   const { 
     gameState, 
-    setCurrentScreen,
-    saveGame
-  } = useGameState();
+    saveGame, 
+    setCurrentScreen 
+  } = useGameStateContext();
 
   const calculateScores = () => {
     // Scoring logic based on card values

src/components/Setup/SetupScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Player, GameState } from '../../types';
-import useGameState from '../../hooks/useGameState';
+import { useGameStateContext } from '../../context/GameStateContext';
 
 const SetupScreen: React.FC = () => {
   const { 
@@ -9,7 +9,7 @@ const SetupScreen: React.FC = () => {
     updateCardValues, 
     addPlayer, 
     startNewGame 
-  } = useGameState();
+  } = useGameStateContext();
   
   const [newPlayerName, setNewPlayerName] = useState('');
 
@@ -147,7 +147,7 @@ const SetupScreen: React.FC = () => {
         <button onClick={startGame} disabled={gameState.players.length < 2}>
           Start Game
         </button>
-        <button onClick={() => window.location.hash = '#history'} className="secondary">
+        <button onClick={() => gameState.setCurrentScreen('history')} className="secondary">
           View History
         </button>
       </div>

src/context/GameStateContext.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useContext } from 'react';
+import useGameState from '../hooks/useGameState';
+
+const GameStateContext = createContext<any>(null);
+
+export const GameStateProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const value = useGameState();
+  return (
+    <GameStateContext.Provider value={value}>
+      {children}
+    </GameStateContext.Provider>
+  );
+};
+
+export const useGameStateContext = () => {
+  const context = useContext(GameStateContext);
+  if (!context) {
+    throw new Error('useGameStateContext must be used within a GameStateProvider');
+  }
+  return context;
+};