Tutorial reversi - Versionshistorik

Sourisdudesert: /* Make the move appears automatically */

2012-11-28T16:43:41Z

Make the move appears automatically

← Äldre version		Versionen från 28 november 2012 kl. 18.43
Rad 684:		Rad 684:
	},		},
	</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].

			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()".

Sourisdudesert: /* Make the move appears automatically */

2012-11-28T16:39:13Z

Make the move appears automatically

← Äldre version		Versionen från 28 november 2012 kl. 18.39
Rad 612:		Rad 612:

	== Make the move appears automatically ==		== Make the move appears automatically ==

			Now, what we have to do is process the notifications sent by the server and make the move appear on the interface.

			In our "setupNotifications" method, we register 2 methods for the 2 notifications we created at the previous step ('playDisc' and 'turnOverDiscs'):

			<pre>
			dojo.subscribe( 'playDisc', this, "notif_playDisc" );
			this.notifqueue.setSynchronous( 'playDisc', 500 );
			dojo.subscribe( 'turnOverDiscs', this, "notif_turnOverDiscs" );
			this.notifqueue.setSynchronous( 'turnOverDiscs', 1500 );
			</pre>

			As you can see, we associate our 2 notifications with 2 methods with the "notif_" prefix. At the same time, we define these notifications as "synchronous", with a duration in millisecond (500 for the first one, and 1500 for the second one). It tells the user interface to wait some time after executing the notification, to let the animation end before starting the next notification. In our specific case, the animation will be the following:
			* Make a disc slide from the player panel to its place on the board
			* (wait 500ms)
			* Make all turned over discs blink (and of course turned them over)
			* (wait 1500ms)
			* Let the next player play.

			Let's have a look now on the "playDisc" notification handler method:

			<pre>
			notif_playDisc: function( notif )
			{
			// Remove current possible moves (makes the board more clear)
			dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );

			this.addDiscOnBoard( notif.args.x, notif.args.y, notif.args.player_id );
			},
			</pre>

			No surprise here, we re-used some existing stuff to:
			* Remove the highlighted squares.
			* Add a new disc on board, coming from player panel.

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

			<pre>
			notif_turnOverDiscs: function( notif )
			{
			// Get the color of the player who is returning the discs
			var targetColor = this.gamedatas.players[ notif.args.player_id ].color;

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

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

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

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

			] ); // end of dojo.fx.chain

			// ... and launch the animation
			anim.play();
			}
			},
			</pre>

Sourisdudesert: /* Let's play */

2012-11-25T10:37:05Z

Let's play

← Äldre version		Versionen från 25 november 2012 kl. 12.37
Rad 605:		Rad 605:
	</pre>		</pre>

	Now, when we play a disc, the rules are checked and the disc ~~appear~~ in the database:		Now, when we play a disc, the rules are checked and the disc appears in the database.

	[[File:reversi9.jpg]]		[[File:reversi9.jpg]]

			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 ==

Sourisdudesert: /* Let's play */

2012-11-25T10:34:51Z

Let's play

← Äldre version		Versionen från 25 november 2012 kl. 12.34
Rad 591:		Rad 591:
	... 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).

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

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

			self::giveExtraTime( $player_id );
			$this->gamestate->nextState( 'nextTurn' );

			}
			</pre>

			Now, when we play a disc, the rules are checked and the disc appear in the database:

			[[File:reversi9.jpg]]

Sourisdudesert: /* Let's play */

2012-11-25T10:30:46Z

Let's play

@@ Rad 519: / Rad 519: @@
 <pre>
 </pre>
 </pre>

Sourisdudesert: /* Let's play */

2012-11-25T10:24:14Z

Let's play

