Skip to content

Instantly share code, notes, and snippets.

@miguelsolano miguelsolano/reacttictac
Last active Aug 29, 2015

Embed
What would you like to do?
ReactTicTacToe - 40 digits code review
/**
* @jsx React.DOM
*/
//the top part is absolutely necessary dont erase, its for the jsx compiler
//wrapped the game functionality in an iife
(function() {
//the game board
var Board = React.createClass({
getInitialState: function() {
return {
//Initial state of the game board.
tiles: [
'', '', '',
'', '', '',
'', '', ''
],
turn: 'o'
};
},
tileClick: function(position, player) {
var tiles = this.state.tiles;
//If the selected position is already filled, return to prevent it being replaced.
if ( (tiles[position] === 'x' || tiles[position] === 'o') ) return;
tiles[position] = player;
this.setState({tiles: tiles, turn: player === 'o' ? 'x' : 'o'});
},
render: function() {
return <div>
<div id='board'>
{ this.state.tiles.map(function(tile,position){
return (
<Tile status={tile} id={position} turn={this.state.turn} tileClick={this.tileClick} />
);
}, this) }
</div>
<Menu turn={this.state.turn} />
</div>;
}
});
//next we make the tiles
var Tile = React.createClass({
//The method to handle when a user clicks on the tile, calls the tileClick method on the parent component that is referenced in the props object.
clickHandler: function() {
this.props.tileClick(this.props.id, this.props.turn);
},
render: function() {
return <div className={this.props.status === '' ? 'tile' : 'tile status-' + this.props.status} onClick={this .clickHandler}>{this.props.status}</div>;
}
});
//next the freaking menu
var Menu = React.createClass({
render: function() {
return <div id='menu'>
<h3>Player {this.props.turn}s turn.</h3>
</div>;
}
});
React.render(
<Board />,
document.getElementById("container")
);
})();
/*This is a simple tic tac toe game written in OOP style, which from what I gather is slightly different from conventional OOP due to the React.js framework convention. */
//the view
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac React</title>
<link type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css"href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.js"></script>
<script src='bower_components/react/react.js'></script>
<script src='bower_components/react/JSXtransformer.js'></script>
<script type="text/jsx" src='app.jsx'></script>
</head>
<body>
<nav>
<li>
<h1>miguel solano <a href="https://github.com/m-a-solano93"><span>about</span></a></h1>
</li>
</nav>
<div id="container"></div>
<div class="container">
<div class="row-centered">
<div class="col-md-3">
<h3>X's</h3>
<p>The letter X is used more in math than
it is in english. But I'm willing to bet
its used more in tic-tac-toe.</p>
</div>
<div class="col-md-3">
<h3>O's</h3>
<p>Don't really have an interesting fact
for you about the letter o. Aside from
the fact that it derived its shape from
astronomy.</p>
</div>
<div class="col-md-3">
<h3>React Tac Toe</h3>
<p>React.js. A powerful micro-framework that
boost speed to unbelieveable power. Not to be
used for your first project.</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.