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.

== How translation works? ==

When developing your game, all strings must be in English. Strings must be coherent with the English version of the game.

Before the release of the game, BGA team will do the French translation of the game.

After the release of the game, the BGA players community will translate the game in every language.

== What should be translated? ==

Every text that can be visible by the player when the game is running normally. This includes tooltips, texts on cards, error messages, ...

This does NOT include error messages that are not supposed to happened (unexpected errors).

== Focus on translating notifications ==

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's language. On Board Game Arena, this is exactly the same with the "_( string )" function.

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.

== WARNING: how to make sure your strings will be translated ==

For each game, our translation tool is doing a full scan of the code, looking for translator markers like "_()" or "clientranslate()"... (see below the list of translation markers).

If your original string is not "physically" inside one of this marker, it won't be translated.

<pre>
// Examples: the following strings will be translated:
var mystring_translated = _("my string"); // JS
$mystring_translated = self::_("my string"); // PHP
$mystring_translated = sprintf( _("my string with an %s argument"), $argument ); // PHP

// Examples: the following strings WILL NOT be translated:
$my_string = "my string";
$not_translated = self::_( $my_string ); // The original string is not bordered by a translator marker => no translation
$not_translated = self::_( sprintf( "my string with a %s argument", $argument ) ); // Same thing
</pre>

== How to not make translators crazy ;) ==

* When you need the same string twice, try to reuse exactly the same string (with the same case) to minimize the number of strings.
* 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 "Zzzzz", maybe there's no need to translate it).
* 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:
<pre>_("First part of the string, ").$argument.' '._("second part of the string")</pre>
Write instead:
<pre>sprintf( _("First part of the string, %s second part of the string"), $argument )</pre>
(or the equivalent "dojo.string.substitute" in Javascript)
* 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.
* The BGA translation policy is to be flexible on grammar... We prefer to write "player gets 1 coin(s)" than write two versions of the same string for plural and singular - it reduces the number of strings to translate.
* Instead of writing nice strings like "With the effect of ZZZ, player XXX gets a new YYY", which is very difficult to translate, write strings like "ZZZ: XXX gets YYY".

== On client side (Javascript) ==

On client side, things are quite simple: you just have to use the "_()" function for all strings you want to translate.

Examples:
<pre>
// Get a string in player's language:
var translated = _("original english string");

// Get a string in player's language with parameter:
var translated = dojo.string.substitute( "You can pick ${p} cards and discard ${d}", {
p: 2,
d: 4
} );
</pre>

'''WARNING:''' in Javascript strings to translate, you should never use '\n', '\t' 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't have any impact on the HTML rendering. You should use HTML markup instead.

== On server side (PHP) ==

On PHP side, you can use 3 different functions to specify that a string must be translated.

'''clienttranslate( "my string to translate" ):'''

This function is '''transparent''': it will return the original English string without any change. It's only purpose is to mark this string as "must be translated", and to make sure the translated version of the string will be available on client side.

In general, you use clienttranslate:
* On your states.inc.php, for field "description" and "descriptionmyturn".

<pre>
"description" => clienttranslate('${card_name}: ${actplayer} must discard 4 identical energies'),
</pre>

