[v2] WIP: Scaffolds new room/match

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

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export interface Credential {
+  playerID: string;
+  playerCredentials: string;
+}
+
+export interface FbgCredentialResult {
+  loaded: boolean;
+  credential?: Credential;
+}
+
+export interface FbgCredentialInput {
+  hostname: string;
+  gameId: string;
+  roomId: string;
+}
+
+export function useCredential(input: FbgCredentialInput): FbgCredentialResult {
+  return {
+    loaded: true,
+    credential: { playerID: "0", playerCredentials: "foo" },
+  };
+}

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`,
       {

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

@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+
+export interface FbgRoomResult {
+  loaded: boolean;
+  matchStarted?: boolean;
+}
+
+export interface FbgRoomInput {
+  hostname: string;
+  nickname: string;
+  gameId: string;
+  roomId: string;
+}
+
+export function useRoom(): FbgRoomResult {
+  // useCredential
+  return { loaded: true, matchStarted: 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

@@ -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,63 @@
+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();
+  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>
+      <>
+        ROOM 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 Room;