Troggle AI ready for integration.

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_WIDTH: 6,
-    GRID_HEIGHT: 3,
+    GRID_HEIGHT: 5,
     LIVES: 3
 };
 

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,
+    index: index
-    y: y
 });
 
-export const move = (index, x, y) => ({
+export const move = (index) => ({
     type: TROGGLE_ACTION,
     action: MOVE,
-    index: index,
+    index: index
-    x: x,
-    y: y
 });
 
 export const clearAll = () => ({

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());
+        TroggleLogic.clearAll(this.props.dispatch);
-        // this.clearTroggleTimers();
+        TroggleLogic.createTroggles(this.props.dispatch);
-        // this.createTroggles();
     };
 
     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 {
             <Message ref='message' next={this.messageNext.bind(this)} />
             <Grid values={this.props.values} />
             <Muncher ref='muncher' onMunch={this.muncherNext.bind(this)} />
+            <Troggles ref='troggles' />
         </div>);
     };
 };

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();

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;

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 = [];
+import Troggle from './troggle.component';
-const troggleCreateTimers = [];
+import TroggleLogic from '../../logic/troggle.logic.js';
 
-export default class Troggles extends Component {
+export class Troggles extends Component {
     componentWillUnmount() {
-        // this.clearTroggleTimers();
+        TroggleLogic.clearTimers();
-    }
+    };
-
-    // 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);
-    //     }
-    // };
 
     render() {
-        const classname = ['troggle', 'x' + this.props.x, 'y' + this.props.y];
+        const { troggles, muncher } = this.props;
 
-        // const troggleElements = [];
+        const troggleElements = Array.from(Array(troggles.length), (v, i) => {
-        // for (let i = 0; i < troggles.length; i++) {
+            return <Troggle x={troggles[i].x} y={troggles[i].y} mx={muncher.x} my={muncher.y} key={i} />;
-        //     troggleElements[i] = <Troggle x={troggles[i].x} y={troggles[i].y} key={i} />;
+        });
-        // }
-            // {troggleElements}
 
-        return (
+        return <div className='troggles'>{troggleElements}</div>
-            <div className={classname.join(' ')}></div>
-        );
     };
 };
+
+const select = (state) => {
+    return {
+        troggles: state.troggles,
+        muncher: state.muncher
+    };
+}
+
+export default connect(select)(Troggles);

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
+    message: messageReducer,
-    // troggles: troggleReducer
+    troggles: troggleReducer
 });
 
 const store = createStore(reducers);

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;

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();

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, 'x'], coords1.x)
-                .setIn([action.index, 'y'], action.y)
+                .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();