Scorebar hooked up to grid validation.

actions/board/grid.actions.js

@@ -10,9 +10,10 @@ export const generateValues = (count, level) => ({
     level: level
 });
 
-export const updateValues = (i, level) => ({
+export const updateValues = (x, y, level) => ({
     type: GRID_ACTION,
     action: UPDATE,
-    index: i,
+    x: x,
+    y: y,
     level: level
 });

actions/board/muncher.actions.js

@@ -26,7 +26,7 @@ export const moveDown = () => ({
     action: DOWN
 });
 
-export const munch = () => ({
+export const munch = (x, y) => ({
     type: MUNCHER_ACTION,
     action: MUNCH
 });

actions/board/scorebar.actions.js

@@ -1,8 +1,9 @@
 // Scorebar component actions and action creators.
 export const SCOREBAR_ACTION = 'SCOREBAR_ACTION';
-export const UPDATE = 'UPDATE';
+export const MUNCH = 'MUNCH';
 
-export const update = () => ({
+export const munch = (success) => ({
     type: SCOREBAR_ACTION,
-    action: UPDATE
+    action: MUNCH,
+    success: success
 });

components/board/board.component.js

@@ -1,8 +1,10 @@
 require('../../sass/board/board.scss');
 
 import { Component } from 'react';
+import { connect } from 'react-redux';
+import { getState } from 'react-redux';
 import Scorebar from './scorebar.component';
-// import Titlebar from './Titlebar';
+import Titlebar from './titlebar.component';
 import Grid from './grid.component';
 // import Message from './Message';
 import Muncher from './muncher.component';
@@ -11,21 +13,29 @@ import * as GridActions from '../../actions/board/grid.actions';
 import * as MuncherActions from '../../actions/board/muncher.actions';
 import * as ScorebarActions from '../../actions/board/scorebar.actions';
 
+const countEmptyStrings = (acc, curr) => { return acc + (curr === ''); };
+
 export default class Board extends Component {
-    // A "munch" event affects several children. It needs a dispatch reference.
-    munch() {
-        this.props.dispatch(GridActions.updateValues(0, 0));
+    munch(x, y) {
+        // Before/after grid validation reveals successful munch.
+        const pre = this.props.grid.reduce(countEmptyStrings, 0);
+        this.props.dispatch(GridActions.updateValues(x, y, 0));
+        const post = this.props.grid.reduce(countEmptyStrings, 0);
+
+        this.props.dispatch(ScorebarActions.munch(pre !== post));
         this.props.dispatch(MuncherActions.munch());
-        this.props.dispatch(ScorebarActions.update());
     };
 
     render() {
-            // <Titlebar />
             // <Message />
         return (<div className='board'>
             <Scorebar />
+            <Titlebar />
             <Grid />
-            <Muncher munch={this.munch} />
+            <Muncher munch={this.munch.bind(this)} />
         </div>);
     };
 };
+
+// Connect state for inspection to determine dispatching flow.
+export default connect((s) => s)(Board);

components/board/muncher.component.js

@@ -3,7 +3,6 @@ require('../../sass/board/muncher.scss');
 import { Component } from 'react';
 import { connect } from 'react-redux';
 import * as Actions from '../../actions/board/muncher.actions';
-import { SETTINGS } from '../../App';
 
 let listener = null;
 
@@ -14,31 +13,22 @@ export class Muncher extends Component {
 
         switch (e.keyCode) {
             case 32:
-                this.props.munch();
+                this.props.munch(x, y);
                 break;
 
             case 37:
-                if (this.props.x === 0) {
-                    return;
-                }
                 this.props.dispatch(Actions.moveLeft());
                 break;
+
             case 38:
-                if (this.props.y === 0) {
-                    return;
-                }
                 this.props.dispatch(Actions.moveUp());
                 break;
+
             case 39:
-                if (this.props.x === SETTINGS.GRID_WIDTH - 1) {
-                    return;
-                }
                 this.props.dispatch(Actions.moveRight());
                 break;
+
             case 40:
-                if (this.props.y === SETTINGS.GRID_HEIGHT - 1) {
-                    return;
-                }
                 this.props.dispatch(Actions.moveDown());
                 break;
         }

components/board/scorebar.component.js

@@ -3,7 +3,7 @@ require('../../sass/board/scorebar.scss');
 import { Component } from 'react';
 import { connect } from 'react-redux';
 
-export default class Scorebar extends Component {
+export class Scorebar extends Component {
     render() {
         var lives = [];
         for (var i = 0; i < this.props.lives; i++) {

index.js

@@ -11,7 +11,7 @@ import gridReducer from './reducers/board/grid.reducer';
 import muncherReducer from './reducers/board/muncher.reducer';
 import scorebarReducer from './reducers/board/scorebar.reducer';
 
-const combinedReducers = combineReducers({
+const reducers = combineReducers({
     mode: modeReducer,
     newgame: newgameReducer,
     muncher: muncherReducer,
@@ -19,7 +19,7 @@ const combinedReducers = combineReducers({
     grid: gridReducer
 });
 
-const store = createStore(combinedReducers);
+const store = createStore(reducers);
 
 ReactDOM.render(
     <Provider store={store}>

reducers/board/grid.reducer.js

@@ -1,5 +1,7 @@
-require('immutable');
+const Immutable = require('immutable');
+
 import * as GridActions from '../../actions/board/grid.actions';
+import { SETTINGS } from '../../App';
 import Values from '../Values';
 
 const reducer = (state = [], action) => {
@@ -10,13 +12,16 @@ const reducer = (state = [], action) => {
     switch (action.action) {
         case GridActions.GENERATE:
             return Values.generate(action.count, action.level);
+
         case GridActions.UPDATE:
-            // const valid = Values.validate(state[action.index], action.level);
-            const results = state.slice(0);
-            // if (valid) {
-                results[action.index] = "";
-            // }
-            return results;
+            const results = Immutable.List(state);
+            const index = action.y * SETTINGS.GRID_HEIGHT + action.x;
+            const valid = Values.validate(state[index], action.level);
+
+            if (valid) {
+                return results.set(index, '').toArray();
+            }
+            break;
     }
 
     return state;

reducers/board/muncher.reducer.js

@@ -1,5 +1,5 @@
-require('immutable');
 import * as MuncherActions from '../../actions/board/muncher.actions';
+import { SETTINGS } from '../../App';
 
 const reducer = (state = { x: 0, y: 0 }, action) => {
     if (action.type !== MuncherActions.MUNCHER_ACTION) {
@@ -8,13 +8,29 @@ const reducer = (state = { x: 0, y: 0 }, action) => {
 
     switch (action.action) {
         case MuncherActions.LEFT:
+            if (state.x === 0) {
+                return state;
+            }
             return { x: state.x - 1, y: state.y };
+
         case MuncherActions.RIGHT:
+            if (state.x === SETTINGS.GRID_WIDTH - 1) {
+                return state;
+            }
             return { x: state.x + 1, y: state.y };
+
         case MuncherActions.UP:
+            if (state.y === 0) {
+                return state;
+            }
             return { x: state.x, y: state.y - 1 };
+
         case MuncherActions.DOWN:
+            if (state.y === SETTINGS.GRID_HEIGHT - 1) {
+                return state;
+            }
             return { x: state.x, y: state.y + 1 };
+
         case MuncherActions.MUNCH:
             console.log("Muncher's mouth moved!");
             return state;

reducers/board/scorebar.reducer.js

@@ -1,16 +1,24 @@
-require('immutable');
+const Immutable = require('immutable');
+
 import * as ScorebarActions from '../../actions/board/scorebar.actions';
 import Values from '../Values';
 import { SETTINGS } from '../../App';
 
-const reducer = (state = { current: 100, high: 999, lives: SETTINGS.LIVES }, action) => {
+const reducer = (state = { current: 0, high: 999, lives: SETTINGS.LIVES }, action) => {
     if (action.type !== ScorebarActions.SCOREBAR_ACTION) {
         return state;
     }
 
+    const result = Immutable.Map(state);
+
     switch (action.action) {
-        case ScorebarActions.UPDATE:
-            return { current: state.current + 10, high: 999 };
+        case ScorebarActions.MUNCH:
+            if (action.success) {
+                return result.set('current', state.current + 10).toObject();
+            }
+            else {
+                return result.set('lives', state.lives - 1).toObject();
+            }
     }
 
     return state;

reducers/mode.reducer.js

@@ -1,7 +1,6 @@
-require('immutable');
 import * as ModeActions from '../actions/mode.actions';
 
-const reducer = (state = ModeActions.WELCOME, action) => {
+const reducer = (state = ModeActions.BOARD, action) => {
     if (action.type !== ModeActions.MODE_ACTION) {
         return state;
     }

reducers/welcome/new-game.reducer.js

@@ -1,4 +1,3 @@
-require('immutable');
 import * as NewGameActions from '../../actions/welcome/new-game.actions';
 
 const reducer = (state = { hidden: false }, action) => {