← Äldre version		Versionen från 25 november 2012 kl. 12.24
Rad 479:		Rad 479:
	* We check that "playDisc" action is possible, according to current game state (see "possibleactions" entry in our "playerTurn" game state defined above). This check is important to avoid issues if a player double clicks on a square.		* We check that "playDisc" action is possible, according to current game state (see "possibleactions" entry in our "playerTurn" game state defined above). This check is important to avoid issues if a player double clicks on a square.
	* Finally, we make a call to the server using BGA "ajaxcall" method with argument x and y.		* Finally, we make a call to the server using BGA "ajaxcall" method with argument x and y.

			Now, we have to manage this "playDisc" action on server side. At first, we introduce a "playDisc" entry point in our "reversi.action.php":

			<pre>
			public function playDisc()
			{
			self::setAjaxMode();
			$x = self::getArg( "x", AT_posint, true );
			$y = self::getArg( "y", AT_posint, true );
			$result = $this->game->playDisc( $x, $y );
			self::ajaxResponse( );
			}
			</pre>

			As you can see, we get the 2 arguments x and y from the javascript call, and call a corresponding "playDisc" method in our game logic.

			Now, let's have a look of this playDisc method:

			<pre>
			function playDisc( $x, $y )
			{
			// Check that this player is active and that this action is possible at this moment
			self::checkAction( 'playDisc' );
			</pre>

			... at first, we check that this action is possible according to current game state (see "possible action"). We already did it on client side, but it's important to do it on server side too (otherwise it would be possible to cheat).

			<pre>
			// Now, check if this is a possible move
			$board = self::getBoard();
			$turnedOverDiscs = self::getTurnedOverDiscs( $x, $y, $player_id, $board );

			if( count( $turnedOverDiscs ) > 0 )
			{
			// This move is possible!
			</pre>

			...now, we are using the "getTurnedOverDiscs" method again to check that this move is possible.

			<pre>
			</pre>
			</pre>

Sourisdudesert: /* Display allowed moves */

2012-11-24T15:30:07Z

Display allowed moves

← Äldre version		Versionen från 24 november 2012 kl. 17.30
Rad 427:		Rad 427:

	[[File:reversi8.jpg.jpg]]		[[File:reversi8.jpg.jpg]]

			== Let's play ==

			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.
			* On 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.

			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>
			dojo.query( '.square' ).connect( 'onclick', this, 'onPlayDisc' );
			</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.

			Here's our "onPlayDisc" method below:

			<pre>
			onPlayDisc: function( evt )
			{
			// Stop this event propagation
			dojo.stopEvent( evt );

			// Get the cliqued square x and y
			// Note: square id format is "square_X_Y"
			var coords = evt.currentTarget.id.split('_');
			var x = coords[1];
			var y = coords[2];

			if( ! dojo.hasClass( 'square_'+x+'_'+y, 'possibleMove' ) )
			{
			// This is not a possible move => the click does nothing
			return ;
			}

			if( this.checkAction( 'playDisc' ) ) // Check that this action is possible at this moment
			{
			this.ajaxcall( "/reversi/reversi/playDisc.html", {
			x:x,
			y:y
			}, this, function( result ) {} );
			}
			},
			</pre>

			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 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 "playDisc" action is possible, according to current game state (see "possibleactions" entry in our "playerTurn" game state defined above). This check is important to avoid issues if a player double clicks on a square.
			* Finally, we make a call to the server using BGA "ajaxcall" method with argument x and y.

Sourisdudesert: /* Display allowed move */

2012-11-24T15:18:41Z

Display allowed move

@@ Rad 361: / Rad 361: @@
 If you want to look into details, please look at the "utility method" sections of reversi.game.php.
-== Display allowed move ==
+== Display allowed moves ==
 Now, what we want to do is highlight squares where player can place a disc.
@@ Rad 379: / Rad 379: @@
 We are of course using the "getPossibleMoves" method we just developed.
-Now, let's go to the client side to use the data returned by the method above:
+Now, let's go to the client side to use the data returned by the method above. We are using the "onEnteringState" Javascript method that is called each time we enter into a new game state:

Sourisdudesert: /* The game state machine */

2012-11-24T15:10:55Z

The game state machine

← Äldre version		Versionen från 24 november 2012 kl. 17.10
Rad 343:		Rad 343:
	... and start a new Reversi game.		... and start a new Reversi game.

	As you can see on the screen capture ~~above~~, the BGA framework makes the game jump to our first game state "playerTurn" right after the initial setup. That's why the status bar contains the description of playerTurn state ("XXXX must play a disc"):		As you can see on the screen capture below, the BGA framework makes the game jump to our first game state "playerTurn" right after the initial setup. That's why the status bar contains the description of playerTurn state ("XXXX must play a disc"):

	[[File:reversi7.jpg]]		[[File:reversi7.jpg]]

Sourisdudesert: /* The rules */

2012-11-24T15:10:37Z

The rules

← Äldre version		Versionen från 24 november 2012 kl. 17.10
Rad 360:		Rad 360:

	If you want to look into details, please look at the "utility method" sections of reversi.game.php.		If you want to look into details, please look at the "utility method" sections of reversi.game.php.

			== Display allowed move ==

			Now, what we want to do is highlight squares where player can place a disc.

			To do this, we are using the "argPlayerTurn" method. This method is called each time we enter into "playerTurn" game state, and its result is transfered automatically to the client-side:

			<pre>

			function argPlayerTurn()
			{
			return array(
			'possibleMoves' => self::getPossibleMoves( self::getActivePlayerId() )
			);
			}
			</pre>

			We are of course using the "getPossibleMoves" method we just developed.

			Now, let's go to the client side to use the data returned by the method above: