This is a documentation for Board Game Arena: play board games online !

BGA Code Sharing

From Board Game Arena
Jump to navigation Jump to search

Game File Reference

Useful Components


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

Undocumented component (if somebody knows please help with docs)

  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.


Game Development Process

Guides for Common Topics

Miscellaneous Resources

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

Dice models and animation
Die: 4 sided code pen
Die: 4 sided code pen
Die: 6 sided Code can be found in project
Die: 12 sided (dodecahedron) Code pen
Die: 20 sided Code pen
Moving object using CSS animation (mostly)
Phantom object move on oversurface 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 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
Responsive layout for game boards
Flex Layout Example on how to create flexible layout just by using css
Hex grid tapestry,Tumbleweed,gaia project,Gold West
Shortest path on hex grid memoir 44 Dijkstra
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
Alternative implementations of BGA modules
Scrollmap with zoom you can find it in cacao an implementation in cacao (currently only changed in studio) . # improvements compare to scrollmap:

- add zoom capabilities

- add possibility to adjust pan delta to tile size when clicking on arrows

- allow zoom with scroll wheel. only allow zoom with wheel if alt or ctrl or shift are pressed by default. add possibility to select which key need to be pressed when zooming with wheel

- allow pan/scroll and pinch zoom on smartphone. only allow 2 fingers to start scrolling by default, one finger is for page scrolling

- make clickable area of buttons a bit bigger on smartphone

- improve animation between game board and player bards thanks to an animation_div

- add support to long click on buttons (continuous scroll or zoom or enlarge/reduce until button released)

Scrollmap Plus patchwork Implementation with some bugs fixed, improved drag support and ability to use only one direction (i.e. only horizontal like carousel). Found in modules/extscrollmap.js
Zoom Repo | Demo (visible on Knarr, Azul, Abyss, ...) Allow the user to zoom on the game board. Include the controls to zoom, and handle the scale applied to the HTML element.
Cards Repo | Demo (visible on Knarr, King of Tokyo, Abyss, ...) Alternative to BGA Stock component, using CSS transitions instead of dojo animations.
Jump to Repo | Demo (visible on Knarr, Elawa) Add floating controls to quickly jump to a player's table
Help Repo | Demo (visible on Knarr) Add floating help buttons at the bottom left corner of the screen
Dice Repo | Demo (not used yet) Handle dice display and animation WORK IN PROGRESS Only d6 is started


Add the game name, a link to repository 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 boardgamearena topic 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.

Shared Code (not a game) Victoria_La Examples of various game components and PHP stubs of framework code to make IDE happy
Vanilla Typescipt template (not a game) Victoria_La Project template for typescript and using minimal dojo, good for vscode - type checking, auto-complete, navigation
BoardGameArena Workbench (not a game) Daniel Holmes (dhau)
BGA-boilerplate Tisaac (and Vincentt ?) Main boilerplate with extended "basic" function and code structure
99 (Trick-taking Card Game) QuasarDukeDev
Abandon All Artichokes __wiz__, rojomojo
Assyria daikinee
Aura Micah Stairs (micahstairs)
Bandido ophelopede & Harkle
The Battle for Hill 218 Daniel Holmes (dhau)
Bonbons Morgalad
Big Monster nicotacotac
Canosa junibegood
Coinche Draasill
Copenhagen JoeProgram
Coup: City State quietmint
Dice Summoners eoincos
Dungeon Roll MGoulet
Egyptian Ratscrew 0BuRner
Eruption Andy_K
A Fistful Of Gold Brainchild
Florenza: The Card Game tarini
For-Ex AmadanNaBriona
Get the MacGuffin mizutismask
Hardback quietmint
Hearts (Tutorial) Victoria_La
Homesteaders TheBoot
Incan Gold Morgalad
In the Year of the Dragon (10th Anniversary Edition) AmadanNaBriona
Just Desserts mizutismask
The King's Guild A-dam
The Lady and the Tiger (Doors) AmadanNaBriona
Mapmaker: The Gerrymandering Game gkz
Marco Polo rcitaliano
Nile Andy_K
Noir: Killer vs Inspector ch huang
Penny Press A-dam
Perikles AmadanNaBriona
P.I., (mirror) Fabian Neumann (fa81)
President quaresma95
Santorini Morgalad, quietmint, Tisaac
Tablut Lucas-C & ntaffore
Takara Island Morgalad
Taluva Morgalad & quietmint
Teotihuacan: City of Gods Trompetenhut
Texas 42 (domino game, still under development) Stardust Spikes, Jason Turner-Maier, Ilya Sherman
Tic Tac Match Leo Caseiro
Trick of the Rails AmadanNaBriona
Uptown SpottedShroom
Via Magica CuriousTerran

Projects on studio

Any developer can add themselves to a project as read-only from!projects page (almost any project).

If it is not visible: a) it has no bgg id b) it is already published (use radio button to switch) c) it is an old game not developed on studio.

Other useful resources

Moved to Tools_and_tips_of_BGA_Studio