Options screen work started.

App.js

@@ -3,8 +3,9 @@ import { connect } from 'react-redux';
 
 import * as ModeActions from './actions/mode.actions';
 
-import Board from './components/board/board.component';
 import Welcome from './components/welcome/welcome.component';
+import Options from './components/options/options.component';
+import Board from './components/board/board.component';
 
 export class App extends Component {
     render() {
@@ -13,6 +14,8 @@ export class App extends Component {
         switch (this.props.mode) {
             case ModeActions.WELCOME:
                 return <Welcome />;
+            case ModeActions.OPTIONS:
+                return <Options />
             case ModeActions.BOARD:
                 return <Board />;
         }

actions/mode.actions.js

@@ -1,6 +1,7 @@
 // Game mode actions and action creators.
 export const MODE_ACTION = 'MODE_ACTION';
 export const WELCOME = 'MODE_WELCOME';
+export const OPTIONS = 'MODE_OPTIONS';
 export const BOARD = 'MODE_BOARD';
 
 export const welcome = () => ({
@@ -8,6 +9,11 @@ export const welcome = () => ({
     action: WELCOME
 });
 
+export const options = () => ({
+    type: MODE_ACTION,
+    action: OPTIONS
+});
+
 export const board = () => ({
     type: MODE_ACTION,
     action: BOARD

actions/options/options.actions.js

@@ -0,0 +1,8 @@
+export const OPTIONS_ACTION = 'OPTIONS_ACTION';
+export const UPDATE = 'OPTIONS_UPDATE';
+
+export const update = (selected) => ({
+    type: OPTIONS_ACTION,
+    action: UPDATE,
+    selected: selected
+});

components/options/option.component.js

@@ -0,0 +1,25 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+
+export class Option extends Component {
+    render() {
+        const className = ['option'];
+        console.log(this.props.selected + ' ' + this.props.index)
+
+        if (this.props.selected === this.props.index) {
+            className.push('selected');
+        }
+
+        return (
+            <div className={className.join(' ')}>{this.props.value}</div>
+        );
+    };
+};
+
+const select = (state) => {
+    return {
+        selected: state.options
+    };
+};
+
+export default connect(select)(Option);

components/options/options.component.js

@@ -0,0 +1,26 @@
+require('../../sass/options/options.scss');
+
+import { Component } from 'react';
+import Option from './option.component';
+
+export default class Options extends Component {
+    render() {
+        const values = ['Multiples', 'Factors', 'Equality', 'Inequality'];
+        const optionsElements = [];
+
+        values.map((v, i) => {
+            optionsElements.push(<Option value={v} index={i} key={i} />);
+        });
+
+        return (
+            <div className='options'>
+                <div className='line'>Which game would you like to play?</div>
+                <hr />
+                <div className='line'>Use the arrow keys to move.</div>
+                <div className='line'>Press spacebar to select.</div>
+                <hr />
+                {optionsElements}
+            </div>
+        );
+    };
+};

components/welcome/new-game.component.js

@@ -27,7 +27,7 @@ export default class NewGame extends Component {
 
     handleKeydown(e) {
         if (e.keyCode === 32) {
-            this.props.dispatch(ModeActions.board());
+            this.props.dispatch(ModeActions.options());
         }
     };
 

controllers/grid.controller.js

@@ -1,5 +1,5 @@
 import * as GridActions from '../actions/board/grid.actions';
-import ValuesCtrl from './values.controller';
+import MultiplesModel from '../models/multiples.model';
 import SETTINGS from '../AppSettings';
 
 let values;
@@ -10,12 +10,12 @@ const GridCtrl = {
     getValues: () => values,
 
     generateValues: (level) => {
-        values = ValuesCtrl.generate(SETTINGS.GRID_WIDTH * SETTINGS.GRID_HEIGHT, level);
+        values = MultiplesModel.generate(SETTINGS.GRID_WIDTH * SETTINGS.GRID_HEIGHT, level);
         dispatch(GridActions.update(values));
     },
 
     isCompleted: (level) => {
-        return ValuesCtrl.checkComplete(values, level)
+        return MultiplesModel.checkComplete(values, level)
     },
 
     hideValue: (index) => {

controllers/titlebar.controller.js

@@ -1,5 +1,5 @@
 import * as TitlebarActions from '../actions/board/titlebar.actions';
-import ValuesCtrl from './values.controller';
+import MultiplesModel from '../models/multiples.model';
 
 let dispatch;
 
@@ -7,7 +7,7 @@ const TitlebarCtrl = {
     setDispatch: d => dispatch = d,
 
     setTitle: (level) => {
-        const title = ValuesCtrl.getTitle(level);
+        const title = MultiplesModel.getTitle(level);
         dispatch(TitlebarActions.update(title));
     }
 };

index.js

@@ -13,6 +13,7 @@ import scorebarReducer from './reducers/board/scorebar.reducer';
 import messageReducer from './reducers/board/message.reducer';
 import troggleReducer from './reducers/board/troggle.reducer';
 import titlebarReducer from './reducers/board/titlebar.reducer';
+import optionsReducer from './reducers/options/options.reducer';
 
 const reducers = combineReducers({
     mode: modeReducer,
@@ -22,7 +23,8 @@ const reducers = combineReducers({
     message: messageReducer,
     troggles: troggleReducer,
     grid: gridReducer,
-    titlebar: titlebarReducer
+    titlebar: titlebarReducer,
+    options: optionsReducer
 });
 
 const store = createStore(reducers);

models/equality.model.js

@@ -1,8 +1,4 @@
-const validate = function(value, level) {
+const MultiplesModel = {
-    return ((value || -1) % (level + 2) === 0);
-};
-
-const ValuesCtrl = {
     // Anagrams, multiples, equality
     generate(n, level) {
         const values = [];
@@ -13,7 +9,7 @@ const ValuesCtrl = {
             values.push({
                 value: v,
                 show: true,
-                valid: validate(v, level)
+                valid: this.validate(v, level)
             });
         };
 
@@ -37,6 +33,10 @@ const ValuesCtrl = {
 
         return true;
     }
+
+    validate(value, level) {
+        return ((value || -1) % (level + 2) === 0);
+    };
 };
 
-export default ValuesCtrl;
+export default MultiplesModel;

models/factors.model.js

@@ -0,0 +1,42 @@
+const MultiplesModel = {
+    // Anagrams, multiples, equality
+    generate(n, level) {
+        const values = [];
+        let v;
+
+        for (let i = 0; i < n; i++) {
+            v = Math.ceil(Math.random() * 1000);
+            values.push({
+                value: v,
+                show: true,
+                valid: this.validate(v, level)
+            });
+        };
+
+        return values;
+    },
+
+    getTitle(level) {
+        return `Multiples of ${level + 2}`;
+    },
+
+    getError(value, level) {
+        return `Oops! ${value} is not a multiple of ${level + 2}.`;
+    },
+
+    checkComplete(values, level) {
+        for (let i = 0; i < values.length; i++) {
+            if (values[i].valid === true && values[i].show === true) {
+                return false;
+            }
+        }
+
+        return true;
+    },
+
+    validate(value, level) {
+        return ((value || -1) % (level + 2) === 0);
+    }
+};
+
+export default MultiplesModel;

models/inequality.model.js

@@ -0,0 +1,42 @@
+const MultiplesModel = {
+    // Anagrams, multiples, equality
+    generate(n, level) {
+        const values = [];
+        let v;
+
+        for (let i = 0; i < n; i++) {
+            v = Math.ceil(Math.random() * 1000);
+            values.push({
+                value: v,
+                show: true,
+                valid: this.validate(v, level)
+            });
+        };
+
+        return values;
+    },
+
+    getTitle(level) {
+        return `Multiples of ${level + 2}`;
+    },
+
+    getError(value, level) {
+        return `Oops! ${value} is not a multiple of ${level + 2}.`;
+    },
+
+    checkComplete(values, level) {
+        for (let i = 0; i < values.length; i++) {
+            if (values[i].valid === true && values[i].show === true) {
+                return false;
+            }
+        }
+
+        return true;
+    },
+
+    validate(value, level) {
+        return ((value || -1) % (level + 2) === 0);
+    }
+};
+
+export default MultiplesModel;

models/multiples.model.js

@@ -0,0 +1,42 @@
+const MultiplesModel = {
+    // Anagrams, multiples, equality
+    generate(n, level) {
+        const values = [];
+        let v;
+
+        for (let i = 0; i < n; i++) {
+            v = Math.ceil(Math.random() * 1000);
+            values.push({
+                value: v,
+                show: true,
+                valid: this.validate(v, level)
+            });
+        };
+
+        return values;
+    },
+
+    getTitle(level) {
+        return `Multiples of ${level + 2}`;
+    },
+
+    getError(value, level) {
+        return `Oops! ${value} is not a multiple of ${level + 2}.`;
+    },
+
+    checkComplete(values, level) {
+        for (let i = 0; i < values.length; i++) {
+            if (values[i].valid === true && values[i].show === true) {
+                return false;
+            }
+        }
+
+        return true;
+    },
+
+    validate(value, level) {
+        return ((value || -1) % (level + 2) === 0);
+    }
+};
+
+export default MultiplesModel;

reducers/mode.reducer.js

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

reducers/options/options.reducer.js

@@ -0,0 +1,19 @@
+const Immutable = require('immutable');
+
+import * as OptionsActions from '../../actions/options/options.actions';
+
+const initial = 0;
+
+const reducer = (state = initial, action) => {
+    if (action.type !== OptionsActions.OPTIONS_ACTION) {
+        return state;
+    }
+
+    if (action.action === OptionsActions.UPDATE) {
+        return action.selected;
+    }
+
+    return state;
+};
+
+export default reducer;

sass/options/options.scss

@@ -0,0 +1,30 @@
+.options {
+    $w: 600px;
+
+    .line {
+        line-height:50px;
+        margin:5px auto;
+        text-align:center;
+        width:$w;
+    }
+
+    hr {
+        border:0;
+        border-top:1px #ccc solid;
+        margin:50px auto;
+        width:$w;
+    }
+
+    .option {
+        border:1px solid #444;
+        height:50px;
+        line-height:50px;
+        margin:5px auto;
+        text-align:center;
+        width:$w;
+    }
+
+    .selected {
+        background:rgba(17, 250, 87, 0.5);
+    }
+}