This is a documentation for Board Game Arena: play board games online !

BgaDice: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(Created page with "{{Studio_Framework_Navigation}} '''[https://x.boardgamearena.net/data/game-libs/bga-dice/1.x/demo/index.html Demo] [https://x.boardgamearena.net/data/game-libs/bga-dice/1.x/docs/index.html Doc]''' == Overview == '''bga-dice''' is a javascript component to display dice. The lib will handle associated animations (roll animation, moving between stocks). == Usage == Load the lib: <pre> define([ "dojo","dojo/_base/declare", "ebg/core/gamegui", "ebg/counter",...")
 
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Studio_Framework_Navigation}}
{{Studio_Framework_Navigation}}
'''[https://x.boardgamearena.net/data/game-libs/bga-dice/1.x/demo/index.html Demo]  [https://x.boardgamearena.net/data/game-libs/bga-dice/1.x/docs/index.html Doc]'''


== Overview ==
== Overview ==
Line 7: Line 5:


The lib will handle associated animations (roll animation, moving between stocks).
The lib will handle associated animations (roll animation, moving between stocks).
To see how its work and access examples of source code (via browser dev tools) see
'''[https://x.boardgamearena.net/data/game-libs/bga-dice/1.x/demo/index.html Demo]''' 
For comprehensive API docs see
'''[https://x.boardgamearena.net/data/game-libs/bga-dice/1.x/docs/index.html Doc]'''


== Usage ==
== Usage ==
Load the lib:
Load the lib:
<pre>
const BgaAnimations = await importEsmLib('bga-animations', '1.x'); // the library uses bga-animations so this is required!
const BgaDice = await importEsmLib('bga-dice', '1.x');
</pre>
This line should be placed on top of the JS file, before any class declaration.
Legacy way;
<pre>
<pre>
define([
define([
Line 23: Line 34:
In your game setup:
In your game setup:
<pre>
<pre>
         // create the animation manager, and bind it to the `game.bgaAnimationsActive()` function
         // create the animation manager, and bind it to the `gameui.bgaAnimationsActive()` function
         this.animationManager = new BgaAnimations.Manager({
         this.animationManager = new BgaAnimations.Manager({
             animationsActive: () => this.bgaAnimationsActive(),
             animationsActive: () => this.bga.gameui.bgaAnimationsActive(),
         });
         });


Line 33: Line 44:
             type: 'my-game-die',
             type: 'my-game-die',
         });
         });
        // create the stock
        this.dieStock = new BgaDice.LineStock(this.diceManager, document.getElementById('dice-stock'));
        this.dieStock.addDice(gamedatas.dice); // dice should be something like [{ id: 1, face: 5, location: 'table' }]
</pre>
</pre>
Only setup an animation manager if you don't already have one, else re-use the same one.
Only setup an animation manager if you don't already have one, else re-use the same one.
Line 43: Line 49:
Example of usage:
Example of usage:
<pre>
<pre>
notif_rollDice: async function(args) {
 
     await this.dieStoc.rollDice(args.rolledDice); // similar form as gamedatas.dice example above, but with a different face value.
        // create the stock, in the game setup
        this.dieStock = new BgaDice.LineStock(this.diceManager, document.getElementById('dice-stock'));
        this.dieStock.addDice(gamedatas.dice); // dice should be something like [{ id: 1, face: 5, location: 'table' }]
 
async notif_rollDice(args) {
     await this.dieStock.rollDice(args.rolledDice); // similar form as above, but with a different face value.
}
}


Line 74: Line 85:


== Changelog ==
== Changelog ==
'''1.0.2''': more logs for dice element not matching a card / accept keyed objects in addition to arrays on inputs
'''1.0.1''': Fix documentation
'''1.0.0''': Initial version
'''1.0.0''': Initial version


[[Category:Studio]]
[[Category:Studio]]

Latest revision as of 12:26, 9 September 2026


Game File Reference


Useful Components

Official

  • ItemManager: a PHP component to manage cards or other game items.
  • PlayerCounter and TableCounter: PHP components to manage counters.
  • Draggable: a JS component to manage drag'n'drop actions.
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).
  • bga-zoom : a JS component for zoom controls.
  • bga-animations : a JS component for animations.
  • bga-cards : a JS component for cards.
  • bga-dice : a JS component for dice.
  • bga-autofit : a JS component to make text fit on a fixed size div.
  • bga-score-sheet : a JS component to help you display an animated score sheet at the end of the game.
  • bga-jump-to : a JS component to add board shortcuts

Deprecated

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.

Unofficial


Game Development Process


Guides for Common Topics


Miscellaneous Resources

Overview

bga-dice is a javascript component to display dice.

The lib will handle associated animations (roll animation, moving between stocks).

To see how its work and access examples of source code (via browser dev tools) see Demo

For comprehensive API docs see Doc

Usage

Load the lib: 

const BgaAnimations = await importEsmLib('bga-animations', '1.x'); // the library uses bga-animations so this is required!
const BgaDice = await importEsmLib('bga-dice', '1.x');

This line should be placed on top of the JS file, before any class declaration.

Legacy way; 

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-dice', '1.x'),
],
function (dojo, declare, gamegui, counter, BgaAnimations, BgaDice) { // 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 `gameui.bgaAnimationsActive()` function
        this.animationManager = new BgaAnimations.Manager({
            animationsActive: () => this.bga.gameui.bgaAnimationsActive(),
        });

        // create the dice manager
        this.diceManager = new BgaDice.Manager({
            animationManager: this.animationManager,
            type: 'my-game-die',
        });

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.dieStock = new BgaDice.LineStock(this.diceManager, document.getElementById('dice-stock'));
        this.dieStock.addDice(gamedatas.dice); // dice should be something like [{ id: 1, face: 5, location: 'table' }]

async notif_rollDice(args) {
    await this.dieStock.rollDice(args.rolledDice); // similar form as above, but with a different face value.
}

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: more logs for dice element not matching a card / accept keyed objects in addition to arrays on inputs

1.0.1: Fix documentation

1.0.0: Initial version

Retrieved from "http:///index.php?title=BgaDice&oldid=31368"