Board Game Arena - مشارکت‌های کاربر [fa]

Practical debugging

2017-02-25T00:01:09Z

Morgalad: /* Add traces in your code */

This page gives you practical tips to debug your game during the development. Don't hesitate to share with us your difficulties in order we can improve this section.

== Tools ==

To work on BGA Studio, we recommend you to use [www.google.com/chrome Google Chrome] as it's the current fastest browser for BGA platform, and it's available in all OS.

Another reason to use Chrome is that it embed all tools you need to work on BGA Studio. You can see them by pressing "F12" or from the menu ("Tools > Development tools").

A good practice is to use a second browser to develop the game, in order to check that your game is working fine on this browser too.

To debug with Firefox browser, we advise you to use these 2 extensions:
* [https://addons.mozilla.org/firefox/addon/firebug/ Firebug]
* [https://addons.mozilla.org/firefox/addon/web-developer/ Web developper]

To debug with Internet Explorer, we advise you to use one of the most recent version (ex: IE9). Last versions of Internet Explorer have way better development tools than the previous ones...

== General tip for debugging ==

In general for debugging, think of using the '[[Tools_and_tips_of_BGA_Studio#Save_.26_restore_state|save & restore]] state' functionality. It enables you to save the state of your game just before the issue you are investigating, then come back to that point with one click as many times as needed to understand what is going wrong.

You can save up to 3 different states.

== Debugging my game when it cannot start ==

If your game don't start because of an error, you are probably in one of these situations:
* There is a SQL error in your dbmodel.sql file.
* You have a syntax error in your PHP file.
* Your PHP "setup" - or any method used during the game initial states - generates an exception.

If the error is not explicitly displayed when you click on "Express start", you should check the "Gameserver error log" as per [[Studio logs]].

== Debugging my PHP game logic (or my view) ==

Most of the time, debugging PHP is quite easy. Here's what I do when I want to develop/debug some game logic that is triggered by some game action:

* At first, I make sure that I can reproduce the needed game situation in one click. To do this, I use the "[[Tools_and_tips_of_BGA_Studio#Save_.26_restore_state|save & restore]]" function.
* Another possibility for this is to place a '''die('ok');''' PHP statement right after the PHP I am developing/debugging. This way, I make sure that every request will fail and then nothing will be commited to the database, anyway.
* Then, I use '''var_dump''' function to dump PHP variables and check what's wrong, until it works.

Example:
<pre>

// (...my code to debug)

var_dump( $my_variable );
die('ok');

// (...my code to debug)

</pre>

=== Add traces to your code ===

You can use the following functions in your game to add server side logging:

'''self::debug( $message );''' // debug level logging, goes to [[Studio_logs|BGA request&SQL logs]]

'''self::trace( $message );''' // info level logging, goes to [[Studio_logs|BGA request&SQL logs]]

'''self::warn( $message );''' // warning level logging, goes to [[Studio_logs#BGA_unexpected_exceptions_logs|BGA unexpected exceptions log]]

'''self::error( $message );''' // error level logging, goes to [[Studio_logs#BGA_unexpected_exceptions_logs|BGA unexpected exceptions log]]

Check [[Studio logs]] for more details on how to access your logs.

This can be useful when you need to follow the flow of your code and not just stop it to see how it goes at some point.

Only the error log level will appear in production. This level should be used only for critical problems.
Other levels will show only in the development environment and can be used as you see fit.

== Debugging my HTML/CSS layout ==

Situation examples:
* why my game element doesn't show up in the interface?
* why my CSS property hasn't been applied to this element?
* why this game element is displayed at this position?

A first useful tip when an element does not show up in the interface is to give it a red background:
<pre>
#my_element {
... some CSS definitions ...
background-color: red;
}
</pre>

This way, you know if the element is not visible because of some of its CSS property or because of anything else.

Another tip: sometimes, you change a CSS property with no visible effect on your interface. In that case, add a "display:none" property. If your element does not disappear, the bug probably comes from your CSS selector and not from your CSS property.

Using Chrome "Elements" tab (thre first one), you can:
* See the CURRENT HTML of your page. Remember that the classical "show page source" is inefficient with BGA as you are modifying the page source with your Javascript code.
* Using the "magnifying glass", you can click on any part of your game interface and check it's HTML code and associated CSS styles.
* You can even modify directly some CSS property and see if how it looks immediately on the game interface.

== Debugging my Javascript game interface logic ==

Compare to PHP debugging, Javascript debugging can sometimes be painful.

Here's are some tips to make your life easier while developing and debugging Javascript:

=== Do complex things on PHP side ===

PHP side is more reliable and simpler to debug than Javascript. Then, when you need to perform a complex operation, check first it you can't write it on server side first.

The most frequent case is the following: you want to compute possible moves in a game situation. Doing it in Javascript is a nightmare. Then, do it on PHP, and transfer the result to your client interface using the "args" game state property.

Note: check Reversi example for this.

=== Add traces in your code ===

You can use the following:

'''console.log( variable_to_inspect )'''

It will give you the object structure of the variable in the Javascript console, without blocking the execution.

It's often a good idea to precede this call with a console.log( '### HERE ###' ); to find more easily the appropriate line in the console log.

'''alert( variable_to_inspect )'''

It will popup what you wish and pause the execution until you click ok.

This won't be useful for complex structures, only native types will get plainly displayed. But this is sometimes useful just with messages to make sure which way the execution goes.

Modern browsers also allo to put the instruction in your js code

debugger;

That will stop code execution on that line and will launch the JavaScript debugger

== Some frequent errors ==

See [[Troubleshooting]].

BGA Code Sharing

2017-02-19T00:54:52Z

Morgalad: /* Projects on github */

This page is for listing of externally hosted bga projects, tools and resources, as well as internal project
intended for sharing

== Projects on github ==

See the table a link and nickname of the developer on bga (same as used for dev forum), and short description

{| class="wikitable"
|-
! GAME
! SOURCE
! DEVELOPER
|-
| Eruption
| https://github.com/AndyKerrison/bga-eruption
| Andy_K
|-
| Nile
| https://github.com/AndyKerrison/bga-nile
| Andy_K
|-
| Assyria
| https://github.com/sebastien-prudhomme/bga-assyria
| daikinee
|-
| Florenza: The Card Game
| https://github.com/alberto-bottarini/bga-florenza
| tarini
|-
| Incan Gold
| https://github.com/AntonioSoler/bga-incangold
| Morgalad
|-
| Marco Polo
| https://github.com/rcitaliano/MarcoPolo
| rcitaliano
|}

== Projects on studio ==

Links to studio project which owner will share as read only if you request.
Project owner please add you project here, dev nickname and short description if you would like to share it.

== Other useful resources ==

BGA Code Sharing

2017-02-14T13:45:26Z

Morgalad: /* Projects on github */

This page is for listing of externally hosted bga projects, tools and resources, as well as internal project
intended for sharing

== Projects on github ==

See the table a link and nickname of the developer on bga (same as used for dev forum), and short description

{| class="wikitable"
|-
! GAME
! SOURCE
! DEVELOPER
|-
| Eruption
| https://github.com/AndyKerrison/bga-eruption
| Andy_K
|-
| Nile
| https://github.com/AndyKerrison/bga-nile
| Andy_K
|-
| Assyria
| https://github.com/sebastien-prudhomme/bga-assyria
| daikinee
|-
| Florenza: The Card Game
| https://github.com/alberto-bottarini/bga-florenza
| tarini
|-
| Incan Gold
| https://github.com/AntonioSoler/bga-incangold
| Morgalad
|}

== Projects on studio ==

Links to studio project which owner will share as read only if you request.
Project owner please add you project here, dev nickname and short description if you would like to share it.

== Other useful resources ==

Counter

2017-02-11T12:31:36Z

Morgalad: /* Dependency */

== Dependency ==

At first, 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).
: '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.
: DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.

