This is a documentation for Board Game Arena: play board games online !
Counter: Difference between revisions
mNo edit summary |
(Update example to avoid use of format_block(), and actually works; use getPlayerPanelElement() instead of using the overall playerboard div.) |
||
| Line 5: | Line 5: | ||
== Dependency == | == Dependency == | ||
Don't forget to add '''ebg/counter''' as a dependency: | Don't forget to add '''ebg/counter''' as a dependency (this should be standard in the new game template): | ||
// in your game js | // in your game js | ||
| Line 71: | Line 71: | ||
=== Adding stuff to player's panel === | === Adding stuff to player's panel === | ||
First, create a new JS template string in your template (tpl) file. | First, create a new JS template string function and variables to hold your counter(s) in your template (tpl) file. | ||
<pre> | <pre> | ||
stone_counters: {}, | |||
jstpl_player_board: function(player) { | |||
</div> | return | ||
`<div class="cp_board"> | |||
<div id="stoneicon_p${player.player_id}" class="gmk_stoneicon gmk_stoneicon_${player.player_color}"></div> | |||
<span id="stonecount_p${player.player_id}">0</span> | |||
</div>`; | |||
}, | |||
</pre> | </pre> | ||
| Line 84: | Line 89: | ||
<pre> | <pre> | ||
for( var player_id in gamedatas.players ) { | for( var player_id in gamedatas.players ) { | ||
var player = gamedatas.players[player_id]; | var player = gamedatas.players[player_id]; | ||
// Setting up players boards if needed | // Setting up players boards if needed | ||
var player_board_div = | var player_board_div = this.getPlayerPanelElement(player_id); | ||
dojo.place( | dojo.place( jstpl_player_board( player ), player_board_div ); | ||
// create counter per player | // create counter per player | ||
this.stone_counters[player_id]=new ebg.counter(); | this.stone_counters[player_id] = new ebg.counter(); | ||
this.stone_counters[player_id].create('stonecount_p'+player_id); | this.stone_counters[player_id].create( 'stonecount_p'+player_id ); | ||
} | } | ||
</pre> | </pre> | ||
Latest revision as of 17:37, 27 October 2024
This is very simple control that allow to set/get numeric value from inner html of div/span, and provides animation on from/to value. It is used for the built-in scoreboard element scoreCtrl.
Dependency
Don't forget to add ebg/counter as a dependency (this should be standard in the new game template):
// in your game js define([ "dojo","dojo/_base/declare", "ebg/core/gamegui", "ebg/counter" /// <==== HERE],
Setup a counter
var counter = new ebg.counter(); counter.create(targetId);
Where targetId either string or dom element, which already exists in the template, which will be used to display the counter value. For example:
<span id="my_counter"></span>
In reality you will have a counter per player, so probably want to create a counter per player, in this case target Id can be 'hand_size_player_' + player_id and you create it in the loop for all players and store as class member. See example below on how to inject per-player sections.
API
- create(target)
- associate counter with existing target DOM element
- getValue()
- return current value
- incValue(by);
- increment value by "by" and animate from previous value
- setValue(value);
- set value, no animation
- toValue(value);
- set value with animation
- disable()
- Sets the value to "-". Note it just changes display value once, it does not actually disable it, i.e. if you set it again, it will be shown again
- speed
- Duration of the animation, default is 100
const x = new ebg.counter() x.speed = 300; // to make it slower
Typescript declaration (if you need it for ide)
declare class Counter {
speed: number; // duration of the animation, default is 100ms
create(target: string): void; // associate counter with existing target DOM element
getValue(): number; // return current value
incValue(by: number): number; // increment value by "by" and animate from previous value
setValue(value: number): void; // set value, no animation
toValue(value: number): void; // set value with animation
disable(): void; // Sets value to "-"
}
Players panels
Adding stuff to player's panel
First, create a new JS template string function and variables to hold your counter(s) in your template (tpl) file.
stone_counters: {},
jstpl_player_board: function(player) {
return
`<div class="cp_board">
<div id="stoneicon_p${player.player_id}" class="gmk_stoneicon gmk_stoneicon_${player.player_color}"></div>
<span id="stonecount_p${player.player_id}">0</span>
</div>`;
},
Then, add this piece of code in the setup function of your JS file to add this template to each player panel:
for( var player_id in gamedatas.players ) {
var player = gamedatas.players[player_id];
// Setting up players boards if needed
var player_board_div = this.getPlayerPanelElement(player_id);
dojo.place( jstpl_player_board( player ), player_board_div );
// create counter per player
this.stone_counters[player_id] = new ebg.counter();
this.stone_counters[player_id].create( 'stonecount_p'+player_id );
}
Often, you have to distinguish between the current player and other players. In this case, create another JS template (ex: jstpl_otherplayer_board) and use it where "player_id" is different than "this.player_id".