game will now work in singleplayer mode even if the multiplayer serve…

…r is not available

client/src/assets/_locales/en/messages.json

@@ -18,5 +18,6 @@
     "white": "White",
     "black": "Black"
   },
-  "promote-pawn": "Promote pawn"
+  "promote-pawn": "Promote pawn",
+  "multiplayer-not-available": "Multiplayer is currently down for maintenance. Please try again later."
 }

client/src/hooks/use-player-info.tsx

@@ -17,19 +17,23 @@ const PlayerInfoContext = createContext(
 const PlayerInfoProvider = ({ children }: PlayerInfoProviderProps) => {
   const { getValue, setValue } = useLocalStorage();
   const [playerId, setPlayerId] = useState<string | null>(null);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
   const assignPlayerId = useCallback(async () => {
     if (playerId !== null) {
       return;
     }
     const storedPlayerId = getValue("playerId");
-    let newPlayerId = "";
+    let newPlayerId: string | null = null;
     if (storedPlayerId === null) {
       newPlayerId = await getPlayerId();
     } else {
       newPlayerId = storedPlayerId;
     }
-    setPlayerId(newPlayerId);
+    if (playerId) {
+      setPlayerId(newPlayerId);
+    }
+    setIsLoaded(true);
   }, [playerId]);
 
   useEffect(() => {
@@ -49,9 +53,7 @@ const PlayerInfoProvider = ({ children }: PlayerInfoProviderProps) => {
     [playerId],
   );
 
-  return (
-    <PlayerInfoContext.Provider value={value}>{playerId !== null ? children : <Loader />}</PlayerInfoContext.Provider>
-  );
+  return <PlayerInfoContext.Provider value={value}>{isLoaded ? children : <Loader />}</PlayerInfoContext.Provider>;
 };
 
 const usePlayerInfo = () => useContext(PlayerInfoContext);

client/src/routes/multiplayer.tsx

@@ -1,7 +1,17 @@
+import { Box } from "@radix-ui/themes";
+import { useTranslation } from "react-i18next";
+
 import { ChessGame } from "components";
-import { GameStateProvider, NetworkProvider } from "hooks";
+import { GameStateProvider, NetworkProvider, usePlayerInfo } from "hooks";
 
 const Multiplayer = () => {
+  const { playerId } = usePlayerInfo();
+  const { t } = useTranslation();
+
+  if (playerId === null) {
+    return <Box className="flex justify-center items-center h-full">{t("multiplayer-not-available")}</Box>;
+  }
+
   return (
     <GameStateProvider isMultiplayer>
       <NetworkProvider>

client/src/utils/requests.ts

@@ -5,9 +5,13 @@ import { FindGameResponse, ForfeitGameResponse, GetPlayerIdResponse, QuitGameRes
 const baseUrl = process.env.REACT_APP_API_URL as string;
 
 export const getPlayerId = async () => {
-  const res = await fetch(`${baseUrl}/generate-player-id`);
-  const { playerId } = (await res.json()) as GetPlayerIdResponse;
-  return playerId;
+  try {
+    const res = await fetch(`${baseUrl}/generate-player-id`);
+    const { playerId } = (await res.json()) as GetPlayerIdResponse;
+    return playerId;
+  } catch (err) {
+    return null;
+  }
 };
 
 export const findGame = async (playerId: string) => {