Game interface logic: yourgamename.js - تاریخچهٔ نسخه‌ها

Victoria la: /* Players input */

2017-02-27T02:58:51Z

Players input

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۷ فوریهٔ ۲۰۱۷، ساعت ۰۴:۵۸
خط ۴۰۵:		خط ۴۰۵:
	: 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~~, (opt)color )'''		'''this.addActionButton( id, label, method, (opt)destination, (opt)blinking, (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.

	Arguments:		Arguments:
	* id: a ID that should be unique in your HTML DOM document.		* id: an element ID that should be unique in your HTML DOM document.
	* label: the text of the button. Should be translatable (use _() function).		* label: the text of the button. Should be translatable (use _() function).
	* 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"~~.		* destination (optional): deprecated, do not use this. Use '''null''' as value if you need to specify other arguments.
	* ~~bHighlight~~ (optional): if set to "true", the button is going blink to catch player's attention. Please don't abuse of blinking button.		* blinking (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'''.		* color: could be '''blue''' (default), '''red''' or '''gray'''.

خط ۴۲۰:		خط ۴۲۰:

	<pre>		<pre>
	onUpdateActionButtons: function( stateName, args )		onUpdateActionButtons: function( stateName, args ) {
	{
	~~console.log( 'onUpdateActionButtons: '+stateName );~~

	if( this.isCurrentPlayerActive() )		if (this.isCurrentPlayerActive()) {
	{		switch( stateName ) {
	switch( stateName )
	{
	case 'giveCards':		case 'giveCards':
	this.addActionButton( 'giveCards_button', _('Give selected cards'), 'onGiveCards' );		this.addActionButton( 'giveCards_button', _('Give selected cards'), 'onGiveCards' );
	break;		break;

	}		}
	}		}
خط ۴۳۸:		خط ۴۳۳:

	In the example above, we are adding a "Give selected cards" button in the case we are on game state "giveCards". When player clicks on this button, it triggers our "onGiveCards" method.		In the example above, we are adding a "Give selected cards" button in the case we are on game state "giveCards". When player clicks on this button, it triggers our "onGiveCards" method.

			Example using blinking red button:
			<pre>
			this.addActionButton( 'commit_button', _('Confirm'), 'onConfirm', null, true, 'red');
			</pre>

			Note: at least in studio example above will make button huge, because it sets it display of blinking things to '''block''',
			if you don't like it you have to change css display value
			of the button to inline-block (the id of the button is the first argument, i.e 'commit_button' in example above)

	== Translations ==		== Translations ==

Cowseye: /* Adding stuff to player's panel */

2017-01-30T09:46:08Z

Adding stuff to player's panel

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۳۰ ژانویهٔ ۲۰۱۷، ساعت ۱۱:۴۶
خط ۷۴۲:		خط ۷۴۲:

	// Setting up players boards if needed		// Setting up players boards if needed
	var player_board_div = $('~~overall_player_board_~~'+player_id);		var player_board_div = $('player_board_'+player_id);
	dojo.place( this.format_block('jstpl_player_board', player ), player_board_div );		dojo.place( this.format_block('jstpl_player_board', player ), player_board_div );
	}		}

Cowseye: /* Adding stuff to player's panel */

2017-01-30T09:37:08Z

Adding stuff to player's panel

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۳۰ ژانویهٔ ۲۰۱۷، ساعت ۱۱:۳۷
خط ۷۴۲:		خط ۷۴۲:

	// Setting up players boards if needed		// Setting up players boards if needed
	var player_board_div = $('~~player_board_~~'+player_id);		var player_board_div = $('overall_player_board_'+player_id);
	dojo.place( this.format_block('jstpl_player_board', player ), player_board_div );		dojo.place( this.format_block('jstpl_player_board', player ), player_board_div );
	}		}

Victoria la: /* Moving elements */

2017-01-03T15:44:41Z

Moving elements

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۳ ژانویهٔ ۲۰۱۷، ساعت ۱۷:۴۴
خط ۳۲۰:		خط ۳۲۰:
	* The z_order (vertical order of display) depends on the position in the DOM, so you may need to change the parent of some game elements when they are moving in your game area.		* The z_order (vertical order of display) depends on the position in the DOM, so you may need to change the parent of some game elements when they are moving in your game area.

	CAREFUL: ~~when you attach an HTML element with~~ a new parent, ~~you~~ break all references to this HTML element (ex: dojo.connect).		CAREFUL: this function destroys original object and places a clone onto a new parent, this will break all references to this HTML element (ex: dojo.connect).

	== Players input ==		== Players input ==

Victoria la: /* Notifications */

2016-10-08T02:41:46Z

Notifications

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۸ اکتبر ۲۰۱۶، ساعت ۰۴:۴۱
خط ۴۸۸:		خط ۴۸۸:
	</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 ===
خط ۵۰۵:		خط ۵۰۲:
	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

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۸ اکتبر ۲۰۱۶، ساعت ۰۴:۲۳
خط ۴۸۷:		خط ۴۸۷:
	}		}
	</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

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۸ اکتبر ۲۰۱۶، ساعت ۰۴:۱۵
خط ۶۸۳:		خط ۶۸۳:
	"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

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۳۱ اوت ۲۰۱۶، ساعت ۰۳:۵۹
خط ۲۱۸:		خط ۲۱۸:
	'''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

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۶ ژوئیهٔ ۲۰۱۶، ساعت ۰۴:۰۹
خط ۵۹۷:		خط ۵۹۷:
	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,
خط ۶۰۸:		خط ۶۰۹:
	...		...
	} );		} );

	// 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:
خط ۶۲۰:		خط ۶۲۱:
	} );		} );

	~~</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

@@ خط ۵۷۵: / خط ۵۷۵: @@
              this.ajaxcall( '/mygame/mygame/makeThis.html', { lock:true }, this, function( result ) {} );
          } ) );
 </pre>