* On "material.inc.php", when defining texts for game material that must be displayed on client side.
<pre>
$this->card_types = array(

1 => array(
'name' => clienttranslate("Amulet of Air"), // Thus, we can use "_( card_name )" on Javascript side.
</pre>

* When sending a notification with "notifyAllPlayers" or "notifyPlayer", for the game log string and all game log arguments that need a translation.

<pre>
// A game log string with no argument:
self::notifyAllPlayers( 'pickLibraryCards', clienttranslate("Everyone draw cards from his library"), array() );
</pre>

Translating arguments is a little bit more complex. It is using the "i18n" special argument as below:

<pre>
// In the following example, we translate the game log itself, but also the "card_name" argument:

self::notifyAllPlayers( 'winPoints', clienttranslate('${card_name}: ${player_name} gains ${points} point(s)'), array(
'i18n' => array( 'card_name' ), // <===== We specify here that "card_name" argument must be transate
'player_id' => $player_id,
'player_name' => self::getActivePlayerName(),
'points' => $points,
'card_name' => $this->card_types[8]['name'] // <==== Here, we provide original English string.
) );
</pre>

'''self::_( "my string to translate" ):'''

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

Most of the time, you don't need to translate strings on server side, except on the following 3 situations:
* When throwing an exception because the player did a forbidden move.

<pre>
// This will display a translatable red message to the player that just do some wrong action:
throw new feException( self::_('You must choose 3 cards'), true);

// ... notice the use of "true" parameter that signal that this exception is "expected". In theory, all exception that are excepted should be translated.
</pre>

* In "yourgame.view.php", when creating the labels for the game interface used in your template (.tpl) file.

<pre>
$this->tpl['CARDS_FOR_YEAR_2'] = self::_("Your cards for year II");
</pre>

* Eventually, in your material.inc.php, if for example you need to use some string elements in your exceptions.

<pre>
// In material.inc.php, $this->energies[n]['nametr'] has been created with the self::_() method. This we can do this:
throw new feException( self::_("To execute this action you need more: ").' '.$this->energies[$resource_id]['nametr'], true );
</pre>

* Eventually, in your "getAllDatas" PHP method, as the data return by this method is used only by current user.

'''totranslate( "my string to translate" ):'''

This function works exactly like 'clienttranslate', except it tells BGA that the string is not needed on client side.

You should not use this function, except on the following cases:
* Statistics name in stats.inc.php
* Option names and option values name in gameoptions.inc.php

Scrollmap

2013-04-26T13:57:14Z

Een: /* Enable scrollmap zone extension */

Scrollmap is a BGA client side component to display an infinite game area.

In some games, players are building the main game area with tiles or cards. Examples:
* Carcassonne
* Saboteur
* Takenoko
* Taluva
* ...

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.

== Scrollmap in action ==

If you want to see how Scrollmap looks like, please try "Saboteur" or "Takenoko" games on BGA, or watch a game in progress.

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'n'drop the game area to scroll.

== How to use Scrollmap ==

At first, don't forget to add "ebg/scrollmap" as a dependency:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/scrollmap" /// <==== HERE
],
</pre>

Then, declare a new variable in your class for the Scrollmap object:

<pre>
constructor: function(){
console.log('yourgame constructor');

// Scrollable area
this.scrollmap = new ebg.scrollmap();
</pre>

Now, open your template (TPL) file and add this HTML code:

<pre>
<div id="map_container">
<div id="map_scrollable"></div>
<div id="map_surface"></div>
<div id="map_scrollable_oversurface"></div>
<a id="movetop" href="#"></a>
<a id="moveleft" href="#"></a>
<a id="moveright" href="#"></a>
<a id="movedown" href="#"></a>
</div>
</pre>

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:
<pre>
/** Scrollable area **/

#map_container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
#map_scrollable, #map_scrollable_oversurface {
position: absolute;
top: 205px;
left: 315px;
}
#map_surface {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: move;
}
#map_footer {
text-align: center;
}

</pre>

Finally, to link your HTML code with your Javascript, place this in your Javascript "Setup" method:

<pre>
// Make map scrollable
this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') );
this.scrollmap.setupOnScreenArrows( 150 );

</pre>

This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn't add anything on the game area yet. This is the next step.

== Scrollable area layers ==

There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:
* inside "map_scrollable" div
* inside "map_scrollable_oversurface" div

The difference is very important: "map_scrollable" is beneath the surface that is used to drag'n'drop the game area, and "map_scrollable_oversurface" is above this surface. In practice:
* 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.
* If some element on the game area don't need to be clicked, you'd better place it in "map_scrollable", so it is possible to drag'n'drop the game area from a point on this element.

Of course, all layers are scrolled synchronously.

Tips: in some situation, it'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.

== Positioning elements on game area ==

All elements on the game are must be absolute positioned (with "top" and "left" attributes).

By default, the game area is centered on 0,0 coordinates.

== Enable move arrows ==

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:

<pre>
/** Move arrows **/

#movetop,#moveleft,#moveright,#movedown {
display: block;
position: absolute;
background-image: url('../../img/common/arrows.png');
width: 32px;
height: 32px;
}

#movetop {
top: 0px;
left: 50%;
background-position: 0px 32px;
}
#moveleft {
top: 50%;
left: 0px;
background-position: 32px 0px;
}
#moveright {
top: 50%;
right: 0px;
background-position: 0px 0px;
}
#movedown {
bottom: 0px;
left: 50%;
background-position: 32px 32px;
}
</pre>

