Movement and munching updated to use redux.

js/app/Constants.js

@@ -1,8 +1,23 @@
 export const MODE = {
     WELCOME: 'WELCOME',
-    BOARD: 'BOARD'
+    BOARD: 'BOARD',
+    NEXT: 'NEXT'
 };
 
-export const ACTIONS = {
+export const BLINK = {
-    NEXT: 'NEXT'
+    TOGGLE: 'TOGGLE'
+};
+
+export const VALUES = {
+    FOO: 'FOO',
+    GENERATE: 'GENERATE',
+    UPDATE: 'UPDATE'
+};
+
+export const MUNCHER = {
+    MOVE: 'MOVE',
+    LEFT: 'LEFT',
+    RIGHT: 'RIGHT',
+    UP: 'UP',
+    DOWN: 'DOWN'
 };

js/app/Creators.js

@@ -1,4 +1,29 @@
-import { ACTIONS } from './Constants';
+import { MODE, BLINK, VALUES, MUNCHER } from './Constants';
 
 export const nextMode =
-    () => ({ type: ACTIONS.NEXT });
+    () => ({ type: MODE.NEXT });
+
+export const toggleBlink =
+    () => ({ type: BLINK.TOGGLE });
+
+export const generateValues =
+    (count, level) => ({
+        type: VALUES.FOO,
+        action: VALUES.GENERATE,
+        count: count,
+        level: level
+    });
+
+export const updateValues =
+    (i, level) => ({
+        type: VALUES.FOO,
+        action: VALUES.UPDATE,
+        index: i,
+        level: level
+    });
+
+export const moveMuncher =
+    (direction) => ({
+        type: MUNCHER.MOVE,
+        direction: direction
+    });

js/app/Reducers.js

@@ -1,7 +1,10 @@
-import { MODE, ACTIONS } from './Constants.js';
+import { MODE, VALUES, BLINK, MUNCHER } from './Constants.js';
+
+import { Values } from '../board/Values';
+import { GRID } from './Settings';
 
 export const modeReducer = (state = MODE.WELCOME, action) => {
-    if (action.type === ACTIONS.NEXT) {
+    if (action.type === MODE.NEXT) {
         switch (state) {
             case MODE.BOARD:
                 return MODE.WELCOME;
@@ -9,7 +12,50 @@ export const modeReducer = (state = MODE.WELCOME, action) => {
                 return MODE.BOARD;
         };
     }
-    else {
+
-        return MODE.WELCOME;
+    return MODE.BOARD;
+};
+
+export const blinkReducer = (state = false, action) => {
+    if (action.type === BLINK.TOGGLE) {
+        return (state ? false : true);
     }
+
+    return state;
 };
+
+export const valuesReducer = (state = [], action) => {
+    if (action.type === VALUES.FOO) {
+        switch (action.action) {
+            case VALUES.GENERATE:
+                return Values.generate(action.count, action.level);
+            case VALUES.UPDATE:
+                const valid = Values.validate(state[action.index], action.level);
+                const results = state.slice(0);
+                if (valid) {
+                    results[action.index] = "";
+                }
+                return results;
+        }
+    }
+
+    return state;
+};
+
+const muncherInitialState = { x: 0, y: 0 };
+export const muncherReducer = (state = muncherInitialState, action) => {
+    if (action.type === MUNCHER.MOVE) {
+        switch (action.direction) {
+            case MUNCHER.LEFT:
+                return (state.x > 0 ? { x: state.x - 1, y: state.y } : state);
+            case MUNCHER.RIGHT:
+                return (state.x < GRID.W - 1 ? { x: state.x + 1, y: state.y } : state);
+            case MUNCHER.UP:
+                return (state.y > 0 ? { x: state.x, y: state.y - 1 } : state);
+            case MUNCHER.DOWN:
+                return (state.y < GRID.H - 1 ? { x: state.x, y: state.y + 1 } : state);
+            };
+        }
+
+        return state;
+    };

js/app/Settings.js

@@ -0,0 +1,4 @@
+export const GRID = {
+    W: 3,
+    H: 3
+}

js/board/Board.js

@@ -6,24 +6,15 @@ import Titlebar from './Titlebar';
 import Grid from './Grid';
 import Message from './Message';
 import Muncher from './Muncher';
-import Input from './Input';
-
-module.exports = React.createClass({
-    componentDidMount() {
-        window.addEventListener('keydown', Input.keydown.bind(this));
-    },
-
-    componentWillUnmount() {
-        window.removeEventListener('keydown', Input.keydown.bind(this));
-    },
 
+export default class Board extends Component {
     render() {
         return (<div className='board'>
             <Scorebar />
             <Titlebar />
             <Message />
-            <Grid width='3' height='3' ref='grid' />
+            <Grid />
-            <Muncher ref='muncher' />
+            <Muncher />
         </div>);
     }
-});
+};

js/board/Grid.js

@@ -1,19 +1,14 @@
 require('../../sass/board/grid.scss');
 
 import { Component } from 'react';
+import { connect } from 'react-redux';
 import GridCell from './GridCell';
-// var Values = require('./Values');
+import * as creators from '../app/Creators';
+import { GRID } from '../app/Settings';
 
 export default class Grid extends Component {
-    generateValues() {
+    componentDidMount(n) {
-        // return Values.generate(this.props.width * this.props.height, State.level);
+        this.props.dispatch(creators.generateValues(GRID.W * GRID.H, 1));
-    };
-
-    // getInitialState() {
-    //     return { values: this.generateValues() };
-    // },
-
-    componentDidMount() {
         // State.subscribe('level/next', this.levelNext);
     };
 
@@ -27,34 +22,26 @@ export default class Grid extends Component {
         // 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.checkComplete);
-        //     State.publish('munch/successful');
-        // }
-        // else {
-        //     State.publish('munch/failed', this.state.values[i]);
-        // }
-    };
-
     render() {
+        const { values, dispatch } = this.props;
         const cells = [];
         let i;
 
-        for (let x = 0; x < this.props.width; x++) {
+        for (let x = 0; x < GRID.W; x++) {
-            for (let y = 0; y < this.props.height; y++) {
+            for (let y = 0; y < GRID.H; y++) {
-                i = y * this.props.width + x;
+                i = y * GRID.W + x;
-                // cells.push(<GridCell value={this.state.values[i]} x={x} y={y} key={i} />);
+                cells.push(<GridCell value={values[i]} x={x} y={y} key={i} />);
             }
         }
 
         return (<div className='grid'>{cells}</div>);
     };
 };
+
+const select = (state) => {
+    return {
+        values: state.values
+    }
+};
+
+export default connect(select)(Grid);

js/board/Message.js

@@ -62,21 +62,18 @@ export default class Message extends Component {
     };
 
     render() {
-        var classname = ['message'];
+        var classname = ['message', 'hidden'];
-
+        const state = { message1: 'foo', message2: 'bar' };
         // if (this.state.hidden === true) {
         //     classname.push('hidden');
         // }
 
-        return (<div>message</div>);
+        return (
-
+            <div className={classname.join(' ')}>
-
+                {state.message1}
-        // return (
+                <br />
-        //     <div className={classname.join(' ')}>
+                {state.message2}
-        //         {this.state.message1}
+            </div>
-        //         <br />
+        );
-        //         {this.state.message2}
-        //     </div>
-        // );
     };
 };

js/board/Muncher.js

@@ -1,21 +1,69 @@
 require('../../sass/board/muncher.scss');
 
 import { Component } from 'react';
+import { connect } from 'react-redux';
+import { MUNCHER } from '../app/Constants';
+import * as creators from '../app/Creators';
 
-export default class Muncher extends Component{
+let listener = null;
-    // getInitialState() {
+
-    //     return {
+export class Muncher extends Component {
-    //         x: 0,
+    keydown(e) {
-    //         y: 0
+        const x = this.props.x;
-    //     };
+        const y = this.props.y;
-    // },
+
+        switch (e.keyCode) {
+            case 32:
+                console.warn('munch (leave this here until sure event listener has been removed');
+                this.props.dispatch(creators.updateValues(0, 0));
+                // var i = y * this.props.width + x;
+                //
+                //     this.setState({ values: this.state.values }, this.checkComplete);
+                //     State.publish('munch/successful');
+                // }
+                // else {
+                //     State.publish('munch/failed', this.state.values[i]);
+                // }
+                break;
+
+            case 37:
+                this.props.dispatch(creators.moveMuncher(MUNCHER.LEFT));
+                break;
+            case 38:
+                this.props.dispatch(creators.moveMuncher(MUNCHER.UP));
+                break;
+            case 39:
+                this.props.dispatch(creators.moveMuncher(MUNCHER.RIGHT));
+                break;
+            case 40:
+                this.props.dispatch(creators.moveMuncher(MUNCHER.DOWN));
+                break;
+        }
+    };
+
+    componentDidMount() {
+        listener = this.keydown.bind(this);
+        window.addEventListener('keydown', listener);
+    };
+
+    componentWillUnmount() {
+        window.removeEventListener('keydown', listener);
+    };
 
     render() {
-        // const classname = ['muncher', 'x' + this.state.x, 'y' + this.state.y];
+        const classname = ['muncher', 'x' + this.props.x, 'y' + this.props.y];
 
         return (
-            <div className='muncher'></div>
+            <div className={classname.join(' ')}></div>
-            // <div className={classname.join(' ')}></div>
         );
     };
 };
+
+const select = (state) => {
+    return {
+        x: state.muncher.x,
+        y: state.muncher.y
+    }
+};
+
+export default connect(select)(Muncher);

js/board/Scorebar.js

@@ -28,15 +28,14 @@ export default class Scorebar extends Component {
 
     render() {
         var lives = [];
-        // for (var i = 0; i < this.state.lives; i++) {
+        for (var i = 0; i < 3; i++) {
-        //     lives.push(<div className='life' key={i}></div>);
+            lives.push(<div className='life' key={i}></div>);
-        // }
+        }
 
-        // return (<div className='scorebar'>
+        return (<div className='scorebar'>
-        //     <div className='item current-score'>{this.state.currentScore}</div>
+            <div className='item current-score'>0</div>
-        //     <div className='item high-score'>{this.state.highScore}</div>
+            <div className='item high-score'>0</div>
-        //     <div className='item lives'>{lives}</div>
+            <div className='item lives'>{lives}</div>
-        // </div>);
+        </div>);
-        return <h1>Scorebar</h1>;
     };
 };

js/board/Values.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const Values = {
     // Anagrams, multiples, equality
     generate(n) {
         var values = [];

js/index.js

@@ -8,7 +8,10 @@ import App from './app/App';
 import * as reducers from './app/Reducers';
 
 const combinedReducers = combineReducers({
-    mode: reducers.modeReducer
+    mode: reducers.modeReducer,
+    blink: reducers.blinkReducer,
+    values: reducers.valuesReducer,
+    muncher: reducers.muncherReducer
 });
 
 const store = createStore(combinedReducers);

js/welcome/NewGame.js

@@ -1,16 +1,18 @@
 import { Component } from 'react';
+import { connect } from 'react-redux';
+import * as creators from '../app/Creators.js';
 
-const blinkTimer = null;
+let blinkTimer = null;
 
 const toggleTimeout = function() {
-    //var hidden = this.state.hidden; which was false
+    var hidden = this.props.blink;
-    //this.setState({ hidden: !hidden });
+    this.props.dispatch(creators.toggleBlink());
-    //blinkTimer = setTimeout(toggleTimeout.bind(this), 600);
+    blinkTimer = setTimeout(toggleTimeout.bind(this), 600);
 };
 
 export default class NewGame extends Component {
     componentDidMount() {
-        //toggleTimeout.call(this);
+        toggleTimeout.call(this);
     };
 
     componentWillUnmount() {
@@ -20,12 +22,20 @@ export default class NewGame extends Component {
     render() {
         const classname = ['newgame'];
 
-        //if (this.state.hidden === true) {
+        if (this.props.blink === true) {
-        //    classname.push('hidden');
+            classname.push('hidden');
-        //}
+        }
 
         return (
             <div className={classname.join(' ')}>Press Space Bar To Play</div>
         );
     };
 };
+
+const select = (state) => {
+    return {
+        blink: state.blink
+    }
+};
+
+export default connect(select)(NewGame);

js/welcome/Welcome.js

@@ -7,21 +7,22 @@ import * as creators from '../app/Creators.js';
 import NewGame from './NewGame';
 import HighScores from './HighScores';
 
+let listener = null;
+
 export class Welcome extends Component {
     handleKeydown(e) {
         if (e.keyCode === 32) {
             this.props.dispatch(creators.nextMode());
-            //this.setState({ screen: 'board' });
         }
     };
 
     componentDidMount() {
-        window.addEventListener('keydown', this.handleKeydown.bind(this));
+        listener = this.handleKeydown.bind(this);
+        window.addEventListener('keydown', listener);
     };
 
     componentWillUnmount() {
-        console.log('need to remove listener')
+        window.removeEventListener('keydown', listener);
-        // remove keydown listener
     };
 
     render() {