upgrade the TS SDK to latest (#60)

* code compiles * explanation * explanation * more descriptive name * michael feedback
hathora · Jun 11, 2024 · 3ffbe0a · 3ffbe0a
1 parent a933236
commit 3ffbe0a
Show file tree

Hide file tree

Showing 13 changed files with 210 additions and 152 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@hathora/client-sdk": "^1.0.0",
-    "@hathora/cloud-sdk-typescript": "^2.2.8",
+    "@hathora/cloud-sdk-typescript": "^2.3.0",
     "@heroicons/react": "^2.0.17",
     "@react-oauth/google": "^0.10.0",
     "dayjs": "^1.11.7",

diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -61,7 +61,7 @@ function App() {
             const connect = new HathoraConnection(roomIdFromUrl, connectionInfo);
             connect.onClose(async () => {
               // If game has ended, we want updated lobby state
-              const updatedLobbyInfo = await hathoraSdk.lobbyV3.getLobbyInfoByRoomId(roomIdFromUrl);
+              const updatedLobbyInfo = await hathoraSdk.lobbiesV3.getLobbyInfoByRoomId(roomIdFromUrl);
               const updatedRoomConfig = JSON.parse(updatedLobbyInfo.roomConfig ?? "") as RoomConfig;
               setSessionMetadata({
                 serverUrl: `${connectionInfo.host}:${connectionInfo.port}`,
@@ -72,7 +72,7 @@ function App() {
                 isGameEnd: updatedRoomConfig.isGameEnd,
                 winningPlayerId: updatedRoomConfig.winningPlayerId,
                 playerNicknameMap: updatedRoomConfig.playerNicknameMap,
-                creatorId: updatedLobbyInfo.createdBy,
+                creatorId: updatedLobbyInfo.createdBy + "",
               });
               setFailedToConnect(true);
             });
@@ -87,7 +87,7 @@ function App() {
             isGameEnd: roomConfig.isGameEnd,
             winningPlayerId: roomConfig.winningPlayerId,
             playerNicknameMap: roomConfig.playerNicknameMap,
-            creatorId: lobbyInfo.createdBy,
+            creatorId: lobbyInfo.createdBy + "",
           });
         } catch (e) {
           setRoomIdNotFound(roomIdFromUrl);

diff --git a/client/src/components/lobby/GameCreator.tsx b/client/src/components/lobby/GameCreator.tsx
@@ -83,13 +83,13 @@ export function GameCreator(props: GameCreatorProps) {
                     playerNicknameMap: {},
                     isGameEnd: false,
                   };
-                  const lobbyV3 = await hathoraSdk.lobbyV3.createLobby(
+                  const lobbyV3 = await hathoraSdk.lobbiesV3.createLobby(
                     { playerAuth: playerToken.value },
                     {
                       region,
                       visibility: visibility as LobbyVisibility,
                       roomConfig: JSON.stringify(roomConfig),
-                    }
+                    },
                   );
                   // Wait until lobby connection details are ready before redirect player to match
                   await isReadyForConnect(appId, lobbyV3.roomId, hathoraSdk);

diff --git a/client/src/components/lobby/PublicLobbyList.tsx b/client/src/components/lobby/PublicLobbyList.tsx
@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 dayjs.extend(relativeTime);
 
 import { ClockIcon, TrophyIcon, UserIcon, UsersIcon } from "@heroicons/react/24/outline";
-import { LobbyV3, Region } from "@hathora/cloud-sdk-typescript/dist/sdk/models/shared";
+import { LobbyV3, Region } from "@hathora/cloud-sdk-typescript/models/components";
 
 import { getHathoraSdk, isReadyForConnect } from "../../utils";
 import { RoomConfig } from "../../../../common/types";
@@ -25,9 +25,9 @@ export function PublicLobbyList(props: PublicLobbyListProps) {
   const [readyRooms, setReadyRooms] = React.useState<Set<string>>(new Set());
 
   useEffect(() => {
-    lobbies.forEach(async (l) => {
+    lobbies.forEach(async (lobby) => {
       // Ensure that lobby is ready for connections before adding to visible lobby list
-      await isReadyForConnect(appId, l.roomId, hathoraSdk);
+      await isReadyForConnect(appId, lobby.roomId, hathoraSdk);
       setReadyRooms((prev) => {
         return new Set([...prev, l.roomId]);
       });
@@ -54,10 +54,10 @@ export function PublicLobbyList(props: PublicLobbyListProps) {
         >
           {lobbies.length > 0 ? (
             lobbies
-              .filter((l) => readyRooms.has(l.roomId))
+              .filter((lobby) => readyRooms.has(lobby.roomId))
               .sort((a, b) => (new Date(b.createdAt).getTime() || 0) - (new Date(a.createdAt).getTime() || 0))
               .map((lobby, index) => {
-                const roomConfig = JSON.parse(lobby.roomConfig) as RoomConfig;
+                const roomConfig = JSON.parse(lobby.roomConfig ?? "{}") as RoomConfig;
                 return (
                   <tr
                     key={`lobby_${lobby.createdBy}_${lobby.createdAt}`}
@@ -90,7 +90,7 @@ export function PublicLobbyList(props: PublicLobbyListProps) {
                         <div className={"flex items-center gap-1 text-xxs"}>
                           <ClockIcon className="h-4 w-4 text-secondary-700" />
                           <span className={"max-w-[160px] text-ellipsis overflow-hidden whitespace-nowrap"}>{`${dayjs(
-                            lobby.createdAt
+                            lobby.createdAt,
                           ).fromNow()}`}</span>
                         </div>
                         <div className={"flex items-center"}>
@@ -148,18 +148,18 @@ function useLobbies(appId: string): LobbyV3[] {
   const [lobbies, setLobbies] = React.useState<LobbyV3[]>([]);
   React.useEffect(() => {
     if (appId) {
-      hathoraSdk.lobbyV3.listActivePublicLobbies().then(({ classes }) => {
-        if (classes != null) {
-          setLobbies(classes);
+      hathoraSdk.lobbiesV3.listActivePublicLobbies().then((lobbies) => {
+        if (lobbies != null) {
+          setLobbies(lobbies);
         }
       });
     }
   }, [appId]);
   useInterval(() => {
     if (appId) {
-      hathoraSdk.lobbyV3.listActivePublicLobbies().then(({ classes }) => {
-        if (classes != null) {
-          setLobbies(classes);
+      hathoraSdk.lobbiesV3.listActivePublicLobbies().then((lobbies) => {
+        if (lobbies != null) {
+          setLobbies(lobbies);
         }
       });
     }
@@ -178,4 +178,6 @@ export const FLAG_TABLE: Record<Region, string> = {
   Sydney: "🇦🇺",
   Washington_DC: "🇺🇸",
   Sao_Paulo: "🇧🇷",
+  Dallas: "🇺🇸",
+  Los_Angeles: "🇺🇸",
 };
diff --git a/client/src/components/website/ExplanationText.tsx b/client/src/components/website/ExplanationText.tsx
@@ -293,7 +293,7 @@ const hathoraSdk = new HathoraCloud({ appId: env_variable.HATHORA_APP_ID });`}
           <p className={"text-neutralgray-300 mt-4 mb-2 ml-1 font-hathoraBody"}>
             Authenticated players (via client) can create lobbies
           </p>
-          <CodeBlock>{`const { lobbyV3 } = await hathoraSdk.lobbyV3.createLobby(
+          <CodeBlock>{`const { lobbyV3 } = await hathoraSdk.lobbiesV3.createLobby(
   {
     createLobbyV3Params: {
       region: Region.Seattle,
@@ -328,7 +328,7 @@ const hathoraSdk = new HathoraCloud({ appId: env_variable.HATHORA_APP_ID });
           playerNicknameMap: {},
           isGameEnd: false,
         };
-        const { lobbyV3 } = await hathoraSdk.lobbyV3.createLobby(
+        const { lobbyV3 } = await hathoraSdk.lobbiesV3.createLobby(
           {
             createLobbyV3Params: {
               region,
@@ -390,7 +390,7 @@ const hathoraSdk = new HathoraCloud({ appId: env_variable.HATHORA_APP_ID });
           <CodeBlock>{`import { HathoraCloud } from "@hathora/cloud-sdk-typescript";
 const hathoraSdk = new HathoraCloud({ appId: env_variable.HATHORA_APP_ID });
 
-const publicLobbies = hathoraSdk.lobbyV3.listActivePublicLobbies();`}</CodeBlock>
+const publicLobbies = hathoraSdk.lobbiesV3.listActivePublicLobbies();`}</CodeBlock>
         </div>
         <div className={`${showReactUsage ? "block" : "hidden"}`}>
           <CodeBlock>{`import { HathoraCloud } from "@hathora/cloud-sdk-typescript";
@@ -400,18 +400,18 @@ function useLobbies(appId: string): LobbyV3[] {
   const [lobbies, setLobbies] = React.useState<LobbyV3[]>([]);
   React.useEffect(() => {
     if (appId) {
-      hathoraSdk.lobbyV3.listActivePublicLobbies().then(({ classes }) => {
-        if (classes != null) {
-          setLobbies(classes);
+      hathoraSdk.lobbiesV3.listActivePublicLobbies().then((lobbies) => {
+        if (lobbies != null) {
+          setLobbies(lobbies);
         }
       });
     }
   }, [appId]);
   useInterval(() => {
     if (appId) {
-      hathoraSdk.lobbyV3.listActivePublicLobbies().then(({ classes }) => {
-        if (classes != null) {
-          setLobbies(classes);
+      hathoraSdk.lobbiesV3.listActivePublicLobbies().then((lobbies) => {
+        if (lobbies != null) {
+          setLobbies(lobbies);
         }
       });
     }
@@ -477,12 +477,12 @@ const hathoraSdk = new HathoraCloud({ appId: env_variable.HATHORA_APP_ID });`}
             </Link>
           </p>
           <CodeBlock>{`// This step is only needed if you want to validate RoomConfig before connecting a player
-const lobbyInfo = await hathoraSdk.lobbyV3.getLobbyInfoByRoomId(roomId);
+const lobbyInfo = await hathoraSdk.lobbiesV3.getLobbyInfoByRoomId(roomId);
 // lobbyInfo will contain details like region and roomConfig`}</CodeBlock>
           <p id={"connectionInfo"} className={"text-neutralgray-300 mt-4 mb-2 ml-1 font-hathoraBody"}>
             <a href="#connectionInfo">Get connection info (host and port) to route your player</a>
           </p>
-          <CodeBlock>{`const { connectionInfoV2 } = await hathoraSdk.roomV2.getConnectionInfo(roomId);
+          <CodeBlock>{`const { connectionInfoV2 } = await hathoraSdk.roomsV2.getConnectionInfo(roomId);
 
 // Use your network transport of choice (using Hathora BuildKits here)
 import { HathoraConnection } from "@hathora/client-sdk";
@@ -515,7 +515,7 @@ if ( roomIdFromUrl != null ) {
           const connect = new HathoraConnection(roomIdFromUrl, connectionInfo);
           connect.onClose(async () => {
             // If game has ended, we want updated lobby info
-            const updatedLobbyInfo = await hathoraSdk.lobbyV3.getLobbyInfoByRoomId(roomIdFromUrl);
+            const updatedLobbyInfo = await hathoraSdk.lobbiesV3.getLobbyInfoByRoomId(roomIdFromUrl);
             const updatedRoomConfig = JSON.parse(updatedLobbyInfo.roomConfig) as RoomConfig | undefined;
             setFailedToConnect(true);
           });
@@ -541,10 +541,10 @@ if ( roomIdFromUrl != null ) {
   const MAX_CONNECT_ATTEMPTS = 50;
   const TRY_CONNECT_INTERVAL_MS = 1000;
 
-  const lobbyInfo = await hathoraSdk.lobbyV3.getLobbyInfoByRoomId(roomIdFromUrl);
+  const lobbyInfo = await hathoraSdk.lobbiesV3.getLobbyInfoByRoomId(roomIdFromUrl);
 
   for (let i = 0; i < MAX_CONNECT_ATTEMPTS; i++) {
-    const res = await hathoraSdk.roomV2.getConnectionInfo(roomId);
+    const res = await hathoraSdk.roomsV2.getConnectionInfo(roomId);
     if (res.connectionInfoV2?.status === ConnectionInfoV2Status.Active) {
       return { lobbyInfo, connectionInfo: res.connectionInfoV2 };
     }
@@ -563,7 +563,7 @@ const hathoraSdk = new HathoraCloud({ appId: env_variable.HATHORA_APP_ID });
 async subscribeUser(roomId: RoomId, userId: string): Promise<void> {
   console.log("subscribeUser", roomId, userId);
   try {
-    const lobbyInfo = await hathoraSdk.lobbyV3.getLobbyInfoByRoomId(roomId);
+    const lobbyInfo = await hathoraSdk.lobbiesV3.getLobbyInfoByRoomId(roomId);
     const roomConfig = JSON.parse(lobbyInfo.roomConfig) as RoomConfig | undefined;
 
     if (!rooms.has(roomId)) {
@@ -642,7 +642,7 @@ const hathoraSdk = new HathoraCloud({
 
 // RoomConfig is meant to hold custom objects
 let myCustomRoomConfig = { isGameEnd: true,  winningPlayerId: myGameData.winningPlayerId,}
-const res = await hathoraSdk.roomV2.updateRoomConfig({
+const res = await hathoraSdk.roomsV2.updateRoomConfig({
   roomConfig: JSON.stringify(myCustomRoomConfig)
 }, roomId);`}</CodeBlock>
         </div>
@@ -662,7 +662,7 @@ async function updateRoomConfig(game: InternalState, roomId: string) {
     isGameEnd: game.isGameEnd,
     winningPlayerId: game.winningPlayerId,
   };
-  return await hathoraSdk.roomV2.updateRoomConfig({ roomConfig: JSON.stringify(roomConfig) }, roomId);
+  return await hathoraSdk.roomsV2.updateRoomConfig({ roomConfig: JSON.stringify(roomConfig) }, roomId);
 }`}</CodeBlock>
           <BulletManiaCodeLink
             links={[
@@ -699,7 +699,7 @@ const hathoraSdk = new HathoraCloud({
 
 // ...Disconnect players...
 
-const lobby = hathoraSdk.roomV2.destroyRoom(roomId);`}</CodeBlock>
+const lobby = hathoraSdk.roomsV2.destroyRoom(roomId);`}</CodeBlock>
         </div>
         <div className={`${showReactUsage ? "block" : "hidden"}`}>
           <CodeBlock>{`import { HathoraCloud } from "@hathora/cloud-sdk-typescript";
@@ -722,7 +722,7 @@ async function endGameCleanup(roomId: string, game: InternalState, winningPlayer
       server.closeConnection(roomId, playerId, "game has ended, disconnecting players");
     });
     console.log("destroying room: ", roomId);
-    hathoraSdk.roomV2.destroyRoom(roomId);
+    hathoraSdk.roomsV2.destroyRoom(roomId);
   }, 10000);
 }`}</CodeBlock>
           <BulletManiaCodeLink