### src\contexts\GameContext.tsx

```typescript
import React, { createContext, useContext, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import useGameStore from '../store/useGameStore';
import useRoundStore from '../store/useRoundStore';
import { Game, Round } from '../types';

interface GameContextType {
  gameId: string | null;
  gameData: Game | null;
  roundData: Round | null;
}

const GameContext = createContext<GameContextType | undefined>(undefined);

export const GameProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { gameId: urlGameId } = useParams<{ gameId: string }>();
  const navigate = useNavigate();
  const { gameId, gameData, setGameId, syncGameData } = useGameStore();
  const { syncRoundData, roundData } = useRoundStore();

  useEffect(() => {
    if (urlGameId && urlGameId !== gameId) {
      console.log('urlGameId is', urlGameId);
      setGameId(urlGameId);
    } else if (!urlGameId && gameId) {
      navigate(`/game-lobby/${gameId}`);
    }

    if (gameId && !gameData) {
      syncGameData(gameId);
    }
  }, [urlGameId, gameId, gameData, setGameId, navigate, syncGameData]);

  useEffect(() => {
    if (gameId === null && urlGameId === null && !gameData) {
      console.log('gameId is null and gameData is null');
      navigate('/game-not-found');
    }
  }, [gameId, gameData, navigate, urlGameId]);

  useEffect(() => {
    if (gameId && gameData && gameData.status === 'IN_PROGRESS' && gameData.currentRound > 0) {
      syncRoundData(gameId, gameData.currentRound);
    }
  }, [gameId, gameData, syncRoundData]);

  return <GameContext.Provider value={{ gameId, gameData, roundData }}>{children}</GameContext.Provider>;
};

export const useGame = () => {
  const context = useContext(GameContext);
  if (context === undefined) {
    throw new Error('useGame must be used within a GameProvider');
  }
  return context;
};

```

### src\store\useGameStore.ts

```typescript
import { doc, onSnapshot } from 'firebase/firestore';
import { create } from 'zustand';
import { db } from '../firebase/config';
import { Game } from '../types';
import { clearGameId as clearGameIdLocalStorage, getGameId, saveGameId } from '../utils/localStorageUtils';

interface GameState {
  gameId: string | null;
  gameData: Game | null;
  setGameId: (gameId: string) => void;
  clearGameId: () => void;
  syncGameData: (gameId: string) => void;
}

const useGameStore = create<GameState>((set) => {
  let unsubscribe: (() => void) | null = null;

  const syncGameData = (gameId: string) => {
    if (unsubscribe) {
      unsubscribe();
    }
    const gameRef = doc(db, 'games', gameId);
    unsubscribe = onSnapshot(
      gameRef,
      (docSnapshot) => {
        if (docSnapshot.exists()) {
          const gameData = docSnapshot.data() as Game;
          set({ gameData });
        } else {
          console.log('Game not found');
          set({ gameData: null, gameId: null });
        }
      },
      (error) => {
        console.error('Error syncing game data:', error);
        set({ gameData: null, gameId: null });
      },
    );
  };

  return {
    gameId: getGameId(),
    gameData: null,
    setGameId: (gameId: string) => {
      set({ gameId });
      saveGameId(gameId);
      syncGameData(gameId);
    },
    clearGameId: () => {
      set({ gameId: null, gameData: null });
      clearGameIdLocalStorage();
      if (unsubscribe) {
        unsubscribe();
        unsubscribe = null;
      }
    },
    syncGameData: syncGameData,
  };
});

export default useGameStore;

```

### src\store\usePlayerStore.ts

```typescript
import { create } from 'zustand';
import { savePlayerName, getPlayerName, clearPlayerName } from '../utils/localStorageUtils';

interface PlayerState {
  name: string;
  setName: (name: string) => void;
  clearName: () => void;
}

const usePlayerStore = create<PlayerState>((set) => ({
  name: getPlayerName() || '',
  setName: (name: string) => {
    set({ name });
    savePlayerName(name);
  },
  clearName: () => {
    set({ name: '' });
    clearPlayerName();
  },
}));

export default usePlayerStore;

```

### src\store\useRoundStore.ts

```typescript
import { create } from 'zustand';
import { doc, onSnapshot } from 'firebase/firestore';
import { db } from '../firebase/config';
import { Round } from '../types';

export type RoundState = 'CHALLENGE_ANNOUNCEMENT' | 'SONG_SELECTION' | 'MUSIC_PLAYBACK' | 'VOTING_AND_RANKING' | 'SCORING' | 'ROUND_TRANSITION';

interface RoundStore {
    roundData: Round;
    isTransitioning: boolean;
    syncRoundData: (gameId: string, roundNumber: number) => void;
}

const useRoundStore = create<RoundStore>((set) => {
  let unsubscribe: (() => void) | null = null;

  const syncRoundData = (gameId: string, roundNumber: number) => {
    if (unsubscribe) {
      unsubscribe();
    }
    const roundRef = doc(db, 'games', gameId, 'rounds', `round_${roundNumber.toString()}`);

    

    unsubscribe = onSnapshot(roundRef, (docSnapshot) => {
      if (docSnapshot.exists()) {
        set({ roundData: docSnapshot.data() as unknown as Round });
      }
    });
  };  
  
  return {
    roundData: null,
    isTransitioning: false,
    syncRoundData,
  };
});

export default useRoundStore;
```
-----

i think my context has to many responsibilities. is this true? and how would you refactor this if true?