@goodgamestudios/cxf-fullscreen

cxf-fullscreen

Fullscreen support for CXF

Motivation

• Games are loaded into an HTML iframe.
• CXF extensions are loaded into iframes as well.

This creates an HTML document structure like this:

top(window)
|
+--- iframe #game
|
+--- iframe #cxf_1
:
:

If the #game now switches to fullscreen mode, it does so by calling requestFullscreen(document.body). The browser will then go in fullscreen mode, showing only #game, while hiding all upwards and sibling elements.

Next, a player wants to open a CXF extension, eg by clicking a button. #cxf_1 will remain invisible because the #game is fullscreen, hiding all parent and sibling elements.

Solution

Instead of using #game as the fullscreen element, we use top(window). The difficulty with this is that #game doesn't necessarily have access to top. To make this easier for #game, we install a few helper functions in the CXF global context which the game can then call to toggle fullscreen mode:

• window.CXF.toggleFullscreen()
• window.CXF.requestFullscreen()
• window.CXF.exitFullscreen()
• window.CXF.fullscreen

These functions work across all browsers and resemble the standard Fullscreen API (with the exception of toggleFullscreen(), which is not part of that standard).

Building & Releasing

Test

• We lint all code with xo as part of testing.
• We want 100% code coverage. This is ensured by nyc.

$ npm test

Release

Release runs test and build, then bumps the version and commits and tags this version using standard-version.

$ npm run release
$ npm publish

Build

You likely don’t need to ever run this manually. Use Release instead

The build step bundles the package into dist/index.js using parcel. Tests are run before building to ensure we’re building a working version.

$ npm run build