party games for phones
rocketcrab is a lobby service and launcher for mobile web party games.
config/games/_template.tsand fill it out for your game
Rocketcrab makes it easy for players to discover your game, and easily switch to and from your game without having to manually open a different website and enter a new game code. It accomplishs this by putting your game's page into an
iframe, which allows any of your cookies, local storage, analytics, and advertising to continue working, while disallowing rocketcrab from manipulating your site. Integrating your game with rocketcrab should be a simple process, but please let me know by opening an issue or joining our Discord if there is any way it could be better!
The name Rocketcrab is the first thing I could think of that sounded cool, had an available
.comdomain, and could be represented by two emojis. It also does not have an ambigious spelling when spoken out loud (there's only one way to spell "rocket" and "crab"), which is important when trying to get your whole group to go to the site to play games!
Games are added to rocketcrab via config files located here. By looking at the config files of other games, you might be able to understand how other games implement rocketcrab, and how you might integrate rocketcrab into your game. Here's what you need to know:
Rocketcrab works by opening your game in an
iframeon all of the players' devices. At minimum, for your game to work with rocketcrab, there must be:
https://yourgame.com/api/creategame, which returns the generated game code, like
https://yourgame.com/abcdwill be opened on every player's browser, resulting in them all being in the same game together)
That's it! Many existing games already offer these, and can work with rocketcrab without any changes! But, to make the experience of playing your game with rocketcrab even better, you may need to make a few minor changes, explained in the "The automatic query params" section below.
The config files, as mentioned above, should be fairly self explanatory. Along with the config template, check out the config files of other games to see how they implement rocketcrab. The most important part, which will be explained here, is the
connectToGamefunction. This function:
async, which will allow you to use
player(required) an object with these properties:
url(required) string of the url that should be opened in every player's
customQueryParams(optional) a record of query params in addition to or to replace the automatic query params.
afterQueryParams(optional) string that will be appended to the
player.urlafter automatic and custom query params are applied.
host(optional) an object with these properties:
url(optional) string of a url to be opened only in the "host" player's
iframe. If not provided, the
playerobject will be used.
customQueryParams(optional) same as
playerobject, but only applied to the host.
afterQueryParams(optional) same as
playerobject, but only applied to the host.
Here are two examples of different
spyfall.tannerkrewson.com/abcd. So, instead of returning the game code from
codeproperty, the game code is directly appended to the
player.urlbefore it is returned from
connectToGamefunction can itself generate a code, and we cross our fingers and hope it's unique! 😂 The resulting
player.urlwill look something like this:
connectToGameis automatically appended with 3 query params. The resulting
player.urlthat is opened in every player's
iframewill look something like this:
rocketcrabwill always be true, well, if you're using rocketcrab, that is! 😂 You can use this to put your game into a "rocketcrab" mode. Here are some ideas for how this could be helpful:
rocketcrab=true, you should hide any UI in your game that shows the game code!
rocketcrab=true, they're already playing with on rocketcrab! 😂
nameis a string of the name that each player has entered into rocketcrab. Use this instead of asking for your players' names a second time!
truefor the one player that is the host of the rocketcrab party, and
falsefor all other players. A few caveats:
iframefirst, and will wait a few seconds before opening the
iframeof the rest of the players. This is not a guaranteed solution, as the
iframeAPI does not allow rocketcrab to know when its page has loaded.
codeparameter for the game code. This was removed in favor of using a custom query param, detailed further in the template.
If your game already has a player base, our goal is to make rocketcrab just as easy, if not easier, to use than how they already play. Rocketcrab is also a great way for your players to discover new games, which helps developers with no players yet find players for their games! So, we will want to make the process of discovering and jumping into a rocketcrab party from your game's existing lobby as painless as possible! Here's two features of rocketcrab to help:
https://rocketcrab.com/transfer/[your game's id here]/.
idthat is set for your game in its config file. For example, Drawphone's is
drawphone, so the link would look like
https://rocketcrab.com/transfer/[your game's id here]/[insert a uuid here].
This is a Next.js project bootstrapped with
with-typescript-eslint-jesttemplate, which includes:
huskyfor commit hooks
First, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying
pages/index.js. The page auto-updates as you edit the file.
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!