<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="sk">
	<id>https://sk.doc.boardgamearena.com/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Een</id>
	<title>Board Game Arena - Príspevky používateľa [sk]</title>
	<link rel="self" type="application/atom+xml" href="https://sk.doc.boardgamearena.com/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Een"/>
	<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/%C5%A0peci%C3%A1lne:Pr%C3%ADspevky/Een"/>
	<updated>2026-09-23T13:04:48Z</updated>
	<subtitle>Príspevky používateľa</subtitle>
	<generator>MediaWiki 1.39.0</generator>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Translations&amp;diff=810</id>
		<title>Translations</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Translations&amp;diff=810"/>
		<updated>2013-05-10T19:54:03Z</updated>

		<summary type="html">&lt;p&gt;Een: /* On client side (Javascript) */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
Using BGA Studio, the game you create is ready to be translated to each language by the BGA community. To make this possible, you only need to specify which string must be translated and how to combine them.&lt;br /&gt;
&lt;br /&gt;
== How translation works? ==&lt;br /&gt;
&lt;br /&gt;
When developing your game, all strings must be in English. Strings must be coherent with the English version of the game.&lt;br /&gt;
&lt;br /&gt;
Before the release of the game, BGA team will do the French translation of the game.&lt;br /&gt;
&lt;br /&gt;
After the release of the game, the BGA players community will translate the game in every language.&lt;br /&gt;
&lt;br /&gt;
== What should be translated? ==&lt;br /&gt;
&lt;br /&gt;
Every text that can be visible by the player when the game is running normally. This includes tooltips, texts on cards, error messages, ...&lt;br /&gt;
&lt;br /&gt;
This does NOT include error messages that are not supposed to happened (unexpected errors).&lt;br /&gt;
&lt;br /&gt;
== Focus on translating notifications ==&lt;br /&gt;
&lt;br /&gt;
Usually, translating a website is simple: you just call a function on every string you have to translate, and the string is translated in the player&#039;s language. On Board Game Arena, this is exactly the same with the &amp;quot;_( string )&amp;quot; function.&lt;br /&gt;
&lt;br /&gt;
However, there is one difference on BGA: notifications. The server is sending notifications to players, and most of the time the notifications are the same for every players, no matter what language each player is using. This is why notifications are translated on client side in the proper language, even if the strings are defined on server side.&lt;br /&gt;
&lt;br /&gt;
== WARNING: how to make sure your strings will be translated ==&lt;br /&gt;
&lt;br /&gt;
For each game, our translation tool is doing a full scan of the code, looking for translator markers like &amp;quot;_()&amp;quot; or &amp;quot;clientranslate()&amp;quot;... (see below the list of translation markers).&lt;br /&gt;
&lt;br /&gt;
If your original string is not &amp;quot;physically&amp;quot; inside one of this marker, it won&#039;t be translated.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    // Examples: the following strings will be translated:&lt;br /&gt;
    var mystring_translated = _(&amp;quot;my string&amp;quot;);       // JS&lt;br /&gt;
    $mystring_translated = self::_(&amp;quot;my string&amp;quot;);    // PHP&lt;br /&gt;
    $mystring_translated = sprintf( _(&amp;quot;my string with an %s argument&amp;quot;), $argument );   // PHP&lt;br /&gt;
&lt;br /&gt;
    // Examples: the following strings WILL NOT be translated:&lt;br /&gt;
    $my_string = &amp;quot;my string&amp;quot;;&lt;br /&gt;
    $not_translated = self::_( $my_string );   // The original string is not bordered by a translator marker =&amp;gt; no translation&lt;br /&gt;
    $not_translated = self::_( sprintf( &amp;quot;my string with a %s argument&amp;quot;, $argument ) ); // Same thing&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== How to not make translators crazy ;) ==&lt;br /&gt;
