more work

* No adsense

* remove script tag

.babelrc

@@ -1,3 +1,51 @@
 {
-  "presets": ["env", "react", "stage-0"]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": "commonjs"
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-proposal-json-strings",
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-proposal-pipeline-operator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": true,
+        "regenerator": true
+      }
+    ],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-proposal-function-bind"
+  ]
 }

.docker/Dockerfile

@@ -17,13 +17,11 @@ RUN npm i -g npm
 # Set up coriolis-data
 WORKDIR /src/app/coriolis-data
 RUN git fetch --all
-RUN git reset --hard origin/$BRANCH
 RUN npm install --no-package-lock
 RUN npm start
 
 WORKDIR /src/app/coriolis
 RUN git fetch --all
-RUN git reset --hard origin/$BRANCH
 RUN npm install --no-package-lock
 RUN npm run build
 

d3-funcs.js

@@ -1,11 +0,0 @@
-export {
-  axisBottom,
-  axisLeft,
-  axisTop,
-  formatLocale,
-  line,
-  scaleBand,
-  scaleLinear,
-  scaleOrdinal,
-  select
-} from 'd3';

package.json

@@ -1,125 +1,149 @@
-{
-  "name": "coriolis_shipyard",
-  "version": "3.0.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/EDCD/coriolis"
-  },
-  "homepage": "https://coriolis.edcd.io",
-  "bugs": "https://github.com/EDCD/coriolis/issues",
-  "private": true,
-  "engine": "node >= 4.8.1",
-  "license": "MIT",
-  "scripts": {
-    "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",
-    "clean": "rimraf build",
-    "start": "node devServer.js",
-    "lint": "eslint --ext .js,.jsx src",
-    "test": "jest",
-    "prod-serve": "nginx -p $(pwd) -c nginx.conf",
-    "prod-stop": "kill -QUIT $(cat nginx.pid)",
-    "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",
-    "deploy": "npm run lint && npm test && npm run build && npm run rsync"
-  },
-  "jest": {
-    "transform": {
-      ".*": "<rootDir>/node_modules/babel-jest"
-    },
-    "testRegex": "(/__tests__/test-.*|\\.(test|spec))\\.js$",
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "jsx"
-    ],
-    "automock": true,
-    "bail": false,
-    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/lodash",
-      "<rootDir>/node_modules/react",
-      "<rootDir>/node_modules/react-dom",
-      "<rootDir>/node_modules/react-transition-group",
-      "<rootDir>/node_modules/react-testutils-additions",
-      "<rootDir>/node_modules/fbjs",
-      "<rootDir>/node_modules/fbemitter",
-      "<rootDir>/node_modules/classnames",
-      "<rootDir>/node_modules/d3",
-      "<rootDir>/node_modules/lz-string",
-      "<rootDir>/node_modules/jsen",
-      "coriolis-data",
-      "<rootDir>/src/app/shipyard",
-      "<rootDir>/src/app/i18n",
-      "<rootDir>/src/app/utils",
-      "<rootDir>/src/schemas",
-      "<rootDir>/__tests__"
-    ]
-  },
-  "devDependencies": {
-    "appcache-webpack-plugin": "^1.3.0",
-    "babel-core": "*",
-    "babel-eslint": "*",
-    "babel-jest": "*",
-    "babel-loader": "*",
-    "babel-preset-env": "*",
-    "babel-preset-react": "*",
-    "babel-preset-stage-0": "*",
-    "create-react-class": "^15.6.2",
-    "cross-env": "^5.1.4",
-    "css-loader": "^0.28.0",
-    "d3-selection": "1",
-    "esdoc": "^1.1.0",
-    "esdoc-custom-theme": "^1.4.2",
-    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
-    "esdoc-jsx-plugin": "^1.0.0",
-    "esdoc-publish-html-plugin": "^1.1.2",
-    "esdoc-react-plugin": "^1.0.1",
-    "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "3.19.0",
-    "eslint-plugin-react": "^6.10.3",
-    "expose-loader": "^0.7.3",
-    "express": "^4.15.2",
-    "extract-text-webpack-plugin": "2.1.0",
-    "file-loader": "^0.11.1",
-    "html-webpack-plugin": "^2.28.0",
-    "jest-cli": "^21.2.1",
-    "jsen": "^0.6.4",
-    "json-loader": "^0.5.4",
-    "less": "^2.7.2",
-    "less-loader": "^4.0.3",
-    "react-addons-perf": "^15.4.2",
-    "react-container-dimensions": "^1.4.1",
-    "react-testutils-additions": "^15.2.0",
-    "react-transition-group": "^1.1.2",
-    "rimraf": "^2.6.1",
-    "rollup": "0.41",
-    "rollup-plugin-node-resolve": "3",
-    "style-loader": "^0.16.1",
-    "uglify-js": "^2.4.11",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.4.1",
-    "webpack-bugsnag-plugins": "^1.1.1",
-    "webpack-dev-server": "^2.4.4",
-    "webpack-notifier": "^1.6.0",
-    "workbox-webpack-plugin": "^3.4.1"
-  },
-  "dependencies": {
-    "babel-polyfill": "*",
-    "browserify-zlib-next": "^1.0.1",
-    "classnames": "^2.2.5",
-    "coriolis-data": "../coriolis-data",
-    "d3": "4.8.0",
-    "detect-browser": "^1.7.0",
-    "fbemitter": "^2.1.1",
-    "lodash": "^4.17.10",
-    "lz-string": "^1.4.4",
-    "pako": "^1.0.6",
-    "prop-types": "^15.5.8",
-    "react": "^15.5.4",
-    "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"
-  }
-}
+{
+  "name": "coriolis_shipyard",
+  "version": "3.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/EDCD/coriolis"
+  },
+  "homepage": "https://coriolis.edcd.io",
+  "bugs": "https://github.com/EDCD/coriolis/issues",
+  "private": true,
+  "engine": "node >= 4.8.1",
+  "license": "MIT",
+  "scripts": {
+    "extract-translations": "grep -hroE \"(translate\\('[^']+'\\))|(tip.bind\\(null, '[^']+')\" src/* | grep -oE \"'[^']+'\" | grep -oE \"[^']+\" | sort -u -f",
+    "clean": "rimraf build",
+    "start": "node devServer.js",
+    "lint": "eslint --ext .js,.jsx src",
+    "test": "jest",
+    "prod-serve": "nginx -p $(pwd) -c nginx.conf",
+    "prod-stop": "kill -QUIT $(cat nginx.pid)",
+    "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",
+    "deploy": "npm run lint && npm test && npm run build && npm run rsync"
+  },
+  "jest": {
+    "transform": {
+      ".*": "<rootDir>/node_modules/babel-jest"
+    },
+    "testRegex": "(/__tests__/test-.*|\\.(test|spec))\\.js$",
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "jsx"
+    ],
+    "automock": true,
+    "bail": false,
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/lodash",
+      "<rootDir>/node_modules/react",
+      "<rootDir>/node_modules/react-dom",
+      "<rootDir>/node_modules/react-transition-group",
+      "<rootDir>/node_modules/react-testutils-additions",
+      "<rootDir>/node_modules/fbjs",
+      "<rootDir>/node_modules/fbemitter",
+      "<rootDir>/node_modules/classnames",
+      "<rootDir>/node_modules/d3",
+      "<rootDir>/node_modules/lz-string",
+      "<rootDir>/node_modules/jsen",
+      "coriolis-data",
+      "<rootDir>/src/app/shipyard",
+      "<rootDir>/src/app/i18n",
+      "<rootDir>/src/app/utils",
+      "<rootDir>/src/schemas",
+      "<rootDir>/__tests__"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "appcache-webpack-plugin": "^1.4.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.0",
+    "copy-webpack-plugin": "^4.5.2",
+    "create-react-class": "^15.6.3",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "d3-selection": "^1.3.2",
+    "esdoc": "^1.1.0",
+    "esdoc-custom-theme": "^1.4.2",
+    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
+    "esdoc-jsx-plugin": "^1.0.0",
+    "esdoc-publish-html-plugin": "^1.1.2",
+    "esdoc-react-plugin": "^1.0.1",
+    "esdoc-standard-plugin": "^1.0.0",
+    "eslint": "^5.6.0",
+    "eslint-plugin-react": "^7.11.1",
+    "expose-loader": "^0.7.5",
+    "express": "^4.16.3",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.0.7",
+    "jest-cli": "^23.6.0",
+    "jsen": "^0.6.4",
+    "json-loader": "^0.5.4",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "react-addons-perf": "^15.4.2",
+    "react-container-dimensions": "^1.4.1",
+    "react-testutils-additions": "^16.0.0",
+    "react-transition-group": "^2.5.0",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.66.2",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "style-loader": "^0.23.0",
+    "uglify-js": "^3.4.9",
+    "url-loader": "^1.1.1",
+    "webpack": "^4.20.2",
+    "webpack-bugsnag-plugins": "^1.2.2",
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.1.9",
+    "webpack-notifier": "^1.6.0",
+    "workbox-webpack-plugin": "^3.6.1",
+    "worker-loader": "^2.0.0"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.0.0",
+    "@babel/runtime": "^7.1.2",
+    "@nozbe/watermelondb": "^0.6.2",
+    "babel-runtime": "^6.26.0",
+    "browserify-zlib-next": "^1.0.1",
+    "classnames": "^2.2.6",
+    "coriolis-data": "../coriolis-data",
+    "d3": "^5.7.0",
+    "detect-browser": "^3.0.1",
+    "fbemitter": "^2.1.1",
+    "lodash": "^4.17.11",
+    "lokijs": "^1.5.5",
+    "lz-string": "^1.4.4",
+    "pako": "^1.0.6",
+    "prop-types": "^15.6.2",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-extras": "^0.7.1",
+    "react-ga": "^2.5.3",
+    "react-number-editor": "Athanasius/react-number-editor.git#miggy",
+    "recharts": "^1.2.0",
+    "register-service-worker": "^1.5.2",
+    "superagent": "^3.8.3"
+  }
+}

src/app/Coriolis.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Router from './Router';
+import { register } from 'register-service-worker'
 import { EventEmitter } from 'fbemitter';
 import { getLanguage } from './i18n/Language';
 import Persist from './stores/Persist';
@@ -22,12 +23,12 @@ import ShipyardPage from './pages/ShipyardPage';
 import ErrorDetails from './pages/ErrorDetails';
 
 const zlib = require('pako');
