bbc / genie

BBC Genie Games Framework

BBC Games - Genie

A modular framework to simplify the construction of children's games.

To view:

npm run start then navigate to the URL listed in the terminal output.

To build:

npm run build runs webpack --config build-scripts/webpack.config.js and creates a bundle in the output directory. This is the the build script that will be used by CI. It will also automatically generate theme 2.

To automatically generate theme 2

npm run create-theme2 will copy the default theme to the theme2 folder, and make all the images greyscale so you can easily see the difference between the themes. You can then access it on http://localhost:9000/?theme=theme2

Visualizer

npm run build will also generate a webpage in the output folder with a visual representation of the modules which make up the bundle. This allows us to investigate bundle size issues that may occur in the future.

Testing builds

npm run start:pack then navigate to the URL listed in the terminal output. Creates a final build then serves it locally.

To see this simply open output/stats.html in a browser.

Alternatively load http://localhost:9000/index.html as a file URL (requires --allow-file-access-from-files in Chrome.)

To test:

npm test will run tests using Jest and check them with ESLint.

npm run jest runs the unit tests only.

To test using Cypress

npm run start:pack will create a locally hosted build. In a new terminal running npm run cy:local will run the cypress tests against the locally hosted build

npm run cy:headless will run the cypress tests against a deployed Test url.

npm run cy:terminal will launch the cypress terminal. From here you can pick which suites execute. Useful for developing cypress tests. npm run cy:terminal:local will also launch the cypress terminal, however this is reliant on npm run start:pack as it will connect to the local hosted URL.

Code linting:

npm run eslint runs ESLint.

Auto documentation:

npm run docs generates documentation using JSDoc and outputs to docs/api/index.html.

Debug Mode:

To access debug mode, add the debug=true query string to the URL: http://localhost:9000/?debug=true

This will output game loading progress and asset keylookups to the console. Pressing "q" will show the layout overlay, to show the game bounds.

Documentation:

• Getting Started
• Coding Guidelines

License and Copyright

© BBC 2020.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

genie's Issues

Lock Gel ui for camera zooms

layout zooms with the camera currently.
We could add another camera (see storybook alteration code) just for this to make it more robust.

SE Button padding can be removed

Since Brim has been removed the code to add SE bottom row padding can also be removed now:

https://github.com/bbc/genie/blob/master/src/core/layout/metrics.js#L47

Swap touch images / pages for mobile

It would be useful if onboarding had the ability to switch pages / images based on mobile criteria such as touch being available.

Image based onboarding of on screen controls needs to happen for touch devices and not for desktop.

DOM Text Debug Screen

Menu is not usable on devices.

Add definable entry point for scenes

Genie is currently locked to booting into a defined "home" screen scene.
For story time this has meant using a workaround "dummy home" scene that just calls navigation.next().

If we add anything to the base scene class then it can break storytime if the dummy methods aren't added.

test

test

main.js per theme.

Add support for main.js per theme.
This would allow themes to avoid having all components (e.g: a shop) if that is a variant required.

Background Items

There are no docs for the background items system

Game Buttons should remove accessible buttons on destroy

• In accessibilify.js we hook into the destroy method of an event. The accessible button should also destroy itself here and clean up any arrays it is part of.
• sys.accessibleButtons is for gameButttons and should be renamed gameButtons
• removeButton should be removed as it is not used internally and agencies can just destroy their accessibilified game objects safely with the above changes.

Build pipeline - manifests

Apps use a games manifest generated during the build.
Storybook also has an updated one that created manifests per theme so they can be downloaded separately.

Moving these into the genie repo and build would have the advantage of one place for them to be updated and fixed where necessarily as currently they are part of each repo's build.sh

Collection docs

Collection documentation is currently sparse.

Screen.js checks if scene key contains shop

Ideally we don't need to rely on a key check, possible area to improve later.

If the shop check doesn't pass nothing breaks but you will get some redundant page stats coming through.

Add md file for creating a release

Add steps list for making a release and then merging master starter pack

Add links for Jenkins jobs.

test

test

Rename items

The "items" folder in themes should be renamed to "collections" to match config naming.

scene shutdown docs

need the third param for cope adding to docs.

this.events.once("shutdown", this.cleanUpEvents, this);

test

test

Add path to resource loads for each component

Currently themes/default/assets/home/assets.json has paths like home/background.jpg - we can remove the home part as we know this at load which makes a component theme folder portable and easily renamable.