Board Game Arena - User contributions [en]

BGA Code Sharing

2022-08-08T11:42:48Z

Leocaseiro: add Tic Tac Match game

{{Studio_Framework_Navigation}}

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

== Community shared components, pens, etc ==

{| class="wikitable"
|-
! NAME
! CODE LINK
! DESCRIPTION
|-
! colspan="3" | Dice models and animation
|-
| Die: 4 sided
| https://codepen.io/mrkiffie/pen/doVZgW
| code pen
|-
| Die: 6 sided
| https://github.com/elaskavaia/bga-sharedcode
| Code can be found in project
|-
| Die: 12 sided (dodecahedron)
| https://codepen.io/VictoriaLa/pen/xxLLxOP
| Code pen
|-
| Die: 20 sided
| https://codepen.io/vicentemundim/details/cenIh
| Code pen
|-
! colspan="3" | Moving object using CSS animation (mostly)
|-
| Phantom object move on oversurface
| https://codepen.io/VictoriaLa/pen/gORvdJo
| This technique creates clone of the object it moves it on another surface. It works well when parents that css transform applies such as scale and rotate
|-
| Move object directly using positioning
| https://codepen.io/VictoriaLa/pen/dyzgKVX
| This technique is modification of BGA framework method to allow mobile object not to have absolute position before or after the move (and uses css animation not dojo). Methods slideToObjectRelative, attachToNewObjectNoDestroy
|-
! colspan="3" | Responsive layout for game boards
|-
|Flex Layout
|https://codepen.io/VictoriaLa/pen/XWjJJgG
|Example on how to create flexible layout just by using css
|-
! colspan="3" | Algorithms
|-
|Hex grid
|tapestry,Tumbleweed,gaia project,Gold West
|
|-
|Shortest path on hex grid
|memoir 44
| Disjktra
|-
|Largest area on hex grid
|tapestry, ...
|
|-
|Largest area on square grid
|king domino, ...
|
|-
|Tetris pieces
|patchwork, ...
|Matrix manupations to rotate, flip and fit tetris pieces
|-
|Line of sights on hex grid
|memoir 44
|Find intersecting hexes on a line between two cells
|-
|}