+const request = require('superagent');
 
 /**
  * Coriolis App
  */
 export default class Coriolis extends React.Component {
-
   static childContextTypes = {
     closeMenu: PropTypes.func.isRequired,
     hideModal: PropTypes.func.isRequired,
@@ -66,11 +67,12 @@ export default class Coriolis extends React.Component {
     this.state = {
       noTouch: !('ontouchstart' in window || navigator.msMaxTouchPoints || navigator.maxTouchPoints),
       page: null,
+      announcements: [],
       language: getLanguage(Persist.getLangCode()),
       route: {},
       sizeRatio: Persist.getSizeRatio()
     };
-
+    this._getAnnouncements()
     Router('', (r) => this._setPage(ShipyardPage, r));
     Router('/import?', (r) => this._importBuild(r));
     Router('/import/:data', (r) => this._importBuild(r));
@@ -109,6 +111,14 @@ export default class Coriolis extends React.Component {
     }
   }
 
+  _getAnnouncements() {
+    return request.get('https://orbis.zone/api/announcement')
+    .query({showInCoriolis: true})
+    .then(announces => {
+      this.setState({ announcements: announces.body })
+    })
+  }
+
   /**
    * Updates / Sets the page and route context
    * @param {[type]} page  The page to be shown
@@ -334,47 +344,37 @@ export default class Coriolis extends React.Component {
       });
     }
     if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        // Your service-worker.js *must* be located at the top-level directory relative to your site.
-        // It won't be able to control pages unless it's located at the same level or higher than them.
-        // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
-        // See https://github.com/slightlyoff/ServiceWorker/issues/468
-        const self = this;
-        navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
-          // updatefound is fired if service-worker.js changes.
-          reg.onupdatefound = function() {
-            // The updatefound event implies that reg.installing is set; see
-            // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
-            var installingWorker = reg.installing;
-
-            installingWorker.onstatechange = function() {
-              switch (installingWorker.state) {
-                case 'installed':
-                  if (navigator.serviceWorker.controller) {
-                    // At this point, the old content will have been purged and the fresh content will
-                    // have been added to the cache.
-                    // It's the perfect time to display a "New content is available; please refresh."
-                    // message in the page's interface.
-                    console.log('New or updated content is available.');
-                    self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
-                  } else {
-                    // At this point, everything has been precached.
-                    // It's the perfect time to display a "Content is cached for offline use." message.
-                    console.log('Content is now available offline!');
-                    self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
-                  }
-                  break;
-
-                case 'redundant':
-                  console.error('The installing service worker became redundant.');
-                  break;
-              }
-            };
-          };
-        }).catch(function(e) {
-          console.error('Error during service worker registration:', e);
+      // Your service-worker.js *must* be located at the top-level directory relative to your site.
+      // It won't be able to control pages unless it's located at the same level or higher than them.
+      // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
+      // See https://github.com/slightlyoff/ServiceWorker/issues/468
+      const self = this;
+      if (process.env.NODE_ENV === 'production') {
+        register('/service-worker.js', {
+          ready (registration) {
+            console.log('Service worker is active.')
+          },
+          registered (registration) {
+            console.log('Service worker has been registered.')
+          },
+          cached (registration) {
+            console.log('Content has been cached for offline use.')
+          },
+          updatefound (registration) {
+            console.log('New content is downloading.')
+          },
+          updated (registration) {
+            self.setState({ appCacheUpdate: true });
+            console.log('New content is available; please refresh.')
+          },
+          offline () {
+            console.log('No internet connection found. App is running in offline mode.')
+          },
+          error (error) {
+            console.error('Error during service worker registration:', error)
+          }
         });
-      });
+      }
     }
     window.onerror = this._onError.bind(this);
     window.addEventListener('resize', () => this.emitter.emit('windowResize'));
@@ -394,20 +394,20 @@ export default class Coriolis extends React.Component {
     let currentMenu = this.state.currentMenu;
 
     return <div style={{ minHeight: '100%' }} onClick={this._closeMenu}
-                className={this.state.noTouch ? 'no-touch' : null}>
-      <Header appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu}/>
+      className={this.state.noTouch ? 'no-touch' : null}>
+      <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu}/>
       {this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) :
         <NotFoundPage/>}
       {this.state.modal}
       {this.state.tooltip}
       <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>
+          <a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer"
+            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
+            target="_blank" rel="noopener noreferrer" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits since last release
             ({window.CORIOLIS_DATE})</a>
         </div>
       </footer>

src/app/components/ActiveLink.jsx

@@ -16,7 +16,6 @@ function isActive(href) {
  * Active Link - Highlighted when URL matches window location
  */
 export default class ActiveLink extends Link {
-
   /**
    * Renders the component
    * @return {React.Component} The active link
@@ -29,5 +28,4 @@ export default class ActiveLink extends Link {
 
     return <a {...this.props} className={className} onClick={this.handler}>{this.props.children}</a>;
   }
-
-}
+}

src/app/components/Ad.jsx

@@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class Ad extends Component {
+  static propTypes = {
+    client: PropTypes.string,
+    slot: PropTypes.string,
+    format: PropTypes.string,
+    wrapperDivStyle: PropTypes.object
+  };
+  constructor(props) {
+    super(props);
+  }
+  // This code is ran when the component mounts
+  componentDidMount() {
+
+  }
+
+  // an outer div for styling purposes
+  // changed class to ClassName
+  // changed style from string to an object
+
+  render() {
+    return (
+      <div style={this.props.wrapperDivStyle}>
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block' }}
+          data-ad-client={this.props.client}
+          data-ad-slot={this.props.slot}
+        />
+      </div>
+    );
+  }
+}

src/app/components/Announcement.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { autoBind } from 'react-extras';
+
+/**
+ * Announcement component
+ */
+export default class Announcement extends React.Component {
+
+  static propTypes = {
+    text: PropTypes.string
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+    autoBind(this);
+  }
+
+  /**
+   * Renders the announcement
+   * @return {React.Component} A href element
+   */
+  render() {
+    return <p>{this.props.text}</p>;
+  }
+
+}

src/app/components/AvailableModulesMenu.jsx

@@ -98,7 +98,7 @@ const CATEGORIES = {
   'defence': ['ch', 'po', 'ec'],
   'scanners': ['sc', 'ss', 'cs', 'kw', 'ws'], // Overloaded with internal scanners
   // Experimental
-  'experimental': ['axmc', 'axmr', 'rfl', 'tbrfl', 'tbsc', 'tbem', 'xs', 'sfn', 'rcpl', 'dtl', 'rsl', 'mahr', ],
+  'experimental': ['axmc', 'axmr', 'rfl', 'tbrfl', 'tbsc', 'tbem', 'xs', 'sfn', 'rcpl', 'dtl', 'rsl', 'mahr',],
 
   // Guardian
   'guardian': ['gpp', 'gpd', 'gpc', 'ggc', 'gsrp', 'gfsb', 'ghrp', 'gmrp', 'gsc']
@@ -108,7 +108,6 @@ const CATEGORIES = {
  * Available modules menu
  */
 export default class AvailableModulesMenu extends TranslatedComponent {
-
   static propTypes = {
     modules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
     onSelect: PropTypes.func.isRequired,
@@ -159,7 +158,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         this._hideDiff(event);
         onSelect(m);
       }
-   );
+    );
 
     if (modules instanceof Array) {
       list = buildGroup(modules[0].grp, modules);
@@ -502,14 +501,13 @@ export default class AvailableModulesMenu extends TranslatedComponent {
   render() {
     return (
       <div ref={node => this.node = node}
-          className={cn('select', this.props.className)}
-          onScroll={this._hideDiff}
-          onClick={(e) => e.stopPropagation() }
-          onContextMenu={stopCtxPropagation}
+        className={cn('select', this.props.className)}
+        onScroll={this._hideDiff}
+        onClick={(e) => e.stopPropagation() }
+        onContextMenu={stopCtxPropagation}
       >
         {this.state.list}
       </div>
     );
   }
-
 }

src/app/components/BarChart.jsx

@@ -38,7 +38,6 @@ function insertLinebreaks(d) {
  * Bar Chart
  */
 export default class BarChart extends TranslatedComponent {
-
   static defaultProps = {
     colors: ['#7b6888', '#6b486b', '#3182bd', '#a05d56', '#d0743c'],
     labels: null,

src/app/components/Boost.jsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
-import { Pip } from './SvgIcons';
-import LineChart from '../components/LineChart';
-import Slider from '../components/Slider';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import Module from '../shipyard/Module';
 
 /**
  * Boost displays a boost button that toggles bosot

src/app/components/Cargo.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
 import Slider from '../components/Slider';
 
 /**

src/app/components/ComparisonTable.jsx

@@ -10,7 +10,6 @@ import { outfitURL } from '../utils/UrlGenerators';
  * Comparison Table
  */
 export default class ComparisonTable extends TranslatedComponent {
-
   static propTypes = {
     facets: PropTypes.array.isRequired,
     builds: PropTypes.array.isRequired,

src/app/components/CostSection.jsx

@@ -13,7 +13,6 @@ import { ShoppingIcon } from '../components/SvgIcons';
  * Cost Section
  */
 export default class CostSection extends TranslatedComponent {
-
   static propTypes = {
     ship: PropTypes.object.isRequired,
     code: PropTypes.string.isRequired,
@@ -361,11 +360,11 @@ export default class CostSection extends TranslatedComponent {
       for (let i = 0, l = retrofitCosts.length; i < l; i++) {
         let item = retrofitCosts[i];
         rows.push(<tr key={i} className={cn('highlight', { disabled: !item.retroItem.incCost })} onClick={this._toggleRetrofitCost.bind(this, item)}>
-            <td className='ptr' style={{ width: '1em' }}>{item.sellClassRating}</td>
-            <td className='le ptr shorten cap'>{translate(item.sellName)}</td>
-            <td className='ptr' style={{ width: '1em' }}>{item.buyClassRating}</td>
-            <td className='le ptr shorten cap'>{translate(item.buyName)}</td>
-            <td colSpan='2' className={cn('ri ptr', item.retroItem.incCost ? item.netCost > 0 ? 'warning' : 'secondary-disabled' : 'disabled')}>{int(item.netCost)}{units.CR}</td>
+          <td className='ptr' style={{ width: '1em' }}>{item.sellClassRating}</td>
+          <td className='le ptr shorten cap'>{translate(item.sellName)}</td>
+          <td className='ptr' style={{ width: '1em' }}>{item.buyClassRating}</td>
+          <td className='le ptr shorten cap'>{translate(item.buyName)}</td>
+          <td colSpan='2' className={cn('ri ptr', item.retroItem.incCost ? item.netCost > 0 ? 'warning' : 'secondary-disabled' : 'disabled')}>{int(item.netCost)}{units.CR}</td>
         </tr>);
       }
     } else {

src/app/components/Defence.jsx

@@ -226,26 +226,26 @@ export default class Defence extends TranslatedComponent {
     return (
       <span id='defence'>
         {shield.total ? <span>
-        <div className='group quarter'>
-          <h2>{translate('shield metrics')}</h2>
-          <br/>
-          <h2 onMouseOver={termtip.bind(null, <div>{shieldSourcesTt}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw shield strength')}<br/>{formats.int(shield.total)}{units.MJ}</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_SHIELDS')}<br/>{shielddamage.totalsdps == 0 ? translate('ever') : formats.time(Calc.timeToDeplete(shield.total, shielddamage.totalsdps, shielddamage.totalseps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * opponentWep / 4))}</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECOVER'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECOVER_SHIELDS')}<br/>{shield.recover === Math.Inf ? translate('never') : formats.time(shield.recover)}</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECHARGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECHARGE_SHIELDS')}<br/>{shield.recharge === Math.Inf ? translate('never') : formats.time(shield.recharge)}</h2>
-        </div>
-        <div className='group quarter'>
-          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_SOURCES'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield sources')}</h2>
-          <PieChart data={shieldSourcesData} />
-        </div>
-        <div className='group quarter'>
-          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_DAMAGE_TAKEN'))} onMouseOut={tooltip.bind(null, null)}>{translate('damage taken')}(%)</h2>
-          <VerticalBarChart data={shieldDamageTakenData} yMax={140} />
-        </div>
-        <div className='group quarter'>
-          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_EFFECTIVE_SHIELD'))} onMouseOut={tooltip.bind(null, null)}>{translate('effective shield')}(MJ)</h2>
-          <VerticalBarChart data={effectiveShieldData} yMax={maxEffectiveShield}/>
-        </div>
+          <div className='group quarter'>
+            <h2>{translate('shield metrics')}</h2>
+            <br/>
+            <h2 onMouseOver={termtip.bind(null, <div>{shieldSourcesTt}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw shield strength')}<br/>{formats.int(shield.total)}{units.MJ}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_SHIELDS')}<br/>{shielddamage.totalsdps == 0 ? translate('ever') : formats.time(Calc.timeToDeplete(shield.total, shielddamage.totalsdps, shielddamage.totalseps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * opponentWep / 4))}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECOVER'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECOVER_SHIELDS')}<br/>{shield.recover === Math.Inf ? translate('never') : formats.time(shield.recover)}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECHARGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECHARGE_SHIELDS')}<br/>{shield.recharge === Math.Inf ? translate('never') : formats.time(shield.recharge)}</h2>
+          </div>
+          <div className='group quarter'>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_SOURCES'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield sources')}</h2>
+            <PieChart data={shieldSourcesData} />
+          </div>
+          <div className='group quarter'>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_DAMAGE_TAKEN'))} onMouseOut={tooltip.bind(null, null)}>{translate('damage taken')}(%)</h2>
+            <VerticalBarChart data={shieldDamageTakenData} yMax={140} />
+          </div>
+          <div className='group quarter'>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_EFFECTIVE_SHIELD'))} onMouseOut={tooltip.bind(null, null)}>{translate('effective shield')}(MJ)</h2>
+            <VerticalBarChart data={effectiveShieldData} yMax={maxEffectiveShield}/>
+          </div>
         </span> : null }
 
         <div className='group quarter'>

src/app/components/EngagementRange.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
 import Slider from '../components/Slider';
 
 /**

src/app/components/EngineProfile.jsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
 import LineChart from '../components/LineChart';
-import Slider from '../components/Slider';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import Module from '../shipyard/Module';
 import * as Calc from '../shipyard/Calculations';
 
 /**

src/app/components/FSDProfile.jsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
 import LineChart from '../components/LineChart';
-import Slider from '../components/Slider';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import Module from '../shipyard/Module';
 import * as Calc from '../shipyard/Calculations';
 
 /**
@@ -69,7 +64,7 @@ export default class FSDProfile extends TranslatedComponent {
     const { formats, translate, units } = language;
     const { ship, cargo, fuel } = this.props;
 
-    
+
     // Calculate bounds for our line chart - use thruster info for X
     const thrusters = ship.standard[1].m;
     const fsd = ship.standard[2].m;

src/app/components/Fuel.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
 import Slider from '../components/Slider';
 
 /**

src/app/components/HardpointSlotSection.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import SlotSection from './SlotSection';
 import HardpointSlot from './HardpointSlot';
-import cn from 'classnames';
 import { MountFixed, MountGimballed, MountTurret } from '../components/SvgIcons';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 

src/app/components/Header.jsx

@@ -16,6 +16,7 @@ import ModalExport from './ModalExport';
 import ModalHelp from './ModalHelp';
 import ModalImport from './ModalImport';
 import Slider from './Slider';
+import Announcement from './Announcement';
 import { outfitURL } from '../utils/UrlGenerators';
 
 const SIZE_MIN = 0.65;
@@ -76,8 +77,11 @@ export default class Header extends TranslatedComponent {
     this._openShips = this._openMenu.bind(this, 's');
     this._openBuilds = this._openMenu.bind(this, 'b');
     this._openComp = this._openMenu.bind(this, 'comp');
+    this._openAnnounce = this._openMenu.bind(this, 'announce');
+    this._getAnnouncementsMenu = this._getAnnouncementsMenu.bind(this);
     this._openSettings = this._openMenu.bind(this, 'settings');
     this._showHelp = this._showHelp.bind(this);
+    this.update = this.update.bind(this);
     this.languageOptions = [];
     this.insuranceOptions = [];
     this.state = {
@@ -411,6 +415,29 @@ export default class Header extends TranslatedComponent {
     );
   }
 
+  /**
+   * Generate the announcement menu
+   * @return {React.Component} Menu
+   */
+  _getAnnouncementsMenu() {
+    let announcements;
+    let translate = this.context.language.translate;
+
+    if (this.props.announcements) {
+      announcements = [];
+      for (let announce of this.props.announcements) {
+        announcements.push(<Announcement text={announce.message} />);
+        announcements.push(<hr/>);
+      }
+    }
+    return (
+      <div className='menu-list' onClick={ (e) => e.stopPropagation() } style={{ whiteSpace: 'nowrap' }}>
+        {announcements}
+        <hr />
+      </div>
+    );
+  }
+
   /**
    * Generate the settings menu
    * @return {React.Component} Menu
@@ -534,6 +561,15 @@ export default class Header extends TranslatedComponent {
     }
   }
 
+  async update() {
+    const reg = await navigator.serviceWorker.getRegistration();
+    if (!reg || !reg.waiting) {
+      return window.location.reload();
+    }
+    reg.waiting.postMessage('skipWaiting');
+    window.location.reload();
+  }
+
   /**
    * Render the header
    * @return {React.Component} Header
@@ -544,7 +580,7 @@ export default class Header extends TranslatedComponent {
     let hasBuilds = Persist.hasBuilds();
     return (
       <header>
-        {this.props.appCacheUpdate && <div id="app-update" onClick={() => window.location.reload() }>{translate('PHRASE_UPDATE_RDY')}</div>}
+        {this.props.appCacheUpdate && <div id="app-update" onClick={this.update}>{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}
@@ -571,6 +607,13 @@ export default class Header extends TranslatedComponent {
           {openedMenu == 'comp' ? this._getComparisonsMenu() : null}
         </div>
 
+        <div className='l menu'>
+          <div className={cn('menu-header', { selected: openedMenu == 'announce', disabled: this.props.announcements.length === 0})} onClick={this.props.announcements.length !== 0 && this._openAnnounce}>
+            <span className='menu-item-label'>{translate('announcements')}</span>
+          </div>
+          {openedMenu == 'announce' ? this._getAnnouncementsMenu() : null}
+        </div>
+
         {window.location.origin.search('.edcd.io') >= 0 ?
           <div className='l menu'>
             <a href="https://youtu.be/4SvnLcefhtI" target="_blank">

src/app/components/InternalSlotSection.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import cn from 'classnames';
 import SlotSection from './SlotSection';
 import InternalSlot from './InternalSlot';
 import * as ModuleUtils from '../shipyard/ModuleUtils';

src/app/components/JumpRange.jsx

@@ -1,12 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
 import LineChart from '../components/LineChart';
 import Slider from '../components/Slider';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import Module from '../shipyard/Module';
 import * as Calc from '../shipyard/Calculations';
 
 /**

src/app/components/ModalDeleteAll.jsx

@@ -6,7 +6,6 @@ import Persist from '../stores/Persist';
  * Delete All saved data modal
  */
 export default class ModalDeleteAll extends TranslatedComponent {
-
   /**
    * Delete everything and hide the modal
    */

src/app/components/Modification.jsx

@@ -9,7 +9,6 @@ import { isValueBeneficial } from '../utils/BlueprintFunctions';
  * Modification
  */
 export default class Modification extends TranslatedComponent {
-
   static propTypes = {
     ship: PropTypes.object.isRequired,
     m: PropTypes.object.isRequired,
@@ -39,10 +38,24 @@ export default class Modification extends TranslatedComponent {
    *                       in a value by hand
    */
   _updateValue(value) {
-    let { m, name, ship } = this.props;
-    value = Math.max(Math.min(value, 50000), -50000);
-    ship.setModification(m, name, value, true, true);
     this.setState({ value });
+    let reCast = String(Number(value));
+    if (reCast.endsWith(value) || reCast.startsWith(value)) {
+      let { m, name, ship } = this.props;
+      value = Math.max(Math.min(value, 50000), -50000);
+      ship.setModification(m, name, value, true, true);
+    }
+  }
+
+  /**
+   * Triggered when a key is pressed down with focus on the number editor.
+   * @param {SyntheticEvent} event Key down event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      this._updateFinished();
+    }
+    this.props.onKeyDown(event);
   }
 
   /**
@@ -72,6 +85,11 @@ export default class Modification extends TranslatedComponent {
       return null;
     }
 
+    let inputClassNames = {
+      'cb': true,
+      'greyed-out': !this.props.highlight
+    };
+
     return (
       <div onBlur={this._updateFinished.bind(this)} key={name}
         className={cn('cb', 'modification-container')}
@@ -84,24 +102,24 @@ export default class Modification extends TranslatedComponent {
               <td className={'input-container'}>
                 <span>
                   {this.props.editable ?
-                    <NumberEditor className={'cb'} value={this.state.value}
+                    <NumberEditor className={cn(inputClassNames)} value={this.state.value}
                       decimals={2} style={{ textAlign: 'right' }} step={0.01}
-                      stepModifier={1} onKeyDown={ this.props.onKeyDown }
+                      stepModifier={1} onKeyDown={this._keyDown.bind(this)}
                       onValueChange={this._updateValue.bind(this)} /> :
                     <input type="text" value={formats.f2(this.state.value)}
-                      disabled className={'number-editor'}
+                      disabled className={cn('number-editor', 'greyed-out')}
                       style={{ textAlign: 'right', cursor: 'inherit' }}/>
                   }
                   <span className={'unit-container'}>
-                      {units[m.getStoredUnitFor(name)]}
+                    {units[m.getStoredUnitFor(name)]}
                   </span>
                 </span>
               </td>
               <td style={{ textAlign: 'center' }} className={
-                  modValue ?
-                    isValueBeneficial(name, modValue) ? 'secondary': 'warning':
-                    ''
-                }>
+                modValue ?
+                  isValueBeneficial(name, modValue) ? 'secondary' : 'warning' :
+                  ''
+              }>
                 {formats.f2(modValue / 100) || 0}%
               </td>
             </tr>

src/app/components/ModificationsMenu.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as _ from 'lodash';
 import TranslatedComponent from './TranslatedComponent';
-import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { Modifications } from 'coriolis-data/dist';
 import Modification from './Modification';
@@ -23,7 +23,6 @@ const MODIFICATIONS_COMPARATOR = (mod1, mod2) => {
  * Modifications menu
  */
 export default class ModificationsMenu extends TranslatedComponent {
-
   static propTypes = {
     ship: PropTypes.object.isRequired,
     m: PropTypes.object.isRequired,
@@ -214,11 +213,11 @@ 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);
-        const editable = modName !== 'fallofffromrange' &&
-          m.blueprint.grades[m.blueprint.grade].features[modName];
+        const editable = modName !== 'fallofffromrange';
+        const highlight = m.blueprint.grades[m.blueprint.grade].features[modName];
         this.lastNeId = modName;
-        (editable ? modifiableModifications : modifications).push(
-          <Modification key={ key } ship={ ship } m={ m }
+        (editable && highlight ? modifiableModifications : modifications).push(
+          <Modification key={ key } ship={ ship } m={ m } highlight={highlight}
             value={m.getPretty(modName) || 0} modItems={this.modItems}
             onChange={onChange} onKeyDown={this._keyDown} name={modName}
             editable={editable} handleModChange = {this._handleModChange} />
@@ -461,10 +460,10 @@ export default class ModificationsMenu extends TranslatedComponent {
     }
     return (
       <div
-          className={cn('select', this.props.className)}
-          onClick={(e) => e.stopPropagation() }
-          onContextMenu={stopCtxPropagation}
-          ref={modItem => this.modItems['modMainDiv'] = modItem}
+        className={cn('select', this.props.className)}
+        onClick={(e) => e.stopPropagation() }
+        onContextMenu={stopCtxPropagation}
+        ref={modItem => this.modItems['modMainDiv'] = modItem}
       >
         { showBlueprintsMenu | showSpecialsMenu ? '' : haveBlueprint ?
           <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> :
@@ -473,11 +472,11 @@ export default class ModificationsMenu extends TranslatedComponent {
         { 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 }
         { 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 ?
+        { showRolls ?
 
-            <table style={{ width: '100%', backgroundColor: 'transparent' }}>
-              <tbody>
-          { showRolls ?
+          <table style={{ width: '100%', backgroundColor: 'transparent' }}>
+            <tbody>
+              { showRolls ?
                 <tr>
                   <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: false }) }> { translate('roll') }: </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>
@@ -485,7 +484,7 @@ export default class ModificationsMenu extends TranslatedComponent {
                   <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 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 }
-              </tbody>
+            </tbody>
           </table> : null }
         { showMods ? <hr /> : null }
         { showMods ?

src/app/components/Movement.jsx

@@ -35,13 +35,13 @@ export default class Movement extends TranslatedComponent {
     return (
       <span id='movement'>
         <svg viewBox='0 0 600 600' fillRule="evenodd" clipRule="evenodd">
-          // Axes
+          {/* Axes */}
           <path d="M150 250v300" strokeWidth='1'/>
           <path d="M150 250l236 236" strokeWidth='1'/>
           <path d="M150 250l350 -200" strokeWidth='1'/>
-          // End Arrow
+          {/* End Arrow */}
           <path d="M508 43.3L487 67l-10-17.3 31-6.4z"/>
-          // Axes arcs and arrows
+          {/* Axes arcs and arrows */}
           <path d="M71.7 251.7C64.2 259.2 60 269.4 60 280c0 22 18 40 40 40s40-18 40-40c0-10.6-4.2-20.8-11.7-28.3 7.5 7.5 11.7 17.7 11.7 28.3 0 22-18 40-40 40s-40-18-40-40c0-10.6 4.2-20.8 11.7-28.3z" strokeWidth='4' transform="matrix(.6 0 0 .3 87.5 376.3)"/>
           <path d="M142.8 453l-13.2 8.7-2.6-9.7 15.8 1z"/>
           <path d="M144.7 451.6l.5 1.6-16.2 10.6h-.4l-3.5-13 .7-.4 19.3 1.2zm-14.2 7.7l7.7-5-9.2-.7 1.5 5.7zm25.7-6.3l15.8-1-2.6 9.7-13.2-8.8z"/>
@@ -57,13 +57,13 @@ export default class Movement extends TranslatedComponent {
           <path d="M359.5 422.4l-1.2 19.3-1.6.4-10.7-16 .2-.2 13-3.4.3.4zm-9 5l5.2 7.8.6-9.3-5.7 1.2zm-10.5 24l-13.2 8.6-2.6-9.7 15.8 1z"/>
           <path d="M342 450l.4 1.5-16.2 10.7-.4-.2-3.5-13 .3-.3L342 450zm-14.3 7.6l7.7-5-9.2-.6 1.5 5.6z"/>
 
-          // Speed
+          {/* Speed */}
           <text x="470" y="30" strokeWidth='0'>{ship.canThrust(cargo, fuel) ? formats.int(ship.calcSpeed(eng, fuel, cargo, boost)) + 'm/s' : '-'}</text>
-          // Pitch
+          {/* Pitch */}
           <text x="355" y="410" strokeWidth='0'>{ship.canThrust(cargo, fuel) ? formats.int(ship.calcPitch(eng, fuel, cargo, boost)) + '°/s' : '-'}</text>
-          // Roll
+          {/* Roll */}
           <text x="450" y="110" strokeWidth='0'>{ship.canThrust(cargo, fuel) ? formats.int(ship.calcRoll(eng, fuel, cargo, boost)) + '°/s' : '-'}</text>
-          // Yaw
+          {/* Yaw */}
           <text x="160" y="430" strokeWidth='0'>{ship.canThrust(cargo, fuel) ? formats.int(ship.calcYaw(eng, fuel, cargo, boost)) + '°/s' : '-'}</text>
         </svg>
       </span>);

src/app/components/Offence.jsx

@@ -5,7 +5,6 @@ import * as Calc from '../shipyard/Calculations';
 import PieChart from './PieChart';
 import { nameComparator } from '../utils/SlotFunctions';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
-import VerticalBarChart from './VerticalBarChart';
 
 /**
  * Generates an internationalization friendly weapon comparator that will
@@ -203,9 +202,9 @@ export default class Offence extends TranslatedComponent {
 
 
     let totalSEps = 0;
-    let totalSDpsObject = {'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0};
-    let shieldsSDpsObject = {'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0};
-    let armourSDpsObject = {'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0};
+    let totalSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
+    let shieldsSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
+    let armourSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
 
     const rows = [];
     for (let i = 0; i < damage.length; i++) {
@@ -267,22 +266,22 @@ export default class Offence extends TranslatedComponent {
     return (
       <span id='offence'>
         <div className='group full'>
-        <table>
-          <thead>
-          <tr className='main'>
-            <th rowSpan='2' className='sortable' onClick={sortOrder.bind(this, 'n')}>{translate('weapon')}</th>
-            <th colSpan='1'>{translate('overall')}</th>
-            <th colSpan='2'>{translate('opponent\'s shields')}</th>
-            <th colSpan='2'>{translate('opponent\'s armour')}</th>
-          </tr>
-          <tr>
-            <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
-            <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
-            <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_SHIELDS')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'es')}>{'eft'}</th>
-            <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'esdpsh')}>{'sdps'}</th>
-            <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'eh')}>{'eft'}</th>
-          </tr>
-          </thead>
+          <table>
+            <thead>
+              <tr className='main'>
+                <th rowSpan='2' className='sortable' onClick={sortOrder.bind(this, 'n')}>{translate('weapon')}</th>
+                <th colSpan='1'>{translate('overall')}</th>
+                <th colSpan='2'>{translate('opponent\'s shields')}</th>
+                <th colSpan='2'>{translate('opponent\'s armour')}</th>
+              </tr>
+              <tr>
+                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
+                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
+                <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_SHIELDS')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'es')}>{'eft'}</th>
+                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'esdpsh')}>{'sdps'}</th>
+                <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'eh')}>{'eft'}</th>
+              </tr>
+            </thead>
             <tbody>
               {rows}
               {rows.length > 0 &&
@@ -296,7 +295,7 @@ export default class Offence extends TranslatedComponent {
                 </tr>
               }
             </tbody>
-        </table>
+          </table>
         </div>
         <div className='group quarter'>
           <h2>{translate('offence metrics')}</h2>

src/app/components/OutfittingSubpages.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { Ships } from 'coriolis-data/dist';
-import Ship from '../shipyard/Ship';
 import Persist from '../stores/Persist';
 import TranslatedComponent from './TranslatedComponent';
 import PowerManagement from './PowerManagement';

src/app/components/Pips.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
 import { Pip } from './SvgIcons';
-import LineChart from '../components/LineChart';
-import Slider from '../components/Slider';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import Module from '../shipyard/Module';
+import { autoBind } from 'react-extras';
 
 /**
  * Pips displays SYS/ENG/WEP pips and allows users to change them with key presses by clicking on the relevant area.
@@ -18,6 +13,9 @@ export default class Pips extends TranslatedComponent {
     sys: PropTypes.number.isRequired,
     eng: PropTypes.number.isRequired,
     wep: PropTypes.number.isRequired,
+    mcSys: PropTypes.number.isRequired,
+    mcEng: PropTypes.number.isRequired,
+    mcWep: PropTypes.number.isRequired,
     onChange: PropTypes.func.isRequired
   };
 
@@ -28,9 +26,7 @@ export default class Pips extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    const { sys, eng, wep } = props;
-
-    this._keyDown = this._keyDown.bind(this);
+    autoBind(this);
   }
 
   /**
@@ -74,30 +70,21 @@ export default class Pips extends TranslatedComponent {
     }
   }
 
-  /**
-   * Handle a click
-   * @param {string} which  Which item was clicked
-   */
-  onClick(which) {
-    if (which == 'SYS') {
-      this._incSys();
-    } else if (which == 'ENG') {
-      this._incEng();
-    } else if (which == 'WEP') {
-      this._incWep();
-    } else if (which == 'RST') {
-      this._reset();
-    }
-  }
-
   /**
    * Reset the capacitor
    */
-  _reset() {
-    let { sys, eng, wep } = this.props;
-    if (sys != 2 || eng != 2 || wep != 2) {
+  _reset(isMc) {
+    let { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
+    if (isMc) {
+      if (mcSys || mcEng || mcWep) {
+        sys -= mcSys;
+        eng -= mcEng;
+        wep -= mcWep;
+        this.props.onChange(sys, eng, wep, 0, 0, 0);
+      }
+    } else if (sys != 2 || eng != 2 || wep != 2) {
       sys = eng = wep = 2;
-      this.props.onChange(sys, eng, wep);
+      this.props.onChange(sys + mcSys, eng + mcEng, wep + mcWep, mcSys, mcEng, mcWep);
     }
   }
 
@@ -105,151 +92,133 @@ export default class Pips extends TranslatedComponent {
    * Increment the SYS capacitor
    */
   _incSys() {
-    let { sys, eng, wep } = this.props;
-
-    const required = Math.min(1, 4 - sys);
-    if (required > 0) {
-      if (required == 0.5) {
-        // Take from whichever is larger
-        if (eng > wep) {
-          eng -= 0.5;
-          sys += 0.5;
-        } else {
-          wep -= 0.5;
-          sys += 0.5;
-        }
-      } else {
-        // Required is 1 - take from both if possible
-        if (eng == 0) {
-          wep -= 1;
-          sys += 1;
-        } else if (wep == 0) {
-          eng -= 1;
-          sys += 1;
-        } else {
-          eng -= 0.5;
-          wep -= 0.5;
-          sys += 1;
-        }
-      }
-      this.props.onChange(sys, eng, wep);
-    }
+    this._inc('sys', false);
   }
 
   /**
    * Increment the ENG capacitor
    */
   _incEng() {
-    let { sys, eng, wep } = this.props;
-
-    const required = Math.min(1, 4 - eng);
-    if (required > 0) {
-      if (required == 0.5) {
-        // Take from whichever is larger
-        if (sys > wep) {
-          sys -= 0.5;
-          eng += 0.5;
-        } else {
-          wep -= 0.5;
-          eng += 0.5;
-        }
-      } else {
-        // Required is 1 - take from both if possible
-        if (sys == 0) {
-          wep -= 1;
-          eng += 1;
-        } else if (wep == 0) {
-          sys -= 1;
-          eng += 1;
-        } else {
-          sys -= 0.5;
-          wep -= 0.5;
-          eng += 1;
-        }
-      }
-      this.props.onChange(sys, eng, wep);
-    }
+    this._inc('eng', false);
   }
 
   /**
    * Increment the WEP capacitor
    */
   _incWep() {
-    let { sys, eng, wep } = this.props;
+    this._inc('wep', false);
+  }
 
-    const required = Math.min(1, 4 - wep);
-    if (required > 0) {
-      if (required == 0.5) {
-        // Take from whichever is larger
-        if (sys > eng) {
-          sys -= 0.5;
-          wep += 0.5;
-        } else {
-          eng -= 0.5;
-          wep += 0.5;
-        }
+  _wrapMcClick(key) {
+    return (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      if (key == 'rst') {
+        this._reset(true);
       } else {
-        // Required is 1 - take from both if possible
-        if (sys == 0) {
-          eng -= 1;
-          wep += 1;
-        } else if (eng == 0) {
-          sys -= 1;
-          wep += 1;
+        this._inc(key, true);
+      }
+    };
+  }
+
+  /**
+   * Increases a given capacitor
+   * @param {String} key Pip name to increase (one of 'sys', 'eng', 'wep')
+   * @param {Boolean} isMc True when increase is by multi crew
+   */
+  _inc(key, isMc) {
+    if (!['sys', 'eng', 'wep'].includes(key)) {
+      return;
+    }
+
+    let { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
+    let mc = key == 'sys' ? mcSys : (key == 'eng' ? mcEng : mcWep);
+    let pips = this.props[key] - mc;
+    let other1 = key == 'sys' ? eng - mcEng : sys - mcSys;
+    let other2 = key == 'wep' ? eng - mcEng : wep - mcWep;
+
+    const required = Math.min(1, 4 - mc - pips);
+    if (isMc) {
+      // We can only set full pips in multi-crew also we can only set two pips
+      if (required > 0.5 && mcSys + mcEng + mcWep < 2) {
+        if (key == 'sys') {
+          mcSys += 1;
+        } else if (key == 'eng') {
+          mcEng += 1;
         } else {
-          sys -= 0.5;
-          eng -= 0.5;
-          wep += 1;
+          mcWep += 1;
         }
       }
-      this.props.onChange(sys, eng, wep);
+    } else if (required > 0) {
+      if (required == 0.5) {
+        // Take from whichever is larger
+        if (other1 > other2) {
+          other1 -= 0.5;
+        } else {
+          other2 -= 0.5;
+        }
+        pips += 0.5;
+      } else {
+        // Required is 1 - take from both if possible
+        if (other1 == 0) {
+          other2 -= 1;
+        } else if (other2 == 0) {
+          other1 -= 1;
+        } else {
+          other1 -= 0.5;
+          other2 -= 0.5;
+        }
+        pips += 1;
+      }
     }
+
+    sys = mcSys + (key == 'sys' ? pips : other1);
+    eng = mcEng + (key == 'eng' ? pips : (key == 'sys' ? other1 : other2));
+    wep = mcWep + (key == 'wep' ? pips : other2);
+    this.props.onChange(sys, eng, wep, mcSys, mcEng, mcWep);
   }
 
   /**
    * Set up the rendering for pips
-   * @param   {int}     sys the SYS pips
-   * @param   {int}     eng the ENG pips
-   * @param   {int}     wep the WEP pips
+   * @param   {Number}     sys the SYS pips
+   * @param   {Number}     eng the ENG pips
+   * @param   {Number}     wep the WEP pips
+   * @param   {Number}     mcSys SYS pips from multi-crew
+   * @param   {Number}     mcEng ENG pips from multi-crew
+   * @param   {Number}     mcWep WEP pips from multi-crew
    * @returns {Object}      Object containing the rendering for the pips
    */
-  _renderPips(sys, eng, wep) {
-    const pipsSvg = {};
+  _renderPips(sys, eng, wep, mcSys, mcEng, mcWep) {
+    const pipsSvg = {
+      SYS: [],
+      ENG: [],
+      WEP: [],
+    };
 
-    // SYS
-    pipsSvg['SYS'] = [];
-    for (let i = 0; i < Math.floor(sys); i++) {
-      pipsSvg['SYS'].push(<Pip className='full' key={i} />);
-    }
-    if (sys > Math.floor(sys)) {
-      pipsSvg['SYS'].push(<Pip className='half' key={'half'} />);
-    }
-    for (let i = Math.floor(sys + 0.5); i < 4; i++) {
-      pipsSvg['SYS'].push(<Pip className='empty' key={i} />);
-    }
+    // Multi-crew pipsSettings actually are included in the overall pip count therefore
+    // we can consider [0, sys - mcSys] as normal pipsSettings whilst [sys - mcSys, sys]
+    // are the multi-crew pipsSettings in what follows.
 
-    // ENG
-    pipsSvg['ENG'] = [];
-    for (let i = 0; i < Math.floor(eng); i++) {
-      pipsSvg['ENG'].push(<Pip className='full' key={i} />);
-    }
-    if (eng > Math.floor(eng)) {
-      pipsSvg['ENG'].push(<Pip className='half' key={'half'} />);
-    }
-    for (let i = Math.floor(eng + 0.5); i < 4; i++) {
-      pipsSvg['ENG'].push(<Pip className='empty' key={i} />);
-    }
+    let pipsSettings = {
+      SYS: [sys, mcSys],
+      ENG: [eng, mcEng],
+      WEP: [wep, mcWep],
+    };
 
-    // WEP
-    pipsSvg['WEP'] = [];
-    for (let i = 0; i < Math.floor(wep); i++) {
-      pipsSvg['WEP'].push(<Pip className='full' key={i} />);
-    }
-    if (wep > Math.floor(wep)) {
-      pipsSvg['WEP'].push(<Pip className='half' key={'half'} />);
-    }
-    for (let i = Math.floor(wep + 0.5); i < 4; i++) {
-      pipsSvg['WEP'].push(<Pip className='empty' key={i} />);
+    for (let pipName in pipsSettings) {
+      let [pips, mcPips] = pipsSettings[pipName];
+      for (let i = 0; i < Math.floor(pips - mcPips); i++) {
+        pipsSvg[pipName].push(<Pip key={i} className='full' />);
+      }
+      if (pips > Math.floor(pips)) {
+        pipsSvg[pipName].push(<Pip className='half' key={'half'} />);
+      }
+      for (let i = pips - mcPips; i < Math.floor(pips); i++) {
+        pipsSvg[pipName].push(<Pip key={i} className='mc' />);
+      }
+      for (let i = Math.floor(pips + 0.5); i < 4; i++) {
+        pipsSvg[pipName].push(<Pip className='empty' key={i} />);
+      }
     }
 
     return pipsSvg;
@@ -260,15 +229,11 @@ export default class Pips extends TranslatedComponent {
    * @return {React.Component} contents
    */
   render() {
+    const { tooltip, termtip } = this.context;
     const { formats, translate, units } = this.context.language;
-    const { sys, eng, wep } = this.props;
+    const { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
 
-    const onSysClicked = this.onClick.bind(this, 'SYS');
-    const onEngClicked = this.onClick.bind(this, 'ENG');
-    const onWepClicked = this.onClick.bind(this, 'WEP');
-    const onRstClicked = this.onClick.bind(this, 'RST');
-
-    const pipsSvg = this._renderPips(sys, eng, wep);
+    const pipsSvg = this._renderPips(sys, eng, wep, mcSys, mcEng, mcWep);
     return (
       <span id='pips'>
         <table>
@@ -276,20 +241,38 @@ export default class Pips extends TranslatedComponent {
             <tr>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
-              <td className='clickable' onClick={onEngClicked}>{pipsSvg['ENG']}</td>
+              <td className='clickable' onClick={() => this._inc('eng')}
+                onContextMenu={this._wrapMcClick('eng')}>{pipsSvg['ENG']}</td>
               <td>&nbsp;</td>
             </tr>
             <tr>
               <td>&nbsp;</td>
-              <td className='clickable' onClick={onSysClicked}>{pipsSvg['SYS']}</td>
-              <td className='clickable' onClick={onEngClicked}>{translate('ENG')}</td>
-              <td className='clickable' onClick={onWepClicked}>{pipsSvg['WEP']}</td>
+              <td className='clickable' onClick={this._incSys}
+                onContextMenu={this._wrapMcClick('sys')}>{pipsSvg['SYS']}</td>
+              <td className='clickable' onClick={this._incEng}
+                onContextMenu={this._wrapMcClick('eng')}>{translate('ENG')}</td>
+              <td className='clickable' onClick={this._incWep}
+                onContextMenu={this._wrapMcClick('wep')}>{pipsSvg['WEP']}</td>
             </tr>
             <tr>
               <td>&nbsp;</td>
-              <td className='clickable' onClick={onSysClicked}>{translate('SYS')}</td>
-              <td className='clickable' onClick={onRstClicked}>{translate('RST')}</td>
-              <td className='clickable' onClick={onWepClicked}>{translate('WEP')}</td>
+              <td className='clickable' onClick={this._incSys}
+                onContextMenu={this._wrapMcClick('sys')}>{translate('SYS')}</td>
+              <td className='clickable' onClick={this._reset.bind(this, false)}>
+                {translate('RST')}
+              </td>
+              <td className='clickable' onClick={this._incWep}
+                onContextMenu={this._wrapMcClick('wep')}>{translate('WEP')}</td>
+            </tr>
+            <tr>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td className='clickable secondary' onClick={this._wrapMcClick('rst')}
+                onMouseEnter={termtip.bind(null, 'PHRASE_MULTI_CREW_CAPACITOR_POINTS')}
+                onMouseLeave={tooltip.bind(null, null)}>
+                {translate('RST')}
+              </td>
+              <td>&nbsp;</td>
             </tr>
           </tbody>
         </table>

src/app/components/PowerBands.jsx

@@ -32,7 +32,6 @@ function bandText(val, index, wattScale) {
  * Renders the SVG to simulate in-game power bands
  */
 export default class PowerBands extends TranslatedComponent {
-
   static propTypes = {
     bands: PropTypes.array.isRequired,
     available: PropTypes.number.isRequired,

src/app/components/ShipPicker.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import Ship from '../shipyard/Ship';
 import { Ships } from 'coriolis-data/dist';
 import { Rocket } from './SvgIcons';
 import Persist from '../stores/Persist';

src/app/components/Slot.jsx

@@ -6,7 +6,6 @@ import AvailableModulesMenu from './AvailableModulesMenu';
 import ModificationsMenu from './ModificationsMenu';
 import { diffDetails } from '../utils/SlotFunctions';
 import { wrapCtxMenu } from '../utils/UtilityFunctions';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
 /**
  * Abstract Slot
@@ -88,7 +87,7 @@ export default class Slot extends TranslatedComponent {
       if(event.target.className == 'r') {
         this._toggleModifications();
       }
-      this.props.onOpen(event); 
+      this.props.onOpen(event);
     }
   }
   /**

src/app/components/UtilitySlotSection.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import cn from 'classnames';
 import SlotSection from './SlotSection';
 import HardpointSlot from './HardpointSlot';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
@@ -8,7 +7,6 @@ import { stopCtxPropagation } from '../utils/UtilityFunctions';
  * Utility Slot Section
  */
 export default class UtilitySlotSection extends SlotSection {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -133,5 +131,4 @@ export default class UtilitySlotSection extends SlotSection {
       </ul>
     </div>;
   }
-
 }

src/app/components/VerticalBarChart.jsx

@@ -1,7 +1,7 @@
 import TranslatedComponent from './TranslatedComponent';
 import React, { PropTypes } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
-import { BarChart, Bar, XAxis, YAxis } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, LabelList } from 'recharts';
 
 const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
 const LABEL_COLOUR = '#000000';
@@ -17,7 +17,6 @@ const merge = function(one, two) {
  * A vertical bar chart
  */
 export default class VerticalBarChart extends TranslatedComponent {
-
   static propTypes = {
     data : PropTypes.array.isRequired,
     yMax : PropTypes.number
@@ -54,7 +53,9 @@ export default class VerticalBarChart extends TranslatedComponent {
             <BarChart width={width} height={width * ASPECT} data={this.props.data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
               <XAxis interval={0} fontSize='0.8em' stroke={AXIS_COLOUR} dataKey='label' />
               <YAxis interval={'preserveStart'} tickCount={11} fontSize='0.8em' stroke={AXIS_COLOUR} type='number' domain={[0, localMax]}/>
-              <Bar dataKey='value' label={<ValueLabel />} fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}/>
+              <Bar dataKey='value' fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}>
+                <LabelList dataKey='value' position='insideTop'/>
+              </Bar>
             </BarChart>
           </div>
         )}
@@ -77,29 +78,3 @@ export default class VerticalBarChart extends TranslatedComponent {
     }
   }
 }
-
-/**
- * A label that displays the value within the bar of the chart
- */
-class ValueLabel extends React.Component {
-  static propTypes = {
-    x: PropTypes.number,
-    y: PropTypes.number,
-    payload: PropTypes.object,
-    value: PropTypes.number
-  };
-
-  /**
-   * Render offence
-   * @return {React.Component} contents
-   */
-  render() {
-    const { x, y, payload, value } = this.props;
-
-    const em = value < 1000 ? '1em' : value < 1000 ? '0.8em' : '0.7em';
-
-    return (
-      <text x={x} y={y} fill="#000000" textAnchor="middle" dy={20} style={{ fontSize: em }}>{value}</text>
-    );
-  }
-};

src/app/components/WeaponDamageChart.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
-import { CollapseSection, ExpandSection, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import LineChart from '../components/LineChart';
-import Slider from '../components/Slider';
 import * as Calc from '../shipyard/Calculations';
-import Module from '../shipyard/Module';
 
 const DAMAGE_DEALT_COLORS = ['#FFFFFF', '#FF0000', '#00FF00', '#7777FF', '#FFFF00', '#FF00FF', '#00FFFF', '#777777'];
 

src/app/i18n/en.json

@@ -43,6 +43,7 @@
     "PHRASE_SHIELD_DAMAGE": "Breakdown of sources for sustained DPS against shields",
     "PHRASE_ARMOUR_DAMAGE": "Breakdown of sources for sustained DPS against armour",
     "PHRASE_TIME_TO_REMOVE_SHIELDS": "Will remove shields in",
+    "PHRASE_MULTI_CREW_CAPACITOR_POINTS": "Right click a capacitor to assign multi-crew capacitor points.",
     "TT_TIME_TO_REMOVE_SHIELDS": "With sustained fire by all weapons",
     "PHRASE_TIME_TO_REMOVE_ARMOUR": "Will remove armour in",
     "TT_TIME_TO_REMOVE_ARMOUR": "With sustained fire by all weapons",

src/app/index.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import '../less/app.less';

src/app/model/Build.js

@@ -0,0 +1,12 @@
+import { Model } from '@nozbe/watermelondb';
+import { field } from '@nozbe/watermelondb/decorators';
+
+export default class Build extends Model {
+  static table = 'builds';
+
+  @field('title') title;
+
+  @field('code') code;
+
+  @field('ship_id') ship_id;
+}

src/app/model/index.js

@@ -0,0 +1,22 @@
+import { Database } from '@nozbe/watermelondb';
+import LokiJSAdapter from '@nozbe/watermelondb/adapters/lokijs';
+
+import { coriolisSchema } from './schema';
+import Build from './Build';
+// import Post from './model/Post' // ⬅️ You'll import your Models here
+
+// First, create the adapter to the underlying database:
+const adapter = new LokiJSAdapter({
+  dbName: 'coriolis', // ⬅️ Give your database a name!
+  schema: coriolisSchema
+});
+
+// Then, make a Watermelon database from it!
+export const database = new Database({
+  adapter,
+  modelClasses: [
+    Build
+  ]
+});
+
+export const buildsCollection = database.collections.get('builds');

src/app/model/schema.js

@@ -0,0 +1,15 @@
+import {appSchema, tableSchema} from '@nozbe/watermelondb';
+
+export const coriolisSchema = appSchema({
+  version: 2,
+  tables: [
+    tableSchema({
+      name: 'builds',
+      columns: [
+        {name: 'title', type: 'string', isIndexed: true},
+        {name: 'code', type: 'string'},
+        {name: 'ship_id', type: 'string'}
+      ]
+    })
+  ]
+});

src/app/pages/AboutPage.jsx

@@ -6,7 +6,6 @@ import { CoriolisLogo, GitHub } from '../components/SvgIcons';
  * About Page
  */
 export default class AboutPage extends Page {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -23,33 +22,112 @@ export default class AboutPage extends Page {
    * @return {React.Component} The page contents
    */
   renderPage() {
-    return <div className={'page'} style={{ textAlign: 'left', maxWidth: 800, margin: '0 auto' }}>
-      <h1><CoriolisLogo style={{ marginRight: '0.4em' }} className='xl'/><span className='warning'>Coriolis EDCD Edition</span></h1>
+    return (
+      <div
+        className={'page'}
+        style={{ textAlign: 'left', maxWidth: 800, margin: '0 auto' }}
+      >
+        <h1>
+          <CoriolisLogo style={{ marginRight: '0.4em' }} className="xl" />
+          <span className="warning">Coriolis EDCD Edition</span>
+        </h1>
 
-      <p>This is a clone of the Coriolis project, whose original author is currently unable to maintain it. This clone is maintained by the <a href="http://edcd.github.io/">EDCD community</a>.</p>
-      <p>To recover your builds, go to <a href='https://coriolis.io/' target='_blank'>https://coriolis.io/</a>, backup your builds (Settings / Backup), copy the text, return here and import (Settings / Import).</p>
-      <p>The Coriolis project was inspired by <a href='http://www.edshipyard.com/' target='_blank'>E:D Shipyard</a> and, of course, <a href='http://www.elitedangerous.com' target='_blank'>Elite Dangerous</a>. The ultimate goal of Coriolis is to provide rich features to support in-game play and planning while engaging the E:D community to support its development.</p>
-      <p>Coriolis was created using assets and imagery from Elite: Dangerous, with the permission of Frontier Developments plc, for non-commercial purposes. It is not endorsed by nor reflects the views or opinions of Frontier Developments.  A number of assets were sourced from <a href='http://edassets.org' target='_blank'>ED Assets</a></p>
+        <p>
+          This is a clone of the Coriolis project, whose original author is
+          currently unable to maintain it. This clone is maintained by the{' '}
+          <a href="http://edcd.github.io/">EDCD community</a>.
+        </p>
+        <p>
+          To recover your builds, go to{' '}
+          <a href="https://coriolis.io/" target="_blank">
+            https://coriolis.io/
+          </a>
+          , backup your builds (Settings / Backup), copy the text, return here
+          and import (Settings / Import).
+        </p>
+        <p>
+          The Coriolis project was inspired by{' '}
+          <a href="http://www.edshipyard.com/" target="_blank">
+            E:D Shipyard
+          </a>{' '}
+          and, of course,{' '}
+          <a href="http://www.elitedangerous.com" target="_blank">
+            Elite Dangerous
+          </a>
+          . The ultimate goal of Coriolis is to provide rich features to support
+          in-game play and planning while engaging the E:D community to support
+          its development.
+        </p>
+        <p>
+          Coriolis was created using assets and imagery from Elite: Dangerous,
+          with the permission of Frontier Developments plc, for non-commercial
+          purposes. It is not endorsed by nor reflects the views or opinions of
+          Frontier Developments. A number of assets were sourced from{' '}
+          <a href="http://edassets.org" target="_blank">
+            ED Assets
+          </a>
+        </p>
 
-      <a style={{ display: 'block', textDecoration: 'none' }} href='https://github.com/EDCD/coriolis' target='_blank' title='Coriolis Github Project'>
-        <GitHub style={{ margin: '0.4em' }} className='l fg xl'/>
-        <h2 style={{ margin: 0, textDecoration: 'none' }}>Github</h2>
-        github.com/EDCD/coriolis
-      </a>
+        <a
+          style={{ display: 'block', textDecoration: 'none' }}
+          href="https://github.com/EDCD/coriolis"
+          target="_blank"
+          title="Coriolis Github Project"
+        >
+          <GitHub style={{ margin: '0.4em' }} className="l fg xl" />
+          <h2 style={{ margin: 0, textDecoration: 'none' }}>Github</h2>
+          github.com/EDCD/coriolis
+        </a>
 
-      <p>Coriolis is an open source project. Checkout the list of upcoming features and to-do list on github. Any and all contributions and feedback are welcome. If you encounter any bugs please report them and provide as much detail as possible.</p>
+        <p>
+          Coriolis is an open source project. Checkout the list of upcoming
+          features and to-do list on github. Any and all contributions and
+          feedback are welcome. If you encounter any bugs please report them and
+          provide as much detail as possible.
+        </p>
 
-      <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>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>
-      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-        <input type="hidden" name="cmd" value="_s-xclick"/>
-        <input type="hidden" name="hosted_button_id" value="SJBKT2SWEEU68" />
-        <input type="image" src="https://www.paypalobjects.com/en_AU/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!" />
-        <img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1" />
+        <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. I also run ads, which are also used for development and hosting.
+        </p>
+        <form
+          action="https://www.paypal.com/cgi-bin/webscr"
+          method="post"
+          target="_top"
+        >
+          <input type="hidden" name="cmd" value="_s-xclick" />
+          <input type="hidden" name="hosted_button_id" value="SJBKT2SWEEU68" />
+          <input
+            type="image"
+            src="https://www.paypalobjects.com/en_AU/i/btn/btn_donate_SM.gif"
+            border="0"
+            name="submit"
+            alt="PayPal – The safer, easier way to pay online!"
+          />
+          <img
+            alt=""
+            border="0"
+            src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif"
+            width="1"
+            height="1"
+          />
         </form>
-    </div>;
+      </div>
+    );
   }
 }

src/app/pages/ComparisonPage.jsx

@@ -13,7 +13,14 @@ import ModalCompare from '../components/ModalCompare';
 import ModalExport from '../components/ModalExport';
 import ModalPermalink from '../components/ModalPermalink';
 import ModalImport from '../components/ModalImport';
-import { FloppyDisk, Bin, Download, Embed, Rocket, LinkIcon } from '../components/SvgIcons';
+import {
+  FloppyDisk,
+  Bin,
+  Download,
+  Embed,
+  Rocket,
+  LinkIcon
+} from '../components/SvgIcons';
 import ShortenUrl from '../utils/ShortenUrl';
 import { comparisonBBCode } from '../utils/BBCode';
 const browser = require('detect-browser');
@@ -42,7 +49,6 @@ function sortBy(predicate) {
  * Comparison Page
  */
 export default class ComparisonPage extends Page {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -81,7 +87,13 @@ export default class ComparisonPage extends Page {
         for (let shipId in allBuilds) {
           for (let buildName in allBuilds[shipId]) {
             if (buildName && allBuilds[shipId][buildName]) {
-              builds.push(this._createBuild(shipId, buildName, allBuilds[shipId][buildName]));
+              builds.push(
+                this._createBuild(
+                  shipId,
+                  buildName,
+                  allBuilds[shipId][buildName]
+                )
+              );
             }
           }
         }
@@ -89,7 +101,9 @@ export default class ComparisonPage extends Page {
         let comparisonData = Persist.getComparison(name);
         if (comparisonData) {
           defaultFacets = comparisonData.facets;
-          comparisonData.builds.forEach((b) => builds.push(this._createBuild(b.shipId, b.buildName)));
+          comparisonData.builds.forEach(b =>
+            builds.push(this._createBuild(b.shipId, b.buildName))
+          );
           saved = true;
           newName = name;
         }
@@ -101,7 +115,7 @@ export default class ComparisonPage extends Page {
         newName = name = comparisonData.n;
         predicate = comparisonData.p;
         desc = comparisonData.d;
-        comparisonData.b.forEach((build) => {
+        comparisonData.b.forEach(build => {
           builds.push(this._createBuild(build.s, build.n, build.c));
           if (!importObj[build.s]) {
             importObj[build.s] = {};
@@ -118,9 +132,9 @@ export default class ComparisonPage extends Page {
     let selectedFacets = new Array(selectedLength);
 
     for (let i = 0; i < ShipFacets.length; i++) {
-      let facet = Object.assign({ }, ShipFacets[i]);
+      let facet = Object.assign({}, ShipFacets[i]);
       let defaultIndex = defaultFacets.indexOf(facet.i);
-      if(defaultIndex == -1) {
+      if (defaultIndex == -1) {
         facets.push(facet);
       } else {
         facet.active = true;
@@ -155,17 +169,18 @@ export default class ComparisonPage extends Page {
   _createBuild(id, name, code) {
     code = code ? code : Persist.getBuild(id, name); // Retrieve build code if not passed
 
-    if (!code) {  // No build found
+    if (!code) {
+      // No build found
       return;
     }
 
-    let data = Ships[id];   // Get ship properties
+    let data = Ships[id]; // Get ship properties
     let b = new Ship(id, data.properties, data.slots); // Create a new Ship instance
-    b.buildFrom(code);  // Populate components from code
+    b.buildFrom(code); // Populate components from code
     b.buildName = name;
     b.applyDiscounts(Persist.getShipDiscount(), Persist.getModuleDiscount());
     return b;
-  };
+  }
 
   /**
    * Update state with the specified sort predicates
@@ -184,13 +199,18 @@ export default class ComparisonPage extends Page {
     }
 
     this.setState({ predicate, desc });
-  };
+  }
 
   /**
    * Show selected builds modal
    */
   _selectBuilds() {
-    this.context.showModal(<ModalCompare onSelect={this._buildsSelected} builds={this.state.builds} />);
+    this.context.showModal(
+      <ModalCompare
+        onSelect={this._buildsSelected}
+        builds={this.state.builds}
+      />
+    );
   }
 
   /**
@@ -224,7 +244,7 @@ export default class ComparisonPage extends Page {
   _facetDrag(e) {
     this.nodeAfter = false;
     this.dragged = e.currentTarget;
-    let placeholder = this.placeholder = document.createElement('li');
+    let placeholder = (this.placeholder = document.createElement('li'));
     placeholder.style.width = Math.round(this.dragged.offsetWidth) + 'px';
     placeholder.className = 'facet-placeholder';
     if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
@@ -262,7 +282,7 @@ export default class ComparisonPage extends Page {
   _facetDragOver(e) {
     e.preventDefault();
 
-    if(e.target.className == 'facet-placeholder') {
+    if (e.target.className == 'facet-placeholder') {
       return;
     } else if (e.target != e.currentTarget) {
       this.over = e.target;
@@ -272,7 +292,7 @@ export default class ComparisonPage extends Page {
       let parent = e.target.parentNode;
 
       if (parent == e.currentTarget) {
-        if(relX > width && this.dragged != e.target) {
+        if (relX > width && this.dragged != e.target) {
           this.nodeAfter = true;
           parent.insertBefore(this.placeholder, e.target.nextElementSibling);
         } else {
@@ -321,7 +341,7 @@ export default class ComparisonPage extends Page {
     let { newName, builds, facets } = this.state;
     let selectedFacets = [];
 
-    facets.forEach((f) => {
+    facets.forEach(f => {
       if (f.active) {
         selectedFacets.unshift(f.i);
       }
@@ -348,14 +368,20 @@ export default class ComparisonPage extends Page {
 
     let code = fromComparison(name, builds, selectedFacets, predicate, desc);
     let loc = window.location;
-    return loc.protocol + '//' + loc.host + '/comparison?code=' + encodeURIComponent(code);
+    return (
+      loc.protocol +
+      '//' +
+      loc.host +
+      '/comparison?code=' +
+      encodeURIComponent(code)
+    );
   }
 
   /**
    * Generates the long permalink URL
    */
   _genPermalink() {
-    this.context.showModal(<ModalPermalink url={this._buildUrl()}/>);
+    this.context.showModal(<ModalPermalink url={this._buildUrl()} />);
   }
 
   /**
@@ -365,18 +391,25 @@ export default class ComparisonPage extends Page {
     let { translate, formats } = this.context.language;
     let { facets, builds } = this.state;
 
-    let generator = (callback) => {
+    let generator = callback => {
       let url = this._buildUrl();
-      ShortenUrl(url,
-        (shortenedUrl) => callback(comparisonBBCode(translate, formats, facets, builds, shortenedUrl)),
-        (error) => callback(comparisonBBCode(translate, formats, facets, builds, url))
+      ShortenUrl(
+        url,
+        shortenedUrl =>
+          callback(
+            comparisonBBCode(translate, formats, facets, builds, shortenedUrl)
+          ),
+        error =>
+          callback(comparisonBBCode(translate, formats, facets, builds, url))
       );
     };
 
-    this.context.showModal(<ModalExport
-      title={translate('forum') + ' BBCode'}
-      generator={generator}
-    />);
+    this.context.showModal(
+      <ModalExport
+        title={translate('forum') + ' BBCode'}
+        generator={generator}
+      />
+    );
   }
 
   /**
@@ -409,7 +442,8 @@ export default class ComparisonPage extends Page {
    * @param  {Object} nextContext Incoming/Next conext
    */
   componentWillReceiveProps(nextProps, nextContext) {
-    if (this.context.route !== nextContext.route) {  // Only reinit state if the route has changed
+    if (this.context.route !== nextContext.route) {
+      // Only reinit state if the route has changed
       this.setState(this._initState(nextContext));
     }
   }
@@ -419,7 +453,10 @@ export default class ComparisonPage extends Page {
    */
   componentWillMount() {
     this.resizeListener = this.context.onWindowResize(this._updateDimensions);
-    this.persistListener = Persist.addListener('discounts', this._updateDiscounts);
+    this.persistListener = Persist.addListener(
+      'discounts',
+      this._updateDiscounts
+    );
   }
 
   /**
@@ -444,65 +481,132 @@ export default class ComparisonPage extends Page {
   renderPage() {
     let translate = this.context.language.translate;
     let compareHeader;
-    let { newName, name, saved, builds, facets, predicate, desc, chartWidth } = this.state;
+    let {
+      newName,
+      name,
+      saved,
+      builds,
+      facets,
+      predicate,
+      desc,
+      chartWidth
+    } = this.state;
 
     if (this.state.compareMode) {
-      compareHeader = <tr>
-        <td className='head'>{translate('comparison')}</td>
-        <td>
-          <input value={newName} onChange={this._onNameChange} placeholder={translate('Enter Name')} maxLength='50' />
-          <button onClick={this._save} disabled={!newName || newName == 'all' || saved}>
-            <FloppyDisk  className='lg'/><span className='button-lbl'>{translate('save')}</span>
-          </button>
-          <button onClick={this._delete} disabled={name == 'all' || !saved}><Bin className='lg warning'/></button>
-          <button onClick={this._selectBuilds}>
-            <Rocket className='lg'/><span className='button-lbl'>{translate('builds')}</span>
-          </button>
-          <button className='r' onClick={this._genPermalink} disabled={builds.length == 0}>
-            <LinkIcon className='lg'/><span className='button-lbl'>{translate('permalink')}</span>
-          </button>
-          <button className='r' onClick={this._genBBcode} disabled={builds.length == 0}>
-            <Embed className='lg'/><span className='button-lbl'>{translate('forum')}</span>
-          </button>
-        </td>
-      </tr>;
+      compareHeader = (
+        <tr>
+          <td className="head">{translate('comparison')}</td>
+          <td>
+            <input
+              value={newName}
+              onChange={this._onNameChange}
+              placeholder={translate('Enter Name')}
+              maxLength="50"
+            />
+            <button
+              onClick={this._save}
+              disabled={!newName || newName == 'all' || saved}
+            >
+              <FloppyDisk className="lg" />
+              <span className="button-lbl">{translate('save')}</span>
+            </button>
+            <button onClick={this._delete} disabled={name == 'all' || !saved}>
+              <Bin className="lg warning" />
+            </button>
+            <button onClick={this._selectBuilds}>
+              <Rocket className="lg" />
+              <span className="button-lbl">{translate('builds')}</span>
+            </button>
+            <button
+              className="r"
+              onClick={this._genPermalink}
+              disabled={builds.length == 0}
+            >
+              <LinkIcon className="lg" />
+              <span className="button-lbl">{translate('permalink')}</span>
+            </button>
+            <button
+              className="r"
+              onClick={this._genBBcode}
+              disabled={builds.length == 0}
+            >
+              <Embed className="lg" />
+              <span className="button-lbl">{translate('forum')}</span>
+            </button>
+          </td>
+        </tr>
+      );
     } else {
-      compareHeader = <tr>
-        <td className='head'>{translate('comparison')}</td>
-        <td>
-          <h3>{name}</h3>
-          <button className='r' onClick={this._import}><Download className='lg'/>{translate('import')}</button>
-        </td>
-      </tr>;
+      compareHeader = (
+        <tr>
+          <td className="head">{translate('comparison')}</td>
+          <td>
+            <h3>{name}</h3>
+            <button className="r" onClick={this._import}>
+              <Download className="lg" />
+              {translate('import')}
+            </button>
+          </td>
+        </tr>
+      );
     }
 
     return (
-      <div className={'page'} style={{ fontSize: this.context.sizeRatio + 'em' }}>
-        <table id='comparison'>
+      <div
+        className={'page'}
+        style={{ fontSize: this.context.sizeRatio + 'em' }}
+      >
+        <table id="comparison">
           <tbody>
             {compareHeader}
-            <tr key='facets'>
-              <td className='head'>{translate('compare')}</td>
+            <tr key="facets">
+              <td className="head">{translate('compare')}</td>
               <td>
-                <ul id='facet-container' onDragOver={this._facetDragOver}>
-                  {facets.map((f, i) =>
-                    <li key={f.title} data-i={i} draggable='true' onDragStart={this._facetDrag} onDragEnd={this._facetDrop} className={cn('facet', { active: f.active })} onClick={this._toggleFacet.bind(this, f)}>
+                <ul id="facet-container" onDragOver={this._facetDragOver}>
+                  {facets.map((f, i) => (
+                    <li
+                      key={f.title}
+                      data-i={i}
+                      draggable="true"
+                      onDragStart={this._facetDrag}
+                      onDragEnd={this._facetDrop}
+                      className={cn('facet', { active: f.active })}
+                      onClick={this._toggleFacet.bind(this, f)}
+                    >
                       {'↔  ' + translate(f.title)}
                     </li>
-                  )}
+                  ))}
                 </ul>
               </td>
             </tr>
           </tbody>
         </table>
 
-        <ComparisonTable builds={builds} facets={facets} onSort={this._sortShips} predicate={predicate} desc={desc} />
+        <ComparisonTable
+          builds={builds}
+          facets={facets}
+          onSort={this._sortShips}
+          predicate={predicate}
+          desc={desc}
+        />
 
-        {!builds.length ?
-          <div className='chart' ref={node => this.chartRef = node}>{translate('PHRASE_NO_BUILDS')}</div> :
-          facets.filter((f) => f.active).map((f, i) =>
-            <div key={f.title} className='chart' ref={ i == 0 ? node => this.chartRef = node : null}>
-              <h3 className='ptr' onClick={this._sortShips.bind(this, f.props[0])}>{translate(f.title)}</h3>
+        {!builds.length ? (
+          <div className="chart" ref={node => (this.chartRef = node)}>
+            {translate('PHRASE_NO_BUILDS')}
+          </div>
+        ) : (
+          facets.filter(f => f.active).map((f, i) => (
+            <div
+              key={f.title}
+              className="chart"
+              ref={i == 0 ? node => (this.chartRef = node) : null}
+            >
+              <h3
+                className="ptr"
+                onClick={this._sortShips.bind(this, f.props[0])}
+              >
+                {translate(f.title)}
+              </h3>
               <BarChart
                 width={chartWidth}
                 data={builds}
@@ -515,8 +619,8 @@ export default class ComparisonPage extends Page {
                 desc={desc}
               />
             </div>
+          ))
         )}
-
       </div>
     );
   }

src/app/pages/NotFoundPage.jsx

@@ -5,7 +5,6 @@ import Page from './Page';
  * 404 Page
  */
 export default class NotFoundPage extends Page {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -22,6 +21,10 @@ export default class NotFoundPage extends Page {
    * @return {React.Component} The page contents
    */
   renderPage() {
-    return <div className='page' style={{ marginTop: 30 }}>Page <small>{this.context.route.path}</small> Not Found</div>;
+    return (
+      <div className="page" style={{ marginTop: 30 }}>
+        Page <small>{this.context.route.path}</small> Not Found
+      </div>
+    );
   }
 }

src/app/pages/OutfittingPage.jsx

@@ -38,6 +38,7 @@ import ModalExport from '../components/ModalExport';
 import ModalPermalink from '../components/ModalPermalink';
 import ModalShoppingList from '../components/ModalShoppingList';
 import ModalOrbis from '../components/ModalOrbis';
+import { autoBind } from 'react-extras';
 
 /**
  * Document Title Generator
@@ -53,7 +54,6 @@ function getTitle(shipName, buildName) {
  * The Outfitting Page
  */
 export default class OutfittingPage extends Page {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -63,14 +63,7 @@ export default class OutfittingPage extends Page {
     super(props, context);
     // window.Perf = Perf;
     this.state = this._initState(props, context);
-    this._keyDown = this._keyDown.bind(this);
-    this._exportBuild = this._exportBuild.bind(this);
-    this._pipsUpdated = this._pipsUpdated.bind(this);
-    this._boostUpdated = this._boostUpdated.bind(this);
-    this._cargoUpdated = this._cargoUpdated.bind(this);
-    this._fuelUpdated = this._fuelUpdated.bind(this);
-    this._opponentUpdated = this._opponentUpdated.bind(this);
-    this._engagementRangeUpdated = this._engagementRangeUpdated.bind(this);
+    autoBind(this);
     this._sectionMenuRefs = {};
   }
 
@@ -84,23 +77,39 @@ export default class OutfittingPage extends Page {
     let params = context.route.params;
     let shipId = params.ship;
     let code = params.code;
+    let savedCode = code;
     let buildName = params.bn;
-    let data = Ships[shipId];   // Retrieve the basic ship properties, slots and defaults
-    let savedCode = Persist.getBuild(shipId, buildName);
+    let data = Ships[shipId]; // Retrieve the basic ship properties, slots and defaults
     if (!data) {
       return { error: { message: 'Ship not found: ' + shipId } };
     }
-    let ship = new Ship(shipId, data.properties, data.slots);          // Create a new Ship instance
+    let ship = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
     if (code) {
-      ship.buildFrom(code);  // Populate modules from serialized 'code' URL param
+      ship.buildFrom(code); // Populate modules from serialized 'code' URL param
     } else {
-      ship.buildWith(data.defaults);  // Populate with default components
+      ship.buildWith(data.defaults); // Populate with default components
     }
 
     this._getTitle = getTitle.bind(this, data.properties.name);
 
     // Obtain ship control from code
-    const { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange } = this._obtainControlFromCode(ship, code);
+    const {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      fuel,
+      cargo,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      engagementRange
+    } = this._obtainControlFromCode(ship, code);
     return {
       error: null,
       title: this._getTitle(buildName),
@@ -114,6 +123,9 @@ export default class OutfittingPage extends Page {
       sys,
       eng,
       wep,
+      mcSys,
+      mcEng,
+      mcWep,
       boost,
       fuel,
       cargo,
@@ -126,6 +138,13 @@ export default class OutfittingPage extends Page {
     };
   }
 
+  async getBuild() {
+    const build = await Persist.getBuild(this.state.shipId, this.state.buildName);
+    if (build) {
+      this.setState({id: build.id, savedCode: build.code})
+    }
+  }
+
   /**
    * Handle build name change and update state
    * @param  {SyntheticEvent} event React Event
@@ -136,7 +155,10 @@ export default class OutfittingPage extends Page {
     };
 
     if (Persist.hasBuild(this.state.shipId, stateChanges.newBuildName)) {
-      stateChanges.savedCode = Persist.getBuild(this.state.shipId, stateChanges.newBuildName);
+      stateChanges.savedCode = Persist.getBuild(
+        this.state.shipId,
+        stateChanges.newBuildName
+      );
     } else {
       stateChanges.savedCode = null;
     }
@@ -162,7 +184,9 @@ export default class OutfittingPage extends Page {
    * @returns {string}        the code for this ship
    */
   _fullCode(ship, fuel, cargo) {
-    return `${ship.toString()}.${LZString.compressToBase64(this._controlCode(fuel, cargo))}`;
+    return `${ship.toString()}.${LZString.compressToBase64(
+      this._controlCode(fuel, cargo)
+    )}`;
   }
 
   /**
@@ -176,10 +200,17 @@ export default class OutfittingPage extends Page {
     let sys = 2;
     let eng = 2;
     let wep = 2;
+    let mcSys = 0;
+    let mcEng = 0;
+    let mcWep = 0;
     let boost = false;
     let fuel = ship.fuelCapacity;
     let cargo = ship.cargoCapacity;
-    let opponent = new Ship('eagle', Ships['eagle'].properties, Ships['eagle'].slots).buildWith(Ships['eagle'].defaults);
+    let opponent = new Ship(
+      'eagle',
+      Ships['eagle'].properties,
+      Ships['eagle'].slots
+    ).buildWith(Ships['eagle'].defaults);
     let opponentSys = 2;
     let opponentEng = 2;
     let opponentWep = 2;
@@ -191,16 +222,22 @@ export default class OutfittingPage extends Page {
       const parts = code.split('.');
       if (parts.length >= 5) {
         // We have control information in the code
-        const control = LZString.decompressFromBase64(Utils.fromUrlSafe(parts[4])).split('/');
-        sys = parseFloat(control[0]);
-        eng = parseFloat(control[1]);
-        wep = parseFloat(control[2]);
+        const control = LZString.decompressFromBase64(
+          Utils.fromUrlSafe(parts[4])
+        ).split('/');
+        sys = parseFloat(control[0]) || sys;
+        eng = parseFloat(control[1]) || eng;
+        wep = parseFloat(control[2]) || wep;
         boost = control[3] == 1 ? true : false;
-        fuel = parseFloat(control[4]);
-        cargo = parseInt(control[5]);
+        fuel = parseFloat(control[4]) || fuel;
+        cargo = parseInt(control[5]) || cargo;
         if (control[6]) {
           const shipId = control[6];
-          opponent = new Ship(shipId, Ships[shipId].properties, Ships[shipId].slots);
+          opponent = new Ship(
+            shipId,
+            Ships[shipId].properties,
+            Ships[shipId].slots
+          );
           if (control[7] && Persist.getBuild(shipId, control[7])) {
             // Ship is a particular build
             const opponentCode = Persist.getBuild(shipId, control[7]);
@@ -210,10 +247,12 @@ export default class OutfittingPage extends Page {
               // Obtain opponent's sys/eng/wep pips from their code
               const opponentParts = opponentCode.split('.');
               if (opponentParts.length >= 5) {
-                const opponentControl = LZString.decompressFromBase64(Utils.fromUrlSafe(opponentParts[4])).split('/');
-                opponentSys = parseFloat(opponentControl[0]);
-                opponentEng = parseFloat(opponentControl[1]);
-                opponentWep = parseFloat(opponentControl[2]);
+                const opponentControl = LZString.decompressFromBase64(
+                  Utils.fromUrlSafe(opponentParts[4])
+                ).split('/');
+                opponentSys = parseFloat(opponentControl[0]) || opponentSys;
+                opponentEng = parseFloat(opponentControl[1]) || opponentEng;
+                opponentWep = parseFloat(opponentControl[2]) || opponentWep;
               }
             }
           } else {
@@ -221,21 +260,50 @@ export default class OutfittingPage extends Page {
             opponent.buildWith(Ships[shipId].defaults);
           }
         }
-        engagementRange = parseInt(control[8]);
+        engagementRange = parseInt(control[8]) || engagementRange;
+
+        // Multi-crew pips were introduced later on so assign default values
+        // because those values might not be present.
+        mcSys = parseInt(control[9]) || mcSys;
+        mcEng = parseInt(control[10]) || mcEng;
+        mcWep = parseInt(control[11]) || mcWep;
       }
     }
 
-    return { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange };
+    return {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      fuel,
+      cargo,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      engagementRange
+    };
   }
 
   /**
-   * Triggered when pips have been updated
+   * Triggered when pips have been updated. Multi-crew pips are already included
+   * in sys, eng and wep but mcSys, mcEng and mcWep make clear where each pip
+   * comes from.
    * @param {number} sys    SYS pips
    * @param {number} eng    ENG pips
    * @param {number} wep    WEP pips
+   * @param {number} mcSys  SYS pips from multi-crew
+   * @param {number} mcEng  ENG pips from multi-crew
+   * @param {number} mcWep  WEP pips from multi-crew
    */
-  _pipsUpdated(sys, eng, wep) {
-    this.setState({ sys, eng, wep }, () =>  this._updateRouteOnControlChange());
+  _pipsUpdated(sys, eng, wep, mcSys, mcEng, mcWep) {
+    this.setState({ sys, eng, wep, mcSys, mcEng, mcWep }, () =>
+      this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -243,7 +311,7 @@ export default class OutfittingPage extends Page {
    * @param {boolean} boost true if boosting
    */
   _boostUpdated(boost) {
-    this.setState({ boost }, () =>  this._updateRouteOnControlChange());
+    this.setState({ boost }, () => this._updateRouteOnControlChange());
   }
 
   /**
@@ -251,7 +319,7 @@ export default class OutfittingPage extends Page {
    * @param {number} fuel the amount of fuel, in T
    */
   _fuelUpdated(fuel) {
-    this.setState({ fuel }, () =>  this._updateRouteOnControlChange());
+    this.setState({ fuel }, () => this._updateRouteOnControlChange());
   }
 
   /**
@@ -259,7 +327,7 @@ export default class OutfittingPage extends Page {
    * @param {number} cargo the amount of cargo, in T
    */
   _cargoUpdated(cargo) {
-    this.setState({ cargo }, () =>  this._updateRouteOnControlChange());
+    this.setState({ cargo }, () => this._updateRouteOnControlChange());
   }
 
   /**
@@ -267,7 +335,9 @@ export default class OutfittingPage extends Page {
    * @param {number} engagementRange the engagement range, in m
    */
   _engagementRangeUpdated(engagementRange) {
-    this.setState({ engagementRange }, () =>  this._updateRouteOnControlChange());
+    this.setState({ engagementRange }, () =>
+      this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -276,7 +346,11 @@ export default class OutfittingPage extends Page {
    * @param {string} opponentBuild  the name of the opponent's build
    */
   _opponentUpdated(opponent, opponentBuild) {
-    const opponentShip  = new Ship(opponent, Ships[opponent].properties, Ships[opponent].slots);
+    const opponentShip = new Ship(
+      opponent,
+      Ships[opponent].properties,
+      Ships[opponent].slots
+    );
     let opponentSys = this.state.opponentSys;
     let opponentEng = this.state.opponentEng;
     let opponentWep = this.state.opponentWep;
@@ -284,9 +358,13 @@ export default class OutfittingPage extends Page {
       // Ship is a particular build
       opponentShip.buildFrom(Persist.getBuild(opponent, opponentBuild));
       // Set pips for opponent
-      const opponentParts = Persist.getBuild(opponent, opponentBuild).split('.');
+      const opponentParts = Persist.getBuild(opponent, opponentBuild).split(
+        '.'
+      );
       if (opponentParts.length >= 5) {
-        const opponentControl = LZString.decompressFromBase64(Utils.fromUrlSafe(opponentParts[4])).split('/');
+        const opponentControl = LZString.decompressFromBase64(
+          Utils.fromUrlSafe(opponentParts[4])
+        ).split('/');
         opponentSys = parseFloat(opponentControl[0]);
         opponentEng = parseFloat(opponentControl[1]);
         opponentWep = parseFloat(opponentControl[2]);
@@ -299,7 +377,16 @@ export default class OutfittingPage extends Page {
       opponentWep = 2;
     }
 
-    this.setState({ opponent: opponentShip, opponentBuild, opponentSys, opponentEng, opponentWep }, () =>  this._updateRouteOnControlChange());
+    this.setState(
+      {
+        opponent: opponentShip,
+        opponentBuild,
+        opponentSys,
+        opponentEng,
+        opponentWep
+      },
+      () => this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -309,39 +396,71 @@ export default class OutfittingPage extends Page {
    * @returns {string}        The control code
    */
   _controlCode(fuel, cargo) {
-    const { sys, eng, wep, boost, opponent, opponentBuild, engagementRange } = this.state;
-    const code = `${sys}/${eng}/${wep}/${boost ? 1 : 0}/${fuel || this.state.fuel}/${cargo || this.state.cargo}/${opponent.id}/${opponentBuild ? opponentBuild : ''}/${engagementRange}`;
+    const {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      opponent,
+      opponentBuild,
+      engagementRange
+    } = this.state;
+    const code = `${sys}/${eng}/${wep}/${boost ? 1 : 0}/${fuel ||
+      this.state.fuel}/${cargo || this.state.cargo}/${opponent.id}/${
+      opponentBuild ? opponentBuild : ''
+    }/${engagementRange}/${mcSys}/${mcEng}/${mcWep}`;
     return code;
   }
 
   /**
    * Save the current build
    */
-  _saveBuild() {
-    const { ship, buildName, newBuildName, shipId } = this.state;
-
+  async _saveBuild() {
+    const { ship, buildName, newBuildName, shipId, id } = this.state;
+    this.getBuild();
     // If this is a stock ship the code won't be set, so ensure that we have it
-    const code =  this.state.code || ship.toString();
+    const code = this.state.code || ship.toString();
 
-    Persist.saveBuild(shipId, newBuildName, code);
+    const yes = await Persist.saveBuild(id, newBuildName, code, shipId);
+    console.log(yes)
     this._updateRoute(shipId, newBuildName, code);
 
     let opponent, opponentBuild, opponentSys, opponentEng, opponentWep;
-    if (shipId === this.state.opponent.id && buildName === this.state.opponentBuild) {
+    if (
+      shipId === this.state.opponent.id &&
+      buildName === this.state.opponentBuild
+    ) {
       // This is a save of our current opponent build; update it
       opponentBuild = newBuildName;
-      opponent  = new Ship(shipId, Ships[shipId].properties, Ships[shipId].slots).buildFrom(code);
+      opponent = new Ship(
+        shipId,
+        Ships[shipId].properties,
+        Ships[shipId].slots
+      ).buildFrom(code);
       opponentSys = this.state.sys;
       opponentEng = this.state.eng;
       opponentWep = this.state.wep;
     } else {
       opponentBuild = this.state.opponentBuild;
-      opponent  = this.state.opponent;
+      opponent = this.state.opponent;
       opponentSys = this.state.opponentSys;
       opponentEng = this.state.opponentEng;
       opponentWep = this.state.opponentWep;
     }
-    this.setState({ buildName: newBuildName, code, savedCode: code, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, title: this._getTitle(newBuildName) });
+    this.setState({
+      buildName: newBuildName,
+      code,
+      savedCode: code,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      title: this._getTitle(newBuildName)
+    });
   }
 
   /**
@@ -353,7 +472,12 @@ export default class OutfittingPage extends Page {
       Persist.deleteBuild(shipId, buildName);
       Persist.saveBuild(shipId, newBuildName, code);
       this._updateRoute(shipId, newBuildName, code);
-      this.setState({ buildName: newBuildName, code, savedCode: code, opponentBuild: newBuildName });
+      this.setState({
+        buildName: newBuildName,
+        code,
+        savedCode: code,
+        opponentBuild: newBuildName
+      });
     }
   }
 
@@ -373,19 +497,38 @@ export default class OutfittingPage extends Page {
     ship.buildWith(Ships[shipId].defaults);
     // Reset controls
     const code = ship.toString();
-    const { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, engagementRange } = this._obtainControlFromCode(ship, code);
-    // Update state, and refresh the ship
-    this.setState({
+    const {
       sys,
       eng,
       wep,
+      mcSys,
+      mcEng,
+      mcWep,
       boost,
       fuel,
       cargo,
       opponent,
       opponentBuild,
       engagementRange
-    }, () => this._updateRoute(shipId, buildName, code));
+    } = this._obtainControlFromCode(ship, code);
+    // Update state, and refresh the ship
+    this.setState(
+      {
+        sys,
+        eng,
+        wep,
+        mcSys,
+        mcEng,
+        mcWep,
+        boost,
+        fuel,
+        cargo,
+        opponent,
+        opponentBuild,
+        engagementRange
+      },
+      () => this._updateRoute(shipId, buildName, code)
+    );
   }
 
   /**
@@ -396,7 +539,10 @@ export default class OutfittingPage extends Page {
     Persist.deleteBuild(shipId, buildName);
 
     let opponentBuild;
-    if (shipId === this.state.opponent.id && buildName === this.state.opponentBuild) {
+    if (
+      shipId === this.state.opponent.id &&
+      buildName === this.state.opponentBuild
+    ) {
       // Our current opponent has been deleted; revert to stock
       opponentBuild = null;
     } else {
@@ -413,11 +559,13 @@ export default class OutfittingPage extends Page {
   _exportBuild() {
     let translate = this.context.language.translate;
     let { buildName, ship } = this.state;
-    this.context.showModal(<ModalExport
-      title={(buildName || ship.name) + ' ' + translate('export')}
-      description={translate('PHRASE_EXPORT_DESC')}
-      data={toDetailedBuild(buildName, ship, ship.toString())}
-    />);
+    this.context.showModal(
+      <ModalExport
+        title={(buildName || ship.name) + ' ' + translate('export')}
+        description={translate('PHRASE_EXPORT_DESC')}
+        data={toDetailedBuild(buildName, ship, ship.toString())}
+      />
+    );
   }
 
   /**
@@ -430,19 +578,38 @@ export default class OutfittingPage extends Page {
     this.state.ship.buildFrom(code);
 
     // Obtain controls from the code
-    const { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, engagementRange } = this._obtainControlFromCode(ship, code);
-    // Update state, and refresh the route when complete
-    this.setState({
+    const {
       sys,
       eng,
       wep,
+      mcSys,
+      mcEng,
+      mcWep,
       boost,
       fuel,
       cargo,
       opponent,
       opponentBuild,
       engagementRange
-    }, () => this._updateRoute(shipId, buildName, code));
+    } = this._obtainControlFromCode(ship, code);
+    // Update state, and refresh the route when complete
+    this.setState(
+      {
+        sys,
+        eng,
+        wep,
+        mcSys,
+        mcEng,
+        mcWep,
+        boost,
+        fuel,
+        cargo,
+        opponent,
+        opponentBuild,
+        engagementRange
+      },
+      () => this._updateRoute(shipId, buildName, code)
+    );
   }
 
   /**
@@ -458,8 +625,14 @@ export default class OutfittingPage extends Page {
     }
     const code = this._fullCode(ship, fuel, cargo);
     // Only update the state if this really has been updated
-    if (this.state.code != code || this.state.cargo != cargo || this.state.fuel != fuel) {
-      this.setState({ code, cargo, fuel }, () => this._updateRoute(shipId, buildName, code));
+    if (
+      this.state.code != code ||
+      this.state.cargo != cargo ||
+      this.state.fuel != fuel
+    ) {
+      this.setState({ code, cargo, fuel }, () =>
+        this._updateRoute(shipId, buildName, code)
+      );
     }
   }
 
@@ -479,7 +652,8 @@ export default class OutfittingPage extends Page {
    * @param  {Object} nextContext Incoming/Next conext
    */
   componentWillReceiveProps(nextProps, nextContext) {
-    if (this.context.route !== nextContext.route) {  // Only reinit state if the route has changed
+    if (this.context.route !== nextContext.route) {
+      // Only reinit state if the route has changed
       this.setState(this._initState(nextProps, nextContext));
     }
   }
@@ -488,6 +662,7 @@ export default class OutfittingPage extends Page {
    * Add listeners when about to mount
    */
   componentWillMount() {
+    this.getBuild()
     document.addEventListener('keydown', this._keyDown);
   }
 
@@ -502,7 +677,7 @@ export default class OutfittingPage extends Page {
    * Generates the short URL
    */
   _genShortlink() {
-    this.context.showModal(<ModalPermalink url={window.location.href}/>);
+    this.context.showModal(<ModalPermalink url={window.location.href} />);
   }
 
   /**
@@ -519,7 +694,7 @@ export default class OutfittingPage extends Page {
     data.ShipName = ship.id;
     data.Ship = ship.id;
     console.log(data);
-    this.context.showModal(<ModalOrbis ship={data}/>);
+    this.context.showModal(<ModalOrbis ship={data} />);
   }
 
   /**
@@ -530,17 +705,23 @@ export default class OutfittingPage extends Page {
 
     const shipId = Ships[ship.id].eddbID;
     // Provide unique list of non-PP module EDDB IDs
-    const modIds = ship.internal.concat(ship.bulkheads, ship.standard, ship.hardpoints).filter(slot => slot !== null && slot.m !== null && !slot.m.pp).map(slot => slot.m.eddbID).filter((v, i, a) => a.indexOf(v) === i);
+    const modIds = ship.internal
+      .concat(ship.bulkheads, ship.standard, ship.hardpoints)
+      .filter(slot => slot !== null && slot.m !== null && !slot.m.pp)
+      .map(slot => slot.m.eddbID)
+      .filter((v, i, a) => a.indexOf(v) === i);
 
     // Open up the relevant URL
-    window.open('https://eddb.io/station?s=' + shipId + '&m=' + modIds.join(','));
+    window.open(
+      'https://eddb.io/station?s=' + shipId + '&m=' + modIds.join(',')
+    );
   }
 
   /**
    * Generates the shopping list
    */
   _genShoppingList() {
-    this.context.showModal(<ModalShoppingList ship={this.state.ship}/>);
+    this.context.showModal(<ModalShoppingList ship={this.state.ship} />);
   }
 
   /**
@@ -550,8 +731,9 @@ export default class OutfittingPage extends Page {
   _keyDown(e) {
     // .keyCode will eventually be replaced with .key
     switch (e.keyCode) {
-      case 69:     // 'e'
-        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + e
+      case 69: // 'e'
+        if (e.ctrlKey || e.metaKey) {
+          // CTRL/CMD + e
           e.preventDefault();
           this._exportBuild();
         }
@@ -567,7 +749,28 @@ export default class OutfittingPage extends Page {
     let state = this.state,
         { language, termtip, tooltip, sizeRatio, onWindowResize } = this.context,
         { translate, units, formats } = language,
-        { ship, code, savedCode, buildName, newBuildName, sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange } = state,
+        {
+          ship,
+          code,
+          savedCode,
+          buildName,
+          newBuildName,
+          sys,
+          eng,
+          wep,
+          mcSys,
+          mcEng,
+          mcWep,
+          boost,
+          fuel,
+          cargo,
+          opponent,
+          opponentBuild,
+          opponentSys,
+          opponentEng,
+          opponentWep,
+          engagementRange
+        } = state,
         hide = tooltip.bind(null, null),
         menu = this.props.currentMenu,
         shipUpdated = this._shipUpdated,
@@ -585,11 +788,15 @@ export default class OutfittingPage extends Page {
     const _pStr = `${ship.getPowerEnabledString()}${ship.getPowerPrioritiesString()}`;
     const _mStr = ship.getModificationsString();
 
-    const standardSlotMarker = `${ship.name}${_sStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
+    const standardSlotMarker = `${ship.name}${_sStr}${_pStr}${_mStr}${
+      ship.ladenMass
+    }${cargo}${fuel}`;
     const internalSlotMarker = `${ship.name}${_iStr}${_pStr}${_mStr}`;
     const hardpointsSlotMarker = `${ship.name}${_hStr}${_pStr}${_mStr}`;
     const boostMarker = `${ship.canBoost(cargo, fuel)}`;
-    const shipSummaryMarker = `${ship.name}${_sStr}${_iStr}${_hStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
+    const shipSummaryMarker = `${
+      ship.name
+    }${_sStr}${_iStr}${_hStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
 
     const requirements = Ships[ship.id].requirements;
     let requirementElements = [];
@@ -601,94 +808,275 @@ export default class OutfittingPage extends Page {
      */
     function renderRequirement(className, textKey, tooltipTextKey) {
       if (textKey.startsWith('empire') || textKey.startsWith('federation')) {
-        requirementElements.push(<div key={textKey} className={className} onMouseEnter={termtip.bind(null, tooltipTextKey)} onMouseLeave={hide}><a href={textKey.startsWith('empire') ? 'http://elite-dangerous.wikia.com/wiki/Empire/Ranks' : 'http://elite-dangerous.wikia.com/wiki/Federation/Ranks'} target="_blank" rel="noopener">{translate(textKey)}</a></div>);
+        requirementElements.push(
+          <div
+            key={textKey}
+            className={className}
+            onMouseEnter={termtip.bind(null, tooltipTextKey)}
+            onMouseLeave={hide}
+          >
+            <a
+              href={
+                textKey.startsWith('empire') ?
+                  'http://elite-dangerous.wikia.com/wiki/Empire/Ranks' :
+                  'http://elite-dangerous.wikia.com/wiki/Federation/Ranks'
+              }
+              target="_blank"
+              rel="noopener"
+            >
+              {translate(textKey)}
+            </a>
+          </div>
+        );
       } else {
-        requirementElements.push(<div key={textKey} className={className} onMouseEnter={termtip.bind(null, tooltipTextKey)} onMouseLeave={hide}>{translate(textKey)}</div>);
+        requirementElements.push(
+          <div
+            key={textKey}
+            className={className}
+            onMouseEnter={termtip.bind(null, tooltipTextKey)}
+            onMouseLeave={hide}
+          >
+            {translate(textKey)}
+          </div>
+        );
       }
     }
 
     if (requirements) {
-      requirements.federationRank && renderRequirement('federation', 'federation rank ' + requirements.federationRank, 'federation rank required');
-      requirements.empireRank && renderRequirement('empire', 'empire rank ' + requirements.empireRank, 'empire rank required');
-      requirements.horizons && renderRequirement('horizons', 'horizons', 'horizons required');
-      requirements.horizonsEarlyAdoption && renderRequirement('horizons', 'horizons early adoption', 'horizons early adoption required');
+      requirements.federationRank &&
+        renderRequirement(
+          'federation',
+          'federation rank ' + requirements.federationRank,
+          'federation rank required'
+        );
+      requirements.empireRank &&
+        renderRequirement(
+          'empire',
+          'empire rank ' + requirements.empireRank,
+          'empire rank required'
+        );
+      requirements.horizons &&
+        renderRequirement('horizons', 'horizons', 'horizons required');
+      requirements.horizonsEarlyAdoption &&
+        renderRequirement(
+          'horizons',
+          'horizons early adoption',
+          'horizons early adoption required'
+        );
     }
 
     return (
-      <div id='outfit' className={'page'} style={{ fontSize: (sizeRatio * 0.9) + 'em' }}>
-        <div id='overview'>
+      <div
+        id="outfit"
+        className={'page'}
+        style={{ fontSize: sizeRatio * 0.9 + 'em' }}
+      >
+        <div id="overview">
           <h1>{ship.name}</h1>
-          <div id='requirements'>{requirementElements}</div>
-          <div id='build'>
-            <input value={newBuildName || ''} onChange={this._buildNameChange} placeholder={translate('Enter Name')} maxLength={50} />
-            <button onClick={canSave && this._saveBuild} disabled={!canSave} onMouseOver={termtip.bind(null, 'save')} onMouseOut={hide}>
-              <FloppyDisk className='lg' />
+          <div id="requirements">{requirementElements}</div>
+          <div id="build">
+            <input
+              value={newBuildName || ''}
+              onChange={this._buildNameChange}
+              placeholder={translate('Enter Name')}
+              maxLength={50}
+            />
+            <button
+              onClick={canSave && this._saveBuild}
+              disabled={!canSave}
+              onMouseOver={termtip.bind(null, 'save')}
+              onMouseOut={hide}
+            >
+              <FloppyDisk className="lg" />
             </button>
-            <button onClick={canRename && this._renameBuild} disabled={!canRename} onMouseOver={termtip.bind(null, 'rename')} onMouseOut={hide}>
-            <span style={{ textTransform: 'none', fontSize: '1.8em' }}>a|</span>
+            <button
+              onClick={canRename && this._renameBuild}
+              disabled={!canRename}
+              onMouseOver={termtip.bind(null, 'rename')}
+              onMouseOut={hide}
+            >
+              <span style={{ textTransform: 'none', fontSize: '1.8em' }}>
+                a|
+              </span>
             </button>
-            <button onClick={canReload && this._reloadBuild} disabled={!canReload} onMouseOver={termtip.bind(null, 'reload')} onMouseOut={hide}>
-              <Reload className='lg'/>
+            <button
+              onClick={canReload && this._reloadBuild}
+              disabled={!canReload}
+              onMouseOver={termtip.bind(null, 'reload')}
+              onMouseOut={hide}
+            >
+              <Reload className="lg" />
             </button>
-            <button className={'danger'} onClick={savedCode && this._deleteBuild} disabled={!savedCode} onMouseOver={termtip.bind(null, 'delete')} onMouseOut={hide}>
-              <Bin className='lg'/>
+            <button
+              className={'danger'}
+              onClick={savedCode && this._deleteBuild}
+              disabled={!savedCode}
+              onMouseOver={termtip.bind(null, 'delete')}
+              onMouseOut={hide}
+            >
+              <Bin className="lg" />
             </button>
-            <button onClick={code && this._resetBuild} disabled={!code} onMouseOver={termtip.bind(null, 'reset')} onMouseOut={hide}>
-              <Switch className='lg'/>
+            <button
+              onClick={code && this._resetBuild}
+              disabled={!code}
+              onMouseOver={termtip.bind(null, 'reset')}
+              onMouseOut={hide}
+            >
+              <Switch className="lg" />
             </button>
-            <button onClick={buildName && this._exportBuild} disabled={!buildName} onMouseOver={termtip.bind(null, 'export')} onMouseOut={hide}>
-              <Download className='lg'/>
+            <button
+              onClick={buildName && this._exportBuild}
+              disabled={!buildName}
+              onMouseOver={termtip.bind(null, 'export')}
+              onMouseOut={hide}
+            >
+              <Download className="lg" />
             </button>
-            <button onClick={this._eddbShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_LIST')} onMouseOut={hide}>
-              <ShoppingIcon className='lg' />
+            <button
+              onClick={this._eddbShoppingList}
+              onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_LIST')}
+              onMouseOut={hide}
+            >
+              <ShoppingIcon className="lg" />
             </button>
-            <button onClick={this._genShortlink} onMouseOver={termtip.bind(null, 'shortlink')} onMouseOut={hide}>
-              <LinkIcon className='lg' />
+            <button
+              onClick={this._genShortlink}
+              onMouseOver={termtip.bind(null, 'shortlink')}
+              onMouseOut={hide}
+            >
+              <LinkIcon className="lg" />
             </button>
-            <button onClick={this._genOrbis} onMouseOver={termtip.bind(null, 'PHASE_UPLOAD_ORBIS')} onMouseOut={hide}>
-              <OrbisIcon className='lg' />
+            <button
+              onClick={this._genOrbis}
+              onMouseOver={termtip.bind(null, 'PHASE_UPLOAD_ORBIS')}
+              onMouseOut={hide}
+            >
+              <OrbisIcon className="lg" />
             </button>
-            <button onClick={this._genShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_MATS')} onMouseOut={hide}>
-              <MatIcon className='lg' />
+            <button
+              onClick={this._genShoppingList}
+              onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_MATS')}
+              onMouseOut={hide}
+            >
+              <MatIcon className="lg" />
             </button>
           </div>
         </div>
 
         {/* Main tables */}
-        <ShipSummaryTable ship={ship} fuel={fuel} cargo={cargo} marker={shipSummaryMarker} pips={{ sys: this.state.sys, wep: this.state.wep, eng: this.state.eng }} />
-        <StandardSlotSection ship={ship} fuel={fuel} cargo={cargo} code={standardSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
-        <InternalSlotSection ship={ship} code={internalSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
-        <HardpointSlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
-        <UtilitySlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
+        <ShipSummaryTable
+          ship={ship}
+          fuel={fuel}
+          cargo={cargo}
+          marker={shipSummaryMarker}
+          pips={{
+            sys: this.state.sys,
+            wep: this.state.wep,
+            eng: this.state.eng
+          }}
+        />
+        <StandardSlotSection
+          ship={ship}
+          fuel={fuel}
+          cargo={cargo}
+          code={standardSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <InternalSlotSection
+          ship={ship}
+          code={internalSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <HardpointSlotSection
+          ship={ship}
+          code={hardpointsSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <UtilitySlotSection
+          ship={ship}
+          code={hardpointsSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
 
         {/* Control of ship and opponent */}
-        <div className='group quarter'>
-          <div className='group half'>
-            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>{translate('ship control')}</h2>
+        <div className="group quarter">
+          <div className="group half">
+            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>
+              {translate('ship control')}
+            </h2>
           </div>
-          <div className='group half'>
-            <Boost marker={boostMarker} ship={ship} boost={boost} onChange={this._boostUpdated} />
+          <div className="group half">
+            <Boost
+              marker={boostMarker}
+              ship={ship}
+              boost={boost}
+              onChange={this._boostUpdated}
+            />
           </div>
         </div>
-        <div className='group quarter'>
-          <Pips sys={sys} eng={eng} wep={wep} onChange={this._pipsUpdated} />
+        <div className="group quarter">
+          <Pips
+            sys={sys}
+            eng={eng}
+            wep={wep}
+            mcSys={mcSys}
+            mcEng={mcEng}
+            mcWep={mcWep}
+            onChange={this._pipsUpdated}
+          />
         </div>
-        <div className='group quarter'>
-          <Fuel fuelCapacity={ship.fuelCapacity} fuel={fuel} onChange={this._fuelUpdated}/>
+        <div className="group quarter">
+          <Fuel
+            fuelCapacity={ship.fuelCapacity}
+            fuel={fuel}
+            onChange={this._fuelUpdated}
+          />
         </div>
-        <div className='group quarter'>
-          { ship.cargoCapacity > 0 ? <Cargo cargoCapacity={ship.cargoCapacity} cargo={cargo} onChange={this._cargoUpdated}/> : null }
+        <div className="group quarter">
+          {ship.cargoCapacity > 0 ? (
+            <Cargo
+              cargoCapacity={ship.cargoCapacity}
+              cargo={cargo}
+              onChange={this._cargoUpdated}
+            />
+          ) : null}
         </div>
-        <div className='group half'>
-          <div className='group quarter'>
-            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>{translate('opponent')}</h2>
+        <div className="group half">
+          <div className="group quarter">
+            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>
+              {translate('opponent')}
+            </h2>
           </div>
-          <div className='group threequarters'>
-            <ShipPicker ship={opponent.id} build={opponentBuild} onChange={this._opponentUpdated}/>
+          <div className="group threequarters">
+            <ShipPicker
+              ship={opponent.id}
+              build={opponentBuild}
+              onChange={this._opponentUpdated}
+            />
           </div>
         </div>
-        <div className='group half'>
-          <EngagementRange ship={ship} engagementRange={engagementRange} onChange={this._engagementRangeUpdated}/>
+        <div className="group half">
+          <EngagementRange
+            ship={ship}
+            engagementRange={engagementRange}
+            onChange={this._engagementRangeUpdated}
+          />
         </div>
 
         {/* Tabbed subpages */}

src/app/pages/ShipyardPage.jsx

@@ -22,9 +22,11 @@ function countHp(slot) {
  */
 function countInt(slot) {
   let crEligible = !slot.eligible || slot.eligible.cr;
-  this.int[slot.maxClass - 1]++;  // Subtract 1 since there is no Class 0 Internal compartment
+  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;
+  this.maxCargo += crEligible ?
+    ModuleUtils.findInternal('cr', slot.maxClass, 'E').cargo :
+    0;
 
   // if no eligiblity, then assume pce
   let passSlotType = null;
@@ -42,7 +44,9 @@ function countInt(slot) {
     passSlotType = 'pcq';
     passSlotRating = 'B';
   }
-  let passengerBay = passSlotType ? ModuleUtils.findMaxInternal(passSlotType, slot.maxClass, passSlotRating) : null;
+  let passengerBay = passSlotType ?
+    ModuleUtils.findMaxInternal(passSlotType, slot.maxClass, passSlotRating) :
+    null;
   this.maxPassengers += passengerBay ? passengerBay.passengers : 0;
 }
 
@@ -62,18 +66,21 @@ function shipSummary(shipId, shipData) {
     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,
-    agility: shipData.properties.pitch + shipData.properties.yaw + shipData.properties.roll
+    agility:
+      shipData.properties.pitch +
+      shipData.properties.yaw +
+      shipData.properties.roll
   };
   Object.assign(summary, shipData.properties);
   let ship = new Ship(shipId, shipData.properties, shipData.slots);
 
   // Build Ship
-  ship.buildWith(shipData.defaults);              // Populate with stock/default components
+  ship.buildWith(shipData.defaults); // Populate with stock/default components
   ship.hardpoints.forEach(countHp.bind(summary)); // Count Hardpoints by class
-  ship.internal.forEach(countInt.bind(summary));  // Count Internal Compartments by class
-  summary.retailCost = ship.totalCost;            // Record Stock/Default/retail cost
-  ship.optimizeMass({ pd: '1D' });                // Optimize Mass with 1D PD for maximum possible jump range
-  summary.maxJumpRange = ship.unladenRange;       // Record Jump Range
+  ship.internal.forEach(countInt.bind(summary)); // Count Internal Compartments by class
+  summary.retailCost = ship.totalCost; // Record Stock/Default/retail cost
+  ship.optimizeMass({ pd: '1D' }); // Optimize Mass with 1D PD for maximum possible jump range
+  summary.maxJumpRange = ship.unladenRange; // Record Jump Range
 
   // Best thrusters
   let th;
@@ -97,7 +104,6 @@ function shipSummary(shipId, shipData) {
  * The Shipyard summary page
  */
 export default class ShipyardPage extends Page {
-
   static cachedShipSummaries = null;
 
   /**
@@ -145,12 +151,15 @@ export default class ShipyardPage extends Page {
       shipPredicateIndex = undefined;
     }
 
-    if (this.state.shipPredicate == shipPredicate && this.state.shipPredicateIndex == shipPredicateIndex) {
+    if (
+      this.state.shipPredicate == shipPredicate &&
+      this.state.shipPredicateIndex == shipPredicateIndex
+    ) {
       shipDesc = !shipDesc;
     }
 
     this.setState({ shipPredicate, shipDesc, shipPredicateIndex });
-  };
+  }
 
   /**
    * Generate the table row summary for the ship
@@ -165,50 +174,55 @@ export default class ShipyardPage extends Page {
   _shipRowElement(s, translate, u, fInt, fRound, highlight) {
     let noTouch = this.context.noTouch;
 
-    return <tr
+    return (
+      <tr
         key={s.id}
         style={{ height: '1.5em' }}
-        className={cn({ highlighted: noTouch && this.state.shipId === s.id, alt: highlight })}
+        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>
-      <td className='ri'>{fInt(s.retailCost)}</td>
-      <td className='ri cap'>{translate(SizeMap[s.class])}</td>
-      <td className='ri'>{fInt(s.crew)}</td>
-      <td className='ri'>{s.masslock}</td>
-      <td className='ri'>{fInt(s.agility)}</td>
-      <td className='ri'>{fInt(s.hardness)}</td>
-      <td className='ri'>{fInt(s.hullMass)}</td>
-      <td className='ri'>{fInt(s.speed)}</td>
-      <td className='ri'>{fInt(s.boost)}</td>
-      <td className='ri'>{fInt(s.baseArmour)}</td>
-      <td className='ri'>{fInt(s.baseShieldStrength)}</td>
-      <td className='ri'>{fInt(s.topSpeed)}</td>
-      <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>
-      <td className={cn({ disabled: !s.hp[4] })}>{s.hp[4]}</td>
-      <td className={cn({ disabled: !s.hp[0] })}>{s.hp[0]}</td>
-      <td className={cn({ disabled: !s.int[0] })}>{s.int[0]}</td>
-      <td className={cn({ disabled: !s.int[1] })}>{s.int[1]}</td>
-      <td className={cn({ disabled: !s.int[2] })}>{s.int[2]}</td>
-      <td className={cn({ disabled: !s.int[3] })}>{s.int[3]}</td>
-      <td className={cn({ disabled: !s.int[4] })}>{s.int[4]}</td>
-      <td className={cn({ disabled: !s.int[5] })}>{s.int[5]}</td>
-      <td className={cn({ disabled: !s.int[6] })}>{s.int[6]}</td>
-      <td className={cn({ disabled: !s.int[7] })}>{s.int[7]}</td>
-    </tr>;
+        <td className="ri">{s.manufacturer}</td>
+        <td className="ri">{fInt(s.retailCost)}</td>
+        <td className="ri cap">{translate(SizeMap[s.class])}</td>
+        <td className="ri">{fInt(s.crew)}</td>
+        <td className="ri">{s.masslock}</td>
+        <td className="ri">{fInt(s.agility)}</td>
+        <td className="ri">{fInt(s.hardness)}</td>
+        <td className="ri">{fInt(s.hullMass)}</td>
+        <td className="ri">{fInt(s.speed)}</td>
+        <td className="ri">{fInt(s.boost)}</td>
+        <td className="ri">{fInt(s.baseArmour)}</td>
+        <td className="ri">{fInt(s.baseShieldStrength)}</td>
+        <td className="ri">{fInt(s.topSpeed)}</td>
+        <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>
+        <td className={cn({ disabled: !s.hp[4] })}>{s.hp[4]}</td>
+        <td className={cn({ disabled: !s.hp[0] })}>{s.hp[0]}</td>
+        <td className={cn({ disabled: !s.int[0] })}>{s.int[0]}</td>
+        <td className={cn({ disabled: !s.int[1] })}>{s.int[1]}</td>
+        <td className={cn({ disabled: !s.int[2] })}>{s.int[2]}</td>
+        <td className={cn({ disabled: !s.int[3] })}>{s.int[3]}</td>
+        <td className={cn({ disabled: !s.int[4] })}>{s.int[4]}</td>
+        <td className={cn({ disabled: !s.int[5] })}>{s.int[5]}</td>
+        <td className={cn({ disabled: !s.int[6] })}>{s.int[6]}</td>
+        <td className={cn({ disabled: !s.int[7] })}>{s.int[7]}</td>
+      </tr>
+    );
   }
 
   /**
@@ -222,7 +236,8 @@ export default class ShipyardPage extends Page {
     let fInt = formats.int;
     let fRound = formats.round;
     let { shipSummaries, shipPredicate, shipPredicateIndex } = this.state;
-    let sortShips = (predicate, index) => this._sortShips.bind(this, predicate, index);
+    let sortShips = (predicate, index) =>
+      this._sortShips.bind(this, predicate, index);
 
     let filters = {
       // 'class': { 1: 1, 2: 1}
@@ -239,7 +254,8 @@ export default class ShipyardPage extends Page {
 
     // Sort shipsOverview
     shipSummaries.sort((a, b) => {
-      let valA = a[shipPredicate], valB = b[shipPredicate];
+      let valA = a[shipPredicate],
+          valB = b[shipPredicate];
 
       if (shipPredicateIndex != undefined) {
         valA = valA[shipPredicateIndex];
@@ -252,7 +268,7 @@ export default class ShipyardPage extends Page {
         valB = val;
       }
 
-      if(valA == valB) {
+      if (valA == valB) {
         if (a.name > b.name) {
           return 1;
         } else {
@@ -274,42 +290,65 @@ export default class ShipyardPage extends Page {
 
     for (let s of shipSummaries) {
       let shipSortValue = s[shipPredicate];
-      if(shipPredicateIndex != undefined) {
+      if (shipPredicateIndex != undefined) {
         shipSortValue = shipSortValue[shipPredicateIndex];
       }
 
-      if(shipSortValue != lastShipSortValue) {
+      if (shipSortValue != lastShipSortValue) {
         backgroundHighlight = !backgroundHighlight;
         lastShipSortValue = shipSortValue;
       }
 
-      detailRows[i] = this._shipRowElement(s, translate, units, fInt, formats.f1, backgroundHighlight);
+      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, alt: backgroundHighlight })}
+          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>
+          <td className="le">
+            <Link href={'/outfit/' + s.id}>{s.name}</Link>
+          </td>
         </tr>
       );
       i++;
     }
 
     return (
-      <div className='page' style={{ fontSize: sizeRatio + 'em' }}>
-        <div style={{ whiteSpace: 'nowrap', margin: '0 auto', fontSize: '0.8em', position: 'relative', display: 'inline-block', maxWidth: '100%' }}>
+      <div className="page" style={{ fontSize: sizeRatio + 'em' }}>
+        <div
+          style={{
+            whiteSpace: 'nowrap',
+            margin: '0 auto',
+            fontSize: '0.8em',
+            position: 'relative',
+            display: 'inline-block',
+            maxWidth: '100%'
+          }}
+        >
           <table style={{ width: '12em', position: 'absolute', zIndex: 1 }}>
             <thead>
               <tr>
-                <th className='le rgt'>&nbsp;</th>
+                <th className="le rgt">&nbsp;</th>
               </tr>
-              <tr className='main'>
-                <th className='sortable le rgt' onClick={sortShips('name')}>{translate('ship')}</th>
+              <tr className="main">
+                <th className="sortable le rgt" onClick={sortShips('name')}>
+                  {translate('ship')}
+                </th>
               </tr>
               <tr>
-                <th className='le rgt invisible'>{units['m/s']}</th>
+                <th className="le rgt invisible">{units['m/s']}</th>
               </tr>
             </thead>
             <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
@@ -317,80 +356,261 @@ export default class ShipyardPage extends Page {
             </tbody>
           </table>
           <div style={{ overflowX: 'scroll', maxWidth: '100%' }}>
-          <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }}>
-            <thead>
-              <tr className='main'>
-                <th rowSpan={3} className='sortable' onClick={sortShips('manufacturer')}>{translate('manufacturer')}</th>
-                <th>&nbsp;</th>
-                <th rowSpan={3} className='sortable' onClick={sortShips('class')}>{translate('size')}</th>
-                <th rowSpan={3} className='sortable' onClick={sortShips('crew')}>{translate('crew')}</th>
-                <th rowSpan={3} className='sortable' onMouseEnter={termtip.bind(null, 'mass lock factor')} onMouseLeave={hide} onClick={sortShips('masslock')} >{translate('MLF')}</th>
-                <th rowSpan={3} className='sortable' onClick={sortShips('agility')}>{translate('agility')}</th>
-                <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={5}>{translate('max')}</th>
-                <th className='lft' colSpan={7}></th>
-                <th className='lft' colSpan={5}></th>
-                <th className='lft' colSpan={8}></th>
-              </tr>
-              <tr>
-                <th className='sortable lft' onClick={sortShips('retailCost')}>{translate('cost')}</th>
-                <th className='sortable lft' onClick={sortShips('hullMass')}>{translate('hull')}</th>
-                <th className='sortable lft' onClick={sortShips('speed')}>{translate('speed')}</th>
-                <th className='sortable' onClick={sortShips('boost')}>{translate('boost')}</th>
-                <th className='sortable' onClick={sortShips('baseArmour')}>{translate('armour')}</th>
-                <th className='sortable' onClick={sortShips('baseShieldStrength')}>{translate('shields')}</th>
+            <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }}>
+              <thead>
+                <tr className="main">
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('manufacturer')}
+                  >
+                    {translate('manufacturer')}
+                  </th>
+                  <th>&nbsp;</th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('class')}
+                  >
+                    {translate('size')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('crew')}
+                  >
+                    {translate('crew')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'mass lock factor')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('masslock')}
+                  >
+                    {translate('MLF')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('agility')}
+                  >
+                    {translate('agility')}
+                  </th>
+                  <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={5}>{translate('max')}</th>
+                  <th className="lft" colSpan={7} />
+                  <th className="lft" colSpan={5} />
+                  <th className="lft" colSpan={8} />
+                </tr>
+                <tr>
+                  <th
+                    className="sortable lft"
+                    onClick={sortShips('retailCost')}
+                  >
+                    {translate('cost')}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('hullMass')}>
+                    {translate('hull')}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('speed')}>
+                    {translate('speed')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('boost')}>
+                    {translate('boost')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('baseArmour')}>
+                    {translate('armour')}
+                  </th>
+                  <th
+                    className="sortable"
+                    onClick={sortShips('baseShieldStrength')}
+                  >
+                    {translate('shields')}
+                  </th>
 
-                <th className='sortable lft' onClick={sortShips('topSpeed')}>{translate('speed')}</th>
-                <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="sortable lft" onClick={sortShips('topSpeed')}>
+                    {translate('speed')}
+                  </th>
+                  <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={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('hullMass')}>{units.T}</th>
-                <th className='sortable lft' onClick={sortShips('speed')}>{units['m/s']}</th>
-                <th className='sortable'  onClick={sortShips('boost')}>{units['m/s']}</th>
-                <th>&nbsp;</th>
-                <th className='sortable' onClick={sortShips('baseShieldStrength')}>{units.MJ}</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('maxJumpRange')}>{units.LY}</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>
-                <th className='sortable' onClick={sortShips('hp', 4)}>{translate('H')}</th>
-                <th className='sortable' onClick={sortShips('hp', 0)}>{translate('U')}</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('hullMass')}>
+                    {units.T}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('speed')}>
+                    {units['m/s']}
+                  </th>
+                  <th className="sortable" onClick={sortShips('boost')}>
+                    {units['m/s']}
+                  </th>
+                  <th>&nbsp;</th>
+                  <th
+                    className="sortable"
+                    onClick={sortShips('baseShieldStrength')}
+                  >
+                    {units.MJ}
+                  </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('maxJumpRange')}>
+                    {units.LY}
+                  </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>
+                  <th className="sortable" onClick={sortShips('hp', 4)}>
+                    {translate('H')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('hp', 0)}>
+                    {translate('U')}
+                  </th>
 
-                <th className='sortable lft' onClick={sortShips('int', 0)} >1</th>
-                <th className='sortable' onClick={sortShips('int', 1)} >2</th>
-                <th className='sortable' onClick={sortShips('int', 2)} >3</th>
-                <th className='sortable' onClick={sortShips('int', 3)} >4</th>
-                <th className='sortable' onClick={sortShips('int', 4)} >5</th>
-                <th className='sortable' onClick={sortShips('int', 5)} >6</th>
-                <th className='sortable' onClick={sortShips('int', 6)} >7</th>
-                <th className='sortable' onClick={sortShips('int', 7)} >8</th>
-              </tr>
-            </thead>
-            <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
-              {detailRows}
-            </tbody>
-          </table>
+                  <th className="sortable lft" onClick={sortShips('int', 0)}>
+                    1
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 1)}>
+                    2
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 2)}>
+                    3
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 3)}>
+                    4
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 4)}>
+                    5
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 5)}>
+                    6
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 6)}>
+                    7
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 7)}>
+                    8
+                  </th>
+                </tr>
+              </thead>
+              <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
+                {detailRows}
+              </tbody>
+            </table>
           </div>
         </div>
       </div>

src/app/shipyard/Modification.js

@@ -2,7 +2,6 @@
  * Modification - a modification and its value
  */
 export default class Modification {
-
   /**
    * @param {String} id         Unique modification ID
    * @param {Number} value      Value of the modification
@@ -11,5 +10,4 @@ export default class Modification {
     this.id = id;
     this.value = value;
   }
-
 }

src/app/shipyard/Module.js

@@ -7,7 +7,6 @@ import { STATS_FORMATTING, SI_PREFIXES } from './StatsFormatting';
  * Module - active module in a ship's buildout
  */
 export default class Module {
-
   /**
    * Construct a new module
    * @param {Object} params   Module parameters.  Either grp/id or template
@@ -81,8 +80,8 @@ export default class Module {
     // the amount of base resistance the hrp has.
     if (!isNaN(result) && this.grp === 'hr' &&
       (name === 'kinres' || name === 'thermres' || name === 'explres')) {
-        let baseRes = this[name];
-        result = result * (1 - baseRes);
+      let baseRes = this[name];
+      result = result * (1 - baseRes);
     }
 
     // Sanitise the resultant value to 4dp equivalent
@@ -180,7 +179,7 @@ export default class Module {
       modValue = value - baseValue;
       if (this.grp === 'hr' &&
         (name === 'kinres' || name === 'thermres' || name === 'explres')) {
-          modValue = modValue / (1 - baseValue);
+        modValue = modValue / (1 - baseValue);
       }
     } else if (name === 'shieldboost' || name === 'hullboost') {
       modValue = (1 + value) / (1 + baseValue) - 1;
@@ -192,7 +191,7 @@ export default class Module {
       modValue = modValue * 10000;
     } else if (modification.type === 'numeric' && name !== 'burst' &&
       name !== 'burstrof') {
-        modValue = modValue * 100;
+      modValue = modValue * 100;
     }
 
     this.setModValue(name, modValue, valueIsWithSpecial);
@@ -242,38 +241,38 @@ export default class Module {
     const modification = Modifications.modifications[name];
     let result = this[name];
 
-      if (modification) {
-        // We store percentages as decimals, so to get them back we need to divide by 10000.  Otherwise
-        // we divide by 100.  Both ways we end up with a value with two decimal places
-        let modValue;
-        if (modification.type === 'percentage') {
-          modValue = this.getModValue(name) / 10000;
-        } else if (modification.type === 'numeric') {
-          modValue = this.getModValue(name) / 100;
-        } else {
-          modValue = this.getModValue(name);
+    if (modification) {
+      // We store percentages as decimals, so to get them back we need to divide by 10000.  Otherwise
+      // we divide by 100.  Both ways we end up with a value with two decimal places
+      let modValue;
+      if (modification.type === 'percentage') {
+        modValue = this.getModValue(name) / 10000;
+      } else if (modification.type === 'numeric') {
+        modValue = this.getModValue(name) / 100;
+      } else {
+        modValue = this.getModValue(name);
+      }
+      if (modValue) {
+        if (!result && modification.method === 'additive') {
+          // If the modification is additive and no value is given by default we
+          // start at zero
+          result = 0;
         }
-        if (modValue) {
-          if (!result && modification.method === 'additive') {
-            // If the modification is additive and no value is given by default we
-            // start at zero
-            result = 0;
-          }
 
-          if (result !== undefined) {
-            if (modification.method === 'additive') {
-              result = result + modValue;
-            } else if (modification.method === 'overwrite') {
-              result = modValue;
-            } else if (name === 'shieldboost' || name === 'hullboost') {
-              result = (1 + result) * (1 + modValue) - 1;
-            } else {
-              result = result * (1 + modValue);
-            }
-          } else if (name === 'burst' || name === 'burstrof') {
-            // Burst and burst rate of fire are special, as it can not exist but
-            // have a modification
-            result = modValue / 100;
+        if (result !== undefined) {
+          if (modification.method === 'additive') {
+            result = result + modValue;
+          } else if (modification.method === 'overwrite') {
+            result = modValue;
+          } else if (name === 'shieldboost' || name === 'hullboost') {
+            result = (1 + result) * (1 + modValue) - 1;
+          } else {
+            result = result * (1 + modValue);
+          }
+        } else if (name === 'burstrof') {
+          // Burst and burst rate of fire are special, as it can not exist but
+          // have a modification
+          result = modValue / 100;
         }
       }
     }
@@ -1091,5 +1090,4 @@ export default class Module {
   getHackTime(modified = true) {
     return this.get('hacktime', modified);
   }
-
 }

src/app/shipyard/ModuleSet.js

@@ -17,7 +17,6 @@ function filter(arr, maxClass, minClass, mass) {
  * The available module set for a specific ship
  */
 export default class ModuleSet {
-
   /**
    * Instantiate the module set
    * @param  {Object} modules        All Modules

src/app/shipyard/Ship.js

@@ -71,7 +71,6 @@ function reduceToIDs(idArray, slot, slotIndex) {
  * Ship Model - Encapsulates and models in-game ship behavior
  */
 export default class Ship {
-
   /**
    * @param {String} id         Unique ship Id / Key
    * @param {Object} properties Basic ship properties such as name, manufacturer, mass, etc
@@ -416,16 +415,16 @@ export default class Ship {
   clearModifications(m) {
     m.mods = {};
     this.updatePowerGenerated()
-        .updatePowerUsed()
-        .recalculateMass()
-        .updateJumpStats()
-        .recalculateShield()
-        .recalculateShieldCells()
-        .recalculateArmour()
-        .recalculateDps()
-        .recalculateEps()
-        .recalculateHps()
-        .updateMovement();
+      .updatePowerUsed()
+      .recalculateMass()
+      .updateJumpStats()
+      .recalculateShield()
+      .recalculateShieldCells()
+      .recalculateArmour()
+      .recalculateDps()
+      .recalculateEps()
+      .recalculateHps()
+      .updateMovement();
   }
 
   /**
@@ -696,16 +695,16 @@ export default class Ship {
     // Update aggragated stats
     if (comps) {
       this.updatePowerGenerated()
-          .updatePowerUsed()
-          .recalculateMass()
-          .updateJumpStats()
-          .recalculateShield()
-          .recalculateShieldCells()
-          .recalculateArmour()
-          .recalculateDps()
-          .recalculateEps()
-          .recalculateHps()
-          .updateMovement();
+        .updatePowerUsed()
+        .recalculateMass()
+        .updateJumpStats()
+        .recalculateShield()
+        .recalculateShieldCells()
+        .recalculateArmour()
+        .recalculateDps()
+        .recalculateEps()
+        .recalculateHps()
+        .updateMovement();
     }
 
     return this.updatePowerPrioritesString().updatePowerEnabledString().updateModificationsString();
@@ -1187,28 +1186,28 @@ export default class Ship {
     // handle unladen mass
     unladenMass += chain(slots)
       .map(slot => slot.m ? slot.m.get('mass') : null)
-      .filter()
+      .map(mass => mass || 0)
       .reduce((sum, mass) => sum + mass)
       .value();
 
     // handle fuel capacity
     fuelCapacity += chain(slots)
       .map(slot => slot.m ? slot.m.get('fuel') : null)
-      .filter()
+      .map(fuel => fuel || 0)
       .reduce((sum, fuel) => sum + fuel)
       .value();
 
     // handle cargo capacity
     cargoCapacity += chain(slots)
       .map(slot => slot.m ? slot.m.get('cargo') : null)
-      .filter()
+      .map(cargo => cargo || 0)
       .reduce((sum, cargo) => sum + cargo)
       .value();
 
-      // handle passenger capacity
+    // handle passenger capacity
     passengerCapacity += chain(slots)
       .map(slot => slot.m ? slot.m.get('passengers') : null)
-      .filter()
+      .map(passengers => passengers || 0)
       .reduce((sum, passengers) => sum + passengers)
       .value();
 
@@ -1683,11 +1682,11 @@ export default class Ship {
         updated;
 
     this.useBulkhead(0)
-        .use(standard[2], fsd)   // FSD
-        .use(standard[3], ls)    // Life Support
-        .use(standard[5], s)     // Sensors
-        .use(standard[4], pd)    // Power Distributor
-        .use(standard[6], ft);   // Fuel Tank
+      .use(standard[2], fsd)   // FSD
+      .use(standard[3], ls)    // Life Support
+      .use(standard[5], s)     // Sensors
+      .use(standard[4], pd)    // Power Distributor
+      .use(standard[6], ft);   // Fuel Tank
 
     // Turn off nearly everything
     if (m.fsdDisabled) this.setSlotEnabled(this.standard[2], false);

src/app/stores/Persist.js

@@ -1,5 +1,7 @@
 import { EventEmitter } from 'fbemitter';
 import { Insurance } from '../shipyard/Constants';
+import { buildsCollection, database } from '../model';
+import {Q} from '@nozbe/watermelondb';
 
 const LS_KEY_BUILDS = 'builds';
 const LS_KEY_COMPARISONS = 'comparisons';
@@ -70,7 +72,6 @@ function _delete(key) {
  * export is an instance (see end of this file).
  */
 export class Persist extends EventEmitter {
-
   /**
    * Create an instance
    */
@@ -82,7 +83,7 @@ export class Persist extends EventEmitter {
       localStorage.setItem('test', 'test');
       localStorage.removeItem('test');
       LS = localStorage;
-    } catch(e) {
+    } catch (e) {
       LS = null;
     }
 
@@ -106,7 +107,7 @@ export class Persist extends EventEmitter {
     this.comparisons = comparisonJson && typeof comparisonJson == 'object' ? comparisonJson : {};
     this.costTab = _getString(LS_KEY_COST_TAB);
     this.outfittingTab = _getString(LS_KEY_OUTFITTING_TAB);
-    this.state =  _get(LS_KEY_STATE);
+    this.state = _get(LS_KEY_STATE);
     this.sizeRatio = _get(LS_KEY_SIZE_RATIO) || 1;
     this.matsPerGrade = matsPerGrade || {
       1: 2,
@@ -133,7 +134,7 @@ export class Persist extends EventEmitter {
     let newValue = e.newValue;
 
     try {
-      switch(e.key) {
+      switch (e.key) {
         case LS_KEY_BUILDS:
           this.builds = newValue ? JSON.parse(newValue) : {};
           this.emit('builds');
@@ -250,17 +251,27 @@ export class Persist extends EventEmitter {
   /**
    * Persist a ship build in local storage.
    *
-   * @param  {String} shipId The unique id for a model of ship
+   * @param {String} id The unique id for the ship or ''
+   * @param  {String} shipId The coriolis ship id
    * @param  {String} name   The name of the build
    * @param  {String} code   The serialized code
    */
-  saveBuild(shipId, name, code) {
-    if (!this.builds[shipId]) {
-      this.builds[shipId] = {};
+  async saveBuild(id, name, code, shipId) {
+    if (id) {
+      const build = await buildsCollection.find(id);
+      if (build) {
+        return build.update(newBuild => {
+          newBuild.title = name;
+          newBuild.body = code;
+        });
+      }
     }
-    this.builds[shipId][name] = code;
-    _put(LS_KEY_BUILDS, this.builds);
-    this.emit('builds');
+
+    return await buildsCollection.create(build => {
+      build.title = name;
+      build.ship_id = shipId;
+      build.body = code;
+    });
   }
 
   /**
@@ -271,11 +282,10 @@ export class Persist extends EventEmitter {
    * @param  {String} name   The name of the build
    * @return {String}        The serialized build string.
    */
-  getBuild(shipId, name) {
-    if (this.builds[shipId] && this.builds[shipId][name]) {
-      return this.builds[shipId][name];
-    }
-    return null;
+  async getBuild(shipId, name) {
+    const build = await buildsCollection.query(Q.where('ship_id', shipId), Q.where('title', name)).fetch();
+    console.log(build);
+    return build;
   }
 
   /**
@@ -284,7 +294,7 @@ export class Persist extends EventEmitter {
    * @return {Object | Array} Object if Ship Id is not provided
    */
   getBuilds(shipId) {
-    if(shipId && shipId.length > 0) {
+    if (shipId && shipId.length > 0) {
       return this.builds[shipId];
     }
     return this.builds;
@@ -363,7 +373,9 @@ export class Persist extends EventEmitter {
     }
     this.comparisons[name] = {
       facets,
-      builds: builds.map(b => { return { shipId: b.id || b.shipId, buildName: b.buildName }; })
+      builds: builds.map(b => {
+        return { shipId: b.id || b.shipId, buildName: b.buildName };
+      })
     };
     _put(LS_KEY_COMPARISONS, this.comparisons);
     this.emit('comparisons');
@@ -506,6 +518,7 @@ export class Persist extends EventEmitter {
     _put(LS_KEY_ROLLS, this.matsPerGrade);
     this.emit('matsPerGrade');
   }
+
   /**
    * Get the saved Mats per grade
    * @return {Object} # of rolls per grade
@@ -557,6 +570,7 @@ export class Persist extends EventEmitter {
     this.outfittingTab = tabName;
     _put(LS_KEY_OUTFITTING_TAB, tabName);
   }
+
   /**
    * Get the current outfitting tab
    * @return {string} the current outfitting tab

src/app/sw.js

@@ -0,0 +1,62 @@
+console.log('Hello from sw.js');
+
+if (workbox) {
+  console.log('Yay! Workbox is loaded 🎉');
+  workbox.routing.registerRoute(
+    new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
+    workbox.strategies.cacheFirst({
+      cacheName: 'google-fonts',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxEntries: 30
+        }),
+        new workbox.cacheableResponse.Plugin({
+          statuses: [0, 200]
+        })
+      ]
+    })
+  );
+
+  try {
+    workbox.googleAnalytics.initialize();
+  } catch (e) {
+    console.log('Probably an ad-blocker');
+  }
+} else {
+  console.log('Boo! Workbox didn\'t load 😬');
+}
+
+self.addEventListener('message', event => {
+  if (!event.data) {
+    return;
+  }
+
+  switch (event.data) {
+    case 'skipWaiting':
+      self.skipWaiting();
+      break;
+    default:
+      // NOOP
+      break;
+  }
+});
+const OFFLINE_URL = '/';
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        return response;
+      }
+
+      return fetch(event.request)
+        .then(function(response) {
+          return response;
+        })
+        .catch(function(error) {
+          return caches.match(OFFLINE_URL);
+        });
+    })
+  );
+});

src/app/utils/BlueprintFunctions.js

@@ -19,7 +19,7 @@ export function specialToolTip(translate, blueprint, grp, m, specialName) {
     // We also add in any benefits from specials that aren't covered above
     if (m.blueprint) {
       for (const feature in Modifications.modifierActions[specialName]) {
-          // if (!blueprint.features[feature] && !m.mods.feature) {
+        // if (!blueprint.features[feature] && !m.mods.feature) {
         const featureDef = Modifications.modifications[feature];
         if (featureDef && !featureDef.hidden) {
           let symbol = '';
@@ -37,14 +37,14 @@ export function specialToolTip(translate, blueprint, grp, m, specialName) {
           const currentIsBeneficial = isValueBeneficial(feature, current);
 
           effects.push(
-                  <tr key={feature + '_specialTT'}>
-                    <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>
-                );
+            <tr key={feature + '_specialTT'}>
+              <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>
+          );
         }
       }
     }
@@ -54,7 +54,7 @@ export function specialToolTip(translate, blueprint, grp, m, specialName) {
     <div>
       <table width='100%'>
         <tbody>
-        {effects}
+          {effects}
         </tbody>
       </table>
     </div>
@@ -215,12 +215,12 @@ export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
     <div>
       <table width='100%'>
         <thead>
-         <tr>
-           <td>{translate('feature')}</td>
-           <td>{translate('worst')}</td>
+          <tr>
+            <td>{translate('feature')}</td>
+            <td>{translate('worst')}</td>
             {m ? <td>{translate('current')}</td> : null }
-           <td>{translate('best')}</td>
-         </tr>
+            <td>{translate('best')}</td>
+          </tr>
         </thead>
         <tbody>
           {effects}
@@ -228,10 +228,10 @@ export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
       </table>
       { components ?  <table width='100%'>
         <thead>
-         <tr>
-           <td>{translate('component')}</td>
-           <td>{translate('amount')}</td>
-         </tr>
+          <tr>
+            <td>{translate('component')}</td>
+            <td>{translate('amount')}</td>
+          </tr>
         </thead>
         <tbody>
           {components}
@@ -239,9 +239,9 @@ export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
       </table> : null }
       { engineersList ? <table width='100%'>
         <thead>
-         <tr>
-           <td>{translate('engineers')}</td>
-         </tr>
+          <tr>
+            <td>{translate('engineers')}</td>
+          </tr>
         </thead>
         <tbody>
           {engineersList}

src/app/utils/JournalUtils.js

@@ -147,83 +147,79 @@ export function shipFromLoadoutJSON(json) {
         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;
-            modsToAdd.push({ coriolisMod: hardpoint, json: hardpointSlot });
-          }
-          hardpointArrayNum++;
+    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;
         }
-      }
-      if (module.Slot.toLowerCase().search(/slot\d/) !== -1) {
-        let internalSlotNum = 1;
-        let militarySlotNum = 1;
-        for (let i in shipTemplate.slots.internal) {
-          if (!shipTemplate.slots.internal.hasOwnProperty(i)) {
-            continue;
-          }
-          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;
+        // 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;
+          modsToAdd.push({ coriolisMod: hardpoint, json: hardpointSlot });
+        }
+        hardpointArrayNum++;
+      }
+    }
+  }
+
+  let internalSlotNum = 0;
+  let militarySlotNum = 1;
+  for (let i in shipTemplate.slots.internal) {
+    if (!shipTemplate.slots.internal.hasOwnProperty(i)) {
+      continue;
+    }
+    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.
+      for (; internalSlot === null && internalSlotNum < 99; internalSlotNum++) {
+        // 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());
-            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' : '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 {
-            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;
-            modsToAdd.push({ coriolisMod: internal, json: internalSlot });
+            break;
           }
         }
       }
     }
+
+    if (!internalSlot) {
+      // This can happen with old imports that don't contain new slots
+    } 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;
+      modsToAdd.push({ coriolisMod: internal, json: internalSlot });
+    }
   }
 
   for (const i of modsToAdd) {

src/app/utils/ShortenUrl.js

@@ -113,7 +113,7 @@ const API_ORBIS = 'https://orbis.zone/api/builds/add';
  * @return {Promise<any>} Either a URL or error message.
  */
 export function orbisUpload(ship, creds) {
-  return new Promise(async (resolve, reject) => {
+  return new Promise(async(resolve, reject) => {
     if (window.navigator.onLine) {
       try {
         agent

src/app/utils/SlotFunctions.js

@@ -1,7 +1,4 @@
 import React from 'react';
-import cn from 'classnames';
-import Module from '../shipyard/Module';
-import { Infinite } from '../components/SvgIcons';
 import Persist from '../stores/Persist';
 import * as ModuleUtils from '../shipyard/ModuleUtils';
 

src/images/logo/manifest.json

@@ -27,7 +27,7 @@
 			"density": "4.0"
 		}
 	],
-	"start_url": "https:\/\/edcd.coriolis.io",
+	"start_url": "https:\/\/coriolis.io",
 	"display": "standalone",
 	"orientation": "portrait"
 }

src/index.ejs

@@ -1,16 +1,19 @@
 <!DOCTYPE html>
-<html manifest="/">
+<html>
   <head>
     <title>Coriolis EDCD Edition</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
     <!-- Standard headers -->
-    <meta name="description" content="A ship builder, outfitting and comparison tool for Elite Dangerous">
+    <meta name="description" content="A ship builder, outfitting and comparison
+      tool for Elite Dangerous">
     <meta name="mobile-web-app-capable" content="yes">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,
+      maximum-scale=1.0, user-scalable=0">
     <link rel="manifest" href="/manifest.json">
     <link rel="shortcut icon" href=/favicon2.ico>
-    <link rel="icon" sizes="152x152 192x192" type="image/png" href="/192x192.png">
+    <link rel="icon" sizes="152x152 192x192" type="image/png"
+      href="/192x192.png">
 
     <!-- Apple/iOS headers -->
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -30,16 +33,16 @@
       window.BUGSNAG_VERSION = '<%- htmlWebpackPlugin.options.version + '-' + htmlWebpackPlugin.options.date.toISOString()  %>';
     </script>
     <% if (htmlWebpackPlugin.options.uaTracking) { %>
-    <script>
+      <script>
       window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
       ga('create', '<%- htmlWebpackPlugin.options.uaTracking %>', 'auto');
       ga('send', 'pageview');
     </script>
-    <script async src='https://www.google-analytics.com/analytics.js'></script>
-    <% } %>
+      <script async src='https://www.google-analytics.com/analytics.js'></script>
+      <% } %>
 
-    <!-- Piwik -->
-   <!-- <script type="text/javascript">
+        <!-- Piwik -->
+        <!-- <script type="text/javascript">
       var _paq = _paq || [];
       /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
       _paq.push(["setCookieDomain", "*.coriolis.edcd.io"]);
@@ -53,19 +56,19 @@
         g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
       })();
     </script>-->
-    <!-- End Piwik Code -->
+        <!-- End Piwik Code -->
 
-    <!-- Bugsnag -->
-    <script src="//d2wy8f7a9ursnm.cloudfront.net/v4/bugsnag.min.js"></script>
-    <script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-plugins/v1/bugsnag-react.min.js"></script>
-    <script>
+        <!-- Bugsnag -->
+        <script src="//d2wy8f7a9ursnm.cloudfront.net/v4/bugsnag.min.js"></script>
+        <script
+          src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-plugins/v1/bugsnag-react.min.js"></script>
+        <script>
       window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.BUGSNAG_VERSION || undefined})
       window.Bugsnag = window.bugsnagClient
     </script>
-  </head>
-  <body style="background-color:#000;">
-    <section id="coriolis"></section>
-    <script src="<%= htmlWebpackPlugin.files.chunks.lib.entry %>" charset="utf-8" crossorigin="anonymous"></script>
-    <script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>" charset="utf-8" crossorigin="anonymous"></script>
-  </body>
-</html>
+      </head>
+      <body style="background-color:#000;">
+        <section id="coriolis"></section>
+
+      </body>
+    </html>

src/less/pips.less

@@ -12,6 +12,12 @@
     cursor: pointer;
   }
 
+  // A multi-crew pip
+  .mc {
+    stroke: @secondary;
+    fill: @secondary;
+  }
+
   // A full pip
   .full {
     stroke: @primary;

src/less/slot.less

@@ -74,7 +74,7 @@
     border-color:#fff;
   }
 
-  input:disabled {
+  input.greyed-out {
     border-color: #888;
     color: #888;
   }

src/sw.js

@@ -1,46 +0,0 @@
-console.log('Hello from sw.js');
-
-if (workbox) {
-  workbox.skipWaiting();
-  workbox.clientsClaim();
-  console.log('Yay! Workbox is loaded 🎉');
-  workbox.routing.registerRoute(
-    new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
-    workbox.strategies.cacheFirst({
-      cacheName: 'google-fonts',
-      plugins: [
-        new workbox.expiration.Plugin({
-          maxEntries: 30
-        }),
-        new workbox.cacheableResponse.Plugin({
-          statuses: [0, 200]
-        })
-      ]
-    })
-  );
-  workbox.routing.registerRoute(
-    /\.(?:png|gif|jpg|jpeg|svg)$/,
-    workbox.strategies.cacheFirst({
-      cacheName: 'images',
-      plugins: [
-        new workbox.expiration.Plugin({
-          maxEntries: 60,
-          maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
-        })
-      ]
-    })
-  );
-  workbox.routing.registerRoute(
-    /\.(?:js|css)$/,
-    workbox.strategies.staleWhileRevalidate({
-      cacheName: 'static-resources'
-    })
-  );
-  try {
-    workbox.googleAnalytics.initialize();
-  } catch (e) {
-    console.log('Probably an ad-blocker');
-  }
-} else {
-  console.log('Boo! Workbox didn\'t load 😬');
-}

webpack.config.dev.js

@@ -1,49 +1,51 @@
 const path = require('path');
-const exec = require('child_process').exec;
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const WebpackNotifierPlugin = require('webpack-notifier');
 const pkgJson = require('./package');
 const buildDate = new Date();
-function CopyDirPlugin(source, destination) {
-  this.source = source;
-  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));
-  });
-};
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   devtool: 'source-map',
   devServer: {
     headers: { 'Access-Control-Allow-Origin': '*' }
   },
+  mode: 'development',
   entry: {
-    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']
+    main: './src/app/index.js'
   },
   resolve: {
     // When requiring, you don't need to add these extensions
     extensions: ['.js', '.jsx', '.json', '.less']
   },
+  optimization: {
+    minimize: false,
+    splitChunks: {
+      chunks: 'all'
+    }
+  },
   output: {
     path: path.join(__dirname, 'build'),
     filename: 'app.js',
+    globalObject: 'this',
     publicPath: '/'
   },
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    'crypto': 'empty'
+  },
   plugins: [
-    new CopyDirPlugin(path.join(__dirname, 'src/.htaccess'), ''),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'lib',
-      filename: 'lib.js'
-    }),
+    new CopyWebpackPlugin(['src/.htaccess']),
+    // new webpack.optimize.CommonsChunkPlugin({
+    //   name: 'lib',
+    //   filename: 'lib.js'
+    // }),
     new HtmlWebpackPlugin({
-      inject: false,
+      inject: true,
       template: path.join(__dirname, 'src/index.ejs'),
       version: pkgJson.version,
       date: buildDate,
@@ -61,8 +63,12 @@ module.exports = {
   module: {
     rules: [
       { 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: /\.worker\.js$/, use: { loader: 'worker-loader' } },
       { 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: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },

webpack.config.prod.js

@@ -1,63 +1,43 @@
 const path = require('path');
-const exec = require('child_process').exec;
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
-
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins');
 const pkgJson = require('./package');
 const buildDate = new Date();
-function CopyDirPlugin(source, destination) {
-  this.source = source;
-  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));
-  });
-};
 
 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']
+    main: ['./src/app/index.js']
   },
   resolve: {
     extensions: ['.js', '.jsx', '.json', '.less']
   },
   output: {
     path: path.join(__dirname, 'build'),
-    filename: '[name].[chunkhash:6].js',
-    chunkFilename: '[name].[chunkhash:6]',
-    publicPath: '/'
+    filename: '[name].[hash].js',
+    publicPath: '/',
+    globalObject: 'this'
+  },
+  node: { fs: 'empty' },
+  mode: 'production',
+  optimization: {
+    minimize: true,
+    splitChunks: {
+      chunks: 'all'
+    }
   },
   plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      'screw-ie8': true,
-      sourceMap: true
-    }),
+    new CopyWebpackPlugin(['src/.htaccess', { from: 'src/schemas', to: 'schemas' }, {from: 'src/images/logo/*', flatten: true, to: ''}]),
     // new webpack.optimize.CommonsChunkPlugin({
     //  name: 'lib',
     //  filename: 'lib.[chunkhash:6].js'
     // }),
     new HtmlWebpackPlugin({
-      inject: false,
-      appCache: 'coriolis.appcache',
-      minify: {
-        collapseBooleanAttributes: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true,
-        removeEmptyAttributes: true,
-        removeRedundantAttributes: true,
-        removeScriptTypeAttributes: true,
-        removeStyleLinkTypeAttributes: true
-      },
+      inject: true,
       template: path.join(__dirname, 'src/index.ejs'),
       uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
       gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
@@ -65,25 +45,23 @@ module.exports = {
       version: pkgJson.version
     }),
     new ExtractTextPlugin({
-      filename: '[contenthash:6].css',
+      filename: '[hash:6].css',
       disable: false,
       allChunks: true
     }),
-    new BugsnagSourceMapUploaderPlugin({
-      apiKey: 'ba9fae819372850fb660755341fa6ef5',
-      appVersion: `${pkgJson.version}-${buildDate.toISOString()}`
-    }),
-    new CopyDirPlugin(path.join(__dirname, 'src/schemas'), 'schemas'),
-    new CopyDirPlugin(path.join(__dirname, 'src/images/logo/*'), ''),
-    new CopyDirPlugin(path.join(__dirname, 'src/.htaccess'), ''),
+    // new BugsnagSourceMapUploaderPlugin({
+    //   apiKey: 'ba9fae819372850fb660755341fa6ef5',
+    //   appVersion: `${pkgJson.version}-${buildDate.toISOString()}`
+    // }),
     new InjectManifest({
-      swSrc: './src/sw.js',
+      swSrc: './src/app/sw.js',
       importWorkboxFrom: 'cdn',
       swDest: 'service-worker.js'
     }),
   ],
   module: {
     rules: [
+      {test: /\.worker\.js$/, use: {loader: 'worker-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: /\.(js|jsx)$/, loader: 'babel-loader?cacheDirectory=true', include: path.join(__dirname, 'src') },