Rename handler functions

Rename the handler functions to be more decoupled from their parents.
Wordform, for instance, doesn’t care about the game starting; it just
needs to notify its parent when the user has entered valid words.

Author: ianobermiller

src/board.jsx

@@ -2,7 +2,7 @@
 
 var Board = React.createClass({
   propTypes: {
-    endGame: React.PropTypes.func.isRequired,
+    onGameFinished: React.PropTypes.func.isRequired,
     max: React.PropTypes.number.isRequired,
     tiles: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
   },
@@ -14,7 +14,7 @@ var Board = React.createClass({
     };
   },
 
-  clickedTile(tile){
+  onTileClicked(tile){
     if (this.wait) {
       return;
     }
@@ -42,7 +42,7 @@ var Board = React.createClass({
     setTimeout(
       () => {
         this.wait = false;
-        this.setState({found: this.state.found,message: 'choosetile'});
+        this.setState({found: this.state.found, message: 'choosetile'});
         delete this.flippedtile;
       },
       2000
@@ -52,7 +52,7 @@ var Board = React.createClass({
   render() {
     return (
       <div>
-        <button onClick={this.props.endGame}>
+        <button onClick={this.props.onGameFinished}>
           End game
         </button>
         <Status
@@ -61,7 +61,7 @@ var Board = React.createClass({
           message={this.state.message}
         />
         {this.props.tiles.map(
-          (b, n) => <Tile word={b} key={n} clickedTile={this.clickedTile} />
+          (b, n) => <Tile word={b} key={n} onClick={this.onTileClicked} />
         )}
       </div>
     );

src/game.jsx

@@ -12,19 +12,19 @@ var Game = React.createClass({
     });
   },
 
-  endGame() {
+  reset() {
     this.setState({playing: false});
   },
 
   render() {
     return this.state.playing ? (
       <Board
-        endGame={this.endGame}
+        onGameFinished={this.reset}
         tiles={this.state.tiles}
         max={this.state.tiles.length / 2}
       />
     ) : (
-      <Wordform startGame={this.startGame} />
+      <Wordform onWordsEntered={this.startGame} />
     );
   }
 });

src/tile.jsx

@@ -3,7 +3,7 @@
 var Tile = React.createClass({
   propTypes: {
     word: React.PropTypes.string.isRequired,
-    clickedTile: React.PropTypes.func.isRequired,
+    onClick: React.PropTypes.func.isRequired,
   },
 
   getInitialState() {
@@ -12,7 +12,7 @@ var Tile = React.createClass({
 
   catchClick() {
     if (!this.state.flipped) {
-      this.props.clickedTile(this);
+      this.props.onClick(this);
     }
   },
 

src/wordform.jsx

@@ -2,7 +2,7 @@
 
 var Wordform = React.createClass({
   propTypes: {
-    startGame: React.PropTypes.func.isRequired,
+    onWordsEntered: React.PropTypes.func.isRequired,
   },
 
   getInitialState() {
@@ -27,7 +27,7 @@ var Wordform = React.createClass({
     } else if (words.filter(w => w.length > 8).length) {
       this.setError('Words should not be longer than 8 characters!');
     } else {
-      this.props.startGame(words);
+      this.props.onWordsEntered(words);
       node.value = "";
     }
     return false;