Merge pull request #772 from Brighter-Applications/make_modal_better_clean

Modal Changes to export and link shortener

.babelrc

@@ -7,6 +7,8 @@
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-syntax-import-meta",
     ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-proposal-function-bind",
     "@babel/plugin-proposal-json-strings",
     [
       "@babel/plugin-proposal-decorators",
@@ -28,7 +30,7 @@
       }
     ],
     "@babel/plugin-proposal-nullish-coalescing-operator",
-    "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
   ]
 }

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+.gitignore
+README.md
+
+build
+node_modules

.gitattributes

@@ -0,0 +1,14 @@
+# Set the default behavior, in case people don't have core.autocrlf set, in order to prevent line ending inconsistency.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.jsx text
+*.js text
+
+# Declare files that will always have CRLF line endings on checkout.
+# *.sln text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary

.gitignore

@@ -10,4 +10,3 @@ env
 .project
 .vscode/
 docs/
-package-lock.json

.npmrc

@@ -1 +0,0 @@
-package-lock=false

Dockerfile

@@ -0,0 +1,25 @@
+#syntax=docker/dockerfile:1.4
+# Run this from within this directory. Change the location of coriolis-data repo and image name/tag as needed.
+# docker buildx build --build-context data=../coriolis-data --tag coriolis .
+
+FROM node:18-alpine
+
+# TODO: For a production build, we may want to just build the bundle and copy that in. No need for local copy of source.
+WORKDIR /app
+ADD . .
+COPY --from=data . /coriolis-data/
+
+# Git is required before install if any modules (like coriolis-data) are loaded from github
+RUN apk update
+RUN apk add git
+
+WORKDIR /app/coriolis-data
+RUN npm install
+WORKDIR /app
+RUN npm install
+# Bundle for production config with webpack & log
+RUN npm run build > >(tee -a stdout.log) 2> >(tee -a stderr.log >&2)
+
+# Optimally, this will start a static asset server like nginx/apache. Currently, this will start dev webpack server.
+CMD ["npm", "start"]
+EXPOSE 3300

Dockerfile-dev

@@ -0,0 +1,23 @@
+#syntax=docker/dockerfile:1.4
+# Run this from within this directory. Change the location of coriolis-data repo and image name/tag as needed.
+# docker buildx build --build-context data=../coriolis-data --tag coriolis -f ./Dockerfile-dev .
+
+FROM node:18-alpine
+
+WORKDIR /app
+ADD . .
+COPY --from=data . /coriolis-data/
+
+# Install git & any other desired in-container dev tools
+# Git is required before install if any modules (like coriolis-data) are loaded from github
+RUN apk update
+RUN apk add git
+
+WORKDIR /app/coriolis-data
+RUN npm install
+WORKDIR /app
+RUN npm install
+
+
+CMD ["npm", "start"]
+EXPOSE 3300

Dockerfile-local-prod

@@ -0,0 +1,32 @@
+#syntax=docker/dockerfile:1.4
+# Run this from within this directory. Change the location of coriolis-data repo and image name/tag as needed.
+# docker buildx build --build-context data=../coriolis-data --tag coriolis:0.0.7-local-prod -f Dockerfile-local-prod .
+# docker run -d -p 80:8080 coriolis:0.0.7-local-prod
+
+FROM node:18-alpine
+
+# TODO: For a production build, we may want to just build the bundle and copy that in. No need for local copy of source.
+WORKDIR /app
+ADD . .
+# COPY --from=data . /coriolis-data/
+
+# Git is required before install if any modules (like coriolis-data is now referenced in the package.json) are loaded from github
+RUN apk update
+RUN apk add git
+
+# WORKDIR /app/coriolis-data
+# RUN npm install
+# WORKDIR /app
+# RUN npm install
+# Bundle for production config with webpack & log
+# In this version of the dockerfile, I'm deferring automated webpack build so I can monitor a manual build
+# RUN npm run build > >(tee -a stdout.log) 2> >(tee -a stderr.log >&2)
+
+RUN npm install -g http-server
+
+# Optimally, this will start a static asset server like nginx/apache. Currently, this will start dev webpack server.
+# CMD ["http-server", "/app/build", "-c-1"]
+CMD ["/bin/ash"]
+# CMD [""]
+
+EXPOSE 8080

README.md

@@ -14,7 +14,16 @@ Coriolis was created using assets and imagery from Elite: Dangerous, with the pe
 
 ## Development
 
