Functions to visualize the map and boards for gaia project inside html canvas


5.10.184 days ago3 years agoMinified + gzip package size for @gaia-project/viewer in KB



A Vue.js / SVG UI for Gaia Project


Check out boardgamers.space!

Build and Run

In the viewer's folder:

pnpm install
npm run serve

And open localhost:8080 in the browser.

You can change src/self-contained.ts to change the initial setup: number of players, factions...

Include in other projects

For now there are three ways to include the viewer:

  • By importing individual components: If you want to integrate into an existing Vue APP, for example
  • Through index.ts, the default export is the launch function: The viewer will create its own Vue App on the given selector
  • Through unpkg.com/@gaia-project/viewer, which will set window.gaiaViewer or global.gaiaViewer. Here is an example:
<script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>

<script source="//unpkg.com/@gaia-project/viewer">
<link type="text/css" rel="stylesheet" href="//unpkg.com/@gaia-project/viewer/dist/package/viewer.css">

If you want something else, contact us.

launch function

The default export, and window.gaiaViewer.launch / global.gaiaViewer.launch when included via a script tag, is a function taking a css selector as an argument. When executed, it instantiates a Game on the aformentioned element, and returns an EventEmitter that can be communicated with.

The EventEmitter has this interface:

// Give the new game data to the viewer
emitter.emit("state", gameData);
// Update preferences
emitter.emit("preferences", { noFactionFill: true });
// Set player - choose either. If no player is set, then everyone can play
// in the same window
emitter.emit("player", { auth: "xxx" });
emitter.emit("player", { index: 0 });
// Listen for move actions
emitter.on("move", (move) => {
  /* send move to backend and give back result */
// Signals that a player's name was clicked
emitter.on("player:clicked", ({ name, index, auth }) => {
  /* ... */

If you want a self-contained game which plays in the browser with no interaction with your code, you can do:

// via <script>

// via import
import { launchSelfContained } from "@gaia-project/viewer";

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.