Introducing leaderboard

closes #7

src/App.js

@@ -22,11 +22,11 @@ class App extends Component {
       winnerSlots: []
     };
     this.props.game.onGameEnd = this.onGameEnd_.bind(this);
-    this.storage_ = new Storage('gameLeaderBoard');
+    this.storage_ = new Storage();
   }
 
   /**
-   * Uses url parameters to create players
+   * Uses url parameters to create players.
    * @private
    **/
   setPlayersFromURL_() {
@@ -55,9 +55,10 @@ class App extends Component {
   onGameEnd_(winner) {
     if (winner) {
       let gameLeaderBoard = this.storage_.getData();
-      this.storage_.update([winner.name, ...gameLeaderBoard]);
+      this.storage_.update([winner.player.name, ...gameLeaderBoard]);
       this.setState({
-        winnerSlots: winner.slots
+        winnerSlots: winner.slots,
+        winner: winner
       });
     }
   }
@@ -83,6 +84,17 @@ class App extends Component {
    * @inheritdoc
    **/
   render() {
+    const leaderboardMessage = () => {
+      if (this.state.winner) {
+        return (
+          <p className="winner-message">
+            Congratulations {this.state.winner.player.name}. <Link to="/leaderboard">
+              See leaderboard
+            </Link>
+          </p>
+        );
+      }
+    }
     return (
       <div className="tic-tac-toe-app">
         <Board
@@ -94,6 +106,10 @@ class App extends Component {
         <Link className="button new-game-button" to="/">
           New game
         </Link>
+
+        <div className="app-footer">
+        {leaderboardMessage.bind(this)()}
+        </div>
       </div>
     );
   }

src/App.scss

@@ -111,3 +111,8 @@ form {
 .icon-circle {
   background-image: url('./circle.svg');
 }
+
+.app-footer {
+  height: 70px;
+  display: block;
+}

src/board/Slot.js

@@ -8,7 +8,7 @@ export const Slot = props => {
   }
 
   if (props.winner) {
-    filledClass = filledClass + ' winner';
+    filledClass += ' winner';
   }
 
   return (

src/leaderBoard/LeaderBoard.js

@@ -13,7 +13,7 @@ class LeaderBoard extends Component {
    * @inheritdoc
    */
   componentWillMount() {
-    let storage = new Storage('gameLeaderBoard').getData();
+    let storage = new Storage().getData();
     this.setState({
       leaderBoard: storage
     });
@@ -23,11 +23,20 @@ class LeaderBoard extends Component {
    * Renders winner congratulation message.
    * @private 
    */
-  renderWinnerMessage_() {    
+  renderWinnerMessage_() {
     let  { winner } = this.props.match.params;
 
     if (!winner) {
-      return<Link to="/">New game</Link>
+      return (
+        <div>
+          <p>
+            We do not have leaders to how.
+            Why don't you <Link to="/">play</Link> to see if you can put 
+            your name here?
+          </p>
+          <Link to="/">New game</Link>
+        </div>
+      )
     }
 
     return (
@@ -37,9 +46,11 @@ class LeaderBoard extends Component {
           Now you are in our leaderboard.
         </p>
 
-        <p>Are you ready to <a href="" onClick={this.props.history.goBack}>
-            play again</a> aganst you partner or start a <Link to="/">
-            new game</Link>?</p>
+        <p>
+          Are you ready to <a href="" onClick={this.props.history.goBack}>
+          play again</a> aganst you partner or start a 
+          <Link to="/">new game</Link>?
+        </p>
       </div>
     );
   }

src/routes/Routes.js

@@ -11,7 +11,8 @@ import {
 let game = new TicTacToe();
 
 export default props => {
-  return <Router basename={process.env.PUBLIC_URL}>
+  return (
+    <Router basename={process.env.PUBLIC_URL}>
       <div>
         <Route exact path="/" render={route => {
             return <Setup {...route} game={game} />;
@@ -25,10 +26,7 @@ export default props => {
             return <LeaderBoard {...route} game={game} />;
           }}
         />
-        <Route path="/leaderboard" render={route => {
-            return <LeaderBoard {...route} game={game} />;
-          }}
-        />
       </div>
-    </Router>;
+    </Router>
+  );
 }

src/storage/Storage.js

@@ -1,5 +1,5 @@
 class Storage {
-  constructor(storageName, initialValue = "[]") {
+  constructor(storageName = 'gameLeaderBoard', initialValue = '[]') {
     this.storageName = storageName;
     if (!localStorage.getItem(storageName)) {
       localStorage.setItem(storageName, initialValue);