This is a documentation for Board Game Arena: play board games online !
BgaCards
Overview
bga-cards is a javascript component to display cards.
The lib will handle associated animations (moving between stocks, flipping or rotating the cards).
The game Frenchtarot is an example of usage (with JS), or Verso (with TypeScript)
Usage
Load the lib:
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
getLibUrl('bga-animations', '1.x'), // the lib uses bga-animations so this is required!
getLibUrl('bga-cards', '1.x'),
],
function (dojo, declare, gamegui, counter, BgaAnimations, BgaCards) { // 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(),
});
// create the card manager
this.cardsManager = new BgaCards.Manager({
animationManager: this.animationManager,
type: 'mygame-card',
getId: (card) => card.id,
setupFrontDiv: (card, div) => {
div.style.background = 'blue';
this.addTooltipHtml(div.id, `tooltip of ${card.type}`);
},
});
Only setup an animation manager if you don't already have one, else re-use the same one.
Example of usage:
// create the stock, in the game setup
this.cardStock = new BgaCards.LineStock(this.cardsManager, document.getElementById('card-stock'));
this.cardStock.addCards(gamedatas.cards); // cards should be something like [{ id: 1, type: 3, type_arg: 2, location: 'table', location_arg: 0 }]
notif_revealNewCards: async function(args) {
await this.cardStock.addCards(args.newCards); // similar form as above
}
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.6: fix autoPlace with VoidStock
1.0.5: fix selection of parent card if it contains a child card
1.0.4: fix error on emptyHandMessage not defined
1.0.3: fix emptyHandMessage conflicting with sort
1.0.2: fix selection style override
1.0.1: Fix documentation
1.0.0: Initial version