From 6fe6aebe872bc70ee42c3e2b9d2f4658945acf83 Mon Sep 17 00:00:00 2001
From: Ben Burlingham <ben.burlingham@gmail.com>
Date: Mon, 28 Mar 2016 18:23:25 -1000
Subject: [PATCH] Pubsub implemented. Munch event implemented.

---
 js/State.js              | 24 ++++++++++++++---------
 js/board/Board.js        | 30 ++++++-----------------------
 js/board/Cell.js         | 11 -----------
 js/board/Grid.js         | 41 ++++++++++++++++++++++++++++++++++++----
 js/board/Input.js        | 23 ++++++++++++----------
 js/board/Message.js      | 14 +++++++++++++-
 js/board/Muncher.js      | 13 +++----------
 js/board/Scorebar.js     | 21 ++++++++++++++++++--
 js/board/Titlebar.js     |  9 +++++++++
 js/board/Values.js       |  8 ++++----
 sass/board/board.scss    | 10 ++++++++++
 sass/board/grid.scss     | 10 ----------
 sass/board/message.scss  |  4 ++++
 sass/board/muncher.scss  |  2 +-
 sass/board/titlebar.scss |  6 ++++++
 15 files changed, 140 insertions(+), 86 deletions(-)
 delete mode 100644 js/board/Cell.js
 create mode 100644 js/board/Titlebar.js
 create mode 100644 sass/board/titlebar.scss

