Board Game Arena - User contributions [en]

Gamehelpindianchief

2025-11-27T11:43:13Z

Ufm: /* The 7 Melds */

== How to Play ==

The game lasts just 7 rounds. Over the course of the game each player will make 7 different melds. Each meld requires a different number of cards and has different rules for scoring points.

1-3 player games use 1 deck, 4-8 player games use 2 decks, and 9-10 player games use 3 decks.

The 7 melds take their names from a traditional children's rhyme:

* 5 cards - Rich Man
* 3 cards - Poor Man
* 2 cards - Beggar Man
* 1 card - Thief
* 6 cards - Doctor
* 4 cards - Lawyer
* 7 cards - Indian Chief

Each player is dealt a hand of 8 cards. Players secretly decide which of the 7 melds they will play from their hand, and which of their cards they will play. Everyone's meld is revealed simultaneously and scoring is recorded. Then each player draws back up to 8 cards, and a new round commences.

Over the course of the 7 rounds, a player makes each meld once and once only, but they can be made in any order. The game is over at the end of the seventh round, i.e., once everyone has made all 7 melds.

== The 7 Melds ==

Note: For all "face values" in the game, face cards count 10. Aces can be used as either high (value 11) or low (value 1).

Here are the 7 different melds in order of number of cards required:

1. Thief. Meld any single card and score the face value for that card.

The player who played the Thief fills back to 8 cards by taking a Joker from the wild pile.

Jokers are wild cards which can be played as any card desired. Spent Jokers are returned to the wild pile.

2. Beggar Man. Meld 2 cards and hope for sympathy. This symbolizes two outstretched supplicating hands.

For each card someone else melds on the same round that matches the rank of either melded card, score 2 points.

If one of the cards played is a Joker, it can be declared as any card desired after seeing the other players' melds.

3. Poor Man. Melding 3 cards, here is your chance to profit by the sweat of your brow. The spade is the symbol of your toil. Meld any 3 cards, but score the face values only of the spades you play.

4. Lawyer. The Law is exact. Meld 4 cards, and if their face values add up to exactly 25, score 25 points. Otherwise score nothing.

5. Rich Man. Even a Rich Man has to pay taxes! Meld any 5 cards, add their face values together and score the total as a negative number.

6. Doctor. The 6 cards melded as the Doctor must meet very stringent requirements, or they will score nothing. All 3 of these conditions must be met:

(a) No two cards can be of the same rank. (Because a Doctor needs wide and varied knowledge!)

(b) At least one of the 6 cards must be a heart. (Because a Doctor needs to have a heart!)

(c) One of the 6 cards must be an ace. (Because a Doctor should be an ace!)

If these three conditions are met, then the player picks one suit and scores 10 points for each card in that suit among their 6 cards. (Because a Doctor needs to be good at their specialty!)

7. Indian Chief. The Indian Chief is a compound meld, being comprised of two discrete parts: 3-card Tribal Council and 4-card tribe members.

(a) For the Tribal Council, score 7 points each for a Jack, a Queen, and a King. Only one of each rank scores.

(b) To score the remaining 4 cards:

* 32 points for 4 of a kind
* 28 points for 3 of a kind
* 24 points for 4-card straight
* 20 points for 2 pairs
* 12 points for 1 pair

Remember: The 7 melds can be played in any order. After the 7 rounds are played and scored, the winner is the player with the most points.

== Refilling to 8 cards ==

The players leave their melds face-up until the cards for the new round have been dealt from the remainder of the deck. Then the remainder of the deck is shuffled together with the face-up cards to form the supply for the next hand.

== Solo rules ==

In solo mode, cards melded do not return to the deck.

Beggar Man scores from each card melded in all previous rounds instead of each card other players meld on the same round.

== Triple mode ==

Each player has 3 scoring columns per scoring category. The second column scores double, and the third column scores triple.

In solo triple mode, use 2 decks.

Game meta-information: gameinfos.jsonc

2025-06-15T22:16:48Z

Ufm: /* Losers not ranked between themselves */

{{Studio_Framework_Navigation}}

__TOC__

== Overview ==

From this file, you can edit the various meta-information of your game.

After modifying the file, don't forget to click on "Reload game informations" from the Control Panel so that the changes can be taken into account.

Note: if you break gameinfos and cannot load the management page, then reload using the direct URL: https://studio.boardgamearena.com/admin/studio/reloadGameInfos.html?game= (with your game name at the end of url).

Most of the information provided in this file is self-explanatory.

See sections below for specific cases.

==Publisher==

These fields should match the publisher of the game. In the case of a public domain name, they should be left empty (empty string)

==Beta==

You are not allowed to set the "'''is_beta'''" to 0 before the game has been released on BGA and stabilized.
==Time Profiles==
'''fast/medium/slow_additional_time''': please set high values here: after the game has been released, there is a process that adjusts these values to match the real game duration. Adjustment starts when the game enters beta, after that these have no effect, and require admin intervention to change.

==Number of players==

'''players'''
'players' => array( 3, 4, 6 ),

*during the first step of development of a game, it is recommended to have a "1 player" configuration: it is much easier to start/stop a game this way, as you don't need to switch players.
*if you change the minimum number of players from 1 to 2, for example, make sure the new tables you create are not restricted from 1 to 1 player otherwise when you create a new table and this account setting is used, there will be a conflict with the new minimum number of players allowed and you will be blocked from creating the game.
But you can also unblock yourself by changing the number of players again, launching a game with a larger number, and then getting back to the number you want.

'''suggest_player_number''' / '''not_recommend_player_number'''
'suggest_player_number' => 3,
'not_recommend_player_number' => array( 6 ),

Don't specify anything here (null) if there is no configuration that is REALLY better/worse than another one. You can check player's poll on BoardGameGeek game page if you have any doubt. Note that there can be at most one suggested player count (provide either null or a single number), but there can be several not recommended player counts (provide either null or an array of values).

Another reason to leave it blank unless there is really strong reason to do so is that suggest_player_number also has an implication on the ELO calculation, whereby the K-factor is multiplied by the number of players up to a maximum of this value (or, no max if it's not provided). That is to say, a 6-player game with a suggestion of 3-players will have ELO calculated as if it were a 3-player game.

'''Important exception:''' in the automatic lobby, if 'suggest_player_number' is not specified, the system will try first the lowest. So if the lowest player number is not compatible with the default options for your game (especially if there is a Solo mode that can only be played in training mode) you have to specify a suggest_player_number of your choice, so that players launching a game in the automatic lobby without checking the option don't get an error with the default configuration.

==Colors==

'''player_colors'''
'player_colors' => array( "ff0000", "008000", "0000ff", "ffa500", "ffffff" ),

This array defines the default player colors, theoretically this can be bigger then maximum number of players but you have to support all of the players in your game.
Your setupNewGame in php is responsible for attributing these values to players. See section "Player color preferences" in [[Main_game_logic:_yourgamename.game.php]] for details.

== Minimum screen size ==
The settings to specify mobile (or small desktop) screen size if detailled here:
https://en.doc.boardgamearena.com/Your_game_mobile_version

== Losers not ranked between themselves==

By default, all player are ranked, but in some games, the rules say that all non-winners are losers and not ranked between themselves. You can set this option to true so that for your game, there are only winners and losers, without a full ranking of all players.

The score in this case should be the same for the winners and 0 for the losers.

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
'''Warning: Do not use this option in 2-player games, co-op games, or games where perfect ties are frequent, as ELO will not change when everyone is perfectly tied (including tiebreakers).'''
</div>

// If in the game, all losers are equal (no score to rank them or explicit in the rules that losers are not ranked between them), set this to true
// The game end result will display "Winner" for the 1st player and "Loser" for all other players
'losers_not_ranked' => false,

'''Note''': In some team games like Tichu, Spades, and Belote, players do not gain or lose ELO by teammates. (Hover over the ELO changes to find 'Teammate: -100%')

To activate this modifier for your game, please contact a BGA admin (<code>hardcoded_team_games</code> must be enabled manually).

<b style="color:darkred">Warning:</b> This modifier should not be applied to co-op games or games where 3 or more parties can compete each other (e.g. individual mode with 3 or more players, 2v2v2 6 player mode, and etc.).

==Disable player rotation in case of rematch==

By default, in case of a rematch players are rotated so that the first player changes. If for your game it's better to always have a random player order you can change this option.

// When doing a rematch, the player order is swapped using a "rotation" so the starting player is not the same
// If you want to disable this, set this to true (even if the comment in your game file say the opposite).
'disable_player_order_swap_on_rematch' => false,

==Deprecated fields==

* Game designer (<code>designer</code>)
* Game artist (<code>artist</code>)
* Year (<code>year</code>)
* Tags (<code>tags</code>)
* Game presentation (<code>presentation</code>)
* Game page warning (<code>gamepanel_page_warning</code>)
* Custom "buy this game" button (<code>custom_buy_button</code>)

'''⚠ Note''': these fields are <b style="color:darkred">no longer read from this file</b>; these are now managed via the [[Game_metadata_manager|Game Metadata Manager]].

==Tie breaker description==
Describe tie breaker score calculation (player_score_aux in player table).

Important: This is used in the javascript too, which is automatically generated. Using newlines in here will cause errors in the javascript, which will cause the game to not load.

Example:
'tie_breaker_description' => totranslate("Number of remaining cards in hand"),

== Multiple tie breaker management ==

If your game has multiple tie breakers, here is what you should do.

Let's take this example: "In case of a tie, the winner is the game with the most remaining money, then number of buildings built, then number of cards in your hand".

In this example, your "player_score_aux" field might be calculated like this:

10000 * (remaining_money ) + 100 * (buildings_built) + (number_of_cards)

In this case, you should add the following in gameinfos.inc.php:

'tie_breaker_split' => array( 10000, 100 , 1 ),

It means that the first tie breaker has been multiplied by 10000, the second by 100, and the third by 1.

Using this, the result screen will be adapted to show exactly what is needed. For example:
* When 2 players are tied, it will show their remaining money.
* If their remaining money are equal, it will show the number of building built in addition to the remaining money.
*If these two tie breaker are still the same, it will show the 3 tie breaking values.

==Language dependency==

If you have a game that is language dependent, you can use the option described here: [[Main_game_logic:_yourgamename.game.php#Language_dependent_games_API]]

== Coop Elo Mode==

For cooperative games, by default players will earn as many rating points as the score. Games ended with a positive score counts as wins, and scores of 0 or below count as losses.

For games where there is no or little variable difficulty (such as for example Bandido) the fixed amount of score can be assigned across all settings. However, for all coop games where we have options to change the difficulty level and/or where the score reached indicates a higher level of skill and/or where the number of players has a significant impact on the difficulty, the final score should be adjusted according to the difficulty level and the number of players.

If needed, a reference scale for Elo points (between 1300 and 2500) can be set up. Players regularly winning with a specific difficulty setting will have their Elo nearing this value asymptotically over time. For this, you can set up the coop_elo_mode parameter.

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
'''Warning: While this can reflect player skills more precisely compared to flat rating gain, this parameter is generally not recommended as players may abandon losing games or avoid new players to prevent rating loss.'''
</div>

Related discussion:

https://forum.boardgamearena.com/viewtopic.php?f=3&t=24363

https://boardgamearena.com/forum/viewtopic.php?t=32289

Here is an example using options and win/loss (score 1/0):

'coop_elo_mode' => [
'type' => 'points_references',
'references' => [
// Difficulty 1
['players_nbr' => 2, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 2, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1470]],
['players_nbr' => 3, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1350]],
['players_nbr' => 3, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 4, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 4, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1470]],
// Difficulty 2
['players_nbr' => 2, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 2, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 3, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1450]],
['players_nbr' => 3, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 4, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 4, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
// Difficulty 3
['players_nbr' => 2, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 2, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1910]],
['players_nbr' => 3, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 3, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 4, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 4, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1910]],
// Difficulty 4
['players_nbr' => 2, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 2, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 2120]],
['players_nbr' => 3, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1640]],
['players_nbr' => 3, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 4, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 4, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 2120]],
// Difficulty 5
['players_nbr' => 2, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 2, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 2340]],
['players_nbr' => 3, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1740]],
['players_nbr' => 3, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 4, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 4, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 2340]],
],
],

Here is an example using different scoring values to indicate the level of difficulty mastered by the players winning the game:

'coop_elo_mode' => array(
'type' => 'points_references',
'references' => array(
array(
'players_nbr' => 2,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1350,
2 => 1425,
3 => 1500,
4 => 1576,
5 => 1651,
6 => 1727,
7 => 1802,
8 => 1878,
9 => 1953,
10 => 2029,
11 => 2104,
12 => 2180
)
),
array(
'players_nbr' => 3,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1400,
2 => 1470,
3 => 1541,
4 => 1612,
5 => 1683,
6 => 1754,
7 => 1825,
8 => 1895,
9 => 1966,
10 => 2018,
11 => 2095,
12 => 2250
)
),
array(
'players_nbr' => 4,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1430,
2 => 1505,
3 => 1580,
4 => 1655,
5 => 1730,
6 => 1805,
7 => 1880,
8 => 1955,
9 => 2030,
10 => 2105,
11 => 2180,
12 => 2330
)
),
array(
'players_nbr' => 5,
// 'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1480,
2 => 1558,
3 => 1636,
4 => 1714,
5 => 1792,
6 => 1870,
7 => 1949,
8 => 2027,
9 => 2105,
10 => 2183,
11 => 2261,
12 => 2340
)
)
)
),

[[Category:Studio]]

Gamehelppresident

2025-04-25T16:35:36Z

Ufm: /* Rule set */

== Objective ==

The goal of President is to accumulate the most points by getting rid of all of the cards in your hand faster than the other players in each round.

=== Playing the game ===

Number of players : 2-8 (no President or Beggar in 2/3-player)

President is played with a standard 52-card deck and 1 Joker. Following this hierarchy (lowest to highest): 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K, A, 2.

*A Joker can be used as either the highest ranked single card, or a wild which can be used with other cards.

Cards are dealt one at a time clockwise until all cards have been dealt. When cards cannot be evenly distributed, lowest ranked players will receive more cards than others.

In 2 player mode, both players receive 15 cards instead.

A player can play a single card or a set of cards of equal rank :
*Double – a pair of cards of the same value (ex. 2 Kings).
*Triple – three cards of the same value (ex. 3 fours).
*Quadruple – four cards of the same value (ex. 4 sevens).
*Quintuple - four cards of the same value and the Joker as a wild (ex. 4 nines plus the Joker).

The first player of the round sets how many cards should be played for the entire pile.
*Player 1 : plays 1 five, then all others players must play one card until this pile is over.
*Player 1 : plays 2 nines, then all others players must play two cards until this pile is over.

The next player must play a higher ranked combination with the same number of cards or pass and wait until their next turn.

If all players except a single player pass consecutively, remove cards on the table and the player who played last starts a new play.

If a player played their last card, and no other player can play (or pass even if they can play), the next player available clockwise will start next pile.

=== End of the round ===

The game will continue until there is a single player left with at least a card in their hand.

The roles in the next round are:
*''President'': The first player to get rid of all of their cards
*''Minister'': The second player to get rid of all of their cards
*''Peasant'': The second to last player to get rid of all of their cards
*''Beggar'': The last player to get rid of all of their cards
*''Citizen(s)'': Any other players are considered neutral

Before next round starts :
*The ''Beggar'' must give their two highest cards to the ''President'' and the ''President'' must give back 2 cards of their choice to the ''Beggar'' at the same time.
*The ''Peasant'' must give their highest card to the ''Minister'' and the ''Minister'' must give back 1 card of their choice to the ''Peasant'' at the same time.
*''Citizen(s)'' do not exchange cards.

The ''Beggar'' will be the first player to start the next round.

=== Revolution ===

When a player plays four or more cards, the hierarchy of all the cards is reversed during the same round. The Joker is unaffected by the revolution.

For example, after the first revolution of a round, the order of power is (lowest to highest): 2, A, K, Q, J, 10, 9, 8, 7, 6, 5, 4, 3, Joker.

If another revolution is played, the order would switch back to normal.

=== Skip ===

When a player plays the same number of cards of the same rank as the previous player, that skips the next person who would have played.

For example, playing a 7 on top of another 7, or a pair of 4s on another pair of 4s, the next player is skipped.

The Joker played alone cannot be skipped.

=== Illegal Finish ===

A player went out by playing 2 when card ranks are normal, 3 when card ranks are reversed, 8 when Ender 8 option is active, or the Joker (even as a wild card), is disqualified and is ranked the lowest.

If several players are disqualified by this rule in the same round, the player who went out later is ranked higher.

Playing illegal finish cards just before the last play is not forbidden.

For example, when a player with Joker and a 4 has the lead, the player can play the Joker to win the trick immediately and then play a 4 and go out legally.

=== Downfall ===

When the President (or the Minister in 3-player) fails to get the first place, that player is automatically eliminated from the round and ranked last unless someone else is disqualified by illegal finish.

== Points ==

For each round, each player receives the points equal to the number of players they beat.

The game ends when a player reaches the target score written in the player panel.

== Variant rules ==

The following additional variants are supported on BGA (as of 2025-01-13).

=== Scoring rule and Game length ===
The game length option works a little differently depending on whether positive scoring or negative scoring is used.
{| class="wikitable"
|+
!
! colspan="3" |'''Game length'''
|-
!'''Scoring rule'''
|'''Short'''
|'''Medium'''
|'''Long'''
|-
|'''Positive scoring''': Each player scores points equal to the number of players they have beaten in the round. The game ends when someone reaches the target score. The target score depends on the game length:
|2x player count
|3x player count
|4x player count
|-
|'''Negative scoring''': President gains 1 point bonus, each Citizen loses 1 point, Peasant loses 2 points, and Beggar loses 3 points. The game ends when someone drops to 0 points or below. The starting points depend on the game length:
|10 starting points
|15 starting points
|20 starting points
|}

=== Rule set ===

* '''Moderate variant''': Revolution, Joker, Skip, Illegal finish, Downfall
* '''Full variant''': All card-related variants and Downfall.
* '''No variant''': Removes all variants.
* '''Custom''': Table creator can customize variant options.

=== First player ===
Determines whether the highest player (president) or lowest player (beggar) will be the first player to start the next round.

=== Automatic turn skip ===
The game checks only public information to determine whether a player has any chance of beating the current combination regardless of the cards in hand. If all relevant higher cards are discarded already, the turn is skipped automatically.

=== Same suit sequence ===
Three or more cards of consecutive rank and the same suit can be played as a valid combination. If applicable, all special effects of cards in the combination are applied.

=== Suit lock ===
If a player plays a combination of the same suit as the previous play, all further plays during the same trick must be the same suit combination. The Joker cannot activate a suit lock, but can be used as the required suit during a locked trick.

=== Ender 8 ===
Playing one or more 8s ends the trick immediately.

=== Reversing 9 ===
Playing one or more 9s reverses the turn order permanently.

=== Jack back ===
Playing one or more Jacks reverses card ranks or cancels the rank reversal during the same trick.

=== Permanent pass ===
A player passed their turn is completely out of the trick and cannot play cards again during that trick.

=== Unskippable 2/3 ===
- 2s (or 3s when Revolution is in effect) cannot be beaten by the same rank.

BGA Studio Cookbook

2025-03-29T03:01:35Z

Ufm: /* Assigning Player Order */

This page is a cookbook of design and implementation recipes for BGA Studio framework.
For tooling and usage recipes see [[Tools and tips of BGA Studio]].
If you have your own recipes feel free to edit this page.

__TOC__

== Visual Effects, Layout and Animation ==

=== DOM manipulatons ===

==== Create pieces dynamically (using template) ====

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Note: this method is recommended by BGA guildlines

Declared js template with variables in .tpl file, like this
<pre>
<script type="text/javascript">
// Javascript HTML templates
var jstpl_ipiece = '<div class="${type} ${type}_${color} inlineblock" aria-label="${name}" title="${name}"></div>';
</script>
</pre>

Use it like this in .js file
div = this.format_block('jstpl_ipiece', {
type : 'meeple',
color : 'ff0000',
name : 'Bob',
});

Then you do whatever you need to do with that div, this one specifically design to go to log entries, because it has embedded title (otherwise its a picture only) and no id.

Note: you could have place this variable in js itself, but keeping it in .tpl allows you to have your js code be free of HTML. Normally it never happens but
it is good to strive for it.
Note: you can also use string concatenation, its less readable. You can also use dojo dom object creation api's but its brutally verbose and its more unreadable.

==== Create pieces dynamically (using string concatenation) ====

'''Ingredients:''' ggg.js

<pre>
div = "<div class='meeple_"+color+"'></div>";
</pre>

or modern way

<pre>
div = `<div class='meeple_${color}'></div>`;
</pre>

==== Create all pieces statically ====

'''Ingredients:''' ggg_ggg.tpl, ggg.css, ggg.view.php (optional)

* Create ALL game pieces in html template (.tpl)
* ALL pieces should have unique id, and it should be meaningful, i.e. meeple_red_1
* Do not use inline styling
* Id of player's specific pieces should use some sort of 'color' identification, since player id cannot be used in static layout, you can use english color name, hex 6 char value, or color "number" (1,2,3...)
* Pieces should have separated class for its color, type, etc, so it can be easily styled in groups. In example below you now can style all meeples, all red meeples or all red tokens, or all "first" meeples

ggg.tpl:
<pre>
<div id="home_red" class="home_red home">
<div id="meeple_red_1" class="meeple red n1"></div>
<div id="meeple_red_2" class="meeple red n2"></div>
</div>
</pre>

ggg.css:

<pre>
.meeple {
width: 32px;
height: 39px;
background-image: url(img/78_64_stand_meeples.png);
background-size: 352px;
}

.meeple.red {
background-position: 30% 0%;
}
</pre>

* There should be straight forward mapping between server id and js id (or 1:1)
* You place objects in different zones of the layout, and setup css to take care of layout

<pre>
.home .meeple{
display: inline-block;
}
</pre>
* If you need to have a temporary object that look like original you can use dojo.clone (and change id to some temp id)
* If there is lots of repetition or zone grid you can use template generator, but inject style declaration in css instead of inline style for flexibility

Note:
* If you use this model you cannot use premade js components such as Stock and Zone
* You have to use alternative methods of animation (slightly altered) since default method will leave object with inline style attributes which you don't need

==== Use player color in template ====

NOTE: view.php is deprecated, its best to generate html from .js

'''Ingredients:''' ggg_ggg.tpl, ggg.view.php

.view.php:
<pre>
function build_page($viewArgs) {
// Get players & players number
$players = $this->game->loadPlayersBasicInfos();
$players_nbr = count($players);
/**
* ********* Place your code below: ***********
*/

// Set PCOLOR to the current player color hex
global $g_user;
$cplayer = $g_user->get_id();
if (array_key_exists($cplayer, $players)) { // may be not set if spectator
$player_color = $players [$cplayer] ['player_color'];
} else {
$player_color = 'ffffff'; // spectator
}
$this->tpl ['PCOLOR'] = $player_color;
</pre>

=== Status bar ===

==== Changing state prompt ====

State prompt is message displayed for player which usually comes from state description.
Sometimes you want to change it without changing state (one way is change state but locally, see client states above).

Simple way just change the html
<pre>
setMainTitle: function(text) {
$('pagemaintitletext').innerHTML = text;
},
// usage
onMeeple: function(event) {
//...
this.setMainTitle(_('You must select where meeple is going'));
},
</pre>

This however will not work with parameters and will not draw You in color, if you want this its more sophisticated:

<pre>
setDescriptionOnMyTurn : function(text) {
this.gamedatas.gamestate.descriptionmyturn = text;
var tpl = dojo.clone(this.gamedatas.gamestate.args);
if (tpl === null) {
tpl = {};
}
var title = "";
if (this.isCurrentPlayerActive() && text !== null) {
tpl.you = this.divYou();
}
title = this.format_string_recursive(text, tpl);

if (!title) {
this.setMainTitle(" ");
} else {
this.setMainTitle(title);
}
},
</pre>

Note: this method uses '''setMainTitle''' defined above and '''divYou''' defined in another section of this wiki.

=== Animation ===

==== Attach to new parent without destroying the object ====

BGA function attachToNewParent for some reason destroys the original, if you want similar function that does not you can use this
ggg.js

<pre>
/**
* This method will attach mobile to a new_parent without destroying, unlike original attachToNewParent which destroys mobile and
* all its connectors (onClick, etc)
*/
attachToNewParentNoDestroy: function (mobile_in, new_parent_in, relation, place_position) {

const mobile = $(mobile_in);
const new_parent = $(new_parent_in);

var src = dojo.position(mobile);
if (place_position)
mobile.style.position = place_position;
dojo.place(mobile, new_parent, relation);
mobile.offsetTop;//force re-flow
var tgt = dojo.position(mobile);
var box = dojo.marginBox(mobile);
var cbox = dojo.contentBox(mobile);
var left = box.l + src.x - tgt.x;
var top = box.t + src.y - tgt.y;

mobile.style.position = "absolute";
mobile.style.left = left + "px";
mobile.style.top = top + "px";
box.l += box.w - cbox.w;
box.t += box.h - cbox.h;
mobile.offsetTop;//force re-flow
return box;
},
</pre>

==== Animation on oversurface ====
If you use non-absolute position for your game elements (i.e you use layouts) - you cannot really use BGA animation functions. After years of fidding with different options I use
techique which I call animation on oversurface that works when parents use different zoom, rotation, etc

* You need another layer on top of everything - oversurface
* We create copy of the object on oversurface - to move
* We move the real object on final position - but make it invisible for now
* We move the phantom to final position applying required zoom and rotation (using css animation), then destroy it
* When animation is done we make original object visible in new position

The code is bit complex it can be found here

https://codepen.io/VictoriaLa/pen/gORvdJo

Game using it: century, ultimaterailroads

==== Scroll element into view ====
Ingredients: game.js

This function will scroll given node (div) into view and respect replays and archive mode

<pre>
scrollIntoViewAfter: function (node, delay) {
if (this.instantaneousMode || this.inSetup) {
return;
}
if (typeof g_replayFrom != "undefined") {
$(node).scrollIntoView();
return;
}
if (!delay) delay = 0;
setTimeout(() => {
$(node).scrollIntoView({ behavior: "smooth", block: "center" });
}, delay);
},
</pre>

=== Logs ===

==== Inject icon images in the log ====

Here is an example of what was done for Terra Mystica which is simple and straightforward:

<pre>
//Define the proper message
$message = clienttranslate('${player_name} gets ${power_income} via Structures');
if ($price > 0) {
$this->DbQuery("UPDATE player SET player_score = player_score - $price WHERE player_id = $player_id");
$message = clienttranslate('${player_name} pays ${vp_price} and gets ${power_income} via Structures');
}

// Notify
$this->notify->all( "powerViaStructures", $message, array(
'i18n' => array( ),
'player_id' => $player_id,
'player_name' => $this->getUniqueValueFromDb( "SELECT player_name FROM player WHERE player_id = $player_id" ),
'power_tokens' => $power_tokens,
'vp_price' => $this->getLogsVPAmount($price),
'power_income' => $this->getLogsPowerAmount($power_income),
'newScore' => $this->getUniqueValueFromDb( "SELECT player_score FROM player WHERE player_id = $player_id" ),
'counters' => $this->getGameCounters(null),
) );
</pre>

With some functions to have the needed html added inside the substitution variable, such as:

<pre>
function getLogsPowerAmount( $amount ) {
return "<div class='tmlogs_icon' title='Power'><div class='power_amount'>$amount</div></div>";
}
</pre>
Note: injecting html from php is not ideal but easy, if you want more clean solution, use method below but it is a lot more sophisticated.

==== Inject images and styled html in the log ====

{{InfoBox|title=Warning — Translation|maxWidth=500|color=#c00|body='''In order to prevent interference with the translation process, keep in mind that you must only apply modifications to the args object, and not try to substitute the keys (the <code>${player_name}</code> parts of your string) in the log string.'''}}

So you want nice pictures in the game log. What do you do? The first idea that comes to mind is to send html from php in notifications (see method above).

This is a bad idea for many reasons:

* It's bad architecture. ui elements leak into the server, and now you have to manage the ui in multiple places.
* If you decided to change something in the ui in future version, replay logs for old games and tutorials may not work, since they use stored notifications.
* Log previews for old games become unreadable. (This is the log state before you enter the game replay, which is useful for troubleshooting and game analysis.)
* It's more data to transfer and store in the db.
* It's a nightmare for translators.

So what else can you do? You can use client side log injection to intercept log arguments (which come from the server) and replace them with html on the client side. Here are three different method you can use to achieve this.

===== Override <code>this.format_string_recursive()</code> method =====

'''Ingredients:''' ggg.js, ggg.game.php

I use this recipe for '''client side log injection''' to intercept log arguments (which come from the server) and replace them with html on the client side.

[[File:clientloginjection.png|left]]

ggg.js

<pre>

/** Override this function to inject html into log items. This is a built-in BGA method. */

/* @Override */
format_string_recursive : function format_string_recursive(log, args) {
try {
if (log && args && !args.processed) {
args.processed = true;

// list of special keys we want to replace with images
var keys = ['place_name','token_name'];

for ( var i in keys) {
var key = keys[i];
key in args && args[key] = this.getTokenDiv(key, args);

}
}
} catch (e) {
console.error(log,args,"Exception thrown", e.stack);
}
return this.inherited({callee: format_string_recursive}, arguments);
},
</pre>

'''Important:''' In the ''format_string_recursive'' method, the 'args' parameter will only contain arguments passed to it from the notify method in ggg.game.php (see below).

The 'log' parameter is the actual string that is inserted into the logs. You can perform additional js string manipulation on it.

<pre>
getTokenDiv : function(key, args) {
// ... implement whatever html you want here, example from sharedcode.js
var token_id = args[key];
var item_type = getPart(token_id,0);
var logid = "log" + (this.globalid++) + "_" + token_id;
switch (item_type) {
case 'wcube':
var tokenDiv = this.format_block('jstpl_resource_log', {
"id" : logid,
"type" : "wcube",
"color" : getPart(token_id,1),
});
return tokenDiv;

case 'meeple':
if ($(token_id)) {
var clone = dojo.clone($(token_id));

dojo.attr(clone, "id", logid);
this.stripPosition(clone);
dojo.addClass(clone, "logitem");
return clone.outerHTML;
}
break;

default:
break;
}

return "'" + this.clienttranslate_string(this.getTokenName(token_id)) + "'";
},
getTokenName : function(key) {
return this.gamedatas.token_types[key].name; // get name for the key, from static table for example
},
</pre>

Note that in this case the server simply injects token_id as a name, and the client substitutes it for the translated name or the picture.

ggg.game.php:

$this->notify->all('playerLog', clienttranslate('Game moves ${token_name}'), ['token_name'=>$token_id]);

'''Important:''' As noted above, only arguments actually passed by this method are available to the args parameter received in the client-side ''format_string_recursive'' method.

Sometimes it is the case that you want to pass arguments that are not actually included in the output message. For example, suppose we have a method like this:

$this->notify->all('tokenPlaced', clienttranslate('Player placed ${token_name}'), array(
'token_name' => $token_id,
'zone_played' => $zone);

This will output "Player placed ${token_name}" in the log, and if we subscribe to a notification method activated by the "tokenPlaced" event in the client-side code, that method can make use of the 'zone_played' argument.

Now if you want to make some really cool things with game log, most probably you would need more arguments than are included in log message. The problem with that,
it will work at first, but if you reload game using F5 or when the game loads in turn based mode, you will loose your additional parameters, why? Because when game reloads it does not actually send same notifications, it sends special "hitstorical_log" notification where all parameters not listed in the message are removed. In example above, field zone_played would be removed from historical log as it is not included in message of the notification. You can till preserve specific arguments in historical log by adding special field preserve to notification arguments like this:

<pre>
$this->notify->all('tokenPlaced', clienttranslate('Player placed ${token_name}'), array(
'token_name' => $token_id,
'zone_played' => $zone,
'preserve' => [ 'zone_played' ]
);
</pre>

Now you can use zone_played in format_string_recursive even in historical logs.

===== Use <code>:formatFunction</code> option provided by <code>dojo.string.substitute</code> =====

'''Ingredients:''' ggg.js, ggg.game.php, ggg_ggg.tpl, ggg.css

The above method will work in most of the cases, but if you use dotted keys such as <code>${card.name}</code> (which is supported by the framework, for private state args), the key won't be substituted because the <code>key in arg</code> test will fail. If so you need to rely either on this way, or the one after.

'''WARNING:''' using this method on an already advanced project will require you to go through all your notifications to change keys !

Under the hood, the '''this.format_string_recursive()''' function calls the '''dojo.string.substitute''' method which substitutes <code>${keys}</code> with the value provided. If you take a look at the [https://dojotoolkit.org/reference-guide/1.7/dojo/string.html#substitute documentation] and [https://github.com/dojo/dojo/blob/c3ceb017cfa25b703f5662dc83d1c8aae9bc5d81/string.js#L163 source code] you can notice that the key can be suffixed with a colon (<code>:</code>) followed by a function name. This will allow you to specify directly in the substitution string which keys need HTML injection.

First of all, you need to define your formatting function in the ggg.js file:
<pre>
[[ggg.js]]
getTokenDiv : function(value, key) {
//This is only an example implementation, you need to write your own.
//The method should return HTML code
switch (key) {
case 'html_injected_argument1':
return this.format_block('jstpl_HTMLLogElement1',{value: value});
case 'html_injected_argument2':
return this.format_block('jstpl_HTMLLogElement2',{value: value});
...
}
}
</pre>

Obviously you need to define the appropriate templates in the ggg_ggg.tpl file:
<pre>
[[ggg_ggg.tpl]]
let jstpl_HTMLLogElement1 = '<div class="log-element log-element-1-${value}"></div>';
let jstpl_HTMLLogElement2 = '<div class="log-element log-element-2-${value}"></div>';
...
</pre>
And the appropriate classes in ggg.css.

Then you need to add the <code>dojo/aspect</code> module at the top of the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
define([
"dojo", "dojo/_base/declare",
'''<span style="color:green;">"dojo/aspect",</span> //MUST BE IN THIRD POSITION''' (see [[#Including your own JavaScript module (II)|below]])
"ebg/core/gamegui",
"ebg/counter",
], function (dojo, declare, <span style="color:green;">'''aspect'''</span>) {
...

And you also need to add the following code in your <code>contructor</code> method in the ggg.js:

<nowiki>[[ggg.js]]</nowiki>
constructor: function(){

// ... skipped code ...
let gameObject = this; //Needed as the this object in aspect.before will not refer to the game object in which the formatting function resides
aspect.before(dojo.string, "substitute", function(template, map, transform) { //This allows you to modify the arguments of the dojo.string.substitute method before they're actually passed to it
return [template, map, transform, gameObject];
});

Now you're all set to inject HTML in your logs. To actually achieve this, you must specify the function name with the key like so:

<nowiki>[[ggg.game.php]]</nowiki>
$this->notify->all("notificationName", clienttranslate("This log message contains ${plainTextArgument} and the following will receive HTML injection: ${html_injected_argument1:getTokenDiv}"), [
"plainTextArgument" => "some plain text here",
"html_injected_argument1" => "some value used by getTokenDiv",
]);

You're not limited writing only one function, you can write as many functions as you like, and have them each inject a specific type of HTML. You just need to specify the relevant function name after the column in the substitution key.

===== Use <code>transform</code> argument of <code>dojo.string.substitute</code> =====

'''Ingredients:''' ggg.js, ggg.game.php, ggg_ggg.tpl, ggg.css

This method is also relying on the use of <code>dojo.string.substitute</code> by the framework, and will use the <code>transform</code> argument, which, accordting to [https://github.com/dojo/dojo/blob/c3ceb017cfa25b703f5662dc83d1c8aae9bc5d81/string.js#L163 source code] and [https://dojotoolkit.org/reference-guide/1.7/dojo/string.html#substitute documentation] will be run on all the messages going through dojo.string.substitute.

'''WARNING:''' This method will be applied to all strings that go through dojo.string.substitute. As such you must take extra care not to substitute keys that may be used by the framework (i.e. ${id}). In order to do so, a good practise would be to prefix all keys that need substitution with a trigram of the game name.

Since all the keys will be fed to the tranform function, by default, it must return the value, substituted or not per your needs. You can define the function like this in the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
getTokenDiv : function(value, key) {
//This is only an example implementation, you need to write your own.
//The method should return HTML code
switch (key) {
case 'html_injected_argument1':
return this.format_block('jstpl_HTMLLogElement1',{value: value});
case 'html_injected_argument2':
return this.format_block('jstpl_HTMLLogElement2',{value: value});
...
default:
return value; //Needed otherwise regular strings won't appear since since the value isn't returned by the function
}
}

The templates must be defined in the ggg_ggg.tpl file and the corresponding CSS classes in the ggg.css file.

You need to add the following code at the beginning of the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
define([
"dojo", "dojo/_base/declare",
'''<span style="color:green;">"dojo/aspect",</span> //MUST BE IN THIRD POSITION''' (see [[#Including your own JavaScript module (II)|below]])
"ebg/core/gamegui",
"ebg/counter",
], function (dojo, declare, <span style="color:green;">'''aspect'''</span>) {
...

And the following code to the <code>constructor</code> method in ggg.js:

<nowiki>[[ggg.js]]</nowiki>
constructor: function(){
// ... skipped code ...
let transformFunction = dojo.hitch(this, "getTokenDiv"); //Needed as the this object in aspect.before will not refer to the game object in which the formatting function resides
aspect.before(dojo.string, "substitute", function(template, map, transform) {
if (undefined === transform) { //Check for a transform function presence, just in case
return [template, map, transformFunction];
}
});

Then you're all set for log injection, no need to change anything on the PHP side.

==== Processing logs on re-loading ====

You rarely need to process logs when reloading, but if you want to do something fancy you may have to do it after logs are loaded.
Logs are loaded asyncronously so you have to listen for logs to be fully loaded.
Unfortunately there is no direct way of doing it so this is the hack.

'''Hack alert''' - this extends undocumented function and may be broken when framework is updated

'''Ingredients:''' ggg.js

<pre>
/*
* [Undocumented] Override BGA framework functions to call onLoadingLogsComplete when loading is done
@Override
*/
setLoader: function(image_progress, logs_progress) {
this.inherited(arguments); // required, this is "super()" call, do not remove
//console.log("loader", image_progress, logs_progress)
if (!this.isLoadingLogsComplete && logs_progress >= 100) {
this.isLoadingLogsComplete = true; // this is to prevent from calling this more then once
this.onLoadingLogsComplete();
}
},

onLoadingLogsComplete: function() {
console.log('Loading logs complete');
// do something here
},
</pre>

=== Player Panel ===

==== Inserting non-player panel ====

'''Ingredients:''' ggg.js, ggg_ggg.tpl

If you want to insert non-player panel on the right side (for example to hold extra preferences, zooming controls, etc)

this can go pretty much anywhere in template it will be moved later

ggg_ggg.tpl:
<pre>
<div class='player_board_config' id="player_board_config">

<button id="zoom-out" class=" fa fa-search-minus fa-2x config-control"></button>
<button id="zoom-in" class=" fa fa-search-plus fa-2x config-control"></button>
<button id="show-settings" class="fa fa-cog fa-2x config-control "></button>
</div>
</pre>

some hackery required in js

ggg.js:
<pre>
/* @Override */
updatePlayerOrdering() {
this.inherited(arguments);
dojo.place('player_board_config', 'player_boards', 'first');
},
</pre>

=== Images and Icons ===

==== Accessing images from js ====

'''Ingredients:''' ggg.js

<pre>
// your game resources

var my_img = '<img src="'+g_gamethemeurl+'img/cards.jpg"/>';

// shared resources
var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +
text + "</span>";
</pre>

==== High-Definition Graphics ====

Some users will have screens which can display text and images at a greater resolution than the usual 72 dpi, e.g. the "Retina" screens on the 5k iMac, all iPads, and high-DPI screens on laptops from many manufacturers. If you can get art assets at this size, they will make your game look extra beautiful. You ''could'' just use large graphics and scale them down, but that would increase the download time and bandwidth for users who can't display them. Instead, a good way is to prepare a separate graphics file at exactly twice the size you would use otherwise, and add "@2x" at the end of the filename, e.g. if pieces.png is 240x320, then pieces@2x.png is 480x640.

There are two changes required in order to use the separate graphics files. First in your css, where you use a file, add a media query which overrides the original definition and uses the bigger version on devices which can display them. Ensuring that the "background-size" attribute is set means that the size of the displayed object doesn't change, but only is drawn at the improved dot pitch.
<pre>
.piece {
position: absolute;
background-image: url('img/pieces.png');
background-size:240px 320px;
z-index: 10;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
.piece {
background-image: url('img/pieces@2x.png');
}
}
</pre>

Secondly, in your setup function in javascript, you must ensure than only the appropriate one version of the file gets pre-loaded (otherwise you more than waste the bandwidth saved by maintaining the standard-resolution file). Note that the media query is the same in both cases:
<pre>
var isRetina = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
if (window.matchMedia(isRetina).matches)
{
this.dontPreloadImage( 'pieces.png' );
this.dontPreloadImage( 'board.jpg' );
}
else
{
this.dontPreloadImage( 'pieces@2x.png' );
this.dontPreloadImage( 'board@2x.jpg' );
}
</pre>

==== Using CSS to create different colors of game pieces if you have only white piece ====

<pre>
background-color: #${color};
background-blend-mode: multiply;
background-image: url( 'img/mypiece.png');
mask: url('img/mypiece.png');
-webkit-mask: url('img/mypiece.png');
</pre>

where ${color} - is color you want

Note: piece has to be white (shades of gray). Sprite can be used too, just add add background-position as usual.

==== Accessing player avatar URLs ====

<pre>
getPlayerAvatar(playerId) {
let avatarURL = '';

if (null != $('avatar_' + playerId)) {
let smallAvatarURL = dojo.attr('avatar_' + playerId, 'src');
avatarURL = smallAvatarURL.replace('_32.', '_184.');
}
else {
avatarURL = 'https://x.boardgamearena.net/data/data/avatar/default_184.jpg';
}

return avatarURL;
},
</pre>

Note: This gets avatar URLs at 184x184 resolution. You can also use 92, 50, and 32 depending on which resolution you want.

==== Adding Image buttons ====

Its pretty trivial but just in case you need a working function:

ggg.js:
<pre>
addImageActionButton: function (id, div_html, handler) { // div_html is string not node
this.addActionButton(id, div_html, handler, '', false, 'gray');
dojo.style(id, "border", "none"); // remove ugly border
dojo.addClass(id, "bgaimagebutton"); // add css class to do more styling
return $(id); // return node for chaining
},

</pre>
Example of usage:
<pre>
this.addImageActionButton('button_coin',"<div class='coin'></div>", ()=>{ alert('Ha!'); });
</pre>

=== Other Fluff ===

==== Use thematic fonts ====

'''Ingredients:''' ggg.css

Sometime game elements use specific fonts of text, if you want to match it up you can load some specific font (IMPORTANT: from some '''free font''' source. See notes below).

[[File:Dragonline_font.png]]

.css
<pre>
/* latin-ext */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: 400;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/2Dy1Unur1HJoklbsg4iPJ_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: normal;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/gThgNuQB0o5ITpgpLi4Zpw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: normal;
src: local('Qwigley'), local('Qwigley-Regular'), url(http://ff.static.1001fonts.net/q/w/qwigley.regular.ttf) format('ttf');
}

.zone_title {
display: inline-block;
position: absolute;
font: italic 32px/32px "Qwigley", cursive;
height: 32px;
width: auto;
}
</pre>

'''NB:''' if you need to include a font that's not available online, an extra action will be needed from an admin. Please include the font file(s) in your img directory, and mention it to admins when requesting your game to be moved to alpha. '''Please remember that the font has to be free, and include a .txt with all appropriate license information about the font.'''
You can look for free fonts (for example) on https://fonts.google.com or https://www.fontsquirrel.com/)

'''Content Security Policy'''

BGA runs a Content Security Policy which will limit the origins from which you can load external fonts, in order to prevent license abuse.

The CSP is a whitelist of allowed origins. To see the list, view the response headers of any page on Studio, and look for the "Content-Security-Policy" header.

You will specifically want to check for the font-src token within these headers, and limit any external fonts to these sources.

'''This list is subject to change''' but as of the time of writing, the only acceptabled external sites are use.typekit.net and fonts.gstatic.com.

=== Scale to fit for big boards ===

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Lets say you have huge game board, and lets say you want it to be 1400px wide. Besides the board there will be side bar which is 240 and trim.
My display is 1920 wide so it fits, but there is big chance other people won't have that width. What do you do?

You have to decide:
* If board does not fit you want scale whole thing down, the best way is probably use viewport (see https://en.doc.boardgamearena.com/Your_game_mobile_version)
* You can leave the board as is and make sure it is scrollable horizonatally
* You add custom scale just for the board (can add user controls - and hook to transform: scale())

I tried to auto-scale but this just does work, too many variables - browser zoom, 3d mode, viewport, custom bga scaling, devicePixelRatio - all create some impossible coctail of zooming...
Here is scaling functing for custom user scaling

ggg_ggg.tpl:
<pre>
<div id="thething" class="thething">
... everything else you declare ...
</div>
</pre>

ggg.js:
<pre>
onZoomPlus: function() {
this.setZoom(this.zoom + 0.1);
},
onZoomMinus: function() {
this.setZoom(this.zoom - 0.1);
},

setZoom: function (zoom) {
zoom = parseInt(zoom) || 0;
if (zoom === 0 || zoom < 0.1 || zoom > 10) {
zoom = 1;
}
this.zoom = zoom;
var inner = document.getElementById("thething");

if (zoom == 1) {
inner.style.removeProperty("transform");
inner.style.removeProperty("width");
} else {
inner.style.transform = "scale(" + zoom + ")";
inner.style.transformOrigin = "0 0";
inner.style.width = 100 / zoom + "%";
}
localStorage.setItem(`${this.game_name}_zoom`, "" + this.zoom);
this.onScreenWidthChange();
},
</pre>

=== Dynamic tooltips ===

If you really need a dynamic tooltip you can use this technique. (Only use it if the static tooltips provided by the BGA framework are not sufficient.)

new dijit.Tooltip({
connectId: ["divItemId"],
getContent: function(matchedNode){
return "... calculated ...";
}
});

This is an out-of-the-box djit.Tooltip. It has a ''getContent'' method which is called dynamically.

The string returned by getContent() becomes the innerHTML of the tooltip, so it can be anything. In this example matchedNode is a dojo node representing dom object with id of "divItemId" but there are more parameters which I am not posting here which allows more sophisticated subnode queries (i.e. you can attach tooltip to all nodes with class or whatever).

[https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip.html dijit.Tooltip]

It's not part of the BGA API so use at your own risk.

=== Rendering text with players color and proper background ===

'''Ingredients:''' ggg.js

<pre>
/* Implementation of proper colored You with background in case of white or light colors */

divYou: function() {
var color = this.gamedatas.players[this.player_id].color;
var color_bg = "";
if (this.gamedatas.players[this.player_id] && this.gamedatas.players[this.player_id].color_back) {
color_bg = "background-color:#" + this.gamedatas.players[this.player_id].color_back + ";";
}
var you = "<span style=\"font-weight:bold;color:#" + color + ";" + color_bg + "\">" + __("lang_mainsite", "You") + "</span>";
return you;
},

/* Implementation of proper colored player name with background in case of white or light colors */

divColoredPlayer: function(player_id) {
var color = this.gamedatas.players[player_id].color;
var color_bg = "";
if (this.gamedatas.players[player_id] && this.gamedatas.players[player_id].color_back) {
color_bg = "background-color:#" + this.gamedatas.players[player_id].color_back + ";";
}
var div = "<span style=\"color:#" + color + ";" + color_bg + "\">" + this.gamedatas.players[player_id].name + "</span>";
return div;
},
</pre>

=== Cool realistic shadow effect with CSS ===

==== Rectangles and circles ====

It is often nice to have a drop shadow around tiles and tokens, to separate them from the table visually. It is very easy to add a shadow to rectangular elements, just add this to your css:

<pre>
.xxx-tile {
box-shadow: 3px 3px 3px #000000a0;
}
</pre>

box-shadow obeys '''border-radius''' of the element, so it will look good for rounded rectangles, and hence also circles (if border-radius is set appropriately).

box-shadow also supports various other parameters and can be used to achieve effects such as glowing, borders, inner shadows etc. If you need to animate a box-shadow, you may be able to get better performance (avoiding redraws) if you attach the shadow to another element (possibly an ::after pseudo-element) and change only the '''opacity''' of that element.

==== Irregular Shapes ====

If you wish to make a shadow effect for game pieces that are not a rectangle, but your game pieces are drawn from rectangles in a PNG image, you can apply the shadow to the piece using any art package and save it inside the image. This usually will yield the best performance. Remember to account for the size of the shadow when you lay out images in the sprite sheet.

However that sometimes will not be an option, for example if the image needs to be rotated while the shadow remains offset in the same direction. In this case, one option is to not use box-shadow but use filter, which is supported by recent major browsers. This way, you can use the alpha channel of your element to drop a shadow. This even work for transparent backgrounds, so that if you are using the "CSS-sprite" method, it will work!

For instance:

<pre>
.xxx-token {
filter: drop-shadow(0px 0px 1px #000000);
}
</pre>

Beware that some browsers still do not always draw drop-shadow correctly. In particular, Safari frequently leaves bits of shadow behind when objects move around the screen. In Chrome, shadows sometimes flicker badly if another element is animating close by. Some of these correctness issues can be solved by adding '''isolation: isolate; will-change: filter;''' to affected elements, but this significantly affects redraw performance.

Beware of performance issues - particularly on Safari (MacOS, iPhone and iPad). Keep in mind that drop-shadow are very GPU intensive. This becomes noticeable once you have about 40 components with drop-shadow filter. If that is your case, you can quite easily implement a user preference to disable shadows for users on slower machines:

gameoptions.inc.php
<pre>
100 => array(
'name' => totranslate('Shadows'),
'needReload' => true, // after user changes this preference game interface would auto-reload
'values' => array(
1 => array( 'name' => totranslate( 'Enabled' ), 'cssPref' => '' ),
2 => array( 'name' => totranslate( 'Disabled' ), 'cssPref' => 'no-shadow' )
)
),
</pre>

[game].css
<pre>
.no-shadow * {
filter: none !important;
}
</pre>For Safari, it is usually better to simply disable drop-shadow completely: [[Game interface stylesheet: yourgamename.css#Warning: using drop-shadow]].

==== Shadows with clip-path ====

For some reason, a shadow will not work together with clip-path on one element. To use both clip-path (when for example using .svg to cut out cardboard components from your .jpg spritesheet) and drop-shadow, you need to wrap the element into another one, and apply drop-shadow to the outer one, and clip-path to the inner one.

<pre>
<div class='my-token-wrap'>
<div class='my-token'>
</div>
</div>
</pre>
<pre>
.my-token-wrap {
filter: drop-shadow(0px 0px 1px #000000);
}
.my-token-wrap .my-token {
clip-path: url(#my-token-path);
}
</pre>

=== Using the CSS classes from the state machine ===

If you need to hide or show stuff depending on the state of your game, you can of course use javascript, but CSS is hand enough for that. The #overall-content element does change class depending on the game state. For instance, if you are in state ''playerTurn'', it will have the class ''gamestate_playerTurn''.

So now, if you want to show the discard pile only during player turns, you may use:

<pre>
#discard_pile { display: none }
.gamestate_playerTurn #discard_pile { display: block }
</pre>

This can be used if you want to change sizing of elements, position, layout or visual appearance.

== Game Model and Database design ==

=== Database for The euro game ===
Lets say we have a game with workers, dice, tokens, board, resources, money and vp. Workers and dice can be placed in various zones on the board, and you can get resources, money, tokens and vp in your home zone. Also tokens can be flipped or not flipped.

[[File:Madeira board.png]]

Now lets try to map it, we have
* (meeple,zone)
* (die, zone, sideup)
* (resource cube/money token/vp token,player home zone)
* (token, player home zone, flip state)
We can notice that resource and money are uncountable, and don't need to be track individually so we can replace our mapping to
* (resource type/money,player home zone, count)
And vp stored already for us in player table, so we can remove it from that list.

Now when we get to encode it we can see that everything can be encoded as (object,zone,state) form, where object and zone is string and state is integer. The resource mapping is slightly different semantically so you can go with two table, or counting using same table with state been used as count for resources.

So the piece mapping for non-grid based games can be in most case represented by (string: token_key, string: token_location, int: token_state), example of such database schema can be found here: [https://github.com/elaskavaia/bga-sharedcode/blob/master/dbmodel.sql dbmodel.sql] and class implementing access to it here [https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php table.game.php].

Variant 1: Minimalistic

CREATE TABLE IF NOT EXISTS `token` (
`token_key` varchar(32) NOT NULL,
`token_location` varchar(32) NOT NULL,
`token_state` int(10),
PRIMARY KEY (`token_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|meeple_red_1
|home_red
|0
|-
|dice_black_2
|board_guard
|1
|-
|dice_green_1
|board_action_mayor
|3
|-
|bread
|home_red
|5
|}

Now how we represent resource counters such as bread?
Using same table from we simply add special counter token for bread and use state to indicate the count. Note to keep first column unique we have to add player identification for that counter, i.e. ff0000 is red player.

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|bread_ff0000
|tableau_ff0000
|5
|}

See php module for this table here https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php

Variant 2: Additional resource table, resource count for each player id

CREATE TABLE IF NOT EXISTS `resource` (
`player_id` int(10) unsigned NOT NULL,
`resource_key` varchar(32) NOT NULL,
`resource_count` int(10) signed NOT NULL,
PRIMARY KEY (`player_id`,`resource_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE resource ADD CONSTRAINT fk_player_id FOREIGN KEY (player_id) REFERENCES player(player_id);

{| class="wikitable"
|+resource
! player_id
! resource_key
! resource_count
|-
|123456
|bread
|5
|}

Variant 3: More normalised

This version is similar to "card" table from hearts tutorial, you can also use exact cards database schema and Deck implementation for most purposes (even you not dealing with cards).

CREATE TABLE IF NOT EXISTS `token` (
`token_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`token_type` varchar(16) NOT NULL,
`token_arg` int(11) NOT NULL,
`token_location` varchar(32) NOT NULL,
`token_state` int(10),
PRIMARY KEY (`token_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

{| class="wikitable"
|+token
! token_id
! token_type
! token_arg
! token_location
! token_state
|-
|22
|meeple
|123456
|home_123456
|0
|-
|23
|dice
|2
|board_guard
|1
|-
|26
|dice
|1
|board_action_mayor
|3
|-
|49
|bread
|0
|home_123456
|5
|}

Advantages of this would be is a bit more straightforward to do some queries in db, disadvantage its hard to read (as you can compare with previous example, you
cannot just look at say, ah I know what it means). Another questionable advantage is it allows you to do id randomisation, so it hard to do crafted queries to
cheat, the down side of that you cannot understand it either, and handcraft db states for debugging or testing.

=== Database for The card game ===

Lets say you have a standard card game, player have hidden cards in hand, you can draw card from draw deck, play card on tableau and discard to discard pile.
We have to design database for such game.

In real word to "save" the game we take a picture a play area, save cards from it, then put away draw deck, discard and hand of each player separately and mark it, also we will record current scoring (if any) and who's turn was it.

* Framework handles state machine transition, so you don't have to worry about database design for that (i.e. who's turn it is, what phase of the game we are at, you still have to design it but part of state machine step)
* Also framework supports basic player information, color, order around the table, basic scoring, etc, so you don't have to worry about it either
* The only thing you need in our database is state of the "board", which is "where each pieces is, and in what state", or (position,rotation) pair.

Lets see what we have for that:
* The card state is very simple, its usually "face up/face down", "tapped/untapped", "right side up/up side down"
* As position go we never need real coordinates x,y,z. We need to know what "zone" card was, and depending on the zone it may sometimes need an extra "z" or "x" as card order. The zone position usually static or irrelevant.
* So our model is: we have cards, which have some attributes, at any given point in time they belong to a "zone", and can also have order and state
* Now for mapping we should consider what information changes and what information is static, later is always candidate for material file
* For dynamic information we should try to reduce amount of fields we need
** we need at least a field for card, so its one
** we need to know what zone cards belong to, its 2
** and we have possibly few other fields, if you look closely at you game you may find out that most of the zone only need one attribute at a time, i.e. draw pile always have cards face down, hand always face up, also for hand and discard order does not matter at all (but for draw it does matter). So in majority of cases we can get away with one single extra integer field representing state or order
* In real database both card and zone will be integers as primary keys referring to additional tables, but in our case its total overkill, so they can be strings as easily

Variant 1: Minimalistic

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

Variant 2: More normalised

This version supported by Deck php class, so unless you want to rewrite db access layer go with this one

<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: if you using this schema, some zones/locations have special semantic. The 'hand' location is actually multiple locations - one per player, but player id is encoded as card_location_arg. If 'hand' in your game is ordered, visible or can have some other card states, you cannot use hand location (replacement is hand_<player_id> or hand_<color_id>)

== Game Elements ==

=== Resource ===

A game resource, such as "wood," is usually infinite and represented by a count allocated to a specific player or supply.

If a resource can be placed on location, use the "Meeple" model described below.

For a working example, you can check out: [https://codepen.io/VictoriaLa/pen/emYgLzR CodePen Example] (ui only).

==== Representation in Database ====
In a minimalistic "tokens" database, it would look like this (e.g., the red player has 3 wood):

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|wood_ff0000
|
|3
|-
|wood_supply
|
|40
|}

The second row you need to store the resource in the supply (if it's counted).

If you don't like this solution can use bga_globals table for this or create your own resource table.

Its not recommened to extend player table to store this information.

==== Representation in Material File (material.inc.php) ====
In the material file, you can define some information about resources. For instance, you can specify that it's of type "resource" and call it "Wood" in English, along with a tooltip:
<pre>
$this->token_types = [
...
'wood' => [
'name' => clienttranslate('Wood'),
'tooltip' => clienttranslate('Game resource used for building houses'),
'type' => 'resource',
'max' => 40
]
];
</pre>

==== HTML Representation ====
In HTML, this would look something like this within the player panel. Using the data attribute instead of a CDATA value is much more flexible:
<pre>
<div id="wood_ff0000" class="resource wood" data-value="3"></div>
</pre>

==== JavaScript Handling ====
When you get the object from the server, one of the tokens will be sent in the array like this:
<pre>
token = {
key: 'wood_ff0000',
location: '-',
state: '3'
}
</pre>

You can create a corresponding `<div>` in the `setup()` method of `game.js` as follows:
<pre>
const playerColor = token.key.split('_')[1];
const resType = token.key.split('_')[0];
const tokenInfo = this.gamedatas.token_types[resType]; // token_types is the structure from the material file sent to the client
const div = `<div id="${token.key}" class="${resType} ${tokenInfo.type} ${token.key}" data-value="${token.state}"></div>`;

if (playerColor != 'supply') {
document.querySelector(`#player_board_${this.getPlayerIdByColor(playerColor)} > .player-board-game-specific-content`).insertAdjacentHTML('beforeend',div);
this.addTooltip(token.key, _(tokenInfo.name) + " " + _(tokenInfo.tooltip), "");
}
</pre>

When you receive an update notification (assuming you get the same "token" object), you can simply update the `data-value`:
<pre>
document.querySelector(`#${token.key}`).dataset.value = token.state;
</pre>

To display the resource in the game log, you can format it like this:
<pre>
Player gains <div class="resource wood" data-value="1"></div>
</pre>
For more on injecting icon images in the log, see: [[BGA_Studio_Cookbook#Inject_icon_images_in_the_log]]

==== Graphic Representation (.css) ====
To properly display the resource image, it is preferable to use an image sprite that includes all resources,
usually it will be .png as these objects have shape.
This how will .css look like with horizontal sprite image:

<pre>
.resource {
background-image: url(https://en.doc.boardgamearena.com/images/d/d3/Cubes.png);
background-repeat: no-repeat;
background-size: cover; /* auto-scale */
aspect-ratio: 1/1; /* that will keep heigh in sync */
width: 32px; /* default size, specific location should override */
}

.wood {
/* Since the sprite is a horizontal row of 11 cubes and 9 is the brown cube position */
background-position: calc(100% / (11 - 1) * 9) 0%;
}
</pre>

To show a text overlay with the resource value, you can use the following CSS:
<pre>
.resource[data-value]:after {
content: attr(data-value);
width: 100%;
height: 100%;
position: absolute;
font-size: xx-large;
text-align: center;
text-shadow: 2px 0 2px #fff, 0 -2px 2px #fff, 0 2px 2px #fff, -2px 0 2px #fff;
}
</pre>

This solution is fully scalable — you only need to specify the size where you want it displayed.
For example:
<pre>
.player_board_content > .resource {
width: 40px;
position: relative;
}
</pre>

Note: if you have that board that tracks the resource on resource tracker - you can show this IN ADDITION of showing resource on player panel.

==== Selection and Actions ====
It is best to put buttons with resource images on the status bar, rather than having the player click on the player panel.

For animation:
* Can use move animation to animate resourced gained or played from the board location to the player panel
* Can use "vapor" animation to show resource gained from the board

=== Meeple ===

A meeple is a game piece, typically representing a "worker," depicted as a human-shaped figure in a specific color assigned to a player.

The key distinction between meeples and traditional resources is that meeples are placed on locations and can exist
in at least two states — standing or lying down.

This concept also applies to similar pieces like "houses," "animeeples," "ships," and others.

==== Representation in Database ====
In a simplified "tokens" database, it might be represented like this
(e.g., the red player's first meeple is on action spot 1, while the white meeple remains in supply):

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|meeple_ff0000_1
|actionspot_1
|1
|-
|meeple_ffffff_1
|supply
|0
|}

==== Representation in Material File (material.inc.php) ====

Here we define some properties, for example name can be used in notification and as tooltip, type can be used to create the div by
javascript, 'create' - can be used by server to create 8 meeples of this type in database and set location to 'supply_ff0000'

<pre>
$this->token_types = [
...
'meeple_ff0000' => [
'name' => clienttranslate('Red Worker'),
'type' => 'meeple meeple_ff0000',
'create' => 8,
'location' => 'supply_ff0000'
]
];
</pre>

==== HTML Representation ====
In HTML, this would look something like this.
<pre>
<div id="meeple_ff0000_1" class="meeple meeple_ff0000" data-state="1"></div>
</pre>

==== JavaScript Handling ====
When you get the object from the server, each meeple object will be similar to this:
<pre>
meeple = {
key: 'meeple_ff0000_1',
location: 'actionslot_1',
state: '1'
}
</pre>

You can create a corresponding `<div>` in the `setup()` method of `game.js` as follows:
<pre>
const playerColor = token.key.split('_')[1];
const resType = token.key.split('_')[0];
const tokenInfo = this.gamedatas.token_types[resType]; // token_types is the structure from the material file sent to the client
const div = `<div id="${token.key}" class="${tokenInfo.type} ${token.key}" data-state="${token.state}"></div>`;

$(token.location).insertAdjacentHTML('beforeend',div);
this.addTooltip(token.key, _(tokenInfo.name) + " " + _(tokenInfo.tooltip), "");
$(token.key).addEventListener('onclick',(ev)=>this.onMeepleClick(ev));

</pre>

When you receive an update notification (assuming you get the same "token" object), you either create it if not exists or animate:
<pre>
if ($(token.key)) {
// exists
$(token.key).dataset.state = token.state; // update state
this.moveToken(token.key, token.location); // animate to new location (custom functon), see [[BGA_Studio_Cookbook#Animation]]
} else {
// crate meeple using code in previous section
}

</pre>

==== Graphic Representation (.css) ====

Use same sprite technique from Resource section above.

When placed on the board it will look good with shadow, but its not recommended on mobile

filter: drop-shadow(black 5px 5px 5px);

To represent "laying down" meeple, you have to use a different sprite image, which you will apply based on data attribute

<pre>
.meeple[data-state="1"] {
background-image: url(...);
}
</pre>

You can also rotate you div, but it will look lame.
Other options include changing its shading, adding overlay (i.e. sad face) and so on.

==== Selection and Actions ====
To show user that meeple is active it best to use drop-shadow as image as non-square, however this may be very slow.
For simplier case use box shadow.

<pre>
.active_slot {
filter: drop-shadow(0px 0px 10px blue);
cursor: pointer;
}

/* draw a circle around game element for selection */
.active_slot_simple:after {
content: " ";
width: 110%;
top: -5%;
left: -5%;
aspect-ratio: 1/1;
position: absolute;
border-radius: 50%;
box-shadow: 0px 0px 4px 3px #64b4ff;
}

</pre>

See code example at https://codepen.io/VictoriaLa/pen/emYgLzR

When a meeple is gained from the supply, you can display a meeple icon on the status bar button
instead of showing the supply on the board.

=== Dice ===
The 2D dice can use similar handing as meeple but it has 6 states instead of 2.

IMPORTANT: Never roll dice using javascript. All dice rolling must be done using bga_rand() function in php.

==== Representation in Database ====
In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|die_black
|actionspot_1
|1
|-
|die_red
|supply
|6
|}

==== Representation in Material File (material.inc.php) ====

Similar to resource and meeple above

==== HTML Representation ====

<pre>
<div id="die_black" class="die" data-state="1"></div>
</pre>

==== JavaScript Handling (.js) ====
See meeple section

==== Graphic Representation (.css) ====
For dice we would usually use N x 6 sprite, and since the sides are square - the .jpg format is better (it is smaller then png)

<pre>
.die {
background-image: url(https://en.doc.boardgamearena.com/images/c/c5/64_64_dice.jpg);
background-size: 600%;
background-repeat: no-repeat;
aspect-ratio: 1/1;
width: 64px;
border-radius: 5%; /* looks better with rounded corders */
}
.die[data-state="3"] {
background-position: calc(100% / 5 * 2) 0%;
}
</pre>

The 3D dice a bit tricker to create but its feasible, see https://codepen.io/VictoriaLa/pen/QWBBbwz for an example.

Also multiple examples on N-sided dice can be found on [[BGA_Code_Sharing]]

==== Selection and Actions ====
Since it is a square its a lot easier to make a square selection highlight

<pre>
.die.active_slot {
box-shadow: 0px 0px 4px 4px blue;
}
</pre>

=== Card ===

Cards are the most complex game resource, they can be located in various zones, stacked, tapped, put face down and can have arbitrary complete abilities.
If you have square tiles - it can be treated the same as cards.

==== Representation in Database ====

In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|card_project_123
|tableau_ff0000
|1
|-
|card_corp_p1
|deck_corp
|6
|}

Means project card is player red tableau and state 1 means it has been used for example,
and second card of corproration file in in deck at position 6 from the top.

When duplcates are in play you need to add extra unique disambigator in the key.

Usually cards will have numeric id associated with type, but it this number is per expansition, so leave the space for expansion identifier in there also.

Another option use [[Deck]] component.

==== Representation in Material ====

All the card properties which do not change during the game can be put in material file (or its alternative)

This is example from terraforming mars
<pre>
'card_main_81' => [ //
'location' => 'deck_main',
'create' => 'single',
'num' => 81,
'name' => clienttranslate('Ganymede Colony'),
't' => 1,
'r' => "city('Ganymede Colony')",
'cost' => 20,
'tags' => 'Space City Jovian',
'vp' => 'tagJovian',
'deck' => 'Basic',
'text' => clienttranslate('Place a city tile ON THE RESERVED AREA [for Ganymede Colony].'),
'text_vp' => clienttranslate('1 VP per Jovian tag you have.'),
],
</pre>

==== HTML Representation ====

There is 2 main options:
* Use exact cards images in english
* Use cards images WITHOUT text

The 3d option is completely redo the graphic layout that game designed did already, but I won't go there

The first option is very simple and similar to other resources and meeple

<pre>
<div id="card_project_123" class="card card_project card_project_123" data-state="1"></div>
</pre>

The second option means you can add translated text instead
<pre>
<div id="card_project_123" class="card card_project card_project_123" data-state="1" data-cost="22">
<div class="card_name">Ganymede Colony</div>
<div class="card_text">Place a city tile ON THE RESERVED AREA [for Ganymede Colony].</div>
<div class="card_cost"></div>
</div>
</pre>

In the example above card_cost is also rendered as this can change during the game (even printed value is the same),
it would be rendered using data-cost attribute.

Instead of using class you can also use state even if it is static

<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>

Note: to make flip animation you effectively need to make a "3d" card and provide both faces with separate graphics,
which makes more complex div. See examples at https://thoun.github.io/bga-cards/demo/index.html

Note: you can also use [[Stock]] component that handles html, js, css, layout and selection at the same time. If do that skip sections below.

==== JavaScript Handling (.js) ====
You will get the server data which looks like this

<pre>
card = {
key: 'card_project_123',
location: 'tableau_ff0000',
state: '1'
}
</pre>

<pre>
createCard(token: Token) {
// token_types is the structure from the material file sent to the client
const tokenInfo = this.gamedatas.token_types[token.key];
const div = `
<div id="${token.key}" class="${tokenInfo.type} ${token.key}" data-state="${token.state}">
<div class="card_name">${_(tokenInfo.name)}</div>
<div class="card_text">${_(tokenInfo.text)}</div>
</div>`;

$(token.location).insertAdjacentHTML('beforeend',div);
this.addTooltipHtml(token.key, this.getTooptipHtmlForToken(token));
$(token.key).addEventListener("onclick", (ev) => this.onCardClick(ev));
}
</pre>

When you receive an update notification (assuming you get the same "token" object), you either create it if not exists or animate:
<pre>
if ($(token.key)) {
// exists
$(token.key).dataset.state = token.state; // update state
$(token.key).dataset.cost = token.cost; // update cost (discounted cost)
this.moveCard(token.key, token.location); // animate to new location (custom functon), see [[BGA_Studio_Cookbook#Animation]]
} else {
this.createCard(token);
}
</pre>

==== Graphic Representation (.css) ====

For this html
<pre>
<div id="game" class="classic_deck">
<div id="hand" class="hand">
<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>
<div id="card_C_K" class="card" data-suit='C' data-rank="K"> </div>
</div>
</div>
</pre>

This is example css using sprite image of playing cards
<pre>
.card {
background-image: url('https://x.boardgamearena.net/data/others/cards/FULLREZ_CARDS_ORIGINAL_NORMAL.jpg'); /* don't do full url in your game, copy this file inside img folder */

background-size: 1500% auto; /* this mean size of background is 15 times bigger than size of card, because its sprite */
border-radius: 5%;
width: 10em;
height: 13.5em;
box-shadow: 0.1em 0.1em 0.2em 0.1em #555;
}

.card[data-rank="10"] { /* 10 is column number 10 - 2 because we start from 0 and first card is sprite is 2. The multiplier is (15 - 1) is because we have 15 columns. -1 is because % in CSS is weird like that. */
background-position-x: calc(100% / (15 - 1) * (10 - 2));
}
.card[data-rank="K"] { /* King will be number 13 in rank */
background-position-x: calc(100% / (15 - 1) * (13 - 2));
}
.card[data-suit="H"] { /* Hears row position is 1 (because we count from 0). Multiplier (4 - 1) is because we have 4 rows and -1 is because % in CSS is weird like that. */
background-position-y: calc(100% / (4 - 1) * (1));
}
.card[data-suit="C"] { /* Clubs row position is 2 */
background-position-y: calc(100% / (4 - 1) * (2));
}
</pre>
See code at https://codepen.io/VictoriaLa/pen/mdMzRxa

==== Selection and Actions ====

Since it is a square its a lot easier to make a square selection highlight

<pre>
.card.active_slot {
box-shadow: 0px 0px 4px 4px blue;
}
</pre>

==== Card Layouts ====
There are two options - you use [[Stock]] component or don't, see [[Anti-Stock]] for details on how to do your own layouts.

This is comprehensive example of various card layouts and animations
https://thoun.github.io/bga-cards/demo/index.html

=== Hex Tiles ===
From data perspective hex tiles exactly the same as cards.
From visualization there is a small trick.

CSS:
<pre>
.hex {
width: var(--hex-width);
aspect-ratio: 1 / 1.1193;
border-radius: 30%;
background-color: yellow; /* this is just for demo, use proper .png file for this */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex.active_slot_simple {
background-color: rgba(86, 207, 110, 0.4);
}
.hex.active_slot {
filter: drop-shadow(0px 0px 10px blue);
}
</pre>

=== Tetris Tiles ===
You can use clip-path for actual shape and svg path for outline
See example at https://codepen.io/VictoriaLa/pen/OJmoZGw

=== Track ===

Tracker can be represented as "resource" in database - in this case its just number, or similar to "meeple" in which case
the location will have the "number" associated with position on track

In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|tracker_o
|scale_o_1
|0
|-
|tracker_t
|scale_t_10
|0
|}

The tracker location in this case may have some properties in material file, for example to trigger game effect when we land on this spot

<pre>
'scale_t' => [
'index_start' => 0,
'max' => 20,
'value_start' => -30,
'value_step' => 2,
'slot_type' => 'slot slot_t'
],
'scale_t_10' => [
'r' => 'ocean',
'param' => 't',
'tooltp' => clienttranslate('Place an ocean'),
'value' => 0
],
</pre>

The track in this case can be generated as series of slots (create in js)
<pre>
for(let i=trackInfo.index_start,value = trackInfo.value_start;i<trackInfo.index_start+trackInfo.max;i++,value+=trackInfo.value_step) {
$(trackInfo.key).insertAdjacentHTML('beforeend',`<div id="${trackInfo.key}_${i}" class="${trackInfo.slot_type} data-value=${value}"></div>`);
this.addTooltip(`${trackInfo.key}_${i}`, _(tokenInfo.tooltip), "");
}
</pre>

Then use regular move animation to move tracker into position on track.

== Code Organization ==

=== Including your own JavaScript module ===
'''Ingredients:''' ggg.js, modules/ggg_other.js

* Create ggg_other.js in modules/ folder and sync
<pre>
define([
"dojo", "dojo/_base/declare"
], function( dojo, declare )
{
return declare("bgagame.other", null, { // null here if we don't want to inherit from anything
constructor: function(){},
mystuff: function(){},
});

});

</pre>
* Modify ggg.js to include it

define([ "dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter",
g_gamethemeurl + "modules/ggg_other.js" // load my own module!!!
], function(dojo,
declare) {

use it

foo = new bgagame.other();

=== Including your own JavaScript module (II) ===

* Create ggg_other.js in modules/ folder and sync

define([], function () {
return "value";
});

* Modify ggg.js to include it

define([
"dojo",
"dojo/_base/declare",
"bgagame/modules/ggg_other",
"ebg/core/gamegui",
"ebg/counter"
], function(dojo, declare, other) {

});

This is maybe a little bit more the idea of the AMD Loader than the first option, although the first option should work as well.

A little explanation to this:
The define function loads all the modules listed in the array and calls the following function with these loaded modules as parameters.
By putting your module at the third position in the array it is passed as the third parameter to the function. Be aware that the modules are resolved by position only, not by name. So you can load the module '''ggg_other''' and pass it as a parameter with the name '''other'''. '''gamegui''' and '''counter''' are passed in as well, but when the parameters are not defined they are just skipped. Because these modules put their content into the global scope it does not matter and you can use them from there.

In the example above the string "value" is passed for the parameter '''other''', but the function in your module can return whatever you want. It can be an object, an array, something you declared with dojo.declare, you can return even functions.
Your module can load other modules. Just put them in the array at the beginning and pass them as parameters to your function.
The advantage of passing the values as parameter is that you do not need to put these values in the global scope, so they can't be collisions with values defined in other scripts or the BGA Framework.

The dojo toolkit provides good documentation to all of its components, the complete documentation for the AMD-Loader is here:
https://dojotoolkit.org/documentation/tutorials/1.10/modules/index.html It should be still correct, even as it seems to be only for version 1.10

=== Including your own PHP module ===
'''Ingredients:''' ggg.game.php, modules/ggg_other.php

* Create ggg_other.php in modules/ folder and sync
* Modify ggg.game.php to include it

require_once ('modules/ggg_other.php');

=== Creating a test class to run PHP locally ===

'''Ingredients:''' ggg.game.php, stubs
For this you need stubs of other method you can use this for example
https://github.com/elaskavaia/bga-sharedcode/raw/master/misc/module/table/table.game.php

Create another php files, i.e ggg_test.php
<pre>
<?php
define("APP_GAMEMODULE_PATH", "misc/"); // include path to stubs, which defines "table.game.php" and other classes
require_once ('eminentdomaine.game.php');

class MyGameTest1 extends MyGame { // this is your game class defined in ggg.game.php
function __construct() {
parent::__construct();
include '../material.inc.php';// this is how this normally included, from constructor
}

// override/stub methods here that access db and stuff
function getGameStateValue($var) {
if ($var == 'round')
return 3;
return 0;
}
}
$x = new MyGameTest1(); // instantiate your class
$p = $x->getGameProgression(); // call one of the methods to test
if ($p != 50)
echo "Test1: FAILED";
else
echo "Test1: PASSED";

</pre>

Run from command line like
php8.2 ggg_test.php

If you do it this way - you can also use local php debugger (i.e. integrated with IDE or command line).

=== Avoiding code in dojo declare style ===
Dojo class declarations are rather bizzare and do not work with most IDEs.
If you want to write in plain JS with classes, you can stub all the dojo define/declare stuff
and hook your class into that, so the classes are outside of this mess.

NOTE: this technique is for experienced developers, do not try it if you do not understand
the consequences.

This is complete example of game .js class
<pre>
// Testla is game name is has to be changed
class Testla {
constructor(game) {
console.log('game constructor');
this.game = game;
this.varfoo = new MyFoo(); // this example of class from custom module
}

setup(gamedatas) {
console.log("Starting game setup", this.varfoo);
this.gamedatas = gamedatas;
this.dojo.create("div", { class: 'whiteblock', innerHTML: _("hello") }, 'thething');
console.log("Ending game setup");
};
onEnteringState(stateName, args) {
console.log('onEnteringState : ' + stateName, args);
this.game.addActionButton('b1',_('Click Me'), (e)=>this.onButtonClick(e));
};
onLeavingState(stateName) {
console.log('onLeavingState : ' + stateName, args);
};
onUpdateActionButtons(stateName, args) {
console.log('onUpdateActionButtons : ' + stateName, args);
};
onButtonClick(event) {
console.log('onButtonClick',event);
};
};

define([
"dojo", "dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
g_gamethemeurl + '/modules/foo.js' // custom module if needed
],
function(dojo, declare) {
// testla is game name is has to be changed
return declare("bgagame.testla", ebg.core.gamegui, {
constructor: function() {
this.xapp = new Testla(this);
this.xapp.dojo = dojo;
},
setup: function(gamedatas) {
this.xapp.setup(gamedatas);
},
onEnteringState: function(stateName, args) {
this.xapp.onEnteringState(stateName, args?.args);
},
onLeavingState: function(stateName) {
this.xapp.onLeavingState(stateName, args);
},
onUpdateActionButtons: function(stateName, args) {
this.xapp.onUpdateActionButtons(stateName, args);
},
});
});

</pre>

=== More readable JS: onEnteringState ===

If you have a lot of states in onEnteringState or onUpdateActionButtons and friends - it becomes rather wild, you can do this trick to call some methods dynamically.

<pre>

onEnteringState: function(stateName, args) {
console.log('Entering state: ' + stateName, args);

// Call appropriate method
var methodName = "onEnteringState_" + stateName;
if (this[methodName] !== undefined) {
console.log('Calling ' + methodName, args.args);
this[methodName](args.args);
}
},

onEnteringState_playerTurn: function(args) { // this is args directly, not args.args
// process
},

onEnteringState_playerSomethingElse: function(args) {
// process
},

</pre>

Note: since its ignores the undefined functions you don't have define function for each state, but on the other hand you cannot make typos.
Same applies to onUpdateActionButtons except you pass 'args' to method, not args.args, and for onLeavingState where you don't pass anything.

=== Frameworks and Preprocessors ===

* [[BGA Type Safe Template]] - Setting up a fully typed project using typescript and more!
* [[Using Vue]] - work-in-progress guide on using the modern framework Vue.js to create a game
* [[Using Typescript and Scss]] - How to auto-build Typescript and SCSS files to make your code cleaner

=== PHP Migration ===

'''Ingredients:''' */php, modules/*.php

BGA recently migrated to from 7.4 to 8.2.
New php has new rules and deprecations.

There is a tool that can help you do the migration automation, which is php module called rector https://getrector.com/.
Below is the recipe that converts variables in strings like ${var} (which is deprecated) to {$var}.

1. Install the module
composer global require --dev rector/rector
2. Go to your project directory, commit your code first before this!

3. Create a rector.php file on top level with the following content:
<pre>
<?php

use Rector\Config\RectorConfig;
use Rector\Php82\Rector\Encapsed\VariableInStringInterpolationFixerRector;

return RectorConfig::configure()
->withPaths([
__DIR__
])
// A. whole set
//->withPreparedSets(typeDeclarations: true)
// B. or few rules
->withRules([
VariableInStringInterpolationFixerRector::class
]);
</pre>
4. Dry run (mine is on linux, not sure where global install on windows)
~/.config/composer/vendor/bin/rector process --dry-run

5. If happy re-run without --dry-run

6. Can remove rector.php now (or can do different rules)

== Backend ==

=== Assigning Player Order ===
Normally when game starts there is "natural" player order assigned randomly.

If you want to deliberatly assign player order at the start of the game (for example, in a game with teams options), you can do so by retrieving the initialization-only player attribute '''player_table_order''' and using it to assign values to '''player_no''' (which is normally assigned at the start of a game in the order in which players come to the table). (See [https://en.doc.boardgamearena.com/Game_database_model:_dbmodel.sql#The_player_table Game database model] for more details.)

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
<b>WARNING:</b> To prevent unfair advantage (e.g. collusion), the random order must be the default option and <b>non-random options should be limited to friendly mode.</b>
</div>

'''Example:'''
<pre>
// Retrieve inital player order ([0=>playerId1, 1=>playerId2, ...])
$playerInitialOrder = [];
foreach ($players as $playerId => $player) {
$playerInitialOrder[$player['player_table_order']] = $playerId;
}
ksort($playerInitialOrder);
$playerInitialOrder = array_flip(array_values($playerInitialOrder));

// Player order based on 'playerTeams' option
$playerOrder = [0, 1, 2, 3];
switch ($this->getGameStateValue('playerTeams')) {
case $this->TEAM_1_2:
$playerOrder = [0, 2, 1, 3];
break;
case $this->TEAM_1_4:
$playerOrder = [0, 1, 3, 2];
break;
case $this->TEAM_RANDOM:
shuffle($playerOrder);
break;
default:
case $this->TEAM_1_3:
// Default order
break;
}

// Create players
// Note: if you added some extra field on "player" table in the database (dbmodel.sql), you can initialize it there.
$sql =
'INSERT INTO player (player_id, player_color, player_canal, player_name, player_avatar, player_no) VALUES ';
$values = [];

foreach ($players as $playerId => $player) {
$color = array_shift($default_colors);
$values[] =
"('" .
$playerId .
"','$color','" .
$player['player_canal'] .
"','" .
addslashes($player['player_name']) .
"','" .
addslashes($player['player_avatar']) .
"','" .
$playerOrder[$playerInitialOrder[$playerId]] .
"')";
}
$sql .= implode(',', $values);
$this->DbQuery($sql);
$this->reattributeColorsBasedOnPreferences(
$players,
$gameinfos['player_colors']
);
$this->reloadPlayersBasicInfos();
</pre>

=== Send different notifications to active player vs everybody else ===

'''Ingredients:''' ggg.js

Hack alert. This is a hack. We were hoping for proper solution by bga framework.

This will allow you to send notification with two message one for specific player and one for everybody else including spectators.
Note that this does not split the data - all data must be shared.

Add this to .js file (if you already overriding it merge obviously)
<pre>
/** @Override */
format_string_recursive: function(log, args) {
if (typeof args.log_others != 'undefined' && typeof args.player_id != 'undefined' && this.player_id != args.player_id)
log = args.log_others;
return this.inherited(arguments); // you must call this to call super
},
</pre>

Example of usage (from eminentdomain)
<pre>
$this->notify->all('tokenMoved',
clienttranslate('${player_name} adds +2 Colonies to ${place_name}'), // notification with show for player with player_id
['player_id'=>$player_id, // this is mandatory
'log_others'=>clienttranslate('${player_name} adds +2 Colonies to an unknown planet'), // notification will show for others
...
]);
</pre>

=== Send transient notifications without incrementing move ID ===

'''Ingredients:''' ggg.php

Hack alert. This is a hack.

Use this if you need to send some transient notification that should not create a new move ID. The notification should be idempotent -- it should have no practical effect on the game state and would be '''safe to drop''' (e.g., it would not matter if a player never received this notification). For example, in a co-op game you want all players to see a real-time preview of some action, before the active player commits their turn.

Doing this mainly affects the instant replay & archive modes. During replay, the BGA framework automatically inserts a 1.5-second pause between each "move". With this hack, your transient notifications are not considered to be a "move", so no pause gets added.

; In ggg.php
<pre>
$this->not_a_move_notification = true; // note: do not increase the move counter
$this->notify->all('cardsPreview', '', $args);
</pre>

Note: you cannot have code that send notification or even changes state after this, and you cannot reset this variable back either because it only takes effect when you exit action handling function

== Assorted Stuff ==

=== Out-of-turn actions: Un-pass ===

'''Ingredients:''' ggg.js, ggg.game.php, ggg.action.php, states.inc.php

In multiplayer game sometimes players passes but than they think more and want to un-Pass and redo their choice.
To re-active a player who passes some trickery required.

Define a special action that does that and hook it up.

In states.inc.php add an action to multipleactiveplayer state to "unpass", lets call it "actionCancel"

In ggg.action.php add action hook
public function actionCancel() {
$this->setAjaxMode();
$this->game->actionCancel();
$this->ajaxResponse();
}

In ggg.game.php add action handler
function actionCancel() {
$this->gamestate->checkPossibleAction('actionCancel');
$this->gamestate->setPlayersMultiactive(array ($this->getCurrentPlayerId() ), 'error', false);
}

Finally to call this in client ggg.js you would do something like:
<pre>
onUpdateActionButtons: function(stateName, args) {
if (this.isCurrentPlayerActive()) {
// ...
} else if (!this.isSpectator) { // player is NOT active but not spectator
switch (stateName) {
case 'playerTurnMultiPlayerState':
this.addActionButton('button_unpass', _('Oh no!'), 'onUnpass');
break;
}
}
}

onUnpass: function(e) {
this.bgaPerformAction("actionCancel", null, { checkAction: false }); // no checkAction!
}
</pre>
Although be careful that if the turn comes back to the player while he is about to click cancel, the action buttons will be updated and the player will misclick which can be quite frustrating. To avoid this, move the cancel button to another position, like to the left of pagemaintitletext:
dojo.place('button_unpass', 'pagemaintitletext', 'before');
Being out of the generalactions div, it won't be automatically destroyed like normal buttons, so you'll have to handle that yourself in onLeavingState. You might also want to change the button color to red (blue buttons for active player only, red buttons also for inactive players?)

Note: same technique can be used to do other out-of-turn actions, such as re-arranging cards in hand, exchanging resources, etc (i.e. if permitted by rules, such as "at any time player can...")

=== Multi Step Interactions: Select Worker/Place Worker - Using Selection ===

'''Ingredients:''' ggg.js

Simple way to implement something like that without extra states is to use "selection" mechanism. When user click on worker add some sort of class into that element i.e. 'selected' (which also have to have some indication by css i.e. outline).

Than user can click on placement zone, you can use dojo.query for "selected" element and use it along with zone id to send data to server. If proper worker is not selected yet can give a error message using this.showMessage(...) function.

Extra code required to properly cleanup selection between states.
Also when you do that sometimes you want to change the state prompt, see below 'Change state prompt'

=== Multi Step Interactions: Select Worker/Place Worker - Using Client States ===

'''Ingredients:''' ggg.js

I don't think its documented feature but there is a way to do client-only states, which is absolutely wonderful for few reasons
* When player interaction is two step process, such as select worker, place worker, or place worker, pick one of two resources of your choice
* When multi-step process can result of impossible situation and has to be undone (by rules)
* When multi-step process is triggered from multiple states (such as you can do same thing as activated card action, pass action or main action)

So lets do Select Worker/Place Worker

Define your server state as usual, i.e. playerMainTurn -> "You must pick up a worker".
Now define a client state, we only need "name" and "descriptionmyturn", lets say "client_playerPicksLocation". Always prefix names of client state with "client_" to avoid confusion. Now we have to do the following:
* Have a handler for onUpdateActionButtons for playerMainTurn to activate all possible workers he can pick
* When player clicks workers, remember the worker in one of the members of the main class, I usually use one called this.clientStateArgs.
* Transition to new client state
onWorker: function(e) {
var id = event.currentTarget.id;
dojo.stopEvent(event);
... // do validity checks
this.clientStateArgs.worker_id = id;
this.setClientState("client_playerPicksLocation", {
descriptionmyturn : _("${you} must select location"),
});
}
* Have a handler for onUpdateActionButtons for client_playerPicksLocation to activate all possible locations this worker can go AND add Cancel button (see below)
* Have a location handler which will eventually send a server request, using stored this.clientStateArgs.worker_id as worker id
* The cancel button should call a method to restore server state, also if you doing it for more than one state you can add this universally using this.on_client_state check

if (this.isCurrentPlayerActive()) {
if (this.on_client_state && !$('button_cancel')) {
this.addActionButton('button_cancel', _('Cancel'), dojo.hitch(this, function() {
this.restoreServerGameState();
}));
}
}
Note: usually I call my own function call this.cancelLocalStateEffects() which will do more stuff first then call restoreServerGameState(), same function is usually needs to be called when server request has failed (i.e. invalid move)

Note: If you need more than 2 steps, you may have to do client side animation to reflect the new state, which gets trickier because you have to undo that also on cancellation.

Code is available here [https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js sharedcode.js] (its using playerTurnPlayCubes and client_selectCubeLocation).

=== Action Stack - Using Client States ===

Action stack required where game is very complex and use triggered effects that can "stack". It not always actual stack, it can be queue or random access.

Examples:
* Magic the Gathering - classic card game where effects go on Stack, that allows to counter spell and counter spell of counter spell (not on bga - it just example of mechanics)
* Ultimate Railroads - action taking game where effects can be executed in any order
* Lewis and Clark - card game where actions executed as queue

There is two ways of implementing it - on the server or the client.
For the server see article below.
The requirement for client side stack implementation is - all action can be undone, which means
* No dice rolls
* No card drawn
* No other players interaction

No snippets are here, as this will be too complex but basically flow is:
* You have a action/effect stack (queue/list) as js object attached to "this", i.e. this.unprocessed_actions
* When player plays a card, worker, etc, you read the effect of that card from the material file (client copy), and place into stack
* Then we call dispatch method which pulls the next action from the stack and change client state accordinly, i.e. this.setClientState("client_playerGainsCubes")
* When players acts on it - the action is removed from the stack and added to "server action arguments" list, this is another object which be used to send ajax call, i.e. this.clientStateArgs
* If nothing left in stack we can submit the ajax call assembling parameters from collected arguments (that can include action name)
* This method allows cheap undo - by restoring server state you will wipe out all user actions (but if you need intermediate aninmation you have to handle it yourself)

Code can be found in Ultimate Railroads game (but it is random access list - so it a bit complex) and Lewis and Clark (complexity - user can always deny part of any effect)

=== Action Stack - Using Server States ===

See definition of Action Stack above.

To implement you usually need another db table that has the following fields: index of effect - which is used for sorted access, type - which is essense of the effect (i.e. collect resource), some extra arguments (i.e. resource type and resource count), and usually owner of the effect (i.e. player id)
The flow is:
* There is some initial player state, where player can play card for example
* Player main action - pushes the card effect on stack, which also can cause triggered effects which also go on stack
* After action processing is finished switch to game state which is "dispatcher"
* Dispatcher pulls the top effect (whatever definition of the top is), changes the active player and changes the state to appropriate player state to collect response. The "top" can be choice of multiple actions, in this case player has to chose one before resolving the effect.
* Player state knows about the stack and pulls arguments (argX) from the effect arguments of the db
* Player action should clear up the top effect, and can possibly add more effects, then switch to "dispatcher" state again
* If stack is empty, dispatcher can either pick next player itself or use another game state which responsible for picking next player

Code can be found in Tapestry and Terraforming Mars.
=== Custom error/exception handling in JavaScript ===

; In ggg.php
Throw BgaUserException with some easy-to-identify prefix such as "!!!" and a custom error code. DO NOT TRANSLATE this message text. The exception will rollback database transaction and cancel all changes (including any notifications).
<pre>
function foo(bool $didConfirm = false): void
{
// do processing for the user's move
// afterwards, you determine this move will end the game
// so you want to rollback the transaction and require the user to confirm the move first

if ($gameIsEnding && !$didConfirm) {
throw new BgaUserException('!!!endGameConfirm', 9001);
}
}
</pre>

; In ggg.js
Override framework function showMessage to suppress the red banner message and gamelog message when you detect the "!!!" prefix
<pre>
/* @Override */
showMessage: function (msg, type) {
if (type == "error" && msg && msg.startsWith("!!!")) {
return; // suppress red banner and gamelog message
}
this.inherited(arguments);
},
</pre>

Deal with the error in your callback:
<pre>
fooAction: function (didConfirm) {
var data = {
foo: "bar",
didConfirm: !!didConfirm,
};
this.bgaPerformAction("fooAction", data).catch((error, errorMsg) => {
if (error && errorMsg == "!!!endGameConfirm") {
// your custom error handling goes here
// for example, show a confirmation dialog and repeat the action with additional param
this.confirmationDialog(
_("Doing the foo action now will end the game"),
() => this.fooAction(true)
);
}
});
},
</pre>

For custom global error handling, you could modify ajaxcallwrapper:
<pre>
ajaxcallwrapper: function (action, args, handler) {
if (!args) args = {};
args.lock = true;
args.version = this.gamedatas.version;
if (this.checkAction(action)) {
this.bgaPerformAction(
action,
args
).catch((error, errorMsg, errorCode) => {
if (error && errorMsg == "!!!checkVersion") {
this.infoDialog(
_("A new version of this game is now available"),
_("Reload Required"),
() => {
window.location.reload();
},
true
);
} else {
if (handler) handler(error, errorMsg, errorCode);
}
}
);
}
},
</pre>

=== Force players to refresh after new deploy ===

When you deploy a new version of your game, the PHP backend code is immediately updated but the JavaScript/HTML/CSS frontend code *does not update* for active players until they manually refresh the page (F5) in their browser. Obviously this is not ideal. In the best case, real-time tables don't see your shiny new enhancements. In the worst case, your old JS code isn't compatible with your new PHP code and the game breaks in strange ways (any bug reports filed will be false positives and unable to reproduce). To avoid any problems, you should force all players to immediately reload the page following a new deploy.

By throwing a "visible" exception (simplest solution), you'll get something like this which instructs the user to reload:

[[File:Force-refresh.png|950x950px]]

Or, if you combine this technique with the above custom error handling technique, you could do something a bit nicer. You could show a dialog box and automatically refresh the page when the user clicks "OK":

[[File:Reload-required.png|500x500px]]
; In ggg.php
Transmit the server version number in <code>getAllDatas()</code>.
<pre>
protected function getAllDatas(): array
{
$players = $this->getCollectionFromDb("SELECT player_id id, player_score score FROM player");
return [
'players' => $players,
'version' => intval($this->gamestate->table_globals[300]), // <-- ADD HERE
...
];
}
</pre>

Create a helper function to fail if the client and server versions mismatch. Note the version check uses <code>!=</code> instead of <code><</code> so it can support rollback to a previous deploy as well. ;-)
<pre>
public function checkVersion(int $clientVersion): void
{
if ($clientVersion != intval($this->gamestate->table_globals[300])) {
// Simplest way is to throw a "visible" exception
// It's ugly but comes with a "click here" link to refresh
throw new BgaVisibleSystemException($this->_("A new version of this game is now available. Please reload the page (F5)."));

// For something prettier, throw a "user" exception and handle in JS
// (see BGA cookbook section above on custom error handling)
throw new BgaUserException('!!!checkVersion');
}
}
</pre>
; In ggg.action.php
Create a helper function for actions:
<pre>
private function checkVersion()
{
$clientVersion = (int) $this->getArg('version', AT_int, false);
$this->game->checkVersion($clientVersion);
}
</pre>

Call <code>$this->checkVersion()</code> at the top of <b>every action function</b>, immediately after <code>$this->setAjaxMode()</code>:
<pre>
public function move()
{
$this->setAjaxMode();
$this->checkVersion(); // <-- ADD HERE
...
$this->ajaxResponse();
}
</pre>

; In ggg.js
Transmit the version (from gamedatas) as a parameter with every ajax call. For example, if you're already using a wrapper function for every ajax call, add it like this:
<pre>
ajaxcallwrapper: function (action, args) {
if (!args) args = {};
args.version = this.gamedatas.version; // <-- ADD HERE
this.bgaPerformAction(action, args);
},
</pre>

=== Disable / lock table creation for new deploy ===

If you are deploying a major new game version, especially if it involves upgrading production game databases, you may have a lot of angry players if you break their tables. Depending on your changes, you may be able to restore the previous version and fix the tables easily.

However, if a new deploy turns out bad and players created turn-based tables while it was live, it may be quite difficult to fix those tables, since they were created from a bad deploy.

The solution? You can announce in your game group that you are locking table creation, and then in your new version, add an impossible startcondition to an existing option.
Note: This only makes sense if you have a few games running in real time mode in the time of deployment, otherwise it won't achieve much, unless you wait at least a day for other turn based games to break (or not)

Here is an example of an option with only 2 values (if you don't have options at all you have to create a fake option to use this method, if you have more values - you have to list them all):

; In gameoptions.json
<pre>
"startcondition": {
"0": [ { "type": "minplayers", "value": 32, "message": "Maintenance in progress. Table creation is disabled." } ],
"1": [ { "type": "minplayers", "value": 32, "message": "Maintenance in progress. Table creation is disabled." } ]
},
</pre>
; In gameoptions.inc.php (older method if you have it in php)
<pre>
// TODO NEXT remove after testing deploy to upgrade, here 0 and 1 - replace with values of your option!
'startcondition' => [
0 => [ [ 'type' => 'minplayers', 'value' => 32, 'message' => totranslate('Maintenance in progress. Table creation is disabled.') ] ],
1 => [ [ 'type' => 'minplayers', 'value' => 32, 'message' => totranslate('Maintenance in progress. Table creation is disabled.') ] ],
],
</pre>

* Be sure to click "Reload game options configuration" after making this change, then test in studio (test that you cannot create any table)
* Deploy to production
* Now, when a player attempts to create a new table, they will see a red error bar with your "Maintenance in progress" message.
* Wait for screaming (if you have real times games in progress waiting 15 min probably ok, if you have only turn based games, probably a day)
* Once you confirm the new deploy looks good, you can revert the change in gameoptions.inc.php and do another deploy.

=== Local Storage ===

There is not much you can store in localStorage (https://developer.mozilla.org/docs/Web/API/Window/localStorage), since most stuff should be stored either in game db or in user prefrences,
but some stuff makes sense to store there, for example "zoom" level (if you use custom zooming). This setting really affect this specific host and specific browser, setting it localStorage makes most sense.

game.js
<pre>
setup: function (gamedatas) {
let zoom = localStorage.getItem(`${this.game_name}_zoom`);
this.setZoom(zoom);
...
},
</pre>
In this case setZoom is custom function to actually set it.
When zoom changed, for example when some buttons pressed, store current value (but sanitize it so it never so bad that game cannot be viewed

<pre>
setZoom: function (zoom) {
zoom = parseInt(zoom) || 0;
if (zoom === 0 || zoom < 0.1 || zoom > 10) {
zoom = 1;
}
this.zoom = zoom;
localStorage.setItem(`${this.game_name}_zoom`, "" + this.zoom);
... do actual zooming stuff
},
</pre>

=== Capture client JavaScript errors in the "unexpected error" log ===

PHP (backend) errors are recorded in the "unexpected error" log, but JavaScript (frontend) errors are only available in the browser itself. This means you have no visibility about things that go wrong in the client... unless you make clients report their errors to the server.

; In actions.php:
<pre>
public function jsError()
{
$this->setAjaxMode(false);
$this->game->jsError($_POST['userAgent'], $_POST['msg']);
$this->ajaxResponse();
}
</pre>

; In game.php:
<pre>
public function jsError($userAgent, $msg): void
{
$this->error("JavaScript error from User-Agent: $userAgent\n$msg // ");
}
</pre>

; In game.js:
<pre>
define(["dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter"], function (dojo, declare) {
const uniqJsError = {};
...

return declare("bgagame.nowboarding", ebg.core.gamegui, {
...
/* @Override */
onScriptError(msg) {
if (!uniqJsError[msg]) {
uniqJsError[msg] = true;
console.error("⛔ Reporting JavaScript error", msg);
this.ajaxcall(
"/" + this.game_name + "/" + this.game_name + "/jsError.html",
{
msg,
userAgent: navigator.userAgent,
},
this,
() => {},
() => {},
"post"
);
}
this.inherited(arguments);
},
</pre>

== Algorithms ==

=== Generate permutations in lexicographic order ===

Use this when you have an array like [1, 2, 3, 4] and need to loop over some/all 24 permutations of possible ordering. This type of [https://www.php.net/manual/en/language.generators.syntax.php generator function] computes each possibility one at a time, making it vastly more efficient than either a normal iteration or recursive function that produce all possibilities up front.

<pre>
function generatePermutations(array $array): Generator
{
// https://en.wikipedia.org/wiki/Permutation#Generation_in_lexicographic_order
// Sort the array and this is the first permutation
sort($array);
yield $array;

$count = count($array);
do {
// Find the largest index k where a[k] < a[k + 1]
// End when no such index exists
$found = false;
for ($k = $count - 2; $k >= 0; $k--) {
$kvalue = $array[$k];
$knext = $array[$k + 1];
if ($kvalue < $knext) {
// Find the largest index l greater than k where a[k] < a[l]
for ($l = $count - 1; $l > $k; $l--) {
$lvalue = $array[$l];
if ($kvalue < $lvalue) {
// Swap a[k] and a[l]
[$array[$k], $array[$l]] = [$array[$l], $array[$k]];

// Reverse the sequence from a[k + 1] up to and including the final element
$reverse = array_reverse(array_slice($array, $k + 1));
array_splice($array, $k + 1, $count, $reverse);
yield $array;

// Restart with the new array to find the next permutation
$found = true;
break 2;
}
}
}
}
} while ($found);
}
</pre>

Usage:
<pre>
$cash = [4, 1, 2, 3, 4];
foreach ($this->generatePermutations($cash) as $p) {
// your code here to evaluate permutation $p
// first iteration: $p = [1, 2, 3, 4, 4]
// last (60th) iteration: $p = [4, 4, 3, 2, 1]
// break from loop once you achieve your goal
}
</pre>

[[Category:Studio]]

BGA Studio Cookbook

2025-03-26T01:50:03Z

Ufm: /* Assigning Player Order */

This page is a cookbook of design and implementation recipes for BGA Studio framework.
For tooling and usage recipes see [[Tools and tips of BGA Studio]].
If you have your own recipes feel free to edit this page.

__TOC__

== Visual Effects, Layout and Animation ==

=== DOM manipulatons ===

==== Create pieces dynamically (using template) ====

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Note: this method is recommended by BGA guildlines

Declared js template with variables in .tpl file, like this
<pre>
<script type="text/javascript">
// Javascript HTML templates
var jstpl_ipiece = '<div class="${type} ${type}_${color} inlineblock" aria-label="${name}" title="${name}"></div>';
</script>
</pre>

Use it like this in .js file
div = this.format_block('jstpl_ipiece', {
type : 'meeple',
color : 'ff0000',
name : 'Bob',
});

Then you do whatever you need to do with that div, this one specifically design to go to log entries, because it has embedded title (otherwise its a picture only) and no id.

Note: you could have place this variable in js itself, but keeping it in .tpl allows you to have your js code be free of HTML. Normally it never happens but
it is good to strive for it.
Note: you can also use string concatenation, its less readable. You can also use dojo dom object creation api's but its brutally verbose and its more unreadable.

==== Create pieces dynamically (using string concatenation) ====

'''Ingredients:''' ggg.js

<pre>
div = "<div class='meeple_"+color+"'></div>";
</pre>

or modern way

<pre>
div = `<div class='meeple_${color}'></div>`;
</pre>

==== Create all pieces statically ====

'''Ingredients:''' ggg_ggg.tpl, ggg.css, ggg.view.php (optional)

* Create ALL game pieces in html template (.tpl)
* ALL pieces should have unique id, and it should be meaningful, i.e. meeple_red_1
* Do not use inline styling
* Id of player's specific pieces should use some sort of 'color' identification, since player id cannot be used in static layout, you can use english color name, hex 6 char value, or color "number" (1,2,3...)
* Pieces should have separated class for its color, type, etc, so it can be easily styled in groups. In example below you now can style all meeples, all red meeples or all red tokens, or all "first" meeples

ggg.tpl:
<pre>
<div id="home_red" class="home_red home">
<div id="meeple_red_1" class="meeple red n1"></div>
<div id="meeple_red_2" class="meeple red n2"></div>
</div>
</pre>

ggg.css:

<pre>
.meeple {
width: 32px;
height: 39px;
background-image: url(img/78_64_stand_meeples.png);
background-size: 352px;
}

.meeple.red {
background-position: 30% 0%;
}
</pre>

* There should be straight forward mapping between server id and js id (or 1:1)
* You place objects in different zones of the layout, and setup css to take care of layout

<pre>
.home .meeple{
display: inline-block;
}
</pre>
* If you need to have a temporary object that look like original you can use dojo.clone (and change id to some temp id)
* If there is lots of repetition or zone grid you can use template generator, but inject style declaration in css instead of inline style for flexibility

Note:
* If you use this model you cannot use premade js components such as Stock and Zone
* You have to use alternative methods of animation (slightly altered) since default method will leave object with inline style attributes which you don't need

==== Use player color in template ====

NOTE: view.php is deprecated, its best to generate html from .js

'''Ingredients:''' ggg_ggg.tpl, ggg.view.php

.view.php:
<pre>
function build_page($viewArgs) {
// Get players & players number
$players = $this->game->loadPlayersBasicInfos();
$players_nbr = count($players);
/**
* ********* Place your code below: ***********
*/

// Set PCOLOR to the current player color hex
global $g_user;
$cplayer = $g_user->get_id();
if (array_key_exists($cplayer, $players)) { // may be not set if spectator
$player_color = $players [$cplayer] ['player_color'];
} else {
$player_color = 'ffffff'; // spectator
}
$this->tpl ['PCOLOR'] = $player_color;
</pre>

=== Status bar ===

==== Changing state prompt ====

State prompt is message displayed for player which usually comes from state description.
Sometimes you want to change it without changing state (one way is change state but locally, see client states above).

Simple way just change the html
<pre>
setMainTitle: function(text) {
$('pagemaintitletext').innerHTML = text;
},
// usage
onMeeple: function(event) {
//...
this.setMainTitle(_('You must select where meeple is going'));
},
</pre>

This however will not work with parameters and will not draw You in color, if you want this its more sophisticated:

<pre>
setDescriptionOnMyTurn : function(text) {
this.gamedatas.gamestate.descriptionmyturn = text;
var tpl = dojo.clone(this.gamedatas.gamestate.args);
if (tpl === null) {
tpl = {};
}
var title = "";
if (this.isCurrentPlayerActive() && text !== null) {
tpl.you = this.divYou();
}
title = this.format_string_recursive(text, tpl);

if (!title) {
this.setMainTitle(" ");
} else {
this.setMainTitle(title);
}
},
</pre>

Note: this method uses '''setMainTitle''' defined above and '''divYou''' defined in another section of this wiki.

=== Animation ===

==== Attach to new parent without destroying the object ====

BGA function attachToNewParent for some reason destroys the original, if you want similar function that does not you can use this
ggg.js

<pre>
/**
* This method will attach mobile to a new_parent without destroying, unlike original attachToNewParent which destroys mobile and
* all its connectors (onClick, etc)
*/
attachToNewParentNoDestroy: function (mobile_in, new_parent_in, relation, place_position) {

const mobile = $(mobile_in);
const new_parent = $(new_parent_in);

var src = dojo.position(mobile);
if (place_position)
mobile.style.position = place_position;
dojo.place(mobile, new_parent, relation);
mobile.offsetTop;//force re-flow
var tgt = dojo.position(mobile);
var box = dojo.marginBox(mobile);
var cbox = dojo.contentBox(mobile);
var left = box.l + src.x - tgt.x;
var top = box.t + src.y - tgt.y;

mobile.style.position = "absolute";
mobile.style.left = left + "px";
mobile.style.top = top + "px";
box.l += box.w - cbox.w;
box.t += box.h - cbox.h;
mobile.offsetTop;//force re-flow
return box;
},
</pre>

==== Animation on oversurface ====
If you use non-absolute position for your game elements (i.e you use layouts) - you cannot really use BGA animation functions. After years of fidding with different options I use
techique which I call animation on oversurface that works when parents use different zoom, rotation, etc

* You need another layer on top of everything - oversurface
* We create copy of the object on oversurface - to move
* We move the real object on final position - but make it invisible for now
* We move the phantom to final position applying required zoom and rotation (using css animation), then destroy it
* When animation is done we make original object visible in new position

The code is bit complex it can be found here

https://codepen.io/VictoriaLa/pen/gORvdJo

Game using it: century, ultimaterailroads

==== Scroll element into view ====
Ingredients: game.js

This function will scroll given node (div) into view and respect replays and archive mode

<pre>
scrollIntoViewAfter: function (node, delay) {
if (this.instantaneousMode || this.inSetup) {
return;
}
if (typeof g_replayFrom != "undefined") {
$(node).scrollIntoView();
return;
}
if (!delay) delay = 0;
setTimeout(() => {
$(node).scrollIntoView({ behavior: "smooth", block: "center" });
}, delay);
},
</pre>

=== Logs ===

==== Inject icon images in the log ====

Here is an example of what was done for Terra Mystica which is simple and straightforward:

<pre>
//Define the proper message
$message = clienttranslate('${player_name} gets ${power_income} via Structures');
if ($price > 0) {
$this->DbQuery("UPDATE player SET player_score = player_score - $price WHERE player_id = $player_id");
$message = clienttranslate('${player_name} pays ${vp_price} and gets ${power_income} via Structures');
}

// Notify
$this->notify->all( "powerViaStructures", $message, array(
'i18n' => array( ),
'player_id' => $player_id,
'player_name' => $this->getUniqueValueFromDb( "SELECT player_name FROM player WHERE player_id = $player_id" ),
'power_tokens' => $power_tokens,
'vp_price' => $this->getLogsVPAmount($price),
'power_income' => $this->getLogsPowerAmount($power_income),
'newScore' => $this->getUniqueValueFromDb( "SELECT player_score FROM player WHERE player_id = $player_id" ),
'counters' => $this->getGameCounters(null),
) );
</pre>

With some functions to have the needed html added inside the substitution variable, such as:

<pre>
function getLogsPowerAmount( $amount ) {
return "<div class='tmlogs_icon' title='Power'><div class='power_amount'>$amount</div></div>";
}
</pre>
Note: injecting html from php is not ideal but easy, if you want more clean solution, use method below but it is a lot more sophisticated.

==== Inject images and styled html in the log ====

{{InfoBox|title=Warning — Translation|maxWidth=500|color=#c00|body='''In order to prevent interference with the translation process, keep in mind that you must only apply modifications to the args object, and not try to substitute the keys (the <code>${player_name}</code> parts of your string) in the log string.'''}}

So you want nice pictures in the game log. What do you do? The first idea that comes to mind is to send html from php in notifications (see method above).

This is a bad idea for many reasons:

* It's bad architecture. ui elements leak into the server, and now you have to manage the ui in multiple places.
* If you decided to change something in the ui in future version, replay logs for old games and tutorials may not work, since they use stored notifications.
* Log previews for old games become unreadable. (This is the log state before you enter the game replay, which is useful for troubleshooting and game analysis.)
* It's more data to transfer and store in the db.
* It's a nightmare for translators.

So what else can you do? You can use client side log injection to intercept log arguments (which come from the server) and replace them with html on the client side. Here are three different method you can use to achieve this.

===== Override <code>this.format_string_recursive()</code> method =====

'''Ingredients:''' ggg.js, ggg.game.php

I use this recipe for '''client side log injection''' to intercept log arguments (which come from the server) and replace them with html on the client side.

[[File:clientloginjection.png|left]]

ggg.js

<pre>

/** Override this function to inject html into log items. This is a built-in BGA method. */

/* @Override */
format_string_recursive : function format_string_recursive(log, args) {
try {
if (log && args && !args.processed) {
args.processed = true;

// list of special keys we want to replace with images
var keys = ['place_name','token_name'];

for ( var i in keys) {
var key = keys[i];
key in args && args[key] = this.getTokenDiv(key, args);

}
}
} catch (e) {
console.error(log,args,"Exception thrown", e.stack);
}
return this.inherited({callee: format_string_recursive}, arguments);
},
</pre>

'''Important:''' In the ''format_string_recursive'' method, the 'args' parameter will only contain arguments passed to it from the notify method in ggg.game.php (see below).

The 'log' parameter is the actual string that is inserted into the logs. You can perform additional js string manipulation on it.

<pre>
getTokenDiv : function(key, args) {
// ... implement whatever html you want here, example from sharedcode.js
var token_id = args[key];
var item_type = getPart(token_id,0);
var logid = "log" + (this.globalid++) + "_" + token_id;
switch (item_type) {
case 'wcube':
var tokenDiv = this.format_block('jstpl_resource_log', {
"id" : logid,
"type" : "wcube",
"color" : getPart(token_id,1),
});
return tokenDiv;

case 'meeple':
if ($(token_id)) {
var clone = dojo.clone($(token_id));

dojo.attr(clone, "id", logid);
this.stripPosition(clone);
dojo.addClass(clone, "logitem");
return clone.outerHTML;
}
break;

default:
break;
}

return "'" + this.clienttranslate_string(this.getTokenName(token_id)) + "'";
},
getTokenName : function(key) {
return this.gamedatas.token_types[key].name; // get name for the key, from static table for example
},
</pre>

Note that in this case the server simply injects token_id as a name, and the client substitutes it for the translated name or the picture.

ggg.game.php:

$this->notify->all('playerLog', clienttranslate('Game moves ${token_name}'), ['token_name'=>$token_id]);

'''Important:''' As noted above, only arguments actually passed by this method are available to the args parameter received in the client-side ''format_string_recursive'' method.

Sometimes it is the case that you want to pass arguments that are not actually included in the output message. For example, suppose we have a method like this:

$this->notify->all('tokenPlaced', clienttranslate('Player placed ${token_name}'), array(
'token_name' => $token_id,
'zone_played' => $zone);

This will output "Player placed ${token_name}" in the log, and if we subscribe to a notification method activated by the "tokenPlaced" event in the client-side code, that method can make use of the 'zone_played' argument.

Now if you want to make some really cool things with game log, most probably you would need more arguments than are included in log message. The problem with that,
it will work at first, but if you reload game using F5 or when the game loads in turn based mode, you will loose your additional parameters, why? Because when game reloads it does not actually send same notifications, it sends special "hitstorical_log" notification where all parameters not listed in the message are removed. In example above, field zone_played would be removed from historical log as it is not included in message of the notification. You can till preserve specific arguments in historical log by adding special field preserve to notification arguments like this:

<pre>
$this->notify->all('tokenPlaced', clienttranslate('Player placed ${token_name}'), array(
'token_name' => $token_id,
'zone_played' => $zone,
'preserve' => [ 'zone_played' ]
);
</pre>

Now you can use zone_played in format_string_recursive even in historical logs.

===== Use <code>:formatFunction</code> option provided by <code>dojo.string.substitute</code> =====

'''Ingredients:''' ggg.js, ggg.game.php, ggg_ggg.tpl, ggg.css

The above method will work in most of the cases, but if you use dotted keys such as <code>${card.name}</code> (which is supported by the framework, for private state args), the key won't be substituted because the <code>key in arg</code> test will fail. If so you need to rely either on this way, or the one after.

'''WARNING:''' using this method on an already advanced project will require you to go through all your notifications to change keys !

Under the hood, the '''this.format_string_recursive()''' function calls the '''dojo.string.substitute''' method which substitutes <code>${keys}</code> with the value provided. If you take a look at the [https://dojotoolkit.org/reference-guide/1.7/dojo/string.html#substitute documentation] and [https://github.com/dojo/dojo/blob/c3ceb017cfa25b703f5662dc83d1c8aae9bc5d81/string.js#L163 source code] you can notice that the key can be suffixed with a colon (<code>:</code>) followed by a function name. This will allow you to specify directly in the substitution string which keys need HTML injection.

First of all, you need to define your formatting function in the ggg.js file:
<pre>
[[ggg.js]]
getTokenDiv : function(value, key) {
//This is only an example implementation, you need to write your own.
//The method should return HTML code
switch (key) {
case 'html_injected_argument1':
return this.format_block('jstpl_HTMLLogElement1',{value: value});
case 'html_injected_argument2':
return this.format_block('jstpl_HTMLLogElement2',{value: value});
...
}
}
</pre>

Obviously you need to define the appropriate templates in the ggg_ggg.tpl file:
<pre>
[[ggg_ggg.tpl]]
let jstpl_HTMLLogElement1 = '<div class="log-element log-element-1-${value}"></div>';
let jstpl_HTMLLogElement2 = '<div class="log-element log-element-2-${value}"></div>';
...
</pre>
And the appropriate classes in ggg.css.

Then you need to add the <code>dojo/aspect</code> module at the top of the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
define([
"dojo", "dojo/_base/declare",
'''<span style="color:green;">"dojo/aspect",</span> //MUST BE IN THIRD POSITION''' (see [[#Including your own JavaScript module (II)|below]])
"ebg/core/gamegui",
"ebg/counter",
], function (dojo, declare, <span style="color:green;">'''aspect'''</span>) {
...

And you also need to add the following code in your <code>contructor</code> method in the ggg.js:

<nowiki>[[ggg.js]]</nowiki>
constructor: function(){

// ... skipped code ...
let gameObject = this; //Needed as the this object in aspect.before will not refer to the game object in which the formatting function resides
aspect.before(dojo.string, "substitute", function(template, map, transform) { //This allows you to modify the arguments of the dojo.string.substitute method before they're actually passed to it
return [template, map, transform, gameObject];
});

Now you're all set to inject HTML in your logs. To actually achieve this, you must specify the function name with the key like so:

<nowiki>[[ggg.game.php]]</nowiki>
$this->notify->all("notificationName", clienttranslate("This log message contains ${plainTextArgument} and the following will receive HTML injection: ${html_injected_argument1:getTokenDiv}"), [
"plainTextArgument" => "some plain text here",
"html_injected_argument1" => "some value used by getTokenDiv",
]);

You're not limited writing only one function, you can write as many functions as you like, and have them each inject a specific type of HTML. You just need to specify the relevant function name after the column in the substitution key.

===== Use <code>transform</code> argument of <code>dojo.string.substitute</code> =====

'''Ingredients:''' ggg.js, ggg.game.php, ggg_ggg.tpl, ggg.css

This method is also relying on the use of <code>dojo.string.substitute</code> by the framework, and will use the <code>transform</code> argument, which, accordting to [https://github.com/dojo/dojo/blob/c3ceb017cfa25b703f5662dc83d1c8aae9bc5d81/string.js#L163 source code] and [https://dojotoolkit.org/reference-guide/1.7/dojo/string.html#substitute documentation] will be run on all the messages going through dojo.string.substitute.

'''WARNING:''' This method will be applied to all strings that go through dojo.string.substitute. As such you must take extra care not to substitute keys that may be used by the framework (i.e. ${id}). In order to do so, a good practise would be to prefix all keys that need substitution with a trigram of the game name.

Since all the keys will be fed to the tranform function, by default, it must return the value, substituted or not per your needs. You can define the function like this in the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
getTokenDiv : function(value, key) {
//This is only an example implementation, you need to write your own.
//The method should return HTML code
switch (key) {
case 'html_injected_argument1':
return this.format_block('jstpl_HTMLLogElement1',{value: value});
case 'html_injected_argument2':
return this.format_block('jstpl_HTMLLogElement2',{value: value});
...
default:
return value; //Needed otherwise regular strings won't appear since since the value isn't returned by the function
}
}

The templates must be defined in the ggg_ggg.tpl file and the corresponding CSS classes in the ggg.css file.

You need to add the following code at the beginning of the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
define([
"dojo", "dojo/_base/declare",
'''<span style="color:green;">"dojo/aspect",</span> //MUST BE IN THIRD POSITION''' (see [[#Including your own JavaScript module (II)|below]])
"ebg/core/gamegui",
"ebg/counter",
], function (dojo, declare, <span style="color:green;">'''aspect'''</span>) {
...

And the following code to the <code>constructor</code> method in ggg.js:

<nowiki>[[ggg.js]]</nowiki>
constructor: function(){
// ... skipped code ...
let transformFunction = dojo.hitch(this, "getTokenDiv"); //Needed as the this object in aspect.before will not refer to the game object in which the formatting function resides
aspect.before(dojo.string, "substitute", function(template, map, transform) {
if (undefined === transform) { //Check for a transform function presence, just in case
return [template, map, transformFunction];
}
});

Then you're all set for log injection, no need to change anything on the PHP side.

==== Processing logs on re-loading ====

You rarely need to process logs when reloading, but if you want to do something fancy you may have to do it after logs are loaded.
Logs are loaded asyncronously so you have to listen for logs to be fully loaded.
Unfortunately there is no direct way of doing it so this is the hack.

'''Hack alert''' - this extends undocumented function and may be broken when framework is updated

'''Ingredients:''' ggg.js

<pre>
/*
* [Undocumented] Override BGA framework functions to call onLoadingLogsComplete when loading is done
@Override
*/
setLoader: function(image_progress, logs_progress) {
this.inherited(arguments); // required, this is "super()" call, do not remove
//console.log("loader", image_progress, logs_progress)
if (!this.isLoadingLogsComplete && logs_progress >= 100) {
this.isLoadingLogsComplete = true; // this is to prevent from calling this more then once
this.onLoadingLogsComplete();
}
},

onLoadingLogsComplete: function() {
console.log('Loading logs complete');
// do something here
},
</pre>

=== Player Panel ===

==== Inserting non-player panel ====

'''Ingredients:''' ggg.js, ggg_ggg.tpl

If you want to insert non-player panel on the right side (for example to hold extra preferences, zooming controls, etc)

this can go pretty much anywhere in template it will be moved later

ggg_ggg.tpl:
<pre>
<div class='player_board_config' id="player_board_config">

<button id="zoom-out" class=" fa fa-search-minus fa-2x config-control"></button>
<button id="zoom-in" class=" fa fa-search-plus fa-2x config-control"></button>
<button id="show-settings" class="fa fa-cog fa-2x config-control "></button>
</div>
</pre>

some hackery required in js

ggg.js:
<pre>
/* @Override */
updatePlayerOrdering() {
this.inherited(arguments);
dojo.place('player_board_config', 'player_boards', 'first');
},
</pre>

=== Images and Icons ===

==== Accessing images from js ====

'''Ingredients:''' ggg.js

<pre>
// your game resources

var my_img = '<img src="'+g_gamethemeurl+'img/cards.jpg"/>';

// shared resources
var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +
text + "</span>";
</pre>

==== High-Definition Graphics ====

Some users will have screens which can display text and images at a greater resolution than the usual 72 dpi, e.g. the "Retina" screens on the 5k iMac, all iPads, and high-DPI screens on laptops from many manufacturers. If you can get art assets at this size, they will make your game look extra beautiful. You ''could'' just use large graphics and scale them down, but that would increase the download time and bandwidth for users who can't display them. Instead, a good way is to prepare a separate graphics file at exactly twice the size you would use otherwise, and add "@2x" at the end of the filename, e.g. if pieces.png is 240x320, then pieces@2x.png is 480x640.

There are two changes required in order to use the separate graphics files. First in your css, where you use a file, add a media query which overrides the original definition and uses the bigger version on devices which can display them. Ensuring that the "background-size" attribute is set means that the size of the displayed object doesn't change, but only is drawn at the improved dot pitch.
<pre>
.piece {
position: absolute;
background-image: url('img/pieces.png');
background-size:240px 320px;
z-index: 10;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
.piece {
background-image: url('img/pieces@2x.png');
}
}
</pre>

Secondly, in your setup function in javascript, you must ensure than only the appropriate one version of the file gets pre-loaded (otherwise you more than waste the bandwidth saved by maintaining the standard-resolution file). Note that the media query is the same in both cases:
<pre>
var isRetina = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
if (window.matchMedia(isRetina).matches)
{
this.dontPreloadImage( 'pieces.png' );
this.dontPreloadImage( 'board.jpg' );
}
else
{
this.dontPreloadImage( 'pieces@2x.png' );
this.dontPreloadImage( 'board@2x.jpg' );
}
</pre>

==== Using CSS to create different colors of game pieces if you have only white piece ====

<pre>
background-color: #${color};
background-blend-mode: multiply;
background-image: url( 'img/mypiece.png');
mask: url('img/mypiece.png');
-webkit-mask: url('img/mypiece.png');
</pre>

where ${color} - is color you want

Note: piece has to be white (shades of gray). Sprite can be used too, just add add background-position as usual.

==== Accessing player avatar URLs ====

<pre>
getPlayerAvatar(playerId) {
let avatarURL = '';

if (null != $('avatar_' + playerId)) {
let smallAvatarURL = dojo.attr('avatar_' + playerId, 'src');
avatarURL = smallAvatarURL.replace('_32.', '_184.');
}
else {
avatarURL = 'https://x.boardgamearena.net/data/data/avatar/default_184.jpg';
}

return avatarURL;
},
</pre>

Note: This gets avatar URLs at 184x184 resolution. You can also use 92, 50, and 32 depending on which resolution you want.

==== Adding Image buttons ====

Its pretty trivial but just in case you need a working function:

ggg.js:
<pre>
addImageActionButton: function (id, div_html, handler) { // div_html is string not node
this.addActionButton(id, div_html, handler, '', false, 'gray');
dojo.style(id, "border", "none"); // remove ugly border
dojo.addClass(id, "bgaimagebutton"); // add css class to do more styling
return $(id); // return node for chaining
},

</pre>
Example of usage:
<pre>
this.addImageActionButton('button_coin',"<div class='coin'></div>", ()=>{ alert('Ha!'); });
</pre>

=== Other Fluff ===

==== Use thematic fonts ====

'''Ingredients:''' ggg.css

Sometime game elements use specific fonts of text, if you want to match it up you can load some specific font (IMPORTANT: from some '''free font''' source. See notes below).

[[File:Dragonline_font.png]]

.css
<pre>
/* latin-ext */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: 400;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/2Dy1Unur1HJoklbsg4iPJ_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: normal;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/gThgNuQB0o5ITpgpLi4Zpw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: normal;
src: local('Qwigley'), local('Qwigley-Regular'), url(http://ff.static.1001fonts.net/q/w/qwigley.regular.ttf) format('ttf');
}

.zone_title {
display: inline-block;
position: absolute;
font: italic 32px/32px "Qwigley", cursive;
height: 32px;
width: auto;
}
</pre>

'''NB:''' if you need to include a font that's not available online, an extra action will be needed from an admin. Please include the font file(s) in your img directory, and mention it to admins when requesting your game to be moved to alpha. '''Please remember that the font has to be free, and include a .txt with all appropriate license information about the font.'''
You can look for free fonts (for example) on https://fonts.google.com or https://www.fontsquirrel.com/)

'''Content Security Policy'''

BGA runs a Content Security Policy which will limit the origins from which you can load external fonts, in order to prevent license abuse.

The CSP is a whitelist of allowed origins. To see the list, view the response headers of any page on Studio, and look for the "Content-Security-Policy" header.

You will specifically want to check for the font-src token within these headers, and limit any external fonts to these sources.

'''This list is subject to change''' but as of the time of writing, the only acceptabled external sites are use.typekit.net and fonts.gstatic.com.

=== Scale to fit for big boards ===

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Lets say you have huge game board, and lets say you want it to be 1400px wide. Besides the board there will be side bar which is 240 and trim.
My display is 1920 wide so it fits, but there is big chance other people won't have that width. What do you do?

You have to decide:
* If board does not fit you want scale whole thing down, the best way is probably use viewport (see https://en.doc.boardgamearena.com/Your_game_mobile_version)
* You can leave the board as is and make sure it is scrollable horizonatally
* You add custom scale just for the board (can add user controls - and hook to transform: scale())

I tried to auto-scale but this just does work, too many variables - browser zoom, 3d mode, viewport, custom bga scaling, devicePixelRatio - all create some impossible coctail of zooming...
Here is scaling functing for custom user scaling

ggg_ggg.tpl:
<pre>
<div id="thething" class="thething">
... everything else you declare ...
</div>
</pre>

ggg.js:
<pre>
onZoomPlus: function() {
this.setZoom(this.zoom + 0.1);
},
onZoomMinus: function() {
this.setZoom(this.zoom - 0.1);
},

setZoom: function (zoom) {
zoom = parseInt(zoom) || 0;
if (zoom === 0 || zoom < 0.1 || zoom > 10) {
zoom = 1;
}
this.zoom = zoom;
var inner = document.getElementById("thething");

if (zoom == 1) {
inner.style.removeProperty("transform");
inner.style.removeProperty("width");
} else {
inner.style.transform = "scale(" + zoom + ")";
inner.style.transformOrigin = "0 0";
inner.style.width = 100 / zoom + "%";
}
localStorage.setItem(`${this.game_name}_zoom`, "" + this.zoom);
this.onScreenWidthChange();
},
</pre>

=== Dynamic tooltips ===

If you really need a dynamic tooltip you can use this technique. (Only use it if the static tooltips provided by the BGA framework are not sufficient.)

new dijit.Tooltip({
connectId: ["divItemId"],
getContent: function(matchedNode){
return "... calculated ...";
}
});

This is an out-of-the-box djit.Tooltip. It has a ''getContent'' method which is called dynamically.

The string returned by getContent() becomes the innerHTML of the tooltip, so it can be anything. In this example matchedNode is a dojo node representing dom object with id of "divItemId" but there are more parameters which I am not posting here which allows more sophisticated subnode queries (i.e. you can attach tooltip to all nodes with class or whatever).

[https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip.html dijit.Tooltip]

It's not part of the BGA API so use at your own risk.

=== Rendering text with players color and proper background ===

'''Ingredients:''' ggg.js

<pre>
/* Implementation of proper colored You with background in case of white or light colors */

divYou: function() {
var color = this.gamedatas.players[this.player_id].color;
var color_bg = "";
if (this.gamedatas.players[this.player_id] && this.gamedatas.players[this.player_id].color_back) {
color_bg = "background-color:#" + this.gamedatas.players[this.player_id].color_back + ";";
}
var you = "<span style=\"font-weight:bold;color:#" + color + ";" + color_bg + "\">" + __("lang_mainsite", "You") + "</span>";
return you;
},

/* Implementation of proper colored player name with background in case of white or light colors */

divColoredPlayer: function(player_id) {
var color = this.gamedatas.players[player_id].color;
var color_bg = "";
if (this.gamedatas.players[player_id] && this.gamedatas.players[player_id].color_back) {
color_bg = "background-color:#" + this.gamedatas.players[player_id].color_back + ";";
}
var div = "<span style=\"color:#" + color + ";" + color_bg + "\">" + this.gamedatas.players[player_id].name + "</span>";
return div;
},
</pre>

=== Cool realistic shadow effect with CSS ===

==== Rectangles and circles ====

It is often nice to have a drop shadow around tiles and tokens, to separate them from the table visually. It is very easy to add a shadow to rectangular elements, just add this to your css:

<pre>
.xxx-tile {
box-shadow: 3px 3px 3px #000000a0;
}
</pre>

box-shadow obeys '''border-radius''' of the element, so it will look good for rounded rectangles, and hence also circles (if border-radius is set appropriately).

box-shadow also supports various other parameters and can be used to achieve effects such as glowing, borders, inner shadows etc. If you need to animate a box-shadow, you may be able to get better performance (avoiding redraws) if you attach the shadow to another element (possibly an ::after pseudo-element) and change only the '''opacity''' of that element.

==== Irregular Shapes ====

If you wish to make a shadow effect for game pieces that are not a rectangle, but your game pieces are drawn from rectangles in a PNG image, you can apply the shadow to the piece using any art package and save it inside the image. This usually will yield the best performance. Remember to account for the size of the shadow when you lay out images in the sprite sheet.

However that sometimes will not be an option, for example if the image needs to be rotated while the shadow remains offset in the same direction. In this case, one option is to not use box-shadow but use filter, which is supported by recent major browsers. This way, you can use the alpha channel of your element to drop a shadow. This even work for transparent backgrounds, so that if you are using the "CSS-sprite" method, it will work!

For instance:

<pre>
.xxx-token {
filter: drop-shadow(0px 0px 1px #000000);
}
</pre>

Beware that some browsers still do not always draw drop-shadow correctly. In particular, Safari frequently leaves bits of shadow behind when objects move around the screen. In Chrome, shadows sometimes flicker badly if another element is animating close by. Some of these correctness issues can be solved by adding '''isolation: isolate; will-change: filter;''' to affected elements, but this significantly affects redraw performance.

Beware of performance issues - particularly on Safari (MacOS, iPhone and iPad). Keep in mind that drop-shadow are very GPU intensive. This becomes noticeable once you have about 40 components with drop-shadow filter. If that is your case, you can quite easily implement a user preference to disable shadows for users on slower machines:

gameoptions.inc.php
<pre>
100 => array(
'name' => totranslate('Shadows'),
'needReload' => true, // after user changes this preference game interface would auto-reload
'values' => array(
1 => array( 'name' => totranslate( 'Enabled' ), 'cssPref' => '' ),
2 => array( 'name' => totranslate( 'Disabled' ), 'cssPref' => 'no-shadow' )
)
),
</pre>

[game].css
<pre>
.no-shadow * {
filter: none !important;
}
</pre>For Safari, it is usually better to simply disable drop-shadow completely: [[Game interface stylesheet: yourgamename.css#Warning: using drop-shadow]].

==== Shadows with clip-path ====

For some reason, a shadow will not work together with clip-path on one element. To use both clip-path (when for example using .svg to cut out cardboard components from your .jpg spritesheet) and drop-shadow, you need to wrap the element into another one, and apply drop-shadow to the outer one, and clip-path to the inner one.

<pre>
<div class='my-token-wrap'>
<div class='my-token'>
</div>
</div>
</pre>
<pre>
.my-token-wrap {
filter: drop-shadow(0px 0px 1px #000000);
}
.my-token-wrap .my-token {
clip-path: url(#my-token-path);
}
</pre>

=== Using the CSS classes from the state machine ===

If you need to hide or show stuff depending on the state of your game, you can of course use javascript, but CSS is hand enough for that. The #overall-content element does change class depending on the game state. For instance, if you are in state ''playerTurn'', it will have the class ''gamestate_playerTurn''.

So now, if you want to show the discard pile only during player turns, you may use:

<pre>
#discard_pile { display: none }
.gamestate_playerTurn #discard_pile { display: block }
</pre>

This can be used if you want to change sizing of elements, position, layout or visual appearance.

== Game Model and Database design ==

=== Database for The euro game ===
Lets say we have a game with workers, dice, tokens, board, resources, money and vp. Workers and dice can be placed in various zones on the board, and you can get resources, money, tokens and vp in your home zone. Also tokens can be flipped or not flipped.

[[File:Madeira board.png]]

Now lets try to map it, we have
* (meeple,zone)
* (die, zone, sideup)
* (resource cube/money token/vp token,player home zone)
* (token, player home zone, flip state)
We can notice that resource and money are uncountable, and don't need to be track individually so we can replace our mapping to
* (resource type/money,player home zone, count)
And vp stored already for us in player table, so we can remove it from that list.

Now when we get to encode it we can see that everything can be encoded as (object,zone,state) form, where object and zone is string and state is integer. The resource mapping is slightly different semantically so you can go with two table, or counting using same table with state been used as count for resources.

So the piece mapping for non-grid based games can be in most case represented by (string: token_key, string: token_location, int: token_state), example of such database schema can be found here: [https://github.com/elaskavaia/bga-sharedcode/blob/master/dbmodel.sql dbmodel.sql] and class implementing access to it here [https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php table.game.php].

Variant 1: Minimalistic

CREATE TABLE IF NOT EXISTS `token` (
`token_key` varchar(32) NOT NULL,
`token_location` varchar(32) NOT NULL,
`token_state` int(10),
PRIMARY KEY (`token_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|meeple_red_1
|home_red
|0
|-
|dice_black_2
|board_guard
|1
|-
|dice_green_1
|board_action_mayor
|3
|-
|bread
|home_red
|5
|}

Now how we represent resource counters such as bread?
Using same table from we simply add special counter token for bread and use state to indicate the count. Note to keep first column unique we have to add player identification for that counter, i.e. ff0000 is red player.

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|bread_ff0000
|tableau_ff0000
|5
|}

See php module for this table here https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php

Variant 2: Additional resource table, resource count for each player id

CREATE TABLE IF NOT EXISTS `resource` (
`player_id` int(10) unsigned NOT NULL,
`resource_key` varchar(32) NOT NULL,
`resource_count` int(10) signed NOT NULL,
PRIMARY KEY (`player_id`,`resource_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE resource ADD CONSTRAINT fk_player_id FOREIGN KEY (player_id) REFERENCES player(player_id);

{| class="wikitable"
|+resource
! player_id
! resource_key
! resource_count
|-
|123456
|bread
|5
|}

Variant 3: More normalised

This version is similar to "card" table from hearts tutorial, you can also use exact cards database schema and Deck implementation for most purposes (even you not dealing with cards).

CREATE TABLE IF NOT EXISTS `token` (
`token_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`token_type` varchar(16) NOT NULL,
`token_arg` int(11) NOT NULL,
`token_location` varchar(32) NOT NULL,
`token_state` int(10),
PRIMARY KEY (`token_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

{| class="wikitable"
|+token
! token_id
! token_type
! token_arg
! token_location
! token_state
|-
|22
|meeple
|123456
|home_123456
|0
|-
|23
|dice
|2
|board_guard
|1
|-
|26
|dice
|1
|board_action_mayor
|3
|-
|49
|bread
|0
|home_123456
|5
|}

Advantages of this would be is a bit more straightforward to do some queries in db, disadvantage its hard to read (as you can compare with previous example, you
cannot just look at say, ah I know what it means). Another questionable advantage is it allows you to do id randomisation, so it hard to do crafted queries to
cheat, the down side of that you cannot understand it either, and handcraft db states for debugging or testing.

=== Database for The card game ===

Lets say you have a standard card game, player have hidden cards in hand, you can draw card from draw deck, play card on tableau and discard to discard pile.
We have to design database for such game.

In real word to "save" the game we take a picture a play area, save cards from it, then put away draw deck, discard and hand of each player separately and mark it, also we will record current scoring (if any) and who's turn was it.

* Framework handles state machine transition, so you don't have to worry about database design for that (i.e. who's turn it is, what phase of the game we are at, you still have to design it but part of state machine step)
* Also framework supports basic player information, color, order around the table, basic scoring, etc, so you don't have to worry about it either
* The only thing you need in our database is state of the "board", which is "where each pieces is, and in what state", or (position,rotation) pair.

Lets see what we have for that:
* The card state is very simple, its usually "face up/face down", "tapped/untapped", "right side up/up side down"
* As position go we never need real coordinates x,y,z. We need to know what "zone" card was, and depending on the zone it may sometimes need an extra "z" or "x" as card order. The zone position usually static or irrelevant.
* So our model is: we have cards, which have some attributes, at any given point in time they belong to a "zone", and can also have order and state
* Now for mapping we should consider what information changes and what information is static, later is always candidate for material file
* For dynamic information we should try to reduce amount of fields we need
** we need at least a field for card, so its one
** we need to know what zone cards belong to, its 2
** and we have possibly few other fields, if you look closely at you game you may find out that most of the zone only need one attribute at a time, i.e. draw pile always have cards face down, hand always face up, also for hand and discard order does not matter at all (but for draw it does matter). So in majority of cases we can get away with one single extra integer field representing state or order
* In real database both card and zone will be integers as primary keys referring to additional tables, but in our case its total overkill, so they can be strings as easily

Variant 1: Minimalistic

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

Variant 2: More normalised

This version supported by Deck php class, so unless you want to rewrite db access layer go with this one

<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: if you using this schema, some zones/locations have special semantic. The 'hand' location is actually multiple locations - one per player, but player id is encoded as card_location_arg. If 'hand' in your game is ordered, visible or can have some other card states, you cannot use hand location (replacement is hand_<player_id> or hand_<color_id>)

== Game Elements ==

=== Resource ===

A game resource, such as "wood," is usually infinite and represented by a count allocated to a specific player or supply.

If a resource can be placed on location, use the "Meeple" model described below.

For a working example, you can check out: [https://codepen.io/VictoriaLa/pen/emYgLzR CodePen Example] (ui only).

==== Representation in Database ====
In a minimalistic "tokens" database, it would look like this (e.g., the red player has 3 wood):

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|wood_ff0000
|
|3
|-
|wood_supply
|
|40
|}

The second row you need to store the resource in the supply (if it's counted).

If you don't like this solution can use bga_globals table for this or create your own resource table.

Its not recommened to extend player table to store this information.

==== Representation in Material File (material.inc.php) ====
In the material file, you can define some information about resources. For instance, you can specify that it's of type "resource" and call it "Wood" in English, along with a tooltip:
<pre>
$this->token_types = [
...
'wood' => [
'name' => clienttranslate('Wood'),
'tooltip' => clienttranslate('Game resource used for building houses'),
'type' => 'resource',
'max' => 40
]
];
</pre>

==== HTML Representation ====
In HTML, this would look something like this within the player panel. Using the data attribute instead of a CDATA value is much more flexible:
<pre>
<div id="wood_ff0000" class="resource wood" data-value="3"></div>
</pre>

==== JavaScript Handling ====
When you get the object from the server, one of the tokens will be sent in the array like this:
<pre>
token = {
key: 'wood_ff0000',
location: '-',
state: '3'
}
</pre>

You can create a corresponding `<div>` in the `setup()` method of `game.js` as follows:
<pre>
const playerColor = token.key.split('_')[1];
const resType = token.key.split('_')[0];
const tokenInfo = this.gamedatas.token_types[resType]; // token_types is the structure from the material file sent to the client
const div = `<div id="${token.key}" class="${resType} ${tokenInfo.type} ${token.key}" data-value="${token.state}"></div>`;

if (playerColor != 'supply') {
document.querySelector(`#player_board_${this.getPlayerIdByColor(playerColor)} > .player-board-game-specific-content`).insertAdjacentHTML('beforeend',div);
this.addTooltip(token.key, _(tokenInfo.name) + " " + _(tokenInfo.tooltip), "");
}
</pre>

When you receive an update notification (assuming you get the same "token" object), you can simply update the `data-value`:
<pre>
document.querySelector(`#${token.key}`).dataset.value = token.state;
</pre>

To display the resource in the game log, you can format it like this:
<pre>
Player gains <div class="resource wood" data-value="1"></div>
</pre>
For more on injecting icon images in the log, see: [[BGA_Studio_Cookbook#Inject_icon_images_in_the_log]]

==== Graphic Representation (.css) ====
To properly display the resource image, it is preferable to use an image sprite that includes all resources,
usually it will be .png as these objects have shape.
This how will .css look like with horizontal sprite image:

<pre>
.resource {
background-image: url(https://en.doc.boardgamearena.com/images/d/d3/Cubes.png);
background-repeat: no-repeat;
background-size: cover; /* auto-scale */
aspect-ratio: 1/1; /* that will keep heigh in sync */
width: 32px; /* default size, specific location should override */
}

.wood {
/* Since the sprite is a horizontal row of 11 cubes and 9 is the brown cube position */
background-position: calc(100% / (11 - 1) * 9) 0%;
}
</pre>

To show a text overlay with the resource value, you can use the following CSS:
<pre>
.resource[data-value]:after {
content: attr(data-value);
width: 100%;
height: 100%;
position: absolute;
font-size: xx-large;
text-align: center;
text-shadow: 2px 0 2px #fff, 0 -2px 2px #fff, 0 2px 2px #fff, -2px 0 2px #fff;
}
</pre>

This solution is fully scalable — you only need to specify the size where you want it displayed.
For example:
<pre>
.player_board_content > .resource {
width: 40px;
position: relative;
}
</pre>

Note: if you have that board that tracks the resource on resource tracker - you can show this IN ADDITION of showing resource on player panel.

==== Selection and Actions ====
It is best to put buttons with resource images on the status bar, rather than having the player click on the player panel.

For animation:
* Can use move animation to animate resourced gained or played from the board location to the player panel
* Can use "vapor" animation to show resource gained from the board

=== Meeple ===

A meeple is a game piece, typically representing a "worker," depicted as a human-shaped figure in a specific color assigned to a player.

The key distinction between meeples and traditional resources is that meeples are placed on locations and can exist
in at least two states — standing or lying down.

This concept also applies to similar pieces like "houses," "animeeples," "ships," and others.

==== Representation in Database ====
In a simplified "tokens" database, it might be represented like this
(e.g., the red player's first meeple is on action spot 1, while the white meeple remains in supply):

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|meeple_ff0000_1
|actionspot_1
|1
|-
|meeple_ffffff_1
|supply
|0
|}

==== Representation in Material File (material.inc.php) ====

Here we define some properties, for example name can be used in notification and as tooltip, type can be used to create the div by
javascript, 'create' - can be used by server to create 8 meeples of this type in database and set location to 'supply_ff0000'

<pre>
$this->token_types = [
...
'meeple_ff0000' => [
'name' => clienttranslate('Red Worker'),
'type' => 'meeple meeple_ff0000',
'create' => 8,
'location' => 'supply_ff0000'
]
];
</pre>

==== HTML Representation ====
In HTML, this would look something like this.
<pre>
<div id="meeple_ff0000_1" class="meeple meeple_ff0000" data-state="1"></div>
</pre>

==== JavaScript Handling ====
When you get the object from the server, each meeple object will be similar to this:
<pre>
meeple = {
key: 'meeple_ff0000_1',
location: 'actionslot_1',
state: '1'
}
</pre>

You can create a corresponding `<div>` in the `setup()` method of `game.js` as follows:
<pre>
const playerColor = token.key.split('_')[1];
const resType = token.key.split('_')[0];
const tokenInfo = this.gamedatas.token_types[resType]; // token_types is the structure from the material file sent to the client
const div = `<div id="${token.key}" class="${tokenInfo.type} ${token.key}" data-state="${token.state}"></div>`;

$(token.location).insertAdjacentHTML('beforeend',div);
this.addTooltip(token.key, _(tokenInfo.name) + " " + _(tokenInfo.tooltip), "");
$(token.key).addEventListener('onclick',(ev)=>this.onMeepleClick(ev));

</pre>

When you receive an update notification (assuming you get the same "token" object), you either create it if not exists or animate:
<pre>
if ($(token.key)) {
// exists
$(token.key).dataset.state = token.state; // update state
this.moveToken(token.key, token.location); // animate to new location (custom functon), see [[BGA_Studio_Cookbook#Animation]]
} else {
// crate meeple using code in previous section
}

</pre>

==== Graphic Representation (.css) ====

Use same sprite technique from Resource section above.

When placed on the board it will look good with shadow, but its not recommended on mobile

filter: drop-shadow(black 5px 5px 5px);

To represent "laying down" meeple, you have to use a different sprite image, which you will apply based on data attribute

<pre>
.meeple[data-state="1"] {
background-image: url(...);
}
</pre>

You can also rotate you div, but it will look lame.
Other options include changing its shading, adding overlay (i.e. sad face) and so on.

==== Selection and Actions ====
To show user that meeple is active it best to use drop-shadow as image as non-square, however this may be very slow.
For simplier case use box shadow.

<pre>
.active_slot {
filter: drop-shadow(0px 0px 10px blue);
cursor: pointer;
}

/* draw a circle around game element for selection */
.active_slot_simple:after {
content: " ";
width: 110%;
top: -5%;
left: -5%;
aspect-ratio: 1/1;
position: absolute;
border-radius: 50%;
box-shadow: 0px 0px 4px 3px #64b4ff;
}

</pre>

See code example at https://codepen.io/VictoriaLa/pen/emYgLzR

When a meeple is gained from the supply, you can display a meeple icon on the status bar button
instead of showing the supply on the board.

=== Dice ===
The 2D dice can use similar handing as meeple but it has 6 states instead of 2.

IMPORTANT: Never roll dice using javascript. All dice rolling must be done using bga_rand() function in php.

==== Representation in Database ====
In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|die_black
|actionspot_1
|1
|-
|die_red
|supply
|6
|}

==== Representation in Material File (material.inc.php) ====

Similar to resource and meeple above

==== HTML Representation ====

<pre>
<div id="die_black" class="die" data-state="1"></div>
</pre>

==== JavaScript Handling (.js) ====
See meeple section

==== Graphic Representation (.css) ====
For dice we would usually use N x 6 sprite, and since the sides are square - the .jpg format is better (it is smaller then png)

<pre>
.die {
background-image: url(https://en.doc.boardgamearena.com/images/c/c5/64_64_dice.jpg);
background-size: 600%;
background-repeat: no-repeat;
aspect-ratio: 1/1;
width: 64px;
border-radius: 5%; /* looks better with rounded corders */
}
.die[data-state="3"] {
background-position: calc(100% / 5 * 2) 0%;
}
</pre>

The 3D dice a bit tricker to create but its feasible, see https://codepen.io/VictoriaLa/pen/QWBBbwz for an example.

Also multiple examples on N-sided dice can be found on [[BGA_Code_Sharing]]

==== Selection and Actions ====
Since it is a square its a lot easier to make a square selection highlight

<pre>
.die.active_slot {
box-shadow: 0px 0px 4px 4px blue;
}
</pre>

=== Card ===

Cards are the most complex game resource, they can be located in various zones, stacked, tapped, put face down and can have arbitrary complete abilities.
If you have square tiles - it can be treated the same as cards.

==== Representation in Database ====

In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|card_project_123
|tableau_ff0000
|1
|-
|card_corp_p1
|deck_corp
|6
|}

Means project card is player red tableau and state 1 means it has been used for example,
and second card of corproration file in in deck at position 6 from the top.

When duplcates are in play you need to add extra unique disambigator in the key.

Usually cards will have numeric id associated with type, but it this number is per expansition, so leave the space for expansion identifier in there also.

Another option use [[Deck]] component.

==== Representation in Material ====

All the card properties which do not change during the game can be put in material file (or its alternative)

This is example from terraforming mars
<pre>
'card_main_81' => [ //
'location' => 'deck_main',
'create' => 'single',
'num' => 81,
'name' => clienttranslate('Ganymede Colony'),
't' => 1,
'r' => "city('Ganymede Colony')",
'cost' => 20,
'tags' => 'Space City Jovian',
'vp' => 'tagJovian',
'deck' => 'Basic',
'text' => clienttranslate('Place a city tile ON THE RESERVED AREA [for Ganymede Colony].'),
'text_vp' => clienttranslate('1 VP per Jovian tag you have.'),
],
</pre>

==== HTML Representation ====

There is 2 main options:
* Use exact cards images in english
* Use cards images WITHOUT text

The 3d option is completely redo the graphic layout that game designed did already, but I won't go there

The first option is very simple and similar to other resources and meeple

<pre>
<div id="card_project_123" class="card card_project card_project_123" data-state="1"></div>
</pre>

The second option means you can add translated text instead
<pre>
<div id="card_project_123" class="card card_project card_project_123" data-state="1" data-cost="22">
<div class="card_name">Ganymede Colony</div>
<div class="card_text">Place a city tile ON THE RESERVED AREA [for Ganymede Colony].</div>
<div class="card_cost"></div>
</div>
</pre>

In the example above card_cost is also rendered as this can change during the game (even printed value is the same),
it would be rendered using data-cost attribute.

Instead of using class you can also use state even if it is static

<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>

Note: to make flip animation you effectively need to make a "3d" card and provide both faces with separate graphics,
which makes more complex div. See examples at https://thoun.github.io/bga-cards/demo/index.html

Note: you can also use [[Stock]] component that handles html, js, css, layout and selection at the same time. If do that skip sections below.

==== JavaScript Handling (.js) ====
You will get the server data which looks like this

<pre>
card = {
key: 'card_project_123',
location: 'tableau_ff0000',
state: '1'
}
</pre>

<pre>
createCard(token: Token) {
// token_types is the structure from the material file sent to the client
const tokenInfo = this.gamedatas.token_types[token.key];
const div = `
<div id="${token.key}" class="${tokenInfo.type} ${token.key}" data-state="${token.state}">
<div class="card_name">${_(tokenInfo.name)}</div>
<div class="card_text">${_(tokenInfo.text)}</div>
</div>`;

$(token.location).insertAdjacentHTML('beforeend',div);
this.addTooltipHtml(token.key, this.getTooptipHtmlForToken(token));
$(token.key).addEventListener("onclick", (ev) => this.onCardClick(ev));
}
</pre>

When you receive an update notification (assuming you get the same "token" object), you either create it if not exists or animate:
<pre>
if ($(token.key)) {
// exists
$(token.key).dataset.state = token.state; // update state
$(token.key).dataset.cost = token.cost; // update cost (discounted cost)
this.moveCard(token.key, token.location); // animate to new location (custom functon), see [[BGA_Studio_Cookbook#Animation]]
} else {
this.createCard(token);
}
</pre>

==== Graphic Representation (.css) ====

For this html
<pre>
<div id="game" class="classic_deck">
<div id="hand" class="hand">
<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>
<div id="card_C_K" class="card" data-suit='C' data-rank="K"> </div>
</div>
</div>
</pre>

This is example css using sprite image of playing cards
<pre>
.card {
background-image: url('https://x.boardgamearena.net/data/others/cards/FULLREZ_CARDS_ORIGINAL_NORMAL.jpg'); /* don't do full url in your game, copy this file inside img folder */

background-size: 1500% auto; /* this mean size of background is 15 times bigger than size of card, because its sprite */
border-radius: 5%;
width: 10em;
height: 13.5em;
box-shadow: 0.1em 0.1em 0.2em 0.1em #555;
}

.card[data-rank="10"] { /* 10 is column number 10 - 2 because we start from 0 and first card is sprite is 2. The multiplier is (15 - 1) is because we have 15 columns. -1 is because % in CSS is weird like that. */
background-position-x: calc(100% / (15 - 1) * (10 - 2));
}
.card[data-rank="K"] { /* King will be number 13 in rank */
background-position-x: calc(100% / (15 - 1) * (13 - 2));
}
.card[data-suit="H"] { /* Hears row position is 1 (because we count from 0). Multiplier (4 - 1) is because we have 4 rows and -1 is because % in CSS is weird like that. */
background-position-y: calc(100% / (4 - 1) * (1));
}
.card[data-suit="C"] { /* Clubs row position is 2 */
background-position-y: calc(100% / (4 - 1) * (2));
}
</pre>
See code at https://codepen.io/VictoriaLa/pen/mdMzRxa

==== Selection and Actions ====

Since it is a square its a lot easier to make a square selection highlight

<pre>
.card.active_slot {
box-shadow: 0px 0px 4px 4px blue;
}
</pre>

==== Card Layouts ====
There are two options - you use [[Stock]] component or don't, see [[Anti-Stock]] for details on how to do your own layouts.

This is comprehensive example of various card layouts and animations
https://thoun.github.io/bga-cards/demo/index.html

=== Hex Tiles ===
From data perspective hex tiles exactly the same as cards.
From visualization there is a small trick.

CSS:
<pre>
.hex {
width: var(--hex-width);
aspect-ratio: 1 / 1.1193;
border-radius: 30%;
background-color: yellow; /* this is just for demo, use proper .png file for this */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex.active_slot_simple {
background-color: rgba(86, 207, 110, 0.4);
}
.hex.active_slot {
filter: drop-shadow(0px 0px 10px blue);
}
</pre>

=== Tetris Tiles ===
You can use clip-path for actual shape and svg path for outline
See example at https://codepen.io/VictoriaLa/pen/OJmoZGw

=== Track ===

Tracker can be represented as "resource" in database - in this case its just number, or similar to "meeple" in which case
the location will have the "number" associated with position on track

In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|tracker_o
|scale_o_1
|0
|-
|tracker_t
|scale_t_10
|0
|}

The tracker location in this case may have some properties in material file, for example to trigger game effect when we land on this spot

<pre>
'scale_t' => [
'index_start' => 0,
'max' => 20,
'value_start' => -30,
'value_step' => 2,
'slot_type' => 'slot slot_t'
],
'scale_t_10' => [
'r' => 'ocean',
'param' => 't',
'tooltp' => clienttranslate('Place an ocean'),
'value' => 0
],
</pre>

The track in this case can be generated as series of slots (create in js)
<pre>
for(let i=trackInfo.index_start,value = trackInfo.value_start;i<trackInfo.index_start+trackInfo.max;i++,value+=trackInfo.value_step) {
$(trackInfo.key).insertAdjacentHTML('beforeend',`<div id="${trackInfo.key}_${i}" class="${trackInfo.slot_type} data-value=${value}"></div>`);
this.addTooltip(`${trackInfo.key}_${i}`, _(tokenInfo.tooltip), "");
}
</pre>

Then use regular move animation to move tracker into position on track.

== Code Organization ==

=== Including your own JavaScript module ===
'''Ingredients:''' ggg.js, modules/ggg_other.js

* Create ggg_other.js in modules/ folder and sync
<pre>
define([
"dojo", "dojo/_base/declare"
], function( dojo, declare )
{
return declare("bgagame.other", null, { // null here if we don't want to inherit from anything
constructor: function(){},
mystuff: function(){},
});

});

</pre>
* Modify ggg.js to include it

define([ "dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter",
g_gamethemeurl + "modules/ggg_other.js" // load my own module!!!
], function(dojo,
declare) {

use it

foo = new bgagame.other();

=== Including your own JavaScript module (II) ===

* Create ggg_other.js in modules/ folder and sync

define([], function () {
return "value";
});

* Modify ggg.js to include it

define([
"dojo",
"dojo/_base/declare",
"bgagame/modules/ggg_other",
"ebg/core/gamegui",
"ebg/counter"
], function(dojo, declare, other) {

});

This is maybe a little bit more the idea of the AMD Loader than the first option, although the first option should work as well.

A little explanation to this:
The define function loads all the modules listed in the array and calls the following function with these loaded modules as parameters.
By putting your module at the third position in the array it is passed as the third parameter to the function. Be aware that the modules are resolved by position only, not by name. So you can load the module '''ggg_other''' and pass it as a parameter with the name '''other'''. '''gamegui''' and '''counter''' are passed in as well, but when the parameters are not defined they are just skipped. Because these modules put their content into the global scope it does not matter and you can use them from there.

In the example above the string "value" is passed for the parameter '''other''', but the function in your module can return whatever you want. It can be an object, an array, something you declared with dojo.declare, you can return even functions.
Your module can load other modules. Just put them in the array at the beginning and pass them as parameters to your function.
The advantage of passing the values as parameter is that you do not need to put these values in the global scope, so they can't be collisions with values defined in other scripts or the BGA Framework.

The dojo toolkit provides good documentation to all of its components, the complete documentation for the AMD-Loader is here:
https://dojotoolkit.org/documentation/tutorials/1.10/modules/index.html It should be still correct, even as it seems to be only for version 1.10

=== Including your own PHP module ===
'''Ingredients:''' ggg.game.php, modules/ggg_other.php

* Create ggg_other.php in modules/ folder and sync
* Modify ggg.game.php to include it

require_once ('modules/ggg_other.php');

=== Creating a test class to run PHP locally ===

'''Ingredients:''' ggg.game.php, stubs
For this you need stubs of other method you can use this for example
https://github.com/elaskavaia/bga-sharedcode/raw/master/misc/module/table/table.game.php

Create another php files, i.e ggg_test.php
<pre>
<?php
define("APP_GAMEMODULE_PATH", "misc/"); // include path to stubs, which defines "table.game.php" and other classes
require_once ('eminentdomaine.game.php');

class MyGameTest1 extends MyGame { // this is your game class defined in ggg.game.php
function __construct() {
parent::__construct();
include '../material.inc.php';// this is how this normally included, from constructor
}

// override/stub methods here that access db and stuff
function getGameStateValue($var) {
if ($var == 'round')
return 3;
return 0;
}
}
$x = new MyGameTest1(); // instantiate your class
$p = $x->getGameProgression(); // call one of the methods to test
if ($p != 50)
echo "Test1: FAILED";
else
echo "Test1: PASSED";

</pre>

Run from command line like
php8.2 ggg_test.php

If you do it this way - you can also use local php debugger (i.e. integrated with IDE or command line).

=== Avoiding code in dojo declare style ===
Dojo class declarations are rather bizzare and do not work with most IDEs.
If you want to write in plain JS with classes, you can stub all the dojo define/declare stuff
and hook your class into that, so the classes are outside of this mess.

NOTE: this technique is for experienced developers, do not try it if you do not understand
the consequences.

This is complete example of game .js class
<pre>
// Testla is game name is has to be changed
class Testla {
constructor(game) {
console.log('game constructor');
this.game = game;
this.varfoo = new MyFoo(); // this example of class from custom module
}

setup(gamedatas) {
console.log("Starting game setup", this.varfoo);
this.gamedatas = gamedatas;
this.dojo.create("div", { class: 'whiteblock', innerHTML: _("hello") }, 'thething');
console.log("Ending game setup");
};
onEnteringState(stateName, args) {
console.log('onEnteringState : ' + stateName, args);
this.game.addActionButton('b1',_('Click Me'), (e)=>this.onButtonClick(e));
};
onLeavingState(stateName) {
console.log('onLeavingState : ' + stateName, args);
};
onUpdateActionButtons(stateName, args) {
console.log('onUpdateActionButtons : ' + stateName, args);
};
onButtonClick(event) {
console.log('onButtonClick',event);
};
};

define([
"dojo", "dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
g_gamethemeurl + '/modules/foo.js' // custom module if needed
],
function(dojo, declare) {
// testla is game name is has to be changed
return declare("bgagame.testla", ebg.core.gamegui, {
constructor: function() {
this.xapp = new Testla(this);
this.xapp.dojo = dojo;
},
setup: function(gamedatas) {
this.xapp.setup(gamedatas);
},
onEnteringState: function(stateName, args) {
this.xapp.onEnteringState(stateName, args?.args);
},
onLeavingState: function(stateName) {
this.xapp.onLeavingState(stateName, args);
},
onUpdateActionButtons: function(stateName, args) {
this.xapp.onUpdateActionButtons(stateName, args);
},
});
});

</pre>

=== More readable JS: onEnteringState ===

If you have a lot of states in onEnteringState or onUpdateActionButtons and friends - it becomes rather wild, you can do this trick to call some methods dynamically.

<pre>

onEnteringState: function(stateName, args) {
console.log('Entering state: ' + stateName, args);

// Call appropriate method
var methodName = "onEnteringState_" + stateName;
if (this[methodName] !== undefined) {
console.log('Calling ' + methodName, args.args);
this[methodName](args.args);
}
},

onEnteringState_playerTurn: function(args) { // this is args directly, not args.args
// process
},

onEnteringState_playerSomethingElse: function(args) {
// process
},

</pre>

Note: since its ignores the undefined functions you don't have define function for each state, but on the other hand you cannot make typos.
Same applies to onUpdateActionButtons except you pass 'args' to method, not args.args, and for onLeavingState where you don't pass anything.

=== Frameworks and Preprocessors ===

* [[BGA Type Safe Template]] - Setting up a fully typed project using typescript and more!
* [[Using Vue]] - work-in-progress guide on using the modern framework Vue.js to create a game
* [[Using Typescript and Scss]] - How to auto-build Typescript and SCSS files to make your code cleaner

=== PHP Migration ===

'''Ingredients:''' */php, modules/*.php

BGA recently migrated to from 7.4 to 8.2.
New php has new rules and deprecations.

There is a tool that can help you do the migration automation, which is php module called rector https://getrector.com/.
Below is the recipe that converts variables in strings like ${var} (which is deprecated) to {$var}.

1. Install the module
composer global require --dev rector/rector
2. Go to your project directory, commit your code first before this!

3. Create a rector.php file on top level with the following content:
<pre>
<?php

use Rector\Config\RectorConfig;
use Rector\Php82\Rector\Encapsed\VariableInStringInterpolationFixerRector;

return RectorConfig::configure()
->withPaths([
__DIR__
])
// A. whole set
//->withPreparedSets(typeDeclarations: true)
// B. or few rules
->withRules([
VariableInStringInterpolationFixerRector::class
]);
</pre>
4. Dry run (mine is on linux, not sure where global install on windows)
~/.config/composer/vendor/bin/rector process --dry-run

5. If happy re-run without --dry-run

6. Can remove rector.php now (or can do different rules)

== Backend ==

=== Assigning Player Order ===
Normally when game starts there is "natural" player order assigned randomly.

If you want to deliberatly assign player order at the start of the game (for example, in a game with teams options), you can do so by retrieving the initialization-only player attribute '''player_table_order''' and using it to assign values to '''player_no''' (which is normally assigned at the start of a game in the order in which players come to the table). (See [https://en.doc.boardgamearena.com/Game_database_model:_dbmodel.sql#The_player_table Game database model] for more details.)

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
<b>WARNING:</b> To prevent collusion, the random order must be the default option and <b>non-random options should be limited to friendly mode.</b>
</div>

'''Example:'''
<pre>
// Retrieve inital player order ([0=>playerId1, 1=>playerId2, ...])
$playerInitialOrder = [];
foreach ($players as $playerId => $player) {
$playerInitialOrder[$player['player_table_order']] = $playerId;
}
ksort($playerInitialOrder);
$playerInitialOrder = array_flip(array_values($playerInitialOrder));

// Player order based on 'playerTeams' option
$playerOrder = [0, 1, 2, 3];
switch ($this->getGameStateValue('playerTeams')) {
case $this->TEAM_1_2:
$playerOrder = [0, 2, 1, 3];
break;
case $this->TEAM_1_4:
$playerOrder = [0, 1, 3, 2];
break;
case $this->TEAM_RANDOM:
shuffle($playerOrder);
break;
default:
case $this->TEAM_1_3:
// Default order
break;
}

// Create players
// Note: if you added some extra field on "player" table in the database (dbmodel.sql), you can initialize it there.
$sql =
'INSERT INTO player (player_id, player_color, player_canal, player_name, player_avatar, player_no) VALUES ';
$values = [];

foreach ($players as $playerId => $player) {
$color = array_shift($default_colors);
$values[] =
"('" .
$playerId .
"','$color','" .
$player['player_canal'] .
"','" .
addslashes($player['player_name']) .
"','" .
addslashes($player['player_avatar']) .
"','" .
$playerOrder[$playerInitialOrder[$playerId]] .
"')";
}
$sql .= implode(',', $values);
$this->DbQuery($sql);
$this->reattributeColorsBasedOnPreferences(
$players,
$gameinfos['player_colors']
);
$this->reloadPlayersBasicInfos();
</pre>

=== Send different notifications to active player vs everybody else ===

'''Ingredients:''' ggg.js

Hack alert. This is a hack. We were hoping for proper solution by bga framework.

This will allow you to send notification with two message one for specific player and one for everybody else including spectators.
Note that this does not split the data - all data must be shared.

Add this to .js file (if you already overriding it merge obviously)
<pre>
/** @Override */
format_string_recursive: function(log, args) {
if (typeof args.log_others != 'undefined' && typeof args.player_id != 'undefined' && this.player_id != args.player_id)
log = args.log_others;
return this.inherited(arguments); // you must call this to call super
},
</pre>

Example of usage (from eminentdomain)
<pre>
$this->notify->all('tokenMoved',
clienttranslate('${player_name} adds +2 Colonies to ${place_name}'), // notification with show for player with player_id
['player_id'=>$player_id, // this is mandatory
'log_others'=>clienttranslate('${player_name} adds +2 Colonies to an unknown planet'), // notification will show for others
...
]);
</pre>

=== Send transient notifications without incrementing move ID ===

'''Ingredients:''' ggg.php

Hack alert. This is a hack.

Use this if you need to send some transient notification that should not create a new move ID. The notification should be idempotent -- it should have no practical effect on the game state and would be '''safe to drop''' (e.g., it would not matter if a player never received this notification). For example, in a co-op game you want all players to see a real-time preview of some action, before the active player commits their turn.

Doing this mainly affects the instant replay & archive modes. During replay, the BGA framework automatically inserts a 1.5-second pause between each "move". With this hack, your transient notifications are not considered to be a "move", so no pause gets added.

; In ggg.php
<pre>
$this->not_a_move_notification = true; // note: do not increase the move counter
$this->notify->all('cardsPreview', '', $args);
</pre>

Note: you cannot have code that send notification or even changes state after this, and you cannot reset this variable back either because it only takes effect when you exit action handling function

== Assorted Stuff ==

=== Out-of-turn actions: Un-pass ===

'''Ingredients:''' ggg.js, ggg.game.php, ggg.action.php, states.inc.php

In multiplayer game sometimes players passes but than they think more and want to un-Pass and redo their choice.
To re-active a player who passes some trickery required.

Define a special action that does that and hook it up.

In states.inc.php add an action to multipleactiveplayer state to "unpass", lets call it "actionCancel"

In ggg.action.php add action hook
public function actionCancel() {
$this->setAjaxMode();
$this->game->actionCancel();
$this->ajaxResponse();
}

In ggg.game.php add action handler
function actionCancel() {
$this->gamestate->checkPossibleAction('actionCancel');
$this->gamestate->setPlayersMultiactive(array ($this->getCurrentPlayerId() ), 'error', false);
}

Finally to call this in client ggg.js you would do something like:
<pre>
onUpdateActionButtons: function(stateName, args) {
if (this.isCurrentPlayerActive()) {
// ...
} else if (!this.isSpectator) { // player is NOT active but not spectator
switch (stateName) {
case 'playerTurnMultiPlayerState':
this.addActionButton('button_unpass', _('Oh no!'), 'onUnpass');
break;
}
}
}

onUnpass: function(e) {
this.bgaPerformAction("actionCancel", null, { checkAction: false }); // no checkAction!
}
</pre>
Although be careful that if the turn comes back to the player while he is about to click cancel, the action buttons will be updated and the player will misclick which can be quite frustrating. To avoid this, move the cancel button to another position, like to the left of pagemaintitletext:
dojo.place('button_unpass', 'pagemaintitletext', 'before');
Being out of the generalactions div, it won't be automatically destroyed like normal buttons, so you'll have to handle that yourself in onLeavingState. You might also want to change the button color to red (blue buttons for active player only, red buttons also for inactive players?)

Note: same technique can be used to do other out-of-turn actions, such as re-arranging cards in hand, exchanging resources, etc (i.e. if permitted by rules, such as "at any time player can...")

=== Multi Step Interactions: Select Worker/Place Worker - Using Selection ===

'''Ingredients:''' ggg.js

Simple way to implement something like that without extra states is to use "selection" mechanism. When user click on worker add some sort of class into that element i.e. 'selected' (which also have to have some indication by css i.e. outline).

Than user can click on placement zone, you can use dojo.query for "selected" element and use it along with zone id to send data to server. If proper worker is not selected yet can give a error message using this.showMessage(...) function.

Extra code required to properly cleanup selection between states.
Also when you do that sometimes you want to change the state prompt, see below 'Change state prompt'

=== Multi Step Interactions: Select Worker/Place Worker - Using Client States ===

'''Ingredients:''' ggg.js

I don't think its documented feature but there is a way to do client-only states, which is absolutely wonderful for few reasons
* When player interaction is two step process, such as select worker, place worker, or place worker, pick one of two resources of your choice
* When multi-step process can result of impossible situation and has to be undone (by rules)
* When multi-step process is triggered from multiple states (such as you can do same thing as activated card action, pass action or main action)

So lets do Select Worker/Place Worker

Define your server state as usual, i.e. playerMainTurn -> "You must pick up a worker".
Now define a client state, we only need "name" and "descriptionmyturn", lets say "client_playerPicksLocation". Always prefix names of client state with "client_" to avoid confusion. Now we have to do the following:
* Have a handler for onUpdateActionButtons for playerMainTurn to activate all possible workers he can pick
* When player clicks workers, remember the worker in one of the members of the main class, I usually use one called this.clientStateArgs.
* Transition to new client state
onWorker: function(e) {
var id = event.currentTarget.id;
dojo.stopEvent(event);
... // do validity checks
this.clientStateArgs.worker_id = id;
this.setClientState("client_playerPicksLocation", {
descriptionmyturn : _("${you} must select location"),
});
}
* Have a handler for onUpdateActionButtons for client_playerPicksLocation to activate all possible locations this worker can go AND add Cancel button (see below)
* Have a location handler which will eventually send a server request, using stored this.clientStateArgs.worker_id as worker id
* The cancel button should call a method to restore server state, also if you doing it for more than one state you can add this universally using this.on_client_state check

if (this.isCurrentPlayerActive()) {
if (this.on_client_state && !$('button_cancel')) {
this.addActionButton('button_cancel', _('Cancel'), dojo.hitch(this, function() {
this.restoreServerGameState();
}));
}
}
Note: usually I call my own function call this.cancelLocalStateEffects() which will do more stuff first then call restoreServerGameState(), same function is usually needs to be called when server request has failed (i.e. invalid move)

Note: If you need more than 2 steps, you may have to do client side animation to reflect the new state, which gets trickier because you have to undo that also on cancellation.

Code is available here [https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js sharedcode.js] (its using playerTurnPlayCubes and client_selectCubeLocation).

=== Action Stack - Using Client States ===

Action stack required where game is very complex and use triggered effects that can "stack". It not always actual stack, it can be queue or random access.

Examples:
* Magic the Gathering - classic card game where effects go on Stack, that allows to counter spell and counter spell of counter spell (not on bga - it just example of mechanics)
* Ultimate Railroads - action taking game where effects can be executed in any order
* Lewis and Clark - card game where actions executed as queue

There is two ways of implementing it - on the server or the client.
For the server see article below.
The requirement for client side stack implementation is - all action can be undone, which means
* No dice rolls
* No card drawn
* No other players interaction

No snippets are here, as this will be too complex but basically flow is:
* You have a action/effect stack (queue/list) as js object attached to "this", i.e. this.unprocessed_actions
* When player plays a card, worker, etc, you read the effect of that card from the material file (client copy), and place into stack
* Then we call dispatch method which pulls the next action from the stack and change client state accordinly, i.e. this.setClientState("client_playerGainsCubes")
* When players acts on it - the action is removed from the stack and added to "server action arguments" list, this is another object which be used to send ajax call, i.e. this.clientStateArgs
* If nothing left in stack we can submit the ajax call assembling parameters from collected arguments (that can include action name)
* This method allows cheap undo - by restoring server state you will wipe out all user actions (but if you need intermediate aninmation you have to handle it yourself)

Code can be found in Ultimate Railroads game (but it is random access list - so it a bit complex) and Lewis and Clark (complexity - user can always deny part of any effect)

=== Action Stack - Using Server States ===

See definition of Action Stack above.

To implement you usually need another db table that has the following fields: index of effect - which is used for sorted access, type - which is essense of the effect (i.e. collect resource), some extra arguments (i.e. resource type and resource count), and usually owner of the effect (i.e. player id)
The flow is:
* There is some initial player state, where player can play card for example
* Player main action - pushes the card effect on stack, which also can cause triggered effects which also go on stack
* After action processing is finished switch to game state which is "dispatcher"
* Dispatcher pulls the top effect (whatever definition of the top is), changes the active player and changes the state to appropriate player state to collect response. The "top" can be choice of multiple actions, in this case player has to chose one before resolving the effect.
* Player state knows about the stack and pulls arguments (argX) from the effect arguments of the db
* Player action should clear up the top effect, and can possibly add more effects, then switch to "dispatcher" state again
* If stack is empty, dispatcher can either pick next player itself or use another game state which responsible for picking next player

Code can be found in Tapestry and Terraforming Mars.
=== Custom error/exception handling in JavaScript ===

; In ggg.php
Throw BgaUserException with some easy-to-identify prefix such as "!!!" and a custom error code. DO NOT TRANSLATE this message text. The exception will rollback database transaction and cancel all changes (including any notifications).
<pre>
function foo(bool $didConfirm = false): void
{
// do processing for the user's move
// afterwards, you determine this move will end the game
// so you want to rollback the transaction and require the user to confirm the move first

if ($gameIsEnding && !$didConfirm) {
throw new BgaUserException('!!!endGameConfirm', 9001);
}
}
</pre>

; In ggg.js
Override framework function showMessage to suppress the red banner message and gamelog message when you detect the "!!!" prefix
<pre>
/* @Override */
showMessage: function (msg, type) {
if (type == "error" && msg && msg.startsWith("!!!")) {
return; // suppress red banner and gamelog message
}
this.inherited(arguments);
},
</pre>

Deal with the error in your callback:
<pre>
fooAction: function (didConfirm) {
var data = {
foo: "bar",
didConfirm: !!didConfirm,
};
this.bgaPerformAction("fooAction", data).catch((error, errorMsg) => {
if (error && errorMsg == "!!!endGameConfirm") {
// your custom error handling goes here
// for example, show a confirmation dialog and repeat the action with additional param
this.confirmationDialog(
_("Doing the foo action now will end the game"),
() => this.fooAction(true)
);
}
});
},
</pre>

For custom global error handling, you could modify ajaxcallwrapper:
<pre>
ajaxcallwrapper: function (action, args, handler) {
if (!args) args = {};
args.lock = true;
args.version = this.gamedatas.version;
if (this.checkAction(action)) {
this.bgaPerformAction(
action,
args
).catch((error, errorMsg, errorCode) => {
if (error && errorMsg == "!!!checkVersion") {
this.infoDialog(
_("A new version of this game is now available"),
_("Reload Required"),
() => {
window.location.reload();
},
true
);
} else {
if (handler) handler(error, errorMsg, errorCode);
}
}
);
}
},
</pre>

=== Force players to refresh after new deploy ===

When you deploy a new version of your game, the PHP backend code is immediately updated but the JavaScript/HTML/CSS frontend code *does not update* for active players until they manually refresh the page (F5) in their browser. Obviously this is not ideal. In the best case, real-time tables don't see your shiny new enhancements. In the worst case, your old JS code isn't compatible with your new PHP code and the game breaks in strange ways (any bug reports filed will be false positives and unable to reproduce). To avoid any problems, you should force all players to immediately reload the page following a new deploy.

By throwing a "visible" exception (simplest solution), you'll get something like this which instructs the user to reload:

[[File:Force-refresh.png|950x950px]]

Or, if you combine this technique with the above custom error handling technique, you could do something a bit nicer. You could show a dialog box and automatically refresh the page when the user clicks "OK":

[[File:Reload-required.png|500x500px]]
; In ggg.php
Transmit the server version number in <code>getAllDatas()</code>.
<pre>
protected function getAllDatas(): array
{
$players = $this->getCollectionFromDb("SELECT player_id id, player_score score FROM player");
return [
'players' => $players,
'version' => intval($this->gamestate->table_globals[300]), // <-- ADD HERE
...
];
}
</pre>

Create a helper function to fail if the client and server versions mismatch. Note the version check uses <code>!=</code> instead of <code><</code> so it can support rollback to a previous deploy as well. ;-)
<pre>
public function checkVersion(int $clientVersion): void
{
if ($clientVersion != intval($this->gamestate->table_globals[300])) {
// Simplest way is to throw a "visible" exception
// It's ugly but comes with a "click here" link to refresh
throw new BgaVisibleSystemException($this->_("A new version of this game is now available. Please reload the page (F5)."));

// For something prettier, throw a "user" exception and handle in JS
// (see BGA cookbook section above on custom error handling)
throw new BgaUserException('!!!checkVersion');
}
}
</pre>
; In ggg.action.php
Create a helper function for actions:
<pre>
private function checkVersion()
{
$clientVersion = (int) $this->getArg('version', AT_int, false);
$this->game->checkVersion($clientVersion);
}
</pre>

Call <code>$this->checkVersion()</code> at the top of <b>every action function</b>, immediately after <code>$this->setAjaxMode()</code>:
<pre>
public function move()
{
$this->setAjaxMode();
$this->checkVersion(); // <-- ADD HERE
...
$this->ajaxResponse();
}
</pre>

; In ggg.js
Transmit the version (from gamedatas) as a parameter with every ajax call. For example, if you're already using a wrapper function for every ajax call, add it like this:
<pre>
ajaxcallwrapper: function (action, args) {
if (!args) args = {};
args.version = this.gamedatas.version; // <-- ADD HERE
this.bgaPerformAction(action, args);
},
</pre>

=== Disable / lock table creation for new deploy ===

If you are deploying a major new game version, especially if it involves upgrading production game databases, you may have a lot of angry players if you break their tables. Depending on your changes, you may be able to restore the previous version and fix the tables easily.

However, if a new deploy turns out bad and players created turn-based tables while it was live, it may be quite difficult to fix those tables, since they were created from a bad deploy.

The solution? You can announce in your game group that you are locking table creation, and then in your new version, add an impossible startcondition to an existing option.
Note: This only makes sense if you have a few games running in real time mode in the time of deployment, otherwise it won't achieve much, unless you wait at least a day for other turn based games to break (or not)

Here is an example of an option with only 2 values (if you don't have options at all you have to create a fake option to use this method, if you have more values - you have to list them all):

; In gameoptions.json
<pre>
"startcondition": {
"0": [ { "type": "minplayers", "value": 32, "message": "Maintenance in progress. Table creation is disabled." } ],
"1": [ { "type": "minplayers", "value": 32, "message": "Maintenance in progress. Table creation is disabled." } ]
},
</pre>
; In gameoptions.inc.php (older method if you have it in php)
<pre>
// TODO NEXT remove after testing deploy to upgrade, here 0 and 1 - replace with values of your option!
'startcondition' => [
0 => [ [ 'type' => 'minplayers', 'value' => 32, 'message' => totranslate('Maintenance in progress. Table creation is disabled.') ] ],
1 => [ [ 'type' => 'minplayers', 'value' => 32, 'message' => totranslate('Maintenance in progress. Table creation is disabled.') ] ],
],
</pre>

* Be sure to click "Reload game options configuration" after making this change, then test in studio (test that you cannot create any table)
* Deploy to production
* Now, when a player attempts to create a new table, they will see a red error bar with your "Maintenance in progress" message.
* Wait for screaming (if you have real times games in progress waiting 15 min probably ok, if you have only turn based games, probably a day)
* Once you confirm the new deploy looks good, you can revert the change in gameoptions.inc.php and do another deploy.

=== Local Storage ===

There is not much you can store in localStorage (https://developer.mozilla.org/docs/Web/API/Window/localStorage), since most stuff should be stored either in game db or in user prefrences,
but some stuff makes sense to store there, for example "zoom" level (if you use custom zooming). This setting really affect this specific host and specific browser, setting it localStorage makes most sense.

game.js
<pre>
setup: function (gamedatas) {
let zoom = localStorage.getItem(`${this.game_name}_zoom`);
this.setZoom(zoom);
...
},
</pre>
In this case setZoom is custom function to actually set it.
When zoom changed, for example when some buttons pressed, store current value (but sanitize it so it never so bad that game cannot be viewed

<pre>
setZoom: function (zoom) {
zoom = parseInt(zoom) || 0;
if (zoom === 0 || zoom < 0.1 || zoom > 10) {
zoom = 1;
}
this.zoom = zoom;
localStorage.setItem(`${this.game_name}_zoom`, "" + this.zoom);
... do actual zooming stuff
},
</pre>

=== Capture client JavaScript errors in the "unexpected error" log ===

PHP (backend) errors are recorded in the "unexpected error" log, but JavaScript (frontend) errors are only available in the browser itself. This means you have no visibility about things that go wrong in the client... unless you make clients report their errors to the server.

; In actions.php:
<pre>
public function jsError()
{
$this->setAjaxMode(false);
$this->game->jsError($_POST['userAgent'], $_POST['msg']);
$this->ajaxResponse();
}
</pre>

; In game.php:
<pre>
public function jsError($userAgent, $msg): void
{
$this->error("JavaScript error from User-Agent: $userAgent\n$msg // ");
}
</pre>

; In game.js:
<pre>
define(["dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter"], function (dojo, declare) {
const uniqJsError = {};
...

return declare("bgagame.nowboarding", ebg.core.gamegui, {
...
/* @Override */
onScriptError(msg) {
if (!uniqJsError[msg]) {
uniqJsError[msg] = true;
console.error("⛔ Reporting JavaScript error", msg);
this.ajaxcall(
"/" + this.game_name + "/" + this.game_name + "/jsError.html",
{
msg,
userAgent: navigator.userAgent,
},
this,
() => {},
() => {},
"post"
);
}
this.inherited(arguments);
},
</pre>

== Algorithms ==

=== Generate permutations in lexicographic order ===

Use this when you have an array like [1, 2, 3, 4] and need to loop over some/all 24 permutations of possible ordering. This type of [https://www.php.net/manual/en/language.generators.syntax.php generator function] computes each possibility one at a time, making it vastly more efficient than either a normal iteration or recursive function that produce all possibilities up front.

<pre>
function generatePermutations(array $array): Generator
{
// https://en.wikipedia.org/wiki/Permutation#Generation_in_lexicographic_order
// Sort the array and this is the first permutation
sort($array);
yield $array;

$count = count($array);
do {
// Find the largest index k where a[k] < a[k + 1]
// End when no such index exists
$found = false;
for ($k = $count - 2; $k >= 0; $k--) {
$kvalue = $array[$k];
$knext = $array[$k + 1];
if ($kvalue < $knext) {
// Find the largest index l greater than k where a[k] < a[l]
for ($l = $count - 1; $l > $k; $l--) {
$lvalue = $array[$l];
if ($kvalue < $lvalue) {
// Swap a[k] and a[l]
[$array[$k], $array[$l]] = [$array[$l], $array[$k]];

// Reverse the sequence from a[k + 1] up to and including the final element
$reverse = array_reverse(array_slice($array, $k + 1));
array_splice($array, $k + 1, $count, $reverse);
yield $array;

// Restart with the new array to find the next permutation
$found = true;
break 2;
}
}
}
}
} while ($found);
}
</pre>

Usage:
<pre>
$cash = [4, 1, 2, 3, 4];
foreach ($this->generatePermutations($cash) as $p) {
// your code here to evaluate permutation $p
// first iteration: $p = [1, 2, 3, 4, 4]
// last (60th) iteration: $p = [4, 4, 3, 2, 1]
// break from loop once you achieve your goal
}
</pre>

[[Category:Studio]]

BGA Studio Cookbook

2025-03-26T01:49:31Z

Ufm: /* Assigning Player Order */

This page is a cookbook of design and implementation recipes for BGA Studio framework.
For tooling and usage recipes see [[Tools and tips of BGA Studio]].
If you have your own recipes feel free to edit this page.

__TOC__

== Visual Effects, Layout and Animation ==

=== DOM manipulatons ===

==== Create pieces dynamically (using template) ====

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Note: this method is recommended by BGA guildlines

Declared js template with variables in .tpl file, like this
<pre>
<script type="text/javascript">
// Javascript HTML templates
var jstpl_ipiece = '<div class="${type} ${type}_${color} inlineblock" aria-label="${name}" title="${name}"></div>';
</script>
</pre>

Use it like this in .js file
div = this.format_block('jstpl_ipiece', {
type : 'meeple',
color : 'ff0000',
name : 'Bob',
});

Then you do whatever you need to do with that div, this one specifically design to go to log entries, because it has embedded title (otherwise its a picture only) and no id.

Note: you could have place this variable in js itself, but keeping it in .tpl allows you to have your js code be free of HTML. Normally it never happens but
it is good to strive for it.
Note: you can also use string concatenation, its less readable. You can also use dojo dom object creation api's but its brutally verbose and its more unreadable.

==== Create pieces dynamically (using string concatenation) ====

'''Ingredients:''' ggg.js

<pre>
div = "<div class='meeple_"+color+"'></div>";
</pre>

or modern way

<pre>
div = `<div class='meeple_${color}'></div>`;
</pre>

==== Create all pieces statically ====

'''Ingredients:''' ggg_ggg.tpl, ggg.css, ggg.view.php (optional)

* Create ALL game pieces in html template (.tpl)
* ALL pieces should have unique id, and it should be meaningful, i.e. meeple_red_1
* Do not use inline styling
* Id of player's specific pieces should use some sort of 'color' identification, since player id cannot be used in static layout, you can use english color name, hex 6 char value, or color "number" (1,2,3...)
* Pieces should have separated class for its color, type, etc, so it can be easily styled in groups. In example below you now can style all meeples, all red meeples or all red tokens, or all "first" meeples

ggg.tpl:
<pre>
<div id="home_red" class="home_red home">
<div id="meeple_red_1" class="meeple red n1"></div>
<div id="meeple_red_2" class="meeple red n2"></div>
</div>
</pre>

ggg.css:

<pre>
.meeple {
width: 32px;
height: 39px;
background-image: url(img/78_64_stand_meeples.png);
background-size: 352px;
}

.meeple.red {
background-position: 30% 0%;
}
</pre>

* There should be straight forward mapping between server id and js id (or 1:1)
* You place objects in different zones of the layout, and setup css to take care of layout

<pre>
.home .meeple{
display: inline-block;
}
</pre>
* If you need to have a temporary object that look like original you can use dojo.clone (and change id to some temp id)
* If there is lots of repetition or zone grid you can use template generator, but inject style declaration in css instead of inline style for flexibility

Note:
* If you use this model you cannot use premade js components such as Stock and Zone
* You have to use alternative methods of animation (slightly altered) since default method will leave object with inline style attributes which you don't need

==== Use player color in template ====

NOTE: view.php is deprecated, its best to generate html from .js

'''Ingredients:''' ggg_ggg.tpl, ggg.view.php

.view.php:
<pre>
function build_page($viewArgs) {
// Get players & players number
$players = $this->game->loadPlayersBasicInfos();
$players_nbr = count($players);
/**
* ********* Place your code below: ***********
*/

// Set PCOLOR to the current player color hex
global $g_user;
$cplayer = $g_user->get_id();
if (array_key_exists($cplayer, $players)) { // may be not set if spectator
$player_color = $players [$cplayer] ['player_color'];
} else {
$player_color = 'ffffff'; // spectator
}
$this->tpl ['PCOLOR'] = $player_color;
</pre>

=== Status bar ===

==== Changing state prompt ====

State prompt is message displayed for player which usually comes from state description.
Sometimes you want to change it without changing state (one way is change state but locally, see client states above).

Simple way just change the html
<pre>
setMainTitle: function(text) {
$('pagemaintitletext').innerHTML = text;
},
// usage
onMeeple: function(event) {
//...
this.setMainTitle(_('You must select where meeple is going'));
},
</pre>

This however will not work with parameters and will not draw You in color, if you want this its more sophisticated:

<pre>
setDescriptionOnMyTurn : function(text) {
this.gamedatas.gamestate.descriptionmyturn = text;
var tpl = dojo.clone(this.gamedatas.gamestate.args);
if (tpl === null) {
tpl = {};
}
var title = "";
if (this.isCurrentPlayerActive() && text !== null) {
tpl.you = this.divYou();
}
title = this.format_string_recursive(text, tpl);

if (!title) {
this.setMainTitle(" ");
} else {
this.setMainTitle(title);
}
},
</pre>

Note: this method uses '''setMainTitle''' defined above and '''divYou''' defined in another section of this wiki.

=== Animation ===

==== Attach to new parent without destroying the object ====

BGA function attachToNewParent for some reason destroys the original, if you want similar function that does not you can use this
ggg.js

<pre>
/**
* This method will attach mobile to a new_parent without destroying, unlike original attachToNewParent which destroys mobile and
* all its connectors (onClick, etc)
*/
attachToNewParentNoDestroy: function (mobile_in, new_parent_in, relation, place_position) {

const mobile = $(mobile_in);
const new_parent = $(new_parent_in);

var src = dojo.position(mobile);
if (place_position)
mobile.style.position = place_position;
dojo.place(mobile, new_parent, relation);
mobile.offsetTop;//force re-flow
var tgt = dojo.position(mobile);
var box = dojo.marginBox(mobile);
var cbox = dojo.contentBox(mobile);
var left = box.l + src.x - tgt.x;
var top = box.t + src.y - tgt.y;

mobile.style.position = "absolute";
mobile.style.left = left + "px";
mobile.style.top = top + "px";
box.l += box.w - cbox.w;
box.t += box.h - cbox.h;
mobile.offsetTop;//force re-flow
return box;
},
</pre>

==== Animation on oversurface ====
If you use non-absolute position for your game elements (i.e you use layouts) - you cannot really use BGA animation functions. After years of fidding with different options I use
techique which I call animation on oversurface that works when parents use different zoom, rotation, etc

* You need another layer on top of everything - oversurface
* We create copy of the object on oversurface - to move
* We move the real object on final position - but make it invisible for now
* We move the phantom to final position applying required zoom and rotation (using css animation), then destroy it
* When animation is done we make original object visible in new position

The code is bit complex it can be found here

https://codepen.io/VictoriaLa/pen/gORvdJo

Game using it: century, ultimaterailroads

==== Scroll element into view ====
Ingredients: game.js

This function will scroll given node (div) into view and respect replays and archive mode

<pre>
scrollIntoViewAfter: function (node, delay) {
if (this.instantaneousMode || this.inSetup) {
return;
}
if (typeof g_replayFrom != "undefined") {
$(node).scrollIntoView();
return;
}
if (!delay) delay = 0;
setTimeout(() => {
$(node).scrollIntoView({ behavior: "smooth", block: "center" });
}, delay);
},
</pre>

=== Logs ===

==== Inject icon images in the log ====

Here is an example of what was done for Terra Mystica which is simple and straightforward:

<pre>
//Define the proper message
$message = clienttranslate('${player_name} gets ${power_income} via Structures');
if ($price > 0) {
$this->DbQuery("UPDATE player SET player_score = player_score - $price WHERE player_id = $player_id");
$message = clienttranslate('${player_name} pays ${vp_price} and gets ${power_income} via Structures');
}

// Notify
$this->notify->all( "powerViaStructures", $message, array(
'i18n' => array( ),
'player_id' => $player_id,
'player_name' => $this->getUniqueValueFromDb( "SELECT player_name FROM player WHERE player_id = $player_id" ),
'power_tokens' => $power_tokens,
'vp_price' => $this->getLogsVPAmount($price),
'power_income' => $this->getLogsPowerAmount($power_income),
'newScore' => $this->getUniqueValueFromDb( "SELECT player_score FROM player WHERE player_id = $player_id" ),
'counters' => $this->getGameCounters(null),
) );
</pre>

With some functions to have the needed html added inside the substitution variable, such as:

<pre>
function getLogsPowerAmount( $amount ) {
return "<div class='tmlogs_icon' title='Power'><div class='power_amount'>$amount</div></div>";
}
</pre>
Note: injecting html from php is not ideal but easy, if you want more clean solution, use method below but it is a lot more sophisticated.

==== Inject images and styled html in the log ====

{{InfoBox|title=Warning — Translation|maxWidth=500|color=#c00|body='''In order to prevent interference with the translation process, keep in mind that you must only apply modifications to the args object, and not try to substitute the keys (the <code>${player_name}</code> parts of your string) in the log string.'''}}

So you want nice pictures in the game log. What do you do? The first idea that comes to mind is to send html from php in notifications (see method above).

This is a bad idea for many reasons:

* It's bad architecture. ui elements leak into the server, and now you have to manage the ui in multiple places.
* If you decided to change something in the ui in future version, replay logs for old games and tutorials may not work, since they use stored notifications.
* Log previews for old games become unreadable. (This is the log state before you enter the game replay, which is useful for troubleshooting and game analysis.)
* It's more data to transfer and store in the db.
* It's a nightmare for translators.

So what else can you do? You can use client side log injection to intercept log arguments (which come from the server) and replace them with html on the client side. Here are three different method you can use to achieve this.

===== Override <code>this.format_string_recursive()</code> method =====

'''Ingredients:''' ggg.js, ggg.game.php

I use this recipe for '''client side log injection''' to intercept log arguments (which come from the server) and replace them with html on the client side.

[[File:clientloginjection.png|left]]

ggg.js

<pre>

/** Override this function to inject html into log items. This is a built-in BGA method. */

/* @Override */
format_string_recursive : function format_string_recursive(log, args) {
try {
if (log && args && !args.processed) {
args.processed = true;

// list of special keys we want to replace with images
var keys = ['place_name','token_name'];

for ( var i in keys) {
var key = keys[i];
key in args && args[key] = this.getTokenDiv(key, args);

}
}
} catch (e) {
console.error(log,args,"Exception thrown", e.stack);
}
return this.inherited({callee: format_string_recursive}, arguments);
},
</pre>

'''Important:''' In the ''format_string_recursive'' method, the 'args' parameter will only contain arguments passed to it from the notify method in ggg.game.php (see below).

The 'log' parameter is the actual string that is inserted into the logs. You can perform additional js string manipulation on it.

<pre>
getTokenDiv : function(key, args) {
// ... implement whatever html you want here, example from sharedcode.js
var token_id = args[key];
var item_type = getPart(token_id,0);
var logid = "log" + (this.globalid++) + "_" + token_id;
switch (item_type) {
case 'wcube':
var tokenDiv = this.format_block('jstpl_resource_log', {
"id" : logid,
"type" : "wcube",
"color" : getPart(token_id,1),
});
return tokenDiv;

case 'meeple':
if ($(token_id)) {
var clone = dojo.clone($(token_id));

dojo.attr(clone, "id", logid);
this.stripPosition(clone);
dojo.addClass(clone, "logitem");
return clone.outerHTML;
}
break;

default:
break;
}

return "'" + this.clienttranslate_string(this.getTokenName(token_id)) + "'";
},
getTokenName : function(key) {
return this.gamedatas.token_types[key].name; // get name for the key, from static table for example
},
</pre>

Note that in this case the server simply injects token_id as a name, and the client substitutes it for the translated name or the picture.

ggg.game.php:

$this->notify->all('playerLog', clienttranslate('Game moves ${token_name}'), ['token_name'=>$token_id]);

'''Important:''' As noted above, only arguments actually passed by this method are available to the args parameter received in the client-side ''format_string_recursive'' method.

Sometimes it is the case that you want to pass arguments that are not actually included in the output message. For example, suppose we have a method like this:

$this->notify->all('tokenPlaced', clienttranslate('Player placed ${token_name}'), array(
'token_name' => $token_id,
'zone_played' => $zone);

This will output "Player placed ${token_name}" in the log, and if we subscribe to a notification method activated by the "tokenPlaced" event in the client-side code, that method can make use of the 'zone_played' argument.

Now if you want to make some really cool things with game log, most probably you would need more arguments than are included in log message. The problem with that,
it will work at first, but if you reload game using F5 or when the game loads in turn based mode, you will loose your additional parameters, why? Because when game reloads it does not actually send same notifications, it sends special "hitstorical_log" notification where all parameters not listed in the message are removed. In example above, field zone_played would be removed from historical log as it is not included in message of the notification. You can till preserve specific arguments in historical log by adding special field preserve to notification arguments like this:

<pre>
$this->notify->all('tokenPlaced', clienttranslate('Player placed ${token_name}'), array(
'token_name' => $token_id,
'zone_played' => $zone,
'preserve' => [ 'zone_played' ]
);
</pre>

Now you can use zone_played in format_string_recursive even in historical logs.

===== Use <code>:formatFunction</code> option provided by <code>dojo.string.substitute</code> =====

'''Ingredients:''' ggg.js, ggg.game.php, ggg_ggg.tpl, ggg.css

The above method will work in most of the cases, but if you use dotted keys such as <code>${card.name}</code> (which is supported by the framework, for private state args), the key won't be substituted because the <code>key in arg</code> test will fail. If so you need to rely either on this way, or the one after.

'''WARNING:''' using this method on an already advanced project will require you to go through all your notifications to change keys !

Under the hood, the '''this.format_string_recursive()''' function calls the '''dojo.string.substitute''' method which substitutes <code>${keys}</code> with the value provided. If you take a look at the [https://dojotoolkit.org/reference-guide/1.7/dojo/string.html#substitute documentation] and [https://github.com/dojo/dojo/blob/c3ceb017cfa25b703f5662dc83d1c8aae9bc5d81/string.js#L163 source code] you can notice that the key can be suffixed with a colon (<code>:</code>) followed by a function name. This will allow you to specify directly in the substitution string which keys need HTML injection.

First of all, you need to define your formatting function in the ggg.js file:
<pre>
[[ggg.js]]
getTokenDiv : function(value, key) {
//This is only an example implementation, you need to write your own.
//The method should return HTML code
switch (key) {
case 'html_injected_argument1':
return this.format_block('jstpl_HTMLLogElement1',{value: value});
case 'html_injected_argument2':
return this.format_block('jstpl_HTMLLogElement2',{value: value});
...
}
}
</pre>

Obviously you need to define the appropriate templates in the ggg_ggg.tpl file:
<pre>
[[ggg_ggg.tpl]]
let jstpl_HTMLLogElement1 = '<div class="log-element log-element-1-${value}"></div>';
let jstpl_HTMLLogElement2 = '<div class="log-element log-element-2-${value}"></div>';
...
</pre>
And the appropriate classes in ggg.css.

Then you need to add the <code>dojo/aspect</code> module at the top of the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
define([
"dojo", "dojo/_base/declare",
'''<span style="color:green;">"dojo/aspect",</span> //MUST BE IN THIRD POSITION''' (see [[#Including your own JavaScript module (II)|below]])
"ebg/core/gamegui",
"ebg/counter",
], function (dojo, declare, <span style="color:green;">'''aspect'''</span>) {
...

And you also need to add the following code in your <code>contructor</code> method in the ggg.js:

<nowiki>[[ggg.js]]</nowiki>
constructor: function(){

// ... skipped code ...
let gameObject = this; //Needed as the this object in aspect.before will not refer to the game object in which the formatting function resides
aspect.before(dojo.string, "substitute", function(template, map, transform) { //This allows you to modify the arguments of the dojo.string.substitute method before they're actually passed to it
return [template, map, transform, gameObject];
});

Now you're all set to inject HTML in your logs. To actually achieve this, you must specify the function name with the key like so:

<nowiki>[[ggg.game.php]]</nowiki>
$this->notify->all("notificationName", clienttranslate("This log message contains ${plainTextArgument} and the following will receive HTML injection: ${html_injected_argument1:getTokenDiv}"), [
"plainTextArgument" => "some plain text here",
"html_injected_argument1" => "some value used by getTokenDiv",
]);

You're not limited writing only one function, you can write as many functions as you like, and have them each inject a specific type of HTML. You just need to specify the relevant function name after the column in the substitution key.

===== Use <code>transform</code> argument of <code>dojo.string.substitute</code> =====

'''Ingredients:''' ggg.js, ggg.game.php, ggg_ggg.tpl, ggg.css

This method is also relying on the use of <code>dojo.string.substitute</code> by the framework, and will use the <code>transform</code> argument, which, accordting to [https://github.com/dojo/dojo/blob/c3ceb017cfa25b703f5662dc83d1c8aae9bc5d81/string.js#L163 source code] and [https://dojotoolkit.org/reference-guide/1.7/dojo/string.html#substitute documentation] will be run on all the messages going through dojo.string.substitute.

'''WARNING:''' This method will be applied to all strings that go through dojo.string.substitute. As such you must take extra care not to substitute keys that may be used by the framework (i.e. ${id}). In order to do so, a good practise would be to prefix all keys that need substitution with a trigram of the game name.

Since all the keys will be fed to the tranform function, by default, it must return the value, substituted or not per your needs. You can define the function like this in the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
getTokenDiv : function(value, key) {
//This is only an example implementation, you need to write your own.
//The method should return HTML code
switch (key) {
case 'html_injected_argument1':
return this.format_block('jstpl_HTMLLogElement1',{value: value});
case 'html_injected_argument2':
return this.format_block('jstpl_HTMLLogElement2',{value: value});
...
default:
return value; //Needed otherwise regular strings won't appear since since the value isn't returned by the function
}
}

The templates must be defined in the ggg_ggg.tpl file and the corresponding CSS classes in the ggg.css file.

You need to add the following code at the beginning of the ggg.js file:

<nowiki>[[ggg.js]]</nowiki>
define([
"dojo", "dojo/_base/declare",
'''<span style="color:green;">"dojo/aspect",</span> //MUST BE IN THIRD POSITION''' (see [[#Including your own JavaScript module (II)|below]])
"ebg/core/gamegui",
"ebg/counter",
], function (dojo, declare, <span style="color:green;">'''aspect'''</span>) {
...

And the following code to the <code>constructor</code> method in ggg.js:

<nowiki>[[ggg.js]]</nowiki>
constructor: function(){
// ... skipped code ...
let transformFunction = dojo.hitch(this, "getTokenDiv"); //Needed as the this object in aspect.before will not refer to the game object in which the formatting function resides
aspect.before(dojo.string, "substitute", function(template, map, transform) {
if (undefined === transform) { //Check for a transform function presence, just in case
return [template, map, transformFunction];
}
});

Then you're all set for log injection, no need to change anything on the PHP side.

==== Processing logs on re-loading ====

You rarely need to process logs when reloading, but if you want to do something fancy you may have to do it after logs are loaded.
Logs are loaded asyncronously so you have to listen for logs to be fully loaded.
Unfortunately there is no direct way of doing it so this is the hack.

'''Hack alert''' - this extends undocumented function and may be broken when framework is updated

'''Ingredients:''' ggg.js

<pre>
/*
* [Undocumented] Override BGA framework functions to call onLoadingLogsComplete when loading is done
@Override
*/
setLoader: function(image_progress, logs_progress) {
this.inherited(arguments); // required, this is "super()" call, do not remove
//console.log("loader", image_progress, logs_progress)
if (!this.isLoadingLogsComplete && logs_progress >= 100) {
this.isLoadingLogsComplete = true; // this is to prevent from calling this more then once
this.onLoadingLogsComplete();
}
},

onLoadingLogsComplete: function() {
console.log('Loading logs complete');
// do something here
},
</pre>

=== Player Panel ===

==== Inserting non-player panel ====

'''Ingredients:''' ggg.js, ggg_ggg.tpl

If you want to insert non-player panel on the right side (for example to hold extra preferences, zooming controls, etc)

this can go pretty much anywhere in template it will be moved later

ggg_ggg.tpl:
<pre>
<div class='player_board_config' id="player_board_config">

<button id="zoom-out" class=" fa fa-search-minus fa-2x config-control"></button>
<button id="zoom-in" class=" fa fa-search-plus fa-2x config-control"></button>
<button id="show-settings" class="fa fa-cog fa-2x config-control "></button>
</div>
</pre>

some hackery required in js

ggg.js:
<pre>
/* @Override */
updatePlayerOrdering() {
this.inherited(arguments);
dojo.place('player_board_config', 'player_boards', 'first');
},
</pre>

=== Images and Icons ===

==== Accessing images from js ====

'''Ingredients:''' ggg.js

<pre>
// your game resources

var my_img = '<img src="'+g_gamethemeurl+'img/cards.jpg"/>';

// shared resources
var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +
text + "</span>";
</pre>

==== High-Definition Graphics ====

Some users will have screens which can display text and images at a greater resolution than the usual 72 dpi, e.g. the "Retina" screens on the 5k iMac, all iPads, and high-DPI screens on laptops from many manufacturers. If you can get art assets at this size, they will make your game look extra beautiful. You ''could'' just use large graphics and scale them down, but that would increase the download time and bandwidth for users who can't display them. Instead, a good way is to prepare a separate graphics file at exactly twice the size you would use otherwise, and add "@2x" at the end of the filename, e.g. if pieces.png is 240x320, then pieces@2x.png is 480x640.

There are two changes required in order to use the separate graphics files. First in your css, where you use a file, add a media query which overrides the original definition and uses the bigger version on devices which can display them. Ensuring that the "background-size" attribute is set means that the size of the displayed object doesn't change, but only is drawn at the improved dot pitch.
<pre>
.piece {
position: absolute;
background-image: url('img/pieces.png');
background-size:240px 320px;
z-index: 10;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
.piece {
background-image: url('img/pieces@2x.png');
}
}
</pre>

Secondly, in your setup function in javascript, you must ensure than only the appropriate one version of the file gets pre-loaded (otherwise you more than waste the bandwidth saved by maintaining the standard-resolution file). Note that the media query is the same in both cases:
<pre>
var isRetina = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
if (window.matchMedia(isRetina).matches)
{
this.dontPreloadImage( 'pieces.png' );
this.dontPreloadImage( 'board.jpg' );
}
else
{
this.dontPreloadImage( 'pieces@2x.png' );
this.dontPreloadImage( 'board@2x.jpg' );
}
</pre>

==== Using CSS to create different colors of game pieces if you have only white piece ====

<pre>
background-color: #${color};
background-blend-mode: multiply;
background-image: url( 'img/mypiece.png');
mask: url('img/mypiece.png');
-webkit-mask: url('img/mypiece.png');
</pre>

where ${color} - is color you want

Note: piece has to be white (shades of gray). Sprite can be used too, just add add background-position as usual.

==== Accessing player avatar URLs ====

<pre>
getPlayerAvatar(playerId) {
let avatarURL = '';

if (null != $('avatar_' + playerId)) {
let smallAvatarURL = dojo.attr('avatar_' + playerId, 'src');
avatarURL = smallAvatarURL.replace('_32.', '_184.');
}
else {
avatarURL = 'https://x.boardgamearena.net/data/data/avatar/default_184.jpg';
}

return avatarURL;
},
</pre>

Note: This gets avatar URLs at 184x184 resolution. You can also use 92, 50, and 32 depending on which resolution you want.

==== Adding Image buttons ====

Its pretty trivial but just in case you need a working function:

ggg.js:
<pre>
addImageActionButton: function (id, div_html, handler) { // div_html is string not node
this.addActionButton(id, div_html, handler, '', false, 'gray');
dojo.style(id, "border", "none"); // remove ugly border
dojo.addClass(id, "bgaimagebutton"); // add css class to do more styling
return $(id); // return node for chaining
},

</pre>
Example of usage:
<pre>
this.addImageActionButton('button_coin',"<div class='coin'></div>", ()=>{ alert('Ha!'); });
</pre>

=== Other Fluff ===

==== Use thematic fonts ====

'''Ingredients:''' ggg.css

Sometime game elements use specific fonts of text, if you want to match it up you can load some specific font (IMPORTANT: from some '''free font''' source. See notes below).

[[File:Dragonline_font.png]]

.css
<pre>
/* latin-ext */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: 400;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/2Dy1Unur1HJoklbsg4iPJ_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: normal;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/gThgNuQB0o5ITpgpLi4Zpw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: normal;
src: local('Qwigley'), local('Qwigley-Regular'), url(http://ff.static.1001fonts.net/q/w/qwigley.regular.ttf) format('ttf');
}

.zone_title {
display: inline-block;
position: absolute;
font: italic 32px/32px "Qwigley", cursive;
height: 32px;
width: auto;
}
</pre>

'''NB:''' if you need to include a font that's not available online, an extra action will be needed from an admin. Please include the font file(s) in your img directory, and mention it to admins when requesting your game to be moved to alpha. '''Please remember that the font has to be free, and include a .txt with all appropriate license information about the font.'''
You can look for free fonts (for example) on https://fonts.google.com or https://www.fontsquirrel.com/)

'''Content Security Policy'''

BGA runs a Content Security Policy which will limit the origins from which you can load external fonts, in order to prevent license abuse.

The CSP is a whitelist of allowed origins. To see the list, view the response headers of any page on Studio, and look for the "Content-Security-Policy" header.

You will specifically want to check for the font-src token within these headers, and limit any external fonts to these sources.

'''This list is subject to change''' but as of the time of writing, the only acceptabled external sites are use.typekit.net and fonts.gstatic.com.

=== Scale to fit for big boards ===

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Lets say you have huge game board, and lets say you want it to be 1400px wide. Besides the board there will be side bar which is 240 and trim.
My display is 1920 wide so it fits, but there is big chance other people won't have that width. What do you do?

You have to decide:
* If board does not fit you want scale whole thing down, the best way is probably use viewport (see https://en.doc.boardgamearena.com/Your_game_mobile_version)
* You can leave the board as is and make sure it is scrollable horizonatally
* You add custom scale just for the board (can add user controls - and hook to transform: scale())

I tried to auto-scale but this just does work, too many variables - browser zoom, 3d mode, viewport, custom bga scaling, devicePixelRatio - all create some impossible coctail of zooming...
Here is scaling functing for custom user scaling

ggg_ggg.tpl:
<pre>
<div id="thething" class="thething">
... everything else you declare ...
</div>
</pre>

ggg.js:
<pre>
onZoomPlus: function() {
this.setZoom(this.zoom + 0.1);
},
onZoomMinus: function() {
this.setZoom(this.zoom - 0.1);
},

setZoom: function (zoom) {
zoom = parseInt(zoom) || 0;
if (zoom === 0 || zoom < 0.1 || zoom > 10) {
zoom = 1;
}
this.zoom = zoom;
var inner = document.getElementById("thething");

if (zoom == 1) {
inner.style.removeProperty("transform");
inner.style.removeProperty("width");
} else {
inner.style.transform = "scale(" + zoom + ")";
inner.style.transformOrigin = "0 0";
inner.style.width = 100 / zoom + "%";
}
localStorage.setItem(`${this.game_name}_zoom`, "" + this.zoom);
this.onScreenWidthChange();
},
</pre>

=== Dynamic tooltips ===

If you really need a dynamic tooltip you can use this technique. (Only use it if the static tooltips provided by the BGA framework are not sufficient.)

new dijit.Tooltip({
connectId: ["divItemId"],
getContent: function(matchedNode){
return "... calculated ...";
}
});

This is an out-of-the-box djit.Tooltip. It has a ''getContent'' method which is called dynamically.

The string returned by getContent() becomes the innerHTML of the tooltip, so it can be anything. In this example matchedNode is a dojo node representing dom object with id of "divItemId" but there are more parameters which I am not posting here which allows more sophisticated subnode queries (i.e. you can attach tooltip to all nodes with class or whatever).

[https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip.html dijit.Tooltip]

It's not part of the BGA API so use at your own risk.

=== Rendering text with players color and proper background ===

'''Ingredients:''' ggg.js

<pre>
/* Implementation of proper colored You with background in case of white or light colors */

divYou: function() {
var color = this.gamedatas.players[this.player_id].color;
var color_bg = "";
if (this.gamedatas.players[this.player_id] && this.gamedatas.players[this.player_id].color_back) {
color_bg = "background-color:#" + this.gamedatas.players[this.player_id].color_back + ";";
}
var you = "<span style=\"font-weight:bold;color:#" + color + ";" + color_bg + "\">" + __("lang_mainsite", "You") + "</span>";
return you;
},

/* Implementation of proper colored player name with background in case of white or light colors */

divColoredPlayer: function(player_id) {
var color = this.gamedatas.players[player_id].color;
var color_bg = "";
if (this.gamedatas.players[player_id] && this.gamedatas.players[player_id].color_back) {
color_bg = "background-color:#" + this.gamedatas.players[player_id].color_back + ";";
}
var div = "<span style=\"color:#" + color + ";" + color_bg + "\">" + this.gamedatas.players[player_id].name + "</span>";
return div;
},
</pre>

=== Cool realistic shadow effect with CSS ===

==== Rectangles and circles ====

It is often nice to have a drop shadow around tiles and tokens, to separate them from the table visually. It is very easy to add a shadow to rectangular elements, just add this to your css:

<pre>
.xxx-tile {
box-shadow: 3px 3px 3px #000000a0;
}
</pre>

box-shadow obeys '''border-radius''' of the element, so it will look good for rounded rectangles, and hence also circles (if border-radius is set appropriately).

box-shadow also supports various other parameters and can be used to achieve effects such as glowing, borders, inner shadows etc. If you need to animate a box-shadow, you may be able to get better performance (avoiding redraws) if you attach the shadow to another element (possibly an ::after pseudo-element) and change only the '''opacity''' of that element.

==== Irregular Shapes ====

If you wish to make a shadow effect for game pieces that are not a rectangle, but your game pieces are drawn from rectangles in a PNG image, you can apply the shadow to the piece using any art package and save it inside the image. This usually will yield the best performance. Remember to account for the size of the shadow when you lay out images in the sprite sheet.

However that sometimes will not be an option, for example if the image needs to be rotated while the shadow remains offset in the same direction. In this case, one option is to not use box-shadow but use filter, which is supported by recent major browsers. This way, you can use the alpha channel of your element to drop a shadow. This even work for transparent backgrounds, so that if you are using the "CSS-sprite" method, it will work!

For instance:

<pre>
.xxx-token {
filter: drop-shadow(0px 0px 1px #000000);
}
</pre>

Beware that some browsers still do not always draw drop-shadow correctly. In particular, Safari frequently leaves bits of shadow behind when objects move around the screen. In Chrome, shadows sometimes flicker badly if another element is animating close by. Some of these correctness issues can be solved by adding '''isolation: isolate; will-change: filter;''' to affected elements, but this significantly affects redraw performance.

Beware of performance issues - particularly on Safari (MacOS, iPhone and iPad). Keep in mind that drop-shadow are very GPU intensive. This becomes noticeable once you have about 40 components with drop-shadow filter. If that is your case, you can quite easily implement a user preference to disable shadows for users on slower machines:

gameoptions.inc.php
<pre>
100 => array(
'name' => totranslate('Shadows'),
'needReload' => true, // after user changes this preference game interface would auto-reload
'values' => array(
1 => array( 'name' => totranslate( 'Enabled' ), 'cssPref' => '' ),
2 => array( 'name' => totranslate( 'Disabled' ), 'cssPref' => 'no-shadow' )
)
),
</pre>

[game].css
<pre>
.no-shadow * {
filter: none !important;
}
</pre>For Safari, it is usually better to simply disable drop-shadow completely: [[Game interface stylesheet: yourgamename.css#Warning: using drop-shadow]].

==== Shadows with clip-path ====

For some reason, a shadow will not work together with clip-path on one element. To use both clip-path (when for example using .svg to cut out cardboard components from your .jpg spritesheet) and drop-shadow, you need to wrap the element into another one, and apply drop-shadow to the outer one, and clip-path to the inner one.

<pre>
<div class='my-token-wrap'>
<div class='my-token'>
</div>
</div>
</pre>
<pre>
.my-token-wrap {
filter: drop-shadow(0px 0px 1px #000000);
}
.my-token-wrap .my-token {
clip-path: url(#my-token-path);
}
</pre>

=== Using the CSS classes from the state machine ===

If you need to hide or show stuff depending on the state of your game, you can of course use javascript, but CSS is hand enough for that. The #overall-content element does change class depending on the game state. For instance, if you are in state ''playerTurn'', it will have the class ''gamestate_playerTurn''.

So now, if you want to show the discard pile only during player turns, you may use:

<pre>
#discard_pile { display: none }
.gamestate_playerTurn #discard_pile { display: block }
</pre>

This can be used if you want to change sizing of elements, position, layout or visual appearance.

== Game Model and Database design ==

=== Database for The euro game ===
Lets say we have a game with workers, dice, tokens, board, resources, money and vp. Workers and dice can be placed in various zones on the board, and you can get resources, money, tokens and vp in your home zone. Also tokens can be flipped or not flipped.

[[File:Madeira board.png]]

Now lets try to map it, we have
* (meeple,zone)
* (die, zone, sideup)
* (resource cube/money token/vp token,player home zone)
* (token, player home zone, flip state)
We can notice that resource and money are uncountable, and don't need to be track individually so we can replace our mapping to
* (resource type/money,player home zone, count)
And vp stored already for us in player table, so we can remove it from that list.

Now when we get to encode it we can see that everything can be encoded as (object,zone,state) form, where object and zone is string and state is integer. The resource mapping is slightly different semantically so you can go with two table, or counting using same table with state been used as count for resources.

So the piece mapping for non-grid based games can be in most case represented by (string: token_key, string: token_location, int: token_state), example of such database schema can be found here: [https://github.com/elaskavaia/bga-sharedcode/blob/master/dbmodel.sql dbmodel.sql] and class implementing access to it here [https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php table.game.php].

Variant 1: Minimalistic

CREATE TABLE IF NOT EXISTS `token` (
`token_key` varchar(32) NOT NULL,
`token_location` varchar(32) NOT NULL,
`token_state` int(10),
PRIMARY KEY (`token_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|meeple_red_1
|home_red
|0
|-
|dice_black_2
|board_guard
|1
|-
|dice_green_1
|board_action_mayor
|3
|-
|bread
|home_red
|5
|}

Now how we represent resource counters such as bread?
Using same table from we simply add special counter token for bread and use state to indicate the count. Note to keep first column unique we have to add player identification for that counter, i.e. ff0000 is red player.

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|bread_ff0000
|tableau_ff0000
|5
|}

See php module for this table here https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php

Variant 2: Additional resource table, resource count for each player id

CREATE TABLE IF NOT EXISTS `resource` (
`player_id` int(10) unsigned NOT NULL,
`resource_key` varchar(32) NOT NULL,
`resource_count` int(10) signed NOT NULL,
PRIMARY KEY (`player_id`,`resource_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE resource ADD CONSTRAINT fk_player_id FOREIGN KEY (player_id) REFERENCES player(player_id);

{| class="wikitable"
|+resource
! player_id
! resource_key
! resource_count
|-
|123456
|bread
|5
|}

Variant 3: More normalised

This version is similar to "card" table from hearts tutorial, you can also use exact cards database schema and Deck implementation for most purposes (even you not dealing with cards).

CREATE TABLE IF NOT EXISTS `token` (
`token_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`token_type` varchar(16) NOT NULL,
`token_arg` int(11) NOT NULL,
`token_location` varchar(32) NOT NULL,
`token_state` int(10),
PRIMARY KEY (`token_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

{| class="wikitable"
|+token
! token_id
! token_type
! token_arg
! token_location
! token_state
|-
|22
|meeple
|123456
|home_123456
|0
|-
|23
|dice
|2
|board_guard
|1
|-
|26
|dice
|1
|board_action_mayor
|3
|-
|49
|bread
|0
|home_123456
|5
|}

Advantages of this would be is a bit more straightforward to do some queries in db, disadvantage its hard to read (as you can compare with previous example, you
cannot just look at say, ah I know what it means). Another questionable advantage is it allows you to do id randomisation, so it hard to do crafted queries to
cheat, the down side of that you cannot understand it either, and handcraft db states for debugging or testing.

=== Database for The card game ===

Lets say you have a standard card game, player have hidden cards in hand, you can draw card from draw deck, play card on tableau and discard to discard pile.
We have to design database for such game.

In real word to "save" the game we take a picture a play area, save cards from it, then put away draw deck, discard and hand of each player separately and mark it, also we will record current scoring (if any) and who's turn was it.

* Framework handles state machine transition, so you don't have to worry about database design for that (i.e. who's turn it is, what phase of the game we are at, you still have to design it but part of state machine step)
* Also framework supports basic player information, color, order around the table, basic scoring, etc, so you don't have to worry about it either
* The only thing you need in our database is state of the "board", which is "where each pieces is, and in what state", or (position,rotation) pair.

Lets see what we have for that:
* The card state is very simple, its usually "face up/face down", "tapped/untapped", "right side up/up side down"
* As position go we never need real coordinates x,y,z. We need to know what "zone" card was, and depending on the zone it may sometimes need an extra "z" or "x" as card order. The zone position usually static or irrelevant.
* So our model is: we have cards, which have some attributes, at any given point in time they belong to a "zone", and can also have order and state
* Now for mapping we should consider what information changes and what information is static, later is always candidate for material file
* For dynamic information we should try to reduce amount of fields we need
** we need at least a field for card, so its one
** we need to know what zone cards belong to, its 2
** and we have possibly few other fields, if you look closely at you game you may find out that most of the zone only need one attribute at a time, i.e. draw pile always have cards face down, hand always face up, also for hand and discard order does not matter at all (but for draw it does matter). So in majority of cases we can get away with one single extra integer field representing state or order
* In real database both card and zone will be integers as primary keys referring to additional tables, but in our case its total overkill, so they can be strings as easily

Variant 1: Minimalistic

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

Variant 2: More normalised

This version supported by Deck php class, so unless you want to rewrite db access layer go with this one

<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: if you using this schema, some zones/locations have special semantic. The 'hand' location is actually multiple locations - one per player, but player id is encoded as card_location_arg. If 'hand' in your game is ordered, visible or can have some other card states, you cannot use hand location (replacement is hand_<player_id> or hand_<color_id>)

== Game Elements ==

=== Resource ===

A game resource, such as "wood," is usually infinite and represented by a count allocated to a specific player or supply.

If a resource can be placed on location, use the "Meeple" model described below.

For a working example, you can check out: [https://codepen.io/VictoriaLa/pen/emYgLzR CodePen Example] (ui only).

==== Representation in Database ====
In a minimalistic "tokens" database, it would look like this (e.g., the red player has 3 wood):

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|wood_ff0000
|
|3
|-
|wood_supply
|
|40
|}

The second row you need to store the resource in the supply (if it's counted).

If you don't like this solution can use bga_globals table for this or create your own resource table.

Its not recommened to extend player table to store this information.

==== Representation in Material File (material.inc.php) ====
In the material file, you can define some information about resources. For instance, you can specify that it's of type "resource" and call it "Wood" in English, along with a tooltip:
<pre>
$this->token_types = [
...
'wood' => [
'name' => clienttranslate('Wood'),
'tooltip' => clienttranslate('Game resource used for building houses'),
'type' => 'resource',
'max' => 40
]
];
</pre>

==== HTML Representation ====
In HTML, this would look something like this within the player panel. Using the data attribute instead of a CDATA value is much more flexible:
<pre>
<div id="wood_ff0000" class="resource wood" data-value="3"></div>
</pre>

==== JavaScript Handling ====
When you get the object from the server, one of the tokens will be sent in the array like this:
<pre>
token = {
key: 'wood_ff0000',
location: '-',
state: '3'
}
</pre>

You can create a corresponding `<div>` in the `setup()` method of `game.js` as follows:
<pre>
const playerColor = token.key.split('_')[1];
const resType = token.key.split('_')[0];
const tokenInfo = this.gamedatas.token_types[resType]; // token_types is the structure from the material file sent to the client
const div = `<div id="${token.key}" class="${resType} ${tokenInfo.type} ${token.key}" data-value="${token.state}"></div>`;

if (playerColor != 'supply') {
document.querySelector(`#player_board_${this.getPlayerIdByColor(playerColor)} > .player-board-game-specific-content`).insertAdjacentHTML('beforeend',div);
this.addTooltip(token.key, _(tokenInfo.name) + " " + _(tokenInfo.tooltip), "");
}
</pre>

When you receive an update notification (assuming you get the same "token" object), you can simply update the `data-value`:
<pre>
document.querySelector(`#${token.key}`).dataset.value = token.state;
</pre>

To display the resource in the game log, you can format it like this:
<pre>
Player gains <div class="resource wood" data-value="1"></div>
</pre>
For more on injecting icon images in the log, see: [[BGA_Studio_Cookbook#Inject_icon_images_in_the_log]]

==== Graphic Representation (.css) ====
To properly display the resource image, it is preferable to use an image sprite that includes all resources,
usually it will be .png as these objects have shape.
This how will .css look like with horizontal sprite image:

<pre>
.resource {
background-image: url(https://en.doc.boardgamearena.com/images/d/d3/Cubes.png);
background-repeat: no-repeat;
background-size: cover; /* auto-scale */
aspect-ratio: 1/1; /* that will keep heigh in sync */
width: 32px; /* default size, specific location should override */
}

.wood {
/* Since the sprite is a horizontal row of 11 cubes and 9 is the brown cube position */
background-position: calc(100% / (11 - 1) * 9) 0%;
}
</pre>

To show a text overlay with the resource value, you can use the following CSS:
<pre>
.resource[data-value]:after {
content: attr(data-value);
width: 100%;
height: 100%;
position: absolute;
font-size: xx-large;
text-align: center;
text-shadow: 2px 0 2px #fff, 0 -2px 2px #fff, 0 2px 2px #fff, -2px 0 2px #fff;
}
</pre>

This solution is fully scalable — you only need to specify the size where you want it displayed.
For example:
<pre>
.player_board_content > .resource {
width: 40px;
position: relative;
}
</pre>

Note: if you have that board that tracks the resource on resource tracker - you can show this IN ADDITION of showing resource on player panel.

==== Selection and Actions ====
It is best to put buttons with resource images on the status bar, rather than having the player click on the player panel.

For animation:
* Can use move animation to animate resourced gained or played from the board location to the player panel
* Can use "vapor" animation to show resource gained from the board

=== Meeple ===

A meeple is a game piece, typically representing a "worker," depicted as a human-shaped figure in a specific color assigned to a player.

The key distinction between meeples and traditional resources is that meeples are placed on locations and can exist
in at least two states — standing or lying down.

This concept also applies to similar pieces like "houses," "animeeples," "ships," and others.

==== Representation in Database ====
In a simplified "tokens" database, it might be represented like this
(e.g., the red player's first meeple is on action spot 1, while the white meeple remains in supply):

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|meeple_ff0000_1
|actionspot_1
|1
|-
|meeple_ffffff_1
|supply
|0
|}

==== Representation in Material File (material.inc.php) ====

Here we define some properties, for example name can be used in notification and as tooltip, type can be used to create the div by
javascript, 'create' - can be used by server to create 8 meeples of this type in database and set location to 'supply_ff0000'

<pre>
$this->token_types = [
...
'meeple_ff0000' => [
'name' => clienttranslate('Red Worker'),
'type' => 'meeple meeple_ff0000',
'create' => 8,
'location' => 'supply_ff0000'
]
];
</pre>

==== HTML Representation ====
In HTML, this would look something like this.
<pre>
<div id="meeple_ff0000_1" class="meeple meeple_ff0000" data-state="1"></div>
</pre>

==== JavaScript Handling ====
When you get the object from the server, each meeple object will be similar to this:
<pre>
meeple = {
key: 'meeple_ff0000_1',
location: 'actionslot_1',
state: '1'
}
</pre>

You can create a corresponding `<div>` in the `setup()` method of `game.js` as follows:
<pre>
const playerColor = token.key.split('_')[1];
const resType = token.key.split('_')[0];
const tokenInfo = this.gamedatas.token_types[resType]; // token_types is the structure from the material file sent to the client
const div = `<div id="${token.key}" class="${tokenInfo.type} ${token.key}" data-state="${token.state}"></div>`;

$(token.location).insertAdjacentHTML('beforeend',div);
this.addTooltip(token.key, _(tokenInfo.name) + " " + _(tokenInfo.tooltip), "");
$(token.key).addEventListener('onclick',(ev)=>this.onMeepleClick(ev));

</pre>

When you receive an update notification (assuming you get the same "token" object), you either create it if not exists or animate:
<pre>
if ($(token.key)) {
// exists
$(token.key).dataset.state = token.state; // update state
this.moveToken(token.key, token.location); // animate to new location (custom functon), see [[BGA_Studio_Cookbook#Animation]]
} else {
// crate meeple using code in previous section
}

</pre>

==== Graphic Representation (.css) ====

Use same sprite technique from Resource section above.

When placed on the board it will look good with shadow, but its not recommended on mobile

filter: drop-shadow(black 5px 5px 5px);

To represent "laying down" meeple, you have to use a different sprite image, which you will apply based on data attribute

<pre>
.meeple[data-state="1"] {
background-image: url(...);
}
</pre>

You can also rotate you div, but it will look lame.
Other options include changing its shading, adding overlay (i.e. sad face) and so on.

==== Selection and Actions ====
To show user that meeple is active it best to use drop-shadow as image as non-square, however this may be very slow.
For simplier case use box shadow.

<pre>
.active_slot {
filter: drop-shadow(0px 0px 10px blue);
cursor: pointer;
}

/* draw a circle around game element for selection */
.active_slot_simple:after {
content: " ";
width: 110%;
top: -5%;
left: -5%;
aspect-ratio: 1/1;
position: absolute;
border-radius: 50%;
box-shadow: 0px 0px 4px 3px #64b4ff;
}

</pre>

See code example at https://codepen.io/VictoriaLa/pen/emYgLzR

When a meeple is gained from the supply, you can display a meeple icon on the status bar button
instead of showing the supply on the board.

=== Dice ===
The 2D dice can use similar handing as meeple but it has 6 states instead of 2.

IMPORTANT: Never roll dice using javascript. All dice rolling must be done using bga_rand() function in php.

==== Representation in Database ====
In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|die_black
|actionspot_1
|1
|-
|die_red
|supply
|6
|}

==== Representation in Material File (material.inc.php) ====

Similar to resource and meeple above

==== HTML Representation ====

<pre>
<div id="die_black" class="die" data-state="1"></div>
</pre>

==== JavaScript Handling (.js) ====
See meeple section

==== Graphic Representation (.css) ====
For dice we would usually use N x 6 sprite, and since the sides are square - the .jpg format is better (it is smaller then png)

<pre>
.die {
background-image: url(https://en.doc.boardgamearena.com/images/c/c5/64_64_dice.jpg);
background-size: 600%;
background-repeat: no-repeat;
aspect-ratio: 1/1;
width: 64px;
border-radius: 5%; /* looks better with rounded corders */
}
.die[data-state="3"] {
background-position: calc(100% / 5 * 2) 0%;
}
</pre>

The 3D dice a bit tricker to create but its feasible, see https://codepen.io/VictoriaLa/pen/QWBBbwz for an example.

Also multiple examples on N-sided dice can be found on [[BGA_Code_Sharing]]

==== Selection and Actions ====
Since it is a square its a lot easier to make a square selection highlight

<pre>
.die.active_slot {
box-shadow: 0px 0px 4px 4px blue;
}
</pre>

=== Card ===

Cards are the most complex game resource, they can be located in various zones, stacked, tapped, put face down and can have arbitrary complete abilities.
If you have square tiles - it can be treated the same as cards.

==== Representation in Database ====

In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|card_project_123
|tableau_ff0000
|1
|-
|card_corp_p1
|deck_corp
|6
|}

Means project card is player red tableau and state 1 means it has been used for example,
and second card of corproration file in in deck at position 6 from the top.

When duplcates are in play you need to add extra unique disambigator in the key.

Usually cards will have numeric id associated with type, but it this number is per expansition, so leave the space for expansion identifier in there also.

Another option use [[Deck]] component.

==== Representation in Material ====

All the card properties which do not change during the game can be put in material file (or its alternative)

This is example from terraforming mars
<pre>
'card_main_81' => [ //
'location' => 'deck_main',
'create' => 'single',
'num' => 81,
'name' => clienttranslate('Ganymede Colony'),
't' => 1,
'r' => "city('Ganymede Colony')",
'cost' => 20,
'tags' => 'Space City Jovian',
'vp' => 'tagJovian',
'deck' => 'Basic',
'text' => clienttranslate('Place a city tile ON THE RESERVED AREA [for Ganymede Colony].'),
'text_vp' => clienttranslate('1 VP per Jovian tag you have.'),
],
</pre>

==== HTML Representation ====

There is 2 main options:
* Use exact cards images in english
* Use cards images WITHOUT text

The 3d option is completely redo the graphic layout that game designed did already, but I won't go there

The first option is very simple and similar to other resources and meeple

<pre>
<div id="card_project_123" class="card card_project card_project_123" data-state="1"></div>
</pre>

The second option means you can add translated text instead
<pre>
<div id="card_project_123" class="card card_project card_project_123" data-state="1" data-cost="22">
<div class="card_name">Ganymede Colony</div>
<div class="card_text">Place a city tile ON THE RESERVED AREA [for Ganymede Colony].</div>
<div class="card_cost"></div>
</div>
</pre>

In the example above card_cost is also rendered as this can change during the game (even printed value is the same),
it would be rendered using data-cost attribute.

Instead of using class you can also use state even if it is static

<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>

Note: to make flip animation you effectively need to make a "3d" card and provide both faces with separate graphics,
which makes more complex div. See examples at https://thoun.github.io/bga-cards/demo/index.html

Note: you can also use [[Stock]] component that handles html, js, css, layout and selection at the same time. If do that skip sections below.

==== JavaScript Handling (.js) ====
You will get the server data which looks like this

<pre>
card = {
key: 'card_project_123',
location: 'tableau_ff0000',
state: '1'
}
</pre>

<pre>
createCard(token: Token) {
// token_types is the structure from the material file sent to the client
const tokenInfo = this.gamedatas.token_types[token.key];
const div = `
<div id="${token.key}" class="${tokenInfo.type} ${token.key}" data-state="${token.state}">
<div class="card_name">${_(tokenInfo.name)}</div>
<div class="card_text">${_(tokenInfo.text)}</div>
</div>`;

$(token.location).insertAdjacentHTML('beforeend',div);
this.addTooltipHtml(token.key, this.getTooptipHtmlForToken(token));
$(token.key).addEventListener("onclick", (ev) => this.onCardClick(ev));
}
</pre>

When you receive an update notification (assuming you get the same "token" object), you either create it if not exists or animate:
<pre>
if ($(token.key)) {
// exists
$(token.key).dataset.state = token.state; // update state
$(token.key).dataset.cost = token.cost; // update cost (discounted cost)
this.moveCard(token.key, token.location); // animate to new location (custom functon), see [[BGA_Studio_Cookbook#Animation]]
} else {
this.createCard(token);
}
</pre>

==== Graphic Representation (.css) ====

For this html
<pre>
<div id="game" class="classic_deck">
<div id="hand" class="hand">
<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>
<div id="card_C_K" class="card" data-suit='C' data-rank="K"> </div>
</div>
</div>
</pre>

This is example css using sprite image of playing cards
<pre>
.card {
background-image: url('https://x.boardgamearena.net/data/others/cards/FULLREZ_CARDS_ORIGINAL_NORMAL.jpg'); /* don't do full url in your game, copy this file inside img folder */

background-size: 1500% auto; /* this mean size of background is 15 times bigger than size of card, because its sprite */
border-radius: 5%;
width: 10em;
height: 13.5em;
box-shadow: 0.1em 0.1em 0.2em 0.1em #555;
}

.card[data-rank="10"] { /* 10 is column number 10 - 2 because we start from 0 and first card is sprite is 2. The multiplier is (15 - 1) is because we have 15 columns. -1 is because % in CSS is weird like that. */
background-position-x: calc(100% / (15 - 1) * (10 - 2));
}
.card[data-rank="K"] { /* King will be number 13 in rank */
background-position-x: calc(100% / (15 - 1) * (13 - 2));
}
.card[data-suit="H"] { /* Hears row position is 1 (because we count from 0). Multiplier (4 - 1) is because we have 4 rows and -1 is because % in CSS is weird like that. */
background-position-y: calc(100% / (4 - 1) * (1));
}
.card[data-suit="C"] { /* Clubs row position is 2 */
background-position-y: calc(100% / (4 - 1) * (2));
}
</pre>
See code at https://codepen.io/VictoriaLa/pen/mdMzRxa

==== Selection and Actions ====

Since it is a square its a lot easier to make a square selection highlight

<pre>
.card.active_slot {
box-shadow: 0px 0px 4px 4px blue;
}
</pre>

==== Card Layouts ====
There are two options - you use [[Stock]] component or don't, see [[Anti-Stock]] for details on how to do your own layouts.

This is comprehensive example of various card layouts and animations
https://thoun.github.io/bga-cards/demo/index.html

=== Hex Tiles ===
From data perspective hex tiles exactly the same as cards.
From visualization there is a small trick.

CSS:
<pre>
.hex {
width: var(--hex-width);
aspect-ratio: 1 / 1.1193;
border-radius: 30%;
background-color: yellow; /* this is just for demo, use proper .png file for this */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex.active_slot_simple {
background-color: rgba(86, 207, 110, 0.4);
}
.hex.active_slot {
filter: drop-shadow(0px 0px 10px blue);
}
</pre>

=== Tetris Tiles ===
You can use clip-path for actual shape and svg path for outline
See example at https://codepen.io/VictoriaLa/pen/OJmoZGw

=== Track ===

Tracker can be represented as "resource" in database - in this case its just number, or similar to "meeple" in which case
the location will have the "number" associated with position on track

In a simplified "tokens" database, it might be represented like this

{| class="wikitable"
|+token
! token_key
! token_location
! token_state
|-
|tracker_o
|scale_o_1
|0
|-
|tracker_t
|scale_t_10
|0
|}

The tracker location in this case may have some properties in material file, for example to trigger game effect when we land on this spot

<pre>
'scale_t' => [
'index_start' => 0,
'max' => 20,
'value_start' => -30,
'value_step' => 2,
'slot_type' => 'slot slot_t'
],
'scale_t_10' => [
'r' => 'ocean',
'param' => 't',
'tooltp' => clienttranslate('Place an ocean'),
'value' => 0
],
</pre>

The track in this case can be generated as series of slots (create in js)
<pre>
for(let i=trackInfo.index_start,value = trackInfo.value_start;i<trackInfo.index_start+trackInfo.max;i++,value+=trackInfo.value_step) {
$(trackInfo.key).insertAdjacentHTML('beforeend',`<div id="${trackInfo.key}_${i}" class="${trackInfo.slot_type} data-value=${value}"></div>`);
this.addTooltip(`${trackInfo.key}_${i}`, _(tokenInfo.tooltip), "");
}
</pre>

Then use regular move animation to move tracker into position on track.

== Code Organization ==

=== Including your own JavaScript module ===
'''Ingredients:''' ggg.js, modules/ggg_other.js

* Create ggg_other.js in modules/ folder and sync
<pre>
define([
"dojo", "dojo/_base/declare"
], function( dojo, declare )
{
return declare("bgagame.other", null, { // null here if we don't want to inherit from anything
constructor: function(){},
mystuff: function(){},
});

});

</pre>
* Modify ggg.js to include it

define([ "dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter",
g_gamethemeurl + "modules/ggg_other.js" // load my own module!!!
], function(dojo,
declare) {

use it

foo = new bgagame.other();

=== Including your own JavaScript module (II) ===

* Create ggg_other.js in modules/ folder and sync

define([], function () {
return "value";
});

* Modify ggg.js to include it

define([
"dojo",
"dojo/_base/declare",
"bgagame/modules/ggg_other",
"ebg/core/gamegui",
"ebg/counter"
], function(dojo, declare, other) {

});

This is maybe a little bit more the idea of the AMD Loader than the first option, although the first option should work as well.

A little explanation to this:
The define function loads all the modules listed in the array and calls the following function with these loaded modules as parameters.
By putting your module at the third position in the array it is passed as the third parameter to the function. Be aware that the modules are resolved by position only, not by name. So you can load the module '''ggg_other''' and pass it as a parameter with the name '''other'''. '''gamegui''' and '''counter''' are passed in as well, but when the parameters are not defined they are just skipped. Because these modules put their content into the global scope it does not matter and you can use them from there.

In the example above the string "value" is passed for the parameter '''other''', but the function in your module can return whatever you want. It can be an object, an array, something you declared with dojo.declare, you can return even functions.
Your module can load other modules. Just put them in the array at the beginning and pass them as parameters to your function.
The advantage of passing the values as parameter is that you do not need to put these values in the global scope, so they can't be collisions with values defined in other scripts or the BGA Framework.

The dojo toolkit provides good documentation to all of its components, the complete documentation for the AMD-Loader is here:
https://dojotoolkit.org/documentation/tutorials/1.10/modules/index.html It should be still correct, even as it seems to be only for version 1.10

=== Including your own PHP module ===
'''Ingredients:''' ggg.game.php, modules/ggg_other.php

* Create ggg_other.php in modules/ folder and sync
* Modify ggg.game.php to include it

require_once ('modules/ggg_other.php');

=== Creating a test class to run PHP locally ===

'''Ingredients:''' ggg.game.php, stubs
For this you need stubs of other method you can use this for example
https://github.com/elaskavaia/bga-sharedcode/raw/master/misc/module/table/table.game.php

Create another php files, i.e ggg_test.php
<pre>
<?php
define("APP_GAMEMODULE_PATH", "misc/"); // include path to stubs, which defines "table.game.php" and other classes
require_once ('eminentdomaine.game.php');

class MyGameTest1 extends MyGame { // this is your game class defined in ggg.game.php
function __construct() {
parent::__construct();
include '../material.inc.php';// this is how this normally included, from constructor
}

// override/stub methods here that access db and stuff
function getGameStateValue($var) {
if ($var == 'round')
return 3;
return 0;
}
}
$x = new MyGameTest1(); // instantiate your class
$p = $x->getGameProgression(); // call one of the methods to test
if ($p != 50)
echo "Test1: FAILED";
else
echo "Test1: PASSED";

</pre>

Run from command line like
php8.2 ggg_test.php

If you do it this way - you can also use local php debugger (i.e. integrated with IDE or command line).

=== Avoiding code in dojo declare style ===
Dojo class declarations are rather bizzare and do not work with most IDEs.
If you want to write in plain JS with classes, you can stub all the dojo define/declare stuff
and hook your class into that, so the classes are outside of this mess.

NOTE: this technique is for experienced developers, do not try it if you do not understand
the consequences.

This is complete example of game .js class
<pre>
// Testla is game name is has to be changed
class Testla {
constructor(game) {
console.log('game constructor');
this.game = game;
this.varfoo = new MyFoo(); // this example of class from custom module
}

setup(gamedatas) {
console.log("Starting game setup", this.varfoo);
this.gamedatas = gamedatas;
this.dojo.create("div", { class: 'whiteblock', innerHTML: _("hello") }, 'thething');
console.log("Ending game setup");
};
onEnteringState(stateName, args) {
console.log('onEnteringState : ' + stateName, args);
this.game.addActionButton('b1',_('Click Me'), (e)=>this.onButtonClick(e));
};
onLeavingState(stateName) {
console.log('onLeavingState : ' + stateName, args);
};
onUpdateActionButtons(stateName, args) {
console.log('onUpdateActionButtons : ' + stateName, args);
};
onButtonClick(event) {
console.log('onButtonClick',event);
};
};

define([
"dojo", "dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
g_gamethemeurl + '/modules/foo.js' // custom module if needed
],
function(dojo, declare) {
// testla is game name is has to be changed
return declare("bgagame.testla", ebg.core.gamegui, {
constructor: function() {
this.xapp = new Testla(this);
this.xapp.dojo = dojo;
},
setup: function(gamedatas) {
this.xapp.setup(gamedatas);
},
onEnteringState: function(stateName, args) {
this.xapp.onEnteringState(stateName, args?.args);
},
onLeavingState: function(stateName) {
this.xapp.onLeavingState(stateName, args);
},
onUpdateActionButtons: function(stateName, args) {
this.xapp.onUpdateActionButtons(stateName, args);
},
});
});

</pre>

=== More readable JS: onEnteringState ===

If you have a lot of states in onEnteringState or onUpdateActionButtons and friends - it becomes rather wild, you can do this trick to call some methods dynamically.

<pre>

onEnteringState: function(stateName, args) {
console.log('Entering state: ' + stateName, args);

// Call appropriate method
var methodName = "onEnteringState_" + stateName;
if (this[methodName] !== undefined) {
console.log('Calling ' + methodName, args.args);
this[methodName](args.args);
}
},

onEnteringState_playerTurn: function(args) { // this is args directly, not args.args
// process
},

onEnteringState_playerSomethingElse: function(args) {
// process
},

</pre>

Note: since its ignores the undefined functions you don't have define function for each state, but on the other hand you cannot make typos.
Same applies to onUpdateActionButtons except you pass 'args' to method, not args.args, and for onLeavingState where you don't pass anything.

=== Frameworks and Preprocessors ===

* [[BGA Type Safe Template]] - Setting up a fully typed project using typescript and more!
* [[Using Vue]] - work-in-progress guide on using the modern framework Vue.js to create a game
* [[Using Typescript and Scss]] - How to auto-build Typescript and SCSS files to make your code cleaner

=== PHP Migration ===

'''Ingredients:''' */php, modules/*.php

BGA recently migrated to from 7.4 to 8.2.
New php has new rules and deprecations.

There is a tool that can help you do the migration automation, which is php module called rector https://getrector.com/.
Below is the recipe that converts variables in strings like ${var} (which is deprecated) to {$var}.

1. Install the module
composer global require --dev rector/rector
2. Go to your project directory, commit your code first before this!

3. Create a rector.php file on top level with the following content:
<pre>
<?php

use Rector\Config\RectorConfig;
use Rector\Php82\Rector\Encapsed\VariableInStringInterpolationFixerRector;

return RectorConfig::configure()
->withPaths([
__DIR__
])
// A. whole set
//->withPreparedSets(typeDeclarations: true)
// B. or few rules
->withRules([
VariableInStringInterpolationFixerRector::class
]);
</pre>
4. Dry run (mine is on linux, not sure where global install on windows)
~/.config/composer/vendor/bin/rector process --dry-run

5. If happy re-run without --dry-run

6. Can remove rector.php now (or can do different rules)

== Backend ==

=== Assigning Player Order ===
Normally when game starts there is "natural" player order assigned randomly.

If you want to deliberatly assign player order at the start of the game (for example, in a game with teams options), you can do so by retrieving the initialization-only player attribute '''player_table_order''' and using it to assign values to '''player_no''' (which is normally assigned at the start of a game in the order in which players come to the table). (See [https://en.doc.boardgamearena.com/Game_database_model:_dbmodel.sql#The_player_table Game database model] for more details.)

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
<b>WARNING:</b> To prevent collusion, random order should be the default option and <b>non-random options should be limited to friendly mode.</b>
</div>

'''Example:'''
<pre>
// Retrieve inital player order ([0=>playerId1, 1=>playerId2, ...])
$playerInitialOrder = [];
foreach ($players as $playerId => $player) {
$playerInitialOrder[$player['player_table_order']] = $playerId;
}
ksort($playerInitialOrder);
$playerInitialOrder = array_flip(array_values($playerInitialOrder));

// Player order based on 'playerTeams' option
$playerOrder = [0, 1, 2, 3];
switch ($this->getGameStateValue('playerTeams')) {
case $this->TEAM_1_2:
$playerOrder = [0, 2, 1, 3];
break;
case $this->TEAM_1_4:
$playerOrder = [0, 1, 3, 2];
break;
case $this->TEAM_RANDOM:
shuffle($playerOrder);
break;
default:
case $this->TEAM_1_3:
// Default order
break;
}

// Create players
// Note: if you added some extra field on "player" table in the database (dbmodel.sql), you can initialize it there.
$sql =
'INSERT INTO player (player_id, player_color, player_canal, player_name, player_avatar, player_no) VALUES ';
$values = [];

foreach ($players as $playerId => $player) {
$color = array_shift($default_colors);
$values[] =
"('" .
$playerId .
"','$color','" .
$player['player_canal'] .
"','" .
addslashes($player['player_name']) .
"','" .
addslashes($player['player_avatar']) .
"','" .
$playerOrder[$playerInitialOrder[$playerId]] .
"')";
}
$sql .= implode(',', $values);
$this->DbQuery($sql);
$this->reattributeColorsBasedOnPreferences(
$players,
$gameinfos['player_colors']
);
$this->reloadPlayersBasicInfos();
</pre>

=== Send different notifications to active player vs everybody else ===

'''Ingredients:''' ggg.js

Hack alert. This is a hack. We were hoping for proper solution by bga framework.

This will allow you to send notification with two message one for specific player and one for everybody else including spectators.
Note that this does not split the data - all data must be shared.

Add this to .js file (if you already overriding it merge obviously)
<pre>
/** @Override */
format_string_recursive: function(log, args) {
if (typeof args.log_others != 'undefined' && typeof args.player_id != 'undefined' && this.player_id != args.player_id)
log = args.log_others;
return this.inherited(arguments); // you must call this to call super
},
</pre>

Example of usage (from eminentdomain)
<pre>
$this->notify->all('tokenMoved',
clienttranslate('${player_name} adds +2 Colonies to ${place_name}'), // notification with show for player with player_id
['player_id'=>$player_id, // this is mandatory
'log_others'=>clienttranslate('${player_name} adds +2 Colonies to an unknown planet'), // notification will show for others
...
]);
</pre>

=== Send transient notifications without incrementing move ID ===

'''Ingredients:''' ggg.php

Hack alert. This is a hack.

Use this if you need to send some transient notification that should not create a new move ID. The notification should be idempotent -- it should have no practical effect on the game state and would be '''safe to drop''' (e.g., it would not matter if a player never received this notification). For example, in a co-op game you want all players to see a real-time preview of some action, before the active player commits their turn.

Doing this mainly affects the instant replay & archive modes. During replay, the BGA framework automatically inserts a 1.5-second pause between each "move". With this hack, your transient notifications are not considered to be a "move", so no pause gets added.

; In ggg.php
<pre>
$this->not_a_move_notification = true; // note: do not increase the move counter
$this->notify->all('cardsPreview', '', $args);
</pre>

Note: you cannot have code that send notification or even changes state after this, and you cannot reset this variable back either because it only takes effect when you exit action handling function

== Assorted Stuff ==

=== Out-of-turn actions: Un-pass ===

'''Ingredients:''' ggg.js, ggg.game.php, ggg.action.php, states.inc.php

In multiplayer game sometimes players passes but than they think more and want to un-Pass and redo their choice.
To re-active a player who passes some trickery required.

Define a special action that does that and hook it up.

In states.inc.php add an action to multipleactiveplayer state to "unpass", lets call it "actionCancel"

In ggg.action.php add action hook
public function actionCancel() {
$this->setAjaxMode();
$this->game->actionCancel();
$this->ajaxResponse();
}

In ggg.game.php add action handler
function actionCancel() {
$this->gamestate->checkPossibleAction('actionCancel');
$this->gamestate->setPlayersMultiactive(array ($this->getCurrentPlayerId() ), 'error', false);
}

Finally to call this in client ggg.js you would do something like:
<pre>
onUpdateActionButtons: function(stateName, args) {
if (this.isCurrentPlayerActive()) {
// ...
} else if (!this.isSpectator) { // player is NOT active but not spectator
switch (stateName) {
case 'playerTurnMultiPlayerState':
this.addActionButton('button_unpass', _('Oh no!'), 'onUnpass');
break;
}
}
}

onUnpass: function(e) {
this.bgaPerformAction("actionCancel", null, { checkAction: false }); // no checkAction!
}
</pre>
Although be careful that if the turn comes back to the player while he is about to click cancel, the action buttons will be updated and the player will misclick which can be quite frustrating. To avoid this, move the cancel button to another position, like to the left of pagemaintitletext:
dojo.place('button_unpass', 'pagemaintitletext', 'before');
Being out of the generalactions div, it won't be automatically destroyed like normal buttons, so you'll have to handle that yourself in onLeavingState. You might also want to change the button color to red (blue buttons for active player only, red buttons also for inactive players?)

Note: same technique can be used to do other out-of-turn actions, such as re-arranging cards in hand, exchanging resources, etc (i.e. if permitted by rules, such as "at any time player can...")

=== Multi Step Interactions: Select Worker/Place Worker - Using Selection ===

'''Ingredients:''' ggg.js

Simple way to implement something like that without extra states is to use "selection" mechanism. When user click on worker add some sort of class into that element i.e. 'selected' (which also have to have some indication by css i.e. outline).

Than user can click on placement zone, you can use dojo.query for "selected" element and use it along with zone id to send data to server. If proper worker is not selected yet can give a error message using this.showMessage(...) function.

Extra code required to properly cleanup selection between states.
Also when you do that sometimes you want to change the state prompt, see below 'Change state prompt'

=== Multi Step Interactions: Select Worker/Place Worker - Using Client States ===

'''Ingredients:''' ggg.js

I don't think its documented feature but there is a way to do client-only states, which is absolutely wonderful for few reasons
* When player interaction is two step process, such as select worker, place worker, or place worker, pick one of two resources of your choice
* When multi-step process can result of impossible situation and has to be undone (by rules)
* When multi-step process is triggered from multiple states (such as you can do same thing as activated card action, pass action or main action)

So lets do Select Worker/Place Worker

Define your server state as usual, i.e. playerMainTurn -> "You must pick up a worker".
Now define a client state, we only need "name" and "descriptionmyturn", lets say "client_playerPicksLocation". Always prefix names of client state with "client_" to avoid confusion. Now we have to do the following:
* Have a handler for onUpdateActionButtons for playerMainTurn to activate all possible workers he can pick
* When player clicks workers, remember the worker in one of the members of the main class, I usually use one called this.clientStateArgs.
* Transition to new client state
onWorker: function(e) {
var id = event.currentTarget.id;
dojo.stopEvent(event);
... // do validity checks
this.clientStateArgs.worker_id = id;
this.setClientState("client_playerPicksLocation", {
descriptionmyturn : _("${you} must select location"),
});
}
* Have a handler for onUpdateActionButtons for client_playerPicksLocation to activate all possible locations this worker can go AND add Cancel button (see below)
* Have a location handler which will eventually send a server request, using stored this.clientStateArgs.worker_id as worker id
* The cancel button should call a method to restore server state, also if you doing it for more than one state you can add this universally using this.on_client_state check

if (this.isCurrentPlayerActive()) {
if (this.on_client_state && !$('button_cancel')) {
this.addActionButton('button_cancel', _('Cancel'), dojo.hitch(this, function() {
this.restoreServerGameState();
}));
}
}
Note: usually I call my own function call this.cancelLocalStateEffects() which will do more stuff first then call restoreServerGameState(), same function is usually needs to be called when server request has failed (i.e. invalid move)

Note: If you need more than 2 steps, you may have to do client side animation to reflect the new state, which gets trickier because you have to undo that also on cancellation.

Code is available here [https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js sharedcode.js] (its using playerTurnPlayCubes and client_selectCubeLocation).

=== Action Stack - Using Client States ===

Action stack required where game is very complex and use triggered effects that can "stack". It not always actual stack, it can be queue or random access.

Examples:
* Magic the Gathering - classic card game where effects go on Stack, that allows to counter spell and counter spell of counter spell (not on bga - it just example of mechanics)
* Ultimate Railroads - action taking game where effects can be executed in any order
* Lewis and Clark - card game where actions executed as queue

There is two ways of implementing it - on the server or the client.
For the server see article below.
The requirement for client side stack implementation is - all action can be undone, which means
* No dice rolls
* No card drawn
* No other players interaction

No snippets are here, as this will be too complex but basically flow is:
* You have a action/effect stack (queue/list) as js object attached to "this", i.e. this.unprocessed_actions
* When player plays a card, worker, etc, you read the effect of that card from the material file (client copy), and place into stack
* Then we call dispatch method which pulls the next action from the stack and change client state accordinly, i.e. this.setClientState("client_playerGainsCubes")
* When players acts on it - the action is removed from the stack and added to "server action arguments" list, this is another object which be used to send ajax call, i.e. this.clientStateArgs
* If nothing left in stack we can submit the ajax call assembling parameters from collected arguments (that can include action name)
* This method allows cheap undo - by restoring server state you will wipe out all user actions (but if you need intermediate aninmation you have to handle it yourself)

Code can be found in Ultimate Railroads game (but it is random access list - so it a bit complex) and Lewis and Clark (complexity - user can always deny part of any effect)

=== Action Stack - Using Server States ===

See definition of Action Stack above.

To implement you usually need another db table that has the following fields: index of effect - which is used for sorted access, type - which is essense of the effect (i.e. collect resource), some extra arguments (i.e. resource type and resource count), and usually owner of the effect (i.e. player id)
The flow is:
* There is some initial player state, where player can play card for example
* Player main action - pushes the card effect on stack, which also can cause triggered effects which also go on stack
* After action processing is finished switch to game state which is "dispatcher"
* Dispatcher pulls the top effect (whatever definition of the top is), changes the active player and changes the state to appropriate player state to collect response. The "top" can be choice of multiple actions, in this case player has to chose one before resolving the effect.
* Player state knows about the stack and pulls arguments (argX) from the effect arguments of the db
* Player action should clear up the top effect, and can possibly add more effects, then switch to "dispatcher" state again
* If stack is empty, dispatcher can either pick next player itself or use another game state which responsible for picking next player

Code can be found in Tapestry and Terraforming Mars.
=== Custom error/exception handling in JavaScript ===

; In ggg.php
Throw BgaUserException with some easy-to-identify prefix such as "!!!" and a custom error code. DO NOT TRANSLATE this message text. The exception will rollback database transaction and cancel all changes (including any notifications).
<pre>
function foo(bool $didConfirm = false): void
{
// do processing for the user's move
// afterwards, you determine this move will end the game
// so you want to rollback the transaction and require the user to confirm the move first

if ($gameIsEnding && !$didConfirm) {
throw new BgaUserException('!!!endGameConfirm', 9001);
}
}
</pre>

; In ggg.js
Override framework function showMessage to suppress the red banner message and gamelog message when you detect the "!!!" prefix
<pre>
/* @Override */
showMessage: function (msg, type) {
if (type == "error" && msg && msg.startsWith("!!!")) {
return; // suppress red banner and gamelog message
}
this.inherited(arguments);
},
</pre>

Deal with the error in your callback:
<pre>
fooAction: function (didConfirm) {
var data = {
foo: "bar",
didConfirm: !!didConfirm,
};
this.bgaPerformAction("fooAction", data).catch((error, errorMsg) => {
if (error && errorMsg == "!!!endGameConfirm") {
// your custom error handling goes here
// for example, show a confirmation dialog and repeat the action with additional param
this.confirmationDialog(
_("Doing the foo action now will end the game"),
() => this.fooAction(true)
);
}
});
},
</pre>

For custom global error handling, you could modify ajaxcallwrapper:
<pre>
ajaxcallwrapper: function (action, args, handler) {
if (!args) args = {};
args.lock = true;
args.version = this.gamedatas.version;
if (this.checkAction(action)) {
this.bgaPerformAction(
action,
args
).catch((error, errorMsg, errorCode) => {
if (error && errorMsg == "!!!checkVersion") {
this.infoDialog(
_("A new version of this game is now available"),
_("Reload Required"),
() => {
window.location.reload();
},
true
);
} else {
if (handler) handler(error, errorMsg, errorCode);
}
}
);
}
},
</pre>

=== Force players to refresh after new deploy ===

When you deploy a new version of your game, the PHP backend code is immediately updated but the JavaScript/HTML/CSS frontend code *does not update* for active players until they manually refresh the page (F5) in their browser. Obviously this is not ideal. In the best case, real-time tables don't see your shiny new enhancements. In the worst case, your old JS code isn't compatible with your new PHP code and the game breaks in strange ways (any bug reports filed will be false positives and unable to reproduce). To avoid any problems, you should force all players to immediately reload the page following a new deploy.

By throwing a "visible" exception (simplest solution), you'll get something like this which instructs the user to reload:

[[File:Force-refresh.png|950x950px]]

Or, if you combine this technique with the above custom error handling technique, you could do something a bit nicer. You could show a dialog box and automatically refresh the page when the user clicks "OK":

[[File:Reload-required.png|500x500px]]
; In ggg.php
Transmit the server version number in <code>getAllDatas()</code>.
<pre>
protected function getAllDatas(): array
{
$players = $this->getCollectionFromDb("SELECT player_id id, player_score score FROM player");
return [
'players' => $players,
'version' => intval($this->gamestate->table_globals[300]), // <-- ADD HERE
...
];
}
</pre>

Create a helper function to fail if the client and server versions mismatch. Note the version check uses <code>!=</code> instead of <code><</code> so it can support rollback to a previous deploy as well. ;-)
<pre>
public function checkVersion(int $clientVersion): void
{
if ($clientVersion != intval($this->gamestate->table_globals[300])) {
// Simplest way is to throw a "visible" exception
// It's ugly but comes with a "click here" link to refresh
throw new BgaVisibleSystemException($this->_("A new version of this game is now available. Please reload the page (F5)."));

// For something prettier, throw a "user" exception and handle in JS
// (see BGA cookbook section above on custom error handling)
throw new BgaUserException('!!!checkVersion');
}
}
</pre>
; In ggg.action.php
Create a helper function for actions:
<pre>
private function checkVersion()
{
$clientVersion = (int) $this->getArg('version', AT_int, false);
$this->game->checkVersion($clientVersion);
}
</pre>

Call <code>$this->checkVersion()</code> at the top of <b>every action function</b>, immediately after <code>$this->setAjaxMode()</code>:
<pre>
public function move()
{
$this->setAjaxMode();
$this->checkVersion(); // <-- ADD HERE
...
$this->ajaxResponse();
}
</pre>

; In ggg.js
Transmit the version (from gamedatas) as a parameter with every ajax call. For example, if you're already using a wrapper function for every ajax call, add it like this:
<pre>
ajaxcallwrapper: function (action, args) {
if (!args) args = {};
args.version = this.gamedatas.version; // <-- ADD HERE
this.bgaPerformAction(action, args);
},
</pre>

=== Disable / lock table creation for new deploy ===

If you are deploying a major new game version, especially if it involves upgrading production game databases, you may have a lot of angry players if you break their tables. Depending on your changes, you may be able to restore the previous version and fix the tables easily.

However, if a new deploy turns out bad and players created turn-based tables while it was live, it may be quite difficult to fix those tables, since they were created from a bad deploy.

The solution? You can announce in your game group that you are locking table creation, and then in your new version, add an impossible startcondition to an existing option.
Note: This only makes sense if you have a few games running in real time mode in the time of deployment, otherwise it won't achieve much, unless you wait at least a day for other turn based games to break (or not)

Here is an example of an option with only 2 values (if you don't have options at all you have to create a fake option to use this method, if you have more values - you have to list them all):

; In gameoptions.json
<pre>
"startcondition": {
"0": [ { "type": "minplayers", "value": 32, "message": "Maintenance in progress. Table creation is disabled." } ],
"1": [ { "type": "minplayers", "value": 32, "message": "Maintenance in progress. Table creation is disabled." } ]
},
</pre>
; In gameoptions.inc.php (older method if you have it in php)
<pre>
// TODO NEXT remove after testing deploy to upgrade, here 0 and 1 - replace with values of your option!
'startcondition' => [
0 => [ [ 'type' => 'minplayers', 'value' => 32, 'message' => totranslate('Maintenance in progress. Table creation is disabled.') ] ],
1 => [ [ 'type' => 'minplayers', 'value' => 32, 'message' => totranslate('Maintenance in progress. Table creation is disabled.') ] ],
],
</pre>

* Be sure to click "Reload game options configuration" after making this change, then test in studio (test that you cannot create any table)
* Deploy to production
* Now, when a player attempts to create a new table, they will see a red error bar with your "Maintenance in progress" message.
* Wait for screaming (if you have real times games in progress waiting 15 min probably ok, if you have only turn based games, probably a day)
* Once you confirm the new deploy looks good, you can revert the change in gameoptions.inc.php and do another deploy.

=== Local Storage ===

There is not much you can store in localStorage (https://developer.mozilla.org/docs/Web/API/Window/localStorage), since most stuff should be stored either in game db or in user prefrences,
but some stuff makes sense to store there, for example "zoom" level (if you use custom zooming). This setting really affect this specific host and specific browser, setting it localStorage makes most sense.

game.js
<pre>
setup: function (gamedatas) {
let zoom = localStorage.getItem(`${this.game_name}_zoom`);
this.setZoom(zoom);
...
},
</pre>
In this case setZoom is custom function to actually set it.
When zoom changed, for example when some buttons pressed, store current value (but sanitize it so it never so bad that game cannot be viewed

<pre>
setZoom: function (zoom) {
zoom = parseInt(zoom) || 0;
if (zoom === 0 || zoom < 0.1 || zoom > 10) {
zoom = 1;
}
this.zoom = zoom;
localStorage.setItem(`${this.game_name}_zoom`, "" + this.zoom);
... do actual zooming stuff
},
</pre>

=== Capture client JavaScript errors in the "unexpected error" log ===

PHP (backend) errors are recorded in the "unexpected error" log, but JavaScript (frontend) errors are only available in the browser itself. This means you have no visibility about things that go wrong in the client... unless you make clients report their errors to the server.

; In actions.php:
<pre>
public function jsError()
{
$this->setAjaxMode(false);
$this->game->jsError($_POST['userAgent'], $_POST['msg']);
$this->ajaxResponse();
}
</pre>

; In game.php:
<pre>
public function jsError($userAgent, $msg): void
{
$this->error("JavaScript error from User-Agent: $userAgent\n$msg // ");
}
</pre>

; In game.js:
<pre>
define(["dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter"], function (dojo, declare) {
const uniqJsError = {};
...

return declare("bgagame.nowboarding", ebg.core.gamegui, {
...
/* @Override */
onScriptError(msg) {
if (!uniqJsError[msg]) {
uniqJsError[msg] = true;
console.error("⛔ Reporting JavaScript error", msg);
this.ajaxcall(
"/" + this.game_name + "/" + this.game_name + "/jsError.html",
{
msg,
userAgent: navigator.userAgent,
},
this,
() => {},
() => {},
"post"
);
}
this.inherited(arguments);
},
</pre>

== Algorithms ==

=== Generate permutations in lexicographic order ===

Use this when you have an array like [1, 2, 3, 4] and need to loop over some/all 24 permutations of possible ordering. This type of [https://www.php.net/manual/en/language.generators.syntax.php generator function] computes each possibility one at a time, making it vastly more efficient than either a normal iteration or recursive function that produce all possibilities up front.

<pre>
function generatePermutations(array $array): Generator
{
// https://en.wikipedia.org/wiki/Permutation#Generation_in_lexicographic_order
// Sort the array and this is the first permutation
sort($array);
yield $array;

$count = count($array);
do {
// Find the largest index k where a[k] < a[k + 1]
// End when no such index exists
$found = false;
for ($k = $count - 2; $k >= 0; $k--) {
$kvalue = $array[$k];
$knext = $array[$k + 1];
if ($kvalue < $knext) {
// Find the largest index l greater than k where a[k] < a[l]
for ($l = $count - 1; $l > $k; $l--) {
$lvalue = $array[$l];
if ($kvalue < $lvalue) {
// Swap a[k] and a[l]
[$array[$k], $array[$l]] = [$array[$l], $array[$k]];

// Reverse the sequence from a[k + 1] up to and including the final element
$reverse = array_reverse(array_slice($array, $k + 1));
array_splice($array, $k + 1, $count, $reverse);
yield $array;

// Restart with the new array to find the next permutation
$found = true;
break 2;
}
}
}
}
} while ($found);
}
</pre>

Usage:
<pre>
$cash = [4, 1, 2, 3, 4];
foreach ($this->generatePermutations($cash) as $p) {
// your code here to evaluate permutation $p
// first iteration: $p = [1, 2, 3, 4, 4]
// last (60th) iteration: $p = [4, 4, 3, 2, 1]
// break from loop once you achieve your goal
}
</pre>

[[Category:Studio]]

Gamehelpkingsinthecorner

2025-03-22T16:37:43Z

Ufm: /* Overview */

===Overview===

Draw a card and then play lower numbers onto opposite colors (reds on blacks and blacks on reds)

If you have a King, you MAY play it on one of the four corner areas, which then becomes a new pile to play lower numbers of opposite colors onto.

You may move an entire pile onto another pile if the base card of the moved card is lower and opposite to the top card of the destination pile

If an orthogonal pile is empty, you may play any card onto it

If you can't do any of the above, end the turn

First player to get rid of all their cards wins the round

Kings score -10 per each, other cards score -1 per each

Gamehelpschafkopf

2025-03-18T13:47:56Z

Ufm: Removing stub

Gamehelpcrisps

2025-03-17T03:24:03Z

Ufm:

==Overview==

The player who finishes playing their hand first in a round wins that round, and immediately wins when they win 3 rounds.

[[https://boardgamearena.com/tutorial?game=crisps&tutorial=1701 Fast tutorial]]

==Start of Round==

The player with the lowest score starts the round.

If tied, the player who went first least recently starts.

====Card Deal====

The deck contains 4 copies each of 1-9 plus four Crisps.

Each player then receives 12 cards.

4 Cards are removed from the round blind.

====Turn====

There are 4 ordinary and 2 special sets/run:

====== Ordinary combinations======

- Single
- Pair
- Run of Singles (minimum 3)
- Run of Pairs (minimum 2 pairs / 4 cards)

====== Special combinations======

- Three of a kind
- Four of a kind

A Crisp CANNOT be used in a Run.

The first player can play any type they wish.

The remaining players either follow or pass, this continues until someone passes or someone empties their hand.

If you Follow with an Ordinary, it must be the same type of Ordinary, it must be the same Length of Ordinary, it must be equal or higher rank.

If you Follow with a Special, the previous play MUST contain a Crisp, otherwise you have to Follow with Ordinary. In addition, a Special may follow a Special if either it contains more cards OR the same quantity but a higher rank.

====Round End====

If the round ends with someone passing, the player just before them can either take the faceup card set aside at the start or a blind deck card, after which the passing player has to take the card from the other option.

If the round ends with someone emptying their hand, they score 1 point.

If Game End isn't triggered, start a new round.

====Game End====

The game ends as soon as a player scores 3 points.

== Options ==

- '''No face-up draw''': After someone passes, both players draw a card from the deck face-down.

- '''Special rank runs''': Crisps can be used in runs.

- '''Automatic turn skip''': The game checks only public information to determine whether a player has any chance of beating the current combination regardless of the cards in hand. If all relevant higher cards are discarded already, the turn is skipped automatically.

Help

2025-03-13T03:09:36Z

Ufm:

== An issue? A question? ==

* [https://boardgamearena.com/#!faq Frequently asked questions] is the most complete source of help for BGA.
* [https://forum.boardgamearena.com Forums] are also helpful to get information.

== Games ==

<span title="(page does not exist)" style="color:#dd3333;">Red game names</span> need game help/summaries written for them.
Help out and write one by selecting a <span style="color:#dd3333;">(page does not exist) link</span> below which will allow you to create the page.
[https://en.doc.boardgamearena.com/Wiki_formatting Wiki formatting] is a collection of unofficial tips on how to make wiki pages display well on [https://BoardGameArena.com BoardGameArena.com].



{{infoBox|minWidth=100%|titleColor=#040|color=#efed
|title=Released on BGA
|body=<div style="columns:12rem auto;">
* [[Gamehelponeohone|101: the match]]
* [[Gamehelptwelvechips|12 Chip Trick]]
* [[Gamehelpthirteenclues|13 Clues]]
* [[Gamehelpfifteendays|15 Days]]
* [[Gamehelptwentyfourseven|24/7: The Game]]
* [[Gamehelpthreethousandscoundrels|3000 Scoundrels]]
* [[Gamehelpthirtyone|31]]
* [[Gamehelpfortytwo|42]]
* [[Gamehelpsechsnimmt|6 nimmt!]]
* [[Gamehelpsixtyone|61 Autumn leaves]]
* [[Gamehelpsevenwonders|7 Wonders]]
* [[Gamehelpsevenwondersarchitects|7 Wonders Architects]]
* [[Gamehelpsevenwondersduel|7 Wonders Duel]]
* [[Gamehelpeightmastersrevenge|8 Masters' Revenge]]
* [[Gamehelpninetynineaddition|99 (addition card game)]]
* [[Gamehelpninetynine|99 (trick-taking card game)]]
* [[Gamehelpfeastforodin|A Feast for Odin]]
* [[Gamehelpfistfulofgold|A Fistful of Gold]]
* [[Gamehelpagestofrobinhood|A Gest of Robin Hood]]
* [[Gamehelpabalone|Abalone]]
* [[Gamehelpabandonallartichokes|Abandon All Artichokes]]
* [[Gamehelpabyss|Abyss]]
* [[Gamehelpafterus|After Us]]
* [[Gamehelpageofchampagne|Age of Champagne]]
* [[Gamehelpageofcivilization|Age of Civilization]]
* [[Gamehelpageofinnovation|Age of Innovation: a Terra Mystica game]]
* [[Gamehelpagricola|Agricola]]
* [[Gamehelpakropolis|Akropolis]]
* [[Gamehelpalhambra|Alhambra]]
* [[Gamehelpalmadi|Almadi]]
* [[Gamehelpaltered|Altered]]
* [[Gamehelpalveole|Alveole]]
* [[Gamehelpamalfi|Amalfi - Renaissance]]
* [[Gamehelpamazonas|Amazonas]]
* [[Gamehelpamyitis|Amyitis]]
* [[Gamehelpanachrony|Anachrony]]
* [[Gamehelpancientknowledge|Ancient Knowledge]]
* [[Gamehelpapplejack|Applejack]]
* [[Gamehelparchitectsofamytis|Architects of Amytis]]
* [[Gamehelparchitectsofthewestkingdom|Architects of the West Kingdom]]
* [[Gamehelparctic|Arctic]]
* [[Gamehelparcticscavengers|Arctic Scavengers]]
* [[Gamehelparknova|Ark Nova]]
* [[Gamehelparmadora|Armadöra]]
* [[Gamehelpartdecko|Art Decko]]
* [[Gamehelpartthief|Art Thief]]
* [[Gamehelpassyria|Assyria]]
* [[Gamehelpastra|Astra]]
* [[Gamehelpauntiemildred|Auntie Mildred's list of random tasks]]
* [[Gamehelpautomobiles|Automobiles]]
* [[Gamehelpazul|Azul]]
* [[Gamehelpazulduel|Azul Duel]]
* [[Gamehelpazulsummerpavilion|Azul: Summer Pavilion]]
* [[Gamehelpbabydinosaurrescue|Baby Dinosaur Rescue]]
* [[Gamehelpbackgammon|Backgammon]]
* [[Gamehelpbacon|Bacon]]
* [[Gamehelpbagofchips|Bag of Chips]]
* [[Gamehelpbahamataxi|Bahama Taxi]]
* [[Gamehelpballoonpop|Balloon Pop!]]
* [[Gamehelpbandada|Bandada]]
* [[Gamehelpbandido|Bandido]]
* [[Gamehelpbang|BANG!]]
* [[Gamehelpbaolakiswahili|Bao la Kiswahili]]
* [[Gamehelpbarbu|Barbu]]
* [[Gamehelpbarenpark|Bärenpark]]
* [[Gamehelpbarrage|Barrage]]
* [[Gamehelpbattleoflits|Battle of LITS]]
* [[Gamehelpbattlesheep|Battle Sheep]]
* [[Gamehelpbattlespiritssaga|Battle Spirits Saga]]
* [[Gamehelpbattleship|Battleships Pencil & Paper]]
* [[Gamehelpbelote|Belote]]
* [[Gamehelpbetta|Betta]]
* [[Gamehelpbeyondthesun|Beyond the Sun]]
* [[Gamehelpbids|Bids]]
* [[Gamehelpbigmonster|Big Monster]]
* [[Gamehelpbigtimesoccer|Big Time Soccer]]
* [[Gamehelpbigtwo|Big Two]]
* [[Gamehelpbiomos|Biomos]]
* [[Gamehelpbiyi|Biyi]]
* [[Gamehelpblackjack|Blackjack]]
* [[Gamehelpblaze|Blaze]]
* [[Gamehelpbloodrage|Blood Rage]]
* [[Gamehelpblooms|Blooms]]
* [[Gamehelpblueskies|Blue Skies]]
* [[Gamehelpbobail|Bobail]]
* [[Gamehelpbombay|Bombay]]
* [[Gamehelpbonsai|Bonsai]]
* [[Gamehelpboomerangaustralia|Boomerang: Australia]]
* [[Gamehelpboomerangeurope|Boomerang: Europe]]
* [[Gamehelpboomerangusa|Boomerang: USA]]
* [[Gamehelpboop|boop.]]
* [[Gamehelpboreal|Boreal]]
* [[Gamehelpbossquest|Boss Quest]]
* [[Gamehelpbotanicus|Botanicus]]
* [[Gamehelpbreakthecode|Break the Code]]
* [[Gamehelpbriscola|Briscola]]
* [[Gamehelpbubbleepop|Bubblee Pop]]
* [[Gamehelpbug|Bug]]
* [[Gamehelpbunnykingdom|Bunny Kingdom]]
* [[Gamehelpburglebros|Burgle Bros.]]
* [[Gamehelpbutterfly|Butterfly]]
* [[Gamehelpbuttons|Buttons]]
* [[Gamehelpbuyword|BuyWord]]
* [[Gamehelpcacao|Cacao]]
* [[Gamehelpcairn|Caïrn]]
* [[Gamehelpcantstop|Can't Stop]]
* [[Gamehelpcantstopexpress|Can't Stop Express]]
* [[Gamehelpcanasta|Canasta]]
* [[Gamehelpcanosa|Canosa]]
* [[Gamehelpcanvas|Canvas]]
* [[Gamehelpcapereurope|Caper: Europe]]
* [[Gamehelpcaptainflip|Captain Flip]]
* [[Gamehelpcapybarancapybara|Capybara'n'Capybara]]
* [[Gamehelpcaravan|Caravan]]
* [[Gamehelpcarcassonne|Carcassonne]]
* [[Gamehelpcarcassonnehuntersandgatherers|Carcassonne: Hunters & Gatherers]]
* [[Gamehelpcardiceo|Cardiceo]]
* [[Gamehelpcaribbeanallfours|Caribbean All Fours]]
* [[Gamehelpcarnegie|Carnegie]]
* [[Gamehelpcartographers|Cartographers]]
* [[Gamehelpcastlecombo|Castle Combo]]
* [[Gamehelpcastlesofcaleira|Castles of Caleira]]
* [[Gamehelpcatcafe|Cat Café]]
* [[Gamehelpcatinthebox|Cat in the Box: Deluxe Edition]]
* [[Gamehelpcatan|CATAN]]
* [[Gamehelpcaverna|Caverna]]
* [[Gamehelpcaylus|Caylus]]
* [[Gamehelpcelestia|Celestia]]
* [[Gamehelpcentury|Century: Spice Road]]
* [[Gamehelpcephalopod|Cephalopod]]
* [[Gamehelpchakra|Chakra]]
* [[Gamehelpchallengers|Challengers!]]
* [[Gamehelpcheckers|Checkers]]
* [[Gamehelpcheeztricks|Cheez-Tricks]]
* [[Gamehelpchess|Chess]]
* [[Gamehelpchicagoexpress|Chicago Express]]
* [[Gamehelpchinagold|China Gold]]
* [[Gamehelpchinesecheckers|Chinese checkers]]
* [[Gamehelpchocolatefactory|Chocolate Factory]]
* [[Gamehelpchromino|Chromino]]
* [[Gamehelpcinco|Cinco]]
* [[Gamehelpcircleoflife|Circle of Life]]
* [[Gamehelpcityofthebigshoulders|City of the Big Shoulders]]
* [[Gamehelpclansofcaledonia|Clans of Caledonia]]
* [[Gamehelpclashofdecks|Clash of Decks]]
* [[Gamehelpcloudcity|Cloud City]]
* [[Gamehelpcoalbaron|Coal Baron]]
* [[Gamehelpcodexnaturalis|Codex Naturalis]]
* [[Gamehelpcoinche|Coinche]]
* [[Gamehelpcoins|Coins]]
* [[Gamehelpcolorado|Colorado]]
* [[Gamehelpcoloretto|Coloretto]]
* [[Gamehelpcolorflush|Color Flush]]
* [[Gamehelpcolorpop|Color Pop]]
* [[Gamehelpcoltexpress|Colt Express]]
* [[Gamehelpcommanderchess|Commander Chess]]
* [[Gamehelpconsonar|Con Sonar!]]
* [[Gamehelpconcept|Concept]]
* [[Gamehelpconnectfour|Connect Four]]
* [[Gamehelpconnectsix|Connect6]]
* [[Gamehelpconspiracy|Conspiracy]]
* [[Gamehelpcopenhagen|Copenhagen]]
* [[Gamehelpcosmoctopus|Cosmoctopus]]
* [[Gamehelpcosmosempires|Cosmos: Empires]]
* [[Gamehelpcoupcitystate|Coup]]
* [[Gamehelpcrazyfarmers|Crazy Farmers]]
* [[Gamehelpcribbage|Cribbage]]
* [[Gamehelpcrimezoom|Crime Zoom: A Dirty Objective]]
* [[Gamehelpcrisps|Crisps]]
* [[Gamehelpcrusadersthywillbedone|Crusaders: Thy Will Be Done]]
* [[Gamehelpcrypt|Crypt]]
* [[Gamehelpcubirds|CuBirds]]
* [[Gamehelpcubosaurs|Cubosaurs]]
* [[Gamehelpcucco|Cucco]]
* [[Gamehelpcucumber|Cucumber]]
* [[Gamehelpdivideetimpera|D.E.I.: Divide et Impera]]
* [[Gamehelpdarkagent|Dark Agent]]
* [[Gamehelpdarwinsjourney|Darwin's Journey]]
* [[Gamehelpdaybreak|Daybreak]]
* [[Gamehelpdeadcells|Dead Cells]]
* [[Gamehelpdecrypto|Decrypto]]
* [[Gamehelpdetectivepoker|Detective Poker]]
* [[Gamehelpdeus|Deus]]
* [[Gamehelpdiablo|Diablo]]
* [[Gamehelpdiams|Diam's]]
* [[Gamehelpdiceforge|Dice Forge]]
* [[Gamehelpdicehospital|Dice Hospital]]
* [[Gamehelpdicehospitaler|Dice Hospital: ER – Emergency Roll]]
* [[Gamehelpdicesummoners|Dice Summoners]]
* [[Gamehelpdicethemepark|Dice Theme Park]]
* [[Gamehelpdiceathlon|Diceathlon]]
* [[Gamehelpdicedtomatoes|Diced Tomatoes]]
* [[Gamehelpdickory|Dickory]]
* [[Gamehelpdicycards|Dicy Cards]]
* [[Gamehelpdigupadventure|DIG UP Adventure]]
* [[Gamehelpdingosdreams|Dingo's Dreams]]
* [[Gamehelpdinnerinparis|Dinner In Paris]]
* [[Gamehelpdinosaurteaparty|Dinosaur Tea Party]]
* [[Gamehelpdistilled|Distilled]]
* [[Gamehelpthroneandthegrail|District Noir]]
* [[Gamehelpdjambi|Djambi]]
* [[Gamehelpdobbleconnect|Dobble Connect]]
* [[Gamehelpdobro|Dobro]]
* [[Gamehelpdodo|Dodo]]
* [[Gamehelpdoglover|Dog Lover]]
* [[Gamehelpdogpark|Dog Park]]
* [[Gamehelpdominoes|Dominoes]]
* [[Gamehelpdontgointhere|Don't Go In There]]
* [[Gamehelpdonuts|Donuts]]
* [[Gamehelpfightthelandlord|Dou Dizhu]]
* [[Gamehelpdownforce|Downforce]]
* [[Gamehelpdraculahelsing|Dracula vs Van Helsing]]
* [[Gamehelpdraftandwriterecords|Draft & Write Records]]
* [[Gamehelpdraftcider|Draft Cider]]
* [[Gamehelpdraftosaurus|Draftosaurus]]
* [[Gamehelpdragonbridge|Dragon Bridge]]
* [[Gamehelpdragoncastle|Dragon Castle]]
* [[Gamehelpdragonkeeper|Dragon Keeper: The Dungeon]]
* [[Gamehelpdragonline|Dragon Line]]
* [[Gamehelpdragonheart|Dragonheart]]
* [[Gamehelpdragonwood|Dragonwood]]
* [[Gamehelpdungeonpetz|Dungeon Petz]]
* [[Gamehelpdungeonroll|Dungeon Roll]]
* [[Gamehelpdungeonrummy|Dungeon Rummy]]
* [[Gamehelpdungeontwister|Dungeon Twister]]
* [[Gamehelpdurak|Durak]]
* [[Gamehelpdvonn|DVONN]]
* [[Gamehelpearth|Earth]]
* [[Gamehelpecarte|Écarté]]
* [[Gamehelpeck|ECK]]
* [[Gamehelpegocentricworld|Egocentric World]]
* [[Gamehelpekko|Ekko]]
* [[Gamehelpekonos|EKONOS]]
* [[Gamehelpelawa|Elawa]]
* [[Gamehelpelfenland|Elfenland]]
* [[Gamehelpelgrande|El Grande]]
* [[Gamehelpeminentdomain|Eminent Domain]]
* [[Gamehelpemdomicrocosm|Eminent Domain: Microcosm]]
* [[Gamehelpempireplateau|Empire Plateau]]
* [[Gamehelpenemyanemone|Enemy Anemone]]
* [[Gamehelpenvelopesofcash|Envelopes of Cash]]
* [[Gamehelpepizodiak|EpiZodiak]]
* [[Gamehelperiantys|Eriantys]]
* [[Gamehelpakeruption|Eruption]]
* [[Gamehelpeternitium|Eternitium]]
* [[Gamehelpeuchre|Euchre]]
* [[Gamehelpevergreen|Evergreen]]
* [[Gamehelpevl|EVL]]
* [[Gamehelpevogamenoname|Evo: The “Game no Name”]]
* [[Gamehelpevolution|Evolution]]
* [[Gamehelpexitstrategy|Exit Strategy]]
* [[Gamehelpnorthwestpassage|Expedition: Northwest Passage]]
* [[Gamehelpexpeditions|Expeditions: Around the World]]
* [[Gamehelpexplodingkittens|Exploding Kittens]]
* [[Gamehelpexplorationwarzone|Exploration: Warzone]]
* [[Gamehelpfactum|Factum]]
* [[Gamehelpfaifo|Fai-fo]]
* [[Gamehelpfairytrails|Fairy Trails]]
* [[Gamehelpfaraway|Faraway]]
* [[Gamehelpfarkle|Farkle]]
* [[Gamehelpfarmclub|Farm Club]]
* [[Gamehelpfederation|Federation]]
* [[Gamehelpfestivibes|Festi’vibes]]
* [[Gamehelpfestival|Festival]]
* [[Gamehelpfibonachos|Fibonachos]]
* [[Gamehelpfika|Fika]]
* [[Gamehelpfinca|Finca]]
* [[Gamehelpfinity|Finity]]
* [[Gamehelpfivetribes|Five Tribes]]
* [[Gamehelpflamingpyramids|Flaming Pyramids]]
* [[Gamehelpfleet|Fleet]]
* [[Gamehelpflipfreighters|Flip Freighters]]
* [[Gamehelpflorenzacardgame|Florenza: The Card Game]]
* [[Gamehelpflowers|Flowers]]
* [[Gamehelpflowersmandalagame|Flowers: A Mandala Game]]
* [[Gamehelpflume|Flume]]
* [[Gamehelpfluxx|Fluxx]]
* [[Gamehelpforsale|For Sale]]
* [[Gamehelpforex|For-Ex]]
* [[Gamehelpforbiddenisland|Forbidden Island]]
* [[Gamehelpforestshuffle|Forest Shuffle]]
* [[Gamehelpforeverhome|Forever Home]]
* [[Gamehelpfourcolorcards|Four Color Cards]]
* [[Gamehelpfractal|Fractal]]
* [[Gamehelpframework|Framework]]
* [[Gamehelpfrenchtarot|French Tarot]]
* [[Gamehelpfromage|Fromage]]
* [[Gamehelpfruitpicking|Fruit Picking]]
* [[Gamehelpgaia|Gaïa]]
* [[Gamehelpgaiaproject|Gaia Project]]
* [[Gamehelpgammelogic|Gamme Logic]]
* [[Gamehelpgangofdice|Gang of Dice]]
* [[Gamehelpgangsta|Gangsta!]]
* [[Gamehelpgardennation|Garden Nation]]
* [[Gamehelpgearnpiston|Gear & Piston]]
* [[Gamehelpgermanwhist|German Whist]]
* [[Gamehelpgetonboard|Get on Board: New York & London]]
* [[Gamehelpgetonboardparisrome|Get on Board: Paris & Roma]]
* [[Gamehelpgetthemacguffin|Get the MacGuffin]]
* [[Gamehelpghostathome|Ghost At Home]]
* [[Gamehelpgiftoftulips|Gift of Tulips]]
* [[Gamehelpginrummy|Gin Rummy]]
* [[Gamehelpginkgopolis|Ginkgopolis]]
* [[Gamehelpgirafferaffe|Giraffe Raffe]]
* [[Gamehelpgizmos|Gizmos]]
* [[Gamehelpglassroad|Glass Road]]
* [[Gamehelpglow|Glow]]
* [[Gamehelpgnomehollow|Gnome Hollow]]
* [[Gamehelpclassicgo|Go]]
* [[Gamehelpgofish|Go Fish]]
* [[Gamehelpgogoa|Go Goa]]
* [[Gamehelpgonutsfordonuts|Go Nuts for Donuts]]
* [[Gamehelpgostop|Go-Stop]]
* [[Gamehelpgoblinhood|Goblin Hood]]
* [[Gamehelpgoldwest|Gold West]]
* [[Gamehelpgoldncrash|Gold’n’Crash]]
* [[Gamehelpgoldblivion|GOLDblivion]]
* [[Gamehelpgolf|Golf]]
* [[Gamehelpgomoku|Gomoku]]
* [[Gamehelpgoodcopbadcop|Good Cop Bad Cop]]
* [[Gamehelpgopher|Gopher]]
* [[Gamehelpgorami|GORami]]
* [[Gamehelpgosux|Gosu X]]
* [[Gamehelpgrandbazaar|Grand Bazaar]]
* [[Gamehelpgreasyspoon|Greasy Spoon]]
* [[Gamehelpgreatwesterntrail|Great Western Trail]]
* [[Gamehelpelpasogwt|Great Western Trail: El Paso]]
* [[Gamehelpgrosstarock|Grosstarock]]
* [[Gamehelpgrumblestone|GrumbleStone]]
* [[Gamehelpgrund|Grund]]
* [[Gamehelpguildes|Guildes]]
* [[Gamehelpguile|Guile]]
* [[Gamehelpgyges|Gygès]]
* [[Gamehelphacktrick|Hack Trick]] (*)
* [[Gamehelphadara|Hadara]]
* [[Gamehelphadrianswall|Hadrian's Wall]]
* [[Gamehelphadron|Hadron]]
* [[Gamehelphaggis|Haggis]]
* [[Gamehelphaiclue|Haiclue]]
* [[Gamehelphanabi|Hanabi]]
* [[Gamehelphanamikoji|Hanamikoji]]
* [[Gamehelphandandfoot|Hand and Foot]]
* [[Gamehelphappycity|Happy City]]
* [[Gamehelphardback|Hardback]]
* [[Gamehelpharmonies|Harmonies]]
* [[Gamehelpharvest|Harvest]]
* [[Gamehelphawaii|Hawaii]]
* [[Gamehelpsakura|Hawaiian Hanafuda]]
* [[Gamehelphearts|Hearts]]
* [[Gamehelpheat|Heat: Pedal to the Metal]]
* [[Gamehelpheckinhounds|Heckin Hounds]]
* [[Gamehelphens|Hens]]
* [[Gamehelpherd|Herd]]
* [[Gamehelpherooj|Herooj]]
* [[Gamehelpherrlof|Herrlof]]
* [[Gamehelphex|Hex]]
* [[Gamehelphiddenleaders|Hidden Leaders]]
* [[Gamehelphighseason|High Season]]
* [[Gamehelphive|Hive]]
* [[Gamehelphoarders|Hoarders]]
* [[Gamehelphokito|Hokito]]
* [[Gamehelphomesteaders|Homesteaders]]
* [[Gamehelphomeworlds|Homeworlds]]
* [[Gamehelphoola|Hoola]]
* [[Gamehelpescapefromthehiddencastle|Hugo]]
* [[Gamehelphumanity|Humanity]]
* [[Gamehelphungariantarokk|Hungarian Tarokk]]
* [[Gamehelphydroracers|Hydroracers]]
* [[Gamehelphypnosia|Hypnosia]]
* [[Gamehelpiceandthesky|Ice and the Sky]]
* [[Gamehelpicecoldicehockey|Ice Cold Ice Hockey]]
* [[Gamehelpicebreaker|Icebreaker]]
* [[Gamehelpillustori|Illustori]]
* [[Gamehelpimhotep|Imhotep]]
* [[Gamehelpimpasse|Impasse]]
* [[Gamehelpintheyearofthedragon|In The Year of the Dragon]]
* [[Gamehelpincangold|Incan Gold]]
* [[Gamehelpindianchief|Indian Chief]]
* [[Gamehelpinnovation|Innovation]]
* [[Gamehelpinori|Inori]]
* [[Gamehelpisaac|Isaac]]
* [[Gamehelpisleoftrainsallaboard|Isle of Trains: All Aboard]]
* [[Gamehelpwonderfulkingdom|It's a Wonderful Kingdom]]
* [[Gamehelpitsawonderfulworld|It's a Wonderful World]]
* [[Gamehelpiwari|Iwari]]
* [[Gamehelpjaipur|Jaipur]]
* [[Gamehelpjekyllvshide|Jekyll vs. Hyde]]
* [[Gamehelpjumpdrive|Jump Drive]]
* [[Gamehelpjumpgate|Jump Gate]]
* [[Gamehelpjustdesserts|Just Desserts]]
* [[Gamehelpjustone|Just One]]
* [[Gamehelpk2|K2]]
* [[Gamehelpkabaleo|Kabaleo]]
* [[Gamehelpkado|Kado]]
* [[Gamehelpkahuna|Kahuna]]
* [[Gamehelpkalah|Kalah]]
* [[Gamehelpkami|Kami]]
* [[Gamehelpkarvi|Karvi]]
* [[Gamehelpkeyflower|Keyflower]]
* [[Gamehelpkhiva|Khiva]]
* [[Gamehelpkhronos|Khronos]]
* [[Gamehelpkingofthepitch|King of the Pitch]]
* [[Gamehelpkingoftokyo|King of Tokyo]]
* [[Gamehelpkingoftokyoduel|King of Tokyo Duel]]
* [[Gamehelpkingdombuilder|Kingdom Builder]]
* [[Gamehelpkingdomino|Kingdomino]]
* [[Gamehelpkingdoms|Kingdoms]]
* [[Gamehelpkingsinthecorner|Kings in the Corner]]
* [[Gamehelpklaverjassen|Klaverjassen]]
* [[Gamehelpkmakici|Kmakici Family's greatest teatime]]
* [[Gamehelpknarr|Knarr]]
* [[Gamehelpknister|Knister]]
* [[Gamehelpknockoutwhist|Knockout Whist]]
* [[Gamehelpkoikoi|Koi-Koi]]
* [[Gamehelpkonane|Konane]]
* [[Gamehelpkoryo|Koryŏ]]
* [[Gamehelpkqj|KQJ]]
* [[Gamehelpkrakenup|Kraken Up]]
* [[Gamehelpkrosmasterarena|Krosmaster Arena]]
* [[Gamehelpkrosmasterblast|Krosmaster Blast]]
* [[Gamehelpkulami|Kulami]]
* [[Gamehelplagranja|La Granja]]
* [[Gamehelplamarcheducrabe|La Marche du Crabe]]
* [[Gamehelplasvegan|Las Vegan]]
* [[Gamehelpledernierpeuple|Le Dernier Peuple]]
* [[Gamehelpleroydesribauds|Le Roy des Ribauds]]
* [[Gamehelplegendraiders|Legend Raiders]]
* [[Gamehelpinventors|Legendary Inventors]]
* [[Gamehelpheroesofhellas|Legends of Hellas]]
* [[Gamehelplepidoptery|Lepidoptery]]
* [[Gamehelpletscatchthelion|Let's Catch the Lion!]]
* [[Gamehelpletsgotojapan|Let's Go! To Japan]]
* [[Gamehelplettertycoon|Letter Tycoon]]
* [[Gamehelplewisclark|Lewis & Clark]]
* [[Gamehelplibertalia|Libertalia]]
* [[Gamehelplielow|Lielow]]
* [[Gamehelplifeline|Lifeline]]
* [[Gamehelplineit|Line It]]
* [[Gamehelplinesofaction|Lines of Action]]
* [[Gamehelplinkage|Linkage]]
* [[Gamehelplinx|Linx]]
* [[Gamehelplittlefactory|Little Factory]]
* [[Gamehelpliverpoolrummy|Liverpool (Cozy Oaks) Rummy]]
* [[Gamehelplivingforest|Living Forest]]
* [[Gamehelplivingforestduel|Living Forest Duel]]
* [[Gamehelplama|LLAMA]]
* [[Gamehelplocomomo|Loco Momo]]
* [[Gamehelplogger|Logger]]
* [[Gamehelplookatthestars|Look at the Stars]]
* [[Gamehelplooot|Looot]]
* [[Gamehelplox|Lords of Xidit]]
* [[Gamehelplostcities|Lost Cities]]
* [[Gamehelplostexplorers|Lost Explorers]]
* [[Gamehelparnak|Lost Ruins of Arnak]]
* [[Gamehelplostseas|Lost Seas]]
* [[Gamehelploveletter|Love Letter]]
* [[Gamehelpluckynumbers|Lucky Numbers]]
* [[Gamehelpludo|Ludo]]
* [[Gamehelplumen|Lumen: The Lost World]]
* [[Gamehelplure|Lure]]
* [[Gamehelpluxor|Luxor]]
* [[Gamehelpmaatatahay|Maatatahay]]
* [[Gamehelpmachiavelli|Machiavelli]]
* [[Gamehelpmadeira|Madeira]]
* [[Gamehelpmammalath|Mammalath]]
* [[Gamehelpmandala|Mandala]]
* [[Gamehelpmapmaker|Mapmaker: The Gerrymandering Game]]
* [[Gamehelpmapsofmisterra|Maps of Misterra]]
* [[Gamehelpmaracaibo|Maracaibo]]
* [[Gamehelpmarcopolotwo|Marco Polo II: In the Service of the Khan]]
* [[Gamehelpmarrakech|Marrakech]]
* [[Gamehelpmarram|Marram]]
* [[Gamehelpmartiandice|Martian Dice]]
* [[Gamehelpmascarade|Mascarade]]
* [[Gamehelpmate|Mate]]
* [[Gamehelpmattock|Mattock]]
* [[Gamehelpmechadream|Mech A Dream]]
* [[Gamehelpmedina|Medina]]
* [[Gamehelpmeadow|Medo]]
* [[Gamehelpmegajackpot|Mega Jackpot]]
* [[Gamehelpmegalomania|Megalomania]]
* [[Gamehelpmemoir|Memoir '44]]
* [[Gamehelpmercadodelisboaste|Mercado de Lisboa]]
* [[Gamehelpmeridians|Meridians]]
* [[Gamehelpmetro|Metro]]
* [[Gamehelpmetromania|Metromania]]
* [[Gamehelpmia|Mia]]
* [[Gamehelpmicrodojo|Micro Dojo]]
* [[Gamehelpmiddleages|Middle Ages]]
* [[Gamehelpmighty|Mighty]]
* [[Gamehelpmijnlieff|Mijnlieff]]
* [[Gamehelpmindup|Mind Up!]]
* [[Gamehelpminhwatu|Minhwatu]]
* [[Gamehelpminirogue|Mini Rogue]]
* [[Gamehelpmlem|MLEM: Space Agency]]
* [[Gamehelpmodten|Mod Ten]]
* [[Gamehelpmojo|Mojo]]
* [[Gamehelpmonsterfactory|Monster Factory]]
* [[Gamehelpmoonriver|Moon River]]
* [[Gamehelpmountaingoats|Mountain Goats]]
* [[Gamehelpmow|MOW]]
* [[Gamehelpmrjack|Mr. Jack]]
* [[Gamehelpmurusgallicus|Murus Gallicus]]
* [[Gamehelpmutantcrops|Mutant Crops]]
* [[Gamehelpmycity|My City]]
* [[Gamehelpmycityrb|My City: Roll & Build]]
* [[Gamehelpmyfirstcastlepanic|My First Castle Panic]]
* [[Gamehelpmyshelfie|My Shelfie]]
* [[Gamehelpmythicbattlesragnarok|Mythic Battles: Ragnarök]]
* [[Gamehelpmythicalstheboardgame|Mythicals the boardgame]]
* [[Gamehelpnachopile|Nacho Pile]]
* [[Gamehelpnainjaune|Nain Jaune]]
* [[Gamehelpnaishi|Naishi]]
* [[Gamehelpnanatoridori|Nanatoridori]]
* [[Gamehelpnangaparbat|Nanga Parbat]]
* [[Gamehelpnap|Nap]]
* [[Gamehelpnarabi|Narabi]]
* [[Gamehelpnautilus|Nautilus]]
* [[Gamehelpneom|Neom]]
* [[Gamehelpneutreeko|Neutreeko]]
* [[Gamehelpnewfrontiers|New Frontiers]]
* [[Gamehelpnewyorkzoo|New York Zoo]]
* [[Gamehelpnewton|Newton]]
* [[Gamehelpnextstation|Next Station: London]]
* [[Gamehelpnextstationparis|Next Station: Paris]]
* [[Gamehelpnextstationtokyo|Next Station: Tokyo]]
* [[Gamehelpniagara|Niagara]]
* [[Gamehelpnicodemus|Nicodemus]]
* [[Gamehelpnidavellir|Nidavellir]]
* [[Gamehelpaknile|Nile]]
* [[Gamehelpnimalia|Nimalia]]
* [[Gamehelpninemensmorris|Nine Men's Morris]]
* [[Gamehelpnippon|Nippon]]
* [[Gamehelpnothanks|No Thanks!]]
* [[Gamehelpnoah|Noah]]
* [[Gamehelpnoirkvi|Noir: Killer versus Inspector]]
* [[Gamehelpnoneshallpass|None Shall Pass!]]
* [[Gamehelpnotalone|Not Alone]]
* [[Gamehelpnovaluna|Nova Luna]]
* [[Gamehelpnowboarding|Now Boarding]]
* [[Gamehelpnumberdrop|Number Drop]]
* [[Gamehelpnxs|NXS]]
* [[Gamehelpnylonppong|Nylon-ppong]]
* [[Gamehelpoasis|OASIS New Hope]]
* [[Gamehelpobsession|Obsession]]
* [[Gamehelpodicey|Odicey]]
* [[Gamehelpodin|Odin]]
* [[Gamehelpofftherails|Off the Rails]]
* [[Gamehelpohhell|Oh Hell!]]
* [[Gamehelpohseven|Oh-Seven]]
* [[Gamehelpokanagan|Okanagan: Valley of the Lakes]]
* [[Gamehelpontour|On Tour]]
* [[Gamehelponceuponaforest|Once Upon A Forest]]
* [[Gamehelponda|Onda]]
* [[Gamehelpone|ONE]]
* [[Gamehelponitama|Onitama]]
* [[Gamehelpopenfacechinesepoker|Open Face Chinese Poker]]
* [[Gamehelpopenseason|Open Season]]
* [[Gamehelporiflamme|Oriflamme]]
* [[Gamehelporigin|Origin]]
* [[Gamehelporionduel|Orion Duel]]
* [[Gamehelporleans|Orléans]]
* [[Gamehelpoust|Oust]]
* [[Gamehelpoutlaws|Outlaws: Last Man Standing]]
* [[Gamehelpoxono|Oxono]]
* [[Gamehelppi|P.I.]]
* [[Gamehelppainttheroses|Paint the Roses]]
* [[Gamehelppalace|Palace]]
* [[Gamehelppandemic|Pandemic]]
* [[Gamehelppaniclab|Panic Lab]]
* [[Gamehelppapayoo|Papayoo]]
* [[Gamehelpparisconnection|Paris Connection]]
* [[Gamehelpparklife|Park Life]]
* [[Gamehelppatchwork|Patchwork]]
* [[Gamehelppathofcivilization|Path of Civilization]]
* [[Gamehelppaxpamir|Pax Pamir: Second Edition]]
* [[Gamehelppaxrenaissance|Pax Renaissance]]
* [[Gamehelppedro|Pedro]]
* [[Gamehelppenaltychallenge|Penalty Challenge]]
* [[Gamehelppennypress|Penny Press]]
* [[Gamehelppente|Pente]]
* [[Gamehelpperfectwords|Perfect Words]]
* [[Gamehelpdudo|Perudo]]
* [[Gamehelppescadonovo|Pescado Novo]]
* [[Gamehelpphat|Phat]]
* [[Gamehelpphotosynthesis|Photosynthesis]]
* [[Gamehelppiepmatz|Piepmatz]]
* [[Gamehelppiereighteen|Pier 18]]
* [[Gamehelppingimus|Pingimus]]
* [[Gamehelppinochle|Pinochle]]
* [[Gamehelppiratenkapern|Piraten kapern]]
* [[Gamehelppixies|Pixies]]
* [[Gamehelpplanetunknown|Planet Unknown]]
* [[Gamehelppocketcats|Pocket Cats]]
* [[Gamehelppokerdice|Poker Dice]]
* [[Gamehelppolis|Polis: Fight for Hegemony]]
* [[Gamehelppond|Pond]]
* [[Gamehelppontedeldiavolo|Ponte del Diavolo]]
* [[Gamehelppook|Pook]]
* [[Gamehelppotionexplosion|Potion Explosion]]
* [[Gamehelppotionsofazerland|Potions of Azerland]]
* [[Gamehelppraga|Praga Caput Regni]]
* [[Gamehelppresident|President]]
* [[Gamehelppuertorico|Puerto Rico]]
* [[Gamehelppugsinmugs|Pugs in Mugs]]
* [[Gamehelppylos|Pylos]]
* [[Gamehelppyramidpoker|Pyramid Poker]]
* [[Gamehelppyramidoft|Pyramido: Forgotten Treasures]]
* [[Gamehelppyrga|Pyrga]]
* [[Gamehelpquato|Qu4to]]
* [[Gamehelpqawale|Qawale]]
* [[Gamehelpquantik|Quantik]]
* [[Gamehelpquantum|Quantum]]
* [[Gamehelpquarto|Quarto]]
* [[Gamehelpqueenskings|Queens & Kings... A Checkers Game]]
* [[Gamehelpquetzal|Quetzal]]
* [[Gamehelpquibbles|Quibbles]]
* [[Gamehelpquinque|Quinque]]
* [[Gamehelpquirkyquarks|Quirky Quarks]]
* [[Gamehelpquoridor|Quoridor]]
* [[Gamehelpraceforthegalaxy|Race for the Galaxy]]
* [[Gamehelprage|Rage]]
* [[Gamehelprailroadink|Railroad Ink]]
* [[Gamehelprailwaysoftheworld|Railways of the World]]
* [[Gamehelprainbow|Rainbow]]
* [[Gamehelprainforest|Rainforest]]
* [[Gamehelprallymandirt|Rallyman: DIRT]]
* [[Gamehelprallymangt|Rallyman: GT]]
* [[Gamehelpratjack|Ratjack]]
* [[Gamehelprauha|Rauha]]
* [[Gamehelpredseven|Red7]]
* [[Gamehelpredstone|Redstone]]
* [[Gamehelplaserreflection|Reflection]]
* [[Gamehelprefuge|Refuge]]
* [[Gamehelpregicide|Regicide]]
* [[Gamehelpregidice|Regidice]]
* [[Gamehelprememberwhen|Remember When]]
* [[Gamehelpresarcana|Res Arcana]]
* [[Gamehelprestinpeace|Rest In Peace]]
* [[Gamehelpreversi|Reversi]]
* [[Gamehelpriftvalleyreserve|Rift Valley Reserve]]
* [[Gamehelpriftforce|Riftforce]]
* [[Gamehelprive|Rive]]
* [[Gamehelpriverofgold|River of Gold]]
* [[Gamehelprivervalleyglassworks|River Valley Glassworks]]
* [[Gamehelproadtothreehoundred|Road to 300]]
* [[Gamehelprobotsateourpizza|Robots Ate Our Pizza]]
* [[Gamehelprollforthegalaxy|Roll for the Galaxy]]
* [[Gamehelprollintotown|Roll Into Town]]
* [[Gamehelprolltothetopjourneys|Roll to the Top: Journeys]]
* [[Gamehelprollandbump|Roll'n Bump]]
* [[Gamehelprolledwest|Rolled West]]
* [[Gamehelprollingpins|Rolling Pins]]
* [[Gamehelpromirami|Romi Rami]]
* [[Gamehelproppyakken|Roppyakken]]
* [[Gamehelprummy|Rummy]]
* [[Gamehelprussianrailroads|Russian Railroads]]
* [[Gamehelpsaboteur|Saboteur]]
* [[Gamehelpsagani|Sagani]]
* [[Gamehelpsahwari|Sahwari]]
* [[Gamehelpsaintpetersburg|Saint Petersburg]]
* [[Gamehelpsaintpoker|Saint Poker]]
* [[Gamehelpsantorini|Santorini]]
* [[Gamehelpsapiens|Sapiens]]
* [[Gamehelpsasaki|Sasaki]]
* [[Gamehelpschnapsen|Schnapsen]]
* [[Gamehelpschroedingerscats|Schrödinger's Cats]]
* [[Gamehelpscopa|Scopa]]
* [[Gamehelpseasaltpaper|Sea Salt & Paper]]
* [[Gamehelpseasons|Seasons]]
* [[Gamehelpsecretmoon|Secret Moon]]
* [[Gamehelpseikatsu|Seikatsu]]
* [[Gamehelpsenet|Senet]]
* [[Gamehelpsensei|Sensei]]
* [[Gamehelpsenshi|Senshi]]
* [[Gamehelpseotda|Seotda]]
* [[Gamehelpsergeantmajor|Sergeant Major]]
* [[Gamehelpsetup|SETUP]]
* [[Gamehelpsevens|Sevens]]
* [[Gamehelpsherlockthirteen|Sherlock 13]]
* [[Gamehelpshiftingstones|Shifting Stones]]
* [[Gamehelpshogun|Shogun]]
* [[Gamehelpshutthebox|Shut the Box]]
* [[Gamehelpsignorie|Signorie]]
* [[Gamehelpsilo|Silo]]
* [[Gamehelpsimilo|Similo]]
* [[Gamehelpsimplicity|Simplicity]]
* [[Gamehelpskat|Skat]]
* [[Gamehelpskatelegend|Skate Legend]]
* [[Gamehelpskull|Skull]]
* [[Gamehelpskyteam|Sky Team]]
* [[Gamehelpslide|Slide]]
* [[Gamehelpsmallislands|Small Islands]]
* [[Gamehelpsmallworld|Small World]]
* [[Gamehelpsobek|Sobek]]
* [[Gamehelpsobektwoplayers|Sobek: 2 Players]]
* [[Gamehelpsolarstorm|Solar Storm]]
* [[Gamehelpsolo|Solo]]
* [[Gamehelpsolowhist|Solo Whist]]
* [[Gamehelpsolstis|Solstis]]
* [[Gamehelpsoluna|Soluna]]
* [[Gamehelpsoulaween|Soulaween]]
* [[Gamehelpspacebase|Space Base]]
* [[Gamehelpspaceempires|Space Empires: 4X]]
* [[Gamehelpspacestationphoenix|Space Station Phoenix]]
* [[Gamehelpspades|Spades]]
* [[Gamehelpsparts|Sparts]]
* [[Gamehelpspellbook|SpellBook]]
* [[Gamehelpspiritsoftheforest|Spirits of the Forest]]
* [[Gamehelpspiteandmalice|Spite and Malice]]
* [[Gamehelpsplashdown|Splash Down]]
* [[Gamehelpsplendor|Splendor]]
* [[Gamehelpsplendorduel|Splendor Duel]]
* [[Gamehelpsplito|Splito]]
* [[Gamehelpsplitter|Splitter]]
* [[Gamehelpspotit|Spot it]]
* [[Gamehelpspots|Spots]]
* [[Gamehelpspyrium|Spyrium]]
* [[Gamehelpsquadro|Squadro]]
* [[Gamehelpstalkexchange|Stalk Exchange]]
* [[Gamehelpstarfluxx|Star Fluxx]]
* [[Gamehelpsteamworks|Steam Works]]
* [[Gamehelpsteamrollers|SteamRollers]]
* [[Gamehelpstella|Stella – Dixit Universe]]
* [[Gamehelpstirfryeighteen|Stir Fry Eighteen]]
* [[Gamehelpstockpile|Stockpile]]
* [[Gamehelpstoneage|Stone Age]]
* [[Gamehelpstonks|Stonks]]
* [[Gamehelpstrands|Strands]]
* [[Gamehelpstreets|Streets]]
* [[Gamehelpstupormundi|Stupor Mundi]]
* [[Gamehelpsuperfantasybrawl|Super Fantasy Brawl]]
* [[Gamehelpsupermegaluckybox|Super Mega Lucky Box]]
* [[Gamehelpsuperstore|Superstore 3000]]
* [[Gamehelpsurvive|Survive The Island]]
* [[Gamehelpsushigoparty|Sushi Go Party!]]
* [[Gamehelpsushigo|Sushi Go!]]
* [[Gamehelptablut|Tablut]]
* [[Gamehelptakaraisland|Takara Island]]
* [[Gamehelptakenoko|Takenoko]]
* [[Gamehelptakenokolor|Takenokolor]]
* [[Gamehelptalon|Talon]]
* [[Gamehelptaluva|Taluva]]
* [[Gamehelptanghulu|Tang Hu Lu]]
* [[Gamehelptapestry|Tapestry]]
* [[Gamehelptargi|Targi]]
* [[Gamehelptashkalar|Tash-Kalar]]
* [[Gamehelpteatime|Tea Time]]
* [[Gamehelpteotihuacan|Teotihuacan: City of Gods]]
* [[Gamehelpterramystica|Terra Mystica]]
* [[Gamehelpterranova|Terra Nova]]
* [[Gamehelpterraformingmars|Terraforming Mars]]
* [[Gamehelpthattimeyoukilledme|That Time You Killed Me]]
* [[Gamehelpthatslife|That's Life!]]
* [[Gamehelpbattleforhill|The Battle for Hill 218]]
* [[Gamehelptheboss|The Boss]]
* [[Gamehelpthebrambles|The Brambles]]
* [[Gamehelpthebuildersantiquity|The Builders: Antiquity]]
* [[Gamehelpthebuilders|The Builders: Middle Ages]]
* [[Gamehelpcastlesofburgundy|The Castles of Burgundy]]
* [[Gamehelpthecrew|The Crew]]
* [[Gamehelpthecrewdeepsea|The Crew: Mission Deep Sea]]
* [[Gamehelpthefoxintheforest|The Fox in the Forest]]
* [[Gamehelpthefoxintheforestduet|The Fox in the Forest: Duet]]
* [[Gamehelpthegnomesofzavandor|The Gnomes of Zavandor]]
* [[Gamehelpgreatsplit|The Great Split]]
* [[Gamehelptheguildofmerchantexplorers|The Guild of Merchant Explorers]]
* [[Gamehelptheisleofcats|The Isle of Cats]]
* [[Gamehelpthejellymonsterlab|The Jelly Monster Lab]]
* [[Gamehelpkingsguild|The King's Guild]]
* [[Gamehelpladyandthetiger|The Lady and the Tiger (Doors)]]
* [[Gamehelpthenumber|The Number]]
* [[Gamehelpcarrara|The Palaces of Carrara]]
* [[Gamehelpruhr|The Ruhr: A Story of Coal Trade]]
* [[Gamehelptheshipwreckarcana|The Shipwreck Arcana]]
* [[Gamehelpvaleofeternity|The Vale of Eternity]]
* [[Gamehelpmarcopolo|The Voyages of Marco Polo]]
* [[Gamehelpwerewolves|The Werewolves of Miller's Hollow]]
* [[Gamehelpthewolves|The Wolves]]
* [[Gamehelptheyellowhouse|The Yellow House]]
* [[Gamehelpthermopyles|Thermopyles]]
* [[Gamehelpthrive|Thrive]]
* [[Gamehelpthroughtheages|Through the Ages]]
* [[Gamehelpthroughtheagesnewstory|Through the Ages: A new Story of Civilization]]
* [[Gamehelpthurnandtaxis|Thurn and Taxis]]
* [[Gamehelptictacmatch|Tic-Tac Match]]
* [[Gamehelptichu|Tichu]]
* [[Gamehelpticketgagnant|Ticket Gagnant]]
* [[Gamehelptickettoride|Ticket to Ride]]
* [[Gamehelptickettorideeurope|Ticket to Ride: Europe]]
* [[Gamehelptienlen|Tiến Lên]]
* [[Gamehelptigriseuphrates|Tigris & Euphrates]]
* [[Gamehelptikal|Tikal]]
* [[Gamehelptimemasters|Time Masters]]
* [[Gamehelptimelinetwist|Timeline Twist]]
* [[Gamehelptinnerstrail|Tinners' Trail]]
* [[Gamehelptinyepicdefenders|Tiny Epic Defenders (Second Edition)]]
* [[Gamehelptinyfarms|Tiny Farms]]
* [[Gamehelptinyturbocars|Tiny Turbo Cars]]
* [[Gamehelptiwanaku|Tiwanaku]]
* [[Gamehelptobago|Tobago]]
* [[Gamehelptoc|Tock]]
* [[Gamehelptoepen|Toepen]]
* [[Gamehelptoeshambo|ToeShamBo]]
* [[Gamehelptokaido|Tokaido]]
* [[Gamehelptortugasixteensixtyseven|Tortuga 1667]]
* [[Gamehelptournay|Tournay]]
* [[Gamehelptrailblazers|Trailblazers]]
* [[Gamehelptranquility|Tranquility]]
* [[Gamehelptranquilitytheascent|Tranquility: The Ascent]]
* [[Gamehelptrektwelve|Trek 12]]
* [[Gamehelptrekkingtheworld|Trekking the World]]
* [[Gamehelptrellis|Trellis]]
* [[Gamehelptreos|Treos]]
* [[Gamehelptrickoftherails|Trick of the Rails]]
* [[Gamehelptrike|Trike]]
* [[Gamehelptrio|Trio]]
* [[Gamehelptroyes|Troyes]]
* [[Gamehelptroyesdice|Troyes Dice]]
* [[Gamehelptrusis|Trusis]]
* [[Gamehelptucano|Tucano]]
* [[Gamehelptumbleweed|Tumbleweed]]
* [[Gamehelpturingmachine|Turing Machine]]
* [[Gamehelpturnthetide|Turn the tide]]
* [[Gamehelpturncoats|Turncoats]]
* [[Gamehelptwinpalms|Twin Palms]]
* [[Gamehelptwintinbots|Twin Tin Bots]]
* [[Gamehelptwotenjack|Two-Ten-Jack]]
* [[Gamehelptzolkin|Tzolk'in]]
* [[Gamehelpultimaterailroads|Ultimate Railroads]]
* [[Gamehelpumbrella|Umbrella]]
* [[Gamehelpunclechestnuttablegype|Uncle Chestnut's Table Gype]]
* [[Gamehelpunconditionalsurrender|Unconditional Surrender! World War 2 in Europe]]
* [[Gamehelpunitedsquare|United Square]]
* [[Gamehelpunrest|Unrest]]
* [[Gamehelpuptown|Uptown]]
* [[Gamehelpvaalbara|Vaalbara]]
* [[Gamehelpvaultdenofthieves|Vault: A Den of Thieves]]
* [[Gamehelpvault|Vault: A Solitaire Dice Game]]
* [[Gamehelpvegetables|VEGEtables]]
* [[Gamehelpveggiegarden|Veggie Garden]]
* [[Gamehelpvektorace|VektoRace]]
* [[Gamehelpveletas|Veletas]]
* [[Gamehelpveronatwist|Verona Twist]]
* [[Gamehelpviamagica|Via Magica]]
* [[Gamehelpvidrasso|Vidrasso]]
* [[Gamehelpvillagers|Villagers]]
* [[Gamehelpviticulture|Viticulture]]
* [[Gamehelpvolto|Volto]]
* [[Gamehelpvultureculture|Vulture Culture]]
* [[Gamehelpwarchest|War Chest]]
* [[Gamehelpwelcometo|Welcome To]]
* [[Gamehelpwelcometonewlasvegas|Welcome To New Las Vegas]]
* [[Gamehelpwhisttwentytwo|Whist 22]]
* [[Gamehelpwingspan|Wingspan]]
* [[Gamehelpwizard|Wizard]]
* [[Gamehelpwizardsgrimoire|Wizards of the Grimoire]]
* [[Gamehelpwordtraveler|Word Traveler]]
* [[Gamehelpworldwidetennis|Worldwide Tennis]]
* [[Gamehelpxiangqi|Xiangqi]]
* [[Gamehelpyatzy|Yahtzee]]
* [[Gamehelpyaniv|Yaniv]]
* [[Gamehelpyinyang|Yin Yang]]
* [[Gamehelpyokai|Yokai]]
* [[Gamehelpyokaiseptet|Yokai Septet]]
* [[Gamehelpyokohama|Yokohama]]
* [[Gamehelpyoxii|Yoxii]]
* [[Gamehelpzefiria|Zefiria]]
* [[Gamehelpzener|Zener]]
* [[Gamehelpzenith|Zenith]]
* [[Gamehelpzola|Zola]]
* [[Gamehelpzuuli|Zuuli]]
</div>
}}

<nowiki>*</nowiki> [[Gamehelphacktrick|Hack Trick]] is currently impossible to play on BGA as it was implemented using a module that is no longer supported.
{{infoBox|minWidth=100%|titleColor=#004|color=#eefd
|title=Beta version on BGA
|body=<div style="columns:12rem auto;">
* [[Gamehelpthousand|1000]]
* [[Gamehelpfivehundred|500]]
* [[Gamehelpfiftyfirststate|51st State]]
* [[Gamehelpalakablast|Alakablast]]
* [[Gamehelpallin|All In]]
* [[Gamehelpaniversus|Aniversus]]
* [[Gamehelpaquatica|Aquatica]]
* [[Gamehelparboretum|Arboretum]]
* [[Gamehelpaurum|Aurum]]
* [[Gamehelpaves|AVES]]
* [[Gamehelpbamboozle|Bamboozle]]
* [[Gamehelpbatalladecoronas|Batalla de Coronas]]
* [[Gamehelpbattlegammon|Battlegammon]]
* [[Gamehelpbauer|Bauer]]
* [[Gamehelpbayonetsandtomahawks|Bayonets & Tomahawks]]
* [[Gamehelpbeerbread|Beer & Bread]]
* [[Gamehelpbelladonebluff|Belladone Bluff]]
* [[Gamehelpblockarena|Block Arena]]
* [[Gamehelpblot|Blot]]
* [[Gamehelpcaboodle|Bloxo]]
* [[Gamehelpbotanik|Botanik]]
* [[Gamehelpbower|Bower]]
* [[Gamehelpbunnyboom|Bunny Boom]]
* [[Gamehelpbunnydrops|Bunny Drops]]
* [[Gamehelpcairocorridor|Cairo Corridor]]
* [[Gamehelpcakemaster|Cake Master]]
* [[Gamehelpcalypso|Calypso]]
* [[Gamehelpcannonades|Cannonades]]
* [[Gamehelpcassino|Cassino]]
* [[Gamehelpchemicaloverload|Chemical Overload]]
* [[Gamehelpchimerastation|Chimera Station]]
* [[Gamehelpchoconnect|Choconnect]]
* [[Gamehelpcircleoflifesavannah|Circle Of Life: on the Savannah]]
* [[Gamehelpcitadels|Citadels]]
* [[Gamehelpclaim|Claim]]
* [[Gamehelpcoffee|Coffee]]
* [[Gamehelpcoinage|Coin Age]]
* [[Gamehelpcookieaddict|Cookie Addict!]]
* [[Gamehelpcoupell|Coupell]]
* [[Gamehelpcradletograve|Cradle to Grave]]
* [[Gamehelpcraftingthecosmos|Crafting the Cosmos]]
* [[Gamehelpcrash|Crash]]
* [[Gamehelpcrazyeights|Crazy Eights]]
* [[Gamehelpcuttle|Cuttle]]
* [[Gamehelpdanceofmuses|Dance of Muses]]
* [[Gamehelpdedale|Dédale]]
* [[Gamehelpdeliverance|Deliverance]]
* [[Gamehelpdiamonds|Diamonds]]
* [[Gamehelpdicemission|Dice Mission]]
* [[Gamehelpdicepyramid|Dice Pyramid]]
* [[Gamehelpdicedveggies|Diced Veggies]]
* [[Gamehelpdinogenics|DinoGenics]]
* [[Gamehelpdivercite|Divercité]]
* [[Gamehelpdotsandboxes|Dots and Boxes]]
* [[Gamehelpdronesvsseagulls|Drones vs Seagulls]]
* [[Gamehelpeasypeasy|Easy Peasy]]
* [[Gamehelpexpressions|Expressions]]
* [[Gamehelpfivethreefive|Five Three Five]]
* [[Gamehelpflipseven|Flip 7]]
* [[Gamehelpfornorthwood|For Northwood!]]
* [[Gamehelpforage|Forage]]
* [[Gamehelpforks|Forks: 2nd Edition]]
* [[Gamehelpfourgardens|Four Gardens]]
* [[Gamehelpgeekoutmasters|Geek Out! Masters]]
* [[Gamehelpgemsofiridescia|Gems of Iridescia]]
* [[Gamehelpgolems|Golems]]
* [[Gamehelpgolfie|Golfie]]
* [[Gamehelpgrovesolitaire|Grove]]
* [[Gamehelpeightyeight|Hachihachi]]
* [[Gamehelphund|HUND]]
* [[Gamehelpimtheboss|I'm The Boss]]
* [[Gamehelpinsidejob|Inside Job]]
* [[Gamehelpinverteddice|Inverted Dice]]
* [[Gamehelpriichimahjong|Japanese (Riichi) Mahjong]]
* [[Gamehelpjurassicsnack|Jurassic Snack]]
* [[Gamehelpkaiser|Kaiser]]
* [[Gamehelpkamon|Kamon]]
* [[Gamehelpkingscraft|Kingscraft]]
* [[Gamehelpkiriaitheduel|Kiri-ai: The Duel]]
* [[Gamehelpladyschoice|Lady's Choice]]
* [[Gamehelpleaders|Leaders]]
* [[Gamehelplineae|Lineae]]
* [[Gamehelplovelinks|Love Links]]
* [[Gamehelplunar|Lunar]]
* [[Gamehelpmastersofrenaissance|Masters of Renaissance: Lorenzo il Magnifico – The Card Game]]
* [[Gamehelpmetz|Metz]]
* [[Gamehelpmexica|Mexica]]
* [[Gamehelpmicromidgard|Micro Midgard]]
* [[Gamehelpmindcycling|Mind Cycling]]
* [[Gamehelpminnesotawhist|Minnesota Whist]]
* [[Gamehelpmonsterhex|Monster Hex]]
* [[Gamehelpmorocco|Morocco]]
* [[Gamehelpmue|Mü]]
* [[Gamehelpnibble|Nibble]]
* [[Gamehelpninjan|Ninjan]]
* [[Gamehelpnirds|Nirds]]
* [[Gamehelpnorsemen|Norsemen]]
* [[Gamehelporchard|Orchard]]
* [[Gamehelppacifica|Pacifica]]
* [[Gamehelppandaspin|Panda Spin]]
* [[Gamehelppaperworld|Paper World]]
* [[Gamehelppentaquest|Pentaquest]]
* [[Gamehelpperikles|Perikles]]
* [[Gamehelppersonanongrata|Persona Non Grata]]
* [[Gamehelppioneerdaysproject|Pioneer Days]]
* [[Gamehelppiratesofmaracaibo|Pirates of Maracaibo]]
* [[Gamehelptexasholdem|Poker Texas Hold'em]]
* [[Gamehelppowervacuum|Power Vacuum]]
* [[Gamehelppropuh|Propuh]]
* [[Gamehelpqango|Qango]]
* [[Gamehelpquadratacanada|Quadrata Canada]]
* [[Gamehelpquartermastergeneraleastfront|Quartermaster General: East Front]]
* [[Gamehelpquartzdice|Quartz: The Dice Game]]
* [[Gamehelpquattuorreges|Quattuor Reges]]
* [[Gamehelpquintus|Quintus]]
* [[Gamehelpratsofwistar|Rats of Wistar]]
* [[Gamehelpraubbau|Raubbau]]
* [[Gamehelpreflectionsinthelookingglass|Reflections in the Looking Glass]]
* [[Gamehelpresist|Resist!]]
* [[Gamehelpresolve|Resolve]]
* [[Gamehelprevive|Revive]]
* [[Gamehelproomtwentyfive|Room 25]]
* [[Gamehelprumbleplanet|Rumble Planet]]
* [[Gamehelpsafariwitness|Safari Witness]]
* [[Gamehelpsail|Sail]]
* [[Gamehelpsamarkand|Samarkand]]
* [[Gamehelpscriptoria|Scriptoria]]
* [[Gamehelpscythe|Scythe]]
* [[Gamehelpsevenknightsbewitched|Seven Knights Bewitched]]
* [[Gamehelpsfynx|Sfynx]]
* [[Gamehelpsheepboombah|Sheep Boom Bah]]
* [[Gamehelpshogi|Shogi]]
* [[Gamehelpsiam|Siam]]
* [[Gamehelpspringcleaning|Spring Cleaning]]
* [[Gamehelpstarshipmerchants|Starship Merchants]]
* [[Gamehelpstonespinearchitects|Stonespine Architects]]
* [[Gamehelpstrawberrysunset|Strawberry Sunset]]
* [[Gamehelpsymbiose|Symbiose]]
* [[Gamehelptapas|Tapas]]
* [[Gamehelpbloodyinn|The Bloody Inn]]
* [[Gamehelpthegreatamericanfoxhunt|The Great American Fox Hunt]]
* [[Gamehelptheittybittycardgame|the itty bitty card game]]
* [[Gamehelpthelast|The Last]]
* [[Gamehelpthemotherroad|The Mother Road: Route 66]]
* [[Gamehelptheninedomains|The Nine Domains]]
* [[Gamehelpthewaytojuliet|The way to Juliet]]
* [[Gamehelpthewhitecastle|The White Castle]]
* [[Gamehelptholos|Tholos]]
* [[Gamehelptoybattle|Toy Battle]]
* [[Gamehelptriatri|TriATri]]
* [[Gamehelptroggu|Troggu]]
* [[Gamehelptulipandrose|Tulip & Rose]]
* [[Gamehelptuned|Tuned]]
* [[Gamehelptwinkletwinkle|Twinkle Twinkle]]
* [[Gamehelpultimatetictactoe|Ultimate Tic-Tac-Toe]]
* [[Gamehelpundergrove|Undergrove]]
* [[Gamehelpwastelandia|Wastelandia]]
* [[Gamehelpwhist|Whist]]
* [[Gamehelpwolfandsheeps|Wolf and Sheep]]
* [[Gamehelpxxung|Xxung]]
* [[Gamehelpynarosfallin|Ynaros Fallin]]
* [[Gamehelpzookeepers|Zookeepers]]
* [[Gamehelpzooloretto|Zooloretto]]
</div>
}}

{{infoBox|minWidth=100%|titleColor=#400|color=#feed
|title=Removed from BGA (incomplete list)
|body=<div style="columns:16rem auto;">
* [[Gamehelpdominion|Dominion]]
* [[Gamehelpduckcover|Duck & Cover]]
* [[Gamehelpequinox|Equinox]]
* [[Gamehelpgosu|Gosu]]
* [[Gamehelpharbour|Harbour]]
* [[Gamehelpinjawara|INJAWARA]]
* [[Gamehelpinsert|Insert]]
* [[Gamehelpkinapa|Kinapa]]
* [[Gamehelpbabet|L'Oracle B.A-BET]]
* [[Gamehelpmantisfalls|Mantis Falls]]
* [[Gamehelpparks|PARKS]]
</div>
}}

== About available games and their content ==

Games are games and it's all up to publishers to make them relevant or accurate to history, or not.

We're focusing on game play and rules. We're not history books, nor an accurate source for anything related to real things.

BGA is against any bad behaviours on real people, and will never EVER join, talk or expose about anything about themes, history or politics.

Also please note that they're also a source to motivate talks, reflection, exchange and viewpoints about history and education anywhere else.

We're a gaming platform, we welcome everyone and do efforts daily to make this place a nice place to play nice games with nice people.

Studio

2025-03-06T13:24:10Z

Ufm: /* BGA Studio user guide */

{{Studio_Framework_Navigation}}

[[File:Bga_studio_small.jpg|frameless|300px]]

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

__TOC__

== What is Board Game Arena Studio? ==

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

It is open to any gamer with software development skills :)

BGA Studio website: https://studio.boardgamearena.com

Original announcement on BGA forum: https://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] (or [http://en.doc.boardgamearena.com/images/5/58/1-why-developing.pdf ‎Download as PDF])
* [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] (or [http://en.doc.boardgamearena.com/images/1/1e/2-8-steps-to-realize.pdf Download as PDF])
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance] (or [http://en.doc.boardgamearena.com/images/7/79/3-thebgaframework.pdf Download as PDF])
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine] (or [http://en.doc.boardgamearena.com/images/9/98/4-gamestates.pdf Download as PDF])
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines] (or [http://en.doc.boardgamearena.com/images/7/76/5-guidelines.pdf ‎Download as PDF])

== 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 strongly advise you to take one of these game creation tutorials:
* [[Tutorial reversi]] ('''recommended''', closest to the actual BGA implementation and maintained by the BGA team) - an abstract strategy game played on an 8×8 uncheckered board for 2 players
* [[Tutorial gomoku]] - an abstract strategy game tic-tac-toe style for 2 players
* [[Tutorial hearts]] - a card game for 4 players

Then start editing files and see what happens! ;)

Once you're done with tutorials, you can start a real game (or join existing project)
* [[Create a game in BGA Studio: Complete Walkthrough]]

If you have any questions, please check out the [[Studio FAQ]] or [[Contact BGA Studio]].

To search wiki pages on studio enter this text in search bar:
"Category:Studio" white rabbit
That is if you want to search for white rabbit

== 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 (Server side) ====

* [[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 (Client side) ====

* [[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]]
* [[Your game mobile version]]

==== Other components ====

* [[Translations]] (how to make your game translatable)
* [[Options_and_preferences:_gameoptions.json,_gamepreferences.json|Game Options and Preferences]]
* [[Game meta-information: gameinfos.inc.php]]
* [[Game replay]]
* [[3D]]

=== BGA Studio game components reference ===

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

JS:

* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player's score).
* [[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.
* [[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).
* [[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.
* [[Anti-Stock]]: Code snippets in vanilla JS/HTML5 to do what stock does (that is if you cannot beat Stock into submission)

PHP:
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).

Reference for classes in game class hierarchy

* [[Table]]: a PHP class that you inherit from for the game php

=== BGA Studio user guide ===

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

Lifecycle

* [[BGA game Lifecycle]]
* [[BGA Game licenses]]
* [[Create a game in BGA Studio: Complete Walkthrough]]
* [[Pre-release checklist]] - Go throught this list if you think you done development
* [[Post-release phase]]

Tools and Advice
* [[BGA Studio Guidelines]]
* [[Tutorials checklist]]
* [[I wish I knew this when I started]] - one liners on most common missed features, mistakes, etc with further doc references
* [[Tools and tips of BGA Studio]] - Tips and instructions on setting up development environment
** [[Setting up BGA Development environment using VSCode]]
** [[Practical debugging]] - Tips focused on debugging
** [[Testing by developer]]
** [[Studio logs]] - Instructions for log access
** [[Troubleshooting]] - Most common "I am really stuck" situations
* [[BGA Studio Cookbook]] - Tips and instructions on using API's, libraries and frameworks
** [[Using Vue]] - work-in-progress guide on using the modern framework Vue.js to create a game
** [[Using Typescript and Scss]] - How to auto-build Typescript and SCSS files to make your code cleaner
** [[BGA Type Safe Template]] - Setting up a fully typed project using typescript and more!
** [[Bots and Artificial Intelligence]] - How to add AI/Bots to the game
* [[Studio FAQ]]

Sharing
* [[Common board game elements image resources]] - Dice, meeples, cubes, etc
* [[BGA Code Sharing]] - Shared resources, projects on git hub, common code, other links

== Software Versions ==

Versions currently used by BGA framework:

* Dojo Toolkit 1.15
* PHP: 8.2
* SQL: MySQL 5.7
* JS/CSS/HTML: limited by what minimization tools support: [[Game_interface_logic:_yourgamename.js#Javascript_minimization_.28after_July_2020.29|JS minimization]]
* Font Awesome: 4.7 https://fontawesome.com/v4.7/icons/ (available as <code><nowiki><i class="fa fa-clock" /></nowiki></code>)
* Font Awesome: 6.4.0 https://fontawesome.com/v6/search?o=r&m=free (available as <code><nowiki><i class="fa6 fa6-clock" /></nowiki></code>)

=== PHP Extensions Used ===

The following PHP extensions are - as of May 8th, 2022 - in use in BGA Studio and available:

date, libxml, openssl, pcre, zlib, filter, hash, Reflection, SPL, session, standard, sodium, apache2handler, mysqlnd, PDO, xml, apcu, bz2, calendar, ctype, curl, dom, mbstring, FFI, fileinfo, ftp, gd, gettext, gmp, iconv, igbinary, json, exif, msgpack, mysqli, pdo_mysql, apc, posix, readline, shmop, SimpleXML, sockets, sysvmsg, sysvsem, sysvshm, tokenizer, v8js, xmlreader, xmlwriter, xsl, zip, Phar, memcached, Zend OPcache

== Other resources ==

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

[https://studio.boardgamearena.com/bugs Bug tracking system FOR STUDIO issues and APIs]

DISCORD chat server/room invite link https://discord.gg/YxEUacY if it does not work check this topic https://forum.boardgamearena.com/viewtopic.php?f=12&t=17403&hilit=discord

Developer BLOGS https://bga-devs.github.io/blog/

[[Contact BGA Studio]]

[[Category:Studio]]

Gamehelpcanasta

2025-02-21T04:16:48Z

Ufm: Changed black 3 meld rule

== GOAL ==

Score 5,000+ points by melding sets of cards. Every card earns points when played to the table, but they subtract points if still in hand at the end of the round. There are bonus points for completing sets of 7 cards (called Canastas), drawing red 3s, being the first to empty your hand, and more.

Below are rules for classic 4-player Canasta (two 2-player teams with 2 decks). Be sure to explore the game options for even more fun!

== CARDS ==

2 standard decks of playing cards are shuffled together, including the jokers. That means there are 4 jokers and 8 of every other card in the deck.

::• 2s and Jokers are wild cards.

::• The rest of the cards are referred to as “naturals.”

== THE DEAL ==

Everyone is dealt 11 cards. A draw deck is formed with the remaining cards. The top card of the draw deck is turned up to form a discard pile.

If the upturned card is a joker, 2, or 3, turn another card up until you find a natural card of 4 or higher.

== GAME PLAY ==

A turn consists of:

*• Drawing the top card of either the draw deck or the discard pile.
*• (optional) Melding sets of 3 or more cards onto the table.
*• (optional) Melding 1 or more cards to an existing meld.
*• Discarding one card.

== DRAWING FROM THE DRAW DECK ==

Take the top card into your hand.

If you draw a <span style="color:#FF0000"><b>red 3</b></span>, the card is immediately added to the table, and you receive a 100-point bonus! Take another card from the draw deck, and add it to your hand.

<b>Note:</b> If your team have not melded any cards at the end of the round, this <span style="color:#FF0000"><b>red 3</b></span> bonus turns into penalty!

== DRAWING FROM THE DISCARD PILE ==

You must be able to meld the top card of the discard pile with 2+ cards in your hand (including at least one natural) OR one of your existing melds already on the table. If you can't make a meld, you cannot take the card.

A <b> MELD </b> is a matching set of 3 or more cards (such as 5-5-5, J-J-J-J-J-J, etc.). The meld can include wild cards, but there can be at most three wild cards in a single meld. You may not form a meld of just wild cards.

After you meld the top card of the discard pile, you take ALL cards in the discard pile into your hand. You may continue to meld as many cards as you like before discarding a card to signal the end of your turn.

<b>Frozen Pile</b>

Anytime a <span style="color:#FF0000"><b>red 3</b></span> (this is possible only at the beginning of the round) or a wild card is added to the discard pile, that card is turned sideways to indicate that the pile is frozen. In order to take the top card of a frozen discard pile, you must be able to meld that card with at least <b>2 NATURALS in your hand</b>. That “unfreezes” the discard pile so that normal rules apply again.

<b>Black 3s</b>

Black 3s can never be picked up from the top of the discard pile. The next player is, therefore, forced to take cards from the draw deck on their turn.

== INITIAL MELD ==

The first time your team melds, the value of all the cards put on the table must add up to a minimum amount. You can make multiple melds to achieve the amount. The minimum increases as your score increases, as follows:

{| class=”wikitable”
!width=40% | Score
!width-40% | Initial Meld Value
|-
| Less than 0
| ...15 points
|-
| 0-1495
| ...50 points
|-
| 1500-2995
| ...90 points
|-
| 3000+
| ...120 points
|-
| 7000+
| ...150 points
|}

When making the initial meld, you may only pick up the discard pile if you can meld the top card with two naturals in your hand.

In other words, the discard pile is always frozen until your team makes the initial meld (see above).

== CARD VALUES ==

{| class=”wikitable”

|-

| Joker || ...50 points

|-

| Ace, 2 || ...20 points

|-

| 8-King || ...10 points

|-

| 4-7 || ...5 points

|}

== END OF ROUND (“Going Out”) ==

The player who empties their hand first wins a 100-point bonus for their team! Emptying the hand is called “going out,” and has a few conditions:

<dl>

<dt><b>Canastas</b></dt>

<dd style=”margin-inline-start:1.6em;”>Your team must form at least 1 canasta in a 4-player 2-deck game. A canasta is a meld of 7 cards.</dd>

<dt><b>Final Card</b></dt>

<dd style=”margin-inline-start:1.6em;”>The last card in hand may be either discarded or melded.</dd>

<dt><b>Black 3s</b></dt>

<dd style=”margin-inline-start:1.6em;”>Black 3s may only be melded when you go out. The black 3 meld cannot include any wild cards, and it must be your final action, but the final discard after melding black 3s is permitted. Each black 3 is worth 5 points.</dd>

<dt><b>Asking to Go Out</b></dt>

<dd style=”margin-inline-start:1.6em;”>On your turn, you may ask your teammate if it's okay to go out. If you do so, you must accept their decision for the team. The question may only be asked after you take a card from the draw deck.</dd>

</dl>

Until you are able to go out, you must keep at least 1 card in your hand.

If you have only 1 card in hand, however, you cannot draw from/pick up the discard pile if the discard pile also has only 1 card!

<b>Going Out With a Concealed Hand</b>

If you haven't melded any cards to the table and then meld all the cards in your hand in a single turn, you earn bonus points for going out with a concealed hand. All of the above requirements for going out must still be met.

If you are playing a team game, adding cards to a partner's meld breaks the concealed hand condition.

<b>Note:</b> The initial meld requirement can be ignored only when the player manages to complete the required number of canastas and then goes out concealed, without picking up the discard pile.

<b>Draw Deck Runs Out of Cards</b>

The round could also end if the draw deck runs out of cards. If the final card in the deck is a red 3, play immediately ends – no melding or discarding. Otherwise, play continues as long as the <u>discard</u> pile can legally be taken.

<b>Note:</b> If the top card of the discard pile matches a meld of their team and the discard pile is not frozen, the turn player MUST take the discard pile.

=== Scoring ===

At the end of the round, each team receives points for all cards melded onto the table, red 3s, and the following bonuses:

{| class=”wikitable”

|-

| Going Out || 100 points

|-

| Going Out with Concealed Hand || 200 points

|-

| Each mixed canasta || 300 points

|-

| Each natural canasta || 500 points

|}

Next, all players SUBTRACT the value of the cards in their hand.

Check whether a team has reached the target points (usually 5000 points). If so, the team with the highest score wins the game. If not, a new round begins: Cards are reshuffled, a new hand is dealt to all players, initial meld value is adjusted up or down, and start player rotates clockwise.

Game statistics: stats.json

2025-02-16T04:51:03Z

Ufm:

{{Studio_Framework_Navigation}}

In this file, you are describing game statistics, that will be displayed at the end of the
game.

After modifying this file, you must use "Reload statistics configuration"
in BGA Studio Control Panel -> Manage Games ("Game Configuration" section):

https://studio.boardgamearena.com/#!studio

There are 2 types of statistics:
* table statistics, that are not associated to a specific player (i.e.: one value for each game).
* player statistics, that are associated to each players (i.e.: one value for each player in the game).

Statistics types can be "int" for integer, "float" for floating point values, and "bool" for boolean.

Once you defined your statistics there, you can start using "initStat", "setStat" and "incStat" methods
in your game logic, using statistics names defined below.
See API https://en.doc.boardgamearena.com/Main_game_logic:_yourgamename.game.php#Game_statistics.

If you want to skip some of your statistics according to game variants, do not init it, or call set or inc on it. It will be displayed as "-" (instead of 0 if you init it and don't update it afterwards)

!! It is not a good idea to modify this file when a game is running !!

If your game is already public on BGA, please read the following before any change:
https://en.doc.boardgamearena.com/Post-release_phase#Changes_that_breaks_the_games_in_progress

Notes:
* Statistic index is the reference used in setStat/incStat/initStat PHP method
* Statistic index must contains alphanumerical characters and no space. Example: 'turn_played'
* Statistics IDs must be >=10
* Two table statistics can't share the same ID, two player statistics can't share the same ID
* A table statistic can have the same ID as a player statistics, however its not recommended unless it is same conceptually (like turns_number is same statistic in both per table and per player)
* Statistics ID is the reference used by BGA website. If you change the ID, you lost all historical statistic data. Do NOT re-use an ID of a deleted statistic.
* Statistic name is the English description of the statistic as shown to players
* The order in which the stats will appear in the endscreen is determined by the order in the array, NOT by the ID. That is helpful for stats which getting added later but need to be higher up in the list.
* Statistic names and labels are automatically added to the translations system, so there is no need to wrap them in totranslate() calls
* Previously, this was a PHP file (stats.inc.php). You can continue to use this format for old projects. ('''Note''': once a game has been committed with a <code>stats.json</code> file, it is not possible to go back without admin intervention.
* (Number of table statistics) + (Number of player statistics × Maximum number of players) should not exceed ~930, or the game will crash. (Note: the maximum limit is not precise - Seems having stats around 980 broke the game, but reducing to around 930 solved this)

{
"table": {
"turns_number": {
"id": 10,
"name": "Number of turns",
"type": "int"
}
},
"player": {
"turns_number": {
"id": 10,
"name": "Number of turns",
"type": "int"
},
"player_teststat1": {
"id": 11,
"name": "player test stat 1",
"type": "int"
},
"player_teststat2": {
"id": 12,
"name": "player test stat 2",
"type": "float"
}
}
}
Sometimes you may want to display a label instead of a number (for instance if you want to indicate the winning faction as a table statistic, and the faction chosen by each player as a player statistic in a game like Terra Mystica).

You can do this by adding a "value_labels" key following the "table" and "players" keys. Please note that the labels apply to both table and player statistics, so you should pay attention to use the same statistic number for the same type of statistic (or to skip one number if labelling should not be applied for both)

<pre>
{
"table": {
"winning_race": {
"id": 11,
"name": "Winning race",
"type": "int"
},
},
"value_labels": {
"11": [
"None (or tied)",
"Auren",
"Witches",
"Fakirs",
"Nomads",
"Chaos Magicians",
"Giants",
"Swarmlings",
"Mermaids",
"Dwarves",
"Engineers",
"Halflings",
"Cultists",
"Alchemists",
"Darklings"
]
}
}
</pre>

If you want to consider some internal game statistics for game developer, publisher or admins's purpose only, simply add the following extra property : "display" => "limited". For instance :
<pre>
{
"player_teststat2": {
"id": 12,
"name": "player test stat 2",
"type": "float",
"display": "limited"
}
}
</pre>

=== Translations ===
Note that any name or value_labels text in these JSON files are automatically added to the translation system, even though they aren't wrapped in totranslate() calls.

[[Category:Studio]]

Troubleshooting

2025-02-12T10:16:14Z

Ufm: /* HTTP Error 500 (when the BGA server is stable) */

Describing common errors which are hard to understand and debug. This may be useful for troubleshooting.

__TOC__

== Game does not start at all ==

=== Undefined offset: 0 in table/table.game.php on line 1417 ===

Do not call self::getActivePlayerName() during setupNewGame()

Ensure you're calling $this->gamestate->changeActivePlayer() at the end of your game setup. You must always have at least one active player.

=== Unexpected error: Wrong formatted data from BGA gameserver 1 (method: createGame): ... ===

This is generic message usually followed by exact position in your source code, and usually its syntax error in one of yours php script

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: Not logged ===

Calling self::getCurrentPlayerId () or using $g_user from 'args' state function, see also below

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: Unknow player statistic: ===

Calling self::incStat() with second parameter which is an empty string

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: Error while processing SQL request: INSERT INTO stats ... ===

Fatal error during yourgame setup: Error while processing SQL request: INSERT INTO stats (stats_type, stats_player_id, stats_value) VALUES ('10','2300663','0'),('10','2300662','0')
Duplicate entry '10-2300663' for key 'stats_table_id'

Why? In the stats.inc.php you declared two keys with the same integer "id"

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: BGA main website do not respond ===

Check if other games work; if not, it's a problem with BGA Studio; if so, your game likely reaches an end state immediately. Check your states.inc.php and your transitions.

=== Unexpected error: Propagating error from GS 1 (method: createGame): BGA service error ===

You may have a syntax error in your dbmodel.sql.

Or, you may be calling self::initStat() for a statistic that does not exist. Check the statistic name, and make sure you clicked "Reload statistics configuration" button in the admin console after making changes to stats.inc.php

Or you may not have your states.inc.php set up correctly.

You may have an error in your table.game.php file in setupNewGame (such as <code>$result['x'] = y;</code> when $result is not an array).

=== Unexpected error: Table status of a starting game should be 'setup' ===

This error message appears when you start a one player game using the "Express Start" button.

In normal situation, the game starts just after this message and everything should works normally. In this case, you can just ignore this message.

If the games does not start, it is most probable that there is a syntax error in any of your php code (Check your states.inc.php and X.game.php)

=== Fatal error during creation of database ebd_quoridor_389 Not logged ===

Check that you didn't use $g_user or getCurrentPlayerId() in setupNewGame() function or in an 'args' 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.

=== Warning: Invalid argument supplied for foreach() in table.game.php ===

Warning: Invalid argument supplied for foreach() in /var/tournoi/release/tournoi-151226-1240-gs/www/game/module/table/table.game.php on line 129
Fatal error: Cannot unset string offsets in /var/tournoi/release/tournoi-151226-1240-gs/www/game/module/table/table.game.php on line 143

That appears when your arg* function that suppose to return array of state arguments returns a scalar (a non-array) value

Server syntax error:
Warning: Invalid argument supplied for foreach() in /var/tournoi/release/tournoi-240320-1000-gs/www/game/module/table/table.game.php on line 3249

Check that notfication you sending have args method supplied, i.e

$this->notify->all('message', "", []); // 3rd argument MUST be array

=== The server reported an error ===

During table creation: "The server reported an error" error shown and nothing else.

If you cannot even create a table - there is syntax error in gameinfos.php, check it, reload it from management panel.
If still no luck copy clean version from template https://github.com/elaskavaia/bga-sharedcode/blob/master/gameinfos.inc.php

=== Unexpected Error : Invalid player number for this game : 4 ===

This error may comes when trying to change the player number configuration in gameinfos.inc.php from a higher to lower number of players (for example from 4 to 2).

The following steps will help to change a player config from array(4) to array(2) :

* change in gameinfos.inc.php the entry to 'players' => array( 2,3,4 )
* In game management page (Control Panel > Manage Games > "Your Game"), press the "Reload Game information" button
* create a new table
* reduce the number of players to 2 and start the game
* (express) Stop the game
* change in gameinfos.inc.php the entry to 'players' => array( 2 )
* press again the "Reload Game information" button

=== Blank page ===
If you see no html at all check
* if you have syntax error in your view.php file
* class name of your view.php file does not match the project name (should be view_foo_foo if project is foo)
* game name return by getGameName() does not match the project name (should be "foo" if project is foo)

class view_russianrailroads_russianrailroads extends game_view {
function getGameName() {
return "russianrailroads";
}

=== "Ooooops, this page does not exists :/" ===
If your table is created, but you are redirected to <code><nowiki>https://studio.boardgamearena.com/1/index.php</nowiki></code> when you try to launch your table, then you are most likely missing the [[Players actions: yourgamename.action.php|action PHP file]].

No other error is displayed or logged, meaning this can be tough to debug.

Make sure the file is correctly named, as any typo means the studio won't be able to find the file.

=== HTTP Error 500 (when the BGA server is stable) ===

The table has been created, but the table loading (e.g. getAllDatas()) hasn't been finished properly for some reason. For example php type error when strict typing is enabled.

Also, this may happen when the game is using <code>gameoptions.inc.php</code> and is using a non-string option name.

=== Unexpected error: Wrong formatted data from gameserver 1 (method: createGame): JSON_ERROR_SYNTAX - Warning: Undefined array key 100 in .../table.game.php - Unknown gamestate label: 100 ===

You've added a new option to <code>gameoptions.json</code> but forgot to initialize the option via <code>self::initGameStateLabels()</code>.

== Game starts but I can't make a move ==

=== When I do a move, I got "Move recorded, waiting for update ..." forever ===

"Move recorded" means that your ajaxcall request (bgaPerformAction) has been sent to the server and returned normally.

"Waiting for update" means that your client interface is waiting for some notifications from the server that correspond to the move we just did.

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 notify->all or a notify->player call in your PHP code.

=== When I do a move, I get "Sending move to server..." then nothing and game resets to state before the move ===

Its possible that server code get into infinite loops or thinks too much, in which case it will timeout and will be aborted without any extra logs (and db transaction you saw in the log won't be committed). You will usually see "Unable to connect to server" message on console in this case. You have to put more logging into server
to trace where it hangs.

You may also see this error in the log in this case: "Error (2006) while processing SQL request: MySQL server has gone away"

=== When I do a move, I get "Ajaxcall error: empty answer" ===

You either have missing self::ajaxResponse(); in your [[Players actions: yourgamename.action.php|game.action.php]] method, or there is some problem with getting arguments (check that you are using btoa() on client when using AT_base64 arg type in action.php)

=== When I do a move, I get "Gameserver is locked by configuration". ===

You may have an error in your AJAX path, such as /reversi/reversi when your game's name is different.

=== Some player action is triggered randomly when I click somewhere on the game area ===

You probably used "dojo.connect" on a null object. In this case, dojo.connect associate the event (ex: "onclick") to the whole game area.

Most of the time it happens in this situation, when my_object element does not exists:
<pre>
dojo.connect( $("my_object"), "onclick", this, (event)=>{})
</pre>

To determine if this is the case, place "alert( $("my_object") )" before the dojo.connect to check if the object exists or not.

=== Error: This is not your turn ===

This happens when checkAction() is called and current player is NOT the active player.

You can change the active player in studio by clicking the red arrow next to their name in the player panel (right side of the page).

[[File:Change_active_player.jpg]]

=== Error: Please wait, an action is already in progress ===
Its followed by error "(Generated by checkAction / XXX)" on studio.

This error is triggered in the JS by the checkAction function for XXX action.

This can happen when the player sent an Ajax request action earlier, and:
* action is not complete yet - i.e. takes some time, and user clicked something again
* if there is bug in interface where MULTIPLE handlers are fired on same click. To debug this add some console.trace() in place this specific checkAction is called.
* did not get any notification from the PHP side. To avoid this, put an empty notify->player in the PHP side of the Ajax handler to ensure the client receives a response. This line of code should do it:
<pre>
$this->notify->player($this->getCurrentPlayerId(), 'message', '', []); // sent to current player, who originated the action
</pre>

=== Error: This move is not authorized now ===
This is generic error message generated by this.showMoveUnauthorized() function. If you did not call this function yourself, check the console log, it may have additional information.
If you see "Move not authorized now : XXX" in the log, where XXX is your action name - this means that action XXX is not defined in list of possible actions for your current state. This error generated by checkAction() function.
=== Error: More than one possible action at this state ===
The argument given to $this->gamestate->nextState() is not defined in states.php.

=== Error: You are not connected - after waiting for the submitted move ===
In the log you may find:
Query execution was interrupted, maximum statement execution time exceeded - Request: SELECT global_id, global_value FROM global WHERE 1

The error message above is because of failed attempt to lock a table, which happens because of infinite loop in you game.
* Check that don't enter same game state over and over again
* Check that you reverse for loop actually descrease counter or other loop issues
* Check that recursive function ends

=== 502 Bad Gateway ===
This error is similar to the infinite loop just above this section, but the loop occurred in view.php or somewhere unusual (e.g. module).

== Predefined server errors ==

=== Unexpected error: Unexpected final game state (XX) ===

The action function does not transition to any state, i.e.
function selectField($field) {
self::checkAction ( 'selectField' );
if ($field!=0) $this->gamestate->nextState ( 'next' );
}
Here if $field is 0 there is no transition

=== This game action is impossible right now ===

Check the game log. Usually your state does not define the action you trying to perform in 'possibleactions' array.

Also check your onActionName javascript function. Make sure you are calling the right "actionname.html".

=== Unexpected error: This transition (playerTurn) is impossible at this state (42) ===

This is pretty self explanatory. Function nextState() takes transition name not a state name, so you probably did not
define this transition that the given state

== Game interface hangs during reload or on start ==

Showing "Application Loading..."

=== Javascript error: During pageload undefined no_stack_avail Script: ===

This error usually has no useful data, but it means you called somes API that require a callback and did not define callback function, i.e
in dojo.connect, this.connectClass, dojo.subscribe, etc

this.connectClass('field', 'onclick', 'onField'); // <-- onField is not defined

=== Javascript error: During pageload n is null ===

When calling dojo.place(), the name of the container (second parameter) to place the new block into is not defined in the page template.

=== Other errors with "Application loading..." ===

You probably have a syntax error in your Javascript code, and the interface refuses to load.

To find this error, check if there is an error message in the Javascript console (F12).

If there is really nothing on the log, it'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 "}" or a missing "," after a method definition.

If you have "Uncaught ReferenceError: bgagame is not defined" you have major syntax error in your js file, you should see some other clues in the log where the errors is.

If you have "dojo.publish is not defined" or something similar, this could be caused by another error earlier. For example, a syntax error caused by a malformed generated file (such as using newlines in tiebreaker description). Also you might have left some images in the /img directory with special characters in the name which must be removed. If you edited images for the game box and website, ensure that you have not left any unnecessary files there.

=== Unexpected Syntax Error: ===

No further details in the log. When log is filling with some social connect errors.

Possible Reason: Syntax error in of the php script which is loaded before the start, such as gameoptions.inc.php, gameinfos.inc.php and such. This can also occur if the gamedatas returned from getAllDatas() in *.game.php contains objects that cannot be properly serialized. For example, a class that defines functions as well as scalars.

=== Game interface spins in a loop throwing error ===

Errors is something like "Cannot read property 'is_ai' of undefined". Cannot restart the game because cannot access UI to stop.
Likely you get in actplayer state with player id == 0. The only way to fix it is to edit database, globals index == 2 set player id to one of your test dudes
(can copy from row 5 for example).

=== Unable to find table database (1): ebd_yourgame_112222 ===

Its either temporarily server error especially on studio it timeouts sometimes, just try reloading again.
Or check if you have syntax errors in your php game file or sql.

== Type conversion / juggling errors ==

=== On php side I get a number instead of string I expect ===

$num = 3;
$meeple = "meeple_" + $num; // <-- suppose to be "meeple_3"!

When you switch between JS and PHP it easy to type this and not notice the +. Plus sign (+) in php does not mean string concatenation (in javascript does!),
in php + means integer arithmetic. So change + to . (dot)

=== On php side my string comparison does not work ===

if ($color == '4baae2' || $color == '000000') {
}

Apparently you should not be using '==' in php to compare strings! You should use '==='. The (==) operator will typecast the strings
to numbers then do comparison!
Its not very apparent because usually you can get away with it, but not when strings resemble numbers like hex 'colors'.

=== Integer columns in the database are returned as strings ===

This is normal PHP behavior. All fields are returned as string type, regardless of their actual type in the database. This also applies to global variables accessed via getGameStateValue(), since they are stored in a database table.

You can use type-casting to convert them to the correct type after they come out of the database.

$myValueInt = (int)self::getGameStateValue(GLOBAL_ROUND_NUMBER);

or

$myValueInt = self::getGameStateValue(GLOBAL_ROUND_NUMBER) + 0; // adding 0 casts to int

same with direct qdb ueries
$sql = "SELECT my_int_column FROM my_table WHERE my_condition";
$myResult = self::getUniqueValueFromDB($sql); <-- this is a string
$myResultAsInt = (int)$myResult;

https://stackoverflow.com/questions/5323146/mysql-integer-field-is-returned-as-string-in-php

== Zombie mode ==

=== Unexpected error: Propagating error from GS 1 (method: zombie): Not logged ===

You are probably calling getCurrentPlayerId() or getCurrentPlayerName() in your zombieTurn method or any of the methods it uses. Instead, use the $active_player_id provided as parameter to zombieTurn().

If you do not see these commands within "function zombieTurn( $state, $active_player ){}", check all the functions called from zombieTurn, also "function getGameProgression(){}" and all the functions THAT calls.

=== Unexpected error: Can't manage zombie player in this game state ===

The state the game was in at the time the error was generated didn't have "transitions" => array( "zombiePass" => 27 )" in states.inc.php (27 was an arbitrary example, but everything else must be spelled exactly that way.)

To correct this error, either add "zombiePass" => ## to the transitions array or work out why the game is in a state it should not be in.

=== Unexpected error: Wrong formatted data from BGA gameserver 1 (method: zombie): ===

This is almost certainly an undefined value in PHP code. Look for a warning or error message in the game replay log on the right side of the table UI.

=== Unexpected error: BGA gameserver 1 do not respond (method: zombie) (timeout: cluster) ===

You are trying to end the game from a zombie method. This is not allowed. The zombie logic must continue the game as best it can. See [[Main_game_logic:_yourgamename.game.php#Zombie_mode|Zombie mode]] for more info.

=== Game unexpectedly ends when one player becomes zombie ===

There is an error in handling zombie mode, check error log. Example: if the zombie turn is called again, framework detects a infinite loop and cancels the game. On the studio there is a notification called ZombieTurnFailed

== Dead locks ==

=== Database dead lock in multiplayer state ===
You normally won't see this error until game is released because to reproduce game it have to be hit with 2 players doing an action simultaneosly.
You only can reprodoce this on studio if you either very fast or you use a script (with direct REST calls).

There is few types of deadlocks
I) Try-lock - this one you don't need to worry about even it does appear in the log, this is 2 player doing the action and second cannot lock db, it will re-try up to 3 times and hopefully it be ok
II) Real dead lock - when 2 tables are locked in reversed by 2 actions, its unclar if this really happen but workaround number 2 theorically should solved it (but it will increase number of deadlocks of type I)

There are two known workarounds:

1) Use $this->bIndependantMultiactiveTable=true in constructor which will force usage of playermultiactive table, but this does not eliminate dead lock completely.

2) Before every action explictly lock tables in specific order (add this code in your game.php file)
<pre>
// Due to deadlock issues involving the playersmultiactive and player tables,
// standard tables are queried FOR UPDATE when any operation occurs -- AJAX or refreshing a game table.
//
// Otherwise at least two situations have been observed to cause deadlocks:
// * Multiple players in a live game with tabs open, two players trading multiactive state back and forth.
// * Two players trading multiactive state back and forth, another player refreshes their game page.
private function queryStandardTables() {
// Query the standard global table.
$this->DbQuery("SELECT global_id, global_value FROM global WHERE 1 ORDER BY global_id FOR UPDATE");
// Query the standard player table.
$this->DbQuery("SELECT player_id id, player_score score FROM player WHERE 1 ORDER BY player_id FOR UPDATE");
// Query the playermultiactive table. DO NOT USE THIS is you don't use $this->bIndependantMultiactiveTable=true
$this->DbQuery("SELECT ma_player_id player_id, ma_is_multiactive player_is_multiactive FROM playermultiactive ORDER BY player_id FOR UPDATE");

// TODO should the stats table be queried as well?
}

/** This is action function that canbe called from multiplayer state */
protected function actionXXX() {
$this->queryStandardTables();
... // your arg function code
}
/** This is arg function of multiplayer state, XXX is replaced by actual name of state.
You need to do it for EVERY arg function in multiplayer states which accesses the database.
You don't need to do it for arg function for single player states
*/
protected function argXXX() {
$this->queryStandardTables();
... // your arg function code
}
</pre>

== Other errors ==

=== Javascript does not know how to sum two numbers ===

Be careful when you manipulate integers returned by notifications: most of the time, Javascript considers they are Strings and not Integers.

As a result:
<pre>
let i = 1;
i += notif.args.increment; // With notif.args.increment='1'
console.log( i ); // i=11 instead of 2 !! Javascript concatenate 2 strings !
</pre>

To solve this, you should use the "parseInt" function:
<pre>
let i = 1;
i += parseInt(notif.args.increment, 10); // With notif.args.increment='1'
console.log( i ); // i=2 :)
</pre>

=== Javascript: do not use substr with negative numbers ===

To get the last characters of a string, use "slice" instead of "substr" which has a bug on IE:
<pre>
var three_last_characters = string.substr( -3 ); // Wrong
var three_last_characters = string.slice( -3 ); // Correct
</pre>

=== Game "spontaneously" transition to a new state without user input ===

Make sure on php side you have no code after $this->gamestate->nextState(...) code.
Because if you do accidentally have code that goes to another state it will cause another state transition without user interaction.

function selectField($field) {
self::checkAction ( 'selectField' );
if ($field!=0) $this->gamestate->nextState ( 'next' );
$this->gamestate->nextState ( 'last' ); // <-- here is missing else, so it will cause double state transition
}

=== Message "Invalid or missing substitution argument for log message: ${actplayer} ... " when entering a state ===

You probably have an args function defined for that state that does '''not''' return an array

=== Server syntax error: Warning: count(): Parameter must be an array or an object that implements Countable in /var/tournoi/release/tournoi-220308-1000-gs/www/game/module/table/gamestate.game.php on line 823 ===

Generally comes with that syntax error : Warning: implode(): Invalid arguments passed in /var/tournoi/release/tournoi-220308-1000-gs/www/game/module/table/gamestate.game.php on line 845

It is most probable that you used setPlayersMultiactive method with id of a single player not included in an array -> you should use: ... setPlayersMultiactive( array($player_id), ...

=== Red banner "Uncaught EvalError: Possible side-effect in debug-evaluate" ===

This is a known issue that can be ignored (for most of case). Generally happening when working on devtool.
A workaround is to disable the "error" event listener. To do so, you can temporarily disable the event listener in DevTools, like this:

- At the top of DevTools, open the "Elements" tab
- Press "»", on the right of "Styles", "Computed", "Layout"
- Choose "Event listeners"
- Find and expand "error"
- Click "Remove"

This will remove the event listener, but the issue will return after you refresh the page.

[[Category:Studio]]

Gamehelpludo

2025-01-26T08:47:46Z

Ufm: /* Game play */

Each player places 4 tokens in their waiting area.

*• Quick start: Each player places a token in the waiting area at their starting space.

==Game play==

At the start of each turn, a 6-sided die is rolled. Rolling a 6 grants an extra turn.

The turn player may move a token already on the track according to the rolled die face. Tokens move clockwise following the track.

If a 6 is rolled, the player may enter a token from the waiting area to the starting space instead.

*• Reduced starter limit: Any roll can get a token out of the starting area, when the player does not have any tokens on the board.
*• No starter limit: Any roll can move a token out of the waiting area.

When a token advances to a space with tokens of other colors, those tokens are captured and returned to their waiting area.

*• Safety spaces: Spaces with a shield are safety spaces where tokens cannot be captured.
*• Capture bonus: Capturing a token grants an extra turn per captured token as well.

Colored columns are 'home columns' where only the tokens of the same color can enter.

All home columns lead to the home space (the center of the board).
Entering the home space removes the token from the board.

*• Home bonus: Entering the home space grants an extra turn as well.
*• Easier finish: Entering the home space does not require an exact roll.

All extra turns are forfeited when the player cannot move any tokens.

The turn passes clockwise.

The game ends when a player advances all tokens to home space, removing all of their tokens on the board.

==Scoring==

Each player scores points equal to the number of their tokens entered the home space.

If tied, the number of remaining tokens out of the waiting area breaks the tie. If still tied, advanced spaces total of remaining tokens breaks the tie.

Gamehelppresident

2025-01-24T03:23:53Z

Ufm: /* Revolution */

== Objective ==

The goal of President is to accumulate the most points by getting rid of all of the cards in your hand faster than the other players in each round.

=== Playing the game ===

Number of players : 2-8 (no President or Beggar in 2/3-player)

President is played with a standard 52-card deck and 1 Joker. Following this hierarchy (lowest to highest): 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K, A, 2.

*A Joker can be used as either the highest ranked single card, or a wild which can be used with other cards.

Cards are dealt one at a time clockwise until all cards have been dealt. When cards cannot be evenly distributed, lowest ranked players will receive more cards than others.

In 2 player mode, both players receive 15 cards instead.

A player can play a single card or a set of cards of equal rank :
*Double – a pair of cards of the same value (ex. 2 Kings).
*Triple – three cards of the same value (ex. 3 fours).
*Quadruple – four cards of the same value (ex. 4 sevens).
*Quintuple - four cards of the same value and the Joker as a wild (ex. 4 nines plus the Joker).

The first player of the round sets how many cards should be played for the entire pile.
*Player 1 : plays 1 five, then all others players must play one card until this pile is over.
*Player 1 : plays 2 nines, then all others players must play two cards until this pile is over.

The next player must play a higher ranked combination with the same number of cards or pass and wait until their next turn.

If all players except a single player pass consecutively, remove cards on the table and the player who played last starts a new play.

If a player played their last card, and no other player can play (or pass even if they can play), the next player available clockwise will start next pile.

=== End of the round ===

The game will continue until there is a single player left with at least a card in their hand.

The roles in the next round are:
*''President'': The first player to get rid of all of their cards
*''Minister'': The second player to get rid of all of their cards
*''Peasant'': The second to last player to get rid of all of their cards
*''Beggar'': The last player to get rid of all of their cards
*''Citizen(s)'': Any other players are considered neutral

Before next round starts :
*The ''Beggar'' must give their two highest cards to the ''President'' and the ''President'' must give back 2 cards of their choice to the ''Beggar'' at the same time.
*The ''Peasant'' must give their highest card to the ''Minister'' and the ''Minister'' must give back 1 card of their choice to the ''Peasant'' at the same time.
*''Citizen(s)'' do not exchange cards.

The ''Beggar'' will be the first player to start the next round.

=== Revolution ===

When a player plays four or more cards, the hierarchy of all the cards is reversed during the same round. The Joker is unaffected by the revolution.

For example, after the first revolution of a round, the order of power is (lowest to highest): 2, A, K, Q, J, 10, 9, 8, 7, 6, 5, 4, 3, Joker.

If another revolution is played, the order would switch back to normal.

=== Skip ===

When a player plays the same number of cards of the same rank as the previous player, that skips the next person who would have played.

For example, playing a 7 on top of another 7, or a pair of 4s on another pair of 4s, the next player is skipped.

The Joker played alone cannot be skipped.

=== Illegal Finish ===

A player went out by playing 2 when card ranks are normal, 3 when card ranks are reversed, 8 when Ender 8 option is active, or the Joker (even as a wild card), is disqualified and is ranked the lowest.

If several players are disqualified by this rule in the same round, the player who went out later is ranked higher.

Playing illegal finish cards just before the last play is not forbidden.

For example, when a player with Joker and a 4 has the lead, the player can play the Joker to win the trick immediately and then play a 4 and go out legally.

=== Downfall ===

When the President (or the Minister in 3-player) fails to get the first place, that player is automatically eliminated from the round and ranked last unless someone else is disqualified by illegal finish.

== Points ==

For each round, each player receives the points equal to the number of players they beat.

The game ends when a player reaches the target score written in the player panel.

== Variant rules ==

The following additional variants are supported on BGA (as of 2025-01-13).

=== Scoring rule and Game length ===
The game length option works a little differently depending on whether positive scoring or negative scoring is used.
{| class="wikitable"
|+
!
! colspan="3" |'''Game length'''
|-
!'''Scoring rule'''
|'''Short'''
|'''Medium'''
|'''Long'''
|-
|'''Positive scoring''': Each player scores points equal to the number of players they have beaten in the round. The game ends when someone reaches the target score. The target score depends on the game length:
|2x player count
|3x player count
|4x player count
|-
|'''Negative scoring''': President gains 1 point bonus, each Citizen loses 1 point, Peasant loses 2 points, and Beggar loses 3 points. The game ends when someone drops to 0 points or below. The starting points depend on the game length:
|10 starting points
|15 starting points
|20 starting points
|}

=== Rule set ===

* '''Moderate variant''': Revolution, Joker, Skip, Illegal finish
* '''Full variant''': All card-related variants and Downfall.
* '''No variant''': Removes all variants.
* '''Custom''': Table creator can customize variant options.

=== First player ===
Determines whether the highest player (president) or lowest player (beggar) will be the first player to start the next round.

=== Automatic turn skip ===
The game checks only public information to determine whether a player has any chance of beating the current combination regardless of the cards in hand. If all relevant higher cards are discarded already, the turn is skipped automatically.

=== Same suit sequence ===
Three or more cards of consecutive rank and the same suit can be played as a valid combination. If applicable, all special effects of cards in the combination are applied.

=== Suit lock ===
If a player plays a combination of the same suit as the previous play, all further plays during the same trick must be the same suit combination. The Joker cannot activate a suit lock, but can be used as the required suit during a locked trick.

=== Ender 8 ===
Playing one or more 8s ends the trick immediately.

=== Reversing 9 ===
Playing one or more 9s reverses the turn order permanently.

=== Jack back ===
Playing one or more Jacks reverses card ranks or cancels the rank reversal during the same trick.

=== Permanent pass ===
A player passed their turn is completely out of the trick and cannot play cards again during that trick.

=== Unskippable 2/3 ===
- 2s (or 3s when Revolution is in effect) cannot be beaten by the same rank.

Gamehelpgolf

2025-01-08T02:02:35Z

Ufm:

[[Category:Card games]]
== Objective ==
The objective is for players to have the '''lowest value''' of the cards in front of them by either '''swapping''' them for lesser value cards or by '''pairing''' them up with cards of equal rank.

== Setup ==
{|class="wikitable" style="max-width:50rem;text-align:left;" border="2"
!style="text-align:left;"|Option
!style="text-align:left;"|Values
!style="text-align:left;" colspan="2"|Description
|-
|rowspan="3"|Number of grid cards
|4
|colspan="2"|Arrange 4 dealt cards in a square and peek 2 cards. Use 1 deck. Closing ends a round. When players replace a card on their board with a newly drawn card, they are placed face down.
|-
|style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;"|6
|colspan="2"|Arrange 6 dealt cards in 2x3 grid and flip 2 cards. Use 1 deck in 2/3/4/5-player and 2 decks in 6/7/8-player. Completing a full face up grid ends a round.
|-
|9
|colspan="2"|Arrange 9 dealt cards in a square and flip 3 cards. Use 1 deck in 2/3-player, 2 decks in 4/5/6-player and 3 decks in 7/8-player. Completing a full face up grid ends a round.
|-
|rowspan="2"|Card power
|On
|rowspan="2" colspan="2"|If a card with power is drawn from the deck, it can either be used as a normal card or be discarded to use its power.
* {{card|J}} ⇨ peek at one of your face down cards.
* {{card|Q}} ⇨ peek at one of your opponent's face down cards.
* {{card|K}} ⇨ swap any two cards.

|-
|style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;"|Off
|}<div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.2em 0.5rem;width:max-content;text-align:left;">Default selection</div>

Six cards are dealt face down to each player in two rows and three columns:

{{cardBack}} {{cardBack}} {{cardBack}}

{{cardBack}} {{cardBack}} {{cardBack}}

== Game play (6 card variant) ==

* Each player flips two of their cards face up.
* The player on the dealer's left starts.
* Players take turns drawing a single card from either the face down deck or the top card of the face up discard pile.
* If the card is '''swapped''' for one of the face down cards, the card swapped in remains '''face up'''.

* The round ends when a player (the "closer") has all their cards face up.
* Every other player has one more turn, after which all cards are turned face up.

== Scoring ==
{|class="wikitable" style="width:auto;text-align:center;" border="2"
|-
!Card
|{{card|A}}
|{{card|2}}
|{{card|3}} ~ {{card|10}}
|{{card|J}} , {{card|Q}}
|{{card|K}}
|-
!Points
|'''1'''
|'''-2'''
|3 ~ 10
|'''10'''
|'''0'''
|}

* Add up all the values of face up cards.
* Any column or row of the same rank cancels out to zero.
* A 2x2 square of equal cards scores -20 points, ignoring normal card scores (even if the equal cards are bonus point cards).

{{infoBox
|title=Example
|body=<center>
{{spade|K}} {{spade|6}} {{heart|K}}

{{diamond|4}} {{heart|6}} {{club|2}}

</center>
<hr>
* The column of {{spade|6}}{{heart|6}} cancel out to zero.
* Kings are worth zero.
* This scores '''+4''' ({{diamond|4}}) '''-2''' ({{club|2}}) = '''2 points'''.
}}

* The player with the fewest points wins the round.
* The player with the fewest cumulative points from all rounds wins the game.

Bugsclarification bandido

2025-01-02T01:15:47Z

Ufm: Created page with "- All available moves create 1x1 hole, but I can't switch my hand. You may only discard and re-draw if the card cannot be played legally. Otherwise you have to play a card, even if you know that it makes winning the game impossible. - The top bar says I should discard 3 cards, but I can't select 3 cards in my hand. You probably played a map in Bandida. You should select 3 cards on the TABLE, not in your hand."

- All available moves create 1x1 hole, but I can't switch my hand.

You may only discard and re-draw if the card cannot be played legally.
Otherwise you have to play a card, even if you know that it makes winning the game impossible.

- The top bar says I should discard 3 cards, but I can't select 3 cards in my hand.

You probably played a map in Bandida.
You should select 3 cards on the TABLE, not in your hand.

Gamehelpindianchief

2024-12-24T08:30:21Z

Ufm:

== How to Play ==

The game lasts just 7 rounds. Over the course of the game each player will make 7 different melds. Each meld requires a different number of cards and has different rules for scoring points.

1-3 player games use 1 deck, 4-8 player games use 2 decks, and 9-10 player games use 3 decks.

The 7 melds take their names from a traditional children's rhyme:

* 5 cards - Rich Man
* 3 cards - Poor Man
* 2 cards - Beggar Man
* 1 card - Thief
* 6 cards - Doctor
* 4 cards - Lawyer
* 7 cards - Indian Chief

Each player is dealt a hand of 8 cards. Players secretly decide which of the 7 melds they will play from their hand, and which of their cards they will play. Everyone's meld is revealed simultaneously and scoring is recorded. Then each player draws back up to 8 cards, and a new round commences.

Over the course of the 7 rounds, a player makes each meld once and once only, but they can be made in any order. The game is over at the end of the seventh round, i.e., once everyone has made all 7 melds.

== The 7 Melds ==

Note: For all "face values" in the game, face cards count 10. Aces can be used as either high (value 11) or low (value 1).

Here are the 7 different melds in order of number of cards required:

1. Thief. Meld any single card and score the face value for that card.

After everyone's scores for the hand have been recorded, the player who played the Thief takes a Joker from the wild pile before drawing cards.

Jokers are wilds which can substitute any card. Spent Jokers are returned to the wild pile.

2. Beggar Man. Meld 2 cards and hope for sympathy. This symbolizes two outstretched supplicating hands.

For each card someone else melds on the same round that matches the rank of either melded card, score 2 points.

Jokers can substitute any rank, but this meld cannot score from Jokers played by other players.

3. Poor Man. Melding 3 cards, here is your chance to profit by the sweat of your brow. The spade is the symbol of your toil. Meld any 3 cards, but score the face values only of the spades you play.

4. Lawyer. The Law is exact. Meld 4 cards, and if their face values add up to exactly 25, score 25 points. Otherwise score nothing.

5. Rich Man. Even a Rich Man has to pay taxes! Meld any 5 cards, add their face values together and score the total as a negative number.

6. Doctor. The 6 cards melded as the Doctor must meet very stringent requirements, or they will score nothing. All 3 of these conditions must be met:

(a) No two cards can be of the same rank. (Because a Doctor needs wide and varied knowledge.)

(b) At least one of the 6 cards must be a heart. (Because a Doctor needs to have a heart!)

(c) One of the 6 cards must be an ace. (Because a Doctor should be an ace!)

If these three conditions are met, then the player picks one suit and scores 10 points for each card in that suit among their 6 cards. (Because a Doctor needs to be good at their specialty.)

7. Indian Chief. The Indian Chief is a compound meld, being comprised of two discrete parts: 3-card tribal council and 4-card tribe members.

(a) To score the tribal council, score 7 points each for a Jack, a Queen, and a King. Only one of each rank scores.

(b) To score the remaining 4 cards:

* 32 points for 4 of a kind
* 28 points for 4-card straight
* 24 points for 3 of a kind
* 20 points for 2 pairs
* 12 points for 1 pair'

Remember: The 7 melds can be played in any order. After the 7 rounds are played and scored, the winner is the player with the most points.

== Refilling to 8 cards ==

The players leave their melds face-up until the cards for the new round have been dealt from the remainder of the deck. Then the remainder of the deck is shuffled together with the face-up cards to form the supply for the next hand.

== Solo rules ==

In solo mode, cards melded do not return to the deck.

Beggar Man scores from each card melded in all previous rounds instead of each card other players meld on the same round.

== Triple mode ==

Each player has 3 scoring columns per scoring category. The second column scores double, and the third column scores triple.

In solo triple mode, use 2 decks.

Gamehelpindianchief

2024-12-10T09:34:49Z

Ufm: /* How to Play */

== How to Play ==

The game lasts just 7 rounds. Over the course of the game each player will make 7 different melds. Each meld requires a different number of cards and has different rules for scoring points.

1-3 player games use 1 deck, 4-8 player games use 2 decks, and 9-10 player games use 3 decks.

The 7 melds take their names from a traditional children's rhyme:

* 5 cards - Rich Man
* 3 cards - Poor Man
* 2 cards - Beggar Man
* 1 card - Thief
* 6 cards - Doctor
* 4 cards - Lawyer
* 7 cards - Indian Chief

During the 7 rounds, a player makes each meld once and once only, but they can be made in any order. After each round the hands refill to 8 cards. The game is over at the end of the seventh round, i.e., once everyone has made all 7 melds.

== The 7 Melds ==

Note: For all "face values" in the game, face cards count 10. Aces can be used either as either high (value 11) or low (value 1).

Here are the 7 different melds in order of number of cards required:

1. Thief. Meld any single card and score the face value for that card.

After everyone's scores for the hand have been recorded, the player who played the Thief takes a Joker from the wild pile before drawing cards.

Jokers are wilds which can substitute any card. Spent Jokers are returned to the wild pile.

2. Beggar Man. Meld 2 cards and hope for sympathy. This symbolizes two outstretched supplicating hands.

For each card someone else melds on the same round that matches the rank of either melded card, score 2 points.

Jokers can substitute any rank, but this meld cannot score from Jokers played by other players.

3. Poor Man. Melding 3 cards, here is your chance to profit by the sweat of your brow. The spade is the symbol of your toil. Meld any 3 cards, but score the face values only of the spades you play.

4. Lawyer. The Law is exact. Meld 4 cards, and if their face values add up to exactly 25, score 25 points. Otherwise score nothing.

5. Rich Man. Even a Rich Man has to pay taxes! Meld any 5 cards, add their face values together and score the total as a negative number.

6. Doctor. The 6 cards melded as the Doctor must meet very stringent requirements, or they will score nothing. All 3 of these conditions must be met:

(a) No two cards can be of the same rank. (Because a Doctor needs wide and varied knowledge.)

(b) At least one of the 6 cards must be a heart. (Because a Doctor needs to have a heart!)

(c) One of the 6 cards must be an ace. (Because a Doctor should be an ace!)

If these three conditions are met, then the player picks one suit and scores 10 points for each card in that suit among their 6 cards. (Because a Doctor needs to be good at their specialty.)

7. Indian Chief. The Indian Chief is a compound meld, being comprised of two discrete parts: 3-card tribal council and 4-card tribe members.

(a) To score the tribal council, score 7 points each for a Jack, a Queen, and a King. Only one of each rank scores.

(b) To score the remaining 4 cards:

* 32 points for 4 of a kind
* 28 points for 4-card straight
* 24 points for 3 of a kind
* 20 points for 2 pairs
* 12 points for 1 pair'

Remember: The 7 melds can be played in any order. After the 7 rounds are played and scored, the winner is the player with the most points.

== Refilling to 8 cards ==

The players leave their melds face-up until the cards for the new round have been dealt from the remainder of the deck. Then the remainder of the deck is shuffled together with the face-up cards to form the supply for the next hand.

== Solo rules ==

In solo mode, cards melded do not return to the deck.

Beggar Man scores from each card melded in all previous rounds instead of each card other players meld on the same round.

== Triple mode ==

Each player has 3 scoring columns per scoring category. The second column scores double, and the third column scores triple.

In solo triple mode, use 2 decks.

Gamehelpindianchief

2024-12-10T02:35:01Z

Ufm:

== How to Play ==

The game lasts just 7 rounds. Over the course of the game each player will make 7 different melds. Each meld requires a different number of cards and has different rules for scoring points.

The 7 melds take their names from a Mother Goose rhyme:

* 5 cards - Rich Man
* 3 cards - Poor Man
* 2 cards - Beggar Man
* 1 card - Thief
* 6 cards - Doctor
* 4 cards - Lawyer
* 7 cards - Indian Chief

During the 7 rounds, a player makes each meld once and once only, but they can be made in any order. After each round the hands refill to 8 cards. The game is over at the end of the seventh round, i.e., once everyone has made all 7 melds.

== The 7 Melds ==

Note: For all "face values" in the game, face cards count 10. Aces can be used either as either high (value 11) or low (value 1).

Here are the 7 different melds in order of number of cards required:

1. Thief. Meld any single card and score the face value for that card.

After everyone's scores for the hand have been recorded, the player who played the Thief takes a Joker from the wild pile before drawing cards.

Jokers are wilds which can substitute any card. Spent Jokers are returned to the wild pile.

2. Beggar Man. Meld 2 cards and hope for sympathy. This symbolizes two outstretched supplicating hands.

For each card someone else melds on the same round that matches the rank of either melded card, score 2 points.

Jokers can substitute any rank, but this meld cannot score from Jokers played by other players.

3. Poor Man. Melding 3 cards, here is your chance to profit by the sweat of your brow. The spade is the symbol of your toil. Meld any 3 cards, but score the face values only of the spades you play.

4. Lawyer. The Law is exact. Meld 4 cards, and if their face values add up to exactly 25, score 25 points. Otherwise score nothing.

5. Rich Man. Even a Rich Man has to pay taxes! Meld any 5 cards, add their face values together and score the total as a negative number.

6. Doctor. The 6 cards melded as the Doctor must meet very stringent requirements, or they will score nothing. All 3 of these conditions must be met:

(a) No two cards can be of the same rank. (Because a Doctor needs wide and varied knowledge.)

(b) At least one of the 6 cards must be a heart. (Because a Doctor needs to have a heart!)

(c) One of the 6 cards must be an ace. (Because a Doctor should be an ace!)

If these three conditions are met, then the player picks one suit and scores 10 points for each card in that suit among their 6 cards. (Because a Doctor needs to be good at their specialty.)

7. Indian Chief. The Indian Chief is a compound meld, being comprised of two discrete parts: 3-card tribal council and 4-card tribe members.

(a) To score the tribal council, score 7 points each for a Jack, a Queen, and a King. Only one of each rank scores.

(b) To score the remaining 4 cards:

* 32 points for 4 of a kind
* 28 points for 4-card straight
* 24 points for 3 of a kind
* 20 points for 2 pairs
* 12 points for 1 pair'

Remember: The 7 melds can be played in any order. After the 7 rounds are played and scored, the winner is the player with the most points.

== Refilling to 8 cards ==

The players leave their melds face-up until the cards for the new round have been dealt from the remainder of the deck. Then the remainder of the deck is shuffled together with the face-up cards to form the supply for the next hand.

== Solo rules ==

In solo mode, cards melded do not return to the deck.

Beggar Man scores from each card melded in all previous rounds instead of each card other players meld on the same round.

== Triple mode ==

Each player has 3 scoring columns per scoring category. The second column scores double, and the third column scores triple.

In solo triple mode, use 2 decks.

Gamehelpindianchief

2024-12-09T22:04:09Z

Ufm:

== How to Play ==

The game lasts just 7 rounds. Over the course of the game each player will make 7 different melds. Each meld requires a different number of cards and has different rules for scoring points.

The 7 melds take their names from a Mother Goose rhyme:

* 5 cards - Rich Man
* 3 cards - Poor Man
* 2 cards - Beggar Man
* 1 card - Thief
* 6 cards - Doctor
* 4 cards - Lawyer
* 7 cards - Indian Chief

During the 7 rounds, a player makes each meld once and once only, but they can be made in any order. After each round the hands refill to 8 cards. The game is over at the end of the seventh round, i.e., once everyone has made all 7 melds.

== The 7 Melds ==

Note: For all "face values" in the game, face cards count 10. Aces can be used either as either high (value 11) or low (value 1).

Here are the 7 different melds in order of number of cards required:

1. Thief. Meld any single card and score the face value for that card.

After everyone's scores for the hand have been recorded, the player who played the Thief takes a Joker from the wild pile before drawing cards.

Jokers are wilds which can substitute any card. Spent Jokers are returned to the wild pile.

2. Beggar Man. Meld 2 cards and hope for sympathy. This symbolizes two outstretched supplicating hands.

For each card someone else melds on the same round that matches the rank of either melded card, score 2 points.

Jokers can substitute any rank, but this meld cannot score from Jokers played by other players.

3. Poor Man. Melding 3 cards, here is your chance to profit by the sweat of your brow. The spade is the symbol of your toil. Meld any 3 cards, but score the face values only of the spades you play.

4. Lawyer. The Law is exact. Meld 4 cards, and if their face values add up to exactly 25, score 25 points. Otherwise score nothing.

5. Rich Man. Even a Rich Man has to pay taxes! Meld any 5 cards, add their face values together and score the total as a negative number.

6. Doctor. The 6 cards melded as the Doctor must meet very stringent requirements, or they will score nothing. All 3 of these conditions must be met:

(a) No two cards can be of the same rank. (Because a Doctor needs wide and varied knowledge.)

(b) At least one of the 6 cards must be a heart. (Because a Doctor needs to have a heart!)

(c) One of the 6 cards must be an ace. (Because a Doctor should be an ace!)

If these three conditions are met, then the player picks one suit and scores 10 points for each card in that suit among their 6 cards. (Because a Doctor needs to be good at their specialty.)

7. Indian Chief. The Indian Chief is a compound meld, being comprised of two discrete parts: 3-card tribal council and 4-card tribe members.

(a) To score the tribal council, score 7 points each for a Jack, a Queen, and a King. Only one of each rank scores.

(b) To score the remaining 4 cards:

* 32 points for 4 of a kind
* 28 points for 4-card straight
* 24 points for 3 of a kind
* 20 points for 2 pairs
* 12 points for 1 pair'

Remember: The 7 melds can be played in any order. After the 7 rounds are played and scored, the winner is the player with the most points.

== Refilling to 8 cards ==

The players leave their melds face-up until the cards for the new round have been dealt from the remainder of the deck. Then the remainder of the deck is shuffled together with the face-up cards to form the supply for the next hand.

== Solo rules ==

In solo mode, cards melded do not return to the deck.

Beggar Man scores from each card melded in all previous rounds instead of each card other players meld on the same round.

Gamehelpgolf

2024-12-06T02:33:36Z

Ufm:

[[Category:Card games]]
== Objective ==
The objective is for players to have the '''lowest value''' of the cards in front of them by either '''swapping''' them for lesser value cards or by '''pairing''' them up with cards of equal rank.

== Setup ==
{|class="wikitable" style="max-width:50rem;text-align:left;" border="2"
!style="text-align:left;"|Option
!style="text-align:left;"|Values
!style="text-align:left;" colspan="2"|Description
|-
|rowspan="3"|Number of grid cards
|4
|colspan="2"|Arrange 4 dealt cards in a square and peek 2 cards. Use 1 deck. Closing ends a round. When players replace a card on their board with a newly drawn card, they are placed face down.
|-
|style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;"|6
|colspan="2"|Arrange 6 dealt cards in 2x3 grid and flip 2 cards. Use 1 deck in 2/3/4/5-player and 2 decks in 6/7/8-player. Completing a full face up grid ends a round.
|-
|9
|colspan="2"|Arrange 9 dealt cards in a square and flip 3 cards. Use 1 deck in 2/3-player, 2 decks in 4/5/6-player and 3 decks in 7/8-player. Completing a full face up grid ends a round.
|-
|rowspan="2"|Line scoring
|Column scoring
|A column
|rowspan="2"|of equal cards scores 0 points, ignoring normal card scores (even if the equal cards are bonus point cards).
|-
|style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;"|Line scoring
|A column, row or diagonal (in 4-card or 9-card grid)
|-
|rowspan="2"|Block scoring
|style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;"|On
|rowspan="2" colspan="2"|A 2x2 square of equal cards scores -20 points, ignoring normal card scores (even if the equal cards are bonus point cards).
|-
|Off
|-
|rowspan="2"|Card power
|On
|rowspan="2" colspan="2"|If a card with power is drawn from the deck, it can either be used as a normal card or be discarded to use its power.
* {{card|J}} ⇨ peek at one of your face down cards.
* {{card|Q}} ⇨ peek at one of your opponent's face down cards.
* {{card|K}} ⇨ swap any two cards.

|-
|style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;"|Off
|}<div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.2em 0.5rem;width:max-content;text-align:left;">Default selection</div>

Six cards are dealt face down to each player in two rows and three columns:

{{cardBack}} {{cardBack}} {{cardBack}}

{{cardBack}} {{cardBack}} {{cardBack}}

== Game play (6 card variant) ==

* Each player flips two of their cards face up.
* The player on the dealer's left starts.
* Players take turns drawing a single card from either the face down deck or the top card of the face up discard pile.
* If the card is '''swapped''' for one of the face down cards, the card swapped in remains '''face up'''.

* The round ends when a player (the "closer") has all their cards face up.
* Every other player has one more turn, after which all cards are turned face up.

== Scoring ==
{|class="wikitable" style="width:auto;text-align:center;" border="2"
|-
!Card
|{{card|A}}
|{{card|2}}
|{{card|3}} ~ {{card|10}}
|{{card|J}} , {{card|Q}}
|{{card|K}}
|-
!Points
|'''1'''
|'''-2'''
|3 ~ 10
|'''10'''
|'''0'''
|}

* Add up all the values of face up cards.
* Any column or row of the same rank cancels out to zero.

{{infoBox
|title=Example
|body=<center>
{{spade|K}} {{spade|6}} {{heart|K}}

{{diamond|4}} {{heart|6}} {{club|2}}

</center>
<hr>
* The column of {{spade|6}}{{heart|6}} cancel out to zero.
* Kings are worth zero.
* This scores '''+4''' ({{diamond|4}}) '''-2''' ({{club|2}}) = '''2 points'''.
}}

* The player with the fewest points wins the round.
* The player with the fewest cumulative points from all rounds wins the game.

Help

2024-11-25T15:06:09Z

Ufm: Nain Jaune is out of beta. Sandbox games are now back in alpha.

== An issue? A question? ==

* [https://boardgamearena.com/#!faq Frequently asked questions] is the most complete source of help for BGA.
* [https://forum.boardgamearena.com Forums] are also helpful to get information.

== Games ==

<span title="(page does not exist)" style="color:#dd3333;">Red game names</span> need game help/summaries written for them.
Help out and write one by selecting a <span style="color:#dd3333;">(page does not exist) link</span> below which will allow you to create the page.
[https://en.doc.boardgamearena.com/Wiki_formatting Wiki formatting] is a collection of unofficial tips on how to make wiki pages display well on [https://BoardGameArena.com BoardGameArena.com].



{{infoBox|minWidth=100%|titleColor=#040|color=#efed
|title=Released on BGA
|body=<div style="columns:12rem auto;">
* [[Gamehelponeohone|101: the match]]
* [[Gamehelptwelvechips|12 Chip Trick]]
* [[Gamehelpthirteenclues|13 Clues]]
* [[Gamehelpfifteendays|15 Days]]
* [[Gamehelptwentyfourseven|24/7: The Game]]
* [[Gamehelpthreethousandscoundrels|3000 Scoundrels]]
* [[Gamehelpsechsnimmt|6 nimmt!]]
* [[Gamehelpsixtyone|61 Autumn leaves]]
* [[Gamehelpsevenwonders|7 Wonders]]
* [[Gamehelpsevenwondersarchitects|7 Wonders Architects]]
* [[Gamehelpsevenwondersduel|7 Wonders Duel]]
* [[Gamehelpeightmastersrevenge|8 Masters' Revenge]]
* [[Gamehelpninetynineaddition|99 (addition card game)]]
* [[Gamehelpninetynine|99 (trick-taking card game)]]
* [[Gamehelpfeastforodin|A Feast for Odin]]
* [[Gamehelpfistfulofgold|A Fistful of Gold]]
* [[Gamehelpabalone|Abalone]]
* [[Gamehelpabandonallartichokes|Abandon All Artichokes]]
* [[Gamehelpabyss|Abyss]]
* [[Gamehelpafterus|After Us]]
* [[Gamehelpageofchampagne|Age of Champagne]]
* [[Gamehelpageofcivilization|Age of Civilization]]
* [[Gamehelpagricola|Agricola]]
* [[Gamehelpakropolis|Akropolis]]
* [[Gamehelpalhambra|Alhambra]]
* [[Gamehelpalmadi|Almadi]]
* [[Gamehelpaltered|Altered]]
* [[Gamehelpalveole|Alveole]]
* [[Gamehelpamalfi|Amalfi - Renaissance]]
* [[Gamehelpamazonas|Amazonas]]
* [[Gamehelpamyitis|Amyitis]]
* [[Gamehelpanachrony|Anachrony]]
* [[Gamehelpancientknowledge|Ancient Knowledge]]
* [[Gamehelpapplejack|Applejack]]
* [[Gamehelparchitectsofthewestkingdom|Architects of the West Kingdom]]
* [[Gamehelparctic|Arctic]]
* [[Gamehelparcticscavengers|Arctic Scavengers]]
* [[Gamehelparknova|Ark Nova]]
* [[Gamehelparmadora|Armadöra]]
* [[Gamehelpartdecko|Art Decko]]
* [[Gamehelpartthief|Art Thief]]
* [[Gamehelpassyria|Assyria]]
* [[Gamehelpastra|Astra]]
* [[Gamehelpautomobiles|Automobiles]]
* [[Gamehelpazul|Azul]]
* [[Gamehelpazulsummerpavilion|Azul: Summer Pavilion]]
* [[Gamehelpbabydinosaurrescue|Baby Dinosaur Rescue]]
* [[Gamehelpbackgammon|Backgammon]]
* [[Gamehelpbacon|Bacon]]
* [[Gamehelpbagofchips|Bag of Chips]]
* [[Gamehelpbahamataxi|Bahama Taxi]]
* [[Gamehelpballoonpop|Balloon Pop!]]
* [[Gamehelpbandada|Bandada]]
* [[Gamehelpbandido|Bandido]]
* [[Gamehelpbang|BANG!]]
* [[Gamehelpbaolakiswahili|Bao la Kiswahili]]
* [[Gamehelpbarbu|Barbu]]
* [[Gamehelpbarenpark|Bärenpark]]
* [[Gamehelpbarrage|Barrage]]
* [[Gamehelpbattleoflits|Battle of LITS]]
* [[Gamehelpbattlesheep|Battle Sheep]]
* [[Gamehelpbattlespiritssaga|Battle Spirits Saga]]
* [[Gamehelpbattleship|Battleships Pencil & Paper]]
* [[Gamehelpbelote|Belote]]
* [[Gamehelpbetta|Betta]]
* [[Gamehelpbeyondthesun|Beyond the Sun]]
* [[Gamehelpbids|Bids]]
* [[Gamehelpbigmonster|Big Monster]]
* [[Gamehelpbigtimesoccer|Big Time Soccer]]
* [[Gamehelpbigtwo|Big Two]]
* [[Gamehelpbiomos|Biomos]]
* [[Gamehelpbiyi|Biyi]]
* [[Gamehelpblaze|Blaze]]
* [[Gamehelpbloodrage|Blood Rage]]
* [[Gamehelpblooms|Blooms]]
* [[Gamehelpblueskies|Blue Skies]]
* [[Gamehelpbobail|Bobail]]
* [[Gamehelpbombay|Bombay]]
* [[Gamehelpbonsai|Bonsai]]
* [[Gamehelpboomerangaustralia|Boomerang: Australia]]
* [[Gamehelpboomerangeurope|Boomerang: Europe]]
* [[Gamehelpboomerangusa|Boomerang: USA]]
* [[Gamehelpboop|boop.]]
* [[Gamehelpboreal|Boreal]]
* [[Gamehelpbossquest|Boss Quest]]
* [[Gamehelpbotanicus|Botanicus]]
* [[Gamehelpbreakthecode|Break the Code]]
* [[Gamehelpbriscola|Briscola]]
* [[Gamehelpbubbleepop|Bubblee Pop]]
* [[Gamehelpbug|Bug]]
* [[Gamehelpbunnykingdom|Bunny Kingdom]]
* [[Gamehelpburglebros|Burgle Bros.]]
* [[Gamehelpbutterfly|Butterfly]]
* [[Gamehelpbuttons|Buttons]]
* [[Gamehelpbuyword|BuyWord]]
* [[Gamehelpcacao|Cacao]]
* [[Gamehelpcairn|Caïrn]]
* [[Gamehelpcantstop|Can't Stop]]
* [[Gamehelpcantstopexpress|Can't Stop Express]]
* [[Gamehelpcanosa|Canosa]]
* [[Gamehelpcanvas|Canvas]]
* [[Gamehelpcapereurope|Caper: Europe]]
* [[Gamehelpcaptainflip|Captain Flip]]
* [[Gamehelpcapybarancapybara|Capybara'n'Capybara]]
* [[Gamehelpcaravan|Caravan]]
* [[Gamehelpcarcassonne|Carcassonne]]
* [[Gamehelpcarcassonnehuntersandgatherers|Carcassonne: Hunters & Gatherers]]
* [[Gamehelpcardiceo|Cardiceo]]
* [[Gamehelpcaribbeanallfours|Caribbean All Fours]]
* [[Gamehelpcarnegie|Carnegie]]
* [[Gamehelpcartographers|Cartographers]]
* [[Gamehelpcastlecombo|Castle Combo]]
* [[Gamehelpcastlesofcaleira|Castles of Caleira]]
* [[Gamehelpcatcafe|Cat Café]]
* [[Gamehelpcatinthebox|Cat in the Box: Deluxe Edition]]
* [[Gamehelpcatan|CATAN]]
* [[Gamehelpcaverna|Caverna]]
* [[Gamehelpcaylus|Caylus]]
* [[Gamehelpcelestia|Celestia]]
* [[Gamehelpcentury|Century: Spice Road]]
* [[Gamehelpcephalopod|Cephalopod]]
* [[Gamehelpchakra|Chakra]]
* [[Gamehelpchallengers|Challengers!]]
* [[Gamehelpcheckers|Checkers]]
* [[Gamehelpchess|Chess]]
* [[Gamehelpchicagoexpress|Chicago Express]]
* [[Gamehelpchinagold|China Gold]]
* [[Gamehelpchinesecheckers|Chinese checkers]]
* [[Gamehelpchocolatefactory|Chocolate Factory]]
* [[Gamehelpchromino|Chromino]]
* [[Gamehelpcinco|Cinco]]
* [[Gamehelpcircleoflife|Circle of Life]]
* [[Gamehelpcityofthebigshoulders|City of the Big Shoulders]]
* [[Gamehelpclansofcaledonia|Clans of Caledonia]]
* [[Gamehelpclashofdecks|Clash of Decks]]
* [[Gamehelpcloudcity|Cloud City]]
* [[Gamehelpcoalbaron|Coal Baron]]
* [[Gamehelpcodexnaturalis|Codex Naturalis]]
* [[Gamehelpcoinche|Coinche]]
* [[Gamehelpcoins|Coins]]
* [[Gamehelpcolorado|Colorado]]
* [[Gamehelpcoloretto|Coloretto]]
* [[Gamehelpcolorflush|Color Flush]]
* [[Gamehelpcolorpop|Color Pop]]
* [[Gamehelpcoltexpress|Colt Express]]
* [[Gamehelpcommanderchess|Commander Chess]]
* [[Gamehelpconsonar|Con Sonar!]]
* [[Gamehelpconcept|Concept]]
* [[Gamehelpconnectfour|Connect Four]]
* [[Gamehelpconnectsix|Connect6]]
* [[Gamehelpconspiracy|Conspiracy]]
* [[Gamehelpcopenhagen|Copenhagen]]
* [[Gamehelpcosmoctopus|Cosmoctopus]]
* [[Gamehelpcosmosempires|Cosmos: Empires]]
* [[Gamehelpcoupcitystate|Coup]]
* [[Gamehelpcrazyfarmers|Crazy Farmers]]
* [[Gamehelpcribbage|Cribbage]]
* [[Gamehelpcrimezoom|Crime Zoom: A Dirty Objective]]
* [[Gamehelpcrisps|Crisps]]
* [[Gamehelpcrusadersthywillbedone|Crusaders: Thy Will Be Done]]
* [[Gamehelpcrypt|Crypt]]
* [[Gamehelpcubirds|CuBirds]]
* [[Gamehelpcubosaurs|Cubosaurs]]
* [[Gamehelpcucco|Cucco]]
* [[Gamehelpdivideetimpera|D.E.I.: Divide et Impera]]
* [[Gamehelpdarkagent|Dark Agent]]
* [[Gamehelpdarwinsjourney|Darwin's Journey]]
* [[Gamehelpdaybreak|Daybreak]]
* [[Gamehelpdecrypto|Decrypto]]
* [[Gamehelpdetectivepoker|Detective Poker]]
* [[Gamehelpdeus|Deus]]
* [[Gamehelpdiablo|Diablo]]
* [[Gamehelpdiams|Diam's]]
* [[Gamehelpdiceforge|Dice Forge]]
* [[Gamehelpdicehospital|Dice Hospital]]
* [[Gamehelpdicehospitaler|Dice Hospital: ER – Emergency Roll]]
* [[Gamehelpdicesummoners|Dice Summoners]]
* [[Gamehelpdicethemepark|Dice Theme Park]]
* [[Gamehelpdiceathlon|Diceathlon]]
* [[Gamehelpdicedtomatoes|Diced Tomatoes]]
* [[Gamehelpdicycards|Dicy Cards]]
* [[Gamehelpdigupadventure|DIG UP Adventure]]
* [[Gamehelpdingosdreams|Dingo's Dreams]]
* [[Gamehelpdinnerinparis|Dinner In Paris]]
* [[Gamehelpdinosaurteaparty|Dinosaur Tea Party]]
* [[Gamehelpdistilled|Distilled]]
* [[Gamehelpthroneandthegrail|District Noir]]
* [[Gamehelpdjambi|Djambi]]
* [[Gamehelpdobbleconnect|Dobble Connect]]
* [[Gamehelpdobro|Dobro]]
* [[Gamehelpdodo|Dodo]]
* [[Gamehelpdoglover|Dog Lover]]
* [[Gamehelpdogpark|Dog Park]]
* [[Gamehelpdominoes|Dominoes]]
* [[Gamehelpdontgointhere|Don't Go In There]]
* [[Gamehelpdonuts|Donuts]]
* [[Gamehelpfightthelandlord|Dou Dizhu]]
* [[Gamehelpdownforce|Downforce]]
* [[Gamehelpdraculahelsing|Dracula vs Van Helsing]]
* [[Gamehelpdraftandwriterecords|Draft & Write Records]]
* [[Gamehelpdraftcider|Draft Cider]]
* [[Gamehelpdraftosaurus|Draftosaurus]]
* [[Gamehelpdragonbridge|Dragon Bridge]]
* [[Gamehelpdragoncastle|Dragon Castle]]
* [[Gamehelpdragonkeeper|Dragon Keeper: The Dungeon]]
* [[Gamehelpdragonline|Dragon Line]]
* [[Gamehelpdragonheart|Dragonheart]]
* [[Gamehelpdragonwood|Dragonwood]]
* [[Gamehelpduckcover|Duck & Cover]]
* [[Gamehelpdungeonpetz|Dungeon Petz]]
* [[Gamehelpdungeonroll|Dungeon Roll]]
* [[Gamehelpdungeontwister|Dungeon Twister]]
* [[Gamehelpdvonn|DVONN]]
* [[Gamehelpearth|Earth]]
* [[Gamehelpegocentricworld|Egocentric World]]
* [[Gamehelpekonos|EKONOS]]
* [[Gamehelpelawa|Elawa]]
* [[Gamehelpelfenland|Elfenland]]
* [[Gamehelpelgrande|El Grande]]
* [[Gamehelpeminentdomain|Eminent Domain]]
* [[Gamehelpemdomicrocosm|Eminent Domain: Microcosm]]
* [[Gamehelpempireplateau|Empire Plateau]]
* [[Gamehelpenvelopesofcash|Envelopes of Cash]]
* [[Gamehelpepizodiak|EpiZodiak]]
* [[Gamehelperiantys|Eriantys]]
* [[Gamehelpakeruption|Eruption]]
* [[Gamehelpeternitium|Eternitium]]
* [[Gamehelpevergreen|Evergreen]]
* [[Gamehelpevl|EVL]]
* [[Gamehelpevogamenoname|Evo: The “Game no Name”]]
* [[Gamehelpevolution|Evolution]]
* [[Gamehelpexitstrategy|Exit Strategy]]
* [[Gamehelpnorthwestpassage|Expedition: Northwest Passage]]
* [[Gamehelpexpeditions|Expeditions: Around the World]]
* [[Gamehelpexplorationwarzone|Exploration: Warzone]]
* [[Gamehelpfactum|Factum]]
* [[Gamehelpfaifo|Fai-fo]]
* [[Gamehelpfairytrails|Fairy Trails]]
* [[Gamehelpfaraway|Faraway]]
* [[Gamehelpfarmclub|Farm Club]]
* [[Gamehelpfederation|Federation]]
* [[Gamehelpfestivibes|Festi’vibes]]
* [[Gamehelpfestival|Festival]]
* [[Gamehelpfika|Fika]]
* [[Gamehelpfinity|Finity]]
* [[Gamehelpflamingpyramids|Flaming Pyramids]]
* [[Gamehelpfleet|Fleet]]
* [[Gamehelpflipfreighters|Flip Freighters]]
* [[Gamehelpflorenzacardgame|Florenza: The Card Game]]
* [[Gamehelpflowers|Flowers]]
* [[Gamehelpflowersmandalagame|Flowers: A Mandala Game]]
* [[Gamehelpflume|Flume]]
* [[Gamehelpfluxx|Fluxx]]
* [[Gamehelpforsale|For Sale]]
* [[Gamehelpforex|For-Ex]]
* [[Gamehelpforbiddenisland|Forbidden Island]]
* [[Gamehelpforestshuffle|Forest Shuffle]]
* [[Gamehelpforeverhome|Forever Home]]
* [[Gamehelpfourcolorcards|Four Color Cards]]
* [[Gamehelpfractal|Fractal]]
* [[Gamehelpframework|Framework]]
* [[Gamehelpfrenchtarot|French Tarot]]
* [[Gamehelpfruitpicking|Fruit Picking]]
* [[Gamehelpgaia|Gaïa]]
* [[Gamehelpgaiaproject|Gaia Project]]
* [[Gamehelpgangofdice|Gang of Dice]]
* [[Gamehelpgangsta|Gangsta!]]
* [[Gamehelpgardennation|Garden Nation]]
* [[Gamehelpgearnpiston|Gear & Piston]]
* [[Gamehelpgetonboard|Get on Board: New York & London]]
* [[Gamehelpgetonboardparisrome|Get on Board: Paris & Roma]]
* [[Gamehelpgetthemacguffin|Get the MacGuffin]]
* [[Gamehelpghostathome|Ghost At Home]]
* [[Gamehelpgiftoftulips|Gift of Tulips]]
* [[Gamehelpginrummy|Gin Rummy]]
* [[Gamehelpginkgopolis|Ginkgopolis]]
* [[Gamehelpgirafferaffe|Giraffe Raffe]]
* [[Gamehelpgizmos|Gizmos]]
* [[Gamehelpglassroad|Glass Road]]
* [[Gamehelpglow|Glow]]
* [[Gamehelpgnomehollow|Gnome Hollow]]
* [[Gamehelpclassicgo|Go]]
* [[Gamehelpgogoa|Go Goa]]
* [[Gamehelpgonutsfordonuts|Go Nuts for Donuts]]
* [[Gamehelpgoblinhood|Goblin Hood]]
* [[Gamehelpgoldwest|Gold West]]
* [[Gamehelpgoldblivion|GOLDblivion]]
* [[Gamehelpgolf|Golf]]
* [[Gamehelpgomoku|Gomoku]]
* [[Gamehelpgoodcopbadcop|Good Cop Bad Cop]]
* [[Gamehelpgopher|Gopher]]
* [[Gamehelpgorami|GORami]]
* [[Gamehelpgosux|Gosu X]]
* [[Gamehelpgrandbazaar|Grand Bazaar]]
* [[Gamehelpgreatwesterntrail|Great Western Trail]]
* [[Gamehelpgrosstarock|Grosstarock]]
* [[Gamehelpgrumblestone|GrumbleStone]]
* [[Gamehelpgrund|Grund]]
* [[Gamehelpguildes|Guildes]]
* [[Gamehelpguile|Guile]]
* [[Gamehelpgyges|Gygès]]
* [[Gamehelphacktrick|Hack Trick]] (*)
* [[Gamehelphadara|Hadara]]
* [[Gamehelphadrianswall|Hadrian's Wall]]
* [[Gamehelphadron|Hadron]]
* [[Gamehelphaggis|Haggis]]
* [[Gamehelphaiclue|Haiclue]]
* [[Gamehelphanabi|Hanabi]]
* [[Gamehelphanamikoji|Hanamikoji]]
* [[Gamehelphandandfoot|Hand and Foot]]
* [[Gamehelphappycity|Happy City]]
* [[Gamehelphardback|Hardback]]
* [[Gamehelpharmonies|Harmonies]]
* [[Gamehelphawaii|Hawaii]]
* [[Gamehelphearts|Hearts]]
* [[Gamehelpheat|Heat: Pedal to the Metal]]
* [[Gamehelpheckinhounds|Heckin Hounds]]
* [[Gamehelphens|Hens]]
* [[Gamehelpherd|Herd]]
* [[Gamehelpherooj|Herooj]]
* [[Gamehelpherrlof|Herrlof]]
* [[Gamehelphex|Hex]]
* [[Gamehelphiddenleaders|Hidden Leaders]]
* [[Gamehelphighseason|High Season]]
* [[Gamehelphive|Hive]]
* [[Gamehelphoarders|Hoarders]]
* [[Gamehelphokito|Hokito]]
* [[Gamehelphomesteaders|Homesteaders]]
* [[Gamehelphomeworlds|Homeworlds]]
* [[Gamehelpescapefromthehiddencastle|Hugo]]
* [[Gamehelphumanity|Humanity]]
* [[Gamehelphungariantarokk|Hungarian Tarokk]]
* [[Gamehelphydroracers|Hydroracers]]
* [[Gamehelphypnosia|Hypnosia]]
* [[Gamehelpiceandthesky|Ice and the Sky]]
* [[Gamehelpicecoldicehockey|Ice Cold Ice Hockey]]
* [[Gamehelpicebreaker|Icebreaker]]
* [[Gamehelpillustori|Illustori]]
* [[Gamehelpimhotep|Imhotep]]
* [[Gamehelpimpasse|Impasse]]
* [[Gamehelpintheyearofthedragon|In The Year of the Dragon]]
* [[Gamehelpincangold|Incan Gold]]
* [[Gamehelpinnovation|Innovation]]
* [[Gamehelpinori|Inori]]
* [[Gamehelpisaac|Isaac]]
* [[Gamehelpisleoftrainsallaboard|Isle of Trains: All Aboard]]
* [[Gamehelpitsawonderfulworld|It's a Wonderful World]]
* [[Gamehelpiwari|Iwari]]
* [[Gamehelpjaipur|Jaipur]]
* [[Gamehelpjekyllvshide|Jekyll vs. Hyde]]
* [[Gamehelpjumpdrive|Jump Drive]]
* [[Gamehelpjumpgate|Jump Gate]]
* [[Gamehelpjustdesserts|Just Desserts]]
* [[Gamehelpjustone|Just One]]
* [[Gamehelpk2|K2]]
* [[Gamehelpkabaleo|Kabaleo]]
* [[Gamehelpkahuna|Kahuna]]
* [[Gamehelpkalah|Kalah]]
* [[Gamehelpkami|Kami]]
* [[Gamehelpkeyflower|Keyflower]]
* [[Gamehelpkhronos|Khronos]]
* [[Gamehelpkingofthepitch|King of the Pitch]]
* [[Gamehelpkingoftokyo|King of Tokyo]]
* [[Gamehelpkingdombuilder|Kingdom Builder]]
* [[Gamehelpkingdomino|Kingdomino]]
* [[Gamehelpkingdoms|Kingdoms]]
* [[Gamehelpklaverjassen|Klaverjassen]]
* [[Gamehelpkmakici|Kmakici Family's greatest teatime]]
* [[Gamehelpknarr|Knarr]]
* [[Gamehelpkoikoi|Koi-Koi]]
* [[Gamehelpkonane|Konane]]
* [[Gamehelpkoryo|Koryŏ]]
* [[Gamehelpkqj|KQJ]]
* [[Gamehelpkrakenup|Kraken Up]]
* [[Gamehelpkrosmasterarena|Krosmaster Arena]]
* [[Gamehelpkrosmasterblast|Krosmaster Blast]]
* [[Gamehelpkulami|Kulami]]
* [[Gamehelplagranja|La Granja]]
* [[Gamehelplamarcheducrabe|La Marche du Crabe]]
* [[Gamehelplasvegan|Las Vegan]]
* [[Gamehelpledernierpeuple|Le Dernier Peuple]]
* [[Gamehelpleroydesribauds|Le Roy des Ribauds]]
* [[Gamehelplegendraiders|Legend Raiders]]
* [[Gamehelpinventors|Legendary Inventors]]
* [[Gamehelpheroesofhellas|Legends of Hellas]]
* [[Gamehelpletscatchthelion|Let's Catch the Lion!]]
* [[Gamehelplettertycoon|Letter Tycoon]]
* [[Gamehelplewisclark|Lewis & Clark]]
* [[Gamehelplibertalia|Libertalia]]
* [[Gamehelplielow|Lielow]]
* [[Gamehelplifeline|Lifeline]]
* [[Gamehelplineit|Line It]]
* [[Gamehelplinesofaction|Lines of Action]]
* [[Gamehelplinkage|Linkage]]
* [[Gamehelplinx|Linx]]
* [[Gamehelplittlefactory|Little Factory]]
* [[Gamehelpliverpoolrummy|Liverpool (Cozy Oaks) Rummy]]
* [[Gamehelplivingforest|Living Forest]]
* [[Gamehelplama|LLAMA]]
* [[Gamehelplocomomo|Loco Momo]]
* [[Gamehelplogger|Logger]]
* [[Gamehelplookatthestars|Look at the Stars]]
* [[Gamehelplooot|Looot]]
* [[Gamehelplox|Lords of Xidit]]
* [[Gamehelplostcities|Lost Cities]]
* [[Gamehelplostexplorers|Lost Explorers]]
* [[Gamehelparnak|Lost Ruins of Arnak]]
* [[Gamehelplostseas|Lost Seas]]
* [[Gamehelploveletter|Love Letter]]
* [[Gamehelpluckynumbers|Lucky Numbers]]
* [[Gamehelplumen|Lumen: The Lost World]]
* [[Gamehelplure|Lure]]
* [[Gamehelpluxor|Luxor]]
* [[Gamehelpmaatatahay|Maatatahay]]
* [[Gamehelpmachiavelli|Machiavelli]]
* [[Gamehelpmadeira|Madeira]]
* [[Gamehelpmammalath|Mammalath]]
* [[Gamehelpmandala|Mandala]]
* [[Gamehelpmapmaker|Mapmaker: The Gerrymandering Game]]
* [[Gamehelpmapsofmisterra|Maps of Misterra]]
* [[Gamehelpmaracaibo|Maracaibo]]
* [[Gamehelpmarcopolotwo|Marco Polo II: In the Service of the Khan]]
* [[Gamehelpmarrakech|Marrakech]]
* [[Gamehelpmarram|Marram]]
* [[Gamehelpmartiandice|Martian Dice]]
* [[Gamehelpmascarade|Mascarade]]
* [[Gamehelpmattock|Mattock]]
* [[Gamehelpmechadream|Mech A Dream]]
* [[Gamehelpmedina|Medina]]
* [[Gamehelpmeadow|Medo]]
* [[Gamehelpmegajackpot|Mega Jackpot]]
* [[Gamehelpmegalomania|Megalomania]]
* [[Gamehelpmemoir|Memoir '44]]
* [[Gamehelpmercadodelisboaste|Mercado de Lisboa]]
* [[Gamehelpmeridians|Meridians]]
* [[Gamehelpmetro|Metro]]
* [[Gamehelpmetromania|Metromania]]
* [[Gamehelpmicrodojo|Micro Dojo]]
* [[Gamehelpmiddleages|Middle Ages]]
* [[Gamehelpmijnlieff|Mijnlieff]]
* [[Gamehelpmindup|Mind Up!]]
* [[Gamehelpminhwatu|Minhwatu]]
* [[Gamehelpminirogue|Mini Rogue]]
* [[Gamehelpmlem|MLEM: Space Agency]]
* [[Gamehelpmodten|Mod Ten]]
* [[Gamehelpmojo|Mojo]]
* [[Gamehelpmonsterfactory|Monster Factory]]
* [[Gamehelpmoonriver|Moon River]]
* [[Gamehelpmountaingoats|Mountain Goats]]
* [[Gamehelpmow|MOW]]
* [[Gamehelpmrjack|Mr. Jack]]
* [[Gamehelpmurusgallicus|Murus Gallicus]]
* [[Gamehelpmutantcrops|Mutant Crops]]
* [[Gamehelpmycity|My City]]
* [[Gamehelpmycityrb|My City: Roll & Build]]
* [[Gamehelpmyfirstcastlepanic|My First Castle Panic]]
* [[Gamehelpmyshelfie|My Shelfie]]
* [[Gamehelpmythicbattlesragnarok|Mythic Battles: Ragnarök]]
* [[Gamehelpnachopile|Nacho Pile]]
* [[Gamehelpnainjaune|Nain Jaune]]
* [[Gamehelpnaishi|Naishi]]
* [[Gamehelpnanatoridori|Nanatoridori]]
* [[Gamehelpnangaparbat|Nanga Parbat]]
* [[Gamehelpnarabi|Narabi]]
* [[Gamehelpnautilus|Nautilus]]
* [[Gamehelpneom|Neom]]
* [[Gamehelpneutreeko|Neutreeko]]
* [[Gamehelpnewfrontiers|New Frontiers]]
* [[Gamehelpnewyorkzoo|New York Zoo]]
* [[Gamehelpnewton|Newton]]
* [[Gamehelpnextstation|Next Station: London]]
* [[Gamehelpnextstationparis|Next Station: Paris]]
* [[Gamehelpnextstationtokyo|Next Station: Tokyo]]
* [[Gamehelpniagara|Niagara]]
* [[Gamehelpnicodemus|Nicodemus]]
* [[Gamehelpnidavellir|Nidavellir]]
* [[Gamehelpaknile|Nile]]
* [[Gamehelpnimalia|Nimalia]]
* [[Gamehelpninemensmorris|Nine Men's Morris]]
* [[Gamehelpnippon|Nippon]]
* [[Gamehelpnothanks|No Thanks!]]
* [[Gamehelpnoah|Noah]]
* [[Gamehelpnoirkvi|Noir: Killer versus Inspector]]
* [[Gamehelpnoneshallpass|None Shall Pass!]]
* [[Gamehelpnotalone|Not Alone]]
* [[Gamehelpnovaluna|Nova Luna]]
* [[Gamehelpnowboarding|Now Boarding]]
* [[Gamehelpnumberdrop|Number Drop]]
* [[Gamehelpnxs|NXS]]
* [[Gamehelpoasis|OASIS New Hope]]
* [[Gamehelpobsession|Obsession]]
* [[Gamehelpodin|Odin]]
* [[Gamehelpofftherails|Off the Rails]]
* [[Gamehelpohhell|Oh Hell!]]
* [[Gamehelpohseven|Oh-Seven]]
* [[Gamehelpokanagan|Okanagan: Valley of the Lakes]]
* [[Gamehelpontour|On Tour]]
* [[Gamehelponceuponaforest|Once Upon A Forest]]
* [[Gamehelpone|ONE]]
* [[Gamehelponitama|Onitama]]
* [[Gamehelpopenseason|Open Season]]
* [[Gamehelporiflamme|Oriflamme]]
* [[Gamehelporigin|Origin]]
* [[Gamehelporionduel|Orion Duel]]
* [[Gamehelpoust|Oust]]
* [[Gamehelpoutlaws|Outlaws: Last Man Standing]]
* [[Gamehelpoxono|Oxono]]
* [[Gamehelppi|P.I.]]
* [[Gamehelppainttheroses|Paint the Roses]]
* [[Gamehelppalace|Palace]]
* [[Gamehelppandemic|Pandemic]]
* [[Gamehelppaniclab|Panic Lab]]
* [[Gamehelppapayoo|Papayoo]]
* [[Gamehelpparisconnection|Paris Connection]]
* [[Gamehelppatchwork|Patchwork]]
* [[Gamehelppathofcivilization|Path of Civilization]]
* [[Gamehelppaxpamir|Pax Pamir: Second Edition]]
* [[Gamehelppaxrenaissance|Pax Renaissance]]
* [[Gamehelppedro|Pedro]]
* [[Gamehelppenaltychallenge|Penalty Challenge]]
* [[Gamehelppennypress|Penny Press]]
* [[Gamehelppente|Pente]]
* [[Gamehelpperfectwords|Perfect Words]]
* [[Gamehelpdudo|Perudo]]
* [[Gamehelpphat|Phat]]
* [[Gamehelpphotosynthesis|Photosynthesis]]
* [[Gamehelppiepmatz|Piepmatz]]
* [[Gamehelppiereighteen|Pier 18]]
* [[Gamehelppingimus|Pingimus]]
* [[Gamehelppiratenkapern|Piraten kapern]]
* [[Gamehelppixies|Pixies]]
* [[Gamehelpplanetunknown|Planet Unknown]]
* [[Gamehelppocketcats|Pocket Cats]]
* [[Gamehelppolis|Polis: Fight for Hegemony]]
* [[Gamehelppond|Pond]]
* [[Gamehelppontedeldiavolo|Ponte del Diavolo]]
* [[Gamehelppook|Pook]]
* [[Gamehelppotionexplosion|Potion Explosion]]
* [[Gamehelppraga|Praga Caput Regni]]
* [[Gamehelppresident|President]]
* [[Gamehelppuertorico|Puerto Rico]]
* [[Gamehelppugsinmugs|Pugs in Mugs]]
* [[Gamehelppylos|Pylos]]
* [[Gamehelppyramidpoker|Pyramid Poker]]
* [[Gamehelppyrga|Pyrga]]
* [[Gamehelpqawale|Qawale]]
* [[Gamehelpquantik|Quantik]]
* [[Gamehelpquantum|Quantum]]
* [[Gamehelpquarto|Quarto]]
* [[Gamehelpqueenskings|Queens & Kings... A Checkers Game]]
* [[Gamehelpquetzal|Quetzal]]
* [[Gamehelpquibbles|Quibbles]]
* [[Gamehelpquinque|Quinque]]
* [[Gamehelpquirkyquarks|Quirky Quarks]]
* [[Gamehelpquoridor|Quoridor]]
* [[Gamehelpraceforthegalaxy|Race for the Galaxy]]
* [[Gamehelprage|Rage]]
* [[Gamehelprailroadink|Railroad Ink]]
* [[Gamehelprailwaysoftheworld|Railways of the World]]
* [[Gamehelprainbow|Rainbow]]
* [[Gamehelprainforest|Rainforest]]
* [[Gamehelprallymangt|Rallyman: GT]]
* [[Gamehelpratjack|Ratjack]]
* [[Gamehelprauha|Rauha]]
* [[Gamehelpredseven|Red7]]
* [[Gamehelpredstone|Redstone]]
* [[Gamehelplaserreflection|Reflection]]
* [[Gamehelpregicide|Regicide]]
* [[Gamehelpregidice|Regidice]]
* [[Gamehelprememberwhen|Remember When]]
* [[Gamehelpresarcana|Res Arcana]]
* [[Gamehelprestinpeace|Rest In Peace]]
* [[Gamehelpreversi|Reversi]]
* [[Gamehelpriftvalleyreserve|Rift Valley Reserve]]
* [[Gamehelprive|Rive]]
* [[Gamehelpriverofgold|River of Gold]]
* [[Gamehelprivervalleyglassworks|River Valley Glassworks]]
* [[Gamehelproadtothreehoundred|Road to 300]]
* [[Gamehelprobotsateourpizza|Robots Ate Our Pizza]]
* [[Gamehelprollforthegalaxy|Roll for the Galaxy]]
* [[Gamehelprollintotown|Roll Into Town]]
* [[Gamehelprolltothetopjourneys|Roll to the Top: Journeys]]
* [[Gamehelprollandbump|Roll'n Bump]]
* [[Gamehelprolledwest|Rolled West]]
* [[Gamehelprollingpins|Rolling Pins]]
* [[Gamehelpromirami|Romi Rami]]
* [[Gamehelproppyakken|Roppyakken]]
* [[Gamehelprummy|Rummy]]
* [[Gamehelprussianrailroads|Russian Railroads]]
* [[Gamehelpsaboteur|Saboteur]]
* [[Gamehelpsagani|Sagani]]
* [[Gamehelpsahwari|Sahwari]]
* [[Gamehelpsaintpetersburg|Saint Petersburg]]
* [[Gamehelpsaintpoker|Saint Poker]]
* [[Gamehelpsantorini|Santorini]]
* [[Gamehelpsapiens|Sapiens]]
* [[Gamehelpschroedingerscats|Schrödinger's Cats]]
* [[Gamehelpscopa|Scopa]]
* [[Gamehelpseasaltpaper|Sea Salt & Paper]]
* [[Gamehelpseasons|Seasons]]
* [[Gamehelpsecretmoon|Secret Moon]]
* [[Gamehelpseikatsu|Seikatsu]]
* [[Gamehelpsenet|Senet]]
* [[Gamehelpsensei|Sensei]]
* [[Gamehelpsenshi|Senshi]]
* [[Gamehelpsetup|SETUP]]
* [[Gamehelpsherlockthirteen|Sherlock 13]]
* [[Gamehelpshiftingstones|Shifting Stones]]
* [[Gamehelpshogun|Shogun]]
* [[Gamehelpsignorie|Signorie]]
* [[Gamehelpsilo|Silo]]
* [[Gamehelpsimilo|Similo]]
* [[Gamehelpsimplicity|Simplicity]]
* [[Gamehelpskat|Skat]]
* [[Gamehelpskatelegend|Skate Legend]]
* [[Gamehelpskull|Skull]]
* [[Gamehelpskyteam|Sky Team]]
* [[Gamehelpslide|Slide]]
* [[Gamehelpsmallislands|Small Islands]]
* [[Gamehelpsobek|Sobek]]
* [[Gamehelpsobektwoplayers|Sobek: 2 Players]]
* [[Gamehelpsolarstorm|Solar Storm]]
* [[Gamehelpsolo|Solo]]
* [[Gamehelpsolowhist|Solo Whist]]
* [[Gamehelpsolstis|Solstis]]
* [[Gamehelpsoluna|Soluna]]
* [[Gamehelpsoulaween|Soulaween]]
* [[Gamehelpspacebase|Space Base]]
* [[Gamehelpspaceempires|Space Empires: 4X]]
* [[Gamehelpspacestationphoenix|Space Station Phoenix]]
* [[Gamehelpspades|Spades]]
* [[Gamehelpsparts|Sparts]]
* [[Gamehelpspellbook|SpellBook]]
* [[Gamehelpspiritsoftheforest|Spirits of the Forest]]
* [[Gamehelpsplashdown|Splash Down]]
* [[Gamehelpsplendor|Splendor]]
* [[Gamehelpsplendorduel|Splendor Duel]]
* [[Gamehelpsplito|Splito]]
* [[Gamehelpspotit|Spot it]]
* [[Gamehelpspots|Spots]]
* [[Gamehelpspyrium|Spyrium]]
* [[Gamehelpsquadro|Squadro]]
* [[Gamehelpstarfluxx|Star Fluxx]]
* [[Gamehelpsteamworks|Steam Works]]
* [[Gamehelpsteamrollers|SteamRollers]]
* [[Gamehelpstella|Stella – Dixit Universe]]
* [[Gamehelpstirfryeighteen|Stir Fry Eighteen]]
* [[Gamehelpstockpile|Stockpile]]
* [[Gamehelpstoneage|Stone Age]]
* [[Gamehelpstrands|Strands]]
* [[Gamehelpstreets|Streets]]
* [[Gamehelpstupormundi|Stupor Mundi]]
* [[Gamehelpsuperfantasybrawl|Super Fantasy Brawl]]
* [[Gamehelpsupermegaluckybox|Super Mega Lucky Box]]
* [[Gamehelpsushigoparty|Sushi Go Party!]]
* [[Gamehelpsushigo|Sushi Go!]]
* [[Gamehelptablut|Tablut]]
* [[Gamehelptakaraisland|Takara Island]]
* [[Gamehelptakenoko|Takenoko]]
* [[Gamehelptakenokolor|Takenokolor]]
* [[Gamehelptalon|Talon]]
* [[Gamehelptaluva|Taluva]]
* [[Gamehelptanghulu|Tang Hu Lu]]
* [[Gamehelptapestry|Tapestry]]
* [[Gamehelptargi|Targi]]
* [[Gamehelptashkalar|Tash-Kalar]]
* [[Gamehelpteatime|Tea Time]]
* [[Gamehelpteotihuacan|Teotihuacan: City of Gods]]
* [[Gamehelpterramystica|Terra Mystica]]
* [[Gamehelpageofinnovation|Terra Mystica: Age of Innovation]]
* [[Gamehelpterranova|Terra Nova]]
* [[Gamehelpterraformingmars|Terraforming Mars]]
* [[Gamehelpthattimeyoukilledme|That Time You Killed Me]]
* [[Gamehelpthatslife|That's Life!]]
* [[Gamehelpbattleforhill|The Battle for Hill 218]]
* [[Gamehelptheboss|The Boss]]
* [[Gamehelpthebuildersantiquity|The Builders: Antiquity]]
* [[Gamehelpthebuilders|The Builders: Middle Ages]]
* [[Gamehelpcastlesofburgundy|The Castles of Burgundy]]
* [[Gamehelpthecrew|The Crew]]
* [[Gamehelpthecrewdeepsea|The Crew: Mission Deep Sea]]
* [[Gamehelpthefoxintheforest|The Fox in the Forest]]
* [[Gamehelpthefoxintheforestduet|The Fox in the Forest: Duet]]
* [[Gamehelpthegnomesofzavandor|The Gnomes of Zavandor]]
* [[Gamehelpgreatsplit|The Great Split]]
* [[Gamehelptheisleofcats|The Isle of Cats]]
* [[Gamehelpthejellymonsterlab|The Jelly Monster Lab]]
* [[Gamehelpkingsguild|The King's Guild]]
* [[Gamehelpladyandthetiger|The Lady and the Tiger (Doors)]]
* [[Gamehelpthenumber|The Number]]
* [[Gamehelpcarrara|The Palaces of Carrara]]
* [[Gamehelpruhr|The Ruhr: A Story of Coal Trade]]
* [[Gamehelptheshipwreckarcana|The Shipwreck Arcana]]
* [[Gamehelpvaleofeternity|The Vale of Eternity]]
* [[Gamehelpmarcopolo|The Voyages of Marco Polo]]
* [[Gamehelpwerewolves|The Werewolves of Miller's Hollow]]
* [[Gamehelpthewolves|The Wolves]]
* [[Gamehelptheyellowhouse|The Yellow House]]
* [[Gamehelpthermopyles|Thermopyles]]
* [[Gamehelpthrive|Thrive]]
* [[Gamehelpthroughtheages|Through the Ages]]
* [[Gamehelpthroughtheagesnewstory|Through the Ages: A new Story of Civilization]]
* [[Gamehelpthurnandtaxis|Thurn and Taxis]]
* [[Gamehelptictacmatch|Tic-Tac Match]]
* [[Gamehelptichu|Tichu]]
* [[Gamehelpticketgagnant|Ticket Gagnant]]
* [[Gamehelptickettoride|Ticket to Ride]]
* [[Gamehelptickettorideeurope|Ticket to Ride: Europe]]
* [[Gamehelptienlen|Tiến Lên]]
* [[Gamehelptigriseuphrates|Tigris & Euphrates]]
* [[Gamehelptikal|Tikal]]
* [[Gamehelptimemasters|Time Masters]]
* [[Gamehelptimelinetwist|Timeline Twist]]
* [[Gamehelptinnerstrail|Tinners' Trail]]
* [[Gamehelptinyepicdefenders|Tiny Epic Defenders (Second Edition)]]
* [[Gamehelptinyfarms|Tiny Farms]]
* [[Gamehelptinyturbocars|Tiny Turbo Cars]]
* [[Gamehelptiwanaku|Tiwanaku]]
* [[Gamehelptobago|Tobago]]
* [[Gamehelptoc|Tock]]
* [[Gamehelptoeshambo|ToeShamBo]]
* [[Gamehelptokaido|Tokaido]]
* [[Gamehelptortugasixteensixtyseven|Tortuga 1667]]
* [[Gamehelptournay|Tournay]]
* [[Gamehelptrailblazers|Trailblazers]]
* [[Gamehelptranquility|Tranquility]]
* [[Gamehelptranquilitytheascent|Tranquility: The Ascent]]
* [[Gamehelptrektwelve|Trek 12]]
* [[Gamehelptrekkingtheworld|Trekking the World]]
* [[Gamehelptrellis|Trellis]]
* [[Gamehelptreos|Treos]]
* [[Gamehelptrickoftherails|Trick of the Rails]]
* [[Gamehelptrike|Trike]]
* [[Gamehelptrio|Trio]]
* [[Gamehelptroyes|Troyes]]
* [[Gamehelptroyesdice|Troyes Dice]]
* [[Gamehelptrusis|Trusis]]
* [[Gamehelptucano|Tucano]]
* [[Gamehelptumbleweed|Tumbleweed]]
* [[Gamehelpturingmachine|Turing Machine]]
* [[Gamehelpturnthetide|Turn the tide]]
* [[Gamehelpturncoats|Turncoats]]
* [[Gamehelptwinpalms|Twin Palms]]
* [[Gamehelptwintinbots|Twin Tin Bots]]
* [[Gamehelptzolkin|Tzolk'in]]
* [[Gamehelpultimaterailroads|Ultimate Railroads]]
* [[Gamehelpumbrella|Umbrella]]
* [[Gamehelpunclechestnuttablegype|Uncle Chestnut's Table Gype]]
* [[Gamehelpunconditionalsurrender|Unconditional Surrender! World War 2 in Europe]]
* [[Gamehelpunitedsquare|United Square]]
* [[Gamehelpunrest|Unrest]]
* [[Gamehelpuptown|Uptown]]
* [[Gamehelpvaalbara|Vaalbara]]
* [[Gamehelpvaultdenofthieves|Vault: A Den of Thieves]]
* [[Gamehelpvault|Vault: A Solitaire Dice Game]]
* [[Gamehelpvegetables|VEGEtables]]
* [[Gamehelpveggiegarden|Veggie Garden]]
* [[Gamehelpvektorace|VektoRace]]
* [[Gamehelpveletas|Veletas]]
* [[Gamehelpveronatwist|Verona Twist]]
* [[Gamehelpviamagica|Via Magica]]
* [[Gamehelpvidrasso|Vidrasso]]
* [[Gamehelpvillagers|Villagers]]
* [[Gamehelpviticulture|Viticulture]]
* [[Gamehelpvolto|Volto]]
* [[Gamehelpvultureculture|Vulture Culture]]
* [[Gamehelpwarchest|War Chest]]
* [[Gamehelpwelcometo|Welcome To]]
* [[Gamehelpwelcometonewlasvegas|Welcome To New Las Vegas]]
* [[Gamehelpwhisttwentytwo|Whist 22]]
* [[Gamehelpwingspan|Wingspan]]
* [[Gamehelpwizard|Wizard]]
* [[Gamehelpwizardsgrimoire|Wizards of the Grimoire]]
* [[Gamehelpwordtraveler|Word Traveler]]
* [[Gamehelpworldwidetennis|Worldwide Tennis]]
* [[Gamehelpxiangqi|Xiangqi]]
* [[Gamehelpyatzy|Yahtzee]]
* [[Gamehelpyinyang|Yin Yang]]
* [[Gamehelpyokai|Yokai]]
* [[Gamehelpyokaiseptet|Yokai Septet]]
* [[Gamehelpyokohama|Yokohama]]
* [[Gamehelpyoxii|Yoxii]]
* [[Gamehelpzefiria|Zefiria]]
* [[Gamehelpzener|Zener]]
* [[Gamehelpzola|Zola]]
* [[Gamehelpzuuli|Zuuli]]
</div>
}}

<nowiki>*</nowiki> [[Gamehelphacktrick|Hack Trick]] is currently impossible to play on BGA as it was implemented using a module that is no longer supported.
{{infoBox|minWidth=100%|titleColor=#004|color=#eefd
|title=Beta version on BGA
|body=<div style="columns:12rem auto;">
* [[Gamehelpthirtyone|31]]
* [[Gamehelpfortytwo|42]]
* [[Gamehelpagestofrobinhood|A Gest of Robin Hood]]
* [[Gamehelpalakablast|Alakablast]]
* [[Gamehelpallin|All In]]
* [[Gamehelpaniversus|Aniversus]]
* [[Gamehelpauntiemildred|Auntie Mildred's list of random tasks]]
* [[Gamehelpaurum|Aurum]]
* [[Gamehelpaves|AVES]]
* [[Gamehelpbamboozle|Bamboozle]]
* [[Gamehelpbatalladecoronas|Batalla de Coronas]]
* [[Gamehelpbauer|Bauer]]
* [[Gamehelpbelladonebluff|Belladone Bluff]]
* [[Gamehelpblackjack|Blackjack]]
* [[Gamehelpblockarena|Block Arena]]
* [[Gamehelpblot|Blot]]
* [[Gamehelpcaboodle|Bloxo]]
* [[Gamehelpbotanik|Botanik]]
* [[Gamehelpcairocorridor|Cairo Corridor]]
* [[Gamehelpcalypso|Calypso]]
* [[Gamehelpcanasta|Canasta]]
* [[Gamehelpcannonades|Cannonades]]
* [[Gamehelpcheeztricks|Cheez-Tricks]]
* [[Gamehelpchemicaloverload|Chemical Overload]]
* [[Gamehelpchimerastation|Chimera Station]]
* [[Gamehelpcircleoflifesavannah|Circle Of Life: on the Savannah]]
* [[Gamehelpcitadels|Citadels]]
* [[Gamehelpclaim|Claim]]
* [[Gamehelpcoinage|Coin Age]]
* [[Gamehelpcookieaddict|Cookie Addict!]]
* [[Gamehelpcoupell|Coupell]]
* [[Gamehelpcradletograve|Cradle to Grave]]
* [[Gamehelpcrazyeights|Crazy Eights]]
* [[Gamehelpcucumber|Cucumber]]
* [[Gamehelpdanceofmuses|Dance of Muses]]
* [[Gamehelpdiamonds|Diamonds]]
* [[Gamehelpdickory|Dickory]]
* [[Gamehelpdinogenics|DinoGenics]]
* [[Gamehelpdivercite|Divercité]]
* [[Gamehelpdotsandboxes|Dots and Boxes]]
* [[Gamehelpdronesvsseagulls|Drones vs Seagulls]]
* [[Gamehelpdungeonrummy|Dungeon Rummy]]
* [[Gamehelpdurak|Durak]]
* [[Gamehelpecarte|Écarté]]
* [[Gamehelpeck|ECK]]
* [[Gamehelpekko|Ekko]]
* [[Gamehelpenemyanemone|Enemy Anemone]]
* [[Gamehelpeuchre|Euchre]]
* [[Gamehelpexplodingkittens|Exploding Kittens]]
* [[Gamehelpexpressions|Expressions]]
* [[Gamehelpfarkle|Farkle]]
* [[Gamehelpfibonachos|Fibonachos]]
* [[Gamehelpfinca|Finca]]
* [[Gamehelpfivethreefive|Five Three Five]]
* [[Gamehelpfivetribes|Five Tribes]]
* [[Gamehelpfornorthwood|For Northwood!]]
* [[Gamehelpforage|Forage]]
* [[Gamehelpforks|Forks: 2nd Edition]]
* [[Gamehelpfourgardens|Four Gardens]]
* [[Gamehelpfromage|Fromage]]
* [[Gamehelpgammelogic|Gamme Logic]]
* [[Gamehelpgeekoutmasters|Geek Out! Masters]]
* [[Gamehelpgermanwhist|German Whist]]
* [[Gamehelpgofish|Go Fish]]
* [[Gamehelpgostop|Go-Stop]]
* [[Gamehelpgoldncrash|Gold’n’Crash]]
* [[Gamehelpgolems|Golems]]
* [[Gamehelpgolfie|Golfie]]
* [[Gamehelpgreasyspoon|Greasy Spoon]]
* [[Gamehelpgrovesolitaire|Grove]]
* [[Gamehelpeightyeight|Hachihachi]]
* [[Gamehelpharvest|Harvest]]
* [[Gamehelpsakura|Hawaiian Hanafuda]]
* [[Gamehelphoola|Hoola]]
* [[Gamehelphund|HUND]]
* [[Gamehelpimtheboss|I'm The Boss]]
* [[Gamehelpinsidejob|Inside Job]]
* [[Gamehelpinverteddice|Inverted Dice]]
* [[Gamehelpwonderfulkingdom|It's a Wonderful Kingdom]]
* [[Gamehelpriichimahjong|Japanese (Riichi) Mahjong]]
* [[Gamehelpkarvi|Karvi]]
* [[Gamehelpkhiva|Khiva]]
* [[Gamehelpkingsinthecorner|Kings in the Corner]]
* [[Gamehelpkiriaitheduel|Kiri-ai: The Duel]]
* [[Gamehelpknister|Knister]]
* [[Gamehelpknockoutwhist|Knockout Whist]]
* [[Gamehelpladyschoice|Lady's Choice]]
* [[Gamehelplepidoptery|Lepidoptery]]
* [[Gamehelpletsgotojapan|Let's Go! To Japan]]
* [[Gamehelplineae|Lineae]]
* [[Gamehelpludo|Ludo]]
* [[Gamehelplunar|Lunar]]
* [[Gamehelpmastersofrenaissance|Masters of Renaissance: Lorenzo il Magnifico – The Card Game]]
* [[Gamehelpmate|Mate]]
* [[Gamehelpmetz|Metz]]
* [[Gamehelpmexica|Mexica]]
* [[Gamehelpmia|Mia]]
* [[Gamehelpmicromidgard|Micro Midgard]]
* [[Gamehelpmighty|Mighty]]
* [[Gamehelpminnesotawhist|Minnesota Whist]]
* [[Gamehelpmorocco|Morocco]]
* [[Gamehelpmue|Mü]]
* [[Gamehelpnap|Nap]]
* [[Gamehelpnorsemen|Norsemen]]
* [[Gamehelpnylonppong|Nylon-ppong]]
* [[Gamehelpodicey|Odicey]]
* [[Gamehelponda|Onda]]
* [[Gamehelpopenfacechinesepoker|Open Face Chinese Poker]]
* [[Gamehelporchard|Orchard]]
* [[Gamehelporleans|Orléans]]
* [[Gamehelpparklife|Park Life]]
* [[Gamehelppentaquest|Pentaquest]]
* [[Gamehelpperikles|Perikles]]
* [[Gamehelppersonanongrata|Persona Non Grata]]
* [[Gamehelppescadonovo|Pescado Novo]]
* [[Gamehelppinochle|Pinochle]]
* [[Gamehelppokerdice|Poker Dice]]
* [[Gamehelptexasholdem|Poker Texas Hold'em]]
* [[Gamehelppowervacuum|Power Vacuum]]
* [[Gamehelpqango|Qango]]
* [[Gamehelpquato|Qu4to]]
* [[Gamehelpquartermastergeneraleastfront|Quartermaster General: East Front]]
* [[Gamehelpquattuorreges|Quattuor Reges]]
* [[Gamehelpquintus|Quintus]]
* [[Gamehelprallymandirt|Rallyman: DIRT]]
* [[Gamehelpraubbau|Raubbau]]
* [[Gamehelpreflectionsinthelookingglass|Reflections in the Looking Glass]]
* [[Gamehelprefuge|Refuge]]
* [[Gamehelpresist|Resist]]
* [[Gamehelpresolve|Resolve]]
* [[Gamehelpriftforce|Riftforce]]
* [[Gamehelproomtwentyfive|Room 25]]
* [[Gamehelpsafariwitness|Safari Witness]]
* [[Gamehelpsail|Sail]]
* [[Gamehelpsamarkand|Samarkand]]
* [[Gamehelpsasaki|Sasaki]]
* [[Gamehelpschnapsen|Schnapsen]]
* [[Gamehelpscriptoria|Scriptoria]]
* [[Gamehelpscythe|Scythe]]
* [[Gamehelpseotda|Seotda]]
* [[Gamehelpsergeantmajor|Sergeant Major]]
* [[Gamehelpsevenknightsbewitched|Seven Knights Bewitched]]
* [[Gamehelpsevens|Sevens]]
* [[Gamehelpsheepboombah|Sheep Boom Bah]]
* [[Gamehelpshogi|Shogi]]
* [[Gamehelpsmallworld|Small World]]
* [[Gamehelpspiteandmalice|Spite and Malice]]
* [[Gamehelpsplitter|Splitter]]
* [[Gamehelpspringcleaning|Spring Cleaning]]
* [[Gamehelpstarshipmerchants|Starship Merchants]]
* [[Gamehelpstonks|Stonks]]
* [[Gamehelpstrawberrysunset|Strawberry Sunset]]
* [[Gamehelpsurvive|Survive The Island]]
* [[Gamehelptapas|Tapas]]
* [[Gamehelpthebrambles|The Brambles]]
* [[Gamehelpthegreatamericanfoxhunt|The Great American Fox Hunt]]
* [[Gamehelpthelast|The Last]]
* [[Gamehelpthemotherroad|The Mother Road: Route 66]]
* [[Gamehelptheninedomains|The Nine Domains]]
* [[Gamehelpthewaytojuliet|The way to Juliet]]
* [[Gamehelptholos|Tholos]]
* [[Gamehelptoepen|Toepen]]
* [[Gamehelptriatri|TriATri]]
* [[Gamehelptroggu|Troggu]]
* [[Gamehelptuned|Tuned]]
* [[Gamehelptwotenjack|Two-Ten-Jack]]
* [[Gamehelpultimatetictactoe|Ultimate Tic-Tac-Toe]]
* [[Gamehelpundergrove|Undergrove]]
* [[Gamehelpwastelandia|Wastelandia]]
* [[Gamehelpxxung|Xxung]]
* [[Gamehelpyaniv|Yaniv]]
* [[Gamehelpynarosfallin|Ynaros Fallin]]
* [[Gamehelpzookeepers|Zookeepers]]
* [[Gamehelpzooloretto|Zooloretto]]
</div>
}}

{{infoBox|minWidth=100%|titleColor=#400|color=#feed
|title=Removed from BGA (incomplete list)
|body=<div style="columns:16rem auto;">
* [[Gamehelpdominion|Dominion]]
* [[Gamehelpequinox|Equinox]]
* [[Gamehelpgosu|Gosu]]
* [[Gamehelpharbour|Harbour]]
* [[Gamehelpinjawara|INJAWARA]]
* [[Gamehelpinsert|Insert]]
* [[Gamehelpkinapa|Kinapa]]
* [[Gamehelpbabet|L'Oracle B.A-BET]]
* [[Gamehelpmantisfalls|Mantis Falls]]
* [[Gamehelpparks|PARKS]]
</div>
}}

== About available games and their content ==

Games are games and it's all up to publishers to make them relevant or accurate to history, or not.

We're focusing on game play and rules. We're not history books, nor an accurate source for anything related to real things.

BGA is against any bad behaviours on real people, and will never EVER join, talk or expose about anything about themes, history or politics.

Also please note that they're also a source to motivate talks, reflection, exchange and viewpoints about history and education anywhere else.

We're a gaming platform, we welcome everyone and do efforts daily to make this place a nice place to play nice games with nice people.

Gamehelpginrummy

2024-11-12T01:37:51Z

Ufm:

===Overview===

The aim is to reach 100 points through making melds (runs or sets with 3 or more cards)

Aces are low (A-2-3). Runs must be all of the same suit.

===Turn===

* Take either the face up card in the discard pile or draw the top card from the draw deck.

* Discard 1 card

* Sum of your cards that do not form sets or run is called "deadwood". All face cards are considered as 10 and Aces are 1.

* When your deadwood value is below 10, you can call "knock" and score the deadwood in your opponent's hand minus the deadwood in your hand. If, however, your opponent has a lower deadwood value than you, they score the difference instead as well as get the undercut bonus. The amount of the undercut bonus can be set to different values on BGA, 10 is the typical.

* If your deadwood value is 0 (all cards are in sets or runs), you can call "gin" and score 25 points + the deadwood value of your opponent's hand.

* The first person who reaches 100 points wins a game and receives 100 bonus points
* Each player scores line bonus per round won. If only a single player managed to win rounds, then that player receives additional 100 bonus points.

===Solo mode===

Add 3 jokers in the deck. When you draw a joker, remove the drawn joker and continue playing.

The hand continues until either you knock or gin or draw the second joker.

If you knock or gin, turn over the cards in the deck one at a time until the joker appears. The number of cards you turn over is your score.

If you knock or the second joker appears before you knock or gin, the deadwood value is the joker's score.

The first player (you or the joker) to get 100 points wins the game.

Gamehelpeuchre

2024-11-10T02:50:15Z

Ufm:

== Standard 4 player rules ==
Euchre is a standard trick-taking game played with 4 players in fixed partners sitting opposite. Each hand one team chooses a trump suit, they become the 'makers' and have to win at least 3 out of 5 total tricks. The other team are the 'defenders'

A 24 card deck is used, in standard order of priority (Ace high, K,Q,J,10,9). With the exception of the trump suit, where the Jack of trump is the highest card (Right bauer), and the jack of the other suit in the same color becomes the second highest card (Left bauer). Thus, if hearts is called trump, the order of priority for trump would be:

'''Right bower''' (Jack of hearts)

'''Left bower''' (Jack of Diamonds)

'''Ace'''

'''King'''

'''Queen'''

'''10'''

'''9'''

==='''Making Trump'''===
The trump suit is decided during a bidding or "making trump" phase.

After each player is dealt five cards, the dealer places the top card of the remaining deck face up on the table. The remaining 3 cards are discarded face down.

Going clockwise, starting left of the dealer, each player is given the choice to either pass, or "order up" that card. If all other players pass, the dealer is given the choice to "take it up" themselves. If ordered up, the suit of the turned up card becomes trump The dealer then adds that card to their hand and chooses one card to discard.

If all players (including the dealer) pass, the card in the middle is turned over, and continuing clockwise, each player is again given the choice to make trump in any of the other 3 suits. If everyone else passes a second time, the dealer must call trump (called sticking the dealer).

Whichever team ordered up or chose the trump suit are now the '''makers.''' And have the goal of winning at least 3 of the 5 tricks. The other team are the '''defenders.'''

When making trump, players can also choose to go alone. Playing without their partner, for extra points if they win all 5 tricks.
==='''Gameplay'''===

The player to the left of the dealer leads the first trick. Play then continues clockwise. Players must follow suit, but if they have no cards of the suit, they may play any card. The left bower counts as part of the trump suit, not it's original suit. The highest card in the suit led wins the trick, but if a trump card is played, the highest trump wins the trick instead.

After each hand, the player left of the dealer deals the next hand.

==='''Scoring'''===
If the team that calls trump wins three tricks, they earn one point. If they win all five tricks, they earn two points. If they do not win three tricks, they have been euchred, and the other team earns two points.

In the trump-calling phase there is an option for a player to call trump and go alone. When this happens, his partner does not play the round, but if he wins all five tricks, he gets four points. Otherwise, scoring is normal. (one point for three tricks, two points to the other team for getting euchred).

==Variants ==

Several variant rules can be enabled during table setup.

====Stick the dealer====
Turned on by default, forces the dealer to make trump at the end of the second bidding to round. If disabled, the dealer can pass, and a new hand is dealt by the next player.

====No-trump call====
During the second round of bidding, players can "make" with no trump suit. Play continues normally, with each suit in standard card order.

====Loner starts last====
When playing alone, the defender to your left leads the first trick. Regardless of who the dealer was for that hand.

====Canadian loner====

In the first round of bidding, the dealer's partner can only go alone or pass, and cannot order up the face up card normally.

====Lone defender====
After Trump is made, the defenders can also choose to play alone. Winning 4 points instead of 2 if they successfully euchre the makers.

====Benny====

Adds a joker to the deck, called the Benny. The Benny is the new highest trump, above right bower. And is treated as part of the trump suit for following suit.

If a no-trump call is made, the Benny is not part of any of the 4 suits, so can only be played if you can't follow suit. But still functions as a singular trump, winning any trick it's played on.

Contact BGA Studio

2024-11-06T15:19:59Z

Ufm: /* Help with Game development or setup */

== Purpose ==
This page is to find solutions for technical issues or manual steps related to games development on BGA Studio.

To contact BGA team if you are a player or a publisher (i.e. not a game software developer) please use this form https://en.boardgamearena.com/faq?anchor=faq_team_contact

== Studio Accounts Management ==

BGA player account is not the same as studio account (even if you name them the same).

* Create studio account https://studio.boardgamearena.com (if you already logged in logout first)
* Resend welcome email (original) https://studio.boardgamearena.com/account?page=welcomeemail
** Same if you forgot database or ftp account
** Still cannot get email, tried searching in junk for BGA, contact studio via https://studio.boardgamearena.com/support
* Forgot password https://studio.boardgamearena.com/account?page=lostpassword
* Cannot ftp
** See section "Help with Game development or setup"
* Upload ssh key https://studio.boardgamearena.com/controlpanel

== Studio Games Management ==

* Game management control panel located in Gear link if you click on your Account circle, direct link https://studio.boardgamearena.com/controlpanel
** This allows to create projects, delete projects and manage projects
* Access to other project's source code
** Any developer can add themselves to a project as read-only from https://studio.boardgamearena.com/projects page (almost any project).
** If project is not there - its either does not have bgg id, already published (in this case check radio button on this page) or was not developed on studio (some old games).
** You can also try to use direct link https://studio.boardgamearena.com/gamepanel?game=template (replace template with game name in the link)
** If you prefer github see https://en.doc.boardgamearena.com/BGA_Code_Sharing
* Access to frontend
** Even if you cannot get source access via studio, you can see the java code, css and images asset by using Browser dev tools, see [[Practical_debugging]]
* Push game to Alpha or Beta
** You cannot do it yourself, you have to go though checklist first https://en.doc.boardgamearena.com/Pre-release_checklist then use Request Alpha or Request Beta button in control panel
* Your project seems to be deleted after you came back a year after - create a new project with SAME name as before (you have to remember name) - it will be restored
* You have permission issues syncing files, but you are admin - re-add yourself as admin via control panel. DO NOT delete yourself, select Admin (!Important, double check you selected Admin not Read/Write) type your name (same account name as before) and click add.
* You managed to delete yourself from your own project, or are not admin anymore - require admin interferance - contact studio via https://studio.boardgamearena.com/support
* You want to take over abandoned game
** Please first ask on dev forum or discord - it may not be actually abandoned
** You don't actually need to use that project, CLONE the game using control panel (create new project with similar name, copy over). If you don't abandon your project, finish the game and its ready to be published - admin can rename it
* If you really think you need read or write access which you cannot get yourself - contact studio via https://studio.boardgamearena.com/support

== Help with Game development or setup ==

If you stuck or looking for help in regards to development (even if you think there is bug in framework) please contact fellow developers first before attempting to contact any of admins

* Google it, you may find an answer unrelated to BGA
* Post question of DISCORD chat server for BGA developers (invite link https://discord.gg/YxEUacY). Do not go there if you are a non-developer BGA user, but feel free to check out unofficial BGA user servers (at your own risk)
* Search and/or post on [http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]
* If you think there is bug in studio or APIs check these bugs [https://studio.boardgamearena.com/bugs Bug tracking system FOR STUDIO issues and APIs]. You can also submit a bug there

Also some specific reading may help
* Studio development setup including sftp issues - [[Tools and tips of BGA Studio]]
* Debugging - [[Practical debugging]]
* Completely Stuck - [[Troubleshooting]]
* Anything else - [[Studio]]

== Help with Game assets or licenses ==

* https://studio.boardgamearena.com/licensing
* Graphics help https://en.doc.boardgamearena.com/Game_art:_img_directory
* Request game assets (graphics) - https://studio.boardgamearena.com/support

== Last resort ==

You can file a request that will land in the BGA ticketing system from the [https://studio.boardgamearena.com/support studio support page].

Pretty please use text above to solve your problems before filing a support request.

[[Category:Studio]]

Contact BGA Studio

2024-11-06T15:19:10Z

Ufm: /* Help with Game development or setup */

== Purpose ==
This page is to find solutions for technical issues or manual steps related to games development on BGA Studio.

To contact BGA team if you are a player or a publisher (i.e. not a game software developer) please use this form https://en.boardgamearena.com/faq?anchor=faq_team_contact

== Studio Accounts Management ==

BGA player account is not the same as studio account (even if you name them the same).

* Create studio account https://studio.boardgamearena.com (if you already logged in logout first)
* Resend welcome email (original) https://studio.boardgamearena.com/account?page=welcomeemail
** Same if you forgot database or ftp account
** Still cannot get email, tried searching in junk for BGA, contact studio via https://studio.boardgamearena.com/support
* Forgot password https://studio.boardgamearena.com/account?page=lostpassword
* Cannot ftp
** See section "Help with Game development or setup"
* Upload ssh key https://studio.boardgamearena.com/controlpanel

== Studio Games Management ==

* Game management control panel located in Gear link if you click on your Account circle, direct link https://studio.boardgamearena.com/controlpanel
** This allows to create projects, delete projects and manage projects
* Access to other project's source code
** Any developer can add themselves to a project as read-only from https://studio.boardgamearena.com/projects page (almost any project).
** If project is not there - its either does not have bgg id, already published (in this case check radio button on this page) or was not developed on studio (some old games).
** You can also try to use direct link https://studio.boardgamearena.com/gamepanel?game=template (replace template with game name in the link)
** If you prefer github see https://en.doc.boardgamearena.com/BGA_Code_Sharing
* Access to frontend
** Even if you cannot get source access via studio, you can see the java code, css and images asset by using Browser dev tools, see [[Practical_debugging]]
* Push game to Alpha or Beta
** You cannot do it yourself, you have to go though checklist first https://en.doc.boardgamearena.com/Pre-release_checklist then use Request Alpha or Request Beta button in control panel
* Your project seems to be deleted after you came back a year after - create a new project with SAME name as before (you have to remember name) - it will be restored
* You have permission issues syncing files, but you are admin - re-add yourself as admin via control panel. DO NOT delete yourself, select Admin (!Important, double check you selected Admin not Read/Write) type your name (same account name as before) and click add.
* You managed to delete yourself from your own project, or are not admin anymore - require admin interferance - contact studio via https://studio.boardgamearena.com/support
* You want to take over abandoned game
** Please first ask on dev forum or discord - it may not be actually abandoned
** You don't actually need to use that project, CLONE the game using control panel (create new project with similar name, copy over). If you don't abandon your project, finish the game and its ready to be published - admin can rename it
* If you really think you need read or write access which you cannot get yourself - contact studio via https://studio.boardgamearena.com/support

== Help with Game development or setup ==

If you stuck or looking for help in regards to development (even if you think there is bug in framework) please contact fellow developers first before attempting to contact any of admins

* Google it, you may find an answer unrelated to BGA
* Post question of DISCORD chat server for BGA developers (invite link https://discord.gg/YxEUacY). Do not go there if you are a non-developer BGA user, but feel free to check out unofficial BGA servers (at your own risk)
* Search and/or post on [http://forum.boardgamearena.com/viewforum.php?f=12 Development forum]
* If you think there is bug in studio or APIs check these bugs [https://studio.boardgamearena.com/bugs Bug tracking system FOR STUDIO issues and APIs]. You can also submit a bug there

Also some specific reading may help
* Studio development setup including sftp issues - [[Tools and tips of BGA Studio]]
* Debugging - [[Practical debugging]]
* Completely Stuck - [[Troubleshooting]]
* Anything else - [[Studio]]

== Help with Game assets or licenses ==

* https://studio.boardgamearena.com/licensing
* Graphics help https://en.doc.boardgamearena.com/Game_art:_img_directory
* Request game assets (graphics) - https://studio.boardgamearena.com/support

== Last resort ==

You can file a request that will land in the BGA ticketing system from the [https://studio.boardgamearena.com/support studio support page].

Pretty please use text above to solve your problems before filing a support request.

[[Category:Studio]]

Tutorial hearts

2024-11-02T11:29:54Z

Ufm: /* Hook version control system */

{{Studio_Framework_Navigation}}

== Introduction ==

Using this tutorial, you can build a complete working game on the BGA environment: Hearts.

Before you read this tutorial, you must:
* Read the overall presentations of the BGA Framework ([[Studio|see here]]).
* Know the rules for Hearts
* Some-what know the languages used on BGA: PHP, SQL, HTML, CSS, Javascript
* Set up your development environment [http://en.doc.boardgamearena.com/First_steps_with_BGA_Studio First Steps with BGA Studio]
* As part of setup you have to have access to your ftp home folder in studio, which would have the full 'hearts' game source code. We will be using some resources of this game in this tutorial, so copy it over to local disk if you have not done so.

If you are stuck or have question about this tutorial, post on [https://forum.boardgamearena.com/viewforum.php?f=12 BGA Developers forum]

== Create your first game ==

If you have not already, you have to create a project in BGA Studio. For this tutorial you can create a project heartsYOURNAME where
YOURNAME is your developer login name. You can also re-use the project you have created for the "First Steps" tutorial above.
With the initial skeleton of code provided, you can already start a game from the BGA Studio.

1. Find and express start the game in turn-based mode with 4 players. Make sure it works. If you want to see the game as 2nd player press red arrow button on the player panel to switch to that player. More details can be found in [[First_steps_with_BGA_Studio]]

2. Modify the text in heartsYOURNAME_heartsYOURNAME.tpl, reload the page in the browser and make sure your ftp sync works as expected.
Note: if you have not setup auto-sync do it now, manually copying files is a no-starter.

3. Express stop from settings menu (the gear icon).

<i>Note: please do '''not''' use the hearts project code as a base. This tutorial assumes you started with a TEMPLATE project with no prior modifications. Using the hearts project as a base will be very confusing and you won't be able to follow all the steps.
</i>

<b>Attention!!!</b> Very important note about reloading, if you don't remember this you may spend hours debugging. The browser caches images. If you change any of these files, you have to do "full reload" which is usually Ctrl+F5 (or Ctrl+reload button on browser) not just a regular reload.

== Hook version control system ==

For a real game, or even for this tutorial, we recommend committing the code to version control right from the start. You are going to find yourself in a situation where the game doesn't even start anymore and no way of debugging it, unless you have a way to revert. That is where version control becomes very handy. If you are not familiar with version control (e.g. [https://git-scm.com/docs/gittutorial git]) then at least back up your files after each major change. Start now.

Code for this tutorial available is on github: https://github.com/elaskavaia/bga-heartsla

Different revisions represent different steps along the process, starting from original template to a PARTIAL game.

The full game can be found in your FTP home folder, after getting read-only access: https://en.doc.boardgamearena.com/First_steps_with_BGA_Studio#Set_up_dev_environment_ide,_editor_and_File_Sync

== Update game infos and box graphics ==

Even it does nothing yet, always start by making sure the game looks decent in the game selector, meaning it has nice box graphics and its information is correct. For that we need to edit [[Game_meta-information: gameinfos.inc.php|gameinfos.inc.php]].

For a real game, you would go to [http://boardgamegeek.com BoardGameGeek], find the game, and use the information from BGG to fill in the gameinfos.

So let's do that. Find "hearts" on BoardGameGeek. (Hint: Original release 1850 :))

You can fill in the year of publishing and bgg id, put ''Public Domain'' under publisher (for a real game, leave an empty string so it won't be displayed), and a publisher id of 171 for public domain. And as designer and author you can just put your own name just for fun. Set number of players to 4.

// Players configuration that can be played (ex: 2 to 4 players)
'players' => array( 4 ),

'''Important step''': you have to refresh the information in the Studio website through the control panel. So go to Control Panel -> Manage Games -> heartsYOURNAME
and press Reload for 'Reload game informations'.

The next step would be to replace '''game_box.png''' with nicer images. This can be done from the [[Game metadata manager]].

Now try to start the game again. If you somehow introduced a syntax error in the gameinfos file it may not work (the game won't start).
Always use the "Express Start" button to start the game. You should see a standard state prompt from the template. You should see 4 players on the right: testdude0 .. testdude3.
To switch between them press the red arrow button near their names, it will open another tab. This way you don't need to login and logout from multiple accounts!

<i>Note: if you had run the game before with less than 4 players there is a bug that will prevent you from running it with 4 only (if you did not run it before or run it with 4 players as instructed stop reading this note), to workaround revert back to original players array (i.e. 1,2,3,4), reload game options, then create a table with 4 players, exit that game table, then change gameoptions to 4 only as above, reload game options, create table again.</i>

Code Rev [https://github.com/elaskavaia/bga-heartsla/tree/4b3a73eeb5acae961ade18473af119e8ce8d1a8f]

== Layout and Graphics ==

In this section we will do graphics of the game, and main layout of the game.

First copy a sprite with cards image from [https://github.com/elaskavaia/bga-heartsla/blob/4b3a73eeb5acae961ade18473af119e8ce8d1a8f/img/cards.jpg hearts img/cards.jpg] into img/ folder of your project. Project hearts is mounted to your home directory on bga server.
<blockquote>There are better quality deck of cards image at https://en.doc.boardgamearena.com/Common_board_game_elements_image_resources</blockquote>

Details about images can be found here: [[Game art: img directory]].

Edit .js to add some divs to represent player table and hand area, at the beginning of the setup function

<pre>
document.getElementById('game_play_area').insertAdjacentHTML('beforeend', `
<div id="myhand_wrap" class="whiteblock">
<b id="myhand_label">${_('My hand')}</b>
<div id="myhand"></div>
</div>

`);
</pre>

If you refresh you should see now white area with My Hand title.

[[File:Heartsla-tpl2.png]]

Now lets add a card into the hand, just so you can feel it. Edit .tpl and a playertablecard div inside a hand div
<pre>
...
<div id="myhand">
<div class="playertablecard"></div>
</div>
...
</pre>

Edit .css file
<pre>
.playertablecard {
display: inline-block;
position: relative;
margin-top: 5px;
width: 72px;
height: 96px;
background-image: url('img/cards.jpg'); /* temp hack to see it */
}
</pre>

When you change existing graphics files remember that you have to FORCE-reload page, i.e. Ctrl-F5, otherwise its cached.

You should see this:

[[File:Heartsla-tpl3.png]]

Awesome! Now lets do the rest of layout.

Let's complete the template string we created for the hand. Before the <code>myhand</code> div, add:

Change .tpl file to have this inside
<pre>
<div id="playertables">
${
Object.values(gamedatas.players).map((player, index) => `
<div class="playertable whiteblock playertable_${DIRECTIONS[orderedPlayers.length][index]}">
<div class="playertablename" style="color:#${player.color};"><span class="dealer_token" id="dealer_token_p${player.id}">🃏 </span>${player.name}</div>
<div class="playertablecard" id="playertablecard_${player.id}"></div>
<div class="playertablename" id="hand_score_wrap_${player.id}"><span class="hand_score_label"></span> <span id="hand_score_${player.id}"></span></div>
</div>
`).join('')
}
</div>
</pre>

What we did is we added a template for every players at the table.
For this new code to work, we need to add a constant at the beginning of the JS file, defining the expected position of each player :
<pre>
const DIRECTIONS = {
3: ['S', 'W', 'E'],
4: ['S', 'W', 'N', 'E'],
};
</pre>

Reload. If everything went well you should see this:

[[File:Hearts all rows.png|alt=Display a list of all players, with a dummy card in each position]]

These are "tableau" areas for 4 players plus My hand visible only to one player. They are not exactly how we wanted them to be because we did not edit .css yet.

Now edit .css, add these lines after import before our previous definition

<pre>
/** Table layout **/

#playertables {
position: relative;
width: 710px;
height: 340px;
}

.playertablename {
font-weight: bold;
}

.playertable {
position: absolute;
text-align: center;
width: 180px;
height: 130px;
}

.playertable_N {
left: 50%;
top: 0px;
margin-left: -90px; /* half of 180 */
}
.playertable_S {
left: 50%;
bottom: 0px;
margin-left: -90px; /* half of 180 */
}
.playertable_W {
left: 0px;
top: 50%;
margin-top: -55px; /* half of 130 */
}
.playertable_E {
right: 0px;
top: 50%;
margin-top: -55px; /* half of 130 */
}
</pre>

Now you force Reload and you should see this:
[[File:Heartsla-tpl5.png]]

This is almost all we need for graphics and layout, there are few tweaks left there but lets do some more heavy lifting now.

<i>Note: if you did not see changes you may have not force reloaded, force means you use Ctrl+F5 or Cltr+Shift-R, if you don't "force" browser will use cached version of images! Which is not what you just changed</i>

<i>Another Note: In general if you have auto-sync you don't need to reload if you change Game.php file, you need normal reload if you change js, and force reload for images. If you changed state machine or database you likely need to restart the game.</i>

== Game Interface JS Stock ==

The BGA framework provides a few out of the box classes to deal with cards. The client side
contains a class called [[Stock]] and it can be used for any dynamic html "pieces" management that uses
common sprite images. On the server side we will use the [[Deck]] class which we discuss later.

If you open cards.jpg in an image viewer you will see that it is a "sprite" image - a 13x4 grid of images stitched together,
which is a very efficient way to transport images. So we will use the Stock class to mark up these images and create
"card" divs for us.

First, we need to add '''ebg/stock''' as a dependency in the hearts.js file:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/stock" /// <==== HERE
],
</pre>

Then add this to the Javascript constructor, this will define size of our cards
<pre>
console.log('hearts constructor');
this.cardwidth = 72;
this.cardheight = 96;
</pre>

The stock is initialized in the Javascript "setup" method like this:
<pre>
// TODO: Set up your game interface here, according to "gamedatas"

// Player hand
this.playerHand = new ebg.stock(); // new stock object for hand
this.playerHand.create( this, $('myhand'), this.cardwidth, this.cardheight );
</pre>

As parameters of the "create" method, we provided the width/height of an item (a card), and the container div "myhand" - which is an id of "div" element from our .tpl file representing a player hand.

Then, we must tell the stock what items it is going to display during its life: the 52 cards of a standard card game from a CSS sprite image named "cards.jpg" with all the cards arranged in 4 rows and 13 columns.

Here's how we tell stock what item types to display:
<pre>
this.playerHand.image_items_per_row = 13; // 13 images per row

// Create cards types:
for (var color = 1; color <= 4; color++) {
for (var value = 2; value <= 14; value++) {
// Build card type id
var card_type_id = this.getCardUniqueId(color, value);
this.playerHand.addItemType(card_type_id, card_type_id, g_gamethemeurl + 'img/cards.jpg', card_type_id);
}
}
</pre>

And add this function to the utilities section
<pre>
// Get card unique identifier based on its color and value
getCardUniqueId : function(color, value) {
return (color - 1) * 13 + (value - 2);
},
</pre>

Explanations:
* At first, we tell the stock component that our CSS sprite contains 13 items per row. This way, it can find the correct image for each card type id.
* Then for the 4x13 cards, we call the '''addItemType''' method that creates the type. The arguments are the type id, the weight of the card (for sorting purpose), the URL of our CSS sprite, and the position of our card image in the CSS sprite. It happens to be the same number in our case.

Note: we need to generate a unique ID for each type of card based on its color and value. For that we create a function '''getCardUniqueId'''. The type is the unique identifier of the TYPE of the card, e.g., the queen of spades encoded as an integer. If our deck had 2 standard card decks we would have had 2 queens of spades; they would share the same type and the same image but would have different ids. NOTE: It's unfortunate that they named this '''getCardUniqueId'''; it should have been '''getCardUniqueType''', because it really isn't an id, but a TYPE of card. The type of the item should either be a reversible function of its properties (i.e., kind of suite * 13 + value) or just an enumerator described in material.inc.php. In this specific case it's a synthetic type id, which also the same as the number of the card in the sprite image (i.e., if you enumerate each image in sprite going left to right, then top to bottom).

Now let's add the 5 of Hearts to the player's hand just for fun (this code will go in setup method after types initialization):

<pre>
// 2 = hearts, 5 is 5, and 42 is the card id, which normally would come from db
this.playerHand.addToStockWithId( this.getCardUniqueId( 2, 5 ), 42 );
</pre>

This will add the card with id 42 and type 16 ( (2-1)*13+(5-2)=16 ).

Note that number 16 would not be something you can see in database, Deck database will have separate field for type and type_arg where type is suite and type_arg is number, so its not the same thing, but you can use same formula to convert. Number 42 on the other hand would be id field in database. But we get to database in the later section.

If you reload now you should see the 5 of hearts in "your hand".

Stock control can handle clicking on items and forms the selection. You can immediately react to selection
or you can query it later; for example when user presses some other button.

Let's hook it up. Add this in the setup method in .js file, after this.playerHand is initialised:

dojo.connect( this.playerHand, 'onChangeSelection', this, 'onPlayerHandSelectionChanged' );

Then find the Player's action comment section in .js file and add a handler after the comment:

<pre>
onPlayerHandSelectionChanged: function() {
var items = this.playerHand.getSelectedItems();

if (items.length > 0) {
if (this.checkAction('actPlayCard', true)) {
// Can play a card

var card_id = items[0].id;
console.log("on playCard "+card_id);

this.playerHand.unselectAll();
} else if (this.checkAction('actGiveCards')) {
// Can give cards => let the player select some cards
} else {
this.playerHand.unselectAll();
}
}
},
</pre>

''Note : If you already have an example handler <code>onCardClick: function( card_id )</code>, go ahead and remove that handler, it is a duplicate of what we are implementing in this tutorial and may cause issues later on.''

The function name of the handler is 4th parameter of the dojo.connect function. Make sure you spell it correctly or there will be unpredictable effects.

Now if you reload, open the Javascript Console (F12), and then click on the card in My Hand, you should see:
on playCard 42
printed on the console

''Note : You need to be the active player to have rights to play a card and so log your message in the console''

== Game Database and Game Initialization ==

Next step, you want to design a game database and setup a new game (on the server side).
For that we need to a) modify the database schema to add our cards data b) add some global variables into
the existing globals table.

To modify the schema, first exit your existing game(s). Open '''dbmodel.sql''' file and uncomment the card table creation.

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

This is the "card" table which will be managed by the Deck php class.

In addition we want a little piece of information in the players table:

-- add info about first player
ALTER TABLE `player` ADD `player_first` BOOLEAN NOT NULL DEFAULT '0';

Not sure why they put this into the player table, as we could use a global db variable to hold first player as easily.
But I am just following the existing code more-or-less.

Next we finally get into Game.php class (in modules/php subdir), where the main logic and db interaction would be. Find php constructor which should be
function __construct( )
This is first function in a file. Add this code to constructor.
<pre>
parent::__construct();
$this->initGameStateLabels( array(
"currentHandType" => 10,
"trickColor" => 11,
"alreadyPlayedHearts" => 12,
) );

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

Here we are initializing three "Game State Variables" which are variables stored in the database. They are integers.
It must start with values higher or equal to 10 since values lower than 10 are reserved. These values are stored by numeric ids
in the database, but in the php we associate them with string labels for convenience of access.

The variables are:

* "trickColor": numbers from 1 to 4 that map to card suit (not sure why it's called color; maybe it's a translation from French);
* "alreadyPlayedHearts": a boolean flag (0 or 1) indicating whether somebody used hearts on the trick;
* "currentHandType": stores the value to indicate who to give cards to during exchange.

The next 2 lines are creating $this->cards object and associating it with "card" table in the the database.

<i>If we called db table 'foo' instead of 'card' the last statement would have been $this->cards->init( "foo" )</i>

At this point I would start a new game and make sure it starts, then exit.

Note: lower in the code there is a line that needs to be removed in order for the game to start. Search for it and remove it now.
$this->setGameStateInitialValue("my_first_global_variable", 0);
<i>
If you made a mistake
in the .sql or php constructor the game won't start, and good luck debugging it. (That is why it's important to check
once in a while to make sure it still starts while you remember what you have changed.)
</i>

Code Rev [https://github.com/elaskavaia/bga-heartsla/tree/e3a049257b592ff6167688d4d344f8a83d349b08]

Now we can go to game initialization '''setupNewGame''' in Game.php. This method is called only once when the game is created.

In your template project you should have code that deals with player table, just leave it as is. Start inserting the
other code after "Start the game initialization" comment.
<pre>
// Init global values with their initial values

// Note: hand types: 0 = give 3 cards to player on the left
// 1 = give 3 cards to player on the right
// 2 = give 3 cards to player opposite
// 3 = keep cards
$this->setGameStateInitialValue( 'currentHandType', 0 );

// Set current trick color to zero (= no trick color)
$this->setGameStateInitialValue( 'trickColor', 0 );

// Mark if we already played hearts during this hand
$this->setGameStateInitialValue( 'alreadyPlayedHearts', 0 );
</pre>

Here we initialize all the globals to 0.

Next is to create our cards in the database. We have one deck of cards so it's pretty simple.
<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>

This code that will create one of each card. But don't run it yet, because we missing $this->colors.
So we have state of the game in the database, but there is some static game information which never changes.
This information should be stored in material.inc.php and this way it can be accessed from all .php files (and .js if you send it via getAllDatas()).
We will edit this file now by adding these lines

<pre>
$this->colors = array(
1 => array( 'name' => clienttranslate('spade'),
'nametr' => $this->_('spade') ),
2 => array( 'name' => clienttranslate('heart'),
'nametr' => $this->_('heart') ),
3 => array( 'name' => clienttranslate('club'),
'nametr' => $this->_('club') ),
4 => array( 'name' => clienttranslate('diamond'),
'nametr' => $this->_('diamond') )
);

$this->values_label = array(
2 =>'2',
3 => '3',
4 => '4',
5 => '5',
6 => '6',
7 => '7',
8 => '8',
9 => '9',
10 => '10',
11 => clienttranslate('J'),
12 => clienttranslate('Q'),
13 => clienttranslate('K'),
14 => clienttranslate('A')
);
</pre>

Where $this->colors will define Suit labels and $this->values_label will define value labels.
If you noticed, we have two of each label for suits. This is because sometimes we need translated values on the php
side and sometimes we don't. In this case '''nametr''' will return a translated value in php, which is only useful when you throw exceptions to show the right strings. If you pass a value to the client via notification you should always use untranslated strings, and the client will translate it. 'clienttranslate' marks the value for translation but does not actually change it for php. For more about this wonderful translation stuff see [[Translations]].

== Full game model synchronisation ==

Now at any point in the game we need to make sure that database information can be reflected back in the UI, so we must fix the '''getAllDatas''' function
to return all possible data we need to reconstruct the game. This is in the Game.php file. The template for getAllDatas() already takes care of player info. Let's just
add hand and tableau data before we return a result.

<pre>
// Cards in player hand
$result['hand'] = $this->cards->getCardsInLocation( 'hand', $current_player_id );

// Cards played on the table
$result['cardsontable'] = $this->cards->getCardsInLocation( 'cardsontable' );
</pre>

Now on the client side we should display this data, so in your .js file in the setup function (which is the receiver of getAllDatas) replace our hack of putting 5 of Hearts directly into the hand with:

<pre>
// Cards in player's hand
for ( var i in this.gamedatas.hand) {
var card = this.gamedatas.hand[i];
var color = card.type;
var value = card.type_arg;
this.playerHand.addToStockWithId(this.getCardUniqueId(color, value), card.id);
}

// Cards played on table
for (i in this.gamedatas.cardsontable) {
var card = this.gamedatas.cardsontable[i];
var color = card.type;
var value = card.type_arg;
var player_id = card.location_arg;
this.playCardOnTable(player_id, color, value, card.id);
}
</pre>

This should show hand and tableau cards now, except we are missing the '''playCardOnTable''' function. So find the '''getCardUniqueId''' function which
should be in the utilities section and add this after it:

<pre>
playCardOnTable : function(player_id, color, value, card_id) {
// player_id => direction
this.addTableCard(value, color, player_id, player_id);

if (player_id != this.player_id) {
// Some opponent played a card
// Move card from player panel
this.placeOnObject('cardontable_' + player_id, 'overall_player_board_' + player_id);
} else {
// You played a card. If it exists in your hand, move card from there and remove
// corresponding item

if ($('myhand_item_' + card_id)) {
this.placeOnObject('cardontable_' + player_id, 'myhand_item_' + card_id);
this.playerHand.removeFromStockById(card_id);
}
}

// In any case: move it to its final destination
this.slideToObject('cardontable_' + player_id, 'playertablecard_' + player_id).play();
},
</pre>

For this to work we also need to define the addTableCard
<pre>
addTableCard(value, color, card_player_id, playerTableId) {
const x = value - 2;
const y = color - 1;
document.getElementById('playertablecard_' + playerTableId).insertAdjacentHTML('beforeend', `
<div class="card cardontable" id="cardontable_${card_player_id}" style="background-position:-${x}00% -${y}00%"></div>
`);
},
</pre>

What this does is basically create another card object, because if it is not our card it's not in our hand (Stock) so
we have to create it out of thin air. The technique to do that is to implement a Javascript template object defined in the .tpl file with some
parameters, which will basically create a "div" string (yes you could have used string concatenation but it would not be fancy).
Now dojo.place places it (the div) on top of a placeholder. Now we have an object with an id of 'cardontable_' + player_id. Depending
on who is playing it we either place it on the player miniboard or in hand (and remove it from hand stock). Then we animate the card move.

We also should fix our .css file now to add style for cardontable and REMOVE background for playertablecard which really is a placeholder div and not a card. (Don't miss the remove step; it will be all screwy if you do!)

<pre>
.playertablecard {
display: inline-block;
position: relative;
margin-top: 5px;
width: 72px;
height: 96px;
/* we remove background-image here */
}

/*** cards on table ***/

.cardontable {
position: absolute;
width: 72px;
height: 96px;
background-image: url('img/cards.jpg');
}
</pre>

Now to test that it actually works let's deal cards to players during game initialization:

Add this after createCards in setupNewGame function in the Game.php file
<pre>
// Shuffle deck
$this->cards->shuffle('deck');
// Deal 13 cards to each players
$players = $this->loadPlayersBasicInfos();
foreach ( $players as $player_id => $player ) {
$cards = $this->cards->pickCards(13, 'deck', $player_id);
}
</pre>

Now when you start the game you should see 13 cards in your hand!

We just need to hook-up clicking on card and test if our playCardOnTable works.

Find onPlayerHandSelectionChanged function in the JS file, we should have logging there like console.log("on playCard "+card_id);
So after that insert this (Note: this code is for testing we will replace it with server interaction after we test it.):
<pre>
console.log("on playCard "+card_id);
// type is (color - 1) * 13 + (value - 2)
var type = items[0].type;
var color = Math.floor(type / 13) + 1;
var value = type % 13 + 2;

this.playCardOnTable(this.player_id,color,value,card_id);
</pre>
Now if you force reload (because we changed .css before) you should be able to click on card from your hand and see it moving,
you can click on few cards this way. When you done enjoying the animation, press F5 to get your hand back.

[[File:Heartsla-sync.png]]

Code Rev [https://github.com/elaskavaia/bga-heartsla/tree/01d4e2f595fd14c2adcc97a957d21bb2766f78a8]

== State Machine ==

Now we need to create a game state machine. So the states are (excluding two more states we will add later to handle the exchange of cards at the beginning of the rounds):

* Cards are dealt to all players (lets call it "newHand")
* Player is selected who will start a new trick ("newTrick")
* Player start or respond to played card ("playerTurn")
* Game control is passed to next player or trick is ended ("nextPlayer")
* End of hand processing (scoring and check for end of game) ("nextHand")

The state handling spread across 4 files, so you have to make sure all pieces are connected together.
The state machine states.php defines all the states, and function handlers on php side in a form of string,
and if any of these functions are not implemented it would be very hard to debug because it will break in random places.

So .states.php

<pre>
$machinestates = array(

// The initial state. Please do not modify.
1 => array(
"name" => "gameSetup",
"description" => clienttranslate("Game setup"),
"type" => "manager",
"action" => "stGameSetup",
"transitions" => array( "" => 2 )
),

/// New hand
2 => array(
"name" => "newHand",
"description" => "",
"type" => "game",
"action" => "stNewHand",
"updateGameProgression" => true,
"transitions" => array( "" => 30 )
),

21 => array(
"name" => "giveCards",
"description" => clienttranslate('Some players must choose 3 cards to give to ${direction}'),
"descriptionmyturn" => clienttranslate('${you} must choose 3 cards to give to ${direction}'),
"type" => "multipleactiveplayer",
"action" => "stGiveCards",
"args" => "argGiveCards",
"possibleactions" => array( "actGiveCards" ),
"transitions" => array( "giveCards" => 22, "skip" => 22 )
),

22 => array(
"name" => "takeCards",
"description" => "",
"type" => "game",
"action" => "stTakeCards",
"transitions" => array( "startHand" => 30, "skip" => 30 )
),

// Trick

30 => array(
"name" => "newTrick",
"description" => "",
"type" => "game",
"action" => "stNewTrick",
"transitions" => array( "" => 31 )
),
31 => array(
"name" => "playerTurn",
"description" => clienttranslate('${actplayer} must play a card'),
"descriptionmyturn" => clienttranslate('${you} must play a card'),
"type" => "activeplayer",
"possibleactions" => array( "actPlayCard" ),
"transitions" => array( "playCard" => 32 )
),
32 => array(
"name" => "nextPlayer",
"description" => "",
"type" => "game",
"action" => "stNextPlayer",
"transitions" => array( "nextPlayer" => 31, "nextTrick" => 30, "endHand" => 40 )
),

// End of the hand (scoring, etc...)
40 => array(
"name" => "endHand",
"description" => "",
"type" => "game",
"action" => "stEndHand",
"transitions" => array( "nextHand" => 2, "endGame" => 99 )
),

// Final state.
// Please do not modify.
99 => array(
"name" => "gameEnd",
"description" => clienttranslate("End of game"),
"type" => "manager",
"action" => "stGameEnd",
"args" => "argGameEnd"
)

);
</pre>

The full details on these fields are in [[Your_game_state_machine:_states.inc.php]].

But basically we have Player states, in which a human player has to perform an "action" by pressing some button in the UI or selecting some game item, which will trigger js handler, which will do an ajax call to the server.

To make it run we have to define all the handler functions that we referenced in states, which are - one function for state arguments argGiveCards, 4 functions for robot states (where the game performs some action)
and 1 function for player actions handling.
In Game.php, find 'Game state arguments' section and paste this in:
<pre>
function argGiveCards() {
return array ();
}
</pre>

This normally passes some parameters to states, but we don't need anything yet. It's good to have a placeholder there anyway, so we can fix it later.
Important: even when it's a stub, this function must return an array not a scalar.

Let's do stubs for other functions, find the game state actions section in Game.php file and insert these
<pre>
function stNewHand() {
// Take back all cards (from any location => null) to deck
$this->cards->moveAllCardsInLocation(null, "deck");
$this->cards->shuffle('deck');
// Deal 13 cards to each players
// Create deck, shuffle it and give 13 initial cards
$players = $this->loadPlayersBasicInfos();
foreach ( $players as $player_id => $player ) {
$cards = $this->cards->pickCards(13, 'deck', $player_id);
// Notify player about his cards
$this->notifyPlayer($player_id, 'newHand', '', array ('cards' => $cards ));
}
$this->setGameStateValue('alreadyPlayedHearts', 0);
$this->gamestate->nextState("");
}

function stNewTrick() {
// New trick: active the player who wins the last trick, or the player who own the club-2 card
// Reset trick color to 0 (= no color)
$this->setGameStateInitialValue('trickColor', 0);
$this->gamestate->nextState();
}

function stNextPlayer() {
// Active next player OR end the trick and go to the next trick OR end the hand
if ($this->cards->countCardInLocation('cardsontable') == 4) {
// This is the end of the trick
// Move all cards to "cardswon" of the given player
$best_value_player_id = $this->activeNextPlayer(); // TODO figure out winner of trick
$this->cards->moveAllCardsInLocation('cardsontable', 'cardswon', null, $best_value_player_id);

if ($this->cards->countCardInLocation('hand') == 0) {
// End of the hand
$this->gamestate->nextState("endHand");
} else {
// End of the trick
$this->gamestate->nextState("nextTrick");
}
} else {
// Standard case (not the end of the trick)
// => just active the next player
$player_id = $this->activeNextPlayer();
$this->giveExtraTime($player_id);
$this->gamestate->nextState('nextPlayer');
}
}

function stEndHand() {
$this->gamestate->nextState("nextHand");
}

</pre>
Important: All state actions game or player must end with state transition (or thrown exception). Also make sure it's ONLY one state transition,
if you accidentally fall through after state transition and do another one it will be a real mess and head scratching for long time.

Now find 'player actions' section and paste this code there
<pre>
function actPlayCard(int $card_id) {
$player_id = $this->getActivePlayerId();
throw new \BgaUserException($this->_("Not implemented: ") . "$player_id plays $card_id");
}
</pre>
We won't implement it yet but throw an exception which we will see if interaction is working properly

Now the game should start but it would not be any different than before because we have to implement actual interactions.
It's good to check if it's still working though (and if it was running before you have to exit because we changed state machine and normally it will break stuff). NOTE: When you play a card, you will not yet get the "Not implemented" message. That is added in the next section.

== Client - Server interactions ==

Now to implement things for real we have hook UI actions to ajax calls, and process notifications sent by the server.
So previously we hooked playCardOnTable right into js handler which caused client animation, in real game its a two
step operation. When user clicks on game element js client sends an ajax call to server, server processes it and updates database, server sends
notification in response, client hooks animations to server notification.

So in .js code replace onPlayerHandSelectionChanged with
<pre>
onPlayerHandSelectionChanged : function() {
var items = this.playerHand.getSelectedItems();

if (items.length > 0) {
var action = 'actPlayCard';
if (this.checkAction(action, true)) {
// Can play a card
var card_id = items[0].id;
this.bgaPerformAction(action, {
card_id : card_id,
});

this.playerHand.unselectAll();
} else if (this.checkAction('actGiveCards')) {
// Can give cards => let the player select some cards
} else {
this.playerHand.unselectAll();
}
}
},
</pre>

Now when you click on card you should get a server response: Not implemented...

Lets implement it, in Game.php
<pre>
function actPlayCard(int $card_id) {
$player_id = $this->getActivePlayerId();
$this->cards->moveCard($card_id, 'cardsontable', $player_id);
// XXX check rules here
$currentCard = $this->cards->getCard($card_id);
// And notify
$this->notifyAllPlayers('playCard', clienttranslate('${player_name} plays ${value_displayed} ${color_displayed}'), array (
'i18n' => array ('color_displayed','value_displayed' ),'card_id' => $card_id,'player_id' => $player_id,
'player_name' => $this->getActivePlayerName(),'value' => $currentCard ['type_arg'],
'value_displayed' => $this->values_label [$currentCard ['type_arg']],'color' => $currentCard ['type'],
'color_displayed' => $this->colors [$currentCard ['type']] ['name'] ));
// Next player
$this->gamestate->nextState('playCard');
}
</pre>

We get the card from client, we move it to the table (moveCard is hooked to database directly, its part of deck class),
we notify all players and we change state. What we are missing here is bunch of checks (rule enforcements), we will add it later.

Interesting part about this notify is that we use i18n array for strings that needs to be translated by client, so
they are sent as English text in notification, then client has to know which parameters needs translating.

On the client side .js we have to implement a notification handler to do the animation

<pre>
setupNotifications : function() {
console.log('notifications subscriptions setup');

const notifs = [
['newHand', 1],
['playCard', 100],
];

notifs.forEach((notif) => {
dojo.subscribe(notif[0], this, `notif_${notif[0]}`);
this.notifqueue.setSynchronous(notif[0], notif[1]);
});

},

notif_newHand : function(notif) {
// We received a new full hand of 13 cards.
this.playerHand.removeAll();

for ( var i in notif.args.cards) {
var card = notif.args.cards[i];
var color = card.type;
var value = card.type_arg;
this.playerHand.addToStockWithId(this.getCardUniqueId(color, value), card.id);
}
},

notif_playCard : function(notif) {
// Play a card on the table
this.playCardOnTable(notif.args.player_id, notif.args.color, notif.args.value, notif.args.card_id);
},
</pre>

Now it actually works through the server when you click on card - the move is recorded. If you test it now you will notice
after trick is done all cards remains on the table, but if you press F5 they would disappear, this is because
we updated database to pick-up the cards but did not send notification about it, so we need to send notification about it
and have a handler for it

So in Game.php file add notification in stNextPlayer function after moveAllCardsInLocation call:

<pre>
// Notify
// Note: we use 2 notifications here in order we can pause the display during the first notification
// before we move all cards to the winner (during the second)
$players = $this->loadPlayersBasicInfos();
$this->notifyAllPlayers( 'trickWin', clienttranslate('${player_name} wins the trick'), array(
'player_id' => $best_value_player_id,
'player_name' => $players[ $best_value_player_id ]['player_name']
) );
$this->notifyAllPlayers( 'giveAllCardsToPlayer','', array(
'player_id' => $best_value_player_id
) );
</pre>

And in .js file add 2 more notification handlers.

This is to subscribe in setupNotifications function
<pre>
const notifs = [
...
['trickWin', 1000],
['giveAllCardsToPlayer', 600],
];
</pre>

And these are handlers
<pre>
notif_trickWin : function(notif) {
// We do nothing here (just wait in order players can view the 4 cards played before they're gone.
},
notif_giveAllCardsToPlayer : function(notif) {
// Move all cards on table to given table, then destroy them
var winner_id = notif.args.player_id;
for ( var player_id in this.gamedatas.players) {
var anim = this.slideToObject('cardontable_' + player_id, 'overall_player_board_' + winner_id);
dojo.connect(anim, 'onEnd', function(node) {
dojo.destroy(node);
});
anim.play();
}
},
</pre>

So 'trickWin' notification does not do much except it will delay the processing of next notification by 1 second (1000 ms)
and it will log the message (that happens independently of what handler does).
<i>Note: if on the other hand you don't want to log but want to do something else, send an empty message</i>

Now after the trick you see all cards move towards the "player's stash".

== Scoring and End of game handling ==

Now we should calculate scoring and for that we need to actually track who wins the trick.
Trick is won by the player with highest card (no trump). We just need to remember what is trick suite.
For which we will use state variable 'trickColor' which we already conveniently created.

In Game.php file find the playCard function and add this before notify functions
$currentTrickColor = $this->getGameStateValue( 'trickColor' ) ;
if( $currentTrickColor == 0 )
$this->setGameStateValue( 'trickColor', $currentCard['type'] );

This will make sure we remember the first suit being played, now to use it modify the stNextPlayer function to fix our TODO comment
<pre>
function stNextPlayer() {
// Active next player OR end the trick and go to the next trick OR end the hand
if ($this->cards->countCardInLocation('cardsontable') == 4) {
// This is the end of the trick
$cards_on_table = $this->cards->getCardsInLocation('cardsontable');
$best_value = 0;
$best_value_player_id = null;
$currentTrickColor = $this->getGameStateValue('trickColor');
foreach ( $cards_on_table as $card ) {
// Note: type = card color
if ($card ['type'] == $currentTrickColor) {
if ($best_value_player_id === null || $card ['type_arg'] > $best_value) {
$best_value_player_id = $card ['location_arg']; // Note: location_arg = player who played this card on table
$best_value = $card ['type_arg']; // Note: type_arg = value of the card
}
}
}

// Active this player => he's the one who starts the next trick
$this->gamestate->changeActivePlayer( $best_value_player_id );

// Move all cards to "cardswon" of the given player
$this->cards->moveAllCardsInLocation('cardsontable', 'cardswon', null, $best_value_player_id);

// Notify
// ... same code here as before
</pre>

The scoring rule in the studio example code is huge multi-page function, for this tutorial we will make simplier.
Lets score -1 point per heart and call it a day. And game will end when somebody goes -100 or below.

As UI goes for scoring, the main thing to update is the scoring on the mini boards represented by stars, also
we want to show that in the log.
In addition scoring can be shown in [[Game_interface_logic:_yourgamename.js#Scoring_dialogs|Scoring Dialog]] using tableWindow notification, but it is a tutorial on its own and you can do it as homework (it is part of original heart game).

In .js file we need to add one more subscription and notification handler:
const notifs = [
...
['newScores', 1],
];
in setupNotifications

and
notif_newScores : function(notif) {
// Update players' scores
for ( var player_id in notif.args.newScores) {
this.scoreCtrl[player_id].toValue(notif.args.newScores[player_id]);
}
},
somewhere after. this.scoreCtrl is pre-existing object that shows the scoring and this function will update score values per player from notification argument

so in Game.php our stEndHand function will look like

<pre>
function stEndHand() {
// Count and score points, then end the game or go to the next hand.
$players = $this->loadPlayersBasicInfos();
// Gets all "hearts" + queen of spades

$player_to_points = array ();
foreach ( $players as $player_id => $player ) {
$player_to_points [$player_id] = 0;
}
$cards = $this->cards->getCardsInLocation("cardswon");
foreach ( $cards as $card ) {
$player_id = $card ['location_arg'];
// Note: 2 = heart
if ($card ['type'] == 2) {
$player_to_points [$player_id] ++;
}
}
// Apply scores to player
foreach ( $player_to_points as $player_id => $points ) {
if ($points != 0) {
$sql = "UPDATE player SET player_score=player_score-$points WHERE player_id='$player_id'";
$this->DbQuery($sql);
$heart_number = $player_to_points [$player_id];
$this->notifyAllPlayers("points", clienttranslate('${player_name} gets ${nbr} hearts and looses ${nbr} points'), array (
'player_id' => $player_id,'player_name' => $players [$player_id] ['player_name'],
'nbr' => $heart_number ));
} else {
// No point lost (just notify)
$this->notifyAllPlayers("points", clienttranslate('${player_name} did not get any hearts'), array (
'player_id' => $player_id,'player_name' => $players [$player_id] ['player_name'] ));
}
}
$newScores = $this->getCollectionFromDb("SELECT player_id, player_score FROM player", true );
$this->notifyAllPlayers( "newScores", '', array( 'newScores' => $newScores ) );

///// Test if this is the end of the game
foreach ( $newScores as $player_id => $score ) {
if ($score <= -100) {
// Trigger the end of the game !
$this->gamestate->nextState("endGame");
return;
}
}

$this->gamestate->nextState("nextHand");
}
</pre>

So it should more less work now, including end of game condition. Try to play it!

== Additional stuff ==

The following things were not implemented and can add them yourself by looking at the code of original hearts game:

* Remove debug code from setupNewGame to deal cards, cards are now dealt in stNewHand state handler
* Rule checking and rule enforcements in playCard function
* Start scoring with 100 points each and end when <= 0
* Fix scoring rules with Q of spades and 26 point reverse scoring
* First player one with 2 club
* Add progress handling
* Add statistics
* Add card exchange states
* Add game option to start with 75 points instead of 100

[[Category:Studio]]

Gamehelpginrummy

2024-11-02T11:25:40Z

Ufm:

Gamehelpginrummy

2024-11-02T11:24:16Z

Ufm:

Gamehelpginrummy

2024-10-20T06:04:17Z

Ufm:

Gamehelpginrummy

2024-10-20T06:03:55Z

Ufm:

Scrollmap

2024-10-20T01:47:30Z

Ufm: /* Scrollmap in action */

{{Studio_Framework_Navigation}}

In some games, players are building the main game area with tiles or cards and it has no boundaries.
This causes 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 is a BGA client side component to display an infinite game area. It supports Scrolling and Panning.
Scrolling - allows user to scroll area inside the view port using the buttons drawn on the top/bottom/left/right.
Panning - allows user to drag the surface area (using mouse).

== Scrollmap in action ==

Examples of game that use Scrollmap (try on BGA or watch):
* Carcassonne
* Saboteur
* Taluva

In these 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 use Panning (i.e drag'n'drop the game area to scroll).

'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document.

Check '''Alternative implementations of BGA modules''' of '''[[BGA Code Sharing]]''' for more information.

== How to use Scrollmap ==

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>

<div class="movetop"></div>
<div class="movedown"></div>
<div class="moveleft"></div>
<div class="moveright"></div>
</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.
Do not change position and width/height of map_surface - it suppose to fill be exactly as container size.

<pre>
/** Scrollable area **/

#map_container {
position: relative;
overflow: hidden;

width: 100%;
height: 400px;
}
#map_scrollable, #map_scrollable_oversurface {
position: absolute;
}
#map_surface {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: move;
}

/** This is some extra stuff to extend the container **/

#map_footer {
text-align: center;
}

/** 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>

Now in the Javascript file, add "ebg/scrollmap" as a dependency:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/scrollmap" /// <==== HERE
],
</pre>

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

<pre>
this.scrollmap = new ebg.scrollmap(); // declare an object (this can also go in constructor)
// Make map scrollable
this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') ); // use ids from template
this.scrollmap.setupOnScreenArrows( 150 ); // this will hook buttons to onclick functions with 150px scroll step

</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 two and only two places where you should place your elements 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 pan scroll ("map_surface"), 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 pan scroll 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.

The other layer is 'map_surface' - it is what user would use to pan scroll. If this div is not visible because 'map_scrollable_oversurface' covering it completely - panning will be impossible (unless you apply some css trickery, see 'Fall-through mouse events on oversurface' below).

By default, the game area (i.e. map_scrollable_oversurface) is centered on 0,0 coordinates.

Simple example of placing element (normally you would use slideObject and such...):
<pre>
dojo.create("div",{innerHTML: "hello" },"map_scrollable_oversurface");
</pre>

This is the layers of the scrollmap, it is not how it looks like, its just to visually demonstrate what is what:

[[File:Scrollmap.png]]

If you wondering on how to make this picture - I added transform: translateZ to layers to visually split them and removed visibily: hidden from the container to show that "map_scrollable" is the one that can grow without bounds and parts of it can be hidden because view port (the map_container) can be much smaller. Also you can see that map_scrollable_oversurface and map_scrollable are the layers that syncronized on position and size,
and map_surface is same size as map_container.

== Customizations ==

=== Disable move arrows ===

The buttons already defined in css and the buttons handler already defined in the scrollmap control just make sure you call function setupOnScreenArrows (and in .tpl file buttons have to be defined with exact these classes verbatim). If you don't want the buttons, do not call function setupOnScreenArrows() and remove them from template (you can also remove just some of them, i.e. only leave left and right).

=== 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>

=== Fall-through mouse events on oversurface ===
What if you have some non-square shapes on the surface and there is a lot of space in between the elemenets that can be
used to pan scrolling but it currently not possible to grab on to map_scrollable_oversurface?
To do that you have to make mouse click "fall-though" that layer, but stick on children. Add this to your css to solve this problem:

<pre>
#map_scrollable_oversurface {
pointer-events: none;
}
#map_scrollable_oversurface > *{
pointer-events: initial;
}

</pre>

=== Avoid scrolling on touch devices ===

When a scrollmap is used on touch devices (such as a smartphone), by default scrolling will scroll the entire page (and the elements in the scrollmap won't move).
To avoid this, simply add the following in your CSS file:

<pre>
#map_container {
touch-action: none;
}
</pre>

=== Zooming ===

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Zooming elements on the scrollmap can be difficult because the different layers need to stay aligned (and there are many layers, due to BGA's zoom feature, screen resolution, ...)

'''ggg_ggg.tpl'''

Add 2 elements for zooming in and out
<pre>
<div id="zoomplus"></div>
<div id="zoomminus"></div>
</pre>

'''ggg_ggg.js'''

Bind it to a zoom function
<pre>
setup: function(gamedatas) {
[...]
this.trl_zoom = 1;
dojo.connect($('zoomplus'), 'onclick', () => this.onZoomButton(0.1));
dojo.connect($('zoomminus'), 'onclick', () => this.onZoomButton(-0.1));
[...]
},

onZoomButton: function(deltaZoom) {
zoom = this.trl_zoom + deltaZoom;
this.trl_zoom = zoom <= 0.2 ? 0.2 : zoom >= 2 ? 2 : zoom;
dojo.style($('map_scrollable'), 'transform', 'scale(' + this.trl_zoom + ')');
dojo.style($('map_scrollable_oversurface'), 'transform', 'scale(' + this.trl_zoom + ')');
},

</pre>

Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code|this page]] for more information).

== API Reference ==
=== Constructor ===
;ebg.scrollmap()
:return newly created scrollmap object

=== Properties ===
no public properties
=== Methods ===
;create( container_div, undersurface_div, surface_div, onsurface_div )
:Object initializer, must be called before usage.
:Parameters:
::[HTMLElement] container_div - dom node of the container
::[HTMLElement] undersurface_div - dom node of the layer under the scrollable surface, called map_scrollable in the template example
::[HTMLElement] surface_div - dom node of the area inside the container that is used for panning
::[HTMLElement] onsurface_div - dom node of the layer above the scrollable surface, called map_scrollable_oversurface in the template example
:Note: this method also calles scrollto(0,0) which has animation, if you want to play with positioning you have to wait for it to finish (i.e. 350 ms for now).

;scroll( dx, dy [, duration [, delay ]])
:Scroll content using relative offset (animated)
:Parameters:
::[Number] dx - x offset
::[Number] dy - y offset
::[Number] duration - animation duration, default is 350
::[Number] delay - animation duration, default is 0

;scrollto( x, y [, duration [, delay ]])
:Scroll the board to make it centered on given position (0,0 will scroll to center)
:Parameters:
::[Number] x - position relative to center
::[Number] y - position relative to center
::[Number] duration - animation duration, default is 350
::[Number] delay - animation duration, default is 0

;disableScrolling()
:Disable scrolling (that disable both scrolling and panning)

;enableScrolling()
:Enable scrolling (re-enable scrolling)

[[Category:Studio]]

Scrollmap

2024-10-20T01:46:26Z

Ufm: /* Scrollmap in action */

{{Studio_Framework_Navigation}}

In some games, players are building the main game area with tiles or cards and it has no boundaries.
This causes 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 is a BGA client side component to display an infinite game area. It supports Scrolling and Panning.
Scrolling - allows user to scroll area inside the view port using the buttons drawn on the top/bottom/left/right.
Panning - allows user to drag the surface area (using mouse).

== Scrollmap in action ==

Examples of game that use Scrollmap (try on BGA or watch):
* Carcassonne
* Saboteur
* Taluva

In these 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 use Panning (i.e drag'n'drop the game area to scroll).

'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document. Check 'Alternative implementations of BGA modules
' of [[BGA Code Sharing]] for more information.

== How to use Scrollmap ==

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>

<div class="movetop"></div>
<div class="movedown"></div>
<div class="moveleft"></div>
<div class="moveright"></div>
</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.
Do not change position and width/height of map_surface - it suppose to fill be exactly as container size.

<pre>
/** Scrollable area **/

#map_container {
position: relative;
overflow: hidden;

width: 100%;
height: 400px;
}
#map_scrollable, #map_scrollable_oversurface {
position: absolute;
}
#map_surface {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: move;
}

/** This is some extra stuff to extend the container **/

#map_footer {
text-align: center;
}

/** 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>

Now in the Javascript file, add "ebg/scrollmap" as a dependency:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/scrollmap" /// <==== HERE
],
</pre>

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

<pre>
this.scrollmap = new ebg.scrollmap(); // declare an object (this can also go in constructor)
// Make map scrollable
this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') ); // use ids from template
this.scrollmap.setupOnScreenArrows( 150 ); // this will hook buttons to onclick functions with 150px scroll step

</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 two and only two places where you should place your elements 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 pan scroll ("map_surface"), 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 pan scroll 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.

The other layer is 'map_surface' - it is what user would use to pan scroll. If this div is not visible because 'map_scrollable_oversurface' covering it completely - panning will be impossible (unless you apply some css trickery, see 'Fall-through mouse events on oversurface' below).

By default, the game area (i.e. map_scrollable_oversurface) is centered on 0,0 coordinates.

Simple example of placing element (normally you would use slideObject and such...):
<pre>
dojo.create("div",{innerHTML: "hello" },"map_scrollable_oversurface");
</pre>

This is the layers of the scrollmap, it is not how it looks like, its just to visually demonstrate what is what:

[[File:Scrollmap.png]]

If you wondering on how to make this picture - I added transform: translateZ to layers to visually split them and removed visibily: hidden from the container to show that "map_scrollable" is the one that can grow without bounds and parts of it can be hidden because view port (the map_container) can be much smaller. Also you can see that map_scrollable_oversurface and map_scrollable are the layers that syncronized on position and size,
and map_surface is same size as map_container.

== Customizations ==

=== Disable move arrows ===

The buttons already defined in css and the buttons handler already defined in the scrollmap control just make sure you call function setupOnScreenArrows (and in .tpl file buttons have to be defined with exact these classes verbatim). If you don't want the buttons, do not call function setupOnScreenArrows() and remove them from template (you can also remove just some of them, i.e. only leave left and right).

=== 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>

=== Fall-through mouse events on oversurface ===
What if you have some non-square shapes on the surface and there is a lot of space in between the elemenets that can be
used to pan scrolling but it currently not possible to grab on to map_scrollable_oversurface?
To do that you have to make mouse click "fall-though" that layer, but stick on children. Add this to your css to solve this problem:

<pre>
#map_scrollable_oversurface {
pointer-events: none;
}
#map_scrollable_oversurface > *{
pointer-events: initial;
}

</pre>

=== Avoid scrolling on touch devices ===

When a scrollmap is used on touch devices (such as a smartphone), by default scrolling will scroll the entire page (and the elements in the scrollmap won't move).
To avoid this, simply add the following in your CSS file:

<pre>
#map_container {
touch-action: none;
}
</pre>

=== Zooming ===

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Zooming elements on the scrollmap can be difficult because the different layers need to stay aligned (and there are many layers, due to BGA's zoom feature, screen resolution, ...)

'''ggg_ggg.tpl'''

Add 2 elements for zooming in and out
<pre>
<div id="zoomplus"></div>
<div id="zoomminus"></div>
</pre>

'''ggg_ggg.js'''

Bind it to a zoom function
<pre>
setup: function(gamedatas) {
[...]
this.trl_zoom = 1;
dojo.connect($('zoomplus'), 'onclick', () => this.onZoomButton(0.1));
dojo.connect($('zoomminus'), 'onclick', () => this.onZoomButton(-0.1));
[...]
},

onZoomButton: function(deltaZoom) {
zoom = this.trl_zoom + deltaZoom;
this.trl_zoom = zoom <= 0.2 ? 0.2 : zoom >= 2 ? 2 : zoom;
dojo.style($('map_scrollable'), 'transform', 'scale(' + this.trl_zoom + ')');
dojo.style($('map_scrollable_oversurface'), 'transform', 'scale(' + this.trl_zoom + ')');
},

</pre>

Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code|this page]] for more information).

== API Reference ==
=== Constructor ===
;ebg.scrollmap()
:return newly created scrollmap object

=== Properties ===
no public properties
=== Methods ===
;create( container_div, undersurface_div, surface_div, onsurface_div )
:Object initializer, must be called before usage.
:Parameters:
::[HTMLElement] container_div - dom node of the container
::[HTMLElement] undersurface_div - dom node of the layer under the scrollable surface, called map_scrollable in the template example
::[HTMLElement] surface_div - dom node of the area inside the container that is used for panning
::[HTMLElement] onsurface_div - dom node of the layer above the scrollable surface, called map_scrollable_oversurface in the template example
:Note: this method also calles scrollto(0,0) which has animation, if you want to play with positioning you have to wait for it to finish (i.e. 350 ms for now).

;scroll( dx, dy [, duration [, delay ]])
:Scroll content using relative offset (animated)
:Parameters:
::[Number] dx - x offset
::[Number] dy - y offset
::[Number] duration - animation duration, default is 350
::[Number] delay - animation duration, default is 0

;scrollto( x, y [, duration [, delay ]])
:Scroll the board to make it centered on given position (0,0 will scroll to center)
:Parameters:
::[Number] x - position relative to center
::[Number] y - position relative to center
::[Number] duration - animation duration, default is 350
::[Number] delay - animation duration, default is 0

;disableScrolling()
:Disable scrolling (that disable both scrolling and panning)

;enableScrolling()
:Enable scrolling (re-enable scrolling)

[[Category:Studio]]

Scrollmap

2024-10-20T01:46:10Z

Ufm:

{{Studio_Framework_Navigation}}

In some games, players are building the main game area with tiles or cards and it has no boundaries.
This causes 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 is a BGA client side component to display an infinite game area. It supports Scrolling and Panning.
Scrolling - allows user to scroll area inside the view port using the buttons drawn on the top/bottom/left/right.
Panning - allows user to drag the surface area (using mouse).

== Scrollmap in action ==

Examples of game that use Scrollmap (try on BGA or watch):
* Carcassonne
* Saboteur
* Taluva

In these 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 use Panning (i.e drag'n'drop the game area to scroll).

'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document. Check 'Alternative implementations of BGA modules
' of [[BGA Code Sharing]] for more information.

== How to use Scrollmap ==

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>

<div class="movetop"></div>
<div class="movedown"></div>
<div class="moveleft"></div>
<div class="moveright"></div>
</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.
Do not change position and width/height of map_surface - it suppose to fill be exactly as container size.

<pre>
/** Scrollable area **/

#map_container {
position: relative;
overflow: hidden;

width: 100%;
height: 400px;
}
#map_scrollable, #map_scrollable_oversurface {
position: absolute;
}
#map_surface {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: move;
}

/** This is some extra stuff to extend the container **/

#map_footer {
text-align: center;
}

/** 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>

Now in the Javascript file, add "ebg/scrollmap" as a dependency:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/scrollmap" /// <==== HERE
],
</pre>

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

<pre>
this.scrollmap = new ebg.scrollmap(); // declare an object (this can also go in constructor)
// Make map scrollable
this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') ); // use ids from template
this.scrollmap.setupOnScreenArrows( 150 ); // this will hook buttons to onclick functions with 150px scroll step

</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 two and only two places where you should place your elements 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 pan scroll ("map_surface"), 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 pan scroll 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.

The other layer is 'map_surface' - it is what user would use to pan scroll. If this div is not visible because 'map_scrollable_oversurface' covering it completely - panning will be impossible (unless you apply some css trickery, see 'Fall-through mouse events on oversurface' below).

By default, the game area (i.e. map_scrollable_oversurface) is centered on 0,0 coordinates.

Simple example of placing element (normally you would use slideObject and such...):
<pre>
dojo.create("div",{innerHTML: "hello" },"map_scrollable_oversurface");
</pre>

This is the layers of the scrollmap, it is not how it looks like, its just to visually demonstrate what is what:

[[File:Scrollmap.png]]

If you wondering on how to make this picture - I added transform: translateZ to layers to visually split them and removed visibily: hidden from the container to show that "map_scrollable" is the one that can grow without bounds and parts of it can be hidden because view port (the map_container) can be much smaller. Also you can see that map_scrollable_oversurface and map_scrollable are the layers that syncronized on position and size,
and map_surface is same size as map_container.

== Customizations ==

=== Disable move arrows ===

The buttons already defined in css and the buttons handler already defined in the scrollmap control just make sure you call function setupOnScreenArrows (and in .tpl file buttons have to be defined with exact these classes verbatim). If you don't want the buttons, do not call function setupOnScreenArrows() and remove them from template (you can also remove just some of them, i.e. only leave left and right).

=== 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>

=== Fall-through mouse events on oversurface ===
What if you have some non-square shapes on the surface and there is a lot of space in between the elemenets that can be
used to pan scrolling but it currently not possible to grab on to map_scrollable_oversurface?
To do that you have to make mouse click "fall-though" that layer, but stick on children. Add this to your css to solve this problem:

<pre>
#map_scrollable_oversurface {
pointer-events: none;
}
#map_scrollable_oversurface > *{
pointer-events: initial;
}

</pre>

=== Avoid scrolling on touch devices ===

When a scrollmap is used on touch devices (such as a smartphone), by default scrolling will scroll the entire page (and the elements in the scrollmap won't move).
To avoid this, simply add the following in your CSS file:

<pre>
#map_container {
touch-action: none;
}
</pre>

=== Zooming ===

'''Ingredients:''' ggg_ggg.tpl, ggg.js

Zooming elements on the scrollmap can be difficult because the different layers need to stay aligned (and there are many layers, due to BGA's zoom feature, screen resolution, ...)

'''ggg_ggg.tpl'''

Add 2 elements for zooming in and out
<pre>
<div id="zoomplus"></div>
<div id="zoomminus"></div>
</pre>

'''ggg_ggg.js'''

Bind it to a zoom function
<pre>
setup: function(gamedatas) {
[...]
this.trl_zoom = 1;
dojo.connect($('zoomplus'), 'onclick', () => this.onZoomButton(0.1));
dojo.connect($('zoomminus'), 'onclick', () => this.onZoomButton(-0.1));
[...]
},

onZoomButton: function(deltaZoom) {
zoom = this.trl_zoom + deltaZoom;
this.trl_zoom = zoom <= 0.2 ? 0.2 : zoom >= 2 ? 2 : zoom;
dojo.style($('map_scrollable'), 'transform', 'scale(' + this.trl_zoom + ')');
dojo.style($('map_scrollable_oversurface'), 'transform', 'scale(' + this.trl_zoom + ')');
},

</pre>

Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code|this page]] for more information).

== API Reference ==
=== Constructor ===
;ebg.scrollmap()
:return newly created scrollmap object

=== Properties ===
no public properties
=== Methods ===
;create( container_div, undersurface_div, surface_div, onsurface_div )
:Object initializer, must be called before usage.
:Parameters:
::[HTMLElement] container_div - dom node of the container
::[HTMLElement] undersurface_div - dom node of the layer under the scrollable surface, called map_scrollable in the template example
::[HTMLElement] surface_div - dom node of the area inside the container that is used for panning
::[HTMLElement] onsurface_div - dom node of the layer above the scrollable surface, called map_scrollable_oversurface in the template example
:Note: this method also calles scrollto(0,0) which has animation, if you want to play with positioning you have to wait for it to finish (i.e. 350 ms for now).

;scroll( dx, dy [, duration [, delay ]])
:Scroll content using relative offset (animated)
:Parameters:
::[Number] dx - x offset
::[Number] dy - y offset
::[Number] duration - animation duration, default is 350
::[Number] delay - animation duration, default is 0

;scrollto( x, y [, duration [, delay ]])
:Scroll the board to make it centered on given position (0,0 will scroll to center)
:Parameters:
::[Number] x - position relative to center
::[Number] y - position relative to center
::[Number] duration - animation duration, default is 350
::[Number] delay - animation duration, default is 0

;disableScrolling()
:Disable scrolling (that disable both scrolling and panning)

;enableScrolling()
:Enable scrolling (re-enable scrolling)

[[Category:Studio]]

Studio

2024-10-17T05:24:12Z

Ufm: Manually reverting the page

{{Studio_Framework_Navigation}}

[[File:Bga_studio_small.jpg|frameless|300px]]

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

__TOC__

== What is Board Game Arena Studio? ==

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

It is open to any gamer with software development skills :)

BGA Studio website: https://studio.boardgamearena.com

Original announcement on BGA forum: https://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] (or [http://en.doc.boardgamearena.com/images/5/58/1-why-developing.pdf ‎Download as PDF])
* [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] (or [http://en.doc.boardgamearena.com/images/1/1e/2-8-steps-to-realize.pdf Download as PDF])
* [http://www.slideshare.net/boardgamearena/the-bga-framework-at-a-glance The BGA Framework at a glance] (or [http://en.doc.boardgamearena.com/images/7/79/3-thebgaframework.pdf Download as PDF])
* [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine Focus on BGA game state machine] (or [http://en.doc.boardgamearena.com/images/9/98/4-gamestates.pdf Download as PDF])
* [http://www.slideshare.net/boardgamearena/bga-studio-guidelines BGA developers guidelines] (or [http://en.doc.boardgamearena.com/images/7/76/5-guidelines.pdf ‎Download as PDF])

== 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 strongly advise you to take one of these game creation tutorials:
* [[Tutorial reversi]] ('''recommended''', closest to the actual BGA implementation and maintained by the BGA team) - an abstract strategy game played on an 8×8 uncheckered board for 2 players
* [[Tutorial gomoku]] - an abstract strategy game tic-tac-toe style for 2 players
* [[Tutorial hearts]] - a card game for 4 players

Then start editing files and see what happens! ;)

Once you're done with tutorials, you can start a real game (or join existing project)
* [[Create a game in BGA Studio: Complete Walkthrough]]

If you have any questions, please check out the [[Studio FAQ]] or [[Contact BGA Studio]].

To search wiki pages on studio enter this text in search bar:
"Category:Studio" white rabbit
That is if you want to search for white rabbit

== 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 (Server side) ====

* [[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 (Client side) ====

* [[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]]
* [[Your game mobile version]]

==== Other components ====

* [[Translations]] (how to make your game translatable)
* [[Options_and_preferences:_gameoptions.json,_gamepreferences.json|Game Options and Preferences]]
* [[Game meta-information: gameinfos.inc.php]]
* [[Game replay]]
* [[3D]]

=== BGA Studio game components reference ===

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

JS:

* [[Counter]]: a JS component to manage a counter that can increase/decrease (ex: player's score).
* [[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.
* [[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).
* [[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.
* [[Anti-Stock]]: Code snippets in vanilla JS/HTML5 to do what stock does (that is if you cannot beat Stock into submission)

PHP:
* [[Deck]]: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).

Reference for classes in game class hierarchy

* [[Table]]: a PHP class that you inherit from for the game php

=== BGA Studio user guide ===

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

Lifecycle

* [[BGA game Lifecycle]]
* [[Create a game in BGA Studio: Complete Walkthrough]]
* [[Pre-release checklist]] - Go throught this list if you think you done development
* [[Post-release phase]]

Tools and Advice
* [[BGA Studio Guidelines]]
* [[Tutorials checklist]]
* [[I wish I knew this when I started]] - one liners on most common missed features, mistakes, etc with further doc references
* [[Tools and tips of BGA Studio]] - Tips and instructions on setting up development environment
** [[Setting up BGA Development environment using VSCode]]
** [[Practical debugging]] - Tips focused on debugging
** [[Testing by developer]]
** [[Studio logs]] - Instructions for log access
** [[Troubleshooting]] - Most common "I am really stuck" situations
* [[BGA Studio Cookbook]] - Tips and instructions on using API's, libraries and frameworks
** [[Using Vue]] - work-in-progress guide on using the modern framework Vue.js to create a game
** [[Using Typescript and Scss]] - How to auto-build Typescript and SCSS files to make your code cleaner
** [[BGA Type Safe Template]] - Setting up a fully typed project using typescript and more!
** [[Bots and Artificial Intelligence]] - How to add AI/Bots to the game
* [[Studio FAQ]]

Sharing
* [[Common board game elements image resources]] - Dice, meeples, cubes, etc
* [[BGA Code Sharing]] - Shared resources, projects on git hub, common code, other links

== Software Versions ==

Versions currently used by BGA framework:

* Dojo Toolkit 1.15
* PHP: 8.2
* SQL: MySQL 5.7
* JS/CSS/HTML: limited by what minimization tools support: [[Game_interface_logic:_yourgamename.js#Javascript_minimization_.28after_July_2020.29|JS minimization]]
* Font Awesome: 4.7 https://fontawesome.com/v4.7/icons/ (available as <code><nowiki><i class="fa fa-clock" /></nowiki></code>)
* Font Awesome: 6.4.0 https://fontawesome.com/v6/search?o=r&m=free (available as <code><nowiki><i class="fa6 fa6-clock" /></nowiki></code>)

=== PHP Extensions Used ===

The following PHP extensions are - as of May 8th, 2022 - in use in BGA Studio and available:

date, libxml, openssl, pcre, zlib, filter, hash, Reflection, SPL, session, standard, sodium, apache2handler, mysqlnd, PDO, xml, apcu, bz2, calendar, ctype, curl, dom, mbstring, FFI, fileinfo, ftp, gd, gettext, gmp, iconv, igbinary, json, exif, msgpack, mysqli, pdo_mysql, apc, posix, readline, shmop, SimpleXML, sockets, sysvmsg, sysvsem, sysvshm, tokenizer, v8js, xmlreader, xmlwriter, xsl, zip, Phar, memcached, Zend OPcache

== Other resources ==

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

[https://studio.boardgamearena.com/bugs Bug tracking system FOR STUDIO issues and APIs]

DISCORD chat server/room invite link https://discord.gg/YxEUacY if it does not work check this topic https://forum.boardgamearena.com/viewtopic.php?f=12&t=17403&hilit=discord

Developer BLOGS https://bga-devs.github.io/blog/

[[Contact BGA Studio]]

[[Category:Studio]]

Tips tikal

2024-10-17T05:23:33Z

Ufm: Blanked the page

Tips botanicus

2024-10-17T05:23:11Z

Ufm: Blanked the page

Tips bonsai

2024-10-17T05:23:06Z

Ufm: Blanked the page

Https://boardgamearena.com/delet6/tikal?table=576469831

2024-10-17T05:22:47Z

Ufm: Blanked the page

Gamehelpdungeonrummy

2024-10-09T04:29:15Z

Ufm:

==Overview==

This is a Co-operative melding game where the Runs and Sets you create defeat monsters in a dungeon and activate special character abilities. Can your party of misfits defeat the final boss?

==Turn==

1. TAKE DAMAGE from the current monster for the amount of damage or effect shown on its top left.

::~ If this kills you, then the game immediately ends in defeat!

2. DRAW A CARD either blind from your deck or one from the graveyard.

3. REFRESH BOOTS exhausted during your previous turn

4. PLAY/MOVE CARDS

::~ Play Cards, Activate Boots, Activate Treasure, and Attack, each done as many times as you wish or are able to in any order

5. DISCARD 1 card from your hand to the Graveyard.

::~ If the Graveyard now contains 7+ cards, distribute 7 damage amongst the players in the desired amounts, then move all graveyard cards to trash.

6. DRAW 7 new cards if you end your turn with an empty hand. Otherwise, your turn is over.

==Play a Card==

RUNS/SEQUENCES

You can play a run/sequence of cards where Aces can either be high or low, but the same suit cannot be next to itself in the run however can occur multiple times e.g. red-green-red is ok, but red-red-green is not

SETS

You can play a set/match where each card is of the same number but different suit, as such the highest set length is 4

BOOTS

You can exhaust a Boot to use a card from the top of another player's deck.

WILDS

2's can be used as a 2 or Wild Number but retains its color. Sets and Runs can only contain a single wild ~ i.e. 1-2-3-2 is valid. If a 2 is already in a set/run, you can convert it to a Wild and move it within the same set/run without paying a boot.

===Activate Boots===

Exhaust 1 Boot to use the top card of another player's deck

Exhaust 1 Boot to move 1 card from one set/run to another

Exhaust 2 Boots to swap 2 cards in different sets/runs

==Activate Treasure==

Discard a Treasure card to use its effect

==Attack==

If a set/run has at least 3 cards in it, it can be used to attack: Remove the set/run cards from the game and deal damage to the monster equal to the number of cards removed.

::~ Be aware that some monsters can only be damaged if certain conditions are met!

If a set/run has at least 7 cards in it (a canasta), deal an extra 3 damage to the monster and gain 3 extra Mana.

SPECIAL ABILITIES: Total the diamond-shaped Mana symbols in the completed set/run plus any Canasta bonus entitled to. Gain that many Class tokens for the character whose play area the set/run was completed in. You may spend the tokens to activate the character's special ability. The tokens are stored on the character card until played. A character can never have more than 7 Class tokens.

If the monster has enough damage on it to defeat it, it is defeated, however some monsters have multiple phases with different health &/or conditions which must be defeated in order.

Monster cards show a number of treasure chests on the top right corner, which is how much Treasure is looted from them once finally defeated.

Note: Even if the set/run does no damage, you can still attack ~ to clear your play area and gain more Mana and thus Class Tokens.

Also note that as this is just one action. It is possible to start more sets/runs after the Attack.

==Class Tokens==

BARBARIAN (red) can use a Shield Token to either prevent 1 incoming damage to itself OR transfer 2 damage meant for another character to itself instead. The barbarian has twice as much health as the other characters.

CLERIC (green) can use its Healing Tokens to remove damage from any character.

MAGE (yellow) can use its Draw Token to allow any character to draw a card from their deck or the Graveyard.

BARD (blue) can use its Wild Token to any card in hand, in play, or on top of a companion's deck. You can't use the mana on a card with a wild token on it, and a meld may not have two or more wilds.

==Game End==

If a character dies, the players lose!

If the boss is defeated, the players win!

Summarised by https://boardgamearena.com/player?id=90078516

Gamehelpcrisps

2024-09-15T02:34:50Z

Ufm:

==Overview==

The player who finishes playing their hand first in a round wins that round, and immediately wins when they win 3 rounds.

[[https://boardgamearena.com/tutorial?game=crisps&tutorial=1701 Fast tutorial]]

==Start of Round==

The player with the lowest score starts the round.

If tied, the player who went first least recently starts.

====Card Deal====

The deck contains 4 copies each of 2-10 plus four Queens.

Each player then receives 12 cards.

4 Cards are removed from the round blind.

====Turn====

There are 4 ordinary and 2 special sets/run:

====== '''Ordinary combinations'''======

- Single
- Pair
- Run of Singles (minimum 3)
- Run of Pairs (minimum 2 pairs / 4 cards)

====== '''Special combinations'''======

- Three of a kind
- Four of a kind

A Queen CANNOT be used in a Run.

The first player can play any type they wish.

The remaining players either follow or pass, this continues until someone passes or someone empties their hand.

If you Follow with an Ordinary, it must be the same type of Ordinary, it must be the same Length of Ordinary, it must be equal or higher rank.

If you Follow with a Special, the previous play MUST contain a Queen, otherwise you have to Follow with Ordinary. In addition, a Special may follow a Special if either it contains more cards OR the same quantity but a higher rank.

====Round End====

If the round ends with someone passing, the player just before them can either take the faceup card set aside at the start or a blind deck card, after which the passing player has to take the card from the other option.

If the round ends with someone emptying their hand, they score 1 point.

If Game End isn't triggered, start a new round.

====Game End====

The game ends as soon as a player scores 3 points.

== Options ==

- '''No face-up draw''': After someone passes, both players draw a card from the deck face-down.

- '''Special rank runs''': Qs are replaced to Js. Unlike Qs, Js are consecutive to 10s and can be used in runs.

- '''Automatic turn skip''': The game checks only public information to determine whether a player has any chance of beating the current combination regardless of the cards in hand. If all relevant higher cards are discarded already, the turn is skipped automatically.

Game meta-information: gameinfos.jsonc

2024-09-10T05:35:10Z

Ufm: /* Losers not ranked between themselves */

{{Studio_Framework_Navigation}}

__TOC__

== Overview ==

From this file, you can edit the various meta-information of your game.

After modifying the file, don't forget to click on "Reload game informations" from the Control Panel so that the changes can be taken into account.

Note: if you break gameinfos and cannot load the management page, then reload using the direct URL: https://studio.boardgamearena.com/admin/studio/reloadGameInfos.html?game= (with your game name at the end of url).

Most of the information provided in this file is self-explanatory.

See sections below for specific cases.

==Publisher==

These fields should match the publisher of the game. In the case of a public domain name, they should be left empty (empty string)

==Beta==

You are not allowed to set the "'''is_beta'''" to 0 before the game has been released on BGA and stabilized.
==Time Profiles==
'''fast/medium/slow_additional_time''': please set high values here: after the game has been released, there is a process that adjusts these values to match the real game duration. Adjustment starts when the game enters beta, after that these have no effect, and require admin intervention to change.

==Number of players==

'''players'''
'players' => array( 3, 4, 6 ),

*during the first step of development of a game, it is recommended to have a "1 player" configuration: it is much easier to start/stop a game this way, as you don't need to switch players.
*if you change the minimum number of players from 1 to 2, for example, make sure the new tables you create are not restricted from 1 to 1 player otherwise when you create a new table and this account setting is used, there will be a conflict with the new minimum number of players allowed and you will be blocked from creating the game.
But you can also unblock yourself by changing the number of players again, launching a game with a larger number, and then getting back to the number you want.

'''suggest_player_number''' / '''not_recommend_player_number'''
'suggest_player_number' => 3,
'not_recommend_player_number' => array( 6 ),

Don't specify anything here (null) if there is no configuration that is REALLY better/worse than another one. You can check player's poll on BoardGameGeek game page if you have any doubt. Note that there can be at most one suggested player count (provide either null or a single number), but there can be several not recommended player counts (provide either null or an array of values).

Another reason to leave it blank unless there is really strong reason to do so is that suggest_player_number also has an implication on the ELO calculation, whereby the K-factor is multiplied by the number of players up to a maximum of this value (or, no max if it's not provided). That is to say, a 6-player game with a suggestion of 3-players will have ELO calculated as if it were a 3-player game.

'''Important exception:''' in the automatic lobby, if 'suggest_player_number' is not specified, the system will try first the lowest. So if the lowest player number is not compatible with the default options for your game (especially if there is a Solo mode that can only be played in training mode) you have to specify a suggest_player_number of your choice, so that players launching a game in the automatic lobby without checking the option don't get an error with the default configuration.

==Colors==

'''player_colors'''
'player_colors' => array( "ff0000", "008000", "0000ff", "ffa500", "ffffff" ),

This array defines the default player colors, theoretically this can be bigger then maximum number of players but you have to support all of the in your game.
Your setupNewGame in php is responsible for attributing these values to players. See section "Player color preferences" in [[Main_game_logic:_yourgamename.game.php]] for details.

== Minimum screen size ==
The settings to specify mobile (or small desktop) screen size if detailled here:
https://en.doc.boardgamearena.com/Your_game_mobile_version

== Losers not ranked between themselves==

By default, all player are ranked, but in some games, the rules say that all non-winners are losers and not ranked between themselves. You can set this option to true so that for your game, there are only winners and losers, without a full ranking of all players.

The score in this case should be the same for the winners and 0 for the losers.

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
'''Warning: Do not use this option in 2-player games, co-op games, or games where perfect ties are frequent, as ELO will not change when everyone is perfectly tied (including tiebreakers).'''
</div>

// If in the game, all losers are equal (no score to rank them or explicit in the rules that losers are not ranked between them), set this to true
// The game end result will display "Winner" for the 1st player and "Loser" for all other players
'losers_not_ranked' => false,

'''Note''': In some team games like Tichu, Spades, and Belote, players do not gain or lose ELO by teammates. (Hover over the ELO changes to find 'Teammate: -100%')

To activate this modifierfor your game, please contact a BGA admin (<code>hardcoded_team_games</code> must be enabled manually).

<b style="color:darkred">Warning:</b> This modifier should not be applied to co-op games or games where 3 or more parties can compete each other (e.g. individual mode with 3 or more players, 2v2v2 6 player mode, and etc.).

==Disable player rotation in case of rematch==

By default, in case of a rematch players are rotated so that the first player changes. If for your game it's better to always have a random player order you can change this option.

// When doing a rematch, the player order is swapped using a "rotation" so the starting player is not the same
// If you want to disable this, set this to true (even if the comment in your game file say the opposite).
'disable_player_order_swap_on_rematch' => false,

==Deprecated fields==

* Game designer (<code>designer</code>)
* Game artist (<code>artist</code>)
* Year (<code>year</code>)
* Tags (<code>tags</code>)
* Game presentation (<code>presentation</code>)
* Game page warning (<code>gamepanel_page_warning</code>)
* Custom "buy this game" button (<code>custom_buy_button</code>)

'''⚠ Note''': these fields are <b style="color:darkred">no longer read from this file</b>; these are now managed via the [[Game_metadata_manager|Game Metadata Manager]].

==Tie breaker description==
Describe tie breaker score calculation (player_score_aux in player table).

Important: This is used in the javascript too, which is automatically generated. Using newlines in here will cause errors in the javascript, which will cause the game to not load.

Example:
'tie_breaker_description' => totranslate("Number of remaining cards in hand"),

== Multiple tie breaker management ==

If your game has multiple tie breakers, here is what you should do.

Let's take this example: "In case of a tie, the winner is the game with the most remaining money, then number of buildings built, then number of cards in your hand".

In this example, your "player_score_aux" field might be calculated like this:

10000 * (remaining_money ) + 100 * (buildings_built) + (number_of_cards)

In this case, you should add the following in gameinfos.inc.php:

'tie_breaker_split' => array( 10000, 100 , 1 ),

It means that the first tie breaker has been multiplied by 10000, the second by 100, and the third by 1.

Using this, the result screen will be adapted to show exactly what is needed. For example:
* When 2 players are tied, it will show their remaining money.
* If their remaining money are equal, it will show the number of building built in addition to the remaining money.
*If these two tie breaker are still the same, it will show the 3 tie breaking values.

==Language dependency==

If you have a game that is language dependent, you can use the option described here: [[Main_game_logic:_yourgamename.game.php#Language_dependent_games_API]]

== Coop Elo Mode==

For cooperative games, by default players will earn as many rating points as the score. Games ended with a positive score counts as wins, and scores of 0 or below count as losses.

For games where there is no or little variable difficulty (such as for example Bandido) the fixed amount of score can be assigned across all settings. However, for all coop games where we have options to change the difficulty level and/or where the score reached indicates a higher level of skill and/or where the number of players has a significant impact on the difficulty, the final score should be adjusted according to the difficulty level and the number of players.

If needed, a reference scale for Elo points (between 1300 and 2500) can be set up. Players regularly winning with a specific difficulty setting will have their Elo nearing this value asymptotically over time. For this, you can set up the coop_elo_mode parameter.

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
'''Warning: While this can reflect player skills more precisely compared to flat rating gain, this parameter is generally not recommended as players may abandon losing games or avoid new players to prevent rating loss.'''
</div>

Related discussion:

https://forum.boardgamearena.com/viewtopic.php?f=3&t=24363

https://boardgamearena.com/forum/viewtopic.php?t=32289

Here is an example using options and win/loss (score 1/0):

'coop_elo_mode' => [
'type' => 'points_references',
'references' => [
// Difficulty 1
['players_nbr' => 2, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 2, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1470]],
['players_nbr' => 3, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1350]],
['players_nbr' => 3, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 4, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 4, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1470]],
// Difficulty 2
['players_nbr' => 2, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 2, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 3, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1450]],
['players_nbr' => 3, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 4, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 4, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
// Difficulty 3
['players_nbr' => 2, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 2, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1910]],
['players_nbr' => 3, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 3, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 4, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 4, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1910]],
// Difficulty 4
['players_nbr' => 2, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 2, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 2120]],
['players_nbr' => 3, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1640]],
['players_nbr' => 3, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 4, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 4, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 2120]],
// Difficulty 5
['players_nbr' => 2, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 2, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 2340]],
['players_nbr' => 3, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1740]],
['players_nbr' => 3, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 4, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 4, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 2340]],
],
],

Here is an example using different scoring values to indicate the level of difficulty mastered by the players winning the game:

'coop_elo_mode' => array(
'type' => 'points_references',
'references' => array(
array(
'players_nbr' => 2,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1350,
2 => 1425,
3 => 1500,
4 => 1576,
5 => 1651,
6 => 1727,
7 => 1802,
8 => 1878,
9 => 1953,
10 => 2029,
11 => 2104,
12 => 2180
)
),
array(
'players_nbr' => 3,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1400,
2 => 1470,
3 => 1541,
4 => 1612,
5 => 1683,
6 => 1754,
7 => 1825,
8 => 1895,
9 => 1966,
10 => 2018,
11 => 2095,
12 => 2250
)
),
array(
'players_nbr' => 4,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1430,
2 => 1505,
3 => 1580,
4 => 1655,
5 => 1730,
6 => 1805,
7 => 1880,
8 => 1955,
9 => 2030,
10 => 2105,
11 => 2180,
12 => 2330
)
),
array(
'players_nbr' => 5,
// 'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1480,
2 => 1558,
3 => 1636,
4 => 1714,
5 => 1792,
6 => 1870,
7 => 1949,
8 => 2027,
9 => 2105,
10 => 2183,
11 => 2261,
12 => 2340
)
)
)
),

[[Category:Studio]]

Game meta-information: gameinfos.jsonc

2024-09-10T05:34:05Z

Ufm: /* Losers not ranked between themselves */

{{Studio_Framework_Navigation}}

__TOC__

== Overview ==

From this file, you can edit the various meta-information of your game.

After modifying the file, don't forget to click on "Reload game informations" from the Control Panel so that the changes can be taken into account.

Note: if you break gameinfos and cannot load the management page, then reload using the direct URL: https://studio.boardgamearena.com/admin/studio/reloadGameInfos.html?game= (with your game name at the end of url).

Most of the information provided in this file is self-explanatory.

See sections below for specific cases.

==Publisher==

These fields should match the publisher of the game. In the case of a public domain name, they should be left empty (empty string)

==Beta==

You are not allowed to set the "'''is_beta'''" to 0 before the game has been released on BGA and stabilized.
==Time Profiles==
'''fast/medium/slow_additional_time''': please set high values here: after the game has been released, there is a process that adjusts these values to match the real game duration. Adjustment starts when the game enters beta, after that these have no effect, and require admin intervention to change.

==Number of players==

'''players'''
'players' => array( 3, 4, 6 ),

*during the first step of development of a game, it is recommended to have a "1 player" configuration: it is much easier to start/stop a game this way, as you don't need to switch players.
*if you change the minimum number of players from 1 to 2, for example, make sure the new tables you create are not restricted from 1 to 1 player otherwise when you create a new table and this account setting is used, there will be a conflict with the new minimum number of players allowed and you will be blocked from creating the game.
But you can also unblock yourself by changing the number of players again, launching a game with a larger number, and then getting back to the number you want.

'''suggest_player_number''' / '''not_recommend_player_number'''
'suggest_player_number' => 3,
'not_recommend_player_number' => array( 6 ),

Don't specify anything here (null) if there is no configuration that is REALLY better/worse than another one. You can check player's poll on BoardGameGeek game page if you have any doubt. Note that there can be at most one suggested player count (provide either null or a single number), but there can be several not recommended player counts (provide either null or an array of values).

Another reason to leave it blank unless there is really strong reason to do so is that suggest_player_number also has an implication on the ELO calculation, whereby the K-factor is multiplied by the number of players up to a maximum of this value (or, no max if it's not provided). That is to say, a 6-player game with a suggestion of 3-players will have ELO calculated as if it were a 3-player game.

'''Important exception:''' in the automatic lobby, if 'suggest_player_number' is not specified, the system will try first the lowest. So if the lowest player number is not compatible with the default options for your game (especially if there is a Solo mode that can only be played in training mode) you have to specify a suggest_player_number of your choice, so that players launching a game in the automatic lobby without checking the option don't get an error with the default configuration.

==Colors==

'''player_colors'''
'player_colors' => array( "ff0000", "008000", "0000ff", "ffa500", "ffffff" ),

This array defines the default player colors, theoretically this can be bigger then maximum number of players but you have to support all of the in your game.
Your setupNewGame in php is responsible for attributing these values to players. See section "Player color preferences" in [[Main_game_logic:_yourgamename.game.php]] for details.

== Minimum screen size ==
The settings to specify mobile (or small desktop) screen size if detailled here:
https://en.doc.boardgamearena.com/Your_game_mobile_version

== Losers not ranked between themselves==

By default, all player are ranked, but in some games, the rules say that all non-winners are losers and not ranked between themselves. You can set this option to true so that for your game, there are only winners and losers, without a full ranking of all players.

The score in this case should be the same for the winners and 0 for the losers.

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
'''Warning: Do not use this option in 2-player games, co-op games, or games where perfect ties are frequent, as ELO will not change when everyone is perfectly tied (including tiebreakers).'''
</div>

// If in the game, all losers are equal (no score to rank them or explicit in the rules that losers are not ranked between them), set this to true
// The game end result will display "Winner" for the 1st player and "Loser" for all other players
'losers_not_ranked' => false,
'''Note''': In some team games like Tichu, Spades, and Belote, players do not gain or lose ELO by teammates. (Hover over the ELO changes to find 'Teammate: -100%')

To activate this for your game, please contact a BGA admin (<code>hardcoded_team_games</code> must be enabled manually). The game must support only 2p and/or team modes.

<b style="color:darkred">Warning:</b> This modifier should not be applied to co-op games or games where 3 or more parties can compete each other (e.g. individual mode with 3 or more players, 2v2v2 6 player mode, and etc.).

==Disable player rotation in case of rematch==

By default, in case of a rematch players are rotated so that the first player changes. If for your game it's better to always have a random player order you can change this option.

// When doing a rematch, the player order is swapped using a "rotation" so the starting player is not the same
// If you want to disable this, set this to true (even if the comment in your game file say the opposite).
'disable_player_order_swap_on_rematch' => false,

==Deprecated fields==

* Game designer (<code>designer</code>)
* Game artist (<code>artist</code>)
* Year (<code>year</code>)
* Tags (<code>tags</code>)
* Game presentation (<code>presentation</code>)
* Game page warning (<code>gamepanel_page_warning</code>)
* Custom "buy this game" button (<code>custom_buy_button</code>)

'''⚠ Note''': these fields are <b style="color:darkred">no longer read from this file</b>; these are now managed via the [[Game_metadata_manager|Game Metadata Manager]].

==Tie breaker description==
Describe tie breaker score calculation (player_score_aux in player table).

Important: This is used in the javascript too, which is automatically generated. Using newlines in here will cause errors in the javascript, which will cause the game to not load.

Example:
'tie_breaker_description' => totranslate("Number of remaining cards in hand"),

== Multiple tie breaker management ==

If your game has multiple tie breakers, here is what you should do.

Let's take this example: "In case of a tie, the winner is the game with the most remaining money, then number of buildings built, then number of cards in your hand".

In this example, your "player_score_aux" field might be calculated like this:

10000 * (remaining_money ) + 100 * (buildings_built) + (number_of_cards)

In this case, you should add the following in gameinfos.inc.php:

'tie_breaker_split' => array( 10000, 100 , 1 ),

It means that the first tie breaker has been multiplied by 10000, the second by 100, and the third by 1.

Using this, the result screen will be adapted to show exactly what is needed. For example:
* When 2 players are tied, it will show their remaining money.
* If their remaining money are equal, it will show the number of building built in addition to the remaining money.
*If these two tie breaker are still the same, it will show the 3 tie breaking values.

==Language dependency==

If you have a game that is language dependent, you can use the option described here: [[Main_game_logic:_yourgamename.game.php#Language_dependent_games_API]]

== Coop Elo Mode==

For cooperative games, by default players will earn as many rating points as the score. Games ended with a positive score counts as wins, and scores of 0 or below count as losses.

For games where there is no or little variable difficulty (such as for example Bandido) the fixed amount of score can be assigned across all settings. However, for all coop games where we have options to change the difficulty level and/or where the score reached indicates a higher level of skill and/or where the number of players has a significant impact on the difficulty, the final score should be adjusted according to the difficulty level and the number of players.

If needed, a reference scale for Elo points (between 1300 and 2500) can be set up. Players regularly winning with a specific difficulty setting will have their Elo nearing this value asymptotically over time. For this, you can set up the coop_elo_mode parameter.

<div style="padding: 1em; background: #FFCDD2; color: #B71C1C">
'''Warning: While this can reflect player skills more precisely compared to flat rating gain, this parameter is generally not recommended as players may abandon losing games or avoid new players to prevent rating loss.'''
</div>

Related discussion:

https://forum.boardgamearena.com/viewtopic.php?f=3&t=24363

https://boardgamearena.com/forum/viewtopic.php?t=32289

Here is an example using options and win/loss (score 1/0):

'coop_elo_mode' => [
'type' => 'points_references',
'references' => [
// Difficulty 1
['players_nbr' => 2, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 2, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1470]],
['players_nbr' => 3, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1350]],
['players_nbr' => 3, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 4, 'options' => [100 => 1, 101 => 0], 'elo' => [0 => 1000, 1 => 1400]],
['players_nbr' => 4, 'options' => [100 => 1, 101 => 1], 'elo' => [0 => 1000, 1 => 1470]],
// Difficulty 2
['players_nbr' => 2, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 2, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 3, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1450]],
['players_nbr' => 3, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 4, 'options' => [100 => 2, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 4, 'options' => [100 => 2, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
// Difficulty 3
['players_nbr' => 2, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 2, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1910]],
['players_nbr' => 3, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1540]],
['players_nbr' => 3, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 4, 'options' => [100 => 3, 101 => 0], 'elo' => [0 => 1000, 1 => 1690]],
['players_nbr' => 4, 'options' => [100 => 3, 101 => 1], 'elo' => [0 => 1000, 1 => 1910]],
// Difficulty 4
['players_nbr' => 2, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 2, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 2120]],
['players_nbr' => 3, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1640]],
['players_nbr' => 3, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 4, 'options' => [100 => 4, 101 => 0], 'elo' => [0 => 1000, 1 => 1830]],
['players_nbr' => 4, 'options' => [100 => 4, 101 => 1], 'elo' => [0 => 1000, 1 => 2120]],
// Difficulty 5
['players_nbr' => 2, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 2, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 2340]],
['players_nbr' => 3, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1740]],
['players_nbr' => 3, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 4, 'options' => [100 => 5, 101 => 0], 'elo' => [0 => 1000, 1 => 1980]],
['players_nbr' => 4, 'options' => [100 => 5, 101 => 1], 'elo' => [0 => 1000, 1 => 2340]],
],
],

Here is an example using different scoring values to indicate the level of difficulty mastered by the players winning the game:

'coop_elo_mode' => array(
'type' => 'points_references',
'references' => array(
array(
'players_nbr' => 2,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1350,
2 => 1425,
3 => 1500,
4 => 1576,
5 => 1651,
6 => 1727,
7 => 1802,
8 => 1878,
9 => 1953,
10 => 2029,
11 => 2104,
12 => 2180
)
),
array(
'players_nbr' => 3,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1400,
2 => 1470,
3 => 1541,
4 => 1612,
5 => 1683,
6 => 1754,
7 => 1825,
8 => 1895,
9 => 1966,
10 => 2018,
11 => 2095,
12 => 2250
)
),
array(
'players_nbr' => 4,
//'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1430,
2 => 1505,
3 => 1580,
4 => 1655,
5 => 1730,
6 => 1805,
7 => 1880,
8 => 1955,
9 => 2030,
10 => 2105,
11 => 2180,
12 => 2330
)
),
array(
'players_nbr' => 5,
// 'options' => array( ),
'elo' => array(
0 => 1000,
1 => 1480,
2 => 1558,
3 => 1636,
4 => 1714,
5 => 1792,
6 => 1870,
7 => 1949,
8 => 2027,
9 => 2105,
10 => 2183,
11 => 2261,
12 => 2340
)
)
)
),

[[Category:Studio]]

Gamehelpfivethreefive

2024-09-04T00:40:41Z

Ufm:

== Overview ==

[[https://boardgamearena.com/tutorial?game=fivethreefive&tutorial=1696 Fast Tutorial]]

'''Five Three Five''' is a ladder-climbing game. Your goal is to be the first to get rid of all your cards in hand. A round ends when one player runs out of cards, and all other players gain negative points from the cards left in their hands. When any player has reached -20 points or less, the player with the highest points wins!

The game included 65 Weather cards:
- Rainy card 1-5
- Cloudy card 7-9
- Sunny card 11-15

{|class="wikitable" style="width:auto;" border="2"
|+Card Uses
!'''Player'''
|'''Copies of each card'''
|'''Card Dealt Per Player '''
|'''Undealt Card (left face-down)'''
|-
!2
|4
|12 x2 (see below)
|4
|-
!3
|4
|13
|13
|-
!4
|4
|12
|4
|-
!5
|5
|12
|5
|-
!6
|5
|10
|5
|}

== Gameplay ==

Beginning from the lead player, players take turns clockwise. On your turn, you must perform 1 of the following 4 actions: '''Lead''', '''Overwrite''', '''Add''', '''Pass'''.

==== 1. Lead ====

The first action of the lead player of each trick must always perform this action.

Plays any one legal meld type, forming the '''Central Meld'''.

====== ''' Legal Meld Types ''' ======

- '''Singles''': A single card

- '''Sets''': Two or three cards consisting of identical numbers

- '''Runs''': Two or three cards consisting of consecutive numbers

==== 2. Overwrite ====

Play card(s) that are of the '''same meld type, equal size, and greater strength''' than the '''Central Meld'''.

- When playing Singles and Sets: 1s are the lowest strength and 15s are the highest.

- When playing Runs: 15s are the lowest strength and 1s are the highest.

Note: If the '''Central Meld''' contains 4 cards, players '''cannot''' take the Overwrite action and must either '''Add''' or '''Pass'''.

==== 3. Add ====

Play one, two, or three cards to the '''Central Meld''', increasing its '''overall size'''.

You must make sure after performing an '''add''', the '''Central Meld''' must be consecutive numbers or identical numbers.

You cannot add a run to a set or add a set to a run.

==== 4. Pass ====

If a player '''cannot or chooses not to '''play cards, they '''pass'''. Once a player passes, they cannot play any more cards to the trick.

==== End of Trick ====

A trick goes around the table multiple times. The trick ends immediately and the last player to play card(s) wins the trick and will lead the next trick, once any of the following happens:

- All but one player passes

- All cards of the same number are in the Central Meld

- A run of 5 cards is in the '''Central Meld'''

- An 8 is played using the '''Rule of 8s'''

====== '''Rule of 8s''' ======

When '''one or more 8s''' are used to '''Overwrite''' or '''Add''', the trick ends immediately.

==== End of Round ====

As soon as any player runs out of cards, the round ends immediately. Everyone else takes negative points chips equal to the '''total point value''' of the cards remaining in their hand.

If End of game condition has not been reached, start the next round. The player with the least points is the lead player for the next round. If there is a tie, the lead player is the player closest to the previous round's lead player, clockwise.

The points given for cards are as follows:

{| class="wikitable" style="width:auto;" border="2"
!'''Card'''
|'''1'''
|2
|3
|4
|5
|
|7
|8
|9
|
|11
|12
|13
|14
|15
|-
!Points
|3
|1
|1
|1
|1
|
|1
|5
|1
|
|2
|2
|2
|2
|3
|}

== End of Game ==

If any player reaches -20 or fewer points, the game ends. The player with the highest points is the winner. If there is a tie, the player with the fewest cards left in hand is the winner.

== 2-player variant ==

When set up, both players are dealt two separate hands of 12 cards: One 12-card-hand for the first half of the round and one 12-card-hand for the second half.

== Room Options ==

==== Game length ====

When a player reaches -20 or -10 points, the game ends.

For a 2-player game length, you may choose '''1 round''' as well.

==== Extra deal in 3-player ====

Deal 16 cards per player, instead of 12 cards.

==== Greater size overwriting ====

When overwriting the current meld, a meld of greater size may be played as well, ignoring the current meld type.

==== Permanent Pass ====

Once a player passes, the player cannot play any more cards during the same trick.

Gamehelpcanasta

2024-09-02T06:28:08Z

Ufm:

== GOAL ==

Score 5,000+ points by melding sets of cards. Every card earns points when played to the table, but they subtract points if still in hand at the end of the round. There are bonus points for completing sets of 7 cards (called Canastas), drawing red 3s, being the first to empty your hand, and more.

Below are rules for classic 4-player Canasta (two 2-player teams with 2 decks). Be sure to explore the game options for even more fun!

== CARDS ==

2 standard decks of playing cards are shuffled together, including the jokers. That means there are 4 jokers and 8 of every other card in the deck.

::• 2s and Jokers are wild cards.

::• The rest of the cards are referred to as “naturals.”

== THE DEAL ==

Everyone is dealt 11 cards. A draw deck is formed with the remaining cards. The top card of the draw deck is turned up to form a discard pile.

If the upturned card is a joker, 2, or 3, turn another card up until you find a natural card of 4 or higher.

== GAME PLAY ==

A turn consists of:

*• Drawing the top card of either the draw deck or the discard pile.
*• (optional) Melding sets of 3 or more cards onto the table.
*• (optional) Melding 1 or more cards to an existing meld.
*• Discarding one card.

== DRAWING FROM THE DRAW DECK ==

Take the top card into your hand.

If you draw a <span style="color:#FF0000"><b>red 3</b></span>, the card is immediately added to the table, and you receive a 100-point bonus! Take another card from the draw deck, and add it to your hand.

<b>Note:</b> If your team have not melded any cards at the end of the round, this <span style="color:#FF0000"><b>red 3</b></span> bonus turns into penalty!

== DRAWING FROM THE DISCARD PILE ==

You must be able to meld the top card of the discard pile with 2+ cards in your hand (including at least one natural) OR one of your existing melds already on the table. If you can't make a meld, you cannot take the card.

A <b> MELD </b> is a matching set of 3 or more cards (such as 5-5-5, J-J-J-J-J-J, etc.). The meld can include wild cards, but there can be at most three wild cards in a single meld. You may not form a meld of just wild cards.

After you meld the top card of the discard pile, you take ALL cards in the discard pile into your hand. You may continue to meld as many cards as you like before discarding a card to signal the end of your turn.

<b>Frozen Pile</b>

Anytime a <span style="color:#FF0000"><b>red 3</b></span> (this is possible only at the beginning of the round) or a wild card is added to the discard pile, that card is turned sideways to indicate that the pile is frozen. In order to take the top card of a frozen discard pile, you must be able to meld that card with at least <b>2 NATURALS in your hand</b>. That “unfreezes” the discard pile so that normal rules apply again.

<b>Black 3s</b>

Black 3s can never be picked up from the top of the discard pile. The next player is, therefore, forced to take cards from the draw deck on their turn.

== INITIAL MELD ==

The first time your team melds, the value of all the cards put on the table must add up to a minimum amount. You can make multiple melds to achieve the amount. The minimum increases as your score increases, as follows:

{| class=”wikitable”
!width=40% | Score
!width-40% | Initial Meld Value
|-
| Less than 0
| ...15 points
|-
| 0-1495
| ...50 points
|-
| 1500-2995
| ...90 points
|-
| 3000+
| ...120 points
|-
| 7000+
| ...150 points
|}

When making the initial meld, you may only pick up the discard pile if you can meld the top card with two naturals in your hand.

In other words, the discard pile is always frozen until your team makes the initial meld (see above).

== CARD VALUES ==

{| class=”wikitable”

|-

| Joker || ...50 points

|-

| Ace, 2 || ...20 points

|-

| 8-King || ...10 points

|-

| 4-7 || ...5 points

|}

== END OF ROUND (“Going Out”) ==

The player who empties their hand first wins a 100-point bonus for their team! Emptying the hand is called “going out,” and has a few conditions:

<dl>

<dt><b>Canastas</b></dt>

<dd style=”margin-inline-start:1.6em;”>Your team must form at least 1 canasta in a 4-player 2-deck game. A canasta is a meld of 7 cards.</dd>

<dt><b>Final Card</b></dt>

<dd style=”margin-inline-start:1.6em;”>The last card in hand may be either discarded or melded.</dd>

<dt><b>Black 3s</b></dt>

<dd style=”margin-inline-start:1.6em;”>Black 3s may only be melded when you go out. The black 3 meld cannot include any wild cards, and it must be your final action - no final discard is permitted. Each black 3 is worth 5 points.</dd>

<dt><b>Asking to Go Out</b></dt>

<dd style=”margin-inline-start:1.6em;”>On your turn, you may ask your teammate if it's okay to go out. If you do so, you must accept their decision for the team. The question may only be asked after you take a card from the draw deck.</dd>

</dl>

Until you are able to go out, you must keep at least 1 card in your hand.

If you have only 1 card in hand, however, you cannot draw from/pick up the discard pile if the discard pile also has only 1 card!

<b>Going Out With a Concealed Hand</b>

If you haven't melded any cards to the table and then meld all the cards in your hand in a single turn, you earn bonus points for going out with a concealed hand. All of the above requirements for going out must still be met.

If you are playing a team game, adding cards to a partner's meld breaks the concealed hand condition.

<b>Note:</b> The initial meld requirement can be ignored only when the player manages to complete the required number of canastas and then goes out concealed, without picking up the discard pile.

<b>Draw Deck Runs Out of Cards</b>

The round could also end if the draw deck runs out of cards. If the final card in the deck is a red 3, play immediately ends – no melding or discarding. Otherwise, play continues as long as the <u>discard</u> pile can legally be taken.

<b>Note:</b> If the top card of the discard pile matches a meld of their team and the discard pile is not frozen, the turn player MUST take the discard pile.

=== Scoring ===

At the end of the round, each team receives points for all cards melded onto the table, red 3s, and the following bonuses:

{| class=”wikitable”

|-

| Going Out || 100 points

|-

| Going Out with Concealed Hand || 200 points

|-

| Each mixed canasta || 300 points

|-

| Each natural canasta || 500 points

|}

Next, all players SUBTRACT the value of the cards in their hand.

Check whether a team has reached the target points (usually 5000 points). If so, the team with the highest score wins the game. If not, a new round begins: Cards are reshuffled, a new hand is dealt to all players, initial meld value is adjusted up or down, and start player rotates clockwise.

Troubleshooting

2024-08-25T15:40:01Z

Ufm: /* HTTP Error 500 (when the BGA server is stable) */

Describing common errors which are hard to understand and debug. This may be useful for troubleshooting.

__TOC__

== Game does not start at all ==

=== Undefined offset: 0 in table/table.game.php on line 1417 ===

Do not call self::getActivePlayerName() during setupNewGame()

Ensure you're calling $this->gamestate->changeActivePlayer() at the end of your game setup. You must always have at least one active player.

=== Unexpected error: Wrong formatted data from BGA gameserver 1 (method: createGame): ... ===

This is generic message usually followed by exact position in your source code, and usually its syntax error in one of yours php script

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: Not logged ===

Calling self::getCurrentPlayerId () or using $g_user from 'args' state function, see also below

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: Unknow player statistic: ===

Calling self::incStat() with second parameter which is an empty string

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: Error while processing SQL request: INSERT INTO stats ... ===

Fatal error during yourgame setup: Error while processing SQL request: INSERT INTO stats (stats_type, stats_player_id, stats_value) VALUES ('10','2300663','0'),('10','2300662','0')
Duplicate entry '10-2300663' for key 'stats_table_id'

Why? In the stats.inc.php you declared two keys with the same integer "id"

=== Unexpected error: Propagating error from GS 1 (method: createGame): Fatal error during yourgame setup: BGA main website do not respond ===

Check if other games work; if not, it's a problem with BGA Studio; if so, your game likely reaches an end state immediately. Check your states.inc.php and your transitions.

=== Unexpected error: Propagating error from GS 1 (method: createGame): BGA service error ===

You may have a syntax error in your dbmodel.sql.

Or, you may be calling self::initStat() for a statistic that does not exist. Check the statistic name, and make sure you clicked "Reload statistics configuration" button in the admin console after making changes to stats.inc.php

Or you may not have your states.inc.php set up correctly.

You may have an error in your table.game.php file in setupNewGame (such as <code>$result['x'] = y;</code> when $result is not an array).

=== Unexpected error: Table status of a starting game should be 'setup' ===

This error message appears when you start a one player game using the "Express Start" button.

In normal situation, the game starts just after this message and everything should works normally. In this case, you can just ignore this message.

If the games does not start, it is most probable that there is a syntax error in any of your php code (Check your states.inc.php and X.game.php)

=== Fatal error during creation of database ebd_quoridor_389 Not logged ===

Check that you didn't use $g_user or getCurrentPlayerId() in setupNewGame() function or in an 'args' 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.

=== Warning: Invalid argument supplied for foreach() in table.game.php ===

Warning: Invalid argument supplied for foreach() in /var/tournoi/release/tournoi-151226-1240-gs/www/game/module/table/table.game.php on line 129
Fatal error: Cannot unset string offsets in /var/tournoi/release/tournoi-151226-1240-gs/www/game/module/table/table.game.php on line 143

That appears when your arg* function that suppose to return array of state arguments returns a scalar (a non-array) value

Server syntax error:
Warning: Invalid argument supplied for foreach() in /var/tournoi/release/tournoi-240320-1000-gs/www/game/module/table/table.game.php on line 3249

Check that notfication you sending have args method supplied, i.e

$this->notifyAllPlayers('message', "", []); // 3rd argument MUST be array and MANDATORY

=== The server reported an error ===

During table creation: "The server reported an error" error shown and nothing else.

If you cannot even create a table - there is syntax error in gameinfos.php, check it, reload it from management panel.
If still no luck copy clean version from template https://github.com/elaskavaia/bga-sharedcode/blob/master/gameinfos.inc.php

=== Unexpected Error : Invalid player number for this game : 4 ===

This error may comes when trying to change the player number configuration in gameinfos.inc.php from a higher to lower number of players (for example from 4 to 2).

The following steps will help to change a player config from array(4) to array(2) :

* change in gameinfos.inc.php the entry to 'players' => array( 2,3,4 )
* In game management page (Control Panel > Manage Games > "Your Game"), press the "Reload Game information" button
* create a new table
* reduce the number of players to 2 and start the game
* (express) Stop the game
* change in gameinfos.inc.php the entry to 'players' => array( 2 )
* press again the "Reload Game information" button

=== Blank page ===
If you see no html at all check
* if you have syntax error in your view.php file
* class name of your view.php file does not match the project name (should be view_foo_foo if project is foo)
* game name return by getGameName() does not match the project name (should be "foo" if project is foo)

class view_russianrailroads_russianrailroads extends game_view {
function getGameName() {
return "russianrailroads";
}

=== "Ooooops, this page does not exists :/" ===
If your table is created, but you are redirected to <code><nowiki>https://studio.boardgamearena.com/1/index.php</nowiki></code> when you try to launch your table, then you are most likely missing the [[Players actions: yourgamename.action.php|action PHP file]].

No other error is displayed or logged, meaning this can be tough to debug.

Make sure the file is correctly named, as any typo means the studio won't be able to find the file.

=== HTTP Error 500 (when the BGA server is stable) ===

The table has been created, but the table loading (e.g. getAllDatas()) hasn't been finished properly for some reason.

== Game starts but I can't make a move ==

=== When I do a move, I got "Move recorded, waiting for update ..." forever ===

"Move recorded" means that your ajaxcall request (bgaPerformAction) has been sent to the server and returned normally.

"Waiting for update" means that your client interface is waiting for some notifications from the server that correspond to the move we just did.

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.

=== When I do a move, I get "Sending move to server..." then nothing and game resets to state before the move ===

Its possible that server code get into infinite loops or thinks too much, in which case it will timeout and will be aborted without any extra logs (and db transaction you saw in the log won't be committed). You will usually see "Unable to connect to server" message on console in this case. You have to put more logging into server
to trace where it hangs.

You may also see this error in the log in this case: "Error (2006) while processing SQL request: MySQL server has gone away"

=== When I do a move, I get "Ajaxcall error: empty answer" ===

You either have missing self::ajaxResponse(); in your [[Players actions: yourgamename.action.php|game.action.php]] method, or there is some problem with getting arguments (check that you are using btoa() on client when using AT_base64 arg type in action.php)

=== When I do a move, I get "Gameserver is locked by configuration". ===

You may have an error in your AJAX path, such as /reversi/reversi when your game's name is different.

=== Some player action is triggered randomly when I click somewhere on the game area ===

You probably used "dojo.connect" on a null object. In this case, dojo.connect associate the event (ex: "onclick") to the whole game area.

Most of the time it happens in this situation, when my_object element does not exists:
<pre>
dojo.connect( $("my_object"), "onclick", this, (event)=>{})
</pre>

To determine if this is the case, place "alert( $("my_object") )" before the dojo.connect to check if the object exists or not.

=== Error: This is not your turn ===

This happens when checkAction() is called and current player is NOT the active player.

You can change the active player in studio by clicking the red arrow next to their name in the player panel (right side of the page).

[[File:Change_active_player.jpg]]

=== Error: Please wait, an action is already in progress ===
Its followed by error "(Generated by checkAction / XXX)" on studio.

This error is triggered in the JS by the checkAction function for XXX action.

This can happen when the player sent an Ajax request action earlier, and:
* action is not complete yet - i.e. takes some time, and user clicked something again
* if there is bug in interface where MULTIPLE handlers are fired on same click. To debug this add some console.trace() in place this specific checkAction is called.
* did not get any notification from the PHP side. To avoid this, put an empty notifyPlayer in the PHP side of the Ajax handler to ensure the client receives a response. This line of code should do it:
<pre>
$this->notifyPlayer($this->getCurrentPlayerId(), 'message', '', []); // sent to current player, who originated the action
</pre>

=== Error: This move is not authorized now ===
This is generic error message generated by this.showMoveUnauthorized() function. If you did not call this function yourself, check the console log, it may have additional information.
If you see "Move not authorized now : XXX" in the log, where XXX is your action name - this means that action XXX is not defined in list of possible actions for your current state. This error generated by checkAction() function.
=== Error: More than one possible action at this state ===
The argument given to $this->gamestate->nextState() is not defined in states.php.

=== Error: You are not connected - after waiting for the submitted move ===
In the log you may find:
Query execution was interrupted, maximum statement execution time exceeded - Request: SELECT global_id, global_value FROM global WHERE 1

The error message above is because of failed attempt to lock a table, which happens because of infinite loop in you game.
* Check that don't enter same game state over and over again
* Check that you reverse for loop actually descrease counter or other loop issues
* Check that recursive function ends

=== 502 Bad Gateway ===
This error is similar to the infinite loop just above this section, but the loop occurred in view.php or somewhere unusual (e.g. module).

== Predefined server errors ==

=== Unexpected error: Unexpected final game state (XX) ===

The action function does not transition to any state, i.e.
function selectField($field) {
self::checkAction ( 'selectField' );
if ($field!=0) $this->gamestate->nextState ( 'next' );
}
Here if $field is 0 there is no transition

=== This game action is impossible right now ===

Check the game log. Usually your state does not define the action you trying to perform in 'possibleactions' array.

Also check your onActionName javascript function. Make sure you are calling the right "actionname.html".

=== Unexpected error: This transition (playerTurn) is impossible at this state (42) ===

This is pretty self explanatory. Function nextState() takes transition name not a state name, so you probably did not
define this transition that the given state

== Game interface hangs during reload or on start ==

Showing "Application Loading..."

=== Javascript error: During pageload undefined no_stack_avail Script: ===

This error usually has no useful data, but it means you called somes API that require a callback and did not define callback function, i.e
in dojo.connect, this.connectClass, dojo.subscribe, etc

this.connectClass('field', 'onclick', 'onField'); // <-- onField is not defined

=== Javascript error: During pageload n is null ===

When calling dojo.place(), the name of the container (second parameter) to place the new block into is not defined in the page template.

=== Other errors with "Application loading..." ===

You probably have a syntax error in your Javascript code, and the interface refuses to load.

To find this error, check if there is an error message in the Javascript console (F12).

If there is really nothing on the log, it'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 "}" or a missing "," after a method definition.

If you have "Uncaught ReferenceError: bgagame is not defined" you have major syntax error in your js file, you should see some other clues in the log where the errors is.

If you have "dojo.publish is not defined" or something similar, this could be caused by another error earlier. For example, a syntax error caused by a malformed generated file (such as using newlines in tiebreaker description). Also you might have left some images in the /img directory with special characters in the name which must be removed. If you edited images for the game box and website, ensure that you have not left any unnecessary files there.

=== Unexpected Syntax Error: ===

No further details in the log. When log is filling with some social connect errors.

Possible Reason: Syntax error in of the php script which is loaded before the start, such as gameoptions.inc.php, gameinfos.inc.php and such. This can also occur if the gamedatas returned from getAllDatas() in *.game.php contains objects that cannot be properly serialized. For example, a class that defines functions as well as scalars.

=== Game interface spins in a loop throwing error ===

Errors is something like "Cannot read property 'is_ai' of undefined". Cannot restart the game because cannot access UI to stop.
Likely you get in actplayer state with player id == 0. The only way to fix it is to edit database, globals index == 2 set player id to one of your test dudes
(can copy from row 5 for example).

=== Unable to find table database (1): ebd_yourgame_112222 ===

Its either temporarily server error especially on studio it timeouts sometimes, just try reloading again.
Or check if you have syntax errors in your php game file or sql.

== Type conversion / juggling errors ==

=== On php side I get a number instead of string I expect ===

$num = 3;
$meeple = "meeple_" + $num; // <-- suppose to be "meeple_3"!

When you switch between JS and PHP it easy to type this and not notice the +. Plus sign (+) in php does not mean string concatenation (in javascript does!),
in php + means integer arithmetic. So change + to . (dot)

=== On php side my string comparison does not work ===

if ($color == '4baae2' || $color == '000000') {
}

Apparently you should not be using '==' in php to compare strings! You should use '==='. The (==) operator will typecast the strings
to numbers then do comparison!
Its not very apparent because usually you can get away with it, but not when strings resemble numbers like hex 'colors'.

=== Integer columns in the database are returned as strings ===

This is normal PHP behavior. All fields are returned as string type, regardless of their actual type in the database. This also applies to global variables accessed via getGameStateValue(), since they are stored in a database table.

You can use type-casting to convert them to the correct type after they come out of the database.

$myValueInt = (int)self::getGameStateValue(GLOBAL_ROUND_NUMBER);

or

$myValueInt = self::getGameStateValue(GLOBAL_ROUND_NUMBER) + 0; // adding 0 casts to int

same with direct qdb ueries
$sql = "SELECT my_int_column FROM my_table WHERE my_condition";
$myResult = self::getUniqueValueFromDB($sql); <-- this is a string
$myResultAsInt = (int)$myResult;

https://stackoverflow.com/questions/5323146/mysql-integer-field-is-returned-as-string-in-php

== Zombie mode ==

=== Unexpected error: Propagating error from GS 1 (method: zombie): Not logged ===

You are probably calling getCurrentPlayerId() or getCurrentPlayerName() in your zombieTurn method or any of the methods it uses. Instead, use the $active_player_id provided as parameter to zombieTurn().

If you do not see these commands within "function zombieTurn( $state, $active_player ){}", check all the functions called from zombieTurn, also "function getGameProgression(){}" and all the functions THAT calls.

=== Unexpected error: Can't manage zombie player in this game state ===

The state the game was in at the time the error was generated didn't have "transitions" => array( "zombiePass" => 27 )" in states.inc.php (27 was an arbitrary example, but everything else must be spelled exactly that way.)

To correct this error, either add "zombiePass" => ## to the transitions array or work out why the game is in a state it should not be in.

=== Unexpected error: Wrong formatted data from BGA gameserver 1 (method: zombie): ===

This is almost certainly an undefined value in PHP code. Look for a warning or error message in the game replay log on the right side of the table UI.

=== Unexpected error: BGA gameserver 1 do not respond (method: zombie) (timeout: cluster) ===

You are trying to end the game from a zombie method. This is not allowed. The zombie logic must continue the game as best it can. See [[Main_game_logic:_yourgamename.game.php#Zombie_mode|Zombie mode]] for more info.

=== Game unexpectedly ends when one player becomes zombie ===

There is an error in handling zombie mode, check error log. Example: if the zombie turn is called again, framework detects a infinite loop and cancels the game. On the studio there is a notification called ZombieTurnFailed

== Dead locks ==

=== Database dead lock in multiplayer state ===
You normally won't see this error until game is released because to reproduce game it have to be hit with 2 players doing an action simultaneosly.
You only can reprodoce this on studio if you either very fast or you use a script (with direct REST calls).

There is few types of deadlocks
I) Try-lock - this one you don't need to worry about even it does appear in the log, this is 2 player doing the action and second cannot lock db, it will re-try up to 3 times and hopefully it be ok
II) Real dead lock - when 2 tables are locked in reversed by 2 actions, its unclar if this really happen but workaround number 2 theorically should solved it (but it will increase number of deadlocks of type I)

There are two known workarounds:

1) Use $this->bIndependantMultiactiveTable=true in constructor which will force usage of playermultiactive table, but this does not eliminate dead lock completely.

2) Before every action explictly lock tables in specific order (add this code in your game.php file)
<pre>
// Due to deadlock issues involving the playersmultiactive and player tables,
// standard tables are queried FOR UPDATE when any operation occurs -- AJAX or refreshing a game table.
//
// Otherwise at least two situations have been observed to cause deadlocks:
// * Multiple players in a live game with tabs open, two players trading multiactive state back and forth.
// * Two players trading multiactive state back and forth, another player refreshes their game page.
private function queryStandardTables() {
// Query the standard global table.
$this->DbQuery("SELECT global_id, global_value FROM global WHERE 1 ORDER BY global_id FOR UPDATE");
// Query the standard player table.
$this->DbQuery("SELECT player_id id, player_score score FROM player WHERE 1 ORDER BY player_id FOR UPDATE");
// Query the playermultiactive table. DO NOT USE THIS is you don't use $this->bIndependantMultiactiveTable=true
$this->DbQuery("SELECT ma_player_id player_id, ma_is_multiactive player_is_multiactive FROM playermultiactive ORDER BY player_id FOR UPDATE");

// TODO should the stats table be queried as well?
}

/** This is action function that canbe called from multiplayer state */
protected function actionXXX() {
$this->queryStandardTables();
... // your arg function code
}
/** This is arg function of multiplayer state, XXX is replaced by actual name of state.
You need to do it for EVERY arg function in multiplayer states which accesses the database.
You don't need to do it for arg function for single player states
*/
protected function argXXX() {
$this->queryStandardTables();
... // your arg function code
}
</pre>

== Other errors ==

=== Javascript does not know how to sum two numbers ===

Be careful when you manipulate integers returned by notifications: most of the time, Javascript considers they are Strings and not Integers.

As a result:
<pre>
let i = 1;
i += notif.args.increment; // With notif.args.increment='1'
console.log( i ); // i=11 instead of 2 !! Javascript concatenate 2 strings !
</pre>

To solve this, you should use the "parseInt" function:
<pre>
let i = 1;
i += parseInt(notif.args.increment, 10); // With notif.args.increment='1'
console.log( i ); // i=2 :)
</pre>

=== Javascript: do not use substr with negative numbers ===

To get the last characters of a string, use "slice" instead of "substr" which has a bug on IE:
<pre>
var three_last_characters = string.substr( -3 ); // Wrong
var three_last_characters = string.slice( -3 ); // Correct
</pre>

=== Game "spontaneously" transition to a new state without user input ===

Make sure on php side you have no code after $this->gamestate->nextState(...) code.
Because if you do accidentally have code that goes to another state it will cause another state transition without user interaction.

function selectField($field) {
self::checkAction ( 'selectField' );
if ($field!=0) $this->gamestate->nextState ( 'next' );
$this->gamestate->nextState ( 'last' ); // <-- here is missing else, so it will cause double state transition
}

=== Message "Invalid or missing substitution argument for log message: ${actplayer} ... " when entering a state ===

You probably have an args function defined for that state that does '''not''' return an array

=== Server syntax error: Warning: count(): Parameter must be an array or an object that implements Countable in /var/tournoi/release/tournoi-220308-1000-gs/www/game/module/table/gamestate.game.php on line 823 ===

Generally comes with that syntax error : Warning: implode(): Invalid arguments passed in /var/tournoi/release/tournoi-220308-1000-gs/www/game/module/table/gamestate.game.php on line 845

It is most probable that you used setPlayersMultiactive method with id of a single player not included in an array -> you should use: ... setPlayersMultiactive( array($player_id), ...

=== Red banner "Uncaught EvalError: Possible side-effect in debug-evaluate" ===

This is a known issue that can be ignored (for most of case). Generally happening when working on devtool.
A workaround is to disable the "error" event listener. To do so, you can temporarily disable the event listener in DevTools, like this:

- At the top of DevTools, open the "Elements" tab
- Press "»", on the right of "Styles", "Computed", "Layout"
- Choose "Event listeners"
- Find and expand "error"
- Click "Remove"

This will remove the event listener, but the issue will return after you refresh the page.

[[Category:Studio]]

Gamehelpdominoes

2024-08-25T12:48:55Z

Ufm:

== DOMINOES BASICS ==

Dominoes are a set of rectangular tiles bearing a pair of numbers (from 0-6), one number at each end. Domino number pairs run from 0-0 to 6-6:
0-0, 0-1, 0-2, 0-3, 0-4, 0-5, 0-6,
1-1, 1-2, 1-3, etc.

A domino with the same number at both ends is called a <span style="color:#ff0000">DOUBLE</span>: 0-0, 1-1, 2-2, etc.
Unless otherwise noted, the value of a domino is the sum of its numbers on both ends: 1-4 tile is worth 5, 6-6 tile is worth 12, etc.

You start with a "hand" of dominoes. Generally, on your turn you will play a domino to the table to empty your hand and score points. If you cannot play a domino, you may have to draw dominoes from a <span style="color:#ff0000">BONEYARD</span> of undealt tiles.

After the first domino is played to the table, subsequent tiles are joined to the "open end" of a domino in play. The 2 short sides of the domino are the ends. It is open if a domino has not been joined to it. In most cases, the ends of the two tiles must bear the same number.
::EXAMPLE: A "1-4" domino is on the table, but someone has already matched a domino to the "4" end of the tile. The "1" end is still open. You can join one of your dominoes to it that also has a "1" on one of its ends.

The <span style="color:#ff0000">SPINNER</span> is an exception to this rule. Spinners are Doubles (0-0, 1-1, 2-2, 3-3, 4-4, 5-5, or 6-6). You can play tiles off all 4 sides of the Spinner, however your tile must match the number on the Spinner as with other dominoes. There may be none, one or more Spinners in a game. (Note: BGA Dominoes does not support multiple spinner games.)

The word "domino" comes from the Latin for "master" and is traditionally said when a player places their last tile!

Below are directions for several popular dominoes games. Once you have a feel for how to play, explore the many table options to create a new favorite.

== DRAW DOMINOES ==
Win points by being the player with the least amount of points left in hand at the end of the round.

<b>Boneyard ~</b> YES, <b>Spinner ~</b> NO

<b>Play ~</b>

1. Start player plays a DOUBLE to the table.
::• If they don't have a Double, they play any tile.
2. The next player plays a tile from their hand, matching an open end, -OR- may draw one domino from the boneyard, even if they can play a tile.
::• If none of your tiles match an "open" end, you must draw tiles from the boneyard until you can play a piece. If the boneyard is empty, simply pass your turn.
3. Play continues until someone empties their hand -OR- until no one can play a tile.
4. Whoever scored the round bonus becomes start player.

<b>Round Bonus ~</b>
Whoever's unplayed tiles have the LEAST value scores points equal to everyone elses' unplayed tiles MINUS the value of the tiles left in their own hand.

== BLOCK DOMINOES ==
<i>Same as Draw Dominoes, <b>but there is no Boneyard and the start player is always the next player clockwise.</b></i>

== DOUBLE BERGEN ==
First, create a cross by matching all sides of a Spinner (the start tile). Then win points for open ends that match the tile you play, but lose points at the end of the round for your unplayed tiles!

<b>Boneyard ~</b> YES, <b>Spinner ~</b> ONE - <i>The start tile</i>

<b>Play ~</b>

1. Whoever has the HIGHEST DOUBLE in hand leads the round by playing it to the table. This tile is a Spinner.
::• If no one has a Double, whoever has the highest-value domino starts by playing it to the table.
2. The next player plays a tile from their hand, matching an open end.
::• If none of your tiles match an "open" end, you must draw tiles from the boneyard until you can play. If the boneyard is empty, simply pass your turn.
3. Score 1 point during your turn for EACH open end in the layout that matches your domino's open end.
::• A double counts as 2 open ends, so they are worth 2 points apiece!
4. Play continues until someone empties their hand -OR- until no one can play a tile.

<b>Round PENALTY ~</b>
EVERYONE loses 1 point per domino left in their hand!

== MATADOR ==
Score points by having the least points left in hand at the end of the round. Played in a single line with only 2 open ends. When joining your domino, connecting ends must add up to 7. There are 4 wild dominoes, called Matadors: the 0-0 tile and the dominoes whose numbers add up to 7 (1-6, 2-5 and 3-4). Doubles are treated as 1 of their number ~ for example, a 3-3 is treated as a "3."

<b>Boneyard ~</b> YES, <b>Spinner ~</b> NO

<b>Play ~</b>

1. Whoever has the HIGHEST DOUBLE in hand starts the round by playing it to the table.

2. The next person plays a tile from their hand so that the numbers on the "connecting ends" equal 7.
::EXAMPLE: You can connect your "4-6" tile to any open end that is a 3 or a 1, because 4 + 3 = 7 and 6 + 1 = 7.
::• <b>Matadors are wild!</b> They can connect to any any domino.
::• If you can't play a tile, you must draw one domino from the boneyard and pass your turn.
3. Play continues until someone empties their hand -OR- until no one can play a tile.
4. Start player rotates clockwise.

<b>Round Bonus ~</b>
Whoever's unplayed tiles have the LEAST value scores points equal to everyone elses' unplayed tiles MINUS the value of the dominoes left in your hand.

== MALTESE CROSS ==
Players begin by creating a 2-tier cross, then win points by being the player with the least points left in hand at the end of the round.

<b>Boneyard ~</b> YES, <b>Spinner ~</b> ONE - <i>the start tile</i>

<b>Play ~</b>

1. Whoever has the HIGHEST DOUBLE in hand starts the round by playing it to the table. This is a Spinner.
2. The next 4 dominos must match the 4 sides of the Spinner.
::• If you can't play a tile, you must draw a domino from the boneyard, the either play it or pass your turn.
3. Once all 4 sides of the Spinner have been matched, <b>the next 4 dominoes must be Doubles</b> that match the open ends of the tiles attached to the cross. This creates the 2nd tier.
::• If you can't play a tile, you must draw a domino from the boneyard, the either play it or pass your turn.
4. Once the 4 Doubles have been placed, players place dominoes per the usual rule of matching their tile to an open end.
::• If you can't play a tile, you simply pass your turn.
5. Play continues until someone empties their hand -OR- until no one can play a tile.
6. Start player rotates clockwise each round.

<b>Round Bonus ~</b>
Whoever's unplayed tiles have the LEAST value scores points equal to everyone elses' unplayed dominoes MINUS the value of their hand.

== ALL FIVES ==
Score points by playing tiles so that all open ends on the table add up to a multiple of 5.

<b>Boneyard ~</b> YES
<b>Spinner ~</b> ONE - <i>The first double played</i>

<b>Play ~</b>

1. Start player plays any tile to the table. They score points in their tile's ends are multiples of 5.
2. The next person plays a tile from their hand. Total all the open ends and score points if it's a multiple of 5.
::• If none of your tiles match an "open" end, you must draw tiles from the boneyard until you can play a piece. If the boneyard is empty, simply pass your turn.
3. Score points during your turn if all the open ends in the layout add up to a multiple of 5.
::EXAMPLE 1: The "2-6" is the only domino on the table. The open ends (2 + 6) add up to 8. 5 doesn't divide evenly into 8, so no points are scored.
::EXAMPLE 2: You add a "2-4" tile to the "2-6" tile on the table: |<span style="color:#ff0000">4</span>-2|2-<span style="color:#ff0000">6</span>|. By joining the "2" of your tile to the "2" of theirs, the open ends are now 4 + 6, which equals 10. 5 goes into 10 two times. You gain 2 points.
::EXAMPLE 3: The next player joins a "6-1" tile: |<span style="color:#ff0000">4</span>-2|2-6|6-<span style="color:#ff0000">1</span>|. The open ends are now 4 + 1, which equals 5. 5 goes into 5 one time. They score 1 point.
4. Play continues until someone empties their hand -OR- until no one can play a tile.
5. Whoever scored the round bonus becomes start player.

<b>Round Bonus ~</b>
Whoever's unplayed tiles have the LEAST value scores points equal to everyone elses' unplayed tiles DIVIDED BY 5.

== FIVES AND THREES ==
Score points by playing tiles so that all open ends on the table add up to a multiple of 5 OR 3.

<b>Boneyard ~</b> NO
<b>Spinner ~</b> NO

<b>Play ~</b>

1. Start player plays any tile to the table. They score points in their tile's ends are multiples of 5 or 3.
2. The next person plays a tile from their hand. Total all the open ends and score points if it's a multiple of 5.
::• If none of your tiles match an "open" end, you simply pass your turn.
3. Score points during your turn if all the open ends in the layout add up to a multiple of 5 or 3.
::EXAMPLE: The open ends add up to 9. 3 goes into 9 three times. You get 3 points.
::EXAMPLE: <b>If the open ends add up to 15, you earn a whopping 8 points!</b> (5 goes into 15 three times and 3 goes into 15 five times: 5+3=8)
4. Play continues until someone empties their hand -OR- until no one can play a tile.
5. Whoever scored the round bonus becomes start player.

<b>Round Bonus ~</b>
Whoever's unplayed tiles have the LEAST value scores ONE point.

Gamehelpconnectfour

2024-08-25T12:45:04Z

Ufm: /* Opening rule */

==Objective==
Connect Four is a two-player connection game. The objective is to connect four of your colored discs in a straight line while preventing your opponent from doing the same.

==Game play==
The players take turns dropping one colored disc from the top into a vertically suspended grid. The discs fall straight down, occupying the lowest available space within the column.

The game ends when one player forms a horizontal, vertical, or diagonal line of four of their own discs. If the entire board fills up before either player achieves four in a row, then the game ends in a tie.

==Board sizes==
Five board sizes (6x7, 8x9, 9x8, 9x9, and 10x10) are available in the BGA implementation.

==Opening rule==
Two optional opening rules are implemented to eliminate first player advantage.

* Pie rule: After the first player's first move, the second player may switch colors.

* Swap rule: The first player places three discs - a red disc, a yellow disc, and another red disc. After the first 3 discs are placed, the second player may switch colors.

==Arena mode==
The 6x7 board size is unavailable in Arena mode because the game is too easily solved.

The opening rule is locked as the swap rule, to allow various opening moves to be played and to remove any potential first/second player advantage.

The board size option rotates as the season passes (8x9 → 9x9 → 10x10 → 8x9 → ...).

Gurus, ''do not vote for a 6x7 board size or non-swap openings!''