Tutorial reversi - Laptörténet

Pikiou: /* Make the move appears automatically */ Typos

2012-12-06T16:33:49Z

Make the move appears automatically: Typos

← Régebbi változat		A lap 2012. december 6., 18:33-kori változata
649. sor:		649. sor:
	Of course, as we don't manage notifications on client side, we need to press F5 after each move to see the changes on the board.		Of course, as we don't manage notifications on client side, we need to press F5 after each move to see the changes on the board.

	== Make the move ~~appears~~ automatically ==		== Make the move appear automatically ==

	Now, what we have to do is process the notifications sent by the server and make the move appear on the interface.		Now, what we have to do is process the notifications sent by the server and make the move appear on the interface.
677. sor:		677. sor:
	dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );		dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );

	this.~~addDiscOnBoard~~( notif.args.x, notif.args.y, notif.args.player_id );		this.addTokenOnBoard( notif.args.x, notif.args.y, notif.args.player_id );
	},		},
	</pre>		</pre>
685. sor:		685. sor:
	* Add a new disc on board, coming from player panel.		* Add a new disc on board, coming from player panel.

	Now, here's the method that ~~handle~~ the turnOverDiscs notification:		Now, here's the method that handles the turnOverDiscs notification:

	<pre>		<pre>
693. sor:		693. sor:
	var targetColor = this.gamedatas.players[ notif.args.player_id ].color;		var targetColor = this.gamedatas.players[ notif.args.player_id ].color;

	// ~~Made~~ these discs ~~blinking~~ and set them to the specified color		// Make these discs blink and set them to the specified color
	for( var i in notif.args.turnedOver )		for( var i in notif.args.turnedOver )
	{		{
	var ~~disc~~ = notif.args.turnedOver[ i ];		var token = notif.args.turnedOver[ i ];

	// Make the ~~disc~~ blink 2 times		// Make the token blink 2 times
	var anim = dojo.fx.chain( [		var anim = dojo.fx.chain( [
	dojo.fadeOut( { node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y } ),		dojo.fadeOut( { node: 'token_'+token.x+'_'+token.y } ),
	dojo.fadeIn( { node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y } ),		dojo.fadeIn( { node: 'token_'+token.x+'_'+token.y } ),
	dojo.fadeOut( {		dojo.fadeOut( {
	node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y,		node: 'token_'+token.x+'_'+token.y,
	onEnd: function( node ) {		onEnd: function( node ) {

	// Remove any color class		// Remove any color class
	dojo.removeClass( node, [ '~~disccolor_000000~~', '~~disccolor_ffffff~~' ] );		dojo.removeClass( node, [ 'tokencolor_000000', 'tokencolor_ffffff' ] );
	// ... and add the good one		// ... and add the good one
	dojo.addClass( node, '~~disccolor_~~'+targetColor );		dojo.addClass( node, 'tokencolor_'+targetColor );

	}		}
	} ),		} ),
	dojo.fadeIn( { node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y } )		dojo.fadeIn( { node: 'token_'+token.x+'_'+token.y } )

	] ); // end of dojo.fx.chain		] ); // end of dojo.fx.chain
723. sor:		723. sor:
	</pre>		</pre>

	The list of the discs be turned over has been made available by our server side code in "notif.args.turnedOver" (see previous paragraph). We loop through all these discs, and create a complex animation using dojo.Animation for each of it. The complete documentation on dojo animations [http://dojotoolkit.org/documentation/tutorials/1.6/animation/ can be found here].		The list of the discs to be turned over has been made available by our server side code in "notif.args.turnedOver" (see previous paragraph). We loop through all these discs, and create a complex animation using dojo.Animation for each of them. The complete documentation on dojo animations [http://dojotoolkit.org/documentation/tutorials/1.6/animation/ can be found here].

	In few words: we create a chain of 4 animations to make the disc fade out, fade in, fade out again, and fade in again. At the end of the second fade out, we change the color of the disc. Finally, we launch the animation with "play()".		In few words: we create a chain of 4 animations to make the disc fade out, fade in, fade out again, and fade in again. At the end of the second fade out, we change the color of the disc. Finally, we launch the animation with "play()".

Pikiou: /* Let's play */ Need to initialize statistics

2012-12-06T15:32:18Z

Let's play: Need to initialize statistics

← Régebbi változat		A lap 2012. december 6., 17:32-kori változata
605. sor:		605. sor:

	... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).		... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).
			To make the statistics work, we have to initialize them in state.inc.php:

			<pre>
			// Statistics existing for each player
			"player" => array(

			"discPlayedOnCorner" => array( "id"=> 10,
			"name" => totranslate("Discs played on a corner"),
			"type" => "int" ),

			"discPlayedOnBorder" => array( "id"=> 11,
			"name" => totranslate("Discs played on a border"),
			"type" => "int" ),

			"discPlayedOnCenter" => array( "id"=> 12,
			"name" => totranslate("Discs played on board center part"),
			"type" => "int" ),

			"turnedOver" => array( "id"=> 13,
			"name" => totranslate("Number of discs turned over"),
			"type" => "int" )
			)
			</pre>

	A last thing to do on the server side is to activate the next player when we enter the "nextPlayer" game state:		A last thing to do on the server side is to activate the next player when we enter the "nextPlayer" game state:

Pikiou: /* Let's play */ Typos

2012-12-06T15:30:58Z

Let's play: Typos

← Régebbi változat		A lap 2012. december 6., 17:30-kori változata
446. sor:		446. sor:
	From now, it's better to restart a game with 2 players, because we are going to implement a complete Reversi turn. The summary of what we are going to do is:		From now, it's better to restart a game with 2 players, because we are going to implement a complete Reversi turn. The summary of what we are going to do is:
	* When we click on a "possibleMove" square, send the move to the server.		* When we click on a "possibleMove" square, send the move to the server.
	* ~~On server~~ side, check the move is correct, apply Reversi rules and jump to next player.		* Server side, check the move is correct, apply Reversi rules and jump to next player.
	* ~~On client~~ side, change the disc position to reflect the move.		* Client side, change the disc position to reflect the move.

	Thus, what we do first is associate each click on a square to one of our method. We are doing this in our Javascript "setup" method:		Thus, what we do first is associate each click on a square to one of our method. We are doing this in our Javascript "setup" method:

	<pre>		<pre>
	dojo.query( '.square' ).connect( 'onclick', this, 'onPlayDisc' );		dojo.query( '.square' ).connect( 'onclick', this, 'onPlayDisc' );
	</pre>		</pre>

	Note the use of the "dojo.query" method to get all HTML elements with "square" class in just one function call. Now, our "onPlayDisc" method is called each time someone ~~click~~ on a square.		Note the use of the "dojo.query" method to get all HTML elements with "square" class in just one function call. Now, our "onPlayDisc" method is called each time someone clicks on a square.

	Here's our "onPlayDisc" method below:		Here's our "onPlayDisc" method below:
488. sor:		488. sor:

	What we do here is:		What we do here is:
	* We stop the propagation of the Javascript "onclick" event. Otherwise, it can lead to random behavior so it always a good idea.		* We stop the propagation of the Javascript "onclick" event. Otherwise, it can lead to random behavior so it's always a good idea.
	* We get the x/y coordinates of the square by using "evt.currentTarget.id".		* We get the x/y coordinates of the square by using "evt.currentTarget.id".
	* We check that clicked square has the "possibleMove" class, otherwise we know for sure that we can't play there.		* We check that clicked square has the "possibleMove" class, otherwise we know for sure that we can't play there.
523. sor:		523. sor:
	// Now, check if this is a possible move		// Now, check if this is a possible move
	$board = self::getBoard();		$board = self::getBoard();
			$player_id = self::getActivePlayerId();
	$turnedOverDiscs = self::getTurnedOverDiscs( $x, $y, $player_id, $board );		$turnedOverDiscs = self::getTurnedOverDiscs( $x, $y, $player_id, $board );

604. sor:		605. sor:

	... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).		... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).
			A last thing to do on the server side is to activate the next player when we enter the "nextPlayer" game state:
	A last thing to do on the server side is to ~~active~~ the next player when we enter in the "nextPlayer" game state:

	<pre>		<pre>
	function stNextPlayer()		function stNextPlayer()
	{		{
	// ~~Active~~ next player		// Activate next player
	$player_id = self::activeNextPlayer();		$player_id = self::activeNextPlayer();

Pikiou: /* Make the squares appears */ Squares didn't fill their space

2012-12-06T12:28:33Z

Make the squares appears: Squares didn't fill their space

← Régebbi változat		A lap 2012. december 6., 14:28-kori változata
99. sor:		99. sor:

	.square {		.square {
	width: ~~56px~~;		width: 62px;
	height: ~~56px~~;		height: 62px;
	position: absolute;		position: absolute;
	background-color: red;		background-color: red;

Pikiou: /* Display allowed moves */ Typos

2012-12-06T12:11:08Z

Display allowed moves: Typos

← Régebbi változat		A lap 2012. december 6., 14:11-kori változata
434. sor:		434. sor:
	At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.		At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.

	Then we loop through all possible moves ~~that~~ our PHP "updatePossibleMoves" ~~create~~ for us, and add the "possibleMove" class to corresponding square.		Then we loop through all possible moves our PHP "updatePossibleMoves" function created for us, and add the "possibleMove" class to each corresponding square.

	Finally, we use BGA framework "addTooltipToClass" method to associate a tooltip to all ~~these~~ highlighted squares ~~in order~~ players can understand ~~the~~ meaning ~~of this~~.		Finally, we use the BGA framework "addTooltipToClass" method to associate a tooltip to all those highlighted squares so that players can understand their meaning.

	And here we are:		And here we are:

Pikiou: /* Display allowed moves */ Missing the possibleMove class CSS declaration

2012-12-06T12:08:18Z

Display allowed moves: Missing the possibleMove class CSS declaration

← Régebbi változat		A lap 2012. december 6., 14:08-kori változata
422. sor:		422. sor:
	</pre>		</pre>

	The idea here is that we've created a CSS class ("possibleMove") that can be applied to a "square" element to highlight it.		The idea here is that we've created a CSS class ("possibleMove") that can be applied to a "square" element to highlight it:
			<pre>
			.possibleMove {
			background-color: white;
			opacity: 0.2;
			filter:alpha(opacity=20); /* For IE8 and earlier */
			cursor: pointer;
			}
			</pre>

	At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.		At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.

Pikiou: /* The game state machine */ Typos

2012-12-06T02:07:54Z

The game state machine: Typos

← Régebbi változat		A lap 2012. december 6., 04:07-kori változata
297. sor:		297. sor:
	Now, let's stop our game again, because we are going to start the core game logic.		Now, let's stop our game again, because we are going to start the core game logic.

	You already read the "Focus on BGA game state machine", so you know that this is the heart of your game logic. For reversi ~~game~~, it's very simple although. Here's a diagram of our game state machine ~~for Reversi~~:		You already read the "Focus on BGA game state machine", so you know that this is the heart of your game logic. For reversi, it's very simple although. Here's a diagram of our game state machine:

	[[File:reversi6.jpg]]		[[File:reversi6.jpg]]
343. sor:		343. sor:
	</pre>		</pre>

	Now, let's create in ~~our~~ reversi.game.php ~~file~~ the methods that are declared in this game states description file:		Now, let's create in reversi.game.php the methods that are declared in this game states description file:
	* argPlayerTurn		* argPlayerTurn
	* stNextPlayer		* stNextPlayer

Pikiou: /* The discs */ Set player colors to white and black

2012-12-06T01:20:35Z

The discs: Set player colors to white and black

← Régebbi változat		A lap 2012. december 6., 03:20-kori változata
191. sor:		191. sor:

	Note: note that during all the process, the parent of the new disc HTML element will remain "tokens". placeOnObject and slideToObject methods are only moving the position of elements on screen, and they are not modifying the HTML tree.		Note: note that during all the process, the parent of the new disc HTML element will remain "tokens". placeOnObject and slideToObject methods are only moving the position of elements on screen, and they are not modifying the HTML tree.

			Before we can show a token, we need to set the player colors in the setupNewGame function in reversi.game.php:
			<pre>
			$default_colors = array( "ffffff", "000000" );
			</pre>

	Now, to test if everything works fine, just call "addTokenOnBoard( 2, 2, <your_player_id> )" in your "setup" Javascript method, and reload the page. A token should appear and slide immediately to its position, like this:		Now, to test if everything works fine, just call "addTokenOnBoard( 2, 2, <your_player_id> )" in your "setup" Javascript method, and reload the page. A token should appear and slide immediately to its position, like this:

Pikiou: /* Setup the initial game position */ $blackplayer_id and $whiteplayer_id weren't defined

2012-12-06T01:12:25Z

Setup the initial game position: $blackplayer_id and $whiteplayer_id weren't defined

← Régebbi változat		A lap 2012. december 6., 03:12-kori változata
229. sor:		229. sor:
	$sql = "INSERT INTO board (board_x,board_y,board_player) VALUES ";		$sql = "INSERT INTO board (board_x,board_y,board_player) VALUES ";
	$sql_values = array();		$sql_values = array();
			list( $blackplayer_id, $whiteplayer_id ) = array_keys( $players );
	for( $x=1; $x<=8; $x++ )		for( $x=1; $x<=8; $x++ )
	{		{

Pikiou: /* Setup the initial game position */ Typos

2012-12-06T00:36:07Z

Setup the initial game position: Typos

← Régebbi változat		A lap 2012. december 6., 02:36-kori változata
250. sor:		250. sor:
	</pre>		</pre>

	As you can see, we create one ~~database~~ entry for each square, with a "NULL" value which ~~mean~~ "empty square". Of course, for 4 specific squares, we place an initial token.		As you can see, we create one table entry for each square, with a "NULL" value which means "empty square". Of course, for 4 specific squares, we place an initial token.

	At the end, we ~~active~~ the first player ~~to make it~~ active at the beginning of the game.		At the end, we call activeNextPlayer to make the first player active at the beginning of the game.

	Now, we need to make these tokens ~~appears~~ on the client side. To achieve this, the first step is to return the token positions with our "getAllDatas" PHP method (called during each page reload):		Now, we need to make these tokens appear on the client side. To achieve this, the first step is to return the token positions with our "getAllDatas" PHP method (called during each page reload):

	<pre>		<pre>
263. sor:		263. sor:
	</pre>		</pre>

	As you can see, we are using the BGA framework "getObjectListFromDB" method that ~~format~~ the result of this SQL query in a PHP array with x, y and player ~~attribute~~.		As you can see, we are using the BGA framework "getObjectListFromDB" method that formats the result of this SQL query in a PHP array with x, y and player attributes.

	The last thing we need to do is to process this array on client side, and place a disc token on the board for each array item. Of course, we are doing this is our Javascript "setup" method:		The last thing we need to do is to process this array client side, and place a disc token on the board for each array item. Of course, we are doing this is our Javascript "setup" method:

	<pre>		<pre>