diff --git a/js/State.js b/js/State.js
index 80a07c9..acb1cf4 100644
--- a/js/State.js
+++ b/js/State.js
@@ -1,17 +1,23 @@
+var State = require('./State');
+var actions = Object.create(null);
+
 /**
- * 
+ *
  */
 module.exports = {
     level: 0,
 
+    subscribe(event, callback) {
+        if (actions[event] === undefined) {
+            actions[event] = [];
+        }
 
-    /*state: {
-        newGame: function() {
-
-        },
+        actions[event].push(callback);
+    },
 
-        nextLevel: function() {
-            module.exports.level++;
-        }
-    }*/
+    publish(event) {
+        actions[event].forEach(function(callback) {
+            callback();
+        });
+    }
 };
diff --git a/js/board/Board.js b/js/board/Board.js
index c710603..9fd122c 100644
--- a/js/board/Board.js
+++ b/js/board/Board.js
@@ -2,46 +2,28 @@ require('../../sass/board/board.scss');
 
 var React = require('react');
 var Scorebar = require('./Scorebar');
+var Titlebar = require('./Titlebar');
 var Grid = require('./Grid');
 var Message = require('./Message');
 var Muncher = require('./Muncher');
+var Input = require('./Input');
 
 module.exports = React.createClass({
-/*
     componentDidMount() {
-        window.addEventListener('keydown', UserInput.keydown.bind(this));
+        window.addEventListener('keydown', Input.keydown.bind(this));
     },
 
     componentWillUnmount() {
         // remove event listener
     },
 
-    munch(x, y) {
-        var i = y * this.props.width + x;
-
-        if (this.state.values[i] === "") {
-            return;
-        }
-
-        if (Values.validate(this.state.values[i], Game.level)) {
-            this.state.values[i] = "";
-            this.setState({ values: this.state.values });
-        }
-
-        //if (Game.checkWin(this.state.values) === true) {
-        //    Game.state.nextLevel();
-        //    this.setState({ values: this.generateValues() });
-        //}
-        //Game.checkLoss();
-    },
-            <Character ref='ourhero1' />
-*/
     render() {
         return (<div className='board'>
             <Scorebar />
+            <Titlebar />
             <Message />
-            <Grid width='6' height='5' />
-            <Muncher />
+            <Grid width='6' height='5' ref='grid' />
+            <Muncher ref='muncher' />
         </div>);
     }
 });
diff --git a/js/board/Cell.js b/js/board/Cell.js
deleted file mode 100644
index b19f3f7..0000000
--- a/js/board/Cell.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var React = require('react');
-
-var Cell = React.createClass({
-    render: function() {
-        var classname = ['cell', 'x' + this.props.x, 'y' + this.props.y];
-
-        return (<div className={classname.join(' ')}>{this.props.value}</div>);
-    }
-});
-
-module.exports = Cell;
diff --git a/js/board/Grid.js b/js/board/Grid.js
index 50692de..e0d730b 100644
--- a/js/board/Grid.js
+++ b/js/board/Grid.js
@@ -1,19 +1,52 @@
 require('../../sass/board/grid.scss');
 
 var React = require('react');
-var Cell = require('./Cell');
 var Values = require('./Values');
 var State = require('../State');
 
+var Cell = React.createClass({
+    render() {
+        var classname = ['cell', 'x' + this.props.x, 'y' + this.props.y];
+
+        return (<div className={classname.join(' ')}>{this.props.value}</div>);
+    }
+});
+
 module.exports = React.createClass({
     generateValues() {
         return Values.generate(this.props.width * this.props.height, State.level);
     },
 
     getInitialState() {
-        return {
-            values: this.generateValues()
-        };
+        return { values: this.generateValues() };
+    },
+
+    componentDidMount() {
+        State.subscribe('game/levelup', this.levelUp);
+    },
+
+    levelUp() {
+        if (Values.checkWin(this.state.values, State.level) === true) {
+            State.level++;
+            this.setState({ values: this.generateValues() });
+        }
+    },
+
+    munch(x, y) {
+        var i = y * this.props.width + x;
+
+        if (this.state.values[i] === "") {
+            return;
+        }
+
+        if (Values.validate(this.state.values[i], State.level)) {
+            this.state.values[i] = "";
+            this.setState({ values: this.state.values }, this.levelUp);
+            State.publish('munch/successful');
+        }
+        else {
+            State.publish('munch/failed');
+        }
     },
 
     render() {
diff --git a/js/board/Input.js b/js/board/Input.js
index 5e5cc53..2471526 100644
--- a/js/board/Input.js
+++ b/js/board/Input.js
@@ -1,31 +1,34 @@
+/**
+ * THIS is the Board class.
+ */
 module.exports = {
-    keydown: function(e) {
-        var x = this.refs.ourhero1.state.x;
-        var y = this.refs.ourhero1.state.y;
+    keydown(e) {
+        var x = this.refs.muncher.state.x;
+        var y = this.refs.muncher.state.y;
 
         switch (e.keyCode) {
             case 32:
-                this.munch(x, y);
+                this.refs.grid.munch(x, y);
                 break;
 
             case 37: // Left arrow
                 if (x > 0) {
-                    this.refs.ourhero1.setState({ x: x - 1 });
+                    this.refs.muncher.setState({ x: x - 1 });
                 }
                 break;
             case 38: // Up arrow
                 if (y > 0) {
-                    this.refs.ourhero1.setState({ y: y - 1 });
+                    this.refs.muncher.setState({ y: y - 1 });
                 }
                 break;
             case 39: // Right arrow
-                if (x < this.props.width - 1) {
-                    this.refs.ourhero1.setState({ x: x + 1 });
+                if (x < this.refs.grid.props.width - 1) {
+                    this.refs.muncher.setState({ x: x + 1 });
                 }
                 break;
             case 40: // Down arrow
-                if (y < this.props.height - 1) {
-                    this.refs.ourhero1.setState({ y: y + 1 });
+                if (y < this.refs.grid.props.height - 1) {
+                    this.refs.muncher.setState({ y: y + 1 });
                 }
         }
     }
diff --git a/js/board/Message.js b/js/board/Message.js
index 1bbf9c5..484b635 100644
--- a/js/board/Message.js
+++ b/js/board/Message.js
@@ -3,7 +3,19 @@ require('../../sass/board/message.scss');
 var React = require('react');
 
 module.exports = React.createClass({
+    getInitialState() {
+        return {
+            hidden: true
+        };
+    },
+
     render() {
-        return (<div className='message'>Congratulations!<br />Get ready for level 4</div>);
+        var classname = ['message'];
+
+        if (this.state.hidden === true) {
+            classname.push('hidden');
+        }
+
+        return (<div className={classname.join(' ')}>Congratulations!<br />Get ready for level 4</div>);
     }
 });
diff --git a/js/board/Muncher.js b/js/board/Muncher.js
index 9ec20b2..ce5aa64 100644
--- a/js/board/Muncher.js
+++ b/js/board/Muncher.js
@@ -3,25 +3,18 @@ require('../../sass/board/muncher.scss');
 var React = require('react');
 
 module.exports = React.createClass({
-    getInitialState: function() {
+    getInitialState() {
         return {
-            active: true,
             x: 0,
             y: 0
         };
     },
 
-    render: function() {
+    render() {
         var classname = ['muncher', 'x' + this.state.x, 'y' + this.state.y];
 
-        if (this.state.active === true) {
-            classname.push('active');
-        }
-
         return (
-            <div>
-                <div className={classname.join(' ')}></div>
-            </div>
+            <div className={classname.join(' ')}></div>
         );
     }
 });
diff --git a/js/board/Scorebar.js b/js/board/Scorebar.js
index 78ac2fb..36ba11b 100644
--- a/js/board/Scorebar.js
+++ b/js/board/Scorebar.js
@@ -1,12 +1,29 @@
 require('../../sass/board/scorebar.scss');
 
 var React = require('react');
+var State = require('../State');
 
 module.exports = React.createClass({
+    getInitialState() {
+        return {
+            currentScore: 0,
+            highScore: 0
+        };
+    },
+
+    componentDidMount() {
+        State.subscribe('munch/successful', this.updateScore);
+    },
+
+    updateScore() {
+        var score = this.state.currentScore;
+        this.setState({ currentScore: score + 10 });
+    },
+
     render() {
         return (<div className='scorebar'>
-            <div className='item current-score'>9999999</div>
-            <div className='item high-score'>9999999</div>
+            <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>
diff --git a/js/board/Titlebar.js b/js/board/Titlebar.js
new file mode 100644
index 0000000..1259fbd
--- /dev/null
+++ b/js/board/Titlebar.js
@@ -0,0 +1,9 @@
+require('../../sass/board/titlebar.scss');
+
+var React = require('react');
+
+module.exports = React.createClass({
+    render() {
+        return (<div className='titlebar'>Multiples of 2</div>);
+    }
+});
diff --git a/js/board/Values.js b/js/board/Values.js
index 3012df0..1e87c22 100644
--- a/js/board/Values.js
+++ b/js/board/Values.js
@@ -1,6 +1,6 @@
 module.exports = {
     // Anagrams, multiples, equality
-    generate: function(n) {
+    generate(n) {
         var values = [];
 
         for (var i = 0; i < n; i++) {
@@ -10,11 +10,11 @@ module.exports = {
         return values;
     },
 
-    validate: function(value, level) {
+    validate(value, level) {
         return ((value || -1) % (level + 2) === 0);
     },
 
-    checkWin: function(values, level) {
+    checkWin(values, level) {
         var len = values.length;
         var remaining = 0;
 
@@ -27,7 +27,7 @@ module.exports = {
         return (remaining === 0);
     },
 
-    checkLoss: function() {
+    checkLoss() {
 
     }
 };
diff --git a/sass/board/board.scss b/sass/board/board.scss
index 25b93b9..f63fde5 100644
--- a/sass/board/board.scss
+++ b/sass/board/board.scss
@@ -2,4 +2,14 @@
     margin:0 auto;
     position:relative;
     width:600px;
+
+    @for $i from 0 through 6 {
+        .x#{$i} {
+            left: #{$i * 100}px;
+        }
+
+        .y#{$i} {
+            top: #{$i * 100}px;
+        }
+    }
 }
diff --git a/sass/board/grid.scss b/sass/board/grid.scss
index 9aefcdc..368e09e 100644
--- a/sass/board/grid.scss
+++ b/sass/board/grid.scss
@@ -14,13 +14,3 @@
         width:100px;
     }
 }
-
-@for $i from 0 through 6 {
-    .x#{$i} {
-        left: #{$i * 100}px;
-    }
-
-    .y#{$i} {
-        top: #{$i * 100}px;
-    }
-}
diff --git a/sass/board/message.scss b/sass/board/message.scss
index b32d2ff..0bf22c5 100644
--- a/sass/board/message.scss
+++ b/sass/board/message.scss
@@ -9,4 +9,8 @@
     text-align:center;
     width:90%;
     z-index:1000;
+
+    &.hidden {
+        display:none;
+    }
 }
diff --git a/sass/board/muncher.scss b/sass/board/muncher.scss
index 9652f45..17f8292 100644
--- a/sass/board/muncher.scss
+++ b/sass/board/muncher.scss
@@ -3,7 +3,7 @@
 
     background: $bg;
     height:100px;
-    margin-top:70px;
+    margin-top:110px;
     opacity: 0.5;
     position:absolute;
     width:100px;
diff --git a/sass/board/titlebar.scss b/sass/board/titlebar.scss
new file mode 100644
index 0000000..f9756a2
--- /dev/null
+++ b/sass/board/titlebar.scss
@@ -0,0 +1,6 @@
+.titlebar {
+    font-size:13px;
+    height:40px;
+    line-height:40px;
+    text-align:center;
+}