This is a documentation for Board Game Arena: play board games online !
Counter: Difference between revisions
mNo edit summary |
|||
(25 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. It is used for the built-in scoreboard element scoreCtrl. | |||
== 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. | |||
== 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 | ||
: | |||
: DOM | ;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) | |||
<pre> | |||
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 "-" | |||
} | |||
</pre> | |||
== Players panels == | == Players panels == | ||
Line 27: | 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. | |||
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 81: | ||
</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 92: | ||
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]] |
Latest revision as of 01:02, 21 January 2023
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:
// 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 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".