From 58323a58d4ee0f33e83cbd197af84a32c9c999d4 Mon Sep 17 00:00:00 2001
From: tannerkrewson <tannerkrewson@gmail.com>
Date: Sat, 23 Jan 2021 11:00:09 -0600
Subject: [PATCH] seperate player and host in connectToGame

---
 components/in-game/GameFrame.tsx | 60 ++++-------------------
 config/games/_protobowl.ts       |  2 +-
 config/games/_setwithfriends.ts  |  2 +-
 config/games/_template.ts        | 82 +++++++++++++++++++++-----------
 config/games/alenros.ts          |  2 +-
 config/games/codenames.ts        |  2 +-
 config/games/cosel.ts            |  2 +-
 config/games/drawphone.ts        |  8 ++--
 config/games/fishbowl.ts         |  4 +-
 config/games/justone.ts          |  4 +-
 config/games/longwave.ts         |  2 +-
 config/games/netgamesio.ts       |  2 +-
 config/games/qwiqwit.ts          |  8 ++--
 config/games/snakeout.ts         |  8 ++--
 config/games/spyfall.ts          |  2 +-
 server/rocketcrab.ts             | 12 ++---
 test/server/rocketcrab.test.ts   | 13 ++---
 types/types.ts                   | 14 ++++--
 utils/useConnectedGame.ts        | 42 ++++++++++++++++
 19 files changed, 152 insertions(+), 119 deletions(-)
 create mode 100644 utils/useConnectedGame.ts

diff --git a/components/in-game/GameFrame.tsx b/components/in-game/GameFrame.tsx
index 694399c..cd4e5b1 100644
--- a/components/in-game/GameFrame.tsx
+++ b/components/in-game/GameFrame.tsx
@@ -1,6 +1,7 @@
 import { GameStatus } from "../../types/enums";
 import { Loading } from "@geist-ui/react";
 import { ClientGame, GameState, Player } from "../../types/types";
