# `cxf-fullscreen`
> Fullscreen support for CXF

# Motivation
+ Games are loaded into an HTML `iframe`.
+ CXF extensions are loaded into `iframe`s 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
```

[standard-version]: https://github.com/conventional-changelog/standard-version