== Players panels ==

=== Adding stuff to player's panel ===

At first, create a new "JS template" string in your template (tpl) file:

(from Gomoku example)
<pre>
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>';
</pre>

Then, you add this piece of code in your JS file to add this template to each player panel:

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

(Note: the code above is of course from your "setup" function in your Javascript).

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

Counter

2017-02-11T12:31:09Z

Morgalad: /* ; updateCounters(counters) */

== Dependency ==

At first, 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).
: '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.
: DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.

== Players panels ==

=== Adding stuff to player's panel ===

At first, create a new "JS template" string in your template (tpl) file:

(from Gomoku example)
<pre>
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>';
</pre>

Then, you add this piece of code in your JS file to add this template to each player panel:

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

(Note: the code above is of course from your "setup" function in your Javascript).

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

Counter

2017-02-11T12:30:41Z

Morgalad: /* updateCounters(counters) */

== Dependency ==

At first, 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).
: '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.
: DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.

== Players panels ==

=== Adding stuff to player's panel ===

At first, create a new "JS template" string in your template (tpl) file:

(from Gomoku example)
<pre>
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>';
</pre>

Then, you add this piece of code in your JS file to add this template to each player panel:

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

(Note: the code above is of course from your "setup" function in your Javascript).

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

Counter

2017-02-11T12:29:05Z

