Board Game


A Board Game addon enables you to create a simple game with moveable elements and defined fields. When the game includes fields, they are only places on the board where a user can drop the elements.


The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Background Here you add the background image.
has Fields If marked, it means that the addon includes fields.
Fields This property allows you to define the fields. It contains a definition of each field, like: position (top and left), CSS class for field and dimensions (height and width).
Elements This property allows you to define the elements. It contains a definition of each field, like: an image inside the element, position (top and left) and dimensions (height and width).
Is disabled Allows disabling the module so that the user is not able to interact with it.
Game mode There are avaibale two game modes: "Free", where the player can move an element by him or herself or "Game" mode, where a board element can be moved by a command or "Dice" addon. Clicking on the board element will select this element.

Supported commands

Command name Params Description
show --- Shows the addon.
hide --- Hides the addon.
enable --- Enables the addon
disable --- Disables the addon.
reset --- Resets the addon.
move distance Move the currently selected counter by a provided distance.
undo --- Undo the last move. Only one move can be undone.


The Board Game addon sends ValueChanged type events to Event Bus only in a situation when a user drops the element inside the defined field.

Field name Description
Source module ID
Item field + index
Value element + index
Score N/A

In "Game" mode, Board Game addon sends ValueChanged event if the element was moved.

Field name Description
Source module ID
Item Counter index
Value Field index
Score N/A



CSS classes

Class name Description
.board-game-container DIV containing the elements and fields.
.disabled An additional class for a disabled addon.
.board-game-element DIV element which can be moved on the board.
.board-game-field DIV element in which the elements can be dropped.
.board-game-selected Currently selected board element.
.game If the addon is in the game mode, then each board element will receive this class.

Demo presentation

Demo presentation contains examples of how to use the Board Game Addon.