Fullscreen support for CXF
- Games are loaded into an HTML
- CXF extensions are loaded into
iframes as well.
This creates an HTML document structure like this:
top(window) | +--- iframe #game | +--- iframe #cxf_1 : :
#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.
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:
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
- We lint all code with
xoas part of testing.
- We want 100% code coverage. This is ensured by
$ npm test
build, then bumps the
version and commits and tags this version using standard-version.
$ npm run release $ npm publish
You likely don’t need to ever run this manually. Use Release instead
The build step bundles the package into
Tests are run before building to ensure we’re building a working version.
$ npm run build