Documentation
Board Game
Description
The Board Game module 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 the user can drop the elements.
Properties
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 module 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 themselves or "Game" mode, where a board element can be moved by a command or the Dice module. Clicking on the board element will select this element. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| enable | --- | Enables the module. |
| disable | --- | Disables the module. |
| reset | --- | Resets the module. |
| move | distance | Move the currently selected counter by the provided distance. |
| undo | --- | Undo the last move. Only one move can be undone. |
Events
The Board Game module sends the ValueChanged type events to the Event Bus only in a situation when the user drops the element inside the defined field.
| Field name | Description |
|---|---|
| Source | module's ID | Item | field + index |
| Value | element + index |
| Score | N/A |
In "Game" mode, the Board Game module sends the ValueChanged event if an element was moved.
| Field name | Description |
|---|---|
| Source | module's ID | Item | Counter index |
| Value | Field index |
| Score | N/A |
Scoring
N/A
CSS classes
| Class name | Description |
|---|---|
| .board-game-container | DIV containing the elements and fields. |
| .disabled | An additional class for the disabled module. |
| .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 module 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 module.