tannerkrewson / rocketcrab

I'd prefer to use URL fragments (the hash) rather than QueryString parameters for integrating 🚀 🦀

Additionally, it looks like 🚀 🦀 will always blindly append QS parameters. As well as being inflexible, this will break if the player/host URL already includes a Query String. Adding a second ? symbol at the end means we're getting an invalid URL.

To address both of these issues, would it be possible to provide templates for the URLs?

I don't want to try and second guess the best way you can think of to achieve this, but by way of an example:

    getJoinGameUrl: async () => {
        const newUrl = "https://spyfall.tannerkrewson.com/new";
        const { jsonRes } = await postJson(newUrl);
        return {
            // example that duplicates the existing behaviour
            playerURLTemplate:
                "https://coolgameonline.com/room/" + jsonRes.code + "?rocketcrab=true&name=${NAME}&ishost=${ISHOST}&code=${CODE}",
            // templated example
            hostURLTemplate:
                "https://coolgameonline.com/room/?internalParam=abc#hideCode&name=${NAME}&code=" + jsonRes.code + "&hostKey=" + jsonRes.hostKey,
        };
    },

In this example, providing templates instead of exact URLs means that the developer doing the integration can choose the exact format of the URL, and 🚀 🦀 will fill in the parameters (via ${PARAM}) when it knows them. There would not be any automatic query params appended in this case. I don't feel strongly about this approach or syntax of course, just an example. I'll be happy to chat further if that's helpful.

This isn't super urgent, there's not a huge technical reason for needing it to be this way so if this isn't a priority for you then no worries and I'll do the integration anyway.

Thank you!

I've been working on the integration for Quack Stanley and bumped up against one of the walls mentioned above. I've implemented the various codes and settings using QS params and now 🚀 🦀 is generating an invalid URL for the game host.

Here's an example of a createGameCode function for Quack Stanley's configuration file (I have been working on this locally).

    getJoinGameUrl: async () => {
        const response = await postJson(
            "http://localhost:9001/api",
            { operation: "setup-game"
            , gameName: "Test game"
            }
        );
        return {
            playerURL: `http://localhost:3001/?gameCode=${response.gameCode}`,
            hostURL: `http://localhost:3001/?gameCode=${response.gameCode}&hostCode=${response.hostCode}`,
        };
    },

With this configuration, 🚀 🦀 tries to send the host to the following URL:

http://localhost:3001/?gameCode=abcd&hostCode=1234?rocketcrab=true&name=Host&ishost=true

The second question mark is invalid, this needs to be an & character instead.

It would be possible to omit the gameCode and use a plain URL for the playerURL config here, since the gameCode can be automatically added by the 🚀 🦀 server. However, you'll see that the hostURL includes a hostCode parameter returned by the server. This is to specify the host player without needing to rely on the isHost=true parameter that 🚀 🦀 automatically appends.

I can raise a Pull Request to fix the 'automatic append' logic for querystrings, so that it selects a ? or & character as needed, but I wondered if you had given any thought to making this logic more flexible?

Thanks again.

For the record, the relevant parts of the 🚀 🦀 source code appear to be the following:

rocketcrab/components/in-game/GameFrame.tsx

Line 43 in 82dcefe

const appendToUrl = "?" + new URLSearchParams(params).toString();

rocketcrab/components/molecules/GameFrame.tsx

Line 43 in d3b0495

const appendToUrl = "?" + new URLSearchParams(params).toString();

sorry for the delay in my response!

i think you're right, the logic should be more flexible with the query string appending. but do you think this config option would work for your use case?

rocketcrab/config/games/_template.ts

Lines 87 to 104 in 0debeb0

    
               /* 
        
                  By default, rocketcrab will automatically apply some params to playerURL like so: 
        
                  https://yourgame.com/?rocketcrab=true&name=Mary&ishost=true&code=abcd 
        
                  If you need those values to have different key names, use renameParams. For example, 
        
                  the below renameParams will make the above URL look like this instead: 
        
                  https://yourgame.com/?boosterfish=true&nickname=Mary&admin=true&gamecode=abcd 
        
                  You don't need to include all of them; just the ones you need. 
        
               */ 
        
               renameParams: { 
        
                   rocketcrab: "boosterfish", 
        
                   name: "nickname", 
        
                   ishost: "admin", 
        
                   code: "gamecode", 
        
               }, // optional

i'm guessing no since you require a few more parameters, like the host code or what not. either way you're right it should be a bit more flexible.

Alas, renaming params isn't enough here. Thanks for pointing that out though, that does seem like a great idea!

