From a660ff6b78a9a0063b49a229bb6866c0ea22a25c Mon Sep 17 00:00:00 2001 From: Ben Burlingham Date: Mon, 18 Apr 2016 09:36:12 -0700 Subject: [PATCH] Message component work. --- actions/board/grid.actions.js | 7 +- actions/board/message.actions.js | 17 +++++ actions/board/scorebar.actions.js | 13 ++-- components/board/board.component.js | 38 ++++++++--- components/board/message.component.js | 94 +++++++++++++-------------- index.js | 4 +- reducers/board/grid.reducer.js | 14 ++-- reducers/board/message.reducer.js | 29 +++++++++ reducers/board/muncher.reducer.js | 5 +- reducers/board/scorebar.reducer.js | 4 +- reducers/welcome/new-game.reducer.js | 3 +- 11 files changed, 148 insertions(+), 80 deletions(-) create mode 100644 actions/board/message.actions.js create mode 100644 reducers/board/message.reducer.js diff --git a/actions/board/grid.actions.js b/actions/board/grid.actions.js index 5bba6c2..98f9a3f 100644 --- a/actions/board/grid.actions.js +++ b/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 }); diff --git a/actions/board/message.actions.js b/actions/board/message.actions.js new file mode 100644 index 0000000..8c5c90a --- /dev/null +++ b/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 +}); diff --git a/actions/board/scorebar.actions.js b/actions/board/scorebar.actions.js index 77fb2cf..434ea50 100644 --- a/actions/board/scorebar.actions.js +++ b/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 }); diff --git a/components/board/board.component.js b/components/board/board.component.js index 20d549b..3cd41e4 100644 --- a/components/board/board.component.js +++ b/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() { - // return (
+
); diff --git a/components/board/message.component.js b/components/board/message.component.js index 0891e50..46b4a6d 100644 --- a/components/board/message.component.js +++ b/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 (
- {state.message1} + {this.props.message1}
- {state.message2} + {this.props.message2}
); }; }; + +const select = (state) => { + return state.message; +}; + +export default connect(select)(Message); diff --git a/index.js b/index.js index dc4b039..a5a42ed 100644 --- a/index.js +++ b/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); diff --git a/reducers/board/grid.reducer.js b/reducers/board/grid.reducer.js index 3c02d24..167fbce 100644 --- a/reducers/board/grid.reducer.js +++ b/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; diff --git a/reducers/board/message.reducer.js b/reducers/board/message.reducer.js new file mode 100644 index 0000000..437fc8d --- /dev/null +++ b/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; diff --git a/reducers/board/muncher.reducer.js b/reducers/board/muncher.reducer.js index c9b56e4..c9ef356 100644 --- a/reducers/board/muncher.reducer.js +++ b/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; } diff --git a/reducers/board/scorebar.reducer.js b/reducers/board/scorebar.reducer.js index f1ad6c6..7eee9d5 100644 --- a/reducers/board/scorebar.reducer.js +++ b/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; } diff --git a/reducers/welcome/new-game.reducer.js b/reducers/welcome/new-game.reducer.js index 85c0869..f14042e 100644 --- a/reducers/welcome/new-game.reducer.js +++ b/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; }