seperate player and host in connectToGame

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

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 },
         };
     },
 };

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 },
         };
     },
 };

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
 

config/games/alenros.ts

@@ -42,7 +42,7 @@ const connectToGame = (wsUrl, baseUrl) => async () => {
     ws.close();
 
     return {
-        playerURL: baseUrl + accessCode,
+        player: { url: baseUrl + accessCode },
     };
 };
 

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 },
         };
     },
 

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 },
         };
     },
 };

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,
+                },
             },
         };
     },

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: {

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,
+            },
         };
     },
 };

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 },
         };
     },
 };

config/games/netgamesio.ts

@@ -34,7 +34,7 @@ const gameTemplate = (
             "https://netgames.io/games/" + urlId + "/new"
         );
         return {
-            playerURL: newGame.url,
+            player: { url: newGame.url },
         };
     },
 });

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"),
+            },
         };
     },
 };

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,
+                },
             },
         };
     },

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 },
         };
     },
 };

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 = ({

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", () => {