Game interface logic: yourgamename.js - Историја измена

Amadannabriona: /* Other useful stuff */

2018-10-06T21:27:14Z

Other useful stuff

← Старија измена		Верзија на датум 6. октобар 2018. у 23:27
Ред 874:		Ред 874:
	</pre>		</pre>

	In the example above, using dojo.hitch, we ~~are sure~~ that the "this" object will be set when the callback is called.		In the example above, using dojo.hitch, we ensure that the "this" object will be set when the callback is called.

Amadannabriona: /* Tooltips */

2018-10-06T20:15:00Z

Tooltips

← Старија измена		Верзија на датум 6. октобар 2018. у 22:15
Ред 537:		Ред 537:
	Specify 'actionString' to display some information about "what happens when I click on this element?".		Specify 'actionString' to display some information about "what happens when I click on this element?".

	You must specify both helpString and actionString. Most of the time, you use only one and specify a void string ("") for the other one.		You must specify both helpString and actionString. Most of the time, you should use only one and specify a void string ("") for the other one.

	Usually, _() must be used for the text to be marked for translation.		Usually, _() must be used for the text to be marked for translation.

	"Delay" is an optional parameter. Usually, it is primarily used to specify a zero delay for some game element when the tooltip gives really important information for the game - but remember: no essential information must be placed in tooltips as they won't be displayed in some ~~browser~~ (see Guidelines).		"Delay" is an optional parameter. Usually, it is primarily used to specify a zero delay for some game element when the tooltip gives really important information for the game - but remember: no essential information must be placed in tooltips as they won't be displayed in some browsers (see [[BGA_Studio_Guidelines\|Guidelines]]).

	Example:		Example:

Amadannabriona: /* Accessing and manipulating the DOM */

2018-09-16T21:27:05Z

Accessing and manipulating the DOM

← Старија измена		Верзија на датум 16. септембар 2018. у 23:27
Ред 132:		Ред 132:
	</pre>		</pre>

	Conclusion: we encourage you to use '''dojo.addClass''', '''dojo.removeClass''' and '''dojo.hasClass''' to make your life easier :)		Conclusion: We encourage you to use '''dojo.addClass''', '''dojo.removeClass''' and '''dojo.hasClass''' to make your life easier :)

	'''dojo.query'''		'''dojo.query'''
