2020-08-23T23:33:56Z

Quietmint: Talus token

== Minimum System Requirements ==
This game requires a computer or mobile device with a modern web browser. It may work with certain browsers as old as 2017, but definitely nothing earlier than Google Chrome 61, Firefox 60, or Safari 11. Additionally, both your browser and graphics card must support [https://get.webgl.org/ WebGL].

If other players are using outdated software, please kindly agree to abandon the game without penalty.

== Power Cards ==
Playing with power cards is optional for 2 players, but required for 3 and 4 players. Power cards change the rules of the game, affecting setup, movement, building, or win condition. ''God Powers'' provide a powerful ongoing ability while ''Hero Powers'' provide a once-per-game ability. For your first games, we recommend playing with the 10 ''Simple God Powers''.

Read the Glossary section below for the meaning of specific terms used on the power cards.

''Veteran players: As compared with the physical game, 12 powers have revised rules.'' These are clearly marked with '''[REVISED POWER]''' in the description: Adonis, Aeolus, Charybdis, Graeae, Heracles, Jason, Limus, Medea, Nemesis, Proteus

=== List of God and Hero Powers ===

==== Simple Gods ====
* Apollo: Your worker may move into an opponent worker's space by forcing their worker to swap places.
* Artemis: Your worker may move one additional time, but not back to its initial space. Banned with Persephone.
* Athena: Opponent's workers cannot move up on their turn if your worker moves up on the previous turn.
* Atlas: Your worker may build a dome at any level.
* Demeter: Your worker may build one additional time, but not on the same space.
* Hephaestus: Your worker may build one additional block on top on your first block.
* Hermes: Your workers may move any number of times and either builds if they do not move up or down. Banned with Harpies.
* Minotaur: Your worker may move into an opponent worker's space by forcing their worker one space backwards to an unoccupied space.
* Pan: You also win when your worker moves down two or more levels. Banned with Hades.
* Prometheus: You can build both before and after moving if your worker does not move up.

==== Advanced Gods ====
* Aphrodite: If an opponent worker starts its turn neighbouring one of your workers, it must end on a space neighbouring one of your workers. Banned with Urania.
* Ares: You may remove an unoccupied block neighbouring your unmoved worker with any tokens on it.
* Bia: You place your workers first on perimeter spaces. If your worker moves into a space with an opponent worker in the next space of the same direction, that worker is removed.
* Chaos: You have the power of a simple god. The power changes when a dome is built.
* Charon: You may force an opponent worker to the space on the other unoccupied side of your worker before you move.
* Chronus: You also win when there are at least 5 completed towers on the board.
* Circe: If opponent's workers do not neighbour each other, you alone have use of their power until your next turn.
* Dionysus: You may take an additional turn using opponent workers after you build a dome with your workers, but no one can win by doing so.
* Eros: Place your workers along opposite edges. You also win when your workers neighbour each other by moving and on the first floor (same floor when 3 players).
* Hera: An opponent cannot win by moving to a perimeter space.
* Hestia: Your worker may build one additional time, but not on a perimeter space.
* Hypnus: If an opponent worker is higher than all of their others, it cannot move. Banned with Terpsichore.
* Limus: Opponent workers cannot build on a space neighbouring your workers, unless building a dome. Banned with Terpsichore.
* Medusa: If you build on lower neighbouring spaces that are occupied by opponent workers, that worker is removed.
* Morpheus: You get a coin at the start of your turn. Your workers can build any number of times by spending the same number of coins.
* Persephone: Opponent must move up if possible. Banned with Artemis.
* Poseidon: Your unmoved worker can build up to 3 times if it is on the ground floor.
* Selene: Your female worker can build a dome at any level regardless of which one moved. It replaces your normal build.
* Trition: Your worker can move again if it is on a perimeter space. Banned with Harpies.
* Zeus: Your worker can build a block under itself.

==== Golden Fleece Gods ====
* Europa & Talus: You many relocate the talus token to an unoccupied space neighbouring your moved worker at the end of the turn. The token is treated as a dome for all players.
* Graeae: Place 3 workers of your colour. You must build with an unmoved worker.
* Hades: Opponent workers cannot move down. Banned with Pan.
* Harpies: Opponent workers are forced space by space until the next space is of a higher level or it is occupied. Banned with Hermes or Trition.
* Terpsichore: All your workers must move, and then all must build. Banned with Hypnus or Limus.
* Urania: You treat opposite edges and corners as if they are adjacent. Banned with Aphrodite.

==== Promo Gods ====
* Asteria: You may build a dome at any unoccupied space if your worker moves down.
* Caster & Pollux: You may move all your workers or build with all your workers in replace of a normal turn.
* Hippolyta: All workers except your female worker may only move diagonally.
* Iris: If there is a worker neighbouring your worker and the space directly on the other side is unoccupied, you may move to that space regardless of the level.
* Pegasus: Your worker may move up any levels but you cannot win by this power.
* Tyche: Shuffle a deck of 1-6 cards. Draw a card at the end of your turn and take an additional turn if the result is 6.

==== Heroes ====
* Achilles: Once your worker builds both before and after moving.
* Adonis: Once choose an opponent worker. That worker must be neighbouring one of your workers at the end of their next turn.
* Atalanta: Once your worker moves any number of additional times.
* Bellerophon: Once your worker moves up two levels.
* Heracles: Once instead of your normal build, both of your workers build any number of domes at any level.
* Jason: Once instead of your normal turn, place an additional worker on an unoccupied ground perimeter space. The worker then builds.
* Medea: Once remove all blocks from under a worker neighbouring one of your workers with any tokens on it.
* Odysseus: Once force any number of neighbouring opponent workers to unoccupied corner spaces.
* Polyphemus: Once your workers build up to 2 domes at any unoccupied spaces.
* Theseus: Once you remove an opponent worker if any of your workers is neighbouring it on a space 2 levels lower.

== Setup ==
=== Build offer ===
If you are playing with power cards, the first player or the system puts together an offer of power cards (total of 2, 3, or 4 cards, depending on player count).
* '''Quick Setup''': The system builds a random offer.
* '''Tournament Setup''': The first player builds an offer, selecting from a limited set randomly chosen by the system (from 6, 8, or 10 cards, depending on player count).
* '''Custom Setup''': The first player builds an offer, selected from all available powers.

=== Select starting power ===
''Veteran players: As compared with the physical game, this step is new.'' The first player chooses which power card will start the game. We recommend using the suggested power for a balanced game.

=== Select powers ===
In turn order, each player selects 1 power card from those on offer. The first player receives the last remaining power card. The player who took the starting power becomes the new first player.

=== Place workers ===
* With 2 or 3 players: In the new turn order, each player places 2 workers on the board.
* With 4 players (team game): In the new turn order, the first player on each team places 2 workers on the board. (The second player of each team will take the first turn.)

== On Your Turn ==
Select '''one''' of your workers and perform both steps in order:

*'''Move''' this worker to an unoccupied neighboring space. You may move in any of the 8 directions, as long as you do not move up more than 1 level. If this worker '''moves up''' to level 3, you win! If none of your workers can move, you lose.
*'''Build''' a block (ground level, level 1, level 2) or dome (level 3) on an unoccupied space neighboring this worker's new location. You may build on any level. If this worker cannot build, you lose.

== Golden Fleece Variant ==
This is a variant for 2 players. During setup, players select one power card and place it beside the board. After placing workers, the first player places the ''Ram figure'' on the board, and the second player begins the game.

At the start of each turn, any players neighboring the ''Ram figure'' receive the power for that turn. This means players can gain/lose the power throughout the game as they move around the board.

== Glossary ==
* ''Blocks'' are the square white pieces of a tower built on ground level, level 1, and level 2.
* ''Domes'' are the round blue pieces of a tower built on level 3. Domes are '''not''' blocks.
* ''Complete Towers'' consists of 3 blocks and a dome.
* ''Forced'' is '''not''' ''moved''. For example, you do not win the game if the Minotaur forces your worker up to a level 3 space.
* ''Unoccupied'' spaces do not contain workers, domes, the ''Ram figure'' (used only in the Golden Fleece variant), or the Talus token (Europa & Talus power).

== FAQs ==

{| class="wikitable"
|-
! #
! Question
! Answer
|-
! 1.
| How do I adjust the view of the 3D scene?
|
* Click and drag to rotate.
* Scroll the mouse wheel (on mobile: pinch with two fingers) to zoom.
|-
! 2.
| Why can't I move up/down?
|
* Opponent is Athena: Sometimes you cannot move up.
* Opponent is Hades: You can never move down.
* Opponent is Persephone: You must move up if possible.
|-
! 3.
| Why didn't I just win?
| You must '''move up''' to level 3 to win, so you probably didn't move.
* Apollo, Charon, Harpies, Minotaur, Odysseus: Being ''forced'' to a new space does not count as a move
* Dionsyus, Pegasus: You cannot win during additional turns or with your power
* Hera: You cannot win by moving to a perimeter space
* Jason, Zeus: Building under yourself or placing a worker does not count as a move
|-
! 4.
| As Apollo or Minotaur, why can't I move into an opponent worker's space?
| You must '''move''' into the opponent's space, which means you must follow the normal movement rules (can only move up 1).
|-
|}

Gamehelptaluva

2020-08-23T15:53:14Z

Quietmint: /* Introduction */

== System Compatibility ==
This game requires 3D mode. [https://www.google.com/chrome/ Google Chrome] is the recommended browser for best performance and highest image quality. It is '''not recommended''' to play on smartphones or tablets.

== Introduction ==
In Taluva, players build temples, towers, and huts to settle a volcanic island emerging from the South Pacific.

* The game ends in an '''early victory''' if a player builds '''all buildings of two types'''.
* Otherwise, the game ends when no tiles remain and the winner is the player who built the most '''temples''' (in case of a tie, the most '''towers''' and then the most '''huts''').

== Setup ==
Each player receives 3 temples, 2 towers, and 20 huts.

12 tiles per player are shuffled to form a draw pile. Each tile is composed of 3 hexagon spaces: A volcano and two other terrain types (from most common to least: jungle, clearing, sand, rock, lake).

== Place A Tile ==

Begin your turn by drawing and placing a tile. Click the space on the board where you want to place the volcano. Choose from one of two options:

=== Expand the landscape ===
Place your tile on the edge of the island adjacent to any existing tile.

=== Volcanic eruption ===
Place your tile on top of two existing tiles so the volcano covers another volcano. Your tile must have a different rotation than the tile below and cannot overhang the ocean. You may destroy huts as long as you do not destroy an entire settlement (see below). Destroyed huts remain out of play.

== Build Buildings ==

End your turn by building one or more buildings on empty space(s) of any terrain type except volcano. A chain of your adjacent buildings forms a ''settlement''.

Choose from one of four options:

=== New settlement ===

* Begin a new settlement by placing a '''hut''' on a first-level space not adjacent to any of your existing settlements.

=== Expand settlement ===

* Expand an existing settlement by choosing a terrain type. On all adjacent spaces of that type, build '''huts''' equal to the height (one hut on first-level spaces, two huts on second-level spaces, etc.). You must have enough huts to build on all eligible spaces. In the example below, the red player can build 2 huts on lakes (one on each) or 1 hut on sand (but cannot build only 1 hut on lake).
[[File:Taluva-expand.png]]

=== Temple ===

* Build a '''temple''' adjacent to one of your existing settlements occupying 3 or more spaces that does not already contain a temple. In the previous example, the red player could build a temple on sand if she built huts on both lakes in a prior turn. Note that it is the number of ''spaces'', not buildings, that determines whether a temple can be built in the settlement.

=== Tower ===
* Build a '''tower''' on a third-level space (or higher) adjacent to one of your existing settlements that does not already contain a tower.

You are allowed to build in such a way that two of your settlements join together, such that there are two temples or two towers in the same settlement, for example.

'''Beware! If you cannot build, you will be eliminated from the game.'''

Gamehelpcoupcitystate

2020-08-08T17:34:36Z

BGA Code Sharing

2020-07-12T04:59:19Z

Quietmint: /* Projects hosted not in studio */

{{Studio_Framework_Navigation}}

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

== Projects hosted not in studio ==

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

'''Important notice about artwork on BGA Open Source projects: original hi-resolution images from publishers must not be published on the repositories. In addition, it is better to specify that the images derivated from publishers artwork are copyrighted and cannot be licensed under a free license like Creative Commons.
'''

{| class="wikitable"
|-
! NON-GAME PROJECTS
! CODE LINK
! DEVELOPER
|-
| Shared Code (not a game)
| https://github.com/elaskavaia/bga-sharedcode
| Victoria_La
|-
| BoardGameArena Workbench (not a game)
| https://github.com/danielholmes/bga-workbench
| Daniel Holmes (dhau)
|-
! GAME
! CODE LINK
! DEVELOPER
|-
| Assyria
| https://github.com/sebastien-prudhomme/bga-assyria
| daikinee
|-
| Bandido
| https://github.com/opheliehb/BandidoBGA
| ophelopede & Harkle
|-
| The Battle for Hill 218
| https://github.com/danielholmes/battle-for-hill-218
| Daniel Holmes (dhau)
|-
| Bonbons
| https://github.com/AntonioSoler/bga-bonbons
| Morgalad
|-
| Coinche
| https://github.com/drasill/bga-coinche
| Draasill
|-
| Coup: City State
| https://github.com/quietmint/bga-coupcitystate
| quietmint
|-
| Egyptian Ratscrew
| https://github.com/0BuRner/bga-egyptianratscrew
| 0BuRner
|-
| Eruption
| https://github.com/AndyKerrison/bga-eruption
| Andy_K
|-
| A Fistful Of Gold
| https://bitbucket.org/Joel_L/fistfulofgold
| Brainchild
|-
| Florenza: The Card Game
| https://github.com/alberto-bottarini/bga-florenza
| tarini
|-
| Hearts '''(Tutorial)'''
| https://github.com/elaskavaia/bga-heartsla
| Victoria_La
|-
| Incan Gold
| https://github.com/AntonioSoler/bga-incangold
| Morgalad
|-
| Marco Polo
| https://github.com/rcitaliano/MarcoPolo
| rcitaliano
|-
| Nile
| https://github.com/AndyKerrison/bga-nile
| Andy_K
|-
| Noir: Killer vs Inspector
| https://bitbucket.org/chhuang76/bga_noirkvi
| ch huang
|-
| Penny Press
| https://github.com/AdamNovotny/bga-blooms
| A-dam
|-
| P.I.
| https://gitlab.com/fa81/bga-pi, https://github.com/hellp/bga-pi (mirror)
| Fabian Neumann (fa81)
|-
| Santorini
| https://github.com/AntonioSoler/bga-santorini
| Morgalad, quietmint, Tisaac
|-
| Tablut
| https://github.com/Lucas-C/tablut
| Lucas-C & ntaffore
|-
| Takara Island
| https://github.com/AntonioSoler/bga-takaraisland
| Morgalad
|-
| Taluva
| https://github.com/quietmint/bga-taluva
| Morgalad & quietmint
|-
| Teotihuacan: City of Gods
| https://github.com/Trompetenhut/bga-teotihuacan
| Trompetenhut
|-
| The King's Guild
| https://github.com/AdamNovotny/BGG-KingsGuild
| A-dam
|}

== Projects on studio ==

Links to studio project which owner wish share as read only.
Project owner please add you project here, dev nickname and short description if you would like to share it.
For the projects below any developer can add themselves to a project as read-only from http://en.studio.boardgamearena.com/#!projects page.

{| class="wikitable"
|-
! NAME
! CODE LINK
! DEVELOPER
|-
| Shared Code
| http://en.studio.boardgamearena.com/#!studiogame?game=sharedcode
| Victoria_La
|-
| Original BGA template
| http://en.studio.boardgamearena.com/#!studiogame?game=template
| Victoria_La
|-
|}

== Other useful resources ==

* Archive of tutorial projects https://www.dropbox.com/s/rsd5r4v49xudpp0/Studio.zip?dl=0
** Note: Hearts project is corrupted there, use Hearts tutorial project above
* Website with bunch of textures and sounds http://www.grsites.com/archive/textures/
* Shrink images without loss of quality https://tinypng.com/ or http://www.iloveimg.com/ (recommended by Gregory Isabelli)
* CSS shapes https://css-tricks.com/examples/ShapesOfCSS/
* PDF Scraper - extract images - http://www.extractpdf.com/
* BoardGameArena Workbench - set of tools to help test and deploy BGA projects - https://github.com/danielholmes/bga-workbench

Gamehelpcoupcitystate

2020-07-11T20:40:58Z

Quietmint: Diplomat variant

== Introduction ==
In Coup, players vie for control of a corrupt city-state in renaissance Italy. Through your influence in the court (the character cards in your hand), bluff, steal, and murder your opponents to become the last player standing and rise to power. There is no second place.

== Setup ==
The 15-card deck contains 3 copies of 5 different characters (''Ambassador'', ''Assassin'', ''Captain'', ''Contessa'', ''Duke'').

Each player begins with ₤2 (or ₤1 in a two-player game) and 2 cards. Money is public knowledge, but character cards in hand are secret.

== Actions ==
On your turn, take any action you can afford:

=== General actions (always available) ===

• '''Income''': Take ₤1 from the treasury. Cannot be blocked.

• '''Foreign Aid''': Take ₤2 from the treasury. Any player claiming to be the ''Duke''/''Diplomat'' can block.

• '''Coup''': Pay ₤7 to the treasury and make another player lose influence (kill a character card). Cannot be blocked. If you start your turn with ₤10, you must choose this action.

=== Character actions (must claim to have that character card in hand!) ===

• '''Tax''' (as the ''Duke''): Take ₤3 from the treasury. Cannot be blocked.

• '''Steal''' (as the ''Captain''): Take ₤2 from another player. The targeted player can block by claiming to be the ''Ambassador''/''Inquisitor'' or the ''Captain''.

• '''Exchange''' (as the ''Ambassador''): Draw 2 cards from the court deck, then return 2 cards to the deck. Cannot be blocked.

• '''Assassinate''' (as the ''Assassin''): Pay ₤3 to the treasury and make another player lose influence (kill a character card). The targeted player can block by claiming to be the ''Contessa''.

== Challenges ==

Any player making a character claim can be challenged. A challenge always results in one player losing a character. The challenged player reveals a card from his/her hand.

• If bluffing, the revealed card is killed.

• If truthful, the revealed card is shuffled into the deck, replaced, and the challenger kills a card from his/her hand.

Dead character cards remain face-up and their influence can no longer be used. If both of your characters die, you're eliminated. The last player remaining wins!

== Variant: Factions ==

This variant divides players into two factions (teams), the Monarchists and the Populists. As long as there are two factions, players cannot block or target their teammates (however, '''Convert''' and challenges are always allowed). If there is only one faction in play, infighting takes over and no restriction applies.

=== Additional actions ===

• '''Convert''': Pay ₤1 to the almshouse to change your own faction, or pay ₤2 to the almshouse to change another player's faction. Cannot be blocked.

• '''Embezzle''' (any character except the ''Duke''/''Diplomat''): Take all coins from the almshouse if you are NOT the ''Duke''/''Diplomat''. Cannot be blocked.

If the '''Embezzle''' action is challenged, the challenged player reveals both cards in hand. If a ''Duke''/''Diplomat'' is revealed (bluffing), one is killed (any other revealed card is shuffled into the deck and replaced). Otherwise (truthful), both revealed cards are shuffled into the deck, replaced, and the challenger kills a card from his/her hand as normal.

== Variant: Inquisitor ==

This variant replaces the ''Ambassador'' character with the ''Inquisitor''. The ''Inquisitor'' still blocks stealing and has two character actions:

• '''Exchange''' (as the ''Inquisitor''): Draw 1 card from the court deck, then return 1 card to the deck. Cannot be blocked.

• '''Examine''' (as the ''Inquisitor''): Secretly look at 1 card in another player's hand. Choose whether to return the card to the owner or force the owner to exchange it with the court deck. Cannot be blocked.

== Variant: Diplomat ==

This variant replaces the ''Duke'' character with the ''Diplomat''. The ''Diplomat'' still blocks foreign aid, still cannot embezzle, and has one character action:

• '''Cooperate''' (as the ''Diplomat''): Take ₤3 from the treasury and give ₤1 to another player. Cannot be blocked.

Gamehelpstoneage

2020-07-10T23:03:19Z

Quietmint: Expansions

== Goal ==

Gain the most Victory Points by the end of the game.

There are two ways to gain points:

* Acquiring buildings during the game for either a fixed or variable amount
* Acquiring Civilization cards during the game that give extra points at the end of the game

== Rules summary ==

Each round is divided into 3 phases, which are executed in the order described:
1. The players take turns placing their people on the game board.
2. The players use the actions of their placed people all at once in turn order.
3. The players feed their people.

== Phase 1: ==
===Place People on the Board===

In turn order, one area at a time, players place one or more of their people in the different areas of the board. Each "ring" in each area of the board can only be occupied by one person. The exception to this rule is the hunting ground which can be occupied by as many people of any color every turn.

====Special Considerations When Playing With Fewer Than 4 Players====

When playing with '''2 or 3 players''': Of the non-resource areas (Tool Maker, Hut and Field) only two may be occupied per turn. The third place remains empty until the next round.

With '''3 players''': Of the resource areas (Forest, Clay Pit, Quarry and River) only 2 players may place people in each round, even if there are additional spaces for additional people.

With '''2 players''': Of the resource areas (Forest, Clay Pit, Quarry and River) only 1 player may place people in each round, even if there are additional spaces for additional people.

All remaining rules remain unchanged when playing with fewer than 4 players.

== Phase 2: ==
===Use the Actions of Your Placed People===

In turn order each player uses all of his placed people in any order. During this phase, the following actions may be used:

* '''Hunting Grounds (Food), Forest (Wood), Clay Pit (Brick), Quarry (Stone), and River (Gold)''': Roll 1 dice per person placed and acquire resources according to the number rolled (1 Food for each full 2 on Hunting Grounds, 1 Wood for each full 3 on Forest, 1 Brick for each full 4 on Clay Pit, 1 Stone for each full 5 on Quarry, 1 Gold for each full 6 on River).

* '''Field''': Placing a person in the Field increases your Agriculture Level. Each turn during the Feeding Phase, your Agriculture Level is subtracted from the amount of people you have. A higher agriculture level allows you to more easily sustain your population. You may have a maximum agriculture level of 10.

* '''Tool Maker''': Placing a person on the Tool Maker adds one new Tool to your player board. You only have 3 tools on your player board, and each subsequent person placed on the Tool Maker upgrades one of your tools to the next level.

* '''Hut''': Place two People on the Hut to gain an extra Person to place (and feed) for the rest of the game. You may have a maximum of 10 people.

* '''Building Card''': Buy the building with the resources shown on the Building Card, scoring the point value shown in the top-left corner (A question mark in the top-left corner is explained below).

* '''Civilization Card''': Buy the card with a number of resources (of any kind) depending on its position in the Civilization Card Track (1 to 4 resources depicted above the card). The immediate effect of the card is applied when purchase. The bottom half of Civilization Card is used for scoring at the end of the game.

===Resources===

Hunting Grounds, Forest, Clay Pit, Quarry, and River:
Roll 1 dice per Person placed in that area and take the corresponding resources:

* 1 Food for each full 2 on Hunting Grounds,
* 1 Wood for each full 3 on Forest,
* 1 Brick for each full 4 on Clay Pit,
* 1 Stone for each full 5 on Quarry,
* 1 Gold for each full 6 on River.

You may use tools to increase the dice result and take more resources. Each of your tool must be used all at once, and can be used once per turn. Some cards give you single-use tools which are lost after they are used, and don't count for final scoring.

===Buildings===

Pay the building cost to get the Building and receive the Point Value listed in the top-left corner of the card.

''If the building cost is Not Fixed'': If there is a question mark in the corner of the card, you win points for each of the resources used to acquire this building. The values of each resource correspond to the numbers it requires when people are placed on them:
* Each Wood is worth 3 Points,
* Each Brick is worth 4 Points,
* Each Stone is worth 5 Points,
* Each Gold is worth 6 Points.

===Civilization Card Details===

Each Civilization Card acquired brings an immediate advantage (depicted on the top half of the card) and some multiplier for final scoring (depicted on the bottom half of the card).

Place the mouse cursor on each card to see details in the tooltip.

Note that at the list of your acquired civilization cards you will see only the bottom half of each card, for the top half is no longer relevant.

== Phase 3: ==
===Feed Your People===

Each Agriculture Level automatically counts as 1 Food during this phase.

You must provide 1 Food per Person.

In the event that you don't have enough food, you may use any resource to feed your people.

If you don't manage (or choose not) to feed your people by the means above, you lose all of your food and 10 points as a penalty.

===Game End===

The game ends when either:

* One Building Stack is empty at the end of a round
or
* There are no more Civilization Cards at the beginning of a round

The final number of points for each player is decided by the conditions below:

* Points earned during the game by acquiring Buildings, minus Food Penalties,
* Multipliers denoted at the bottom halves of Civilization Cards collected,
* Each Resource that a Player has leftover on his Player Board Scores 1 Point

== Variants ==

===Harsh Winter===
* Spend an extra stone when building certain buildings to score 5 points.
* Spend an extra gold when purchasing cards to score 6 points.

===Wild Animals===
* Four animal cards are shuffled into the deck. When revealed, animals stay in play until driven off, subtracting 1, 2, or 3 from the all dice rolls. Players must collectively place a total of X people on the card to drive it off (X = number of players).

===Igloos===
* Spend 3 resources of the same type to buy an igloo, which awards points like a building but does not count for the end-game building bonus.

===The New Huts===
* Adds new buildings that grant fewer points when built in exchange for a bonus (gain a wood/brick/stone each round, or +1 worker/tool/agriculture level). These do count for the end-game building bonus.

Game interface logic: yourgamename.js

2020-07-08T03:29:26Z

Quietmint: /* General tips */

{{Studio_Framework_Navigation}}

This is the main file for your game interface. Here you will define:

* Which actions on the page will generate calls to the server.
* What happens when you get a notification for a change from the server and how it will show in the browser.

== File structure ==

The details of how the file is structured are described below with comments on the code skeleton provided to you.

Here is the basic structure:

* '''constructor''': here you can define global variables for your whole interface.
* '''setup''': this method is called when the page is refreshed, and sets up the game interface.
* '''onEnteringState''': this method is called when entering a new game state. You can use it to customize the view for each game state.
* '''onLeavingState''': this method is called when leaving a game state.
* '''onUpdateActionButtons''': called when entering a new state, in order to add action buttons to the status bar.
* ''(utility methods)'': this is where you can define your utility methods.
* ''(player's actions)'': this is where you can write your handlers for player actions on the interface (example: click on an item).
* '''setupNotifications''': this method associates notifications with notification handlers. For each game notification, you can trigger a javascript method to handle it and update the game interface.
* ''(notification handlers)'': this is where you define the notifications handlers associated with notifications in '''setupNotifications''', above.

== General tips ==

; this.player_id
: ID of the player on whose browser the code is running.

; this.isSpectator
: Flag set to true if the user at the table is a spectator (not a player).
: Note: This is a variable, not a function.
: Note: If you want to hide an element from spectators, you should use [[Game_interface_stylesheet:_yourgamename.css#spectatorMode|CSS 'spectatorMode' class]].

; this.gamedatas
: Contains the initial set of data to init the game, created at game start or by game refresh (F5).
: You can update it as needed to keep an up-to-date reference of the game on the client side if you need it. (Most of the time this is unnecessary).

; this.isCurrentPlayerActive()
: Returns true if the player on whose browser the code is running is currently active (it's his turn to play).

; this.getActivePlayerId()
: Return the ID of the active player, or null if we are not in an "activeplayer" type state.

; this.getActivePlayers()
: Return an array with the IDs of players who are currently active (or an empty array if there are none).

; this.bRealtime
: Return true if the game is in realtime. Note that having a distinct behavior in realtime and turn-based should be exceptional.

; typeof g_replayFrom != 'undefined'
: Returns true if the game is in instant replay mode (replay during the game)

; g_archive_mode
: Returns true if the game is in archive mode (advanced replay after the game has ended)

== Dojo framework ==

BGA uses the [http://dojotoolkit.org/ Dojo Javascript framework].

The Dojo framework allows us to do complex things more easily. The BGA framework uses Dojo extensively.

To implement a game, you only need to use a few parts of the Dojo framework. All the Dojo methods you need are described on this page.

== ShrinkSafe minimization ==

For performance reasons, when deploying a game the js code is minimized using ShrinkSafe (based on ECMASCRIPT version 3). Some advanced syntax may not be compatible with this process. In particular:
* You should not use reserved keywords from the javascript language as variables.
* You should not declare default argument values in function declarations. The following syntax is invalid for ShrinkSafe: '''function myFunc(requiredArg, optionalArg = 'defaultValue') {}'''
* You should not use '''let''' or '''const''' to declare variables.

'''Tip:''' a developer encountering some problems with this has successfully used [http://plugins.netbeans.org/plugin/58580/jshint JSHint] on NetBeans to evaluate code to make it compatible for ECMAScript 3. With the plugin installed, set the below options in '''.jshintrc''' file, and then open '''Action Items''' window (in NetBeans):<pre>{ "maxerr": 999, "esversion": 3 }</pre>

'''Tip:''' some online tools also allow to convert between different versions of javascript, such as https://www.typescriptlang.org/play or https://babeljs.io/

== Accessing and manipulating the DOM ==

'''$('some_html_element_id')'''

The $() function is used to get an HTML element using its "id" attribute.

Example 1: modify the content of a "span" element:

<pre>
In your HTML code:
1234

In your Javascript code:
$('a_value_in_the_game_interface').innerHTML = "9999";
</pre>

Note: $() is the standard method to access some HTML element with the BGA Framework. You should not use the '''getElementById''' function.

'''dojo.style'''

With dojo.style you can modify the CSS property of any HTML element in your interface.

Examples:

<pre>
// Make an element disappear
dojo.style( 'my_element', 'display', 'none' );

// Give an element a 2px border
dojo.style( 'my_element', 'borderWidth', '2px' );

// Change the background position of an element
// (very practical when you are using CSS sprites to transform an element to another)
dojo.style( 'my_element', 'backgroundPosition', '-20px -50px' );
</pre>

Note: you must always use dojo.style to modify the CSS properties of HTML elements.

Note²: if you have to modify several CSS properties of an element, or if you have a complex CSS transformation to do, you should consider using dojo.addClass/dojo.removeClass (see below).

'''dojo CSS classes manipulation'''

In many situations, many small CSS property updates can be replaced by a CSS class change (i.e., you add a CSS class to your element instead of applying all modifications manually).

Advantages are:
* All your CSS stuff remains in your CSS file.
* You can add/remove a list of CSS modifications with a simple function and without error.
* You can test whether you applied the CSS to an element with the '''dojo.hasClass''' method.

Example from ''Reversi'':

<pre>
// We add "possibleMove" to an element
dojo.addClass( 'square_'+x+'_'+y, 'possibleMove' );

// In our CSS file, the class is defined as:
.possibleMove {
background-color: white;
opacity: 0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
cursor: pointer;
}

// So we've applied 4 CSS property changes in one line of code.

// ... and when we need to check if a square is a possible move on the client side:
if( dojo.hasClass( 'square_'+x+'_'+y, 'possibleMove' ) )
{ ... }

// ... and if we want to remove all possible moves in one line of code (see "dojo.query" method):
dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );
</pre>

Conclusion: We encourage you to use '''dojo.addClass''', '''dojo.removeClass''' and '''dojo.hasClass''' to make your life easier :)

'''dojo.query'''

With dojo.query, you can query a bunch of HTML elements with a single function, with a "CSS selector" style.

Example:
<pre>
// All elements with class "possibleMove":
var elements = dojo.query( '.possibleMove' );

// Count number of tokens (i.e., elements of class "token") on the board (i.e., the element with id "board"):
dojo.query( '#board .token' ).length;
</pre>

But what is really cool with dojo.query is that you can combine it with almost all methods above.

Examples:
<pre>
// Trigger a method when the mouse enter in any element with class "meeple":
dojo.query( '.meeple' ).connect( 'onmouseenter', this, 'myMethodToTrigger' );

// Hide all meeples who are on the board
dojo.query( '#board .meeple' ).style( 'display', 'none' );
</pre>

'''dojo.place'''

dojo.place is the best function to insert HTML code somewhere in your game interface without breaking something. It is much better to use than the '''innerHTML=''' method if you must insert HTML tags and not only values.

<pre>
// Insert your HTML code as a child of a container element
dojo.place( "<your html code>", "your_container_element_id" );

// Replace the container element with your new html
dojo.place( "<your html code>", "your_container_element_id", "replace" );

</pre>

The third parameter of dojo.place can take various interesting value.

values possibles :

"replace" : (see description above).

"first" : Places the node as a child of the reference node. The node is placed as the first child.

"last" (default) : Places the node as a child of the reference node. The node is placed as the last child.

"before" : places the node right before the reference node.

"after" : places the node right after the reference node.

"only" : replaces all children of the reference node with the node.

positif integer : This parameter can be a positif integer. In this case, the node will be placed as a child of the reference node with this number (counting from 0). If the number is more than number of children, the node will be appended to the reference node making it the last child.

See also full doc on dojo.place : [https://dojotoolkit.org/reference-guide/1.7/dojo/place.html]

Usually, when you want to insert some piece of HTML in your game interface, you should use "[[Game_layout:_view_and_template:_yourgamename.view.php_and_yourgamename_yourgamename.tpl#Javascript_templates|Javascript templates]]".

'''addStyleToClass: function( cssClassName, cssProperty, propertyValue )'''

Same as dojo.style(), but for all the nodes set with the specified cssClassName

=== Animations ===

'''Dojo Animations'''

BGA animations is based on Dojo Animation ([http://dojotoolkit.org/documentation/tutorials/1.8/animation/ see tutorial here]).

However, most of the time, you can just use methods below, which are built on top of Dojo Animation.

Note: one interesting method from Dojo that could be useful from time to time is "Dojo.Animation". It allows you to make any CSS property "slide" from one value to another.

'''this.slideToObject( mobile_obj, target_obj, duration, delay )'''

You can use slideToObject to "slide" an element to a target position.

Sliding element on the game area is the recommended and the most used way to animate your game interface. Using slides allow players to figure out what is happening on the game, as if they were playing with the real boardgame.

The parameters are:
* mobile_obj: the ID of the object to move. This object must be "relative" or "absolute" positioned.
* target_obj: the ID of the target object. This object must be "relative" or "absolute" positioned. Note that it is not mandatory that mobile_obj and target_obj have the same size. If their size are different, the system slides the center of mobile_obj to the center of target_obj.
* duration: (optional) defines the duration in millisecond of the slide. The default is 500 milliseconds.
* delay: (optional). If you defines a delay, the slide will start only after this delay. This is particularly useful when you want to slide several object from the same position to the same position: you can give a 0ms delay to the first object, a 100ms delay to the second one, a 200ms delay to the third one, ... this way they won't be superposed during the slide.

BE CAREFUL: The method returns an dojo.fx animation, so you can combine it with other animation if you want to. It means that you have to call the "play()" method, otherwise the animation WON'T START.

Example:
<pre>
this.slideToObject( "some_token", "some_place_on_board" ).play();
</pre>

'''this.slideToObjectPos( mobile_obj, target_obj, target_x, target_y, duration, delay )'''

This method does exactly the same as "slideToObject", except than you can specify some (x,y) coordinates. This way, "mobile_obj" will slide to the specified x,y position relatively to "target_obj".

Example: slide a token to some place on the board, 10 pixels to the bottom:
<pre>
this.slideToObjectPos( "some_token", "some_place_on_board", 0, 10 ).play();
</pre>

'''this.slideTemporaryObject( mobile_obj_html, mobile_obj_parent, from, to, duration, delay )'''

This method is useful when you want to slide a temporary HTML object from one place to another. As this object does not exists before the animation and won't remain after, it could be complex to create this object (with dojo.place), to place it at its origin (with placeOnObject) to slide it (with slideToObject) and to make it disappear at the end.

slideTemporaryObject does all of this for you:
* mobile_obj_html is a piece of HTML code that represent the object to slide.
* mobile_obj_parent is the ID of an HTML element of your interface that will be the parent of this temporary HTML object.
* from is the ID of the origin of the slide.
* to is the ID of the target of the slide.
* duration/delay works exactly like in "slideToObject"

Example:
<pre>
this.slideTemporaryObject( '<div class="token_icon"></div>', 'tokens', 'my_origin_div', 'my_target_div' );
</pre>

'''this.slideToObjectAndDestroy: function( node, to, time, delay )'''

This method is a handy shortcut to slide an existing HTML object to some place then destroy it upon arrival. It can be used for example to move a victory token or a card from the board to the player panel to show that the player earns it, then destroy it when we don't need to keep it visible on the player panel.

It works the same as this.slideToObject and takes the same arguments.

Example:
<pre>
this.slideToObjectAndDestroy( "some_token", "some_place_on_board", 1000, 0 );
</pre>

'''this.fadeOutAndDestroy( node, duration, delay )'''

This function fade out the target HTML node, then destroy it.

Example:
<pre>
this.fadeOutAndDestroy( "a_card_that_must_disappear" );
</pre>

CAREFUL: the HTML node still exists until during few milliseconds, until the fadeOut has been completed.

'''Rotating elements'''

You can check here [http://jimfulton.info/demos/dojo-animated-rotate.html an example of use] of Dojo to make an element rotate.

This example combines "Dojo.Animation" method and a CSS3 property that allow you to rotate the element.

IMPORTANT: to asses browser compatibility, you must select the CSS property to use just like in the example (see sourcecode below):

<pre>
var transform;
dojo.forEach(
['transform', 'WebkitTransform', 'msTransform',
'MozTransform', 'OTransform'],
function (name) {
if (typeof dojo.body().style[name] != 'undefined') {
transform = name;
}
});
// ... and then use "transform" as the name of your CSS property for rotation
</pre>

'''Animation Callbacks'''

If you wish to run some code only after an animation has completed you can do this by linking a callback method.

<pre>
var animation_id = this.slideToObject( mobile_obj, target_obj, duration, delay );
dojo.connect(animation_id, 'onEnd', dojo.hitch(this, 'callback_function', parameters));
animation_id.play();

…

callback_function: function(params) {
// this will be called after the animation ends
},
</pre>

If you wish to call a second animation after the first (rather than general code) then you can use a dojo animation chain (see tutorial referenced above).

=== Moving elements ===

'''this.placeOnObject( mobile_obj, target_obj )'''

placeOnObject works exactly like "slideToObject", except that the effect is immediate.

This is not really an animation, but placeOnObject is frequently used before starting an animation.

Example:
<pre>
// (We just created an object "my_new_token")

// Place the new token on current player board
this.placeOnObject( "my_new_token", "overall_player_board_"+this.player_id );

// Then slide it to its position on the board
this.slideToObject( "my_new_token", "a_place_on_board" ).play();
</pre>

'''this.placeOnObjectPos( mobile_obj, target_obj, target_x, target_y )'''

This method works exactly like placeOnObject, except than you can specify some (x,y) coordinates. This way, "mobile_obj" will be placed to the specified x,y position relatively to "target_obj".

'''this.attachToNewParent( mobile_obj, target_obj )'''

With this method, you change the HTML parent of "mobile_obj" element. "target_obj" is the new parent of this element. The beauty of
attachToNewParent is that the mobile_obj element DOES NOT MOVE during this process.

Note: what happens is that the method calculate a relative position of mobile_obj to make sure it does not move after the HTML parent changes.

Why using this method?

Changing the HTML parent of an element can be useful for the following reasons:
* When the HTML parent moves, all its child are moving with them. If some game elements is no more linked with a parent HTML object, you may want to attach it to another place.
* The z_order (vertical order of display) depends on the position in the DOM, so you may need to change the parent of some game elements when they are moving in your game area.

CAREFUL: this function destroys original object and places a clone onto a new parent, this will break all references to this HTML element (ex: dojo.connect).

== Players input ==

'''dojo.connect'''

Used to associate a player event with one of your notification method.

Example: associate a click on an element ("my_element") with one of our method ("onClickOnMyElement"):
<pre>
dojo.connect( $('my_element'), 'onclick', this, 'onClickOnMyElement' );
</pre>

Note: this is the only possible correct way to associate a player input event to your code, and you must not use anything else.

'''this.checkAction( "my_action_name" )'''

Usage: checkAction: function( action, nomessage )

Check if player can do the specified action by taking into account:
* current game state
* interface locking (a player can't do any action if an action is already in progress)

Restricted arguments names (please don't use them):

* "action"
* "module"
* "class"
return true if action is authorized (ie: the action is listed as a "possibleaction" in current game state).

return false and display an error message if not (display no message if nomessage parameter is true). The displayed error message could be either "This move is not allowed at this moment" or "An action is already in progress".

Example:
<pre>
function onClickOnGameElement( evt )
{
if( this.checkAction( "my_action" ) )
{
// Do the action
}
}
</pre>

'''this.checkPossibleActions( "my_action_name" )'''

Usage: checkPossibleActions: function( action, nomessage )

* this is independent of the player being active, so can be used instead of this.checkAction(). This is particularly useful for multiplayer states when the player is not active in a 'player may like to change their mind' scenario.

Check if player can do the specified action by taking into account:
* current game state
* interface locking (a player can't do any action if an action is already in progress)

Restricted arguments names (please don't use them):
* "action"
* "module"
* "class"

'''this.ajaxcall( url, parameters, obj_callback, callback, callback_error )'''

This method must be used to send a player input to the game server.

* url: the url of the action to perform. For a game, it must be: "/<mygame>/<mygame>/myAction.html"
* parameters: an array of parameter to send to the game server. Note that "lock:true" must always be specified in this list of parameter in order the interface can be locked during the server call.
* obj_callback: must be set to "this".
* callback: a function to trigger when the server returns and everything went fine.
* callback_error: (optional and rarely used) a function to trigger when the server returns an error.

Usage:
<pre>
this.ajaxcall( '/mygame/mygame/myaction.html', { lock: true,
arg1: myarg1,
arg2: myarg2,
...
}, this, function( result ) {
// Do some stuff after a successful call
} );
</pre>

'''this.confirmationDialog()'''

Display a confirmation dialog with a yes/no choice.

We advice you to NOT use this function unless the player action is really critical and could ruins the game, because it slows down the game and upset players.

Usage: this.confirmationDialog( "Question to displayed", callback_function_if_click_on_yes );

Example:
<pre>
this.confirmationDialog( _('Are you sure to use this bonus (points penalty at the end of the game) ?'),
dojo.hitch( this, function() {
this.ajaxcall( '/seasons/seasons/useBonus.html',
{ id:bonus_id, lock:true }, this, function( result ) {} );
} ) );
</pre>

; addEventToClass: function( cssClassName, eventName, functionName )
: Same as dojo.connect(), but for all the nodes set with the specified cssClassName

'''this.addActionButton( id, label, method, (opt)destination, (opt)blinking, (opt)color )'''

You can use this method to add an action button in the main action status bar.

Arguments:
* id: an element ID that should be unique in your HTML DOM document.
* label: the text of the button. Should be translatable (use _() function).
* method: the name of your method that must be triggered when the player clicks on this button.
* destination (optional): deprecated, do not use this. Use '''null''' as value if you need to specify other arguments.
* blinking (optional): if set to '''true''', the button is going blink to catch player's attention. Please don't abuse of blinking button.
* color: could be '''blue''' (default), '''red''' or '''gray'''.

You should only use this method in your "onUpdateActionButtons" method. Usually, you use it like this (from Hearts example):

<pre>
onUpdateActionButtons: function( stateName, args ) {

if (this.isCurrentPlayerActive()) {
switch( stateName ) {
case 'giveCards':
this.addActionButton( 'giveCards_button', _('Give selected cards'), 'onGiveCards' );
break;
}
}
},
</pre>

In the example above, we are adding a "Give selected cards" button in the case we are on game state "giveCards". When player clicks on this button, it triggers our "onGiveCards" method.

Example using blinking red button:
<pre>
this.addActionButton( 'commit_button', _('Confirm'), 'onConfirm', null, true, 'red');
</pre>

Note: at least in studio example above will make button huge, because it sets it display of blinking things to '''block''',
if you don't like it you have to change css display value
of the button to inline-block (the id of the button is the first argument, i.e 'commit_button' in example above)

== Translations ==

See [[Translations]]

== Notifications ==

When something happens on the server side, your game interface Javascript logic received a notification.

Here's how you can handle these notifications on the client side.

=== Subscribe to notifications ===

Your Javascript "setupNotifications" method is the place where you can subscribe to notifications from your PHP code.

Here's how you associate one of your Javascript method to a notification "playDisc" (from Reversi example):

<pre>
// In setupNotifications method:
dojo.subscribe( 'playDisc', this, "notif_playDisc" );
</pre>

Note: the "playDisc" corresponds to the name of the notification you define it in your PHP code, in your "notifyAllPlayers" or "notifyPlayer" method.

Then, you have to define your "notif_playDisc" method:

<pre>
notif_playDisc: function( notif )
{
// Remove current possible moves (makes the board more clear)
dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );

this.addDiscOnBoard( notif.args.x, notif.args.y, notif.args.player_id );
},
</pre>

In a notification handler like our "notif_playDisc" method, you can access to all notifications arguments with "notif.args".

Example:
<pre>
// If you did this on PHP side:
self::notifyAllPlayers( "myNotification", '', array( "myArgument" => 3 ) );

// On Javascript side, you can access the "myArgument" like this:
notif_myNotification: function( notif )
{
alert( "myArgument = " + notif.args.myArgument );
}
</pre>

=== Synchronous notifications ===

When several notifications are received by your game interface, these notifications are processed immediately, one after the other, in the same exact order they have been generated in your PHP game logic.

However, sometimes, you need to give some time to the players to figure out what happened on the game before jumping to the next notification. Indeed, in many games, they are a lot of automatic actions, and the computer is going to resolve all these actions very fast if you don't tell it not to do so.

As an example, for Reversi, when someone is playing a disc, we want to wait 500 milliseconds before doing anything else in order the opponent player can figure out what move has been played.

Here's how we do this, right after our subscription:
<pre>
dojo.subscribe( 'playDisc', this, "notif_playDisc" );
this.notifqueue.setSynchronous( 'playDisc', 500 ); // Wait 500 milliseconds after executing the playDisc handler
</pre>

=== Pre-defined notification types ===

'''tableWindow''' - This defines notification to display [[Game_interface_logic:_yourgamename.js#Scoring_dialogs|Scoring Dialogs]], see below.

'''message''' - This defines notification that shows on players log and have no other effect

// You can call this on php side without doing anything on client side
self::notifyAllPlayers( 'message', 'hello', array( ) );

== Tooltips ==

'''this.addTooltip( nodeId, _( helpString ), _( actionString ), delay )'''

Add a simple text tooltip to the DOM node.

Specify 'helpString' to display some information about "what is this game element?".
Specify 'actionString' to display some information about "what happens when I click on this element?".

You must specify both helpString and actionString. Most of the time, you should use only one and specify a void string ("") for the other one.

Usually, _() must be used for the text to be marked for translation.

"Delay" is an optional parameter. Usually, it is primarily used to specify a zero delay for some game element when the tooltip gives really important information for the game - but remember: no essential information must be placed in tooltips as they won't be displayed in some browsers (see [[BGA_Studio_Guidelines|Guidelines]]).

Example:
<pre>
this.addTooltip( 'cardcount', _('Number of cards in hand'), '' );
</pre>

'''this.addTooltipHtml( nodeId, html, delay )'''

Add an HTML tooltip to the DOM node (for more elaborate content such as presenting a bigger version of a card).

'''this.addTooltipToClass( cssClass, _( helpString ), _( actionString ), delay )'''

Add a simple text tooltip to all the DOM nodes set with this cssClass.

IMPORTANT: all concerned nodes must have IDs to get tooltips.

'''this.addTooltipHtmlToClass( cssClass, html, delay )'''

Add an HTML tooltip to to all the DOM nodes set with this cssClass (for more elaborate content such as presenting a bigger version of a card).

IMPORTANT: all concerned nodes must have IDs to get tooltips

'''this.removeTooltip( nodeId )'''

Remove a tooltip from the DOM node.

== Dialogs, warning messages, confirmation dialogs, ... ==

=== Warning messages ===

Sometimes, there is something important that is happening on the game and you have to make sure all players get the message. Most of the time, the evolution of the game situation or the game log is enough, but sometimes you need something more visible.

Ex: someone fulfill one of the end of the game condition, so this is the last turn.

'''this.showMessage( msg, type )'''

showMessage shows a message in a big rectangular area on the top of the screen of current player.

* "msg" is the string to display. It should be translated.
* "type" can be set to "info" or "error". If set to "info", the message will be an informative message on a white background. If set to "error", the message will be an error message on a red background.

Important: the normal way to inform players about the progression of the game is the game log. "showMessage" is intrusive and should not be used often.

=== Confirmation dialog ===

'''confirmationDialog( message, yesHandler, noHandler )'''

When an important action with a lot of consequences is triggered by the player, you may want to propose a confirmation dialog.

CAREFUL: the general guidelines of BGA is to AVOID the use of confirmation dialog. Confirmation dialogs slow down the game and bother players. The players knows that they have to pay attention about each move when they are playing online.

The situation where you should use a confirmation dialog are the following:
* It must not happen very often during a game.
* It must be linked to an action that can really "kill a game" if the player do not pay attention.
* It must be something that can be done by mistake (ex: a link on the action status bar).

How to display a confirmation dialog:
<pre>
this.confirmationDialog( _('Are you sure you want to bake the pie?'), dojo.hitch( this, function() {
this.bakeThePie();
} ) );
return; // nothing should be called or done after calling this, all action must be done in the handler
</pre>

=== Multiple choice dialog ===
You can use this dialog to give user a choice with small amount of options:
<pre>
var keys = [1,5,10];
this.multipleChoiceDialog(
_('How many bugs to fix?"), keys,
dojo.hitch(this, function(choice) {
var bugchoice = keys[choice];
console.log('dialog callback with '+bugchoice);
this.ajaxcall( '/mygame/mygame/fixBugs.html', { bugs: bugchoice}, this, function( result ) {} ); }));
</pre>

=== Dialogs ===

As a general rule, you shouldn't use dialogs windows.

BGA guidelines specify that all game elements should be displayed on the main screen. Players can eventually scroll down to see game elements they don't need to see anytime, and you may eventually create anchors to move between game area section. Of course dialogs windows are very practical, but the thing is: all players know how to scroll down, and not all players know how to show up your dialog window. In addition, when the dialog shows up, players can't access the other game components.

Sometimes although, you need to display a dialog window. Here is how you do this:

// Create the new dialog over the play zone. You should store the handler in a member variable to access it later
this.myDlg = new ebg.popindialog();
this.myDlg.create( 'myDialogUniqueId' );
this.myDlg.setTitle( _("my dialog title to translate") );
this.myDlg.setMaxWidth( 500 ); // Optional

// Create the HTML of my dialog.
// The best practice here is to use [[Game_layout:_view_and_template:_yourgamename.view.php_and_yourgamename_yourgamename.tpl#Javascript_templates|Javascript templates]]
var html = this.format_block( 'jstpl_myDialogTemplate', {
arg1: myArg1,
arg2: myArg2,
...
} );

// Show the dialog
this.myDlg.setContent( html ); // Must be set before calling show() so that the size of the content is defined before positioning the dialog
this.myDlg.show();

// Now that the dialog has been displayed, you can connect your method to some dialog elements
// Example, if you have an "OK" button in the HTML of your dialog:
dojo.connect( $('my_ok_button'), 'onclick', this, function(evt){
evt.preventDefault();
this.myDlg.destroy();
} );

If necessary, you can remove the default top right corner 'close' icon, or replace the function called when it is clicked:
// Removes the default close icon
this.myDlg.hideCloseIcon();

// Replace the function call when it's clicked
this.myDlg.replaceQuitCallback( function() { ... } );

=== Scoring dialogs ===

Sometimes at the end of a round you want to display a big table that details the points wins in each section of the game.

Example: in Hearts game, we display at the end of each round the number of "heart" cards collected by each player, the player who collected the Queen of Spades, and the total number of points loose by each player.

Scoring dialogs are managed entirely on '''PHP side''', but they are described here as their effects are visible only on client side.

Displaying a scoring dialog is quite simple and is using a special notification type: "tableWindow":
<pre>
// on PHP side:
$this->notifyAllPlayers( "tableWindow", '', array(
"id" => 'finalScoring',
"title" => clienttranslate("Title of the scoring dialog"),
"table" => $table
) );
</pre>

The "table" argument is a 2 dimensional PHP array that describe the table you want to display, line by line and column by column.

Example: display an 3x3 array of strings
<pre>
$table = array(
array( "one", "two", "three" ), // This is my first line
array( "four", "five", "six" ), // This is my second line
array( "seven", "height", "nine" ) // This is my third line
);
</pre>

As you can see above, in each "cell" of your array you can display a simple string value. But you can also display a complex value with a template and associated arguments like this:
<pre>
$table = array(
array( "one", "two", array( "str" => clienttranslate("a string with an ${argument}"), "args" => array( 'argument' => 'argument_value' ) ) ),
array( "four", "five", "six" ),
array( "seven", "height", "nine" )
);
</pre>

This is especially useful when you want to display player names with colors. Example from "Hearts":
<pre>
$firstRow = array( '' );
foreach( $players as $player_id => $player )
{
$firstRow[] = array( 'str' => '${player_name}',
'args' => array( 'player_name' => $player['player_name'] ),
'type' => 'header'
);
}
$table[] = $firstRow;
</pre>

You can also use three extra attributes in the parameter array for the notification:

<pre>
$this->notifyAllPlayers( "tableWindow", '', array(
"id" => 'finalScoring',
"title" => clienttranslate("Title of the scoring dialog"),
"table" => $table,
"header" => array('str' => clienttranslate('Table header with parameter ${number}'),
'args' => array( 'number' => 3 ),
),
"footer" => '<div>Some footer</div>',
"closing" => clienttranslate( "Closing button label" )
) );
</pre>

*'''header''': the content for this parameter will display before the table (also, the html will be parsed and player names will be colored according to the current game colors).
*'''footer''': the content for this parameter will display after the table (no parsing for coloring the player names)
*'''closing''': if this parameter is used, a button will be displayed with this label at the bottom of the popup and will allow players to close it (more easily than by clicking the top right 'cross' icon).

=== Scoring animated display ===

Sometimes (Terra Mystica final scoring for example), you may want to display a score value over an element to make the scoring easier to follow for the players.
You can do it with:

<pre>
this.displayScoring( anchor_id, color, score, duration );
</pre>

'''anchor_id''': ID of the element to place the animated score onto (without the '#')

'''color''': hexadecimal RGB representation of the color (should be the color of the scoring player), but without a leading '#'. For instance, 'ff0000' for red.

'''score''': numeric score to display, prefixed by a '+'

'''duration''': animation duration in milliseconds

=== Speech bubble ===

For better interactivity in some games (Love Letter for example), you may use comic book style speech bubbles to express the players voices.
This is done with:

<pre>
this.showBubble( anchor_id, text, delay, duration, custom_class )
</pre>

delay in milliseconds is optional (default 0)

duration in milliseconds is optional (default 3000)

custom_class is optional, if you need to override the default bubble style

'''Warning''': if your bubble could overlap other active elements of the interface (buttons in particular), as it stays in place even after disappearing, you should use a custom class to give it the style "pointer-events: none;" in order to intercept click events.

== Update players score ==

Increase a player score (with a positive or negative number):

<pre>
this.scoreCtrl[ player_id ].incValue( score_delta );
</pre>

Set a player score to a specific value:

<pre>
this.scoreCtrl[ player_id ].setValue( new_score );
</pre>

== Players panels ==

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

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

(from Gomoku example)
<pre>
var jstpl_player_board = '\<div class="cp_board">\
<div id="stoneicon_p${id}" class="gmk_stoneicon gmk_stoneicon_${color}"></div>0\
</div>';
</pre>

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

<pre>
// Setting up player boards
for( var player_id in gamedatas.players )
{
var player = gamedatas.players[player_id];

// Setting up players boards if needed
var player_board_div = $('player_board_'+player_id);
dojo.place( this.format_block('jstpl_player_board', player ), player_board_div );
}
</pre>

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

Very often, you have to distinguish current player and others players. In this case, you just have to create another JS template (ex: jstpl_otherplayer_board) and use it when "player_id" is different than "this.player_id".

=== Player's panel disabling/enabling ===

'''this.disablePlayerPanel( player_id )'''

Disable given player panel (the panel background become gray).

Usually, this is used to signal that this played passes, or will be inactive during a while.

Note that the only effect of this is visual. There are no consequences on the behaviour of the panel itself.

'''this.enablePlayerPanel( player_id )'''

Enable a player panel that has been disabled before.

'''this.enableAllPlayerPanels()'''

Enable all player panels that has been disabled before.

== Image loading ==

See also [[Game_art:_img_directory]].

'''Be careful''': by default, ALL images of your img directory are loaded on a player's browser when he loads the game. For this reason, don't let in your img directory images that are not useful, otherwise it's going to slowdown the game load.

'''dontPreloadImage( image_file_name )'''

Using dontPreloadImage, you tell the interface to not preload a specific image in your img directory.

Example of use:
<pre>
this.dontPreloadImage( 'cards.png' );
</pre>

This is particularly useful if for example you have 2 different themes for a game. To accelerate the loading of the game, you can specify to not preload images corresponding to the other theme.

Another example of use: in "Gosu" game with Kamakor extension, you play with 5 sets of cards among 10 available. Cards images are organized by sets, and we only preload the images corresponding to the 5 current sets with '''ensureSpecificGameImageLoading( image_file_names_array )'''.
<pre>
// By default, do not preload anything
this.dontPreloadImage( 'cards.png' );
this.dontPreloadImage( 'clan1.png' );
this.dontPreloadImage( 'clan2.png' );
this.dontPreloadImage( 'clan3.png' );
this.dontPreloadImage( 'clan4.png' );
this.dontPreloadImage( 'clan5.png' );
this.dontPreloadImage( 'clan6.png' );
this.dontPreloadImage( 'clan7.png' );
this.dontPreloadImage( 'clan8.png' );
this.dontPreloadImage( 'clan9.png' );
this.dontPreloadImage( 'clan10.png' );
var to_preload = [];
for( i in this.gamedatas.clans )
{
var clan_id = this.gamedatas.clans[i];
to_preload.push( 'clan'+clan_id+'.png' );
}
if( to_preload.length == 5 )
{
this.ensureSpecificGameImageLoading( to_preload );
}
</pre>

'''Note:''' You don't need to specify to not preload game box images (game_box.png, game_box75.png...) since they are not preloaded by default.

== Other useful stuff ==

'''dojo.hitch'''

With dojo.hitch, you can create a callback function that will run with your game object context whatever happen.

Typical example: display a BGA confirmation dialog with a callback function created with dojo.hitch:

<pre>
this.confirmationDialog( _('Are you sure you want to make this?'), dojo.hitch( this, function() {
this.ajaxcall( '/mygame/mygame/makeThis.html', { lock:true }, this, function( result ) {} );
} ) );
</pre>

In the example above, using dojo.hitch, we ensure that the "this" object will be set when the callback is called.

; updateCounters(counters)
: Useful for updating game counters in the player panel (such as resources).
: 'counters' arg is an associative array [counter_name_value => [ 'counter_name' => counter_name_value, 'counter_value' => counter_value_value], ... ]
: All counters must be referenced in this.gamedatas.counters and will be updated.
: DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.

'''onScreenWidthChange()'''
This function can be overridden in your game to manage some resizing on the client side when the browser window is resized. This function is also triggered at load time, so it can be used to adapt to the viewport size at the start of the game too.

'''updatePageTitle()'''
This function allows to update the current page title and turn description according to the game state. If the current game state description this.gamedatas.gamestate.descriptionmyturn is modified before calling the function, it allows to update the turn description without changing state.

Example from Terra Mystica:
<pre>
onClickFavorTile: function( evt )
{
[...]

if ( ... ) {

this.gamedatas.gamestate.descriptionmyturn = _('Special action: ') + _('Advance 1 space on a Cult track');
this.updatePageTitle();
this.removeActionButtons();

this.addActionButton( 'action_confirm1', _("Fire"),
function() { ... }
);
this.addActionButton( 'action_confirm2', _("Water"),
function() { ... }
);
this.addActionButton( 'action_confirm3', _("Earth"),
function() { ... }
);
this.addActionButton( 'action_confirm4', _("Air"),
function() { ... }
);

this.addActionButton( 'action_cancel', _("Cancel"), function() { ... }, false, false, 'gray'
);

return;
}

[...]

}
</pre>

== BGA GUI components ==

BGA framework provides some useful ready-to-use components for the game interface:

[[Studio#BGA_Studio_game_components_reference]]

Note that each time you are using an additional component, you must declare it at the top of your Javascript file in the list of modules used.

Example if you are using "ebg.stock":
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/stock" /// <=== we are using ebg.stock module
],
</pre>

Tools and tips of BGA Studio

2020-07-08T02:48:07Z

Quietmint: /* File Sync using lftp */

{{Studio_Framework_Navigation}}

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

To start a game:
* Go to Play now and configure game type: Simple game -> Turn-based -> Manual
* Select your game and click on "Create".
* If you want to play a game with 3 players, specify that you want a maximum of 3 players at this table.
* Click on "Express Start".

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

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

=== Switching between users ===

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

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

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

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

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

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

=== Save & restore state ===

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

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

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

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

=== Input/Output debugging section ===

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

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

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

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

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

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

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

giveMoneyToPlayer(2564,2)

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

giveToActivePlayer(money,2)

=== Stopping Hanging Game ===

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

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

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

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

==== Visual Studio Code ====

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

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

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

then find 'globs' section, and change:

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

=== File Sync ===

==== File Sync using lftp ====
[https://lftp.yar.ru/ lftp] is a fast command-line file transfer program. It's a much better choice than rsync for BGA Studio since it supports parallel threads, transfering multiple files at a time.

* Windows 10: Enable "Windows Subsystem for Linux" and install a Linux distribution from the Microsoft Store. [https://ubuntu.com/tutorials/ubuntu-on-windows Follow these instructions to install Ubuntu]. Then install lftp as below for Linux (e.g., open Ubuntu command prompt and run '''sudo apt-get install lftp''').
* Linux: Install using your package manager, for example: '''sudo apt-get install lftp'''
* Mac: Install [https://brew.sh/ Homebrew], then install lftp using '''brew install lftp'''

To upload your project to BGA studio, use the "mirror" command like this:

'''lftp sftp://myuser:mypassword@1.studio.boardgamearena.com/ -e "mirror --reverse --parallel=10 --delete /local/path/to/myproject/ myproject/; exit"

Be sure to include the trailing '''/''' after both directory names.

By default, if a file already exists on BGA Studio with the same time + size it assumed to be the same and won't be transferred. This makes the transfer process much quicker after the first time. If you're working with multiple developers on the same project and you find that it is transfers all files every time, you may want to add the option '''--ignore-time''' (if a file already exist on BGA Studio with the same size it is assumed to be the same and won't be transferred). Read [https://lftp.yar.ru/lftp-man.html the manual] for more details.

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

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

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

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

* Option 2 - sftp and rsync

<pre>

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

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

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

</pre>

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

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

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

* '''Install this extension''' https://marketplace.visualstudio.com/items?itemName=liximomo.sftp (File->Preferences->Extensions ... type SFTP and Install)

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

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

* '''Update the json''' as below:

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

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

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

=== Debuggers ===

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

=== Version Control ===
Studio providers svn for you code on server, there are some limited abilities there to see history and restore. I recommend to keep your code in another repository. I suggest to use git with local repo, which you can sync to cloud or backup.
Other option is to host source code on github, if you do use this convention github.com/<yourname>/bga-<yourgame>. In such case make sure you '''don't post high-res publisher graphics''' only web resources, and post a separate license for graphics files. Also, '''don't include a file with your sftp password''' (github is automatically crawled for passwords by hackers; a hacking attempt occurred on BGA studio for this reason in June 2020).

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

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

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

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

==== Gimp ====

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

https://www.gimp.org/

==== Shrinking ====

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

==== PDF Scrapper ====
extract images from PDF file (i.e. game rulebook) :

https://www.ilovepdf.com/

http://www.extractpdf.com/

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

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

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

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

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

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

==== BGA Workbench ====

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

== Client Tips ==

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

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

dojo.destroy('debug_output');

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

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

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

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

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

You project structure will look like this

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

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

Tools and tips of BGA Studio

2020-07-08T02:40:57Z

Quietmint: /* File Sync */

{{Studio_Framework_Navigation}}

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

To start a game:
* Go to Play now and configure game type: Simple game -> Turn-based -> Manual
* Select your game and click on "Create".
* If you want to play a game with 3 players, specify that you want a maximum of 3 players at this table.
* Click on "Express Start".

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

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

=== Switching between users ===

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

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

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

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

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

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

=== Save & restore state ===

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

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

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

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

=== Input/Output debugging section ===

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

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

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

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

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

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

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

giveMoneyToPlayer(2564,2)

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

giveToActivePlayer(money,2)

=== Stopping Hanging Game ===

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

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

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

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

==== Visual Studio Code ====

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

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

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

then find 'globs' section, and change:

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

=== File Sync ===

==== File Sync using lftp ====
[https://lftp.yar.ru/ lftp] is a fast command-line file transfer program. It's a much better choice than rsync for BGA Studio since it supports parallel threads, transfering multiple files at a time.

* Windows 10: Enable "Windows Subsystem for Linux" and install a Linux distribution from the Microsoft Store. [https://ubuntu.com/tutorials/ubuntu-on-windows Follow these instructions to install Ubuntu]. Then install lftp as below for Linux (e.g., open Ubuntu command prompt and run '''sudo apt-get install lftp''').
* Linux: Install using your package manager, for example: '''sudo apt-get install lftp'''
* Mac: Install [https://brew.sh/ Homebrew], then install lftp using '''brew install lftp'''

To upload your project to BGA studio, use the "mirror" command like this:

'''lftp sftp://myuser:mypassword@1.studio.boardgamearena.com/ -e "mirror -R --parallel=10 --delete /local/path/to/myproject/ myproject/; exit"

Be sure to include the trailing '''/''' after both directory names.

By default, if a file already exists on BGA Studio with the same time + size it assumed to be the same and won't be transferred. This makes the transfer process much quicker after the first time. If you're working with multiple developers on the same project and you find that it is transfers all files every time, you may want to add the option '''--ignore-time''' (if a file already exist on BGA Studio with the same size it is assumed to be the same and won't be transferred). Read [https://lftp.yar.ru/lftp-man.html the manual] for more details.

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

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

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

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

* Option 2 - sftp and rsync

<pre>

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

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

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

</pre>

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

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

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

* '''Install this extension''' https://marketplace.visualstudio.com/items?itemName=liximomo.sftp (File->Preferences->Extensions ... type SFTP and Install)

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

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

* '''Update the json''' as below:

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

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

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

=== Debuggers ===

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

=== Version Control ===
Studio providers svn for you code on server, there are some limited abilities there to see history and restore. I recommend to keep your code in another repository. I suggest to use git with local repo, which you can sync to cloud or backup.
Other option is to host source code on github, if you do use this convention github.com/<yourname>/bga-<yourgame>. In such case make sure you '''don't post high-res publisher graphics''' only web resources, and post a separate license for graphics files. Also, '''don't include a file with your sftp password''' (github is automatically crawled for passwords by hackers; a hacking attempt occurred on BGA studio for this reason in June 2020).

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

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

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

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

==== Gimp ====

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

https://www.gimp.org/

==== Shrinking ====

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

==== PDF Scrapper ====
extract images from PDF file (i.e. game rulebook) :

https://www.ilovepdf.com/

http://www.extractpdf.com/

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

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

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

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

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

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

==== BGA Workbench ====

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

== Client Tips ==

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

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

dojo.destroy('debug_output');

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

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

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

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

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

You project structure will look like this

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

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

Gamehelpsantorini

2020-07-07T07:18:03Z

Quietmint: /* Setup */

2018-04-03T03:36:24Z

Quietmint:

== Introduction ==
In Taluva, players build temples, towers, and huts to settle a volcanic island emerging from the South Pacific. The game ends in an early victory if a player builds '''all buildings of two types'''. Otherwise, the game ends when no tiles remain and the winner is the player who built the most '''temples''' (in case of a tie, the most '''towers''' and then the most '''huts''').

== Setup ==
Each player receives 3 temples, 2 towers, and 20 huts.

12 tiles per player are shuffled to form a draw pile. Each tile is composed of 3 hexagon spaces: A volcano and two other terrain types (from most common to least: jungle, clearing, sand, rock, lake).

== Place A Tile ==

Begin your turn by drawing and placing a tile. Choose from one of two options:

* Expand the landscape: Place your tile on the edge of the island adjacent to any existing tile.

* Volcanic eruption: Place your tile on top of two existing tiles so the volcano covers another volcano. Your tile must have a different rotation than the tile below and cannot overhang the ocean. You may destroy huts as long as you do not destroy an entire settlement (see below). Destroyed huts remain out of play.

== Build Buildings ==

End your turn by building one or more buildings on empty space(s) of any terrain type except volcano. A chain of your adjacent buildings forms a ''settlement''.

Choose from one of four options:

* Begin a new settlement by placing a '''hut''' on a first-level space not adjacent to any of your existing settlements.

* Expand an existing settlement by choosing a terrain type. On all adjacent spaces of that type, build '''huts''' equal to the height (one hut on first-level spaces, two huts on second-level spaces, etc.). You must have enough huts to build on all eligible spaces. In the example below, the red player can build 2 huts on lakes (one on each) or 1 hut on sand (but cannot build only 1 hut on lake).
[[File:Taluva-expand.png]]

* Build a '''temple''' adjacent to one of your existing settlements occupying 3 or more spaces that does not already contain a temple. In the previous example, the red player could build a temple on sand if she built huts on both lakes in a prior turn. Note that it is the number of ''spaces'', not buildings, that determines whether a temple can be built in the settlement.

* Build a '''tower''' on a third-level space (or higher) adjacent to one of your existing settlements that does not already contain a tower.

You are allowed to build in such a way that two of your settlements join together, such that there are two temples or two towers in the same settlement, for example.

'''Beware! If you cannot build, you will be eliminated from the game.'''