Tutorial reversi - 편집 역사

Deluxe flame: /* Make the squares appears */

2014-01-09T23:31:57Z

Make the squares appears

← 이전 판		2014년 1월 10일 (금) 01:31 판
50번째 줄:		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

← 이전 판		2013년 9월 30일 (월) 18:17 판
141번째 줄:		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

← 이전 판		2013년 9월 30일 (월) 18:17 판
94번째 줄:		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

← 이전 판		2013년 9월 30일 (월) 18:16 판
41번째 줄:		41번째 줄:
	width: 536px;		width: 536px;
	height: 528px;		height: 528px;
	background-image: url('~~../../~~img~~/reversi~~/board.jpg');		background-image: url('img/board.jpg');
	}		}

2013년 4월 19일 (금) 12:36에 Garcia1968님의 편집

2013-04-19T12:36:14Z

← 이전 판		2013년 4월 19일 (금) 14:36 판
197번째 줄:		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]]
301번째 줄:		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

← 이전 판		2012년 12월 6일 (목) 18:33 판
649번째 줄:		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.
677번째 줄:		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>
685번째 줄:		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>
693번째 줄:		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
723번째 줄:		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

← 이전 판		2012년 12월 6일 (목) 17:32 판
605번째 줄:		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

← 이전 판		2012년 12월 6일 (목) 17:30 판
446번째 줄:		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:
488번째 줄:		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.
523번째 줄:		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 );

604번째 줄:		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

← 이전 판		2012년 12월 6일 (목) 14:28 판
99번째 줄:		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

← 이전 판		2012년 12월 6일 (목) 14:11 판
434번째 줄:		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: