Board UI fleshed out. File reorg.

js/App.js

@@ -1,10 +0,0 @@
-var React = require('react');
-var Grid = require('./Grid');
-var Welcome = require('./Welcome');
-
-module.exports = React.createClass({
-    render() {
-        //return (<div><Grid width='6' height='5' /></div>);
-        return (<Welcome />);
-    }
-});

js/Game.js

@@ -1,36 +0,0 @@
-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: {
-        newGame: function() {
-            
-        },
-
-        nextLevel: function() {
-            module.exports.level++;
-        }
-    }
-};

js/Grid.js

@@ -1,61 +0,0 @@
-require('../sass/grid.scss');
-require('../sass/cell.scss');
-
-var React = require('react');
-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: this.generateValues()
-        };
-    },
-
-    componentDidMount() {
-        window.addEventListener('keydown', UserInput.keydown.bind(this));
-    },
-
-    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();
-    },
-
-    render() {
-        var cells = [];
-        var i;
-
-        for (var x = 0; x < this.props.width; x++) {
-            for (var y = 0; y < this.props.height; y++) {
-                i = y * this.props.width + x;
-                cells.push(<Cell value={this.state.values[i]} x={x} y={y} key={i} />);
-            }
-        }
-
-        return (<div>
-            {cells}
-            <Character ref='ourhero1' />
-        </div>);
-    }
-});

js/State.js

@@ -0,0 +1,17 @@
+/**
+ * 
+ */
+module.exports = {
+    level: 0,
+
+
+    /*state: {
+        newGame: function() {
+
+        },
+
+        nextLevel: function() {
+            module.exports.level++;
+        }
+    }*/
+};

js/board/Board.js

