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 theCXF_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