Lives and level updating started.

js/State.js

@@ -20,8 +20,10 @@ module.exports = {
             return;
         }
 
+        var args = Array.prototype.slice.call(arguments, 1);
+
         actions[event].forEach(function(callback) {
-            callback();
+            callback.apply(null, args);
         });
     }
 };

js/board/Grid.js

@@ -48,7 +48,7 @@ module.exports = React.createClass({
             State.publish('munch/successful');
         }
         else {
-            State.publish('munch/failed');
+            State.publish('munch/failed', this.state.values[i]);
         }
     },
 

js/board/Message.js

@@ -2,6 +2,7 @@ require('../../sass/board/message.scss');
 
 var React = require('react');
 var State = require('../State');
+var Values = require('./Values');
 
 var exclamations = [
     'Congratulations!',
@@ -26,19 +27,35 @@ module.exports = React.createClass({
     componentDidMount() {
         State.subscribe('level/complete', this.levelComplete);
         State.subscribe('level/next', this.levelNext);
+        State.subscribe('munch/failed', this.munchFailed);
     },
 
-    handleKeydown(e) {
-        if (e.keyCode === 32) {
-            window.removeEventListener('keydown', this.handleKeydown);
-            State.publish('level/next');
-        }
+    munchFailed(value) {
+        var self = this;
+        
+        function keydown(e) {
+            if (e.keyCode === 32) {
+                window.removeEventListener('keydown', keydown);
+                self.setState({ hidden: true });
+            }
+        };
+
+        var msg = Values.getError(value, State.level);
+        this.setState({ hidden: false, message1: msg });
+        window.addEventListener('keydown', keydown);
     },
 
     levelComplete() {
+        function keydown(e) {
+            if (e.keyCode === 32) {
+                window.removeEventListener('keydown', keydown);
+                State.publish('level/next');
+            }
+        };
+
         var msg = exclamations[Math.floor(Math.random() * exclamations.length)];
         this.setState({ hidden: false, message1: msg });
-        window.addEventListener('keydown', this.handleKeydown);
+        window.addEventListener('keydown', keydown);
     },
 
     levelNext() {

js/board/Scorebar.js

@@ -7,12 +7,14 @@ module.exports = React.createClass({
     getInitialState() {
         return {
             currentScore: 0,
-            highScore: 0
+            highScore: 0,
+            lives: 3
         };
     },
 
     componentDidMount() {
         State.subscribe('munch/successful', this.updateScore);
+        State.subscribe('munch/failed', this.updateLives);
     },
 
     updateScore() {
@@ -20,15 +22,21 @@ module.exports = React.createClass({
         this.setState({ currentScore: score + 10 });
     },
 
+    updateLives() {
+        var lives = this.state.lives;
+        this.setState({ lives: lives - 1 });
+    },
+
     render() {
+        var lives = [];
+        for (var i = 0; i < this.state.lives; i++) {
+            lives.push(<div className='life' key={i}></div>);
+        }
+
         return (<div className='scorebar'>
             <div className='item current-score'>{this.state.currentScore}</div>
             <div className='item high-score'>{this.state.highScore}</div>
-            <div className='item lives'>
-                <div className='life'></div>
-                <div className='life'></div>
-                <div className='life'></div>
-            </div>
+            <div className='item lives'>{lives}</div>
         </div>);
     }
 });

js/board/Titlebar.js

@@ -7,7 +7,7 @@ var Values = require('./Values');
 module.exports = React.createClass({
     getInitialState() {
         return {
-            title: Values.describe(State.level)
+            title: Values.getDescription(State.level)
         };
     },
 
@@ -16,7 +16,7 @@ module.exports = React.createClass({
     },
 
     levelNext() {
-        this.setState({ title: Values.describe(State.level) });
+        this.setState({ title: Values.getDescription(State.level) });
     },
 
     render() {

js/board/Values.js

@@ -10,8 +10,12 @@ module.exports = {
         return values;
     },
 
-    describe(level) {
-        return "Multiples of " + (level + 2);
+    getDescription(level) {
+        return `Multiples of ${level + 2}`;
+    },
+
+    getError(value, level) {
+        return `Oops! ${value} is not a multiple of ${level + 2}.`;
     },
 
     validate(value, level) {