In your javascript, define the following functions:

<pre>
onMoveTop : function( evt )
{
console.log( "onMoveTop" );
evt.preventDefault();
this.scrollmap.scroll( 0, 300 );
},
onMoveLeft : function( evt )
{
console.log( "onMoveLeft" );
evt.preventDefault();
this.scrollmap.scroll( 300, 0 );
},
onMoveRight : function( evt )
{
console.log( "onMoveRight" );
evt.preventDefault();
this.scrollmap.scroll( -300, 0 );
},
onMoveDown : function( evt )
{
console.log( "onMoveDown" );
evt.preventDefault();
this.scrollmap.scroll( 0, -300 );
},
</pre>

And connect onclick events on the arrows to these functions in your javascript setup

<pre>
dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );
dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );
dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
</pre>

== Enable scrollmap zone extension ==

This is optional, when there can be unused screen space under the scrollmap that a player might want to use.
Add this in your .tpl after the scrollmap div (the matching css rules has already been defined):

<pre>
<div id="map_footer" class="whiteblock">
<a href="#" id="enlargedisplay">↓  {LABEL_ENLARGE_DISPLAY}  ↓</a>
</div>
</pre>

In your javascript, define the following function:

<pre>
onIncreaseDisplayHeight: function( evt )
{
console.log( '$$$$ Event : onIncreaseDisplayHeight' );
evt.preventDefault();

var cur_h = toint( dojo.style( $('map_container'), 'height' ) );
dojo.style( $('map_container'), 'height', ( cur_h+300 ) + 'px' );
},
</pre>

and connect them to the 'enlargedisplay' link in your setup:

<pre>
dojo.connect( $('enlargedisplay'), 'onclick', this, 'onIncreaseDisplayHeight' );
</pre>

In your view.php file, define the template variable LABEL_ENLARGE_DISPLAY so that it gets substituted with appropriate translatable text:

<pre>
$this->tpl['LABEL_ENLARGE_DISPLAY'] = self::_("Enlarge display");
</pre>

Scrollmap

2013-04-26T13:53:16Z

Een:

Studio FAQ

2013-04-25T20:03:11Z

Een: /* Should I use images free from copyright? */

This is a place where we will collect and answer frequently asked questions.

== What should I use to access the files through SFTP? ==

There is a lot of tools to do that. Use the one you are the most comfortable with.

On Linux Gnome, you can for example use the 'Connect to server' function of the Nautilus file management system, or use sshfs.

On Windows, there is for example the [http://winscp.net/ WinSCP client].

== I can't edit the files in my game directory, it looks like they are readonly. What's happening? ==

Maybe there is a maintenance operation underway.

If you don't get access back after some time (say one or two hours), please send us a mail to check.

== I can't access the Studio back-office, I get a 'Not authorized' error message? ==

You should first connect to the Studio website (with any of your <developer name><number> accounts). As the authentication is shared with the back-office, then you will be able to access it.

== I don't know the name to use to commit my game, what name should I use? ==

The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).
It is the same name as the name used for the game folder in your SFTP access.

== What is the working language on BGA studio? ==

Working language is '''English'''.

Variables and functions must be named with English words.

Comments must be written in English.

Game interface strings and game logs must be written in English.

== How can I provide translation in my language? ==

BGA administrators will translate the game in French before the game release.

After the game release, the collaborative translation interface can be used to translate into other languages.

Check [[Translations]] to see how to make your game translatable.

== I updated the images in the 'img' folder of my game, but they don't show? ==

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.

If the images still don't show after that, please try emptying your browser cache and reloading the page.

== I added some game options / some game statistics, but they don't show? ==

An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.

== Should I use images free from copyright? ==

