Pubsub implemented. Munch event implemented.

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: {
+        actions[event].push(callback);
-        newGame: function() {
-
     },
 
-        nextLevel: function() {
+    publish(event) {
-            module.exports.level++;
+        actions[event].forEach(function(callback) {
+            callback();
+        });
     }
-    }*/
 };

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' />
+            <Grid width='6' height='5' ref='grid' />
-            <Muncher />
+            <Muncher ref='muncher' />
         </div>);
     }
 });

js/board/Cell.js

@@ -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;

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 {
+        return { values: this.generateValues() };
-            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() {

js/board/Input.js

@@ -1,31 +1,34 @@
+/**
+ * THIS is the Board class.
+ */
 module.exports = {
-    keydown: function(e) {
+    keydown(e) {
-        var x = this.refs.ourhero1.state.x;
+        var x = this.refs.muncher.state.x;
-        var y = this.refs.ourhero1.state.y;
+        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) {
+                if (x < this.refs.grid.props.width - 1) {
-                    this.refs.ourhero1.setState({ x: x + 1 });
+                    this.refs.muncher.setState({ x: x + 1 });
                 }
                 break;
             case 40: // Down arrow
-                if (y < this.props.height - 1) {
+                if (y < this.refs.grid.props.height - 1) {
-                    this.refs.ourhero1.setState({ y: y + 1 });
+                    this.refs.muncher.setState({ y: y + 1 });
                 }
         }
     }

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>);
     }
 });

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>
         );
     }
 });

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 current-score'>{this.state.currentScore}</div>
-            <div className='item high-score'>9999999</div>
+            <div className='item high-score'>{this.state.highScore}</div>
             <div className='item lives'>
                 <div className='life'></div>
                 <div className='life'></div>

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>);
+    }
+});

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() {
 
     }
 };

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;
+        }
+    }
 }

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;
-    }
-}

sass/board/message.scss

@@ -9,4 +9,8 @@
     text-align:center;
     width:90%;
     z-index:1000;
+
+    &.hidden {
+        display:none;
+    }
 }

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;

sass/board/titlebar.scss

@@ -0,0 +1,6 @@
+.titlebar {
+    font-size:13px;
+    height:40px;
+    line-height:40px;
+    text-align:center;
+}