@@ -0,0 +1,47 @@
+require('../../sass/board/board.scss');
+
+var React = require('react');
+var Scorebar = require('./Scorebar');
+var Grid = require('./Grid');
+var Message = require('./Message');
+var Muncher = require('./Muncher');
+
+module.exports = React.createClass({
+/*
+    componentDidMount() {
+        window.addEventListener('keydown', UserInput.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 />
+            <Message />
+            <Grid width='6' height='5' />
+            <Muncher />
+        </div>);
+    }
+});

js/board/Grid.js

@@ -0,0 +1,32 @@
+require('../../sass/board/grid.scss');
+
+var React = require('react');
+var Cell = require('./Cell');
+var Values = require('./Values');
+var State = require('../State');
+
+module.exports = React.createClass({
+    generateValues() {
+        return Values.generate(this.props.width * this.props.height, State.level);
+    },
+
+    getInitialState() {
+        return {
+            values: this.generateValues()
+        };
+    },
+
+    render() {
+        var cells = [];
+        var i;
+
+        for (var x = 0; x < this.props.width; x++) {
+            for (var y = 0; y < this.props.height; y++) {
+                i = y * this.props.width + x;
+                cells.push(<Cell value={this.state.values[i]} x={x} y={y} key={i} />);
+            }
+        }
+
+        return (<div className='grid'>{cells}</div>);
+    }
+});

js/board/Input.js

@@ -1,5 +1,4 @@
 module.exports = {
-
     keydown: function(e) {
         var x = this.refs.ourhero1.state.x;
         var y = this.refs.ourhero1.state.y;

js/board/Message.js

@@ -0,0 +1,9 @@
+require('../../sass/board/message.scss');
+
+var React = require('react');
+
+module.exports = React.createClass({
+    render() {
+        return (<div className='message'>Congratulations!<br />Get ready for level 4</div>);
+    }
+});

js/board/Muncher.js

@@ -1,9 +1,8 @@
-var React = require('react');
+require('../../sass/board/muncher.scss');
-var Input = require('./Input');
 
-require('../sass/character.scss');
+var React = require('react');
 
-var character = React.createClass({
+module.exports = React.createClass({
     getInitialState: function() {
         return {
             active: true,
@@ -12,15 +11,8 @@ var character = React.createClass({
         };
     },
 
-    move: function(x, y) {
-
-    },
-
-    //componentWillUpdate(object nextProps, object nextState)
-//componentDidUpdate(object prevProps, object prevState)
-
     render: function() {
-        var classname = ['ourhero', 'x' + this.state.x, 'y' + this.state.y];
+        var classname = ['muncher', 'x' + this.state.x, 'y' + this.state.y];
 
         if (this.state.active === true) {
             classname.push('active');
@@ -33,5 +25,3 @@ var character = React.createClass({
         );
     }
 });
-
-module.exports = character;

js/board/Scorebar.js

@@ -0,0 +1,17 @@
+require('../../sass/board/scorebar.scss');
+
+var React = require('react');
+
+module.exports = React.createClass({
+    render() {
+        return (<div className='scorebar'>
+            <div className='item current-score'>9999999</div>
+            <div className='item high-score'>9999999</div>
+            <div className='item lives'>
+                <div className='life'></div>
+                <div className='life'></div>
+                <div className='life'></div>
+            </div>
+        </div>);
+    }
+});

js/board/Values.js

@@ -12,5 +12,22 @@ module.exports = {
 
     validate: function(value, level) {
         return ((value || -1) % (level + 2) === 0);
+    },
+
+    checkWin: function(values, level) {
+        var len = values.length;
+        var remaining = 0;
+
+        for (var i = 0; i < len; i++) {
+            if (module.exports.validate(values[i], level) === true) {
+                remaining++;
+            }
+        }
+
+        return (remaining === 0);
+    },
+
+    checkLoss: function() {
+
     }
 };

js/main.js

@@ -2,6 +2,35 @@ require('../sass/reset.scss');
 
 var React = require('react');
 var ReactDom = require('react-dom');
-var App = require('./App');
+var Board = require('./board/Board');
+var Welcome = require('./welcome/Welcome');
+var State = require('./State');
+
+var App = React.createClass({
+    getInitialState() {
+        return {
+            screen: 'board'
+        };
+    },
+
+    handleKeydown(e) {
+        if (this.state.screen === 'welcome' && e.keyCode === 32) {
+            this.setState({ screen: 'board' });
+        }
+    },
+
+    componentDidMount() {
+        window.addEventListener('keydown', this.handleKeydown);
+    },
+
+    render() {
+        if (this.state.screen === 'welcome') {
+            return (<Welcome />);
+        }
+        else if (this.state.screen === 'board') {
+            return (<Board />);
+        }
+    }
+});
 
 ReactDom.render(<App />, document.getElementById('app'));

js/welcome/HighScores.js

@@ -1,3 +1,5 @@
+require('../../sass/welcome/highscores.scss');
+
 var React = require('react');
 
 var Entry = React.createClass({
@@ -22,7 +24,7 @@ module.exports = React.createClass({
         entries.push(<Entry initials="ABA" score="67747" rank="4" key="3" />);
         entries.push(<Entry initials="ABA" score="9283" rank="5" key="4" />);
         entries.push(<Entry initials="ABA" score="928" rank="6" key="5" />);
-        
+
         return (
             <div className='highscores'>{entries}</div>
         );

js/welcome/Welcome.js

@@ -1,15 +1,15 @@
-require('../sass/welcome.scss');
+require('../../sass/welcome/welcome.scss');
 
 var React = require('react');
 var HighScores = require('./HighScores');
 
+var blinkTimer = null;
+
 var toggleTimeout = function() {
     var hidden = this.state.hidden;
+    this.setState({ hidden: !hidden });
 
-    setTimeout(function() {
+    blinkTimer = setTimeout(toggleTimeout.bind(this), 600);
-        this.setState({ hidden: !hidden });
-        toggleTimeout.call(this);
-    }.bind(this), 1000);
 };
 
 var NewGame = React.createClass({
@@ -23,6 +23,10 @@ var NewGame = React.createClass({
         toggleTimeout.call(this);
     },
 
+    componentWillUnmount() {
+        clearTimeout(blinkTimer);
+    },
+
     render() {
         var classname = ['newgame'];
 

sass/board/board.scss

@@ -0,0 +1,5 @@
+.board {
+    margin:0 auto;
+    position:relative;
+    width:600px;
+}

sass/board/grid.scss

@@ -0,0 +1,26 @@
+.grid {
+    height:500px;
+    overflow:hidden;
+    position:relative;
+    width:600px;
+    z-index:0;
+
+    .cell {
+        border:1px solid purple;
+        height:100px;
+        line-height:100px;
+        position:absolute;
+        text-align:center;
+        width:100px;
+    }
+}
+
+@for $i from 0 through 6 {
+    .x#{$i} {
+        left: #{$i * 100}px;
+    }
+
+    .y#{$i} {
+        top: #{$i * 100}px;
+    }
+}

sass/board/message.scss

@@ -0,0 +1,12 @@
+.message {
+    background:#fff;
+    border:1px solid #000;
+    font-size:14px;
+    line-height:40px;
+    margin:150px 5%;
+    padding:30px;
+    position:absolute;
+    text-align:center;
+    width:90%;
+    z-index:1000;
+}

sass/board/muncher.scss

@@ -1,8 +1,9 @@
-.ourhero {
+.muncher {
     $bg: aqua;
 
     background: $bg;
     height:100px;
+    margin-top:70px;
     opacity: 0.5;
     position:absolute;
     width:100px;

sass/board/scorebar.scss

@@ -0,0 +1,42 @@
+.scorebar {
+    $fontsize: 13px;
+    $h: 70px;
+    $w: 600px;
+
+    font-size:0px;
+    height:$h;
+    line-height:50px;
+    margin:0 auto;
+    width:$w;
+
+    .item {
+        display:inline-block;
+        font-size:$fontsize;
+        height:$h;
+        line-height:$h;
+        vertical-align:top;
+    }
+
+    .current-score {
+        width:30%;
+    }
+
+    .high-score {
+        text-align:center;
+        width:40%;
+    }
+
+    .lives {
+        text-align:right;
+        width:30%;
+    }
+
+    .life {
+        background:lime;
+        display:inline-block;
+        height:36px;
+        margin-left:10px;
+        vertical-align:middle;
+        width:36px;
+    }
+}

sass/cell.scss

@@ -1,29 +0,0 @@
-.x-1 { left: -100px; }
-.x0 { left: 0; }
-.x1 { left: 100px; }
-.x2 { left: 200px; }
-.x3 { left: 300px; }
-.x4 { left: 400px; }
-.x5 { left: 500px; }
-.x6 { left: 600px; }
-
-.y-1 { top: -100px; }
-.y0 { top: 0; }
-.y1 { top:100px; }
-.y2 { top: 200px; }
-.y3 { top: 300px; }
-.y4 { top: 400px; }
-.y5 { top: 500px; }
-.y6 { top: 600px; }
-
-//$cellW: 100px;
-//$cellH: 100px;
-
-.cell {
-    border:1px solid purple;
-    height:100px;
-    line-height:100px;
-    position:absolute;
-    text-align:center;
-    width:100px;
-}

sass/grid.scss

@@ -1,6 +0,0 @@
-#grid {
-    height:500px;
-    overflow:hidden;
-    position:relative;
-    width:600px;
-}

sass/welcome.scss

@@ -1,45 +0,0 @@
-.welcome {
-    padding:20px;
-    text-align:center;
-
-    img {
-        width:350px;
-    }
-
-    .highscores {
-        font-size: 0;
-        margin:0 auto;
-        width:350px;
-
-        .entry {
-            font-size:16px;
-            line-height:40px;
-        }
-
-        .rank {
-            display:inline-block;
-            text-align:left;
-            width:50px;
-        }
-
-        .initials {
-            display:inline-block;
-            width:100px;
-        }
-
-        .score {
-            display:inline-block;
-            text-align:right;
-            width:200px;
-        }
-    }
-
-    .newgame {
-        margin:20px 0;
-        transition:opacity 0.4s ease;
-
-        &.hidden {
-            opacity: 0.7;
-        }
-    }
-}

sass/welcome/highscores.scss

@@ -0,0 +1,25 @@
+.highscores {
+    font-size: 0;
+
+    .entry {
+        font-size:16px;
+        line-height:40px;
+    }
+
+    .rank {
+        display:inline-block;
+        text-align:left;
+        width:50px;
+    }
+
+    .initials {
+        display:inline-block;
+        width:100px;
+    }
+
+    .score {
+        display:inline-block;
+        text-align:right;
+        width:200px;
+    }
+}

sass/welcome/welcome.scss

@@ -0,0 +1,22 @@
+.welcome {
+    padding:20px;
+    text-align:center;
+
+    img {
+        width:350px;
+    }
+
+    .highscores {
+        margin:0 auto;
+        width:350px;
+    }
+
+    .newgame {
+        margin:20px 0;
+        transition:opacity 0.1s ease;
+
+        &.hidden {
+            opacity: 0.5;
+        }
+    }
+}