If you are developing a game in the public domain, yes (or you can make your own if you feel it's better).

If you are developing a game for which we have a licence, we will usually provide art files from the publisher.

Studio FAQ

2013-04-25T20:01:50Z

Een:

This is a place where we will collect and answer frequently asked questions.

== What should I use to access the files through SFTP? ==

There is a lot of tools to do that. Use the one you are the most comfortable with.

On Linux Gnome, you can for example use the 'Connect to server' function of the Nautilus file management system, or use sshfs.

On Windows, there is for example the [http://winscp.net/ WinSCP client].

== I can't edit the files in my game directory, it looks like they are readonly. What's happening? ==

Maybe there is a maintenance operation underway.

If you don't get access back after some time (say one or two hours), please send us a mail to check.

== I can't access the Studio back-office, I get a 'Not authorized' error message? ==

You should first connect to the Studio website (with any of your <developer name><number> accounts). As the authentication is shared with the back-office, then you will be able to access it.

== I don't know the name to use to commit my game, what name should I use? ==

The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).
It is the same name as the name used for the game folder in your SFTP access.

== What is the working language on BGA studio? ==

Working language is '''English'''.

Variables and functions must be named with English words.

Comments must be written in English.

Game interface strings and game logs must be written in English.

== How can I provide translation in my language? ==

BGA administrators will translate the game in French before the game release.

After the game release, the collaborative translation interface can be used to translate into other languages.

Check [[Translations]] to see how to make your game translatable.

== I updated the images in the 'img' folder of my game, but they don't show? ==

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.

If the images still don't show after that, please try emptying your browser cache and reloading the page.

== I added some game options / some game statistics, but they don't show? ==

An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.

== Should I use images free from copyright? ==

If you are developing a game in the public domain, yes (or you can make your own if you feel it's better).
If you are developing a game for which we have a licence, we will usually provide art files from the publisher.

How to join BGA developer team?

2013-04-24T20:19:05Z

Een: ²

'''--- Notice ---'''
We have received a lot of positive feedback on the Studio, and lots of developers have registered.
We are very happy about it, but it comes with a cost in time spent answering emails and posts on the forum.
So please bear with us if we are slow to answer. As soon as we can, we will.
Thanks again for your interest!

Registering is done by e-mail at '''studio(at)boardgamearena.com'''.

Please provide the following information:
* your player user name on BGA
* your developer user name to be used on “BGA Studio” (for technical reasons, no space, number or special character);
* your real name;
* your e-mail address;
* your postal address.

We also drafted a quick [http://en.doc.boardgamearena.com/images/0/02/BGA_TC_Dev_en.pdf ''''terms & conditions' document''']. It's very light, so as to get to the fun part faster.

To be valid, the registration e-mail must contain this document as an attachment, with the following sentence in the mail body: ''''I agree with the terms & conditions for developers on BGA Studio joined as an attachment''''.

And of course, we also encourage you to tell us about your developer experience and which games you would love to develop on BGA!

== Ok, I registered, what do I get? ==

First, we'll discuss by e-mail the names of some of the games we have an agreement to develop, so that you can tell us 'Hey, this game is great! I want to develop it!' (please keep these names confidential, or it would ruin our tradition to make players guess the name of the next game on the forum)

Second, once we have discussed together and are set on a game you'll take charge of, we'll create your studio account and you will get:
* one login / password to access files through SFTP
* ten logins with numeric suffixes from 0 to 9 and a common simple password to test games on the studio website while developing.

Once logged in to your SFTP root folder, you will find:
* a ''''resources.html'''' file with the URLs to use and some extra connection information
* three folders containing the three simple games provided as examples
* a folder for the game you will be developing initialized after our 'EmptyGame' template, providing the game structure (and comments! and examples!)

Then... well that's all, you can start! See [[Studio#Great.2C_I.27m_in.21_..._How_should_I_start.3F|Great, I'm in! ... How should I start?]]

Zone

2013-04-20T17:42:40Z

Een:

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 "Can't Stop" or "Niagara" on BGA, or watch a game in progress or game replay.

In Can't Stop, zone is used to display the bhikkus ascending the mountain when there is more than one on the same space (diagonal mode).

In Niagara, it is used to display the canoes over the circles going down the river (custom mode).

== How to use Zone ==

At first, don't forget to add "ebg/zone" as a dependency:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/zone" /// <==== HERE
],
</pre>

Then, declare a new variable in your class for the Zone object:

<pre>
constructor: function(){
console.log('yourgame constructor');

// Zone control
this.myZone = new ebg.scrollmap();
</pre>

Now, in your template file, you must add a div that will host this zone:

<pre>
<div id="my_zone"></div>
</pre>

And set its width (and optionnaly, height and position) in CSS:

<pre>

#my_zone {
width: 100px;
}

