@goodgamestudios/cxf-fullscreen

0.0.4 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @goodgamestudios/cxf-fullscreen

Weekly Downloads

10

Version

0.0.4

License

MIT

Unpacked Size

13.2 kB

Total Files

7

Last publish

Collaborators

  • mattiassch-gg
  • ntggs
  • pverza-ggs
  • prosenboom
  • sashamat
  • mbahri
  • rtryputsko-ext-ggs
  • abuhler_ggs
  • jonasbraga-ggs
  • rschmidt-ggs
  • ssydorenko-ggs
  • vtenekedzhiev-ggs
  • tschrader-ggs
  • goodgame
  • jenkinshtml5migra
  • ddepaolis-ggs
  • boczujda_ggs
  • guest-ggs
  • andreaspizsa
  • cgeisler-ggs
  • amartin-ggs
  • mabdallah-ggs
  • jenkinsempire-ggs
  • chadestioco
  • evmoroz
  • ggs-skunkbot
  • stp_ci_ggs
  • it_office
  • iskliarenko