Options screen key listener and minor reorg.

components/board/board.component.js

@@ -10,7 +10,7 @@ import Message from './message.component';
 import Muncher from './muncher.component';
 import Troggles from './troggles.component';
 
-import BoardCtrl from '../../controllers/board.controller';
+import BoardCtrl from '../../controllers/board/board.controller';
 
 let listener;
 

components/board/troggles.component.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { connect } from 'react-redux';
 
 import Troggle from './troggle.component';
-import TroggleCtrl from '../../controllers/troggle.controller.js';
+import TroggleCtrl from '../../controllers/board/troggle.controller.js';
 
 export class Troggles extends Component {
     componentWillUnmount() {

components/options/option.component.js

@@ -1,12 +1,10 @@
 import { Component } from 'react';
-import { connect } from 'react-redux';
 
-export class Option extends Component {
+export default class Option extends Component {
     render() {
         const className = ['option'];
-        console.log(this.props.selected + ' ' + this.props.index)
 
-        if (this.props.selected === this.props.index) {
+        if (this.props.selected === true) {
             className.push('selected');
         }
 
@@ -15,11 +13,3 @@ export class Option extends Component {
         );
     };
 };
-
-const select = (state) => {
-    return {
-        selected: state.options
-    };
-};
-
-export default connect(select)(Option);

components/options/options.component.js

@@ -1,15 +1,31 @@
 require('../../sass/options/options.scss');
 
 import { Component } from 'react';
+import { connect } from 'react-redux';
+import OptionsCtrl from '../../controllers/options/options.controller';
+import ModeCtrl from '../../controllers/mode.controller';
 import Option from './option.component';
 
+let listener;
+
 export default class Options extends Component {
+    componentDidMount() {
+        OptionsCtrl.setDispatch(this.props.dispatch);
+        ModeCtrl.setDispatch(this.props.dispatch);
+
+        listener = OptionsCtrl.keyListener.bind(OptionsCtrl);
+        window.addEventListener('keydown', listener);
+    };
+
+    componentWillUnmount() {
+        window.removeEventListener('keydown', listener);
+    };
+
     render() {
-        const values = ['Multiples', 'Factors', 'Equality', 'Inequality'];
         const optionsElements = [];
 
-        values.map((v, i) => {
-            optionsElements.push(<Option value={v} index={i} key={i} />);
+        OptionsCtrl.getValues().map((v, i) => {
+            optionsElements.push(<Option value={v} selected={this.props.selected === i} key={i} />);
         });
 
         return (
@@ -24,3 +40,11 @@ export default class Options extends Component {
         );
     };
 };
+
+const select = (state) => {
+    return {
+        selected: state.options
+    };
+};
+
+export default connect(select)(Options);

controllers/board/board.controller.js

@@ -1,4 +1,4 @@
-import SETTINGS from '../AppSettings';
+import SETTINGS from '../../AppSettings';
 
 import TroggleCtrl from './troggle.controller';
 import MessageCtrl from './message.controller';
@@ -6,7 +6,7 @@ import MuncherCtrl from './muncher.controller';
 import GridCtrl from './grid.controller';
 import TitlebarCtrl from './titlebar.controller';
 import ScorebarCtrl from './scorebar.controller';
-import ModeCtrl from './mode.controller';
+import ModeCtrl from '../mode.controller';
 
 let level = -1;
 let collision = false;

controllers/board/grid.controller.js

@@ -1,6 +1,6 @@
-import * as GridActions from '../actions/board/grid.actions';
-import MultiplesModel from '../models/multiples.model';
-import SETTINGS from '../AppSettings';
+import * as GridActions from '../../actions/board/grid.actions';
+import MultiplesModel from '../../models/multiples.model';
+import SETTINGS from '../../AppSettings';
 
 let values;
 let dispatch;

controllers/board/message.controller.js

@@ -1,4 +1,4 @@
-import * as MessageActions from '../actions/board/message.actions';
+import * as MessageActions from '../../actions/board/message.actions';
 
 const positives = [
     'All finished!',

controllers/board/muncher.controller.js

@@ -1,6 +1,6 @@
-import * as MuncherActions from '../actions/board/muncher.actions';
+import * as MuncherActions from '../../actions/board/muncher.actions';
 import BoardCtrl from './board.controller';
-import SETTINGS from '../AppSettings';
+import SETTINGS from '../../AppSettings';
 
 let x = 0;
 let y = 0;

controllers/board/scorebar.controller.js

@@ -1,5 +1,5 @@
-import * as ScorebarActions from '../actions/board/scorebar.actions';
-import SETTINGS from '../AppSettings';
+import * as ScorebarActions from '../../actions/board/scorebar.actions';
+import SETTINGS from '../../AppSettings';
 
 let dispatch;
 let lives = SETTINGS.LIVES;

controllers/board/titlebar.controller.js

@@ -1,5 +1,5 @@
-import * as TitlebarActions from '../actions/board/titlebar.actions';
-import MultiplesModel from '../models/multiples.model';
+import * as TitlebarActions from '../../actions/board/titlebar.actions';
+import MultiplesModel from '../../models/multiples.model';
 
 let dispatch;
 

controllers/board/troggle.controller.js

@@ -1,6 +1,6 @@
-import SETTINGS from '../AppSettings';
+import SETTINGS from '../../AppSettings';
 
-import * as TroggleActions from '../actions/board/troggle.actions';
+import * as TroggleActions from '../../actions/board/troggle.actions';
 import MuncherCtrl from './muncher.controller';
 import BoardCtrl from './board.controller';
 

controllers/mode.controller.js

@@ -5,7 +5,11 @@ let dispatch;
 const ModeCtrl = {
     setDispatch: d => dispatch = d,
 
-    welcome: () => dispatch(ModeActions.welcome())
+    welcome: () => dispatch(ModeActions.welcome()),
+
+    options: () => dispatch(ModeActions.options()),
+
+    board: () => dispatch(ModeActions.board())
 };
 
 export default ModeCtrl;

controllers/options/options.controller.js

@@ -0,0 +1,42 @@
+import * as OptionsActions from '../../actions/options/options.actions';
+import ModeCtrl from '../mode.controller';
+
+let dispatch;
+const values = ['Multiples', 'Factors', 'Equality', 'Inequality'];
+let selected = 0;
+
+const OptionsCtrl = {
+    setDispatch: d => dispatch = d,
+
+    getValues: () => values,
+
+    update() {
+        dispatch(OptionsActions.update(selected));
+    },
+
+    keyListener(e) {
+        if (e.keyCode === 32) {
+            ModeCtrl.board();
+        }
+        else if (e.keyCode === 38) {
+            selected--;
+
+            if (selected === -1) {
+                selected = values.length - 1;
+            }
+
+            this.update();
+        }
+        else if (e.keyCode === 40) {
+            selected++;
+
+            if (selected === values.length) {
+                selected = 0;
+            }
+
+            this.update();
+        }
+    }
+};
+
+export default OptionsCtrl;