</pre>

Then in your Javascript setup, attach your Zone component to the div and define its properties :

<pre>
zone.create( this, 'my_zone', <item_width>, <item_height> );
zone.setPattern( <mode> );
</pre>

* <item_width> is an integer for the width of the objects you want to organise in the zone
* <item_height> is an integer for the height of the objects you want to organise in the zone
* <mode> is one of 'grid' (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line) 'diagonal' (objects will be organised on a top left to bottom right diagonal, overlapping each other) or 'custom' (objects will be organised depending upon their number and the coordinates that you provide - see below)

Now your zone is ready to be used!

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:

<pre>
zone.placeInZone( <object_id>, <weight> );
</pre>

* <object_id> is the string identifier for your object 'my_object_id'
* <weight> is an optional parameter used to sort items

To remove an item, use:

<pre>
zone.removeFromZone( <object_id>, <destroy?>, <to> );
</pre>

* <object_id> is the string identifier for your object 'my_object_id'
* <destroy?> is a boolean indicating if the object should be destroyed after being removed
* <to> is the destination the object must be slided to when being removed (before being eventually destroyed)

You can also:
* remove all items from the zone (and destroy them) using zone.removeAll();
* get the number of items in your zone using zone.getItemNumber();
* get an array of the ids of all the items using zone.getAllItems();

== Custom mode ==

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:

<pre>
this.zone.setPattern( 'custom' );

this.zone.itemIdToCoords = function( i, control_width ) {
if( i%8==0 )
{ return { x:1,y:19, w:60, h:30 }; }
else if( i%8==1 )
{ return { x:30,y:38, w:60, h:30 }; }
else if( i%8==2 )
{ return { x:42,y:8, w:60, h:30 }; }
else if( i%8==3 )
{ return { x:5,y:58, w:60, h:30 }; }
else if( i%8==4 )
{ return { x:5,y:24, w:60, h:30 }; }
else if( i%8==5 )
{ return { x:35,y:43, w:60, h:30 }; }
else if( i%8==6 )
{ return { x:47,y:13, w:60, h:30 }; }
else if( i%8==7 )
{ return { x:10,y:63, w:60, h:30 }; }
};
</pre>

Zone

2013-04-20T17:38:13Z

Een:

Zone

2013-04-20T17:16:41Z

Een: Created page with "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 "Can't Stop" or ..."

First steps with BGA Studio

2013-04-13T13:40:33Z

Een: /* Commit your changes */

== 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
* your SFTP login and password
* ten BGA Studio logins ending with a numeral ranging from 0 to 9 and the password needed to use them.

Using this information:
# Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software (such as WinSCP for example)
# Check than in your home folder you have:
#* One folder for each of the three example games (reversi, hearts, gomoku)
#* One folder matching the game you will be developing
#* One 'resources.html' file
# Open the resources.html file, it contains
#* The URL pointing to the BGA Studio website (protected with an HTTP Basic authentication scheme, the login and password are also referenced in the 'resources.html' file
#* 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)
#* The URL pointing to the web administration tool for the BGA Studio database.
# 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.

== Launch your game and check how to update it ==
# Find your game in the 'Play now' section and launch a table
# Use the 'I want between X and X' players to tick down the maximum players number to the minimum
# Click 'Express start': your game launches with the maximum number of players specified. It shows an empty canvas: in the game zone you just have a sentence 'This is your game interface. You can edit this HTML in your ".tpl" file.'.
# Switch to your SFTP home folder, go into your game folder. Edit the game_game.tpl file, and change this sentence to 'Hey, this is my first game!', then save.
# Go back to your browser and refresh, check that the game zone has updated.
# Click on the 'Exit game' icon on the top right, and in the popup choose 'Express game stop'. The game ends automatically and you are brought back to the table screen for this ended game.
# Switch to your game folder, go into the img folder and overwrite your game_box.png file with another image.
# Go back to your browser, '''empty your browser cache''', then refresh the page, and check that the game box image has been updated.

== Commit your changes ==

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.

Here is how to go through your first commit:
# Go back to your browser tab showing the 'resources.html' 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 '''Not authorized''' error message as the authentication is shared);
# Click on the 'Sources' 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 'My first commit') then hit the 'Submit' button;
# Check the log for errors, it should end with the following lines:

