Board Game Arena - Уклад удзельніка [be]

Deck

2020-04-03T22:37:32Z

Justinfernal: For coherence with the command lines below.

"Deck" is one of the most useful component on the PHP side. With "Deck", you can manage the cards in your game on the server side.

Using "deck", you will be able to use the following features without writing a single SQL database request:
* Place cards in a pile, shuffle cards, draw cards one by one or many at a time.
* "Auto-reshuffle" the discard pile into the deck when the deck is empty.
* Move cards between different locations: hands of players, the table, etc.

== Using Deck: Hearts example ==

The Deck component is extensively used in the sample ''Hearts'' card game. You will find in "hearts.game.php" that the object "$this->cards" is used many times.

== Deck overview ==

With Deck component, you manage all cards of your game.

=== The 5 properties of each card ===

Using the Deck component, each card will have 5 properties:
* '''id''': This is the unique ID of each card.
* '''type''' and '''type_arg''': These two values define the type of your card (i.e., what sort of card is this?).
* '''location''' and '''location_arg''': These two values define where the card is at now.

The id, type, and type_arg properties are constants throughout the game. location and location_arg change when your cards move from one place to another in the game area.

'''id''' is the unique ID of each card. Two cards cannot have the same ID. IDs are generated automatically by the Deck component when you create cards during the Setup phase of your game.

'''type''' and '''type_arg''' defines the type of your card.

'''type''' is a short string, and '''type_arg''' is an integer.

You can use these two values as you like to make sure you will be able to identify the different cards in the game. See usage of "type" and "type_arg" below.

Examples of usage of "type" and "type_arg":
* In ''Hearts'', "type" represents the color (suite) of the card (1 to 4) and "type_arg" is the value of the card (1, 2, ... 10, J, Q, K).
* In ''Seasons'', "type" represents the type of the card (e.g., 1 is Amulet of Air, 2 is Amulet of Fire, etc...). type_arg is not used.
* In ''Takenoko'', a Deck component is used for objective cards. "type" is the kind of objective (irrigation/panda/plot) and "type_arg" is the ID of the specific objective to realize (e.g., "green bamboo x4"). Note that a second Deck component is used in ''Takenoko'' to manage the "garden plot" pile.

'''location''' and '''location_arg''' define where a card is at now. '''location''' is a short string, and '''location_arg''' is an integer.

You can use 'location' and 'location_arg' as you like, to move your card within the game area.

There are 3 special 'location' values that Deck manages automatically. You can choose to use these locations or not, depending on your needs:
* 'deck': the 'deck' location is a standard draw deck. Cards are placed face down in a stack and are drawn in sequential order during the game. 'location_arg' is used to specify where the card is located within the stack (the card with the highest location_arg value is the next to be drawn).
* 'hand': the 'hand' location represents cards in a player's hand. 'location_arg' is set to the ID of each player.
* 'discard': the 'discard' location is used for discard piles. Card in 'discard' may be reshuffled into the deck if needed (see "autoreshuffle").

Tips: using the Deck component, you will use generic properties ("location", "type_arg",...) for specific purposes in your game. Thus, during the design step before realizing your game, take a few minutes to write down the exact meaning of each of these generic properties in the context of your game.

=== Create a new Deck component ===

For each Deck component in your game, you need to create a dedicated table in the SQL database. This table has a standard format. In practice, if you just want to have a Deck component named "card", you can copy/paste the following into your "dbmodel.sql" file:

