diff --git a/App.js b/App.js index 91a9d74..c0be2cb 100644 --- a/App.js +++ b/App.js @@ -7,8 +7,8 @@ import Board from './components/board/board.component'; import Welcome from './components/welcome/welcome.component'; export const SETTINGS = { - GRID_WIDTH: 3, - GRID_HEIGHT: 3, + GRID_WIDTH: 6, + GRID_HEIGHT: 5, LIVES: 3 }; diff --git a/actions/board/troggle.actions.js b/actions/board/troggle.actions.js index 0f0c633..f2545d8 100644 --- a/actions/board/troggle.actions.js +++ b/actions/board/troggle.actions.js @@ -3,19 +3,16 @@ export const CREATE = 'CREATE'; export const MOVE = 'MOVE'; export const CLEAR_ALL = 'CLEAR_ALL'; -export const create = (x, y) => ({ +export const create = (index) => ({ type: TROGGLE_ACTION, action: CREATE, - x: x, - y: y + index: index }); -export const move = (index, x, y) => ({ +export const move = (index) => ({ type: TROGGLE_ACTION, action: MOVE, - index: index, - x: x, - y: y + index: index }); export const clearAll = () => ({ diff --git a/components/board/board.component.js b/components/board/board.component.js index acf010b..ef7acbe 100644 --- a/components/board/board.component.js +++ b/components/board/board.component.js @@ -11,40 +11,25 @@ import Muncher from './muncher.component'; import Troggles from './troggles.component'; import ValuesLogic from '../../logic/values.logic.js'; -// import TroggleAI from '../../reducers/TroggleAI'; +import TroggleLogic from '../../logic/troggle.logic.js'; import { SETTINGS } from '../../App'; import * as BoardActions from '../../actions/board/board.actions'; import * as ScorebarActions from '../../actions/board/scorebar.actions'; import * as MessageActions from '../../actions/board/message.actions'; import * as MuncherActions from '../../actions/board/muncher.actions'; -import * as TroggleActions from '../../actions/board/troggle.actions'; -let listener = null; let nextLevelFlag = false; export default class Board extends Component { - refocus() { - this.props.dispatch(MessageActions.hide()); - ReactDOM.findDOMNode(this.refs.muncher).focus(); - }; - componentDidMount() { - ReactDOM.findDOMNode(this.refs.muncher).focus(); - listener = this.refocus.bind(this); - window.addEventListener('click', listener); this.nextLevel(); }; - componentWillUnmount() { - window.removeEventListener('keydown', listener); - }; - nextLevel() { this.props.dispatch(BoardActions.nextLevel()); - // this.props.dispatch(TroggleActions.clearAll()); - // this.clearTroggleTimers(); - // this.createTroggles(); + TroggleLogic.clearAll(this.props.dispatch); + TroggleLogic.createTroggles(this.props.dispatch); }; messageNext() { @@ -78,7 +63,13 @@ export default class Board extends Component { this.props.dispatch(ScorebarActions.munchFailed()); ReactDOM.findDOMNode(this.refs.message).focus(); } - + // + // if (troggles[i].x === muncher.x && troggles[i].y === muncher.y) { + // this.props.dispatch(MessageActions.show("You've been eaten by a troggle!")); + // this.props.dispatch(ScorebarActions.munchFailed()); + // TroggleLogic.frozen = true; + // ReactDOM.findDOMNode(this.refs.message).focus(); + // } }; render() { @@ -88,6 +79,7 @@ export default class Board extends Component { + ); }; }; diff --git a/components/board/message.component.js b/components/board/message.component.js index 496f3a8..c15b767 100644 --- a/components/board/message.component.js +++ b/components/board/message.component.js @@ -2,8 +2,24 @@ require('../../sass/board/message.scss'); import { Component } from 'react'; import { connect } from 'react-redux'; +import * as MessageActions from '../../actions/board/message.actions'; + +let refocusListener = null; export class Message extends Component { + componentDidMount() { + refocusListener = this.refocus.bind(this); + window.addEventListener('click', refocusListener); + }; + + componentWillUnmount() { + window.removeEventListener('click', refocusListener); + }; + + refocus() { + this.props.dispatch(MessageActions.hide()); + }; + keydown(e) { if (e.keyCode === 32) { this.props.next(); diff --git a/components/board/muncher.component.js b/components/board/muncher.component.js index a400bc7..310586c 100644 --- a/components/board/muncher.component.js +++ b/components/board/muncher.component.js @@ -5,7 +5,23 @@ import { connect } from 'react-redux'; import * as MuncherActions from '../../actions/board/muncher.actions'; import { SETTINGS } from '../../App'; +let focusListener = null; + export class Muncher extends Component { + componentDidMount() { + this.focus(); + focusListener = this.focus.bind(this); + window.addEventListener('click', focusListener); + }; + + componentWillUnmount() { + window.removeEventListener('click', focusListener); + }; + + focus() { + ReactDOM.findDOMNode(this).focus(); + }; + keydown(e) { const x = this.props.x; const y = this.props.y; diff --git a/components/board/troggles.component.js b/components/board/troggles.component.js index ad092d4..91df776 100644 --- a/components/board/troggles.component.js +++ b/components/board/troggles.component.js @@ -1,68 +1,32 @@ require('../../sass/board/troggle.scss'); import { Component } from 'react'; +import { connect } from 'react-redux'; -const troggleMoveTimers = []; -const troggleCreateTimers = []; +import Troggle from './troggle.component'; +import TroggleLogic from '../../logic/troggle.logic.js'; -export default class Troggles extends Component { +export class Troggles extends Component { componentWillUnmount() { - // this.clearTroggleTimers(); - } - - // 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); - // } - // }; + TroggleLogic.clearTimers(); + }; render() { - const classname = ['troggle', 'x' + this.props.x, 'y' + this.props.y]; + const { troggles, muncher } = this.props; - // const troggleElements = []; - // for (let i = 0; i < troggles.length; i++) { - // troggleElements[i] = ; - // } - // {troggleElements} + const troggleElements = Array.from(Array(troggles.length), (v, i) => { + return ; + }); - return ( -
- ); + return
{troggleElements}
}; }; + +const select = (state) => { + return { + troggles: state.troggles, + muncher: state.muncher + }; +} + +export default connect(select)(Troggles); diff --git a/index.js b/index.js index 5d7cba3..7bcc0a7 100644 --- a/index.js +++ b/index.js @@ -11,7 +11,7 @@ import boardReducer from './reducers/board/board.reducer'; import muncherReducer from './reducers/board/muncher.reducer'; import scorebarReducer from './reducers/board/scorebar.reducer'; import messageReducer from './reducers/board/message.reducer'; -// import troggleReducer from './reducers/board/troggle.reducer'; +import troggleReducer from './reducers/board/troggle.reducer'; const reducers = combineReducers({ mode: modeReducer, @@ -19,8 +19,8 @@ const reducers = combineReducers({ muncher: muncherReducer, scorebar: scorebarReducer, board: boardReducer, - message: messageReducer - // troggles: troggleReducer + message: messageReducer, + troggles: troggleReducer }); const store = createStore(reducers); diff --git a/logic/troggle.logic.js b/logic/troggle.logic.js index 08e6a74..1fe951c 100644 --- a/logic/troggle.logic.js +++ b/logic/troggle.logic.js @@ -1,7 +1,53 @@ import { SETTINGS } from '../App'; +import * as TroggleActions from '../actions/board/troggle.actions'; + +const troggleMoveTimers = []; +const troggleCreateTimers = []; + const TroggleLogic = { - move: function(currX, currY, muncherX, muncherY) { + frozen: false, + + clearAll(dispatch) { + dispatch(TroggleActions.clearAll()); + + troggleMoveTimers.forEach((timer) => { + clearTimeout(timer); + }); + + troggleCreateTimers.forEach((timer) => { + clearTimeout(timer); + }); + }, + + createTroggle(index, dispatch) { + dispatch(TroggleActions.create(index)); + + const ref = this.moveTroggle.bind(this, index, dispatch); + troggleMoveTimers[index] = setTimeout(ref, 1000); + }, + + createTroggles(dispatch, level) { + // const count = Math.min(Math.ceil((level + 1) / 2), 5); + const count = 3; + + for (let index = 0; index < count; index++) { + const ref = this.createTroggle.bind(this, index, dispatch); + troggleCreateTimers[index] = setTimeout(ref, (index) * 1000); + // troggleCreateTimers[index] = setTimeout(ref, (index + 1) * 5000); + } + }, + + moveTroggle(index, dispatch) { + if (this.frozen === false) { + dispatch(TroggleActions.move(index)); + } + + const ref = this.moveTroggle.bind(this, index, dispatch); + troggleMoveTimers[index] = setTimeout(ref, 1000); + }, + + getMoveCoords(currX, currY, muncherX, muncherY) { // Randomize movement with boolean flags. const moveToAttack = Boolean(Math.round(Math.random())); const moveAlongXAxis = Boolean(Math.round(Math.random())); @@ -47,7 +93,7 @@ const TroggleLogic = { return { x: newX, y: newY }; }, - create: function() { + getStartingCoords() { // Start outside grid at a randomized location. const enterOnXAxis = Boolean(Math.round(Math.random())); const enterFromPositive = Boolean(Math.round(Math.random())); @@ -71,4 +117,4 @@ const TroggleLogic = { } }; -export default TroggleAI; +export default TroggleLogic; diff --git a/reducers/board/message.reducer.js b/reducers/board/message.reducer.js index 1a5cc14..7eff970 100644 --- a/reducers/board/message.reducer.js +++ b/reducers/board/message.reducer.js @@ -12,6 +12,7 @@ const exclamations = [ ]; import * as MessageActions from '../../actions/board/message.actions'; +import TroggleLogic from '../../logic/troggle.logic.js'; const initial = { message: '', hidden: true }; @@ -22,6 +23,7 @@ const reducer = (state = initial, action) => { switch (action.action) { case MessageActions.EXCLAIM: + TroggleLogic.frozen = true; const msg = exclamations[Math.floor(Math.random() * exclamations.length)]; return Immutable.Map(state) .set('hidden', false) @@ -29,12 +31,14 @@ const reducer = (state = initial, action) => { .toObject(); case MessageActions.SHOW: + TroggleLogic.frozen = true; return Immutable.Map(state) .set('hidden', false) .set('message', action.message) .toObject(); case MessageActions.HIDE: + TroggleLogic.frozen = false; return Immutable.Map(state) .set('hidden', true) .toObject(); diff --git a/reducers/board/troggle.reducer.js b/reducers/board/troggle.reducer.js index 6aed5ba..1d1a890 100644 --- a/reducers/board/troggle.reducer.js +++ b/reducers/board/troggle.reducer.js @@ -1,6 +1,8 @@ const Immutable = require('immutable'); import * as TroggleActions from '../../actions/board/troggle.actions'; +import TroggleLogic from '../../logic/troggle.logic.js'; + const initial = []; const reducer = (state = initial, action) => { @@ -10,13 +12,17 @@ const reducer = (state = initial, action) => { switch (action.action) { case TroggleActions.MOVE: + const t = state[action.index]; + const coords1 = TroggleLogic.getMoveCoords(t.x, t.y, t.mx, t.my); + return Immutable.fromJS(state) - .setIn([action.index, 'x'], action.x) - .setIn([action.index, 'y'], action.y) + .setIn([action.index, 'x'], coords1.x) + .setIn([action.index, 'y'], coords1.y) .toJS(); case TroggleActions.CREATE: - return Immutable.List(state).push({ x: action.x, y: action.y }).toArray(); + const coords2 = TroggleLogic.getStartingCoords(); + return Immutable.List(state).set(action.index, { x: coords2.x, y: coords2.y }).toArray(); case TroggleActions.CLEAR_ALL: return Immutable.List().toArray();