This is a documentation for Board Game Arena: play board games online !
Counter: Difference between revisions
Victoria La (talk | contribs) No edit summary |
|||
(21 intermediate revisions by 10 users not shown) | |||
Line 1: | Line 1: | ||
{{Studio_Framework_Navigation}} | |||
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. | |||
== Dependency == | == Dependency == | ||
Don't forget to add '''ebg/counter''' as a dependency: | |||
// in your game js | |||
// in | |||
define([ | define([ | ||
"dojo","dojo/_base/declare", | "dojo","dojo/_base/declare", | ||
"ebg/core/gamegui", | "ebg/core/gamegui", | ||
"ebg/counter" /// <==== HERE | "ebg/counter" /// <==== HERE], | ||
], | |||
== Setup a counter == | |||
<pre> | |||
var counter = new ebg.counter(); | |||
counter.create(targetId); | |||
</pre> | |||
Where '''targetId''' either string or dom element, which already exists in the template, which will be used to display the counter value. | |||
For example: | |||
<pre> | |||
<span id="my_counter"></span> | |||
</pre> | |||
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. | |||
: | == Functions on counter == | ||
: | ;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() | |||
:display - instead. Note it just changes display value once, it does not actually disables it, i.e. if you set it again, it will be shown again | |||
== Players panels == | == Players panels == | ||
Line 27: | Line 51: | ||
=== Adding stuff to player's panel === | === Adding stuff to player's panel === | ||
First, create a new JS template string in your template (tpl) file. | |||
From the ''Gomoku'' example: | |||
<pre> | <pre> | ||
var jstpl_player_board = '\<div class="cp_board">\ | var jstpl_player_board = '\<div class="cp_board">\ | ||
Line 36: | Line 61: | ||
</pre> | </pre> | ||
Then, | Then, add this piece of code in the '''setup''' function of your JS file to add this template to each player panel: | ||
<pre> | <pre> | ||
// Setting up player boards | // Setting up player boards | ||
for( var player_id in gamedatas.players ) | this.stone_counters={}; | ||
for( var player_id in gamedatas.players ) { | |||
var player = gamedatas.players[player_id]; | var player = gamedatas.players[player_id]; | ||
Line 47: | Line 72: | ||
var player_board_div = $('player_board_'+player_id); | var player_board_div = $('player_board_'+player_id); | ||
dojo.place( this.format_block('jstpl_player_board', player ), player_board_div ); | dojo.place( this.format_block('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); | |||
} | } | ||
</pre> | </pre> | ||
( | 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". | ||
[[Category:Studio]] |
Revision as of 01:24, 17 May 2022
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.
Dependency
Don't forget to add ebg/counter as a dependency:
// 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.
Functions on counter
- 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()
- display - instead. Note it just changes display value once, it does not actually disables it, i.e. if you set it again, it will be shown again
Players panels
Adding stuff to player's panel
First, create a new JS template string in your template (tpl) file.
From the Gomoku example:
var jstpl_player_board = '\<div class="cp_board">\ <div id="stoneicon_p${id}" class="gmk_stoneicon gmk_stoneicon_${color}"></div><span id="stonecount_p${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:
// Setting up player boards this.stone_counters={}; for( var player_id in gamedatas.players ) { var player = gamedatas.players[player_id]; // Setting up players boards if needed var player_board_div = $('player_board_'+player_id); dojo.place( this.format_block('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".