Housekeeping.

App.js

@@ -6,13 +6,7 @@ import * as ModeActions from './actions/mode.actions';
 import Board from './components/board/board.component';
 import Welcome from './components/welcome/welcome.component';
 
-export const SETTINGS = {
-    GRID_WIDTH: 6,
-    GRID_HEIGHT: 5,
-    LIVES: 3
-};
-
-export default class App extends Component {
+export class App extends Component {
     render() {
         const { mode } = this.props;
 

AppSettings.js

@@ -0,0 +1,7 @@
+const SETTINGS = {
+    GRID_WIDTH: 6,
+    GRID_HEIGHT: 5,
+    LIVES: 3
+};
+
+export default SETTINGS;

actions/board/grid.actions.js

@@ -1,7 +1,8 @@
 export const GRID_ACTION = 'GRID_ACTION';
 export const UPDATE = 'GRID_UPDATE';
 
-export const update = () => ({
+export const update = (values) => ({
     type: GRID_ACTION,
-    action: UPDATE
+    action: UPDATE,
+    values: values
 });

actions/board/muncher.actions.js

@@ -1,7 +1,9 @@
 export const MUNCHER_ACTION = 'MUNCHER_ACTION';
 export const UPDATE = 'MUNCHER_UPDATE';
 
-export const update = () => ({
+export const update = (x, y) => ({
     type: MUNCHER_ACTION,
-    action: UPDATE
+    action: UPDATE,
+    x: x,
+    y: y
 });

actions/board/scorebar.actions.js

@@ -1,7 +1,10 @@
 export const SCOREBAR_ACTION = 'SCOREBAR_ACTION';
 export const UPDATE = 'SCOREBAR_UPDATE';
 
-export const update = () => ({
+export const update = (lives, currentScore, highScore) => ({
     type: SCOREBAR_ACTION,
-    action: UPDATE
+    action: UPDATE,
+    lives: lives,
+    currentScore: currentScore,
+    highScore: highScore
 });

components/board/grid.component.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { connect } from 'react-redux';
 
 import GridCell from './grid-cell.component';
-import { SETTINGS } from '../../App';
+import SETTINGS from '../../AppSettings';
 
 export class Grid extends Component {
     render() {

components/board/message.component.js

@@ -2,30 +2,8 @@ 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();
-        }
-    };
-
     render() {
         var classname = ['message'];
 
@@ -33,8 +11,6 @@ export class Message extends Component {
              classname.push('hidden');
         }
 
-        //<div className={classname.join(' ')} tabIndex='1' onKeyDown={this.keydown.bind(this)}>
-
         return (
             <div className={classname.join(' ')}>
                 {this.props.message}

controllers/board.controller.js

@@ -1,4 +1,4 @@
-import { SETTINGS } from '../App.js';
+import SETTINGS from '../AppSettings';
 
 import TroggleCtrl from './troggle.controller';
 import MessageCtrl from './message.controller';
@@ -46,46 +46,46 @@ const BoardCtrl = {
     },
 
     keyListener(e) {
-        if (e.keyCode === 32 && ScorebarCtrl.isGameOver()) {
+        if (e.keyCode !== 32 && MessageCtrl.isShowing() === false) {
+            MuncherCtrl.move(e);
+        }
+        else if (ScorebarCtrl.isGameOver()) {
             level = -1;
             ScorebarCtrl.reset();
             MessageCtrl.hide();
             TroggleCtrl.unfreeze();
             ModeCtrl.welcome();
         }
-        else if (e.keyCode === 32 && ScorebarCtrl.getLives() === 0) {
+        else if (ScorebarCtrl.getLives() === 0) {
             ScorebarCtrl.flagGameOver();
             MessageCtrl.show("Game over!");
         }
-        else if (e.keyCode === 32 && GridCtrl.isCompleted() === true) {
+        else if (GridCtrl.isCompleted() === true) {
             this.nextLevel();
             TroggleCtrl.unfreeze();
             ScorebarCtrl.levelUp(level);
             MessageCtrl.hide();
         }
-        else if (e.keyCode === 32 && BoardCtrl.isCollision() === true) {
-            console.log("Creating troggles")
+        else if (BoardCtrl.isCollision() === true) {
             collision = false;
             TroggleCtrl.clearTroggles();
             TroggleCtrl.createTroggles(level);
             TroggleCtrl.unfreeze();
             MessageCtrl.hide();
         }
-        else if (e.keyCode === 32 && MessageCtrl.isShowing() === true) {
+        else if (MessageCtrl.isShowing() === true) {
             TroggleCtrl.unfreeze();
             MessageCtrl.hide();
         }
-        else if (e.keyCode === 32 && MessageCtrl.isShowing() === false) {
-            this.munch();
-        }
         else if (MessageCtrl.isShowing() === false) {
-            MuncherCtrl.move(e);
+            this.munch();
         }
     },
 
     nextLevel() {
         level++;
         collision = false;
+        ScorebarCtrl.update();
         GridCtrl.generateValues(level);
         TitlebarCtrl.setTitle(level);
         TroggleCtrl.clearTroggles();

controllers/grid.controller.js

@@ -1,6 +1,6 @@
 import * as GridActions from '../actions/board/grid.actions';
 import ValuesCtrl from './values.controller';
-import { SETTINGS } from '../App';
+import SETTINGS from '../AppSettings';
 
 let values;
 let dispatch;
@@ -11,7 +11,7 @@ const GridCtrl = {
 
     generateValues: (level) => {
         values = ValuesCtrl.generate(SETTINGS.GRID_WIDTH * SETTINGS.GRID_HEIGHT, level);
-        dispatch(GridActions.update());
+        dispatch(GridActions.update(values));
     },
 
     isCompleted: (level) => {
@@ -20,7 +20,7 @@ const GridCtrl = {
 
     hideValue: (index) => {
         values[index].show = false;
-        dispatch(GridActions.update());
+        dispatch(GridActions.update(values));
     }
 };
 

controllers/muncher.controller.js

@@ -1,6 +1,6 @@
 import * as MuncherActions from '../actions/board/muncher.actions';
 import BoardCtrl from './board.controller';
-import { SETTINGS } from '../App';
+import SETTINGS from '../AppSettings';
 
 let x = 0;
 let y = 0;
@@ -39,7 +39,7 @@ const MuncherCtrl = {
         }
 
         if (e.keyCode >= 37 || e.keyCode <= 40) {
-            dispatch(MuncherActions.update());
+            dispatch(MuncherActions.update(x, y));
             BoardCtrl.checkCollision();
         }
     }

controllers/scorebar.controller.js

@@ -1,8 +1,8 @@
 import * as ScorebarActions from '../actions/board/scorebar.actions';
-import { SETTINGS } from '../App';
+import SETTINGS from '../AppSettings';
 
 let dispatch;
-let lives = 1;
+let lives = SETTINGS.LIVES;
 let currentScore = 0;
 let highScore = 7;
 let gameOver = false;
@@ -10,39 +10,41 @@ let gameOver = false;
 const ScorebarCtrl = {
     setDispatch: d => dispatch = d,
 
-    getCurrentScore: () => currentScore,
-    getHighScore: () => highScore,
     getLives: () => lives,
 
     flagGameOver: () => gameOver = true,
     isGameOver: () => gameOver,
 
+    update: () => {
+        dispatch(ScorebarActions.update(lives, currentScore, highScore));
+    },
+
     munchSucceeded: () => {
         currentScore += 10;
-        dispatch(ScorebarActions.update());
+        ScorebarCtrl.update();
     },
 
     munchFailed: () => {
         lives--;
         currentScore -= 5;
-        dispatch(ScorebarActions.update());
+        ScorebarCtrl.update();
     },
 
     eatenByTroggle: () => {
         lives--;
-        dispatch(ScorebarActions.update());
+        ScorebarCtrl.update();
     },
 
     levelUp: (level) => {
         currentScore += 25;
-        dispatch(ScorebarActions.update());
+        ScorebarCtrl.update();
     },
 
     reset: () => {
         lives = SETTINGS.LIVES;
         currentScore = 0;
         gameOver = false;
-        dispatch(ScorebarActions.update());
+        ScorebarCtrl.update();
     }
 };
 

controllers/troggle.controller.js

@@ -1,4 +1,4 @@
-import { SETTINGS } from '../App';
+import SETTINGS from '../AppSettings';
 
 import * as TroggleActions from '../actions/board/troggle.actions';
 import MuncherCtrl from './muncher.controller';
@@ -44,13 +44,12 @@ const TroggleCtrl = {
     },
 
     createTroggles(level) {
-        // const count = Math.min(Math.ceil((level + 1) / 2), 5);
-        const count = 3;
+        const count = Math.min(Math.ceil((level + 1) / 2), 5);
 
         for (let index = 0; index < count; index++) {
             const ref = this.createTroggle.bind(this, index);
-            troggleCreateTimers[index] = setTimeout(ref, (index) * 1000);
-            // troggleCreateTimers[index] = setTimeout(ref, (index + 1) * 5000);
+            // troggleCreateTimers[index] = setTimeout(ref, 1000);
+            troggleCreateTimers[index] = setTimeout(ref, (index + 1) * Math.random() * 10000);
         }
     },
 

reducers/board/grid.reducer.js

@@ -1,7 +1,6 @@
 const Immutable = require('immutable');
 
 import * as GridActions from '../../actions/board/grid.actions';
-import GridCtrl from '../../controllers/grid.controller.js';
 
 const initial = [];
 
@@ -11,7 +10,7 @@ const reducer = (state = initial, action) => {
     }
 
     if (action.action === GridActions.UPDATE) {
-        return Immutable.List(GridCtrl.getValues()).toArray();
+        return Immutable.List(action.values).toArray();
     }
 
     return state;

reducers/board/muncher.reducer.js

@@ -1,7 +1,5 @@
 const Immutable = require('immutable');
 import * as MuncherActions from '../../actions/board/muncher.actions';
-import MuncherCtrl from '../../controllers/muncher.controller';
-import { SETTINGS } from '../../App';
 
 const initial = { x: 0, y: 0, frozen: false };
 
@@ -12,9 +10,8 @@ const reducer = (state = initial, action) => {
 
     if (action.action === MuncherActions.UPDATE) {
         return Immutable.Map(state)
-            .set('x', MuncherCtrl.getX())
-            .set('y', MuncherCtrl.getY())
-            .set('frozen', false)
+            .set('x', action.x)
+            .set('y', action.y)
             .toObject();
     }
 

reducers/board/scorebar.reducer.js

@@ -1,13 +1,8 @@
 const Immutable = require('immutable');
 
 import * as ScorebarActions from '../../actions/board/scorebar.actions';
-import ScorebarCtrl from '../../controllers/scorebar.controller.js';
 
-const initial = {
-    current: ScorebarCtrl.getCurrentScore(),
-    high: ScorebarCtrl.getHighScore(),
-    lives: ScorebarCtrl.getLives()
-};
+const initial = { current: 0, high: 0, lives: 0 };
 
 const reducer = (state = initial, action) => {
     if (action.type !== ScorebarActions.SCOREBAR_ACTION) {
@@ -15,9 +10,9 @@ const reducer = (state = initial, action) => {
     }
 
     return Immutable.Map(state)
-        .set('current', ScorebarCtrl.getCurrentScore())
-        .set('high', ScorebarCtrl.getHighScore())
-        .set('lives', ScorebarCtrl.getLives())
+        .set('current', action.currentScore)
+        .set('high', action.highScore)
+        .set('lives', action.lives)
         .toObject();
 };
 

reducers/mode.reducer.js

@@ -1,6 +1,8 @@
 import * as ModeActions from '../actions/mode.actions';
 
-const reducer = (state = ModeActions.BOARD, action) => {
+const initial = ModeActions.WELCOME;
+
+const reducer = (state = initial, action) => {
     if (action.type !== ModeActions.MODE_ACTION) {
         return state;
     }

sass/board/troggle.scss

@@ -1,10 +1,21 @@
+.troggles {
+    height:500px;
+    left:50%;
+    margin-left:-300px;
+    overflow:hidden;
+    position:absolute;
+    top:110px;
+    width:600px;
+    z-index:0;
+}
+
 .troggle {
     $bg: crimson;
 
     background: $bg;
     height:100px;
-    margin-top:110px;
     opacity: 0.5;
     position:absolute;
+    transition:left 0.3s, top 0.3s;
     width:100px;
 }