+import { useConnectedGame } from "../../utils/useConnectedGame";
 
 const GameFrame = ({
     gameState,
@@ -9,54 +10,18 @@ const GameFrame = ({
     thisPlayer,
     frameRefreshCount,
 }: GameFrameProps): JSX.Element => {
-    const {
-        status,
-        joinGameURL: {
-            playerURL,
-            hostURL,
-            customQueryParams,
-            afterQueryParams,
-        },
-    } = gameState;
+    const { status, connectedGame } = gameState;
 
-    const { renameParams } = thisGame;
-    const { name, isHost } = thisPlayer;
+    const { isHost } = thisPlayer;
 
-    const paramKeys = {
-        rocketcrab: "rocketcrab",
-        name: "name",
-        ishost: "ishost",
-        ...renameParams,
-    };
-
-    const defaultParams = {
-        rocketcrab: "true",
-        name,
-        ishost: isHost.toString(),
-    };
-
-    const params = {
-        ...Object.keys(paramKeys).reduce(
-            (acc, name) => ({
-                ...acc,
-                [paramKeys[name]]: defaultParams[name],
-            }),
-            {}
-        ),
-        ...customQueryParams,
-    };
-
-    const appendToUrl =
-        "?" + new URLSearchParams(params).toString() + (afterQueryParams ?? "");
+    const gameUrl = useConnectedGame(connectedGame, thisGame, thisPlayer);
 
     const showLoading = status === GameStatus.loading;
     const showError = status === GameStatus.error;
     const showWaitingForHost = !isHost && status === GameStatus.waitingforhost;
-    const showGameFrame = !isHost && status === GameStatus.inprogress;
-    const showHostGameFrame =
-        isHost &&
-        (status === GameStatus.inprogress ||
-            status === GameStatus.waitingforhost);
+    const showGameFrame =
+        (isHost && status === GameStatus.waitingforhost) ||
+        status === GameStatus.inprogress;
 
     return (
         <>
@@ -123,16 +88,9 @@ const GameFrame = ({
             {showGameFrame && (
                 <iframe
                     className="frame"
-                    src={playerURL + appendToUrl}
-                    key={frameRefreshCount}
-                ></iframe>
-            )}
-            {showHostGameFrame && (
-                <iframe
-                    className="frame"
-                    src={hostURL + appendToUrl}
+                    src={gameUrl}
                     key={frameRefreshCount}
-                    onLoad={onHostGameLoaded}
+                    onLoad={isHost ? onHostGameLoaded : undefined}
                 ></iframe>
             )}
             <style jsx>{`
diff --git a/config/games/_protobowl.ts b/config/games/_protobowl.ts
index e4fd74c..7a8e1fa 100644
--- a/config/games/_protobowl.ts
+++ b/config/games/_protobowl.ts
@@ -14,7 +14,7 @@ const game: ServerGame = {
     connectToGame: async () => {
         const id = randomBytes(8).toString("hex");
         return {
-            playerURL: "https://protobowl.com/rocketcrab-" + id,
+            player: { url: "https://protobowl.com/rocketcrab-" + id },
         };
     },
 };
diff --git a/config/games/_setwithfriends.ts b/config/games/_setwithfriends.ts
index 851a411..cfc2657 100644
--- a/config/games/_setwithfriends.ts
+++ b/config/games/_setwithfriends.ts
@@ -59,7 +59,7 @@ const game: ServerGame = {
         );
 
         return {
-            playerURL: "https://setwithfriends.com/room/" + roomName,
+            player: { url: "https://setwithfriends.com/room/" + roomName },
         };
     },
 };
diff --git a/config/games/_template.ts b/config/games/_template.ts
index bccee2f..c772239 100644
--- a/config/games/_template.ts
+++ b/config/games/_template.ts
@@ -78,41 +78,65 @@ const game: ServerGame = {
         const jsonRes = await res.json();
 
         return {
-            playerURL: "https://coolgameonline.com/room/" + jsonRes.code, // required
-            hostURL:
-                "https://coolgameonline.com/room/" + jsonRes.code + "/host", // optional. if not used, rocketcrab host will use playerURL
+            player: {
+                url: "https://coolgameonline.com/room/" + jsonRes.code, // required
+
+                /*
+                    if you want to add (or replace!) the automatic query params 
+                    (see the readme for a list of these), use customQueryParams!
+                    
+                    with the below customQueryParams, playerURL would look 
+                    something like:
+                    https://coolgameonline.com/room/abcd/?rocketcrab=haha&name=Mary&ishost=false&foo=bar&baz=qux
+
+                    Note: Prefer to use the renameParams (detailed below) over 
+                    customQueryParams if possible.
+                */
+                customQueryParams: {
+                    foo: "bar",
+                    baz: "qux",
+                    rocketcrab: "haha", // this is an example of replacing an automatic query param
+                }, // optional
+
+                /*
+                    query params will be appended to playerURL and hostURL 
+                    automatically. a string provided to afterQueryParams will be 
+                    appended after that!
+
+                    with the below afterQueryParams, playerURL would look something 
+                    like:
+                    https://coolgameonline.com/room/abcd/?rocketcrab=true&name=Mary&ishost=false#foo
+                */
+                afterQueryParams: "#foo", // optional
+
+                /*
+                    NOTE: feel free to use both customQueryParams and afterQueryParams
+                    together! afterQueryParams will be appended after the automatic
+                    and custom query params.
+                */
+            }, // required
 
             /*
-                query params will be appended to playerURL and hostURL 
-                automatically. a string provided to afterQueryParams will be 
-                appended after that!
-
-                with the below afterQueryParams, playerURL would look something 
-                like:
-                https://coolgameonline.com/room/abcd/?rocketcrab=true&name=Mary&ishost=false#foo
-            */
-            afterQueryParams: "#foo", // optional
-
-            /*
-                if you want to add (or replace!) the automatic query params 
-                (see the readme for a list of these), use customQueryParams!
+                If you want the host player to use a different url, 
+                customQueryParams, and/or afterQueryParams, include this host 
+                property!
                 
-                with the below customQueryParams, playerURL would look 
-                something like:
-                https://coolgameonline.com/room/abcd/?rocketcrab=haha&name=Mary&ishost=false&foo=bar&baz=qux
+                This property itself and everything in it is optional.
 
-                Note: Prefer to use the renameParams (detailed below) over 
-                customQueryParams if possible.
+                If this host property or anything it contains is not included, 
+                rocketcrab will use whatever was set in the above player 
+                property for the host.
+                
+                If you want the host player to NOT have something that was 
+                included in the player property, you will need to include it in 
+                the host property and set it as blank or otherwise.
             */
-            customQueryParams: {
-                foo: "bar",
-                baz: "qux",
-                rocketcrab: "haha", // this is an example of replacing an automatic query param
+            host: {
+                url:
+                    "https://coolgameonline.com/room/" + jsonRes.code + "/host", // optional. if not used, rocketcrab host will use playerURL
+                customQueryParams: {}, // optional. see player property for details.
+                afterQueryParams: "", // optional. see player property for details.
             }, // optional
-
-            // feel free to use both customQueryParams and afterQueryParams
-            // together! afterQueryParams will be appended after the automatic
-            // and custom query params.
         };
     }, // required
 
diff --git a/config/games/alenros.ts b/config/games/alenros.ts
index b12174f..83188d5 100644
--- a/config/games/alenros.ts
+++ b/config/games/alenros.ts
@@ -42,7 +42,7 @@ const connectToGame = (wsUrl, baseUrl) => async () => {
     ws.close();
 
     return {
-        playerURL: baseUrl + accessCode,
+        player: { url: baseUrl + accessCode },
     };
 };
 
diff --git a/config/games/codenames.ts b/config/games/codenames.ts
index 6e6fcc0..c41b235 100644
--- a/config/games/codenames.ts
+++ b/config/games/codenames.ts
@@ -37,7 +37,7 @@ const game: ServerGame = {
         }, 10 * 1000);
 
         return {
-            playerURL: "https://codenames.game/room/" + name,
+            player: { url: "https://codenames.game/room/" + name },
         };
     },
 
diff --git a/config/games/cosel.ts b/config/games/cosel.ts
index cd76e58..48c9e76 100644
--- a/config/games/cosel.ts
+++ b/config/games/cosel.ts
@@ -41,7 +41,7 @@ const game: ServerGame = {
         const jsonRes = await res.json();
 
         return {
-            playerURL: "https://cosel.io/game/" + jsonRes.game.hash,
+            player: { url: "https://cosel.io/game/" + jsonRes.game.hash },
         };
     },
 };
diff --git a/config/games/drawphone.ts b/config/games/drawphone.ts
index 75cec2c..9557b40 100644
--- a/config/games/drawphone.ts
+++ b/config/games/drawphone.ts
@@ -34,9 +34,11 @@ const game: ServerGame = {
         const newUrl = "https://drawphone.tannerkrewson.com/new";
         const { gameCode } = await postJson(newUrl);
         return {
-            playerURL: "https://drawphone.tannerkrewson.com/",
-            customQueryParams: {
-                code: gameCode,
+            player: {
+                url: "https://drawphone.tannerkrewson.com/",
+                customQueryParams: {
+                    code: gameCode,
+                },
             },
         };
     },
diff --git a/config/games/fishbowl.ts b/config/games/fishbowl.ts
index fa2872a..a6d3799 100644
--- a/config/games/fishbowl.ts
+++ b/config/games/fishbowl.ts
@@ -36,7 +36,9 @@ const game: ServerGame = {
             variables: null,
         });
         return {
-            playerURL: "https://fishbowl-game.com/game/" + join_code + "/lobby",
+            player: {
+                url: "https://fishbowl-game.com/game/" + join_code + "/lobby",
+            },
         };
     },
     renameParams: {
diff --git a/config/games/justone.ts b/config/games/justone.ts
index 6f42906..9544026 100644
--- a/config/games/justone.ts
+++ b/config/games/justone.ts
@@ -33,7 +33,9 @@ const game: ServerGame = {
     connectToGame: async () => {
         const id = randomBytes(8).toString("hex");
         return {
-            playerURL: "https://just1.herokuapp.com/room/rocketcrab-" + id,
+            player: {
+                url: "https://just1.herokuapp.com/room/rocketcrab-" + id,
+            },
         };
     },
 };
diff --git a/config/games/longwave.ts b/config/games/longwave.ts
index 204003b..cfff7f1 100644
--- a/config/games/longwave.ts
+++ b/config/games/longwave.ts
@@ -28,7 +28,7 @@ const game: ServerGame = {
     connectToGame: async () => {
         const id = randomBytes(8).toString("hex");
         return {
-            playerURL: "https://longwave.web.app/rocketcrab-" + id,
+            player: { url: "https://longwave.web.app/rocketcrab-" + id },
         };
     },
 };
diff --git a/config/games/netgamesio.ts b/config/games/netgamesio.ts
index 0b9bac6..367a501 100644
--- a/config/games/netgamesio.ts
+++ b/config/games/netgamesio.ts
@@ -34,7 +34,7 @@ const gameTemplate = (
             "https://netgames.io/games/" + urlId + "/new"
         );
         return {
-            playerURL: newGame.url,
+            player: { url: newGame.url },
         };
     },
 });
diff --git a/config/games/qwiqwit.ts b/config/games/qwiqwit.ts
index 95df33f..1eabb90 100644
--- a/config/games/qwiqwit.ts
+++ b/config/games/qwiqwit.ts
@@ -22,9 +22,11 @@ const game: ServerGame = {
     ],
     connectToGame: async () => {
         return {
-            playerURL:
-                "https://www.qwiqwit.com/autojoin/" +
-                randomBytes(8).toString("hex"),
+            player: {
+                url:
+                    "https://www.qwiqwit.com/autojoin/" +
+                    randomBytes(8).toString("hex"),
+            },
         };
     },
 };
diff --git a/config/games/snakeout.ts b/config/games/snakeout.ts
index f71fe9c..d9310b9 100644
--- a/config/games/snakeout.ts
+++ b/config/games/snakeout.ts
@@ -38,9 +38,11 @@ const game: ServerGame = {
         const newUrl = "https://snakeout.tannerkrewson.com/new";
         const { gameCode } = await postJson(newUrl);
         return {
-            playerURL: "https://snakeout.tannerkrewson.com/",
-            customQueryParams: {
-                code: gameCode,
+            player: {
+                url: "https://snakeout.tannerkrewson.com/",
+                customQueryParams: {
+                    code: gameCode,
+                },
             },
         };
     },
diff --git a/config/games/spyfall.ts b/config/games/spyfall.ts
index c5d4594..5ba5967 100644
--- a/config/games/spyfall.ts
+++ b/config/games/spyfall.ts
@@ -42,7 +42,7 @@ const game: ServerGame = {
         const newUrl = "https://spyfall.tannerkrewson.com/new";
         const { gameCode } = await postJson(newUrl);
         return {
-            playerURL: "https://spyfall.tannerkrewson.com/" + gameCode,
+            player: { url: "https://spyfall.tannerkrewson.com/" + gameCode },
         };
     },
 };
diff --git a/server/rocketcrab.ts b/server/rocketcrab.ts
index db61d43..636ecda 100644
--- a/server/rocketcrab.ts
+++ b/server/rocketcrab.ts
@@ -96,7 +96,6 @@ export const newParty = ({
         selectedGameId: "",
         gameState: {
             status: GameStatus.loading,
-            joinGameURL: { playerURL: "", hostURL: "" },
         },
         nextPlayerId: 0,
         idealHostId: 0,
@@ -325,7 +324,7 @@ export const startGame = async (
     });
 
     try {
-        gameState.joinGameURL = await game.connectToGame();
+        gameState.connectedGame = await game.connectToGame();
     } catch (e) {
         console.error(e);
 
@@ -337,12 +336,6 @@ export const startGame = async (
 
     gameState.status = GameStatus.waitingforhost;
 
-    // if config does not provide a specific url for the host,
-    // just use the same one for the host as other players
-    if (!gameState.joinGameURL.hostURL) {
-        gameState.joinGameURL.hostURL = gameState.joinGameURL.playerURL;
-    }
-
     const host = getHost(playerList);
 
     const onHostGameLoaded = () => {
@@ -368,7 +361,8 @@ export const exitGame = (party: Party): void => {
 
     const { gameState } = party;
     gameState.status = GameStatus.loading;
-    gameState.joinGameURL = { playerURL: "", hostURL: "" };
+    delete gameState.connectedGame;
+    delete gameState.error;
 };
 
 export const getFinderState = ({
diff --git a/test/server/rocketcrab.test.ts b/test/server/rocketcrab.test.ts
index 964d0f0..6f73aca 100644
--- a/test/server/rocketcrab.test.ts
+++ b/test/server/rocketcrab.test.ts
@@ -39,7 +39,7 @@ jest.mock("../../config", () => ({
                     id: "jd-foogame",
                     name: "FooGame",
                     connectToGame: async () => ({
-                        playerURL: "foogame.com",
+                        player: { url: "foogame.com" },
                     }),
                 } as ServerGame,
                 { id: "lk-coolgame", name: "CoolGame" } as ServerGame,
@@ -474,9 +474,10 @@ describe("server/rocketcrab.ts", () => {
             selectedGameId: "FooGame",
             gameState: {
                 status: GameStatus.inprogress,
-                joinGameURL: {
-                    playerURL: "test.com",
-                    hostURL: "host.com",
+                error: "ahhhhh",
+                connectedGame: {
+                    player: { url: "test.com" },
+                    host: {},
                 },
             },
         });
@@ -485,8 +486,8 @@ describe("server/rocketcrab.ts", () => {
 
         expect(mockParty.status).toBe(PartyStatus.party);
         expect(mockParty.gameState.status).toBe(GameStatus.loading);
-        expect(mockParty.gameState.joinGameURL.playerURL).toBe("");
-        expect(mockParty.gameState.joinGameURL.hostURL).toBe("");
+        expect(mockParty.gameState.error).toBeUndefined();
+        expect(mockParty.gameState.connectedGame).toBeUndefined();
     });
 
     it("getFinderState works", () => {
diff --git a/types/types.ts b/types/types.ts
index bbfacdf..b9af220 100644
--- a/types/types.ts
+++ b/types/types.ts
@@ -90,12 +90,16 @@ export type BasedOn = {
 };
 
 export type ServerGame = ClientGame & {
-    connectToGame: () => Promise<JoinGameURL>;
+    connectToGame: () => Promise<ConnectedGame>;
 };
 
-export type JoinGameURL = {
-    playerURL: string;
-    hostURL?: string;
+export type ConnectedGame = {
+    player: ConnectedGameURL;
+    host?: Partial<ConnectedGameURL>; // this just makes the url optional for host
+};
+
+export type ConnectedGameURL = {
+    url: string;
     customQueryParams?: Record<string, string>;
     afterQueryParams?: string;
 };
@@ -120,7 +124,7 @@ export type ServerGameLibrary = {
 export type GameState = {
     status: GameStatus;
     error?: string;
-    joinGameURL?: JoinGameURL;
+    connectedGame?: ConnectedGame;
 };
 
 export type JoinPartyResponse = {
diff --git a/utils/useConnectedGame.ts b/utils/useConnectedGame.ts
new file mode 100644
index 0000000..e384815
--- /dev/null
+++ b/utils/useConnectedGame.ts
@@ -0,0 +1,42 @@
+import { ClientGame, ConnectedGame, Player } from "../types/types";
+
+export const useConnectedGame = (
+    connectedGame: ConnectedGame,
+    { renameParams }: ClientGame,
+    { isHost, name }: Player
+): string => {
+    if (!connectedGame?.player) return "";
+
+    const { url, customQueryParams, afterQueryParams } = isHost
+        ? { ...connectedGame.player, ...connectedGame.host } // for host, overwrite anything from player onto host
+        : connectedGame.player;
+
+    const paramKeys = {
+        rocketcrab: "rocketcrab",
+        name: "name",
+        ishost: "ishost",
+        ...renameParams,
+    };
+
+    const defaultParams = {
+        rocketcrab: "true",
+        name,
+        ishost: isHost.toString(),
+    };
+
+    const params = {
+        ...Object.keys(paramKeys).reduce(
+            (acc, name) => ({
+                ...acc,
+                [paramKeys[name]]: defaultParams[name],
+            }),
+            {}
+        ),
+        ...customQueryParams,
+    };
+
+    const stringOfCustomQueryParams =
+        "?" + new URLSearchParams(params).toString();
+
+    return url + stringOfCustomQueryParams + (afterQueryParams ?? "");
+};