diff --git a/actions/board/troggle.actions.js b/actions/board/troggle.actions.js index 473f533..0f0c633 100644 --- a/actions/board/troggle.actions.js +++ b/actions/board/troggle.actions.js @@ -1,8 +1,6 @@ export const TROGGLE_ACTION = 'TROGGLE_ACTION'; export const CREATE = 'CREATE'; export const MOVE = 'MOVE'; -export const FREEZE_ALL = 'FREEZE_ALL'; -export const UNFREEZE_ALL = 'UNFREEZE_ALL'; export const CLEAR_ALL = 'CLEAR_ALL'; export const create = (x, y) => ({ @@ -20,16 +18,6 @@ export const move = (index, x, y) => ({ y: y }); -export const freezeAll = () => ({ - type: TROGGLE_ACTION, - action: FREEZE_ALL -}); - -export const unfreezeAll = () => ({ - type: TROGGLE_ACTION, - action: UNFREEZE_ALL -}); - export const clearAll = () => ({ type: TROGGLE_ACTION, action: CLEAR_ALL diff --git a/components/board/board.component.js b/components/board/board.component.js index 02c800c..f41a871 100644 --- a/components/board/board.component.js +++ b/components/board/board.component.js @@ -26,127 +26,115 @@ const troggleCreateTimers = []; let listener = null; export default class Board extends Component { + refocus() { + this.props.dispatch(MessageActions.hide()); + ReactDOM.findDOMNode(this.refs.muncher).focus(); + }; + componentDidMount() { - listener = this.keydown.bind(this); - window.addEventListener('keydown', listener); + ReactDOM.findDOMNode(this.refs.muncher).focus(); + listener = this.refocus.bind(this); + window.addEventListener('click', listener); this.nextLevel(); }; componentWillUnmount() { - this.clearTroggleTimers(); + // this.clearTroggleTimers(); window.removeEventListener('keydown', listener); }; nextLevel() { this.props.dispatch(BoardActions.nextLevel()); - this.props.dispatch(TroggleActions.clearAll()); - this.clearTroggleTimers(); - this.createTroggles(); - }; - - clearTroggleTimers() { - troggleMoveTimers.forEach((timer) => { - clearTimeout(timer); - }); - - troggleCreateTimers.forEach((timer) => { - clearTimeout(timer); - }); + // this.props.dispatch(TroggleActions.clearAll()); + // this.clearTroggleTimers(); + // this.createTroggles(); }; - createTroggle(index) { - const newCoords = TroggleAI.create(); - this.props.dispatch(TroggleActions.create(newCoords.x, newCoords.y)); - troggleMoveTimers.push(setTimeout(this.moveTroggle.bind(this, index), 1000)); + // clearTroggleTimers() { + // troggleMoveTimers.forEach((timer) => { + // clearTimeout(timer); + // }); + // + // troggleCreateTimers.forEach((timer) => { + // clearTimeout(timer); + // }); + // }; + // + // createTroggle(index) { + // const newCoords = TroggleAI.create(); + // this.props.dispatch(TroggleActions.create(newCoords.x, newCoords.y)); + // troggleMoveTimers.push(setTimeout(this.moveTroggle.bind(this, index), 1000)); + // }; + // + // createTroggles() { + // const troggleCount = 3; //Math.min(Math.ceil(this.props.board.level / 2), 5); + // for (let i = 0; i < troggleCount; i++) { + // setTimeout(this.createTroggle.bind(this, i), (i + 1) * 5000); + // } + // }; + // + // moveTroggle(index) { + // const newCoords = TroggleAI.move( + // this.props.troggles[index].x, + // this.props.troggles[index].y, + // this.props.muncher.x, + // this.props.muncher.y + // ); + // + // if (newCoords.x === this.props.muncher.x && newCoords.y === this.props.muncher.y) { + // this.props.dispatch(MessageActions.show("You've been eaten by a troggle!")); + // this.props.dispatch(TroggleActions.clearAll()); + // } + // else { + // this.props.dispatch(TroggleActions.move(index, newCoords.x, newCoords.y)); + // clearTimeout(troggleMoveTimers[index]); + // troggleMoveTimers[index] = setTimeout(this.moveTroggle.bind(this, index), 1000); + // } + // }; + + messageNext() { + this.props.dispatch(MessageActions.hide()); + ReactDOM.findDOMNode(this.refs.muncher).focus(); }; - createTroggles() { - const troggleCount = 3; //Math.min(Math.ceil(this.props.board.level / 2), 5); - for (let i = 0; i < troggleCount; i++) { - setTimeout(this.createTroggle.bind(this, i), (i + 1) * 5000); - } - }; + muncherNext(x, y) { + const index = y * SETTINGS.GRID_WIDTH + x; - moveTroggle(index) { - const newCoords = TroggleAI.move( - this.props.troggles[index].x, - this.props.troggles[index].y, - this.props.muncher.x, - this.props.muncher.y - ); - - if (newCoords.x === this.props.muncher.x && newCoords.y === this.props.muncher.y) { - this.props.dispatch(MessageActions.show('Eaten by a troggle!')); - this.props.dispatch(TroggleActions.clearAll()); + if (this.props.values[index].valid) { + this.props.dispatch(BoardActions.hideValue(index)); + this.props.dispatch(ScorebarActions.munchSucceeded()); } else { - this.props.dispatch(TroggleActions.move(index, newCoords.x, newCoords.y)); - clearTimeout(troggleMoveTimers[index]); - troggleMoveTimers[index] = setTimeout(this.moveTroggle.bind(this, index), 1000); - } - }; - - // Keydown listener for spacebar, since it is bound to munch event and - // message hide event. Couldn't find a more modular way to do this. - keydown(e) { - if (e.keyCode !== 32) { - return; + const msg = Values.getError(this.props.values[index].value, this.props.level); + this.props.dispatch(MessageActions.show(msg)); + this.props.dispatch(ScorebarActions.munchFailed()); + ReactDOM.findDOMNode(this.refs.message).focus(); } - if (this.props.message.hidden === false) { - this.props.dispatch(MessageActions.hide()); - this.props.dispatch(MuncherActions.unfreeze()); - - if (Values.checkComplete(this.props.board.values, this.props.board.level)) { - console.warn("NEXT LEVEL") - } - } - else { - const index = this.props.muncher.y * SETTINGS.GRID_HEIGHT + this.props.muncher.x - const { board, dispatch } = this.props; - - if (board.values[index].valid) { - dispatch(BoardActions.hideValue(index)); - dispatch(ScorebarActions.munchSucceeded()); - } - else { - const msg = Values.getError(board.values[index].value, board.level); - dispatch(MessageActions.show(msg)); - dispatch(ScorebarActions.munchFailed()); - dispatch(MuncherActions.freeze()); - } - - if (Values.checkComplete(this.props.board.values, board.level)) { - dispatch(MessageActions.exclaim()); - } - } + // if (Values.checkComplete(this.props.values, this.props.level)) { + // this.props.dispatch(MessageActions.exclaim()); + // } }; render() { - const { board, message, troggles } = this.props; - const troggleElements = []; - for (let i = 0; i < troggles.length; i++) { - troggleElements.push(); - } + // const troggleElements = []; + // for (let i = 0; i < troggles.length; i++) { + // troggleElements[i] = ; + // } + // {troggleElements} return (
- -
); }; }; const select = (state) => { - return { - board: state.board, - muncher: state.muncher, - message: state.message, - troggles: state.troggles - }; + return state.board; } export default connect(select)(Board); diff --git a/components/board/message.component.js b/components/board/message.component.js index b7f47b6..496f3a8 100644 --- a/components/board/message.component.js +++ b/components/board/message.component.js @@ -1,8 +1,15 @@ require('../../sass/board/message.scss'); import { Component } from 'react'; +import { connect } from 'react-redux'; + +export class Message extends Component { + keydown(e) { + if (e.keyCode === 32) { + this.props.next(); + } + }; -export default class Message extends Component { render() { var classname = ['message']; @@ -11,7 +18,7 @@ export default class Message extends Component { } return ( -
+
{this.props.message}
Press Spacebar to continue. @@ -19,3 +26,9 @@ export default class Message extends Component { ); }; }; + +const select = (state) => { + return state.message; +} + +export default connect(select)(Message); diff --git a/components/board/muncher.component.js b/components/board/muncher.component.js index 46d59ab..1f76ec2 100644 --- a/components/board/muncher.component.js +++ b/components/board/muncher.component.js @@ -5,27 +5,15 @@ import { connect } from 'react-redux'; import * as MuncherActions from '../../actions/board/muncher.actions'; import { SETTINGS } from '../../App'; -let listener = null; - export class Muncher extends Component { - componentDidMount() { - listener = this.keydown.bind(this); - window.addEventListener('keydown', listener); - }; - - componentWillUnmount() { - window.removeEventListener('keydown', listener); - }; - keydown(e) { - if (this.props.frozen === true) { - return; - } - const x = this.props.x; const y = this.props.y; switch (e.keyCode) { + case 32: + this.props.next(x, y); + break; case 37: if (x !== 0) { this.props.dispatch(MuncherActions.moveLeft()); @@ -56,7 +44,7 @@ export class Muncher extends Component { const classname = ['muncher', 'x' + this.props.x, 'y' + this.props.y]; return ( -
+
); }; }; diff --git a/reducers/board/troggle.reducer.js b/reducers/board/troggle.reducer.js index 47cfb97..6aed5ba 100644 --- a/reducers/board/troggle.reducer.js +++ b/reducers/board/troggle.reducer.js @@ -18,10 +18,6 @@ const reducer = (state = initial, action) => { case TroggleActions.CREATE: return Immutable.List(state).push({ x: action.x, y: action.y }).toArray(); - case TroggleActions.FREEZE_ALL: - - case TroggleActions.UNFREEZE_ALL: - case TroggleActions.CLEAR_ALL: return Immutable.List().toArray(); }; diff --git a/sass/board/message.scss b/sass/board/message.scss index 0bf22c5..b8d8c0f 100644 --- a/sass/board/message.scss +++ b/sass/board/message.scss @@ -1,6 +1,7 @@ .message { background:#fff; border:1px solid #000; + cursor: default; font-size:14px; line-height:40px; margin:150px 5%; @@ -10,7 +11,11 @@ width:90%; z-index:1000; + * { + cursor:default; + } + &.hidden { - display:none; + opacity:0; } }