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

BgaJumpTo

From Board Game Arena
Jump to navigation Jump to search


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-jump-to is a component to add shortcuts to the different boards of the game.

It should only be used if the game has numerous boards, and it usually doesn't fit in the screen. Showing it with little number of elements on the screen will just pollute the game area uselessly.

The games Akropolis, Knarr, Path of Civilization are examples of usage.

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 BgaJumpTo = await importEsmLib('bga-jump-to', '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-jump-to', '1.x'),
],
function (dojo, declare, gamegui, counter, BgaJumpTo) { // note that the index of `BgaJumpTo` must match the index of the define array

In your game setup:

        const entries = [
            new BgaJumpTo.Entry(_('Main board'), 'table-center', { color: '#224757', backgroundImage: `url('${this.bga.images.getImgUrl('board.jpg')}')` }),
        ];
        entries.push(...BgaJumpTo.BgaPlayerEntries(this.bga, {
            entryTarget: (playerId, player) => `player-table-${player.no}`,
        }));

        new BgaJumpTo.Manager({
            localStorageFoldedKey: LOCAL_STORAGE_JUMP_TO_FOLDED_KEY,
            entries,
        });

Also define const LOCAL_STORAGE_ZOOM_KEY = '<yourgamename>-folded'; so the user prefered state is stored on his device.

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.


Developer notes

BgaPlayerEntries is customizable to fit your needs.

Changelog

1.0.0: Initial version