This is a documentation for Board Game Arena: play board games online !
Game interface logic: yourgamename.js: Forskjell mellom revisjoner
Ingen redigeringsforklaring |
|||
Linje 28: | Linje 28: | ||
To realize game although, you only need to use a few part of the Dojo framework. Here's the list of the most useful methods you can use for your game interface: | To realize game although, you only need to use a few part of the Dojo framework. Here's the list of the most useful methods you can use for your game interface: | ||
'''$('some_html_element_id')''' | |||
The $() function is used to get some HTML element using its "id" attribute. | |||
Example 1: modify the content of a "span" element: | |||
<pre> | |||
In your HTML code: | |||
<span id="a_value_in_the_game_interface">1234</span> | |||
In your Javascript code: | |||
$('a_value_in_the_game_interface').innerHTML = "9999"; | |||
</pre> | |||
'''dojo.place''' | |||
dojo.place is the best function to insert some HTML code somewhere in your game interface without breaking something. It is much better to use that "innerHTML=''" method as soon as 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> | |||
Note: the third parameter of dojo.place can take various interesting value: "first", "after", ... [http://dojotoolkit.org/reference-guide/1.7/dojo/place.html See full doc on dojo.place]. | |||
== Useful methods from the BGA framework == | == Useful methods from the BGA framework == |
Revisjonen fra 14. jan. 2013 kl. 17:22
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 change from the server and how it will show in the browser.
File structure
The details on how the file is structured is described directly with comments on the code skeleton provided to you.
Basically, here's this structure:
- constructor: here you can define variable global to your whole interface.
- setup: this method is called when the page is refreshed, in order you can setup the game interface.
- onEnteringState: the method is called when entering in a new game state. This way you can customize the view for this game state.
- onLeavingState: the method is called when leaving a game state.
- onUpdateActionButtons: called when entering in a new state, in order you can add action buttons in status bar.
- (utility methods): at this place you can define your utility methods
- (player's actions): at this place you can write your handlers for player's action on the interface (ex: click on an item).
- setupNotifications: in this method you associate notifications with notification handlers. This way, for each game notification, you trigger a javascript method to handle it and update the game interface.
- (notification handlers): at this place you can define your notifications handlers.
Dojo framework
BGA is using the Dojo Javascript framework.
The Dojo framework allows us to do complex things easier, and the BGA framework is using Dojo framework a lot.
To realize game although, you only need to use a few part of the Dojo framework. Here's the list of the most useful methods you can use for your game interface:
$('some_html_element_id')
The $() function is used to get some HTML element using its "id" attribute.
Example 1: modify the content of a "span" element:
In your HTML code: <span id="a_value_in_the_game_interface">1234</span> In your Javascript code: $('a_value_in_the_game_interface').innerHTML = "9999";
dojo.place
dojo.place is the best function to insert some HTML code somewhere in your game interface without breaking something. It is much better to use that "innerHTML=" method as soon as you must insert HTML tags and not only values.
// 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" );
Note: the third parameter of dojo.place can take various interesting value: "first", "after", ... See full doc on dojo.place.
Useful methods from the BGA framework
- 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).
- this.gamedatas
- Contains your initial set of datas to init the game, created at game start or game refresh (F5)
- You can update it as needed to keep an up to date reference of the game on the client side.
- slideToObject
- function( mobile_obj, target_obj, duration, delay )
- Return an dojo.fx animation that is sliding a DOM object from its current position over another one
- Animate a slide of the DOM object referred to by domNodeToSlide from its current position to the xpos, ypos relative to the object referred to by domNodeToSlideTo.
- slideToObjectPos
- function( mobile_obj, target_obj, target_x, target_y, duration, delay )
- Return an dojo.fx animation that is sliding a DOM object from its current position over another one at the given coordinates relative to the target object.
- 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'.
- addTooltip( node, _( helpString ), _( actionString ), delay );
- Add a simple text tooltip to the DOM node. Only one of 'helpString' or 'actionString' must be used. _() must be used for the text to be marked for translation.
- addTooltipHtml( node, html, delay );
- Add an HTML tooltip to the DOM node (for more elaborate content such as presenting a bigger version of a card).
- addTooltipToClass( cssClass, _( helpString ), _( actionString ), delay );
- Add a simple text tooltip to all the DOM nodes set with this cssClass. Only one of 'helpString' or 'actionString' must be used. _() must be used for the text to be marked for translation.
- NB: all concerned nodes must have IDs to get tooltips
- 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).
- NB: all concerned nodes must have IDs to get tooltips
- addEventToClass
- function( cssClassName, eventName, functionName )
- Same as dojo.connect(), but for all the nodes set with the specified cssClassName
- addStyleToClass
- function( cssClassName, cssProperty, propertyValue )
- Same as dojo.style(), but for all the nodes set with the specified cssClassName
- isCurrentPlayerActive()
- Returns true if the player on whose browser the code is running is currently active (it's his turn to play)
- checkAction
- function( action, nomessage )
- Check if player can do the specified action by taking into account: _ current game state & _ interface locking
- return true if action is authorized
- return false and display an error message if not (display no message if nomessage is specified)
- showMessage
- function( msg, type )
- Show an information message during a few seconds at the top of the page
- Type can be 'error' or 'info'
- this.scoreCtrl[ player_id ].incValue( score_delta );
- Adds score_delta (positive or negative integer) to the current score value for player