From 34fe746adf222f668b3a8afea31c8dc894c3cd0e Mon Sep 17 00:00:00 2001
From: Ben Burlingham <ben.burlingham@gmail.com>
Date: Mon, 28 Mar 2016 18:58:06 -1000
Subject: [PATCH] 'Level complete' messaging implemented.

---
 js/State.js          |  8 ++++++++
 js/board/Board.js    |  4 ++--
 js/board/Grid.js     | 15 +++++++++------
 js/board/Message.js  | 44 +++++++++++++++++++++++++++++++++++++++++++-
 js/board/Titlebar.js | 18 +++++++++++++++++-
 js/board/Values.js   |  6 +++++-
 6 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/js/State.js b/js/State.js
index acb1cf4..341db39 100644
--- a/js/State.js
+++ b/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++;
+});
diff --git a/js/board/Board.js b/js/board/Board.js
index 9fd122c..6f6d014 100644
--- a/js/board/Board.js
+++ b/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>);
     }
diff --git a/js/board/Grid.js b/js/board/Grid.js
index e0d730b..cdc0843 100644
--- a/js/board/Grid.js
+++ b/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() {
-        if (Values.checkWin(this.state.values, State.level) === true) {
-            State.level++;
-            this.setState({ values: this.generateValues() });
+    checkComplete() {
+        if (Values.checkComplete(this.state.values, State.level) === true) {
+            State.publish('level/complete');
         }
     },
 
+    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 {
diff --git a/js/board/Message.js b/js/board/Message.js
index 484b635..68a7ccd 100644
--- a/js/board/Message.js
+++ b/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>
+        );
     }
 });
diff --git a/js/board/Titlebar.js b/js/board/Titlebar.js
index 1259fbd..1f0756f 100644
--- a/js/board/Titlebar.js
+++ b/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>);
     }
 });
diff --git a/js/board/Values.js b/js/board/Values.js
index 1e87c22..66cea99 100644
--- a/js/board/Values.js
+++ b/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;