Game interface logic: yourgamename.js - Istor ar c'hemmoù

Victoria la: /* Notifications */

2016-10-08T02:41:46Z

Notifications

← Stumm kent		Stumm eus an 8 Her 2016 da 04:41
Linenn 488:		Linenn 488:
	</pre>		</pre>

	~~=== Pre-defined notification type ===~~

	~~'''tableWindow''' - This defines notification to display [[Game_interface_logic:_yourgamename.js#Scoring Dialogs\|Scoring Dialogs]], see below.~~

	=== Synchronous notifications ===		=== Synchronous notifications ===
Linenn 505:		Linenn 502:
	this.notifqueue.setSynchronous( 'playDisc', 500 ); // Wait 500 milliseconds after executing the playDisc handler		this.notifqueue.setSynchronous( 'playDisc', 500 ); // Wait 500 milliseconds after executing the playDisc handler
	</pre>		</pre>


			=== Pre-defined notification types ===

			'''tableWindow''' - This defines notification to display [[Game_interface_logic:_yourgamename.js#Scoring_dialogs\|Scoring Dialogs]], see below.

			'''message''' - This defines notification that shows on players log and have no other effect

			// You can call this on php side without doing anything on client side
			self::notifyAllPlayers( 'message', 'hello', array( ) );

	== Tooltips ==		== Tooltips ==

Victoria la: /* Subscribe to notifications */

2016-10-08T02:23:33Z

Subscribe to notifications

← Stumm kent		Stumm eus an 8 Her 2016 da 04:23
Linenn 487:		Linenn 487:
	}		}
	</pre>		</pre>

			=== Pre-defined notification type ===

			'''tableWindow''' - This defines notification to display [[Game_interface_logic:_yourgamename.js#Scoring Dialogs\|Scoring Dialogs]], see below.

	=== Synchronous notifications ===		=== Synchronous notifications ===

Victoria la: /* Scoring dialogs */

2016-10-08T02:15:28Z

Scoring dialogs

← Stumm kent		Stumm eus an 8 Her 2016 da 04:15
Linenn 683:		Linenn 683:
	"title" => clienttranslate("Title of the scoring dialog"),		"title" => clienttranslate("Title of the scoring dialog"),
	"table" => $table,		"table" => $table,
	"header" => '~~<div~~>~~Some~~ header~~</div~~>',		"header" => array('str' => clienttranslate('Table header with parameter ${number}'),
			'args' => array( 'number' => 3 ),
			),
	"footer" => '<div>Some footer</div>',		"footer" => '<div>Some footer</div>',
	"~~closelabel~~" => clienttranslate( "Closing button label" )		"closing" => clienttranslate( "Closing button label" )
	) );		) );
	</pre>		</pre>

	*'''header''': the content for this parameter will display before the table (also, the html will be parsed and player names will be colored according to the current game colors)		*'''header''': the content for this parameter will display before the table (also, the html will be parsed and player names will be colored according to the current game colors).
	*'''footer''': the content for this parameter will display after the table (no parsing for coloring the player names)		*'''footer''': the content for this parameter will display after the table (no parsing for coloring the player names)
	*'''~~closelabel~~''': if this parameter is used, a button will be displayed with this label at the bottom of the popup and will allow players to close it (more easily than by clicking the top right 'cross' icon)~~. NB: this last parameter is not yet - 24/02/2014 - deployed on the studio, but can be used already and will take effect immediately with the next update~~.		*'''closing''': if this parameter is used, a button will be displayed with this label at the bottom of the popup and will allow players to close it (more easily than by clicking the top right 'cross' icon).

	== Update players score ==		== Update players score ==

Victoria la: /* Animations */

2016-08-31T01:59:47Z

Animations

← Stumm kent		Stumm eus an 31 Eos 2016 da 03:59
Linenn 218:		Linenn 218:
	'''this.slideToObjectPos( mobile_obj, target_obj, target_x, target_y, duration, delay )'''		'''this.slideToObjectPos( mobile_obj, target_obj, target_x, target_y, duration, delay )'''

	This method does exactly the same ~~than~~ "~~slideToObjectPos~~", except than you can specify some (x,y) coordinates. This way, "mobile_obj" will slide to the specified x,y position relatively to "target_obj".		This method does exactly the same as "slideToObject", except than you can specify some (x,y) coordinates. This way, "mobile_obj" will slide to the specified x,y position relatively to "target_obj".

	Example: slide a token to some place on the board, 10 pixels to the bottom:		Example: slide a token to some place on the board, 10 pixels to the bottom:

Victoria la: /* Dialogs */

2016-07-26T02:09:48Z

Dialogs

← Stumm kent		Stumm eus an 26 Gou 2016 da 04:09
Linenn 597:		Linenn 597:
	Sometimes although, you need to display a dialog window. Here is how you do this:		Sometimes although, you need to display a dialog window. Here is how you do this:

	~~<pre>~~

	// Create the new dialog. You should store the handler in a member variable to access it later		// Create the new dialog. You should store the handler in a member variable to access it later
	this.myDlg = new dijit.Dialog({ title: _("my dialog title to translate") });		this.myDlg = new dijit.Dialog({ title: _("my dialog title to translate") });

	// Create the HTML of my dialog. The best practice here is to use [[Game_layout:_view_and_template:_yourgamename.view.php_and_yourgamename_yourgamename.tpl#Javascript_templates\|Javascript templates]]:		// Create the HTML of my dialog.
			// The best practice here is to use [[Game_layout:_view_and_template:_yourgamename.view.php_and_yourgamename_yourgamename.tpl#Javascript_templates\|Javascript templates]]
	var html = this.format_block( 'jstpl_myDialogTemplate', {		var html = this.format_block( 'jstpl_myDialogTemplate', {
	arg1: myArg1,		arg1: myArg1,
Linenn 608:		Linenn 609:
	...		...
	} );		} );

	// Show the dialog		// Show the dialog
	this.myDlg.attr("content", html );		this.myDlg.attr("content", html );
	this.myDlg.show();		this.myDlg.show();

	// Now that the dialog has been displayed, you can connect your method to some dialog elements		// Now that the dialog has been displayed, you can connect your method to some dialog elements
	// Example, a "close" button:		// Example, a "close" button:
Linenn 620:		Linenn 621:
	} );		} );

	~~</pre>~~

	Tip: be careful with "hide()" method to close your dialog: the dialog and its content is not completely removed from the DOM. It can cause you problems if you try to display the same dialog several times. A good practice is to wrap all the content of your dialog in a "<div id='myDlgContent'>" div element, and to call "dojo.destroy('myDlgContent')" before displaying your dialog.
			Tip: be careful with "hide()" method to close your dialog: the dialog and its content is not completely removed from the DOM. It can cause you problems if you try to display the same dialog several times. A good practice is to wrap all the content of your dialog in a <nowiki><div id='myDlgContent'></nowiki> div element, and to call "dojo.destroy('myDlgContent')" before displaying your dialog.

	=== Scoring dialogs ===		=== Scoring dialogs ===

Victoria la: /* Confirmation dialog */

2016-07-26T02:02:32Z

Confirmation dialog

@@ Linenn 575: / Linenn 575: @@
              this.ajaxcall( '/mygame/mygame/makeThis.html', { lock:true }, this, function( result ) {} );
          } ) );
 </pre>

Sourisdudesert: /* Players input */

2015-11-06T15:54:21Z

Players input

← Stumm kent		Stumm eus an 6 Du 2015 da 17:54
Linenn 405:		Linenn 405:
	: Same as dojo.connect(), but for all the nodes set with the specified cssClassName		: Same as dojo.connect(), but for all the nodes set with the specified cssClassName

	'''this.addActionButton( id, label, method, (opt)depreciated, (opt)bHighlight )'''		'''this.addActionButton( id, label, method, (opt)depreciated, (opt)bHighlight, (opt)color )'''

	You can use this method to add an action button in the main action status bar.		You can use this method to add an action button in the main action status bar.
Linenn 414:		Linenn 414:
	* method: the name of your method that must be triggered when the player clicks on this button.		* method: the name of your method that must be triggered when the player clicks on this button.
	* depreciated (optional): do not use this. Please not specify this argument or use "null".		* depreciated (optional): do not use this. Please not specify this argument or use "null".
	* bHighlight: if set to "true", the button is going blink to catch player's attention. Please don't abuse of blinking button.		* bHighlight (optional): if set to "true", the button is going blink to catch player's attention. Please don't abuse of blinking button.
			* color: could be '''blue''' (default), '''red''' or '''gray'''.

	You should only use this method in your "onUpdateActionButtons" method. Usually, you use it like this (from Hears example):		You should only use this method in your "onUpdateActionButtons" method. Usually, you use it like this (from Hears example):

Ludovic: /* Access and manipulate the DOM */

2015-10-31T10:15:47Z

Access and manipulate the DOM

← Stumm kent		Stumm eus an 31 Her 2015 da 12:15
Linenn 164:		Linenn 164:
	values possibles :		values possibles :

	"replace" : (see description above)		"replace" : (see description above).

	"first" : Places the node as a child of the reference node. The node is placed as the first child.		"first" : Places the node as a child of the reference node. The node is placed as the first child.

	"last" : Places the node as a child of the reference node. The node is placed as the last child.		"last" : Places the node as a child of the reference node. The node is placed as the last child.

	"before" : places the node right before the reference node.		"before" : places the node right before the reference node.

	"last (value by default) " : places the node right after the reference node.		"last (value by default) " : places the node right after the reference node.

	"only" : replaces all children of the reference node with the node.		"only" : replaces all children of the reference node with the node.

	positif integer : This parameter can be a positif integer. In this case, the node will be placed as a child of the reference node with this number (counting from 0). If the number is more than number of children, the node will be appended to the reference node making it the last child.		positif integer : This parameter can be a positif integer. In this case, the node will be placed as a child of the reference node with this number (counting from 0). If the number is more than number of children, the node will be appended to the reference node making it the last child.

Ludovic: /* Access and manipulate the DOM */

2015-10-31T10:14:39Z

Access and manipulate the DOM

@@ Linenn 160: / Linenn 160: @@
 </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].
+The third parameter of dojo.place can take various interesting value.
 Usually, when you want to insert some piece of HTML in your game interface, you should use "[[Game_layout:_view_and_template:_yourgamename.view.php_and_yourgamename_yourgamename.tpl#Javascript_templates|Javascript templates]]".

Archduke: /* General tips */

2014-06-05T16:00:00Z

General tips

← Stumm kent		Stumm eus an 5 Mez 2014 da 18:00
Linenn 33:		Linenn 33:
	: You can update it as needed to keep an up to date reference of the game on the client side if you need it (most of the time you don't).		: You can update it as needed to keep an up to date reference of the game on the client side if you need it (most of the time you don't).

	; isCurrentPlayerActive()		; this.isCurrentPlayerActive()
	: Returns true if the player on whose browser the code is running is currently active (it's his turn to play)		: Returns true if the player on whose browser the code is running is currently active (it's his turn to play)