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

Difference between revisions of "Counter"

From Board Game Arena
Jump to navigation Jump to search
Line 25: Line 25:
 
=== Adding stuff to player's panel ===
 
=== Adding stuff to player's panel ===
  
At first, create a new "JS template" string in your template (tpl) file:
+
First, create a new JS template string in your template (tpl) file.
 +
 
 +
From the ''Gomoku'' example:
  
(from Gomoku example)
 
 
<pre>
 
<pre>
 
var jstpl_player_board = '\<div class="cp_board">\
 
var jstpl_player_board = '\<div class="cp_board">\
Line 34: Line 35:
 
</pre>
 
</pre>
  
Then, you add this piece of code in your JS file to add this template to each player panel:
+
Then, add this piece of code in the '''setup''' function of your JS file to add this template to each player panel:
  
 
<pre>
 
<pre>
Line 48: Line 49:
 
</pre>
 
</pre>
  
(Note: the code above is of course from your "setup" function in your Javascript).
+
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".
 
 
Very often, you have to distinguish current player and others players. In this case, you just have to create another JS template (ex: jstpl_otherplayer_board) and use it when "player_id" is different than "this.player_id".
 

Revision as of 02:44, 8 October 2018


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],

updateCounters(counters)

Useful for updating game counters in the player panel (such as resources).
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):
         this.gamedatas.counters['hammercount_p' + notif.args.player_id] = {'counter_name': 'hammercount_p' + notif.args.player_id, 'counter_value' : '0'};
DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.

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