Message component work.

actions/board/grid.actions.js

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

actions/board/message.actions.js

@@ -0,0 +1,17 @@
+// Message component actions and action creators.
+export const MESSAGE_ACTION = 'MESSAGE_ACTION';
+export const DISPLAY = 'DISPLAY';
+export const HIDE = 'HIDE';
+
+export const display = (msg1, msg2, hidden) => ({
+    type: MESSAGE_ACTION,
+    action: DISPLAY,
+    message1: msg1,
+    message2: msg2,
+    hidden: hidden
+});
+
+export const hide = () => ({
+    type: MESSAGE_ACTION,
+    action: HIDE
+});

actions/board/scorebar.actions.js

@@ -1,9 +1,14 @@
 // Scorebar component actions and action creators.
 export const SCOREBAR_ACTION = 'SCOREBAR_ACTION';
-export const MUNCH = 'MUNCH';
+export const MUNCH_SUCCEEDED = 'MUNCH_SUCCEEDED';
+export const MUNCH_FAILED = 'MUNCH_FAILED';
 
-export const munch = (success) => ({
+export const munchSucceeded = () => ({
     type: SCOREBAR_ACTION,
-    action: MUNCH,
-    success: success
+    action: MUNCH_SUCCEEDED,
+});
+
+export const munchFailed = () => ({
+    type: SCOREBAR_ACTION,
+    action: MUNCH_FAILED
 });

components/board/board.component.js

@@ -6,31 +6,51 @@ import { getState } from 'react-redux';
 import Scorebar from './scorebar.component';
 import Titlebar from './titlebar.component';
 import Grid from './grid.component';
-// import Message from './Message';
+import Message from './message.component';
 import Muncher from './muncher.component';
+import Values from '../../reducers/Values';
+import { SETTINGS } from '../../App';
 
 import * as GridActions from '../../actions/board/grid.actions';
 import * as MuncherActions from '../../actions/board/muncher.actions';
 import * as ScorebarActions from '../../actions/board/scorebar.actions';
+import * as MessageActions from '../../actions/board/message.actions';
 
-const countEmptyStrings = (acc, curr) => { return acc + (curr === ''); };
+var exclamations = [
+    'Congratulations!',
+    'Yippee!',
+    'Woohoo!',
+    'Nice work!',
+    'Great job!',
+    'Boom!',
+    'All finished!',
+    'Shazam!'
+];
 
 export default class Board extends Component {
     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());
+
+        const index = y * SETTINGS.GRID_HEIGHT + x
+        const valid = Values.validate(this.props.grid[index], 0);
+
+        if (valid) {
+            const msg = exclamations[Math.floor(Math.random() * exclamations.length)];
+
+            this.props.dispatch(GridActions.updateValues(index, ''));
+            this.props.dispatch(ScorebarActions.munchSucceeded());
+            this.props.dispatch(MessageActions.display(msg, 'Press Spacebar to Continue'));
+        }
+        else {
+            this.props.dispatch(ScorebarActions.munchFailed());
+        }
     };
 
     render() {
-            // <Message />
         return (<div className='board'>
             <Scorebar />
             <Titlebar />
+            <Message />
             <Grid />
             <Muncher munch={this.munch.bind(this)} />
         </div>);

components/board/message.component.js

@@ -1,9 +1,10 @@
 require('../../sass/board/message.scss');
 
 import { Component } from 'react';
-// var Values = require('./Values');
+import { connect } from 'react-redux';
+import * as MessageActions from '../../actions/board/message.actions';
 
-var exclamations = [
+const exclamations = [
     'Congratulations!',
     'Yippee!',
     'Woohoo!',
@@ -14,66 +15,63 @@ var exclamations = [
     'Shazam!'
 ];
 
-export default class Message extends Component {
-    // getInitialState() {
-    //     return {
-    //         message1: 'Congratulations!',
-    //         message2: 'Press spacebar to continue.',
-    //         hidden: true
-    //     };
-    // },
+let listener = null;
 
-    componentDidMount() {
-        // State.subscribe('level/complete', this.levelComplete);
-        // State.subscribe('level/next', this.levelNext);
-        // State.subscribe('munch/failed', this.munchFailed);
+export class Message extends Component {
+    keydown(e) {
+        if (e.keyCode === 32) {
+            this.props.dispatch(MessageActions.hide());
+        }
     };
 
-    munchFailed(value) {
-        var self = this;
-
-        function keydown(e) {
-            if (e.keyCode === 32) {
-                window.removeEventListener('keydown', keydown);
-                // self.setState({ hidden: true });
-            }
-        };
-
-        // var msg = Values.getError(value, State.level);
-        // this.setState({ hidden: false, message1: msg });
-        window.addEventListener('keydown', keydown);
+    componentDidMount() {
+        listener = this.keydown.bind(this);
+        window.addEventListener('keydown', listener);
     };
 
-    levelComplete() {
-        function keydown(e) {
-            if (e.keyCode === 32) {
-                window.removeEventListener('keydown', keydown);
-                // State.publish('level/next');
-            }
-        };
-
-        var msg = exclamations[Math.floor(Math.random() * exclamations.length)];
-        // this.setState({ hidden: false, message1: msg });
-        window.addEventListener('keydown', keydown);
+    componentWillUnmount() {
+        window.removeEventListener('keydown', listener);
     };
 
-    levelNext() {
-        // this.setState({ hidden: true });
-    };
+    // munchFailed(value) {
+    //     var self = this;
+    //
+    //     // var msg = Values.getError(value, State.level);
+    //     // this.setState({ hidden: false, message1: msg });
+    // };
+    //
+    // levelComplete() {
+    //     function keydown(e) {
+    //         if (e.keyCode === 32) {
+    //             window.removeEventListener('keydown', keydown);
+    //             // State.publish('level/next');
+    //         }
+    //     };
+    //
+    //     var msg = exclamations[Math.floor(Math.random() * exclamations.length)];
+    //     // this.setState({ hidden: false, message1: msg });
+    //     window.addEventListener('keydown', keydown);
+    // };
 
     render() {
-        var classname = ['message', 'hidden'];
-        const state = { message1: 'foo', message2: 'bar' };
-        // if (this.state.hidden === true) {
-        //     classname.push('hidden');
-        // }
+        var classname = ['message'];
+
+        if (this.props.hidden === true) {
+             classname.push('hidden');
+        }
 
         return (
             <div className={classname.join(' ')}>
-                {state.message1}
+                {this.props.message1}
                 <br />
-                {state.message2}
+                {this.props.message2}
             </div>
         );
     };
 };
+
+const select = (state) => {
+    return state.message;
+};
+
+export default connect(select)(Message);

index.js

@@ -10,13 +10,15 @@ import newgameReducer from './reducers/welcome/new-game.reducer';
 import gridReducer from './reducers/board/grid.reducer';
 import muncherReducer from './reducers/board/muncher.reducer';
 import scorebarReducer from './reducers/board/scorebar.reducer';
+import messageReducer from './reducers/board/message.reducer';
 
 const reducers = combineReducers({
     mode: modeReducer,
     newgame: newgameReducer,
     muncher: muncherReducer,
     scorebar: scorebarReducer,
-    grid: gridReducer
+    grid: gridReducer,
+    message: messageReducer
 });
 
 const store = createStore(reducers);

reducers/board/grid.reducer.js

@@ -1,10 +1,11 @@
 const Immutable = require('immutable');
 
 import * as GridActions from '../../actions/board/grid.actions';
-import { SETTINGS } from '../../App';
 import Values from '../Values';
 
-const reducer = (state = [], action) => {
+const initial = [];
+
+const reducer = (state = initial, action) => {
     if (action.type !== GridActions.GRID_ACTION) {
         return state;
     }
@@ -14,14 +15,7 @@ const reducer = (state = [], action) => {
             return Values.generate(action.count, action.level);
 
         case GridActions.UPDATE:
-            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 Immutable.List(state).set(action.index, action.value).toArray();
     }
 
     return state;

reducers/board/message.reducer.js

@@ -0,0 +1,29 @@
+const Immutable = require('immutable');
+
+import * as MessageActions from '../../actions/board/message.actions';
+
+const initial = { message1: '', message2: '', hidden: true };
+
+const reducer = (state = initial, action) => {
+    if (action.type !== MessageActions.MESSAGE_ACTION) {
+        return state;
+    }
+
+    switch (action.action) {
+        case MessageActions.DISPLAY:
+            return Immutable.Map(state)
+                .set('message1', action.message1)
+                .set('message2', action.message2)
+                .set('hidden', false)
+                .toObject();
+
+        case MessageActions.HIDE:
+            return Immutable.Map(state)
+                .set('hidden', true)
+                .toObject();
+    }
+
+    return state;
+};
+
+export default reducer;

reducers/board/muncher.reducer.js

@@ -1,7 +1,9 @@
 import * as MuncherActions from '../../actions/board/muncher.actions';
 import { SETTINGS } from '../../App';
 
-const reducer = (state = { x: 0, y: 0 }, action) => {
+const initial = { x: 0, y: 0 };
+
+const reducer = (state = initial, action) => {
     if (action.type !== MuncherActions.MUNCHER_ACTION) {
         return state;
     }
@@ -32,7 +34,6 @@ const reducer = (state = { x: 0, y: 0 }, action) => {
             return { x: state.x, y: state.y + 1 };
 
         case MuncherActions.MUNCH:
-            console.log("Muncher's mouth moved!");
             return state;
     }
 

reducers/board/scorebar.reducer.js

@@ -4,7 +4,9 @@ import * as ScorebarActions from '../../actions/board/scorebar.actions';
 import Values from '../Values';
 import { SETTINGS } from '../../App';
 
-const reducer = (state = { current: 0, high: 999, lives: SETTINGS.LIVES }, action) => {
+const initial = { current: 0, high: 999, lives: SETTINGS.LIVES };
+
+const reducer = (state = initial, action) => {
     if (action.type !== ScorebarActions.SCOREBAR_ACTION) {
         return state;
     }

reducers/welcome/new-game.reducer.js

@@ -1,6 +1,7 @@
 import * as NewGameActions from '../../actions/welcome/new-game.actions';
 
-const reducer = (state = { hidden: false }, action) => {
+const initial = { hidden: false };
+const reducer = (state = initial, action) => {
     if (action.type !== NewGameActions.NEWGAME_ACTION) {
         return state;
     }