Ред 160:		Ред 160:
	'''dojo.place'''		'''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.		dojo.place is the best function to insert HTML code somewhere in your game interface without breaking something. It is much better to use than the '''innerHTML=''' method if you must insert HTML tags and not only values.

	<pre>		<pre>

Amadannabriona: /* Access and manipulate the DOM */

2018-09-16T21:24:32Z

Access and manipulate the DOM

← Старија измена		Верзија на датум 16. септембар 2018. у 23:24
Ред 58:		Ред 58:
	* You should not declare default argument values in function declarations. The following syntax is invalid for Shrinksafe: '''function myFunc(requiredArg, optionalArg = 'defaultValue') {}'''		* You should not declare default argument values in function declarations. The following syntax is invalid for Shrinksafe: '''function myFunc(requiredArg, optionalArg = 'defaultValue') {}'''

	== ~~Access~~ and ~~manipulate~~ the DOM ==		== Accessing and manipulating the DOM ==

	'''$('some_html_element_id')'''		'''$('some_html_element_id')'''

	The $() function is used to get ~~some~~ HTML element using its "id" attribute.		The $() function is used to get an HTML element using its "id" attribute.

	Example 1: modify the content of a "span" element:		Example 1: modify the content of a "span" element:

	<pre>		<pre>
	In your HTML code:		In your HTML code:
Ред 73:		Ред 74:
	</pre>		</pre>

	Note: $() is the standard method to access some HTML element with BGA Framework. You ~~must~~ not use "getElementById" function.		Note: $() is the standard method to access some HTML element with the BGA Framework. You should not use the '''getElementById''' function.


	'''dojo.style'''		'''dojo.style'''

	With dojo.style you can modify a CSS property of any HTML element of your interface.		With dojo.style you can modify the CSS property of any HTML element in your interface.

	Examples:		Examples:

	<pre>		<pre>
	// Make an element disappear		// Make an element disappear
Ред 89:		Ред 91:

	// Change the background position of an element		// Change the background position of an element
	// (very practical when you are using CSS ~~sprite~~ to transform an element to another)		// (very practical when you are using CSS sprites to transform an element to another)
	dojo.style( 'my_element', 'backgroundPosition', '-20px -50px' );		dojo.style( 'my_element', 'backgroundPosition', '-20px -50px' );
	</pre>		</pre>

	Note: you must always use dojo.style to modify CSS properties of HTML elements.		Note: you must always use dojo.style to modify the CSS properties of HTML elements.

	Note²: if you have to modify several CSS properties of an element, or if you have ~~some~~ complex CSS transformation to do, you should consider using dojo.addClass/dojo.removeClass (see below).		Note²: if you have to modify several CSS properties of an element, or if you have a complex CSS transformation to do, you should consider using dojo.addClass/dojo.removeClass (see below).

	'''dojo CSS classes manipulation'''		'''dojo CSS classes manipulation'''

	In many ~~situation~~, ~~a bunch of~~ many small CSS property ~~update~~ can be replaced by a CSS class change (~~ie:~~ you add a CSS class to your element instead of applying all ~~modification~~ manually).		In many situations, many small CSS property updates can be replaced by a CSS class change (i.e., you add a CSS class to your element instead of applying all modifications manually).

	Advantages are:		Advantages are:
	* All your CSS stuff remains in your CSS file.		* All your CSS stuff remains in your CSS file.
	* You can add/remove a list of CSS modifications with a simple function and ~~whithout~~ error.		* You can add/remove a list of CSS modifications with a simple function and without error.
	* You can test if you applied the ~~stuff~~ to an element with "dojo.hasClass" method.		* You can test whether you applied the CSS to an element with the '''dojo.hasClass''' method.

			Example from ''Reversi'':

	~~Example from "Reversi":~~
	<pre>		<pre>
	// We add "possibleMove" to an element		// We add "possibleMove" to an element
Ред 119:		Ред 122:
	}		}

	// So we've applied 4 CSS property ~~change~~ in one line of code.		// So we've applied 4 CSS property changes in one line of code.

	// ... and when we need to check if a square is a possible move on client side:		// ... and when we need to check if a square is a possible move on the client side:
	if( dojo.hasClass( 'square_'+x+'_'+y, 'possibleMove' ) )		if( dojo.hasClass( 'square_'+x+'_'+y, 'possibleMove' ) )
	{ ... }		{ ... }
Ред 129:		Ред 132:
	</pre>		</pre>

	Conclusion: we encourage you to use dojo.addClass, dojo.removeClass and dojo.hasClass to make your life easier :)		Conclusion: we encourage you to use '''dojo.addClass''', '''dojo.removeClass''' and '''dojo.hasClass''' to make your life easier :)

	'''dojo.query'''		'''dojo.query'''
Ред 140:		Ред 143:
	var elements = dojo.query( '.possibleMove' );		var elements = dojo.query( '.possibleMove' );

	// Count number of tokens (~~ie:~~ elements ~~with~~ class "token") on the board (~~ie:~~ element with id "board"):		// Count number of tokens (i.e., elements of class "token") on the board (i.e., the element with id "board"):
	dojo.query( '#board .token' ).length;		dojo.query( '#board .token' ).length;
	</pre>		</pre>

Amadannabriona: /* Shrinksafe minification */

2018-09-16T21:16:35Z

Shrinksafe minification

← Старија измена		Верзија на датум 16. септембар 2018. у 23:16
Ред 52:		Ред 52:
	To implement a game, you only need to use a few parts of the Dojo framework. All the Dojo methods you need are described on this page.		To implement a game, you only need to use a few parts of the Dojo framework. All the Dojo methods you need are described on this page.

	== Shrinksafe ~~minification~~ ==		== Shrinksafe minimization ==

	For performance reasons, when deploying a game the js code is ~~minified~~ using Shrinksafe (based on ECMASCRIPT version 3). Some advanced syntax may not be compatible with this process. In particular:		For performance reasons, when deploying a game the js code is minimized using Shrinksafe (based on ECMASCRIPT version 3). Some advanced syntax may not be compatible with this process. In particular:
	* ~~you~~ should not use reserved keywords from the javascript language as variables		* You should not use reserved keywords from the javascript language as variables.
	* ~~you~~ should not declare default argument values in function ~~declaration, the~~ following syntax is invalid for ~~Shriksafe~~: function myFunc(requiredArg, optionalArg = 'defaultValue') {}		* You should not declare default argument values in function declarations. The following syntax is invalid for Shrinksafe: '''function myFunc(requiredArg, optionalArg = 'defaultValue') {}'''

	== Access and manipulate the DOM ==		== Access and manipulate the DOM ==

Amadannabriona: /* Dojo framework */

2018-09-16T21:14:38Z

Dojo framework

← Старија измена		Верзија на датум 16. септембар 2018. у 23:14
Ред 46:		Ред 46:
	== Dojo framework ==		== Dojo framework ==

	BGA ~~is using~~ the [http://dojotoolkit.org/ Dojo Javascript framework].		BGA uses the [http://dojotoolkit.org/ Dojo Javascript framework].

	The Dojo framework allows us to do complex things more easily. The BGA framework uses Dojo extensively.		The Dojo framework allows us to do complex things more easily. The BGA framework uses Dojo extensively.

	To implement a game~~, however~~, you only need to use a few parts of the Dojo framework. All the Dojo methods you need are described on this page.		To implement a game, you only need to use a few parts of the Dojo framework. All the Dojo methods you need are described on this page.

	== Shrinksafe minification ==		== Shrinksafe minification ==

Amadannabriona: /* Dojo framework */

2018-09-16T18:13:22Z

Dojo framework

← Старија измена		Верзија на датум 16. септембар 2018. у 20:13
Ред 48:		Ред 48:
	BGA is using the [http://dojotoolkit.org/ Dojo Javascript framework].		BGA is using the [http://dojotoolkit.org/ Dojo Javascript framework].

	The Dojo framework allows us to do complex things ~~easier, and the~~ BGA framework ~~is using~~ Dojo ~~framework a lot~~.		The Dojo framework allows us to do complex things more easily. The BGA framework uses Dojo extensively.

	To ~~realize~~ game ~~although~~, you only need to use a few ~~part~~ of the Dojo framework. All the Dojo methods you need ~~to use~~ are ~~describe~~ on this page.		To implement a game, however, you only need to use a few parts of the Dojo framework. All the Dojo methods you need are described on this page.

	== Shrinksafe minification ==		== Shrinksafe minification ==

Amadannabriona: /* General tips */

2018-09-16T18:12:28Z

General tips

← Старија измена		Верзија на датум 16. септембар 2018. у 20:12
Ред 24:		Ред 24:

	; this.player_id		; this.player_id
	: Id of the player on whose browser the code is running.		: ID of the player on whose browser the code is running.

	; this.isSpectator		; this.isSpectator
	: Flag set to true if the user at the table is a spectator (not a player).		: Flag set to true if the user at the table is a spectator (not a player).
	: Note: ~~this~~ is not a function~~, its a variable~~.		: Note: This is a variable, not a function.
	: Note: if you want to hide ~~some~~ element ~~for~~ spectators, you~~'d better~~ use [[Game_interface_stylesheet:_yourgamename.css#spectatorMode\|CSS 'spectatorMode' class]].		: Note: If you want to hide an element from spectators, you should use [[Game_interface_stylesheet:_yourgamename.css#spectatorMode\|CSS 'spectatorMode' class]].

	; this.gamedatas		; this.gamedatas
	: Contains ~~your~~ initial set of ~~datas~~ to init the game, created at game start or game refresh (F5)		: Contains the initial set of data to init the game, created at game start or by game refresh (F5).
	: 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 this is unnecessary).

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

	; this.getActivePlayerId()		; this.getActivePlayerId()
	: Return the ID of active player, or null if we are not in a "activeplayer" type state.		: Return the ID of the active player, or null if we are not in an "activeplayer" type state.

	; this.getActivePlayers()		; this.getActivePlayers()
	: Return an array with the IDs of players ~~that~~ are currently active (or an empty array if there ~~is not~~).		: Return an array with the IDs of players who are currently active (or an empty array if there are none).

	== Dojo framework ==		== Dojo framework ==

Amadannabriona у 18:09, 16. септембар 2018.

2018-09-16T18:09:33Z

← Старија измена		Верзија на датум 16. септембар 2018. у 20:09
Ред 2:		Ред 2:
	This is the main file for your game interface. Here you will define:		This is the main file for your game interface. Here you will define:

	* ~~which~~ actions on the page will generate calls to the server		* 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.		* What happens when you get a notification for a change from the server and how it will show in the browser.

	== File structure ==		== File structure ==

	The details on how the file is structured is described ~~directly~~ with comments on the code skeleton provided to you.		The details of how the file is structured are described below with comments on the code skeleton provided to you.

	~~Basically, here's this~~ structure:		Here is the basic 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.		* '''constructor''': here you can define global variables for your whole interface.
	* onEnteringState: ~~the~~ method is called when entering in a new game state. ~~This way you~~ can customize the view for ~~this~~ game state.		* '''setup''': this method is called when the page is refreshed, and sets up the game interface.
	* onLeavingState: ~~the~~ method is called when leaving a game state.		* '''onEnteringState''': this method is called when entering a new game state. You can use it to customize the view for each game state.
	* onUpdateActionButtons: called when entering in a new state, in order ~~you can~~ add action buttons in status bar.		* '''onLeavingState''': this method is called when leaving a game state.
	* (utility methods): at this ~~place~~ you can define your utility methods		* '''onUpdateActionButtons''': called when entering a new state, in order to add action buttons to the status bar.
	* (player's actions): at this ~~place~~ you can write your handlers for player~~'s action~~ on the interface (ex: click on an item).		* ''(utility methods)'': this is where you can define your utility methods.
	* 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.		* ''(player's actions)'': this is where you can write your handlers for player actions on the interface (example: click on an item).
	* (notification handlers): at this ~~place~~ you ~~can~~ define ~~your~~ notifications handlers.		* '''setupNotifications''': this method associates notifications with notification handlers. For each game notification, you can trigger a javascript method to handle it and update the game interface.
			* ''(notification handlers)'': this is where you define the notifications handlers associated with notifications in '''setupNotifications''', above.

	== General tips ==		== General tips ==

Een: /* Dojo framework */

2018-05-26T09:12:48Z

Dojo framework

← Старија измена		Верзија на датум 26. мај 2018. у 11:12
Ред 50:		Ред 50:

	To realize game although, you only need to use a few part of the Dojo framework. All the Dojo methods you need to use are describe on this page.		To realize game although, you only need to use a few part of the Dojo framework. All the Dojo methods you need to use are describe on this page.

			== Shrinksafe minification ==

	For performance reasons, when deploying a game the js code is minified using Shrinksafe (based on ECMASCRIPT version 3). Some advanced syntax may not be compatible with this process. In particular:		For performance reasons, when deploying a game the js code is minified using Shrinksafe (based on ECMASCRIPT version 3). Some advanced syntax may not be compatible with this process. In particular: