@goodgamestudios/cxf-runtime

Client Extension Framework API (CXF)

Motivation

The Client Extension Framework enables developers to add functionality to exisiting Goodgame Games while they are running. It exposes an extremely lightweight API that provides the fundamental services for your Client Extension to interact with a game client.

Developers cans

• add UI Elements to a game (TBD)
• react to user inteactions with in-game UI elements
• react to Messages coming from a Game Server

Adding the CXF to a Game Integration Page

Each game is embedded in a so-called Game Integration Page. That’s a GGS-maintained HTML page that loads the Flash client as an SWFObject or an iframe in the case of HTML5 client.

CXF is shipped as an npm package. As such, it can easily and safely be embedded from one of the many public CDNs.

Using jsDelivr

jsDelivr is a public, open-source CDN (Content Delivery Network) developed by ProspectOne, focused on performance, reliability, and security. It is free to use for everyone, with no bandwidth limits.

jsDelivr has continuously demonstrated >99% uptime, ranking #1 amongst strong contenders like Cloudflare, Google Cloud, Akamai, AWS Cloudfront.

<script src="https://cdn.jsdelivr.net/npm/@goodgamestudios/cxf-runtime@1/dist/cxf.min.js"></script>

Supported Content Types

• HTML (without <script> tags)
• JavaScript URLs
• other Links (as iFrames)

HTML Tags

HTML can be inserted, but keep in mind that almost all browsers will not execute injected <script> tags for security reasons.

JavaScript URLs

This is likey the primary method of adding your code.

other Links

Any other links will be inserted as iFrames and displayed immediately as a full-size overlay.

Adding a Plugin

⚠️ CXF Runtime currently loads a list of plugins from a location set at build time. See the CXF_PLUGINS_URL environment variable.

CXF Runtime loads a list of plugins from CXF_PLUGINS_URL. This must be an array of strings, where each string is one of the supported Content Types.

Here’s an example:

[
  "<h1>Hello, world!</h1>",
  "https://jsdelivr.com/path/to/my/plugin.js",
  "https://obamaself.com/"
]

Development & Build Process

The build process uses parcel.

Parcel sets the process.env.NODE_ENV variable depending on the build type.

Development

npm run dev

• builds the product
• start the server
• watches and rebuilds on changes
• hot-reloads in the browser

Testing

npm test

• lints files with xo
• builds with babel

Production Build

To build:

npm run build

To publish a new version:

npm run release

Build Toolchain

• xo for linting
• nyc for coverage
• ava for unit testing
• parcel to build & bundle
• standard-version to bump version & publish to npm