This is a documentation for Board Game Arena: play board games online !

Counter: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
No edit summary
(15 intermediate revisions by 8 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:
Don't forget to add '''ebg/counter''' as a dependency:


     // in you game js
     // in your game js
     define([
     define([
     "dojo","dojo/_base/declare",
     "dojo","dojo/_base/declare",
Line 12: Line 14:


== Setup a counter ==
== Setup a counter ==
player.handSizeCounter = new ebg.counter();
player.handSizeCounter.create('hand_size_player_' + player_id);


== updateCounters(counters) ==
<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
 
;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


player.handSizeCounter.setValue(player.handSize);
  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 37: Line 85:
<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 44: 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".
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 04:13, 9 October 2022


Game File Reference



Useful Components

Official

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Draggable: a JS component to manage drag'n'drop actions.
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).

Undocumented component (if somebody knows please help with docs)

  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.

Unofficial



Game Development Process



Guides for Common Topics



Miscellaneous Resources

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.

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".