This is a documentation for Board Game Arena: play board games online !
BgaAnimations
Overview
bga-animations is a javascript component to handle different type of animations.
The lib can handle the scale & rotation of the containers when doing the animation (the Dojo animations in the "this" cannot). It is also Promise-based, so easy to plug-in with the async notification functions. The lib relies on the Element.animate function.
The game Reversi is an example of usage.
Usage
Load the lib:
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
getLibUrl('bga-animations', '1.x'),
],
function (dojo, declare, gamegui, counter, BgaAnimations) { // note that the index of `BgaAnimations` must match the index of the define array
In your game setup:
// create the animation manager, and bind it to the `game.bgaAnimationsActive()` function
this.animationManager = new BgaAnimations.Manager({
animationsActive: () => this.bgaAnimationsActive(),
});
Example of usage:
notif_moveMeeple: async function(args) {
const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);
const destinationDiv = document.getElementById(`table-slot-${args.slot}`);
await this.animationManager.slideAndAttach(meepleDiv, destinationDiv);
}
notif_scoreMeeple: async function(args) {
const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);
await this.animationManager.displayScoring(meepleDiv, args.sscore, this.gamedatas.players[args.playerId].color);
}
Look at the demo page and the demo source code for a list of all possibilities!
Versioning
The lib is using semver, so you can require 1.x to be sure to have the last fixes without risking a breaking change. Any breaking change will be noted on the Changelog section.
Using with TypeScript
If you use TypeScript and this lib, you can download the d.ts file to put in on your game folder to benefit from auto-completion. Depending on the way you build, you might need to remove the last line (the export instruction) to be able to use it.
If your game class is not declared on the define callback, you will need to modify it with this trick (to avoid a "ReferenceError: BgaAnimations is not defined" error) :
define([
"dojo",
"dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/stock",
getLibUrl('bga-animations', '1.x'),
],
function (dojo, declare, gamegui, counter, stock, BgaAnimations) {
(window as any).BgaAnimations = BgaAnimations; //trick
return declare("bgagame.reforest", ebg.core.gamegui, new Reforest());
});
Changelog
1.0.2: fix error when a parallelAnimation is null
1.0.1: Fix documentation
1.0.0: Initial version