Evolved value generator. Started game state machine.

js/Cell.js

@@ -2,11 +2,9 @@ var React = require('react');
 
 var Cell = React.createClass({
     render: function() {
-        var classname = 'cell';
+        var classname = ['cell', 'x' + this.props.x, 'y' + this.props.y];
-        classname += ' x' + this.props.x;
-        classname += ' y' + this.props.y;
 
-        return (<div className={classname}>{this.props.value}</div>);
+        return (<div className={classname.join(' ')}>{this.props.value}</div>);
     }
 });
 

js/Character.js

@@ -26,7 +26,7 @@ var character = React.createClass({
 
         return (
             <div>
-                <div className={classname.join(' ')}>our<br />hero</div>
+                <div className={classname.join(' ')}></div>
             </div>
         );
     }

js/Game.js

@@ -0,0 +1,32 @@
+var Values = require('./Values');
+
+/**
+ *
+ */
+module.exports = {
+    level: 0,
+
+    checkWin: function(values) {
+        var len = values.length;
+        var remaining = 0;
+
+        for (var i = 0; i < len; i++) {
+            if (Values.validate(values[i], module.exports.level) === true) {
+                remaining++;
+            }
+        }
+
+        return (remaining === 0);
+    },
+
+    checkLoss: function() {
+
+    },
+
+    // State machine mediator.
+    state: {
+        nextLevel: function() {
+            module.exports.level++;
+        }
+    }
+};

js/Grid.js

@@ -3,11 +3,16 @@ var Cell = require('./Cell');
 var Character = require('./Character');
 var UserInput = require('./Input');
 var Values = require('./Values');
+var Game = require('./Game');
 
 module.exports = React.createClass({
+    generateValues() {
+        return Values.generate(this.props.width * this.props.height, Game.level);
+    },
+
     getInitialState() {
         return {
-            values: Values.generate(this.props.width, this.props.height)
+            values: this.generateValues()
         };
     },
 
@@ -16,20 +21,32 @@ module.exports = React.createClass({
     },
 
     munch(x, y) {
-        if (this.state.values[x + '-' + y][1] === true) {
+        var i = y * this.props.width + x;
-            console.log('yum');
+
+        if (this.state.values[i] === "") {
+            return;
         }
-        else {
+
-            console.log('blech');
+        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();
     },
 
     render() {
         var cells = [];
+        var i;
 
         for (var x = 0; x < this.props.width; x++) {
             for (var y = 0; y < this.props.height; y++) {
-                cells.push(<Cell value={this.state.values[x + '-' + y][0]} x={x} y={y} key={x + '-' + y} />);
+                i = y * this.props.width + x;
+                cells.push(<Cell value={this.state.values[i]} x={x} y={y} key={i} />);
             }
         }
 

js/Input.js

@@ -22,12 +22,12 @@ module.exports = {
                 }
                 break;
             case 39: // Right arrow
-                x < 2 ?
+                if (x < this.props.width - 1) {
-                    this.refs.ourhero1.setState({ x: x + 1 }) :
+                    this.refs.ourhero1.setState({ x: x + 1 });
-                    this.refs.ourhero1.setState({ x: 0 })
+                }
                 break;
             case 40: // Down arrow
-                if (y < 2) {
+                if (y < this.props.height - 1) {
                     this.refs.ourhero1.setState({ y: y + 1 });
                 }
         }

js/Values.js

@@ -1,15 +1,16 @@
 module.exports = {
-    generate: function(w, h) {
+    // Anagrams, multiples, equality
-        var values = {};
+    generate: function(n) {
-        var rand;
+        var values = [];
 
-        for (var i = 0; i < w; i++) {
+        for (var i = 0; i < n; i++) {
-            for (var j = 0; j < h; j++) {
+            values.push(Math.ceil(Math.random() * 1000));
-                rand = Math.ceil(Math.random() * 10);
-                values[i + '-' + j] = [rand, (rand % 2 === 0)];
-            }
         }
 
         return values;
+    },
+
+    validate: function(value, level) {
+        return ((value || -1) % (level + 2) === 0);
     }
 };

package.json

@@ -13,11 +13,15 @@
     "babel-preset-react": "^6.5.0"
   },
   "devDependencies": {
+    "css-loader": "^0.23.1",
     "express": "^4.13.4",
     "jsx-loader": "^0.13.2",
+    "node-sass": "^3.4.2",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-hot-loader": "^1.3.0",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1"
   },

webpack.config.js

@@ -6,7 +6,7 @@ function getEntrySources() {
 
     if (process.env.NODE_ENV !== 'production') {
         sources.push('webpack-dev-server/client?http://localhost:8080');
-        sources.push('webpack/hot/only-dev-server');
+        //sources.push('webpack/hot/only-dev-server');
     }
 
     return sources;
@@ -20,7 +20,7 @@ module.exports = {
             {
                 test: /\.js$/,
                 include: __dirname + '/js',
-                loaders: ['react-hot', 'babel']
+                loaders: ['babel']
             }
         ]
     },