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
Line 10: Line 10:
     "ebg/core/gamegui",
     "ebg/core/gamegui",
     "ebg/counter"    /// <==== HERE],
     "ebg/counter"    /// <==== HERE],
== Setup a counter ==
player.handSizeCounter = new ebg.counter();
player.handSizeCounter.create('hand_size_player_' + player_id);


== updateCounters(counters) ==
== updateCounters(counters) ==


: Useful for updating game counters in the player panel (such as resources).  
player.handSizeCounter.setValue(player.handSize);
: The 'counters' arg is an associative array [counter_name_value => [ 'counter_name' => counter_name_value, 'counter_value' => counter_value_value], ... ]
: All counters must be referenced in '''this.gamedatas.counters''' and will be updated. Therefore if you add a counter during the game, you need to update the counters like that (through a notification management for example):
<pre>
        this.gamedatas.counters['hammercount_p' + notif.args.player_id] = {'counter_name': 'hammercount_p' + notif.args.player_id, 'counter_value' : '0'};
</pre>
: DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.


== Players panels ==
== Players panels ==

Revision as of 16:46, 1 February 2019


Dependency

Don't forget to add "ebg/counter" as a dependency:

   // in you game js
   define([
   "dojo","dojo/_base/declare",
   "ebg/core/gamegui",
   "ebg/counter"    /// <==== HERE],

Setup a counter

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

updateCounters(counters)

player.handSizeCounter.setValue(player.handSize);

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
            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 );
            }

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