[v2] WIP: Scaffolds new room/match

v2/fbg-web/infra/hooks/useCredential.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect } from "react";
+
+export interface Credential {
+  playerID: string;
+  playerCredentials: string;
+}
+
+export interface FbgCredentialResult {
+  loaded: boolean;
+  credential?: Credential;
+  error?: string;
+}
+
+export interface FbgCredentialInput {
+  hostname: string;
+  serverId: number;
+  gameId: string;
+  roomId: string;
+  nickname: string;
+}
+
+export function useCredential(input: FbgCredentialInput): FbgCredentialResult {
+  const initialState: FbgCredentialResult = { loaded: false };
+  const [credential, setCredential] = useState(initialState);
+  useEffect(() => {
+    const savedCredential = localStorage.getItem(getKey(input));
+    if (savedCredential) {
+      const credential: Credential = JSON.parse(savedCredential);
+      setCredential({ loaded: true, credential });
+      return;
+    }
+    join(input).then((credential) => {
+      setCredential({ loaded: true, credential });
+    }, (error: any) => {
+      setCredential({ loaded: true, error: `${error}`});
+    });
+  });
+  return credential;
+}
+
+function getKey(input: FbgCredentialInput) {
+  return `credential-${input.serverId}-${input.roomId}`
+}
+
+async function join(input: FbgCredentialInput): Promise<Credential> {
+  const protocol = location.protocol || "http:";
+  const url = `${protocol}//${input.hostname}/games/${input.gameId}/${input.roomId}/join`;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      playerID: '1', // TODO new to detect next playerID
+      playerName: input.nickname
+    })
+  });
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(`Join failed: ${response.status}, ${text}`);
+  }
+  return (await response.json()) as Credential;
+}

v2/fbg-web/infra/hooks/useLogin.ts

@@ -18,10 +18,11 @@ export function useLogin(): [FbgLogin, (nickname: string) => void] {
     } else {
       setLogin({ loaded: true, loggedIn: false });
     }
+    return () => {};
   }, []);
   const setAndSaveLogin = (nickname: string) => {
     localStorage.setItem(LOCALSTORAGE_KEY, nickname);
     setLogin({ loaded: true, loggedIn: true, nickname });
   };
   return [login, setAndSaveLogin];
-}
+}

v2/fbg-web/infra/hooks/useNewRoom.ts

