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

I wish I knew this when I started

From Board Game Arena
Jump to navigation Jump to search

This page contains most "I wish I knew this before..." moments (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);