<pre>
CREATE TABLE IF NOT EXISTS `card` (
`card_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`card_type` varchar(16) NOT NULL,
`card_type_arg` int(11) NOT NULL,
`card_location` varchar(16) NOT NULL,
`card_location_arg` int(11) NOT NULL,
PRIMARY KEY (`card_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
</pre>

Note: the database schema of this table does not have to be exactly what is listed above. You can increase the size of the fields or add more fields. For additional fields
you just have to do manual queries.

Once you have done this (and restarted your game), you can declare the Deck component in your PHP code in your class constructor. For ''Hearts'' for example, I added to the "Hearts()" method:

<pre>
$this->cards = self::getNew( "module.common.deck" );
$this->cards->init( "card" );
</pre>

Note that we specify "card" here: the name of our previously created table. This means you can create several "Deck" components with multiple tables:

<pre>
$this->firstKindCards = self::getNew( "module.common.deck" );
$this->firstKindCards ->init( "first_kind_card" );
$this->secondKindCards = self::getNew( "module.common.deck" );
$this->secondKindCards ->init( "second_kind_card" );
</pre>

Most of the time this is not useful; a Deck component should manage all objects of the same kind (i.e., all cards in the game).

Afterwards, we can initialize your "Deck" by creating all the cards of the game. Generally, this is done only once during the game, in the "setupNewGame" method.

The "Deck" component provides a fast way to initialize all your cards at once: createCards. Here is how it is used for "Hearts":
<pre>
// Create cards
$cards = array();
foreach( $this->colors as $color_id => $color ) // spade, heart, diamond, club
{
for( $value=2; $value<=14; $value++ ) // 2, 3, 4, ... K, A
{
$cards[] = array( 'type' => $color_id, 'type_arg' => $value, 'nbr' => 1);
}
}

$this->cards->createCards( $cards, 'deck' );
</pre>

As you can see, "createCards" takes a description of all cards of the game. For each type of card, you have to specify its "type", "type_arg" and the number of card to create. "createCards" create all cards and place them into the "deck" location (as specified in the second argument).

Now, you are ready to use "Deck"!

=== Simple examples using Deck ===

(Most examples are from "Hearts" game)

<pre>
// In "getAllDatas', we need to send to the current player all the cards he has in hand:
$result['hand'] = $this->cards->getCardsInLocation( 'hand', $player_id );
</pre>

<pre>
// At some time we want to check if all the cards (52) are in player's hands:
if( $this->cards->countCardInLocation( 'hand' ) == 52 )
// do something
</pre>

<pre>
// When a player plays a card in front of him on the table:
$this->cards->moveCard( $card_id, 'cardsontable', $player_id );

// Note the use of the custom location 'cardsontable' here to keep track of cards on the table.
</pre>

<pre>
// This is a new hand: let's gather all cards from everywhere in the deck:
$this->cards->moveAllCardsInLocation( null, "deck" );

// And then shuffle the deck
$this->cards->shuffle( 'deck' );

// And then deal 13 cards to each player
// Deal 13 cards to each players
// Create deck, shuffle it and give 13 initial cards
$players = self::loadPlayersBasicInfos();
foreach( $players as $player_id => $player )
{
$cards = $this->cards->pickCards( 13, 'deck', $player_id );

// Notify player about his cards
self::notifyPlayer( $player_id, 'newHand', '', array(
'cards' => $cards
) );
}

// Note the use of "notifyPlayer" instead of "notifyAllPlayers": new cards is a private information ;)
</pre>

== Deck component reference ==

=== Initializing Deck component ===

'''init( $table_name )'''

Initialize the Deck component.

Argument:
* table_name: name of the DB table used by this Deck component.

Must be called before any other Deck method.

Usually, init is called in your game constructor.

Example with Hearts:

<pre>
function Hearts( )
{
(...)

$this->cards = self::getNew( "module.common.deck" );
$this->cards->init( "card" );
}
</pre>

'''createCards( $cards, $location='deck', $location_arg=null )'''

Create card items in your deck component. Usually, all card items are created once, during the setup phase of the game.

"cards" describe all cards that need to be created. "cards" is an array with the following format:

<pre>
// Create 1 card of type "1" with type_arg=99,
// and 4 cards of type "2" with type_arg=12,
// and 2 cards of type "3" with type_arg=33

$cards = array(
array( 'type' => 1, 'type_arg' => 99, 'nbr' => 1 ),
array( 'type' => 2, 'type_arg' => 12, 'nbr' => 4 ),
array( 'type' => 3, 'type_arg' => 33, 'nbr' => 2 )
...
);
</pre>

Note: During the "createCards" process, Deck generates unique IDs for all card items.

Note: createCards is optimized to create a lot of cards at once. Do not use it to create cards one by one.

If "location" and "location_arg" arguments are not set, newly created cards are placed in the "deck" location. If "location" (and optionally location_arg) is specified, cards are created for this specific location.

=== Card standard format ===

When Deck component methods are returning one or several cards, the following format is used:

<pre>
array(
'id' => .., // the card ID
'type' => .., // the card type
'type_arg' => .., // the card type argument
'location' => .., // the card location
'location_arg' => .. // the card location argument
);
</pre>

=== Picking cards ===

'''pickCard( $location, $player_id )'''

Pick a card from a "pile" location (ex: "deck") and place it in the "hand" of specified player.

Return the card picked or "null" if there are no more card in given location.

This method supports auto-reshuffle (see "auto-reshuffle" below).

'''pickCards( $nbr, $location, $player_id )'''

Pick "$nbr" cards from a "pile" location (ex: "deck") and place them in the "hand" of specified player.

Return an array with the cards picked, or "null" if there are no more card in given location.

Note that the number of cards picked can be less than "$nbr" in case there are not enough cards in the pile location.

This method supports auto-reshuffle (see "auto-reshuffle" below). In case there are not enough cards in the pile, all remaining cards are picked first, then the auto-reshuffle is triggered, then the other cards are picked.

'''pickCardForLocation( $from_location, $to_location, $location_arg=0 )'''

This method is similar to 'pickCard', except that you can pick a card for any sort of location and not only the "hand" location.

* from_location is the "pile" style location from where you are picking a card.
* to_location is the location where you will place the card picked.
* if "location_arg" is specified, the card picked will be set with this "location_arg".

This method supports auto-reshuffle (see "auto-reshuffle" below).

'''pickCardsForLocation( $nbr, $from_location, $to_location, $location_arg=0, $no_deck_reform=false )'''

This method is similar to 'pickCards', except that you can pick cards for any sort of location and not only the "hand" location.

* from_location is the "pile" style location from where you are picking some cards.
* to_location is the location where you will place the cards picked.
* if "location_arg" is specified, the cards picked will be set with this "location_arg".
* if "no_deck_reform" is set to "true", the auto-reshuffle feature is disabled during this method call.

This method supports auto-reshuffle (see "auto-reshuffle" below).

=== Moving cards ===

'''moveCard( $card_id, $location, $location_arg=0 )'''

Move the specific card to given location.

* card_id: ID of the card to move.
* location: location where to move the card.
* location_arg: if specified, location_arg where to move the card. If not specified "location_arg" will be set to 0.

'''moveCards( $cards, $location, $location_arg )'''

Move the specific cards to given location.

* cards: an array of IDs of cards to move.
* location: location where to move the cards.
* location_arg: if specified, location_arg where to move the cards. If not specified "location_arg" will be set to 0.

'''insertCard( $card_id, $location, $location_arg )'''

Move a card to a specific "pile" location where card are ordered.

If location_arg place is already taken, increment all cards after location_arg in order to insert new card at this precise location.

(note: insertCardOnExtremePosition method below is more useful in most of the case)

'''insertCardOnExtremePosition( $card_id, $location, $bOnTop )'''

Move a card on top or at bottom of given "pile" type location.

'''moveAllCardsInLocation( $from_location, $to_location, $from_location_arg=null, $to_location_arg=0 )'''

Move all cards in specified "from" location to given location.

* from_location: where to take the cards
* to_location: where to put the cards
* from_location (optional): if specified, only cards with given "location_arg" are moved.
* to_location (optional): if specified, cards moved "location_arg" is set to given value. Otherwise location_arg is set to zero.

Note: if you want to keep "location_arg" untouched, you should use "moveAllCardsInLocationKeepOrder" below.

'''moveAllCardsInLocationKeepOrder( $from_location, $to_location )'''

Move all cards in specified "from" location to given "to" location. This method does not modify the "location_arg" of cards.

'''playCard( $card_id )'''

Move specified card at the top of the "discard" location.

Note: this is an alias for: insertCardOnExtremePosition( $card_id, "discard", true )

=== Get cards informations ===

'''getCard( $card_id )'''

Get specific card information.

Return null if this card is not found.

'''getCards( $cards_array )'''

Get specific cards information.

cards_array is an array of cards ID.

If some cards are not found or if some cards IDs are specified multiple times, the method throws an (unexpected) Exception.

'''getCardsInLocation( $location, $location_arg = null, $order_by = null )'''

Get all cards in specific location, as an array. Return an empty array if the location is empty.

* location (string): the location where to get the cards.
* location_arg (optional): if specified, return only cards with the specified "location_arg".
* order_by (optional): if specified, returned cards are ordered by the given database field. Example: "card_id" or "card_type".

'''countCardInLocation( $location, $location_arg=null )'''

Return the number of cards in specified location.

* location (string): the location where to count the cards.
* location_arg (optional): if specified, count only cards with the specified "location_arg".

'''countCardsInLocations()'''

Return the number of cards in each location of the game.

The method returns an associative array with the format "location" => "number of cards".

Example:
<pre>
array(
'deck' => 12,
'hand' => 21,
'discard' => 54,
'ontable' => 3
);
</pre>

'''countCardsByLocationArgs( $location )'''

Return the number of cards in each "location_arg" for the given location.

The method returns an associative array with the format "location_arg" => "number of cards".

Example: count the number of cards in each player's hand:
<pre>
countCardsByLocationArgs( 'hand' );

// Result:
array(
122345 => 5, // player 122345 has 5 cards in hand
123456 => 4 // and player 123456 has 4 cards in hand
);
</pre>

'''getPlayerHand( $player_id )'''

Get all cards in given player hand.

Note: This is an alias for:
getCardsInLocation( "hand", $player_id )

'''getCardOnTop( $location )'''

Get the card on top of the given ("pile" style) location, or null if the location is empty.

Note that the card pile won't be "auto-reshuffled" if there is no more card available.

'''getCardsOnTop( $nbr, $location )'''

Get the "$nbr" cards on top of the given ("pile" style) location.

The method return an array with at most "$nbr" elements (or a void array if there is no card in this location).

Note that the card pile won't be "auto-reshuffled" if there is not enough cards available.

'''getExtremePosition( $bGetMax ,$location )'''

(rarely used)

Get the position of cards at the top of the given location / at the bottom of the given location.

Of course this method works only on location in "pile" where you are using "location_arg" to specify the position of each card (example: "deck" location).

If bGetMax=true, return the location of the top card of the pile.

If bGetMax=false, return the location of the bottom card of the pile.

'''getCardsOfType( $type, $type_arg=null )'''

Get all cards of a specific type (rarely used).

Return an array of cards, or an empty array if there is no cards of the specified type.

* type: the type of cards
* type_arg: if specified, return only cards with the specified "type_arg".

'''getCardsOfTypeInLocation( $type, $type_arg=null, $location, $location_arg = null )

Get all cards of a specific type in a specific location (rarely used).

Return an array of cards, or an empty array if there is no cards of the specified type.

* type: the type of cards
* type_arg: if specified, return only cards with the specified "type_arg".
* location (string): the location where to get the cards.
* location_arg (optional): if specified, return only cards with the specified "location_arg".

=== Shuffling ===

'''shuffle( $location )'''

Shuffle all cards in specific location.

Shuffle only works on locations where cards are on a "pile" (ex: "deck").

Please note that all "location_arg" will be reset to reflect the new order of the cards in the pile.

=== auto-reshuffle ===

To enable auto-reshuffle you must do "$this->cards->autoreshuffle = true" during the setup of the component.

Every time a card must be retrieved from the "deck" location, if it is empty the "discard" location will be automatically reshuffled into the "deck" location.

If you need to notify players when the deck is shuffled, you can setup a callback method using this feature: $this->cards->autoreshuffle_trigger = array('obj' => $this, 'method' => 'deckAutoReshuffle');

If you need to use other locations than "deck" and "discard" for auto-reshuffle feature, you can configure it this way: $this->cards->autoreshuffle_custom = array('deck' => 'discard'); (replace 'deck' and 'discard' with your custom locations).

Tools and tips of BGA Studio

2020-03-29T00:01:50Z

Justinfernal: Adding File Sync description for VSCode

== Server Tools and Tips ==
=== Starting a game in one click ===

To start a game:
* Create a new table with your game.
* If you want to play a game with 3 players, specify that you want a maximum of 3 players at this table.
* Click on "Express Start".

=== Stopping a game in one click ===

* Click on the "quit" icon on the top right of the screen.
* Click on "Express Stop".

=== Switching between users ===

When running a game on Studio, you can use the little red arrow near each player's name to open a new tab with this player's perspective.

=== Access to game database and Logs ===

At the bottom of the game area, there is section without a title containing 3 useful links:

Go to game database • BGA request&SQL logs • BGA unexpected exceptions logs

* "Go to game database" link is an immediate access to the PhpMyAdmin tool to view/edit the tables of the current game
* BGA request&SQL logs - link to your studio PHP log - all tables, all severities. Anything you print using debugging and tracing functions from PHP and some framework logs
* BGA unexpected exceptions logs - same log as above but only severity warning and higher

See [[Practical debugging]] for more info about it.

=== Save & restore state ===

Using links of this section, you can save the complete current (database) state of your game, then restore it later.

This is particularly useful when you want to develop a part of the game that is difficult to reproduce: you just have to save the situation just before, and then restore it until this part works fine.

We provide you 3 "slots": 1, 2 and 3. This way, you can save 3 different game situations.

Limits:
* the "restore" function does not work anymore when the game is over.
* a saved situation from a given table cannot be restored in another table.
* when you "restore" a situation, the current browser page is refreshed to reflect the updated game situation, but you have to refresh you other tabs/pages manually.

=== Input/Output debugging section ===

This section shows you:
* The AJAX calls made by your game interface to the game server. AJAX calls (outputs) begins with ">"
* The notifications received by your game interface. Notifications (inputs) begins with "<".

Note: if you click on some notification title, you can resend it immediately to the user interface.

=== Run PHP functions from the chat ===

On BGA Studio, you can directly run a PHP method from the table chat.

For example, if on your PHP you have this method:

function giveMoneyToPlayer($player_id, $amount) { ... }

You can call this method directly from the chat like this:

giveMoneyToPlayer(2564,2)

Note: this is not a real php statement, you cannot use self::, you cannot use ";" at the end and you cannot use quotes,
if you need to pass a string skip the quotes, like this

giveToActivePlayer(money,2)

=== Stopping Hanging Game ===

If game is hanging and you cannot enter it to stop you can type this URL (replace 12345 with your table number),
which should bring you to a place where you can stop it without entering:

<nowiki>http://en.studio.boardgamearena.com/#!table?table=12345</nowiki>

== Desktop and Web Tools ==
=== Code Editors and IDEs ===
==== Eclipse For PHP Developers ====

Eclipse PHP package can be starting point for development you need. You may also want to
install Tern JS plugins to understand dojo style JS. All desktops.
https://projects.eclipse.org/projects/tools.pdt

==== Visual Studio Code ====

Microsoft Visual Studio Code is light weight IDE/Editor. All desktops.
https://code.visualstudio.com

==== Gedit (Ubuntu) ====
'''Edit TPL'''
To edit TPL with HTML code highlightings in Gedit under Ubuntu:

find gtksourceview directory in /usr/share, depending on your version (2.0, 3.0,...).
<br>
Here it's 3.0, then type in a terminal window:
<pre>
sudo gedit /usr/share/gtksourceview-3.0/language-specs/html.lang
</pre>

then find 'globs' section, and change:

<pre>
<property name="globs">*.html;*.htm;*.tpl</property>
</pre>

=== File Sync ===

==== File Sync on Windows ====

Install [http://winscp.net/ WinSCP]. Map a remote directory to a local one and enable continuous sync (one way). You need SFTP password you get when you registered dev account.

==== File Sync on Linux ====

* Option 1 - Nautilus (file manager)
You can just use Nautilus "connect to a server" function with URL sftp://1.studio.boardgamearena.com
Then you'll get a mounted local folder mapping your studio folder and you can use any editor you like without further need for sync. Downside - if connection goes down you cannot work on source code, no local copy.

* Option 2 - sftp and rsync

<pre>

#!/bin/bash
BASEDIR=`dirname $0`
REMOTE=$BASEDIR/remote
LOCAL=$BASEDIR/workspace
GAME=mygamenamehere

#mount remote
fusermount -u $REMOTE #this unmounts dir
echo LongDevPassword | sshfs -o password_stdin myusernamehere@1.studio.boardgamearena.com: $REMOTE

#this starts auto-sync from local to remote mount
killall lsyncd
lsyncd -delay 1 -rsync $LOCAL/$GAME/ $REMOTE/$GAME

</pre>

This can be able run on startup, so you don't have to do anything manually. However sshfs is not very stable you
have to kill and restart it sometimes. And remote goes away sometimes due to connection issues with studio.
In this case its handy to have a local copy, which is what lsyncd for.

You can also sync on demand (from a build script or editor command) using
rsync -vlrt $LOCAL/$GAME/ $REMOTE/$GAME

==== File Sync using VSCode ====
You might rely on your IDE to sync the files with the SFTP server. Each time you "save" a file with your modifications, the IDE will also submit it to the sFTP server.

If you're using VSCode as an IDE, you might '''install this extension''' :
https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

- '''Open VSCode on an empty folder''' that will be the local root of your project.

- Execute Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open the command palette, and the type/run : '''"SFTP: config"'''

- '''Update the json''' as below :

<pre>
{
"name": "BGA",
"host": "1.studio.boardgamearena.com",
"protocol": "sftp",
"port": 22,
"username": "replace with your SFTP username",
"password": "replace with your SFTP password",
"remotePath": "/replace with the name of your project/",
"uploadOnSave": true,
"ignore": [
".vscode",
".git",
".DS_Store"
]
}
</pre>

- Execute Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open the command palette, and the type/run : '''"SFTP: Download Project"'''.

This will download all the files locally, and each time you modify/save a file in VSCode, it will upload it to the SFTP Server.

=== Debuggers ===

Browser is the best tool for JS/HTML5 debugging, see [[Practical debugging]] for details.

=== Version Control ===
Studio providers svn for you code on server, there are some limited abilities there to see history and restore. I recommend to keep your code in another repository. I suggest to use git with local repo, which you can sync to cloud or backup.
Other option is to host source code on github, if you do use this convention github.com/<yourname>/bga-<yourgame>. In such case make sure you don't post high-res publisher graphics only web resources, and post a separate license for graphics files.

=== PHP CLI ===
Its handy to have php cli (command line) tools install to run php locally, so you can test some stuff without deployment cycle, or create some scripts that generate code or markup.

=== Image Manipulation ===
==== ImageMagick ====
Handy set of image manipulation '''command line''' tools, useful to for example to stitch together bunch of images and re-size, to use as sprite (in Stock component for example). I.e. you got a graphics file from publisher where every tile is 600x600 PNG file in separate file. You want .jpg instead of .png to make it not like 20Mb, and combine all images in one column and re-size to 128x128:

(Linux example)
/usr/bin/montage `ls Tiles*.png` -tile 1 -geometry 128x128+0+0 out/tiles128.jpg

https://www.imagemagick.org/script/download.php

==== Gimp ====

GUI tool, very complex but will do ALL what you possibly need to do with game graphics

https://www.gimp.org/

==== Shrinking ====

Shrink images without loss of quality https://tinypng.com/ or http://www.iloveimg.com/

==== PDF Scrabber ====

PDF Scraper - extract images from PDF file (i.e. game rulebook) - http://www.extractpdf.com/

==== Rename/Copy project ====

There is a script available in sharedcode project to do the renaming which can be called in command line if you have php command line installed.
You need to have php clt (command line interface) installed, then you can download script and run it.

https://github.com/elaskavaia/bga-sharedcode/blob/master/tools/bgaprojectrename.php

Usage:
php bgaprojectrename.php <originalProjectPath> <copyOfProjectRenamedPath>

Example on how to call it in command line if you project name is "heartsmyproject"

php7.0 git/bga-sharedcode/tools/bgaprojectrename.php remote/hearts/ remote/heartsmyproject/

==== BGA Workbench ====

PHP library providing tools to help manage BGA Studio projects including deployment and test utilities. https://github.com/danielholmes/bga-workbench

== Client Tips ==

=== Speed up game re-loading by disabling Input/Output debug section ===

Development UI have few sections for debugging only, such as 'Input/Output debugging section'. Loading this data will significantly slow down
your reload. I did some profiling and my reloading (i.e. F5) took 14 seconds, 12 of which it was dealing with loading this section.
If you not using it you can disable it. In your JavaScript code, in the begging of 'setup' method add this code

dojo.destroy('debug_output');

That should get rid of this section and overhead associated with loading it (it may have some other side-effects, I have not explored all of them)

=== Speed up CSS development and layout ===

Syncing files to server and refreshing is relative fast but still can take up to 20 seconds which is annoying.
If you working
a lot on css/images/layout you can speed it up by coping html in some state of the game to your local folder.
I.e. in your project folder create directory misc/ and save your html as misc/test.html and changing path to css to load from local disk (and it will load your images to from local disk as well).
I.e. find something like

<link rel="stylesheet" type="text/css" href="http://1.studio.boardgamearena.com:8081/data/themereleases/151226-1240/games/mygame/999999-9999/mygame.css"/>

and replace with
<link rel="stylesheet" type="text/css" href="../mygame.css"/>

You project structure will look like this

mygame
img/ <-- your images
mygame.css <-- your original css
...
misc/
test.html <-- your test html

It is a bit tricky to save html exact state, if you do save as it also pulls all resources sometimes.