This wouldn't solve the double ? problem since as you've observed, it wouldn't prevent me from needing to append a hostCode. The constraint I'm working within is that Quack Stanley is served static out of S3 and CloudFront's routing is quite limited so I'm trying to stick with a single path for the application (/).

Incidentally, I noticed the following in the README:

In Drawphone, for example, the first player who joins a party is made the host. So, rocketcrab will load the host's iframe first, and will wait a few seconds before opening the iframe of the rest of the players. This is not a guaranteed solution, as the iframe API does not allow rocketcrab to know when its page has loaded.

The hostCode param I've added to QuackStanley addresses precisely this point by ensuring only the 🚀 🦀 host can become the host in the QuackStanley game. This might itself be a useful feature to include in 🚀 🦀, or at least an approach worth documenting.

Apologies again for the delay!

I just finished up a redesign of the getJoinGameUrl function. It's now called connectToGame.

rocketcrab/config/games/_template.ts

Lines 69 to 164 in 58323a5

    
               // see https://github.com/tannerkrewson/rocketcrab#step-2-creating-a-config-file 
        
               // note that this will be running on the rocketcrab server, and will run once per party, not per player. 
        
               // this function will be ran in a try catch, so no need to worry about crashing the server! 😆 
        
               connectToGame: async () => { 
        
                   // this is an example of one way it could be done. you could put any code here to do what you need to do! 
        
                   // check other config files for more exmaples. 
        
                   // this makes a get request 
        
                   const res = await fetch("https://coolgameonline.com/api/new"); 
        
                   const jsonRes = await res.json(); 
        
                   return { 
        
                       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 
        
                       /* 
        
                           If you want the host player to use a different url,  
        
                           customQueryParams, and/or afterQueryParams, include this host  
        
                           property! 
        
                           This property itself and everything in it is optional. 
        
                           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. 
        
                       */ 
        
                       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 
        
                   }; 
        
               }, // required 
        
               /* 
        
                  By default, rocketcrab will automatically apply some params to playerURL  
        
                  like so: 
        
                  https://yourgame.com/?rocketcrab=true&name=Mary&ishost=true 
        
                  If you need those values to have different key names, use renameParams. 
        
                  For example, the below renameParams will make the above URL look like  
        
                  this instead: 
        
                  https://yourgame.com/?boosterfish=true&nickname=Mary&admin=true 
        
                  You don't need to include all of them; just the ones you need. 
        
                  If you want to replace the values of these properties and not just the 
        
                  names, use customQueryParams. 
        
               */ 
        
               renameParams: { 
        
                   rocketcrab: "boosterfish", 
        
                   name: "nickname", 
        
                   ishost: "admin", 
        
               }, // optional

Let me know if the new features work for your use case! 😄

	/*
	By default, rocketcrab will automatically apply some params to playerURL like so:

	https://yourgame.com/?rocketcrab=true&name=Mary&ishost=true&code=abcd

	If you need those values to have different key names, use renameParams. For example,
	the below renameParams will make the above URL look like this instead:

	https://yourgame.com/?boosterfish=true&nickname=Mary&admin=true&gamecode=abcd

	You don't need to include all of them; just the ones you need.
	*/
	renameParams: {
	rocketcrab: "boosterfish",
	name: "nickname",
	ishost: "admin",
	code: "gamecode",
	}, // optional

	// see https://github.com/tannerkrewson/rocketcrab#step-2-creating-a-config-file
	// note that this will be running on the rocketcrab server, and will run once per party, not per player.
	// this function will be ran in a try catch, so no need to worry about crashing the server! 😆
	connectToGame: async () => {
	// this is an example of one way it could be done. you could put any code here to do what you need to do!
	// check other config files for more exmaples.

	// this makes a get request
	const res = await fetch("https://coolgameonline.com/api/new");
	const jsonRes = await res.json();

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

	/*
	If you want the host player to use a different url,
	customQueryParams, and/or afterQueryParams, include this host
	property!

	This property itself and everything in it is optional.

	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.
	*/
	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
	};
	}, // required

	/*
	By default, rocketcrab will automatically apply some params to playerURL
	like so:

	https://yourgame.com/?rocketcrab=true&name=Mary&ishost=true

	If you need those values to have different key names, use renameParams.
	For example, the below renameParams will make the above URL look like
	this instead:

	https://yourgame.com/?boosterfish=true&nickname=Mary&admin=true

	You don't need to include all of them; just the ones you need.

	If you want to replace the values of these properties and not just the
	names, use customQueryParams.
	*/
	renameParams: {
	rocketcrab: "boosterfish",
	name: "nickname",
	ishost: "admin",
	}, // optional

Templating for for player / host URLs