'Level complete' messaging implemented.

js/State.js

@@ -16,8 +16,16 @@ module.exports = {
     },
 
     publish(event) {
+        if (actions[event] === undefined) {
+            return;
+        }
+
         actions[event].forEach(function(callback) {
             callback();
         });
     }
 };
+
+module.exports.subscribe('level/complete', function() {
+    module.exports.level++;
+});

js/board/Board.js

@@ -14,7 +14,7 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount() {
-        // remove event listener
+        window.removeEventListener('keydown', Input.keydown.bind(this));
     },
 
     render() {
@@ -22,7 +22,7 @@ module.exports = React.createClass({
             <Scorebar />
             <Titlebar />
             <Message />
-            <Grid width='6' height='5' ref='grid' />
+            <Grid width='3' height='3' ref='grid' />
             <Muncher ref='muncher' />
         </div>);
     }

js/board/Grid.js

@@ -22,16 +22,19 @@ module.exports = React.createClass({
     },
 
     componentDidMount() {
-        State.subscribe('game/levelup', this.levelUp);
+        State.subscribe('level/next', this.levelNext);
     },
 
-    levelUp() {
+    checkComplete() {
-        if (Values.checkWin(this.state.values, State.level) === true) {
+        if (Values.checkComplete(this.state.values, State.level) === true) {
-            State.level++;
+            State.publish('level/complete');
-            this.setState({ values: this.generateValues() });
         }
     },
 
+    levelNext() {
+        this.setState({ values: this.generateValues() });
+    },
+
     munch(x, y) {
         var i = y * this.props.width + x;
 
@@ -41,7 +44,7 @@ module.exports = React.createClass({
 
         if (Values.validate(this.state.values[i], State.level)) {
             this.state.values[i] = "";
-            this.setState({ values: this.state.values }, this.levelUp);
+            this.setState({ values: this.state.values }, this.checkComplete);
             State.publish('munch/successful');
         }
         else {

js/board/Message.js

@@ -1,14 +1,50 @@
 require('../../sass/board/message.scss');
 
 var React = require('react');
+var State = require('../State');
+
+var exclamations = [
+    'Congratulations!',
+    'Yippee!',
+    'Woohoo!',
+    'Nice work!',
+    'Great job!',
+    'Boom!',
+    'All finished!',
+    'Shazam!'
+];
 
 module.exports = React.createClass({
     getInitialState() {
         return {
+            message1: 'Congratulations!',
+            message2: 'Press spacebar to continue.',
             hidden: true
         };
     },
 
+    componentDidMount() {
+        State.subscribe('level/complete', this.levelComplete);
+        State.subscribe('level/next', this.levelNext);
+    },
+
+    handleKeydown(e) {
+        if (e.keyCode === 32) {
+            window.removeEventListener('keydown', this.handleKeydown);
+            State.publish('level/next');
+        }
+    },
+
+    levelComplete() {
+        var msg = exclamations[Math.floor(Math.random() * exclamations.length)];
+        this.setState({ hidden: false, message1: msg });
+        window.addEventListener('keydown', this.handleKeydown);
+    },
+
+    levelNext() {
+        this.setState({ hidden: true });
+    },
+
     render() {
         var classname = ['message'];
 
@@ -16,6 +52,12 @@ module.exports = React.createClass({
             classname.push('hidden');
         }
 
-        return (<div className={classname.join(' ')}>Congratulations!<br />Get ready for level 4</div>);
+        return (
+            <div className={classname.join(' ')}>
+                {this.state.message1}
+                <br />
+                {this.state.message2}
+            </div>
+        );
     }
 });

js/board/Titlebar.js

@@ -1,9 +1,25 @@
 require('../../sass/board/titlebar.scss');
 
 var React = require('react');
+var State = require('../State');
+var Values = require('./Values');
 
 module.exports = React.createClass({
+    getInitialState() {
+        return {
+            title: Values.describe(State.level)
+        };
+    },
+
+    componentDidMount() {
+        State.subscribe('level/next', this.levelNext);
+    },
+
+    levelNext() {
+        this.setState({ title: Values.describe(State.level) });
+    },
+
     render() {
-        return (<div className='titlebar'>Multiples of 2</div>);
+        return (<div className='titlebar'>{this.state.title}</div>);
     }
 });

js/board/Values.js

@@ -10,11 +10,15 @@ module.exports = {
         return values;
     },
 
+    describe(level) {
+        return "Multiples of " + (level + 2);
+    },
+
     validate(value, level) {
         return ((value || -1) % (level + 2) === 0);
     },
 
-    checkWin(values, level) {
+    checkComplete(values, level) {
         var len = values.length;
         var remaining = 0;