-To get a local instance of coriolis running, perform the following steps in a shell:
+This release includes the ability to run the app as a Docker container.
+```sh
+> git clone https://github.com/EDCD/coriolis.git
+> git clone https://github.com/EDCD/coriolis-data.git
+> cd coriolis
+> docker buildx build --build-context data=../coriolis-data --tag coriolis .
+> docker run -d -p 3300:3300 coriolis
+```
+
+Or to run an instance of coriolis without Docker Desktop, perform the following steps in a shell:
 ```sh
 > git clone https://github.com/EDCD/coriolis.git
 > git clone https://github.com/EDCD/coriolis-data.git
@@ -29,7 +38,7 @@ You will then have a development server running on `localhost:3300`.
 
 ### Ship and Module Database
 
-See the [Data wiki](https://github.com/cmmcleod/coriolis-data/wiki) for details on structure, etc.
+See the [Data wiki](https://github.com/EDCD/coriolis-data/wiki) for details on structure, etc.
 
 ## Deployment
 

devServer.js

@@ -3,24 +3,13 @@ var WebpackDevServer = require("webpack-dev-server");
 var config = require('./webpack.config.dev');
 
 new WebpackDevServer(webpack(config), {
-  publicPath: config.output.publicPath,
   hot: true,
-  disableHostCheck: true,
   headers: { "Access-Control-Allow-Origin": "*" },
   historyApiFallback: {
     rewrites: [
       // For some reason connect-history-api-fallback does not allow '.' in the URL for history fallback...
       { from: /\/outfit\//, to: '/index.html' }
     ]
-  },
-  stats: {
-    assets: true,
-    colors: true,
-    version: false,
-    hash: false,
-    timings: true,
-    chunks: false,
-    chunkModules: false
   }
 }).listen(3300, "0.0.0.0", function (err, result) {
   if (err) {

package.json

@@ -1,14 +1,19 @@
 {
   "name": "coriolis_shipyard",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/EDCD/coriolis"
   },
   "homepage": "https://coriolis.io",
   "bugs": "https://github.com/EDCD/coriolis/issues",
+  "contributors": [
+    { "name": "cmdrmcdonald" },
+    { "name": "willb321" },
+    { "name": "felixlinker" }
+  ],
   "private": true,
-  "engine": "node >= 4.8.1",
+  "engine": "node >= 10.13.0",
   "license": "MIT",
   "scripts": {
     "extract-translations": "grep -hroE \"(translate\\('[^']+'\\))|(tip.bind\\(null, '[^']+')\" src/* | grep -oE \"'[^']+'\" | grep -oE \"[^']+\" | sort -u -f",
@@ -18,7 +23,8 @@
     "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",
+    "buildfresh": "rimraf node_modules && rm package-lock.json && npm install && npm run build > >(tee -a stdout.log) 2> >(tee -a stderr.log >&2)",
+    "build": "npm run clean && cross-env NODE_ENV=production webpack --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"
   },
@@ -55,7 +61,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.0.0",
     "@babel/plugin-proposal-do-expressions": "^7.0.0",
@@ -74,15 +80,12 @@
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "appcache-webpack-plugin": "^1.4.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^4.5.2",
+    "copy-webpack-plugin": "^10.2.4",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^6.7.3",
     "d3-selection": "^1.3.2",
     "esdoc": "^1.1.0",
     "esdoc-custom-theme": "^1.4.2",
@@ -93,54 +96,66 @@
     "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",
+    "expose-loader": "^3.1.0",
+    "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.0",
+    "jsen": "^0.6.6",
     "json-loader": "^0.5.4",
     "less": "^3.8.1",
-    "less-loader": "^4.1.0",
-    "react-addons-perf": "^15.4.2",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "react-container-dimensions": "^1.4.1",
-    "react-testutils-additions": "^16.0.0",
+    "react-testutils-additions": "^15.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"
+    "rimraf": "^4.1.2",
+    "rollup": "^3.17.2",
+    "style-loader": "^3.3.1",
+    "uglify-js": "^3.17.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0",
+    "webpack-notifier": "^1.15.0",
+    "workbox-cacheable-response": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4",
+    "workbox-webpack-plugin": "^6.5.4"
   },
   "sideEffects": false,
   "dependencies": {
-    "@babel/polyfill": "^7.0.0",
+    "assert": "^1.5.0",
+    "auto-bind": "^5.0.1",
+    "base64url": "^3.0.1",
     "browserify-zlib-next": "^1.0.1",
+    "buffer": "^5.7.0",
     "classnames": "^2.2.6",
+    "constants-browserify": "^1.0.0",
+    "core-js": "^3.28.0",
     "coriolis-data": "../coriolis-data",
+    "crypto-browserify": "^3.12.0",
     "d3": "^5.7.0",
     "detect-browser": "^3.0.1",
     "fbemitter": "^2.1.1",
+    "https-browserify": "^1.0.0",
     "lodash": "^4.17.11",
     "lz-string": "^1.4.4",
-    "pako": "^1.0.6",
+    "os-browserify": "^0.3.0",
+    "pako": "^2.1.0",
+    "path-browserify": "^1.0.1",
     "prop-types": "^15.6.2",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-extras": "^0.7.1",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
     "react-fuzzy": "^0.5.2",
     "react-ga": "^2.5.3",
-    "react-number-editor": "Athanasius/react-number-editor.git#miggy",
+    "react-number-editor": "^4.0.3",
     "recharts": "^1.2.0",
-    "register-service-worker": "^1.5.2",
-    "superagent": "^3.8.3"
+    "register-service-worker": "^1.7.2",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "superagent": "^3.8.3",
+    "url": "^0.11.0",
+    "vm-browserify": "^1.1.2"
   }
 }

rollup.config.js

@@ -1,4 +1,4 @@
-import nodeResolve from "rollup-plugin-node-resolve";
+import nodeResolve from "@rollup/plugin-node-resolve";
 
 export default {
 	  entry: "d3-funcs.js",

src/.htaccess

@@ -214,7 +214,7 @@ Options -MultiViews
     #       </Files>
 
     AddType application/x-web-app-manifest+json         webapp
-    AddType text/cache-manifest                         appcache manifest
+    # AddType text/cache-manifest                         appcache manifest
 
   # Media files
     AddType audio/mp4                                   f4a f4b m4a

src/app/Coriolis.jsx

@@ -93,7 +93,7 @@ export default class Coriolis extends React.Component {
   _importBuild(r) {
     try {
       // Need to decode and gunzip the data, then build the ship
-      const data = zlib.inflate(new Buffer(r.params.data, 'base64'), { to: 'string' });
+      const data = zlib.inflate(new Buffer.from(r.params.data, 'base64'), { to: 'string' });
       const json = JSON.parse(data);
       console.info('Ship import data: ');
       console.info(json);
@@ -149,13 +149,6 @@ export default class Coriolis extends React.Component {
    */
   _onError(msg, scriptUrl, line, col, errObj) {
     console && console.error && console.error(arguments); // eslint-disable-line no-console
-    if (errObj) {
-      if (errObj instanceof Error) {
-        bugsnagClient.notify(errObj); // eslint-disable-line
-      } else if (errObj instanceof String) {
-        bugsnagClient.notify(msg, errObj); // eslint-disable-line
-      }
-    }
     this.setState({
       error: <ErrorDetails error={{ message: msg, details: { scriptUrl, line, col, error: JSON.stringify(errObj) } }}/>,
       page: null,

src/app/components/Announcement.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { autoBind } from 'react-extras';
+import autoBind from 'auto-bind';
 
 /**
  * Announcement component

src/app/components/AvailableModulesMenu.jsx

@@ -4,7 +4,7 @@ import * as ModuleUtils from '../shipyard/ModuleUtils';
 import TranslatedComponent from './TranslatedComponent';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
-import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
+import { CoriolisLogo, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import FuzzySearch from 'react-fuzzy';
 
 const PRESS_THRESHOLD = 500; // mouse/touch down threshold
@@ -20,6 +20,7 @@ const GRPCAT = {
   'cc': 'limpet controllers',
   'fx': 'limpet controllers',
   'hb': 'limpet controllers',
+  'mlc': 'limpet controllers',
   'pc': 'limpet controllers',
   'rpl': 'limpet controllers',
   'pce': 'passenger cabins',
@@ -38,13 +39,18 @@ const GRPCAT = {
   'ml': 'lasers',
   'c': 'projectiles',
   'mc': 'projectiles',
+  'advmc': 'projectiles',
   'axmc': 'experimental',
+  'axmce': 'experimental',
+  'ntp': 'experimental',
   'fc': 'projectiles',
   'rfl': 'experimental',
   'pa': 'projectiles',
   'rg': 'projectiles',
   'mr': 'ordnance',
+  'amr': 'ordnance',
   'axmr': 'experimental',
+  'axmre': 'experimental',
   'rcpl': 'experimental',
   'dtl': 'experimental',
   'tbsc': 'experimental',
@@ -83,6 +89,8 @@ const GRPCAT = {
   // Assists
   'dc': 'flight assists',
   'sua': 'flight assists',
+  // Stabilizers
+  'ews': 'weapon stabilizers',
 };
 // Order here is the order in which items will be shown in the modules menu
 const CATEGORIES = {
@@ -92,7 +100,7 @@ const CATEGORIES = {
   'fi': ['fi'],
   'fuel': ['ft', 'fs'],
   'hangars': ['fh', 'pv'],
-  'limpet controllers': ['cc', 'fx', 'hb', 'pc', 'rpl'],
+  'limpet controllers': ['cc', 'fx', 'hb', 'pc', 'rpl', 'mlc'],
   'passenger cabins': ['pce', 'pci', 'pcm', 'pcq'],
   'rf': ['rf'],
   'shields': ['sg', 'bsg', 'psg', 'scb'],
@@ -101,16 +109,17 @@ const CATEGORIES = {
 
   // Hardpoints
   'lasers': ['pl', 'ul', 'bl'],
-  'projectiles': ['mc', 'c', 'fc', 'pa', 'rg'],
-  'ordnance': ['mr', 'tp', 'nl'],
+  'projectiles': ['mc', 'advmc', 'c', 'fc', 'pa', 'rg'],
+  'ordnance': ['mr', 'amr', 'tp', 'nl'],
   // Utilities
   'sb': ['sb'],
   'hs': ['hs'],
+  'csl': ['csl'],
   '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', 'axmce', 'axmr', 'axmre', 'ntp','rfl', 'tbrfl', 'tbsc', 'tbem', 'xs', 'sfn', 'rcpl', 'dtl', 'rsl', 'mahr',],
+  'weapon stabilizers': ['ews'],
   // Guardian
   'guardian': ['gpp', 'gpd', 'gpc', 'ggc', 'gsrp', 'gfsb', 'ghrp', 'gmrp', 'gsc'],
 
@@ -209,16 +218,30 @@ export default class AvailableModulesMenu extends TranslatedComponent {
               if (categories.length === 1) {
                 // Show category header instead of group header
                 if (m && grp == m.grp) {
-                  list.push(<div ref={(elem) => this.groupElem = elem} key={category}
+                  // If this is a missing module/weapon, skip it
+                  if (m.grp == "mh" || m.grp == "mm"){
+                    continue;
+                  } else {
+                    list.push(<div ref={(elem) => this.groupElem = elem} key={category}
                                  className={'select-category upp'}>{translate(category)}</div>);
+                  }
                 } else {
-                  list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
+                  if (category == "mh" || category == "mm"){
+                    continue;
+                  } else {
+                    list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
+                  }
                 }
               } else {
                 // Show category header as well as group header
                 if (!categoryHeader) {
-                  list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
-                  categoryHeader = true;
+                  if (category == "mh" || category == "mm"){
+                    continue;
+                  }
+                  else {
+                    list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
+                    categoryHeader = true;
+                  }
                 }
                 if (m && grp == m.grp) {
                   list.push(<div ref={(elem) => this.groupElem = elem} key={grp}
@@ -237,7 +260,11 @@ export default class AvailableModulesMenu extends TranslatedComponent {
                 } else if (i.mount === 'T') {
                   mount = 'Turreted';
                 }
-                const fuzz = { grp, m: i, name: `${i.class}${i.rating}${mount ? ' '  + mount : ''} ${translate(grp)}` };
+                let special = '';
+                if (typeof(i.special) !== 'undefined') {
+                  special = `(${translate(i.special)})`;
+                }
+                const fuzz = { grp, m: i, name: `${i.class}${i.rating}${mount ? ' '  + mount : ''} ${translate(grp)} ${translate(special)}` };
                 fuzzy.push(fuzz);
               }
             }
@@ -249,6 +276,24 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     return { list, currentGroup, fuzzy, trackingFocus };
   }
 
+  /**
+   * Return Is expiremental capacity reached
+   * @return {boolean}      Is experimental capacity reached
+   */
+  _experimentalCapacityReached() {
+    const ship = this.props.ship;
+    const ews = ship.internal.filter(o => o.m && o.m.grp === 'ews');
+    let expCap;
+
+    if(ews.length < 1){
+      expCap = 4;
+    } else{
+      expCap = ews[0].m.class == 3 ? 5 : 6;
+    }
+
+    return expCap <= this.props.ship.hardpoints.filter(o => o.m && o.m.experimental).length;
+  }
+
   /**
    * Generate React Components for Module Group
    * @param  {Ship} ship            Ship the selection is for
@@ -276,6 +321,11 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     let itemsOnThisRow = 0;
     for (let i = 0; i < sortedModules.length; i++) {
       let m = sortedModules[i];
+      // If m.grp is mh or mm, or m.symbol contains 'Missing' skip it
+      if (m.grp == 'mh' || m.grp == 'mm' || (typeof(m.symbol) !== 'undefined' && m.symbol.includes("Missing"))) {
+        // If this is a missing module, skip it
+        continue;
+      }
       let mount = null;
       let disabled = false;
       prevName = m.name;
@@ -285,7 +335,9 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       // If the mounted module is experimental as well, we can replace it so
       // the maximum does not apply
       } else if (m.experimental && (!mountedModule || !mountedModule.experimental)) {
-        disabled = 4 <= ship.hardpoints.filter(o => o.m && o.m.experimental).length;
+        disabled = this._experimentalCapacityReached();
+      } else if (m.grp === 'mlc' && (!mountedModule || mountedModule.grp !== 'mlc')) {
+        disabled = 1 <= ship.internal.filter(o => o.m && o.m.grp === 'mlc').length;
       }
       let active = mountedModule && mountedModule.id === m.id;
       let classes = cn(m.name ? 'lc' : 'c', {
@@ -382,6 +434,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     if (this.props.modules instanceof Array) {
       return;
     }
+    const mountedModule = this.props.m;
     return (
       <FuzzySearch
         list={this.state.fuzzy}
@@ -393,11 +446,20 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         onSelect={e => this.props.onSelect.bind(null, e.m)()}
         resultsTemplate={(props, state, styles, clickHandler) => {
           return state.results.map((val, i) => {
+            let disabled;
+
+            if(val.m.experimental && (!mountedModule || !mountedModule.experimental)) {
+              disabled = this._experimentalCapacityReached();
+            } else{
+              disabled = false;
+            }
+            const handler = disabled ? null : () => clickHandler(i);
+
             return (
               <div
                 key={i}
-                className={'lc'}
-                onClick={() => clickHandler(i)}
+                className={cn('lc', {disabled})}
+                onClick={handler}
               >
                 {val.name}
               </div>
@@ -516,6 +578,15 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         return 1;
       }
     }
+    // Sort multi limpet controllers by name
+    if (a.grp === 'mlc') {
+      if (a.name[0] <= b.name[0]) {
+        return -1;
+      }
+      if (a.name[0] > b.name[0]) {
+        return 1;
+      }
+    }
     // Rating ordered from highest (A) to lowest (E)
     if (a.rating < b.rating) {
       return -1;

src/app/components/CostSection.jsx

@@ -32,7 +32,7 @@ export default class CostSection extends TranslatedComponent {
     this._buildRetrofitShip = this._buildRetrofitShip.bind(this);
     this._onBaseRetrofitChange = this._onBaseRetrofitChange.bind(this);
     this._defaultRetrofitName = this._defaultRetrofitName.bind(this);
-    this._eddbShoppingList = this._eddbShoppingList.bind(this);
+    this._eddbShoppingList = this._inaraShoppingList.bind(this);
 
     let data = Ships[props.ship.id];   // Retrieve the basic ship properties, slots and defaults
     let retrofitName = this._defaultRetrofitName(props.ship.id, props.buildName);
@@ -328,9 +328,9 @@ export default class CostSection extends TranslatedComponent {
   }
 
   /**
-   * Open up a window for EDDB with a shopping list of our retrofit components
+   * Open up a window for inara with a shopping list of our retrofit components
    */
-  _eddbShoppingList() {
+  _inaraShoppingList() {
     const { retrofitCosts } = this.state;
     const { ship } = this.props;
 
@@ -338,7 +338,7 @@ export default class CostSection extends TranslatedComponent {
     const modIds = retrofitCosts.filter(item => item.retroItem.incCost && item.buyId && !item.buyPp).map(item => item.buyId).filter((v, i, a) => a.indexOf(v) === i);
 
     // Open up the relevant URL
-    window.open('https://eddb.io/station?m=' + modIds.join(','));
+    window.open('https://inara.cz/inapi/corisearch.php?m=' + modIds.join(','));
   }
 
   /**
@@ -387,7 +387,7 @@ export default class CostSection extends TranslatedComponent {
           <tbody>
             {rows}
             <tr className='ri'>
-              <td className='lbl' ><button onClick={this._eddbShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_REFIT_SHOPPING_LIST')} onMouseOut={tooltip.bind(null, null)}><ShoppingIcon className='lg' style={{ fill: 'black' }}/></button></td>
+              <td className='lbl' ><button onClick={this._inaraShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_REFIT_SHOPPING_LIST')} onMouseOut={tooltip.bind(null, null)}><ShoppingIcon className='lg' style={{ fill: 'black' }}/></button></td>
               <td colSpan='3' className='lbl' >{translate('cost')}</td>
               <td colSpan='2' className={cn('val', retrofitTotal > 0 ? 'warning' : 'secondary-disabled')} style={{ borderBottom:'none' }}>
                 {int(retrofitTotal)}{units.CR}

src/app/components/HardpointSlot.jsx

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

src/app/components/InternalSlot.jsx

@@ -88,6 +88,7 @@ export default class InternalSlot extends Slot {
           { m.getHullReinforcement() ? <div className='l'>{translate('armour')}: {formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)}</div> : null }
           { m.getProtection() ? <div className='l'>{translate('protection')}: {formats.rPct(m.getProtection())}</div> : null }
           { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
+          { m.getInfo() ? <div className='l'>{translate(m.getInfo())}</div> : null }
 	  { m && validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
         </div>
       </div>;

src/app/components/LineChart.jsx

@@ -1,281 +1,281 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ContainerDimensions from 'react-container-dimensions';
-import * as d3 from 'd3';
-import TranslatedComponent from './TranslatedComponent';
-
-const MARGIN = { top: 15, right: 20, bottom: 35, left: 60 };
-
-/**
- * Line Chart
- */
-export default class LineChart extends TranslatedComponent {
-
-  static defaultProps = {
-    code: '',
-    xMin: 0,
-    yMin: 0,
-    points: 20,
-    colors: ['#ff8c0d'],
-    aspect: 0.5
-  };
-
-  static propTypes = {
-    func: PropTypes.func.isRequired,
-    xLabel: PropTypes.string.isRequired,
-    xMin: PropTypes.number,
-    xMax: PropTypes.number.isRequired,
-    xUnit: PropTypes.string.isRequired,
-    xMark: PropTypes.number,
-    yLabel: PropTypes.string.isRequired,
-    yMin: PropTypes.number,
-    yMax: PropTypes.number.isRequired,
-    yUnit: PropTypes.string,
-    series: PropTypes.array,
-    colors: PropTypes.array,
-    points: PropTypes.number,
-    aspect: PropTypes.number,
-    code: PropTypes.string,
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
-  constructor(props, context) {
-    super(props);
-
-    this._updateDimensions = this._updateDimensions.bind(this);
-    this._updateSeries = this._updateSeries.bind(this);
-    this._tooltip = this._tooltip.bind(this);
-    this._showTip = this._showTip.bind(this);
-    this._hideTip = this._hideTip.bind(this);
-    this._moveTip = this._moveTip.bind(this);
-
-    const series = props.series;
-
-    let xScale = d3.scaleLinear();
-    let yScale = d3.scaleLinear();
-    let xAxisScale = d3.scaleLinear();
-
-    this.xAxis = d3.axisBottom(xAxisScale).tickSizeOuter(0);
-    this.yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0);
-
-    this.state = {
-      xScale,
-      xAxisScale,
-      yScale,
-      tipHeight: 2 + (1.2 * (series ? series.length : 0.8)),
-    };
-  }
-
-  /**
-   * Update tooltip content
-   * @param  {number} xPos x coordinate
-   * @param {number} width current container width
-   */
-  _tooltip(xPos, width) {
-    let { xLabel, yLabel, xUnit, yUnit, func, series } = this.props;
-    let { xScale, yScale } = this.state;
-    let { formats, translate } = this.context.language;
-    let x0 = xScale.invert(xPos),
-        y0 = func(x0),
-        tips = this.tipContainer,
-        yTotal = 0,
-        flip = (xPos / width > 0.50),
-        tipWidth = 0,
-        tipHeightPx = tips.selectAll('rect').node().getBoundingClientRect().height;
-
-
-    xPos = xScale(x0); // Clamp xPos
-
-    tips.selectAll('text.text-tip.y').text(function(d, i) {
-      let yVal = series ? y0[series[i]] : y0;
-      yTotal += yVal;
-      return (series ? translate(series[i]) : '') + ' ' + formats.f2(yVal);
-    }).append('tspan').attr('class', 'metric').text(yUnit ? ' ' + yUnit : '');
-
-    tips.selectAll('text').each(function() {
-      if (this.getBBox().width > tipWidth) {
-        tipWidth = Math.ceil(this.getBBox().width);
-      }
-    });
-
-    let tipY = Math.floor(yScale(yTotal / (series ? series.length : 1)) - (tipHeightPx / 2));
-
-    tipWidth += 8;
-    tips.attr('transform', 'translate(' + xPos + ',' + tipY + ')');
-    tips.selectAll('text.text-tip').attr('x', flip ? -12 : 12).style('text-anchor', flip ? 'end' : 'start');
-    tips.selectAll('text.text-tip.x').text(formats.f2(x0)).append('tspan').attr('class', 'metric').text(' ' + xUnit);
-    tips.selectAll('rect').attr('width', tipWidth + 4).attr('x', flip ? -tipWidth - 12 : 8).attr('y', 0).style('text-anchor', flip ? 'end' : 'start');
-    this.markersContainer.selectAll('circle').attr('cx', xPos).attr('cy', (d, i) => yScale(series ? y0[series[i]] : y0));
-  }
-
-  /**
-   * Update dimensions based on properties and scale
-   * @param  {Object} props  React Component properties
-   * @param  {number} scale  size ratio / scale
-   * @param {number} width   current width of the container
-   * @returns {Object}       calculated dimensions
-   */
-  _updateDimensions(props, scale, width) {
-    const { xMax, xMin, yMin, yMax } = props;
-    const innerWidth = width - MARGIN.left - MARGIN.right;
-    const outerHeight = Math.round(width * props.aspect);
-    const innerHeight = outerHeight - MARGIN.top - MARGIN.bottom;
-
-    this.state.xScale.range([0, innerWidth]).domain([xMin, xMax || 1]).clamp(true);
-    this.state.xAxisScale.range([0, innerWidth]).domain([xMin, xMax]).clamp(true);
-    this.state.yScale.range([innerHeight, 0]).domain([yMin, yMax + (yMax - yMin) * 0.1]); // 10% higher than maximum value for tooltip visibility
-    return { innerWidth, outerHeight, innerHeight };
-  }
-
-  /**
-   * Show tooltip
-   * @param  {SyntheticEvent} e Event
-   */
-  _showTip(e) {
-    e.preventDefault();
-    this.tipContainer.style('display', null);
-    this.markersContainer.style('display', null);
-    this._moveTip(e);
-  }
-
-  /**
-   * Move and update tooltip
-   * @param  {SyntheticEvent} e Event
-   * @param {number} width current container width
-   */
-  _moveTip(e, width) {
-    let clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    this._tooltip(Math.round(clientX - e.currentTarget.getBoundingClientRect().left), width);
-  }
-
-  /**
-   * Hide tooltip
-   * @param  {SyntheticEvent} e Event
-   */
-  _hideTip(e) {
-    e.preventDefault();
-    this.tipContainer.style('display', 'none');
-    this.markersContainer.style('display', 'none');
-  }
-
-  /**
-   * Update series generated from props
-   * @param   {Object} props   React Component properties
-   * @param   {Object} state   React Component state
-   */
-  _updateSeries(props, state) {
-    let { func, xMin, xMax, series, points } = props;
-    let delta = (xMax - xMin) / points;
-    let seriesData = new Array(points);
-
-    if (delta) {
-      seriesData = new Array(points);
-      for (let i = 0, x = xMin; i < points; i++) {
-        seriesData[i] = [x, func(x)];
-        x += delta;
-      }
-      seriesData[points - 1] = [xMax, func(xMax)];
-    } else {
-      let yVal = func(xMin);
-      seriesData = [[0, yVal], [1, yVal]];
-    }
-
-    const markerElems = [];
-    const detailElems = [<text key='lbl' className='text-tip x' y='1.25em'/>];
-    const seriesLines = [];
-    for (let i = 0, l = series ? series.length : 1; i < l; i++) {
-      const yAccessor = series ? function(d) { return state.yScale(d[1][this]); }.bind(series[i]) : (d) => state.yScale(d[1]);
-      seriesLines.push(d3.line().x((d, i) => this.state.xScale(d[0])).y(yAccessor));
-      detailElems.push(<text key={i} className='text-tip y' strokeWidth={0} fill={props.colors[i]} y={1.25 * (i + 2) + 'em'}/>);
-      markerElems.push(<circle key={i} className='marker' r='4' />);
-    }
-
-    const tipHeight = 2 + (1.2 * (seriesLines ? seriesLines.length : 0.8));
-
-    this.setState({ markerElems, detailElems, seriesLines, seriesData, tipHeight });
-  }
-
-  /**
-   * Update dimensions and series data based on props and context.
-   */
-  componentWillMount() {
-    this._updateSeries(this.props, this.state);
-  }
-
-  /**
-   * Update state based on property and context changes
-   * @param  {Object} nextProps   Incoming/Next properties
-   * @param  {Object} nextContext Incoming/Next conext
-   */
-  componentWillReceiveProps(nextProps, nextContext) {
-    const props = this.props;
-
-    if (props.code != nextProps.code) {
-      this._updateSeries(nextProps, this.state);
-    }
-  }
-
-  /**
-   * Render the chart
-   * @return {React.Component} Chart SVG
-   */
-  render() {
-    return (
-      <ContainerDimensions>
-        { ({ width, height }) => {
-          const { innerWidth, outerHeight, innerHeight } = this._updateDimensions(this.props, this.context.sizeRatio, width, height);
-          const { xMin, xMax, xLabel, yLabel, xUnit, yUnit, xMark, colors } = this.props;
-          const { tipHeight, detailElems, markerElems, seriesData, seriesLines } = this.state;
-          const lines = seriesLines.map((line, i) => <path key={i} className='line' fill='none' stroke={colors[i]} strokeWidth='1' d={line(seriesData)} />).reverse();
-
-          const markX = xMark ? innerWidth * (xMark - xMin) / (xMax - xMin) : 0;
-          const xmark = xMark ? <path key={'mark'} className='line' fill='none' strokeDasharray='5,5' stroke={'#ff8c0d'} strokeWidth='1' d={'M ' + markX + ' ' + innerHeight + ' L ' + markX + ' 0'} /> : '';
-          return (
-            <div width={width} height={height}>
-              <svg style={{ width: '100%', height: outerHeight }}>
-                <g transform={`translate(${MARGIN.left},${MARGIN.top})`}>
-                  <g>{xmark}</g>
-                  <g>{lines}</g>
-                  <g className='x axis' ref={(elem) => d3.select(elem).call(this.xAxis)} transform={`translate(0,${innerHeight})`}>
-                    <text className='cap' y='30' dy='.1em' x={innerWidth / 2} style={{ textAnchor: 'middle' }}>
-                      <tspan>{xLabel}</tspan>
-                      <tspan className='metric'> ({xUnit})</tspan>
-                    </text>
-                  </g>
-                  <g className='y axis' ref={(elem) => d3.select(elem).call(this.yAxis)}>
-                    <text className='cap' transform='rotate(-90)' y='-50' dy='.1em' x={innerHeight / -2} style={{ textAnchor: 'middle' }}>
-                      <tspan>{yLabel}</tspan>
-                      { yUnit && <tspan className='metric'> ({yUnit})</tspan> }
-                    </text>
-                  </g>
-                  <g ref={(g) => this.tipContainer = d3.select(g)} style={{ display: 'none' }}>
-                    <rect className='tooltip' height={tipHeight + 'em'}></rect>
-                    {detailElems}
-                  </g>
-                  <g ref={(g) => this.markersContainer = d3.select(g)} style={{ display: 'none' }}>
-                    {markerElems}
-                  </g>
-                  <rect
-                    fillOpacity='0'
-                    height={innerHeight}
-                    width={innerWidth + 1}
-                    onMouseEnter={this._showTip}
-                    onTouchStart={this._showTip}
-                    onMouseLeave={this._hideTip}
-                    onTouchEnd={this._hideTip}
-                    onMouseMove={e => this._moveTip(e, width)}
-                    onTouchMove={e => this._moveTip(e, width)}
-                  />
-                </g>
-              </svg>
-            </div>
-          );
-        }}
-      </ContainerDimensions>
-    );
-  }
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import ContainerDimensions from 'react-container-dimensions';
+import * as d3 from 'd3';
+import TranslatedComponent from './TranslatedComponent';
+
+const MARGIN = { top: 15, right: 20, bottom: 35, left: 60 };
+
+/**
+ * Line Chart
+ */
+export default class LineChart extends TranslatedComponent {
+
+  static defaultProps = {
+    code: '',
+    xMin: 0,
+    yMin: 0,
+    points: 20,
+    colors: ['#ff8c0d'],
+    aspect: 0.5
+  };
+
+  static propTypes = {
+    func: PropTypes.func.isRequired,
+    xLabel: PropTypes.string.isRequired,
+    xMin: PropTypes.number,
+    xMax: PropTypes.number.isRequired,
+    xUnit: PropTypes.string.isRequired,
+    xMark: PropTypes.number,
+    yLabel: PropTypes.string.isRequired,
+    yMin: PropTypes.number,
+    yMax: PropTypes.number.isRequired,
+    yUnit: PropTypes.string,
+    series: PropTypes.array,
+    colors: PropTypes.array,
+    points: PropTypes.number,
+    aspect: PropTypes.number,
+    code: PropTypes.string,
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    this._updateDimensions = this._updateDimensions.bind(this);
+    this._updateSeries = this._updateSeries.bind(this);
+    this._tooltip = this._tooltip.bind(this);
+    this._showTip = this._showTip.bind(this);
+    this._hideTip = this._hideTip.bind(this);
+    this._moveTip = this._moveTip.bind(this);
+
+    const series = props.series;
+
+    let xScale = d3.scaleLinear();
+    let yScale = d3.scaleLinear();
+    let xAxisScale = d3.scaleLinear();
+
+    this.xAxis = d3.axisBottom(xAxisScale).tickSizeOuter(0);
+    this.yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0);
+
+    this.state = {
+      xScale,
+      xAxisScale,
+      yScale,
+      tipHeight: 2 + (1.2 * (series ? series.length : 0.8)),
+    };
+  }
+
+  /**
+   * Update tooltip content
+   * @param  {number} xPos x coordinate
+   * @param {number} width current container width
+   */
+  _tooltip(xPos, width) {
+    let { xLabel, yLabel, xUnit, yUnit, func, series } = this.props;
+    let { xScale, yScale } = this.state;
+    let { formats, translate } = this.context.language;
+    let x0 = xScale.invert(xPos),
+        y0 = func(x0),
+        tips = this.tipContainer,
+        yTotal = 0,
+        flip = (xPos / width > 0.50),
+        tipWidth = 0,
+        tipHeightPx = tips.selectAll('rect').node().getBoundingClientRect().height;
+
+
+    xPos = xScale(x0); // Clamp xPos
+
+    tips.selectAll('text.text-tip.y').text(function(d, i) {
+      let yVal = series ? y0[series[i]] : y0;
+      yTotal += yVal;
+      return (series ? translate(series[i]) : '') + ' ' + formats.f2(yVal);
+    }).append('tspan').attr('class', 'metric').text(yUnit ? ' ' + yUnit : '');
+
+    tips.selectAll('text').each(function() {
+      if (this.getBBox().width > tipWidth) {
+        tipWidth = Math.ceil(this.getBBox().width);
+      }
+    });
+
+    let tipY = Math.floor(yScale(yTotal / (series ? series.length : 1)) - (tipHeightPx / 2));
+
+    tipWidth += 8;
+    tips.attr('transform', 'translate(' + xPos + ',' + tipY + ')');
+    tips.selectAll('text.text-tip').attr('x', flip ? -12 : 12).style('text-anchor', flip ? 'end' : 'start');
+    tips.selectAll('text.text-tip.x').text(formats.f2(x0)).append('tspan').attr('class', 'metric').text(' ' + xUnit);
+    tips.selectAll('rect').attr('width', tipWidth + 4).attr('x', flip ? -tipWidth - 12 : 8).attr('y', 0).style('text-anchor', flip ? 'end' : 'start');
+    this.markersContainer.selectAll('circle').attr('cx', xPos).attr('cy', (d, i) => yScale(series ? y0[series[i]] : y0));
+  }
+
+  /**
+   * Update dimensions based on properties and scale
+   * @param  {Object} props  React Component properties
+   * @param  {number} scale  size ratio / scale
+   * @param {number} width   current width of the container
+   * @returns {Object}       calculated dimensions
+   */
+  _updateDimensions(props, scale, width) {
+    const { xMax, xMin, yMin, yMax } = props;
+    const innerWidth = width - MARGIN.left - MARGIN.right;
+    const outerHeight = Math.round(width * props.aspect);
+    const innerHeight = outerHeight - MARGIN.top - MARGIN.bottom;
+
+    this.state.xScale.range([0, innerWidth]).domain([xMin, xMax || 1]).clamp(true);
+    this.state.xAxisScale.range([0, innerWidth]).domain([xMin, xMax]).clamp(true);
+    this.state.yScale.range([innerHeight, 0]).domain([yMin, yMax + (yMax - yMin) * 0.1]); // 10% higher than maximum value for tooltip visibility
+    return { innerWidth, outerHeight, innerHeight };
+  }
+
+  /**
+   * Show tooltip
+   * @param  {SyntheticEvent} e Event
+   */
+  _showTip(e) {
+    e.preventDefault();
+    this.tipContainer.style('display', null);
+    this.markersContainer.style('display', null);
+    this._moveTip(e);
+  }
+
+  /**
+   * Move and update tooltip
+   * @param  {SyntheticEvent} e Event
+   * @param {number} width current container width
+   */
+  _moveTip(e, width) {
+    let clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    this._tooltip(Math.round(clientX - e.currentTarget.getBoundingClientRect().left), width);
+  }
+
+  /**
+   * Hide tooltip
+   * @param  {SyntheticEvent} e Event
+   */
+  _hideTip(e) {
+    e.preventDefault();
+    this.tipContainer.style('display', 'none');
+    this.markersContainer.style('display', 'none');
+  }
+
+  /**
+   * Update series generated from props
+   * @param   {Object} props   React Component properties
+   * @param   {Object} state   React Component state
+   */
+  _updateSeries(props, state) {
+    let { func, xMin, xMax, series, points } = props;
+    let delta = (xMax - xMin) / points;
+    let seriesData = new Array(points);
+
+    if (delta) {
+      seriesData = new Array(points);
+      for (let i = 0, x = xMin; i < points; i++) {
+        seriesData[i] = [x, func(x)];
+        x += delta;
+      }
+      seriesData[points - 1] = [xMax, func(xMax)];
+    } else {
+      let yVal = func(xMin);
+      seriesData = [[0, yVal], [1, yVal]];
+    }
+
+    const markerElems = [];
+    const detailElems = [<text key='lbl' className='text-tip x' y='1.25em'/>];
+    const seriesLines = [];
+    for (let i = 0, l = series ? series.length : 1; i < l; i++) {
+      const yAccessor = series ? function(d) { return state.yScale(d[1][this]); }.bind(series[i]) : (d) => state.yScale(d[1]);
+      seriesLines.push(d3.line().x((d, i) => this.state.xScale(d[0])).y(yAccessor));
+      detailElems.push(<text key={i} className='text-tip y' strokeWidth={0} fill={props.colors[i]} y={1.25 * (i + 2) + 'em'}/>);
+      markerElems.push(<circle key={i} className='marker' r='4' />);
+    }
+
+    const tipHeight = 2 + (1.2 * (seriesLines ? seriesLines.length : 0.8));
+
+    this.setState({ markerElems, detailElems, seriesLines, seriesData, tipHeight });
+  }
+
+  /**
+   * Update dimensions and series data based on props and context.
+   */
+  componentWillMount() {
+    this._updateSeries(this.props, this.state);
+  }
+
+  /**
+   * Update state based on property and context changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    const props = this.props;
+
+    if (props.code != nextProps.code) {
+      this._updateSeries(nextProps, this.state);
+    }
+  }
+
+  /**
+   * Render the chart
+   * @return {React.Component} Chart SVG
+   */
+  render() {
+    return (
+      <ContainerDimensions>
+        { ({ width, height }) => {
+          const { innerWidth, outerHeight, innerHeight } = this._updateDimensions(this.props, this.context.sizeRatio, width, height);
+          const { xMin, xMax, xLabel, yLabel, xUnit, yUnit, xMark, colors } = this.props;
+          const { tipHeight, detailElems, markerElems, seriesData, seriesLines } = this.state;
+          const lines = seriesLines.map((line, i) => <path key={i} className='line' fill='none' stroke={colors[i]} strokeWidth='1' d={line(seriesData)} />).reverse();
+
+          const markX = xMark ? innerWidth * (xMark - xMin) / (xMax - xMin) : 0;
+          const xmark = xMark ? <path key={'mark'} className='line' fill='none' strokeDasharray='5,5' stroke={'#ff8c0d'} strokeWidth='1' d={'M ' + markX + ' ' + innerHeight + ' L ' + markX + ' 0'} /> : '';
+          return (
+            <div width={width} height={height}>
+              <svg style={{ width: '100%', height: outerHeight }}>
+                <g transform={`translate(${MARGIN.left},${MARGIN.top})`}>
+                  <g>{xmark}</g>
+                  <g>{lines}</g>
+                  <g className='x axis' ref={(elem) => d3.select(elem).call(this.xAxis)} transform={`translate(0,${innerHeight})`}>
+                    <text className='cap' y='30' dy='.1em' x={innerWidth / 2} style={{ textAnchor: 'middle' }}>
+                      <tspan>{xLabel}</tspan>
+                      <tspan className='metric'> ({xUnit})</tspan>
+                    </text>
+                  </g>
+                  <g className='y axis' ref={(elem) => d3.select(elem).call(this.yAxis)}>
+                    <text className='cap' transform='rotate(-90)' y='-50' dy='.1em' x={innerHeight / -2} style={{ textAnchor: 'middle' }}>
+                      <tspan>{yLabel}</tspan>
+                      { yUnit && <tspan className='metric'> ({yUnit})</tspan> }
+                    </text>
+                  </g>
+                  <g ref={(g) => this.tipContainer = d3.select(g)} style={{ display: 'none' }}>
+                    <rect className='tooltip' height={tipHeight + 'em'}></rect>
+                    {detailElems}
+                  </g>
+                  <g ref={(g) => this.markersContainer = d3.select(g)} style={{ display: 'none' }}>
+                    {markerElems}
+                  </g>
+                  <rect
+                    fillOpacity='0'
+                    height={innerHeight}
+                    width={innerWidth + 1}
+                    onMouseEnter={this._showTip}
+                    onTouchStart={this._showTip}
+                    onMouseLeave={this._hideTip}
+                    onTouchEnd={this._hideTip}
+                    onMouseMove={e => this._moveTip(e, width)}
+                    onTouchMove={e => this._moveTip(e, width)}
+                  />
+                </g>
+              </svg>
+            </div>
+          );
+        }}
+      </ContainerDimensions>
+    );
+  }
+}

src/app/components/ModalPermalink.jsx

@@ -34,6 +34,18 @@ export default class ModalPermalink extends TranslatedComponent {
     );
   }
 
+  /**
+   * Copy the shortened URL to the clipboard
+   * @param  {Event} e Click event
+   * @return {void}
+   */
+  copyShortLink() {
+    let copyText = document.getElementById("shortenedUrl");
+    // Copy the text inside the shortendUrl input to the clipboard
+    copyText.select();
+    document.execCommand("copy");
+  }
+
   /**
    * Render the modal
    * @return {React.Component} Modal Content
@@ -42,15 +54,17 @@ export default class ModalPermalink extends TranslatedComponent {
     let translate = this.context.language.translate;
 
     return <div className='modal' onClick={ (e) => e.stopPropagation() }>
-      <h2>{translate('permalink')}</h2>
+      <h3>{translate('permalink')}</h3>
       <br/>
       <h3>{translate('URL')}</h3>
       <input value={this.props.url} size={40} readOnly onFocus={ (e) => e.target.select() }/>
       <br/><br/>
       <h3 >{translate('shortened')}</h3>
-      <input value={this.state.shortenedUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/>
+      <input id={'shortenedUrl'} value={this.state.shortenedUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/><button className={'cb dismiss cap'} onClick={this.copyShortLink}>{translate('copy to clipboard')}</button>
       <br/><br/>
-      <p>s.orbis.zone is the new URL shortener domain, old eddp.co urls are considered end of life and could go down at any moment. Sorry for any inconvenience.</p>
+      <hr />
+      <p>s.orbis.zone is the URL shortener domain. These links should persist indefinitely going forward. If for some reason there is a problem with the link shortening process, please report it in the EDCD Discord Server.</p>
+      <hr />
       <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
     </div>;
   }

src/app/components/ModalShoppingList.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import request from 'superagent';
 import Persist from '../stores/Persist';
+const zlib = require('zlib');
+const base64url = require('base64url');
 
 /**
  * Permalink modal
@@ -10,7 +12,8 @@ import Persist from '../stores/Persist';
 export default class ModalShoppingList extends TranslatedComponent {
 
   static propTypes = {
-    ship: PropTypes.object.isRequired
+    ship: PropTypes.object.isRequired,
+    buildName: PropTypes.string
   };
 
   /**
@@ -56,7 +59,6 @@ export default class ModalShoppingList extends TranslatedComponent {
           continue;
         }
         if (module.m.blueprint.special) {
-          console.log(module.m.blueprint.special);
           blueprints.push({ uuid: module.m.blueprint.special.uuid, number: 1 });
         }
         for (const g in module.m.blueprint.grades) {
@@ -89,8 +91,10 @@ export default class ModalShoppingList extends TranslatedComponent {
     request
       .get('http://localhost:44405/commanders')
       .end((err, res) => {
+        this.display = 'block';
         if (err) {
           console.log(err);
+          this.display = 'none';
           return this.setState({ failed: true });
         }
         const cmdrs = JSON.parse(res.text);
@@ -146,6 +150,113 @@ export default class ModalShoppingList extends TranslatedComponent {
     }
   }
 
+  /**
+   * Fix issues with the item name for bulkheads when sending to EDOMH
+   * @param {*} ship Ship object
+   * @param {*} item Item name
+   * @returns updated item name
+   */
+  fixArmourItemNameForEDOMH(ship, item) {
+    // The module blueprint fdname contains "Armour_" it's a bulkhead and we need to pre-populate the item field with the correct name from the ship object
+    switch (ship.bulkheads.m.name){
+      case "Lightweight Alloy":
+        item = ship.id + "_Armour_Grade1";
+        break;
+      case "Reinforced Alloy":
+        item = ship.id + "_Armour_Grade2";
+        break;
+      case "Military Grade Composite":
+        item = ship.id + "_Armour_Grade3";
+        break;
+      case "Mirrored Surface Composite":
+        item = ship.id + "_Armour_Mirrored";
+        break;
+      case "Reactive Surface Composite":
+        item = ship.id + "_Armour_Reactive";
+        break;
+    }
+    return item;
+  }
+
+  /**
+ * Send all blueprints to EDOMH. This is a modified copy of registerBPs because this.state.blueprints was empty when I tried to modify sendToEDEng and I couldn't figure out why
+ * @param {Event} event React event
+ */
+  sendToEDOMH(event) {
+    event.preventDefault();
+    const ship = this.props.ship;
+    const buildName = this.props.buildName;
+    let blueprints = [];
+
+    //create the json
+    for (const module of ship.costList) {
+      if (module.type === 'SHIP') {
+        continue;
+      }
+      if (module.m && module.m.blueprint) {
+        if (!module.m.blueprint.grade || !module.m.blueprint.grades) {
+          continue;
+        }
+        if (module.m.blueprint.special) {
+          let item = "";
+          // If the module blueprint fdname contains "Armour_" it's a bulkhead and we need to pre-populate the item field with the correct name from the ship object
+          if (module.m.blueprint.fdname.includes("Armour_")) {
+            item = this.fixArmourItemNameForEDOMH(ship, item)
+          }
+          else {
+            item = module.m.symbol;
+          }
+
+          blueprints.push({
+            "item": item,
+            "blueprint": module.m.blueprint.special.edname
+          });
+        }
+        for (let g in module.m.blueprint.grades) {
+          if (!module.m.blueprint.grades.hasOwnProperty(g)) {
+            continue;
+          }
+          // We only want the grade that the module is currently at, not every grade up to that point
+          if (Number(g) !== module.m.blueprint.grade) {
+            continue;
+          }
+          let item = "";
+          // If the module blueprint fdname contains "Armour_" it's a bulkhead and we need to pre-populate the item field with the correct name from the ship object
+          if (module.m.blueprint.fdname.includes("Armour_")) {
+            item = this.fixArmourItemNameForEDOMH(ship, item)
+          }
+          else {
+            item = module.m.symbol;
+          }
+          blueprints.push({
+            "item": item,
+            "blueprint": module.m.blueprint.fdname,
+            "grade": module.m.blueprint.grade,
+            "highestGradePercentage":1.0
+          });
+        }
+      }
+    }
+
+    let shipName = buildName + " - " + ship.name;
+
+    //create JSON to encode
+    let baseJson = {
+      "version":1,
+      "name": shipName, // TO-DO: Import build name and put that here correctly
+      "items": blueprints
+    }
+
+    let JSONString = JSON.stringify(baseJson)
+    let deflated = zlib.deflateSync(JSONString)
+
+    //actually encode
+    let link = base64url.encode(deflated)
+    link = "edomh://coriolis/?" + link;
+
+    window.open(link, "_self")
+  }
+
   /**
    * Convert mats object to string
    */
@@ -160,14 +271,15 @@ export default class ModalShoppingList extends TranslatedComponent {
         if (!module.m.blueprint.grade || !module.m.blueprint.grades) {
           continue;
         }
-        for (const g in module.m.blueprint.grades) {
+        for (let g in module.m.blueprint.grades) {
           if (!module.m.blueprint.grades.hasOwnProperty(g)) {
             continue;
           }
-          if (g > module.m.blueprint.grade) {
+          // Ignore grades higher than the grade selected
+          if (Number(g) > module.m.blueprint.grade) {
             continue;
           }
-          for (const i in module.m.blueprint.grades[g].components) {
+          for (let i in module.m.blueprint.grades[g].components) {
             if (!module.m.blueprint.grades[g].components.hasOwnProperty(i)) {
               continue;
             }
@@ -178,6 +290,18 @@ export default class ModalShoppingList extends TranslatedComponent {
             }
           }
         }
+        if (module.m.blueprint.special) {
+          for (const j in module.m.blueprint.special.components) {
+            if (!module.m.blueprint.special.components.hasOwnProperty(j)) {
+              continue;
+            }
+            if (mats[j]) {
+              mats[j] += module.m.blueprint.special.components[j];
+            } else {
+              mats[j] = module.m.blueprint.special.components[j];
+            }
+          }
+        }
       }
     }
     let matsString = '';
@@ -229,34 +353,48 @@ export default class ModalShoppingList extends TranslatedComponent {
     const compatible = this.checkBrowserIsCompatible();
     this.cmdrChangeHandler = this.cmdrChangeHandler.bind(this);
     this.sendToEDEng = this.sendToEDEng.bind(this);
+    this.sendToEDOMH = this.sendToEDOMH.bind(this);
     return <div className='modal' onClick={ (e) => e.stopPropagation() }>
-      <h2>{translate('PHRASE_SHOPPING_MATS')}</h2>
-      <label>{translate('Grade 1 rolls ')}</label>
-      <input id={1} type={'number'} min={0} defaultValue={this.state.matsPerGrade[1]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 2 rolls ')}</label>
-      <input id={2} type={'number'} min={0} defaultValue={this.state.matsPerGrade[2]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 3 rolls ')}</label>
-      <input id={3} type={'number'} min={0} value={this.state.matsPerGrade[3]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 4 rolls ')}</label>
-      <input id={4} type={'number'} min={0} value={this.state.matsPerGrade[4]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 5 rolls ')}</label>
-      <input id={5} type={'number'} min={0} value={this.state.matsPerGrade[5]} onChange={this.changeHandler} />
+      <h3>{translate('PHRASE_SHOPPING_MATS')}</h3>
       <div>
-        <textarea className='cb json' readOnly value={this.state.matsList} />
+      <p>{translate('PHRASE_DIFFERENT_ROLLS')}</p>
+        <label>{translate('G1')}</label>
+        <input className={'groll'} id={1} type={'number'} min={0} defaultValue={this.state.matsPerGrade[1]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G2')}</label>
+        <input className={'groll'} id={2} type={'number'} min={0} defaultValue={this.state.matsPerGrade[2]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G3')}</label>
+        <input className={'groll'} id={3} type={'number'} min={0} value={this.state.matsPerGrade[3]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G4')}</label>
+        <input className={'groll'} id={4} type={'number'} min={0} value={this.state.matsPerGrade[4]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G5')}</label>
+        <input className={'groll'} id={5} type={'number'} min={0} value={this.state.matsPerGrade[5]} onChange={this.changeHandler} />
       </div>
-      <label hidden={!compatible} className={'l cap'}>{translate('CMDR Name')}</label>
-      <br/>
-      <select hidden={!compatible} className={'cmdr-select l cap'} onChange={this.cmdrChangeHandler} defaultValue={this.state.cmdrName}>
-        {this.state.cmdrs.map(e => <option key={e}>{e}</option>)}
-      </select>
-      <br/>
-      <p hidden={!this.state.failed} id={'failed'} className={'l'}>{translate('PHRASE_FAIL_EDENGINEER')}</p>
-      <p hidden={compatible} id={'browserbad'} className={'l'}>{translate('PHRASE_FIREFOX_EDENGINEER')}</p>
-      <button className={'l cb dismiss cap'} disabled={!!this.state.failed || !compatible} onClick={this.sendToEDEng}>{translate('Send to EDEngineer')}</button>
+
+      <div>
+        <p>{translate('PHRASE_ALL_MODULES_ALL_ROLLS')}</p>
+        <textarea className='cb json' readOnly value={this.state.matsList} />
+        <p>{translate('PHRASE_FOR_FINER_CONTROL')}</p>
+      </div>
+
+      <div id='edengineer' display={this.display} hidden={!!this.state.failed && !compatible}>
+      <hr />
+        <h3>ED Engineer</h3>
+        <h4 hidden={compatible} id={'browserbad'} className={'l'}>{translate('PHRASE_FIREFOX_EDENGINEER')}</h4>
+        <h4 hidden={!this.state.failed} id={'failed'} className={'l'}>{translate('PHRASE_FAILED_TO_FIND_EDENGINEER')}</h4>
+        <label for='cmdr-select' hidden={!!this.state.failed || !compatible} className={'l cap'}>{translate('CMDR Name:')}</label>
+        <select id='cmdr-select' hidden={!!this.state.failed || !compatible} className={'cmdr-select l cap'} onChange={this.cmdrChangeHandler} defaultValue={this.state.cmdrName}>
+          {this.state.cmdrs.map(e => <option key={e}>{e}</option>)}
+        </select>
+        <br/>
+          <button className={'l cb dismiss cap'} disabled={!!this.state.failed || !compatible} onClick={this.sendToEDEng}>{translate('Send to EDEngineer')}</button>
+      </div>
+      <div id='edomh'>
+      <hr />
+        <h3>ED Odyssey Materials Helper</h3>
+        <p>{translate('PHRASE_ENSURE_EDOMH')}</p>
+        <button className={'l cb dismiss cap'} onClick={this.sendToEDOMH}>{translate('Send to EDOMH')}</button>
+      </div>
+      <hr />
       <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
     </div>;
   }

src/app/components/PieChart.jsx

@@ -1,92 +1,92 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ContainerDimensions from 'react-container-dimensions';
-import * as d3 from 'd3';
-
-const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
-const LABEL_COLOUR = '#000000';
-
-/**
- * A pie chart
- */
-export default class PieChart extends Component {
-
-  static propTypes = {
-    data : PropTypes.array.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
-  constructor(props, context) {
-    super(props);
-
-    this.pie = d3.pie().value((d) => d.value);
-    this.colors = CORIOLIS_COLOURS;
-    this.arc = d3.arc();
-    this.arc.innerRadius(0);
-  }
-
-
-  /**
-   * Generate a slice of the pie chart
-   * @param {Object} d     the data for this slice
-   * @param {number} i     the index of this slice
-   * @param {number} width the current width of the parent container
-   * @returns {Object}     the SVG for the slice
-   */
-  sliceGenerator(d, i, width) {
-    if (!d || d.value == 0) {
-      // Ignore 0 values
-      return null;
-    }
-
-    const { data } = this.props;
-
-    // Push the labels further out from the centre of the slice
-    let [labelX, labelY] = this.arc.centroid(d);
-    const labelTranslate = `translate(${labelX * 1.5}, ${labelY * 1.5})`;
-
-    // Put the keys in a line with equal spacing
-    const nonZeroItems = data.filter(d => d.value != 0).length;
-    const thisItemIndex = data.slice(0, i + 1).filter(d => d.value != 0).length - 1;
-    const keyX = -width / 2 + (width / nonZeroItems) * (thisItemIndex + 0.5);
-    const keyTranslate = `translate(${keyX}, ${width * 0.45})`;
-
-    return (
-      <g key={`group-${i}`}>
-        <path key={`arc-${i}`} d={this.arc(d)} style={{ fill: this.colors[i] }} />
-        <text key={`label-${i}`} transform={labelTranslate} style={{ strokeWidth: '0px', fill: LABEL_COLOUR }} textAnchor='middle'>{d.value}</text>
-        <text key={`key-${i}`} transform={keyTranslate} style={{ strokeWidth:'0px', fill: this.colors[i] }} textAnchor='middle'>{d.data.label}</text>
-      </g>
-    );
-  }
-
-  /**
-   * Render the component
-   * @returns {object} Markup
-   */
-  render() {
-    return (
-      <ContainerDimensions>
-        { ({ width }) => {
-          const pie = this.pie(this.props.data),
-              translate = `translate(${width / 2}, ${width * 0.4})`;
-
-          this.arc.outerRadius(width * 0.4);
-          return (
-            <div width={width} height={width}>
-              <svg style={{ stroke: 'None' }} width={width} height={width * 0.9}>
-                <g transform={translate}>
-                  {pie.map((d, i) => this.sliceGenerator(d, i, width))}
-                </g>
-              </svg>
-            </div>
-          );
-        }}
-      </ContainerDimensions>
-    );
-  }
-}
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ContainerDimensions from 'react-container-dimensions';
+import * as d3 from 'd3';
+
+const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
+const LABEL_COLOUR = '#000000';
+
+/**
+ * A pie chart
+ */
+export default class PieChart extends Component {
+
+  static propTypes = {
+    data : PropTypes.array.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    this.pie = d3.pie().value((d) => d.value);
+    this.colors = CORIOLIS_COLOURS;
+    this.arc = d3.arc();
+    this.arc.innerRadius(0);
+  }
+
+
+  /**
+   * Generate a slice of the pie chart
+   * @param {Object} d     the data for this slice
+   * @param {number} i     the index of this slice
+   * @param {number} width the current width of the parent container
+   * @returns {Object}     the SVG for the slice
+   */
+  sliceGenerator(d, i, width) {
+    if (!d || d.value == 0) {
+      // Ignore 0 values
+      return null;
+    }
+
+    const { data } = this.props;
+
+    // Push the labels further out from the centre of the slice
+    let [labelX, labelY] = this.arc.centroid(d);
+    const labelTranslate = `translate(${labelX * 1.5}, ${labelY * 1.5})`;
+
+    // Put the keys in a line with equal spacing
+    const nonZeroItems = data.filter(d => d.value != 0).length;
+    const thisItemIndex = data.slice(0, i + 1).filter(d => d.value != 0).length - 1;
+    const keyX = -width / 2 + (width / nonZeroItems) * (thisItemIndex + 0.5);
+    const keyTranslate = `translate(${keyX}, ${width * 0.45})`;
+
+    return (
+      <g key={`group-${i}`}>
+        <path key={`arc-${i}`} d={this.arc(d)} style={{ fill: this.colors[i] }} />
+        <text key={`label-${i}`} transform={labelTranslate} style={{ strokeWidth: '0px', fill: LABEL_COLOUR }} textAnchor='middle'>{d.value}</text>
+        <text key={`key-${i}`} transform={keyTranslate} style={{ strokeWidth:'0px', fill: this.colors[i] }} textAnchor='middle'>{d.data.label}</text>
+      </g>
+    );
+  }
+
+  /**
+   * Render the component
+   * @returns {object} Markup
+   */
+  render() {
+    return (
+      <ContainerDimensions>
+        { ({ width }) => {
+          const pie = this.pie(this.props.data),
+              translate = `translate(${width / 2}, ${width * 0.4})`;
+
+          this.arc.outerRadius(width * 0.4);
+          return (
+            <div width={width} height={width}>
+              <svg style={{ stroke: 'None' }} width={width} height={width * 0.9}>
+                <g transform={translate}>
+                  {pie.map((d, i) => this.sliceGenerator(d, i, width))}
+                </g>
+              </svg>
+            </div>
+          );
+        }}
+      </ContainerDimensions>
+    );
+  }
+}

src/app/components/Pips.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import { Pip } from './SvgIcons';
-import { autoBind } from 'react-extras';
+import autoBind from 'auto-bind';
 
 /**
  * Pips displays SYS/ENG/WEP pips and allows users to change them with key presses by clicking on the relevant area.

src/app/components/Slider.jsx

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

src/app/components/Slot.jsx

@@ -99,6 +99,7 @@ export default class Slot extends TranslatedComponent {
     let translate = language.translate;
     let { ship, m, enabled, dropClass, dragOver, onOpen, onChange, selected, eligible, onSelect, warning, availableModules } = this.props;
     let slotDetails, modificationsMarker, menu;
+    let missing = false;
 
     if (!selected) {
       // If not selected then sure that modifications flag is unset
@@ -108,6 +109,11 @@ export default class Slot extends TranslatedComponent {
     if (m) {
       slotDetails = this._getSlotDetails(m, enabled, translate, language.formats, language.units);  // Must be implemented by sub classes
       modificationsMarker = JSON.stringify(m);
+      if(typeof m.grp !== 'undefined' || m.grp !== null) {
+        if(m.grp == "mh" || m.grp == "mm") {
+          missing = true;
+        }
+      }
     } else {
       slotDetails = <div className={'empty'}>{translate(eligible ? 'emptyrestricted' : 'empty')}</div>;
       modificationsMarker = '';
@@ -138,13 +144,16 @@ export default class Slot extends TranslatedComponent {
     }
 
     // TODO: implement touch dragging
-
+    
     return (
       <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onKeyDown={this._keyDown} onContextMenu={this._contextMenu} onDragOver={dragOver} tabIndex="0" ref={slotDiv => this.slotDiv = slotDiv}>
-        <div className='details-container'>
+        {
+          // If missing module/hardpoint, set the div container to warning status.
+        }
+        <div className={ missing === true ? 'details-container warning' : 'details-container'}>
           <div className='sz'>{this._getMaxClassLabel(translate)}</div>
             {slotDetails}
-  	  </div>
+  	    </div>
         {menu}
       </div>
     );

src/app/components/StandardSlot.jsx

@@ -93,6 +93,11 @@ export default class StandardSlot extends TranslatedComponent {
       this._modificationsSelected = false;
     }
 
+    // If this is a missing module, therefore has the 'info' field, set the warning value on the module to be true when loaded.
+    if (m.info) {
+      warning = () => true;
+    }
+
     const modificationsMarker = JSON.stringify(m);
 
     if (selected) {
@@ -124,7 +129,7 @@ export default class StandardSlot extends TranslatedComponent {
         <div className={cn('details-container', { warning: warning && warning(slot.m), disabled: m.grp !== 'bh' && !slot.enabled })}>
           <div className={'sz'}>{m.grp == 'bh' ? m.name.charAt(0) : slot.maxClass}</div>
           <div>
-            <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
+            <div className={'l'}>{classRating} {m.getInfo() ? translate(m.ukName) : translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
             <div className={'r'}>{formats.round(mass)}{units.T}</div>
 	    <div/>
             <div className={'cb'}>
@@ -144,7 +149,8 @@ export default class StandardSlot extends TranslatedComponent {
                 { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
                 { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
                 { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
-	        { validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button  tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+                { m.getInfo() ? <div className='l'>{translate(m.getInfo())}</div> : null }
+	        { m.getInfo() ? <div className='r'></div> : validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button  tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
             </div>
           </div>
         </div>

src/app/components/VerticalBarChart.jsx

@@ -1,80 +1,80 @@
-import TranslatedComponent from './TranslatedComponent';
-import React, { PropTypes } from 'react';
-import ContainerDimensions from 'react-container-dimensions';
-import { BarChart, Bar, XAxis, YAxis, LabelList } from 'recharts';
-
-const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
-const LABEL_COLOUR = '#000000';
-const AXIS_COLOUR = '#C06400';
-
-const ASPECT = 1;
-
-const merge = function(one, two) {
-  return Object.assign({}, one, two);
-};
-
-/**
- * A vertical bar chart
- */
-export default class VerticalBarChart extends TranslatedComponent {
-  static propTypes = {
-    data : PropTypes.array.isRequired,
-    yMax : PropTypes.number
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
-  constructor(props, context) {
-    super(props);
-
-    this._termtip = this._termtip.bind(this);
-  }
-
-  /**
-   * Render the bar chart
-   * @returns {Object} the markup
-   */
-  render() {
-    const { tooltip, termtip } = this.context;
-
-    // Calculate maximum for Y
-    let dataMax = Math.max(...this.props.data.map(d => d.value));
-    if (dataMax == -Infinity) dataMax = 0;
-    let yMax = this.props.yMax ? Math.round(this.props.yMax) : 0;
-    const localMax = Math.max(dataMax, yMax);
-
-    return (
-      <ContainerDimensions>
-        { ({ width }) => (
-          <div width='100%'>
-            <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' fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}>
-                <LabelList dataKey='value' position='insideTop'/>
-              </Bar>
-            </BarChart>
-          </div>
-        )}
-      </ContainerDimensions>
-    );
-  }
-
-  /**
-   * Generate a term tip
-   * @param {Object} d the data
-   * @param {number} i the index
-   * @param {Object} e the event
-   * @returns {Object} termtip markup
-   */
-  _termtip(d, i, e) {
-    if (this.props.data[i].tooltip) {
-      return this.context.termtip(this.props.data[i].tooltip, e);
-    } else {
-      return null;
-    }
-  }
-}
+import TranslatedComponent from './TranslatedComponent';
+import React, { PropTypes } from 'react';
+import ContainerDimensions from 'react-container-dimensions';
+import { BarChart, Bar, XAxis, YAxis, LabelList } from 'recharts';
+
+const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
+const LABEL_COLOUR = '#000000';
+const AXIS_COLOUR = '#C06400';
+
+const ASPECT = 1;
+
+const merge = function(one, two) {
+  return Object.assign({}, one, two);
+};
+
+/**
+ * A vertical bar chart
+ */
+export default class VerticalBarChart extends TranslatedComponent {
+  static propTypes = {
+    data : PropTypes.array.isRequired,
+    yMax : PropTypes.number
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    this._termtip = this._termtip.bind(this);
+  }
+
+  /**
+   * Render the bar chart
+   * @returns {Object} the markup
+   */
+  render() {
+    const { tooltip, termtip } = this.context;
+
+    // Calculate maximum for Y
+    let dataMax = Math.max(...this.props.data.map(d => d.value));
+    if (dataMax == -Infinity) dataMax = 0;
+    let yMax = this.props.yMax ? Math.round(this.props.yMax) : 0;
+    const localMax = Math.max(dataMax, yMax);
+
+    return (
+      <ContainerDimensions>
+        { ({ width }) => (
+          <div width='100%'>
+            <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' fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}>
+                <LabelList dataKey='value' position='insideTop'/>
+              </Bar>
+            </BarChart>
+          </div>
+        )}
+      </ContainerDimensions>
+    );
+  }
+
+  /**
+   * Generate a term tip
+   * @param {Object} d the data
+   * @param {number} i the index
+   * @param {Object} e the event
+   * @returns {Object} termtip markup
+   */
+  _termtip(d, i, e) {
+    if (this.props.data[i].tooltip) {
+      return this.context.termtip(this.props.data[i].tooltip, e);
+    } else {
+      return null;
+    }
+  }
+}

src/app/i18n/Language.jsx

@@ -8,6 +8,7 @@ import * as RU from './ru';
 import * as PL from './pl';
 import * as PT from './pt';
 import * as CN from './cn';
+import * as KO from './ko';
 import * as d3 from 'd3';
 
 let fallbackTerms = EN.terms;
@@ -29,6 +30,7 @@ export function getLanguage(langCode) {
     case 'pl': lang = PL; break;
     case 'pt': lang = PT; break;
     case 'cn': lang = CN; break;
+    case 'ko': lang = KO; break;
     default:
       lang = EN;
   }
@@ -97,5 +99,6 @@ export const Languages = {
   ru: 'ру́сский',
   pl: 'polski',
   pt: 'português',
-  cn: '中文'
+  cn: '中文',
+  ko: '한국어'
 };

src/app/i18n/cn.json

@@ -398,6 +398,7 @@
   "No modded components.": "没有改装的部件",
   "Sending...": "发送中...",
   "Send to EDEngineer": "发送至EDEngineer",
+  "Send to EDOMH": "发送至EDOMH",
   "PHASE_UPLOAD_ORBIS": "上传到orbis.zone（测试阶段）",
   "orbis username": "orbis.zone的Email或用户名",
   "orbis password": "orbis.zone的密码",

src/app/i18n/de.js

@@ -1,16 +1,16 @@
-export const formats = {
-  decimal: ',',
-  thousands: '.',
-  grouping: [3],
-  currency: ['', ' €'],
-  dateTime: '%A, der %e. %B %Y, %X',
-  date: '%d.%m.%Y',
-  time: '%H:%M:%S',
-  periods: ['AM', 'PM'], // unused
-  days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-  shortDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-  months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-  shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
-};
-
-export { default as terms } from './de.json';
+export const formats = {
+  decimal: ',',
+  thousands: '.',
+  grouping: [3],
+  currency: ['', ' €'],
+  dateTime: '%A, der %e. %B %Y, %X',
+  date: '%d.%m.%Y',
+  time: '%H:%M:%S',
+  periods: ['AM', 'PM'], // unused
+  days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+  shortDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+  months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+  shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+};
+
+export { default as terms } from './de.json';

src/app/i18n/en.json

@@ -26,6 +26,9 @@
     "PHRASE_NO_SPECIAL": "No experimental effect",
     "PHRASE_SHOPPING_LIST": "Stations that sell this build",
     "PHRASE_SHOPPING_MATS": "Materials needed for this build",
+    "PHRASE_DIFFERENT_ROLLS": "Material requirements will differ, based on the number of rolls per grade, per module.",
+    "PHRASE_FOR_FINER_CONTROL": "For finer control over rolls per grade/module, a more accurate list of required mats and help in finding those mats, please consider using the export options below to ED Odyssey Materials Helper, or ED Engineer, or use the Crafting Lists feature on inara.cz.",
+    "PHRASE_ALL_MODULES_ALL_ROLLS": "The list below, assumes standard to G5 Engineered (approx 80% - 90%) with the rolls above, for ALL engineered modules in the build. You can adjust the number of rolls above for each grade, however it will still apply to all engineered modules in the build.",
     "PHRASE_REFIT_SHOPPING_LIST": "Stations that sell required modules",
     "PHRASE_TOTAL_EFFECTIVE_SHIELD": "Total amount of damage that can be taken from each damage type, if using all shield cells",
     "PHRASE_TIME_TO_LOSE_SHIELDS": "Shields will hold for",
@@ -81,8 +84,10 @@
     "TT_SUMMARY_UNLADEN_TOTAL_JUMP": "Farthest possible range with no cargo, a full fuel tank, and jumping as far as possible each time",
     "TT_SUMMARY_LADEN_TOTAL_JUMP": "Farthest possible range with full cargo, a full fuel tank, and jumping as far as possible each time",
     "HELP_MODIFICATIONS_MENU": "Click on a number to enter a new value, or drag along the bar for small changes",
-	"PHRASE_FAIL_EDENGINEER": "Failed to send to EDEngineer (Launch EDEngineer and make sure the API is started then refresh the page.)",
-	"PHRASE_FIREFOX_EDENGINEER": "Sending to EDEngineer is not compatible with Firefox's security settings. Please try again with Chrome.",
+    "PHRASE_ENSURE_EDOMH": "Ensure ED Odyssey Material Helper is installed and registered to handle edomh:// urls, else this button will do nothing!",
+    "PHRASE_FIREFOX_EDENGINEER": "Sending to EDEngineer is not compatible with Firefox's security settings. Please try again with Chrome.",
+    "PHRASE_FAILED_TO_FIND_EDENGINEER": "Failed to find ED Engineer API. Please ensure it is running and try again.",
+    "MISSING_MODULES": "Missing Modules",
     "am": "Auto Field-Maintenance Unit",
     "bh": "Bulkheads",
     "bl": "Beam Laser",
@@ -93,6 +98,7 @@
     "ch": "Chaff Launcher",
     "cr": "Cargo Rack",
     "cs": "Manifest Scanner",
+    "csl": "Caustic Sink Launcher",
     "dc": "Docking Computer",
     "ec": "Electronic Countermeasure",
     "fc": "Fragment Cannon",
@@ -108,10 +114,18 @@
     "kw": "Kill Warrant Scanner",
     "ls": "Life Support",
     "mc": "Multi-cannon",
+    "mh": "Missing Weapon/Utility",
+    "mm": "Missing Module",
+    "advmc": "Multi-cannon (Advanced)",
     "axmc": "AX Multi-cannon",
+    "axmce": "AX Multi-cannon (Enhanced)",
     "ml": "Mining Laser",
+    "mlc": "Multi Limpet Controller",
     "mr": "Missile Rack",
+    "amr": "Missile Rack (Advanced)",
     "axmr": "AX Missile Rack",
+    "axmre": "AX Missile Rack (Enhanced)",
+    "ews": "Experimental Weapon Stabilizer",
     "mrp": "Module Reinforcement Package",
     "nl": "Mine Launcher",
     "pa": "Plasma Accelerator",
@@ -156,8 +170,10 @@
     "sua": "Supercruise Assist",
     "t": "thrusters",
     "tp": "Torpedo Pylon",
+    "ntp": "Nanite Torpedo Pylon",
     "ul": "Burst Laser",
     "Send To EDEngineer": "Send To EDEngineer",
+    "Send To EDOMH": "Send To EDOMH",
     "ws": "Frame Shift Wake Scanner",
     "rpl": "Repair Limpet Controller",
     "rcpl": "Recon Limpet Controller",
@@ -208,6 +224,7 @@
     "boost interval": "Boost interval",
     "total": "Total",
     "ammo": "Ammunition maximum",
+    "info": "Info",
     "boot": "Boot time",
     "hacktime": "Hack time",
     "brokenregen": "Broken regeneration rate",

src/app/i18n/ko.js

@@ -0,0 +1,16 @@
+export const formats = {
+    decimal: '.',
+    thousands: ',',
+    grouping: [3],
+    currency: ['₩', ''],
+    dateTime: '%a %b %e %X %Y',
+    date: '%Y/%m/%d',
+    time: '%H:%M:%S',
+    periods: ['오전', '오후'],
+    days: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
+    shortDays: ['일', '월', '화', '수', '목', '금', '토'],
+    months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+    shortMonths: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
+};
+
+export { default as terms } from './ko.json';

src/app/i18n/ru.json

@@ -13,7 +13,7 @@
     "PHRASE_SG_RECOVER": "Восстановление с 0% до 50% объема щита, учитывая полный аккумулятор СИС в начале",
     "PHRASE_UNLADEN": "Масса корабля без учета топлива и грузов",
     "PHRASE_UPDATE_RDY": "Доступна новая версия. Нажмите для обновления.",
-    "PHRASE_ENGAGEMENT_RANGE": "Дистанция между кораблем и целью",
+    "PHRASE_ENGAGEMENT_RANGE": "Дистанция между кораблём и целью",
     "PHRASE_SELECT_BLUEPRINT": "Нажмите чтобы выбрать чертеж",
     "PHRASE_BLUEPRINT_WORST": "Худшие основные значения для чертежа",
     "PHRASE_BLUEPRINT_FIFTY": "50% значения для чертежа",
@@ -24,9 +24,9 @@
     "PHRASE_BLUEPRINT_RESET": "Сбросить все модификаторы и чертеж",
     "PHRASE_SELECT_SPECIAL": "Нажмите, чтобы выбрать экспериментальный эффект",
     "PHRASE_NO_SPECIAL": "Без экспериментального эффекта",
-    "PHRASE_SHOPPING_LIST": "Станции, что продают эту сборку",
+    "PHRASE_SHOPPING_LIST": "Станции, на которых продают эту сборку",
     "PHRASE_SHOPPING_MATS": "Материалы которые нужны для сборки",
-    "PHRASE_REFIT_SHOPPING_LIST": "Станции, что продают необходимые модули",
+    "PHRASE_REFIT_SHOPPING_LIST": "Станции, на которых продают необходимые модули",
     "PHRASE_TOTAL_EFFECTIVE_SHIELD": "Общий урон, что может быть нанесен в каждым типе, если используются все щитонакопители",
     "PHRASE_TIME_TO_LOSE_SHIELDS": "Щиты продержатся",
     "PHRASE_TIME_TO_RECOVER_SHIELDS": "Щиты восстановятся за",
@@ -37,36 +37,36 @@
     "PHRASE_EFFECTIVE_ARMOUR": "Эффективная сила брони против разных типов урона",
     "PHRASE_DAMAGE_TAKEN": "% общих повреждений полученных в разных типах урона",
     "PHRASE_TIME_TO_LOSE_ARMOUR": "Броня продержится",
-    "PHRASE_MODULE_PROTECTION_EXTERNAL": "Защита гнезд",
+    "PHRASE_MODULE_PROTECTION_EXTERNAL": "Защита гнёзд",
     "PHRASE_MODULE_PROTECTION_INTERNAL": "Защита всех остальных модулей",
-    "PHRASE_OVERALL_DAMAGE": "Разбивка источников устойчивого ДПС",
-    "PHRASE_SHIELD_DAMAGE": "Подробности источников поддерживаемого ДПС против щитов",
-    "PHRASE_ARMOUR_DAMAGE": "Подробности источников поддерживаемого ДПС против брони",
+    "PHRASE_OVERALL_DAMAGE": "Разбивка источников устойчивого УвС",
+    "PHRASE_SHIELD_DAMAGE": "Подробности источников поддерживаемого УвС против щитов",
+    "PHRASE_ARMOUR_DAMAGE": "Подробности источников поддерживаемого УвС против брони",
     "PHRASE_TIME_TO_REMOVE_SHIELDS": "Снимет щиты за",
     "PHRASE_MULTI_CREW_CAPACITOR_POINTS": "Щелкните правой кновкой мыши чтобы объединить в группу.",
-    "TT_TIME_TO_REMOVE_SHIELDS": "Непрерывным огнем из всех орудий",
+    "TT_TIME_TO_REMOVE_SHIELDS": "Непрерывным огнём из всех орудий",
     "PHRASE_TIME_TO_REMOVE_ARMOUR": "Снимет броню за",
-    "TT_TIME_TO_REMOVE_ARMOUR": "Непрерывным огнем из всех орудий",
+    "TT_TIME_TO_REMOVE_ARMOUR": "Непрерывным огнём из всех орудий",
     "PHRASE_TIME_TO_DRAIN_WEP": "Опустошит ОРУ за",
     "TT_TIME_TO_DRAIN_WEP": "Время, за которое опустошится аккумулятор ОРУ при стрельбе из всех орудий",
     "TT_TIME_TO_LOSE_SHIELDS": "Против поддерживаемой стрельбы из всех орудий противника",
     "TT_TIME_TO_LOSE_ARMOUR": "Против поддерживаемой стрельбы из всех орудий противника",
     "TT_MODULE_ARMOUR": "Броня, защищающая модули от урона",
     "TT_MODULE_PROTECTION_EXTERNAL": "Процент урона, перенаправленного от гнезд на наборы для усиления модулей",
-    "TT_MODULE_PROTECTION_INTERNAL": "Процент урона, перенаправленного от модулей вне гнезд на наборы для усиления модулей",
-    "TT_EFFECTIVE_SDPS_SHIELDS": "Реальный поддерживаемый ДПС пока аккумулятор ОРУ не пуст",
+    "TT_MODULE_PROTECTION_INTERNAL": "Процент урона, перенаправленного от модулей вне гнёзд на наборы для усиления модулей",
+    "TT_EFFECTIVE_SDPS_SHIELDS": "Реальный поддерживаемый УвС пока ёмкость ОРУ не пуста",
     "TT_EFFECTIVENESS_SHIELDS": "Эффективность в сравнении с попаданием по цели с 0-сопротивляемостью без пунктов в СИС на 0 метрах",
-    "TT_EFFECTIVE_SDPS_ARMOUR": "Реальный поддерживаемый ДПС пока аккумулятор ОРУ не пуст",
+    "TT_EFFECTIVE_SDPS_ARMOUR": "Реальный поддерживаемый УвС пока аккумулятор ОРУ не пуст",
     "TT_EFFECTIVENESS_ARMOUR": "Эффективность в сравнении с попаданием по цели с 0-сопротивляемостью на 0 метрах",
-    "PHRASE_EFFECTIVE_SDPS_SHIELDS": "ПДПС против щитов",
-    "PHRASE_EFFECTIVE_SDPS_ARMOUR": "ПДПС против брони",
+    "PHRASE_EFFECTIVE_SDPS_SHIELDS": "ПУвС против щитов",
+    "PHRASE_EFFECTIVE_SDPS_ARMOUR": "ПУвС против брони",
     "TT_SUMMARY_SPEED": "С полным топливным баком и 4 пунктами в ДВГ",
     "TT_SUMMARY_SPEED_NONFUNCTIONAL": "Маневровые двигатели выключены или превышена максимальная масса с топливом и грузом",
     "TT_SUMMARY_BOOST": "С полным топливным баком и 4 пунктами в ДВГ",
     "TT_SUMMARY_BOOST_INTERVAL": "Время заполнения с 4 пунктами в СИС",
     "TT_SUMMARY_BOOST_NONFUNCTIONAL": "Распределитель питания не может обеспечить достаточно энергии для форсажа",
     "TT_SUMMARY_SHIELDS": "Чистая сила щита, включая усилители",
-    "TT_SUMMARY_SHIELDS_SCB": "Прочность щита, включая бустеры и SCB",
+    "TT_SUMMARY_SHIELDS_SCB": "Прочность щита, включая бустеры и щитонакопители",
     "TT_SUMMARY_SHIELDS_NONFUNCTIONAL": "Шитогенератор отсутствует или выключен",
     "TT_SUMMARY_INTEGRITY": "Целостность корабля, включая переборки и наборы для усиления корпуса",
     "TT_SUMMARY_HULL_MASS": "Масса корпуса без каких-либо модулей",
@@ -88,22 +88,23 @@
     "bl": "Пучковый лазер",
     "bsg": "Двухпоточный щитогенератор",
     "c": "Пушка",
-    "causres": "Каустическое сопротивление",
-    "Caustic resistance": "Каустическое сопротивление",
-    "cc": "Контроллер магнитного снаряда для сбора",
+    "causres": "Сопротивление едк.урону",
+    "Caustic resistance": "Сопротивление едк.урону",
+    "cc": "Контроллер дронов-сборщиков",
     "ch": "Разбрасыватель дипольных отражателей",
     "cr": "Грузовой стеллаж",
     "cs": "Сканер содержимого",
+    "csl": "Антикор катапульта",
     "dc": "Стыковочный компьютер",
-    "ec": "Электр. противодействие",
+    "ec": "Радиоэлектронное подавление",
     "fc": "Залповое орудие",
     "fh": "Ангар для истребителя",
     "fi": "FSD-перехватчик",
     "fs": "Топливозаборник",
     "fsd": "Рамочно-сместительный двигатель",
     "ft": "Топливный бак",
-    "fx": "Контроллер магнитного снаряда для топлива",
-    "hb": "Контроллер магнитного снаряда для взлома трюма",
+    "fx": "Контроллер дронов-заправщиков",
+    "hb": "Контроллер дронов-взломщиков трюмов",
     "hr": "Набор для усиления корпуса",
     "hs": "Теплоотводная катапульта",
     "kw": "Сканер преступников",
@@ -111,13 +112,14 @@
     "mc": "Многоствольное орудие",
     "axmc": "Многоствольное орудие АИ",
     "ml": "Проходочный лазер",
-    "mr": "Ракетный лоток",
+    "mr": "Блок ракет",
     "axmr": "Блок ракет АИ",
+    "ews": "Стабилизатор экспериментального вооружения",
     "mrp": "Набор для усиления модуля",
     "nl": "Мины",
     "pa": "Ускоритель плазмы",
     "pas": "Комплект для сближения с планетой",
-    "pc": "Контроллер магнитного снаряда для геологоразведки",
+    "pc": "Контроллер дронов-геологоразведчиков",
     "pce": "Каюта пассажира эконом-класса",
     "passenger capacity": "Количество пассажиров",
     "pci": "Каюта пассажира бизнес-класса",
@@ -143,36 +145,38 @@
     "gsc": "Осколочное орудие Стражей",
     "psg": "Призматический щитогенератор",
     "pv": "Гараж для планетарного транспорта",
-    "rf": "Устройство переработки",
+    "rf": "Очиститель",
     "rfl": "Зенитная установка (снаряды с дистанционным подрывом)",
-    "rg": "Электромагнитная пушка",
-    "rsl": "Дроны-исследователи",
+    "rg": "Рельсотрон",
+    "rsl": "Контроллер дронов-исследователей",
     "s": "Сенсоры",
     "sb": "Усилитель щита",
     "sc": "Сканер обнаружения",
     "scb": "Щитонакопитель",
-    "sfn": "Нейтрализатор глушащего поля",
+    "sfn": "Нейтрализатор отключающего поля",
     "sg": "Щитогенератор",
     "ss": "Сканер поверхностей",
     "sua": "Помощь в гиперкрейсерском режиме",
     "t": "Маневровые двигатели",
-    "tp": "Торпедная стойка",
-    "ul": "Пульсирующие лазеры",
+    "tp": "Торпедная установка",
+    "ul": "Пульсирующий лазер",
     "Send To EDEngineer": "Отправить в EDEngineer",
+    "Send To EDOMH": "Отправить в EDOMH",
     "ws": "Сканер следа FSD",
-    "rpl": "Дроны-ремонтники",
-    "rcpl": "Дроны-разведчики",
-    "xs": "Сканер «инопланетянин»",
+    "rpl": "Контроллер дронов-ремонтников",
+    "rcpl": "Контроллер дронов-разведчиков",
+    "xs": "Ксено-сканер",
     "tbem": "Блок энзимных ракет",
     "tbrfl": "Установка для стрельбы стреловидными снарядами с дистанционным подрывом",
-    "dtl": "Дроны-очистители",
-    "mahr": "Набор для усиления корпуса из Метасплава",
+    "dtl": "Контроллер дронов-очистителей",
+    "mlc": "Мультиконтроллер",
+    "mahr": "Метасплавное усиление корпуса",
     "emptyrestricted": "пусто (ограниченно)",
-    "damage dealt to": "Урон нанесен",
+    "damage dealt to": "Урон нанесён",
     "damage received from": "Урон получен от",
     "against shields": "Против щитов",
     "against hull": "Против корпуса",
-    "total effective shield": "Общие эффективные щиты",
+    "total effective shield": "Общая эффективность щита",
     "ammunition": "Припасы",
     "secs": "с",
     "bays": "Ячейки",
@@ -201,7 +205,7 @@
     "shield cells": "Щитонакопители",
     "recovery": "включение",
     "recharge": "перезарядка",
-    "engine pips": "Пункты в двигателе",
+    "engine pips": "Ячейки питания на ДВГ",
     "4b": "4 пункта и Форсаж",
     "speed": "скорость",
     "pitch": "Тангаж",
@@ -287,12 +291,12 @@
     "explosive": "Взрывч.",
     "kinetic": "Механич.",
     "thermal": "Тепл.",
-    "caustic": "Каустич.",
+    "caustic": "Едкий",
     "generator": "Генератор",
     "boosters": "Усилители",
     "cells": "Ячейки",
-    "shield addition": "ДОбавления к щиту",
-    "jump addition": "ДОбавления к прыжку",
+    "shield addition": "Добавления к щиту",
+    "jump addition": "Добавления к прыжку",
     "bulkheads": "Переборки",
     "reinforcement": "Усилители",
     "power and costs": "Энергия и стоимость",
@@ -374,9 +378,9 @@
     "/s": "/с",
     "/min": "/мин",
     "m/s": "м/с",
-    "Ls": "Св.сек",
+    "Ls": "Св.с",
     "LY": "Св.лет",
-    "CR": "кр.",
+    "CR": "КР.",
     "S": "М",
     "M": "С",
     "L": "Б",
@@ -435,7 +439,7 @@
     "deployed": "Открыты",
     "disabled": "Отключено",
     "discount": "Скидка",
-    "DPS": "УВС",
+    "DPS": "УвС",
     "efficiency": "Эффективность",
     "empty": "пусто",
     "ENG": "ДВГ",
@@ -449,7 +453,7 @@
     "jumps": "Прыжков",
     "laden": "Груж",
     "language": "Язык",
-    "maneuverability": "Маневренность",
+    "maneuverability": "Манёвренность",
     "max": "Макс",
     "no": "Нет",
     "pen": "ПБ",
@@ -462,7 +466,7 @@
     "repair": "Починка",
     "ret": "Убр",
     "retracted": "Убрано",
-    "ROF": "В\/сек",
+    "ROF": "В\/с",
     "save": "Сохранить",
     "sell": "Продать",
     "settings": "Настройки",
@@ -492,7 +496,7 @@
     "module": "модуль",
     "announcements": "объявления",
     "resistance": "сопротивление",
-    "Lightweight Alloy": "Легкие сплавы",
+    "Lightweight Alloy": "Лёгкие сплавы",
     "base": "базовые",
     "core module classes": "основные модули",
     "Group highlighted ships": "Сгруппировать выделенные корабли",
@@ -511,7 +515,7 @@
     "maximum speed": "максимальная скорость",
     "maximum range": "максимальная дальность",
     "shortlink": "короткая ссылка",
-    "guardian": "стражи",
+    "guardian": "Стражи",
     "engineers": "инженеры",
     "component": "компонент",
     "amount": "кол-во",
@@ -520,35 +524,35 @@
     "Heat Sink Launcher": "Теплоотводная катапульта",
     "scanners": "сканеры",
     "experimental": "экспериментальное",
-    "mining": "шахтерство",
+    "mining": "добыча ресурсов",
     "lasers": "лазеры",
     "ordnance": "артиллерия",
     "projectiles": "с боеприпасами",
     "hangars": "ангары",
-    "limpet controllers": "контроллеры снарядов",
+    "limpet controllers": "контроллеры дронов",
     "passenger cabins": "каюты пассажиров",
-    "structural reinforcement": "структурные усиления",
-    "flight assists": "помощники в полете",
+    "structural reinforcement": "усиление конструктива",
+    "flight assists": "помощь в полёте",
     "modifications": "модификации",
     "wep_reload": "перезарядка",
     "optimal multiplier": "оптимальный усилитель",
     "Cargo Hatch": "Грузовой люк",
     "Chaff Launcher": "Разбрасыватель дипольных отражателей",
     "Point Defence": "Точечная оборона",
-    "Electronic Countermeasure": "Электронное противодействие",
-    "Xeno Scanner": "Сканер «инопланетянин»",
-    "Shutdown Field Neutraliser": "Нейтрализатор глушащего поля",
-    "Disruptor": "Диверсант",
-    "Pacifier": "Миротворец",
+    "Electronic Countermeasure": "Радиоэлектронное подавление",
+    "Xeno Scanner": "Ксено-сканер",
+    "Shutdown Field Neutraliser": "Нейтрализатор отключающего поля",
+    "Disruptor": "«Диверсант»",
+    "Pacifier": "«Миротворец»",
     "Advanced Plasma Accelerator": "Улучшенный ускоритель плазмы",
-    "Cytoscrambler": "Дезинтегратор",
-    "Retributor": "Каратель",
-    "Enforcer": "Убийца",
-    "Imperial Hammer": "Имперский молот",
+    "Cytoscrambler": "«Дезинтегратор»",
+    "Retributor": "«Каратель»",
+    "Enforcer": "«Убийца»",
+    "Imperial Hammer": "«Имперский молот»",
     "Rocket Propelled FSD Disruptor": "Ракетный FSD-разрушитель",
-    "Pack-Hound": "Гончие",
+    "Pack-Hound": "«Гончие»",
     "Shock Mine Launcher": "Установщик шоковых мин",
-    "Mining Lance": "Копье шахтера",
+    "Mining Lance": "«Копьё шахтера»",
     "Corrosion Resistant": "Коррозийно-устойчивый стеллаж",
     "Standard Docking Computer": "Стандартный стыковочный компьютер",
     "Advanced Docking Computer": "Улучшенный стыковочный компьютер",
@@ -557,20 +561,20 @@
     "Guardian Power Distributor": "Рапределитель питания Стражей",
     "Enhanced Performance": "Усиленные маневровые двигатели",
     "Guardian Hybrid Power Plant": "Гибридная силовая установка Стражей",
-    "Reinforced Alloy": "Укрепленные сплавы",
+    "Reinforced Alloy": "Укреплённые сплавы",
     "Military Grade Composite": "Композит военного класса",
     "Mirrored Surface Composite": "Композит с зеркальной поверхностью",
     "Reactive Surface Composite": "Композит с реактивной поверхностью",
-    "Proto Light Alloys": "Опытные легкие сплавы",
+    "Proto Light Alloys": "Опытные лёгкие сплавы",
     "Ammo capacity": "Вместимость магазина",
-    "Lightweight": "Облегченный",
+    "Lightweight": "Облегчённый",
     "Reinforced": "Усиленный",
-    "Shielded": "Защищенный",
+    "Shielded": "Защищённый",
     "Fast scan": "Быстрое сканирование",
     "Long range": "Дальнего действия",
     "Wide angle": "Широкоугольный",
     "Blast resistant": "Взрывостойкий",
-    "Heavy duty": "Надежный",
+    "Heavy duty": "Надёжный",
     "Kinetic resistant": "Противокинетический",
     "Resistance augmented": "С универсальной защитой",
     "Thermal resistant": "Термостойкий",
@@ -622,7 +626,7 @@
     "Penetrator Munitions": "Бронебойные боеголовки",
     "Mass lock munition": "Боеприпасы с гравитационным захватом",
     "Mass Lock Munition": "Боеприпасы с гравитационным захватом",
-    "Reverberating cascade": "Отраженный залп",
+    "Reverberating cascade": "Отражённый залп",
     "Shift-lock canister": "Рамоблокирующая кассета",
     "Ion disruptor": "Ионный дестабилизатор",
     "Radiant Canister": "Светящаяся кассета",
@@ -639,7 +643,7 @@
     "Reflective Plating": "Отражающая броня",
     "Angled Plating": "Угловая броня",
     "Layered Plating": "Многослойная броня",
-    "Deep Plating": "Утолщенная броня",
+    "Deep Plating": "Утолщённая броня",
     "Expanded Probe Scanning Radius": "Увеличение радиуса сканирования зондов",
     "High charge capacity": "Высокоёмкий",
     "Charge enhanced": "Быстрозаряжающийся",
@@ -666,8 +670,8 @@
     "Combat": "Боец",
     "Trader": "Торговец",
     "Explorer": "Исследователь",
-    "Planetary Explorer": "Планетарный исследователь",
-    "Miner": "Шахтер",
+    "Planetary Explorer": "Исследователь планет",
+    "Miner": "Старатель",
     "Racer": "Гонщик",
 
     "Aberrant Shield Pattern Analysis": "Анализ аномального поведения щита",
@@ -691,7 +695,7 @@
     "Chemical Manipulators": "Манипуляторы для работы с химикатами",
     "Chemical Processors": "Оборудование для химобработки",
     "Chromium": "Хром",
-    "Classified Scan Databanks": "Засекреченные базы данных сканированоя",
+    "Classified Scan Databanks": "Засекреченные базы данных сканирования",
     "Classified Scan Fragment": "Засекреченные фрагменты данных сканирования",
     "Compound Shielding": "Многоступенчатая защита",
     "Conductive Ceramics": "Проводящая керамика",
@@ -702,7 +706,7 @@
     "Cracked Industrial Firmware": "Взломанные промышленные микропрограммы",
     "Datamined Wake Exceptions": "Исключения из глубинного анализа данных следа",
     "Decoded Emission Data": "Расшифрованные данные об излучении",
-    "Distorted Shield Cycle Recordings": "Поврежденные цикличные записи щита",
+    "Distorted Shield Cycle Recordings": "Повреждённые цикличные записи щита",
     "Divergent Scan Data": "Неформатные данные сканирования",
     "Eccentric Hyperspace Trajectories": "Аномальные траектории в гиперпространстве",
     "Electrochemical Arrays": "Электрохимические массивы",
@@ -717,7 +721,7 @@
     "Heat Dispersion Plate": "Теплорассеивающая пластина",
     "Heat Exchangers": "Теплообменные агрегаты",
     "Heat Vanes": "Тепловые заслонки",
-    "High Density Composites": "Высокоплотные композиты",
+    "High Density Composites": "Высокоплотностные композиты",
     "Hybrid Capacitors": "Гибридные конденсаторы",
     "Imperial Shielding": "Имперская защита",
     "Improvised Components": "Кустарные компоненты",
@@ -731,8 +735,8 @@
     "Mercury": "Ртуть",
     "Military Grade Alloys": "Сплавы военного назначения",
     "Military Supercapacitors": "Военные суперконденсаторы",
-    "Modified Consumer Firmware": "Измененные пользовательские микропрограммы",
-    "Modified Embedded Firmware": "Измененные встроенные микропрограммы",
+    "Modified Consumer Firmware": "Изменённые пользовательские микропрограммы",
+    "Modified Embedded Firmware": "Изменённые встроенные микропрограммы",
     "Molybdenum": "Молибден",
     "Nickel": "Никель",
     "Niobium": "Ниобий",
@@ -741,7 +745,7 @@
     "Phase Alloys": "Фазовые сплавы",
     "Phosphorus": "Фосфор",
     "Polymer Capacitors": "Полимерные конденсаторы",
-    "Precipitated Alloys": "Осажденные сплавы",
+    "Precipitated Alloys": "Осаждённые сплавы",
     "Proprietary Composites": "Патентованные композиты",
     "Proto Heat Radiators": "Прототипы теплоизлучателей",
     "Proto Radiolic Alloys": "Сплавы для изготовления зондов",
@@ -749,15 +753,15 @@
     "Ruthenium": "Рутений",
     "Salvaged Alloys": "Захваченные сплавы",
     "Security Firmware Patch": "Обновление для защитной микропрограммы",
-    "Selenium": "Селениум",
+    "Selenium": "Селен",
     "Shield Emitters": "Щитоизлучатели",
     "Shielding Sensors": "Сенсоры системы экранирования",
     "Specialised Legacy Firmware": "Специальные микропрограммы предыдущего поколения",
-    "Strange Wake Solutions": "Странные расчеты следа",
+    "Strange Wake Solutions": "Странные расчёты следа",
     "Sulphur": "Сера",
     "Tagged Encryption Codes": "Меченные шифровальные коды",
     "Technetium": "Технеций",
-    "Tellurium": "Теллурий",
+    "Tellurium": "Теллур",
     "Thermic Alloys": "Термические сплавы",
     "Tin": "Олово",
     "Tungsten": "Вольфрам",

src/app/index.js

@@ -1,12 +1,6 @@
-import '@babel/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import '../less/app.less';
 import Coriolis from './Coriolis';
-// import TapEventPlugin from 'react/lib/TapEventPlugin';
-// import EventPluginHub from 'react/lib/EventPluginHub';
-
-// onTouchTap not ready for primetime yet, too many issues with preventing default
-// EventPluginHub.injection.injectEventPluginsByName({ TapEventPlugin });
 
 render(<Coriolis />, document.getElementById('coriolis'));

src/app/pages/ErrorDetails.jsx

@@ -45,6 +45,9 @@ export default class ErrorDetails extends React.Component {
     return <div className='error'>
       <h1>Jameson, we have a problem..</h1>
       <h1><small>{error.message}</small></h1>
+        Import Error handling has been improved, but still isn't perfect. <br/>MOST Import failures are a result of missing modules in Coriolis, <br />OR incorrect import strings generated by third party apps. If you're seeing this page, we may have failed to handle the errors in your import correctly. Please see the data output below, specifically the 'scriptUrl:' section if it's there and then if you feel confident enough, please check the github issues page linked below and see if there is a similar issue already logged. If not, please create a new issue with the data below. If you're not confident, please ask for help on the Coriolis Channel of the EDCD Discord server.
+        <br/>
+        <br/>
       <br/>
         {importerror ? <div>If you are attempting to import a ship from EDDI or EDMC and are seeing a 'Z_BUF_ERROR' it means that the URL has not been provided correctly.  This is a common problem when using Microsoft Internet Explorer or Microsoft Edge, and you should use another browser instead.</div> : null }
       <br/>

src/app/pages/OutfittingPage.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import Perf from 'react-addons-perf';
 import { Ships } from 'coriolis-data/dist';
 import cn from 'classnames';
 import Page from './Page';
@@ -58,7 +57,6 @@ export default class OutfittingPage extends Page {
    */
   constructor(props, context) {
     super(props, context);
-    // window.Perf = Perf;
     this.state = this._initState(props, context);
     this._keyDown = this._keyDown.bind(this);
     this._exportBuild = this._exportBuild.bind(this);
@@ -679,9 +677,9 @@ export default class OutfittingPage extends Page {
   }
 
   /**
-   * Open up a window for EDDB with a shopping list of our components
+   * Open up a window for inara with a shopping list of our components
    */
-  _eddbShoppingList() {
+  _inaraShoppingList() {
     const ship = this.state.ship;
 
     const shipId = Ships[ship.id].eddbID;
@@ -694,7 +692,7 @@ export default class OutfittingPage extends Page {
 
     // Open up the relevant URL
     window.open(
-      'https://eddb.io/station?s=' + shipId + '&m=' + modIds.join(',')
+      'https://inara.cz/inapi/corisearch.php?s=' + shipId + '&m=' + modIds.join(',')
     );
   }
 
@@ -702,7 +700,9 @@ export default class OutfittingPage extends Page {
    * Generates the shopping list
    */
   _genShoppingList() {
-    this.context.showModal(<ModalShoppingList ship={this.state.ship} />);
+    this.context.showModal(<ModalShoppingList
+      ship={this.state.ship}
+      buildName={this.state.buildName} />);
   }
 
   /**
@@ -914,7 +914,7 @@ export default class OutfittingPage extends Page {
               <Download className="lg" />
             </button>
             <button
-              onClick={this._eddbShoppingList}
+              onClick={this._inaraShoppingList}
               onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_LIST')}
               onMouseOut={hide}
             >

src/app/shipyard/Calculations.js

@@ -383,7 +383,8 @@ export function shieldMetrics(ship, sys) {
 
     // Our initial regeneration comes from the SYS capacitor store, which is replenished as it goes
     // 0.6 is a magic number from FD: each 0.6 MW of energy from the power distributor recharges 1 MJ/s of regeneration
-    let capacitorDrain = (shieldGenerator.getBrokenRegenerationRate() * 0.6) - sysRechargeRate;
+    let capacitorDrain = (shieldGenerator.getBrokenRegenerationRate() * shieldGenerator.getDistDraw()) - sysRechargeRate;
+    
     let capacitorLifetime = powerDistributor.getSystemsCapacity() / capacitorDrain;
 
     let recover = 16;
@@ -399,7 +400,7 @@ export function shieldMetrics(ship, sys) {
         recover = Math.Infinity;
       } else {
         // Recover remaining shields at the rate of the power distributor's recharge
-        recover += remainingShieldToRecover / (sysRechargeRate / 0.6);
+        recover += remainingShieldToRecover / (sysRechargeRate / shieldGenerator.getDistDraw());
       }
     }
 
@@ -408,7 +409,7 @@ export function shieldMetrics(ship, sys) {
 
     // Our initial regeneration comes from the SYS capacitor store, which is replenished as it goes
     // 0.6 is a magic number from FD: each 0.6 MW of energy from the power distributor recharges 1 MJ/s of regeneration
-    capacitorDrain = (shieldGenerator.getRegenerationRate() * 0.6) - sysRechargeRate;
+    capacitorDrain = (shieldGenerator.getRegenerationRate() * shieldGenerator.getDistDraw()) - sysRechargeRate;
     capacitorLifetime = powerDistributor.getSystemsCapacity() / capacitorDrain;
 
     let recharge = 0;
@@ -424,7 +425,7 @@ export function shieldMetrics(ship, sys) {
         recharge = Math.Inf;
       } else {
         // Recharge remaining shields at the rate of the power distributor's recharge
-        recharge += remainingShieldToRecharge / (sysRechargeRate / 0.6);
+        recharge += remainingShieldToRecharge / (sysRechargeRate / shieldGenerator.getDistDraw());
       }
     }
 

src/app/shipyard/Constants.js

@@ -25,7 +25,6 @@ export const ModuleGroupToName = {
   pd: 'Power Distributor',
   s: 'Sensors',
   ft: 'Fuel Tank',
-  pas: 'Planetary Approach Suite',
 
   // Internal
   fs: 'Fuel Scoop',
@@ -58,6 +57,9 @@ export const ModuleGroupToName = {
   gmrp: 'Guardian Module Reinforcement Package',
   mahr: 'Meta Alloy Hull Reinforcement Package',
   sua: 'Supercruise Assist',
+  mlc: "Multi Limpet Controller",
+  rpl: "Repair Limpet Controller",
+  pas: 'Planetary Approach Suite',
 
   // Hard Points
   bl: 'Beam Laser',
@@ -75,11 +77,15 @@ export const ModuleGroupToName = {
   nl: 'Mine Launcher',
   ml: 'Mining Laser',
   mr: 'Missile Rack',
+  amr: 'Missile Rack (Advanced)',
   axmr: 'AX Missile Rack',
+  axmre: 'AX Missile Rack (Enhanced)',
   pa: 'Plasma Accelerator',
   po: 'Point Defence',
   mc: 'Multi-cannon',
+  advmc: 'Multi-cannon (Advanced)',
   axmc: 'AX Multi-cannon',
+  axmce: 'AX Multi-cannon (Enhanced)',
   pl: 'Pulse Laser',
   rg: 'Rail Gun',
   sb: 'Shield Booster',

src/app/shipyard/Module.js

@@ -439,6 +439,15 @@ export default class Module {
     return this.get('integrity', modified);
   }
 
+  /**
+   * Get the info of this module
+   * @param {Boolean} [modified=false] Whether to take modifications into account
+   * @return {String} the info of this module
+   */
+  getInfo(modified = false) {
+    return (modified && this.getModValue('info')) || this.info;
+  }
+
   /**
    * Get the mass of this module
    * @param {Boolean} [modified=true] Whether to take modifications into account

src/app/shipyard/ModuleSet.js

@@ -13,6 +13,19 @@ function filter(arr, maxClass, minClass, mass) {
   return arr.filter(m => m.class <= maxClass && m.class >= minClass && (m.maxmass === undefined || mass <= m.maxmass));
 }
 
+/**
+ * Filter SCO Modules to only return legal size.
+ * @param  {Array}  arr        Array of available FSD modules.
+ * @param  {number} maxSize    Maximum allowable size for SCO modules.
+ * @return {Array}             Subset of modules filtered based on legal size amd type.
+ */
+function sco_filter(arr, maxSize) {
+  return arr.filter(module => {
+    return !(module.hasOwnProperty('name') && module['name'] === "Frame Shift Drive (SCO)" && module['class'] < maxSize);
+  });
+}
+
+
 /**
  * The available module set for a specific ship
  */
@@ -41,6 +54,7 @@ export default class ModuleSet {
 
     this.standard[0] = filter(stnd.pp, maxStandardArr[0], 0, mass);  // Power Plant
     this.standard[2] = filter(stnd.fsd, maxStandardArr[2], 0, mass);  // FSD
+    this.standard[2] = sco_filter(this.standard[2], maxStandardArr[2]) // FSD - Filter SCO Modules
     this.standard[4] = filter(stnd.pd, maxStandardArr[4], 0, mass);  // Power Distributor
     this.standard[6] = filter(stnd.ft, maxStandardArr[6], 0, mass);  // Fuel Tank
     // Thrusters, filter modules by class only (to show full list of ratings for that class)

src/app/shipyard/Ship.js

@@ -10,7 +10,7 @@ import { Ships, Modifications } from 'coriolis-data/dist';
 import { chain } from 'lodash';
 const zlib = require('zlib');
 
-const UNIQUE_MODULES = ['psg', 'sg', 'bsg', 'rf', 'fs', 'fh', 'gfsb', 'dc'];
+const UNIQUE_MODULES = ['psg', 'sg', 'bsg', 'rf', 'fs', 'fh', 'gfsb', 'dc', 'ews'];
 
 // Constants for modifications struct
 const SLOT_ID_DONE = -1;

src/app/stores/Persist.js

@@ -108,9 +108,9 @@ export class Persist extends EventEmitter {
     this.matsPerGrade = matsPerGrade || {
       1: 2,
       2: 2,
-      3: 4,
+      3: 3,
       4: 4,
-      5: 10
+      5: 5
     };
     this.cmdrName = cmdrName || { selected: '', cmdrs: [] };
     this.tooltipsEnabled = tips === null ? true : tips;

src/app/utils/BlueprintFunctions.js

@@ -1,435 +1,435 @@
-import React from 'react';
-import { Modifications } from 'coriolis-data/dist';
-import { STATS_FORMATTING } from '../shipyard/StatsFormatting';
-
-/**
- * Generate a tooltip with details of a blueprint's specials
- * @param   {Object}  translate   The translate object
- * @param   {Object}  blueprint   The blueprint at the required grade
- * @param   {string}  grp         The group of the module
- * @param   {Object}  m           The module to compare with
- * @param   {string} specialName  The name of the special
- * @returns {Object}              The react components
- */
-export function specialToolTip(translate, blueprint, grp, m, specialName) {
-  const effects = [];
-  if (!blueprint || !blueprint.features) {
-    return undefined;
-  }
-  if (m) {
-    // 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) {
-        const featureDef = Modifications.modifications[feature];
-        if (featureDef && !featureDef.hidden) {
-          let symbol = '';
-          if (feature === 'jitter') {
-            symbol = '°';
-          } else if (featureDef.type === 'percentage') {
-            symbol = '%';
-          }
-          let current = m.getModValue(feature) - m.getModValue(feature, true);
-          if (featureDef.type === 'percentage') {
-            current = Math.round(current / 10) / 10;
-          } else if (featureDef.type === 'numeric') {
-            current /= 100;
-          }
-          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>
-          );
-        }
-      }
-    }
-  }
-
-  return (
-    <div>
-      <table width='100%'>
-        <tbody>
-          {effects}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-/**
- * Generate a tooltip with details of a blueprint's effects
- * @param   {Object}  translate   The translate object
- * @param   {Object}  blueprint   The blueprint at the required grade
- * @param   {Array}   engineers   The engineers supplying this blueprint
- * @param   {string}  grp         The group of the module
- * @param   {Object}  m           The module to compare with
- * @returns {Object}              The react components
- */
-export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
-  const effects = [];
-  if (!blueprint || !blueprint.features) {
-    return undefined;
-  }
-  for (const feature in blueprint.features) {
-    const featureIsBeneficial = isBeneficial(feature, blueprint.features[feature]);
-    const featureDef = Modifications.modifications[feature];
-    if (!featureDef.hidden) {
-      let symbol = '';
-      if (feature === 'jitter') {
-        symbol = '°';
-      } else if (featureDef.type === 'percentage') {
-        symbol = '%';
-      }
-      let lowerBound = blueprint.features[feature][0];
-      let upperBound = blueprint.features[feature][1];
-      if (featureDef.type === 'percentage') {
-        lowerBound = Math.round(lowerBound * 1000) / 10;
-        upperBound = Math.round(upperBound * 1000) / 10;
-      }
-      const lowerIsBeneficial  = isValueBeneficial(feature, lowerBound);
-      const upperIsBeneficial  = isValueBeneficial(feature, upperBound);
-      if (m) {
-        // We have a module - add in the current value
-        let current = m.getModValue(feature);
-        if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
-          current = Math.round(current / 10) / 10;
-        } else if (featureDef.type === 'numeric') {
-          current /= 100;
-        }
-        const currentIsBeneficial  = isValueBeneficial(feature, current);
-        effects.push(
-          <tr key={feature}>
-            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
-            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
-            <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
-            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
-          </tr>
-        );
-      } else {
-        // We do not have a module, no value
-        effects.push(
-          <tr key={feature}>
-            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
-            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
-            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
-          </tr>
-        );
-      }
-    }
-  }
-  if (m) {
-    // Because we have a module add in any benefits that aren't part of the primary blueprint
-    for (const feature in m.mods) {
-      if (!blueprint.features[feature]) {
-        const featureDef = Modifications.modifications[feature];
-        if (featureDef && !featureDef.hidden) {
-          let symbol = '';
-          if (feature === 'jitter') {
-            symbol = '°';
-          } else if (featureDef.type === 'percentage') {
-            symbol = '%';
-          }
-          let current = m.getModValue(feature);
-          if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
-            current = Math.round(current / 10) / 10;
-          } else if (featureDef.type === 'numeric') {
-            current /= 100;
-          }
-          const currentIsBeneficial  = isValueBeneficial(feature, current);
-          effects.push(
-            <tr key={feature}>
-              <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>
-          );
-        }
-      }
-    }
-
-    // We also add in any benefits from specials that aren't covered above
-    if (m.blueprint && m.blueprint.special) {
-      for (const feature in Modifications.modifierActions[m.blueprint.special.edname]) {
-        if (!blueprint.features[feature] && !m.mods.feature) {
-          const featureDef = Modifications.modifications[feature];
-          if (featureDef && !featureDef.hidden) {
-            let symbol = '';
-            if (feature === 'jitter') {
-              symbol = '°';
-            } else if (featureDef.type === 'percentage') {
-              symbol = '%';
-            }
-            let current = m.getModValue(feature);
-            if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
-              current = Math.round(current / 10) / 10;
-            } else if (featureDef.type === 'numeric') {
-              current /= 100;
-            }
-            const currentIsBeneficial  = isValueBeneficial(feature, current);
-            effects.push(
-              <tr key={feature}>
-                <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>
-            );
-          }
-        }
-      }
-    }
-  }
-
-  let components;
-  if (!m) {
-    components = [];
-    for (const component in blueprint.components) {
-      components.push(
-        <tr key={component}>
-          <td style={{ textAlign: 'left' }}>{translate(component)}</td>
-          <td style={{ textAlign: 'right' }}>{blueprint.components[component]}</td>
-        </tr>
-      );
-    }
-  }
-
-  let engineersList;
-  if (engineers) {
-    engineersList = [];
-    for (const engineer of engineers) {
-      engineersList.push(
-        <tr key={engineer}>
-          <td style={{ textAlign: 'left' }}>{engineer}</td>
-        </tr>
-      );
-    }
-  }
-
-  return (
-    <div>
-      <table width='100%'>
-        <thead>
-          <tr>
-            <td>{translate('feature')}</td>
-            <td>{translate('worst')}</td>
-            {m ? <td>{translate('current')}</td> : null }
-            <td>{translate('best')}</td>
-          </tr>
-        </thead>
-        <tbody>
-          {effects}
-        </tbody>
-      </table>
-      { components ?  <table width='100%'>
-        <thead>
-          <tr>
-            <td>{translate('component')}</td>
-            <td>{translate('amount')}</td>
-          </tr>
-        </thead>
-        <tbody>
-          {components}
-        </tbody>
-      </table> : null }
-      { engineersList ? <table width='100%'>
-        <thead>
-          <tr>
-            <td>{translate('engineers')}</td>
-          </tr>
-        </thead>
-        <tbody>
-          {engineersList}
-        </tbody>
-      </table>  : null }
-    </div>
-  );
-}
-
-/**
- * Is this blueprint feature beneficial?
- * @param   {string}  feature    The name of the feature
- * @param   {array}   values     The value of the feature
- * @returns {boolean}            True if this feature is beneficial
- */
-export function isBeneficial(feature, values) {
-  const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0));
-  if (Modifications.modifications[feature].higherbetter) {
-    return !fact;
-  } else {
-    return fact;
-  }
-}
-
-/**
- * Is this feature value beneficial?
- * @param   {string}  feature    The name of the feature
- * @param   {number}  value      The value of the feature
- * @returns {boolean}            True if this value is beneficial
- */
-export function isValueBeneficial(feature, value) {
-  if (Modifications.modifications[feature].higherbetter) {
-    return value > 0;
-  } else {
-    return value < 0;
-  }
-}
-
-/**
- * Is the change as shown beneficial?
- * @param {string} feature The name of the feature
- * @param {number} value The value of the feature as percentage change
- * @returns True if the value is beneficial
- */
-export function isChangeValueBeneficial(feature, value) {
-  let changeHigherBetter = STATS_FORMATTING[feature].higherbetter;
-  if (changeHigherBetter === undefined) {
-    return isValueBeneficial(feature, value);
-  }
-
-  if (changeHigherBetter) {
-    return value > 0;
-  } else {
-    return value < 0;
-  }
-}
-
-/**
- * Get a blueprint with a given name and an optional module
- * @param   {string} name    The name of the blueprint
- * @param   {Object} module  The module for which to obtain this blueprint
- * @returns {Object}         The matching blueprint
- */
-export function getBlueprint(name, module) {
-  // Start with a copy of the blueprint
-  const findMod = val => Object.keys(Modifications.blueprints).find(elem => elem.toString().toLowerCase().search(val.toString().toLowerCase().replace(/(OutfittingFieldType_|persecond)/igm, '')) >= 0);
-  const found = Modifications.blueprints[findMod(name)];
-  if (!found || !found.fdname) {
-    return {};
-  }
-  const blueprint = JSON.parse(JSON.stringify(found));
-  return blueprint;
-}
-
-/**
- * Provide 'percent' primary modifications
- * @param {Object}      ship      The ship for which to perform the modifications
- * @param {Object}      m         The module for which to perform the modifications
- * @param {Number} percent The percent to set values to of full.
- */
-export function setPercent(ship, m, percent) {
-  ship.clearModifications(m);
-  // Pick given value as multiplier
-  const mult = percent / 100;
-  setQualityCB(m.blueprint, mult, (featureName, value) => ship.setModification(m, featureName, value));
-}
-
-/**
- * Sets the blueprint quality and fires a callback for each property affected.
- * @param {Object}   blueprint  The ship for which to perform the modifications
- * @param {Number}   quality    The quality to apply - float number 0 to 1.
- * @param {Function} cb         The Callback to run for each property. Function (featureName, value)
- */
-export function setQualityCB(blueprint, quality, cb) {
-  // Pick given value as multiplier
-  const features = blueprint.grades[blueprint.grade].features;
-  for (const featureName in features) {
-    let value;
-    if (Modifications.modifications[featureName].higherbetter) {
-      // Higher is better, but is this making it better or worse?
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
-        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * quality);
-      } else {
-        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * quality);
-      }
-    } else {
-      // Higher is worse, but is this making it better or worse?
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
-        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * quality);
-      } else {
-        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * quality);
-      }
-    }
-
-    if (Modifications.modifications[featureName].type == 'percentage') {
-      value = value * 10000;
-    } else if (Modifications.modifications[featureName].type == 'numeric') {
-      value = value * 100;
-    }
-
-    cb(featureName, value);
-  }
-}
-
-/**
- * Provide 'random' primary modifications
- * @param {Object}      ship      The ship for which to perform the modifications
- * @param {Object}      m         The module for which to perform the modifications
- */
-export function setRandom(ship, m) {
-  // Pick a single value for our randomness
-  setPercent(ship, m, Math.random() * 100);
-}
-
-/**
- * Provide 'percent' primary query
- * @param {Object}      m         The module for which to perform the query
- * @returns {Number} percent The percentage indicator of current applied values.
- */
-export function getPercent(m) {
-  let result = null;
-  const features = m.blueprint.grades[m.blueprint.grade].features;
-  for (const featureName in features) {
-    if (features[featureName][0] === features[featureName][1]) {
-      continue;
-    }
-
-    let value = _getValue(m, featureName);
-    let mult;
-    if (Modifications.modifications[featureName].higherbetter) {
-      // Higher is better, but is this making it better or worse?
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
-        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
-      } else {
-        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
-      }
-    } else {
-      // Higher is worse, but is this making it better or worse?
-      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
-        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
-      } else {
-        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
-      }
-    }
-
-    if (result && result != mult) {
-      return null;
-    } else if (result != mult) {
-      result = mult;
-    }
-  }
-
-  return result;
-}
-
-/**
- * Query a feature value
- * @param {Object}      m             The module for which to perform the query
- * @param {string}      featureName   The feature being queried
- * @returns {number}  The value of the modification as a %
- */
-function _getValue(m, featureName) {
-  if (Modifications.modifications[featureName].type == 'percentage') {
-    return m.getModValue(featureName, true) / 10000;
-  } else if (Modifications.modifications[featureName].type == 'numeric') {
-    return m.getModValue(featureName, true) / 100;
-  } else {
-    return m.getModValue(featureName, true);
-  }
-}
+import React from 'react';
+import { Modifications } from 'coriolis-data/dist';
+import { STATS_FORMATTING } from '../shipyard/StatsFormatting';
+
+/**
+ * Generate a tooltip with details of a blueprint's specials
+ * @param   {Object}  translate   The translate object
+ * @param   {Object}  blueprint   The blueprint at the required grade
+ * @param   {string}  grp         The group of the module
+ * @param   {Object}  m           The module to compare with
+ * @param   {string} specialName  The name of the special
+ * @returns {Object}              The react components
+ */
+export function specialToolTip(translate, blueprint, grp, m, specialName) {
+  const effects = [];
+  if (!blueprint || !blueprint.features) {
+    return undefined;
+  }
+  if (m) {
+    // 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) {
+        const featureDef = Modifications.modifications[feature];
+        if (featureDef && !featureDef.hidden) {
+          let symbol = '';
+          if (feature === 'jitter') {
+            symbol = '°';
+          } else if (featureDef.type === 'percentage') {
+            symbol = '%';
+          }
+          let current = m.getModValue(feature) - m.getModValue(feature, true);
+          if (featureDef.type === 'percentage') {
+            current = Math.round(current / 10) / 10;
+          } else if (featureDef.type === 'numeric') {
+            current /= 100;
+          }
+          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>
+          );
+        }
+      }
+    }
+  }
+
+  return (
+    <div>
+      <table width='100%'>
+        <tbody>
+          {effects}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * Generate a tooltip with details of a blueprint's effects
+ * @param   {Object}  translate   The translate object
+ * @param   {Object}  blueprint   The blueprint at the required grade
+ * @param   {Array}   engineers   The engineers supplying this blueprint
+ * @param   {string}  grp         The group of the module
+ * @param   {Object}  m           The module to compare with
+ * @returns {Object}              The react components
+ */
+export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
+  const effects = [];
+  if (!blueprint || !blueprint.features) {
+    return undefined;
+  }
+  for (const feature in blueprint.features) {
+    const featureIsBeneficial = isBeneficial(feature, blueprint.features[feature]);
+    const featureDef = Modifications.modifications[feature];
+    if (!featureDef.hidden) {
+      let symbol = '';
+      if (feature === 'jitter') {
+        symbol = '°';
+      } else if (featureDef.type === 'percentage') {
+        symbol = '%';
+      }
+      let lowerBound = blueprint.features[feature][0];
+      let upperBound = blueprint.features[feature][1];
+      if (featureDef.type === 'percentage') {
+        lowerBound = Math.round(lowerBound * 1000) / 10;
+        upperBound = Math.round(upperBound * 1000) / 10;
+      }
+      const lowerIsBeneficial  = isValueBeneficial(feature, lowerBound);
+      const upperIsBeneficial  = isValueBeneficial(feature, upperBound);
+      if (m) {
+        // We have a module - add in the current value
+        let current = m.getModValue(feature);
+        if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+          current = Math.round(current / 10) / 10;
+        } else if (featureDef.type === 'numeric') {
+          current /= 100;
+        }
+        const currentIsBeneficial  = isValueBeneficial(feature, current);
+        effects.push(
+          <tr key={feature}>
+            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
+            <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
+            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
+          </tr>
+        );
+      } else {
+        // We do not have a module, no value
+        effects.push(
+          <tr key={feature}>
+            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
+            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
+          </tr>
+        );
+      }
+    }
+  }
+  if (m) {
+    // Because we have a module add in any benefits that aren't part of the primary blueprint
+    for (const feature in m.mods) {
+      if (!blueprint.features[feature]) {
+        const featureDef = Modifications.modifications[feature];
+        if (featureDef && !featureDef.hidden) {
+          let symbol = '';
+          if (feature === 'jitter') {
+            symbol = '°';
+          } else if (featureDef.type === 'percentage') {
+            symbol = '%';
+          }
+          let current = m.getModValue(feature);
+          if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+            current = Math.round(current / 10) / 10;
+          } else if (featureDef.type === 'numeric') {
+            current /= 100;
+          }
+          const currentIsBeneficial  = isValueBeneficial(feature, current);
+          effects.push(
+            <tr key={feature}>
+              <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>
+          );
+        }
+      }
+    }
+
+    // We also add in any benefits from specials that aren't covered above
+    if (m.blueprint && m.blueprint.special) {
+      for (const feature in Modifications.modifierActions[m.blueprint.special.edname]) {
+        if (!blueprint.features[feature] && !m.mods.feature) {
+          const featureDef = Modifications.modifications[feature];
+          if (featureDef && !featureDef.hidden) {
+            let symbol = '';
+            if (feature === 'jitter') {
+              symbol = '°';
+            } else if (featureDef.type === 'percentage') {
+              symbol = '%';
+            }
+            let current = m.getModValue(feature);
+            if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+              current = Math.round(current / 10) / 10;
+            } else if (featureDef.type === 'numeric') {
+              current /= 100;
+            }
+            const currentIsBeneficial  = isValueBeneficial(feature, current);
+            effects.push(
+              <tr key={feature}>
+                <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>
+            );
+          }
+        }
+      }
+    }
+  }
+
+  let components;
+  if (!m) {
+    components = [];
+    for (const component in blueprint.components) {
+      components.push(
+        <tr key={component}>
+          <td style={{ textAlign: 'left' }}>{translate(component)}</td>
+          <td style={{ textAlign: 'right' }}>{blueprint.components[component]}</td>
+        </tr>
+      );
+    }
+  }
+
+  let engineersList;
+  if (engineers) {
+    engineersList = [];
+    for (const engineer of engineers) {
+      engineersList.push(
+        <tr key={engineer}>
+          <td style={{ textAlign: 'left' }}>{engineer}</td>
+        </tr>
+      );
+    }
+  }
+
+  return (
+    <div>
+      <table width='100%'>
+        <thead>
+          <tr>
+            <td>{translate('feature')}</td>
+            <td>{translate('worst')}</td>
+            {m ? <td>{translate('current')}</td> : null }
+            <td>{translate('best')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {effects}
+        </tbody>
+      </table>
+      { components ?  <table width='100%'>
+        <thead>
+          <tr>
+            <td>{translate('component')}</td>
+            <td>{translate('amount')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {components}
+        </tbody>
+      </table> : null }
+      { engineersList ? <table width='100%'>
+        <thead>
+          <tr>
+            <td>{translate('engineers')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {engineersList}
+        </tbody>
+      </table>  : null }
+    </div>
+  );
+}
+
+/**
+ * Is this blueprint feature beneficial?
+ * @param   {string}  feature    The name of the feature
+ * @param   {array}   values     The value of the feature
+ * @returns {boolean}            True if this feature is beneficial
+ */
+export function isBeneficial(feature, values) {
+  const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0));
+  if (Modifications.modifications[feature].higherbetter) {
+    return !fact;
+  } else {
+    return fact;
+  }
+}
+
+/**
+ * Is this feature value beneficial?
+ * @param   {string}  feature    The name of the feature
+ * @param   {number}  value      The value of the feature
+ * @returns {boolean}            True if this value is beneficial
+ */
+export function isValueBeneficial(feature, value) {
+  if (Modifications.modifications[feature].higherbetter) {
+    return value > 0;
+  } else {
+    return value < 0;
+  }
+}
+
+/**
+ * Is the change as shown beneficial?
+ * @param {string} feature The name of the feature
+ * @param {number} value The value of the feature as percentage change
+ * @returns True if the value is beneficial
+ */
+export function isChangeValueBeneficial(feature, value) {
+  let changeHigherBetter = STATS_FORMATTING[feature].higherbetter;
+  if (changeHigherBetter === undefined) {
+    return isValueBeneficial(feature, value);
+  }
+
+  if (changeHigherBetter) {
+    return value > 0;
+  } else {
+    return value < 0;
+  }
+}
+
+/**
+ * Get a blueprint with a given name and an optional module
+ * @param   {string} name    The name of the blueprint
+ * @param   {Object} module  The module for which to obtain this blueprint
+ * @returns {Object}         The matching blueprint
+ */
+export function getBlueprint(name, module) {
+  // Start with a copy of the blueprint
+  const findMod = val => Object.keys(Modifications.blueprints).find(elem => elem.toString().toLowerCase().search(val.toString().toLowerCase().replace(/(OutfittingFieldType_|persecond)/igm, '')) >= 0);
+  const found = Modifications.blueprints[findMod(name)];
+  if (!found || !found.fdname) {
+    return {};
+  }
+  const blueprint = JSON.parse(JSON.stringify(found));
+  return blueprint;
+}
+
+/**
+ * Provide 'percent' primary modifications
+ * @param {Object}      ship      The ship for which to perform the modifications
+ * @param {Object}      m         The module for which to perform the modifications
+ * @param {Number} percent The percent to set values to of full.
+ */
+export function setPercent(ship, m, percent) {
+  ship.clearModifications(m);
+  // Pick given value as multiplier
+  const mult = percent / 100;
+  setQualityCB(m.blueprint, mult, (featureName, value) => ship.setModification(m, featureName, value));
+}
+
+/**
+ * Sets the blueprint quality and fires a callback for each property affected.
+ * @param {Object}   blueprint  The ship for which to perform the modifications
+ * @param {Number}   quality    The quality to apply - float number 0 to 1.
+ * @param {Function} cb         The Callback to run for each property. Function (featureName, value)
+ */
+export function setQualityCB(blueprint, quality, cb) {
+  // Pick given value as multiplier
+  const features = blueprint.grades[blueprint.grade].features;
+  for (const featureName in features) {
+    let value;
+    if (Modifications.modifications[featureName].higherbetter) {
+      // Higher is better, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * quality);
+      } else {
+        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * quality);
+      }
+    } else {
+      // Higher is worse, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * quality);
+      } else {
+        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * quality);
+      }
+    }
+
+    if (Modifications.modifications[featureName].type == 'percentage') {
+      value = value * 10000;
+    } else if (Modifications.modifications[featureName].type == 'numeric') {
+      value = value * 100;
+    }
+
+    cb(featureName, value);
+  }
+}
+
+/**
+ * Provide 'random' primary modifications
+ * @param {Object}      ship      The ship for which to perform the modifications
+ * @param {Object}      m         The module for which to perform the modifications
+ */
+export function setRandom(ship, m) {
+  // Pick a single value for our randomness
+  setPercent(ship, m, Math.random() * 100);
+}
+
+/**
+ * Provide 'percent' primary query
+ * @param {Object}      m         The module for which to perform the query
+ * @returns {Number} percent The percentage indicator of current applied values.
+ */
+export function getPercent(m) {
+  let result = null;
+  const features = m.blueprint.grades[m.blueprint.grade].features;
+  for (const featureName in features) {
+    if (features[featureName][0] === features[featureName][1]) {
+      continue;
+    }
+
+    let value = _getValue(m, featureName);
+    let mult;
+    if (Modifications.modifications[featureName].higherbetter) {
+      // Higher is better, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
+      } else {
+        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
+      }
+    } else {
+      // Higher is worse, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
+      } else {
+        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
+      }
+    }
+
+    if (result && result != mult) {
+      return null;
+    } else if (result != mult) {
+      result = mult;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Query a feature value
+ * @param {Object}      m             The module for which to perform the query
+ * @param {string}      featureName   The feature being queried
+ * @returns {number}  The value of the modification as a %
+ */
+function _getValue(m, featureName) {
+  if (Modifications.modifications[featureName].type == 'percentage') {
+    return m.getModValue(featureName, true) / 10000;
+  } else if (Modifications.modifications[featureName].type == 'numeric') {
+    return m.getModValue(featureName, true) / 100;
+  } else {
+    return m.getModValue(featureName, true);
+  }
+}

src/app/utils/CompanionApiUtils.js

@@ -34,6 +34,7 @@ export const SHIP_FD_NAME_TO_CORIOLIS_NAME = {
   'Krait_Light': 'krait_phantom',
   'Orca': 'orca',
   'Python': 'python',
+  'Python_nx': 'python_nx',
   'SideWinder': 'sidewinder',
   'Type6': 'type_6_transporter',
   'Type7': 'type_7_transport',

src/app/utils/JournalUtils.js

@@ -6,6 +6,22 @@ import { Modules } from 'coriolis-data/dist';
 import { Modifications } from 'coriolis-data/dist';
 import { getBlueprint, setQualityCB } from './BlueprintFunctions';
 
+/**
+ * Check if an imported module is valid
+ * @param {Object} module the module to check
+ * @param {Object} moduleType the type of module to check
+ * @return {boolean} true if the module is valid
+ */
+function _isValidImportedModule(module, moduleType) {
+  // First of all, has the _moduleFromFdName function returned 'null'?
+  if (!module){
+    return false
+  }
+  else {
+    return true
+  }
+}
+
 /**
  * Obtain a module given its FD Name
  * @param {string} fdname the FD Name of the module
@@ -98,49 +114,90 @@ export function shipFromLoadoutJSON(json) {
         if (module.Engineering) _addModifications(ship.bulkheads.m, module.Engineering.Modifiers, module.Engineering.Quality, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
         break;
       case 'powerplant':
-        const powerplant = _moduleFromFdName(module.Item);
+        let powerplant = _moduleFromFdName(module.Item);
+        // Check the powerplant returned is valid
+        if (!_isValidImportedModule(powerplant, 'powerplant'))
+        { 
+          powerplant = _moduleFromFdName('Int_Missing_Powerplant');
+          module.Engineering = null;
+        }
         ship.use(ship.standard[0], powerplant, true);
         ship.standard[0].enabled = module.On;
         ship.standard[0].priority = module.Priority;
         if (module.Engineering) _addModifications(powerplant, module.Engineering.Modifiers, module.Engineering.Quality, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
         break;
       case 'mainengines':
-        const thrusters = _moduleFromFdName(module.Item);
+        let thrusters = _moduleFromFdName(module.Item);
+        // Check the thrusters returned is valid
+        if (!_isValidImportedModule(thrusters, 'thrusters'))
+        { 
+          thrusters = _moduleFromFdName('Int_Missing_Engine');
+          module.Engineering = null;
+        }
         ship.use(ship.standard[1], thrusters, true);
         ship.standard[1].enabled = module.On;
         ship.standard[1].priority = module.Priority;
         if (module.Engineering) _addModifications(thrusters, module.Engineering.Modifiers, module.Engineering.Quality, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
         break;
       case 'frameshiftdrive':
-        const frameshiftdrive = _moduleFromFdName(module.Item);
+        let frameshiftdrive = _moduleFromFdName(module.Item);
+        // Check the frameshiftdrive returned is valid
+        if (!_isValidImportedModule(frameshiftdrive, 'frameshiftdrive'))
+        { 
+          frameshiftdrive = _moduleFromFdName('Int_Missing_Hyperdrive');
+          module.Engineering = null;
+        }
         ship.use(ship.standard[2], frameshiftdrive, true);
         ship.standard[2].enabled = module.On;
         ship.standard[2].priority = module.Priority;
         if (module.Engineering)  _addModifications(frameshiftdrive, module.Engineering.Modifiers, module.Engineering.Quality, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
         break;
       case 'lifesupport':
-        const lifesupport = _moduleFromFdName(module.Item);
+        let lifesupport = _moduleFromFdName(module.Item);
+        // Check the lifesupport returned is valid
+        if (!_isValidImportedModule(lifesupport, 'lifesupport'))
+        { 
+          lifesupport = _moduleFromFdName('Int_Missing_LifeSupport');
+          module.Engineering = null;
+        }
         ship.use(ship.standard[3], lifesupport, true);
         ship.standard[3].enabled = module.On === true;
         ship.standard[3].priority = module.Priority;
         if (module.Engineering) _addModifications(lifesupport, module.Engineering.Modifiers, module.Engineering.Quality, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
         break;
       case 'powerdistributor':
-        const powerdistributor = _moduleFromFdName(module.Item);
+        let powerdistributor = _moduleFromFdName(module.Item);
+        // Check the powerdistributor returned is valid
+        if (!_isValidImportedModule(powerdistributor, 'powerdistributor'))
+        { 
+          powerdistributor = _moduleFromFdName('Int_Missing_PowerDistributor'); 
+          module.Engineering = null;
+        }
         ship.use(ship.standard[4], powerdistributor, true);
         ship.standard[4].enabled = module.On;
         ship.standard[4].priority = module.Priority;
         if (module.Engineering) _addModifications(powerdistributor, module.Engineering.Modifiers, module.Engineering.Quality, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
         break;
       case 'radar':
-        const sensors = _moduleFromFdName(module.Item);
+        let sensors = _moduleFromFdName(module.Item);
+        // Check the sensors returned is valid
+        if (!_isValidImportedModule(sensors, 'sensors'))
+        { 
+          sensors = _moduleFromFdName('Int_Missing_Sensors');
+          module.Engineering = null;
+        }
         ship.use(ship.standard[5], sensors, true);
         ship.standard[5].enabled = module.On;
         ship.standard[5].priority = module.Priority;
         if (module.Engineering) _addModifications(sensors, module.Engineering.Modifiers, module.Engineering.Quality, module.Engineering.BlueprintName, module.Engineering.Level, module.Engineering.ExperimentalEffect);
         break;
       case 'fueltank':
-        const fueltank = _moduleFromFdName(module.Item);
+        let fueltank = _moduleFromFdName(module.Item);
+        // Check the fueltank returned is valid
+        if (!_isValidImportedModule(fueltank, 'fueltank'))
+        { 
+          fueltank = _moduleFromFdName('Int_Missing_FuelTank');
+        }
         ship.use(ship.standard[6], fueltank, true);
         ship.standard[6].enabled = true;
         ship.standard[6].priority = 0;
@@ -170,10 +227,27 @@ export function shipFromLoadoutJSON(json) {
           // This can happen with old imports that don't contain new hardpoints
         } 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 });
+          // Check the hardpoint module returned is valid
+          if (!_isValidImportedModule(hardpoint, 'hardpoint')){ 
+            // Check if it's a Utility or Hardpoint
+            if (hardpointSlot.Slot.toLowerCase().search(/tiny/))
+            {
+              // Use the missing_hardpoint module 'Missing Hardpoint' which will inform the user that the module is missing
+              hardpoint = _moduleFromFdName('Hpt_Missing_Hardpoint');
+            }
+            else {
+              // Use the missing_hardpoint module 'Missing Utility' which will inform the user that the module is missing
+              hardpoint = _moduleFromFdName('Hpt_Missing_Utility');
+            }
+            ship.use(ship.hardpoints[hardpointArrayNum], hardpoint, true);
+            ship.hardpoints[hardpointArrayNum].enabled = hardpointSlot.On;
+            ship.hardpoints[hardpointArrayNum].priority = hardpointSlot.Priority;
+          } else {
+            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++;
       }
@@ -187,13 +261,17 @@ export function shipFromLoadoutJSON(json) {
       continue;
     }
     const isMilitary = isNaN(shipTemplate.slots.internal[i]) ? shipTemplate.slots.internal[i].name == 'Military' : false;
+    const isPlanetary = isNaN(shipTemplate.slots.internal[i]) ? shipTemplate.slots.internal[i].name == 'PlanetaryApproachSuite' : false;
 
-    // The internal slot might be a standard or a military slot.  Military slots have a different naming system
+    // The internal slot might be a standard or a military slot, or a planetary slot.  Military and Planetary 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 if (isPlanetary) {
+      const internalName = 'PlanetaryApproachSuite';
+      internalSlot = json.Modules.find(elem => elem.Slot.toLowerCase() === internalName.toLowerCase());
     } else {
       // Slot numbers are not contiguous so handle skips.
       for (; internalSlot === null && internalSlotNum < 99; internalSlotNum++) {
@@ -212,11 +290,22 @@ export function shipFromLoadoutJSON(json) {
       // 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 });
+      let internal = _moduleFromFdName(internalJson.Item);
+      // Check the internal module returned is valid
+      if (!_isValidImportedModule(internal, 'internal'))
+      { 
+        internal = _moduleFromFdName('Int_Missing_Module');
+        ship.use(ship.internal[i], internal, true);
+        ship.internal[i].enabled = internalJson.On === true;
+        ship.internal[i].priority = internalJson.Priority;
+        //throw 'Unknown internal module: "' + module.Item + '"'; 
+      }
+      else {
+        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 });
+      }
     }
   }
 

src/index.ejs

@@ -40,22 +40,12 @@
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
-
       gtag('config', 'UA-55840909-18');
     </script>
+  </head>
+  <body style="background-color:#000;">
+    <section id="coriolis">
 
-
-
-    <!-- Bugsnag -->
-        <script src="https://d2wy8f7a9ursnm.cloudfront.net/v5.0.0/bugsnag.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>
-      </body>
-    </html>
+    </section>
+  </body>
+</html>

src/less/app.less

@@ -183,4 +183,4 @@ footer {
 .announcement {
   border: 1px @secondary solid;
   padding: 10px;
-}
+}

src/less/modal.less

@@ -41,24 +41,67 @@
   h2 {
     margin: 0;
   }
-}
 
-textarea {
-  background: @primary-bg;
-  border: none;
-  outline: none;
-  color: @primary-disabled;
-
-  &.json {
-    display:block;
-    width:100%;
-    min-height: 10em;
-    resize: vertical;
-    user-select: text;
-    margin:2em 0;
+  h4 {
+    text-transform: uppercase;
+    font-family: @fStandard;
+    font-weight: normal;
+    font-size: 1em;
+    margin: 1em;
+    color: @warning;
   }
-}
 
-.dismiss {
-  background-color: @primary-bg;
-}
+  p {
+    margin: 1em;
+    text-wrap: pretty;
+  }
+
+  button {
+    clear: bottom;
+    margin: 5px;
+  }
+
+  hr {
+    clear: both;
+    margin: 15px, 10px, 15px, 10px;
+    padding: top, 5;
+  }
+
+  select {
+    clear: bottom;
+    margin: 10px;
+    width: 50%;
+  }
+
+  label {
+    clear: bottom;
+    margin: 20px;
+    color: @primary;
+  }
+
+  .groll {
+    width: 6%;
+    margin: 5px;
+    text-align: center;
+  }
+
+  textarea {
+    background: @primary-bg;
+    border: none;
+    outline: none;
+    color: @primary-disabled;
+
+    &.json {
+      display:block;
+      width:100%;
+      min-height: 10em;
+      resize: vertical;
+      user-select: text;
+      margin:1em 0;
+    }
+  }
+
+  .dismiss {
+    background-color: @primary-bg;
+  }
+}

src/migrate.html

@@ -24,12 +24,6 @@
       type="image/png"
       href="/192x192.png"
     />
-    <!-- Bugsnag -->
-    <script src="https://d2wy8f7a9ursnm.cloudfront.net/v5.0.0/bugsnag.min.js"></script>
-    <script>
-      window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.BUGSNAG_VERSION || undefined})
-      window.Bugsnag = window.bugsnagClient
-    </script>
 
     <!-- Apple/iOS headers -->
     <meta name="apple-mobile-web-app-capable" content="yes" />

src/sw.js

@@ -1,46 +1,54 @@
+import {precacheAndRoute, createHandlerBoundToURL} from 'workbox-precaching';
+import {NavigationRoute, registerRoute} from 'workbox-routing';
+import {StaleWhileRevalidate, CacheFirst} from 'workbox-strategies';
+import {CacheableResponsePlugin} from 'workbox-cacheable-response'
+import {ExpirationPlugin} from 'workbox-expiration';
+
 console.log('Hello from sw.js');
 
-if (workbox) {
-  console.log('Yay! Workbox is loaded 🎉');
-  workbox.precaching.precacheAndRoute(self.__precacheManifest);
+// See https://developer.chrome.com/docs/workbox/migration/migrate-from-v4/ for guide to changes made
+console.log('Yay! Workbox is loaded 🎉');
+precacheAndRoute(self.__WB_MANIFEST || []);
 
-  workbox.routing.registerNavigationRoute('/index.html');
+const handler = createHandlerBoundToURL('/index.html');
+const navigationRoute = new NavigationRoute(handler
+  // , {allowlist: [...], denylist: [...],}
+);
+registerRoute(navigationRoute);
 
-  workbox.routing.registerRoute(
-    /\.(?:png|jpg|jpeg|svg|gif)$/,
-    new workbox.strategies.CacheFirst({
-      plugins: [
-        new workbox.cacheableResponse.Plugin({
-          statuses: [0, 200]
-        })
-      ]
-    })
-  );
 
-  workbox.routing.registerRoute(
-    /\.(?:js|css)$/,
-    new workbox.strategies.StaleWhileRevalidate({
-      cacheName: 'static-resources',
-    })
-  );
+registerRoute(
+  /\.(?:png|jpg|jpeg|svg|gif)$/,
+  new CacheFirst({
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200]
+      })
+    ]
+  })
+);
 
-  workbox.routing.registerRoute(
-    new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
-    new workbox.strategies.CacheFirst({
-      cacheName: 'google-fonts',
-      plugins: [
-        new workbox.expiration.Plugin({
-          maxEntries: 30
-        }),
-        new workbox.cacheableResponse.Plugin({
-          statuses: [0, 200]
-        })
-      ]
-    })
-  );
-} else {
-  console.log('Boo! Workbox didn\'t load 😬');
-}
+registerRoute(
+  /\.(?:js|css)$/,
+  new StaleWhileRevalidate({
+    cacheName: 'static-resources',
+  })
+);
+
+registerRoute(
+  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
+  new CacheFirst({
+    cacheName: 'google-fonts',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 30
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200]
+      })
+    ]
+  })
+);
 
 self.addEventListener('message', event => {
   if (!event.data) {

webpack.common.js

@@ -0,0 +1,81 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkgJson = require('./package');
+const buildDate = new Date();
+
+module.exports = {
+  entry: {
+    main: './src/app/index.js'
+  },
+  resolve: {
+    // When requiring, you don't need to add these extensions
+    extensions: ['.js', '.jsx', '.json', '.less'],
+    fallback: {
+      // Consider replacing brwoserify-zlib-next c. 2016 package with pako, which it's just a wrapper for
+      /* Some of these polyfills may not even be necessary, and were added in an attempt to deal with build issues
+            while upgrading to Webpack v5 */
+      "zlib": require.resolve("browserify-zlib-next"),
+      "assert": require.resolve("assert/"),
+      "buffer": require.resolve("buffer/"),
+      "stream": require.resolve("stream-browserify"),
+      /*
+      "url": require.resolve("url/"),
+      "path": require.resolve("path-browserify"),
+      "crypto": require.resolve("crypto-browserify"),
+      "os": require.resolve("os-browserify/browser"),
+      "https": require.resolve("https-browserify"),
+      "http": require.resolve("stream-http"),
+      "vm": require.resolve("vm-browserify"),
+      "constants": require.resolve("constants-browserify"),
+      // "fs": false
+      */
+    }
+  },
+  optimization: {
+    usedExports: true
+  },
+  output: {
+    path: path.join(__dirname, 'build'),
+    chunkFilename: '[name].bundle.js',
+    // assetModuleFilename: '[contenthash][ext]',
+    publicPath: '/',
+    clean: true // we already do rimraf on the build dir, but this should obviate that
+  },
+  plugins: [
+    // new webpack.optimize.CommonsChunkPlugin({
+    //   name: 'lib',
+    //   filename: 'lib.js'
+    // }),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.join(__dirname, 'src/index.ejs'),
+      version: pkgJson.version,
+      // gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
+      date: buildDate,
+    }),
+    new MiniCssExtractPlugin({
+        filename: 'app.css',
+    }),
+    // Solve missing Buffer polyfill that breaks module engineering
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
+  module: {
+    rules: [
+      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader' ]},
+      {
+        test: /\.less$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ]
+      },
+      { test: /\.(js|jsx)$/, use: ['babel-loader'], include: path.join(__dirname, 'src') },
+      {
+        test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
+        type: 'asset/resource',
+      },
+    ]
+  }
+};

webpack.config.dev.js

@@ -1,69 +1,27 @@
-const path = require('path');
 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();
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
 
-module.exports = {
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const WebpackNotifierPlugin = require('webpack-notifier');
+
+module.exports = merge(common, {
   devtool: 'source-map',
   devServer: {
     headers: { 'Access-Control-Allow-Origin': '*' }
   },
   mode: 'development',
-  entry: {
-    main: './src/app/index.js',
-  },
-  resolve: {
-    // When requiring, you don't need to add these extensions
-    extensions: ['.js', '.jsx', '.json', '.less']
-  },
   optimization: {
     minimize: false,
-    usedExports: true
-  },
-  output: {
-    path: path.join(__dirname, 'build'),
-    chunkFilename: '[name].bundle.js',
-    publicPath: '/'
   },
   plugins: [
-    new CopyWebpackPlugin(['src/.htaccess', 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']),
-    // new webpack.optimize.CommonsChunkPlugin({
-    //   name: 'lib',
-    //   filename: 'lib.js'
-    // }),
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: path.join(__dirname, 'src/index.ejs'),
-      version: pkgJson.version,
-      date: buildDate,
-      gapiKey: process.env.CORIOLIS_GAPI_KEY || ''
-    }),
-    new ExtractTextPlugin({
-      filename: 'app.css',
-      disable: false,
-      allChunks: true
-    }),
+    new CopyWebpackPlugin({
+      patterns: [
+      'src/.htaccess', 
+      'src/iframe.html', 
+      'src/xdLocalStoragePostMessageApi.min.js'
+    ]}),
     new WebpackNotifierPlugin({ alwaysNotify: true }),
-    new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin()
-  ],
-  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: /\.(js|jsx)$/, loaders: ['babel-loader'], include: path.join(__dirname, 'src') },
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
-    ]
-  }
-};
+  ]
+});

webpack.config.prod.js

@@ -1,54 +1,37 @@
-const path = require('path');
-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, BugsnagBuildReporterPlugin } = require('webpack-bugsnag-plugins');
-const pkgJson = require('./package');
-const buildDate = new Date();
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
 
-module.exports = {
-  devtool: 'source-map',
-  entry: {
-    main: './src/app/index.js'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx', '.json', '.less']
-  },
-  output: {
-    path: path.join(__dirname, 'build'),
-    chunkFilename: '[name].bundle.js',
-    publicPath: '/',
-    globalObject: 'this'
-  },
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
+
+module.exports = merge(common, {
+  // devtool: 'source-map',
   mode: 'production',
   optimization: {
     minimize: true,
-    usedExports: true
+  },
+  output: {
+    globalObject: 'this'
   },
   plugins: [
-    new CopyWebpackPlugin(['src/.htaccess', { from: 'src/schemas', to: 'schemas' }, {
-      from: 'src/images/logo/*',
-      flatten: true,
-      to: ''
-    }, 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']),
-    // new webpack.optimize.CommonsChunkPlugin({
-    //  name: 'lib',
-    //  filename: 'lib.[chunkhash:6].js'
-    // }),
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: path.join(__dirname, 'src/index.ejs'),
-      uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
-      gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
-      date: buildDate,
-      version: pkgJson.version
-    }),
-    new ExtractTextPlugin({
-      filename: '[hash:6].css',
-      disable: false,
-      allChunks: true
+    new CopyWebpackPlugin({
+      patterns: [
+        'src/.htaccess', 
+        'src/iframe.html', 
+        'src/xdLocalStoragePostMessageApi.min.js',  
+        { from: 'src/schemas', to: 'schemas' },
+        {
+          from: 'src/images/logo/*',
+          to: '[name][ext]'
+        }
+    ]}),
+    /* new HtmlWebpackPlugin({
+      // uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
+    }), */
+    new MiniCssExtractPlugin({
+      filename: '[contenthash:6].css',
     }),
     // new BugsnagBuildReporterPlugin({
     //   apiKey: 'ba9fae819372850fb660755341fa6ef5',
@@ -59,25 +42,11 @@ module.exports = {
     //   overwrite: true,
     //   appVersion: `${pkgJson.version}-${buildDate.toISOString()}`
     // }),
+    
     new InjectManifest({
       swSrc: './src/sw.js',
-      importWorkboxFrom: 'cdn',
       swDest: 'service-worker.js'
     }),
-  ],
-  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: /\.(js|jsx)$/, loader: 'babel-loader?cacheDirectory=true', include: path.join(__dirname, 'src') },
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
-    ]
-  }
-};
+    
+  ]
+});