Transmitting file data .
Committed revision #revision number#.
HAL says: done.

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.

== That's all for your first steps! ==

Now you know about the basics of updating your game on the studio and testing your changes.

For more information on the specifics of each file, please check out the [[Studio#BGA_Studio_documentation | reference documentation for the framework]].

Studio

2013-04-13T13:38:56Z

Een:

[[File:Bga_studio_small.jpg]]

Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the latest information available.

== What is Board Game Arena Studio? ==

'''Board Game Arena Studio''' is a platform to build online board game adaptation using the Board Game Arena platform.

It is open to any gamer with development skills :)

See announcement here:
http://forum.boardgamearena.com/viewtopic.php?f=10&t=1973

== Discover BGA Studio in 5 presentations ==

Why, how, what... to start discovering BGA Studio, we prepared 5 "powerpoint" presentations for you:

* [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]
* [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]
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]

== How to join the BGA developer team? ==

Please see this page: [[How to join BGA developer team?]]

== Great, I'm in! ... How should I start? ==

If you didn't already, check the presentations at the top of this page to get the basics.

Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.

After that, we advise you to take a peek at one or both of these two game creation tutorials:
* [[Tutorial reversi]]
* [[Tutorial gomoku]]

Then start editing files and see what happens! ;)

If you have any questions, please check out the '''[[Studio FAQ]]''' first, then if you didn't find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 '''development forum'''].

== BGA Studio documentation ==

=== BGA Studio Framework reference ===

This part of the documentation focuses on the development framework itself: functions and methods available to build your game.

[[Studio file reference|File structure of a BGA game]]

==== Game logic ====

* [[Main game logic: yourgamename.game.php]]
* [[Your game state machine: states.inc.php]]
* [[Game database model: dbmodel.sql]]
* [[Players actions: yourgamename.action.php]]
* [[Game material description: material.inc.php]]
* [[Game statistics: stats.inc.php]]

==== Game interface ====

* [[Game interface logic: yourgamename.js]]
* [[Game art: img directory]]
* [[Game interface stylesheet: yourgamename.css]]
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]

==== Other components ====

* [[Translations]] (how to make your game translatable)
* [[Game options and preferences: gameoptions.inc.php]]
* [[Game replay]]

=== BGA Studio game components reference ===

Game components are useful tools you can use in your game adaptations.

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

=== BGA Studio user guide ===

This part of the documentation is a user guide for the BGA Studio online development environment.

* [[Tools and tips of BGA Studio]]

* [[Practical debugging]]

* [[Studio back-office]]

* [[Studio FAQ]]

== Other resources ==

[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]

[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]

Studio

2013-04-13T13:38:25Z

Een: /* BGA Studio user guide */

[[File:Bga_studio_small.jpg]]

Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.

== What is Board Game Arena Studio? ==

'''Board Game Arena Studio''' is a platform to build online board game adaptation using the Board Game Arena platform.

It is open to any gamer with development skills :)

See announcement here:
http://forum.boardgamearena.com/viewtopic.php?f=10&t=1973

== Discover BGA Studio in 5 presentations ==

Why, how, what... to start discovering BGA Studio, we prepared 5 "powerpoint" presentations for you:

* [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]
* [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]
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]

== How to join the BGA developer team? ==

Please see this page: [[How to join BGA developer team?]]

== Great, I'm in! ... How should I start? ==

If you didn't already, check the presentations at the top of this page to get the basics.

Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.

After that, we advise you to take a peek at one or both of these two game creation tutorials:
* [[Tutorial reversi]]
* [[Tutorial gomoku]]

Then start editing files and see what happens! ;)

If you have any questions, please check out the '''[[Studio FAQ]]''' first, then if you didn't find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 '''development forum'''].

== BGA Studio documentation ==

=== BGA Studio Framework reference ===

This part of the documentation focuses on the development framework itself: functions and methods available to build your game.

[[Studio file reference|File structure of a BGA game]]

==== Game logic ====

* [[Main game logic: yourgamename.game.php]]
* [[Your game state machine: states.inc.php]]
* [[Game database model: dbmodel.sql]]
* [[Players actions: yourgamename.action.php]]
* [[Game material description: material.inc.php]]
* [[Game statistics: stats.inc.php]]

==== Game interface ====

* [[Game interface logic: yourgamename.js]]
* [[Game art: img directory]]
* [[Game interface stylesheet: yourgamename.css]]
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]

==== Other components ====

* [[Translations]] (how to make your game translatable)
* [[Game options and preferences: gameoptions.inc.php]]
* [[Game replay]]

=== BGA Studio game components reference ===

Game components are useful tools you can use in your game adaptations.

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

=== BGA Studio user guide ===

This part of the documentation is a user guide for the BGA Studio online development environment.

* [[Tools and tips of BGA Studio]]

* [[Practical debugging]]

* [[Studio back-office]]

* [[Studio FAQ]]

== Other resources ==

[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]

[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]

Studio

2013-04-13T13:38:01Z

Een: /* BGA Studio documentation */

[[File:Bga_studio_small.jpg]]

Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the last information available.

== What is Board Game Arena Studio? ==

'''Board Game Arena Studio''' is a platform to build online board game adaptation using the Board Game Arena platform.

It is open to any gamer with development skills :)

See announcement here:
http://forum.boardgamearena.com/viewtopic.php?f=10&t=1973

== Discover BGA Studio in 5 presentations ==

Why, how, what... to start discovering BGA Studio, we prepared 5 "powerpoint" presentations for you:

* [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]
* [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]
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance]
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine]
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines]

== How to join the BGA developer team? ==

Please see this page: [[How to join BGA developer team?]]

== Great, I'm in! ... How should I start? ==

If you didn't already, check the presentations at the top of this page to get the basics.

Then, you should checkout the [[First steps with BGA Studio]] to make sure that runs fine.

After that, we advise you to take a peek at one or both of these two game creation tutorials:
* [[Tutorial reversi]]
* [[Tutorial gomoku]]

Then start editing files and see what happens! ;)

If you have any questions, please check out the '''[[Studio FAQ]]''' first, then if you didn't find the answer you were looking for, please post your question on the [http://forum.boardgamearena.com/viewforum.php?f=12 '''development forum'''].

== BGA Studio documentation ==

=== BGA Studio Framework reference ===

This part of the documentation focuses on the development framework itself: functions and methods available to build your game.

[[Studio file reference|File structure of a BGA game]]

==== Game logic ====

* [[Main game logic: yourgamename.game.php]]
* [[Your game state machine: states.inc.php]]
* [[Game database model: dbmodel.sql]]
* [[Players actions: yourgamename.action.php]]
* [[Game material description: material.inc.php]]
* [[Game statistics: stats.inc.php]]

==== Game interface ====

* [[Game interface logic: yourgamename.js]]
* [[Game art: img directory]]
* [[Game interface stylesheet: yourgamename.css]]
* [[Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl]]

==== Other components ====

* [[Translations]] (how to make your game translatable)
* [[Game options and preferences: gameoptions.inc.php]]
* [[Game replay]]

=== BGA Studio game components reference ===

Game components are useful tools you can use in your game adaptations.

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

== BGA Studio user guide ==

This part of the documentation is a user guide for the BGA Studio online development environment.

* [[Tools and tips of BGA Studio]]

* [[Practical debugging]]

* [[Studio back-office]]

* [[Studio FAQ]]

== Other resources ==

[http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]

[http://forum.boardgamearena.com/viewforum.php?f=4 Bugs forum]

2013-03-24T14:28:18Z

Een:

==Goal==
The goal is to be the player who has the most squares of his colors.

==Rules==
The game contains multicolored squares (red, blue. yellow and green) which appear as 4 colored triangles on the square.
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.

It is also possible to have "non playable" 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 "non playable" square will not become squares and won't gain points).

==Ending the game==
When all playable squares have been played, the player with the most squares of his color wins the game.

== Game preferences ==

The '''colorblind''' 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].

Learning the code is easy, just take a look at the following synthesis panel:

[[File:ColorADD.jpg]]

'''HAVE A GOOD GAME!'''

Gamehelpunitedsquare

2013-03-24T14:24:23Z

Een: Adding info about colorblind preference

Gamehelpcoloretto

2013-03-24T14:13:28Z

Een: Move German text to German wiki