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

I wish I knew this when I started: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
No edit summary
mNo edit summary
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.
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.
Most of this is already documented on BGA wiki in details, search wiki or google for generic subject to find more info.


Line 10: Line 10:
* 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.
* 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).
* 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 wight/height and varying font-size, i.e. .meeple {width: 2em;height: 2.5em;font-size: 20px;}
* 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>'''''
* 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 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 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 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"); // still don't know how to do this in dojo
* To remove inline style property from dom node $(token).style.removeProperty("position"); or dojo.style('token', 'position', null);
 
 
[[Category:Studio]]

Latest revision as of 02:16, 12 May 2024

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);