&lt;br /&gt;
* When you need the same string twice, try to reuse exactly the same string (with the same case) to minimize the number of strings.&lt;br /&gt;
* Do not mark as translatable a game element that does not have to be translated (ex: if the name of a monster on a card is &amp;quot;Zzzzz&amp;quot;, maybe there&#039;s no need to translate it).&lt;br /&gt;
* Words does not come in the same order in each language. Thus, when you have to translate a string with an argument, do not write something like:&lt;br /&gt;
&amp;lt;pre&amp;gt;_(&amp;quot;First part of the string, &amp;quot;).$argument.&#039; &#039;._(&amp;quot;second part of the string&amp;quot;)&amp;lt;/pre&amp;gt;&lt;br /&gt;
Write instead:&lt;br /&gt;
&amp;lt;pre&amp;gt;sprintf( _(&amp;quot;First part of the string, %s second part of the string&amp;quot;), $argument )&amp;lt;/pre&amp;gt;&lt;br /&gt;
(or the equivalent &amp;quot;dojo.string.substitute&amp;quot; in Javascript)&lt;br /&gt;
* When translators are going to translate your game, the most difficult task for them is to get the context of the string to be translated. The more the string is a short insignificant string, the more difficult is the task for them. As a rule of thumb, try to avoid insignificant short strings.&lt;br /&gt;
* The BGA translation policy is to be flexible on grammar... We prefer to write &amp;quot;player gets 1 coin(s)&amp;quot; than write two versions of the same string for plural and singular - it reduces the number of strings to translate.&lt;br /&gt;
* Instead of writing nice strings like &amp;quot;With the effect of ZZZ, player XXX gets a new YYY&amp;quot;, which is very difficult to translate, write strings like &amp;quot;ZZZ: XXX gets YYY&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
== On client side (Javascript) ==&lt;br /&gt;
&lt;br /&gt;
On client side, things are quite simple: you just have to use the &amp;quot;_()&amp;quot; function for all strings you want to translate.&lt;br /&gt;
&lt;br /&gt;
Examples:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
// Get a string in player&#039;s language:&lt;br /&gt;
var translated = _(&amp;quot;original english string&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
// Get a string in player&#039;s language with parameter:&lt;br /&gt;
var translated = dojo.string.substitute( &amp;quot;You can pick ${p} cards and discard ${d}&amp;quot;, {&lt;br /&gt;
    p: 2,&lt;br /&gt;
    d: 4&lt;br /&gt;
} );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WARNING:&#039;&#039;&#039; in Javascript strings to translate, you should never use &#039;\n&#039;, &#039;\t&#039; or such, as it will break the translation bundle and result in all the Javascript translation to fail. In any case, the strings will result in HTML code, and such character codes won&#039;t have any impact on the HTML rendering. You should use HTML markup instead.&lt;br /&gt;
&lt;br /&gt;
== On server side (PHP) ==&lt;br /&gt;
&lt;br /&gt;
On PHP side, you can use 3 different functions to specify that a string must be translated.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;clienttranslate( &amp;quot;my string to translate&amp;quot; ):&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
This function is &#039;&#039;&#039;transparent&#039;&#039;&#039;: it will return the original English string without any change. It&#039;s only purpose is to mark this string as &amp;quot;must be translated&amp;quot;, and to make sure the translated version of the string will be available on client side.&lt;br /&gt;
&lt;br /&gt;
In general, you use clienttranslate:&lt;br /&gt;
* On your states.inc.php, for field &amp;quot;description&amp;quot; and &amp;quot;descriptionmyturn&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
      &amp;quot;description&amp;quot; =&amp;gt; clienttranslate(&#039;${card_name}: ${actplayer} must discard 4 identical energies&#039;),&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* On &amp;quot;material.inc.php&amp;quot;, when defining texts for game material that must be displayed on client side.&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$this-&amp;gt;card_types = array(&lt;br /&gt;
&lt;br /&gt;
     1 =&amp;gt; array(&lt;br /&gt;
        &#039;name&#039; =&amp;gt; clienttranslate(&amp;quot;Amulet of Air&amp;quot;), // Thus, we can use &amp;quot;_( card_name )&amp;quot; on Javascript side.&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* When sending a notification with &amp;quot;notifyAllPlayers&amp;quot; or &amp;quot;notifyPlayer&amp;quot;, for the game log string and all game log arguments that need a translation.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
     // A game log string with no argument:&lt;br /&gt;
     self::notifyAllPlayers( &#039;pickLibraryCards&#039;, clienttranslate(&amp;quot;Everyone draw cards from his library&amp;quot;), array() );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Translating arguments is a little bit more complex. It is using the &amp;quot;i18n&amp;quot; special argument as below:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
 // In the following example, we translate the game log itself, but also the &amp;quot;card_name&amp;quot; argument:&lt;br /&gt;
&lt;br /&gt;
 self::notifyAllPlayers( &#039;winPoints&#039;, clienttranslate(&#039;${card_name}: ${player_name} gains ${points} point(s)&#039;), array(&lt;br /&gt;
                &#039;i18n&#039; =&amp;gt; array( &#039;card_name&#039; ),     // &amp;lt;===== We specify here that &amp;quot;card_name&amp;quot; argument must be transate&lt;br /&gt;
                &#039;player_id&#039; =&amp;gt; $player_id,&lt;br /&gt;
                &#039;player_name&#039; =&amp;gt; self::getActivePlayerName(),&lt;br /&gt;
                &#039;points&#039; =&amp;gt; $points,&lt;br /&gt;
                &#039;card_name&#039; =&amp;gt; $this-&amp;gt;card_types[8][&#039;name&#039;] // &amp;lt;==== Here, we provide original English string.&lt;br /&gt;
            ) ); &lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;self::_( &amp;quot;my string to translate&amp;quot; ):&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
This function returns a string translated in the language of CURRENT user (ie: player who send the request to the server) (be careful, this is NOT the active player).&lt;br /&gt;
&lt;br /&gt;
Most of the time, you don&#039;t need to translate strings on server side, except on the following 3 situations:&lt;br /&gt;
* When throwing an exception because the player did a forbidden move.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
// This will display a translatable red message to the player that just do some wrong action:&lt;br /&gt;
throw new feException( self::_(&#039;You must choose 3 cards&#039;), true);&lt;br /&gt;
&lt;br /&gt;
// ... notice the use of &amp;quot;true&amp;quot; parameter that signal that this exception is &amp;quot;expected&amp;quot;. In theory, all exception that are excepted should be translated.&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* In &amp;quot;yourgame.view.php&amp;quot;, when creating the labels for the game interface used in your template (.tpl) file.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$this-&amp;gt;tpl[&#039;CARDS_FOR_YEAR_2&#039;] = self::_(&amp;quot;Your cards for year II&amp;quot;);&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Eventually, in your material.inc.php, if for example you need to use some string elements in your exceptions.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
// In material.inc.php, $this-&amp;gt;energies[n][&#039;nametr&#039;] has been created with the self::_() method. This we can do this:&lt;br /&gt;
throw new feException( self::_(&amp;quot;To execute this action you need more: &amp;quot;).&#039; &#039;.$this-&amp;gt;energies[$resource_id][&#039;nametr&#039;], true );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Eventually, in your &amp;quot;getAllDatas&amp;quot; PHP method, as the data return by this method is used only by current user.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;totranslate( &amp;quot;my string to translate&amp;quot; ):&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
This function works exactly like &#039;clienttranslate&#039;, except it tells BGA that the string is not needed on client side.&lt;br /&gt;
&lt;br /&gt;
You should not use this function, except on the following cases:&lt;br /&gt;
* Statistics name in stats.inc.php&lt;br /&gt;
* Option names and option values name in gameoptions.inc.php&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=781</id>
		<title>Scrollmap</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=781"/>
		<updated>2013-04-26T13:57:14Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Enable scrollmap zone extension */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Scrollmap is a BGA client side component to display an infinite game area.&lt;br /&gt;
&lt;br /&gt;
In some games, players are building the main game area with tiles or cards. Examples:&lt;br /&gt;
* Carcassonne&lt;br /&gt;
* Saboteur&lt;br /&gt;
* Takenoko&lt;br /&gt;
* Taluva&lt;br /&gt;
* ...&lt;br /&gt;
&lt;br /&gt;
Of course this cause an additional difficulty for the adaptation, because we have to display an infinite game area into a finite space on the screen. This is where Scrollmap component can help you.&lt;br /&gt;
&lt;br /&gt;
== Scrollmap in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Scrollmap looks like, please try &amp;quot;Saboteur&amp;quot; or &amp;quot;Takenoko&amp;quot; games on BGA, or watch a game in progress.&lt;br /&gt;
&lt;br /&gt;
In both games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also drag&#039;n&#039;drop the game area to scroll.&lt;br /&gt;
&lt;br /&gt;
== How to use Scrollmap ==&lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/scrollmap&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/scrollmap&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Scrollmap object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Scrollable area        	&lt;br /&gt;
        this.scrollmap = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, open your template (TPL) file and add this HTML code:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;map_container&amp;quot;&amp;gt;&lt;br /&gt;
    	&amp;lt;div id=&amp;quot;map_scrollable&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_surface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_scrollable_oversurface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movetop&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveleft&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveright&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movedown&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Scrollable area **/&lt;br /&gt;
&lt;br /&gt;
#map_container {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 400px;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
}&lt;br /&gt;
#map_scrollable, #map_scrollable_oversurface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 205px;&lt;br /&gt;
    left:  315px;&lt;br /&gt;
}&lt;br /&gt;
#map_surface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    cursor: move;&lt;br /&gt;
}&lt;br /&gt;
#map_footer {&lt;br /&gt;
    text-align: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Finally, to link your HTML code with your Javascript, place this in your Javascript &amp;quot;Setup&amp;quot; method:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   	// Make map scrollable        	&lt;br /&gt;
        this.scrollmap.create( $(&#039;map_container&#039;),$(&#039;map_scrollable&#039;),$(&#039;map_surface&#039;),$(&#039;map_scrollable_oversurface&#039;) );&lt;br /&gt;
        this.scrollmap.setupOnScreenArrows( 150 );&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn&#039;t add anything on the game area yet. This is the next step.&lt;br /&gt;
&lt;br /&gt;
== Scrollable area layers ==&lt;br /&gt;
&lt;br /&gt;
There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:&lt;br /&gt;
* inside &amp;quot;map_scrollable&amp;quot; div&lt;br /&gt;
* inside &amp;quot;map_scrollable_oversurface&amp;quot; div&lt;br /&gt;
&lt;br /&gt;
The difference is very important: &amp;quot;map_scrollable&amp;quot; is beneath the surface that is used to drag&#039;n&#039;drop the game area, and &amp;quot;map_scrollable_oversurface&amp;quot; is above this surface. In practice:&lt;br /&gt;
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.&lt;br /&gt;
* If some element on the game area don&#039;t need to be clicked, you&#039;d better place it in &amp;quot;map_scrollable&amp;quot;, so it is possible to drag&#039;n&#039;drop the game area from a point on this element.&lt;br /&gt;
&lt;br /&gt;
Of course, all layers are scrolled synchronously.&lt;br /&gt;
&lt;br /&gt;
Tips: in some situation, it&#039;s also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.&lt;br /&gt;
&lt;br /&gt;
== Positioning elements on game area ==&lt;br /&gt;
&lt;br /&gt;
All elements on the game are must be absolute positioned (with &amp;quot;top&amp;quot; and &amp;quot;left&amp;quot; attributes).&lt;br /&gt;
&lt;br /&gt;
By default, the game area is centered on 0,0 coordinates.&lt;br /&gt;
&lt;br /&gt;
== Enable move arrows ==&lt;br /&gt;
&lt;br /&gt;
To show move arrows icons around the scrollmap in order to enable click based navigation in addition to drag and drop, add these lines to your CSS:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Move arrows **/&lt;br /&gt;
&lt;br /&gt;
#movetop,#moveleft,#moveright,#movedown {&lt;br /&gt;
    display: block;&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    background-image: url(&#039;../../img/common/arrows.png&#039;);&lt;br /&gt;
    width: 32px;&lt;br /&gt;
    height: 32px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#movetop {&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 0px 32px;&lt;br /&gt;
}&lt;br /&gt;
#moveleft {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    background-position: 32px 0px;&lt;br /&gt;
}&lt;br /&gt;
#moveright {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    right: 0px;&lt;br /&gt;
    background-position: 0px 0px;&lt;br /&gt;
}&lt;br /&gt;
#movedown {&lt;br /&gt;
    bottom: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 32px 32px;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
In your javascript, define the following functions:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onMoveTop : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveTop&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, 300 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveLeft : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveLeft&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveRight : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveRight&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( -300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveDown : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveDown&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, -300 );&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And connect onclick events on the arrows to these functions in your javascript setup&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        dojo.connect( $(&#039;movetop&#039;), &#039;onclick&#039;, this, &#039;onMoveTop&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;moveleft&#039;), &#039;onclick&#039;, this, &#039;onMoveLeft&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;moveright&#039;), &#039;onclick&#039;, this, &#039;onMoveRight&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;movedown&#039;), &#039;onclick&#039;, this, &#039;onMoveDown&#039; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enable scrollmap zone extension ==&lt;br /&gt;
&lt;br /&gt;
This is optional, when there can be unused screen space under the scrollmap that a player might want to use.&lt;br /&gt;
Add this in your .tpl after the scrollmap div (the matching css rules has already been defined):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;div id=&amp;quot;map_footer&amp;quot; class=&amp;quot;whiteblock&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;enlargedisplay&amp;quot;&amp;gt;&amp;amp;darr;&amp;amp;nbsp;&amp;amp;nbsp;{LABEL_ENLARGE_DISPLAY}&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;darr;&amp;lt;/a&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
In your javascript, define the following function:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onIncreaseDisplayHeight: function( evt )&lt;br /&gt;
        {&lt;br /&gt;
        	console.log( &#039;$$$$ Event : onIncreaseDisplayHeight&#039; );&lt;br /&gt;
        	evt.preventDefault();&lt;br /&gt;
        	&lt;br /&gt;
            var cur_h = toint( dojo.style( $(&#039;map_container&#039;), &#039;height&#039; ) );&lt;br /&gt;
            dojo.style( $(&#039;map_container&#039;), &#039;height&#039;, ( cur_h+300 ) + &#039;px&#039; );&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
and connect them to the &#039;enlargedisplay&#039; link in your setup:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
dojo.connect( $(&#039;enlargedisplay&#039;), &#039;onclick&#039;, this, &#039;onIncreaseDisplayHeight&#039; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
In your view.php file, define the template variable LABEL_ENLARGE_DISPLAY so that it gets substituted with appropriate translatable text:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$this-&amp;gt;tpl[&#039;LABEL_ENLARGE_DISPLAY&#039;] = self::_(&amp;quot;Enlarge display&amp;quot;);&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=780</id>
		<title>Scrollmap</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=780"/>
		<updated>2013-04-26T13:53:16Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Scrollmap is a BGA client side component to display an infinite game area.&lt;br /&gt;
&lt;br /&gt;
In some games, players are building the main game area with tiles or cards. Examples:&lt;br /&gt;
* Carcassonne&lt;br /&gt;
* Saboteur&lt;br /&gt;
* Takenoko&lt;br /&gt;
* Taluva&lt;br /&gt;
* ...&lt;br /&gt;
&lt;br /&gt;
Of course this cause an additional difficulty for the adaptation, because we have to display an infinite game area into a finite space on the screen. This is where Scrollmap component can help you.&lt;br /&gt;
&lt;br /&gt;
== Scrollmap in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Scrollmap looks like, please try &amp;quot;Saboteur&amp;quot; or &amp;quot;Takenoko&amp;quot; games on BGA, or watch a game in progress.&lt;br /&gt;
&lt;br /&gt;
In both games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also drag&#039;n&#039;drop the game area to scroll.&lt;br /&gt;
&lt;br /&gt;
== How to use Scrollmap ==&lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/scrollmap&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/scrollmap&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Scrollmap object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Scrollable area        	&lt;br /&gt;
        this.scrollmap = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, open your template (TPL) file and add this HTML code:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;map_container&amp;quot;&amp;gt;&lt;br /&gt;
    	&amp;lt;div id=&amp;quot;map_scrollable&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_surface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_scrollable_oversurface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movetop&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveleft&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveright&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movedown&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Scrollable area **/&lt;br /&gt;
&lt;br /&gt;
#map_container {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 400px;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
}&lt;br /&gt;
#map_scrollable, #map_scrollable_oversurface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 205px;&lt;br /&gt;
    left:  315px;&lt;br /&gt;
}&lt;br /&gt;
#map_surface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    cursor: move;&lt;br /&gt;
}&lt;br /&gt;
#map_footer {&lt;br /&gt;
    text-align: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Finally, to link your HTML code with your Javascript, place this in your Javascript &amp;quot;Setup&amp;quot; method:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   	// Make map scrollable        	&lt;br /&gt;
        this.scrollmap.create( $(&#039;map_container&#039;),$(&#039;map_scrollable&#039;),$(&#039;map_surface&#039;),$(&#039;map_scrollable_oversurface&#039;) );&lt;br /&gt;
        this.scrollmap.setupOnScreenArrows( 150 );&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn&#039;t add anything on the game area yet. This is the next step.&lt;br /&gt;
&lt;br /&gt;
== Scrollable area layers ==&lt;br /&gt;
&lt;br /&gt;
There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:&lt;br /&gt;
* inside &amp;quot;map_scrollable&amp;quot; div&lt;br /&gt;
* inside &amp;quot;map_scrollable_oversurface&amp;quot; div&lt;br /&gt;
&lt;br /&gt;
The difference is very important: &amp;quot;map_scrollable&amp;quot; is beneath the surface that is used to drag&#039;n&#039;drop the game area, and &amp;quot;map_scrollable_oversurface&amp;quot; is above this surface. In practice:&lt;br /&gt;
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.&lt;br /&gt;
* If some element on the game area don&#039;t need to be clicked, you&#039;d better place it in &amp;quot;map_scrollable&amp;quot;, so it is possible to drag&#039;n&#039;drop the game area from a point on this element.&lt;br /&gt;
&lt;br /&gt;
Of course, all layers are scrolled synchronously.&lt;br /&gt;
&lt;br /&gt;
Tips: in some situation, it&#039;s also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.&lt;br /&gt;
&lt;br /&gt;
== Positioning elements on game area ==&lt;br /&gt;
&lt;br /&gt;
All elements on the game are must be absolute positioned (with &amp;quot;top&amp;quot; and &amp;quot;left&amp;quot; attributes).&lt;br /&gt;
&lt;br /&gt;
By default, the game area is centered on 0,0 coordinates.&lt;br /&gt;
&lt;br /&gt;
== Enable move arrows ==&lt;br /&gt;
&lt;br /&gt;
To show move arrows icons around the scrollmap in order to enable click based navigation in addition to drag and drop, add these lines to your CSS:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Move arrows **/&lt;br /&gt;
&lt;br /&gt;
#movetop,#moveleft,#moveright,#movedown {&lt;br /&gt;
    display: block;&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    background-image: url(&#039;../../img/common/arrows.png&#039;);&lt;br /&gt;
    width: 32px;&lt;br /&gt;
    height: 32px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#movetop {&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 0px 32px;&lt;br /&gt;
}&lt;br /&gt;
#moveleft {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    background-position: 32px 0px;&lt;br /&gt;
}&lt;br /&gt;
#moveright {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    right: 0px;&lt;br /&gt;
    background-position: 0px 0px;&lt;br /&gt;
}&lt;br /&gt;
#movedown {&lt;br /&gt;
    bottom: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 32px 32px;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
In your javascript, define the following functions:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onMoveTop : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveTop&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, 300 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveLeft : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveLeft&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveRight : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveRight&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( -300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveDown : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveDown&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, -300 );&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And connect onclick events on the arrows to these functions in your javascript setup&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        dojo.connect( $(&#039;movetop&#039;), &#039;onclick&#039;, this, &#039;onMoveTop&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;moveleft&#039;), &#039;onclick&#039;, this, &#039;onMoveLeft&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;moveright&#039;), &#039;onclick&#039;, this, &#039;onMoveRight&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;movedown&#039;), &#039;onclick&#039;, this, &#039;onMoveDown&#039; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enable scrollmap zone extension ==&lt;br /&gt;
&lt;br /&gt;
This is optional, when there can be unused screen space under the scrollmap that a player might want to use.&lt;br /&gt;
Add this in your .tpl after the scrollmap div (the matching css rules has already been defined):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;div id=&amp;quot;map_footer&amp;quot; class=&amp;quot;whiteblock&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;enlargedisplay&amp;quot;&amp;gt;&amp;amp;darr;&amp;amp;nbsp;&amp;amp;nbsp;{LABEL_ENLARGE_DISPLAY}&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;darr;&amp;lt;/a&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
In your javascript, define the following function:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onIncreaseDisplayHeight: function( evt )&lt;br /&gt;
        {&lt;br /&gt;
        	console.log( &#039;$$$$ Event : onIncreaseDisplayHeight&#039; );&lt;br /&gt;
        	evt.preventDefault();&lt;br /&gt;
        	&lt;br /&gt;
            var cur_h = toint( dojo.style( $(&#039;map_container&#039;), &#039;height&#039; ) );&lt;br /&gt;
            dojo.style( $(&#039;map_container&#039;), &#039;height&#039;, ( cur_h+300 ) + &#039;px&#039; );&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
and connect them to the &#039;enlargedisplay&#039; link in your setup:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
dojo.connect( $(&#039;enlargedisplay&#039;), &#039;onclick&#039;, this, &#039;onIncreaseDisplayHeight&#039; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=779</id>
		<title>Studio FAQ</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=779"/>
		<updated>2013-04-25T20:03:11Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Should I use images free from copyright? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This is a place where we will collect and answer frequently asked questions.&lt;br /&gt;
&lt;br /&gt;
== What should I use to access the files through SFTP? ==&lt;br /&gt;
&lt;br /&gt;
There is a lot of tools to do that. Use the one you are the most comfortable with.&lt;br /&gt;
&lt;br /&gt;
On Linux Gnome, you can for example use the &#039;Connect to server&#039; function of the Nautilus file management system, or use sshfs.&lt;br /&gt;
&lt;br /&gt;
On Windows, there is for example the [http://winscp.net/ WinSCP client].&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t edit the files in my game directory, it looks like they are readonly. What&#039;s happening? ==&lt;br /&gt;
&lt;br /&gt;
Maybe there is a maintenance operation underway.&lt;br /&gt;
&lt;br /&gt;
If you don&#039;t get access back after some time (say one or two hours), please send us a mail to check.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t access the Studio back-office, I get a &#039;Not authorized&#039; error message? ==&lt;br /&gt;
&lt;br /&gt;
You should first connect to the Studio website (with any of your &amp;lt;developer name&amp;gt;&amp;lt;number&amp;gt; accounts). As the authentication is shared with the back-office, then you will be able to access it.&lt;br /&gt;
&lt;br /&gt;
== I don&#039;t know the name to use to commit my game, what name should I use? ==&lt;br /&gt;
&lt;br /&gt;
The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).&lt;br /&gt;
It is the same name as the name used for the game folder in your SFTP access.&lt;br /&gt;
&lt;br /&gt;
== What is the working language on BGA studio? ==&lt;br /&gt;
&lt;br /&gt;
Working language is &#039;&#039;&#039;English&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Variables and functions must be named with English words.&lt;br /&gt;
&lt;br /&gt;
Comments must be written in English.&lt;br /&gt;
&lt;br /&gt;
Game interface strings and game logs must be written in English.&lt;br /&gt;
&lt;br /&gt;
== How can I provide translation in my language? == &lt;br /&gt;
&lt;br /&gt;
BGA administrators will translate the game in French before the game release.&lt;br /&gt;
&lt;br /&gt;
After the game release, the collaborative translation interface can be used to translate into other languages.&lt;br /&gt;
&lt;br /&gt;
Check [[Translations]] to see how to make your game translatable.&lt;br /&gt;
&lt;br /&gt;
== I updated the images in the &#039;img&#039; folder of my game, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.&lt;br /&gt;
&lt;br /&gt;
If the images still don&#039;t show after that, please try emptying your browser cache and reloading the page.&lt;br /&gt;
&lt;br /&gt;
== I added some game options / some game statistics, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.&lt;br /&gt;
&lt;br /&gt;
== Should I use images free from copyright? ==&lt;br /&gt;
&lt;br /&gt;
If you are developing a game in the public domain, yes (or you can make your own if you feel it&#039;s better). &lt;br /&gt;
&lt;br /&gt;
If you are developing a game for which we have a licence, we will usually provide art files from the publisher.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=778</id>
		<title>Studio FAQ</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=778"/>
		<updated>2013-04-25T20:01:50Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This is a place where we will collect and answer frequently asked questions.&lt;br /&gt;
&lt;br /&gt;
== What should I use to access the files through SFTP? ==&lt;br /&gt;
&lt;br /&gt;
There is a lot of tools to do that. Use the one you are the most comfortable with.&lt;br /&gt;
&lt;br /&gt;
On Linux Gnome, you can for example use the &#039;Connect to server&#039; function of the Nautilus file management system, or use sshfs.&lt;br /&gt;
&lt;br /&gt;
On Windows, there is for example the [http://winscp.net/ WinSCP client].&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t edit the files in my game directory, it looks like they are readonly. What&#039;s happening? ==&lt;br /&gt;
&lt;br /&gt;
Maybe there is a maintenance operation underway.&lt;br /&gt;
&lt;br /&gt;
If you don&#039;t get access back after some time (say one or two hours), please send us a mail to check.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t access the Studio back-office, I get a &#039;Not authorized&#039; error message? ==&lt;br /&gt;
&lt;br /&gt;
You should first connect to the Studio website (with any of your &amp;lt;developer name&amp;gt;&amp;lt;number&amp;gt; accounts). As the authentication is shared with the back-office, then you will be able to access it.&lt;br /&gt;
&lt;br /&gt;
== I don&#039;t know the name to use to commit my game, what name should I use? ==&lt;br /&gt;
&lt;br /&gt;
The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).&lt;br /&gt;
It is the same name as the name used for the game folder in your SFTP access.&lt;br /&gt;
&lt;br /&gt;
== What is the working language on BGA studio? ==&lt;br /&gt;
&lt;br /&gt;
Working language is &#039;&#039;&#039;English&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Variables and functions must be named with English words.&lt;br /&gt;
&lt;br /&gt;
Comments must be written in English.&lt;br /&gt;
&lt;br /&gt;
Game interface strings and game logs must be written in English.&lt;br /&gt;
&lt;br /&gt;
== How can I provide translation in my language? == &lt;br /&gt;
&lt;br /&gt;
BGA administrators will translate the game in French before the game release.&lt;br /&gt;
&lt;br /&gt;
After the game release, the collaborative translation interface can be used to translate into other languages.&lt;br /&gt;
&lt;br /&gt;
Check [[Translations]] to see how to make your game translatable.&lt;br /&gt;
&lt;br /&gt;
== I updated the images in the &#039;img&#039; folder of my game, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.&lt;br /&gt;
&lt;br /&gt;
If the images still don&#039;t show after that, please try emptying your browser cache and reloading the page.&lt;br /&gt;
&lt;br /&gt;
== I added some game options / some game statistics, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.&lt;br /&gt;
&lt;br /&gt;
== Should I use images free from copyright? ==&lt;br /&gt;
&lt;br /&gt;
If you are developing a game in the public domain, yes (or you can make your own if you feel it&#039;s better). &lt;br /&gt;
If you are developing a game for which we have a licence, we will usually provide art files from the publisher.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=777</id>
		<title>How to join BGA developer team?</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=777"/>
		<updated>2013-04-24T20:19:05Z</updated>

		<summary type="html">&lt;p&gt;Een: ²&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
   &#039;&#039;&#039;--- Notice ---&#039;&#039;&#039;&lt;br /&gt;
   We have received a lot of positive feedback on the Studio, and lots of developers have registered.&lt;br /&gt;
   We are very happy about it, but it comes with a cost in time spent answering emails and posts on the forum.&lt;br /&gt;
   So please bear with us if we are slow to answer. As soon as we can, we will.&lt;br /&gt;
   Thanks again for your interest!&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Registering is done by e-mail at &#039;&#039;&#039;studio(at)boardgamearena.com&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Please provide the following information:&lt;br /&gt;
* your player user name on BGA&lt;br /&gt;
* your developer user name to be used on “BGA Studio” (for technical reasons, no space, number or special character);&lt;br /&gt;
* your real name;&lt;br /&gt;
* your e-mail address;&lt;br /&gt;
* your postal address.&lt;br /&gt;
&lt;br /&gt;
We also drafted a quick [http://en.doc.boardgamearena.com/images/0/02/BGA_TC_Dev_en.pdf &#039;&#039;&#039;&#039;terms &amp;amp; conditions&#039; document&#039;&#039;&#039;]. It&#039;s very light, so as to get to the fun part faster.&lt;br /&gt;
&lt;br /&gt;
To be valid, the registration e-mail must contain this document as an attachment, with the following sentence in the mail body: &#039;&#039;&#039;&#039;I agree with the terms &amp;amp; conditions for developers on BGA Studio joined as an attachment&#039;&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
And of course, we also encourage you to tell us about your developer experience and which games you would love to develop on BGA!&lt;br /&gt;
&lt;br /&gt;
== Ok, I registered, what do I get? ==&lt;br /&gt;
&lt;br /&gt;
First, we&#039;ll discuss by e-mail the names of some of the games we have an agreement to develop, so that you can tell us &#039;Hey, this game is great! I want to develop it!&#039; (please keep these names confidential, or it would ruin our tradition to make players guess the name of the next game on the forum)&lt;br /&gt;
&lt;br /&gt;
Second, once we have discussed together and are set on a game you&#039;ll take charge of, we&#039;ll create your studio account and you will get:&lt;br /&gt;
* one login / password to access files through SFTP&lt;br /&gt;
* ten logins with numeric suffixes from 0 to 9 and a common simple password to test games on the studio website while developing.&lt;br /&gt;
&lt;br /&gt;
Once logged in to your SFTP root folder, you will find:&lt;br /&gt;
* a &#039;&#039;&#039;&#039;resources.html&#039;&#039;&#039;&#039; file with the URLs to use and some extra connection information&lt;br /&gt;
* three folders containing the three simple games provided as examples&lt;br /&gt;
* a folder for the game you will be developing initialized after our &#039;EmptyGame&#039; template, providing the game structure (and comments! and examples!)&lt;br /&gt;
&lt;br /&gt;
Then... well that&#039;s all, you can start! See  [[Studio#Great.2C_I.27m_in.21_..._How_should_I_start.3F|Great, I&#039;m in! ... How should I start?]]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Zone&amp;diff=772</id>
		<title>Zone</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Zone&amp;diff=772"/>
		<updated>2013-04-20T17:42:40Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;The Zone component is meant to organise items of the same type inside a predefined space.&lt;br /&gt;
&lt;br /&gt;
== Zone in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Zone works, please try &amp;quot;Can&#039;t Stop&amp;quot; or &amp;quot;Niagara&amp;quot; on BGA, or watch a game in progress or game replay.&lt;br /&gt;
&lt;br /&gt;
In Can&#039;t Stop, zone is used to display the bhikkus ascending the mountain when there is more than one on the same space (diagonal mode).&lt;br /&gt;
&lt;br /&gt;
In Niagara, it is used to display the canoes over the circles going down the river (custom mode).&lt;br /&gt;
&lt;br /&gt;
== How to use Zone == &lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/zone&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/zone&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Zone object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Zone control        	&lt;br /&gt;
        this.myZone = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, in your template file, you must add a div that will host this zone:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;my_zone&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And set its width (and optionnaly, height and position) in CSS:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
#my_zone {&lt;br /&gt;
  width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then in your Javascript setup, attach your Zone component to the div and define its properties :&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
            zone.create( this, &#039;my_zone&#039;, &amp;lt;item_width&amp;gt;, &amp;lt;item_height&amp;gt; );&lt;br /&gt;
            zone.setPattern( &amp;lt;mode&amp;gt; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* &amp;lt;item_width&amp;gt; is an integer for the width of the objects you want to organise in the zone&lt;br /&gt;
* &amp;lt;item_height&amp;gt; is an integer for the height of the objects you want to organise in the zone &lt;br /&gt;
* &amp;lt;mode&amp;gt; is one of &#039;grid&#039; (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line) &#039;diagonal&#039; (objects will be organised on a top left to bottom right diagonal, overlapping each other) or &#039;custom&#039; (objects will be organised depending upon their number and the coordinates that you provide - see below)&lt;br /&gt;
&lt;br /&gt;
Now your zone is ready to be used!&lt;br /&gt;
&lt;br /&gt;
After creating an object that you want to add to the zone as a classic HTML template (dojo.place / this.format_block), you can simply use:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   zone.placeInZone( &amp;lt;object_id&amp;gt;, &amp;lt;weight&amp;gt; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* &amp;lt;object_id&amp;gt; is the string identifier for your object &#039;my_object_id&#039;&lt;br /&gt;
* &amp;lt;weight&amp;gt; is an optional parameter used to sort items&lt;br /&gt;
&lt;br /&gt;
To remove an item, use:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   zone.removeFromZone( &amp;lt;object_id&amp;gt;, &amp;lt;destroy?&amp;gt;, &amp;lt;to&amp;gt; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* &amp;lt;object_id&amp;gt; is the string identifier for your object &#039;my_object_id&#039;&lt;br /&gt;
* &amp;lt;destroy?&amp;gt; is a boolean indicating if the object should be destroyed after being removed&lt;br /&gt;
* &amp;lt;to&amp;gt; is the destination the object must be slided to when being removed (before being eventually destroyed)&lt;br /&gt;
&lt;br /&gt;
You can also:&lt;br /&gt;
* remove all items from the zone (and destroy them) using zone.removeAll();&lt;br /&gt;
* get the number of items in your zone using zone.getItemNumber();&lt;br /&gt;
* get an array of the ids of all the items using zone.getAllItems();&lt;br /&gt;
&lt;br /&gt;
== Custom mode == &lt;br /&gt;
&lt;br /&gt;
If you want complete control on how your objects are laid out inside the Zone, you can determine their coordinates after their number when being added to the zone. Here is how to do it, when defining your Zone properties in the javascript setup:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
                this.zone.setPattern( &#039;custom&#039; );&lt;br /&gt;
                &lt;br /&gt;
                this.zone.itemIdToCoords = function( i, control_width ) {&lt;br /&gt;
                    if( i%8==0 )&lt;br /&gt;
                    {   return {  x:1,y:19, w:60, h:30 }; }&lt;br /&gt;
                    else if( i%8==1 )&lt;br /&gt;
                    {   return {  x:30,y:38, w:60, h:30 }; }&lt;br /&gt;
                    else if( i%8==2 )&lt;br /&gt;
                    {   return {  x:42,y:8, w:60, h:30 }; }&lt;br /&gt;
                    else if( i%8==3 )&lt;br /&gt;
                    {   return {  x:5,y:58, w:60, h:30 }; }&lt;br /&gt;
                    else if( i%8==4 )&lt;br /&gt;
                    {   return {  x:5,y:24, w:60, h:30 }; }&lt;br /&gt;
                    else if( i%8==5 )&lt;br /&gt;
                    {   return {  x:35,y:43, w:60, h:30 }; }&lt;br /&gt;
                    else if( i%8==6 )&lt;br /&gt;
                    {   return {  x:47,y:13, w:60, h:30 }; }&lt;br /&gt;
                    else if( i%8==7 )&lt;br /&gt;
                    {   return {  x:10,y:63, w:60, h:30 }; }&lt;br /&gt;
                };&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Zone&amp;diff=771</id>
		<title>Zone</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Zone&amp;diff=771"/>
		<updated>2013-04-20T17:38:13Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;The Zone component is meant to organise items of the same type inside a predefined space.&lt;br /&gt;
&lt;br /&gt;
== Zone in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Zone works, please try &amp;quot;Can&#039;t Stop&amp;quot; or &amp;quot;Niagara&amp;quot; on BGA, or watch a game in progress or game replay.&lt;br /&gt;
&lt;br /&gt;
In Can&#039;t Stop, zone is used to display the bhikkus ascending the mountain when there is more than one on the same space (diagonal mode).&lt;br /&gt;
&lt;br /&gt;
In Niagara, it is used to display the canoes over the circles going down the river (custom mode).&lt;br /&gt;
&lt;br /&gt;
== How to use Zone == &lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/zone&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/zone&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Zone object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Zone control        	&lt;br /&gt;
        this.myZone = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, in your template file, you must add a div that will host this zone:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;my_zone&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And set its width (and optionnaly, height and position) in CSS:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
#my_zone {&lt;br /&gt;
  width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then in your Javascript setup, attach your Zone component to the div and define its properties :&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
            zone.create( this, &#039;my_zone&#039;, &amp;lt;item_width&amp;gt;, &amp;lt;item_height&amp;gt; );&lt;br /&gt;
            zone.setPattern( &amp;lt;mode&amp;gt; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* &amp;lt;item_width&amp;gt; is an integer for the width of the objects you want to organise in the zone&lt;br /&gt;
* &amp;lt;item_height&amp;gt; is an integer for the height of the objects you want to organise in the zone &lt;br /&gt;
* &amp;lt;mode&amp;gt; is one of &#039;grid&#039; (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line) &#039;diagonal&#039; (objects will be organised on a top left to bottom right diagonal, overlapping each other) or &#039;custom&#039; (objects will be organised depending upon their number and the coordinates that you provide - see below)&lt;br /&gt;
&lt;br /&gt;
Now your zone is ready to be used!&lt;br /&gt;
&lt;br /&gt;
After creating an object that you want to add to the zone as a classic HTML template (dojo.place / this.format_block), you can simply use:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   zone.placeInZone( &amp;lt;object_id&amp;gt;, &amp;lt;weight&amp;gt; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* &amp;lt;object_id&amp;gt; is the string identifier for your object &#039;my_object_id&#039;&lt;br /&gt;
* &amp;lt;weight&amp;gt; is an optional parameter used to sort items&lt;br /&gt;
&lt;br /&gt;
To remove an item, use:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   zone.removeFromZone( &amp;lt;object_id&amp;gt;, &amp;lt;destroy?&amp;gt;, &amp;lt;to&amp;gt; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* &amp;lt;object_id&amp;gt; is the string identifier for your object &#039;my_object_id&#039;&lt;br /&gt;
* &amp;lt;destroy?&amp;gt; is a boolean indicating if the object should be destroyed after being removed&lt;br /&gt;
* &amp;lt;to&amp;gt; is the destination the object must be slided to when being removed (before being eventually destroyed)&lt;br /&gt;
&lt;br /&gt;
You can also:&lt;br /&gt;
* remove all items from the zone (and destroy them) using zone.removeAll();&lt;br /&gt;
* get the number of items in your zone using zone.getItemNumber();&lt;br /&gt;
* get an array of the ids of all the items using zone.getAllItems();&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Zone&amp;diff=770</id>
		<title>Zone</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Zone&amp;diff=770"/>
		<updated>2013-04-20T17:16:41Z</updated>

		<summary type="html">&lt;p&gt;Een: Created page with &amp;quot;The Zone component is meant to organise items of the same type inside a predefined space.  == Zone in action ==  If you want to see how Zone works, please try &amp;quot;Can&amp;#039;t Stop&amp;quot; or ...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;The Zone component is meant to organise items of the same type inside a predefined space.&lt;br /&gt;
&lt;br /&gt;
== Zone in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Zone works, please try &amp;quot;Can&#039;t Stop&amp;quot; or &amp;quot;Niagara&amp;quot; on BGA, or watch a game in progress or game replay.&lt;br /&gt;
&lt;br /&gt;
In Can&#039;t Stop, zone is used to display the bhikkus ascending the mountain when there is more than one on the same space (diagonal mode).&lt;br /&gt;
&lt;br /&gt;
In Niagara, it is used to display the canoes over the circles going down the river (custom mode).&lt;br /&gt;
&lt;br /&gt;
== How to use Zone == &lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/zone&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/zone&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Zone object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Zone control        	&lt;br /&gt;
        this.myZone = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, in your template file, you must add a div that will host this zone:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;my_zone&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And set its width (and optionnaly, height and position) in CSS:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
#my_zone {&lt;br /&gt;
  width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then in your Javascript setup, attach your Zone component to the div and define its properties :&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
            zone.create( this, &#039;my_zone&#039;, &amp;lt;item_width&amp;gt;, &amp;lt;item_height&amp;gt; );&lt;br /&gt;
            zone.setPattern( &amp;lt;mode&amp;gt; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* &amp;lt;item_width&amp;gt; is an integer for the width of the objects you want to organise in the zone&lt;br /&gt;
* &amp;lt;item_height&amp;gt; is an integer for the height of the objects you want to organise in the zone &lt;br /&gt;
* &amp;lt;mode&amp;gt; is one of &#039;grid&#039; (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line) &#039;diagonal&#039; (objects will be organised on a top left to bottom right diagonal, overlapping each other) or &#039;custom&#039; (objects will be organised depending upon their number and the coordinates that you provide - see below)&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=769</id>
		<title>Scrollmap</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=769"/>
		<updated>2013-04-20T16:23:55Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Scrollmap is a BGA client side component to display an infinite game area.&lt;br /&gt;
&lt;br /&gt;
In some games, players are building the main game area with tiles or cards. Examples:&lt;br /&gt;
* Carcassonne&lt;br /&gt;
* Saboteur&lt;br /&gt;
* Takenoko&lt;br /&gt;
* Taluva&lt;br /&gt;
* ...&lt;br /&gt;
&lt;br /&gt;
Of course this cause an additional difficulty for the adaptation, because we have to display an infinite game area into a finite space on the screen. This is where Scrollmap component can help you.&lt;br /&gt;
&lt;br /&gt;
== Scrollmap in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Scrollmap looks like, please try &amp;quot;Saboteur&amp;quot; or &amp;quot;Takenoko&amp;quot; games on BGA, or watch a game in progress.&lt;br /&gt;
&lt;br /&gt;
In both games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also drag&#039;n&#039;drop the game area to scroll.&lt;br /&gt;
&lt;br /&gt;
== How to use Scrollmap ==&lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/scrollmap&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/scrollmap&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Scrollmap object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Scrollable area        	&lt;br /&gt;
        this.scrollmap = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, open your template (TPL) file and add this HTML code:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;map_container&amp;quot;&amp;gt;&lt;br /&gt;
    	&amp;lt;div id=&amp;quot;map_scrollable&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_surface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_scrollable_oversurface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movetop&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveleft&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveright&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movedown&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Scrollable area **/&lt;br /&gt;
&lt;br /&gt;
#map_container {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 400px;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
}&lt;br /&gt;
#map_scrollable, #map_scrollable_oversurface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 205px;&lt;br /&gt;
    left:  315px;&lt;br /&gt;
}&lt;br /&gt;
#map_surface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    cursor: move;&lt;br /&gt;
}&lt;br /&gt;
#map_footer {&lt;br /&gt;
    text-align: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Finally, to link your HTML code with your Javascript, place this in your Javascript &amp;quot;Setup&amp;quot; method:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   	// Make map scrollable        	&lt;br /&gt;
        this.scrollmap.create( $(&#039;map_container&#039;),$(&#039;map_scrollable&#039;),$(&#039;map_surface&#039;),$(&#039;map_scrollable_oversurface&#039;) );&lt;br /&gt;
        this.scrollmap.setupOnScreenArrows( 150 );&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn&#039;t add anything on the game area yet. This is the next step.&lt;br /&gt;
&lt;br /&gt;
== Scrollable area layers ==&lt;br /&gt;
&lt;br /&gt;
There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:&lt;br /&gt;
* inside &amp;quot;map_scrollable&amp;quot; div&lt;br /&gt;
* inside &amp;quot;map_scrollable_oversurface&amp;quot; div&lt;br /&gt;
&lt;br /&gt;
The difference is very important: &amp;quot;map_scrollable&amp;quot; is beneath the surface that is used to drag&#039;n&#039;drop the game area, and &amp;quot;map_scrollable_oversurface&amp;quot; is above this surface. In practice:&lt;br /&gt;
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.&lt;br /&gt;
* If some element on the game area don&#039;t need to be clicked, you&#039;d better place it in &amp;quot;map_scrollable&amp;quot;, so it is possible to drag&#039;n&#039;drop the game area from a point on this element.&lt;br /&gt;
&lt;br /&gt;
Of course, all layers are scrolled synchronously.&lt;br /&gt;
&lt;br /&gt;
Tips: in some situation, it&#039;s also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.&lt;br /&gt;
&lt;br /&gt;
== Positioning elements on game area ==&lt;br /&gt;
&lt;br /&gt;
All elements on the game are must be absolute positioned (with &amp;quot;top&amp;quot; and &amp;quot;left&amp;quot; attributes).&lt;br /&gt;
&lt;br /&gt;
By default, the game area is centered on 0,0 coordinates.&lt;br /&gt;
&lt;br /&gt;
== Enable move arrows ==&lt;br /&gt;
&lt;br /&gt;
To show move arrows icons around the scrollmap in order to enable click based navigation in addition to drag and drop, add these lines to your CSS:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Move arrows **/&lt;br /&gt;
&lt;br /&gt;
#movetop,#moveleft,#moveright,#movedown {&lt;br /&gt;
    display: block;&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    background-image: url(&#039;../../img/common/arrows.png&#039;);&lt;br /&gt;
    width: 32px;&lt;br /&gt;
    height: 32px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#movetop {&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 0px 32px;&lt;br /&gt;
}&lt;br /&gt;
#moveleft {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    background-position: 32px 0px;&lt;br /&gt;
}&lt;br /&gt;
#moveright {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    right: 0px;&lt;br /&gt;
    background-position: 0px 0px;&lt;br /&gt;
}&lt;br /&gt;
#movedown {&lt;br /&gt;
    bottom: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 32px 32px;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
In your javascript, define the following functions:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onMoveTop : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveTop&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, 300 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveLeft : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveLeft&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveRight : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveRight&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( -300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveDown : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveDown&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, -300 );&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And connect onclick events on the arrows to these functions in your javascript setup&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        dojo.connect( $(&#039;movetop&#039;), &#039;onclick&#039;, this, &#039;onMoveTop&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;moveleft&#039;), &#039;onclick&#039;, this, &#039;onMoveLeft&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;moveright&#039;), &#039;onclick&#039;, this, &#039;onMoveRight&#039; );&lt;br /&gt;
        dojo.connect( $(&#039;movedown&#039;), &#039;onclick&#039;, this, &#039;onMoveDown&#039; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=768</id>
		<title>Scrollmap</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=768"/>
		<updated>2013-04-20T16:13:01Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Scrollmap is a BGA client side component to display an infinite game area.&lt;br /&gt;
&lt;br /&gt;
In some games, players are building the main game area with tiles or cards. Examples:&lt;br /&gt;
* Carcassonne&lt;br /&gt;
* Saboteur&lt;br /&gt;
* Takenoko&lt;br /&gt;
* Taluva&lt;br /&gt;
* ...&lt;br /&gt;
&lt;br /&gt;
Of course this cause an additional difficulty for the adaptation, because we have to display an infinite game area into a finite space on the screen. This is where Scrollmap component can help you.&lt;br /&gt;
&lt;br /&gt;
== Scrollmap in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Scrollmap looks like, please try &amp;quot;Saboteur&amp;quot; or &amp;quot;Takenoko&amp;quot; games on BGA, or watch a game in progress.&lt;br /&gt;
&lt;br /&gt;
In both games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also drag&#039;n&#039;drop the game area to scroll.&lt;br /&gt;
&lt;br /&gt;
== How to use Scrollmap ==&lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/scrollmap&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/scrollmap&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Scrollmap object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Scrollable area        	&lt;br /&gt;
        this.scrollmap = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, open your template (TPL) file and add this HTML code:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;map_container&amp;quot;&amp;gt;&lt;br /&gt;
    	&amp;lt;div id=&amp;quot;map_scrollable&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_surface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_scrollable_oversurface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movetop&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveleft&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveright&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movedown&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Scrollable area **/&lt;br /&gt;
&lt;br /&gt;
#map_container {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 400px;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
}&lt;br /&gt;
#map_scrollable, #map_scrollable_oversurface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 205px;&lt;br /&gt;
    left:  315px;&lt;br /&gt;
}&lt;br /&gt;
#map_surface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    cursor: move;&lt;br /&gt;
}&lt;br /&gt;
#map_footer {&lt;br /&gt;
    text-align: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Finally, to link your HTML code with your Javascript, place this in your Javascript &amp;quot;Setup&amp;quot; method:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   	// Make map scrollable        	&lt;br /&gt;
        this.scrollmap.create( $(&#039;map_container&#039;),$(&#039;map_scrollable&#039;),$(&#039;map_surface&#039;),$(&#039;map_scrollable_oversurface&#039;) );&lt;br /&gt;
        this.scrollmap.setupOnScreenArrows( 150 );&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn&#039;t add anything on the game area yet. This is the next step.&lt;br /&gt;
&lt;br /&gt;
== Scrollable area layers ==&lt;br /&gt;
&lt;br /&gt;
There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:&lt;br /&gt;
* inside &amp;quot;map_scrollable&amp;quot; div&lt;br /&gt;
* inside &amp;quot;map_scrollable_oversurface&amp;quot; div&lt;br /&gt;
&lt;br /&gt;
The difference is very important: &amp;quot;map_scrollable&amp;quot; is beneath the surface that is used to drag&#039;n&#039;drop the game area, and &amp;quot;map_scrollable_oversurface&amp;quot; is above this surface. In practice:&lt;br /&gt;
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.&lt;br /&gt;
* If some element on the game area don&#039;t need to be clicked, you&#039;d better place it in &amp;quot;map_scrollable&amp;quot;, so it is possible to drag&#039;n&#039;drop the game area from a point on this element.&lt;br /&gt;
&lt;br /&gt;
Of course, all layers are scrolled synchronously.&lt;br /&gt;
&lt;br /&gt;
Tips: in some situation, it&#039;s also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.&lt;br /&gt;
&lt;br /&gt;
== Positioning elements on game area ==&lt;br /&gt;
&lt;br /&gt;
All elements on the game are must be absolute positioned (with &amp;quot;top&amp;quot; and &amp;quot;left&amp;quot; attributes).&lt;br /&gt;
&lt;br /&gt;
By default, the game area is centered on 0,0 coordinates.&lt;br /&gt;
&lt;br /&gt;
== Move arrows ==&lt;br /&gt;
&lt;br /&gt;
To show move arrows around the scrollmap to enable click based navigation in addition to drag and drop, add these lines to your CSS&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Move arrows **/&lt;br /&gt;
&lt;br /&gt;
#movetop,#moveleft,#moveright,#movedown {&lt;br /&gt;
    display: block;&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    background-image: url(&#039;../../img/common/arrows.png&#039;);&lt;br /&gt;
    width: 32px;&lt;br /&gt;
    height: 32px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#movetop {&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 0px 32px;&lt;br /&gt;
}&lt;br /&gt;
#moveleft {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    background-position: 32px 0px;&lt;br /&gt;
}&lt;br /&gt;
#moveright {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    right: 0px;&lt;br /&gt;
    background-position: 0px 0px;&lt;br /&gt;
}&lt;br /&gt;
#movedown {&lt;br /&gt;
    bottom: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 32px 32px;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then, in your javascript, define the following functions&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onMoveTop : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveTop&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, 300 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveLeft : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveLeft&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveRight : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveRight&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( -300, 0 );&lt;br /&gt;
        },&lt;br /&gt;
        onMoveDown : function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &amp;quot;onMoveDown&amp;quot; );        &lt;br /&gt;
            evt.preventDefault();&lt;br /&gt;
            this.scrollmap.scroll( 0, -300 );&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And connect onclick events on the arrows to these functions in your javascript setup&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
            dojo.connect( $(&#039;movetop&#039;), &#039;onclick&#039;, this, &#039;onMoveTop&#039; );&lt;br /&gt;
            dojo.connect( $(&#039;moveleft&#039;), &#039;onclick&#039;, this, &#039;onMoveLeft&#039; );&lt;br /&gt;
            dojo.connect( $(&#039;moveright&#039;), &#039;onclick&#039;, this, &#039;onMoveRight&#039; );&lt;br /&gt;
            dojo.connect( $(&#039;movedown&#039;), &#039;onclick&#039;, this, &#039;onMoveDown&#039; );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=767</id>
		<title>Scrollmap</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=767"/>
		<updated>2013-04-20T16:08:47Z</updated>

		<summary type="html">&lt;p&gt;Een: /* How to use Scrollmap */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Scrollmap is a BGA client side component to display an infinite game area.&lt;br /&gt;
&lt;br /&gt;
In some games, players are building the main game area with tiles or cards. Examples:&lt;br /&gt;
* Carcassonne&lt;br /&gt;
* Saboteur&lt;br /&gt;
* Takenoko&lt;br /&gt;
* Taluva&lt;br /&gt;
* ...&lt;br /&gt;
&lt;br /&gt;
Of course this cause an additional difficulty for the adaptation, because we have to display an infinite game area into a finite space on the screen. This is where Scrollmap component can help you.&lt;br /&gt;
&lt;br /&gt;
== Scrollmap in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Scrollmap looks like, please try &amp;quot;Saboteur&amp;quot; or &amp;quot;Takenoko&amp;quot; games on BGA, or watch a game in progress.&lt;br /&gt;
&lt;br /&gt;
In both games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also drag&#039;n&#039;drop the game area to scroll.&lt;br /&gt;
&lt;br /&gt;
== How to use Scrollmap ==&lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/scrollmap&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/scrollmap&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Scrollmap object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Scrollable area        	&lt;br /&gt;
        this.scrollmap = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, open your template (TPL) file and add this HTML code:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;map_container&amp;quot;&amp;gt;&lt;br /&gt;
    	&amp;lt;div id=&amp;quot;map_scrollable&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_surface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_scrollable_oversurface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movetop&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveleft&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveright&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movedown&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Scrollable area **/&lt;br /&gt;
&lt;br /&gt;
#map_container {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 400px;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
}&lt;br /&gt;
#map_scrollable, #map_scrollable_oversurface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 205px;&lt;br /&gt;
    left:  315px;&lt;br /&gt;
}&lt;br /&gt;
#map_surface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    cursor: move;&lt;br /&gt;
}&lt;br /&gt;
#map_footer {&lt;br /&gt;
    text-align: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Finally, to link your HTML code with your Javascript, place this in your Javascript &amp;quot;Setup&amp;quot; method:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   	// Make map scrollable        	&lt;br /&gt;
        this.scrollmap.create( $(&#039;map_container&#039;),$(&#039;map_scrollable&#039;),$(&#039;map_surface&#039;),$(&#039;map_scrollable_oversurface&#039;) );&lt;br /&gt;
        this.scrollmap.setupOnScreenArrows( 150 );&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn&#039;t add anything on the game area yet. This is the next step.&lt;br /&gt;
&lt;br /&gt;
== Scrollable area layers ==&lt;br /&gt;
&lt;br /&gt;
There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:&lt;br /&gt;
* inside &amp;quot;map_scrollable&amp;quot; div&lt;br /&gt;
* inside &amp;quot;map_scrollable_oversurface&amp;quot; div&lt;br /&gt;
&lt;br /&gt;
The difference is very important: &amp;quot;map_scrollable&amp;quot; is beneath the surface that is used to drag&#039;n&#039;drop the game area, and &amp;quot;map_scrollable_oversurface&amp;quot; is above this surface. In practice:&lt;br /&gt;
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.&lt;br /&gt;
* If some element on the game area don&#039;t need to be clicked, you&#039;d better place it in &amp;quot;map_scrollable&amp;quot;, so it is possible to drag&#039;n&#039;drop the game area from a point on this element.&lt;br /&gt;
&lt;br /&gt;
Of course, all layers are scrolled synchronously.&lt;br /&gt;
&lt;br /&gt;
Tips: in some situation, it&#039;s also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.&lt;br /&gt;
&lt;br /&gt;
== Positioning elements on game area ==&lt;br /&gt;
&lt;br /&gt;
All elements on the game are must be absolute positioned (with &amp;quot;top&amp;quot; and &amp;quot;left&amp;quot; attributes).&lt;br /&gt;
&lt;br /&gt;
By default, the game area is centered on 0,0 coordinates.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=766</id>
		<title>Scrollmap</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Scrollmap&amp;diff=766"/>
		<updated>2013-04-20T16:06:32Z</updated>

		<summary type="html">&lt;p&gt;Een: /* How to use Scrollmap */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Scrollmap is a BGA client side component to display an infinite game area.&lt;br /&gt;
&lt;br /&gt;
In some games, players are building the main game area with tiles or cards. Examples:&lt;br /&gt;
* Carcassonne&lt;br /&gt;
* Saboteur&lt;br /&gt;
* Takenoko&lt;br /&gt;
* Taluva&lt;br /&gt;
* ...&lt;br /&gt;
&lt;br /&gt;
Of course this cause an additional difficulty for the adaptation, because we have to display an infinite game area into a finite space on the screen. This is where Scrollmap component can help you.&lt;br /&gt;
&lt;br /&gt;
== Scrollmap in action ==&lt;br /&gt;
&lt;br /&gt;
If you want to see how Scrollmap looks like, please try &amp;quot;Saboteur&amp;quot; or &amp;quot;Takenoko&amp;quot; games on BGA, or watch a game in progress.&lt;br /&gt;
&lt;br /&gt;
In both games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also drag&#039;n&#039;drop the game area to scroll.&lt;br /&gt;
&lt;br /&gt;
== How to use Scrollmap ==&lt;br /&gt;
&lt;br /&gt;
At first, don&#039;t forget to add &amp;quot;ebg/scrollmap&amp;quot; as a dependency:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
define([&lt;br /&gt;
    &amp;quot;dojo&amp;quot;,&amp;quot;dojo/_base/declare&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/core/gamegui&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/counter&amp;quot;,&lt;br /&gt;
    &amp;quot;ebg/scrollmap&amp;quot;     /// &amp;lt;==== HERE&lt;br /&gt;
],&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Then, declare a new variable in your class for the Scrollmap object:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        constructor: function(){&lt;br /&gt;
        console.log(&#039;yourgame constructor&#039;);&lt;br /&gt;
              &lt;br /&gt;
        // Scrollable area        	&lt;br /&gt;
        this.scrollmap = new ebg.scrollmap();&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Now, open your template (TPL) file and add this HTML code:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;map_container&amp;quot;&amp;gt;&lt;br /&gt;
    	&amp;lt;div id=&amp;quot;map_scrollable&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_surface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;div id=&amp;quot;map_scrollable_oversurface&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movetop&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveleft&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;moveright&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a id=&amp;quot;movedown&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
/** Scrollable area **/&lt;br /&gt;
&lt;br /&gt;
#map_container {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 400px;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
}&lt;br /&gt;
#map_scrollable, #map_scrollable_oversurface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 205px;&lt;br /&gt;
    left:  315px;&lt;br /&gt;
}&lt;br /&gt;
#map_surface {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    cursor: move;&lt;br /&gt;
}&lt;br /&gt;
#map_footer {&lt;br /&gt;
    text-align: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/** Move arrows **/&lt;br /&gt;
&lt;br /&gt;
#movetop,#moveleft,#moveright,#movedown {&lt;br /&gt;
    display: block;&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    background-image: url(&#039;../../img/common/arrows.png&#039;);&lt;br /&gt;
    width: 32px;&lt;br /&gt;
    height: 32px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#movetop {&lt;br /&gt;
    top: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 0px 32px;&lt;br /&gt;
}&lt;br /&gt;
#moveleft {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    left: 0px;&lt;br /&gt;
    background-position: 32px 0px;&lt;br /&gt;
}&lt;br /&gt;
#moveright {&lt;br /&gt;
    top: 50%;&lt;br /&gt;
    right: 0px;&lt;br /&gt;
    background-position: 0px 0px;&lt;br /&gt;
}&lt;br /&gt;
#movedown {&lt;br /&gt;
    bottom: 0px;&lt;br /&gt;
    left: 50%;&lt;br /&gt;
    background-position: 32px 32px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Finally, to link your HTML code with your Javascript, place this in your Javascript &amp;quot;Setup&amp;quot; method:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   	// Make map scrollable        	&lt;br /&gt;
        this.scrollmap.create( $(&#039;map_container&#039;),$(&#039;map_scrollable&#039;),$(&#039;map_surface&#039;),$(&#039;map_scrollable_oversurface&#039;) );&lt;br /&gt;
        this.scrollmap.setupOnScreenArrows( 150 );&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn&#039;t add anything on the game area yet. This is the next step.&lt;br /&gt;
&lt;br /&gt;
== Scrollable area layers ==&lt;br /&gt;
&lt;br /&gt;
There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:&lt;br /&gt;
* inside &amp;quot;map_scrollable&amp;quot; div&lt;br /&gt;
* inside &amp;quot;map_scrollable_oversurface&amp;quot; div&lt;br /&gt;
&lt;br /&gt;
The difference is very important: &amp;quot;map_scrollable&amp;quot; is beneath the surface that is used to drag&#039;n&#039;drop the game area, and &amp;quot;map_scrollable_oversurface&amp;quot; is above this surface. In practice:&lt;br /&gt;
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.&lt;br /&gt;
* If some element on the game area don&#039;t need to be clicked, you&#039;d better place it in &amp;quot;map_scrollable&amp;quot;, so it is possible to drag&#039;n&#039;drop the game area from a point on this element.&lt;br /&gt;
&lt;br /&gt;
Of course, all layers are scrolled synchronously.&lt;br /&gt;
&lt;br /&gt;
Tips: in some situation, it&#039;s also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.&lt;br /&gt;
&lt;br /&gt;
== Positioning elements on game area ==&lt;br /&gt;
&lt;br /&gt;
All elements on the game are must be absolute positioned (with &amp;quot;top&amp;quot; and &amp;quot;left&amp;quot; attributes).&lt;br /&gt;
&lt;br /&gt;
By default, the game area is centered on 0,0 coordinates.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=754</id>
		<title>First steps with BGA Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=754"/>
		<updated>2013-04-13T13:41:24Z</updated>

		<summary type="html">&lt;p&gt;Een: /* That&amp;#039;s all! */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Connect to your SFTP folder and to the BGA Studio website == &lt;br /&gt;
&lt;br /&gt;
After your account has been created, you will get by email:&lt;br /&gt;
* the name of the SFTP server to connect to&lt;br /&gt;
* your SFTP login and password&lt;br /&gt;
* ten BGA Studio logins ending with a numeral ranging from 0 to 9 and the password needed to use them.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Using this information:&lt;br /&gt;
# Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software (such as WinSCP for example)&lt;br /&gt;
# Check than in your home folder you have:&lt;br /&gt;
#* One folder for each of the three example games (reversi, hearts, gomoku)&lt;br /&gt;
#* One folder matching the game you will be developing&lt;br /&gt;
#* One &#039;resources.html&#039; file&lt;br /&gt;
# Open the resources.html file, it contains&lt;br /&gt;
#* The URL pointing to the BGA Studio website (protected with an HTTP Basic authentication scheme, the login and password are also referenced in the &#039;resources.html&#039; file&lt;br /&gt;
#* The URL pointing to the BGA Studio backoffice (please note that you must first be logged in on the BGA Studio website to be able to access the backoffice, as the authentication is shared between the two)&lt;br /&gt;
#* The URL pointing to the web administration tool for the BGA Studio database.&lt;br /&gt;
# Click on the URL to the BGA Studio website, enter the HTTP Basic credentials when prompted for them (and have your browser conveniently memorize them for you). Then you get to an home page just like the one of the main BGA website. Enter one of your ten BGA studio logins to connect as a user.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Launch your game and check how to update it == &lt;br /&gt;
# Find your game in the &#039;Play now&#039; section and launch a table&lt;br /&gt;
# Use the &#039;I want between X and X&#039; players to tick down the maximum players number to the minimum&lt;br /&gt;
# Click &#039;Express start&#039;: your game launches with the maximum number of players specified. It shows an empty canvas: in the game zone you just have a sentence &#039;This is your game interface. You can edit this HTML in your &amp;quot;.tpl&amp;quot; file.&#039;.&lt;br /&gt;
# Switch to your SFTP home folder, go into your game folder. Edit the game_game.tpl file, and change this sentence to &#039;Hey, this is my first game!&#039;, then save.&lt;br /&gt;
# Go back to your browser and refresh, check that the game zone has updated.&lt;br /&gt;
# Click on the &#039;Exit game&#039; icon on the top right, and in the popup choose &#039;Express game stop&#039;. The game ends automatically and you are brought back to the table screen for this ended game.&lt;br /&gt;
# Switch to your game folder, go into the img folder and overwrite your game_box.png file with another image.&lt;br /&gt;
# Go back to your browser, &#039;&#039;&#039;empty your browser cache&#039;&#039;&#039;, then refresh the page, and check that the game box image has been updated.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Commit your changes ==&lt;br /&gt;
&lt;br /&gt;
Committing uploads your changes on our [http://en.wikipedia.org/wiki/Revision_control revision control] system. This is an extra assurance not to lose your code, and to have the possibility (by asking BGA administrators) to get a previous version of your code if you need to backtrack. It also helps us to follow your progress (we get an email when you commit). So you should commit from time to time, when you hit some landmark in your development.&lt;br /&gt;
&lt;br /&gt;
Here is how to go through your first commit:&lt;br /&gt;
# Go back to your browser tab showing the &#039;resources.html&#039; file. Click on the URL pointing to the BGA Studio backoffice (do not log out of the BGA Studio website before doing so, or you will get a &#039;&#039;&#039;Not authorized&#039;&#039;&#039; error message as the authentication is shared);&lt;br /&gt;
# Click on the &#039;Sources&#039; menu entry to show the commit form. Enter your game name (under the same form as the name of your game folder: lowercase, no spaces), enter your commit comment (such as &#039;My first commit&#039;) then hit the &#039;Submit&#039; button;&lt;br /&gt;
# Check the log for errors, it should end with the following lines:&lt;br /&gt;
&lt;br /&gt;
  Transmitting file data .&lt;br /&gt;
  Committed revision #revision number#.&lt;br /&gt;
  HAL says: done.&lt;br /&gt;
&lt;br /&gt;
NB: you should also commit each time you make an change to your gameoptions.inc.php file or to your stats.inc.php file, as an extra deployment action is needed from us for these files to take effect. Please mention in your commit comment that you need us to deploy those files, or send us an email to ask us to do it.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== That&#039;s all! ==&lt;br /&gt;
&lt;br /&gt;
Now you know about the basics of updating your game on BGA Studio and testing your changes.&lt;br /&gt;
&lt;br /&gt;
For more information on the specifics of each file, please check out the [[Studio#BGA_Studio_documentation | reference documentation for the framework]].&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=753</id>
		<title>First steps with BGA Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=753"/>
		<updated>2013-04-13T13:41:04Z</updated>

		<summary type="html">&lt;p&gt;Een: /* That&amp;#039;s all for your first steps! */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Connect to your SFTP folder and to the BGA Studio website == &lt;br /&gt;
&lt;br /&gt;
After your account has been created, you will get by email:&lt;br /&gt;
* the name of the SFTP server to connect to&lt;br /&gt;
* your SFTP login and password&lt;br /&gt;
* ten BGA Studio logins ending with a numeral ranging from 0 to 9 and the password needed to use them.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Using this information:&lt;br /&gt;
# Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software (such as WinSCP for example)&lt;br /&gt;
# Check than in your home folder you have:&lt;br /&gt;
#* One folder for each of the three example games (reversi, hearts, gomoku)&lt;br /&gt;
#* One folder matching the game you will be developing&lt;br /&gt;
#* One &#039;resources.html&#039; file&lt;br /&gt;
# Open the resources.html file, it contains&lt;br /&gt;
#* The URL pointing to the BGA Studio website (protected with an HTTP Basic authentication scheme, the login and password are also referenced in the &#039;resources.html&#039; file&lt;br /&gt;
#* The URL pointing to the BGA Studio backoffice (please note that you must first be logged in on the BGA Studio website to be able to access the backoffice, as the authentication is shared between the two)&lt;br /&gt;
#* The URL pointing to the web administration tool for the BGA Studio database.&lt;br /&gt;
# Click on the URL to the BGA Studio website, enter the HTTP Basic credentials when prompted for them (and have your browser conveniently memorize them for you). Then you get to an home page just like the one of the main BGA website. Enter one of your ten BGA studio logins to connect as a user.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Launch your game and check how to update it == &lt;br /&gt;
# Find your game in the &#039;Play now&#039; section and launch a table&lt;br /&gt;
# Use the &#039;I want between X and X&#039; players to tick down the maximum players number to the minimum&lt;br /&gt;
# Click &#039;Express start&#039;: your game launches with the maximum number of players specified. It shows an empty canvas: in the game zone you just have a sentence &#039;This is your game interface. You can edit this HTML in your &amp;quot;.tpl&amp;quot; file.&#039;.&lt;br /&gt;
# Switch to your SFTP home folder, go into your game folder. Edit the game_game.tpl file, and change this sentence to &#039;Hey, this is my first game!&#039;, then save.&lt;br /&gt;
# Go back to your browser and refresh, check that the game zone has updated.&lt;br /&gt;
# Click on the &#039;Exit game&#039; icon on the top right, and in the popup choose &#039;Express game stop&#039;. The game ends automatically and you are brought back to the table screen for this ended game.&lt;br /&gt;
# Switch to your game folder, go into the img folder and overwrite your game_box.png file with another image.&lt;br /&gt;
# Go back to your browser, &#039;&#039;&#039;empty your browser cache&#039;&#039;&#039;, then refresh the page, and check that the game box image has been updated.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Commit your changes ==&lt;br /&gt;
&lt;br /&gt;
Committing uploads your changes on our [http://en.wikipedia.org/wiki/Revision_control revision control] system. This is an extra assurance not to lose your code, and to have the possibility (by asking BGA administrators) to get a previous version of your code if you need to backtrack. It also helps us to follow your progress (we get an email when you commit). So you should commit from time to time, when you hit some landmark in your development.&lt;br /&gt;
&lt;br /&gt;
Here is how to go through your first commit:&lt;br /&gt;
# Go back to your browser tab showing the &#039;resources.html&#039; file. Click on the URL pointing to the BGA Studio backoffice (do not log out of the BGA Studio website before doing so, or you will get a &#039;&#039;&#039;Not authorized&#039;&#039;&#039; error message as the authentication is shared);&lt;br /&gt;
# Click on the &#039;Sources&#039; menu entry to show the commit form. Enter your game name (under the same form as the name of your game folder: lowercase, no spaces), enter your commit comment (such as &#039;My first commit&#039;) then hit the &#039;Submit&#039; button;&lt;br /&gt;
# Check the log for errors, it should end with the following lines:&lt;br /&gt;
&lt;br /&gt;
  Transmitting file data .&lt;br /&gt;
  Committed revision #revision number#.&lt;br /&gt;
  HAL says: done.&lt;br /&gt;
&lt;br /&gt;
NB: you should also commit each time you make an change to your gameoptions.inc.php file or to your stats.inc.php file, as an extra deployment action is needed from us for these files to take effect. Please mention in your commit comment that you need us to deploy those files, or send us an email to ask us to do it.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== That&#039;s all! ==&lt;br /&gt;
&lt;br /&gt;
Now you know about the basics of updating your game on the studio and testing your changes.&lt;br /&gt;
&lt;br /&gt;
For more information on the specifics of each file, please check out the [[Studio#BGA_Studio_documentation | reference documentation for the framework]].&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=752</id>
		<title>First steps with BGA Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=752"/>
		<updated>2013-04-13T13:40:33Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Commit your changes */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Connect to your SFTP folder and to the BGA Studio website == &lt;br /&gt;
&lt;br /&gt;
After your account has been created, you will get by email:&lt;br /&gt;
* the name of the SFTP server to connect to&lt;br /&gt;
* your SFTP login and password&lt;br /&gt;
* ten BGA Studio logins ending with a numeral ranging from 0 to 9 and the password needed to use them.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Using this information:&lt;br /&gt;
# Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software (such as WinSCP for example)&lt;br /&gt;
# Check than in your home folder you have:&lt;br /&gt;
#* One folder for each of the three example games (reversi, hearts, gomoku)&lt;br /&gt;
#* One folder matching the game you will be developing&lt;br /&gt;
#* One &#039;resources.html&#039; file&lt;br /&gt;
# Open the resources.html file, it contains&lt;br /&gt;
#* The URL pointing to the BGA Studio website (protected with an HTTP Basic authentication scheme, the login and password are also referenced in the &#039;resources.html&#039; file&lt;br /&gt;
#* The URL pointing to the BGA Studio backoffice (please note that you must first be logged in on the BGA Studio website to be able to access the backoffice, as the authentication is shared between the two)&lt;br /&gt;
#* The URL pointing to the web administration tool for the BGA Studio database.&lt;br /&gt;
# Click on the URL to the BGA Studio website, enter the HTTP Basic credentials when prompted for them (and have your browser conveniently memorize them for you). Then you get to an home page just like the one of the main BGA website. Enter one of your ten BGA studio logins to connect as a user.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Launch your game and check how to update it == &lt;br /&gt;
# Find your game in the &#039;Play now&#039; section and launch a table&lt;br /&gt;
# Use the &#039;I want between X and X&#039; players to tick down the maximum players number to the minimum&lt;br /&gt;
# Click &#039;Express start&#039;: your game launches with the maximum number of players specified. It shows an empty canvas: in the game zone you just have a sentence &#039;This is your game interface. You can edit this HTML in your &amp;quot;.tpl&amp;quot; file.&#039;.&lt;br /&gt;
# Switch to your SFTP home folder, go into your game folder. Edit the game_game.tpl file, and change this sentence to &#039;Hey, this is my first game!&#039;, then save.&lt;br /&gt;
# Go back to your browser and refresh, check that the game zone has updated.&lt;br /&gt;
# Click on the &#039;Exit game&#039; icon on the top right, and in the popup choose &#039;Express game stop&#039;. The game ends automatically and you are brought back to the table screen for this ended game.&lt;br /&gt;
# Switch to your game folder, go into the img folder and overwrite your game_box.png file with another image.&lt;br /&gt;
# Go back to your browser, &#039;&#039;&#039;empty your browser cache&#039;&#039;&#039;, then refresh the page, and check that the game box image has been updated.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Commit your changes ==&lt;br /&gt;
&lt;br /&gt;
Committing uploads your changes on our [http://en.wikipedia.org/wiki/Revision_control revision control] system. This is an extra assurance not to lose your code, and to have the possibility (by asking BGA administrators) to get a previous version of your code if you need to backtrack. It also helps us to follow your progress (we get an email when you commit). So you should commit from time to time, when you hit some landmark in your development.&lt;br /&gt;
&lt;br /&gt;
Here is how to go through your first commit:&lt;br /&gt;
# Go back to your browser tab showing the &#039;resources.html&#039; file. Click on the URL pointing to the BGA Studio backoffice (do not log out of the BGA Studio website before doing so, or you will get a &#039;&#039;&#039;Not authorized&#039;&#039;&#039; error message as the authentication is shared);&lt;br /&gt;
# Click on the &#039;Sources&#039; menu entry to show the commit form. Enter your game name (under the same form as the name of your game folder: lowercase, no spaces), enter your commit comment (such as &#039;My first commit&#039;) then hit the &#039;Submit&#039; button;&lt;br /&gt;
# Check the log for errors, it should end with the following lines:&lt;br /&gt;
&lt;br /&gt;
  Transmitting file data .&lt;br /&gt;
  Committed revision #revision number#.&lt;br /&gt;
  HAL says: done.&lt;br /&gt;
&lt;br /&gt;
NB: you should also commit each time you make an change to your gameoptions.inc.php file or to your stats.inc.php file, as an extra deployment action is needed from us for these files to take effect. Please mention in your commit comment that you need us to deploy those files, or send us an email to ask us to do it.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== That&#039;s all for your first steps! ==&lt;br /&gt;
&lt;br /&gt;
Now you know about the basics of updating your game on the studio and testing your changes.&lt;br /&gt;
&lt;br /&gt;
For more information on the specifics of each file, please check out the [[Studio#BGA_Studio_documentation | reference documentation for the framework]].&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=751</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=751"/>
		<updated>2013-04-13T13:38:56Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the latest information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please check out the &#039;&#039;&#039;[[Studio FAQ]]&#039;&#039;&#039; first, then if you didn&#039;t find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 &#039;&#039;&#039;development forum&#039;&#039;&#039;].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focuses on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hidden.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a  &amp;amp;lt;div&amp;amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
* [[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
* [[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=750</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=750"/>
		<updated>2013-04-13T13:38:25Z</updated>

		<summary type="html">&lt;p&gt;Een: /* BGA Studio user guide */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please check out the &#039;&#039;&#039;[[Studio FAQ]]&#039;&#039;&#039; first, then if you didn&#039;t find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 &#039;&#039;&#039;development forum&#039;&#039;&#039;].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focuses on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hidden.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a  &amp;amp;lt;div&amp;amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
* [[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
* [[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=749</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=749"/>
		<updated>2013-04-13T13:38:01Z</updated>

		<summary type="html">&lt;p&gt;Een: /* BGA Studio documentation */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please check out the &#039;&#039;&#039;[[Studio FAQ]]&#039;&#039;&#039; first, then if you didn&#039;t find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 &#039;&#039;&#039;development forum&#039;&#039;&#039;].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focuses on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hidden.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a  &amp;amp;lt;div&amp;amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
== BGA Studio user guide ==&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
* [[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
* [[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=748</id>
		<title>First steps with BGA Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=First_steps_with_BGA_Studio&amp;diff=748"/>
		<updated>2013-04-13T13:11:19Z</updated>

		<summary type="html">&lt;p&gt;Een: Created page with &amp;quot;== Connect to your SFTP folder and to the BGA Studio website ==   After your account has been created, you will get by email: * the name of the SFTP server to connect to * you...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Connect to your SFTP folder and to the BGA Studio website == &lt;br /&gt;
&lt;br /&gt;
After your account has been created, you will get by email:&lt;br /&gt;
* the name of the SFTP server to connect to&lt;br /&gt;
* your SFTP login and password&lt;br /&gt;
* ten BGA Studio logins ending with a numeral ranging from 0 to 9 and the password needed to use them.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Using this information:&lt;br /&gt;
# Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software (such as WinSCP for example)&lt;br /&gt;
# Check than in your home folder you have:&lt;br /&gt;
#* One folder for each of the three example games (reversi, hearts, gomoku)&lt;br /&gt;
#* One folder matching the game you will be developing&lt;br /&gt;
#* One &#039;resources.html&#039; file&lt;br /&gt;
# Open the resources.html file, it contains&lt;br /&gt;
#* The URL pointing to the BGA Studio website (protected with an HTTP Basic authentication scheme, the login and password are also referenced in the &#039;resources.html&#039; file&lt;br /&gt;
#* The URL pointing to the BGA Studio backoffice (please note that you must first be logged in on the BGA Studio website to be able to access the backoffice, as the authentication is shared between the two)&lt;br /&gt;
#* The URL pointing to the web administration tool for the BGA Studio database.&lt;br /&gt;
# Click on the URL to the BGA Studio website, enter the HTTP Basic credentials when prompted for them (and have your browser conveniently memorize them for you). Then you get to an home page just like the one of the main BGA website. Enter one of your ten BGA studio logins to connect as a user.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Launch your game and check how to update it == &lt;br /&gt;
# Find your game in the &#039;Play now&#039; section and launch a table&lt;br /&gt;
# Use the &#039;I want between X and X&#039; players to tick down the maximum players number to the minimum&lt;br /&gt;
# Click &#039;Express start&#039;: your game launches with the maximum number of players specified. It shows an empty canvas: in the game zone you just have a sentence &#039;This is your game interface. You can edit this HTML in your &amp;quot;.tpl&amp;quot; file.&#039;.&lt;br /&gt;
# Switch to your SFTP home folder, go into your game folder. Edit the game_game.tpl file, and change this sentence to &#039;Hey, this is my first game!&#039;, then save.&lt;br /&gt;
# Go back to your browser and refresh, check that the game zone has updated.&lt;br /&gt;
# Click on the &#039;Exit game&#039; icon on the top right, and in the popup choose &#039;Express game stop&#039;. The game ends automatically and you are brought back to the table screen for this ended game.&lt;br /&gt;
# Switch to your game folder, go into the img folder and overwrite your game_box.png file with another image.&lt;br /&gt;
# Go back to your browser, &#039;&#039;&#039;empty your browser cache&#039;&#039;&#039;, then refresh the page, and check that the game box image has been updated.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Commit your changes ==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
That&#039;s all! Now you know about the basics of updating your game on the studio and testing your changes!&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=747</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=747"/>
		<updated>2013-04-13T12:36:20Z</updated>

		<summary type="html">&lt;p&gt;Een: /* BGA Studio user guide */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please check out the &#039;&#039;&#039;[[Studio FAQ]]&#039;&#039;&#039; first, then if you didn&#039;t find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 &#039;&#039;&#039;development forum&#039;&#039;&#039;].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hidden.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a  &amp;amp;lt;div&amp;amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
== BGA Studio user guide ==&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
* [[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
* [[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
* [[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=746</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=746"/>
		<updated>2013-04-13T12:35:51Z</updated>

		<summary type="html">&lt;p&gt;Een: /* BGA Studio user guide */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please check out the &#039;&#039;&#039;[[Studio FAQ]]&#039;&#039;&#039; first, then if you didn&#039;t find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 &#039;&#039;&#039;development forum&#039;&#039;&#039;].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hidden.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a  &amp;amp;lt;div&amp;amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
== BGA Studio user guide ==&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
[[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=745</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=745"/>
		<updated>2013-04-13T12:34:53Z</updated>

		<summary type="html">&lt;p&gt;Een: /* BGA Studio game components reference */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please check out the &#039;&#039;&#039;[[Studio FAQ]]&#039;&#039;&#039; first, then if you didn&#039;t find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 &#039;&#039;&#039;development forum&#039;&#039;&#039;].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hidden.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a  &amp;amp;lt;div&amp;amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=744</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=744"/>
		<updated>2013-04-13T12:31:55Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Great, I&amp;#039;m in! ... How should I start? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please check out the &#039;&#039;&#039;[[Studio FAQ]]&#039;&#039;&#039; first, then if you didn&#039;t find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 &#039;&#039;&#039;development forum&#039;&#039;&#039;].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hide.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a &amp;lt;div&amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=743</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=743"/>
		<updated>2013-04-13T12:30:15Z</updated>

		<summary type="html">&lt;p&gt;Een: /* BGA Studio documentation */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please ask them on the [http://forum.boardgamearena.com/viewforum.php?f=12 development forum].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hide.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a &amp;lt;div&amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=742</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=742"/>
		<updated>2013-04-13T12:29:17Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Great, I&amp;#039;m in! ... How should I start? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please ask them on the [http://forum.boardgamearena.com/viewforum.php?f=12 development forum].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
[[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hide.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a &amp;lt;div&amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=741</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=741"/>
		<updated>2013-04-13T12:28:58Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Great, I&amp;#039;m in! ... How should I start? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.&lt;br /&gt;
&lt;br /&gt;
After that, we would advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please ask them on the [http://forum.boardgamearena.com/viewforum.php?f=12 development forum].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
[[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hide.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a &amp;lt;div&amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=740</id>
		<title>How to join BGA developer team?</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=740"/>
		<updated>2013-04-13T12:27:37Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
Registering is done by e-mail at &#039;&#039;&#039;studio(at)boardgamearena.com&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Please provide the following information:&lt;br /&gt;
* your player user name on BGA&lt;br /&gt;
* your developer user name to be used on “BGA Studio” (for technical reasons, no space, number or special character);&lt;br /&gt;
* your real name;&lt;br /&gt;
* your e-mail address;&lt;br /&gt;
* your postal address.&lt;br /&gt;
&lt;br /&gt;
We also drafted a quick [http://en.doc.boardgamearena.com/images/0/02/BGA_TC_Dev_en.pdf &#039;&#039;&#039;&#039;terms &amp;amp; conditions&#039; document&#039;&#039;&#039;]. It&#039;s very light, so as to get to the fun part faster.&lt;br /&gt;
&lt;br /&gt;
To be valid, the registration e-mail must contain this document as an attachment, with the following sentence in the mail body: &#039;&#039;&#039;&#039;I agree with the terms &amp;amp; conditions for developers on BGA Studio joined as an attachment&#039;&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
And of course, we also encourage you to tell us about your developer experience and which games you would love to develop on BGA!&lt;br /&gt;
&lt;br /&gt;
== Ok, I registered, what do I get? ==&lt;br /&gt;
&lt;br /&gt;
First, we&#039;ll discuss by e-mail the names of some of the games we have an agreement to develop, so that you can tell us &#039;Hey, this game is great! I want to develop it!&#039; (please keep these names confidential, or it would ruin our tradition to make players guess the name of the next game on the forum)&lt;br /&gt;
&lt;br /&gt;
Second, once we have discussed together and are set on a game you&#039;ll take charge of, we&#039;ll create your studio account and you will get:&lt;br /&gt;
* one login / password to access files through SFTP&lt;br /&gt;
* ten logins with numeric suffixes from 0 to 9 and a common simple password to test games on the studio website while developing.&lt;br /&gt;
&lt;br /&gt;
Once logged in to your SFTP root folder, you will find:&lt;br /&gt;
* a &#039;&#039;&#039;&#039;resources.html&#039;&#039;&#039;&#039; file with the URLs to use and some extra connection information&lt;br /&gt;
* three folders containing the three simple games provided as examples&lt;br /&gt;
* a folder for the game you will be developing initialized after our &#039;EmptyGame&#039; template, providing the game structure (and comments! and examples!)&lt;br /&gt;
&lt;br /&gt;
Then... well that&#039;s all, you can start! See  [[Studio#Great.2C_I.27m_in.21_..._How_should_I_start.3F|Great, I&#039;m in! ... How should I start?]]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=739</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=739"/>
		<updated>2013-04-13T12:21:12Z</updated>

		<summary type="html">&lt;p&gt;Een: /* How to join the BGA developer team? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see this page: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
After that, we would advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please ask them on the [http://forum.boardgamearena.com/viewforum.php?f=12 development forum].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
[[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hide.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a &amp;lt;div&amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=738</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=738"/>
		<updated>2013-04-13T12:20:43Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Discover BGA Studio in 5 presentations */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepared 5 &amp;quot;powerpoint&amp;quot; presentations for you:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
After that, we would advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please ask them on the [http://forum.boardgamearena.com/viewforum.php?f=12 development forum].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
[[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
* [[Game replay]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hide.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a &amp;lt;div&amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Tools and tips of BGA Studio]]&lt;br /&gt;
&lt;br /&gt;
[[Practical debugging]]&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=717</id>
		<title>How to join BGA developer team?</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=717"/>
		<updated>2013-03-30T17:10:00Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
Registering is done by e-mail at &#039;&#039;&#039;studio(at)boardgamearena.com&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Please provide the following information:&lt;br /&gt;
* your player user name on BGA&lt;br /&gt;
* your developer user name to be used on “BGA Studio” (for technical reasons, no space, number or special character);&lt;br /&gt;
* your real name;&lt;br /&gt;
* your e-mail address;&lt;br /&gt;
* your postal address.&lt;br /&gt;
&lt;br /&gt;
We also drafted a quick [http://en.doc.boardgamearena.com/images/0/02/BGA_TC_Dev_en.pdf &#039;&#039;&#039;&#039;terms &amp;amp; conditions&#039; document&#039;&#039;&#039;]. It&#039;s very light, so as to get to the fun part faster.&lt;br /&gt;
&lt;br /&gt;
To be valid, the registration e-mail must contain this document as an attachment, with the following sentence in the mail body: &#039;&#039;&#039;&#039;I agree with the terms &amp;amp; conditions for developers on BGA Studio joined as an attachment&#039;&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
And of course, we also encourage you to tell us about which games you would love to develop on BGA!&lt;br /&gt;
&lt;br /&gt;
== Ok, I registered, what do I get? ==&lt;br /&gt;
&lt;br /&gt;
First, we&#039;ll discuss by e-mail the names of some of the games we have an agreement to develop, so that you can tell us &#039;Hey, this game is great! I want to develop it!&#039; (please keep these names confidential, or it would ruin our tradition to make players guess the name of the next game on the forum)&lt;br /&gt;
&lt;br /&gt;
Second, once we have discussed together and are fixed on a game you&#039;ll take charge of, we&#039;ll create your studio account and you will get:&lt;br /&gt;
* one login / password to access files through SFTP&lt;br /&gt;
* ten logins with numeric suffixes from 0 to 9 and a common simple password to test games on the studio website while developing.&lt;br /&gt;
&lt;br /&gt;
Once logged in to your SFTP root folder, you will find:&lt;br /&gt;
* a &#039;resources.html&#039; file with the URLs to use and some extra connection information&lt;br /&gt;
* three folders containing the three simple games provided as examples&lt;br /&gt;
* a folder for the game you will be developing initialized after our &#039;EmptyGame&#039; template, providing the game structure (and comments! and examples!)&lt;br /&gt;
&lt;br /&gt;
Then... that&#039;s all, you can start!&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Tutorial_gomoku&amp;diff=709</id>
		<title>Tutorial gomoku</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Tutorial_gomoku&amp;diff=709"/>
		<updated>2013-03-24T18:38:25Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Manage states and events */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This tutorial will guide you through the basics of creating a simple game on BGA Studio, through the example of [http://en.wikipedia.org/wiki/Gomoku &#039;&#039;&#039;Gomoku&#039;&#039;&#039;] (also known as Gobang or Five in a Row).&lt;br /&gt;
&lt;br /&gt;
== You will start from our &#039;emtpy game&#039; template ==&lt;br /&gt;
&lt;br /&gt;
Here is how your games looks by default when it has just been created:&lt;br /&gt;
&lt;br /&gt;
[[File:Gomoku tuto1.png]]&lt;br /&gt;
&lt;br /&gt;
== Setup the board ==&lt;br /&gt;
&lt;br /&gt;
Gather useful images for the game and edit them as needed. Upload them in the &#039;img&#039; folder of your SFTP access.&lt;br /&gt;
&lt;br /&gt;
Edit .tpl to add some divs for the board in the HTML. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;div id=&amp;quot;gmk_game_area&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div id=&amp;quot;gmk_background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div id=&amp;quot;gmk_goban&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;	&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Edit .css to set the div sizes and positions and show the image of the board as background.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
#gmk_game_area {&lt;br /&gt;
	text-align: center;&lt;br /&gt;
	position: relative;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#gmk_background {&lt;br /&gt;
	width: 620px;&lt;br /&gt;
	height: 620px;	&lt;br /&gt;
	position: relative;&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#gmk_goban {	&lt;br /&gt;
	background-image: url( &#039;../../img/gomoku/goban.jpg&#039;);&lt;br /&gt;
	width: 620px;&lt;br /&gt;
	height: 620px;&lt;br /&gt;
	position: absolute;	&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
[[File:Gomoku tuto2.png]]&lt;br /&gt;
&lt;br /&gt;
== Setup the backbone of your game ==&lt;br /&gt;
&lt;br /&gt;
Edit dbmodel.sql to create a table for intersections. We need coordinates for each intersection and a field to store the color of the stone on this intersection (if any).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
CREATE TABLE IF NOT EXISTS `intersection` (&lt;br /&gt;
   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,&lt;br /&gt;
   `coord_x` tinyint(2) unsigned NOT NULL,&lt;br /&gt;
   `coord_y` tinyint(2) unsigned NOT NULL,&lt;br /&gt;
   `stone_color` varchar(8) NULL,&lt;br /&gt;
   PRIMARY KEY (`id`)&lt;br /&gt;
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Edit .game.php-&amp;gt;setupNewGame() to insert the empty intersections (19x19) with coordinates into the database.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        // Insert (empty) intersections into database&lt;br /&gt;
        $sql = &amp;quot;INSERT INTO intersection (coord_x, coord_y) VALUES &amp;quot;;&lt;br /&gt;
        $values = array();&lt;br /&gt;
        for ($x = 0; $x &amp;lt; 19; $x++) {&lt;br /&gt;
            for ($y = 0; $y &amp;lt; 19; $y++) {&lt;br /&gt;
        	&lt;br /&gt;
            	$values[] = &amp;quot;($x, $y)&amp;quot;;   	&lt;br /&gt;
            }&lt;br /&gt;
        }&lt;br /&gt;
        $sql .= implode( $values, &#039;,&#039; );&lt;br /&gt;
        self::DbQuery( $sql );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Edit .game.php-&amp;gt;getAllDatas() to retrieve the state of the intersections from the database.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        // Intersections&lt;br /&gt;
        $sql = &amp;quot;SELECT id, coord_x, coord_y, stone_color FROM intersection &amp;quot;;&lt;br /&gt;
        $result[&#039;intersections&#039;] = self::getCollectionFromDb( $sql );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Edit .tpl to create a template for intersections.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
var jstpl_intersection=&#039;&amp;lt;div class=&amp;quot;gmk_intersection ${stone_type}&amp;quot; id=&amp;quot;intersection_${x}_${y}&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&#039;;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Define the styles for the intersection divs.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
.gmk_intersection {&lt;br /&gt;
    width: 30px;&lt;br /&gt;
    height: 30px;&lt;br /&gt;
    position: relative;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Edit .js-&amp;gt;setup() to setup the intersections layer that will be used to get click events and to display the stones. The data you returned in $result[&#039;intersections&#039;] in .game.php-&amp;gt;getAllDatas() is now available in your .js-&amp;gt;setup() in gamedatas.intersections.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
            // Setup intersections&lt;br /&gt;
            for( var id in gamedatas.intersections )&lt;br /&gt;
            {&lt;br /&gt;
                var intersection = gamedatas.intersections[id];&lt;br /&gt;
&lt;br /&gt;
                dojo.place( this.format_block(&#039;jstpl_intersection&#039;, {&lt;br /&gt;
                    x:intersection.coord_x,&lt;br /&gt;
                    y:intersection.coord_y,&lt;br /&gt;
                    stone_type:(intersection.stone_color == null ? &amp;quot;no_stone&amp;quot; : &#039;stone_&#039; + intersection.stone_color)&lt;br /&gt;
                } ), $ ( &#039;gmk_background&#039; ) );&lt;br /&gt;
&lt;br /&gt;
                var x_pix = this.getXPixelCoordinates(intersection.coord_x);&lt;br /&gt;
                var y_pix = this.getYPixelCoordinates(intersection.coord_y);&lt;br /&gt;
                &lt;br /&gt;
                this.slideToObjectPos( $(&#039;intersection_&#039;+intersection.coord_x+&#039;_&#039;+intersection.coord_y), $(&#039;gmk_background&#039;), x_pix, y_pix, 10 ).play();&lt;br /&gt;
&lt;br /&gt;
                if (intersection.stone_color != null) {&lt;br /&gt;
                    // This intersection is taken, it shouldn&#039;t appear as clickable anymore&lt;br /&gt;
                    dojo.removeClass( &#039;intersection_&#039; + intersection.coord_x + &#039;_&#039; + intersection.coord_y, &#039;clickable&#039; );&lt;br /&gt;
                }&lt;br /&gt;
            } &lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Use some temporary css border-color or background-color and opacity to see the divs and make sure you have them positioned right. &lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
.gmk_intersection {&lt;br /&gt;
    width: 30px;&lt;br /&gt;
    height: 30px;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    background-color: blue;&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
You can declare some constants in material.inc.php and pass them to your .js for easy repositioning (modify constant, refresh). This is especially useful if the same constants have to be used on the server and on the client.&lt;br /&gt;
&lt;br /&gt;
* Declare your constants in material.inc.php (this will be automatically included in your .game.php)&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$this-&amp;gt;gameConstants = array(&lt;br /&gt;
		&amp;quot;INTERSECTION_WIDTH&amp;quot; =&amp;gt; 30,&lt;br /&gt;
		&amp;quot;INTERSECTION_HEIGHT&amp;quot; =&amp;gt; 30,		&lt;br /&gt;
		&amp;quot;INTERSECTION_X_SPACER&amp;quot; =&amp;gt; 2.8, // Float&lt;br /&gt;
		&amp;quot;INTERSECTION_Y_SPACER&amp;quot; =&amp;gt; 2.8, // Float&lt;br /&gt;
		&amp;quot;X_ORIGIN&amp;quot; =&amp;gt; 0,&lt;br /&gt;
		&amp;quot;Y_ORIGIN&amp;quot; =&amp;gt; 0,&lt;br /&gt;
);&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* In .game.php-&amp;gt;getAllDatas(), add the constants to the result array&lt;br /&gt;
&lt;br /&gt;
        // Constants&lt;br /&gt;
        $result[&#039;constants&#039;] = $this-&amp;gt;gameConstants;&lt;br /&gt;
&lt;br /&gt;
* In .js constructor, define a class variable for constants&lt;br /&gt;
&lt;br /&gt;
        // Game constants&lt;br /&gt;
      	this.gameConstants = null;&lt;br /&gt;
&lt;br /&gt;
* In .js-&amp;gt;setup() assign the constants to this variable&lt;br /&gt;
&lt;br /&gt;
        this.gameConstants = gamedatas.constants;&lt;br /&gt;
&lt;br /&gt;
* Then use it in your getXPixelCoordinates and getYPixelCoordinates functions&lt;br /&gt;
&lt;br /&gt;
        getXPixelCoordinates: function( intersection_x )&lt;br /&gt;
        {&lt;br /&gt;
        	return this.gameConstants[&#039;X_ORIGIN&#039;] + intersection_x * (this.gameConstants[&#039;INTERSECTION_WIDTH&#039;] + this.gameConstants[&#039;INTERSECTION_X_SPACER&#039;]); &lt;br /&gt;
        },&lt;br /&gt;
        &lt;br /&gt;
        getYPixelCoordinates: function( intersection_y )&lt;br /&gt;
        {&lt;br /&gt;
        	return this.gameConstants[&#039;Y_ORIGIN&#039;] + intersection_y * (this.gameConstants[&#039;INTERSECTION_HEIGHT&#039;] + this.gameConstants[&#039;INTERSECTION_Y_SPACER&#039;]); &lt;br /&gt;
        },&lt;br /&gt;
&lt;br /&gt;
Here is what you should get:&lt;br /&gt;
&lt;br /&gt;
[[File:Gomoku tuto3.png]]&lt;br /&gt;
&lt;br /&gt;
== Manage states and events ==&lt;br /&gt;
&lt;br /&gt;
Define your game states in states.inc.php. For gomoku we will use 3 states in addition of the predefined states 1 (gameSetup) and 99 (gameEnd). One to play, one to check the end game condition, one to give his turn to the other player if the game is not over.&lt;br /&gt;
&lt;br /&gt;
The first state requires an action from the player, so its type is &#039;activeplayer&#039;.&lt;br /&gt;
&lt;br /&gt;
The two others are automatic actions for the game, so their type is &#039;game&#039;.&lt;br /&gt;
&lt;br /&gt;
We will update the progression while checking for the end of the game, so for this state we set the &#039;updateGameProgression&#039; flag to true.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    2 =&amp;gt; array(&lt;br /&gt;
        &amp;quot;name&amp;quot; =&amp;gt; &amp;quot;playerTurn&amp;quot;,&lt;br /&gt;
        &amp;quot;description&amp;quot; =&amp;gt; clienttranslate(&#039;${actplayer} must play a stone&#039;),&lt;br /&gt;
        &amp;quot;descriptionmyturn&amp;quot; =&amp;gt; clienttranslate(&#039;${you} must play a stone&#039;),&lt;br /&gt;
        &amp;quot;type&amp;quot; =&amp;gt; &amp;quot;activeplayer&amp;quot;,&lt;br /&gt;
        &amp;quot;possibleactions&amp;quot; =&amp;gt; array( &amp;quot;playStone&amp;quot; ),&lt;br /&gt;
        &amp;quot;transitions&amp;quot; =&amp;gt; array( &amp;quot;stonePlayed&amp;quot; =&amp;gt; 3, &amp;quot;zombiePass&amp;quot; =&amp;gt; 3 )&lt;br /&gt;
    ),&lt;br /&gt;
&lt;br /&gt;
    3 =&amp;gt; array(&lt;br /&gt;
        &amp;quot;name&amp;quot; =&amp;gt; &amp;quot;checkEndOfGame&amp;quot;,&lt;br /&gt;
        &amp;quot;description&amp;quot; =&amp;gt; &#039;&#039;,&lt;br /&gt;
        &amp;quot;type&amp;quot; =&amp;gt; &amp;quot;game&amp;quot;,&lt;br /&gt;
        &amp;quot;action&amp;quot; =&amp;gt; &amp;quot;stCheckEndOfGame&amp;quot;,&lt;br /&gt;
        &amp;quot;updateGameProgression&amp;quot; =&amp;gt; true,&lt;br /&gt;
        &amp;quot;transitions&amp;quot; =&amp;gt; array( &amp;quot;gameEnded&amp;quot; =&amp;gt; 99, &amp;quot;notEndedYet&amp;quot; =&amp;gt; 4 )&lt;br /&gt;
    ),&lt;br /&gt;
&lt;br /&gt;
    4 =&amp;gt; array(&lt;br /&gt;
        &amp;quot;name&amp;quot; =&amp;gt; &amp;quot;nextPlayer&amp;quot;,&lt;br /&gt;
        &amp;quot;description&amp;quot; =&amp;gt; &#039;&#039;,&lt;br /&gt;
        &amp;quot;type&amp;quot; =&amp;gt; &amp;quot;game&amp;quot;,&lt;br /&gt;
        &amp;quot;action&amp;quot; =&amp;gt; &amp;quot;stNextPlayer&amp;quot;,&lt;br /&gt;
        &amp;quot;transitions&amp;quot; =&amp;gt; array( &amp;quot;&amp;quot; =&amp;gt; 2 )&lt;br /&gt;
    ),&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Implement the &#039;stNextPlayer()&#039; function in .game.php to manage turn rotation. Except if there are special rules for the game turn depending on context, this is really easy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    function stNextPlayer()&lt;br /&gt;
    {&lt;br /&gt;
    	self::trace( &amp;quot;stNextPlayer&amp;quot; );&lt;br /&gt;
    	 &lt;br /&gt;
    	// Go to next player&lt;br /&gt;
    	$active_player = self::activeNextPlayer();&lt;br /&gt;
    	self::giveExtraTime( $active_player );    &lt;br /&gt;
    	 &lt;br /&gt;
    	$this-&amp;gt;gamestate-&amp;gt;nextState();&lt;br /&gt;
    }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Add onclick events on intersections in .js-&amp;gt;setup()&lt;br /&gt;
&lt;br /&gt;
            // Add events on active elements (the third parameter is the method that will be called when the event defined by the second parameter happens - this method must be declared beforehand)&lt;br /&gt;
            this.addEventToClass( &amp;quot;gmk_intersection&amp;quot;, &amp;quot;onclick&amp;quot;, &amp;quot;onClickIntersection&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
Declare the corresponding .js-&amp;gt;onClickIntersection() function, which calls an action function on the server with appropriate parameters&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onClickIntersection: function( evt )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &#039;$$$$ Event : onClickIntersection&#039; );&lt;br /&gt;
            dojo.stopEvent( evt );&lt;br /&gt;
&lt;br /&gt;
            if( ! this.checkAction( &#039;playStone&#039; ) )&lt;br /&gt;
            { return; }&lt;br /&gt;
&lt;br /&gt;
            var node = evt.currentTarget.id;&lt;br /&gt;
            var coord_x = node.split(&#039;_&#039;)[1];&lt;br /&gt;
            var coord_y = node.split(&#039;_&#039;)[2];&lt;br /&gt;
            &lt;br /&gt;
            console.log( &#039;$$$$ Selected intersection : (&#039; + coord_x + &#039;, &#039; + coord_y + &#039;)&#039; );&lt;br /&gt;
            &lt;br /&gt;
            if ( this.isCurrentPlayerActive() ) {&lt;br /&gt;
                this.ajaxcall( &amp;quot;/gomoku/gomoku/playStone.html&amp;quot;, { lock: true, coord_x: coord_x, coord_y: coord_y }, this, function( result ) {}, function( is_error ) {} );&lt;br /&gt;
            }&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Add this action function in .action.php, retrieving parameters and calling the appropriate game action&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    public function playStone()&lt;br /&gt;
    {&lt;br /&gt;
        self::setAjaxMode();     &lt;br /&gt;
&lt;br /&gt;
        // Retrieve arguments&lt;br /&gt;
        // Note: these arguments correspond to what has been sent through the javascript &amp;quot;ajaxcall&amp;quot; method&lt;br /&gt;
        $coord_x = self::getArg( &amp;quot;coord_x&amp;quot;, AT_posint, true );&lt;br /&gt;
        $coord_y = self::getArg( &amp;quot;coord_y&amp;quot;, AT_posint, true );&lt;br /&gt;
&lt;br /&gt;
        // Then, call the appropriate method in your game logic, like &amp;quot;playCard&amp;quot; or &amp;quot;myAction&amp;quot;&lt;br /&gt;
        $this-&amp;gt;game-&amp;gt;playStone( $coord_x, $coord_y );&lt;br /&gt;
&lt;br /&gt;
        self::ajaxResponse( );&lt;br /&gt;
    }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Add game action in .game.php to update the database, send a notification to the client providing the event notified (‘stonePlayed’) and its parameters, and proceed to the next state.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    function playStone( $coord_x, $coord_y )&lt;br /&gt;
    {&lt;br /&gt;
        // Check that this is player&#039;s turn and that it is a &amp;quot;possible action&amp;quot; at this game state (see states.inc.php)&lt;br /&gt;
        self::checkAction( &#039;playStone&#039; ); &lt;br /&gt;
        &lt;br /&gt;
        $player_id = self::getActivePlayerId();&lt;br /&gt;
        &lt;br /&gt;
        // Check that this intersection is free&lt;br /&gt;
        $sql = &amp;quot;SELECT&lt;br /&gt;
                    id, coord_x, coord_y, stone_color&lt;br /&gt;
                FROM&lt;br /&gt;
                    intersection &lt;br /&gt;
                WHERE &lt;br /&gt;
                    coord_x = $coord_x &lt;br /&gt;
                    AND coord_y = $coord_y&lt;br /&gt;
                    AND stone_color is null&lt;br /&gt;
               &amp;quot;;&lt;br /&gt;
        $intersection = self::getObjectFromDb( $sql );&lt;br /&gt;
&lt;br /&gt;
        if ($intersection == null) {&lt;br /&gt;
            throw new BgaUserException( self::_(&amp;quot;There is already a stone on this intersection, you can&#039;t play there&amp;quot;) );&lt;br /&gt;
        }&lt;br /&gt;
&lt;br /&gt;
        // Get player color&lt;br /&gt;
        $sql = &amp;quot;SELECT&lt;br /&gt;
                    player_id, player_color&lt;br /&gt;
                FROM&lt;br /&gt;
                    player &lt;br /&gt;
                WHERE &lt;br /&gt;
                    player_id = $player_id&lt;br /&gt;
               &amp;quot;;&lt;br /&gt;
        $player = self::getNonEmptyObjectFromDb( $sql );&lt;br /&gt;
        $color = ($player[&#039;player_color&#039;] == &#039;ffffff&#039; ? &#039;white&#039; : &#039;black&#039;);&lt;br /&gt;
&lt;br /&gt;
        // Update the intersection with a stone of the appropriate color&lt;br /&gt;
        $intersection_id = $intersection[&#039;id&#039;];&lt;br /&gt;
        $sql = &amp;quot;UPDATE&lt;br /&gt;
                    intersection&lt;br /&gt;
                SET&lt;br /&gt;
                    stone_color = &#039;$color&#039;&lt;br /&gt;
                WHERE &lt;br /&gt;
                    id = $intersection_id&lt;br /&gt;
               &amp;quot;;&lt;br /&gt;
        self::DbQuery($sql);&lt;br /&gt;
        &lt;br /&gt;
        // Notify all players&lt;br /&gt;
        self::notifyAllPlayers( &amp;quot;stonePlayed&amp;quot;, clienttranslate( &#039;${player_name} dropped a stone ${coordinates}&#039; ), array(&lt;br /&gt;
            &#039;player_id&#039; =&amp;gt; $player_id,&lt;br /&gt;
            &#039;player_name&#039; =&amp;gt; self::getActivePlayerName(),&lt;br /&gt;
            &#039;coordinates&#039; =&amp;gt; $this-&amp;gt;getFormattedCoordinates($coord_x, $coord_y),&lt;br /&gt;
            &#039;coord_x&#039; =&amp;gt; $coord_x,&lt;br /&gt;
            &#039;coord_y&#039; =&amp;gt; $coord_y,&lt;br /&gt;
            &#039;color&#039; =&amp;gt; $color&lt;br /&gt;
        ) );&lt;br /&gt;
&lt;br /&gt;
        // Go to next game state&lt;br /&gt;
        $this-&amp;gt;gamestate-&amp;gt;nextState( &amp;quot;stonePlayed&amp;quot; );&lt;br /&gt;
    }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Catch the notification in .js-&amp;gt;setupNotifications() and link it to a javascript function to execute when the notification is received.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        setupNotifications: function()&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &#039;notifications subscriptions setup&#039; );&lt;br /&gt;
        &lt;br /&gt;
            dojo.subscribe( &#039;stonePlayed&#039;, this, &amp;quot;notif_stonePlayed&amp;quot; );&lt;br /&gt;
        }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Implement this function in javascript to update the intersection to show the stone, and register it inside the setNotifications function.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        notif_stonePlayed: function( notif )&lt;br /&gt;
        {&lt;br /&gt;
	    console.log( &#039;**** Notification : stonePlayed&#039; );&lt;br /&gt;
            console.log( notif );&lt;br /&gt;
&lt;br /&gt;
            // Create a stone&lt;br /&gt;
            dojo.place( this.format_block(&#039;jstpl_stone&#039;, {&lt;br /&gt;
                    stone_type:&#039;stone_&#039; + notif.args.color,&lt;br /&gt;
                    x:notif.args.coord_x,&lt;br /&gt;
                    y:notif.args.coord_y&lt;br /&gt;
                } ), $( &#039;intersection_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y ) );&lt;br /&gt;
&lt;br /&gt;
            // Place it on the player panel&lt;br /&gt;
            this.placeOnObject( $( &#039;stone_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y ), $( &#039;player_board_&#039; + notif.args.player_id ) );&lt;br /&gt;
&lt;br /&gt;
            // Animate a slide from the player panel to the intersection&lt;br /&gt;
            dojo.style( &#039;stone_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y, &#039;zIndex&#039;, 1 );&lt;br /&gt;
            var slide = this.slideToObject( $( &#039;stone_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y ), $( &#039;intersection_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y ), 1000 );&lt;br /&gt;
            dojo.connect( slide, &#039;onEnd&#039;, this, dojo.hitch( this, function() {&lt;br /&gt;
                        // At the end of the slide, update the intersection &lt;br /&gt;
                        dojo.removeClass( &#039;intersection_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y, &#039;no_stone&#039; );&lt;br /&gt;
                        dojo.addClass( &#039;intersection_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y, &#039;stone_&#039;  + notif.args.color );&lt;br /&gt;
                        dojo.removeClass( &#039;intersection_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y, &#039;clickable&#039; );&lt;br /&gt;
        			&lt;br /&gt;
                        // We can now destroy the stone since it is now visible through the change in style of the intersection&lt;br /&gt;
                        dojo.destroy( &#039;stone_&#039; + notif.args.coord_x + &#039;_&#039; + notif.args.coord_y );&lt;br /&gt;
       	    }));&lt;br /&gt;
            slide.play();&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
For this function to work properly, you also need: &lt;br /&gt;
&lt;br /&gt;
* to declare a stone javascript template in your .tpl file.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
var jstpl_stone=&#039;&amp;lt;div class=&amp;quot;gmk_stone ${stone_type}&amp;quot; id=&amp;quot;stone_${x}_${y}&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&#039;;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* to define the css styles for the stones&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
.gmk_stone {&lt;br /&gt;
	width: 30px;&lt;br /&gt;
	height: 30px;&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    background-image: url( &#039;../../img/gomoku/stones.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.no_stone { background-position: -60px 0px; }&lt;br /&gt;
&lt;br /&gt;
.stone_black {  background-position: 0px 0px; }&lt;br /&gt;
.stone_white { 	background-position: -30px 0px; }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
These styles rely on an PNG image (with transparent background) of both the white and black stones, and positions the background appropriately to show only the part of the background image matching the appropriate stone (or the transparent space if there is no stone). Here is what the image looks like:&lt;br /&gt;
&lt;br /&gt;
[[File:Gomoku stones.png]]&lt;br /&gt;
&lt;br /&gt;
The red circle is used to highlight intersections where you can drop a stone when the player&#039;s cursor hovers over them (we also change the cursor to a hand). To do this:&lt;br /&gt;
&lt;br /&gt;
* we define in the css file the &#039;clickable&#039; css class&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
.clickable {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
.clickable:hover { background-position: -90px 0px; }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* in .js, when we enter the &#039;playerTurn&#039; state, we add the &#039;clickable&#039; style to the intersections where there is no stone&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        onEnteringState: function( stateName, args )&lt;br /&gt;
        {&lt;br /&gt;
            console.log( &#039;Entering state: &#039;+stateName );&lt;br /&gt;
            &lt;br /&gt;
            switch( stateName )&lt;br /&gt;
            {&lt;br /&gt;
            &lt;br /&gt;
                case &#039;playerTurn&#039;:&lt;br /&gt;
                    if( this.isCurrentPlayerActive() )&lt;br /&gt;
                    {&lt;br /&gt;
                        var queueEntries = dojo.query( &#039;.no_stone&#039; );&lt;br /&gt;
	                    for(var i=0; i&amp;lt;queueEntries.length; i++) {	            	   &lt;br /&gt;
	                	   dojo.addClass( queueEntries[i], &#039;clickable&#039; );&lt;br /&gt;
	                    }&lt;br /&gt;
                    }            &lt;br /&gt;
            }&lt;br /&gt;
        },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The basic game turn is implemented: you can now drop some stones!&lt;br /&gt;
&lt;br /&gt;
[[File:Gomoku tuto4.png]]&lt;br /&gt;
&lt;br /&gt;
== Cleanup your styles ==&lt;br /&gt;
&lt;br /&gt;
Remove temporary css visualisation helpers : looks good!&lt;br /&gt;
&lt;br /&gt;
[[File:Gomoku tuto5.png]]&lt;br /&gt;
&lt;br /&gt;
== Implement rules and end of game conditions ==&lt;br /&gt;
&lt;br /&gt;
Implement specific rules for the game. For example in Gomoku, black plays first. So in .game.php-&amp;gt;setupNewGame(): &lt;br /&gt;
&lt;br /&gt;
* modify the default colors for players to white and black&lt;br /&gt;
&lt;br /&gt;
          $default_colors = array( &amp;quot;000000&amp;quot;, &amp;quot;ffffff&amp;quot;, );&lt;br /&gt;
&lt;br /&gt;
* and at the end of the setup make the black player active&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        // Black plays first&lt;br /&gt;
        $sql = &amp;quot;SELECT player_id, player_name FROM player WHERE player_color = &#039;000000&#039; &amp;quot;;&lt;br /&gt;
        $black_player = self::getNonEmptyObjectFromDb( $sql );&lt;br /&gt;
&lt;br /&gt;
        $this-&amp;gt;gamestate-&amp;gt;changeActivePlayer( $black_player[&#039;player_id&#039;] );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Implement rule for computing game progression in .game.php-&amp;gt;getGameProgression(). For Gomoku we will use the rate of occupied intersections over the total number of intersections. This will often be wildly inaccurate as the game can end pretty quickly, but it&#039;s about the best we can do (the game can drag to a stalemate with all intersections occupied and no winner).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    function getGameProgression()&lt;br /&gt;
    {&lt;br /&gt;
        // Compute and return the game progression&lt;br /&gt;
&lt;br /&gt;
        // Number of stones laid down on the goban over the total number of intersections * 100&lt;br /&gt;
        $sql = &amp;quot;&lt;br /&gt;
	    	SELECT round(100 * count(id) / (19*19) ) as value from intersection WHERE stone_color is not null&lt;br /&gt;
    	&amp;quot;;&lt;br /&gt;
    	$counter = self::getNonEmptyObjectFromDB( $sql );&lt;br /&gt;
&lt;br /&gt;
        return $counter[&#039;value&#039;];&lt;br /&gt;
    }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Implement end of game detection and update the score according to who is the winner. It is easier to check for a win directly after setting the stone, so: &lt;br /&gt;
&lt;br /&gt;
* declare a global &#039;end_of_game&#039; variable in .game.php-&amp;gt;Gomoku()&lt;br /&gt;
&lt;br /&gt;
        self::initGameStateLabels( array(&lt;br /&gt;
                  &amp;quot;end_of_game&amp;quot; =&amp;gt; 10,&lt;br /&gt;
        ) );&lt;br /&gt;
&lt;br /&gt;
* init that global variable to 0 in .game.php-&amp;gt;setupNewGame()&lt;br /&gt;
&lt;br /&gt;
        self::setGameStateInitialValue( &#039;end_of_game&#039;, 0 );&lt;br /&gt;
&lt;br /&gt;
* add the appropriate code in .game.php before proceeding to the next state, using a checkForWin() function implemented separately for clarity. If the game has been won, we set the score, send a score update notification to the client side, and set the &#039;end_of_game&#039; global variable to 1 as a flag signaling that the game has ended.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
        // Check if end of game has been met&lt;br /&gt;
        if ($this-&amp;gt;checkForWin( $coord_x, $coord_y, $color )) {&lt;br /&gt;
&lt;br /&gt;
            // Set active player score to 1 (he is the winner)&lt;br /&gt;
            $sql = &amp;quot;UPDATE player SET player_score = 1 WHERE player_id = $player_id&amp;quot;;&lt;br /&gt;
            self::DbQuery($sql);&lt;br /&gt;
&lt;br /&gt;
            // Notify final score&lt;br /&gt;
            $this-&amp;gt;notifyAllPlayers( &amp;quot;finalScore&amp;quot;,&lt;br /&gt;
    					clienttranslate( &#039;${player_name} wins the game!&#039; ),&lt;br /&gt;
    					array(&lt;br /&gt;
    							&amp;quot;player_name&amp;quot; =&amp;gt; self::getActivePlayerName(),&lt;br /&gt;
    							&amp;quot;player_id&amp;quot; =&amp;gt; $player_id,&lt;br /&gt;
    							&amp;quot;score_delta&amp;quot; =&amp;gt; 1,&lt;br /&gt;
    					)&lt;br /&gt;
   			);&lt;br /&gt;
&lt;br /&gt;
            // Set global variable flag to pass on the information that the game has ended&lt;br /&gt;
            self::setGameStateValue(&#039;end_of_game&#039;, 1);&lt;br /&gt;
&lt;br /&gt;
            // End of game message&lt;br /&gt;
            $this-&amp;gt;notifyAllPlayers( &amp;quot;message&amp;quot;,&lt;br /&gt;
    				clienttranslate(&#039;Thanks for playing!&#039;),&lt;br /&gt;
    				array(&lt;br /&gt;
    				)&lt;br /&gt;
    		);&lt;br /&gt;
&lt;br /&gt;
        }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Then in the gomoku-&amp;gt;stCheckEndOfGame() function which is called when your state machine goes to the &#039;checkEndOfGame&#039; state, check for this variable and for other possible &#039;end of game&#039; conditions (draw).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    function stCheckEndOfGame()&lt;br /&gt;
    {&lt;br /&gt;
        self::trace( &amp;quot;stCheckEndOfGame&amp;quot; );&lt;br /&gt;
&lt;br /&gt;
        $transition = &amp;quot;notEndedYet&amp;quot;;&lt;br /&gt;
&lt;br /&gt;
        // If there is no more free intersections, the game ends&lt;br /&gt;
        $sql = &amp;quot;SELECT id, coord_x, coord_y, stone_color FROM intersection WHERE stone_color is null&amp;quot;;&lt;br /&gt;
        $free = self::getCollectionFromDb( $sql );&lt;br /&gt;
&lt;br /&gt;
        if (count($free) == 0) {&lt;br /&gt;
            $transition = &amp;quot;gameEnded&amp;quot;;&lt;br /&gt;
        }        &lt;br /&gt;
&lt;br /&gt;
        // If the &#039;end of game&#039; flag has been set, end the game&lt;br /&gt;
        if (self::getGameStateValue(&#039;end_of_game&#039;) == 1) {&lt;br /&gt;
            $transition = &amp;quot;gameEnded&amp;quot;;&lt;br /&gt;
        }&lt;br /&gt;
                &lt;br /&gt;
        $this-&amp;gt;gamestate-&amp;gt;nextState( $transition );&lt;br /&gt;
    }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Catch the score notification on the client side in .js-&amp;gt;setupNotifications(). It is advised to set up a small delay after that so that end of game popup doesn&#039;t show too quickly.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
                dojo.subscribe( &#039;finalScore&#039;, this, &amp;quot;notif_finalScore&amp;quot; );&lt;br /&gt;
	        this.notifqueue.setSynchronous( &#039;finalScore&#039;, 1500 );&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Implement the function declared to handle the notification.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
            notif_finalScore: function( notif )&lt;br /&gt;
	    {&lt;br /&gt;
	        console.log( &#039;**** Notification : finalScore&#039; );&lt;br /&gt;
	        console.log( notif );&lt;br /&gt;
	      &lt;br /&gt;
                // Update score&lt;br /&gt;
                this.scoreCtrl[ notif.args.player_id ].incValue( notif.args.score_delta );&lt;br /&gt;
	    },&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Test everything thoroughly... you are done!&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
[[File:Gomoku tuto6.png]]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Gamehelptroyes&amp;diff=708</id>
		<title>Gamehelptroyes</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Gamehelptroyes&amp;diff=708"/>
		<updated>2013-03-24T14:51:54Z</updated>

		<summary type="html">&lt;p&gt;Een: Revert to English in the English wiki. German has been moved to the German wiki&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
== Goal ==&lt;br /&gt;
&lt;br /&gt;
Be the player with the most victory points at the end of the game.&lt;br /&gt;
&lt;br /&gt;
== Rules summary ==&lt;br /&gt;
&lt;br /&gt;
(This rules summary is based on the game help written by [http://boardgamegeek.com/user/pregremlin Andrew Agard] for Board Game Geek, under Creative Commons license. Please see [http://boardgamegeek.com/filepage/66976/complete-rules-reference-1-page-fold-in-half original file] here for details. Thank you Andrew !)&lt;br /&gt;
&lt;br /&gt;
===Initial Placement===&lt;br /&gt;
&lt;br /&gt;
* In clockwise order place a citizen in empty space of one building&lt;br /&gt;
* Continue in counter clockwise order from last player and so on until all citizens placed&lt;br /&gt;
&lt;br /&gt;
===Game play===&lt;br /&gt;
&lt;br /&gt;
====Phase 0: Reveal the Activity cards====&lt;br /&gt;
&lt;br /&gt;
Reveal activity card for each color corresponding to current round (first 3 rounds only)&lt;br /&gt;
&lt;br /&gt;
====Phase 1: Income and salaries====&lt;br /&gt;
&lt;br /&gt;
Receive 10 deniers and pay 1 per Bishopric and 2 per Palace citizen or lose 2 VP&lt;br /&gt;
&lt;br /&gt;
====Phase 2: Assembling the workforce====&lt;br /&gt;
&lt;br /&gt;
Roll yellow/white/red die per citizen in City Hall/Bishopric/Palace and place in district&lt;br /&gt;
&lt;br /&gt;
====Phase 3: Events====&lt;br /&gt;
&lt;br /&gt;
Reveal top red and white or yellow Event and place to right of queue (unlimited Events)&lt;br /&gt;
&lt;br /&gt;
Events take effect from left to right&lt;br /&gt;
&lt;br /&gt;
* Military: start player takes 1 black die per die symbol&lt;br /&gt;
&lt;br /&gt;
* Other events: see annex (can’t execute: execute as much as possible and lose 2 VP)&lt;br /&gt;
&lt;br /&gt;
After Events, roll black dice and counter:&lt;br /&gt;
&lt;br /&gt;
* Start player must counter highest-value with one or more dice form district. Total value must be &amp;gt;= die. Discard dice. May counter several dice at once&lt;br /&gt;
&lt;br /&gt;
* Gain 1 influence per dice countered (can’t counter: discard die and lose 2 VP)&lt;br /&gt;
&lt;br /&gt;
* In order players must counter highest remaining until all countered&lt;br /&gt;
&lt;br /&gt;
* Use any color dice. Double red dice. Can’t buy dice or use activity cubes&lt;br /&gt;
&lt;br /&gt;
====Phase 4: Actions====&lt;br /&gt;
&lt;br /&gt;
See below.&lt;br /&gt;
&lt;br /&gt;
====Phase 5: End of the round====&lt;br /&gt;
&lt;br /&gt;
Receive deniers from district&lt;br /&gt;
&lt;br /&gt;
Return citizens lying on buildings to personal supplies&lt;br /&gt;
&lt;br /&gt;
Return unused dice to general supply&lt;br /&gt;
&lt;br /&gt;
Pass start player card left.&lt;br /&gt;
&lt;br /&gt;
===Actions===&lt;br /&gt;
&lt;br /&gt;
In order each player can use 1-3 matching dice for one action or pass.&lt;br /&gt;
Round ends when no dice available or all players have passed&lt;br /&gt;
May pay player or bank (gray) to use dice. If using 1/2/3 dice pay 2/4/6 deniers per dice&lt;br /&gt;
&lt;br /&gt;
====Activate Activity Card====&lt;br /&gt;
&lt;br /&gt;
Must have tradesman. Hire if necessary by paying indicated amount in deniers. Place&lt;br /&gt;
citizen on free space (or illustration if full) from personal supply or any board location&lt;br /&gt;
&lt;br /&gt;
* 1 tradesman per player per card&lt;br /&gt;
* Must activate at least once if tradesman hired&lt;br /&gt;
* Citizens on card cannot be moved to newly freed space&lt;br /&gt;
&lt;br /&gt;
Immediate effect: activation cost (round down) determines color and use of dice&lt;br /&gt;
&lt;br /&gt;
Delayed effect: place cubes equal to activation cost. Use later (one cube per action)&lt;br /&gt;
&lt;br /&gt;
====Construct Cathedral====&lt;br /&gt;
&lt;br /&gt;
* Use 1-3 white dice to place 1-3 cubes on same-numbered construction site&lt;br /&gt;
* Must place on lower levels before placing in higher levels for each set of valued spaces&lt;br /&gt;
* Gain 1 VP and 1 or 2 Influence for each cube placed in spaces 1-3 or 4-6&lt;br /&gt;
&lt;br /&gt;
====Combat Events====&lt;br /&gt;
&lt;br /&gt;
* Activation cost (round down) defines dice and number of cubes to place on card&lt;br /&gt;
* Place cubes on small banner starting with upper left. Gain 1 influence for each. Only place on a single card each action and can’t place more cubes than banners&lt;br /&gt;
    &lt;br /&gt;
Event countered when banners filled&lt;br /&gt;
* Most cubes earns higher reward (tied: total rounded down, 2nd earns nothing). If only 1 player on card earn both rewards.&lt;br /&gt;
* 2nd most cubes earns smaller reward (tied: total rounded down)&lt;br /&gt;
* Most cubes takes card (tied: player who placed first). Discard if neutral has most&lt;br /&gt;
* Marauding: rewards given, cubes removed, and then event is available again&lt;br /&gt;
&lt;br /&gt;
====Place a citizen on building====&lt;br /&gt;
&lt;br /&gt;
* Use exactly one die to place one citizen from personal supply or any board location on first space of matching building row or space corresponding to die color and value&lt;br /&gt;
&lt;br /&gt;
* Shift existing citizens to right. Citizens pushed off are laid on building illustration&lt;br /&gt;
&lt;br /&gt;
* If already have expelled citizen nobody can expel your citizens from that building&lt;br /&gt;
&lt;br /&gt;
====Use Agriculture====&lt;br /&gt;
&lt;br /&gt;
* Gain number of deniers equal to total value divided by 2 (round down)&lt;br /&gt;
&lt;br /&gt;
===Pass===&lt;br /&gt;
&lt;br /&gt;
* If dice still in any city square, pass and receive 2 deniers which are placed in district&lt;br /&gt;
&lt;br /&gt;
* Each turn add another denier to district&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Have a good game !&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Gamehelpunitedsquare&amp;diff=707</id>
		<title>Gamehelpunitedsquare</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Gamehelpunitedsquare&amp;diff=707"/>
		<updated>2013-03-24T14:28:18Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;==Goal==&lt;br /&gt;
The goal is to be the player who has the most squares of his colors.&lt;br /&gt;
&lt;br /&gt;
==Rules==&lt;br /&gt;
The game contains multicolored squares (red, blue. yellow and green) which appear as 4 colored triangles on the square.&lt;br /&gt;
Each player on his turn puts a multicolored square next to a square already on the board. The played square (which can be shifted to fit as requested, keeping the order of the colors the same) must be put in a way that creates at least on colored square (not necessarily your color). If it is not possible for the player to put down a square, the turn is passed to the next player.&lt;br /&gt;
&lt;br /&gt;
It is also possible to have &amp;quot;non playable&amp;quot; squares which are created when 2 of the same color are connected to the same open square. This is also a strategy to prevent from your opponent from getting more squares of his color. (e.g. if there is a red triangle facing an empty square and i connect to that same empty square another red triangle from another side, the empty square cannot be played and all colors around the &amp;quot;non playable&amp;quot; square will not become squares and won&#039;t gain points).&lt;br /&gt;
&lt;br /&gt;
==Ending the game==&lt;br /&gt;
When all playable squares have been played, the player with the most squares of his color wins the game.&lt;br /&gt;
&lt;br /&gt;
== Game preferences ==&lt;br /&gt;
&lt;br /&gt;
The &#039;&#039;&#039;colorblind&#039;&#039;&#039; option available for this game enables an alternative setup displaying symbols on the tokens using the great color code designed by Miguel Neiva: [http://www.coloradd.net/code.asp ColorADD].&lt;br /&gt;
&lt;br /&gt;
Learning the code is easy, just take a look at the following synthesis panel:&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[[File:ColorADD.jpg]]&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;HAVE A GOOD GAME!&#039;&#039;&#039;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Gamehelpunitedsquare&amp;diff=706</id>
		<title>Gamehelpunitedsquare</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Gamehelpunitedsquare&amp;diff=706"/>
		<updated>2013-03-24T14:24:23Z</updated>

		<summary type="html">&lt;p&gt;Een: Adding info about colorblind preference&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;==Goal==&lt;br /&gt;
The goal is to be the player who has the most squares of his colors.&lt;br /&gt;
&lt;br /&gt;
==Rules==&lt;br /&gt;
The game contains multicolored squares (red, blue. yellow and green) which appear as 4 colored triangles on the square.&lt;br /&gt;
Each player on his turn puts a multicolored square next to a square already on the board. The played square (which can be shifted to fit as requested, keeping the order of the colors the same) must be put in a way that creates at least on colored square (not necessarily your color). If it is not possible for the player to put down a square, the turn is passed to the next player.&lt;br /&gt;
&lt;br /&gt;
It is also possible to have &amp;quot;non playable&amp;quot; squares which are created when 2 of the same color are connected to the same open square. This is also a strategy to prevent from your opponent from getting more squares of his color. (e.g. if there is a red triangle facing an empty square and i connect to that same empty square another red triangle from another side, the empty square cannot be played and all colors around the &amp;quot;non playable&amp;quot; square will not become squares and won&#039;t gain points).&lt;br /&gt;
&lt;br /&gt;
==Ending the game==&lt;br /&gt;
When all playable squares have been played, the player with the most squares of his color wins the game.&lt;br /&gt;
&lt;br /&gt;
== Game preferences ==&lt;br /&gt;
&lt;br /&gt;
The &#039;&#039;&#039;colorblind&#039;&#039;&#039; option available for this game enables an alternative setup displaying symbols on the tokens using the great color code designed by Miguel Neiva: [http://www.coloradd.net/code.asp ColorADD].&lt;br /&gt;
&lt;br /&gt;
Learning the code is easy, just take a look at the following synthesis panel:&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[[File:ColorADD.jpg]]&lt;br /&gt;
&lt;br /&gt;
HAVE A GOOD GAME!&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Gamehelpcoloretto&amp;diff=705</id>
		<title>Gamehelpcoloretto</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Gamehelpcoloretto&amp;diff=705"/>
		<updated>2013-03-24T14:13:28Z</updated>

		<summary type="html">&lt;p&gt;Een: Move German text to German wiki&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Gamehelpcaylus&amp;diff=704</id>
		<title>Gamehelpcaylus</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Gamehelpcaylus&amp;diff=704"/>
		<updated>2013-03-24T14:10:25Z</updated>

		<summary type="html">&lt;p&gt;Een: Rules link updated in the game page, obsolete information removed&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Gamehelpcantstop&amp;diff=703</id>
		<title>Gamehelpcantstop</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Gamehelpcantstop&amp;diff=703"/>
		<updated>2013-03-24T14:06:08Z</updated>

		<summary type="html">&lt;p&gt;Een: Chinese translation moved to Chinese wiki&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Can&#039;t Stop is a very easy and fast game!&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;How to play&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
Roll 4 standard dice and then choose the sums of any 2 dice to advance your position on the board. You are allowed to use 3 temporary markers to track your progress in columns marked 2 through 12. These markers are commonly white or black. You can continue to roll the dice hoping to roll one of the previous combinations in the three columns selected this turn. When you think you&#039;ve pushed your luck far enough you say &amp;quot;STOP&amp;quot; then pass the dice to the next player and replace the white markers with your own. If you roll the dice and find no useful combination you fail and your progress is lost. The more common numbers on 2d6 (6,7 and 8) have more steps in their paths while the less common combinations (2 and 12) have fewer.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;The object of the game is&#039;&#039;&#039; to reach and cover 3 peaks of these columns!&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Practical_debugging&amp;diff=660</id>
		<title>Practical debugging</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Practical_debugging&amp;diff=660"/>
		<updated>2013-02-15T15:09:18Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Javascript does not know how to sum two numbers */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
This page gives you practical tips to debug your game during the development. Don&#039;t hesitate to share with us your difficulties in order we can improve this section.&lt;br /&gt;
&lt;br /&gt;
== Tools ==&lt;br /&gt;
&lt;br /&gt;
To work on BGA Studio, we recommend you to use [www.google.com/chrome Google Chrome] as it&#039;s the current fastest browser for BGA platform, and it&#039;s available in all OS.&lt;br /&gt;
&lt;br /&gt;
Another reason to use Chrome is that it embed all tools you need to work on BGA Studio. You can see them by pressing &amp;quot;F12&amp;quot; or from the menu (&amp;quot;Tools &amp;gt; Development tools&amp;quot;).&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
To debug with Firefox browser, we advise you to use these 2 extensions:&lt;br /&gt;
* [https://addons.mozilla.org/firefox/addon/firebug/ Firebug]&lt;br /&gt;
* [https://addons.mozilla.org/firefox/addon/web-developer/ Web developper]&lt;br /&gt;
&lt;br /&gt;
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...&lt;br /&gt;
&lt;br /&gt;
== General tip for debugging ==&lt;br /&gt;
&lt;br /&gt;
In general for debugging, think of using the &#039;[[Tools_and_tips_of_BGA_Studio#Save_.26_restore_state|save &amp;amp; restore]] state&#039; 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.&lt;br /&gt;
&lt;br /&gt;
You can save up to 3 different states.&lt;br /&gt;
&lt;br /&gt;
== Debugging my game when it cannot start ==&lt;br /&gt;
&lt;br /&gt;
If your game don&#039;t start because of an error, you are probably in one of these situations:&lt;br /&gt;
* There is a SQL error in your dbmodel.sql file.&lt;br /&gt;
* You have a syntax error in your PHP file.&lt;br /&gt;
* Your PHP &amp;quot;setup&amp;quot; - or any method used during the game initial states - generates an exception.&lt;br /&gt;
&lt;br /&gt;
If the error is not explicitly displayed when you click on &amp;quot;Express start&amp;quot;, you should check the &amp;quot;Gameserver error log&amp;quot; in the [[Studio_back-office|Studio backoffice]].&lt;br /&gt;
&lt;br /&gt;
== Debugging my PHP game logic (or my view) ==&lt;br /&gt;
&lt;br /&gt;
Most of the time, debugging PHP is quite easy. Here&#039;s what I do when I want to develop/debug some game logic that is triggered by some game action:&lt;br /&gt;
&lt;br /&gt;
* At first, I make sure that I can reproduce the needed game situation in one click. To do this, I use the &amp;quot;[[Tools_and_tips_of_BGA_Studio#Save_.26_restore_state|save &amp;amp; restore]]&amp;quot; function.&lt;br /&gt;
* Another possibility for this is to place a &#039;&#039;&#039;die(&#039;ok&#039;);&#039;&#039;&#039; 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.&lt;br /&gt;
* Then, I use &#039;&#039;&#039;var_dump&#039;&#039;&#039; function to dump PHP variables and check what&#039;s wrong, until it works.&lt;br /&gt;
&lt;br /&gt;
Example:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
// (...my code to debug)&lt;br /&gt;
&lt;br /&gt;
var_dump( $my_variable );&lt;br /&gt;
die(&#039;ok&#039;);&lt;br /&gt;
&lt;br /&gt;
// (...my code to debug)&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Debugging my HTML/CSS layout ==&lt;br /&gt;
&lt;br /&gt;
Situation examples:&lt;br /&gt;
* why my game element doesn&#039;t show up in the interface?&lt;br /&gt;
* why my CSS property hasn&#039;t been applied to this element?&lt;br /&gt;
* why this game element is displayed at this position?&lt;br /&gt;
&lt;br /&gt;
A first useful tip when an element does not show up in the interface is to give it a red background:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
#my_element {&lt;br /&gt;
  ... some CSS definitions ...&lt;br /&gt;
  background-color: red;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
This way, you know if the element is not visible because of some of its CSS property or because of anything else.&lt;br /&gt;
&lt;br /&gt;
Another tip: sometimes, you change a CSS property with no visible effect on your interface. In that case, add a &amp;quot;display:none&amp;quot; property. If your element does not disappear, the bug probably comes from your CSS selector and not from your CSS property.&lt;br /&gt;
&lt;br /&gt;
Using Chrome &amp;quot;Elements&amp;quot; tab (thre first one), you can:&lt;br /&gt;
* See the CURRENT HTML of your page. Remember that the classical &amp;quot;show page source&amp;quot; is inefficient with BGA as you are modifying the page source with your Javascript code.&lt;br /&gt;
* Using the &amp;quot;magnifying glass&amp;quot;, you can click on any part of your game interface and check it&#039;s HTML code and associated CSS styles.&lt;br /&gt;
* You can even modify directly some CSS property and see if how it looks immediately on the game interface.&lt;br /&gt;
&lt;br /&gt;
== Debugging my Javascript game interface logic ==&lt;br /&gt;
&lt;br /&gt;
Compare to PHP debugging, Javascript debugging can sometimes be painful.&lt;br /&gt;
&lt;br /&gt;
Here&#039;s are some tips to make your life easier while developing and debugging Javascript:&lt;br /&gt;
&lt;br /&gt;
=== Do complex things on PHP side ===&lt;br /&gt;
&lt;br /&gt;
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&#039;t write it on server side first.&lt;br /&gt;
&lt;br /&gt;
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 &amp;quot;args&amp;quot; game state property.&lt;br /&gt;
&lt;br /&gt;
Note: check Reversi example for this.&lt;br /&gt;
&lt;br /&gt;
=== Add traces in your code ===&lt;br /&gt;
&lt;br /&gt;
You can use the following:&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;console.log( variable_to_inspect )&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
It will give you the object structure of the variable in the Javascript console, without blocking the execution.&lt;br /&gt;
&lt;br /&gt;
It&#039;s often a good idea to precede this call with a console.log( &#039;### HERE ###&#039; ); to find more easily the appropriate line in the console log.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;alert( variable_to_inspect )&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
It will popup what you wish and pause the execution until you click ok.&lt;br /&gt;
&lt;br /&gt;
This won&#039;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.&lt;br /&gt;
&lt;br /&gt;
== Some frequent errors ==&lt;br /&gt;
&lt;br /&gt;
=== when launching the game &amp;quot;Fatal error during creation of database ebd_quoridor_389 Not logged.&amp;quot; ===&lt;br /&gt;
&lt;br /&gt;
Check that you didn&#039;t use $g_user or getCurrentPlayerId() in setupNewGame() function or in an &amp;quot;args&amp;quot; function of your state.&lt;br /&gt;
&lt;br /&gt;
As these functions are not consequences of a user action, there is no current player defined.&lt;br /&gt;
&lt;br /&gt;
As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.&lt;br /&gt;
&lt;br /&gt;
=== when refreshing the web page, the interface remains on &amp;quot;Application loading...&amp;quot; ===&lt;br /&gt;
&lt;br /&gt;
In this case, you probably have a syntax error in your Javascript code, and the interface refuses to load.&lt;br /&gt;
&lt;br /&gt;
To find this error, check if there is an error message in the Javascript console (F12).&lt;br /&gt;
&lt;br /&gt;
If there is really nothing on the log, it&#039;s probably that the system was unable to load your Javascript because of an syntax error that affect the structure of the Javascript file, typically a missing &amp;quot;}&amp;quot; or a missing &amp;quot;,&amp;quot; after a method definition.&lt;br /&gt;
&lt;br /&gt;
=== When I do a move, I got &amp;quot;Move recorded, waiting for update ...&amp;quot; forever ===&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Move recorded&amp;quot; means that your ajaxcall request has been sent to the server and returned normally.&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Waiting for update&amp;quot; means that your client interface is waiting for some notifications from the server that correspond to the move we just did.&lt;br /&gt;
&lt;br /&gt;
If this message stays forever, it is probably that your PHP code does not send any notification when the move happens, which is abnormal. To fix this: add a notifyAllPlayers or a notifyPlayer call in your PHP code.&lt;br /&gt;
&lt;br /&gt;
=== Some player action is triggered randomly when I click somewhere on the game area ===&lt;br /&gt;
&lt;br /&gt;
You probably used &amp;quot;dojo.connect&amp;quot; on a null object. In this case, dojo.connect associate the event (ex: &amp;quot;onclick&amp;quot;) to the whole game area.&lt;br /&gt;
&lt;br /&gt;
Most of the time it happens in this situation, when my_object element does not exists:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
   dojo.connect( $(&amp;quot;my_object&amp;quot;), &amp;quot;onclick&amp;quot;, this, function() {&lt;br /&gt;
     ...&lt;br /&gt;
   }&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To determine if this is the case, place &amp;quot;alert( $(&amp;quot;my_object&amp;quot;) )&amp;quot; before the dojo.connect to check if the object exists or not.&lt;br /&gt;
&lt;br /&gt;
=== Javascript does not know how to sum two numbers ===&lt;br /&gt;
&lt;br /&gt;
Be careful when you manipulate integers returned by notifications: most of the time, Javascript considers they are Strings and not Integers.&lt;br /&gt;
&lt;br /&gt;
As a result:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    var i=1;&lt;br /&gt;
    i += notif.args.increment;  // With notif.args.increment=&#039;1&#039;&lt;br /&gt;
    alert( i );                 // i=11 instead of 2 !! Javascript concatenate 2 strings !&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To solve this, you should use the &amp;quot;toint&amp;quot; function:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    var i=1;&lt;br /&gt;
    i += toint( notif.args.increment );  // With notif.args.increment=&#039;1&#039;&lt;br /&gt;
    alert( i );                 // i=2 :)&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Javascript: do not use substr with negative numbers ===&lt;br /&gt;
&lt;br /&gt;
To get the last characters of a string, use &amp;quot;slice&amp;quot; instead of &amp;quot;substr&amp;quot; which has a bug on IE:&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
    var three_last_characters = string.substr( -3 );   // Wrong&lt;br /&gt;
    var three_last_characters = string.slice( -3 );    // Correct&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=554</id>
		<title>Studio FAQ</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=554"/>
		<updated>2013-01-19T13:25:09Z</updated>

		<summary type="html">&lt;p&gt;Een: /* I can&amp;#039;t edit the files for my game, it looks like they are readonly. What&amp;#039;s happening? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This is a place where we will collect and answer frequently asked questions.&lt;br /&gt;
&lt;br /&gt;
== What should I use to access the files through SFTP? ==&lt;br /&gt;
&lt;br /&gt;
There is a lot of tools to do that. Use the one you are the most comfortable with.&lt;br /&gt;
&lt;br /&gt;
On Linux, you can for example use the &#039;Connect to server&#039; function of the Nautilus file management system, or use sshfs.&lt;br /&gt;
&lt;br /&gt;
On Windows, there is for example the WinSCP client.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t edit the files in my game directory, it looks like they are readonly. What&#039;s happening? ==&lt;br /&gt;
&lt;br /&gt;
Maybe there is a maintenance operation underway.&lt;br /&gt;
&lt;br /&gt;
If you don&#039;t get access back after some time (say one or two hours), please send us a mail to check.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t access the Studio back-office, I get a &#039;Not authorized&#039; error message? ==&lt;br /&gt;
&lt;br /&gt;
You should first connect to the Studio website (with any of your &amp;lt;developer name&amp;gt;&amp;lt;number&amp;gt; accounts). As the authentication is shared with the back-office, then you will be able to access it.&lt;br /&gt;
&lt;br /&gt;
== I don&#039;t know the name to use to commit my game, what name should I use? ==&lt;br /&gt;
&lt;br /&gt;
The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).&lt;br /&gt;
It is the same name as the name used for the game folder in your SFTP access.&lt;br /&gt;
&lt;br /&gt;
== It&#039;s pretty annoying to log in with multiple users to start a game. Is there some easier way? ==&lt;br /&gt;
&lt;br /&gt;
You can use the &#039;Express start&#039; function. It will automatically make the specified number of players join the game (using the first of your ten player accounts available) and start the game.&lt;br /&gt;
&lt;br /&gt;
During the game, there is a red arrow on the right of each player name, that you can use to open a tab from this player&#039;s perspective.&lt;br /&gt;
&lt;br /&gt;
You can also end the game in two clicks by clicking the &#039;End game&#039; button then selecting &#039;Express game stop&#039; in the popup.&lt;br /&gt;
&lt;br /&gt;
== What is the working language on BGA studio? ==&lt;br /&gt;
&lt;br /&gt;
Working language is &#039;&#039;&#039;English&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Variables and functions must be named with English words.&lt;br /&gt;
&lt;br /&gt;
Comments must be written in English.&lt;br /&gt;
&lt;br /&gt;
Game interface strings and game logs must be written in English.&lt;br /&gt;
&lt;br /&gt;
== How can I provide translation in my language? == &lt;br /&gt;
&lt;br /&gt;
BGA administrators will translate the game in French before the game release.&lt;br /&gt;
&lt;br /&gt;
After the game release, the collaborative translation interface can be used to translate into other languages.&lt;br /&gt;
&lt;br /&gt;
== Is there a special way to declare the strings that must be translated? == &lt;br /&gt;
&lt;br /&gt;
Yes. This declaration is made through transparent functions, that depend on the context.&lt;br /&gt;
&lt;br /&gt;
In javascript files, you should use _( &#039;My string to translate&#039; ).&lt;br /&gt;
&lt;br /&gt;
In php files, you should use self::_( &#039;My string to translate&#039; ) when the string can be translated on the server side (ex: title included in the game layout) and clienttranslate( &#039;My string to translate&#039; ) when the string must be translated on the client side (ex: message for the game log).&lt;br /&gt;
&lt;br /&gt;
== I updated the images in the &#039;img&#039; folder of my game, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.&lt;br /&gt;
&lt;br /&gt;
If the images still don&#039;t show after that, please try emptying your browser cache and reloading the page.&lt;br /&gt;
&lt;br /&gt;
== I added some game options / some game statistics, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.&lt;br /&gt;
&lt;br /&gt;
== Is there a quick way to access the database for my current table? ==&lt;br /&gt;
&lt;br /&gt;
Yes! While playing a game on studio, you have a &amp;quot;Go to game database&amp;quot; link at the bottom of your game. This link will bring you directly to the database for the current table.&lt;br /&gt;
&lt;br /&gt;
== What is the best way to debug? ==&lt;br /&gt;
&lt;br /&gt;
On the server side (PHP), you can use one of these:&lt;br /&gt;
* die(var_dump( $variable_to_inspect );&lt;br /&gt;
* throw new BgaUserException(var_dump( $variable_to_inspect );&lt;br /&gt;
&lt;br /&gt;
On the client side (Javascript), we recommand installing Firebug for Firefox (or using the &#039;Developer tools&#039; with Chrome that have about the same functionalities), then:&lt;br /&gt;
* console.log( variable_to_inspect ); will give you the object structure of the variable in the Firebug console, without blocking the execution. It&#039;s often a good idea to precede this call with a console.log( &#039;### HERE ###&#039; ); to find more easily the appropriate line in the console log.&lt;br /&gt;
* alert( variable_to_inspect ); will popup what you wish and pause the execution until you click ok. This won&#039;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.&lt;br /&gt;
&lt;br /&gt;
In general for debugging, think of using the &#039;Save &amp;amp; restore state&#039; 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.&lt;br /&gt;
&lt;br /&gt;
=== Some frequent errors ===&lt;br /&gt;
&lt;br /&gt;
; The following error occurs when launching the game &amp;quot;Fatal error during creation of database ebd_quoridor_389 Not logged.&amp;quot;&lt;br /&gt;
: Check that you didn&#039;t use $g_user or getCurrentPlayerId() in setupNewGame() function or in an &amp;quot;args&amp;quot; function of your state. As these functions are not consequences of a user action, there is no current player defined. As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=553</id>
		<title>Studio FAQ</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=553"/>
		<updated>2013-01-19T13:24:53Z</updated>

		<summary type="html">&lt;p&gt;Een: /* I can&amp;#039;t edit the file, it looks like they are readonly. What&amp;#039;s happening? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This is a place where we will collect and answer frequently asked questions.&lt;br /&gt;
&lt;br /&gt;
== What should I use to access the files through SFTP? ==&lt;br /&gt;
&lt;br /&gt;
There is a lot of tools to do that. Use the one you are the most comfortable with.&lt;br /&gt;
&lt;br /&gt;
On Linux, you can for example use the &#039;Connect to server&#039; function of the Nautilus file management system, or use sshfs.&lt;br /&gt;
&lt;br /&gt;
On Windows, there is for example the WinSCP client.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t edit the files for my game, it looks like they are readonly. What&#039;s happening? ==&lt;br /&gt;
&lt;br /&gt;
Maybe there is a maintenance operation underway.&lt;br /&gt;
&lt;br /&gt;
If you don&#039;t get access back after some time (say one or two hours), please send us a mail to check.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t access the Studio back-office, I get a &#039;Not authorized&#039; error message? ==&lt;br /&gt;
&lt;br /&gt;
You should first connect to the Studio website (with any of your &amp;lt;developer name&amp;gt;&amp;lt;number&amp;gt; accounts). As the authentication is shared with the back-office, then you will be able to access it.&lt;br /&gt;
&lt;br /&gt;
== I don&#039;t know the name to use to commit my game, what name should I use? ==&lt;br /&gt;
&lt;br /&gt;
The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).&lt;br /&gt;
It is the same name as the name used for the game folder in your SFTP access.&lt;br /&gt;
&lt;br /&gt;
== It&#039;s pretty annoying to log in with multiple users to start a game. Is there some easier way? ==&lt;br /&gt;
&lt;br /&gt;
You can use the &#039;Express start&#039; function. It will automatically make the specified number of players join the game (using the first of your ten player accounts available) and start the game.&lt;br /&gt;
&lt;br /&gt;
During the game, there is a red arrow on the right of each player name, that you can use to open a tab from this player&#039;s perspective.&lt;br /&gt;
&lt;br /&gt;
You can also end the game in two clicks by clicking the &#039;End game&#039; button then selecting &#039;Express game stop&#039; in the popup.&lt;br /&gt;
&lt;br /&gt;
== What is the working language on BGA studio? ==&lt;br /&gt;
&lt;br /&gt;
Working language is &#039;&#039;&#039;English&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Variables and functions must be named with English words.&lt;br /&gt;
&lt;br /&gt;
Comments must be written in English.&lt;br /&gt;
&lt;br /&gt;
Game interface strings and game logs must be written in English.&lt;br /&gt;
&lt;br /&gt;
== How can I provide translation in my language? == &lt;br /&gt;
&lt;br /&gt;
BGA administrators will translate the game in French before the game release.&lt;br /&gt;
&lt;br /&gt;
After the game release, the collaborative translation interface can be used to translate into other languages.&lt;br /&gt;
&lt;br /&gt;
== Is there a special way to declare the strings that must be translated? == &lt;br /&gt;
&lt;br /&gt;
Yes. This declaration is made through transparent functions, that depend on the context.&lt;br /&gt;
&lt;br /&gt;
In javascript files, you should use _( &#039;My string to translate&#039; ).&lt;br /&gt;
&lt;br /&gt;
In php files, you should use self::_( &#039;My string to translate&#039; ) when the string can be translated on the server side (ex: title included in the game layout) and clienttranslate( &#039;My string to translate&#039; ) when the string must be translated on the client side (ex: message for the game log).&lt;br /&gt;
&lt;br /&gt;
== I updated the images in the &#039;img&#039; folder of my game, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.&lt;br /&gt;
&lt;br /&gt;
If the images still don&#039;t show after that, please try emptying your browser cache and reloading the page.&lt;br /&gt;
&lt;br /&gt;
== I added some game options / some game statistics, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.&lt;br /&gt;
&lt;br /&gt;
== Is there a quick way to access the database for my current table? ==&lt;br /&gt;
&lt;br /&gt;
Yes! While playing a game on studio, you have a &amp;quot;Go to game database&amp;quot; link at the bottom of your game. This link will bring you directly to the database for the current table.&lt;br /&gt;
&lt;br /&gt;
== What is the best way to debug? ==&lt;br /&gt;
&lt;br /&gt;
On the server side (PHP), you can use one of these:&lt;br /&gt;
* die(var_dump( $variable_to_inspect );&lt;br /&gt;
* throw new BgaUserException(var_dump( $variable_to_inspect );&lt;br /&gt;
&lt;br /&gt;
On the client side (Javascript), we recommand installing Firebug for Firefox (or using the &#039;Developer tools&#039; with Chrome that have about the same functionalities), then:&lt;br /&gt;
* console.log( variable_to_inspect ); will give you the object structure of the variable in the Firebug console, without blocking the execution. It&#039;s often a good idea to precede this call with a console.log( &#039;### HERE ###&#039; ); to find more easily the appropriate line in the console log.&lt;br /&gt;
* alert( variable_to_inspect ); will popup what you wish and pause the execution until you click ok. This won&#039;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.&lt;br /&gt;
&lt;br /&gt;
In general for debugging, think of using the &#039;Save &amp;amp; restore state&#039; 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.&lt;br /&gt;
&lt;br /&gt;
=== Some frequent errors ===&lt;br /&gt;
&lt;br /&gt;
; The following error occurs when launching the game &amp;quot;Fatal error during creation of database ebd_quoridor_389 Not logged.&amp;quot;&lt;br /&gt;
: Check that you didn&#039;t use $g_user or getCurrentPlayerId() in setupNewGame() function or in an &amp;quot;args&amp;quot; function of your state. As these functions are not consequences of a user action, there is no current player defined. As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=552</id>
		<title>Studio FAQ</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=552"/>
		<updated>2013-01-19T13:24:35Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This is a place where we will collect and answer frequently asked questions.&lt;br /&gt;
&lt;br /&gt;
== What should I use to access the files through SFTP? ==&lt;br /&gt;
&lt;br /&gt;
There is a lot of tools to do that. Use the one you are the most comfortable with.&lt;br /&gt;
&lt;br /&gt;
On Linux, you can for example use the &#039;Connect to server&#039; function of the Nautilus file management system, or use sshfs.&lt;br /&gt;
&lt;br /&gt;
On Windows, there is for example the WinSCP client.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t edit the file, it looks like they are readonly. What&#039;s happening? ==&lt;br /&gt;
&lt;br /&gt;
Maybe there is a maintenance operation underway.&lt;br /&gt;
&lt;br /&gt;
If you don&#039;t get access back after some time (say one or two hours), please send us a mail to check.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t access the Studio back-office, I get a &#039;Not authorized&#039; error message? ==&lt;br /&gt;
&lt;br /&gt;
You should first connect to the Studio website (with any of your &amp;lt;developer name&amp;gt;&amp;lt;number&amp;gt; accounts). As the authentication is shared with the back-office, then you will be able to access it.&lt;br /&gt;
&lt;br /&gt;
== I don&#039;t know the name to use to commit my game, what name should I use? ==&lt;br /&gt;
&lt;br /&gt;
The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).&lt;br /&gt;
It is the same name as the name used for the game folder in your SFTP access.&lt;br /&gt;
&lt;br /&gt;
== It&#039;s pretty annoying to log in with multiple users to start a game. Is there some easier way? ==&lt;br /&gt;
&lt;br /&gt;
You can use the &#039;Express start&#039; function. It will automatically make the specified number of players join the game (using the first of your ten player accounts available) and start the game.&lt;br /&gt;
&lt;br /&gt;
During the game, there is a red arrow on the right of each player name, that you can use to open a tab from this player&#039;s perspective.&lt;br /&gt;
&lt;br /&gt;
You can also end the game in two clicks by clicking the &#039;End game&#039; button then selecting &#039;Express game stop&#039; in the popup.&lt;br /&gt;
&lt;br /&gt;
== What is the working language on BGA studio? ==&lt;br /&gt;
&lt;br /&gt;
Working language is &#039;&#039;&#039;English&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Variables and functions must be named with English words.&lt;br /&gt;
&lt;br /&gt;
Comments must be written in English.&lt;br /&gt;
&lt;br /&gt;
Game interface strings and game logs must be written in English.&lt;br /&gt;
&lt;br /&gt;
== How can I provide translation in my language? == &lt;br /&gt;
&lt;br /&gt;
BGA administrators will translate the game in French before the game release.&lt;br /&gt;
&lt;br /&gt;
After the game release, the collaborative translation interface can be used to translate into other languages.&lt;br /&gt;
&lt;br /&gt;
== Is there a special way to declare the strings that must be translated? == &lt;br /&gt;
&lt;br /&gt;
Yes. This declaration is made through transparent functions, that depend on the context.&lt;br /&gt;
&lt;br /&gt;
In javascript files, you should use _( &#039;My string to translate&#039; ).&lt;br /&gt;
&lt;br /&gt;
In php files, you should use self::_( &#039;My string to translate&#039; ) when the string can be translated on the server side (ex: title included in the game layout) and clienttranslate( &#039;My string to translate&#039; ) when the string must be translated on the client side (ex: message for the game log).&lt;br /&gt;
&lt;br /&gt;
== I updated the images in the &#039;img&#039; folder of my game, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.&lt;br /&gt;
&lt;br /&gt;
If the images still don&#039;t show after that, please try emptying your browser cache and reloading the page.&lt;br /&gt;
&lt;br /&gt;
== I added some game options / some game statistics, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.&lt;br /&gt;
&lt;br /&gt;
== Is there a quick way to access the database for my current table? ==&lt;br /&gt;
&lt;br /&gt;
Yes! While playing a game on studio, you have a &amp;quot;Go to game database&amp;quot; link at the bottom of your game. This link will bring you directly to the database for the current table.&lt;br /&gt;
&lt;br /&gt;
== What is the best way to debug? ==&lt;br /&gt;
&lt;br /&gt;
On the server side (PHP), you can use one of these:&lt;br /&gt;
* die(var_dump( $variable_to_inspect );&lt;br /&gt;
* throw new BgaUserException(var_dump( $variable_to_inspect );&lt;br /&gt;
&lt;br /&gt;
On the client side (Javascript), we recommand installing Firebug for Firefox (or using the &#039;Developer tools&#039; with Chrome that have about the same functionalities), then:&lt;br /&gt;
* console.log( variable_to_inspect ); will give you the object structure of the variable in the Firebug console, without blocking the execution. It&#039;s often a good idea to precede this call with a console.log( &#039;### HERE ###&#039; ); to find more easily the appropriate line in the console log.&lt;br /&gt;
* alert( variable_to_inspect ); will popup what you wish and pause the execution until you click ok. This won&#039;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.&lt;br /&gt;
&lt;br /&gt;
In general for debugging, think of using the &#039;Save &amp;amp; restore state&#039; 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.&lt;br /&gt;
&lt;br /&gt;
=== Some frequent errors ===&lt;br /&gt;
&lt;br /&gt;
; The following error occurs when launching the game &amp;quot;Fatal error during creation of database ebd_quoridor_389 Not logged.&amp;quot;&lt;br /&gt;
: Check that you didn&#039;t use $g_user or getCurrentPlayerId() in setupNewGame() function or in an &amp;quot;args&amp;quot; function of your state. As these functions are not consequences of a user action, there is no current player defined. As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Referral&amp;diff=551</id>
		<title>Referral</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Referral&amp;diff=551"/>
		<updated>2013-01-18T13:35:33Z</updated>

		<summary type="html">&lt;p&gt;Een: /* How does this work? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Category:Help]]&lt;br /&gt;
When new players discover Board Game Arena thanks to you, you become a member of [[Club Board Game Arena]]&lt;br /&gt;
&lt;br /&gt;
== How does this work? ==&lt;br /&gt;
&lt;br /&gt;
Each time a new player creates an account on Board Game Arena from your referrer web address (see below), he becomes one of your &#039;&#039;&#039;referees&#039;&#039;&#039;. As soon as this referee plays 3 games, you become a member of BGA club.&lt;br /&gt;
&lt;br /&gt;
== How to get referees? ==&lt;br /&gt;
&lt;br /&gt;
To recruit referees, use your personal referrer web address:&lt;br /&gt;
&lt;br /&gt;
{sponsorshipurl}&lt;br /&gt;
&lt;br /&gt;
New players MUST create an account from this web address to become one of your referees.&lt;br /&gt;
&lt;br /&gt;
== How to get many referees? ==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
* [http://boardgamearena.com/#!doc/sponsor?facebook Tell my friends on Facebook]&lt;br /&gt;
* [http://boardgamearena.com/#!doc/sponsor?twitter Tell my followers on Twitter]&lt;br /&gt;
* [http://boardgamearena.com/#!doc/sponsor?email Tell my friends by email]&lt;br /&gt;
* Publish my personal web address in some forum, send it by MSN, ...&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== How many BGA club membership days can I win? ==&lt;br /&gt;
&lt;br /&gt;
As soon as your first referee finish his &#039;&#039;&#039;third&#039;&#039;&#039; game on Board Game Arena, you win a &#039;&#039;&#039;1 month&#039;&#039;&#039; BGA club membership.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;Note: your account upgrade will be effective within 24 hours.&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
As soon as you get &#039;&#039;&#039;2 referees&#039;&#039;&#039; with at least &#039;&#039;&#039;4 games&#039;&#039;&#039; logged on Board Game Arena, you win another &#039;&#039;&#039;1 month&#039;&#039;&#039; BGA club membership.&lt;br /&gt;
&lt;br /&gt;
As soon as you get &#039;&#039;&#039;3 referees&#039;&#039;&#039; with at least &#039;&#039;&#039;5 games&#039;&#039;&#039; logged on Board Game Arena, you win another &#039;&#039;&#039;1 month&#039;&#039;&#039; BGA club membership.&lt;br /&gt;
&lt;br /&gt;
... and so on: as your referees number grows you can win many free memberships !&lt;br /&gt;
&lt;br /&gt;
== Referees and multiple accounts ==&lt;br /&gt;
&lt;br /&gt;
It is of course forbidden to create fake referee accounts to win free memberships.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=529</id>
		<title>Studio</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio&amp;diff=529"/>
		<updated>2013-01-14T20:17:28Z</updated>

		<summary type="html">&lt;p&gt;Een: /* How to join BGA developer team? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[File:Bga_studio_small.jpg]]&lt;br /&gt;
&lt;br /&gt;
Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.&lt;br /&gt;
&lt;br /&gt;
== What is Board Game Arena Studio? ==&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Board Game Arena Studio&#039;&#039;&#039; is a platform to build online board game adaptation using the Board Game Arena platform.&lt;br /&gt;
&lt;br /&gt;
It is open to any gamer with development skills :)&lt;br /&gt;
&lt;br /&gt;
See announcement here:&lt;br /&gt;
http://forum.boardgamearena.com/viewtopic.php?f=10&amp;amp;t=1973&lt;br /&gt;
&lt;br /&gt;
== Discover BGA Studio in 5 presentations ==&lt;br /&gt;
&lt;br /&gt;
Why, how, what... to start discovering BGA Studio, we prepare you 5 &amp;quot;powerpoint&amp;quot; presentations:&lt;br /&gt;
&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/5-reasons-why-you-should-use-bga-studio-for-your-online-board-game 5 reasons why you should use BGA Studio for your online board game]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-8-steps-to-create-a-board-game-on-board-game-arena The 8 steps to create a board game on Board Game Arena]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]&lt;br /&gt;
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]&lt;br /&gt;
&lt;br /&gt;
== How to join the BGA developer team? ==&lt;br /&gt;
&lt;br /&gt;
Please see: [[How to join BGA developer team?]]&lt;br /&gt;
&lt;br /&gt;
== Great, I&#039;m in! ... How should I start? ==&lt;br /&gt;
&lt;br /&gt;
If you didn&#039;t already, check the presentations at the top of this page to get the basics.&lt;br /&gt;
&lt;br /&gt;
After that, we would advise you to take a peek at one or both of these two game creation tutorials:&lt;br /&gt;
* [[Tutorial reversi]]&lt;br /&gt;
* [[Tutorial gomoku]]&lt;br /&gt;
&lt;br /&gt;
Then start editing files and see what happens! ;)&lt;br /&gt;
&lt;br /&gt;
If you have any questions, please ask them on the [http://forum.boardgamearena.com/viewforum.php?f=12 development forum].&lt;br /&gt;
&lt;br /&gt;
== BGA Studio documentation ==&lt;br /&gt;
&lt;br /&gt;
[[Studio FAQ]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio Framework reference ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation focus on the development framework itself: functions and methods available to build your game.&lt;br /&gt;
&lt;br /&gt;
[[Studio file reference|File structure of a BGA game]]&lt;br /&gt;
&lt;br /&gt;
==== Game logic ====&lt;br /&gt;
&lt;br /&gt;
* [[Main game logic: yourgamename.game.php]]&lt;br /&gt;
* [[Your game state machine: states.inc.php]]&lt;br /&gt;
* [[Game database model: dbmodel.sql]]&lt;br /&gt;
* [[Players actions: yourgamename.action.php]]&lt;br /&gt;
* [[Game material description: material.inc.php]]&lt;br /&gt;
* [[Game statistics: stats.inc.php]]&lt;br /&gt;
&lt;br /&gt;
==== Game interface ====&lt;br /&gt;
&lt;br /&gt;
* [[Game interface logic: yourgamename.js]]&lt;br /&gt;
* [[Game art: img directory]]&lt;br /&gt;
* [[Game interface stylesheet: yourgamename.css]]&lt;br /&gt;
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]&lt;br /&gt;
&lt;br /&gt;
==== Other components ====&lt;br /&gt;
&lt;br /&gt;
* [[Translations]] (how to make your game translatable)&lt;br /&gt;
* [[Game options and preferences: gameoptions.inc.php]]&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio game components reference ===&lt;br /&gt;
&lt;br /&gt;
Game components are useful tools you can use in your game adaptations.&lt;br /&gt;
&lt;br /&gt;
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).&lt;br /&gt;
* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player&#039;s score).&lt;br /&gt;
* [[Draggable]]: a JS component to manage drag&#039;n&#039;drop actions.&lt;br /&gt;
* [[ExpandableSection]]: a JS component to manage a rectangular block of HTML than can be displayed/hide.&lt;br /&gt;
* [[Scrollmap]]: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples:  Saboteur or Takenoko games).&lt;br /&gt;
* [[Stock]]: a JS component to manage and display a set of game elements displayed at a position.&lt;br /&gt;
* [[Wrapper]]: a JS component to wrap a &amp;lt;div&amp;gt; element around his child, even if these elements are absolute positioned.&lt;br /&gt;
* [[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&#039;s places at Can&#039;t Stop).&lt;br /&gt;
&lt;br /&gt;
=== BGA Studio user guide ===&lt;br /&gt;
&lt;br /&gt;
This part of the documentation is a user guide for the BGA Studio online development environment.&lt;br /&gt;
&lt;br /&gt;
[[Studio back-office]]&lt;br /&gt;
&lt;br /&gt;
== Other resources ==&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]&lt;br /&gt;
&lt;br /&gt;
[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=521</id>
		<title>How to join BGA developer team?</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=How_to_join_BGA_developer_team%3F&amp;diff=521"/>
		<updated>2013-01-13T12:07:41Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Ok, I registered, what do I get? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
Registering is done by e-mail at &#039;&#039;&#039;studio(at)boardgamearena.com&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Please provide the following information:&lt;br /&gt;
* your player user name on BGA&lt;br /&gt;
* your developer user name to be used on “BGA Studio” (for technical reasons, no space, number or special character);&lt;br /&gt;
* your real name;&lt;br /&gt;
* your e-mail address;&lt;br /&gt;
* your postal address.&lt;br /&gt;
&lt;br /&gt;
We also drafted a quick [http://en.doc.boardgamearena.com/images/0/02/BGA_TC_Dev_en.pdf &#039;terms &amp;amp; conditions&#039; document]. It&#039;s very light, so as to get to the fun part faster.&lt;br /&gt;
&lt;br /&gt;
To be valid, the registration e-mail must contain this document as an attachment, with the following sentence in the mail body: &#039;I agree with the terms &amp;amp; conditions for developers on BGA Studio joined as an attachment&#039;.&lt;br /&gt;
&lt;br /&gt;
And of course, we also encourage you to tell us about which games you would love to develop on BGA!&lt;br /&gt;
&lt;br /&gt;
== Ok, I registered, what do I get? ==&lt;br /&gt;
&lt;br /&gt;
First, we&#039;ll discuss by e-mail the names of some of the games we have an agreement to develop, so that you can tell us &#039;Hey, this game is great! I want to develop it!&#039; (please keep these names confidential, or it would ruin our tradition to make players guess the name of the next game on the forum)&lt;br /&gt;
&lt;br /&gt;
Second, once we have discussed together and are fixed on a game you&#039;ll take charge of, we&#039;ll create your studio account and you will get:&lt;br /&gt;
* one login / password to access files through SFTP&lt;br /&gt;
* ten logins with numeric suffixes from 0 to 9 and a common simple password to test games on the studio website while developing.&lt;br /&gt;
&lt;br /&gt;
Once logged in to your SFTP root folder, you will find:&lt;br /&gt;
* a &#039;resources.html&#039; file with the URLs to use and some extra connection information&lt;br /&gt;
* three folders containing the three simple games provided as examples&lt;br /&gt;
* a folder for the game you will be developing initialized after our &#039;EmptyGame&#039; template, providing the game structure (and comments! and examples!)&lt;br /&gt;
&lt;br /&gt;
Then... that&#039;s all, you can start!&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Help&amp;diff=507</id>
		<title>Help</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Help&amp;diff=507"/>
		<updated>2013-01-11T16:02:09Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;An issue? A question?&lt;br /&gt;
&lt;br /&gt;
* [[Faq|Frequently asked questions]] could probably help you.&lt;br /&gt;
&lt;br /&gt;
* [http://forum.boardgamearena.com Forums] are also helpful to get information.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Help contents ==&lt;br /&gt;
&lt;br /&gt;
* [[Faq|Frequently asked questions]]&lt;br /&gt;
* [[About Board Game Arena|About Board Game Arena]]&lt;br /&gt;
** [[About us|About us]]&lt;br /&gt;
** [[Club Board Game Arena|Club Board Game Arena]]&lt;br /&gt;
** [[Contact us|Contact us]]&lt;br /&gt;
&lt;br /&gt;
=== Detailed help ===&lt;br /&gt;
&lt;br /&gt;
* [[Getting started|Getting started]]&lt;br /&gt;
* [[Referral|Referral]]&lt;br /&gt;
* [[Browser support|Browser support]]&lt;br /&gt;
* [[Moderation and grades|Moderation and grades]]&lt;br /&gt;
* [[Game clock|Game clock]]&lt;br /&gt;
* [[Rating|Rating]]&lt;br /&gt;
* [[Reputation|Reputation]]&lt;br /&gt;
* [[Translation guidelines|Translation guidelines]]&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Browser_support&amp;diff=426</id>
		<title>Browser support</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Browser_support&amp;diff=426"/>
		<updated>2013-01-03T16:00:30Z</updated>

		<summary type="html">&lt;p&gt;Een: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Category:Help]]&lt;br /&gt;
&amp;lt;h3&amp;gt;For the best experience, we recommend:&amp;lt;/h3&amp;gt;&lt;br /&gt;
* &#039;&#039;&#039;Google Chrome 10+&#039;&#039;&#039; [http://www.google.com/chrome Windows] [http://www.google.com/chrome?platform=mac Mac] [http://www.google.com/chrome?platform=linux Linux]&lt;br /&gt;
* &#039;&#039;&#039;Mozilla Firefox 4+&#039;&#039;&#039; [http://www.mozilla.org/products/firefox/ Windows] [http://www.mozilla.org/products/firefox/ Mac] [http://www.mozilla.org/products/firefox/ Linux]&lt;br /&gt;
&lt;br /&gt;
Board Game Arena takes advantage of the most recent web technology to make it possible for you to play without installing anything on your computer: no software to download or update, no plugins to install, etc. &lt;br /&gt;
Consequently, to play you need to use a modern web browser. Generally speaking, the more recent your web browser is, the more pleasant your game experience on Board Game Arena will be. &lt;br /&gt;
&lt;br /&gt;
This website makes intensive use of Javascript and your browser&#039;s graphics capabilities. Thus, if you want to have the best gaming experience with Board Game Arena, you should use one of the browsers listed above. However, we officially support the following browsers:&lt;br /&gt;
&lt;br /&gt;
* Google Chrome 4+&lt;br /&gt;
* Mozilla Firefox 3.5+&lt;br /&gt;
* Internet Explorer 9+&lt;br /&gt;
* Safari 4+&lt;br /&gt;
&lt;br /&gt;
(Note: We do NOT support playing on iPads or similar tablets.)&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Gamehelpgomoku&amp;diff=422</id>
		<title>Gamehelpgomoku</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Gamehelpgomoku&amp;diff=422"/>
		<updated>2012-12-24T12:55:06Z</updated>

		<summary type="html">&lt;p&gt;Een: Created page with &amp;quot; == Goal ==   Create an unbroken row of exactly five stones of your color horizontally, vertically, or diagonally.  Overlines (rows of 6 stones or more) do not count.  == Vari...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
== Goal == &lt;br /&gt;
&lt;br /&gt;
Create an unbroken row of exactly five stones of your color horizontally, vertically, or diagonally.&lt;br /&gt;
&lt;br /&gt;
Overlines (rows of 6 stones or more) do not count.&lt;br /&gt;
&lt;br /&gt;
== Variant == &lt;br /&gt;
&lt;br /&gt;
In Gomoku+ (also named Caro) in order to win your row of five stones must be free at both ends. &lt;br /&gt;
&lt;br /&gt;
This balances the game differently and gives more defensive power to the white player.&lt;br /&gt;
&lt;br /&gt;
== Openings ==&lt;br /&gt;
&lt;br /&gt;
Black always play first.&lt;br /&gt;
&lt;br /&gt;
With the &#039;standard&#039; (free) opening, black has got a distinct advantage over white who is directly put &#039;under attack&#039;.&lt;br /&gt;
&lt;br /&gt;
The &#039;tournament&#039; opening aims to even the odds between the black and white players:&lt;br /&gt;
* black lays the first stone at the center of the board&lt;br /&gt;
* white lays the second stone in one of the spaces adjoining to the center of the board (horizontally, vertically or diagonally)&lt;br /&gt;
* black lays the third stone at least three spaces away from the center of the board.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=421</id>
		<title>Studio FAQ</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=421"/>
		<updated>2012-12-23T17:18:00Z</updated>

		<summary type="html">&lt;p&gt;Een: /* Some frequent errors */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This is a place where we will collect and answer frequently asked questions.&lt;br /&gt;
&lt;br /&gt;
== What should I use to access the files through SFTP? ==&lt;br /&gt;
&lt;br /&gt;
There is a lot of tools to do that. Use the one you are the most comfortable with.&lt;br /&gt;
&lt;br /&gt;
On Linux, you can for example use the &#039;Connect to server&#039; function of the Nautilus file management system, or use sshfs.&lt;br /&gt;
&lt;br /&gt;
On Windows, there is for example the WinSCP client.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t access the Studio back-office, I get a &#039;Not authorized&#039; error message? ==&lt;br /&gt;
&lt;br /&gt;
You should first connect to the Studio website (with any of your &amp;lt;developer name&amp;gt;&amp;lt;number&amp;gt; accounts). As the authentication is shared with the back-office, then you will be able to access it.&lt;br /&gt;
&lt;br /&gt;
== I don&#039;t know the name to use to commit my game, what name should I use? ==&lt;br /&gt;
&lt;br /&gt;
The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).&lt;br /&gt;
It is the same name as the name used for the game folder in your SFTP access.&lt;br /&gt;
&lt;br /&gt;
== It&#039;s pretty annoying to log in with multiple users to start a game. Is there some easier way? ==&lt;br /&gt;
&lt;br /&gt;
You can use the &#039;Express start&#039; function. It will automatically make the specified number of players join the game (using the first of your ten player accounts available) and start the game.&lt;br /&gt;
&lt;br /&gt;
During the game, there is a red arrow on the right of each player name, that you can use to open a tab from this player&#039;s perspective.&lt;br /&gt;
&lt;br /&gt;
You can also end the game in two clicks by clicking the &#039;End game&#039; button then selecting &#039;Express game stop&#039; in the popup.&lt;br /&gt;
&lt;br /&gt;
== What is the working language on BGA studio? ==&lt;br /&gt;
&lt;br /&gt;
Working language is &#039;&#039;&#039;English&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Variables and functions must be named with English words.&lt;br /&gt;
&lt;br /&gt;
Comments must be written in English.&lt;br /&gt;
&lt;br /&gt;
Game interface strings and game logs must be written in English.&lt;br /&gt;
&lt;br /&gt;
== How can I provide translation in my language? == &lt;br /&gt;
&lt;br /&gt;
BGA administrators will translate the game in French before the game release.&lt;br /&gt;
&lt;br /&gt;
After the game release, the collaborative translation interface can be used to translate into other languages.&lt;br /&gt;
&lt;br /&gt;
== Is there a special way to declare the strings that must be translated? == &lt;br /&gt;
&lt;br /&gt;
Yes. This declaration is made through transparent functions, that depend on the context.&lt;br /&gt;
&lt;br /&gt;
In javascript files, you should use _( &#039;My string to translate&#039; ).&lt;br /&gt;
&lt;br /&gt;
In php files, you should use self::_( &#039;My string to translate&#039; ) when the string can be translated on the server side (ex: title included in the game layout) and clienttranslate( &#039;My string to translate&#039; ) when the string must be translated on the client side (ex: message for the game log).&lt;br /&gt;
&lt;br /&gt;
== I updated the images in the &#039;img&#039; folder of my game, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.&lt;br /&gt;
&lt;br /&gt;
If the images still don&#039;t show after that, please try emptying your browser cache and reloading the page.&lt;br /&gt;
&lt;br /&gt;
== I added some game options / some game statistics, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.&lt;br /&gt;
&lt;br /&gt;
== Is there a quick way to access the database for my current table? ==&lt;br /&gt;
&lt;br /&gt;
Yes! While playing a game on studio, you have a &amp;quot;Go to game database&amp;quot; link at the bottom of your game. This link will bring you directly to the database for the current table.&lt;br /&gt;
&lt;br /&gt;
== What is the best way to debug? ==&lt;br /&gt;
&lt;br /&gt;
On the server side (PHP), you can use one of these:&lt;br /&gt;
* die(var_dump( $variable_to_inspect );&lt;br /&gt;
* throw new BgaUserException(var_dump( $variable_to_inspect );&lt;br /&gt;
&lt;br /&gt;
On the client side (Javascript), we recommand installing Firebug for Firefox (or using the &#039;Developer tools&#039; with Chrome that have about the same functionalities), then:&lt;br /&gt;
* console.log( variable_to_inspect ); will give you the object structure of the variable in the Firebug console, without blocking the execution. It&#039;s often a good idea to precede this call with a console.log( &#039;### HERE ###&#039; ); to find more easily the appropriate line in the console log.&lt;br /&gt;
* alert( variable_to_inspect ); will popup what you wish and pause the execution until you click ok. This won&#039;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.&lt;br /&gt;
&lt;br /&gt;
In general for debugging, think of using the &#039;Save &amp;amp; restore state&#039; 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.&lt;br /&gt;
&lt;br /&gt;
=== Some frequent errors ===&lt;br /&gt;
&lt;br /&gt;
; The following error occurs when launching the game &amp;quot;Fatal error during creation of database ebd_quoridor_389 Not logged.&amp;quot;&lt;br /&gt;
: Check that you didn&#039;t use $g_user or getCurrentPlayerId() in setupNewGame() function or in an &amp;quot;args&amp;quot; function of your state. As these functions are not consequences of a user action, there is no current player defined. As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
	<entry>
		<id>https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=420</id>
		<title>Studio FAQ</title>
		<link rel="alternate" type="text/html" href="https://sk.doc.boardgamearena.com/index.php?title=Studio_FAQ&amp;diff=420"/>
		<updated>2012-12-23T17:17:40Z</updated>

		<summary type="html">&lt;p&gt;Een: /* What is the best way to debug? */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;This is a place where we will collect and answer frequently asked questions.&lt;br /&gt;
&lt;br /&gt;
== What should I use to access the files through SFTP? ==&lt;br /&gt;
&lt;br /&gt;
There is a lot of tools to do that. Use the one you are the most comfortable with.&lt;br /&gt;
&lt;br /&gt;
On Linux, you can for example use the &#039;Connect to server&#039; function of the Nautilus file management system, or use sshfs.&lt;br /&gt;
&lt;br /&gt;
On Windows, there is for example the WinSCP client.&lt;br /&gt;
&lt;br /&gt;
== I can&#039;t access the Studio back-office, I get a &#039;Not authorized&#039; error message? ==&lt;br /&gt;
&lt;br /&gt;
You should first connect to the Studio website (with any of your &amp;lt;developer name&amp;gt;&amp;lt;number&amp;gt; accounts). As the authentication is shared with the back-office, then you will be able to access it.&lt;br /&gt;
&lt;br /&gt;
== I don&#039;t know the name to use to commit my game, what name should I use? ==&lt;br /&gt;
&lt;br /&gt;
The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).&lt;br /&gt;
It is the same name as the name used for the game folder in your SFTP access.&lt;br /&gt;
&lt;br /&gt;
== It&#039;s pretty annoying to log in with multiple users to start a game. Is there some easier way? ==&lt;br /&gt;
&lt;br /&gt;
You can use the &#039;Express start&#039; function. It will automatically make the specified number of players join the game (using the first of your ten player accounts available) and start the game.&lt;br /&gt;
&lt;br /&gt;
During the game, there is a red arrow on the right of each player name, that you can use to open a tab from this player&#039;s perspective.&lt;br /&gt;
&lt;br /&gt;
You can also end the game in two clicks by clicking the &#039;End game&#039; button then selecting &#039;Express game stop&#039; in the popup.&lt;br /&gt;
&lt;br /&gt;
== What is the working language on BGA studio? ==&lt;br /&gt;
&lt;br /&gt;
Working language is &#039;&#039;&#039;English&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
Variables and functions must be named with English words.&lt;br /&gt;
&lt;br /&gt;
Comments must be written in English.&lt;br /&gt;
&lt;br /&gt;
Game interface strings and game logs must be written in English.&lt;br /&gt;
&lt;br /&gt;
== How can I provide translation in my language? == &lt;br /&gt;
&lt;br /&gt;
BGA administrators will translate the game in French before the game release.&lt;br /&gt;
&lt;br /&gt;
After the game release, the collaborative translation interface can be used to translate into other languages.&lt;br /&gt;
&lt;br /&gt;
== Is there a special way to declare the strings that must be translated? == &lt;br /&gt;
&lt;br /&gt;
Yes. This declaration is made through transparent functions, that depend on the context.&lt;br /&gt;
&lt;br /&gt;
In javascript files, you should use _( &#039;My string to translate&#039; ).&lt;br /&gt;
&lt;br /&gt;
In php files, you should use self::_( &#039;My string to translate&#039; ) when the string can be translated on the server side (ex: title included in the game layout) and clienttranslate( &#039;My string to translate&#039; ) when the string must be translated on the client side (ex: message for the game log).&lt;br /&gt;
&lt;br /&gt;
== I updated the images in the &#039;img&#039; folder of my game, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.&lt;br /&gt;
&lt;br /&gt;
If the images still don&#039;t show after that, please try emptying your browser cache and reloading the page.&lt;br /&gt;
&lt;br /&gt;
== I added some game options / some game statistics, but they don&#039;t show? ==&lt;br /&gt;
&lt;br /&gt;
An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.&lt;br /&gt;
&lt;br /&gt;
== Is there a quick way to access the database for my current table? ==&lt;br /&gt;
&lt;br /&gt;
Yes! While playing a game on studio, you have a &amp;quot;Go to game database&amp;quot; link at the bottom of your game. This link will bring you directly to the database for the current table.&lt;br /&gt;
&lt;br /&gt;
== What is the best way to debug? ==&lt;br /&gt;
&lt;br /&gt;
On the server side (PHP), you can use one of these:&lt;br /&gt;
* die(var_dump( $variable_to_inspect );&lt;br /&gt;
* throw new BgaUserException(var_dump( $variable_to_inspect );&lt;br /&gt;
&lt;br /&gt;
On the client side (Javascript), we recommand installing Firebug for Firefox (or using the &#039;Developer tools&#039; with Chrome that have about the same functionalities), then:&lt;br /&gt;
* console.log( variable_to_inspect ); will give you the object structure of the variable in the Firebug console, without blocking the execution. It&#039;s often a good idea to precede this call with a console.log( &#039;### HERE ###&#039; ); to find more easily the appropriate line in the console log.&lt;br /&gt;
* alert( variable_to_inspect ); will popup what you wish and pause the execution until you click ok. This won&#039;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.&lt;br /&gt;
&lt;br /&gt;
In general for debugging, think of using the &#039;Save &amp;amp; restore state&#039; 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.&lt;br /&gt;
&lt;br /&gt;
=== Some frequent errors ===&lt;br /&gt;
&lt;br /&gt;
; The following error occurs when launching the game &amp;quot;Fatal error during creation of database ebd_quoridor_389: Not logged.&amp;quot;&lt;br /&gt;
: Check that you didn&#039;t use $g_user or getCurrentPlayerId() in setupNewGame() function or in an &amp;quot;args&amp;quot; function of your state. As these functions are not consequences of a user action, there is no current player defined. As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.&lt;/div&gt;</summary>
		<author><name>Een</name></author>
	</entry>
</feed>