Tutorial reversi - Muutoshistoria

Deluxe flame: /* Make the squares appears */

2014-01-09T23:31:57Z

Make the squares appears

← Vanhempi versio		Versio 10. tammikuuta 2014 kello 01.31
Rivi 50:		Rivi 50:
	== Make the squares appears ==		== Make the squares appears ==

	Now, what we need is to create some invisible HTML elements where squares are. These elements will be used as position references for ~~width~~ and black discs.		Now, what we need is to create some invisible HTML elements where squares are. These elements will be used as position references for white and black discs.
	Obviously, we need 64 squares. To avoid writing 64 'div' elements on our template, we are going to use the "block" feature.		Obviously, we need 64 squares. To avoid writing 64 'div' elements on our template, we are going to use the "block" feature.

Sourisdudesert: /* The discs */

2013-09-30T16:17:49Z

The discs

← Vanhempi versio		Versio 30. syyskuuta 2013 kello 18.17
Rivi 141:		Rivi 141:
	height: 56px;		height: 56px;
	position: absolute;		position: absolute;
	background-image: url('~~../../~~img~~/reversi~~/tokens.png');		background-image: url('img/tokens.png');
	}		}
	.tokencolor_ffffff { background-position: 0px 0px; }		.tokencolor_ffffff { background-position: 0px 0px; }

Sourisdudesert: /* Make the squares appears */

2013-09-30T16:17:31Z

Make the squares appears

← Vanhempi versio		Versio 30. syyskuuta 2013 kello 18.17
Rivi 94:		Rivi 94:
	width: 536px;		width: 536px;
	height: 528px;		height: 528px;
	background-image: url('~~../../~~img~~/reversi~~/board.jpg');		background-image: url('img/board.jpg');
	position: relative;		position: relative;
	}		}

Sourisdudesert: /* Let it look like Reversi */

2013-09-30T16:16:56Z

Let it look like Reversi

← Vanhempi versio		Versio 30. syyskuuta 2013 kello 18.16
Rivi 41:		Rivi 41:
	width: 536px;		width: 536px;
	height: 528px;		height: 528px;
	background-image: url('~~../../~~img~~/reversi~~/board.jpg');		background-image: url('img/board.jpg');
	}		}

Garcia1968 (19. huhtikuuta 2013 kello 12.36)

2013-04-19T12:36:14Z

← Vanhempi versio		Versio 19. huhtikuuta 2013 kello 14.36
Rivi 197:		Rivi 197:
	</pre>		</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 "this.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:

	[[File:reversi3.jpg]]		[[File:reversi3.jpg]]
Rivi 301:		Rivi 301:
	[[File:reversi6.jpg]]		[[File:reversi6.jpg]]

	And here's our "~~stats~~.inc.php", according to this diagram:		And here's our "states.inc.php", according to this diagram:

	<pre>		<pre>

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

2012-12-06T16:33:49Z

Make the move appears automatically: Typos

← Vanhempi versio		Versio 6. joulukuuta 2012 kello 18.33
Rivi 649:		Rivi 649:
	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.
Rivi 677:		Rivi 677:
	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>
Rivi 685:		Rivi 685:
	* 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>
Rivi 693:		Rivi 693:
	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
Rivi 723:		Rivi 723:
	</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

← Vanhempi versio		Versio 6. joulukuuta 2012 kello 17.32
Rivi 605:		Rivi 605:

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

← Vanhempi versio		Versio 6. joulukuuta 2012 kello 17.30
Rivi 446:		Rivi 446:
	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:
Rivi 488:		Rivi 488:

	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.
Rivi 523:		Rivi 523:
	// 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 );

Rivi 604:		Rivi 605:

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

← Vanhempi versio		Versio 6. joulukuuta 2012 kello 14.28
Rivi 99:		Rivi 99:

	.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

← Vanhempi versio		Versio 6. joulukuuta 2012 kello 14.11
Rivi 434:		Rivi 434:
	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: