Merge branch 'release/2.9.17'

eddp.co shortened links are considered End-Of-Life from now on

.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2

.eslintrc

@@ -5,7 +5,7 @@
       "jsx": true,
       "classes": true,
       "modules": true
-    },
+    }
   },
   "env": {
     "browser": true,
@@ -33,7 +33,6 @@
             "ClassDeclaration": true
         }
     }],
-    "no-console": 2,
     "brace-style": [2, "1tbs", { "allowSingleLine": true }],
     "comma-style": [2, "last"],
     "indent": [2, 2, { "SwitchCase": 1, "VariableDeclarator": 2 }],

.gitignore

@@ -7,3 +7,4 @@ nginx.pid
 /bin
 env
 *.swp
+.project

.travis.yml

@@ -8,7 +8,8 @@ cache:
   directories:
     - node_modules
 
-before_script:
+before_install:
+  - git clone https://github.com/EDCD/coriolis-data.git ../coriolis-data
 
 script:
   - npm run lint

ChangeLog.md

@@ -1,3 +1,13 @@
+#2.5.1  
+  * Passenger count on main page  
+  * AX Modules  
+  * Engineering fixes  
+  * Use coriolis-data 2.5.1  
+
+#2.5.0
+  * willyb321 and myself have conquered engineering. Mainly him though...  
+  * Use coriolis-data 2.5.0
+
 #2.4.2  
   Lots of kind people have helped out for this release! Check out the PR history!  
   * Uses coriolis-data update:

devServer.js

@@ -5,6 +5,7 @@ var config = require('./webpack.config.dev');
 new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
   hot: true,
+  disableHostCheck: true,
   headers: { "Access-Control-Allow-Origin": "*" },
   historyApiFallback: {
     rewrites: [

package.json

@@ -1,113 +1,117 @@
-{
+{
-  "name": "coriolis_shipyard",
+  "name": "coriolis_shipyard",
-  "version": "2.4.2",
+  "version": "2.9.17",
-  "repository": {
+  "repository": {
-    "type": "git",
+    "type": "git",
-    "url": "https://github.com/EDCD/coriolis"
+    "url": "https://github.com/EDCD/coriolis"
-  },
+  },
-  "homepage": "https://coriolis.edcd.io",
+  "homepage": "https://coriolis.edcd.io",
-  "bugs": "https://github.com/EDCD/coriolis/issues",
+  "bugs": "https://github.com/EDCD/coriolis/issues",
-  "private": true,
+  "private": true,
-  "engine": "node >= 4.8.1",
+  "engine": "node >= 4.8.1",
-  "license": "MIT",
+  "license": "MIT",
-  "scripts": {
+  "scripts": {
-    "prepublish": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js",
+    "prepublish": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js",
-    "extract-translations": "grep -hroE \"(translate\\('[^']+'\\))|(tip.bind\\(null, '[^']+')\" src/* | grep -oE \"'[^']+'\" | grep -oE \"[^']+\" | sort -u -f",
+    "extract-translations": "grep -hroE \"(translate\\('[^']+'\\))|(tip.bind\\(null, '[^']+')\" src/* | grep -oE \"'[^']+'\" | grep -oE \"[^']+\" | sort -u -f",
-    "clean": "rimraf build",
+    "clean": "rimraf build",
-    "start": "node devServer.js",
+    "start": "node devServer.js",
-    "lint": "eslint --ext .js,.jsx src",
+    "lint": "eslint --ext .js,.jsx src",
-    "test": "jest",
+    "test": "jest",
-    "prod-serve": "nginx -p $(pwd) -c nginx.conf",
+    "prod-serve": "nginx -p $(pwd) -c nginx.conf",
-    "prod-stop": "kill -QUIT $(cat nginx.pid)",
+    "prod-stop": "kill -QUIT $(cat nginx.pid)",
-    "build": "npm run clean && NODE_ENV=production webpack -p --config webpack.config.prod.js",
+    "build": "npm run clean && cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js",
-    "rsync": "rsync -ae \"ssh -i $CORIOLIS_PEM\" --delete build/ $CORIOLIS_USER@$CORIOLIS_HOST:~/wwws",
+    "rsync": "rsync -ae \"ssh -i $CORIOLIS_PEM\" --delete build/ $CORIOLIS_USER@$CORIOLIS_HOST:~/wwws",
-    "deploy": "npm run lint && npm test && npm run build && npm run rsync"
+    "deploy": "npm run lint && npm test && npm run build && npm run rsync"
-  },
+  },
-  "jest": {
+  "jest": {
-    "transform": {
+    "transform": {
-      ".*": "<rootDir>/node_modules/babel-jest"
+      ".*": "<rootDir>/node_modules/babel-jest"
-    },
+    },
-    "testRegex": "(/__tests__/test-.*|\\.(test|spec))\\.js$",
+    "testRegex": "(/__tests__/test-.*|\\.(test|spec))\\.js$",
-    "moduleFileExtensions": [
+    "moduleFileExtensions": [
-      "js",
+      "js",
-      "json",
+      "json",
-      "jsx"
+      "jsx"
-    ],
+    ],
-    "automock": true,
+    "automock": true,
-    "bail": false,
+    "bail": false,
-    "unmockedModulePathPatterns": [
+    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/lodash",
+      "<rootDir>/node_modules/lodash",
-      "<rootDir>/node_modules/react",
+      "<rootDir>/node_modules/react",
-      "<rootDir>/node_modules/react-dom",
+      "<rootDir>/node_modules/react-dom",
-      "<rootDir>/node_modules/react-transition-group",
+      "<rootDir>/node_modules/react-transition-group",
-      "<rootDir>/node_modules/react-testutils-additions",
+      "<rootDir>/node_modules/react-testutils-additions",
-      "<rootDir>/node_modules/fbjs",
+      "<rootDir>/node_modules/fbjs",
-      "<rootDir>/node_modules/fbemitter",
+      "<rootDir>/node_modules/fbemitter",
-      "<rootDir>/node_modules/classnames",
+      "<rootDir>/node_modules/classnames",
-      "<rootDir>/node_modules/d3",
+      "<rootDir>/node_modules/d3",
-      "<rootDir>/node_modules/lz-string",
+      "<rootDir>/node_modules/lz-string",
-      "<rootDir>/node_modules/jsen",
+      "<rootDir>/node_modules/jsen",
-      "coriolis-data",
+      "coriolis-data",
-      "<rootDir>/src/app/shipyard",
+      "<rootDir>/src/app/shipyard",
-      "<rootDir>/src/app/i18n",
+      "<rootDir>/src/app/i18n",
-      "<rootDir>/src/app/utils",
+      "<rootDir>/src/app/utils",
-      "<rootDir>/src/schemas",
+      "<rootDir>/src/schemas",
-      "<rootDir>/__tests__"
+      "<rootDir>/__tests__"
-    ]
+    ]
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "appcache-webpack-plugin": "^1.3.0",
+    "appcache-webpack-plugin": "^1.3.0",
-    "babel-core": "*",
+    "babel-core": "*",
-    "babel-eslint": "*",
+    "babel-eslint": "*",
-    "babel-jest": "*",
+    "babel-jest": "*",
-    "babel-loader": "*",
+    "babel-loader": "*",
-    "babel-preset-env": "*",
+    "babel-preset-env": "*",
-    "babel-preset-react": "*",
+    "babel-preset-react": "*",
-    "babel-preset-stage-0": "*",
+    "babel-preset-stage-0": "*",
-    "create-react-class": "^15.6.2",
+    "create-react-class": "^15.6.2",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.0",
-    "d3-selection": "1",
+    "cross-env": "^5.1.4",
-    "eslint": "3.19.0",
+    "d3-selection": "1",
-    "eslint-plugin-react": "^6.10.3",
+    "eslint": "3.19.0",
-    "expose-loader": "^0.7.3",
+    "eslint-plugin-react": "^6.10.3",
-    "express": "^4.15.2",
+    "expose-loader": "^0.7.3",
-    "extract-text-webpack-plugin": "2.1.0",
+    "express": "^4.15.2",
-    "file-loader": "^0.11.1",
+    "extract-text-webpack-plugin": "2.1.0",
-    "html-webpack-plugin": "^2.28.0",
+    "file-loader": "^0.11.1",
-    "jest-cli": "^21.2.1",
+    "html-webpack-plugin": "^2.28.0",
-    "jsen": "^0.6.4",
+    "jest-cli": "^21.2.1",
-    "json-loader": "^0.5.4",
+    "jsen": "^0.6.4",
-    "less": "^2.7.2",
+    "json-loader": "^0.5.4",
-    "less-loader": "^4.0.3",
+    "less": "^2.7.2",
-    "react-addons-perf": "^15.4.2",
+    "less-loader": "^4.0.3",
-    "react-measure": "^1.4.7",
+    "react-addons-perf": "^15.4.2",
-    "react-testutils-additions": "^15.2.0",
+    "react-measure": "^1.4.7",
-    "react-transition-group": "^1.1.2",
+    "react-testutils-additions": "^15.2.0",
-    "rimraf": "^2.6.1",
+    "react-transition-group": "^1.1.2",
-    "rollup": "0.41",
+    "rimraf": "^2.6.1",
-    "rollup-plugin-node-resolve": "3",
+    "rollup": "0.41",
-    "style-loader": "^0.16.1",
+    "rollup-plugin-node-resolve": "3",
-    "url-loader": "^0.5.8",
+    "style-loader": "^0.16.1",
-    "webpack": "^2.4.1",
+    "uglify-js": "^2.4.11",
-    "webpack-dev-server": "^2.4.4",
+    "url-loader": "^0.5.8",
-    "uglify-js": "^2.4.11"
+    "webpack": "^2.4.1",
-  },
+    "webpack-dev-server": "^2.4.4",
-  "dependencies": {
+    "webpack-notifier": "^1.6.0",
-    "babel-polyfill": "*",
+    "webpack-bugsnag-plugins": "^1.1.1"
-    "browserify-zlib-next": "^1.0.1",
+  },
-    "classnames": "^2.2.5",
+  "dependencies": {
-    "coriolis-data": "../coriolis-data",
+    "babel-polyfill": "*",
-    "d3": "4.8.0",
+    "browserify-zlib-next": "^1.0.1",
-    "detect-browser": "^1.7.0",
+    "classnames": "^2.2.5",
-    "fbemitter": "^2.1.1",
+    "coriolis-data": "../coriolis-data",
-    "lodash": "^4.17.4",
+    "d3": "4.8.0",
-    "lz-string": "^1.4.4",
+    "detect-browser": "^1.7.0",
-    "pako": "^1.0.6",
+    "fbemitter": "^2.1.1",
-    "prop-types": "^15.5.8",
+    "lodash": "^4.17.4",
-    "react": "^15.5.4",
+    "lz-string": "^1.4.4",
-    "react-dom": "^15.5.4",
+    "pako": "^1.0.6",
-    "react-number-editor": "Athanasius/react-number-editor.git#miggy",
+    "prop-types": "^15.5.8",
-    "recharts": "^0.22.3",
+    "react": "^15.5.4",
-    "superagent": "^3.5.2"
+    "react-dom": "^15.5.4",
-  }
+    "react-ga": "^2.5.3",
-}
+    "react-number-editor": "Athanasius/react-number-editor.git#miggy",
+    "recharts": "^0.22.3",
+    "superagent": "^3.5.2"
+  }
+}

src/app/Coriolis.jsx

@@ -12,6 +12,7 @@ import ModalHelp from './components/ModalHelp';
 import ModalImport from './components/ModalImport';
 import ModalPermalink from './components/ModalPermalink';
 import * as CompanionApiUtils from './utils/CompanionApiUtils';
+import * as JournalUtils from './utils/JournalUtils';
 
 import AboutPage from './pages/AboutPage';
 import NotFoundPage from './pages/NotFoundPage';
@@ -92,7 +93,14 @@ export default class Coriolis extends React.Component {
       // Need to decode and gunzip the data, then build the ship
       const data = zlib.inflate(new Buffer(r.params.data, 'base64'), { to: 'string' });
       const json = JSON.parse(data);
-      const ship = CompanionApiUtils.shipFromJson(json);
+      console.info('Ship import data: ');
+      console.info(json);
+      let ship;
+      if (json && json.modules) {
+        ship = CompanionApiUtils.shipFromJson(json);
+      } else if (json && json.Modules) {
+        ship = JournalUtils.shipFromLoadoutJSON(json);
+      }
       r.params.ship = ship.id;
       r.params.code = ship.toString();
       this._setPage(OutfittingPage, r);
@@ -126,9 +134,9 @@ export default class Coriolis extends React.Component {
     console && console.error && console.error(arguments); // eslint-disable-line no-console
     if (errObj) {
       if (errObj instanceof Error) {
-        Bugsnag.notifyException(errObj) // eslint-disable-line
+        bugsnagClient.notify(errObj) // eslint-disable-line
       } else if (errObj instanceof String) {
-        Bugsnag.notify(msg, errObj) // eslint-disable-line
+        bugsnagClient.notify(msg, errObj) // eslint-disable-line
       }
     }
     this.setState({
@@ -347,6 +355,8 @@ export default class Coriolis extends React.Component {
       <footer>
         <div className="right cap">
           <a href="https://github.com/EDCD/coriolis" target="_blank" title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
+          <br/>
+          <a href={'https://github.com/EDCD/coriolis/compare/edcd:develop@{' + window.CORIOLIS_DATE + '}...edcd:develop'} target="_blank" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits since last release ({window.CORIOLIS_DATE})</a>
         </div>
       </footer>
     </div>;

src/app/Router.js

@@ -1,5 +1,6 @@
 import Persist from './stores/Persist';
-
+import ReactGA from 'react-ga';
+ReactGA.initialize('UA-55840909-18');
 let standalone = undefined;
 
 /**
@@ -257,9 +258,16 @@ Route.prototype.match = function(path, params) {
  * @param  {string} path Path to track
  */
 function gaTrack(path) {
-  if (window.ga) {
+  const match = path.match(/\/outfit\/(.*)(\?code=.*)/);
-    window.ga('send', 'pageview', path);
+  if (match) {
+    if (match[1]) {
+      ReactGA.ga('set', 'contentGroup1', match[1]);
+    }
+    if (match[2]) {
+      ReactGA.ga('set', 'contentGroup2', match[2]);
+    }
   }
+  ReactGA.pageview(path);
 }
 
 /**

src/app/components/AvailableModulesMenu.jsx

@@ -37,10 +37,14 @@ const GRPCAT = {
   'ml': 'lasers',
   'c': 'projectiles',
   'mc': 'projectiles',
+  'axmc': 'experimental',
   'fc': 'projectiles',
+  'rfl':  'experimental',
   'pa': 'projectiles',
   'rg': 'projectiles',
   'mr': 'ordnance',
+  'axmr': 'experimental',
+  'rcpl': 'experimental',
   'tp': 'ordnance',
   'nl': 'ordnance',
   'sc': 'scanners',
@@ -49,9 +53,15 @@ const GRPCAT = {
   'cs': 'scanners',
   'kw': 'scanners',
   'ws': 'scanners',
+  'xs': 'scanners',
   'ch': 'defence',
   'po': 'defence',
   'ec': 'defence',
+  'sfn': 'defence',
+  // Standard
+  'gpp': 'guardian',
+  'gpc': 'guardian',
+  'ggc': 'guardian'
 };
 // Order here is the order in which items will be shown in the modules menu
 const CATEGORIES = {
@@ -76,6 +86,11 @@ const CATEGORIES = {
   'hs': ['hs'],
   'defence': ['ch', 'po', 'ec'],
   'scanners': ['sc', 'ss', 'cs', 'kw', 'ws'], // Overloaded with internal scanners
+  // Experimental
+  'experimental': ['axmc', 'axmr', 'rfl', 'xs', 'sfn', 'rcpl'],
+
+  // Guardian
+  'guardian': ['gpp', 'gpc', 'ggc']
 };
 
 /**
@@ -89,7 +104,11 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     diffDetails: PropTypes.func,
     m: PropTypes.object,
     shipMass: PropTypes.number,
-    warning: PropTypes.func
+    warning: PropTypes.func,
+    firstSlotId: PropTypes.string,
+    lastSlotId: PropTypes.string,
+    activeSlotId: PropTypes.string,
+    slotDiv: PropTypes.object
   };
 
   static defaultProps = {
@@ -105,6 +124,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     super(props);
     this._hideDiff = this._hideDiff.bind(this);
     this.state = this._initState(props, context);
+    this.slotItems = [];// Array to hold <li> refs.
   }
 
   /**
@@ -115,8 +135,9 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   _initState(props, context) {
     let translate = context.language.translate;
-    let { m, warning, shipMass, onSelect, modules } = props;
+    let { m, warning, shipMass, onSelect, modules, firstSlotId, lastSlotId } = props;
     let list, currentGroup;
+
     let buildGroup = this._buildGroup.bind(
       this,
       translate,
@@ -127,7 +148,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         this._hideDiff(event);
         onSelect(m);
       }
-    );
+   );
 
     if (modules instanceof Array) {
       list = buildGroup(modules[0].grp, modules);
@@ -135,7 +156,10 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       list = [];
       // At present time slots with grouped options (Hardpoints and Internal) can be empty
       if (m) {
-        list.push(<div className='empty-c upp' key='empty' onClick={onSelect.bind(null, null)} >{translate('empty')}</div>);
+        let emptyId = 'empty';
+        if(this.firstSlotId == null) this.firstSlotId = emptyId;
+        let keyDown = this._keyDown.bind(this, onSelect);
+        list.push(<div className='empty-c upp' key={emptyId} data-id={emptyId} onClick={onSelect.bind(null, null)} onKeyDown={keyDown} tabIndex="0" ref={slotItem => this.slotItems[emptyId] = slotItem} >{translate('empty')}</div>);
       }
 
       // Need to regroup the modules by our own categorisation
@@ -185,37 +209,40 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         }
       }
     }
-
+    let trackingFocus = false;
-    return { list, currentGroup };
+    return { list, currentGroup, trackingFocus };
   }
 
   /**
    * Generate React Components for Module Group
    * @param  {Function} translate   Translate function
-   * @param  {Objecy} mountedModule Mounted Module
+   * @param  {Object} mountedModule Mounted Module
-   * @param  {Funciton} warningFunc Warning function
+   * @param  {Function} warningFunc Warning function
    * @param  {number} mass          Mass
    * @param  {function} onSelect    Select/Mount callback
    * @param  {string} grp           Group name
    * @param  {Array} modules        Available modules
+   * @param  {string} firstSlotId   id of first slot item
+   * @param  {string} lastSlotId    id of last slot item
    * @return {React.Component}      Available Module Group contents
    */
-  _buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules) {
+  _buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules, firstSlotId, lastSlotId) {
-    let prevClass = null, prevRating = null;
+    let prevClass = null, prevRating = null, prevName;
     let elems = [];
 
     const sortedModules = modules.sort(this._moduleOrder);
 
+
     // Calculate the number of items per class.  Used so we don't have long lists with only a few items in each row
     const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => { count[cls] = ++count[cls] || 1; return count; }, {});
     const itemsPerClass = Math.max.apply(null, Object.keys(tmp).map(key => tmp[key]));
 
     let itemsOnThisRow = 0;
-
     for (let i = 0; i < sortedModules.length; i++) {
       let m = sortedModules[i];
       let mount = null;
       let disabled = false;
+      prevName = m.name;
       if (ModuleUtils.isShieldGenerator(m.grp)) {
         // Shield generators care about maximum hull mass
         disabled = mass > m.maxmass;
@@ -231,9 +258,21 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       });
       let eventHandlers;
 
-      if (disabled || active) {
+      if (disabled) {
-        eventHandlers = {};
+        eventHandlers = {
+          onKeyDown: this._keyDown.bind(this, null),
+          onKeyUp: this._keyUp.bind(this, null)
+
+        };
       } else {
+        /**
+         * Get the ids of the first and last <li> elements in the <ul> that are focusable (i.e. are not active or disabled)
+         * Will be used to keep focus inside the <ul> on Tab and Shift-Tab while it is visible
+         */
+        if (this.firstSlotId == null) this.firstSlotId = sortedModules[i].id;
+        if (active) this.activeSlotId = sortedModules[i].id;
+        this.lastSlotId = sortedModules[i].id;
+
         let showDiff = this._showDiff.bind(this, mountedModule, m);
         let select = onSelect.bind(null, m);
 
@@ -242,7 +281,9 @@ export default class AvailableModulesMenu extends TranslatedComponent {
           onTouchStart: this._touchStart.bind(this, showDiff),
           onTouchEnd: this._touchEnd.bind(this, select),
           onMouseLeave: this._hideDiff,
-          onClick: select
+          onClick: select,
+          onKeyDown: this._keyDown.bind(this, select),
+          onKeyUp: this._keyUp.bind(this, select)
         };
       }
 
@@ -251,24 +292,28 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         case 'G': mount = <MountGimballed className={'lg'}/>; break;
         case 'T': mount = <MountTurret className={'lg'}/>; break;
       }
-
+      if (m.name && m.name === prevName) {
+        // elems.push(<br key={'b' + m.grp + i} />);
+        itemsOnThisRow = 0;
+      }
       if (itemsOnThisRow == 6 || i > 0 && sortedModules.length > 3 && itemsPerClass > 2 && m.class != prevClass && (m.rating != prevRating || m.mount)) {
         elems.push(<br key={'b' + m.grp + i} />);
         itemsOnThisRow = 0;
       }
-
+      let tbIdx = (classes.indexOf('disabled') < 0) ? 0 : undefined;
       elems.push(
-        <li key={m.id} className={classes} {...eventHandlers}>
+        <li key={m.id} data-id={m.id} className={classes} {...eventHandlers} tabIndex={tbIdx} ref={slotItem => this.slotItems[m.id] = slotItem}>
           {mount}
           {(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}
         </li>
       );
+
       itemsOnThisRow++;
       prevClass = m.class;
       prevRating = m.rating;
+      prevName = m.name;
     }
-
+    return <ul key={'modules' + grp}>{elems}</ul>;
-    return <ul key={'modules' + grp} >{elems}</ul>;
   }
 
   /**
@@ -319,6 +364,41 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     this._hideDiff();
   }
 
+  /**
+   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
+   * @param  {Function} select Select module callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _keyDown(select, event) {
+    let className = event.currentTarget.attributes['class'].value;
+    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
+      select();
+      return;
+    }
+    let elemId = event.currentTarget.attributes['data-id'].value;
+    if (className.indexOf('disabled') < 0 && event.key == 'Tab') {
+      if (event.shiftKey && elemId == this.firstSlotId) {
+        event.preventDefault();
+        this.slotItems[this.lastSlotId].focus();
+        return;
+      }
+      if (!event.shiftKey && elemId == this.lastSlotId) {
+        event.preventDefault();
+        this.slotItems[this.firstSlotId].focus();
+        return;
+      }
+    }
+  }
+
+  /**
+   * Key Up
+   * @param {Function}  select Select module callback
+   * @param {SytheticEvent} event Event
+   */
+  _keyUp(select,event) {
+    // nothing here yet
+  }
+
   /**
    * Hide diff tooltip
    * @param  {SyntheticEvent} event Event
@@ -376,6 +456,23 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     if (this.groupElem) {  // Scroll to currently selected group
       this.node.scrollTop = this.groupElem.offsetTop;
     }
+    /**
+     * Set focus on active or first slot element, if applicable.
+     */
+    if (this.slotItems[this.activeSlotId]) {
+      this.slotItems[this.activeSlotId].focus();
+    } else if (this.slotItems[this.firstSlotId]) {
+      this.slotItems[this.firstSlotId].focus();
+    }
+  }
+  /**
+   * Handle focus if the component updates
+   * 
+   */
+  componentWillUnmount() {
+    if(this.props.slotDiv) {
+      this.props.slotDiv.focus();
+    }
   }
 
   /**

src/app/components/EngagementRange.jsx

@@ -25,7 +25,7 @@ export default class EngagementRange extends TranslatedComponent {
 
     const { ship } = props;
 
-    const maxRange = this._calcMaxRange(ship);
+    const maxRange = Math.round(this._calcMaxRange(ship));
 
     this.state = {
       maxRange

src/app/components/HardpointSlot.jsx

@@ -97,11 +97,12 @@ export default class HardpointSlot extends Slot {
           { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
           { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
           { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
-          { m && validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+          { m && validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
         </div>
       </div>;
     } else {
       return  <div className={'empty'}>{translate('empty')}</div>;
     }
   }
+
 }

src/app/components/HardpointSlotSection.jsx

@@ -17,14 +17,25 @@ export default class HardpointSlotSection extends SlotSection {
    */
   constructor(props, context) {
     super(props, context, 'hardpoints', 'hardpoints');
-
     this._empty = this._empty.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = 'nl-F';
+  }
+
+  /**
+   * Handle focus when component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Empty all slots
    */
   _empty() {
+    this.selectedRefId = 'emptyall';
     this.props.ship.emptyWeapons();
     this.props.onChange();
     this._close();
@@ -37,6 +48,7 @@ export default class HardpointSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event   Event
    */
   _fill(group, mount, event) {
+    this.selectedRefId = group + '-' + mount;
     this.props.ship.useWeapon(group, mount, null, event.getModifierState('Alt'));
     this.props.onChange();
     this._close();
@@ -95,52 +107,52 @@ export default class HardpointSlotSection extends SlotSection {
 
     return <div className='select hardpoint' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
+        <li className='lc' tabIndex='0' onClick={this._empty} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['emptyall'] = smRef}>{translate('empty all')}</li>
         <li className='optional-hide' style={{ textAlign: 'center', marginTop: '1em' }}>{translate('PHRASE_ALT_ALL')}</li>
       </ul>
       <div className='select-group cap'>{translate('pl')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'F')}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'pl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pl-F'] = smRef}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'G')}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'pl', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pl-G'] = smRef}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'pl', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pl-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('ul')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'F')}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'ul', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ul-F'] = smRef}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'G')}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'ul', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ul-G'] = smRef}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'ul', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ul-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('bl')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'F')}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'bl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['bl-F'] = smRef}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'G')}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'bl', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['bl-G'] = smRef}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'bl', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['bl-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('mc')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'F')}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'mc', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mc-F'] = smRef}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'G')}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'mc', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mc-G'] = smRef}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'mc', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mc-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('c')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'c', 'F')}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'c', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['c-F'] = smRef}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'c', 'G')}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'c', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['c-G'] = smRef}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'c', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'c', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['c-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('fc')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'F')}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'fc', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['fc-F'] = smRef}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'G')}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'fc', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['fc-G'] = smRef}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'fc', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['fc-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('pa')}</div>
       <ul>
-        <li className='lc' onClick={_fill.bind(this, 'pa', 'F')}>{translate('pa')}</li>
+        <li className='lc' tabIndex='0'  onClick={_fill.bind(this, 'pa', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pa-F'] = smRef}>{translate('pa')}</li>
       </ul>
       <div className='select-group cap'>{translate('nl')}</div>
       <ul>
-        <li className='lc' onClick={_fill.bind(this, 'nl', 'F')}>{translate('nl')}</li>
+        <li className='lc' tabIndex='0' onClick={_fill.bind(this, 'nl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['nl-F'] = smRef}>{translate('nl')}</li>
       </ul>
     </div>;
   }

src/app/components/Header.jsx

@@ -505,6 +505,9 @@ export default class Header extends TranslatedComponent {
     return (
       <header>
         {this.props.appCacheUpdate && <div id="app-update" onClick={() => window.location.reload() }>{translate('PHRASE_UPDATE_RDY')}</div>}
+        {this.props.appCacheUpdate ? <a className={'view-changes'} href={'https://github.com/EDCD/coriolis/compare/edcd:develop@{' + window.CORIOLIS_DATE + '}...edcd:develop'} target="_blank">
+          {'View Release Changes'}
+        </a> : null}
         <Link className='l' href='/' style={{ marginRight: '1em' }} title='Home'><CoriolisLogo className='icon xl' /></Link>
 
         <div className='l menu'>

src/app/components/InternalSlot.jsx

@@ -33,6 +33,9 @@ export default class InternalSlot extends Slot {
       let modTT = translate('modified');
       if (m && m.blueprint && m.blueprint.name) {
         modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+        if (m.blueprint.special && m.blueprint.special.id >= 0) {
+          modTT += ', ' + translate(m.blueprint.special.name);
+        }
         modTT = (
           <div>
             <div>{modTT}</div>
@@ -67,6 +70,7 @@ export default class InternalSlot extends Slot {
           { m.getRange() ? <div className={'l'}>{translate('range')} {formats.f2(m.getRange())}{u.km}</div> : null }
           { m.getRangeT() ? <div className={'l'}>{translate('ranget')} {formats.f1(m.getRangeT())}{u.s}</div> : null }
           { m.getTime() ? <div className={'l'}>{translate('time')}: {formats.time(m.getTime())}</div> : null }
+          { m.getHackTime() ? <div className={'l'}>{translate('hacktime')}: {formats.time(m.getHackTime())}</div> : null }
           { m.maximum ? <div className={'l'}>{translate('max')}: {(m.maximum)}</div> : null }
           { m.rangeLS ? <div className={'l'}>{translate('range')}: {m.rangeLS}{u.Ls}</div> : null }
           { m.rangeLS === null ? <div className={'l'}>∞{u.Ls}</div> : null }
@@ -81,7 +85,7 @@ export default class InternalSlot extends Slot {
           { m.getHullReinforcement() ? <div className='l'>{translate('armour')}: {formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)}</div> : null }
           { m.getProtection() ? <div className='l'>{translate('protection')}: {formats.rPct(m.getProtection())}</div> : null }
           { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
-	  { m && validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+	  { m && validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
         </div>
       </div>;
     } else {

src/app/components/InternalSlotSection.jsx

@@ -18,7 +18,6 @@ export default class InternalSlotSection extends SlotSection {
    */
   constructor(props, context) {
     super(props, context, 'internal', 'optional internal');
-
     this._empty = this._empty.bind(this);
     this._fillWithCargo = this._fillWithCargo.bind(this);
     this._fillWithCells = this._fillWithCells.bind(this);
@@ -29,12 +28,24 @@ export default class InternalSlotSection extends SlotSection {
     this._fillWithFirstClassCabins = this._fillWithFirstClassCabins.bind(this);
     this._fillWithBusinessClassCabins = this._fillWithBusinessClassCabins.bind(this);
     this._fillWithEconomyClassCabins = this._fillWithEconomyClassCabins.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = this.sectionRefArr['pcq'] ? 'pcq' : 'pcm';
+  }
+
+  /**
+   * Handle focus when component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Empty all slots
    */
   _empty() {
+    this.selectedRefId = 'emptyall';
     this.props.ship.emptyInternal();
     this.props.onChange();
     this._close();
@@ -45,6 +56,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithCargo(event) {
+    this.selectedRefId = 'cargo';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -61,6 +73,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithFuelTanks(event) {
+    this.selectedRefId = 'ft';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -77,6 +90,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithLuxuryCabins(event) {
+    this.selectedRefId = 'pcq';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -93,6 +107,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithFirstClassCabins(event) {
+    this.selectedRefId = 'pcm';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -109,6 +124,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithBusinessClassCabins(event) {
+    this.selectedRefId = 'pci';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -125,6 +141,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithEconomyClassCabins(event) {
+    this.selectedRefId = 'pce';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -141,6 +158,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithCells(event) {
+    this.selectedRefId = 'scb';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     let chargeCap = 0; // Capacity of single activation
@@ -160,6 +178,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithArmor(event) {
+    this.selectedRefId = 'hr';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -176,6 +195,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithModuleReinforcementPackages(event) {
+    this.selectedRefId = 'mrp';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -240,16 +260,16 @@ export default class InternalSlotSection extends SlotSection {
   _getSectionMenu(translate, ship) {
     return <div className='select' onClick={e => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
+        <li className='lc' tabIndex='0' onClick={this._empty} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['emptyall'] = smRef}>{translate('empty all')}</li>
-        <li className='lc' onClick={this._fillWithCargo}>{translate('cargo')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithCargo} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['cargo'] = smRef}>{translate('cargo')}</li>
-        <li className='lc' onClick={this._fillWithCells}>{translate('scb')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithCells} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['scb'] = smRef}>{translate('scb')}</li>
-        <li className='lc' onClick={this._fillWithArmor}>{translate('hr')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithArmor} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['hr'] = smRef}>{translate('hr')}</li>
-        <li className='lc' onClick={this._fillWithModuleReinforcementPackages}>{translate('mrp')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithModuleReinforcementPackages} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mrp'] = smRef}>{translate('mrp')}</li>
-        <li className='lc' onClick={this._fillWithFuelTanks}>{translate('ft')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithFuelTanks} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ft'] = smRef}>{translate('ft')}</li>
-        <li className='lc' onClick={this._fillWithEconomyClassCabins}>{translate('pce')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithEconomyClassCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pce'] = smRef}>{translate('pce')}</li>
-        <li className='lc' onClick={this._fillWithBusinessClassCabins}>{translate('pci')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithBusinessClassCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pci'] = smRef}>{translate('pci')}</li>
-        <li className='lc' onClick={this._fillWithFirstClassCabins}>{translate('pcm')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithFirstClassCabins} onKeyDown={ship.luxuryCabins ? '' : this._keyDown} ref={smRef => this.sectionRefArr['pcm'] = smRef}>{translate('pcm')}</li>
-	{ ship.luxuryCabins ? <li className='lc' onClick={this._fillWithLuxuryCabins}>{translate('pcq')}</li> : ''}
+	{ ship.luxuryCabins ? <li className='lc' tabIndex='0' onClick={this._fillWithLuxuryCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pcq'] = smRef}>{translate('pcq')}</li> : ''}
         <li className='optional-hide' style={{ textAlign: 'center', marginTop: '1em' }}>{translate('PHRASE_ALT_ALL')}</li>
       </ul>
     </div>;

src/app/components/ModalPermalink.jsx

@@ -50,6 +50,7 @@ export default class ModalPermalink extends TranslatedComponent {
       <h3 >{translate('shortened')}</h3>
       <input value={this.state.shortenedUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/>
       <br/><br/>
+      <p>s.orbis.zone is the new URL shortener domain, old eddp.co urls are considered end of life and could go down at any moment. Sorry for any inconvenience.</p>
       <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
     </div>;
   }

src/app/components/ModalShoppingList.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import ShortenUrl from '../utils/ShortenUrl';
+import Persist from '../stores/Persist';
+
+/**
+ * Permalink modal
+ */
+export default class ModalShoppingList extends TranslatedComponent {
+
+  static propTypes = {
+    ship: PropTypes.object.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      matsList: '',
+      mats: {},
+      matsPerGrade: Persist.getRolls()
+    };
+  }
+
+  /**
+   * React component did mount
+   */
+  componentDidMount() {
+    this.renderMats();
+  }
+
+  /**
+   * Convert mats object to string
+   */
+  renderMats() {
+    const ship = this.props.ship;
+    let mats = {};
+    for (const module of ship.costList) {
+      if (module.type === 'SHIP') {
+        continue;
+      }
+      if (module.m && module.m.blueprint) {
+        if (!module.m.blueprint.grade || !module.m.blueprint.grades) {
+          continue;
+        }
+        for (const g in module.m.blueprint.grades) {
+          if (g > module.m.blueprint.grade) {
+            continue;
+          }
+          for (const i in module.m.blueprint.grades[g].components) {
+            if (mats[i]) {
+              mats[i] += module.m.blueprint.grades[g].components[i] * this.state.matsPerGrade[g];
+            } else {
+              mats[i] = module.m.blueprint.grades[g].components[i] * this.state.matsPerGrade[g];
+            }
+          }
+        }
+      }
+    }
+    let matsString = '';
+    for (const i in mats) {
+      if (!mats.hasOwnProperty(i)) {
+        continue;
+      }
+      if (mats[i] === 0) {
+        delete mats[i];
+        continue;
+      }
+      matsString += `${i}: ${mats[i]}\n`;
+    }
+    this.setState({ matsList: matsString, mats });
+  }
+
+  /**
+   * Handler for changing roll amounts
+   * @param {SyntheticEvent} e React Event
+   */
+  changeHandler(e) {
+    let grade = e.target.id;
+    let newState = this.state.matsPerGrade;
+    newState[grade] = parseInt(e.target.value);
+    this.setState({ matsPerGrade: newState });
+    Persist.setRolls(newState);
+    this.renderMats();
+  }
+
+  /**
+   * Render the modal
+   * @return {React.Component} Modal Content
+   */
+  render() {
+    let translate = this.context.language.translate;
+    this.changeHandler = this.changeHandler.bind(this);
+    return <div className='modal' onClick={ (e) => e.stopPropagation() }>
+      <h2>{translate('PHRASE_SHOPPING_MATS')}</h2>
+      <label>Grade 1 rolls </label>
+      <input id={1} type={'number'} min={0} defaultValue={this.state.matsPerGrade[1]} onChange={this.changeHandler} />
+      <br/>
+      <label>Grade 2 rolls </label>
+      <input id={2} type={'number'} min={0} defaultValue={this.state.matsPerGrade[2]} onChange={this.changeHandler} />
+      <br/>
+      <label>Grade 3 rolls </label>
+      <input id={3} type={'number'} min={0} value={this.state.matsPerGrade[3]} onChange={this.changeHandler} />
+      <br/>
+      <label>Grade 4 rolls </label>
+      <input id={4} type={'number'} min={0} value={this.state.matsPerGrade[4]} onChange={this.changeHandler} />
+      <br/>
+      <label>Grade 5 rolls </label>
+      <input id={5} type={'number'} min={0} value={this.state.matsPerGrade[5]} onChange={this.changeHandler} />
+      <div>
+        <textarea className='cb json' readOnly value={this.state.matsList} />
+      </div>
+      <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
+    </div>;
+  }
+}

src/app/components/Modification.jsx

@@ -14,7 +14,10 @@ export default class Modification extends TranslatedComponent {
     m: PropTypes.object.isRequired,
     name: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    onKeyDown: PropTypes.func.isRequired,
+    modItems: PropTypes.array.isRequired,
+    handleModChange: PropTypes.func.isRequired
   };
 
   /**
@@ -36,7 +39,6 @@ export default class Modification extends TranslatedComponent {
    */
   _updateValue(value) {
     const name = this.props.name;
-
     let scaledValue = Math.round(Number(value) * 100);
     // Limit to +1000% / -99.99%
     if (scaledValue > 100000) {
@@ -57,9 +59,15 @@ export default class Modification extends TranslatedComponent {
 
   /**
    * Triggered when an update to slider value is finished i.e. when losing focus
+   * 
+   * pnellesen (24/05/2018): added value check below - this should prevent experimental effects from being recalculated 
+   * with each onBlur event, even when no change has actually been made to the field. 
    */
   _updateFinished() {
-    this.props.onChange();
+    if (this.props.value != this.state.value) {
+      this.props.handleModChange(true);
+      this.props.onChange();
+    }
   }
 
   /**
@@ -86,9 +94,9 @@ export default class Modification extends TranslatedComponent {
     }
 
     return (
-      <div onBlur={this._updateFinished.bind(this)} className={'cb'} key={name}>
+      <div onBlur={this._updateFinished.bind(this)} className={'cb'} key={name} ref={ modItem => this.props.modItems[name] = modItem }>
         <div className={'cb'}>{translate(name, m.grp)}{symbol}</div>
-        <NumberEditor className={'cb'} style={{ width: '90%', textAlign: 'center' }} step={0.01} stepModifier={1} decimals={2} value={this.state.value} onValueChange={this._updateValue.bind(this)} />
+        <NumberEditor className={'cb'} style={{ width: '90%', textAlign: 'center' }} step={0.01} stepModifier={1} decimals={2} value={this.state.value} onValueChange={this._updateValue.bind(this)} onKeyDown={ this.props.onKeyDown } />
       </div>
     );
   }

src/app/components/ModificationsMenu.jsx

@@ -6,7 +6,14 @@ import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { Modifications } from 'coriolis-data/dist';
 import Modification from './Modification';
-import { getBlueprint, blueprintTooltip, setWorst, setBest, setExtreme, setRandom } from '../utils/BlueprintFunctions';
+import {
+  getBlueprint,
+  blueprintTooltip,
+  setPercent,
+  getPercent,
+  setRandom,
+  specialToolTip
+} from '../utils/BlueprintFunctions';
 
 /**
  * Modifications menu
@@ -17,7 +24,8 @@ export default class ModificationsMenu extends TranslatedComponent {
     ship: PropTypes.object.isRequired,
     m: PropTypes.object.isRequired,
     marker: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    modButton:PropTypes.object
   };
 
   /**
@@ -30,14 +38,24 @@ export default class ModificationsMenu extends TranslatedComponent {
 
     this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this);
     this._toggleSpecialsMenu = this._toggleSpecialsMenu.bind(this);
-    this._rollWorst = this._rollWorst.bind(this);
+    this._rollFifty = this._rollFifty.bind(this);
     this._rollRandom = this._rollRandom.bind(this);
     this._rollBest = this._rollBest.bind(this);
-    this._rollExtreme = this._rollExtreme.bind(this);
+    this._rollWorst = this._rollWorst.bind(this);
     this._reset = this._reset.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this.modItems = [];// Array to hold various element refs (<li>, <div>, <ul>, etc.)
+    this.firstModId = null;
+    this.firstBPLabel = null;// First item in mod menu
+    this.lastModId = null;
+    this.selectedModId = null;
+    this.selectedSpecialId = null;
+    this.lastNeId = null;// Last number editor id. Used to set focus to last number editor when shift-tab pressed on first element in mod menu.
+    this.modValDidChange = false; // used to determine if component update was caused by change in modification value.
+    this._handleModChange = this._handleModChange.bind(this);
 
     this.state = {
-      blueprintMenuOpened: false,
+      blueprintMenuOpened: !(props.m.blueprint && props.m.blueprint.name),
       specialMenuOpened: false
     };
   }
@@ -52,7 +70,6 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { m } = props;
     const { language, tooltip, termtip } = context;
     const translate = language.translate;
-
     const blueprints = [];
     for (const blueprintName in Modifications.modules[m.grp].blueprints) {
       const blueprint = getBlueprint(blueprintName, m);
@@ -61,14 +78,18 @@ export default class ModificationsMenu extends TranslatedComponent {
         // Grade is a string in the JSON so make it a number
         grade = Number(grade);
         const classes = cn('c', {
-          active: m.blueprint && blueprint.id === m.blueprint.id && grade === m.blueprint.grade 
+          active: m.blueprint && blueprint.id === m.blueprint.id && grade === m.blueprint.grade
         });
         const close = this._blueprintSelected.bind(this, blueprintName, grade);
         const key = blueprintName + ':' + grade;
         const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade], Modifications.modules[m.grp].blueprints[blueprintName].grades[grade].engineers, m.grp);
-        blueprintGrades.unshift(<li key={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close}>{grade}</li>);
+        if (classes.indexOf('active') >= 0) this.selectedModId = key;
+        blueprintGrades.unshift(<li key={key} tabIndex="0" data-id={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close} onKeyDown={this._keyDown} ref={modItem => this.modItems[key] = modItem}>{grade}</li>);
       }
       if (blueprintGrades) {
+        const thisLen = blueprintGrades.length;
+        if (this.firstModId == null) this.firstModId = blueprintGrades[0].key;
+        this.lastModId = blueprintGrades[thisLen - 1].key;
         blueprints.push(<div key={blueprint.name} className={'select-group cap'}>{translate(blueprint.name)}</div>);
         blueprints.push(<ul key={blueprintName}>{blueprintGrades}</ul>);
       }
@@ -76,6 +97,64 @@ export default class ModificationsMenu extends TranslatedComponent {
     return blueprints;
   }
 
+  /**
+   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
+   * @param  {SyntheticEvent} event Event
+   *
+   */
+  _keyDown(event) {
+    let className = null;
+    let elemId = null;
+    if (event.currentTarget.attributes['class']) className = event.currentTarget.attributes['class'].value;
+    if (event.currentTarget.attributes['data-id']) elemId = event.currentTarget.attributes['data-id'].value;
+
+    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
+      event.stopPropagation();
+      if (elemId != null) {
+        this.modItems[elemId].click();
+      } else {
+        event.currentTarget.click();
+      }
+      return;
+    }
+    if (event.key == 'Tab') {
+      // Shift-Tab
+      if(event.shiftKey) {
+        if (elemId == this.firstModId && elemId != null) {
+          // Initial modification menu
+          event.preventDefault();
+          this.modItems[this.lastModId].focus();
+          return;        
+        } else  if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null && this.lastNeId != null && this.modItems[this.lastNeId] != null) {
+          // shift-tab on first element in modifications menu. set focus to last number editor field if open
+          event.preventDefault();
+          this.modItems[this.lastNeId].lastChild.focus();
+          return;
+        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null) {
+          // shift-tab on button-inline-menu with no number editor
+          event.preventDefault();
+          event.currentTarget.parentElement.lastElementChild.focus();
+        }
+      } else {
+        if (elemId == this.lastModId && elemId != null) {
+          // Initial modification menu
+          event.preventDefault();
+          this.modItems[this.firstModId].focus();
+          return;
+        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.nextSibling == null && event.currentTarget.nodeName != 'TD') {
+          // Experimental menu
+          event.preventDefault();
+          event.currentTarget.parentElement.firstElementChild.focus();
+          return;
+        } else if (event.currentTarget.className == 'cb' && event.currentTarget.parentElement.nextSibling == null) {
+          event.preventDefault();
+          this.modItems[this.firstBPLabel].focus();
+        }
+      }
+    }
+  }
+
+
   /**
    * Render the specials
    * @param  {Object} props   React component properties
@@ -86,15 +165,34 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { m } = props;
     const { language, tooltip, termtip } = context;
     const translate = language.translate;
-
     const specials = [];
     const specialsId = m.missile && Modifications.modules[m.grp]['specials_' + m.missile] ? 'specials_' + m.missile : 'specials';
     if (Modifications.modules[m.grp][specialsId] && Modifications.modules[m.grp][specialsId].length > 0) {
       const close = this._specialSelected.bind(this, null);
-      specials.push(<div style={{ cursor: 'pointer' }} key={ 'none' } onClick={ close }>{translate('PHRASE_NO_SPECIAL')}</div>);
+      specials.push(<div tabIndex="0" style={{ cursor: 'pointer', fontWeight: 'bold' }} className={ 'button-inline-menu warning' } key={ 'none' } data-id={ 'none' } onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems['none'] = modItem}>{translate('PHRASE_NO_SPECIAL')}</div>);
       for (const specialName of Modifications.modules[m.grp][specialsId]) {
+        if (Modifications.specials[specialName].name.search('Legacy') >= 0) {
+          continue;
+        }
+        const classes = cn('button-inline-menu', {
+          active: m.blueprint && m.blueprint.special && m.blueprint.special.edname == specialName
+        });
+        if (classes.indexOf('active') >= 0) this.selectedSpecialId = specialName;
         const close = this._specialSelected.bind(this, specialName);
-        specials.push(<div style={{ cursor: 'pointer' }} key={ specialName } onClick={ close }>{translate(Modifications.specials[specialName].name)}</div>);
+        if (m.blueprint && m.blueprint.name) {
+          let tmp = {};
+          if (m.blueprint.special) {
+            tmp = m.blueprint.special;
+          } else {
+            tmp = undefined;
+          }
+          m.blueprint.special = Modifications.specials[specialName];
+          let specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, specialName);
+          m.blueprint.special = tmp;
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName } onMouseOver={termtip.bind(null, specialTt)} onMouseOut={tooltip.bind(null, null)} onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
+        } else {
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName }onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
+        }
       }
     }
     return specials;
@@ -111,7 +209,8 @@ export default class ModificationsMenu extends TranslatedComponent {
     for (const modName of Modifications.modules[m.grp].modifications) {
       if (!Modifications.modifications[modName].hidden) {
         const key = modName + (m.getModValue(modName) / 100 || 0);
-        modifications.push(<Modification key={ key } ship={ ship } m={ m } name={ modName } value={ m.getModValue(modName) / 100 || 0 } onChange={ onChange }/>);
+        this.lastNeId = modName;
+        modifications.push(<Modification key={ key } ship={ ship } m={ m } name={ modName } value={ m.getModValue(modName) / 100 || 0 } onChange={ onChange } onKeyDown={ this._keyDown } modItems={ this.modItems } handleModChange = {this._handleModChange} />);
       }
     }
     return modifications;
@@ -136,8 +235,9 @@ export default class ModificationsMenu extends TranslatedComponent {
     const blueprint = getBlueprint(fdname, m);
     blueprint.grade = grade;
     ship.setModuleBlueprint(m, blueprint);
+    setPercent(ship, m, 100);
 
-    this.setState({ blueprintMenuOpened: false });
+    this.setState({ blueprintMenuOpened: false, specialMenuOpened: true });
     this.props.onChange();
   }
 
@@ -168,11 +268,15 @@ export default class ModificationsMenu extends TranslatedComponent {
   }
 
   /**
-   * Provide a 'worst' roll within the information we have
+   * Provide a '50%' roll within the information we have
    */
-  _rollWorst() {
+  _rollFifty() {
     const { m, ship } = this.props;
-    setWorst(ship, m);
+    setPercent(ship, m, 50);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
     this.props.onChange();
   }
 
@@ -182,6 +286,10 @@ export default class ModificationsMenu extends TranslatedComponent {
   _rollRandom() {
     const { m, ship } = this.props;
     setRandom(ship, m);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
     this.props.onChange();
   }
 
@@ -190,16 +298,22 @@ export default class ModificationsMenu extends TranslatedComponent {
    */
   _rollBest() {
     const { m, ship } = this.props;
-    setBest(ship, m);
+    setPercent(ship, m, 100);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
     this.props.onChange();
   }
 
   /**
-   * Provide an 'extreme' roll within the information we have
+   * Provide a 'worst' roll within the information we have
    */
-  _rollExtreme() {
+  _rollWorst() {
     const { m, ship } = this.props;
-    setExtreme(ship, m);
+    setPercent(ship, m, 0);
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
     this.props.onChange();
   }
 
@@ -210,10 +324,67 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { m, ship } = this.props;
     ship.clearModifications(m);
     ship.clearModuleBlueprint(m);
-
+    this.selectedModId = null;
+    this.selectedSpecialId = null;
     this.props.onChange();
   }
 
+  /**
+   * set mod did change boolean
+   * @param {boolean} b Boolean to determine if a change has been made to a module
+   */
+  _handleModChange(b) {
+    this.modValDidChange = b;
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * after it first mounts
+   */
+  componentDidMount() {
+    let firstEleCn = this.modItems['modMainDiv'].children.length > 0 ? this.modItems['modMainDiv'].children[0].className : null;
+    if (firstEleCn.indexOf('select-group cap') >= 0) {
+      this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+    } else {
+      this.modItems['modMainDiv'].firstElementChild.focus();
+    }
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * if component updates, unless update is due to value change
+   * in a modification
+   */
+  componentDidUpdate() {
+    if (!this.modValDidChange) {
+      if (this.modItems['modMainDiv'].children.length > 0) {
+        if (this.modItems[this.selectedModId]) {
+          this.modItems[this.selectedModId].focus();
+          return;
+        } else if (this.modItems[this.selectedSpecialId]) {
+          this.modItems[this.selectedSpecialId].focus();
+          return;
+        }
+        let firstEleCn = this.modItems['modMainDiv'].children[0].className;
+        if (firstEleCn.indexOf('button-inline-menu') >= 0) {
+          this.modItems['modMainDiv'].firstElementChild.focus();
+        } else if (firstEleCn.indexOf('select-group cap') >= 0)  {
+          this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+        }
+      }
+    } else {
+      this._handleModChange(false);// Need to reset if component update due to value change
+    }
+  }
+  /**
+   * set focus to the modification menu icon after mod menu is unmounted.
+   */
+  componentWillUnmount() {
+    if (this.props.modButton) {
+      this.props.modButton.focus();
+    }
+  }
+
   /**
    * Render the list
    * @return {React.Component} List
@@ -226,66 +397,82 @@ export default class ModificationsMenu extends TranslatedComponent {
 
     const _toggleBlueprintsMenu = this._toggleBlueprintsMenu;
     const _toggleSpecialsMenu = this._toggleSpecialsMenu;
-    const _rollBest = this._rollBest;
+    const _rollFull = this._rollBest;
-    const _rollExtreme = this._rollExtreme;
     const _rollWorst = this._rollWorst;
+    const _rollFifty = this._rollFifty;
     const _rollRandom = this._rollRandom;
     const _reset = this._reset;
 
     let blueprintLabel;
     let haveBlueprint = false;
     let blueprintTt;
-    if (m.blueprint && m.blueprint.name) {
+    let blueprintCv;
+    // TODO: Fix this to actually find the correct blueprint.
+    if (!m.blueprint || !m.blueprint.name || !m.blueprint.fdname || !Modifications.modules[m.grp].blueprints || !Modifications.modules[m.grp].blueprints[m.blueprint.fdname]) {
+      this.props.ship.clearModuleBlueprint(m);
+      this.props.ship.clearModuleSpecial(m);
+    }
+    if (m.blueprint && m.blueprint.name && Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade]) {
       blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
       haveBlueprint = true;
       blueprintTt  = blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade].engineers, m.grp);
+      blueprintCv = getPercent(m);
     }
 
     let specialLabel;
+    let specialTt;
     if (m.blueprint && m.blueprint.special) {
       specialLabel = m.blueprint.special.name;
+      specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, m.blueprint.special.edname);
     } else {
       specialLabel = translate('PHRASE_SELECT_SPECIAL');
     }
 
     const specials = this._renderSpecials(this.props, this.context);
-
+    /**
+     * pnellesen - 05/28/2018 - added additional checks for specials.length below to ensure menus
+     * display correctly in cases where there are no specials (ex: AFMUs.)
+     */
     const showBlueprintsMenu = blueprintMenuOpened;
     const showSpecial = haveBlueprint && specials.length && !blueprintMenuOpened;
-    const showSpecialsMenu = specialMenuOpened;
+    const showSpecialsMenu = specialMenuOpened && specials.length;
-    const showRolls = haveBlueprint && !blueprintMenuOpened && !specialMenuOpened;
+    const showRolls = haveBlueprint && !blueprintMenuOpened && (!specialMenuOpened || !specials.length);
-    const showReset = !blueprintMenuOpened && !specialMenuOpened;
+    const showReset = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-    const showMods = !blueprintMenuOpened && !specialMenuOpened;
+    const showMods = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-
+    if (haveBlueprint) {
+      this.firstBPLabel = blueprintLabel;
+    } else {
+      this.firstBPLabel = 'selectBP';
+    }
     return (
       <div
           className={cn('select', this.props.className)}
           onClick={(e) => e.stopPropagation() }
           onContextMenu={stopCtxPropagation}
+          ref={modItem => this.modItems['modMainDiv'] = modItem}
       >
-        { showBlueprintsMenu ? '' : haveBlueprint ? 
+        { showBlueprintsMenu | showSpecialsMenu ? '' : haveBlueprint ?
-          <div className={ cn('section-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu}>{blueprintLabel}</div> : 
+          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{blueprintLabel}</div> :
-          <div className={ cn('section-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
+          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
         { showBlueprintsMenu ? this._renderBlueprints(this.props, this.context) : null }
-        { showSpecial ? <div className={ cn('section-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleSpecialsMenu}>{specialLabel}</div> : null }
+        { showSpecial & !showSpecialsMenu ? <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={specialTt ? termtip.bind(null, specialTt) : null} onMouseOut={specialTt ? tooltip.bind(null, null) : null}  onClick={_toggleSpecialsMenu} onKeyDown={ this._keyDown }>{specialLabel}</div> : null }
         { showSpecialsMenu ? specials : null }
-        { showRolls || showReset ?
+        { showReset ? <div tabIndex="0" className={'section-menu button-inline-menu warning'} style={{ cursor: 'pointer' }} onClick={_reset} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </div> : null }
+		{ showRolls ?
+
             <table style={{ width: '100%', backgroundColor: 'transparent' }}>
               <tbody>
           { showRolls ?
                 <tr>
-                  <td> { translate('roll') }: </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: false }) }> { translate('roll') }: </td>
-                  <td style={{ cursor: 'pointer' }} onClick={_rollWorst} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('worst') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===    0 }) } style={{ cursor: 'pointer' }} onClick={_rollWorst} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('0%') } </td>
-                  <td style={{ cursor: 'pointer' }} onClick={_rollBest}onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('best') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===   50 })} style={{ cursor: 'pointer' }} onClick={_rollFifty} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')} onMouseOut={tooltip.bind(null, null)}> { translate('50%') } </td>
-                  <td style={{ cursor: 'pointer' }} onClick={_rollExtreme}onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_EXTREME')} onMouseOut={tooltip.bind(null, null)}> { translate('extreme') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===  100 })} style={{ cursor: 'pointer' }} onClick={_rollFull} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('100%') } </td>
-                  <td style={{ cursor: 'pointer' }} onClick={_rollRandom} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv === null || blueprintCv % 50 != 0 })} style={{ cursor: 'pointer' }} onClick={_rollRandom} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
-                </tr> : null }
-          { showReset ?
-                <tr>
-                  <td colSpan={'5'} style={{ cursor: 'pointer' }} onClick={_reset}onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </td>
                 </tr> : null }
               </tbody>
           </table> : null }
+        { showMods ? <hr /> : null }
         { showMods ?
           <span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
             { this._renderModifications(this.props) }

src/app/components/ShipSummaryTable.jsx

@@ -15,22 +15,34 @@ export default class ShipSummaryTable extends TranslatedComponent {
     cargo: PropTypes.number.isRequired,
     fuel: PropTypes.number.isRequired,
     marker: PropTypes.string.isRequired,
+    pips: PropTypes.object.isRequired
   };
 
+  /**
+   * The ShipSummaryTable constructor
+   * @param {Object} props The props
+   */
+  constructor(props) {
+    super(props);
+    this.didContextChange = this.didContextChange.bind(this);
+    this.state = {
+      shieldColour: 'blue'
+    };
+  }
+
   /**
    * Render the table
    * @return {React.Component} Summary table
    */
   render() {
-    const { ship, cargo, fuel } = this.props;
+    const { ship, cargo, fuel, pips } = this.props;
     let { language, tooltip, termtip } = this.context;
     let translate = language.translate;
     let u = language.units;
     let formats = language.formats;
     let { time, int, round, f1, f2 } = formats;
     let hide = tooltip.bind(null, null);
-
+    const shieldGenerator = ship.findInternalByGroup('sg') || ship.findInternalByGroup('psg');
-    const shieldGenerator = ship.findInternalByGroup('sg');
     const sgClassNames = cn({ warning: shieldGenerator && !ship.shield, muted: !shieldGenerator });
     const sgTooltip = shieldGenerator ? 'TT_SUMMARY_SHIELDS' : 'TT_SUMMARY_SHIELDS_NONFUNCTIONAL';
     const timeToDrain = Calc.timeToDrainWep(ship, 4);
@@ -38,9 +50,20 @@ export default class ShipSummaryTable extends TranslatedComponent {
     const speedTooltip = canThrust ? 'TT_SUMMARY_SPEED' : 'TT_SUMMARY_SPEED_NONFUNCTIONAL';
     const canBoost = ship.canBoost(cargo, ship.fuelCapacity);
     const boostTooltip = canBoost ? 'TT_SUMMARY_BOOST' : canThrust ? 'TT_SUMMARY_BOOST_NONFUNCTIONAL' : 'TT_SUMMARY_SPEED_NONFUNCTIONAL';
-
+    const sgMetrics = Calc.shieldMetrics(ship, pips.sys || 2);
+    const shipBoost = canBoost ?  Calc.calcBoost(ship) : 'No Boost';
+    const armourMetrics = Calc.armourMetrics(ship);
+    let shieldColour = 'blue';
+    if (shieldGenerator && shieldGenerator.m.grp === 'psg') {
+      shieldColour = 'green';
+    } else if (shieldGenerator && shieldGenerator.m.grp === 'bsg') {
+      shieldColour = 'purple';
+    }
+    this.state = {
+      shieldColour
+    };
     return <div id='summary'>
-      <table id='summaryTable'>
+      <table className={'summaryTable'}>
         <thead>
           <tr className='main'>
             <th rowSpan={2} className={ cn({ 'bg-warning-disabled': !canThrust }) }>{translate('speed')}</th>
@@ -53,11 +76,13 @@ export default class ShipSummaryTable extends TranslatedComponent {
             <th rowSpan={2}>{translate('TTD')}</th>
             {/* <th onMouseEnter={termtip.bind(null, 'heat per second')} onMouseLeave={hide} rowSpan={2}>{translate('HPS')}</th> */}
             <th rowSpan={2}>{translate('cargo')}</th>
+            <th rowSpan={2}>{translate('pax')}</th>
             <th rowSpan={2}>{translate('fuel')}</th>
             <th colSpan={3}>{translate('mass')}</th>
             <th onMouseEnter={termtip.bind(null, 'hull hardness', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('hrd')}</th>
             <th rowSpan={2}>{translate('crew')}</th>
             <th onMouseEnter={termtip.bind(null, 'mass lock factor', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('MLF')}</th>
+            <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_BOOST_TIME', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('boost time')}</th>
           </tr>
           <tr>
             <th className='lft'>{translate('max')}</th>
@@ -86,6 +111,7 @@ export default class ShipSummaryTable extends TranslatedComponent {
             <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_TTD', { cap: 0 })} onMouseLeave={hide}>{timeToDrain === Infinity ? '∞' : time(timeToDrain)}</td>
             {/* <td>{f1(ship.totalHps)}</td> */}
             <td>{round(ship.cargoCapacity)}{u.T}</td>
+            <td>{ship.passengerCapacity}</td>
             <td>{round(ship.fuelCapacity)}{u.T}</td>
             <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_HULL_MASS', { cap: 0 })} onMouseLeave={hide}>{ship.hullMass}{u.T}</td>
             <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_MASS', { cap: 0 })} onMouseLeave={hide}>{int(ship.unladenMass)}{u.T}</td>
@@ -93,9 +119,74 @@ export default class ShipSummaryTable extends TranslatedComponent {
             <td>{int(ship.hardness)}</td>
             <td>{ship.crew}</td>
             <td>{ship.masslock}</td>
+            <td>{shipBoost !== 'No Boost' ? formats.time(shipBoost) : 'No Boost'}</td>
           </tr>
         </tbody>
       </table>
+      <table className={'summaryTable'}>
+        <thead className={this.state.shieldColour}>
+          <tr>
+            <th onMouseEnter={termtip.bind(null, 'shield', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('shield')}</th>
+            <th onMouseEnter={termtip.bind(null, 'explres', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('explres')}</th>
+            <th onMouseEnter={termtip.bind(null, 'kinres', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('kinres')}</th>
+            <th onMouseEnter={termtip.bind(null, 'thermres', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('thermres')}</th>
+
+            <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_SHIELDS_SCB', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('absolute')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_SHIELDS_SCB', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('explosive')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_SHIELDS_SCB', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('kinetic')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_SHIELDS_SCB', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('thermal')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECOVER', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recovery')}</th>
+            <th onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECHARGE', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recharge')}</th>
+          </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>{translate(shieldGenerator && shieldGenerator.m.grp || 'No Shield')}</td>
+          <td>{int(ship.shieldExplRes * 100) + '%'}</td>
+          <td>{int(ship.shieldKinRes * 100) + '%'}</td>
+          <td>{int(ship.shieldThermRes * 100) + '%'}</td>
+          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.absolute.total : 0)}</td>
+          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.explosive.total : 0)}</td>
+          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.kinetic.total : 0)}</td>
+          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.thermal.total : 0)}</td>
+          <td>{sgMetrics && sgMetrics.recover ? formats.time(sgMetrics.recover) : 0}</td>
+          <td>{sgMetrics && sgMetrics.recharge ? formats.time(sgMetrics.recharge) : 0}</td>
+        </tr>
+        </tbody>
+        <thead>
+          <tr>
+            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('armour')}</th>
+            <th onMouseEnter={termtip.bind(null, 'explres', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('explres')}</th>
+            <th onMouseEnter={termtip.bind(null, 'kinres', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('kinres')}</th>
+            <th onMouseEnter={termtip.bind(null, 'thermres', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('thermres')}</th>
+
+            <th onMouseEnter={termtip.bind(null, 'PHRASE_EFFECTIVE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('absolute')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'PHRASE_EFFECTIVE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('explosive')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'PHRASE_EFFECTIVE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('kinetic')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'PHRASE_EFFECTIVE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('thermal')} ${translate('HP')}`}</th>
+            <th onMouseEnter={termtip.bind(null, 'TT_MODULE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('raw module armour')}</th>
+            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('internal protection')}</th>
+
+
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{translate(ship && ship.bulkheads && ship.bulkheads.m && ship.bulkheads.m.name || 'No Armour')}</td>
+            <td>{int(ship.hullExplRes * 100) + '%'}</td>
+            <td>{int(ship.hullKinRes * 100) + '%'}</td>
+            <td>{int(ship.hullThermRes * 100) + '%'}</td>
+            <td>{int(armourMetrics.total / armourMetrics.absolute.total)}</td>
+            <td>{int(armourMetrics.total / armourMetrics.explosive.total)}</td>
+            <td>{int(armourMetrics.total / armourMetrics.kinetic.total)}</td>
+            <td>{int(armourMetrics.total / armourMetrics.thermal.total)}</td>
+            <td>{int(armourMetrics.modulearmour)}</td>
+            <td>{int(armourMetrics.moduleprotection * 100) + '%'}</td>
+
+          </tr>
+        </tbody>
+      </table>
+
     </div>;
   }
 }

src/app/components/Slider.jsx

@@ -1,166 +1,386 @@
-import React from 'react';
+import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
-
+
-const MARGIN_LR = 8; // Left/ Right margin
+const MARGIN_LR = 8; // Left/ Right margin
-
+
-/**
+/**
- * Horizontal Slider
+ * Horizontal Slider
- */
+ */
-export default class Slider extends React.Component {
+export default class Slider extends React.Component {
-
+
-  static defaultProps = {
+  static defaultProps = {
-    axis: false,
+    axis: false,
-    min: 0,
+    min: 0,
-    max: 1,
+    max: 1,
-    scale: 1  // SVG render scale
+    scale: 1  // SVG render scale
-  };
+  };
-
+
-  static propTypes = {
+  static propTypes = {
-    axis: PropTypes.bool,
+    axis: PropTypes.bool,
-    axisUnit: PropTypes.string,
+    axisUnit: PropTypes.string,// units (T, M, etc.)
-    max: PropTypes.number,
+    max: PropTypes.number,
-    min: PropTypes.number,
+    min: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,// function which determins percent value
-    onResize: PropTypes.func,
+    onResize: PropTypes.func,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired,// value of slider
-    scale: PropTypes.number
+    scale: PropTypes.number
-  };
+  };
-
+
-  /**
+  /**
-   * Constructor
+   * Constructor
-   * @param  {Object} props   React Component properties
+   * @param  {Object} props   React Component properties
-   */
+   */
-  constructor(props) {
+  constructor(props) {
-    super(props);
+    super(props);
-    this._down = this._down.bind(this);
+    this._down = this._down.bind(this);
-    this._move = this._move.bind(this);
+    this._move = this._move.bind(this);
-    this._up = this._up.bind(this);
+    this._up = this._up.bind(this);
-    this._updatePercent = this._updatePercent.bind(this);
+    this._keyup = this._keyup.bind(this);
-    this._updateDimensions = this._updateDimensions.bind(this);
+    this._keydown = this._keydown.bind(this);
-
+    this._touchstart = this._touchstart.bind(this);
-    this.state = { width: 0 };
+    this._touchend = this._touchend.bind(this);
-  }
+
-
+    this._updatePercent = this._updatePercent.bind(this);
-  /**
+    this._updateDimensions = this._updateDimensions.bind(this);
-   * On Mouse/Touch down handler
+
-   * @param  {SyntheticEvent} event Event
+    this.state = { width: 0 };
-   */
+  }
-  _down(event) {
+
-    let rect = event.currentTarget.getBoundingClientRect();
+  /**
-    this.left = rect.left;
+   * On Mouse/Touch down handler
-    this.width = rect.width;
+   * @param  {SyntheticEvent} event Event
-    this._move(event);
+   */
-  }
+  _down(event) {
-
+    let rect = event.currentTarget.getBoundingClientRect();
-  /**
+    this.left = rect.left;
-   * Update the slider percentage on move
+    this.width = rect.width;
-   * @param  {SyntheticEvent} event Event
+    this._move(event);
-   */
+    this.touchStartTimer = setTimeout(() => this.sliderInputBox._setDisplay('block'), 1500);
-  _move(event) {
+  }
-    if(this.width !== null && this.left != null) {
+
-      let clientX = event.touches ? event.touches[0].clientX : event.clientX;
+  /**
-      event.preventDefault();
+   * Update the slider percentage on move
-      this._updatePercent(clientX - this.left, this.width);
+   * @param  {SyntheticEvent} event Event
-    }
+   */
-  }
+  _move(event) {
-
+    if(this.width !== null && this.left != null) {
-  /**
+      let clientX = event.touches ? event.touches[0].clientX : event.clientX;
-   * On Mouse/Touch up handler
+      event.preventDefault();
-   * @param  {Event} event  DOM Event
+      this._updatePercent(clientX - this.left, this.width);
-   */
+    }
-  _up(event) {
+  }
-    event.preventDefault();
+
-    this.left = null;
+  /**
-    this.width = null;
+   * On Mouse/Touch up handler
-  }
+   * @param  {Event} event  DOM Event
-
+   */
-  /**
+  _up(event) {
-   * Determine if the user is still dragging
+    this.sliderInputBox.sliderVal.focus();
-   * @param  {SyntheticEvent} event Event
+    clearTimeout(this.touchStartTimer);
-   */
+    event.preventDefault();
-  _enter(event) {
+    this.left = null;
-    if(event.buttons !== 1) {
+    this.width = null;
-      this.left = null;
+  }
-      this.width = null;
+
-    }
+
-  }
+  /**
-
+   * Key up handler for keyboard.
-  /**
+   * display the number field then set focus to it
-   * Update the slider percentage
+   * when "Enter" key is pressed
-   * @param  {number} pos   Slider drag position
+   * @param {Event} event Keyboard event
-   * @param  {number} width Slider width
+   */
-   * @param  {Event} event  DOM Event
+  _keyup(event) {
-   */
+    switch (event.key) {
-  _updatePercent(pos, width) {
+      case 'Enter':
-    this.props.onChange(Math.min(Math.max(pos / width, 0), 1));
+        event.preventDefault();
-  }
+        this.sliderInputBox._setDisplay('block');
-
+        return;
-  /**
+      default:
-   * Update dimenions from rendered DOM
+        return;
-   */
+    }
-  _updateDimensions() {
+  }
-    this.setState({
+  /**
-      outerWidth: this.node.getBoundingClientRect().width
+   * Key down handler
-    });
+   * increment slider position by +/- 1 when right/left arrow key is pressed or held
-  }
+   * @param {Event} event Keyboard even
-
+   */
-  /**
+  _keydown(event) {
-   * Add listeners when about to mount
+    let newVal = this.props.percent * this.props.max;
-   */
+    switch (event.key) {
-  componentWillMount() {
+      case 'ArrowRight':
-    if (this.props.onResize) {
+        newVal += 1;
-      this.resizeListener = this.props.onResize(this._updateDimensions);
+        if (newVal <= this.props.max) this.props.onChange(newVal / this.props.max);
-    }
+        return;
-  }
+      case 'ArrowLeft':
-
+        newVal -= 1;
-  /**
+        if (newVal >= 0) this.props.onChange(newVal / this.props.max);
-   * Trigger DOM updates on mount
+        return;
-   */
+      default:
-  componentDidMount() {
+        return;
-    this._updateDimensions();
+    }
-  }
+  }
-
+
-  /**
+  /**
-   * Remove listeners on unmount
+   * Touch start handler
-   */
+   * @param  {Event} event  DOM Event
-  componentWillUnmount() {
+   * 
-    if (this.resizeListener) {
+   */
-      this.resizeListener.remove();
+  _touchstart(event) {
-    }
+    this.touchStartTimer = setTimeout(() => this.sliderInputBox._setDisplay('block'), 1500);
-  }
+  }
-
+  
-  /**
+  /**
-   * Render the slider
+   * Touch end handler
-   * @return {React.Component} The slider
+   * @param  {Event} event  DOM Event
-   */
+   * 
-  render() {
+   */
-    let outerWidth = this.state.outerWidth;
+  _touchend(event) {
-    let { axis, axisUnit, min, max, scale } = this.props;
+    this.sliderInputBox.sliderVal.focus();
-
+    clearTimeout(this.touchStartTimer);
-    let style = {
+  }
-      width: '100%',
+
-      height: axis ? '2.5em' : '1.5em',
+  /**
-      boxSizing: 'border-box'
+   * Determine if the user is still dragging
-    };
+   * @param  {SyntheticEvent} event Event
-
+   */
-    if (!outerWidth) {
+  _enter(event) {
-      return <svg style={style} ref={node => this.node = node} />;
+    if(event.buttons !== 1) {
-    }
+      this.left = null;
-
+      this.width = null;
-    let margin = MARGIN_LR * scale;
+    }
-    let width = outerWidth - (margin * 2);
+  }
-    let pctPos = width * this.props.percent;
+
-
+  /**
-    return <svg onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onTouchEnd={this._up} style={style} ref={node => this.node = node}>
+   * Update the slider percentage
-      <rect className='primary' style={{ opacity: 0.3 }} x={margin} y='0.25em' rx='0.3em' ry='0.3em' width={width} height='0.7em' />
+   * @param  {number} pos   Slider drag position
-      <rect className='primary-disabled' x={margin} y='0.45em' rx='0.15em' ry='0.15em' width={pctPos} height='0.3em' />
+   * @param  {number} width Slider width
-      <circle className='primary' r={margin} cy='0.6em' cx={pctPos + margin} />
+   * @param  {Event} event  DOM Event
-      <rect x={margin} width={width} height='100%' fillOpacity='0' style={{ cursor: 'col-resize' }} onMouseDown={this._down} onTouchMove={this._move} onTouchStart={this._down} />
+   */
-      {axis && <g style={{ fontSize: '.7em' }}>
+  _updatePercent(pos, width) {
-        <text className='primary-disabled' y='3em' x={margin} style={{ textAnchor: 'middle' }}>{min + axisUnit}</text>
+    this.props.onChange(Math.min(Math.max(pos / width, 0), 1));
-        <text className='primary-disabled' y='3em' x='50%' style={{ textAnchor: 'middle' }}>{(min + max / 2) + axisUnit}</text>
+  }
-        <text className='primary-disabled' y='3em' x='100%' style={{ textAnchor: 'end' }}>{max + axisUnit}</text>
+
-      </g>}
+  /**
-    </svg>;
+   * Update dimenions from rendered DOM
-  }
+   */
-}
+  _updateDimensions() {
+    this.setState({
+      outerWidth: this.node.getBoundingClientRect().width
+    });
+  }
+
+  /**
+   * Add listeners when about to mount
+   */
+  componentWillMount() {
+    if (this.props.onResize) {
+      this.resizeListener = this.props.onResize(this._updateDimensions);
+    }
+  }
+
+  /**
+   * Trigger DOM updates on mount
+   */
+  componentDidMount() {
+    this._updateDimensions();
+  }
+
+  /**
+   * Remove listeners on unmount
+   */
+  componentWillUnmount() {
+    if (this.resizeListener) {
+      this.resizeListener.remove();
+    }
+  }
+
+  /**
+   * Render the slider
+   * @return {React.Component} The slider
+   */
+  render() {
+    let outerWidth = this.state.outerWidth;
+    let { axis, axisUnit, min, max, scale } = this.props;
+    let style = {
+      width: '100%',
+      height: axis ? '2.5em' : '1.5em',
+      boxSizing: 'border-box'
+    };
+    if (!outerWidth) {
+      return <svg style={style} ref={node => this.node = node} />;
+    }
+    let margin = MARGIN_LR * scale;
+    let width = outerWidth - (margin * 2);
+    let pctPos = width * this.props.percent;
+    return <div><svg 
+      onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onKeyUp={this._keyup} onKeyDown={this._keydown} style={style} ref={node => this.node = node} tabIndex="0">
+      <rect className='primary' style={{ opacity: 0.3 }} x={margin} y='0.25em' rx='0.3em' ry='0.3em' width={width} height='0.7em' />
+      <rect className='primary-disabled' x={margin} y='0.45em' rx='0.15em' ry='0.15em' width={pctPos} height='0.3em' />
+      <circle className='primary' r={margin} cy='0.6em' cx={pctPos + margin} />
+      <rect x={margin} width={width} height='100%' fillOpacity='0' style={{ cursor: 'col-resize' }} onMouseDown={this._down} onTouchMove={this._move} onTouchStart={this._down} onTouchEnd={this._touchend} />
+      {axis && <g style={{ fontSize: '.7em' }}>
+        <text className='primary-disabled' y='3em' x={margin} style={{ textAnchor: 'middle' }}>{min + axisUnit}</text>
+        <text className='primary-disabled' y='3em' x='50%' style={{ textAnchor: 'middle' }}>{(min + max / 2) + axisUnit}</text>
+        <text className='primary-disabled' y='3em' x='100%' style={{ textAnchor: 'end' }}>{max + axisUnit}</text>
+      </g>}
+    </svg>
+    <TextInputBox ref={(tb) => this.sliderInputBox = tb}
+      onChange={this.props.onChange}
+      percent={this.props.percent}
+      axisUnit={this.props.axisUnit}
+      scale={this.props.scale}
+      max={this.props.max}
+    />
+   </div>;
+  }
+}
+/**
+ * New component to add keyboard support for sliders - works on all devices (desktop, iOS, Android)
+ **/
+class TextInputBox extends React.Component {
+  static propTypes = {
+    axisUnit: PropTypes.string,// units (T, M, etc.)
+    max: PropTypes.number,
+    onChange: PropTypes.func.isRequired,// function which determins percent value
+    percent: PropTypes.number.isRequired,// value of slider
+    scale: PropTypes.number
+  };
+  /**
+   * Determine if the user is still dragging
+   * @param  {Object} props React Component properties
+   */
+  constructor(props) {
+    super(props);
+    this._handleFocus = this._handleFocus.bind(this);
+    this._handleBlur = this._handleBlur.bind(this);
+    this._handleChange = this._handleChange.bind(this);
+    this._keyup = this._keyup.bind(this);
+    this.state = this._getInitialState();
+  }
+  /**
+   * Update input value if slider changes will change props/state
+   * @param  {Object} nextProps React Component properites
+   * @param  {Object} nextState React Component state values
+   */
+  componentWillReceiveProps(nextProps, nextState) {
+    let nextValue = nextProps.percent * nextProps.max;
+    // See https://stackoverflow.com/questions/32414308/updating-state-on-props-change-in-react-form
+    if (nextValue !== this.state.inputValue && nextValue <= nextProps.max) {
+      this.setState({ inputValue: nextValue });
+    }
+  }
+    /**
+   * Update slider textbox visibility/values if changes are made to slider
+   * @param  {Object} prevProps React Component properites
+   * @param  {Object} prevState React Component state values
+   */
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.divStyle.display == 'none' && this.state.divStyle.display == 'block') {
+      this.enterTimer = setTimeout(() => this.sliderVal.focus(), 10);  
+    }
+    if (prevProps.max !== this.props.max && this.state.inputValue > this.props.max) {
+      // they chose a different module
+      this.setState({ inputValue: this.props.max });
+    }
+    if (this.state.inputValue != prevState.inputValue && prevProps.max == this.props.max) {
+      this.props.onChange(this.state.inputValue / this.props.max);
+    }
+  }
+  /**
+   * Set initial state for the textbox. 
+   * We may want to rethink this to 
+   * try and make it a stateless component
+   * @returns {object} React state object with initial values set
+   */
+  _getInitialState() {
+    return {
+      divStyle: { display:'none' }, 
+      inputStyle: { width:'4em' },
+      labelStyle: { marginLeft: '.1em' },
+      maxLength:5,
+      size:5,
+      min:0,
+      tabIndex:-1,
+      type:'number',
+      readOnly: true,
+      inputValue: this.props.percent * this.props.max
+    };
+  }
+  /**
+   * 
+   * @param {string} val block or none
+   */
+  _setDisplay(val) {
+    this.setState({
+      divStyle: { display:val }
+    });
+  }
+  /**
+   * Update the input value
+   * when textbox gets focus
+   */
+  _handleFocus() {
+    this.setState({
+      inputValue:this._getValue()
+    });
+  }
+  /**
+   * Update inputValue when textbox loses focus
+   */
+  _handleBlur() {
+    this._setDisplay('none');
+    if (this.state.inputValue !== '') {
+      this.props.onChange(this.state.inputValue / this.props.max);
+    } else {
+      this.setState({
+        inputValue: this.props.percent * this.props.max
+      });
+    }
+  }
+  /**
+   * Get the value in the text box
+   * @returns {number} inputValue Value of the input box 
+   */
+  _getValue() {
+    return this.state.inputValue;
+  }
+  /**
+   * Update and set limits on input box
+   * values depending on what user
+   * has selected
+   * 
+   * @param {SyntheticEvent} event ReactJs onChange event
+   */
+  _handleChange(event) {
+    if (event.target.value < 0) {
+      this.setState({ inputValue: 0 });
+    } else if (event.target.value <= this.props.max)  {
+      this.setState({ inputValue: event.target.value });
+    } else {
+      this.setState({ inputValue: this.props.max });
+    }
+  }
+  /**
+   * Key up handler for input field.
+   * If user hits Enter key, blur/close the input field
+   * @param {Event} event Keyboard event
+   */
+  _keyup(event) {
+    switch (event.key) {
+      case 'Enter':
+        this.sliderVal.blur();
+        return;
+      default:
+        return;
+    }
+  }
+  /**
+   * Get the value in the text box
+   * @return {React.Component} Text Input component for Slider
+   */
+  render() {
+    let {  axisUnit, onChange, percent, scale } = this.props;
+    return <div style={this.state.divStyle}><input style={this.state.inputStyle} value={this._getValue()} min={this.state.min} max={this.props.max} onChange={this._handleChange} onKeyUp={this._keyup} tabIndex={this.state.tabIndex} maxLength={this.state.maxLength} size={this.state.size} onBlur={() => {this._handleBlur();}} onFocus={() => {this._handleFocus();}} type={this.state.type} ref={(ip) => this.sliderVal = ip}/><text className="primary upp" style={this.state.labelStyle}>{this.props.axisUnit}</text></div>;
+  }
+}
+

src/app/components/Slot.jsx

@@ -40,6 +40,8 @@ export default class Slot extends TranslatedComponent {
 
     this._contextMenu = wrapCtxMenu(this._contextMenu.bind(this));
     this._getMaxClassLabel = this._getMaxClassLabel.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this.slotDiv = null;
   }
 
   // Must be implemented by subclasses:
@@ -73,6 +75,22 @@ export default class Slot extends TranslatedComponent {
     this.props.onSelect(null,null);
   }
 
+  /** Key Down handler
+   *  @param {SyntheticEvent} event Event
+   *  ToDo: see if this can be moved up
+   *  we do more or less the same thing
+   *  in every section when Enter key is pressed
+   *  on a focusable item
+   *
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      if(event.target.className == 'r') {
+        this._toggleModifications();
+      }
+      this.props.onOpen(event); 
+    }
+  }
   /**
    * Render the slot
    * @return {React.Component} The slot
@@ -104,6 +122,7 @@ export default class Slot extends TranslatedComponent {
           ship={ship}
           m={m}
           marker={modificationsMarker}
+          modButton = {this.modButton}
         />;
       } else {
         menu = <AvailableModulesMenu
@@ -114,6 +133,7 @@ export default class Slot extends TranslatedComponent {
           onSelect={onSelect}
           warning={warning}
           diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
         />;
       }
     }
@@ -121,7 +141,7 @@ export default class Slot extends TranslatedComponent {
     // TODO: implement touch dragging
 
     return (
-      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onContextMenu={this._contextMenu} onDragOver={dragOver}>
+      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onKeyDown={this._keyDown} onContextMenu={this._contextMenu} onDragOver={dragOver} tabIndex="0" ref={slotDiv => this.slotDiv = slotDiv}>
         <div className='details-container'>
           <div className='sz'>{this._getMaxClassLabel(translate)}</div>
             {slotDetails}
@@ -131,6 +151,7 @@ export default class Slot extends TranslatedComponent {
     );
   }
 
+
   /**
    * Toggle the modifications flag when selecting the modifications icon
    */

src/app/components/SlotSection.jsx

@@ -18,7 +18,8 @@ export default class SlotSection extends TranslatedComponent {
     onCargoChange: PropTypes.func.isRequired,
     onFuelChange: PropTypes.func.isRequired,
     code: PropTypes.string.isRequired,
-    togglePwr: PropTypes.func
+    togglePwr: PropTypes.func,
+    sectionMenuRefs: PropTypes.object
   };
 
   /**
@@ -32,7 +33,10 @@ export default class SlotSection extends TranslatedComponent {
     super(props);
     this.sectionId = sectionId;
     this.sectionName = sectionName;
-
+    this.ssHeadRef = null;
+    
+    this.sectionRefArr = this.props.sectionMenuRefs[this.sectionId] = [];
+    this.sectionRefArr['selectedRef'] = null;
     this._getSlots = this._getSlots.bind(this);
     this._selectModule = this._selectModule.bind(this);
     this._getSectionMenu = this._getSectionMenu.bind(this);
@@ -40,6 +44,8 @@ export default class SlotSection extends TranslatedComponent {
     this._drop = this._drop.bind(this);
     this._dragOverNone = this._dragOverNone.bind(this);
     this._close = this._close.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this._handleSectionFocus = this._handleSectionFocus.bind(this);
     this.state = {};
   }
 
@@ -47,7 +53,59 @@ export default class SlotSection extends TranslatedComponent {
   //  _getSlots()
   //  _getSectionMenu()
   //  _contextMenu()
+  //  componentDidUpdate(prevProps)
 
+  /** 
+   * TODO: May either need to send the function to be triggered when Enter key is pressed, or else 
+   * may need a separate keyDown handler for each subclass (StandardSlotSection, HardpointSlotSection, etc.)
+   * ex: _keyDown(_keyDownfn, event)
+   * 
+   * @param {SyntheticEvent} event KeyDown event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      event.stopPropagation();
+      if (event.currentTarget.nodeName === 'H1') {
+        this._openMenu(this.sectionName, event);
+      } else {
+        event.currentTarget.click();
+      }
+      return;
+    }
+    if (event.key == 'Tab') {
+      if (event.shiftKey) {
+        if ((event.currentTarget === this.sectionRefArr[this.firstRefId]) && this.sectionRefArr[this.lastRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.lastRefId].focus();
+        }
+      } else {
+        if ((event.currentTarget === this.sectionRefArr[this.lastRefId]) &&  this.sectionRefArr[this.firstRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.firstRefId].focus();
+        }
+      }
+    }
+  } 
+
+  /**
+   * Set focus on appropriate Slot Section Menu element
+   * @param {Object} focusPrevProps prevProps for componentDidUpdate() from ...SlotSection.jsx 
+   * @param {String} firstRef id of the first ref in ...SlotSection.jsx
+   * @param {String} lastRef id of the last ref in ...SlotSection.jsx
+   * 
+   */
+  _handleSectionFocus(focusPrevProps, firstRef, lastRef) {
+    if (this.selectedRefId !== null && this.sectionRefArr[this.selectedRefId]) {
+      // set focus on the previously selected option for the currently open section menu
+      this.sectionRefArr[this.selectedRefId].focus();
+    } else if (this.sectionRefArr[firstRef] && this.sectionRefArr[firstRef] != null) {
+      // set focus on the first option in the currently open section menu if none have been selected previously
+      this.sectionRefArr[firstRef].focus();
+    }  else if (this.props.currentMenu == null && focusPrevProps.currentMenu == this.sectionName && this.sectionRefArr['ssHeadRef']) {
+      // set focus on the section menu header when section menu is closed
+      this.sectionRefArr['ssHeadRef'].focus();
+    }
+  }
   /**
    * Open a menu
    * @param  {string} menu    Menu name
@@ -225,7 +283,7 @@ export default class SlotSection extends TranslatedComponent {
     return (
       <div id={this.sectionId} className={'group'}  onDragLeave={this._dragOverNone}>
         <div className={cn('section-menu', { selected: sectionMenuOpened })} onClick={open} onContextMenu={ctx}>
-          <h1>{translate(this.sectionName)} <Equalizer/></h1>
+          <h1 tabIndex="0" onKeyDown={this._keyDown} ref={ssHead => this.sectionRefArr['ssHeadRef'] = ssHead}>{translate(this.sectionName)} <Equalizer/></h1>
           {sectionMenuOpened ? this._getSectionMenu(translate, this.props.ship) : null }
         </div>
         {this._getSlots()}

src/app/components/StandardSlot.jsx

@@ -35,6 +35,21 @@ export default class StandardSlot extends TranslatedComponent {
   constructor(props) {
     super(props);
     this._modificationsSelected = false;
+    this._keyDown = this._keyDown.bind(this);
+    this.modButton = null;
+    this.slotDiv = null;
+  }
+  /**
+   * Handle Enter key
+   * @param {SyntheticEvent} event KeyDown event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      if(event.target.className == 'r') {
+        this._toggleModifications();
+      }
+      this.props.onOpen(event);
+    }
   }
 
   /**
@@ -48,7 +63,10 @@ export default class StandardSlot extends TranslatedComponent {
     let m = slot.m;
     let classRating = m.class + m.rating;
     let menu;
-    let validMods = m == null ? [] : (Modifications.modules[m.grp].modifications || []);
+    let validMods = m == null || !Modifications.modules[m.grp] ? [] : (Modifications.modules[m.grp].modifications || []);
+    if (m && m.name && m.name === 'Guardian Hybrid Power Plant') {
+      validMods = [];
+    }
     let showModuleResistances = Persist.showModuleResistances();
     let mass = m.getMass() || m.cargo || m.fuel || 0;
 
@@ -56,6 +74,9 @@ export default class StandardSlot extends TranslatedComponent {
     let modTT = translate('modified');
     if (m && m.blueprint && m.blueprint.name) {
       modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+      if (m.blueprint.special && m.blueprint.special.id >= 0) {
+        modTT += ', ' + translate(m.blueprint.special.name);
+      }
       modTT = (
           <div>
             <div>{modTT}</div>
@@ -79,6 +100,7 @@ export default class StandardSlot extends TranslatedComponent {
           ship={ship}
           m={m}
           marker={modificationsMarker}
+          modButton = {this.modButton}
         />;
       } else {
         menu = <AvailableModulesMenu
@@ -89,14 +111,15 @@ export default class StandardSlot extends TranslatedComponent {
           onSelect={onSelect}
           warning={warning}
           diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
         />;
       }
     }
 
     return (
-      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onContextMenu={stopCtxPropagation}>
+      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onKeyDown={this._keyDown} onContextMenu={stopCtxPropagation} tabIndex="0" ref={ slotDiv => this.slotDiv = slotDiv }>
         <div className={cn('details-container', { warning: warning && warning(slot.m), disabled: m.grp !== 'bh' && !slot.enabled })}>
-          <div className={'sz'}>{slot.maxClass}</div>
+          <div className={'sz'}>{m.grp == 'bh' ? m.name.charAt(0) : slot.maxClass}</div>
           <div>
             <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
             <div className={'r'}>{formats.round(mass)}{units.T}</div>
@@ -118,7 +141,7 @@ export default class StandardSlot extends TranslatedComponent {
                 { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
                 { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
                 { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
-	        { validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+	        { validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button  tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
             </div>
           </div>
         </div>

src/app/components/StandardSlotSection.jsx

@@ -20,12 +20,23 @@ export default class StandardSlotSection extends SlotSection {
     super(props, context, 'standard', 'core internal');
     this._optimizeStandard = this._optimizeStandard.bind(this);
     this._selectBulkhead = this._selectBulkhead.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'maxjump';
+    this.lastRefId = 'racer';
+  }
+  /**
+   * Handle focus if the component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Use the lightest/optimal available standard modules
    */
   _optimizeStandard() {
+    this.selectedRefId = 'maxjump';
     this.props.ship.useLightestStandard();
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -39,6 +50,8 @@ export default class StandardSlotSection extends SlotSection {
    * @param {integer} bulkheadIndex Bulkhead to use see Constants.BulkheadNames
    */
   _multiPurpose(shielded, bulkheadIndex) {
+    this.selectedRefId = 'multipurpose';
+    if (bulkheadIndex === 2) this.selectedRefId = 'combat';
     ShipRoles.multiPurpose(this.props.ship, shielded, bulkheadIndex);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -51,6 +64,7 @@ export default class StandardSlotSection extends SlotSection {
    * @param  {Boolean} shielded True if shield generator should be included
    */
   _optimizeCargo(shielded) {
+    this.selectedRefId = 'trader';
     ShipRoles.trader(this.props.ship, shielded);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -63,6 +77,7 @@ export default class StandardSlotSection extends SlotSection {
    * @param  {Boolean} shielded True if shield generator should be included
    */
   _optimizeMiner(shielded) {
+    this.selectedRefId = 'miner';
     ShipRoles.miner(this.props.ship, shielded);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -75,6 +90,8 @@ export default class StandardSlotSection extends SlotSection {
    * @param  {Boolean} planetary True if Planetary Vehicle Hangar (PVH) should be included
    */
   _optimizeExplorer(planetary) {
+    this.selectedRefId = 'explorer';
+    if (planetary) this.selectedRefId = 'planetary';
     ShipRoles.explorer(this.props.ship, planetary);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -86,6 +103,7 @@ export default class StandardSlotSection extends SlotSection {
    * Racer role
    */
   _optimizeRacer() {
+    this.selectedRefId = 'racer';
     ShipRoles.racer(this.props.ship);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -229,19 +247,17 @@ export default class StandardSlotSection extends SlotSection {
     let planetaryDisabled = this.props.ship.internal.length < 4;
     return <div className='select' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._optimizeStandard}>{translate('Maximize Jump Range')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeStandard} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['maxjump'] = smRef}>{translate('Maximize Jump Range')}</li>
       </ul>
       <div className='select-group cap'>{translate('roles')}</div>
       <ul>
-        <li className='lc' onClick={this._multiPurpose.bind(this, false, 0)}>{translate('Multi-purpose')}</li>
+        <li className='lc' tabIndex="0" onClick={this._multiPurpose.bind(this, false, 0)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['multipurpose'] = smRef}>{translate('Multi-purpose')}</li>
-        <li className='lc' onClick={this._multiPurpose.bind(this, true, 2)}>{translate('Combat')}</li>
+        <li className='lc' tabIndex="0" onClick={this._multiPurpose.bind(this, true, 2)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['combat'] = smRef}>{translate('Combat')}</li>
-        <li className='lc' onClick={this._optimizeCargo.bind(this, false)}>{translate('Trader')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeCargo.bind(this, true)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['trader'] = smRef}>{translate('Trader')}</li>
-        <li className='lc' onClick={this._optimizeCargo.bind(this, true)}>{translate('Shielded Trader')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeExplorer.bind(this, false)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['explorer'] = smRef}>{translate('Explorer')}</li>
-        <li className='lc' onClick={this._optimizeExplorer.bind(this, false)}>{translate('Explorer')}</li>
+        <li className={cn('lc', { disabled:  planetaryDisabled })} tabIndex={planetaryDisabled ? '' : '0'} onClick={!planetaryDisabled && this._optimizeExplorer.bind(this, true)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['planetary'] = smRef}>{translate('Planetary Explorer')}</li>
-        <li className={cn('lc', { disabled:  planetaryDisabled })} onClick={!planetaryDisabled && this._optimizeExplorer.bind(this, true)}>{translate('Planetary Explorer')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeMiner.bind(this, true)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['miner'] = smRef}>{translate('Miner')}</li>
-        <li className='lc' onClick={this._optimizeMiner.bind(this, false)}>{translate('Miner')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeRacer.bind(this)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['racer'] = smRef}>{translate('Racer')}</li>
-        <li className='lc' onClick={this._optimizeMiner.bind(this, true)}>{translate('Shielded Miner')}</li>
-        <li className='lc' onClick={this._optimizeRacer.bind(this)}>{translate('Racer')}</li>
       </ul>
     </div>;
   }

src/app/components/SvgIcons.jsx

@@ -228,6 +228,72 @@ export class LinkIcon extends SvgIcon {
   }
 }
 
+/**
+ * Material
+ */
+export class MatIcon extends SvgIcon {
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return<g xmlns="http://www.w3.org/2000/svg">
+      <path fill="#FF7100" d="M 24.86,4.18
+           C 24.86,4.18 17.17,7.82 17.17,7.82
+             17.17,7.82 15.35,14.55 15.35,14.55
+             15.35,14.55 24.70,9.75 24.70,9.75
+             24.70,9.75 24.86,4.18 24.86,4.18 Z
+           M 32.21,17.45
+           C 32.21,17.45 26.41,11.18 26.41,11.18
+             26.41,11.18 19.51,11.51 19.51,11.51
+             19.51,11.51 26.92,19.01 26.92,19.01
+             26.92,19.01 32.21,17.45 32.21,17.45 Z
+           M 21.99,28.62
+           C 21.99,28.62 26.10,21.10 26.10,21.10
+             26.10,21.10 23.66,14.57 23.66,14.57
+             23.66,14.57 18.89,24.01 18.89,24.01
+             18.89,24.01 21.99,28.62 21.99,28.62 Z
+           M 8.33,22.24
+           C 8.33,22.24 16.67,23.87 16.67,23.87
+             16.67,23.87 22.06,19.51 22.06,19.51
+             22.06,19.51 11.70,17.84 11.70,17.84
+             11.70,17.84 8.33,22.24 8.33,22.24 Z
+           M 10.11,7.14
+           C 10.11,7.14 11.15,15.66 11.15,15.66
+             11.15,15.66 16.92,19.49 16.92,19.49
+             16.92,19.49 15.29,9.02 15.29,9.02
+             15.29,9.02 10.11,7.14 10.11,7.14 Z
+           M 27.69,2.67
+           C 27.69,2.67 35.89,16.00 35.89,16.00
+             35.89,16.00 27.69,29.33 27.69,29.33
+             27.69,29.33 11.31,29.33 11.31,29.33
+             11.31,29.33 3.11,16.00 3.11,16.00
+             3.11,16.00 11.31,2.67 11.31,2.67
+             11.31,2.67 27.67,2.67 27.67,2.67M 29.16,0.00
+           C 29.16,0.00 27.69,0.00 27.69,0.00
+             27.69,0.00 11.31,0.00 11.31,0.00
+             11.31,0.00 9.84,0.00 9.84,0.00
+             9.84,0.00 9.06,1.25 9.06,1.25
+             9.06,1.25 0.87,14.57 0.87,14.57
+             0.87,14.57 0.00,15.98 0.00,15.98
+             0.00,15.98 0.87,17.39 0.87,17.39
+             0.87,17.39 9.06,30.73 9.06,30.73
+             9.06,30.73 9.84,32.00 9.84,32.00
+             9.84,32.00 11.31,32.00 11.31,32.00
+             11.31,32.00 27.69,32.00 27.69,32.00
+             27.69,32.00 29.16,32.00 29.16,32.00
+             29.16,32.00 29.94,30.73 29.94,30.73
+             29.94,30.73 38.13,17.39 38.13,17.39
+             38.13,17.39 39.00,15.98 39.00,15.98
+             39.00,15.98 38.13,14.57 38.13,14.57
+             38.13,14.57 29.94,1.25 29.94,1.25
+             29.94,1.25 29.16,0.00 29.16,0.00
+             29.16,0.00 29.16,0.00 29.16,0.00 Z" />
+    </g>;
+  }
+}
+
+
 /**
  * Shopping icon (dollar sign)
  */

src/app/components/UtilitySlotSection.jsx

@@ -17,12 +17,23 @@ export default class UtilitySlotSection extends SlotSection {
   constructor(props, context) {
     super(props, context, 'utility', 'utility mounts');
     this._empty = this._empty.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = 'po';
+  }
+  /**
+   * Handle focus if the component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Empty all utility slots and close the menu
    */
   _empty() {
+    this.selectedRefId = this.firstRefId;
     this.props.ship.emptyUtility();
     this.props.onChange();
     this._close();
@@ -36,6 +47,9 @@ export default class UtilitySlotSection extends SlotSection {
    * @param  {Synthetic} event  Event
    */
   _use(group, rating, name, event) {
+    this.selectedRefId = group;
+    if (rating !== null) this.selectedRefId += '-' + rating;
+
     this.props.ship.useUtility(group, rating, name, event.getModifierState('Alt'));
     this.props.onChange();
     this._close();
@@ -94,28 +108,28 @@ export default class UtilitySlotSection extends SlotSection {
 
     return <div className='select' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
+        <li className='lc' tabIndex='0' onClick={this._empty} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['emptyall'] = smRef}>{translate('empty all')}</li>
         <li className='optional-hide' style={{ textAlign: 'center', marginTop: '1em' }}>{translate('PHRASE_ALT_ALL')}</li>
       </ul>
       <div className='select-group cap'>{translate('sb')}</div>
       <ul>
-        <li className='c' onClick={_use.bind(this, 'sb', 'A', null)}>A</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'A', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-A'] = smRef}>A</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'B', null)}>B</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'B', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-B'] = smRef}>B</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'C', null)}>C</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'C', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-C'] = smRef}>C</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'D', null)}>D</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'D', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-D'] = smRef}>D</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'E', null)}>E</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'E', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-E'] = smRef}>E</li>
       </ul>
       <div className='select-group cap'>{translate('hs')}</div>
       <ul>
-        <li className='lc' onClick={_use.bind(this, 'hs', null, 'Heat Sink Launcher')}>{translate('Heat Sink Launcher')}</li>
+        <li className='lc' tabIndex='0' onClick={_use.bind(this, 'hs', null, 'Heat Sink Launcher')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['hs'] = smRef}>{translate('Heat Sink Launcher')}</li>
       </ul>
       <div className='select-group cap'>{translate('ch')}</div>
       <ul>
-        <li className='lc' onClick={_use.bind(this, 'ch', null, 'Chaff Launcher')}>{translate('Chaff Launcher')}</li>
+        <li className='lc' tabIndex='0' onClick={_use.bind(this, 'ch', null, 'Chaff Launcher')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ch'] = smRef}>{translate('Chaff Launcher')}</li>
       </ul>
       <div className='select-group cap'>{translate('po')}</div>
       <ul>
-        <li className='lc' onClick={_use.bind(this, 'po', null, 'Point Defence')}>{translate('Point Defence')}</li>
+        <li className='lc' tabIndex='0' onClick={_use.bind(this, 'po', null, 'Point Defence')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['po'] = smRef}>{translate('Point Defence')}</li>
       </ul>
     </div>;
   }

src/app/i18n/Language.jsx

@@ -6,6 +6,7 @@ import * as FR from './fr';
 import * as IT from './it';
 import * as RU from './ru';
 import * as PL from './pl';
+import * as PT from './pt';
 import * as d3 from 'd3';
 
 let fallbackTerms = EN.terms;
@@ -25,6 +26,7 @@ export function getLanguage(langCode) {
     case 'it': lang = IT; break;
     case 'ru': lang = RU; break;
     case 'pl': lang = PL; break;
+    case 'pt': lang = PT; break;
     default:
       lang = EN;
   }
@@ -88,5 +90,6 @@ export const Languages = {
   es: 'Español',
   fr: 'Français',
   ru: 'ру́сский',
-  pl: 'polski'
+  pl: 'polski',
+  pt: 'português'
 };

src/app/i18n/en.json

@@ -16,6 +16,8 @@
     "PHRASE_ENGAGEMENT_RANGE": "The distance between your ship and its target",
     "PHRASE_SELECT_BLUEPRINT": "Click to select a blueprint",
     "PHRASE_BLUEPRINT_WORST": "Worst primary values for this blueprint",
+    "PHRASE_BLUEPRINT_FIFTY": "50% of full values for this blueprint",
+    "PHRASE_BLUEPRINT_SEVEN_FIVE": "75% of full values for this blueprint",
     "PHRASE_BLUEPRINT_RANDOM": "Random selection between worst and best primary values for this blueprint",
     "PHRASE_BLUEPRINT_BEST": "Best primary values for this blueprint",
     "PHRASE_BLUEPRINT_EXTREME": "Best beneficial and worst detrimental primary values for this blueprint",
@@ -23,6 +25,7 @@
     "PHRASE_SELECT_SPECIAL": "Click to select an experimental effect",
     "PHRASE_NO_SPECIAL": "No experimental effect",
     "PHRASE_SHOPPING_LIST": "Stations that sell this build",
+    "PHRASE_SHOPPING_MATS": "Materials needed for this build",
     "PHRASE_REFIT_SHOPPING_LIST": "Stations that sell required modules",
     "PHRASE_TOTAL_EFFECTIVE_SHIELD": "Total amount of damage that can be taken from each damage type, if using all shield cells",
     "PHRASE_TIME_TO_LOSE_SHIELDS": "Shields will hold for",
@@ -58,8 +61,10 @@
     "TT_SUMMARY_SPEED": "With full fuel tank and 4 pips to ENG",
     "TT_SUMMARY_SPEED_NONFUNCTIONAL": "Thrusters powered off or over maximum mass with full fuel and cargo loads",
     "TT_SUMMARY_BOOST": "With full fuel tank and 4 pips to ENG",
+    "TT_SUMMARY_BOOST_TIME": "Time between each boost with 4 pips to ENG",
     "TT_SUMMARY_BOOST_NONFUNCTIONAL": "Power distributor not able to supply enough power to boost",
     "TT_SUMMARY_SHIELDS": "Raw shield strength, including boosters",
+    "TT_SUMMARY_SHIELDS_SCB": "Raw shield strength, including boosters and SCBs",
     "TT_SUMMARY_SHIELDS_NONFUNCTIONAL": "No shield generator or shield generator powered off",
     "TT_SUMMARY_INTEGRITY": "Ship integrity, including bulkheads and hull reinforcement packages",
     "TT_SUMMARY_HULL_MASS": "Mass of the hull prior to any modules being installed",
@@ -98,8 +103,10 @@
     "kw": "Kill Warrant Scanner",
     "ls": "Life Support",
     "mc": "Multi-cannon",
+    "axmc": "AX Multi-cannon",
     "ml": "Mining Laser",
     "mr": "Missile Rack",
+    "axmr": "AX Missile Rack",
     "mrp": "Module Reinforcement Package",
     "nl": "Mine Launcher",
     "pa": "Plasma Accelerator",
@@ -113,14 +120,20 @@
     "pl": "Pulse Laser",
     "po": "Point Defence",
     "pp": "Power Plant",
+    "gpp": "Guardian Hybrid Power Plant",
+    "gpd": "Guardian Hybrid Power Distributor",
+    "gpc": "Guardian Plasma Charger",
+    "ggc": "Guardian Gauss Cannon",
     "psg": "Prismatic Shield Generator",
     "pv": "Planetary Vehicle Hangar",
     "rf": "Refinery",
+    "rfl": "Remote Release Flak Launcher",
     "rg": "Rail Gun",
     "s": "Sensors",
     "sb": "Shield Booster",
     "sc": "Stellar Scanners",
     "scb": "Shield Cell Bank",
+    "sfn": "Shutdown Field Neutraliser",
     "sg": "Shield Generator",
     "ss": "Surface Scanners",
     "t": "thrusters",
@@ -128,6 +141,8 @@
     "ul": "Burst Laser",
     "ws": "Frame Shift Wake Scanner",
     "rpl": "Repair Limpet Controller",
+    "rcpl": "Recon Limpet Controller",
+    "xs": "Xeno Scanner",
     "emptyrestricted": "empty (restricted)",
     "damage dealt to": "Damage dealt to",
     "damage received from": "Damage received from",
@@ -165,9 +180,11 @@
     "internal protection": "Internal protection",
     "external protection": "External protection",
     "engagement range": "Engagement range",
+    "boost time": "Boost time",
     "total": "Total",
     "ammo": "Ammunition maximum",
     "boot": "Boot time",
+    "hacktime": "Hack time",
     "brokenregen": "Broken regeneration rate",
     "burst": "Burst",
     "burstrof": "Burst rate of fire",
@@ -202,6 +219,7 @@
     "scanrate": "Scan rate",
     "scantime": "Scan time",
     "shield": "Shield",
+    "armour": "Armour",
     "shieldboost": "Shield boost",
     "shieldreinforcement": "Shield reinforcement",
     "shotspeed": "Shot speed",

src/app/i18n/pt.js

@@ -0,0 +1,16 @@
+export const formats = {
+  decimal: ',',
+  thousands: '.',
+  grouping: [3],
+  currency: ['', ' €'],
+  dateTime: '%A, %e de %B de %Y, %X',
+  date: '%d/%m/%Y',
+  time: '%H:%M:%S',
+  periods: ['AM', 'PM'],
+  days: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+  shortDays: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+  months: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+  shortMonths: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
+};
+
+export { default as terms } from './pt.json';

src/app/pages/AboutPage.jsx

@@ -41,6 +41,9 @@ export default class AboutPage extends Page {
 
       <h3>Chat</h3>
       <p>You can chat to us on our <a href='https://discord.gg/0uwCh6R62aPRjk9w' target='_blank'>EDCD Discord server</a>.</p>
+
+      <h3>Supporting Coriolis</h3>
+      <p>Coriolis is an open source project, and I work on it in my free time. I have set up a patreon at <a href='https://www.patreon.com/coriolis_elite'>patreon.com/coriolis_elite</a>, which will be used to keep Coriolis up to date and the servers running.</p>
     </div>;
   }
 }

src/app/pages/ShipyardPage.jsx

@@ -25,6 +25,25 @@ function countInt(slot) {
   this.int[slot.maxClass - 1]++;  // Subtract 1 since there is no Class 0 Internal compartment
   this.intCount++;
   this.maxCargo += crEligible ? ModuleUtils.findInternal('cr', slot.maxClass, 'E').cargo : 0;
+
+  // if no eligiblity, then assume pce
+  let passSlotType = null;
+  let passSlotRating = null;
+  if (!slot.eligible || slot.eligible.pce) {
+    passSlotType = 'pce';
+    passSlotRating = 'E';
+  } else if (slot.eligible.pci) {
+    passSlotType = 'pci';
+    passSlotRating = 'D';
+  } else if (slot.eligible.pcm) {
+    passSlotType = 'pcm';
+    passSlotRating = 'C';
+  } else if (slot.eligible.pcq) {
+    passSlotType = 'pcq';
+    passSlotRating = 'B';
+  }
+  let passengerBay = passSlotType ? ModuleUtils.findMaxInternal(passSlotType, slot.maxClass, passSlotRating) : null;
+  this.maxPassengers += passengerBay ? passengerBay.passengers : 0;
 }
 
 /**
@@ -39,6 +58,7 @@ function shipSummary(shipId, shipData) {
     hpCount: 0,
     intCount: 0,
     maxCargo: 0,
+    maxPassengers: 0,
     hp: [0, 0, 0, 0, 0], // Utility, Small, Medium, Large, Huge
     int: [0, 0, 0, 0, 0, 0, 0, 0], // Sizes 1 - 8
     standard: shipData.slots.standard,
@@ -139,15 +159,16 @@ export default class ShipyardPage extends Page {
    * @param  {Object} u           Localized unit map
    * @param  {Function} fInt      Localized integer formatter
    * @param  {Function} fRound    Localized round formatter
+   * @param  {Boolean} highlight  Should this row be highlighted
    * @return {React.Component}    Table Row
    */
-  _shipRowElement(s, translate, u, fInt, fRound) {
+  _shipRowElement(s, translate, u, fInt, fRound, highlight) {
     let noTouch = this.context.noTouch;
 
     return <tr
         key={s.id}
         style={{ height: '1.5em' }}
-        className={cn({ highlighted: noTouch && this.state.shipId === s.id })}
+        className={cn({ highlighted: noTouch && this.state.shipId === s.id, alt: highlight })}
         onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
       >
       <td className='ri'>{s.manufacturer}</td>
@@ -166,12 +187,14 @@ export default class ShipyardPage extends Page {
       <td className='ri'>{fInt(s.topBoost)}</td>
       <td className='ri'>{fRound(s.maxJumpRange)}</td>
       <td className='ri'>{fInt(s.maxCargo)}</td>
+      <td className='ri'>{fInt(s.maxPassengers)}</td>
       <td className='cn'>{s.standard[0]}</td>
       <td className='cn'>{s.standard[1]}</td>
       <td className='cn'>{s.standard[2]}</td>
       <td className='cn'>{s.standard[3]}</td>
       <td className='cn'>{s.standard[4]}</td>
       <td className='cn'>{s.standard[5]}</td>
+      <td className='cn'>{s.standard[6]}</td>
       <td className={cn({ disabled: !s.hp[1] })}>{s.hp[1]}</td>
       <td className={cn({ disabled: !s.hp[2] })}>{s.hp[2]}</td>
       <td className={cn({ disabled: !s.hp[3] })}>{s.hp[3]}</td>
@@ -246,13 +269,26 @@ export default class ShipyardPage extends Page {
     let shipRows = new Array(shipSummaries.length);
     let detailRows = new Array(shipSummaries.length);
 
+    let lastShipSortValue = null;
+    let backgroundHighlight = false;
+
     for (let s of shipSummaries) {
-      detailRows[i] = this._shipRowElement(s, translate, units, fInt, formats.f1);
+      let shipSortValue = s[shipPredicate];
+      if(shipPredicateIndex != undefined) {
+        shipSortValue = shipSortValue[shipPredicateIndex];
+      }
+
+      if(shipSortValue != lastShipSortValue) {
+        backgroundHighlight = !backgroundHighlight;
+        lastShipSortValue = shipSortValue;
+      }
+
+      detailRows[i] = this._shipRowElement(s, translate, units, fInt, formats.f1, backgroundHighlight);
       shipRows[i] = (
         <tr
           key={i}
           style={{ height: '1.5em' }}
-          className={cn({ highlighted: noTouch && this.state.shipId === s.id })}
+          className={cn({ highlighted: noTouch && this.state.shipId === s.id, alt: backgroundHighlight })}
           onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
         >
           <td className='le'><Link href={'/outfit/' + s.id}>{s.name}</Link></td>
@@ -293,8 +329,8 @@ export default class ShipyardPage extends Page {
                 <th rowSpan={3} className='sortable' onMouseEnter={termtip.bind(null, 'hardness')} onMouseLeave={hide} onClick={sortShips('hardness')}>{translate('hrd')}</th>
                 <th>&nbsp;</th>
                 <th colSpan={4}>{translate('base')}</th>
-                <th colSpan={4}>{translate('max')}</th>
+                <th colSpan={5}>{translate('max')}</th>
-                <th className='lft' colSpan={6}></th>
+                <th className='lft' colSpan={7}></th>
                 <th className='lft' colSpan={5}></th>
                 <th className='lft' colSpan={8}></th>
               </tr>
@@ -310,29 +346,31 @@ export default class ShipyardPage extends Page {
                 <th className='sortable' onClick={sortShips('topBoost')}>{translate('boost')}</th>
                 <th className='sortable' onClick={sortShips('maxJumpRange')}>{translate('jump')}</th>
                 <th className='sortable' onClick={sortShips('maxCargo')}>{translate('cargo')}</th>
+                <th className='sortable' onClick={sortShips('maxPassengers')}>{translate('pax')}</th>
 
-                <th className='lft' colSpan={6}>{translate('core module classes')}</th>
+                <th className='lft' colSpan={7}>{translate('core module classes')}</th>
                 <th colSpan={5} className='sortable lft' onClick={sortShips('hpCount')}>{translate('hardpoints')}</th>
                 <th colSpan={8} className='sortable lft' onClick={sortShips('intCount')}>{translate('internal compartments')}</th>
               </tr>
               <tr>
-	        <th className='sortable lft' onClick={sortShips('retailCost')}>{units.CR}</th>
+                <th className='sortable lft' onClick={sortShips('retailCost')}>{units.CR}</th>
-	        <th className='sortable lft' onClick={sortShips('hullMass')}>{units.T}</th>
+                <th className='sortable lft' onClick={sortShips('hullMass')}>{units.T}</th>
-	        <th className='sortable lft' onClick={sortShips('speed')}>{units['m/s']}</th>
+                <th className='sortable lft' onClick={sortShips('speed')}>{units['m/s']}</th>
-	        <th className='sortable'  onClick={sortShips('boost')}>{units['m/s']}</th>
+                <th className='sortable'  onClick={sortShips('boost')}>{units['m/s']}</th>
-	        <th>&nbsp;</th>
+                <th>&nbsp;</th>
-	        <th className='sortable' onClick={sortShips('baseShieldStrength')}>{units.MJ}</th>
+                <th className='sortable' onClick={sortShips('baseShieldStrength')}>{units.MJ}</th>
-	        <th className='sortable lft' onClick={sortShips('topSpeed')}>{units['m/s']}</th>
+                <th className='sortable lft' onClick={sortShips('topSpeed')}>{units['m/s']}</th>
-	        <th className='sortable' onClick={sortShips('topBoost')}>{units['m/s']}</th>
+                <th className='sortable' onClick={sortShips('topBoost')}>{units['m/s']}</th>
-	        <th className='sortable' onClick={sortShips('maxJumpRange')}>{units.LY}</th>
+                <th className='sortable' onClick={sortShips('maxJumpRange')}>{units.LY}</th>
-	        <th className='sortable' onClick={sortShips('maxCargo')}>{units.T}</th>
+                <th className='sortable' onClick={sortShips('maxCargo')}>{units.T}</th>
+                <th>&nbsp;</th>
                 <th className='sortable lft' onMouseEnter={termtip.bind(null, 'power plant')} onMouseLeave={hide} onClick={sortShips('standard', 0)}>{'pp'}</th>
                 <th className='sortable' onMouseEnter={termtip.bind(null, 'thrusters')} onMouseLeave={hide} onClick={sortShips('standard', 1)}>{'th'}</th>
                 <th className='sortable' onMouseEnter={termtip.bind(null, 'frame shift drive')} onMouseLeave={hide} onClick={sortShips('standard', 2)}>{'fsd'}</th>
                 <th className='sortable' onMouseEnter={termtip.bind(null, 'life support')} onMouseLeave={hide} onClick={sortShips('standard', 3)}>{'ls'}</th>
                 <th className='sortable' onMouseEnter={termtip.bind(null, 'power distriubtor')} onMouseLeave={hide} onClick={sortShips('standard', 4)}>{'pd'}</th>
                 <th className='sortable' onMouseEnter={termtip.bind(null, 'sensors')} onMouseLeave={hide} onClick={sortShips('standard', 5)}>{'s'}</th>
-
+                <th className='sortable' onMouseEnter={termtip.bind(null, 'fuel tank')} onMouseLeave={hide} onClick={sortShips('standard', 6)}>{'ft'}</th>
                 <th className='sortable lft' onClick={sortShips('hp',1)}>{translate('S')}</th>
                 <th className='sortable' onClick={sortShips('hp', 2)}>{translate('M')}</th>
                 <th className='sortable' onClick={sortShips('hp', 3)}>{translate('L')}</th>

src/app/shipyard/Calculations.js

@@ -45,7 +45,7 @@ export function totalJumpRange(mass, fsd, fuel) {
  * @param  {number} baseShield  Base Shield strength MJ for ship
  * @param  {object} sg          The shield generator used
  * @param  {number} multiplier  Shield multiplier for ship (1 + shield boosters if any)
- * @return {number}             Approximate shield strengh in MJ
+ * @return {number} Approximate shield strengh in MJ
  */
 export function shieldStrength(mass, baseShield, sg, multiplier) {
   // sg might be a module or a template; handle either here
@@ -55,7 +55,6 @@ export function shieldStrength(mass, baseShield, sg, multiplier) {
   let minMul = sg instanceof Module ? sg.getMinMul() : sg.minmul;
   let optMul = sg instanceof Module ? sg.getOptMul() : sg.optmul;
   let maxMul = sg instanceof Module ? sg.getMaxMul() : sg.maxmul;
-
   let xnorm = Math.min(1, (maxMass - mass) / (maxMass - minMass));
   let exponent = Math.log((optMul - minMul) / (maxMul - minMul)) / Math.log(Math.min(1, (maxMass - optMass) / (maxMass - minMass)));
   let ynorm = Math.pow(xnorm, exponent);
@@ -453,6 +452,19 @@ export function shieldMetrics(ship, sys) {
   return shield;
 }
 
+/**
+ * Calculate time from one boost to another
+ * @return {number} Boost frequency in seconds
+ * @param ship
+ */
+export function calcBoost(ship) {
+  if (!ship.boostEnergy || !ship.standard[4] || !ship.standard[4].m) {
+    return undefined;
+  }
+  return ship.boostEnergy / ship.standard[4].m.engrate;
+}
+
+
 /**
  * Calculate armour metrics
  * @param   {Object}  ship            The ship

src/app/shipyard/Constants.js

@@ -9,12 +9,16 @@ export const StandardArray = [
   'pd', // Power Distributor
   's',  // Sensors
   'ft', // Fuel Tank
+  'gpp', // Guardian Hybrid Power Plant
+  'gpd' // Guardian Hybrid Power Distributor
 ];
 
 // Map to lookup group labels/names for component grp, used for JSON Serialization
 export const ModuleGroupToName = {
   // Standard
   pp: 'Power Plant',
+  gpp: 'Guardian Hybrid Power Plant',
+  gpd: 'Guardian Hybrid Power Distributor',
   t: 'Thrusters',
   fsd: 'Frame Shift Drive',
   ls: 'Life Support',
@@ -58,19 +62,27 @@ export const ModuleGroupToName = {
   cm: 'Countermeasure',
   ec: 'Electronic Countermeasure',
   fc: 'Fragment Cannon',
+  rfl: 'Remote Release Flak Launcher',
   hs: 'Heat Sink Launcher',
   ws: 'Frame Shift Wake Scanner',
   kw: 'Kill Warrant Scanner',
   nl: 'Mine Launcher',
   ml: 'Mining Laser',
   mr: 'Missile Rack',
+  axmr: 'AX Missile Rack',
   pa: 'Plasma Accelerator',
   po: 'Point Defence',
   mc: 'Multi-cannon',
+  axmc: 'AX Multi-cannon',
   pl: 'Pulse Laser',
   rg: 'Rail Gun',
   sb: 'Shield Booster',
-  tp: 'Torpedo Pylon'
+  tp: 'Torpedo Pylon',
+  sfn: 'Shutdown Field Neutraliser',
+  xs: 'Xeno Scanner',
+  rcpl: 'Recon Limpet Controller',
+  gpc: 'Guardian Plasma Charger',
+  ggc: 'Guardian Gauss Cannon',
 };
 
 let GrpNameToCodeMap = {};

src/app/shipyard/Module.js

@@ -64,7 +64,6 @@ export default class Module {
         }
       }
     }
-
     // Sanitise the resultant value to 4dp equivalent
     return isNaN(result) ? result : Math.round(result);
   }
@@ -79,6 +78,9 @@ export default class Module {
     if (!this.mods) {
       this.mods = {};
     }
+    if (!this.origVals) {
+      this.origVals = {};
+    }
     if (valueiswithspecial && this.blueprint && this.blueprint.special) {
       // This module has a special effect, see if we need to alter the stored value
       const modifierActions = Modifications.modifierActions[this.blueprint.special.edname];
@@ -117,7 +119,6 @@ export default class Module {
   _getModifiedValue(name) {
     const modification = Modifications.modifications[name];
     let result = this[name];
-
     if (!result) {
       if (modification && modification.method === 'additive') {
         // Additive modifications start at 0 rather than NULL
@@ -721,4 +722,13 @@ export default class Module {
   getTime() {
     return this._getModifiedValue('time');
   }
+
+  /**
+   * Get the hack time for this module, taking in to account modifications
+   * @return {string} the time for this module
+   */
+  getHackTime() {
+    return this._getModifiedValue('hacktime');
+  }
+
 }

src/app/shipyard/ModuleUtils.js

@@ -63,7 +63,6 @@ export function standard(type, id) {
   if (!isNaN(type)) {
     type = StandardArray[type];
   }
-
   let s = Modules.standard[type].find(e => e.id == id || (e.class == id.charAt(0) && e.rating == id.charAt(1)));
   if (s) {
     s = new Module({ template: s });
@@ -196,6 +195,29 @@ export function findInternal(groupName, clss, rating, name) {
   return null;
 }
 
+/**
+ * Finds an internal module based on Class, Rating, Group and/or name.
+ * At least one of Group name or unique module name must be provided.
+ * will start searching at specified class and proceed lower until a
+ * module is found or 0 is hit
+ * Uses findInternal internally
+ *
+ * @param  {String} groupName [Optional] Full name or abbreviated name for module group
+ * @param  {integer} clss     module Class
+ * @param  {String} rating    module Rating
+ * @param  {String} name      [Optional] Long/unique name for module -e.g. 'Advanced Discover Scanner'
+ * @return {Object}           The module if found, null if not found
+ */
+export function findMaxInternal(groupName, clss, rating, name) {
+  let foundModule = null;
+  let currentClss = clss;
+  while (currentClss > 0 && foundModule == null) {
+    foundModule = findInternal(groupName, currentClss, rating, name);
+    currentClss = currentClss - 1;
+  }
+  return foundModule;
+}
+
 /**
  * Finds an internal Module ID based on Class, Rating, Group and/or name.
  * At least one ofGroup name or unique module name must be provided

src/app/shipyard/Ship.js

@@ -437,12 +437,15 @@ export default class Ship {
     m.blueprint = bp;
     this.clearModifications(m);
     // Set any hidden items for the blueprint now
-    const features = m.blueprint.grades[m.blueprint.grade].features;
+    if (m.blueprint.grades[m.blueprint.grade] && m.blueprint.grades[m.blueprint.grade].features) {
-    for (const featureName in features) {
+      const features = m.blueprint.grades[m.blueprint.grade].features;
-      if (Modifications.modifications[featureName].hidden) {
+      for (const featureName in features) {
-        this.setModification(m, featureName, bp.grades[bp.grade].features[featureName][0]);
+        if (Modifications.modifications[featureName].hidden) {
+          this.setModification(m, featureName, bp.grades[bp.grade].features[featureName][0]);
+        }
       }
     }
+
     this.updateModificationsString();
   }
 
@@ -464,7 +467,17 @@ export default class Ship {
     if (m.blueprint) {
       m.blueprint.special = special;
     }
-    this.recalculateDps().recalculateHps().recalculateEps();
+    this.updatePowerGenerated()
+      .updatePowerUsed()
+      .recalculateMass()
+      .updateJumpStats()
+      .recalculateShield()
+      .recalculateShieldCells()
+      .recalculateArmour()
+      .recalculateDps()
+      .recalculateEps()
+      .recalculateHps()
+      .updateMovement();
   }
 
   /**
@@ -490,7 +503,6 @@ export default class Ship {
       // Value passed is invalid; reset it to 0
       value = 0;
     }
-
     // Handle special cases
     if (name === 'pgen') {
       // Power generation
@@ -569,6 +581,7 @@ export default class Ship {
     // Reset Cumulative stats
     this.fuelCapacity = 0;
     this.cargoCapacity = 0;
+    this.passengerCapacity = 0;
     this.ladenMass = 0;
     this.armour = this.baseArmour;
     this.shield = this.baseShieldStrength;
@@ -616,7 +629,7 @@ export default class Ship {
       standard[i].cat = 0;
       standard[i].priority = priorities && priorities[i + 1] ? priorities[i + 1] * 1 : 0;
       standard[i].type = 'SYS';
-      standard[i].m = null; // Resetting 'old' modul if there was one
+      standard[i].m = null; // Resetting 'old' module if there was one
       standard[i].discountedCost = 0;
       if (comps) {
         let module = ModuleUtils.standard(i, comps.standard[i]);
@@ -770,7 +783,7 @@ export default class Ship {
       // Alter as required due to changes in the (build) code from one version to the next
       this.upgradeInternals(internal, 1 + this.standard.length + this.hardpoints.length, priorities, enabled, modifications, blueprints, version);
     }
-    
+
     return this.buildWith(
       {
         bulkheads: code.charAt(0) * 1,
@@ -1188,6 +1201,7 @@ export default class Ship {
     let unladenMass = this.hullMass;
     let cargoCapacity = 0;
     let fuelCapacity = 0;
+    let passengerCapacity = 0;
 
     unladenMass += this.bulkheads.m.getMass();
 
@@ -1209,6 +1223,10 @@ export default class Ship {
           fuelCapacity += slot.m.fuel;
         } else if (slot.m.grp === 'cr') {
           cargoCapacity += slot.m.cargo;
+        } else if (slot.m.grp.slice(0,2) === 'pc') {
+          if (slot.m.passengers) {
+            passengerCapacity += slot.m.passengers;
+          }
         }
       }
     }
@@ -1224,6 +1242,7 @@ export default class Ship {
     this.unladenMass = unladenMass;
     this.cargoCapacity = cargoCapacity;
     this.fuelCapacity = fuelCapacity;
+    this.passengerCapacity = passengerCapacity;
     this.ladenMass = unladenMass + fuelCapacity + cargoCapacity;
 
     return this;

src/app/shipyard/ShipRoles.js

@@ -9,9 +9,9 @@ import { canMount } from '../utils/SlotFunctions';
  */
 export function multiPurpose(ship, shielded, bulkheadIndex) {
   ship.useStandard('A')
-      .use(ship.standard[3], ModuleUtils.standard(3, ship.standard[3].maxClass + 'D'))  // D Life Support
+    .use(ship.standard[3], ModuleUtils.standard(3, ship.standard[3].maxClass + 'D'))  // D Life Support
-      .use(ship.standard[5], ModuleUtils.standard(5, ship.standard[5].maxClass + 'D'))  // D Sensors
+    .use(ship.standard[5], ModuleUtils.standard(5, ship.standard[5].maxClass + 'D'))  // D Sensors
-      .useBulkhead(bulkheadIndex);
+    .useBulkhead(bulkheadIndex);
 
   if (shielded) {
     ship.internal.some(function(slot) {
@@ -31,24 +31,31 @@ export function multiPurpose(ship, shielded, bulkheadIndex) {
  * @param  {Object} standardOpts  [Optional] Standard module optional overrides
  */
 export function trader(ship, shielded, standardOpts) {
-  let usedSlots = [],
+  let usedSlots = [];
-      sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass);
+  let bstCount = 2;
- 
+  let sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass);
-  // Shield generator if required
+  ship.useStandard('A')
-  if (shielded) {
+    .use(ship.standard[3], ModuleUtils.standard(3, ship.standard[3].maxClass + 'D'))  // D Life Support
-    const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
+    .use(ship.standard[1], ModuleUtils.standard(1, ship.standard[1].maxClass + 'D'))  // D Life Support
-    const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
+    .use(ship.standard[4], ModuleUtils.standard(4, ship.standard[4].maxClass + 'D'))  // D Life Support
-                                         .filter(a => (!a.eligible) || a.eligible.sg)
+    .use(ship.standard[5], ModuleUtils.standard(5, ship.standard[5].maxClass + 'D'));  // D Sensors
-                                         .filter(a => a.maxClass >= sg.class)
+
-                                         .sort((a,b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
+  const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
-    for (let i = 0; i < shieldInternals.length; i++) {
+  const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-      if (canMount(ship, shieldInternals[i], 'sg')) {
+    .filter(a => (!a.eligible) || a.eligible.sg)
-        ship.use(shieldInternals[i], sg);
+    .filter(a => a.maxClass >= sg.class)
-        usedSlots.push(shieldInternals[i]);
+    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
-        break;
+  shieldInternals.some(function(slot) {
+    if (canMount(ship, slot, 'sg')) { // Assuming largest slot can hold an eligible shield
+      const shield = ModuleUtils.findInternal('sg', slot.maxClass, 'A');
+      if (shield && shield.maxmass > ship.hullMass) {
+        ship.use(slot, shield);
+        ship.setSlotEnabled(slot, true);
+        usedSlots.push(slot);
+        return true;
       }
     }
-  }
+  });
 
   // Fill the empty internals with cargo racks
   for (let i = ship.internal.length; i--;) {
@@ -62,8 +69,15 @@ export function trader(ship, shielded, standardOpts) {
   for (let s of ship.hardpoints) {
     ship.use(s, null);
   }
-
+  for (let s of ship.hardpoints) {
-  ship.useLightestStandard(standardOpts);
+    if (s.maxClass == 0 && bstCount) {       // Mount up to 2 boosters
+      ship.use(s, ModuleUtils.hardpoints('04'));
+      bstCount--;
+    } else {
+      ship.use(s, null);
+    }
+  }
+  // ship.useLightestStandard(standardOpts);
 }
 
 /**
@@ -89,8 +103,8 @@ export function explorer(ship, planetary) {
   // Advanced Discovery Scanner - class 1 or higher
   const adsOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const adsInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                    .filter(a => (!a.eligible) || a.eligible.sc)
+    .filter(a => (!a.eligible) || a.eligible.sc)
-                                    .sort((a,b) => adsOrder.indexOf(a.maxClass) - adsOrder.indexOf(b.maxClass));
+    .sort((a, b) => adsOrder.indexOf(a.maxClass) - adsOrder.indexOf(b.maxClass));
   for (let i = 0; i < adsInternals.length; i++) {
     if (canMount(ship, adsInternals[i], 'sc')) {
       ship.use(adsInternals[i], ModuleUtils.internal('2f'));
@@ -103,8 +117,8 @@ export function explorer(ship, planetary) {
     // Planetary Vehicle Hangar - class 2 or higher
     const pvhOrder = [2, 3, 4, 5, 6, 7, 8, 1];
     const pvhInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                      .filter(a => (!a.eligible) || a.eligible.pv)
+      .filter(a => (!a.eligible) || a.eligible.pv)
-                                      .sort((a,b) => pvhOrder.indexOf(a.maxClass) - pvhOrder.indexOf(b.maxClass));
+      .sort((a, b) => pvhOrder.indexOf(a.maxClass) - pvhOrder.indexOf(b.maxClass));
     for (let i = 0; i < pvhInternals.length; i++) {
       if (canMount(ship, pvhInternals[i], 'pv')) {
         // Planetary Vehical Hangar only has even classes
@@ -120,9 +134,9 @@ export function explorer(ship, planetary) {
   // Shield generator
   const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                       .filter(a => (!a.eligible) || a.eligible.sg)
+    .filter(a => (!a.eligible) || a.eligible.sg)
-                                       .filter(a => a.maxClass >= sg.class)
+    .filter(a => a.maxClass >= sg.class)
-                                       .sort((a,b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
+    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
   for (let i = 0; i < shieldInternals.length; i++) {
     if (canMount(ship, shieldInternals[i], 'sg')) {
       ship.use(shieldInternals[i], sg);
@@ -135,8 +149,8 @@ export function explorer(ship, planetary) {
   // Detailed Surface Scanner
   const dssOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const dssInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                    .filter(a => (!a.eligible) || a.eligible.sc)
+    .filter(a => (!a.eligible) || a.eligible.sc)
-                                    .sort((a,b) => dssOrder.indexOf(a.maxClass) - dssOrder.indexOf(b.maxClass));
+    .sort((a, b) => dssOrder.indexOf(a.maxClass) - dssOrder.indexOf(b.maxClass));
   for (let i = 0; i < dssInternals.length; i++) {
     if (canMount(ship, dssInternals[i], 'sc')) {
       ship.use(dssInternals[i], ModuleUtils.internal('2i'));
@@ -148,8 +162,8 @@ export function explorer(ship, planetary) {
   // Fuel scoop - best possible
   const fuelScoopOrder = [8, 7, 6, 5, 4, 3, 2, 1];
   const fuelScoopInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                       .filter(a => (!a.eligible) || a.eligible.fs)
+    .filter(a => (!a.eligible) || a.eligible.fs)
-                                       .sort((a,b) => fuelScoopOrder.indexOf(a.maxClass) - fuelScoopOrder.indexOf(b.maxClass));
+    .sort((a, b) => fuelScoopOrder.indexOf(a.maxClass) - fuelScoopOrder.indexOf(b.maxClass));
   for (let i = 0; i < fuelScoopInternals.length; i++) {
     if (canMount(ship, fuelScoopInternals[i], 'fs')) {
       ship.use(fuelScoopInternals[i], ModuleUtils.findInternal('fs', fuelScoopInternals[i].maxClass, 'A'));
@@ -162,8 +176,8 @@ export function explorer(ship, planetary) {
   // AFMUs - fill as they are 0-weight
   const afmuOrder = [8, 7, 6, 5, 4, 3, 2, 1];
   const afmuInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                       .filter(a => (!a.eligible) || a.eligible.pc)
+    .filter(a => (!a.eligible) || a.eligible.pc)
-                                       .sort((a,b) => afmuOrder.indexOf(a.maxClass) - afmuOrder.indexOf(b.maxClass));
+    .sort((a, b) => afmuOrder.indexOf(a.maxClass) - afmuOrder.indexOf(b.maxClass));
   for (let i = 0; i < afmuInternals.length; i++) {
     if (canMount(ship, afmuInternals[i], 'am')) {
       ship.use(afmuInternals[i], ModuleUtils.findInternal('am', afmuInternals[i].maxClass, 'A'));
@@ -200,6 +214,7 @@ export function explorer(ship, planetary) {
  * @param  {Boolean} shielded  True if shield generator should be included
  */
 export function miner(ship, shielded) {
+  shielded = true;
   let standardOpts = { ppRating: 'A' },
       miningLaserCount = 2,
       usedSlots = [],
@@ -211,8 +226,8 @@ export function miner(ship, shielded) {
   // Largest possible refinery
   const refineryOrder = [4, 5, 6, 7, 8, 3, 2, 1];
   const refineryInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                         .filter(a => (!a.eligible) || a.eligible.rf)
+    .filter(a => (!a.eligible) || a.eligible.rf)
-                                         .sort((a,b) => refineryOrder.indexOf(a.maxClass) - refineryOrder.indexOf(b.maxClass));
+    .sort((a, b) => refineryOrder.indexOf(a.maxClass) - refineryOrder.indexOf(b.maxClass));
   for (let i = 0; i < refineryInternals.length; i++) {
     if (canMount(ship, refineryInternals[i], 'rf')) {
       ship.use(refineryInternals[i], ModuleUtils.findInternal('rf', Math.min(refineryInternals[i].maxClass, 4), 'A'));
@@ -224,8 +239,8 @@ export function miner(ship, shielded) {
   // Prospector limpet controller - 3A if possible
   const prospectorOrder = [3, 4, 5, 6, 7, 8, 2, 1];
   const prospectorInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                           .filter(a => (!a.eligible) || a.eligible.pc)
+    .filter(a => (!a.eligible) || a.eligible.pc)
-                                           .sort((a,b) => prospectorOrder.indexOf(a.maxClass) - prospectorOrder.indexOf(b.maxClass));
+    .sort((a, b) => prospectorOrder.indexOf(a.maxClass) - prospectorOrder.indexOf(b.maxClass));
   for (let i = 0; i < prospectorInternals.length; i++) {
     if (canMount(ship, prospectorInternals[i], 'pc')) {
       // Prospector only has odd classes
@@ -240,9 +255,9 @@ export function miner(ship, shielded) {
   if (shielded) {
     const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
     const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                         .filter(a => (!a.eligible) || a.eligible.sg)
+      .filter(a => (!a.eligible) || a.eligible.sg)
-                                         .filter(a => a.maxClass >= sg.class)
+      .filter(a => a.maxClass >= sg.class)
-                                         .sort((a,b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
+      .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
     for (let i = 0; i < shieldInternals.length; i++) {
       if (canMount(ship, shieldInternals[i], 'sg')) {
         ship.use(shieldInternals[i], sg);
@@ -254,7 +269,7 @@ export function miner(ship, shielded) {
 
   // Dual mining lasers of highest possible class; remove anything else
   const miningLaserOrder = [2, 3, 4, 1, 0];
-  const miningLaserHardpoints = ship.hardpoints.concat().sort(function(a,b) {
+  const miningLaserHardpoints = ship.hardpoints.concat().sort(function(a, b) {
     return miningLaserOrder.indexOf(a.maxClass) - miningLaserOrder.indexOf(b.maxClass);
   });
   for (let s of miningLaserHardpoints) {
@@ -268,23 +283,23 @@ export function miner(ship, shielded) {
 
   // Number of collector limpets required to be active is a function of the size of the ship and the power of the lasers
   const miningLaserDps = ship.hardpoints.filter(h => h.m != null)
-                                        .reduce(function(a, b) {
+    .reduce(function(a, b) {
-                                          return a + b.m.getDps();
+      return a + b.m.getDps();
-                                        }, 0);
+    }, 0);
   // Find out how many internal slots we have, and their potential cargo size
   const potentialCargo = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                      .filter(a => (!a.eligible) || a.eligible.cr)
+    .filter(a => (!a.eligible) || a.eligible.cr)
-                                      .map(b => Math.pow(2, b.maxClass));
+    .map(b => Math.pow(2, b.maxClass));
   // One collector for each 1.25 DPS, multiply by 1.25 for medium ships and 1.5 for large ships as they have further to travel
   // 0 if we only have 1 cargo slot, otherwise minium of 1 and maximum of 6 (excluding size modifier)
   const sizeModifier = ship.class == 2 ? 1.2 : ship.class == 3 ? 1.5 : 1;
   let collectorLimpetsRequired = potentialCargo.length == 1 ? 0 : Math.ceil(sizeModifier * Math.min(6, Math.floor(miningLaserDps / 1.25)));
-  
+
   if (collectorLimpetsRequired > 0) {
     const collectorOrder = [1, 2, 3, 4, 5, 6, 7, 8];
     const collectorInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                            .filter(a => (!a.eligible) || a.eligible.cc)
+      .filter(a => (!a.eligible) || a.eligible.cc)
-                                            .sort((a,b) => collectorOrder.indexOf(a.maxClass) - collectorOrder.indexOf(b.maxClass));
+      .sort((a, b) => collectorOrder.indexOf(a.maxClass) - collectorOrder.indexOf(b.maxClass));
     // Always keep at least 2 slots free for cargo racks (1 for shielded)
     for (let i = 0; i < collectorInternals.length - (shielded ? 1 : 2) && collectorLimpetsRequired > 0; i++) {
       if (canMount(ship, collectorInternals[i], 'cc')) {
@@ -299,9 +314,9 @@ export function miner(ship, shielded) {
 
   // Power distributor to power the mining lasers indefinitely
   const wepRateRequired = ship.hardpoints.filter(h => h.m != null)
-                                          .reduce(function(a, b) {
+    .reduce(function(a, b) {
-                                            return a + b.m.getEps();
+      return a + b.m.getEps();
-                                          }, 0);
+    }, 0);
   standardOpts.pd = ship.getAvailableModules().matchingPowerDist({ weprate: wepRateRequired }).id;
 
   // Fill the empty internals with cargo racks
@@ -331,9 +346,9 @@ export function racer(ship) {
   // Shield generator
   const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
-                                       .filter(a => (!a.eligible) || a.eligible.sg)
+    .filter(a => (!a.eligible) || a.eligible.sg)
-                                       .filter(a => a.maxClass >= sg.class)
+    .filter(a => a.maxClass >= sg.class)
-                                       .sort((a,b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
+    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
   for (let i = 0; i < shieldInternals.length; i++) {
     if (canMount(ship, shieldInternals[i], 'sg')) {
       ship.use(shieldInternals[i], sg);
@@ -398,4 +413,3 @@ export function racer(ship) {
   // ship.standard[5].m.blueprint.grade = 5;
   // setBest(ship, ship.standard[5].m);
 }
-

src/app/stores/Persist.js

@@ -13,6 +13,7 @@ const LS_KEY_STATE = 'state';
 const LS_KEY_SIZE_RATIO = 'sizeRatio';
 const LS_KEY_TOOLTIPS = 'tooltips';
 const LS_KEY_MODULE_RESISTANCES = 'moduleResistances';
+const LS_KEY_ROLLS = 'matsPerGrade';
 
 let LS;
 
@@ -84,6 +85,7 @@ export class Persist extends EventEmitter {
     }
 
     let moduleResistances = _get(LS_KEY_MODULE_RESISTANCES);
+    let matsPerGrade = _get(LS_KEY_ROLLS);
     let tips = _get(LS_KEY_TOOLTIPS);
     let insurance = _getString(LS_KEY_INSURANCE);
     let shipDiscount = _get(LS_KEY_SHIP_DISCOUNT);
@@ -102,6 +104,13 @@ export class Persist extends EventEmitter {
     this.outfittingTab = _getString(LS_KEY_OUTFITTING_TAB);
     this.state =  _get(LS_KEY_STATE);
     this.sizeRatio = _get(LS_KEY_SIZE_RATIO) || 1;
+    this.matsPerGrade = matsPerGrade || {
+      1: 2,
+      2: 2,
+      3: 4,
+      4: 4,
+      5: 10
+    };
     this.tooltipsEnabled = tips === null ? true : tips;
     this.moduleResistancesEnabled = moduleResistances === null ? true : moduleResistances;
 
@@ -152,6 +161,10 @@ export class Persist extends EventEmitter {
           this.moduleResistancesEnabled = !!newValue && newValue.toLowerCase() == 'true';
           this.emit('moduleresistances', this.moduleResistancesEnabled);
           break;
+        case LS_KEY_ROLLS:
+          this.matsPerGrade = JSON.parse(newValue);
+          this.emit('matsPerGrade', this.matsPerGrade);
+          break;
       }
     } catch (e) {
       // On JSON.Parse Error - don't sync or do anything
@@ -457,6 +470,23 @@ export class Persist extends EventEmitter {
     return this.moduleDiscount;
   }
 
+  /**
+   * Get the saved ship discount
+   * @param {Object} matsPerGrade # of rolls per grade
+   */
+  setRolls(matsPerGrade) {
+    this.matsPerGrade = matsPerGrade;
+    _put(LS_KEY_ROLLS, this.matsPerGrade);
+    this.emit('matsPerGrade');
+  }
+  /**
+   * Get the saved Mats per grade
+   * @return {Object} # of rolls per grade
+   */
+  getRolls() {
+    return this.matsPerGrade;
+  }
+
   /**
    * Persist selected cost tab
    * @param {number} tabName Cost tab name

src/app/utils/BlueprintFunctions.js

@@ -1,371 +1,430 @@
-import React from 'react';
+import React from 'react';
-import { Modifications } from 'coriolis-data/dist';
+import { Modifications } from 'coriolis-data/dist';
-
+
-/**
+/**
- * Generate a tooltip with details of a blueprint's effects
+ * Generate a tooltip with details of a blueprint's specials
- * @param   {Object}  translate   The translate object
+ * @param   {Object}  translate   The translate object
- * @param   {Object}  blueprint   The blueprint at the required grade
+ * @param   {Object}  blueprint   The blueprint at the required grade
- * @param   {Array}   engineers   The engineers supplying this blueprint
+ * @param   {string}  grp         The group of the module
- * @param   {string}  grp         The group of the module
+ * @param   {Object}  m           The module to compare with
- * @param   {Object}  m           The module to compare with
+ * @param   {string} specialName  The name of the special
- * @returns {Object}              The react components
+ * @returns {Object}              The react components
- */
+ */
-export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
+export function specialToolTip(translate, blueprint, grp, m, specialName) {
-  const effects = [];
+  const effects = [];
-  for (const feature in blueprint.features) {
+  if (!blueprint || !blueprint.features) {
-    const featureIsBeneficial = isBeneficial(feature, blueprint.features[feature]);
+    return undefined;
-    const featureDef = Modifications.modifications[feature];
+  }
-    if (!featureDef.hidden) {
+  if (m) {
-      let symbol = '';
+    // We also add in any benefits from specials that aren't covered above
-      if (feature === 'jitter') {
+    if (m.blueprint) {
-        symbol = '°';
+      for (const feature in Modifications.modifierActions[specialName]) {
-      } else if (featureDef.type === 'percentage') {
+          // if (!blueprint.features[feature] && !m.mods.feature) {
-        symbol = '%';
+        const featureDef = Modifications.modifications[feature];
-      }
+        if (featureDef && !featureDef.hidden) {
-      let lowerBound = blueprint.features[feature][0];
+          let symbol = '';
-      let upperBound = blueprint.features[feature][1];
+          if (feature === 'jitter') {
-      if (featureDef.type === 'percentage') {
+            symbol = '°';
-        lowerBound = Math.round(lowerBound * 1000) / 10;
+          } else if (featureDef.type === 'percentage') {
-        upperBound = Math.round(upperBound * 1000) / 10;
+            symbol = '%';
-      }
+          }
-      const lowerIsBeneficial  = isValueBeneficial(feature, lowerBound);
+          let current = m.getModValue(feature) - m.getModValue(feature, true);
-      const upperIsBeneficial  = isValueBeneficial(feature, upperBound);
+          if (featureDef.type === 'percentage') {
-      if (m) {
+            current = Math.round(current / 10) / 10;
-        // We have a module - add in the current value
+          } else if (featureDef.type === 'numeric') {
-        let current = m.getModValue(feature);
+            current /= 100;
-        if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+          }
-          current = Math.round(current / 10) / 10;
+          const currentIsBeneficial = isValueBeneficial(feature, current);
-        } else if (featureDef.type === 'numeric') {
+
-          current /= 100;
+          effects.push(
-        }
+                  <tr key={feature + '_specialTT'}>
-        const currentIsBeneficial  = isValueBeneficial(feature, current);
+                    <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
-        effects.push(
+                    <td>&nbsp;</td>
-          <tr key={feature}>
+                    <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'}
-            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+                        style={{ textAlign: 'right' }}>{current}{symbol}</td>
-            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
+                    <td>&nbsp;</td>
-            <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
+                  </tr>
-            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
+                );
-          </tr>
+        }
-        );
+      }
-      } else {
+    }
-        // We do not have a module, no value
+  }
-        effects.push(
+
-          <tr key={feature}>
+  return (
-            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+    <div>
-            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
+      <table width='100%'>
-            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
+        <tbody>
-          </tr>
+        {effects}
-        );
+        </tbody>
-      }
+      </table>
-    }
+    </div>
-  }
+  );
-  if (m) {
+}
-    // Because we have a module add in any benefits that aren't part of the primary blueprint
+
-    for (const feature in m.mods) {
+/**
-      if (!blueprint.features[feature]) {
+ * Generate a tooltip with details of a blueprint's effects
-        const featureDef = Modifications.modifications[feature];
+ * @param   {Object}  translate   The translate object
-        if (featureDef && !featureDef.hidden) {
+ * @param   {Object}  blueprint   The blueprint at the required grade
-          let symbol = '';
+ * @param   {Array}   engineers   The engineers supplying this blueprint
-          if (feature === 'jitter') {
+ * @param   {string}  grp         The group of the module
-            symbol = '°';
+ * @param   {Object}  m           The module to compare with
-          } else if (featureDef.type === 'percentage') {
+ * @returns {Object}              The react components
-            symbol = '%';
+ */
-          }
+export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
-          let current = m.getModValue(feature);
+  const effects = [];
-          if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+  if (!blueprint || !blueprint.features) {
-            current = Math.round(current / 10) / 10;
+    return undefined;
-          } else if (featureDef.type === 'numeric') {
+  }
-            current /= 100;
+  for (const feature in blueprint.features) {
-          }
+    const featureIsBeneficial = isBeneficial(feature, blueprint.features[feature]);
-          const currentIsBeneficial  = isValueBeneficial(feature, current);
+    const featureDef = Modifications.modifications[feature];
-          effects.push(
+    if (!featureDef.hidden) {
-            <tr key={feature}>
+      let symbol = '';
-              <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+      if (feature === 'jitter') {
-              <td>&nbsp;</td>
+        symbol = '°';
-              <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
+      } else if (featureDef.type === 'percentage') {
-              <td>&nbsp;</td>
+        symbol = '%';
-            </tr>
+      }
-          );
+      let lowerBound = blueprint.features[feature][0];
-        }
+      let upperBound = blueprint.features[feature][1];
-      }
+      if (featureDef.type === 'percentage') {
-    }
+        lowerBound = Math.round(lowerBound * 1000) / 10;
-
+        upperBound = Math.round(upperBound * 1000) / 10;
-    // We also add in any benefits from specials that aren't covered above
+      }
-    if (m.blueprint && m.blueprint.special) {
+      const lowerIsBeneficial  = isValueBeneficial(feature, lowerBound);
-      for (const feature in Modifications.modifierActions[m.blueprint.special.edname]) {
+      const upperIsBeneficial  = isValueBeneficial(feature, upperBound);
-        if (!blueprint.features[feature] && !m.mods.feature) {
+      if (m) {
-          const featureDef = Modifications.modifications[feature];
+        // We have a module - add in the current value
-          if (featureDef && !featureDef.hidden) {
+        let current = m.getModValue(feature);
-            let symbol = '';
+        if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
-            if (feature === 'jitter') {
+          current = Math.round(current / 10) / 10;
-              symbol = '°';
+        } else if (featureDef.type === 'numeric') {
-            } else if (featureDef.type === 'percentage') {
+          current /= 100;
-              symbol = '%';
+        }
-            }
+        const currentIsBeneficial  = isValueBeneficial(feature, current);
-            let current = m.getModValue(feature);
+        effects.push(
-            if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+          <tr key={feature}>
-              current = Math.round(current / 10) / 10;
+            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
-            } else if (featureDef.type === 'numeric') {
+            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
-              current /= 100;
+            <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
-            }
+            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
-            const currentIsBeneficial  = isValueBeneficial(feature, current);
+          </tr>
-            effects.push(
+        );
-              <tr key={feature}>
+      } else {
-                <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+        // We do not have a module, no value
-                <td>&nbsp;</td>
+        effects.push(
-                <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
+          <tr key={feature}>
-                <td>&nbsp;</td>
+            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
-              </tr>
+            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
-            );
+            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
-          }
+          </tr>
-        }
+        );
-      }
+      }
-    }
+    }
-  }
+  }
-
+  if (m) {
-  let components;
+    // Because we have a module add in any benefits that aren't part of the primary blueprint
-  if (!m) {
+    for (const feature in m.mods) {
-    components = [];
+      if (!blueprint.features[feature]) {
-    for (const component in blueprint.components) {
+        const featureDef = Modifications.modifications[feature];
-      components.push(
+        if (featureDef && !featureDef.hidden) {
-        <tr key={component}>
+          let symbol = '';
-          <td style={{ textAlign: 'left' }}>{translate(component)}</td>
+          if (feature === 'jitter') {
-          <td style={{ textAlign: 'right' }}>{blueprint.components[component]}</td>
+            symbol = '°';
-        </tr>
+          } else if (featureDef.type === 'percentage') {
-      );
+            symbol = '%';
-    }
+          }
-  }
+          let current = m.getModValue(feature);
-
+          if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
-  let engineersList;
+            current = Math.round(current / 10) / 10;
-  if (engineers) {
+          } else if (featureDef.type === 'numeric') {
-    engineersList = [];
+            current /= 100;
-    for (const engineer of engineers) {
+          }
-      engineersList.push(
+          const currentIsBeneficial  = isValueBeneficial(feature, current);
-        <tr key={engineer}>
+          effects.push(
-          <td style={{ textAlign: 'left' }}>{engineer}</td>
+            <tr key={feature}>
-        </tr>
+              <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
-      );
+              <td>&nbsp;</td>
-    }
+              <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
-  }
+              <td>&nbsp;</td>
-
+            </tr>
-  return (
+          );
-    <div>
+        }
-      <table width='100%'>
+      }
-        <thead>
+    }
-         <tr>
+
-           <td>{translate('feature')}</td>
+    // We also add in any benefits from specials that aren't covered above
-           <td>{translate('worst')}</td>
+    if (m.blueprint && m.blueprint.special) {
-            {m ? <td>{translate('current')}</td> : null }
+      for (const feature in Modifications.modifierActions[m.blueprint.special.edname]) {
-           <td>{translate('best')}</td>
+        if (!blueprint.features[feature] && !m.mods.feature) {
-         </tr>
+          const featureDef = Modifications.modifications[feature];
-        </thead>
+          if (featureDef && !featureDef.hidden) {
-        <tbody>
+            let symbol = '';
-          {effects}
+            if (feature === 'jitter') {
-        </tbody>
+              symbol = '°';
-      </table>
+            } else if (featureDef.type === 'percentage') {
-      { components ?  <table width='100%'>
+              symbol = '%';
-        <thead>
+            }
-         <tr>
+            let current = m.getModValue(feature);
-           <td>{translate('component')}</td>
+            if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
-           <td>{translate('amount')}</td>
+              current = Math.round(current / 10) / 10;
-         </tr>
+            } else if (featureDef.type === 'numeric') {
-        </thead>
+              current /= 100;
-        <tbody>
+            }
-          {components}
+            const currentIsBeneficial  = isValueBeneficial(feature, current);
-        </tbody>
+            effects.push(
-      </table> : null }
+              <tr key={feature}>
-      { engineersList ? <table width='100%'>
+                <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
-        <thead>
+                <td>&nbsp;</td>
-         <tr>
+                <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
-           <td>{translate('engineers')}</td>
+                <td>&nbsp;</td>
-         </tr>
+              </tr>
-        </thead>
+            );
-        <tbody>
+          }
-          {engineersList}
+        }
-        </tbody>
+      }
-      </table>  : null }
+    }
-    </div>
+  }
-  );
+
-}
+  let components;
-
+  if (!m) {
-/**
+    components = [];
- * Is this blueprint feature beneficial?
+    for (const component in blueprint.components) {
- * @param   {string}  feature    The name of the feature
+      components.push(
- * @param   {array}   values     The value of the feature
+        <tr key={component}>
- * @returns {boolean}            True if this feature is beneficial
+          <td style={{ textAlign: 'left' }}>{translate(component)}</td>
- */
+          <td style={{ textAlign: 'right' }}>{blueprint.components[component]}</td>
-export function isBeneficial(feature, values) {
+        </tr>
-  const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0));
+      );
-  if (Modifications.modifications[feature].higherbetter) {
+    }
-    return !fact;
+  }
-  } else {
+
-    return fact;
+  let engineersList;
-  }
+  if (engineers) {
-}
+    engineersList = [];
-
+    for (const engineer of engineers) {
-/**
+      engineersList.push(
- * Is this feature value beneficial?
+        <tr key={engineer}>
- * @param   {string}  feature    The name of the feature
+          <td style={{ textAlign: 'left' }}>{engineer}</td>
- * @param   {number}  value      The value of the feature
+        </tr>
- * @returns {boolean}            True if this value is beneficial
+      );
- */
+    }
-export function isValueBeneficial(feature, value) {
+  }
-  if (Modifications.modifications[feature].higherbetter) {
+
-    return value > 0;
+  return (
-  } else {
+    <div>
-    return value < 0;
+      <table width='100%'>
-  }
+        <thead>
-}
+         <tr>
-
+           <td>{translate('feature')}</td>
-/**
+           <td>{translate('worst')}</td>
- * Get a blueprint with a given name and an optional module
+            {m ? <td>{translate('current')}</td> : null }
- * @param   {string} name    The name of the blueprint
+           <td>{translate('best')}</td>
- * @param   {Object} module  The module for which to obtain this blueprint
+         </tr>
- * @returns {Object}         The matching blueprint
+        </thead>
- */
+        <tbody>
-export function getBlueprint(name, module) {
+          {effects}
-  // Start with a copy of the blueprint
+        </tbody>
-  const blueprint = JSON.parse(JSON.stringify(Modifications.blueprints[name]));
+      </table>
-  if (module) {
+      { components ?  <table width='100%'>
-    if (module.grp === 'bh' || module.grp === 'hr' || module.grp === 'sg' || module.grp === 'psg' || module.grp === 'bsg') {
+        <thead>
-      // Bulkheads, hull reinforcements and shield generators need to have their resistances altered by the base values
+         <tr>
-      for (const grade in blueprint.grades) {
+           <td>{translate('component')}</td>
-        for (const feature in blueprint.grades[grade].features) {
+           <td>{translate('amount')}</td>
-          if (feature === 'explres') {
+         </tr>
-            blueprint.grades[grade].features[feature][0] *= (1 - module.explres);
+        </thead>
-            blueprint.grades[grade].features[feature][1] *= (1 - module.explres);
+        <tbody>
-          }
+          {components}
-          if (feature === 'kinres') {
+        </tbody>
-            blueprint.grades[grade].features[feature][0] *= (1 - module.kinres);
+      </table> : null }
-            blueprint.grades[grade].features[feature][1] *= (1 - module.kinres);
+      { engineersList ? <table width='100%'>
-          }
+        <thead>
-          if (feature === 'thermres') {
+         <tr>
-            blueprint.grades[grade].features[feature][0] *= (1 - module.thermres);
+           <td>{translate('engineers')}</td>
-            blueprint.grades[grade].features[feature][1] *= (1 - module.thermres);
+         </tr>
-          }
+        </thead>
-        }
+        <tbody>
-      }
+          {engineersList}
-    }
+        </tbody>
-    if (module.grp === 'sb') {
+      </table>  : null }
-      // Shield boosters are treated internally as straight modifiers, so rather than (for example)
+    </div>
-      // being a 4% boost they are a 104% multiplier.  We need to fix the values here so that they look
+  );
-      // accurate as per the information in Elite
+}
-      for (const grade in blueprint.grades) {
+
-        for (const feature in blueprint.grades[grade].features) {
+/**
-          if (feature === 'shieldboost') {
+ * Is this blueprint feature beneficial?
-            blueprint.grades[grade].features[feature][0] = ((1 + blueprint.grades[grade].features[feature][0]) * (1 + module.shieldboost) - 1) / module.shieldboost - 1;
+ * @param   {string}  feature    The name of the feature
-            blueprint.grades[grade].features[feature][1] = ((1 + blueprint.grades[grade].features[feature][1]) * (1 + module.shieldboost) - 1) / module.shieldboost - 1;
+ * @param   {array}   values     The value of the feature
-          }
+ * @returns {boolean}            True if this feature is beneficial
-        }
+ */
-      }
+export function isBeneficial(feature, values) {
-    }
+  const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0));
-  }
+  if (Modifications.modifications[feature].higherbetter) {
-  return blueprint;
+    return !fact;
-}
+  } else {
-
+    return fact;
-/**
+  }
- * Provide 'worst' primary modifications
+}
- * @param {Object}      ship      The ship for which to perform the modifications
+
- * @param {Object}      m         The module for which to perform the modifications
+/**
- */
+ * Is this feature value beneficial?
-export function setWorst(ship, m) {
+ * @param   {string}  feature    The name of the feature
-  ship.clearModifications(m);
+ * @param   {number}  value      The value of the feature
-  const features = m.blueprint.grades[m.blueprint.grade].features;
+ * @returns {boolean}            True if this value is beneficial
-  for (const featureName in features) {
+ */
-    const value = features[featureName][0];
+export function isValueBeneficial(feature, value) {
-    _setValue(ship, m, featureName, value);
+  if (Modifications.modifications[feature].higherbetter) {
-  }
+    return value > 0;
-}
+  } else {
-
+    return value < 0;
-/**
+  }
- * Provide 'best' primary modifications
+}
- * @param {Object}      ship      The ship for which to perform the modifications
+
- * @param {Object}      m         The module for which to perform the modifications
+/**
- */
+ * Get a blueprint with a given name and an optional module
-export function setBest(ship, m) {
+ * @param   {string} name    The name of the blueprint
-  ship.clearModifications(m);
+ * @param   {Object} module  The module for which to obtain this blueprint
-  const features = m.blueprint.grades[m.blueprint.grade].features;
+ * @returns {Object}         The matching blueprint
-  for (const featureName in features) {
+ */
-    const value = features[featureName][1];
+export function getBlueprint(name, module) {
-    _setValue(ship, m, featureName, value);
+  // Start with a copy of the blueprint
-  }
+  const findMod = val => Object.keys(Modifications.blueprints).find(elem => elem.toString().toLowerCase().search(val.toString().toLowerCase().replace(/(OutfittingFieldType_|persecond)/igm, '')) >= 0);
-}
+  const found = Modifications.blueprints[findMod(name)];
-
+  if (!found || !found.fdname) {
-/**
+    return {};
- * Provide 'extreme' primary modifications
+  }
- * @param {Object}      ship      The ship for which to perform the modifications
+  const blueprint = JSON.parse(JSON.stringify(found));
- * @param {Object}      m         The module for which to perform the modifications
+  if (module) {
- */
+    if (module.grp === 'sb') {
-export function setExtreme(ship, m) {
+      // Shield boosters are treated internally as straight modifiers, so rather than (for example)
-  ship.clearModifications(m);
+      // being a 4% boost they are a 104% multiplier.  We need to fix the values here so that they look
-  const features = m.blueprint.grades[m.blueprint.grade].features;
+      // accurate as per the information in Elite
-  for (const featureName in features) {
+      for (const grade in blueprint.grades) {
-    let value;
+        for (const feature in blueprint.grades[grade].features) {
-    if (Modifications.modifications[featureName].higherbetter) {
+          if (feature === 'shieldboost') {
-      // Higher is better, but is this making it better or worse?
+            blueprint.grades[grade].features[feature][0] = ((1 + blueprint.grades[grade].features[feature][0]) * (1 + module.shieldboost) - 1) / module.shieldboost - 1;
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+            blueprint.grades[grade].features[feature][1] = ((1 + blueprint.grades[grade].features[feature][1]) * (1 + module.shieldboost) - 1) / module.shieldboost - 1;
-        value = features[featureName][0];
+          }
-      } else {
+        }
-        value = features[featureName][1];
+      }
-      }
+    }
-    } else {
+  }
-      // Higher is worse, but is this making it better or worse?
+  return blueprint;
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+}
-        value = features[featureName][1];
+
-      } else {
+/**
-        value = features[featureName][0];
+ * Provide 'percent' primary modifications
-      }
+ * @param {Object}      ship      The ship for which to perform the modifications
-    }
+ * @param {Object}      m         The module for which to perform the modifications
-
+ * @param {Number} percent The percent to set values to of full.
-    _setValue(ship, m, featureName, value);
+ */
-  }
+export function setPercent(ship, m, percent) {
-}
+  ship.clearModifications(m);
-
+  // Pick given value as multiplier
-/**
+  const mult = percent / 100;
- * Provide 'random' primary modifications
+  const features = m.blueprint.grades[m.blueprint.grade].features;
- * @param {Object}      ship      The ship for which to perform the modifications
+  for (const featureName in features) {
- * @param {Object}      m         The module for which to perform the modifications
+    let value;
- */
+    if (Modifications.modifications[featureName].higherbetter) {
-export function setRandom(ship, m) {
+      // Higher is better, but is this making it better or worse?
-  ship.clearModifications(m);
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
-  // Pick a single value for our randomness
+        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * mult);
-  const mult = Math.random();
+      } else {
-  const features = m.blueprint.grades[m.blueprint.grade].features;
+        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * mult);
-  for (const featureName in features) {
+      }
-    let value;
+    } else {
-    if (Modifications.modifications[featureName].higherbetter) {
+      // Higher is worse, but is this making it better or worse?
-      // Higher is better, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * mult);
-        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * mult);
+      } else {
-      } else {
+        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * mult);
-        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * mult);
+      }
-      }
+    }
-    } else {
+
-      // Higher is worse, but is this making it better or worse?
+    _setValue(ship, m, featureName, value);
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+  }
-        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * mult);
+}
-      } else {
+
-        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * mult);
+/**
-      }
+ * Provide 'random' primary modifications
-    }
+ * @param {Object}      ship      The ship for which to perform the modifications
-
+ * @param {Object}      m         The module for which to perform the modifications
-    _setValue(ship, m, featureName, value);
+ */
-  }
+export function setRandom(ship, m) {
-}
+  // Pick a single value for our randomness
-
+  setPercent(ship, m, Math.random() * 100);
-/**
+}
- * Set a modification feature value
+
- * @param {Object}      ship          The ship for which to perform the modifications
+/**
- * @param {Object}      m             The module for which to perform the modifications
+ * Set a modification feature value
- * @param {string}      featureName   The feature being set
+ * @param {Object}      ship          The ship for which to perform the modifications
- * @param {number}      value         The value being set for the feature
+ * @param {Object}      m             The module for which to perform the modifications
- */
+ * @param {string}      featureName   The feature being set
-function _setValue(ship, m, featureName, value) {
+ * @param {number}      value         The value being set for the feature
-  if (Modifications.modifications[featureName].type == 'percentage') {
+ */
-    ship.setModification(m, featureName, value * 10000);
+function _setValue(ship, m, featureName, value) {
-  } else if (Modifications.modifications[featureName].type == 'numeric') {
+  if (Modifications.modifications[featureName].type == 'percentage') {
-    ship.setModification(m, featureName, value * 100);
+    ship.setModification(m, featureName, value * 10000);
-  } else {
+  } else if (Modifications.modifications[featureName].type == 'numeric') {
-    ship.setModification(m, featureName, value);
+    ship.setModification(m, featureName, value * 100);
-  }
+  } else {
-}
+    ship.setModification(m, featureName, value);
+  }
+}
+
+/**
+ * Provide 'percent' primary query
+ * @param {Object}      m         The module for which to perform the query
+ * @returns {Number} percent The percentage indicator of current applied values.
+ */
+export function getPercent(m) {
+  let result = null;
+  const features = m.blueprint.grades[m.blueprint.grade].features;
+  for (const featureName in features) {
+    if (features[featureName][0] === features[featureName][1]) {
+      continue;
+    }
+
+    let value = _getValue(m, featureName);
+    let mult;
+    if (Modifications.modifications[featureName].higherbetter) {
+      // Higher is better, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
+      } else {
+        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
+      }
+    } else {
+      // Higher is worse, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
+      } else {
+        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
+      }
+    }
+
+    if (result && result != mult) {
+      return null;
+    } else if (result != mult) {
+      result = mult;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Query a feature value
+ * @param {Object}      m             The module for which to perform the query
+ * @param {string}      featureName   The feature being queried
+ * @returns {number}  The value of the modification as a %
+ */
+function _getValue(m, featureName) {
+  if (Modifications.modifications[featureName].type == 'percentage') {
+    return m.getModValue(featureName, true) / 10000;
+  } else if (Modifications.modifications[featureName].type == 'numeric') {
+    return m.getModValue(featureName, true) / 100;
+  } else {
+    return m.getModValue(featureName, true);
+  }
+}

src/app/utils/CompanionApiUtils.js

@@ -35,13 +35,15 @@ const SHIP_FD_NAME_TO_CORIOLIS_NAME = {
   'Type6': 'type_6_transporter',
   'Type7': 'type_7_transport',
   'Type9': 'type_9_heavy',
+  'Type9_Military': 'type_10_defender',
+  'TypeX': 'alliance_chieftain',
   'Viper': 'viper',
   'Viper_MkIV': 'viper_mk_iv',
   'Vulture': 'vulture'
 };
 
 // Mapping from hardpoint class to name in companion API
-const HARDPOINT_NUM_TO_CLASS = {
+export const HARDPOINT_NUM_TO_CLASS = {
   0: 'Tiny',
   1: 'Small',
   2: 'Medium',
@@ -104,7 +106,7 @@ function _moduleFromEdId(edId) {
  * @return {string} the Coriolis model of the ship
  */
 function _shipModelFromEDName(edName) {
-  return SHIP_FD_NAME_TO_CORIOLIS_NAME[edName];
+  return SHIP_FD_NAME_TO_CORIOLIS_NAME[Object.keys(SHIP_FD_NAME_TO_CORIOLIS_NAME).find(elem => elem.toLowerCase() === edName.toLowerCase())];
 }
 
 /**
@@ -113,7 +115,7 @@ function _shipModelFromEDName(edName) {
  * @return {string} the Coriolis model of the ship
  */
 export function shipModelFromJson(json) {
-  return _shipModelFromEDName(json.name);
+  return _shipModelFromEDName(json.name || json.Ship);
 }
 
 /**
@@ -141,30 +143,34 @@ export function shipFromJson(json) {
     ship.cargoHatch.enabled = false;
     ship.cargoHatch.priority = 4;
   }
-  
+
+  let rootModule;
+
   // Add the bulkheads
   const armourJson = json.modules.Armour.module;
-  if (armourJson.name.endsWith('_Armour_Grade1')) {
+  if (armourJson.name.toLowerCase().endsWith('_armour_grade1')) {
     ship.useBulkhead(0, true);
-  } else if (armourJson.name.endsWith('_Armour_Grade2')) {
+  } else if (armourJson.name.toLowerCase().endsWith('_armour_grade2')) {
     ship.useBulkhead(1, true);
-  } else if (armourJson.name.endsWith('_Armour_Grade3')) {
+  } else if (armourJson.name.toLowerCase().endsWith('_armour_grade3')) {
     ship.useBulkhead(2, true);
-  } else if (armourJson.name.endsWith('_Armour_Mirrored')) {
+  } else if (armourJson.name.toLowerCase().endsWith('_armour_mirrored')) {
     ship.useBulkhead(3, true);
-  } else if (armourJson.name.endsWith('_Armour_Reactive')) {
+  } else if (armourJson.name.toLowerCase().endsWith('_armour_reactive')) {
     ship.useBulkhead(4, true);
   } else {
     throw 'Unknown bulkheads "' + armourJson.name + '"';
   }
   ship.bulkheads.enabled = true;
-  if (armourJson.modifiers) _addModifications(ship.bulkheads.m, armourJson.modifiers, armourJson.recipeName, armourJson.recipeLevel);
+  rootModule = json.modules.Armour;
+  if (rootModule.WorkInProgress_modifications) _addModifications(ship.bulkheads.m, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
 
   // Add the standard modules
   // Power plant
   const powerplantJson = json.modules.PowerPlant.module;
   const powerplant = _moduleFromEdId(powerplantJson.id);
-  if (powerplantJson.modifiers) _addModifications(powerplant, powerplantJson.modifiers, powerplantJson.recipeName, powerplantJson.recipeLevel);
+  rootModule = json.modules.PowerPlant;
+  if (rootModule.WorkInProgress_modifications) _addModifications(powerplant, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
   ship.use(ship.standard[0], powerplant, true);
   ship.standard[0].enabled = powerplantJson.on === true;
   ship.standard[0].priority = powerplantJson.priority;
@@ -172,7 +178,8 @@ export function shipFromJson(json) {
   // Thrusters
   const thrustersJson = json.modules.MainEngines.module;
   const thrusters = _moduleFromEdId(thrustersJson.id);
-  if (thrustersJson.modifiers) _addModifications(thrusters, thrustersJson.modifiers, thrustersJson.recipeName, thrustersJson.recipeLevel);
+  rootModule = json.modules.MainEngines;
+  if (rootModule.WorkInProgress_modifications) _addModifications(thrusters, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
   ship.use(ship.standard[1], thrusters, true);
   ship.standard[1].enabled = thrustersJson.on === true;
   ship.standard[1].priority = thrustersJson.priority;
@@ -180,7 +187,8 @@ export function shipFromJson(json) {
   // FSD
   const frameshiftdriveJson = json.modules.FrameShiftDrive.module;
   const frameshiftdrive = _moduleFromEdId(frameshiftdriveJson.id);
-  if (frameshiftdriveJson.modifiers) _addModifications(frameshiftdrive, frameshiftdriveJson.modifiers, frameshiftdriveJson.recipeName, frameshiftdriveJson.recipeLevel);
+  rootModule = json.modules.FrameShiftDrive;
+  if (rootModule.WorkInProgress_modifications) _addModifications(frameshiftdrive, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
   ship.use(ship.standard[2], frameshiftdrive, true);
   ship.standard[2].enabled = frameshiftdriveJson.on === true;
   ship.standard[2].priority = frameshiftdriveJson.priority;
@@ -188,7 +196,8 @@ export function shipFromJson(json) {
   // Life support
   const lifesupportJson = json.modules.LifeSupport.module;
   const lifesupport = _moduleFromEdId(lifesupportJson.id);
-  if (lifesupportJson.modifiers)_addModifications(lifesupport, lifesupportJson.modifiers, lifesupportJson.recipeName, lifesupportJson.recipeLevel);
+  rootModule = json.modules.LifeSupport;
+  if (rootModule.WorkInProgress_modifications) _addModifications(lifesupport, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
   ship.use(ship.standard[3], lifesupport, true);
   ship.standard[3].enabled = lifesupportJson.on === true;
   ship.standard[3].priority = lifesupportJson.priority;
@@ -196,7 +205,8 @@ export function shipFromJson(json) {
   // Power distributor
   const powerdistributorJson = json.modules.PowerDistributor.module;
   const powerdistributor = _moduleFromEdId(powerdistributorJson.id);
-  if (powerdistributorJson.modifiers) _addModifications(powerdistributor, powerdistributorJson.modifiers, powerdistributorJson.recipeName, powerdistributorJson.recipeLevel);
+  rootModule = json.modules.PowerDistributor;
+  if (rootModule.WorkInProgress_modifications) _addModifications(powerdistributor, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
   ship.use(ship.standard[4], powerdistributor, true);
   ship.standard[4].enabled = powerdistributorJson.on === true;
   ship.standard[4].priority = powerdistributorJson.priority;
@@ -204,7 +214,8 @@ export function shipFromJson(json) {
   // Sensors
   const sensorsJson = json.modules.Radar.module;
   const sensors = _moduleFromEdId(sensorsJson.id);
-  if (sensorsJson.modifiers) _addModifications(sensors, sensorsJson.modifiers, sensorsJson.recipeName, sensorsJson.recipeLevel);
+  rootModule = json.modules.Radar;
+  if (rootModule.WorkInProgress_modifications) _addModifications(sensors, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
   ship.use(ship.standard[5], sensors, true);
   ship.standard[5].enabled = sensorsJson.on === true;
   ship.standard[5].priority = sensorsJson.priority;
@@ -240,7 +251,8 @@ export function shipFromJson(json) {
     } else {
       const hardpointJson = hardpointSlot.module;
       const hardpoint = _moduleFromEdId(hardpointJson.id);
-      if (hardpointJson.modifiers) _addModifications(hardpoint, hardpointJson.modifiers, hardpointJson.recipeName, hardpointJson.recipeLevel);
+      rootModule = hardpointSlot;
+      if (rootModule.WorkInProgress_modifications) _addModifications(hardpoint, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel, rootModule.specialModifications);
       ship.use(ship.hardpoints[hardpointArrayNum], hardpoint, true);
       ship.hardpoints[hardpointArrayNum].enabled = hardpointJson.on === true;
       ship.hardpoints[hardpointArrayNum].priority = hardpointJson.priority;
@@ -282,7 +294,8 @@ export function shipFromJson(json) {
     } else {
       const internalJson = internalSlot.module;
       const internal = _moduleFromEdId(internalJson.id);
-      if (internalJson.modifiers) _addModifications(internal, internalJson.modifiers, internalJson.recipeName, internalJson.recipeLevel);
+      rootModule = internalSlot;
+      if (rootModule.WorkInProgress_modifications) _addModifications(internal, rootModule.WorkInProgress_modifications, rootModule.engineer.recipeName, rootModule.engineer.recipeLevel);
       ship.use(ship.internal[i], internal, true);
       ship.internal[i].enabled = internalJson.on === true;
       ship.internal[i].priority = internalJson.priority;
@@ -299,35 +312,48 @@ export function shipFromJson(json) {
  * @param {Object} modifiers the modifiers
  * @param {Object} blueprint the blueprint of the modification
  * @param {Object} grade the grade of the modification
+ * @param {Object} specialModifications special modification
  */
-function _addModifications(module, modifiers, blueprint, grade) {
+function _addModifications(module, modifiers, blueprint, grade, specialModifications) {
-  if (!modifiers || !modifiers.modifiers) return;
+  if (!modifiers) return;
-  
   let special;
-  for (const i in modifiers.modifiers) {
+  if (specialModifications) {
+    special = Modifications.specials[Object.keys(specialModifications)[0]];
+  }
+  for (const i in modifiers) {
     // Some special modifications
-    if (modifiers.modifiers[i].name === 'mod_weapon_clip_size_override') {
+    if (modifiers[i].name === 'mod_weapon_clip_size_override') {
       // This is a numeric addition to the clip size, but we need to work it out in terms of being a percentage so
       // that it works the same as other modifications
       const origClip = module.clip || 1;
-      module.setModValue('clip', ((modifiers.modifiers[i].value  - origClip) / origClip) * 10000);
+      module.setModValue('clip', ((modifiers[i].value  - origClip) / origClip) * 10000);
-    } else if (modifiers.modifiers[i].name === 'mod_weapon_burst_size') {
+    } else if (modifiers[i].name === 'mod_weapon_burst_size') {
       // This is an absolute number that acts as an override
-      module.setModValue('burst', modifiers.modifiers[i].value * 100);
+      module.setModValue('burst', modifiers[i].value * 100);
-    } else if (modifiers.modifiers[i].name === 'mod_weapon_burst_rof') {
+    } else if (modifiers[i].name === 'mod_weapon_burst_rof') {
       // This is an absolute number that acts as an override
-      module.setModValue('burstrof', modifiers.modifiers[i].value * 100);
+      module.setModValue('burstrof', modifiers[i].value * 100);
-    } else if (modifiers.modifiers[i].name === 'mod_weapon_falloffrange_from_range') {
+    } else if (modifiers[i].name === 'mod_weapon_falloffrange_from_range') {
       // Obtain the falloff value directly from the range
       module.setModValue('fallofffromrange', 1);
-    } else if (modifiers.modifiers[i].name && modifiers.modifiers[i].name.startsWith('special_')) {
+    } else if (modifiers[i].name && modifiers[i].name.startsWith('special_')) {
       // We don't add special effects directly, but keep a note of them so they can be added when fetching values
-      special = Modifications.specials[modifiers.modifiers[i].name];
+      special = Modifications.specials[modifiers[i].name];
     } else {
       // Look up the modifiers to find what we need to do
-      const modifierActions = Modifications.modifierActions[modifiers.modifiers[i].name];
+      const modifierActions = Modifications.modifierActions[i];
-      const value = modifiers.modifiers[i].value;
+      let value;
-
+      if (i === 'OutfittingFieldType_DefenceModifierShieldMultiplier') {
+        value = modifiers[i].value - 1;
+      } else if (i === 'OutfittingFieldType_DefenceModifierHealthMultiplier' && blueprint.startsWith('Armour_')) {
+        value = (modifiers[i].value - module.hullboost) / module.hullboost;
+      } else if (i === 'OutfittingFieldType_DefenceModifierHealthMultiplier') {
+        value = modifiers[i].value / module.hullboost;
+      } else if (i === 'OutfittingFieldType_RateOfFire') {
+        value = (1 / Math.abs(modifiers[i].value));
+      } else {
+        value = modifiers[i].value - 1;
+      }
       // Carry out the required changes
       for (const action in modifierActions) {
         if (isNaN(modifierActions[action])) {
@@ -354,7 +380,7 @@ function _addModifications(module, modifiers, blueprint, grade) {
       module.blueprint.special = special;
     }
   }
-  
+
   // Need to fix up a few items
 
   // Shield boosters are treated internally as straight modifiers, so rather than (for example)
@@ -377,7 +403,7 @@ function _addModifications(module, modifiers, blueprint, grade) {
       module.setModValue('thermres', ((module.getModValue('thermres') / 10000) * -1) * 10000);
     }
   }
-  
+
   // Shield generator resistance is actually a damage modifier, so needs to be inverted.
   // In addition, the modification is based off the inherent resistance of the module
   if (ModuleUtils.isShieldGenerator(module.grp)) {
@@ -405,7 +431,7 @@ function _addModifications(module, modifiers, blueprint, grade) {
       module.setModValue('thermres', ((1 - (1 - module.thermres) * (1 + module.getModValue('thermres') / 10000)) - module.thermres) * 10000);
     }
   }
-  
+
   // Bulkhead resistance is actually a damage modifier, so needs to be inverted.
   // In addition, the modification is based off the inherent resistance of the module
   if (module.grp == 'bh') {
@@ -423,7 +449,7 @@ function _addModifications(module, modifiers, blueprint, grade) {
   // Bulkhead boost is based off the inherent boost of the module
   if (module.grp == 'bh') {
     const alteredBoost = (1 + module.hullboost) * (1 + module.getModValue('hullboost') / 10000) - 1;
-    module.setModValue('hullboost', (alteredBoost / module.hullboost - 1) * 10000);
+    module.setModValue('hullboost', (alteredBoost / module.hullboost - 1) * 1000);
   }
 
   // Jitter is an absolute number, so we need to divide it by 100
@@ -431,11 +457,6 @@ function _addModifications(module, modifiers, blueprint, grade) {
     module.setModValue('jitter', module.getModValue('jitter') / 100);
   }
 
-  // FD uses interval between bursts internally, so we need to translate this to a real rate of fire
-  if (module.getModValue('rof')) {
-    module.setModValue('rof', ((1 / (1 + module.getModValue('rof') / 10000)) - 1) * 10000);
-  }
-
   // Clip size is rounded up so that the result is a whole number
   if (module.getModValue('clip')) {
     const individual = 1 / (module.clip || 1);

src/app/utils/JournalUtils.js

@@ -0,0 +1,291 @@
+import Ship from '../shipyard/Ship';
+import { HARDPOINT_NUM_TO_CLASS, shipModelFromJson } from './CompanionApiUtils';
+import { Ships } from 'coriolis-data/dist';
+import Module from '../shipyard/Module';
+import { Modules } from 'coriolis-data/dist';
+import { Modifications } from 'coriolis-data/dist';
+import { getBlueprint } from './BlueprintFunctions';
+
+/**
+ * Obtain a module given its FD Name
+ * @param {string} fdname the FD Name of the module
+ * @return {Module} the module
+ */
+function _moduleFromFdName(fdname) {
+  if (!fdname) return null;
+  fdname = fdname.toLowerCase();
+  // Check standard modules
+  for (const grp in Modules.standard) {
+    if (Modules.standard.hasOwnProperty(grp)) {
+      for (const i in Modules.standard[grp]) {
+        if (Modules.standard[grp][i].symbol && Modules.standard[grp][i].symbol.toLowerCase() === fdname) {
+          // Found it
+          return new Module({ template: Modules.standard[grp][i] });
+        }
+      }
+    }
+  }
+
+  // Check hardpoint modules
+  for (const grp in Modules.hardpoints) {
+    if (Modules.hardpoints.hasOwnProperty(grp)) {
+      for (const i in Modules.hardpoints[grp]) {
+        if (Modules.hardpoints[grp][i].symbol && Modules.hardpoints[grp][i].symbol.toLowerCase() === fdname) {
+          // Found it
+          return new Module({ template: Modules.hardpoints[grp][i] });
+        }
+      }
+    }
+  }
+
+  // Check internal modules
+  for (const grp in Modules.internal) {
+    if (Modules.internal.hasOwnProperty(grp)) {
+      for (const i in Modules.internal[grp]) {
+        if (Modules.internal[grp][i].symbol && Modules.internal[grp][i].symbol.toLowerCase() === fdname) {
+          // Found it
+          return new Module({ template: Modules.internal[grp][i] });
+        }
+      }
+    }
+  }
+
+  // Not found
+  return null;
+}
+
+/**
+ * Build a ship from the journal Loadout event JSON
+ * @param {object} json the Loadout event JSON
+ * @return {Ship} the built ship
+ */
+export function shipFromLoadoutJSON(json) {
+// Start off building a basic ship
+  const shipModel = shipModelFromJson(json);
+  if (!shipModel) {
+    throw 'No such ship found: "' + json.Ship + '"';
+  }
+  const shipTemplate = Ships[shipModel];
+
+  let ship = new Ship(shipModel, shipTemplate.properties, shipTemplate.slots);
+  ship.buildWith(null);
+  // Initial Ship building, don't do engineering yet.
+  let opts = [];
+
+  for (const module of json.Modules) {
+    switch (module.Slot.toLowerCase()) {
+      // Cargo Hatch.
+      case 'cargohatch':
+        ship.cargoHatch.enabled = module.On;
+        ship.cargoHatch.priority = module.Priority;
+        break;
+      // Add the bulkheads
+      case 'armour':
+        if (module.Item.toLowerCase().endsWith('_armour_grade1')) {
+          ship.useBulkhead(0, true);
+        } else if (module.Item.toLowerCase().endsWith('_armour_grade2')) {
+          ship.useBulkhead(1, true);
+        } else if (module.Item.toLowerCase().endsWith('_armour_grade3')) {
+          ship.useBulkhead(2, true);
+        } else if (module.Item.toLowerCase().endsWith('_armour_mirrored')) {
+          ship.useBulkhead(3, true);
+        } else if (module.Item.toLowerCase().endsWith('_armour_reactive')) {
+          ship.useBulkhead(4, true);
+        } else {
+          throw 'Unknown bulkheads "' + module.Item + '"';
+        }
+        ship.bulkheads.enabled = true;
+        if (module.Engineering) _addModifications(ship.bulkheads.m, module.Engineering.Modifiers, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
+        break;
+      case 'powerplant':
+        const powerplant = _moduleFromFdName(module.Item);
+        ship.use(ship.standard[0], powerplant, true);
+        ship.standard[0].enabled = module.On;
+        ship.standard[0].priority = module.Priority;
+        if (module.Engineering) _addModifications(powerplant, module.Engineering.Modifiers, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
+        break;
+      case 'mainengines':
+        const thrusters = _moduleFromFdName(module.Item);
+        ship.use(ship.standard[1], thrusters, true);
+        ship.standard[1].enabled = module.On;
+        ship.standard[1].priority = module.Priority;
+        if (module.Engineering) _addModifications(thrusters, module.Engineering.Modifiers, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
+        break;
+      case 'frameshiftdrive':
+        const frameshiftdrive = _moduleFromFdName(module.Item);
+        ship.use(ship.standard[2], frameshiftdrive, true);
+        ship.standard[2].enabled = module.On;
+        ship.standard[2].priority = module.Priority;
+        if (module.Engineering)  _addModifications(frameshiftdrive, module.Engineering.Modifiers, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
+        break;
+      case 'lifesupport':
+        const lifesupport = _moduleFromFdName(module.Item);
+        ship.use(ship.standard[3], lifesupport, true);
+        ship.standard[3].enabled = module.On === true;
+        ship.standard[3].priority = module.Priority;
+        if (module.Engineering) _addModifications(lifesupport, module.Engineering.Modifiers, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
+        break;
+      case 'powerdistributor':
+        const powerdistributor = _moduleFromFdName(module.Item);
+        ship.use(ship.standard[4], powerdistributor, true);
+        ship.standard[4].enabled = module.On;
+        ship.standard[4].priority = module.Priority;
+        if (module.Engineering) _addModifications(powerdistributor, module.Engineering.Modifiers, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
+        break;
+      case 'radar':
+        const sensors = _moduleFromFdName(module.Item);
+        ship.use(ship.standard[5], sensors, true);
+        ship.standard[5].enabled = module.On;
+        ship.standard[5].priority = module.Priority;
+        if (module.Engineering) _addModifications(sensors, module.Engineering.Modifiers, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
+        break;
+      case 'fueltank':
+        const fueltank = _moduleFromFdName(module.Item);
+        ship.use(ship.standard[6], fueltank, true);
+        ship.standard[6].enabled = true;
+        ship.standard[6].priority = 0;
+        break;
+      default:
+    }
+    for (const module of json.Modules) {
+      if (module.Slot.toLowerCase().search(/hardpoint/) !== -1) {
+        // Add hardpoints
+        let hardpoint;
+        let hardpointClassNum = -1;
+        let hardpointSlotNum = -1;
+        let hardpointArrayNum = 0;
+        for (let i in shipTemplate.slots.hardpoints) {
+          if (shipTemplate.slots.hardpoints[i] === hardpointClassNum) {
+            // Another slot of the same class
+            hardpointSlotNum++;
+          } else {
+            // The first slot of a new class
+            hardpointClassNum = shipTemplate.slots.hardpoints[i];
+            hardpointSlotNum = 1;
+          }
+
+          // Now that we know what we're looking for, find it
+          const hardpointName = HARDPOINT_NUM_TO_CLASS[hardpointClassNum] + 'Hardpoint' + hardpointSlotNum;
+          const hardpointSlot = json.Modules.find(elem => elem.Slot.toLowerCase() === hardpointName.toLowerCase());
+          if (!hardpointSlot) {
+            // This can happen with old imports that don't contain new hardpoints
+          } else if (!hardpointSlot) {
+            // No module
+          } else {
+            hardpoint = _moduleFromFdName(hardpointSlot.Item);
+            ship.use(ship.hardpoints[hardpointArrayNum], hardpoint, true);
+            ship.hardpoints[hardpointArrayNum].enabled = hardpointSlot.On;
+            ship.hardpoints[hardpointArrayNum].priority = hardpointSlot.Priority;
+            opts.push({ coriolisMod: hardpoint, json: hardpointSlot });
+          }
+          hardpointArrayNum++;
+        }
+      }
+      if (module.Slot.toLowerCase().search(/slot\d/) !== -1) {
+        let internalSlotNum = 1;
+        let militarySlotNum = 1;
+        for (let i in shipTemplate.slots.internal) {
+          const isMilitary = isNaN(shipTemplate.slots.internal[i]) ? shipTemplate.slots.internal[i].name = 'military' : false;
+
+          // The internal slot might be a standard or a military slot.  Military slots have a different naming system
+          let internalSlot = null;
+          if (isMilitary) {
+            const internalName = 'Military0' + militarySlotNum;
+            internalSlot = json.Modules.find(elem => elem.Slot.toLowerCase() === internalName.toLowerCase());
+            militarySlotNum++;
+          } else {
+            // Slot numbers are not contiguous so handle skips.
+            while (internalSlot === null && internalSlotNum < 99) {
+              // Slot sizes have no relationship to the actual size, either, so check all possibilities
+              for (let slotsize = 0; slotsize < 9; slotsize++) {
+                const internalName = 'Slot' + (internalSlotNum <= 9 ? '0' : '') + internalSlotNum + '_Size' + slotsize;
+                if (json.Modules.find(elem => elem.Slot.toLowerCase() === internalName.toLowerCase())) {
+                  internalSlot = json.Modules.find(elem => elem.Slot.toLowerCase() === internalName.toLowerCase());
+                  break;
+                }
+              }
+              internalSlotNum++;
+            }
+          }
+
+          if (!internalSlot) {
+            // This can happen with old imports that don't contain new slots
+          } else if (!internalSlot) {
+            // No module
+          } else {
+            const internalJson = internalSlot;
+            const internal = _moduleFromFdName(internalJson.Item);
+            ship.use(ship.internal[i], internal, true);
+            ship.internal[i].enabled = internalJson.On === true;
+            ship.internal[i].priority = internalJson.Priority;
+            opts.push({ coriolisMod: internal, json: internalSlot });
+          }
+        }
+      }
+    }
+  }
+
+  for (const i of opts) {
+    if (i.json.Engineering) _addModifications(i.coriolisMod, i.json.Engineering.Modifiers, i.json.Engineering.BlueprintName, i.json.Engineering.Level, i.json.Engineering.ExperimentalEffect);
+  }
+  // We don't have any information on it so guess it's priority 5 and disabled
+  if (!ship.cargoHatch) {
+    ship.cargoHatch.enabled = false;
+    ship.cargoHatch.priority = 4;
+  }
+
+  // Now update the ship's codes before returning it
+  return ship.updatePowerPrioritesString().updatePowerEnabledString().updateModificationsString();
+}
+
+/**
+ * Add the modifications for a module
+ * @param {Module} module the module
+ * @param {Object} modifiers the modifiers
+ * @param {Object} blueprint the blueprint of the modification
+ * @param {Object} grade the grade of the modification
+ * @param {Object} specialModifications special modification
+ */
+function _addModifications(module, modifiers, blueprint, grade, specialModifications) {
+  if (!modifiers) return;
+  let special;
+  if (specialModifications) {
+    special = Modifications.specials[specialModifications];
+  }
+  for (const i in modifiers) {
+    // Some special modifications
+    // Look up the modifiers to find what we need to do
+    const findMod = val => Object.keys(Modifications.modifierActions).find(elem => elem.toString().toLowerCase().replace(/(outfittingfieldtype_|persecond)/igm, '') === val.toString().toLowerCase().replace(/(outfittingfieldtype_|persecond)/igm, ''));
+    const modifierActions = Modifications.modifierActions[findMod(modifiers[i].Label)];
+    // TODO: Figure out how to scale this value.
+    if (!!modifiers[i].LessIsGood) {
+
+    }
+    let value = (modifiers[i].Value / modifiers[i].OriginalValue * 100 - 100)  * 100;
+    if (value === Infinity) {
+      value = modifiers[i].Value * 100;
+    }
+    if (modifiers[i].Label.search('Resistance') >= 0) {
+      value = (modifiers[i].Value * 100) - (modifiers[i].OriginalValue * 100);
+    }
+    // Carry out the required changes
+    for (const action in modifierActions) {
+      if (isNaN(modifierActions[action])) {
+        module.setModValue(action, modifierActions[action]);
+      } else {
+        module.setModValue(action, value);
+      }
+    }
+  }
+
+  // Add the blueprint definition, grade and special
+  if (blueprint) {
+    module.blueprint = getBlueprint(blueprint, module);
+    if (grade) {
+      module.blueprint.grade = Number(grade);
+    }
+    if (special) {
+      module.blueprint.special = special;
+    }
+  }
+}

src/app/utils/ShortenUrl.js

@@ -8,7 +8,7 @@ import request from 'superagent';
  * @param  {function} error     Failure/Error callback
  */ 
 export default function shorternUrl(url, success, error) {
-  shortenUrlEddp(url, success, error);
+  shortenUrlOrbis(url, success, error);
 }
 
 const SHORTEN_API_GOOGLE = 'https://www.googleapis.com/urlshortener/v1/url?key=';
@@ -64,3 +64,32 @@ function shortenUrlEddp(url, success, error) {
     error('Not Online');
   }
 }
+
+const SHORTEN_API_ORBIS = 'https://s.orbis.zone/a';
+/**
+ * Shorten a URL using Orbis's URL shortener API
+ * @param  {string} url        The URL to shorten
+ * @param  {function} success   Success callback
+ * @param  {function} error     Failure/Error callback
+ */
+function shortenUrlOrbis(url, success, error) {
+  if (window.navigator.onLine) {
+    try {
+      request.post(SHORTEN_API_ORBIS)
+        .field('lsturl', url)
+        .field('format', 'json')
+        .end(function(err, response) {
+          if (err) {
+            error('Bad Request');
+          } else {
+            success(response.body.short);
+          }
+        });
+    } catch (e) {
+      console.log(e)
+      error(e.message ? e.message : e);
+    }
+  } else {
+    error('Not Online');
+  }
+}

src/index.ejs

@@ -38,7 +38,7 @@
     <% } %>
     
     <!-- Piwik -->
-    <script type="text/javascript">
+   <!-- <script type="text/javascript">
       var _paq = _paq || [];
       /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
       _paq.push(["setCookieDomain", "*.coriolis.edcd.io"]);
@@ -51,14 +51,16 @@
         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
         g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
       })();
-    </script>
+    </script>-->
     <!-- End Piwik Code -->
 
     <!-- Bugsnag -->
-    <script
+    <script src="//d2wy8f7a9ursnm.cloudfront.net/v4/bugsnag.min.js"></script>
-    src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js"
+    <script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-plugins/v1/bugsnag-react.min.js"></script>
-    data-apikey="2382691c622937f28f8fa82a1bfd797a"></script>
+    <script>
-
+      window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.CORIOLIS_VERSION || undefined})
+      window.Bugsnag = window.bugsnagClient
+    </script>
   </head>
   <body style="background-color:#000;">
     <section id="coriolis"></section>

src/less/buttons.less

@@ -31,6 +31,50 @@ button {
   }
 }
 
+.button-inline-menu {
+    white-space: nowrap;
+    line-height: 1.5em;
+    text-align: center;
+    margin: 0.5em 0;
+    padding-left: 5px;
+    border-top: 1px solid @primary-disabled;
+    border-bottom: 1px solid @primary-disabled;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: @primary-bg;
+
+   &.warning {
+      border-color: @warning-disabled;
+      color: @warning-disabled;
+      stroke: @warning-disabled;
+
+      .no-touch &:hover {
+        border-color: @warning;
+        color: @warning;
+        stroke: @warning;
+      }
+    }
+
+    &.disabled, &.disabled:hover {
+      cursor: not-allowed;
+      border-color: @disabled;
+      color: @disabled;
+      stroke: @disabled;
+    }
+
+    &.active {
+      border-color: @secondary;
+      color: @secondary;
+      stroke: @secondary;
+    }
+
+	&:hover {
+      border-color: @primary;
+      color: @primary;
+      stroke: @primary;
+    }
+  }
+
 .button-lbl {
   margin-left: 0.5em;
 

src/less/colors.less

@@ -10,6 +10,8 @@
 @secondary: #1FB0FF;  // Light blue
 @warning: #FF3B00;  // Dark Orange
 @disabled: #555;    // Light grey
+@success: #71a052;    // Green
+@purple: #800080;    // Purple
 @primary-disabled: darken(@primary, @disabledDarken);
 @secondary-disabled: darken(@secondary, @disabledDarken);
 @warning-disabled: darken(@warning, @disabledDarken);
@@ -18,6 +20,7 @@
 @bg: rgba(30,30,30,1);
 @bgBlack: #000;
 @primary-bg: fadeout(darken(@primary, 47%), 15%);
+@alt-primary-bg: fadeout(darken(@primary, 42%), 15%); // Lighter brown background
 @secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
 @warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
 

src/less/header.less

@@ -12,6 +12,20 @@
   cursor: pointer;
 }
 
+.view-changes {
+  position: fixed;
+  top: 3em;
+  left: 0;
+  right: 0;
+  height: 3em;
+  z-index: 3;
+  line-height: 3em;
+  text-align: center;
+  background-color: @bg;
+  color: @warning;
+  cursor: pointer;
+}
+
 header {
   background-color: @bg;
   margin: 0;

src/less/modal.less

@@ -54,6 +54,7 @@ textarea {
     width:100%;
     min-height: 10em;
     resize: vertical;
+    user-select: auto;
     margin:2em 0;
   }
 }

src/less/outfit.less

@@ -70,10 +70,29 @@
   padding: 0.5em 0.2em;
   font-size: 0.9em;
 
-  #summaryTable {
+  .summaryTable {
     .user-select-none();
     width: 100%;
     border-collapse: collapse;
+
+    & > thead.blue {
+      background-color: @secondary;
+      border-left: 1px solid @primary-bg;
+      color: @primary-bg;
+    }
+
+    & > thead.green {
+      background-color: @success;
+      border-left: 1px solid @primary-bg;
+      color: @primary-bg;
+    }
+
+    & > thead.purple {
+      background-color: @purple;
+      border-left: 1px solid @primary-bg;
+      color: @primary-bg;
+    }
+
   }
 }
 

src/less/slot.less

@@ -41,6 +41,10 @@
     overflow: hidden;
   }
 
+  input.cb:focus {
+    border-color:#fff;
+  }
+
   .l {
     text-transform: capitalize;
     margin-right: 0.8em;

src/less/table.less

@@ -54,6 +54,10 @@ tbody tr {
   .no-touch &.highlight:hover, .no-touch &.highlighted {
     background-color: @warning-bg;
   }
+
+  &.alt {
+    background-color: @alt-primary-bg;
+  }
 }
 
 td {

webpack.config.dev.js

@@ -1,28 +1,30 @@
-var path = require('path');
+const path = require('path')
-var exec = require('child_process').exec;
+const exec = require('child_process').exec
-var webpack = require('webpack');
+const webpack = require('webpack')
-var pkgJson = require('./package');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
-var HtmlWebpackPlugin = require("html-webpack-plugin");
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+const WebpackNotifierPlugin = require('webpack-notifier')
+const pkgJson = require('./package')
 
 function CopyDirPlugin(source, destination) {
-  this.source = source;
+  this.source = source
-  this.destination = destination;
+  this.destination = destination
+}
+
+CopyDirPlugin.prototype.apply = function (compiler) {
+  compiler.plugin('done', () => {
+    console.log(compiler.outputPath, this.destination)
+    exec('cp -r ' + this.source + ' ' + path.join(compiler.outputPath, this.destination))
+  })
 }
-CopyDirPlugin.prototype.apply = function(compiler) {
-  compiler.plugin('done', function() {
-    console.log(compiler.outputPath, this.destination);
-    exec('cp -r ' + this.source + ' ' + path.join(compiler.outputPath, this.destination));
-  }.bind(this));
-};
 
 module.exports = {
-  devtool: 'eval',
+  devtool: 'source-map',
   devServer: {
-    headers: { "Access-Control-Allow-Origin": "*" }
+    headers: {'Access-Control-Allow-Origin': '*'}
   },
   entry: {
-    app: [ 'webpack-dev-server/client?http://0.0.0.0:3300', 'webpack/hot/only-dev-server', path.join(__dirname, "src/app/index.js") ],
+    app: ['webpack-dev-server/client?http://0.0.0.0:3300', 'webpack/hot/only-dev-server', path.join(__dirname, 'src/app/index.js')],
     lib: ['d3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string']
   },
   resolve: {
@@ -37,33 +39,34 @@ module.exports = {
   plugins: [
     new CopyDirPlugin(path.join(__dirname, 'src/.htaccess'), ''),
     new webpack.optimize.CommonsChunkPlugin({
-        name: 'lib',
+      name: 'lib',
-        filename: 'lib.js'
+      filename: 'lib.js'
     }),
     new HtmlWebpackPlugin({
-        inject: false,
+      inject: false,
-        template: path.join(__dirname, "src/index.ejs"),
+      template: path.join(__dirname, 'src/index.ejs'),
-        version: pkgJson.version,
+      version: pkgJson.version,
-        gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
+      gapiKey: process.env.CORIOLIS_GAPI_KEY || ''
     }),
     new ExtractTextPlugin({
-        filename: 'app.css', 
+      filename: 'app.css',
-        disable: false,
+      disable: false,
-        allChunks: true
+      allChunks: true
     }),
+    new WebpackNotifierPlugin({alwaysNotify: true}),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin()
   ],
   module: {
     rules: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) },
+      {test: /\.css$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'})},
-      { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader'}) },
+      {test: /\.less$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!less-loader'})},
-      { test: /\.(js|jsx)$/, loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') },
+      {test: /\.(js|jsx)$/, loaders: ['babel-loader'], include: path.join(__dirname, 'src')},
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
+      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
+      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'},
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
+      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'}
     ]
   }
-};
+}

webpack.config.prod.js

@@ -1,24 +1,27 @@
-var path = require('path');
+const path = require('path')
-var exec = require('child_process').exec;
+const exec = require('child_process').exec
-var webpack = require('webpack');
+const webpack = require('webpack')
-var pkgJson = require('./package');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
-var HtmlWebpackPlugin = require("html-webpack-plugin");
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+const AppCachePlugin = require('appcache-webpack-plugin')
-var AppCachePlugin = require('appcache-webpack-plugin');
+const {BugsnagSourceMapUploaderPlugin} = require('webpack-bugsnag-plugins')
+const pkgJson = require('./package')
 
-function CopyDirPlugin(source, destination) {
+function CopyDirPlugin (source, destination) {
-    this.source = source;
+  this.source = source
-    this.destination = destination;
+  this.destination = destination
+}
+
+CopyDirPlugin.prototype.apply = function (compiler) {
+  compiler.plugin('done', () => {
+    console.log(compiler.outputPath, this.destination)
+    exec('cp -r ' + this.source + ' ' + path.join(compiler.outputPath, this.destination))
+  })
 }
-CopyDirPlugin.prototype.apply = function(compiler) {
-    compiler.plugin('done', function() {
-      console.log(compiler.outputPath, this.destination);
-      exec('cp -r ' + this.source + ' ' + path.join(compiler.outputPath, this.destination));
-    }.bind(this));
-};
 
 module.exports = {
   cache: true,
+  devtool: 'source-map',
   entry: {
     app: ['babel-polyfill', path.resolve(__dirname, 'src/app/index')],
     lib: ['d3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string']
@@ -34,34 +37,39 @@ module.exports = {
   },
   plugins: [
     new webpack.optimize.UglifyJsPlugin({
-      'screw-ie8': true
+      'screw-ie8': true,
+      sourceMap: true
     }),
     //new webpack.optimize.CommonsChunkPlugin({
     //  name: 'lib',
     //  filename: 'lib.[chunkhash:6].js'
     //}),
     new HtmlWebpackPlugin({
-        inject: false,
+      inject: false,
-        appCache: 'coriolis.appcache',
+      appCache: 'coriolis.appcache',
-        minify: {
+      minify: {
-          collapseBooleanAttributes: true,
+        collapseBooleanAttributes: true,
-          collapseWhitespace: true,
+        collapseWhitespace: true,
-          removeAttributeQuotes: true,
+        removeAttributeQuotes: true,
-          removeComments: true,
+        removeComments: true,
-          removeEmptyAttributes: true,
+        removeEmptyAttributes: true,
-          removeRedundantAttributes: true,
+        removeRedundantAttributes: true,
-          removeScriptTypeAttributes: true,
+        removeScriptTypeAttributes: true,
-          removeStyleLinkTypeAttributes: true
+        removeStyleLinkTypeAttributes: true
-        },
+      },
-        template: path.join(__dirname, "src/index.ejs"),
+      template: path.join(__dirname, 'src/index.ejs'),
-        uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
+      uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
-        gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
+      gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
-        version: pkgJson.version
+      version: pkgJson.version
     }),
     new ExtractTextPlugin({
-        filename: '[contenthash:6].css',
+      filename: '[contenthash:6].css',
-        disable: false,
+      disable: false,
-        allChunks: true
+      allChunks: true
+    }),
+    new BugsnagSourceMapUploaderPlugin({
+      apiKey: 'ba9fae819372850fb660755341fa6ef5',
+      appVersion: pkgJson.version
     }),
     new CopyDirPlugin(path.join(__dirname, 'src/schemas'), 'schemas'),
     new CopyDirPlugin(path.join(__dirname, 'src/images/logo/*'), ''),
@@ -75,14 +83,14 @@ module.exports = {
   ],
   module: {
     rules: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) },
+      {test: /\.css$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'})},
-      { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader',use: 'css-loader!less-loader'}) },
+      {test: /\.less$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!less-loader'})},
-      { test: /\.(js|jsx)$/, loader: 'babel-loader?cacheDirectory=true', include: path.join(__dirname, 'src') },
+      {test: /\.(js|jsx)$/, loader: 'babel-loader?cacheDirectory=true', include: path.join(__dirname, 'src')},
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
+      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
+      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'},
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
+      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'}
     ]
   }
-};
+}