== 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. See [[Tools_and_tips_of_BGA_Studio#Version_Control]] for some suggestions on how and where to publish your code externally. Also see the [https://github.com/topics/boardgamearena boardgamearena] tag on github.

'''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
! COMMENT
|-
| Shared Code (not a game)
| https://github.com/elaskavaia/bga-sharedcode
| Victoria_La
| Examples of various game components and PHP stubs of framework code to make IDE happy
|-
| BoardGameArena Workbench (not a game)
| https://github.com/danielholmes/bga-workbench
| Daniel Holmes (dhau)
|-
! GAME
! CODE LINK
! DEVELOPER
! COMMENT
|-
| 99 (Trick-taking Card Game)
| https://github.com/ekelly/bga-ninetynine
| QuasarDukeDev
|-
| Assyria
| https://github.com/sebastien-prudhomme/bga-assyria
| daikinee
|-
| Aura
| https://github.com/micahstairs/bga-aura
| Micah Stairs (micahstairs)
|-
| 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
|-
| Dungeon Roll
| https://github.com/MartinGoulet/bga-dungeonroll
| MGoulet
|-
| 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
|-
| Homesteaders
| https://github.com/npatron/bga-homesteaders
| TheBoot
|-
| Incan Gold
| https://github.com/AntonioSoler/bga-incangold
| Morgalad
|-
| Innovation
| https://github.com/micahstairs/bga-innovation
| Micah Stairs (micahstairs)
|-
| Mapmaker: The Gerrymandering Game
| https://github.com/gzhang01/bga-mapmaker
| gkz
|-
| 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
|-
| Texas 42 (domino game, still under development)
| https://github.com/ishermandom/bga-42
| Stardust Spikes, Jason Turner-Maier, Ilya Sherman
|-
| Tic Tac Match
| https://github.com/leocaseiro/bga-tictacmatch
| Leo Caseiro
|-
| Uptown
| https://github.com/elliotkendall/bga-uptown
| SpottedShroom
|-
| Via Magica
| https://github.com/christopherburke/bga_viamagica
| CuriousTerran
|-
| Just Desserts
| https://github.com/mizutismask/bga-just-desserts
| mizutismask
|-
| The King's Guild
| https://github.com/AdamNovotny/BGG-KingsGuild
| A-dam
|-
| Get the MacGuffin
| https://github.com/mizutismask/bga-get-the-MacGuffin
| mizutismask
|-
| President
| https://github.com/quaresma95/president
| quaresma95
|-
| Hardback
| https://github.com/quietmint/bga-hardback
| quietmint
|-
| Dice Summoners
| https://github.com/eoincos/bga-dicesummoners
| eoincos
|-
|}

== Projects on studio ==

Any developer can add themselves to a project as read-only from https://studio.boardgamearena.com/#!projects page (almost any project).
The list below are no-games which do not have bgg id and not showing up there.

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

== Other useful resources ==

Moved to [[Tools_and_tips_of_BGA_Studio]]

[[Category:Studio]]

Category:Studio

2022-07-11T12:05:01Z

Leocaseiro:

To search only pages from Studio category, use:

<code><nowiki>keyword "[[Category:Studio]]"</nowiki></code>

Or go to: [https://en.doc.boardgamearena.com/index.php?search=+%22%5B%5BCategory%3AStudio%5D%5D%22&title=Special%3ASearch&profile=default&fulltext=1]

Category:Studio

2022-07-11T12:00:58Z

Leocaseiro:

To search in Studio category, use:

<nowiki> keyword "[[Category:Studio]]"</nowiki>

Category:Studio

2022-07-11T11:57:19Z

Leocaseiro: Created page with "To search in Studio category, use: `keyword "Category:Studio"`"

To search in Studio category, use:
`keyword "[[Category:Studio]]"`

Gamehelptictacmatch

2022-07-09T15:31:41Z

Leocaseiro:

===Overview===

Create a line of three of your symbol AND the same colour (you are not assigned a colour)

===Turn===

Play a card either on to an empty space or a previously used space (same symbol or same colour)

===Specials===

The main makeup of the cards are different coloured X's & 0's, however, there are a few unique cards too:

Flip - This changes your side, so if you were X's you are now 0's. Your teammate stays the same as they also flip, along with the opponents

Wipe Out - Pick a player, NOT yourself, to discard all cards and draw new ones (This can be an opponent or a teammate)

Double Play - Allows you to play 2 extra cards in addition to itself. The 2 other cards CANNOT be Double Play OR Wipe Out

Gamehelptictacmatch

2022-07-09T02:19:52Z

Leocaseiro: from O to 0

===Overview===

Create a line of three of your symbol AND the same colour (you are not assigned a colour)

===Turn===

Play a card either on to an empty space or a previously used space

===Specials===

The main makeup of the cards are different coloured X's & 0's, however, there are a few unique cards too:

Flip - This changes your side, so if you were X's you are now 0's. Your teammate stays the same as they also flip, along with the opponents

Wipe Out - Pick a player, NOT yourself, to discard all cards and draw new ones (This can be an opponent or a teammate)

Double Play - Allows you to play 2 extra cards in addition to itself. The 2 other cards CANNOT be Double Play OR Wipe Out

Using Vue

2022-05-17T01:19:54Z

Leocaseiro:

This guide will discuss how to incorporate the progressive JavaScript framework [https://v3.vuejs.org/ Vue.js 3] to make a game on BGA.

[[Category:Studio]]

I wish I knew this when I started

2022-05-17T01:18:56Z

Leocaseiro:

This page contains most "I wish I knew this before..." momentics (in regards to BGA studio game development). One line per statement please with doc references. Docs link can be outside of BGA wiki.
Most of this is already documented on BGA wiki in details, search wiki or google for generic subject to find more info.

* Browser caches images and css, to force re-cache use Ctrl+F5 or Ctrl+Shift+R, and sometimes it's not enough so go to the web console > Network > check "disable cache"
* Browser has powerful embeded dev tools for inspection of dom, css and js, you can debug js right in browser (F12)
* You don't have to login with another dev account to play test the game under development, little colored arrows on studio player panel switch between test accounts
* You can run PHP functions from chat
* You can change style of elements (css) depending on their parent, sibling or other properties of the element
* You cannot save php state in global variables between actions, all data has to be stored in db
* Ajax actions in BGA do not use the traditional request-response model of a normal application. The ajax response does not contain any payload and instead you must send a notification (self::notifyAllPlayers) to communicate the response to appropriate players.
* Almost every change you make to the game via sending notifications must also be included in getAllDatas (e.g., in case a player loads/refreshes the game during the middle of play).
* You can easily scale elements by using "em" as unit for width/height and varying font-size, i.e. .meeple {width: 2em;height: 2.5em;font-size: 20px;}
* You can access your javascript methods / properties in the browser console using '''''gameui.<yourMethod>'''''
* To interactively debug JS issues you can put '''''debugger;''''' statement in your code, enable dev tools (F12) and reload. It will hit breakpoint.
* To quickly try a fix you can edit css, js and html directly in browser dev tool window, no reload required (just don't forget to copy it back to your code after)
* To spell check all your translatable strings use Project Check from control panel - it will generate all strings, you can cut & paste this in online spell checker (or just use Firefox - it has embedded spell checker).
* To remove inline style property from dom node $(token).style.removeProperty("position"); or dojo.style('token', 'position', null);

[[Category:Studio]]

SandboxScripts

2022-05-17T01:18:35Z

Leocaseiro:

This is the reference of functions you can call from your Sandbox scripts.

= Javascript =

BGA Sandbox scripts are written in Javascript.

Using Javascript, you can write scripts to automate moves for your Sandbox games & provide rules reinforcement.

Important : Contrary to the most common usage of Javascript, Sandbox scripts are executed '''on server side'''.

= BGA API =

To interact with your BGA Sandbox game, we provide you an API.

With this API, you can get properties values of game elements from the current game situation, modify them and/or trigger the game actions (ex : move this element here, flip this card, and so on).

= Quick start =

== Hello World Script ==

From Sandbox editor "interface view" tab, select an element, and access to its property (top right icon).

Go to "Scripts (advanced)" section.

In front of "When this element is clicked", enter "onMyClick".

Close the window. Go to "script view" tab.

Enter the following :

function onMyClick( element_id )
{
bga.log("Hello world! You just clicked on element " + element_id + ". Congrats!");
}

Save & publish your project, starts a test session, click on the previous element : your message appears in the log on the right!

== Top useful tips ==

* You don't have to save&publish from the Sandbox editor for each modification of your script : each time you save your script (control+S), the script used for all test sessions is updated. Note that the production version on BGA is of course NOT updated until you explicitly save&publish again your project.

* To inspect the content of a variable, you can use bga.log() in combination with JSON.stringify(). For example :

bga.log( JSON.stringify( bga.getPlayers()) );

* Alternatively to bga.log(), you can use bga.exit( "my message" ) to debug your script. With bga.exit, the script execution immediately stops and all previous game changes are cancelled, so this is very practical to try and retry an action until your script is fine.

* We advise you to develop first a full playable version of the game without the scripts, and THEN to script it.

* On Board Game Arena, players have come to expect fully implemented games with all rules enforced. So even if it's technically possible not to script the full game and to implement the game only partially, in most cases we'll publish only fully scripted games :)

== Examples/Tutorials ==

In addition to the projects you will create, you have readonly access in the sandbox to two example projects: "linesofaction" is an abstract and "apocalypseazcc" is a card game.

These two projects are fully scripted, so you can check out the scripts and use them as examples/tutorials.

= Functions you can use in your Sandbox scripts=

== Debugging functions ==

=== bga.trace( txt / obj ) ===

Write something immediately in the BGA log (on the right of the screen).

This is the most practical way to debug your script :)

Important : bga.trace is for debugging purpose only and won't be displayed on production.

Note : you can also pass an object in parameter. This will dump the content of this object in the log.

Note : in the opposite of bga.log, bga.trace is NOT cancelled if the game action failed (after a call to bga.cancel or bga.error). This makes bga.trace very practical to debug a game action that failed, and for this reason you should probably NEVER use bga.log for debugging purpose.

// Example : write "Hello world" in the log
bga.trace( "Hello world" );

// Example : dump an associative array in the log
bga.trace( { mykey: 'myvalue', another_key: 'another_value' } );

=== bga.exit( txt / obj ) ===

Stop the script immediately, display the "txt" messages and cancel (ie : rollback) on every previous API call except bga.trace :

ALL previous BGA api call are canceled and there will be no visible changes on the interface (ex : no moves, no visible property changes, ...). Only "bga.trace" API commands are kept so you can debug.

bga.exit is very practical when you want to repeat a game action again and again to debug it : with a call to bga.exit at the end of your script, you make sure that your game situation will be kept unchanged after each test.

// Example :
bga.exit( "My script is stopped by this call" );

// Example with dumping a javascript variable
bga.exit( my_variable_to_dump );

== Cancelling a game action ==

=== bga.cancel( txt ) ===

This is the function to use when a player is doing something against game rules.

The text message in parameter will be displayed to this player as a "red message", so he/she can understand the rule.

All previous BGA api call are cancelled, and there will be no visible changes on the interface.

// Example :
bga.cancel( _("You cannot move this piece here") );

Note : most of the time, you should wrap your text inside a _() translation marker to make this string translatable.

=== bga.error( text ) ===

This is the function to use when some unexpected error happens in your script.

The text message will be displayed to user, with mention "Unexpected error". The player will be incited to fill a bug report. The purpose of the message is to help you to identify the bug.

All previous BGA api call are cancelled, and there will be no visible changes on the interface.

// Example :
if( card_picked === null )
{
bga.error( "Cannot find a card to pick !" );
}

Note : you should NEVER wrap text inside bga.error with _() translation marker, because unexpected error should not be translate (so you can eventually recognize them when reported by players in bug report).

== Game log (history) ==

=== bga.log( txt, (optional) args ) ===

Write something in the BGA log on the right.

// Example : simple log
bga.log( _("A new round starts") );

You may add arguments to your log, like this :

// Example: log with argument to display a card name.
// In this example, variable "event_name" is specified afterwards.
// Note that using this, game translators only have to translate one "Event XXX is triggered" string for all possible events.
bga.log( _("Event ${event_name} is triggered"), { event_name: _( "Armageddon" ) } ) );

Note that argument "player_name" is ALWAYS pre-set with the name of the current player, so you can use it immediately.

// Example :
bga.log( _("${player_name} draw a card from the deck") );

=== bga.speechBubble( target, text, (optional) args, (optional) delay, (optional) duration, (optional) size ) ===

Display a "speech bubble", attached to the specified target, containing the specified text.

You can use "args" to customize text exactly like with bga.log.

delay : milliseconds to wait before displaying the speech bubble (default : 0).
duration : how long to show the speech bubble in milliseconds (default : 3000).
size : size of the text in percent (default: 100)

// Example :
bga.speechBubble( _("I play ${nbr} cards"), { nbr : 4 }, 0 );
bga.speechBubble( _("Good for you!"), { }, 2000 );

=== bga.displayScoring( target, color, score ) ===

Display an animated temporary "score number", attached to the specified target.

"color" should be the color of the player who is scoring for that target.

== Get / search game elements and their properties ==

=== bga.getElement( selector, (optional) fields ) ===

Allow you to retrieve informations about one game element specified using "selector" argument.

Return null if no element is found.

Note : getElement throw an error if several elements matches the selector. If you want to retrieve several elements, you should use "getElements" instead of "getElement".

The following examples are showing all the possible use of bga.getElement :

// Basic example :

// Retrieve the ID of a game element using its name ("Deck")
var deck_id = bga.getElement( { name: "Deck" } );
// Return : 1234

// Examples using "field" parameter :

// Retrieve a specific property from a game element using its name ("Deck")
var deck_id = bga.getElement( { name: "Deck" }, 'x' );
// Return : 20

// Retrieve several properties from the previous element
var deck_properties = bga.getElement( { name: "Deck" }, ['name','id','parent', 'x','y','canShuffle'] );
// Return : { name:'Deck', id:1234, parent:4321, x: 20, y:50, canShuffle: true }

// Note : as you can see, getElement returns:
// _ the element ID by default, or
// _ a single value if you request a single field, or
// _ an object if you request several fields

// Examples using different "selector" paramter

// Retrieve an element name from its id
var deck_name = bga.getElement( { id: 1234 }, ['name'] );
// Return : "Deck"

// Retrieve the last child element of another element
// Here, we are requesting for elements who has element with ID=1234 (Deck) as their parent
// Note the use of "limit:1" which allows us to retrieve only 1 element.
var first_card_on_deck_id = bga.getElement( { parent: 1234, limit:1 } );

// You can also get nested properties such as the ids of the child elements of one element, or a custom property placed on the parent element
var totem_places = bga.getElements( {tag:'TOTEMZONE'}, ['id','childs:id','childs:tags','parent:id','parent:c_value'] );

=== bga.getElements( selector, (optional) fields ) ===

Returns an object holding the properties of the elements matching the selector.

// Basic example: unselect all selected elements
bga.removeStyle( bga.getElements( {tag: 'sbstyle_selected'}), 'selected' );

=== bga.getElementsArray( selector, (optional) fields ) ===

Returns an array of all elements matching the selector, holding the required properties.

// Basic example: get id of selected element
var selected_tokens = bga.getElementsArray( {tag: 'sbstyle_selected' } );
var token_id = null;
if (selected_tokens.length > 0) {
token_id = selected_tokens[0];
}
return token_id;

// Classic example: get array of elements and iterate over it
var all_cells = bga.getElementsArray( {tag: 'CELL'}, ['id','name','tags'] );
for (var i=0; i<all_cells.length; i++) {
// ... process each cell ...
}

== Utility methods ==

=== bga.isOn( element_id, parent_id ) ===

Return true if "element_id" is a descendant of "parent_id" (ie : if element_id game element has been placed on parent_id game element).

// Example :
if( bga.isOn( bga.getElementIfByName( 'Turn counter' ), bga.getElementIfByName( 'Turn 6' ) )
{
// Trigger game end
}

== Trigger most common game actions ==

=== moveTo( id, target, path ) ===

Move element to specified target id (eventually following path defined by an array of element ids to pass over on the way)

The exact destination of element depends on target's "howToArrange" property ("How elements are arranged on it?" : spreaded/deck/...).

// Example :
bga.moveTo( bga.getElementIdByName( 'Turn counter' ), bga.getElementIdByName( 'Turn 3' ) );

=== removeElement( id ) ===

Deletes all properties from this element and remove it from play. Warning: it won't be recoverable! If you may need it later, you should move it inside a zone with visibility set to "Everyone, but hide what's inside" instead of removing it.

=== flip( element_ids ) ===

Flip target element (or array of elements) if the elements are flippable (ex: cards).

=== shuffle( element_ids ) ===

Shuffle elements contained inside the target element (or array of elements).

=== roll( element_ids ) ===

Roll the target element (or array of elements). Target elements must have the property "Can be rolled" set.

=== setDie( element_ids, value ) ===

Set the target element (or array of elements) with this value. Target elements must have the property "Can set value" set.

=== deal( deck_id, target_tag, nbr_per_target ) ===

Deal nbr_per_target cards from deck_id element to all elements having target_tag.

=== incScore( color, value ) ===

Increases the score for the player with the specified color, of the specified increment value.

=== setScore( color, value ) ===

Sets the score for the player with the specified color.

=== getScore( color ) ===

Gets the score of the player with the specified color.

== Gamestate functions ==

You can define your game flow with a list of states by adding a "states" function to your script.

function states()
{
return {
// Init game
100: {
onState: 'postSetup',
transitions: { done:200 }
},
200: {
description: _('${actplayer} must move a piece'),
descriptionmyturn: _('${you} must move a piece'),
possibleactions: ['movePiece'],
transitions: { nextPlayer: 200 }
},
};
}

Then, you will be able to use the following functions to manage the game flow.

=== checkAction( action ) ===

Check if action is valid regarding current game state and raise an error if it's not the case.

=== isActionPossible( action ) ===

Check if action is valid regarding current game state and returns a boolean with the appropriate value.

=== getActivePlayerColor() ===

Returns the color code of the currently active player

=== getActivePlayerName() ===

Returns the color code of the currently active player

=== nextPlayer() ===

Activates the next player in play order.

=== activeAllPlayers() ===

Activates all players (multiactive state).

=== endTurn( transition ) ===

Make the current player inactive and go to the next state matching the provided transition if all players are inactive (multiactive state)

=== getActivePlayerColors() ===

Returns the colors code of the currently active players

=== getCurrentPlayerColor() ===

Returns the color code of the current player (the player who made the interface action being handled; may not be the active player).

=== nextState( transition ) ===

Moves to the next state matching the provided transition.

=== gotoState( state_id ) ===

Jumps to specified state.

=== getPlayers() ===

Returns an array of players with the players information.

=== setGameProgression( progression ) ===

Updates the game progression percentage (progression must be an integer between 0 and 100)

=== endGame() ===

When the end game condition is met, you can use this function to end the game (after setting the appropriate scores!)

== Other functions ==

=== pause( milliseconds ) ===

Pause the client interface during a specified number of milliseconds.

If you do not use bga.pause, all Sandbox game actions are executed immediately and synchronously.

// Example :
bga.log( "1" ); // Will be displayed immediately on the log
bga.pause( 3000 ); // pause during 3 seconds
bga.log( "2" ); // Will be displayed after the 3 second on the log
bga.log( "3" ); // Will be displayed right after the previous one, without delay.

Tips : if you want to execute several consecutive "moveTo", you should "bga.pause" between them, otherwise your element will move directly to the final destination.

=== stopEvent() ===

Must be used to stop the event propagation if you have two clickable elements on top of one another and you want only the onclick function matching the one on top to be triggered.

function onClickCard( card_id, selection_ids ) {
// Cancel event propagation
bga.stopEvent();
[... manage the event ...]
}

=== hasTag( id, tag ) ===

Returns true if the element with this id has this tag.

=== addTag( id, tag ) ===

Adds this tag to the element with this id.

=== removeTag( id, tag ) ===

Removes this tag from the element with this id.

=== addStyle( id, style ) ===

Adds this style to the element with this id.

Predefined styles are: SELECTED / LIGHT / LIGHTBACKGROUND / REDSELECTED / CLICKABLE / ROUNDED / CLICKABLE_ROUNDED

=== removeStyle( id, style ) ===

Removes this style from the element with this id.

=== setProperties( props ) ===

This function allows to directly update properties of an object, and to manage custom properties if needed (custom properties must start with prefix "c_").

Example:

// Update player labels for player zones from "<color> player" to actual player name
var players = bga.getPlayers();
for (var color in players) {
player = players[color];

var labelId = null;
if (color == 'ff0000') labelId = bga.getElement( {name: 'Red player'} );
if (color == '008000') labelId = bga.getElement( {name: 'Green player'} );
if (color == '0000ff') labelId = bga.getElement( {name: 'Blue player'} );
if (color == 'ffa500') labelId = bga.getElement( {name: 'Yellow player'} );

var props = [];
props[labelId] = {name: player.name};
bga.setProperties( props );
}

[[Category:Studio]]

Bots and Artificial Intelligence

2022-05-17T01:17:45Z

Leocaseiro:

UNDER CONSTRUCTION

Trying to add info on how to add bots and AI in bga games. There is no framework support (now), so it is all custom stuff.

What about "Can't Stop" Bot? Well it is the only game that has AI (without I) that is treated as separate player, admins won't
reveal how it is done nor that is feasible to implement in other games.

== Games ==
The following game have modes that support bots Conspiracy, Glow, Crew, Crew Deepsea

== Techniques ==
=== Testing bot ===
Testing bot is actually JavaScript bot that presses on buttons on behalf of player. Its handy for testing on Studio.
Recommended way of doing it is add Studio only button (together with debug bar) "Run bot/Stop bot", when running it can react to state changes and press stuff.
Example "Battleship"

=== JavaScript AI ===
Currently I don't see how it is feasible, JS code requires real player connected to game and browser, so it cannot be run as AI engine

=== Server Bot as registered game Player ===
This would be ideal, but currently on Can't Stop does it and no other game can use this technique

=== Server Bot as game state action ===
This is the only feasible way in production. In addition to whatever game states are doing, it can handle fake players and simulate their moves

In some games Bot will take player color and whole board similar to what player, and can even have resources.
So it natural that Bot behaive like a player in a game.
However you cannot add fake player into player table, so you cannot add any field in that table to track resources for examples.
You cannot make fake player active or multiactive.

==== Bot Player ID ====
Reserve non-exising player id for bots (i.e. 1-6)
If bot needs color and order see below

==== Bot Color, Order and Resources ====
Create table similar player to track bots color, name, score, score_aux and possibly other stuff

<pre>
CREATE TABLE IF NOT EXISTS `playerextra` (
`player_id` int(10) unsigned NOT NULL,
`player_name` varchar(32) NOT NULL,
`player_avatar` varchar(10) NOT NULL,
`player_color` varchar(6) NOT NULL,
`player_no` int(10) NOT NULL,
`player_score` int(10) NOT NULL DEFAULT '0',
`player_score_aux` int(10) NOT NULL DEFAULT '0',
`player_ai` tinyint(1) NOT NULL DEFAULT '0' COMMENT '1 = player is an AI',
PRIMARY KEY (`player_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;
</pre>

==== Bot Actions ====
* All actions that can be done by Bot have to have $player_id as argument and not use active player
* Separate code of ajax actions themselves and functional code, so function can be run from ajax action or from game state action
* If you using getPlayerNameById to sen player_name in notification, you may have to override id (same for player color)
public function getPlayerNameById($player_id) {
if ($player_id == PLAYER_AUTOMA)
return ('Automa');
return parent::getPlayerNameById($player_id);
}
* You may also create a function like loadPlayersBasicInfosWithBots which will return similar data as loadPlayersBasicInfos but with bots ids. Cache the result if using a lot
<pre>
function loadPlayersBasicInfosWithBots() {
$player_basic = $this->loadPlayersBasicInfos();
if ( !$this->isAutoma())
return $player_basic;
if ( !isset($this->player_bots)) {
$this->player_bots = $this->getCollectionFromDb("SELECT * FROM playerextra");
}
return $this->player_bots + $player_basic;
}
</pre>

==== Bot Player Panel ====
If you want bot on player panel you have to add it manually.
You can either create template similar to real one or use this hack.
Below we get player_id and player from playerextra
<pre>
var over = $('overall_player_board_' + player_id);
if (!over) {
let active_id = this.getActivePlayers()[0];
let active_name = gamedatas.players[active_id].name;
var xclone = $('overall_player_board_' + active_id).outerHTML;
xclone = xclone.replaceAll(String(active_id), player_id);
xclone = xclone.replaceAll(active_name, player.name);
xclone = xclone.replaceAll(gamedatas.players[active_id].color, player.color);
var node = dojo.place(xclone, 'player_boards');
// tweak to change avatar status and such
}
</pre>

==== Bot Player Notifications ====
When you send notification with ${player_name} you also should send 'player_id' with you fake id.
In additio getAllDatas() should contain record matching fake player id in players field, i.e if $player has data for fake player:
protected function getAllDatas() {
$result = [];
...
$result ['players'] [$player_id] ['id'] = $player['id'];
$result ['players'] [$player_id] ['score'] = $player['score'];
$result ['players'] [$player_id] ['color'] = $player['color'];
$result ['players'] [$player_id] ['name'] = $player['name'];
...
return $result;
}

[[Category:Studio]]

Using Typescript and Scss

2022-05-17T01:14:58Z

Leocaseiro: add Studio category

This page will help you set up your project to use Typescript client file and Scss style files, and automatically build Javascript (in ES5) files and CSS files so your project stay compatible to BGA framework requirements.
You can use only TS or only SCSS part if you want, they are not linked.

== How to install the auto-build stack ==

=== Install dev stack ===
Install node/npm. Here is an example to activate auto-build in Visual Studio Code, if you use another tool I strongly recommend to find an equivalent so you don't have to launch build manually after each modification.

=== Auto build JS and CSS files ===
In VS Code, add extension https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave and then add to VSCode <code>config.json</code> extension part :
"commands": [
{
"match": ".*\\.ts$",
"isAsync": true,
"cmd": "npm run build:ts"
},
{
"match": ".*\\.scss$",
"isAsync": true,
"cmd": "npm run build:scss"
}
]
}

<code>build:ts</code> and <code>build:scss</code> are script tasks we'll configure later.

> Alternatively you can run on terminal: `npm run watch`

=== Auto-upload built files ===
Also add one auto-FTP upload extension (for example https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync) and configure it. The extension will detected modified files in the workspace, including built ones, and upload them to remote server.
In ignored files section, you can put :
"ignore": [
"\\.vscode",
"\\.git",
"\\.DS_Store",
"package.json",
"package-lock.json",
"yarn.lock",
"tsconfig.json",
"src",
"node_modules",
"README.md"
],

=== Hint ===
Make sure <code>.vscode</code> and <code>node_modules</code> are in <code>.gitignore</code> if you commit your project somewhere.

== Create skeleton ==
When you create your game in BGA Studio, a JS and CSS file are generated. As we will overwrite them with autobuild. You can put the TS/SCSS files on a <code>src</code> folder to separate them from built files, but that's not mandatory.

=== Typescript file skeleton ===
Typescript example here have been stripped down of all comments for clarity. You can view full file with generated comments [https://github.com/thoun/bga-ts-example/blob/main/src/yourgamename.ts here].
Your TS code can be splitted in multiple files, you can have a look [https://github.com/thoun/bga-ts-example here] for inspiration.
To make this page concise, I removed comments and code samples. If it's your first game, I strongly recommend you to report them on the TS file before activating auto-build !

'''<your game name>.ts'''
declare const define;
declare const ebg;
declare const $;
//declare const dojo/*: Dojo*/;
declare const _;
declare const g_gamethemeurl;

class <Your game name> /*implements Game*/ {

private gamedatas: any;
private player_id: string;
private players: { [playerId: number]: any /*Player*/ };
private playerNumber: number;

constructor() {}

public setup(gamedatas: any) {
this.setupNotifications();
}
public onEnteringState(stateName: string, args: any) {}
public onLeavingState(stateName: string) {}
public onUpdateActionButtons(stateName: string, args: any) {}
public setupNotifications() {}
}

To plug the class with BGA framework, we'll also create another file :
'''define.ts'''
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/stock"
],
function (dojo, declare) {
return declare("bgagame.<your game name>", ebg.core.gamegui, new <Your game name>());
});
Copy <code>bgagame.<your game name></code> from original JS to avoid name mistakes. <code>new <Your game name>()</code> must match your class name defined on previous file.

=== SCSS file ===
Nothing special here, just write classic SCSS (will be compiled by Dart scss) and name it '''<your game name>.scss'''

Your SCSS code can be splitted in multiple files, for example :

'''<your game name>.scss'''
@import 'gametable';

/* some classes */

'''_gametable.scss'''
/* _gametable related classes */

=== Configure package.json and tsconfig.json ===

Create a file named <code>package.json</code> on the root folder, not on the src folder.
'''package.json'''
{
"name": "<your game name>",
"version": "1.0.0",
"description": "",
"main": "<your game name>.js",
"scripts": {
"build:ts": "tsc",
"build:scss": "sass --no-source-map src/<your game name>.scss <your game name>.css",
"watch:ts": "tsc --watch",
"watch:scss": "sass --watch src/<your game name>.scss <your game name>.css",
"watch": "npm run watch:ts && npm run watch:sass"
},
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.32.6",
"typescript": "^4.1.3"
}
}

When package.json is created, run <code>npm i</code> on the root folder to install builders (will generate a node_modules folder).

For Typescript compilation we also need to set up a <code>tsconfig.json</code> on the root folder.
'''tsconfig.json'''
{
"rootDir": ".",
"compilerOptions": {
"target": "es5",
"module": "none",
"lib": ["dom", "esnext"],
"sourceMap": false,
"outFile": "<your game name>.js",
},
"files": [
"src/<your game name>.ts",
"src/define.ts"
]
}

If you want to split your code onto multiple files, just add them in the file list (order is important for dependencies, new subpart should go on top of the list). No need to import classes or types from one file to another. In fact, you can't with this configuration. If you manage to make them work, please contact me and we'll update this documentation.

=== Code completion ===
To add code completion on framework, doko, stock, ... you'll need definition files. Feel free to copy them from [https://github.com/thoun/bga-ts-example this repo] and reference them at the top of files array, even before your subpart files.

[[Category:Studio]]

I wish I knew this when I started

2022-04-25T08:41:18Z

Leocaseiro: fix typo for width

Using Typescript and Scss

2022-04-08T14:42:43Z

Leocaseiro: /* Configure package.json and tsconfig.json */

Using Typescript and Scss

2022-04-08T14:40:45Z

Leocaseiro: /* Auto build JS and CSS files */

This page will help you set up your project to use Typescript client file and Scss style files, and automatically build Javascript (in ES5) files and CSS files so your project stay compatible to BGA framework requirements.
You can use only TS or only SCSS part if you want, they are not linked.

== How to install the auto-build stack ==

=== Install dev stack ===
Install node/npm. Here is an example to activate auto-build in Visual Studio Code, if you use another tool I strongly recommend to find an equivalent so you don't have to launch build manually after each modification.

=== Auto build JS and CSS files ===
In VS Code, add extension https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave and then add to VSCode <code>config.json</code> extension part :
"commands": [
{
"match": ".*\\.ts$",
"isAsync": true,
"cmd": "npm run build:ts"
},
{
"match": ".*\\.scss$",
"isAsync": true,
"cmd": "npm run build:scss"
}
]
}

<code>build:ts</code> and <code>build:scss</code> are script tasks we'll configure later.

> Alternatively you can run on terminal: `npm run watch`

=== Auto-upload built files ===
Also add one auto-FTP upload extension (for example https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync) and configure it. The extension will detected modified files in the workspace, including built ones, and upload them to remote server.
In ignored files section, you can put :
"ignore": [
"\\.vscode",
"\\.git",
"\\.DS_Store",
"package.json",
"package-lock.json",
"yarn.lock",
"tsconfig.json",
"src",
"node_modules",
"README.md"
],

=== Hint ===
Make sure <code>.vscode</code> and <code>node_modules</code> are in <code>.gitignore</code> if you commit your project somewhere.

== Create skeleton ==
When you create your game in BGA Studio, a JS and CSS file are generated. As we will overwrite them with autobuild. You can put the TS/SCSS files on a <code>src</code> folder to separate them from built files, but that's not mandatory.

=== Typescript file skeleton ===
Typescript example here have been stripped down of all comments for clarity. You can view full file with generated comments [https://github.com/thoun/bga-ts-example/blob/main/src/yourgamename.ts here].
Your TS code can be splitted in multiple files, you can have a look [https://github.com/thoun/bga-ts-example here] for inspiration.
To make this page concise, I removed comments and code samples. If it's your first game, I strongly recommend you to report them on the TS file before activating auto-build !

'''<your game name>.ts'''
declare const define;
declare const ebg;
declare const $;
//declare const dojo/*: Dojo*/;
declare const _;
declare const g_gamethemeurl;

class <Your game name> /*implements Game*/ {

private gamedatas: any;
private player_id: string;
private players: { [playerId: number]: any /*Player*/ };
private playerNumber: number;

constructor() {}

public setup(gamedatas: any) {
this.setupNotifications();
}
public onEnteringState(stateName: string, args: any) {}
public onLeavingState(stateName: string) {}
public onUpdateActionButtons(stateName: string, args: any) {}
public setupNotifications() {}
}

To plug the class with BGA framework, we'll also create another file :
'''define.ts'''
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/stock"
],
function (dojo, declare) {
return declare("bgagame.<your game name>", ebg.core.gamegui, new <Your game name>());
});
Copy <code>bgagame.<your game name></code> from original JS to avoid name mistakes. <code>new <Your game name>()</code> must match your class name defined on previous file.

=== SCSS file ===
Nothing special here, just write classic SCSS (will be compiled by Dart scss) and name it '''<your game name>.scss'''

Your SCSS code can be splitted in multiple files, for example :

'''<your game name>.scss'''
@import 'gametable';

/* some classes */

'''_gametable.scss'''
/* _gametable related classes */

=== Configure package.json and tsconfig.json ===

Create a file named <code>package.json</code> on the root folder, not on the src folder.
'''package.json'''
{
"name": "<your game name>",
"version": "1.0.0",
"description": "",
"main": "<your game name>.js",
"scripts": {
"build:ts": "tsc",
"build:scss": "sass --no-source-map src/<your game name>.scss <your game name>.css",
"watch:scss": "sass --watch src/<your game name>.scss <your game name>.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.32.6",
"typescript": "^4.1.3"
}
}

When package.json is created, run <code>npm i</code> on the root folder to install builders (will generate a node_modules folder).

For Typescript compilation we also need to set up a <code>tsconfig.json</code> on the root folder.
'''tsconfig.json'''
{
"rootDir": ".",
"compilerOptions": {
"target": "es5",
"module": "none",
"lib": ["dom", "esnext"],
"sourceMap": false,
"outFile": "<your game name>.js",
},
"files": [
"src/<your game name>.ts",
"src/define.ts"
]
}

If you want to split your code onto multiple files, just add them in the file list (order is important for dependencies, new subpart should go on top of the list). No need to import classes or types from one file to another. In fact, you can't with this configuration. If you manage to make them work, please contact me and we'll update this documentation.

=== Code completion ===
To add code completion on framework, doko, stock, ... you'll need definition files. Feel free to copy them from [https://github.com/thoun/bga-ts-example this repo] and reference them at the top of files array, even before your subpart files.

Using Typescript and Scss

2022-04-08T14:39:45Z

Leocaseiro: /* Configure package.json and tsconfig.json */

This page will help you set up your project to use Typescript client file and Scss style files, and automatically build Javascript (in ES5) files and CSS files so your project stay compatible to BGA framework requirements.
You can use only TS or only SCSS part if you want, they are not linked.

== How to install the auto-build stack ==

=== Install dev stack ===
Install node/npm. Here is an example to activate auto-build in Visual Studio Code, if you use another tool I strongly recommend to find an equivalent so you don't have to launch build manually after each modification.

=== Auto build JS and CSS files ===
In VS Code, add extension https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave and then add to VSCode <code>config.json</code> extension part :
"commands": [
{
"match": ".*\\.ts$",
"isAsync": true,
"cmd": "npm run build:ts"
},
{
"match": ".*\\.scss$",
"isAsync": true,
"cmd": "npm run build:scss"
}
]
}

<code>build:ts</code> and <code>build:scss</code> are script tasks we'll configure later.

=== Auto-upload built files ===
Also add one auto-FTP upload extension (for example https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync) and configure it. The extension will detected modified files in the workspace, including built ones, and upload them to remote server.
In ignored files section, you can put :
"ignore": [
"\\.vscode",
"\\.git",
"\\.DS_Store",
"package.json",
"package-lock.json",
"yarn.lock",
"tsconfig.json",
"src",
"node_modules",
"README.md"
],

=== Hint ===
Make sure <code>.vscode</code> and <code>node_modules</code> are in <code>.gitignore</code> if you commit your project somewhere.

== Create skeleton ==
When you create your game in BGA Studio, a JS and CSS file are generated. As we will overwrite them with autobuild. You can put the TS/SCSS files on a <code>src</code> folder to separate them from built files, but that's not mandatory.

=== Typescript file skeleton ===
Typescript example here have been stripped down of all comments for clarity. You can view full file with generated comments [https://github.com/thoun/bga-ts-example/blob/main/src/yourgamename.ts here].
Your TS code can be splitted in multiple files, you can have a look [https://github.com/thoun/bga-ts-example here] for inspiration.
To make this page concise, I removed comments and code samples. If it's your first game, I strongly recommend you to report them on the TS file before activating auto-build !

'''<your game name>.ts'''
declare const define;
declare const ebg;
declare const $;
//declare const dojo/*: Dojo*/;
declare const _;
declare const g_gamethemeurl;

class <Your game name> /*implements Game*/ {

private gamedatas: any;
private player_id: string;
private players: { [playerId: number]: any /*Player*/ };
private playerNumber: number;

constructor() {}

public setup(gamedatas: any) {
this.setupNotifications();
}
public onEnteringState(stateName: string, args: any) {}
public onLeavingState(stateName: string) {}
public onUpdateActionButtons(stateName: string, args: any) {}
public setupNotifications() {}
}

To plug the class with BGA framework, we'll also create another file :
'''define.ts'''
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/stock"
],
function (dojo, declare) {
return declare("bgagame.<your game name>", ebg.core.gamegui, new <Your game name>());
});
Copy <code>bgagame.<your game name></code> from original JS to avoid name mistakes. <code>new <Your game name>()</code> must match your class name defined on previous file.

=== SCSS file ===
Nothing special here, just write classic SCSS (will be compiled by Dart scss) and name it '''<your game name>.scss'''

Your SCSS code can be splitted in multiple files, for example :

'''<your game name>.scss'''
@import 'gametable';

/* some classes */

'''_gametable.scss'''
/* _gametable related classes */

=== Configure package.json and tsconfig.json ===

Create a file named <code>package.json</code> on the root folder, not on the src folder.
'''package.json'''
{
"name": "<your game name>",
"version": "1.0.0",
"description": "",
"main": "<your game name>.js",
"scripts": {
"build:ts": "tsc",
"build:scss": "sass --no-source-map src/<your game name>.scss <your game name>.css",
"watch:scss": "sass --watch src/<your game name>.scss <your game name>.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.32.6",
"typescript": "^4.1.3"
}
}

When package.json is created, run <code>npm i</code> on the root folder to install builders (will generate a node_modules folder).

For Typescript compilation we also need to set up a <code>tsconfig.json</code> on the root folder.
'''tsconfig.json'''
{
"rootDir": ".",
"compilerOptions": {
"target": "es5",
"module": "none",
"lib": ["dom", "esnext"],
"sourceMap": false,
"outFile": "<your game name>.js",
},
"files": [
"src/<your game name>.ts",
"src/define.ts"
]
}

If you want to split your code onto multiple files, just add them in the file list (order is important for dependencies, new subpart should go on top of the list). No need to import classes or types from one file to another. In fact, you can't with this configuration. If you manage to make them work, please contact me and we'll update this documentation.

=== Code completion ===
To add code completion on framework, doko, stock, ... you'll need definition files. Feel free to copy them from [https://github.com/thoun/bga-ts-example this repo] and reference them at the top of files array, even before your subpart files.