@@ -20,7 +20,7 @@ export function useNewRoom(): [
   const initialState: FbgNewRoomResult = { loaded: false };
   const [newRoom, setNewRoom] = useState(initialState);
   const createNewRoom = (input: FbgNewRoomInput) => {
-    const data = { numPlayers: input.numPlayers };
+    const data = { numPlayers: input.numPlayers, unlisted: true };
     fetch(
       `${location.protocol}//${input.hostname}/games/${input.gameId}/create`,
       {
@@ -30,7 +30,13 @@ export function useNewRoom(): [
           "Content-Type": "application/json",
         },
       }
-    )
+    ) 
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`New Room failed: ${response.status}, ${response.body}`);
+        }
+        return response;
+      })
       .then((response) => response.json())
       .then(
         (responseJson) => {

v2/fbg-web/infra/hooks/useRoom.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { useCredential } from "./useCredential";
+
+export interface FbgRoomResult {
+  loaded: boolean;
+  credential: any;
+  matchStarted?: boolean;
+}
+
+export interface FbgRoomInput {
+  hostname: string;
+  nickname: string;
+  serverId: number;
+  gameId: string;
+  roomId: string;
+}
+
+export function useRoom(input: FbgRoomInput): FbgRoomResult {
+  const credential = useCredential(input);
+  return { loaded: true, matchStarted: false, credential };
+}

v2/fbg-web/infra/hooks/useServer.ts

@@ -5,43 +5,45 @@ const FBG_SERVERS = [null, "charizard", "pikachu"];
 const LOCAL_SERVERS = wrapWithIndex([null, "localhost:8001"]);
 
 export interface FbgServer {
-  resolved: boolean;
-  serversDown?: string[];
+  resolved: boolean; 
   hostname?: string;
   index?: number;
+  error?: string;
 }
 
 export function useServer(i?: number): FbgServer {
   const initialState: FbgServer = { resolved: false };
   const [server, setServer] = useState(initialState);
 
   useEffect(() => {
-    (async () => {
-      let serverList = getServerList();
-      if (i) {
-        setServer(getFbgServer(serverList[i]));
-        return;
-      }
-      serverList.sort(() => Math.random() - 0.5);
-      for (const server of serverList) {
-        if (await isServerUp(server.hostname)) {
-          setServer(getFbgServer(server));
-          return;
-        }
-      }
-      serverList.sort();
-      const serversDown = serverList
-        .filter((x) => x.hostname !== null)
-        .map((x) => x.hostname!);
-      setServer({ resolved: true, serversDown });
-    })();
-    return () => {};
+    const abortController = new AbortController();
+    getServer(abortController.signal, i).then((server) => {
+      setServer(server);
+    }, (error) => {
+      setServer({ resolved: true, error: error.toString() })
+    })
+    return () => { abortController.abort(); };
   }, []);
 
   return server;
 }
 
-function getFbgServer(server: {
+export async function getServer(signal: AbortSignal, i?: number): Promise<FbgServer> {
+  let serverList = getServerList();
+  if (i) {
+    return convertServer(serverList[i]);
+  }
+  serverList.sort(() => Math.random() - 0.5);
+  for (const server of serverList) {
+    if (await isServerUp(signal, server.hostname)) {
+      return convertServer(server);
+    }
+  }
+  serverList.sort();
+  throw new Error("All servers are offline.");
+} 
+
+function convertServer(server: {
   hostname: string | null;
   index: number;
 }): FbgServer {
@@ -71,14 +73,14 @@ function wrapWithIndex(
   return serverList.map((hostname, index) => ({ hostname, index }));
 }
 
-async function isServerUp(hostname: string | null): Promise<boolean> {
+async function isServerUp(signal: AbortSignal, hostname: string | null): Promise<boolean> {
   if (!hostname) {
     return false;
   }
   const protocol = location.protocol || "http:";
   let response;
   try {
-    response = await fetch(`${protocol}//${hostname}/open`);
+    response = await fetch(`${protocol}//${hostname}/open`, {signal});
   } catch (e) {
     return false;
   }

v2/fbg-web/infra/settings/CustomizationBar.tsx

@@ -28,6 +28,7 @@ const CustomizationBar = function (props: CustomizationBarProps) {
     EMPTY_FULL_GAME_CUSTOMIZATION_STATE
   );
   const [showDialog, setShowDialog] = useState(false);
+  // TODO: refactor this into useCustomization hook
   useEffect(() => {
     setCustomizationState(getGameCustomization(props.gameId));
   }, []);

v2/fbg-web/pages/[lang]/[playVerb]/[gameCode]/online/index.tsx

@@ -29,11 +29,11 @@ const NewRoom: NextPage<any> = function (props: NewRoomProps) {
   if (!server.resolved) {
     return <LoadingMessage />;
   }
-  if (server.serversDown) {
+  if (server.error) {
     return (
       <MessagePage
         type="error"
-        message={`Servers down: ${server.serversDown.join(", ")}`}
+        message={server.error}
       />
     );
   }
@@ -58,9 +58,10 @@ const NewRoom: NextPage<any> = function (props: NewRoomProps) {
   if (!newRoom.success || !newRoom.roomId) {
     return <MessagePage type="error" message={`Failed to create room`} />;
   }
-  Router.replace(
-    `/${props.params.lang}/room?s=${server.index}&i=${newRoom.roomId}`
-  );
+  Router.replace({
+    pathname: `/${props.params.lang}/room`,
+    query: { s: server.index, i: newRoom.roomId },
+  });
   return <LoadingMessage />;
 };
 

v2/fbg-web/pages/[lang]/match/index.tsx

@@ -0,0 +1,47 @@
+import languages from "../../../public/locales/languages.json";
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useServer } from "infra/hooks/useServer";
+import { LoadingMessage } from "infra/alert/LoadingMessage";
+import { useLogin } from "infra/hooks/useLogin";
+import { FreeBoardGamesBar } from "fbg-games/gamesShared/components/fbg/FreeBoardGamesBar";
+import { NicknamePrompt } from "infra/widgets/NicknamePrompt";
+
+interface MatchProps {
+  lang: string;
+}
+
+const Match: NextPage<MatchProps> = function (props: MatchProps) {
+  const router = useRouter();
+  const s = router.query.s ? parseInt(router.query.s as string) : undefined;
+  const i = router.query.i;
+  const server = useServer(s);
+  const [login, setLogin] = useLogin();
+  // useCredential
+  if (!server.resolved || !login.loaded) {
+    return <LoadingMessage />;
+  }
+  return (
+    <h1>
+      <>
+        MATCH lang: {props.lang} i: {i} server: {server.hostname} nickname:{" "}
+        {login.nickname}
+      </>
+    </h1>
+  );
+};
+
+export async function getStaticProps({
+  params,
+}: {
+  params: { lang: string };
+}): Promise<{ props: { lang: string } }> {
+  return { props: { lang: params.lang } };
+}
+
+export async function getStaticPaths() {
+  const paths = languages.map((lang: string) => ({ params: { lang } }));
+  return { paths, fallback: false };
+}
+
+export default Match;

v2/fbg-web/pages/[lang]/room/index.tsx

@@ -0,0 +1,71 @@
+import languages from "../../../public/locales/languages.json";
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useServer } from "infra/hooks/useServer";
+import { useRoom } from "infra/hooks/useRoom";
+import { LoadingMessage } from "infra/alert/LoadingMessage";
+import { useLogin } from "infra/hooks/useLogin";
+import { FreeBoardGamesBar } from "fbg-games/gamesShared/components/fbg/FreeBoardGamesBar";
+import { NicknamePrompt } from "infra/widgets/NicknamePrompt";
+import Router from "next/router";
+
+interface RoomProps {
+  lang: string;
+}
+
+const Room: NextPage<RoomProps> = function (props: RoomProps) {
+  const router = useRouter();
+  const s = router.query.s ? parseInt(router.query.s as string) : undefined;
+  const i = router.query.i;
+  const server = useServer(s);
+  const [login, setLogin] = useLogin();
+  const room = useRoom({
+    gameId: 'tictactoe', // TODO: use await getGameIdFromCode(lang, gameCode); 
+    roomId: router.query.i as string,
+    nickname: login.nickname!,
+    serverId: server.index!, 
+    hostname: server.hostname! 
+  });
+  if (!server.resolved || !login.loaded) {
+    return <LoadingMessage />;
+  }
+  if (!login.loggedIn) {
+    return (
+      <FreeBoardGamesBar>
+        <NicknamePrompt setNickname={setLogin} />
+      </FreeBoardGamesBar>
+    );
+  }
+  if (room.matchStarted) {
+    Router.replace({
+      pathname: `/${props.lang}/match`,
+      query: { s: router.query.s, i: router.query.i },
+    });
+    return <LoadingMessage />;
+  }
+  return (
+    <h1>
+      <pre>
+        ROOM lang: {props.lang} i: {i} server: {server.hostname} nickname:
+        {login.nickname}
+
+        {JSON.stringify(room, null, 2)}
+      </pre>
+    </h1>
+  );
+};
+
+export async function getStaticProps({
+  params,
+}: {
+  params: { lang: string };
+}): Promise<{ props: { lang: string } }> {
+  return { props: { lang: params.lang } };
+}
+
+export async function getStaticPaths() {
+  const paths = languages.map((lang: string) => ({ params: { lang } }));
+  return { paths, fallback: false };
+}
+
+export default Room;