Morgalad: Created page with " == Dependency == At first, don't forget to add "ebg/counter" as a dependency: // in you game js define([ "dojo","dojo/_base/declare", "ebg/core/gamegui", ..."

== Dependency ==

At first, 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).
'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.
DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.

== Players panels ==

=== Adding stuff to player's panel ===

At first, create a new "JS template" string in your template (tpl) file:

(from Gomoku example)
<pre>
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>';
</pre>

Then, you add this piece of code in your JS file to add this template to each player panel:

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

(Note: the code above is of course from your "setup" function in your Javascript).

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

Gamehelpincangold

2017-02-10T19:57:36Z

Morgalad:

Brief explanation of the game:

Players run 5 times a expedition into a temple (you reshuffle and draw a row of cards)

A card is drawn, could be gems or a hazard:

-gems are picked from the box, then split among the live players and the rest are left on the card (floor of the tunnel)

-then players vote secretly with a faced down card to explore or to return to the camp.

-the leavers may pick and split the gems left on the floor while returning to the camp, then their gems are safely stored in their tent (these gems cannot be lost now).

-There are 5 types of hazard cards and 3 copies of each: mummy, snakes, spiders... when the 2nd of a kind is drawn the remaining players on the temple drop the pouches with the gems they have collected in this run
and flee to the camp.

-The remaining players repeat this process until they decide to retreat or they are kicked off the temple by a hazard

Gamehelpincangold

2017-02-10T19:56:54Z

Morgalad: Created page with "Brief explanation of the game: Players run 5 times a expedition into a temple (you reshuffle and draw a row of cards) A card is drawn, could be gems or a hazard: -gems are p..."

Brief explanation of the game:

Players run 5 times a expedition into a temple (you reshuffle and draw a row of cards)

A card is drawn, could be gems or a hazard:
-gems are picked from the box, then split among the live players and the rest are left on the card (floor of the tunnel)
-then players vote secretly with a faced down card to explore or to return to the camp.
-the leavers may pick and split the gems left on the floor while returning to the camp, then their gems are safely stored in their tent (these gems cannot be lost now).
-There are 5 types of hazard cards and 3 copies of each: mummy, snakes, spiders... when the 2nd of a kind is drawn the remaining players on the temple drop the pouches with the gems they have collected in this run and flee to the camp.
-The remaining players repeat this process until they decide to retreat or they are kicked off the temple by a hazard