Merge pull request #765 from alex-williams/ISSUE_764_Unknown_Modules_Are_Selectable

Issue 764 unknown modules are selectable

.babelrc

@@ -1,3 +1,36 @@
 {
-  "presets": ["env", "react", "stage-0"]
+  "presets": [
+    ["@babel/preset-env", {"modules": "commonjs"}],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@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",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-proposal-pipeline-operator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    ["@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

.esdoc.json

@@ -0,0 +1,103 @@
+{
+  "source": "./src/app",
+  "includes": ["\\.js$", "\\.jsx$"],
+  "destination": "./docs",
+  "index": "./README.md",
+  "plugins": [
+    {
+      "name": "esdoc-standard-plugin",
+      "option": {
+        "lint": {
+          "enable": false
+        },
+        "coverage": {
+          "enable": false
+        },
+        "accessor": {
+          "access": [
+            "public",
+            "protected",
+            "private"
+          ],
+          "autoPrivate": true
+        },
+        "undocumentIdentifier": {
+          "enable": true
+        },
+        "unexportedIdentifier": {
+          "enable": false
+        },
+        "typeInference": {
+          "enable": true
+        },
+        "brand": {
+          "logo": "./src/images/logo/192x192.png",
+          "title": "Coriolis",
+          "description": "Coriolis Shipyard for Elite Dangerous",
+          "repository": "https://github.com/EDCD/coriolis",
+          "site": "https://coriolis.io",
+          "author": "https://github.com/edcd",
+          "image": "./src/images/logo/192x192.png"
+        }
+      }
+    },
+    {
+      "name": "esdoc-ecmascript-proposal-plugin",
+      "option": {
+        "all": true
+      }
+    },
+    {
+      "name": "esdoc-react-plugin"
+    },
+    {
+      "name": "esdoc-standard-plugin",
+      "option": {
+        "lint": {
+          "enable": false
+        },
+        "coverage": {
+          "enable": false
+        },
+        "accessor": {
+          "access": [
+            "public",
+            "protected",
+            "private"
+          ],
+          "autoPrivate": true
+        },
+        "undocumentIdentifier": {
+          "enable": true
+        },
+        "unexportedIdentifier": {
+          "enable": false
+        },
+        "typeInference": {
+          "enable": true
+        },
+        "brand": {
+          "logo": "./src/images/logo/192x192.png",
+          "title": "Coriolis",
+          "description": "Coriolis Shipyard for Elite Dangerous",
+          "repository": "https://github.com/EDCD/coriolis",
+          "site": "https://coriolis.io",
+          "author": "https://github.com/edcd",
+          "image": "./src/images/logo/192x192.png"
+        }
+      }
+    },
+    {
+      "name": "esdoc-jsx-plugin",
+      "option": {
+        "enable": true
+      }
+    },
+    {
+      "name": "esdoc-publish-html-plugin",
+      "option": {
+        "template": "./node_modules/esdoc-custom-theme/template"
+      }
+    }
+  ]
+}

.eslintrc

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

.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

.github/workflows/autodeploy.yml

@@ -0,0 +1,28 @@
+# This is a basic deployment workflow triggered by pushes to the alpha branch.
+
+name: Auto-Deploy
+
+# Controls when the action will run. Workflow runs when the alpha branch receives a push event
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - alpha
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  downloadcode:
+    runs-on: self-hosted
+    steps:
+      - shell: bash
+        run: |
+          rm -Rf ./coriolis
+          rm -Rf ./coriolis-data
+          git clone https://github.com/alex-williams/coriolis.git --single-branch --branch alpha
+          git clone https://github.com/alex-williams/coriolis-data.git --single-branch --branch alpha
+          cd coriolis-data
+          npm install
+          cd ../coriolis
+          npm install
+          npm run build
+          sudo -u www-data cp -r ./build/* /var/www/newdisk/coriolis.brighter-applications.co.uk/

.gitignore

@@ -7,3 +7,6 @@ nginx.pid
 /bin
 env
 *.swp
+.project
+.vscode/
+docs/

.travis.yml

@@ -1,15 +0,0 @@
-language: node_js
-notifications:
-  email: false
-sudo: false
-node_js:
-  - "4.8.1"
-cache:
-  directories:
-    - node_modules
-
-before_script:
-
-script:
-  - npm run lint
-  - npm test

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

LICENSE.md

@@ -0,0 +1,24 @@
+All Data and [associated JSON](https://github.com/EDCD/coriolis-data) files are intellectual property and copyright of Frontier Developments plc ('Frontier', 'Frontier Developments') and are subject to their
+[terms and conditions](https://www.frontierstore.net/terms-and-conditions/).
+
+The code (Javascript, CSS, HTML, and SVG files only) specificially for Coriolis.io is released under the MIT License.
+
+Copyright (c) 2015 Coriolis.io, Colin McLeod
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software (Javascript, CSS, HTML, and SVG files only), and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,4 +1,4 @@
-![Latest Release](https://img.shields.io/github/release/EDCD/coriolis.svg) [![Build Status](https://travis-ci.org/EDCD/coriolis.svg?branch=master)](https://travis-ci.org/EDCD/coriolis) [![Chat to us on Discord](https://img.shields.io/badge/Discord-EDCD%20%23coriolis-blue.svg?style=social)](https://discord.gg/0uwCh6R62aPRjk9w)
+[![Chat to us on Discord](https://img.shields.io/badge/Discord-EDCD%20%23coriolis-blue.svg?style=social)](https://discord.gg/0uwCh6R62aPRjk9w)
 
 ## About
 
@@ -8,50 +8,50 @@ Coriolis was created using assets and imagery from Elite: Dangerous, with the pe
 
 ## Contributing
 
-Please [submit issues](https://github.com/EDCD/coriolis/issues), or better yet [pull requests](https://github.com/EDCD/coriolis/pulls) for any corrections or additions to the database or the code.
+- [Submit issues](https://github.com/EDCD/coriolis/issues)
-
+- [Submit pull requests](https://github.com/EDCD/coriolis/pulls) targetting `develop` branch
-### Translations
+- Chat to us on [Discord](https://discord.gg/0uwCh6R62aPRjk9w)!
-
-Please use the OneSky translation site to suggest new translations: http://edcd-coriolis.oneskyapp.com  
-These will be merged regularly by the project manager.
-
-### Feature Requests, Suggestions & Bugs
-
-Chat to us on [Discord](https://discord.gg/0uwCh6R62aPRjk9w)!
 
 ## Development
 
-See the [Developer's Guide](https://github.com/EDCD/coriolis/wiki/Developing-for-Coriolis) in the wiki.
+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
+> cd ./coriolis-data
+> npm install
+> cd ../coriolis
+> npm install
+> npm start
+```
+
+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
 
-## License
+Follow the steps for [Development](#development) as above, but instead
+of `npm start` you'll want to:
 
-All Data and [associated JSON](https://github.com/EDCD/coriolis-data) files are intellectual property and copyright of Frontier Developments plc ('Frontier', 'Frontier Developments') and are subject to their
+```sh
-[terms and conditions](https://www.frontierstore.net/terms-and-conditions/).
+> npm run build
+```
 
-The code (Javascript, CSS, HTML, and SVG files only) specificially for Coriolis.io is released under the MIT License.
+this will result in a `build/` directory being created containing all the necessary files.
 
-Copyright (c) 2015 Coriolis.io, Colin McLeod
+After this you need to serve the files in some manner.
-
+Either configure your webserver to make the actual `build/` directory
-Permission is hereby granted, free of charge, to any person obtaining a copy
+visible on the web, or alternatively copy it to somewhere to serve it
-of this software (Javascript, CSS, HTML, and SVG files only), and associated documentation files (the "Software"), to deal
+from.
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

__tests__/fixtures/expected-builds.json

@@ -1,50 +1,50 @@
 {
   "type_6_transporter": {
-    "Cargo": "A0p0tdFal8d8s8f4-----04040303430101.Iw1/kA==.Aw1/kA==.",
+    "Cargo": "A0p0tdFal8d8s8f4-----04040303430101-.Iw18UA==.Aw18UA==.",
-    "Miner": "A0p5tdFal8d8s8f42l2l---040403451q0101.Iw1/kA==.Aw1/kA==.",
+    "Miner": "A0p5tdFal8d8s8f42l2l---040403451q0101-.Iw18UA==.Aw18UA==.",
-    "Hopper": "A0p0tdFal8d0s8f41717---030302024300-.Iw1/kA==.Aw1/kA==."
+    "Hopper": "A0p0tdFal8d0s8f41717---030302024300--.Iw18UA==.Aw18UA==."
   },
   "type_7_transport": {
-    "Cargo": "A0p0tiFfliddsdf5--------0505040403480101.Iw18aQ==.Aw18aQ==.",
+    "Cargo": "A0p0tiFfliddsdf5--------0505040403480101--.Iw18eQ==.Aw18eQ==.",
-    "Miner": "A0pdtiFflid8sdf5--2l2l----0505041v03450000.Iw18aQ==.Aw18aQ==."
+    "Miner": "A0pdtiFflid8sdf5--2l2l----0505041v03450000--.Iw18eQ==.Aw18eQ==."
   },
   "federal_dropship": {
-    "Cargo": "A0pdtiFflnddsif4-1717------05040448--020201.Iw18eQ==.Aw18eQ==."
+    "Cargo": "A0pdtiFflnddsif4-1717------05040448--020201-.Iw18RQ==.Aw18RQ==."
   },
   "asp": {
-    "Miner": "A2pftfFflidfskf50s0s24242l2l---04054a1q02022o27.Iw18WQ==.Aw18WQ==."
+    "Miner": "A2pftfFflidfskf50s0s24242l2l---04054a1q02022o27-.Iw18eQ==.Aw18eQ==."
   },
   "imperial_clipper": {
-    "Cargo": "A0p5tiFflndisnf4--0s0s----0605450302020101.Iw18aQ==.Aw18aQ==.",
+    "Cargo": "A0p5tiFflndisnf4--0s0s----0605450302020101-.Iw18WQ==.Aw18WQ==.",
-    "Dream": "A2pktkFflndpskf40v0v0s0s0404040n4k5n5d2b29292o-.AwRj4yWU1I==.CwBhCYy6YRigzLIA.",
+    "Dream": "A2pktkFflndpskf40v0v0s0s0404040n4k5n5d2b29292o--.AwRj4yWU1Yg=.CwBhCYy6YRigzPIA.",
-    "Current": "A0patkFflndfskf4----------------.AwRj4yWU1I==.CwBhCYy6YRigzLIA."
+    "Current": "A0patkFflndfskf4-----------------.AwRj4yWU1Yg=.CwBhCYy6YRigzPIA."
   },
   "type_9_heavy": {
-    "Current": "A0patsFklndnsif6---------0706054a0303020224.AwRj4yoo.EwBhEYy6dsg=."
+    "Current": "A0patsFklndnsif6---------0706054a0303020224--.AwRj4yo5iA==.EwBhEYy6d6g=."
   },
   "python": {
-    "Cargo": "A0patnFflidsssf5---------050505040448020201.Iw18eQ==.Aw18eQ==.",
+    "Cargo": "A0patnFflidsssf5---------050505040448020201-.Iw18eAMQ.Aw18RQ==.",
-    "Miner": "A0pktkFflidpspf50v0v0v2m2m0404--050505Ce4a1v02022o.Iw18eQ==.IwBhBYy6dkCYg===.",
+    "Miner": "A0pktkFflidpspf50v0v0v2m2m0404--050505Ce4a1v02022o-.Iw18eAMQ.IwBhBYy6dkCYRA==.",
-    "Dream": "A2pptkFfliduspf50v0v0v27270404040m5n5n4f2d2d032t0201.Iw1+gDBxA===.EwBhEYy6e0WEA===.",
+    "Dream": "A2pptkFfliduspf50v0v0v27270404040m5n5n4f2d2d032t0201-.Iw1+gDByUA==.EwBhEYy6e0VEA===.",
-    "Missile": "A0pttoFjljdystf52f2g2d2ePh----04044j03---002h.Iw18eQ==.Aw18eQ==."
+    "Missile": "A0pttoFjljdystf52f2g2d2ePh----04044j03---00--.Iw18eAMQ.Aw18RQ==."
   },
   "anaconda": {
-    "Dream": "A4putpFklndzsuf52c0o0o0o1m1m0q0q0404040l0b0100004k5n5n112d2d04-0303326b.AwRj4yo5dyg=.MwBhCYy6duvARiA=.",
+    "Dream": "A4putpFklndzsuf52c0o0o0o1m1m0q0q0404040l0b0100004k5n5n112d2d04-0303326b-.AwRj4yo5dzhA.MwBhCYy6duvARhEA.",
-    "Cargo": "A0patnFklndnsxf5----------------06050505040404-45030301.Iw18ZVA=.Aw18ZVA=.",
+    "Cargo": "A0patnFklndnsxf5----------------06050505040404-45030301-.Iw18ZUAxA===.Aw18ZXEA.",
-    "Current": "A0patnFklndksxf5----------------06050505040404-03034524.Iw18ZVA=.Aw18ZVA=.",
+    "Current": "A0patnFklndksxf5----------------06050505040404-03034524-.Iw18ZUAxA===.Aw18ZXEA.",
-    "Explorer": "A0patnFklndksxf5--------0202------f7050505040s37-2f2i4524.AwRj4yVKJ9hA.AwhMIyumQRhEA===.",
+    "Explorer": "A0patnFklndksxf5--------0202------f7050505040s37--2i4524-.AwRj4yVKJ9jCA===.AwhMIyumQRgkA===.",
-    "Test": "A4putkFklkdzsuf52c0o0o0o1m1m0q0q0404-0l0b0100034k5n052d04---0303326b.Iw18ZVA=.Aw18ZVA=."
+    "Test": "A4putkFklkdzsuf52c0o0o0o1m1m0q0q0404-0l0b0100034k5n052d04---0303326b-.Iw18ZUAxA===.Aw18ZXEA."
   },
   "diamondback_explorer": {
-    "Explorer": "A0p0tdFfldddsdf5---0202--320p432i2f-.AwRj4zTYg===.AwiMIyoo."
+    "Explorer": "A0p0tdFfldddsdf5---0202--320p432i----.AwRj4zTZaA==.AwiMIyqo."
   },
   "vulture": {
-    "Bounty Hunter": "A3patcFalddksff31e1e0404-0l4a-5d27662j.AwRj4z2I.MwBhBYy6oJmAjLIA."
+    "Bounty Hunter": "A3patcFalddksff31e1e0404-0l4a-5d27662j--.AwRj4z2Gg===.MwBhBYy6oJmAjLMQ."
   },
   "fer_de_lance": {
-    "Attack": "A2pfthFalidpsff31r0s0s0s0s000404-04-4a-5d27-.Iw18aQ==.CwBhrSu8EZyA."
+    "Attack": "A2pfthFalidpsff31r0s0s0s0s000404-04-4a-5d27--.Iw18aAMQ.CwBhrSu8EZxEA===."
   },
   "eagle": {
-    "Figther": "A4p0t5F5l3d5s5f20p0p24-4053-2j-.Iw18kA==.Aw18kA==."
+    "Figther": "A4p0t5F5l3d5s5f20p0p24-4053-2j---.Iw18gDJQ.Aw19kA==."
   }
 }

__tests__/fixtures/slef-multiple-builds.json

@@ -0,0 +1,366 @@
+[
+  {
+    "header": {
+      "appName": "Inara",
+      "appVersion": "1.0",
+      "appURL": "https:\/\/inara.cz\/cmdr-fleet\/123\/123\/",
+      "appCustomProperties": {
+        "inaraCommanderID": 123,
+        "inaraShipID": 123
+      }
+    },
+    "data": {
+      "Ship": "krait_mkii",
+      "ShipID": 7,
+      "ShipName": "pancake hammer",
+      "ShipIdent": "PH-01",
+      "HullValue": 44160710,
+      "ModulesValue": 111274094,
+      "Rebuy": 7771743,
+      "Modules": [
+        {
+          "Slot": "largehardpoint1",
+          "Item": "hpt_mininglaser_fixed_small",
+          "On": true
+        },
+        {
+          "Slot": "largehardpoint2",
+          "Item": "hpt_cannon_gimbal_large",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "weapon_overcharged",
+            "Level": 2,
+            "Quality": 1,
+            "ExperimentalEffect": "special_auto_loader"
+          }
+        },
+        {
+          "Slot": "largehardpoint3",
+          "Item": "hpt_cannon_gimbal_large",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "weapon_overcharged",
+            "Level": 2,
+            "Quality": 1,
+            "ExperimentalEffect": "special_auto_loader"
+          }
+        },
+        {
+          "Slot": "mediumhardpoint1",
+          "Item": "hpt_basicmissilerack_fixed_medium",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "weapon_highcapacity",
+            "Level": 5,
+            "Quality": 1
+          }
+        },
+        {
+          "Slot": "mediumhardpoint2",
+          "Item": "hpt_basicmissilerack_fixed_medium",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint1",
+          "Item": "hpt_heatsinklauncher_turret_tiny",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint2",
+          "Item": "hpt_cloudscanner_size0_class3",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint3",
+          "Item": "hpt_shieldbooster_size0_class5",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint4",
+          "Item": "hpt_shieldbooster_size0_class5",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "slot01_size6",
+          "Item": "int_cargorack_size6_class1",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "slot02_size6",
+          "Item": "int_cargorack_size6_class1",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "slot03_size5",
+          "Item": "int_guardianfsdbooster_size5",
+          "On": true
+        },
+        {
+          "Slot": "slot04_size5",
+          "Item": "int_fighterbay_size5_class1",
+          "On": true
+        },
+        {
+          "Slot": "slot05_size4",
+          "Item": "int_shieldgenerator_size4_class5",
+          "On": true
+        },
+        {
+          "Slot": "slot06_size3",
+          "Item": "int_dronecontrol_collection_size3_class4",
+          "On": true
+        },
+        {
+          "Slot": "slot07_size3",
+          "Item": "int_dronecontrol_collection_size3_class4",
+          "On": true
+        },
+        {
+          "Slot": "slot08_size2",
+          "Item": "int_refinery_size2_class2",
+          "On": true
+        },
+        {
+          "Slot": "slot09_size1",
+          "Item": "int_dronecontrol_prospector_size1_class4",
+          "On": true
+        },
+        {
+          "Slot": "powerplant",
+          "Item": "int_powerplant_size7_class5",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "mainengines",
+          "Item": "int_engine_size6_class5",
+          "On": true
+        },
+        {
+          "Slot": "frameshiftdrive",
+          "Item": "int_hyperdrive_size5_class5",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "fsd_longrange",
+            "Level": 2,
+            "Quality": 0.861
+          }
+        },
+        {
+          "Slot": "lifesupport",
+          "Item": "int_lifesupport_size4_class2",
+          "On": true,
+          "Priority": 3
+        },
+        {
+          "Slot": "powerdistributor",
+          "Item": "int_powerdistributor_size7_class5",
+          "On": true
+        },
+        {
+          "Slot": "radar",
+          "Item": "int_sensors_size6_class2",
+          "On": true
+        },
+        {
+          "Slot": "fueltank",
+          "Item": "int_fueltank_size5_class3",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "armour",
+          "Item": "krait_mkii_armour_grade3",
+          "On": true,
+          "Priority": 1,
+          "Engineering": {
+            "BlueprintName": "armour_heavyduty",
+            "Level": 5,
+            "Quality": 1
+          }
+        }
+      ]
+    }
+  },
+  {
+    "header": {
+      "appName": "Inara",
+      "appVersion": "1.0",
+      "appURL": "https:\/\/inara.cz\/cmdr-fleet\/123\/123\/",
+      "appCustomProperties": {
+        "inaraCommanderID": 123,
+        "inaraShipID": 123
+      }
+    },
+    "data": {
+      "Ship": "diamondbackxl",
+      "ShipID": 11,
+      "ShipName": "star Hopper",
+      "ShipIdent": "PH-02",
+      "HullValue": 1615649,
+      "ModulesValue": 16981039,
+      "Rebuy": 929837,
+      "Modules": [
+        {
+          "Slot": "tinyhardpoint1",
+          "Item": "hpt_heatsinklauncher_turret_tiny",
+          "On": true,
+          "Value": 3072
+        },
+        {
+          "Slot": "slot01_size4",
+          "Item": "int_fuelscoop_size4_class5",
+          "On": true,
+          "Priority": 3,
+          "Value": 2862364
+        },
+        {
+          "Slot": "slot02_size4",
+          "Item": "int_guardianfsdbooster_size4",
+          "On": true,
+          "Value": 2847499
+        },
+        {
+          "Slot": "slot03_size3",
+          "Item": "int_shieldgenerator_size3_class2",
+          "On": true,
+          "Value": 18812,
+          "Engineering": {
+            "BlueprintName": "shieldgenerator_thermic",
+            "Level": 3,
+            "Quality": 1,
+            "ExperimentalEffect": "special_shield_health"
+          }
+        },
+        {
+          "Slot": "slot04_size3",
+          "Item": "int_repairer_size3_class5",
+          "On": true,
+          "Value": 2302911
+        },
+        {
+          "Slot": "slot05_size2",
+          "Item": "int_buggybay_size2_class2",
+          "On": true,
+          "Priority": 3,
+          "Value": 21600
+        },
+        {
+          "Slot": "slot06_size2",
+          "Item": "int_cargorack_size2_class1",
+          "On": true,
+          "Priority": 1,
+          "Value": 2852
+        },
+        {
+          "Slot": "slot07_size1",
+          "Item": "int_supercruiseassist",
+          "On": true,
+          "Priority": 3,
+          "Value": 9121
+        },
+        {
+          "Slot": "slot08_size1",
+          "Item": "int_detailedsurfacescanner_tiny",
+          "On": true,
+          "Value": 250000,
+          "Engineering": {
+            "BlueprintName": "sensor_expanded",
+            "Level": 5,
+            "Quality": 1
+          }
+        },
+        {
+          "Slot": "powerplant",
+          "Item": "int_powerplant_size4_class5",
+          "On": true,
+          "Priority": 1,
+          "Value": 1441233,
+          "Engineering": {
+            "BlueprintName": "powerplant_boosted",
+            "Level": 1,
+            "Quality": 1
+          }
+        },
+        {
+          "Slot": "mainengines",
+          "Item": "int_engine_size4_class5",
+          "On": true,
+          "Value": 1610080,
+          "Engineering": {
+            "BlueprintName": "engine_dirty",
+            "Level": 5,
+            "Quality": 1,
+            "ExperimentalEffect": "special_engine_lightweight"
+          }
+        },
+        {
+          "Slot": "frameshiftdrive",
+          "Item": "int_hyperdrive_size5_class5",
+          "On": true,
+          "Value": 5103953,
+          "Engineering": {
+            "BlueprintName": "fsd_longrange",
+            "Level": 5,
+            "Quality": 1,
+            "ExperimentalEffect": "special_fsd_lightweight"
+          }
+        },
+        {
+          "Slot": "lifesupport",
+          "Item": "int_lifesupport_size3_class2",
+          "On": true,
+          "Value": 10133,
+          "Engineering": {
+            "BlueprintName": "misc_lightweight",
+            "Level": 3,
+            "Quality": 1
+          }
+        },
+        {
+          "Slot": "powerdistributor",
+          "Item": "int_powerdistributor_size4_class5",
+          "On": true,
+          "Value": 389022,
+          "Engineering": {
+            "BlueprintName": "powerdistributor_highfrequency",
+            "Level": 4,
+            "Quality": 1
+          }
+        },
+        {
+          "Slot": "radar",
+          "Item": "int_sensors_size3_class2",
+          "On": true,
+          "Value": 10133,
+          "Engineering": {
+            "BlueprintName": "sensor_lightweight",
+            "Level": 5,
+            "Quality": 1
+          }
+        },
+        {
+          "Slot": "fueltank",
+          "Item": "int_fueltank_size5_class3",
+          "On": true,
+          "Priority": 1,
+          "Value": 97754
+        },
+        {
+          "Slot": "armour",
+          "Item": "diamondbackxl_armour_grade1",
+          "On": true,
+          "Priority": 1,
+          "Engineering": {
+            "BlueprintName": "armour_heavyduty",
+            "Level": 5,
+            "Quality": 1
+          }
+        }
+      ]
+    }
+  }
+]

__tests__/fixtures/slef-multiple-expected-builds.json

@@ -0,0 +1,8 @@
+{
+      "krait_mkii": {
+        "Imported pancake hammer": "A2pptkFflidussf52l1o1o2g2g020g040405051Ofr45C9C91oP3.Iw18eQ==.AwRgzKIkA===."
+  },
+      "diamondback_explorer": {
+        "Imported star Hopper": "A0pataFflddfsdf5---02---321P430iv6013w2i.Iw18SQ==.AwRm44GYpKg=."
+  }
+}

__tests__/fixtures/slef-single-build.json

@@ -0,0 +1,188 @@
+[
+  {
+    "header": {
+      "appName": "Inara",
+      "appVersion": "1.0",
+      "appURL": "https:\/\/inara.cz\/cmdr-fleet\/123\/123\/",
+      "appCustomProperties": {
+        "inaraCommanderID": 123,
+        "inaraShipID": 123
+      }
+    },
+    "data": {
+      "Ship": "krait_mkii",
+      "ShipID": 7,
+      "ShipName": "pancake hammer",
+      "ShipIdent": "PH-01",
+      "HullValue": 44160710,
+      "ModulesValue": 111274094,
+      "Rebuy": 7771743,
+      "Modules": [
+        {
+          "Slot": "largehardpoint1",
+          "Item": "hpt_mininglaser_fixed_small",
+          "On": true
+        },
+        {
+          "Slot": "largehardpoint2",
+          "Item": "hpt_cannon_gimbal_large",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "weapon_overcharged",
+            "Level": 2,
+            "Quality": 1,
+            "ExperimentalEffect": "special_auto_loader"
+          }
+        },
+        {
+          "Slot": "largehardpoint3",
+          "Item": "hpt_cannon_gimbal_large",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "weapon_overcharged",
+            "Level": 2,
+            "Quality": 1,
+            "ExperimentalEffect": "special_auto_loader"
+          }
+        },
+        {
+          "Slot": "mediumhardpoint1",
+          "Item": "hpt_basicmissilerack_fixed_medium",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "weapon_highcapacity",
+            "Level": 5,
+            "Quality": 1
+          }
+        },
+        {
+          "Slot": "mediumhardpoint2",
+          "Item": "hpt_basicmissilerack_fixed_medium",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint1",
+          "Item": "hpt_heatsinklauncher_turret_tiny",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint2",
+          "Item": "hpt_cloudscanner_size0_class3",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint3",
+          "Item": "hpt_shieldbooster_size0_class5",
+          "On": true
+        },
+        {
+          "Slot": "tinyhardpoint4",
+          "Item": "hpt_shieldbooster_size0_class5",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "slot01_size6",
+          "Item": "int_cargorack_size6_class1",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "slot02_size6",
+          "Item": "int_cargorack_size6_class1",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "slot03_size5",
+          "Item": "int_guardianfsdbooster_size5",
+          "On": true
+        },
+        {
+          "Slot": "slot04_size5",
+          "Item": "int_fighterbay_size5_class1",
+          "On": true
+        },
+        {
+          "Slot": "slot05_size4",
+          "Item": "int_shieldgenerator_size4_class5",
+          "On": true
+        },
+        {
+          "Slot": "slot06_size3",
+          "Item": "int_dronecontrol_collection_size3_class4",
+          "On": true
+        },
+        {
+          "Slot": "slot07_size3",
+          "Item": "int_dronecontrol_collection_size3_class4",
+          "On": true
+        },
+        {
+          "Slot": "slot08_size2",
+          "Item": "int_refinery_size2_class2",
+          "On": true
+        },
+        {
+          "Slot": "slot09_size1",
+          "Item": "int_dronecontrol_prospector_size1_class4",
+          "On": true
+        },
+        {
+          "Slot": "powerplant",
+          "Item": "int_powerplant_size7_class5",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "mainengines",
+          "Item": "int_engine_size6_class5",
+          "On": true
+        },
+        {
+          "Slot": "frameshiftdrive",
+          "Item": "int_hyperdrive_size5_class5",
+          "On": true,
+          "Engineering": {
+            "BlueprintName": "fsd_longrange",
+            "Level": 2,
+            "Quality": 0.861
+          }
+        },
+        {
+          "Slot": "lifesupport",
+          "Item": "int_lifesupport_size4_class2",
+          "On": true,
+          "Priority": 3
+        },
+        {
+          "Slot": "powerdistributor",
+          "Item": "int_powerdistributor_size7_class5",
+          "On": true
+        },
+        {
+          "Slot": "radar",
+          "Item": "int_sensors_size6_class2",
+          "On": true
+        },
+        {
+          "Slot": "fueltank",
+          "Item": "int_fueltank_size5_class3",
+          "On": true,
+          "Priority": 1
+        },
+        {
+          "Slot": "armour",
+          "Item": "krait_mkii_armour_grade3",
+          "On": true,
+          "Priority": 1,
+          "Engineering": {
+            "BlueprintName": "armour_heavyduty",
+            "Level": 5,
+            "Quality": 1
+          }
+        }
+      ]
+    }
+  }
+]

__tests__/test-import.js

@@ -18,13 +18,13 @@ describe('Import Modal', function() {
   const mockContext = {
     language: getLanguage('en'),
     sizeRatio: 1,
-    openMenu: jest.genMockFunction(),
+    openMenu: jest.fn(),
-    closeMenu: jest.genMockFunction(),
+    closeMenu: jest.fn(),
-    showModal: jest.genMockFunction(),
+    showModal: jest.fn(),
-    hideModal: jest.genMockFunction(),
+    hideModal: jest.fn(),
-    tooltip: jest.genMockFunction(),
+    tooltip: jest.fn(),
-    termtip: jest.genMockFunction(),
+    termtip: jest.fn(),
-    onWindowResize: jest.genMockFunction()
+    onWindowResize: jest.fn()
   };
 
   let modal, render, ContextProvider = Utils.createContextProvider(mockContext);
@@ -110,21 +110,25 @@ describe('Import Modal', function() {
     it('catches an invalid backup', function() {
       const importData = require('./fixtures/valid-backup');
       let invalidImportData = Object.assign({}, importData);
-      //invalidImportData.builds.asp = null;   // Remove Asp Miner build used in comparison
+      // Remove Asp Miner build used in comparison
       delete(invalidImportData.builds.asp);
 
       pasteText('"this is not valid"');
       expect(modal.state.importValid).toBeFalsy();
       expect(modal.state.errorMsg).toEqual('Must be an object or array!');
+
       pasteText('{ "builds": "Should not be a string" }');
       expect(modal.state.importValid).toBeFalsy();
       expect(modal.state.errorMsg).toEqual('builds must be an object!');
-      pasteText(JSON.stringify(importData).replace('anaconda', 'invalid_ship'));
+
+      pasteText(JSON.stringify(importData).replace(/anaconda/g, 'invalid_ship'));
       expect(modal.state.importValid).toBeFalsy();
-      expect(modal.state.errorMsg).toEqual('"invalid_ship" is not a valid Ship Id!');
+      expect(Object.keys(modal.state.builds)).not.toContain('anaconda');
+
       pasteText(JSON.stringify(importData).replace('Dream', ''));
       expect(modal.state.importValid).toBeFalsy();
-      expect(modal.state.errorMsg).toEqual('Imperial Clipper build "" must be a string at least 1 character long!');
+      expect(Object.keys(modal.state.builds.imperial_clipper).length).toEqual(3);
+
       pasteText(JSON.stringify(invalidImportData));
       expect(modal.state.importValid).toBeFalsy();
       expect(modal.state.errorMsg).toEqual('asp build "Miner" data is missing!');
@@ -144,7 +148,7 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/anaconda?code=A4putkFklkdzsuf52c0o0o0o1m1m0q0q0404-0l0b0100034k5n052d04---0303326b.AwRj4zNLaA%3D%3D.CwBhCYzBGW9qCTSqq5xA.&bn=Test%20My%20Ship');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/anaconda?code=A4putkFklkdzsuf52c0o0o0o1m1m0q0q0404-0l0b0100034k5n052d04---0303326b-.AwRj4zNLeI%3D%3D.CwBhCYzBGW9qCTSqq5JA.&bn=Test%20My%20Ship');
     });
 
     it('catches an invalid build', function() {
@@ -169,7 +173,7 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/anaconda?code=A4putkFklkdzsuf52c0o0o0o1m1m0q0q0404-0l0b0100034k5n052d04---0303326b.AwRj4zNLaA%3D%3D.CwBhCYzBGW9qCTSqq5xA.H4sIAAAAAAAAA2MUe8HMwPD%2FPwMAAGvB0AkAAAA%3D&bn=Test%20My%20Ship');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/anaconda?code=A4putkFklkdzsuf52c0o0o0o1m1m0q0q0404-0l0b0100034k5n052d04---0303326b-.AwRj4zNLeI%3D%3D.CwBhCYzBGW9qCTSqq5JA.H4sIAAAAAAAAE2MUe8HMwPD%2FPwMAAGvB0AkAAAA%3D&bn=Test%20My%20Ship');
     });
   });
 
@@ -186,7 +190,7 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/asp?code=A0pftiFflfddsnf5------020202033c044002v62f2i.AwRj4yvI.CwRgDBldHnJA.H4sIAAAAAAAAA2P858DAwPCXEUhwHPvx%2F78YG5AltB7I%2F8%2F0TwImJboDSPJ%2F%2B%2Ff%2Fv%2FKlX%2F%2F%2Fi3AwMTBIfARK%2FGf%2BJwVSxArStVAYqOjvz%2F%2F%2FJVo5GRhE2IBc4SKQSSz%2FDGEmCa398P8%2F%2F2%2BgTf%2F%2FA7kMAExxqlSAAAAA&bn=Multi-purpose%20Asp%20Explorer');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/asp?code=A0pftiFflfddsnf5------020202033c044002v6-2i-.AwRj4yvYg%3D%3D%3D.CwRgDBldHn5A.H4sIAAAAAAAAE2P858DAwPCXEUhwHPvx%2F78YG5AltB7I%2F8%2F0TwImJboDSPJ%2F%2B%2Ff%2Fv%2FKlX%2F%2F%2Fi3AwMTBIfARK%2FGf%2BJwVSxArStVAYqOjvz%2F%2F%2FJVo5GRhE2IBc4SKQSSz%2FDGEmCa398P8%2F%2F2%2BgTf%2F%2FA7kMAExxqlSAAAAA&bn=Multi-purpose%20Asp%20Explorer');
     });
 
     it('imports a valid v4 build with modifications', function() {
@@ -198,11 +202,11 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/imperial_courier?code=A0patzF5l0das8f31a1a270202000e402t0101-2f.AwRj4zKA.CwRgDBldLiQ%3D.H4sIAAAAAAAAA12OPUvDYBSFT1OTfkRJjUkbbC3Yj8mlODgUISAtdOlety5ODv0Vgji7O7kJ%2FgzBQX%2BEY7Gg0NKhfY%2FnHQLFDBdynufe9%2BRMCmCb06g29oCgacjiRx6gY6oWKUT8UgLaszqQfHmSnpVFN1uSeXNsJVcj%2FA2EHlZkspIUpUc6UjTXGT85qwHuSEuVc%2F16r99kDQeSSjvSbSjpyUpNK10uJJ3aYqk6smwm1lQ9bOxw71TMm8VanEqq9JW1r3Qo%2BREOLnQHvbWmb7rZIu5VLIyGQGOukPv%2F0WQk5LeEAjPOUDwtAP6bShy2HKAz0HPO%2B5KsP25I79O2I7LvD%2Bz4Il1XAQAA&bn=Multi-purpose%20Imperial%20Courier');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/imperial_courier?code=A0patzF5l0das8f31a1a270202000e402t0101----.AwRj4zOYg%3D%3D%3D.CwRgDBldLuZA.H4sIAAAAAAAAE12OPUvDYBSFT1OTfkRJjUkbbC3Yj8mlODgUISAtdOlety5ODv0Vgji7O7kJ%2FgzBQX%2BEY7Gg0NKhfY%2FnHQLFDBdynufe9%2BRMCmCb06g29oCgacjiRx6gY6oWKUT8UgLaszqQfHmSnpVFN1uSeXNsJVcj%2FA2EHlZkspIUpUc6UjTXGT85qwHuSEuVc%2F16r99kDQeSSjvSbSjpyUpNK10uJJ3aYqk6smwm1lQ9bOxw71TMm8VanEqq9JW1r3Qo%2BREOLnQHvbWmb7rZIu5VLIyGQGOukPv%2F0WQk5LeEAjPOUDwtAP6bShy2HKAz0HPO%2B5KsP25I79O2I7LvD%2Bz4Il1XAQAA&bn=Multi-purpose%20Imperial%20Courier');
     });
   });
 
-  describe('Import Detaild Builds Array', function() {
+  describe('Import Detailed Builds Array', function() {
 
     beforeEach(reset);
 
@@ -240,7 +244,7 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/federal_corvette?code=A2putsFklndzsxf50x0x7l28281919040404040402020l06p05sf63c5ifr--v66g2f.AwRj4zNaqA%3D%3D.CwRgDBldUExuBiIlUA%3D%3D.H4sIAAAAAAAAA12STy8DURTFb1szU53Ga8dg2qqqDmJDIoKFxJImumYjVrVqfAALC4lNbcUnkLCoDbEQu0bSlQVhI8JHsJBIQ73rXMkwMYuT9%2Bb87nl%2F7ovoRSL6ikD6TYNINZg5XsWUo7pfrBikr2USlRyXyDuLAhr6ZHanNLOzD5tjOiskysk5dOBvfTB7bjeRW0MNG3ohSBq1bKKxKwyLLUAjmwjpPu4wJx4xVbNI57heDfbUKUAy2xaRUQZpllHoHMHxKqjhhF4LgjtJiFHDmqbrEeVnUJOax7%2FSdRfRwBNotv9wo5kAuZMD2egKyDYcdYl1OBki6z%2BZQjaFnBPyFCM1LefF%2BcgrY0es9FKwbW8ZYj9gmBbxRVRdglMh6BNqnwsk4ouoO4HSIehNoBuBRHwR1QOmsBvHmk6IfMbd2fdCEka%2BjNSexPWGoEkcyX6CnxbxRZQtd%2BPpym%2B31xFtn0iSFPkf%2BBkttZlzB9KDFyBuFRfAGV0Ogoff8SSsCfjjD5hGWtLIwZB%2FgX5Zt%2BLHMI9My7sp6nzgZzekswTxVvCOkq%2FSXqb%2F3zfLxh6HrwIAAA%3D%3D&bn=Imported%20Federal%20Corvette');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/federal_corvette?code=A2putsFklndzsxf50x0x7l28281919040404040402020l06p05sf63c5ifr--v66g--.AwRj4zNapI%3D%3D.CwRgDBldUExuBiIlWIA%3D.&bn=Imported%20Federal%20Corvette');
     });
 
     it('imports a valid companion API build', function() {
@@ -252,7 +256,7 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/beluga?code=A0pktsFplCdpsnf70t0t2727270004040404043c4fmimlmm04mc0iv62i2f.AwRj4yukg%3D%3D%3D.CwRgDBldHi8IUA%3D%3D.H4sIAAAAAAAAA2P8Z8%2FAwPCXEUiIKTMxMPCv%2F%2Ff%2FP8cFIPGf6Z8YTEr0GjMDg%2FJWICERBOTzn%2Fn7%2F7%2FIO5Ai5n9SIEWsQEIoSxAolfbt%2F3%2BJPk4GBhE7YQYGYVmgcuVnf4Aq%2FwOVAAAyiFctbgAAAA%3D%3D&bn=Imported%20Beluga%20Liner');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/beluga?code=A0pktsFplCdpsnf70t0t2727270004040404043c4fmimlmm04mc0iv62i--.AwRj4yusg%3D%3D%3D.CwRgDBldHi8IWIA%3D.&bn=Imported%20Beluga%20Liner');
     });
 
     it('imports a valid companion API build', function() {
@@ -264,7 +268,7 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/type_7_transport?code=A0patfFflidasdf5----0404040005050504044d2402.AwRj4yrI.CwRgDBlVK7EiA%3D%3D%3D.&bn=Imported%20Type-7%20Transporter');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/type_7_transport?code=A0patfFflidasdf5----0404040005050504044d2402--.AwRj4yoo.CwRgDBlVK7HjEA%3D%3D.&bn=Imported%20Type-7%20Transporter');
     });
 
     it('imports a valid companion API build', function() {
@@ -276,7 +280,7 @@ describe('Import Modal', function() {
       expect(modal.state.singleBuild).toBe(true);
       clickProceed();
       expect(MockRouter.go.mock.calls.length).toBe(1);
-      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/cobra_mk_iii?code=A0p0tdFaldd3sdf4------34---2f2i.AwRj4yKA.CwRgDMYExrezBUg%3D.&bn=Imported%20Cobra%20Mk%20III');
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/cobra_mk_iii?code=A0p0tdFaldd3sdf4------34----2i--.AwRj4yqA.CwRgDMYExrezBig%3D.&bn=Imported%20Cobra%20Mk%20III');
     });
   });
 
@@ -324,4 +328,41 @@ describe('Import Modal', function() {
     });
   });
 
+  describe('Imports SLEF data', () => {
+    beforeEach(reset);
+
+    it('imports a single valid SLEF build', () => {
+      const importData = require('./fixtures/slef-single-build.json');
+      pasteText(JSON.stringify(importData));
+
+      expect(modal.state.importValid).toBeTruthy();
+      expect(modal.state.errorMsg).toEqual(null);
+      expect(modal.state.singleBuild).toBe(true);
+      clickProceed();
+      expect(MockRouter.go.mock.calls.length).toBe(1);
+      expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/krait_mkii?code=A2pptkFflidussf52l1o1o2g2g020g040405051Ofr45C9C91oP3.Iw18eQ%3D%3D.AwRgzKIkA%3D%3D%3D.&bn=Imported%20pancake%20hammer');
+    });
+
+    it('imports multiple SLEF builds', () => {
+      const importData = require('./fixtures/slef-multiple-builds.json');
+      const expectedBuilds = require('./fixtures/slef-multiple-expected-builds.json');
+      pasteText(JSON.stringify(importData));
+
+      expect(modal.state.importValid).toBeTruthy();
+      expect(modal.state.errorMsg).toEqual(null);
+      expect(modal.state.singleBuild).toBe(false);
+      clickProceed();
+      expect(modal.state.processed).toBeTruthy();
+      clickImport();
+
+      const builds = Persist.getBuilds();
+
+      for (const shipModel in builds) {
+        for (const buildName in builds[shipModel]) {
+          expect(builds[shipModel][buildName])
+            .toEqual(expectedBuilds[shipModel][buildName]);
+        }
+      }
+    });
+  });
 });

d3-funcs.js

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

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) {

nginx.conf

@@ -1,59 +0,0 @@
-worker_processes      2;
-error_log             ./nginx.error.log;
-worker_rlimit_nofile  8192;
-pid                   nginx.pid;
-
-events {
-  worker_connections  1024;
-  multi_accept        on;
-}
-
-http {
-
-  access_log  off;
-  charset UTF-8;
-
-  types {
-    text/html                             html htm shtml;
-    text/css                              css;
-    text/xml                              xml rss;
-    image/gif                             gif;
-    image/jpeg                            jpeg jpg;
-    application/x-javascript              js;
-    text/plain                            txt;
-    image/png                             png;
-    image/svg+xml                         svg;
-    image/x-icon                          ico;
-    application/pdf                       pdf;
-    text/cache-manifest                   appcache;
-  }
-
-  gzip on;
-  gzip_vary on;
-  gzip_proxied any;
-  gzip_comp_level 6;
-  gzip_buffers 16 8k;
-  gzip_http_version 1.1;
-  gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
-
-  server {
-    listen       3301;
-    server_name  localhost;
-    root   ./build/;
-    index  index.html;
-
-    location ~* \.(?:manifest|appcache|html?|xml|json|css|js|map|jpg|jpeg|gif|png|ico|svg|eot|ttf|woff|woff2)$ {
-            expires -1;
-            add_header Access-Control-Allow-Origin *;
-            add_header Access-Control-Allow-Credentials true;
-            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
-            add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
-            access_log  off;
-    }
-
-    location / {
-      try_files $uri $uri/ /index.html =404;
-    }
-  }
-}
-

package.json

@@ -1,17 +1,21 @@
 {
   "name": "coriolis_shipyard",
-  "version": "2.9.13",
+  "version": "3.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/EDCD/coriolis"
   },
-  "homepage": "https://coriolis.edcd.io",
+  "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": {
-    "prepublish": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js",
     "extract-translations": "grep -hroE \"(translate\\('[^']+'\\))|(tip.bind\\(null, '[^']+')\" src/* | grep -oE \"'[^']+'\" | grep -oE \"[^']+\" | sort -u -f",
     "clean": "rimraf build",
     "start": "node devServer.js",
@@ -19,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"
   },
@@ -56,61 +61,101 @@
     ]
   },
   "devDependencies": {
-    "appcache-webpack-plugin": "^1.3.0",
+    "@babel/core": "^7.20.12",
-    "babel-core": "*",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "babel-eslint": "*",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "babel-jest": "*",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
-    "babel-loader": "*",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "babel-preset-env": "*",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "babel-preset-react": "*",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
-    "babel-preset-stage-0": "*",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
-    "create-react-class": "^15.6.2",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "css-loader": "^0.28.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
-    "cross-env": "^5.1.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-    "d3-selection": "1",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "eslint": "3.19.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "eslint-plugin-react": "^6.10.3",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
-    "expose-loader": "^0.7.3",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
-    "express": "^4.15.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "extract-text-webpack-plugin": "2.1.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "file-loader": "^0.11.1",
+    "@babel/preset-env": "^7.0.0",
-    "html-webpack-plugin": "^2.28.0",
+    "@babel/preset-react": "^7.0.0",
-    "jest-cli": "^21.2.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
-    "jsen": "^0.6.4",
+    "babel-loader": "^8.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "create-react-class": "^15.6.3",
+    "cross-env": "^5.2.0",
+    "css-loader": "^6.7.3",
+    "d3-selection": "^1.3.2",
+    "esdoc": "^1.1.0",
+    "esdoc-custom-theme": "^1.4.2",
+    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
+    "esdoc-jsx-plugin": "^1.0.0",
+    "esdoc-publish-html-plugin": "^1.1.2",
+    "esdoc-react-plugin": "^1.0.1",
+    "esdoc-standard-plugin": "^1.0.0",
+    "eslint": "^5.6.0",
+    "eslint-plugin-react": "^7.11.1",
+    "expose-loader": "^3.1.0",
+    "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.0",
+    "jsen": "^0.6.6",
     "json-loader": "^0.5.4",
-    "less": "^2.7.2",
+    "less": "^3.8.1",
-    "less-loader": "^4.0.3",
+    "less-loader": "^11.1.0",
-    "react-addons-perf": "^15.4.2",
+    "mini-css-extract-plugin": "^2.7.2",
-    "react-measure": "^1.4.7",
+    "react-container-dimensions": "^1.4.1",
-    "react-testutils-additions": "^15.2.0",
+    "react-testutils-additions": "^15.0.0",
-    "react-transition-group": "^1.1.2",
+    "react-transition-group": "^2.5.0",
-    "rimraf": "^2.6.1",
+    "rimraf": "^4.1.2",
-    "rollup": "0.41",
+    "rollup": "^3.17.2",
-    "rollup-plugin-node-resolve": "3",
+    "style-loader": "^3.3.1",
-    "style-loader": "^0.16.1",
+    "uglify-js": "^3.17.4",
-    "uglify-js": "^2.4.11",
+    "webpack": "^5.75.0",
-    "url-loader": "^0.5.8",
+    "webpack-cli": "^5.0.1",
-    "webpack": "^2.4.1",
+    "webpack-dev-server": "^4.11.1",
-    "webpack-dev-server": "^2.4.4",
+    "webpack-merge": "^5.8.0",
-    "webpack-notifier": "^1.6.0",
+    "webpack-notifier": "^1.15.0",
-    "webpack-bugsnag-plugins": "^1.1.1"
+    "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": "*",
+    "assert": "^1.5.0",
+    "auto-bind": "^5.0.1",
+    "base64url": "^3.0.1",
     "browserify-zlib-next": "^1.0.1",
-    "classnames": "^2.2.5",
+    "buffer": "^5.7.0",
+    "classnames": "^2.2.6",
+    "constants-browserify": "^1.0.0",
+    "core-js": "^3.28.0",
     "coriolis-data": "../coriolis-data",
-    "d3": "4.8.0",
+    "crypto-browserify": "^3.12.0",
-    "detect-browser": "^1.7.0",
+    "d3": "^5.7.0",
+    "detect-browser": "^3.0.1",
     "fbemitter": "^2.1.1",
-    "lodash": "^4.17.4",
+    "https-browserify": "^1.0.0",
+    "lodash": "^4.17.11",
     "lz-string": "^1.4.4",
-    "pako": "^1.0.6",
+    "os-browserify": "^0.3.0",
-    "prop-types": "^15.5.8",
+    "pako": "^2.1.0",
-    "react": "^15.5.4",
+    "path-browserify": "^1.0.1",
-    "react-dom": "^15.5.4",
+    "prop-types": "^15.6.2",
-    "react-number-editor": "Athanasius/react-number-editor.git#miggy",
+    "react": "^15.6.2",
-    "recharts": "^0.22.3",
+    "react-dom": "^15.6.2",
-    "superagent": "^3.5.2"
+    "react-fuzzy": "^0.5.2",
+    "react-ga": "^2.5.3",
+    "react-number-editor": "^4.0.3",
+    "recharts": "^1.2.0",
+    "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

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Router from './Router';
+import { register } from 'register-service-worker';
 import { EventEmitter } from 'fbemitter';
 import { getLanguage } from './i18n/Language';
 import Persist from './stores/Persist';
 
+import Announcement from './components/Announcement';
 import Header from './components/Header';
 import Tooltip from './components/Tooltip';
 import ModalExport from './components/ModalExport';
@@ -13,7 +15,6 @@ import ModalImport from './components/ModalImport';
 import ModalPermalink from './components/ModalPermalink';
 import * as CompanionApiUtils from './utils/CompanionApiUtils';
 import * as JournalUtils from './utils/JournalUtils';
-
 import AboutPage from './pages/AboutPage';
 import NotFoundPage from './pages/NotFoundPage';
 import OutfittingPage from './pages/OutfittingPage';
@@ -21,13 +22,14 @@ import ComparisonPage from './pages/ComparisonPage';
 import ShipyardPage from './pages/ShipyardPage';
 import ErrorDetails from './pages/ErrorDetails';
 
+
 const zlib = require('pako');
+const request = require('superagent');
 
 /**
  * Coriolis App
  */
 export default class Coriolis extends React.Component {
-
   static childContextTypes = {
     closeMenu: PropTypes.func.isRequired,
     hideModal: PropTypes.func.isRequired,
@@ -66,11 +68,11 @@ export default class Coriolis extends React.Component {
     this.state = {
       noTouch: !('ontouchstart' in window || navigator.msMaxTouchPoints || navigator.maxTouchPoints),
       page: null,
+      announcements: [],
       language: getLanguage(Persist.getLangCode()),
       route: {},
       sizeRatio: Persist.getSizeRatio()
     };
-
     Router('', (r) => this._setPage(ShipyardPage, r));
     Router('/import?', (r) => this._importBuild(r));
     Router('/import/:data', (r) => this._importBuild(r));
@@ -91,19 +93,34 @@ 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.log('Ship import data: ');
+      console.info('Ship import data: ');
-      console.log(json);
+      console.info(json);
-      let ship;
+      let ship, importString;
-      if (json && json.modules) {
+      if (json) {
+        if (json.length && json[0].data) { // SLEF
+          if (json.length > 1) { // Multiple builds, open modal
+            importString = data;
+          } else { // Single build, import directly
+            ship = JournalUtils.shipFromLoadoutJSON(json[0].data);
+          }
+        } else { // not SLEF
+          if (json.modules) {
             ship = CompanionApiUtils.shipFromJson(json);
-      } else if (json && json.Modules) {
+          } else if (json.Modules) {
             ship = JournalUtils.shipFromLoadoutJSON(json);
           }
+        }
+      }
+      if (ship) {
         r.params.ship = ship.id;
         r.params.code = ship.toString();
         this._setPage(OutfittingPage, r);
+      } else if (importString) {
+        this._setPage(ShipyardPage, r);
+        this._showModal(<ModalImport importString={data}/>);
+      }
     } catch (err) {
       this._onError('Failed to import ship', r.path, 0, 0, err);
     }
@@ -132,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,
@@ -180,13 +190,13 @@ export default class Coriolis extends React.Component {
       case 72:     // 'h'
         if (e.ctrlKey || e.metaKey) { // CTRL/CMD + h
           e.preventDefault();
-          this._showModal(<ModalHelp />);
+          this._showModal(<ModalHelp/>);
         }
         break;
       case 73:     // 'i'
         if (e.ctrlKey || e.metaKey) { // CTRL/CMD + i
           e.preventDefault();
-          this._showModal(<ModalImport />);
+          this._showModal(<ModalImport/>);
         }
         break;
       case 79:  // 'o'
@@ -208,7 +218,7 @@ export default class Coriolis extends React.Component {
    * @param  {React.Component} content Modal Content
    */
   _showModal(content) {
-    let modal = <div className='modal-bg' onClick={(e) => this._hideModal() }>{content}</div>;
+    let modal = <div className='modal-bg' onClick={(e) => this._hideModal()}>{content}</div>;
     this.setState({ modal });
   }
 
@@ -322,14 +332,50 @@ export default class Coriolis extends React.Component {
    */
   componentWillMount() {
     // Listen for appcache updated event, present refresh to update view
-    if (window.applicationCache) {
+    // Check that service workers are registered
-      window.applicationCache.addEventListener('updateready', () => {
+    if (navigator.storage && navigator.storage.persist) {
-        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
+      window.addEventListener('load', () => {
-          this.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
+        navigator.storage.persist().then(granted => {
+          if (granted)
+            console.log('Storage will not be cleared except by explicit user action');
+          else
+            console.log('Storage may be cleared by the UA under storage pressure.');
+        });
+      });
+    }
+    if ('serviceWorker' in navigator) {
+      // Your service-worker.js *must* be located at the top-level directory relative to your site.
+      // It won't be able to control pages unless it's located at the same level or higher than them.
+      // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
+      // See https://github.com/slightlyoff/ServiceWorker/issues/468
+      const self = this;
+      if (process.env.NODE_ENV === 'production') {
+        register('/service-worker.js', {
+          ready(registration) {
+            console.log('Service worker is active.');
+          },
+          registered(registration) {
+            console.log('Service worker has been registered.');
+          },
+          cached(registration) {
+            console.log('Content has been cached for offline use.');
+          },
+          updatefound(registration) {
+            console.log('New content is downloading.');
+          },
+          updated(registration) {
+            self.setState({ appCacheUpdate: true });
+            console.log('New content is available; please refresh.');
+          },
+          offline() {
+            console.log('No internet connection found. App is running in offline mode.');
+          },
+          error(error) {
+            console.error('Error during service worker registration:', error);
           }
         });
       }
-
+    }
     window.onerror = this._onError.bind(this);
     window.addEventListener('resize', () => this.emitter.emit('windowResize'));
     document.getElementById('coriolis').addEventListener('scroll', () => this._tooltip());
@@ -346,15 +392,27 @@ export default class Coriolis extends React.Component {
    */
   render() {
     let currentMenu = this.state.currentMenu;
-
+    return <div style={{ minHeight: '100%' }} onClick={this._closeMenu}
-    return <div style={{ minHeight: '100%' }} onClick={this._closeMenu} className={ this.state.noTouch ? 'no-touch' : null }>
+                className={this.state.noTouch ? 'no-touch' : null}>
-      <Header appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu} />
+      <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate}
-      { this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) : <NotFoundPage/> }
+              currentMenu={currentMenu}/>
-      { this.state.modal }
+      <div className="announcement-container">{this.state.announcements.map(a => <Announcement
-      { this.state.tooltip }
+        text={a.text}/>)}</div>
+      {this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) :
+        <NotFoundPage/>}
+      {this.state.modal}
+      {this.state.tooltip}
       <footer>
+
         <div className="right cap">
-          <a href="https://github.com/EDCD/coriolis" target="_blank" title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
+          <a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer"
+             title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
+          <br/>
+          <a
+            href={'https://github.com/EDCD/coriolis/compare/edcd:develop@{' + window.CORIOLIS_DATE + '}...edcd:develop'}
+            target="_blank" rel="noopener noreferrer" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits
+            since last release
+            ({window.CORIOLIS_DATE})</a>
         </div>
       </footer>
     </div>;

src/app/Router.js

@@ -72,6 +72,7 @@ Router.go = function(path, state) {
   gaTrack(path);
   let ctx = new Context(path, state);
   Router.dispatch(ctx);
+
   if (!ctx.unhandled) {
     if (isStandAlone()) {
       Persist.setState(ctx);
@@ -257,9 +258,8 @@ Route.prototype.match = function(path, params) {
  * @param  {string} path Path to track
  */
 function gaTrack(path) {
-  if (window.ga) {
+  const _paq = window._paq || [];
-    window.ga('send', 'pageview', path);
+  _paq.push(['trackPageView']);
-  }
 }
 
 /**

src/app/components/ActiveLink.jsx

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

src/app/components/Announcement.jsx

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

src/app/components/AvailableModulesMenu.jsx

@@ -4,7 +4,8 @@ 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
 
@@ -19,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',
@@ -37,14 +39,25 @@ 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',
+  'tbem': 'experimental',
+  'tbrfl': 'experimental',
+  'mahr': 'experimental',
+  'rsl': 'experimental',
   'tp': 'ordnance',
   'nl': 'ordnance',
   'sc': 'scanners',
@@ -58,10 +71,26 @@ const GRPCAT = {
   'po': 'defence',
   'ec': 'defence',
   'sfn': 'defence',
-  // Standard
+  // Guardian
   'gpp': 'guardian',
   'gpc': 'guardian',
-  'ggc': 'guardian'
+  'gsrp': 'guardian',
+  'ggc': 'guardian',
+  'gfsb': 'guardian',
+  'gmrp': 'guardian',
+  'gsc': 'guardian',
+  'ghrp': 'guardian',
+
+  // Mining
+  'scl': 'mining',
+  'pwa': 'mining',
+  'sdm': 'mining',
+
+  // 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 = {
@@ -71,44 +100,47 @@ 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'],
   'structural reinforcement': ['hr', 'mrp'],
-  'dc': ['dc'],
+  'flight assists': ['dc', 'sua'],
+
   // Hardpoints
-  'lasers': ['pl', 'ul', 'bl', 'ml'],
+  'lasers': ['pl', 'ul', 'bl'],
-  'projectiles': ['mc', 'c', 'fc', 'pa', 'rg'],
+  'projectiles': ['mc', 'advmc', 'c', 'fc', 'pa', 'rg'],
-  'ordnance': ['mr', 'tp', 'nl'],
+  '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', 'xs', 'sfn', 'rcpl'],
+  'experimental': ['axmc', 'axmce', 'axmr', 'axmre', 'ntp','rfl', 'tbrfl', 'tbsc', 'tbem', 'xs', 'sfn', 'rcpl', 'dtl', 'rsl', 'mahr',],
-
+  'weapon stabilizers': ['ews'],
   // Guardian
-  'guardian': ['gpp', 'gpc', 'ggc']
+  'guardian': ['gpp', 'gpd', 'gpc', 'ggc', 'gsrp', 'gfsb', 'ghrp', 'gmrp', 'gsc'],
+
+  'mining': ['ml', 'scl', 'pwa', 'sdm', 'abl'],
 };
 
 /**
  * Available modules menu
  */
 export default class AvailableModulesMenu extends TranslatedComponent {
-
   static propTypes = {
     modules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
     onSelect: PropTypes.func.isRequired,
     diffDetails: PropTypes.func,
     m: PropTypes.object,
-    shipMass: PropTypes.number,
+    ship: PropTypes.object.isRequired,
-    warning: PropTypes.func
+    warning: PropTypes.func,
-  };
+    firstSlotId: PropTypes.string,
-
+    lastSlotId: PropTypes.string,
-  static defaultProps = {
+    activeSlotId: PropTypes.string,
-    shipMass: 0
+    slotDiv: PropTypes.object
   };
 
   /**
@@ -119,7 +151,9 @@ export default class AvailableModulesMenu extends TranslatedComponent {
   constructor(props, context) {
     super(props);
     this._hideDiff = this._hideDiff.bind(this);
+    this._showSearch = this._showSearch.bind(this);
     this.state = this._initState(props, context);
+    this.slotItems = [];// Array to hold <li> refs.
   }
 
   /**
@@ -130,27 +164,33 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   _initState(props, context) {
     let translate = context.language.translate;
-    let { m, warning, shipMass, onSelect, modules } = props;
+    let { m, warning, onSelect, modules, ship } = props;
     let list, currentGroup;
+
     let buildGroup = this._buildGroup.bind(
       this,
+      ship,
       translate,
       m,
       warning,
-      shipMass - (m && m.mass ? m.mass : 0),
       (m, event) => {
         this._hideDiff(event);
         onSelect(m);
       }
     );
-
+    let fuzzy = [];
     if (modules instanceof Array) {
       list = buildGroup(modules[0].grp, modules);
     } else {
       list = [];
       // At present time slots with grouped options (Hardpoints and Internal) can be empty
       if (m) {
-        list.push(<div className='empty-c upp' key='empty' onClick={onSelect.bind(null, null)} >{translate('empty')}</div>);
+        let emptyId = 'empty';
+        if (this.firstSlotId == null) this.firstSlotId = emptyId;
+        let keyDown = this._keyDown.bind(this, onSelect);
+        list.push(<div className='empty-c upp' key={emptyId} data-id={emptyId} onClick={onSelect.bind(null, null)}
+                       onKeyDown={keyDown} tabIndex="0"
+                       ref={slotItem => this.slotItems[emptyId] = slotItem}>{translate('empty')}</div>);
       }
 
       // Need to regroup the modules by our own categorisation
@@ -178,66 +218,126 @@ 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} className={'select-category upp'}>{translate(category)}</div>);
+                  // 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 {
+                  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) {
+                  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} className={'select-group cap'}>{translate(grp)}</div>);
+                  list.push(<div ref={(elem) => this.groupElem = elem} key={grp}
+                                 className={'select-group cap'}>{translate(grp)}</div>);
                 } else {
                   list.push(<div key={grp} className={'select-group cap'}>{translate(grp)}</div>);
                 }
               }
               list.push(buildGroup(grp, modules[grp]));
+              for (const i of modules[grp]) {
+                let mount = '';
+                if (i.mount === 'F') {
+                  mount = 'Fixed';
+                } else if (i.mount === 'G') {
+                  mount = 'Gimballed';
+                } else if (i.mount === 'T') {
+                  mount = 'Turreted';
+                }
+                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);
               }
             }
           }
         }
       }
+    }
+    let trackingFocus = false;
+    return { list, currentGroup, fuzzy, trackingFocus };
+  }
 
-    return { list, currentGroup };
+  /**
+   * 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
    * @param  {Function} translate   Translate function
    * @param  {Object} mountedModule Mounted Module
    * @param  {Function} warningFunc Warning function
-   * @param  {number} mass          Mass
    * @param  {function} onSelect    Select/Mount callback
    * @param  {string} grp           Group name
    * @param  {Array} modules        Available modules
    * @return {React.Component}      Available Module Group contents
    */
-  _buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules) {
+  _buildGroup(ship, translate, mountedModule, warningFunc, onSelect, grp, modules) {
     let prevClass = null, prevRating = null, prevName;
     let elems = [];
 
     const sortedModules = modules.sort(this._moduleOrder);
 
     // Calculate the number of items per class.  Used so we don't have long lists with only a few items in each row
-    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => { count[cls] = ++count[cls] || 1; return count; }, {});
+    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => {
+      count[cls] = ++count[cls] || 1;
+      return count;
+    }, {});
     const itemsPerClass = Math.max.apply(null, Object.keys(tmp).map(key => tmp[key]));
 
     let itemsOnThisRow = 0;
-
     for (let i = 0; i < sortedModules.length; i++) {
       let m = sortedModules[i];
+      // If m.grp is mh or mm, or m.symbol contains 'Missing' skip it
+      if (m.grp == 'mh' || m.grp == 'mm' || m.symbol.includes("Missing")) {
+        // If this is a missing module, skip it
+        continue;
+      }
       let mount = null;
       let disabled = false;
-      prevName = m.name
+      prevName = m.name;
       if (ModuleUtils.isShieldGenerator(m.grp)) {
         // Shield generators care about maximum hull mass
-        disabled = mass > m.maxmass;
+        disabled = ship.hullMass > m.maxmass;
-      } else if (m.maxmass) {
+      // If the mounted module is experimental as well, we can replace it so
-        // Thrusters care about total mass
+      // the maximum does not apply
-        disabled = mass + m.mass > m.maxmass;
+      } else if (m.experimental && (!mountedModule || !mountedModule.experimental)) {
+        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', {
@@ -247,9 +347,21 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       });
       let eventHandlers;
 
-      if (disabled || active) {
+      if (disabled) {
-        eventHandlers = {};
+        eventHandlers = {
+          onKeyDown: this._keyDown.bind(this, null),
+          onKeyUp: this._keyUp.bind(this, null)
+
+        };
       } else {
+        /**
+         * Get the ids of the first and last <li> elements in the <ul> that are focusable (i.e. are not active or disabled)
+         * Will be used to keep focus inside the <ul> on Tab and Shift-Tab while it is visible
+         */
+        if (this.firstSlotId == null) this.firstSlotId = sortedModules[i].id;
+        if (active) this.activeSlotId = sortedModules[i].id;
+        this.lastSlotId = sortedModules[i].id;
+
         let showDiff = this._showDiff.bind(this, mountedModule, m);
         let select = onSelect.bind(null, m);
 
@@ -258,37 +370,46 @@ export default class AvailableModulesMenu extends TranslatedComponent {
           onTouchStart: this._touchStart.bind(this, showDiff),
           onTouchEnd: this._touchEnd.bind(this, select),
           onMouseLeave: this._hideDiff,
-          onClick: select
+          onClick: select,
+          onKeyDown: this._keyDown.bind(this, select),
+          onKeyUp: this._keyUp.bind(this, select)
         };
       }
 
-      switch(m.mount) {
+      switch (m.mount) {
-        case 'F': mount = <MountFixed className={'lg'} />; break;
+        case 'F':
-        case 'G': mount = <MountGimballed className={'lg'}/>; break;
+          mount = <MountFixed className={'lg'}/>;
-        case 'T': mount = <MountTurret className={'lg'}/>; break;
+          break;
+        case 'G':
+          mount = <MountGimballed className={'lg'}/>;
+          break;
+        case 'T':
+          mount = <MountTurret className={'lg'}/>;
+          break;
       }
       if (m.name && m.name === prevName) {
         // elems.push(<br key={'b' + m.grp + i} />);
         itemsOnThisRow = 0;
       }
       if (itemsOnThisRow == 6 || i > 0 && sortedModules.length > 3 && itemsPerClass > 2 && m.class != prevClass && (m.rating != prevRating || m.mount)) {
-        elems.push(<br key={'b' + m.grp + i} />);
+        elems.push(<br key={'b' + m.grp + i}/>);
         itemsOnThisRow = 0;
       }
-
+      let tbIdx = (classes.indexOf('disabled') < 0) ? 0 : undefined;
       elems.push(
-        <li key={m.id} className={classes} {...eventHandlers}>
+        <li key={m.id} data-id={m.id} className={classes} {...eventHandlers} tabIndex={tbIdx}
+            ref={slotItem => this.slotItems[m.id] = slotItem}>
           {mount}
           {(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}
         </li>
       );
+
       itemsOnThisRow++;
       prevClass = m.class;
       prevRating = m.rating;
       prevName = m.name;
     }
-
+    return <ul key={'modules' + grp}>{elems}</ul>;
-    return <ul key={'modules' + grp} >{elems}</ul>;
   }
 
   /**
@@ -305,6 +426,50 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     }
   }
 
+  /**
+   * Generate tooltip content for the difference between the
+   * mounted module and the hovered modules
+   */
+  _showSearch() {
+    if (this.props.modules instanceof Array) {
+      return;
+    }
+    const mountedModule = this.props.m;
+    return (
+      <FuzzySearch
+        list={this.state.fuzzy}
+        keys={['grp', 'name']}
+        tokenize={true}
+        className={'input'}
+        width={'100%'}
+        style={{ padding: 0 }}
+        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={cn('lc', {disabled})}
+                onClick={handler}
+              >
+                {val.name}
+              </div>
+            );
+          });
+        }}
+      />
+    );
+  }
+
   /**
    * Mouse over diff handler
    * @param  {Function} showDiff diff tooltip callback
@@ -339,6 +504,41 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     this._hideDiff();
   }
 
+  /**
+   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
+   * @param  {Function} select Select module callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _keyDown(select, event) {
+    let className = event.currentTarget.attributes['class'].value;
+    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
+      select();
+      return;
+    }
+    let elemId = event.currentTarget.attributes['data-id'].value;
+    if (className.indexOf('disabled') < 0 && event.key == 'Tab') {
+      if (event.shiftKey && elemId == this.firstSlotId) {
+        event.preventDefault();
+        this.slotItems[this.lastSlotId].focus();
+        return;
+      }
+      if (!event.shiftKey && elemId == this.lastSlotId) {
+        event.preventDefault();
+        this.slotItems[this.firstSlotId].focus();
+        return;
+      }
+    }
+  }
+
+  /**
+   * Key Up
+   * @param {Function}  select Select module callback
+   * @param {SytheticEvent} event Event
+   */
+  _keyUp(select, event) {
+    // nothing here yet
+  }
+
   /**
    * Hide diff tooltip
    * @param  {SyntheticEvent} event Event
@@ -378,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;
@@ -396,6 +605,24 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     if (this.groupElem) {  // Scroll to currently selected group
       this.node.scrollTop = this.groupElem.offsetTop;
     }
+    /**
+     * Set focus on active or first slot element, if applicable.
+     */
+    if (this.slotItems[this.activeSlotId]) {
+      this.slotItems[this.activeSlotId].focus();
+    } else if (this.slotItems[this.firstSlotId]) {
+      this.slotItems[this.firstSlotId].focus();
+    }
+  }
+
+  /**
+   * Handle focus if the component updates
+   *
+   */
+  componentWillUnmount() {
+    if (this.props.slotDiv) {
+      this.props.slotDiv.focus();
+    }
   }
 
   /**
@@ -416,12 +643,12 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       <div ref={node => this.node = node}
            className={cn('select', this.props.className)}
            onScroll={this._hideDiff}
-          onClick={(e) => e.stopPropagation() }
+           onClick={(e) => e.stopPropagation()}
            onContextMenu={stopCtxPropagation}
       >
+        {this._showSearch()}
         {this.state.list}
       </div>
     );
   }
-
 }

src/app/components/BarChart.jsx

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

src/app/components/Boost.jsx

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

src/app/components/Cargo.jsx

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

src/app/components/ComparisonTable.jsx

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

src/app/components/CostSection.jsx

@@ -13,7 +13,6 @@ import { ShoppingIcon } from '../components/SvgIcons';
  * Cost Section
  */
 export default class CostSection extends TranslatedComponent {
-
   static propTypes = {
     ship: PropTypes.object.isRequired,
     code: PropTypes.string.isRequired,
@@ -33,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);
@@ -307,8 +306,8 @@ export default class CostSection extends TranslatedComponent {
           <tr className='main'>
             <th colSpan='2' className='sortable le' onClick={this._sortCostBy.bind(this,'m')}>
               {translate('module')}
-              {shipDiscount ? <u className='cap optional-hide' style={{ marginLeft: '0.5em' }}>{`[${translate('ship')} -${formats.pct(shipDiscount)}]`}</u> : null}
+              {shipDiscount ? <u className='cap optional-hide' style={{ marginLeft: '0.5em' }}>{`[${translate('ship')} ${formats.pct(-1 * shipDiscount)}]`}</u> : null}
-              {moduleDiscount ? <u className='cap optional-hide' style={{ marginLeft: '0.5em' }}>{`[${translate('modules')} -${formats.pct(moduleDiscount)}]`}</u> : null}
+              {moduleDiscount ? <u className='cap optional-hide' style={{ marginLeft: '0.5em' }}>{`[${translate('modules')} ${formats.pct(-1 * moduleDiscount)}]`}</u> : null}
             </th>
             <th className='sortable le' onClick={this._sortCostBy.bind(this, 'cr')} >{translate('credits')}</th>
           </tr>
@@ -329,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;
 
@@ -339,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(','));
   }
 
   /**
@@ -388,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/Defence.jsx

@@ -52,12 +52,12 @@ export default class Defence extends TranslatedComponent {
    * @return {React.Component} contents
    */
   render() {
-    const { ship, sys, opponentWep } = this.props;
+    const { opponent, sys, opponentWep } = this.props;
     const { language, tooltip, termtip } = this.context;
     const { formats, translate, units } = language;
     const { shield, armour, shielddamage, armourdamage } = this.state;
 
-    const pd = ship.standard[4].m;
+    const pd = opponent.standard[4].m;
 
     const shieldSourcesData = [];
     const effectiveShieldData = [];
@@ -76,6 +76,7 @@ export default class Defence extends TranslatedComponent {
       shieldSourcesData.push({ value: Math.round(shield.generator), label: translate('generator') });
       shieldSourcesData.push({ value: Math.round(shield.boosters), label: translate('boosters') });
       shieldSourcesData.push({ value: Math.round(shield.cells), label: translate('cells') });
+      shieldSourcesData.push({ value: Math.round(shield.addition), label: translate('shield addition') });
 
       if (shield.generator > 0) {
         shieldSourcesTt.push(<div key='generator'>{translate('generator') + ' ' + formats.int(shield.generator)}{units.MJ}</div>);
@@ -101,19 +102,19 @@ export default class Defence extends TranslatedComponent {
 
         // Add effective shield from resistances
         const rawMj = shield.generator + shield.boosters + shield.cells;
-        const explosiveMj = rawMj / (shield.explosive.generator * shield.explosive.boosters) - rawMj;
+        const explosiveMj = rawMj / (shield.explosive.base) - rawMj;
         if (explosiveMj != 0) effectiveShieldExplosiveTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(explosiveMj)}{units.MJ}</div>);
-        const kineticMj = rawMj / (shield.kinetic.generator * shield.kinetic.boosters) - rawMj;
+        const kineticMj = rawMj / (shield.kinetic.base) - rawMj;
         if (kineticMj != 0) effectiveShieldKineticTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(kineticMj)}{units.MJ}</div>);
-        const thermalMj = rawMj / (shield.thermal.generator * shield.thermal.boosters) - rawMj;
+        const thermalMj = rawMj / (shield.thermal.base) - rawMj;
         if (thermalMj != 0) effectiveShieldThermalTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(thermalMj)}{units.MJ}</div>);
 
         // Add effective shield from power distributor SYS pips
         if (shield.absolute.sys != 1) {
-          effectiveShieldAbsoluteTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.absolute.sys - rawMj)}{units.MJ}</div>);
+          effectiveShieldAbsoluteTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.absolute.total - rawMj)}{units.MJ}</div>);
-          effectiveShieldExplosiveTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.explosive.sys - rawMj)}{units.MJ}</div>);
+          effectiveShieldExplosiveTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.explosive.total - rawMj / shield.explosive.base)}{units.MJ}</div>);
-          effectiveShieldKineticTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.kinetic.sys - rawMj)}{units.MJ}</div>);
+          effectiveShieldKineticTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.kinetic.total - rawMj / shield.kinetic.base)}{units.MJ}</div>);
-          effectiveShieldThermalTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.thermal.sys - rawMj)}{units.MJ}</div>);
+          effectiveShieldThermalTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.int(rawMj / shield.thermal.total - rawMj / shield.thermal.base)}{units.MJ}</div>);
         }
       }
 
@@ -159,18 +160,21 @@ export default class Defence extends TranslatedComponent {
     const effectiveArmourExplosiveTt = [];
     const effectiveArmourKineticTt = [];
     const effectiveArmourThermalTt = [];
+    const effectiveArmourCausticTt = [];
     if (armour.bulkheads > 0) {
       armourSourcesTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>);
       effectiveArmourAbsoluteTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>);
       effectiveArmourExplosiveTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>);
       effectiveArmourKineticTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>);
       effectiveArmourThermalTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>);
+      effectiveArmourCausticTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>);
       if (armour.reinforcement > 0) {
         armourSourcesTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.int(armour.reinforcement)}</div>);
         effectiveArmourAbsoluteTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.int(armour.reinforcement)}</div>);
         effectiveArmourExplosiveTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.int(armour.reinforcement)}</div>);
         effectiveArmourKineticTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.int(armour.reinforcement)}</div>);
         effectiveArmourThermalTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.int(armour.reinforcement)}</div>);
+        effectiveArmourCausticTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.int(armour.reinforcement)}</div>);
       }
     }
 
@@ -183,17 +187,22 @@ export default class Defence extends TranslatedComponent {
     const armourDamageTakenExplosiveTt = [];
     armourDamageTakenExplosiveTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.pct1(armour.explosive.bulkheads)}</div>);
     armourDamageTakenExplosiveTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.pct1(armour.explosive.reinforcement)}</div>);
-    if (armour.explosive.bulkheads * armour.explosive.reinforcement != 1) effectiveArmourExplosiveTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(rawArmour / (armour.explosive.bulkheads * armour.explosive.reinforcement) - rawArmour)}</div>);
+    if (armour.explosive.total != 1) effectiveArmourExplosiveTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(rawArmour / armour.explosive.total - rawArmour)}</div>);
 
     const armourDamageTakenKineticTt = [];
     armourDamageTakenKineticTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.pct1(armour.kinetic.bulkheads)}</div>);
     armourDamageTakenKineticTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.pct1(armour.kinetic.reinforcement)}</div>);
-    if (armour.kinetic.bulkheads * armour.kinetic.reinforcement != 1) effectiveArmourKineticTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(rawArmour / (armour.kinetic.bulkheads * armour.kinetic.reinforcement) - rawArmour)}</div>);
+    if (armour.kinetic.total != 1) effectiveArmourKineticTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(rawArmour / armour.kinetic.total - rawArmour)}</div>);
 
     const armourDamageTakenThermalTt = [];
     armourDamageTakenThermalTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.pct1(armour.thermal.bulkheads)}</div>);
     armourDamageTakenThermalTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.pct1(armour.thermal.reinforcement)}</div>);
-    if (armour.thermal.bulkheads * armour.thermal.reinforcement != 1) effectiveArmourThermalTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(rawArmour / (armour.thermal.bulkheads * armour.thermal.reinforcement) - rawArmour)}</div>);
+    if (armour.thermal.total != 1) effectiveArmourThermalTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(rawArmour / armour.thermal.total - rawArmour)}</div>);
+
+    const armourDamageTakenCausticTt = [];
+    armourDamageTakenCausticTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.pct1(armour.caustic.bulkheads)}</div>);
+    armourDamageTakenCausticTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.pct1(armour.caustic.reinforcement)}</div>);
+    if (armour.thermal.total != 1) effectiveArmourCausticTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(rawArmour / armour.caustic.total - rawArmour)}</div>);
 
     const effectiveArmourData = [];
     const effectiveAbsoluteArmour = armour.total / armour.absolute.total;
@@ -204,12 +213,15 @@ export default class Defence extends TranslatedComponent {
     effectiveArmourData.push({ value: Math.round(effectiveKineticArmour), label: translate('kinetic'), tooltip: effectiveArmourKineticTt });
     const effectiveThermalArmour = armour.total / armour.thermal.total;
     effectiveArmourData.push({ value: Math.round(effectiveThermalArmour), label: translate('thermal'), tooltip: effectiveArmourThermalTt });
+    const effectiveCausticArmour = armour.total / armour.caustic.total;
+    effectiveArmourData.push({ value: Math.round(effectiveCausticArmour), label: translate('caustic'), tooltip: effectiveArmourCausticTt });
 
     const armourDamageTakenData = [];
     armourDamageTakenData.push({ value: Math.round(armour.absolute.total * 100), label: translate('absolute'), tooltip: armourDamageTakenTt });
     armourDamageTakenData.push({ value: Math.round(armour.explosive.total * 100), label: translate('explosive'), tooltip: armourDamageTakenExplosiveTt });
     armourDamageTakenData.push({ value: Math.round(armour.kinetic.total * 100), label: translate('kinetic'), tooltip: armourDamageTakenKineticTt });
     armourDamageTakenData.push({ value: Math.round(armour.thermal.total * 100), label: translate('thermal'), tooltip: armourDamageTakenThermalTt });
+    armourDamageTakenData.push({ value: Math.round(armour.caustic.total * 100), label: translate('caustic'), tooltip: armourDamageTakenCausticTt });
 
     return (
       <span id='defence'>

src/app/components/EngagementRange.jsx

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

src/app/components/EngineProfile.jsx

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

src/app/components/FSDProfile.jsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
 import LineChart from '../components/LineChart';
-import Slider from '../components/Slider';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import Module from '../shipyard/Module';
 import * as Calc from '../shipyard/Calculations';
 
 /**
@@ -57,7 +52,7 @@ export default class FSDProfile extends TranslatedComponent {
    */
   _calcMaxRange(ship, fuel, mass) {
     // Obtain the maximum range
-    return Calc.jumpRange(mass, ship.standard[2].m, Math.min(fuel, ship.standard[2].m.getMaxFuelPerJump()));
+    return Calc.jumpRange(mass, ship.standard[2].m, Math.min(fuel, ship.standard[2].m.getMaxFuelPerJump()), ship);
   }
 
   /**
@@ -77,7 +72,7 @@ export default class FSDProfile extends TranslatedComponent {
     const maxMass = thrusters.getMaxMass();
     const mass = ship.unladenMass + fuel + cargo;
     const minRange = 0;
-    const maxRange = Calc.jumpRange(minMass + fsd.getMaxFuelPerJump(), fsd, fsd.getMaxFuelPerJump());
+    const maxRange = Calc.jumpRange(minMass + fsd.getMaxFuelPerJump(), fsd, fsd.getMaxFuelPerJump(), ship);
     // Add a mark at our current mass
     const mark = Math.min(mass, maxMass);
 

src/app/components/Fuel.jsx

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

src/app/components/HardpointSlot.jsx

@@ -2,12 +2,21 @@ import React from 'react';
 import cn from 'classnames';
 import Slot from './Slot';
 import Persist from '../stores/Persist';
-import { DamageAbsolute, DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret, ListModifications, Modified } from './SvgIcons';
+import {
+  DamageAbsolute,
+  DamageKinetic,
+  DamageThermal,
+  DamageExplosive,
+  MountFixed,
+  MountGimballed,
+  MountTurret,
+  ListModifications,
+  Modified
+} from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import { blueprintTooltip } from '../utils/BlueprintFunctions';
 
-
 /**
  * Hardpoint / Utility Slot
  */
@@ -27,7 +36,7 @@ export default class HardpointSlot extends Slot {
    * @return {string}               Label
    */
   _getMaxClassLabel(translate) {
-    return translate(['U','S','M','L','H'][this.props.maxClass]);
+    return translate(['U', 'S', 'M', 'L', 'H'][this.props.maxClass]);
   }
 
   /**
@@ -66,42 +75,78 @@ export default class HardpointSlot extends Slot {
       return <div className={className} draggable='true' onDragStart={drag} onDragEnd={drop}>
         <div className={'cb'}>
           <div className={'l'}>
-          {m.mount && m.mount == 'F' ? <span onMouseOver={termtip.bind(null, 'fixed')} onMouseOut={tooltip.bind(null, null)}><MountFixed /></span> : ''}
+            {m.mount && m.mount == 'F' ? <span onMouseOver={termtip.bind(null, 'fixed')}
-          {m.mount && m.mount == 'G' ? <span onMouseOver={termtip.bind(null, 'gimballed')} onMouseOut={tooltip.bind(null, null)}><MountGimballed /></span> : ''}
+                                               onMouseOut={tooltip.bind(null, null)}><MountFixed/></span> : ''}
-          {m.mount && m.mount == 'T' ? <span onMouseOver={termtip.bind(null, 'turreted')} onMouseOut={tooltip.bind(null, null)}><MountTurret /></span> : ''}
+            {m.mount && m.mount == 'G' ? <span onMouseOver={termtip.bind(null, 'gimballed')}
-          {m.getDamageDist() && m.getDamageDist().K ? <span onMouseOver={termtip.bind(null, 'kinetic')} onMouseOut={tooltip.bind(null, null)}><DamageKinetic /></span> : ''}
+                                               onMouseOut={tooltip.bind(null, null)}><MountGimballed/></span> : ''}
-          {m.getDamageDist() && m.getDamageDist().T ? <span onMouseOver={termtip.bind(null, 'thermal')} onMouseOut={tooltip.bind(null, null)}><DamageThermal /></span> : ''}
+            {m.mount && m.mount == 'T' ? <span onMouseOver={termtip.bind(null, 'turreted')}
-          {m.getDamageDist() && m.getDamageDist().E ? <span onMouseOver={termtip.bind(null, 'explosive')} onMouseOut={tooltip.bind(null, null)}><DamageExplosive /></span> : ''}
+                                               onMouseOut={tooltip.bind(null, null)}><MountTurret/></span> : ''}
-          {m.getDamageDist() && m.getDamageDist().A ? <span onMouseOver={termtip.bind(null, 'absolute')} onMouseOut={tooltip.bind(null, null)}><DamageAbsolute /></span> : ''}
+            {m.getDamageDist() && m.getDamageDist().K ? <span onMouseOver={termtip.bind(null, 'kinetic')}
-          {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 }
+                                                              onMouseOut={tooltip.bind(null, null)}><DamageKinetic/></span> : ''}
+            {m.getDamageDist() && m.getDamageDist().T ? <span onMouseOver={termtip.bind(null, 'thermal')}
+                                                              onMouseOut={tooltip.bind(null, null)}><DamageThermal/></span> : ''}
+            {m.getDamageDist() && m.getDamageDist().E ? <span onMouseOver={termtip.bind(null, 'explosive')}
+                                                              onMouseOut={tooltip.bind(null, null)}><DamageExplosive/></span> : ''}
+            {m.getDamageDist() && m.getDamageDist().A ? <span onMouseOver={termtip.bind(null, 'absolute')}
+                                                              onMouseOut={tooltip.bind(null, null)}><DamageAbsolute/></span> : ''}
+            {classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r'
+                                                                                                        onMouseOver={termtip.bind(null, modTT)}
+                                                                                                        onMouseOut={tooltip.bind(null, null)}><Modified/></span> : null}
           </div>
 
           <div className={'r'}>{formats.round(m.getMass())}{u.T}</div>
         </div>
         <div className={'cb'}>
-          { m.getDps() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getClip() ? 'dpssdps' : 'dps')} onMouseOut={tooltip.bind(null, null)}>{translate('DPS')}: {formats.round1(m.getDps())} { m.getClip() ? <span>({formats.round1((m.getClip() * m.getDps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload())) })</span> : null }</div> : null }
+          {m.getDps() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getClip() ? 'dpssdps' : 'dps')}
-          { m.getEps() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getClip() ? 'epsseps' : 'eps')} onMouseOut={tooltip.bind(null, null)}>{translate('EPS')}: {formats.round1(m.getEps())}{u.MW} { m.getClip() ? <span>({formats.round1((m.getClip() * m.getEps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload())) }{u.MW})</span> : null }</div> : null }
+                             onMouseOut={tooltip.bind(null, null)}>{translate('DPS')}: {formats.round1(m.getDps())} {m.getClip() ?
-          { m.getHps() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getClip() ? 'hpsshps' : 'hps')} onMouseOut={tooltip.bind(null, null)}>{translate('HPS')}: {formats.round1(m.getHps())} { m.getClip() ? <span>({formats.round1((m.getClip() * m.getHps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload())) })</span> : null }</div> : null }
+            <span>({formats.round1(m.getSDps())})</span> : null}</div> : null}
-          { m.getDps() && m.getEps() ? <div className={'l'} onMouseOver={termtip.bind(null, 'dpe')} onMouseOut={tooltip.bind(null, null)}>{translate('DPE')}: {formats.f1(m.getDps() / m.getEps())}</div> : null }
+          {m.getDamage() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getDamage() ? 'shotdmg' : 'shotdmg')}
-          { m.getRoF() ? <div className={'l'} onMouseOver={termtip.bind(null, 'rof')} onMouseOut={tooltip.bind(null, null)}>{translate('ROF')}: {formats.f1(m.getRoF())}{u.ps}</div> : null }
+                                onMouseOut={tooltip.bind(null, null)}>{translate('shotdmg')}: {formats.round1(m.getDamage())}</div> : null}
-          { m.getRange() ? <div className={'l'}>{translate('range', m.grp)} {formats.f1(m.getRange() / 1000)}{u.km}</div> : null }
+          {m.getEps() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getClip() ? 'epsseps' : 'eps')}
-          { m.getScanTime() ? <div className={'l'}>{translate('scantime')} {formats.f1(m.getScanTime())}{u.s}</div> : null }
+                             onMouseOut={tooltip.bind(null, null)}>{translate('EPS')}: {formats.round1(m.getEps())}{u.MW} {m.getClip() ?
-          { m.getFalloff() ? <div className={'l'}>{translate('falloff')} {formats.round(m.getFalloff() / 1000)}{u.km}</div> : null }
+            <span>({formats.round1(m.getEps() * m.getSustainedFactor())}{u.MW})</span> : null}</div> : null}
-          { m.getShieldBoost() ? <div className={'l'}>+{formats.pct1(m.getShieldBoost())}</div> : null }
+          {m.getHps() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getClip() ? 'hpsshps' : 'hps')}
-          { m.getAmmo() ? <div className={'l'}>{translate('ammunition')}: {formats.int(m.getClip())}/{formats.int(m.getAmmo())}</div> : null }
+                             onMouseOut={tooltip.bind(null, null)}>{translate('HPS')}: {formats.round1(m.getHps())} {m.getClip() ?
-          { m.getReload() ? <div className={'l'}>{translate('reload')}: {formats.round(m.getReload())}{u.s}</div> : null }
+            <span>({formats.round1(m.getHps() * m.getSustainedFactor())})</span> : null}</div> : null}
-          { m.getShotSpeed() ? <div className={'l'}>{translate('shotspeed')}: {formats.int(m.getShotSpeed())}{u.mps}</div> : null }
+          {m.getDps() && m.getEps() ? <div className={'l'} onMouseOver={termtip.bind(null, 'dpe')}
-          { m.getPiercing() ? <div className={'l'}>{translate('piercing')}: {formats.int(m.getPiercing())}</div> : null }
+                                           onMouseOut={tooltip.bind(null, null)}>{translate('DPE')}: {formats.f1(m.getDps() / m.getEps())}</div> : null}
-          { m.getJitter() ? <div className={'l'}>{translate('jitter')}: {formats.f2(m.getJitter())}°</div> : null }
+          {m.getRoF() ? <div className={'l'} onMouseOver={termtip.bind(null, 'rof')}
-          { showModuleResistances && m.getExplosiveResistance() ? <div className='l'>{translate('explres')}: {formats.pct(m.getExplosiveResistance())}</div> : null }
+                             onMouseOut={tooltip.bind(null, null)}>{translate('ROF')}: {formats.f1(m.getRoF())}{u.ps}</div> : null}
-          { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
+          {m.getRange() ? <div
-          { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
+            className={'l'}>{translate('range', m.grp)} {formats.f1(m.getRange() / 1000)}{u.km}</div> : null}
-          { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
+          {m.getScanTime() ? <div
-          { m && validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+            className={'l'}>{translate('scantime')} {formats.f1(m.getScanTime())}{u.s}</div> : null}
+          {m.getFalloff() ? <div
+            className={'l'}>{translate('falloff')} {formats.round(m.getFalloff() / 1000)}{u.km}</div> : null}
+          {m.getShieldBoost() ? <div className={'l'}>+{formats.pct1(m.getShieldBoost())}</div> : null}
+          {m.getAmmo() ? <div
+            className={'l'}>{translate('ammunition')}: {formats.int(m.getClip())}/{formats.int(m.getAmmo())}</div> : null}
+          {m.getReload() ? <div className={'l'}>{translate('wep_reload')}: {formats.round(m.getReload())}{u.s}</div> : null}
+          {m.getShotSpeed() ? <div
+            className={'l'}>{translate('shotspeed')}: {formats.int(m.getShotSpeed())}{u.mps}</div> : null}
+          {m.getPiercing() ? <div className={'l'}>{translate('piercing')}: {formats.int(m.getPiercing())}</div> : null}
+          {m.getJitter() ? <div className={'l'}>{translate('jitter')}: {formats.f2(m.getJitter())}°</div> : null}
+          {m.getScanAngle() ? <div className={'l'}>{translate('scan angle')}: {formats.f2(m.getScanAngle())}°</div> : null}
+          {m.getScanRange() ? <div className={'l'}>{translate('scan range')}: {formats.int(m.getScanRange())}{u.m}</div> : null}
+          {m.getMaxAngle() ? <div className={'l'}>{translate('max angle')}: {formats.f2(m.getMaxAngle())}°</div> : null}
+          {showModuleResistances && m.getExplosiveResistance() ? <div
+            className='l'>{translate('explres')}: {formats.pct(m.getExplosiveResistance())}</div> : null}
+          {showModuleResistances && m.getKineticResistance() ? <div
+            className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null}
+          {showModuleResistances && m.getThermalResistance() ? <div
+            className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null}
+          {m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null}
+          {m.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>;
     } else {
       return <div className={'empty'}>{translate('empty')}</div>;
     }
   }
+
 }

src/app/components/HardpointSlotSection.jsx

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

src/app/components/Header.jsx

@@ -9,11 +9,13 @@ import { Cogs, CoriolisLogo, Hammer, Help, Rocket, StatsBars } from './SvgIcons'
 import { Ships } from 'coriolis-data/dist';
 import Persist from '../stores/Persist';
 import { toDetailedExport } from '../shipyard/Serializer';
+import Ship from '../shipyard/Ship';
 import ModalDeleteAll from './ModalDeleteAll';
 import ModalExport from './ModalExport';
 import ModalHelp from './ModalHelp';
 import ModalImport from './ModalImport';
 import Slider from './Slider';
+import Announcement from './Announcement';
 import { outfitURL } from '../utils/UrlGenerators';
 
 const SIZE_MIN = 0.65;
@@ -74,8 +76,11 @@ export default class Header extends TranslatedComponent {
     this._openShips = this._openMenu.bind(this, 's');
     this._openBuilds = this._openMenu.bind(this, 'b');
     this._openComp = this._openMenu.bind(this, 'comp');
+    this._openAnnounce = this._openMenu.bind(this, 'announce');
+    this._getAnnouncementsMenu = this._getAnnouncementsMenu.bind(this);
     this._openSettings = this._openMenu.bind(this, 'settings');
     this._showHelp = this._showHelp.bind(this);
+    this.update = this.update.bind(this);
     this.languageOptions = [];
     this.insuranceOptions = [];
     this.state = {
@@ -306,7 +311,7 @@ export default class Header extends TranslatedComponent {
   _getShipsMenu() {
     let shipList = [];
 
-    for (let s in Ships) {
+    for (let s of this.shipOrder) {
       shipList.push(<ActiveLink key={s} href={outfitURL(s)} className='block'>{Ships[s].properties.name}</ActiveLink>);
     }
 
@@ -372,6 +377,32 @@ export default class Header extends TranslatedComponent {
     );
   }
 
+  /**
+   * Generate the announcement menu
+   * @return {React.Component} Menu
+   */
+  _getAnnouncementsMenu() {
+    let announcements;
+    let translate = this.context.language.translate;
+
+    if (this.props.announcements) {
+      announcements = [];
+      for (let announce of this.props.announcements) {
+        if (announce.expiry < Date.now()) {
+          continue;
+        }
+        announcements.push(<Announcement text={announce.text} />);
+        announcements.push(<hr/>);
+      }
+    }
+    return (
+      <div className='menu-list' onClick={ (e) => e.stopPropagation() } style={{ whiteSpace: 'nowrap' }}>
+        {announcements}
+        <hr />
+      </div>
+    );
+  }
+
   /**
    * Generate the settings menu
    * @return {React.Component} Menu
@@ -494,6 +525,15 @@ export default class Header extends TranslatedComponent {
     }
   }
 
+  async update() {
+    const reg = await navigator.serviceWorker.getRegistration();
+    if (!reg || !reg.waiting) {
+      return window.location.reload();
+    }
+    reg.waiting.postMessage('skipWaiting');
+    window.location.reload();
+  }
+
   /**
    * Render the header
    * @return {React.Component} Header
@@ -504,7 +544,10 @@ export default class Header extends TranslatedComponent {
     let hasBuilds = Persist.hasBuilds();
     return (
       <header>
-        {this.props.appCacheUpdate && <div id="app-update" onClick={() => window.location.reload() }>{translate('PHRASE_UPDATE_RDY')}</div>}
+        {this.props.appCacheUpdate && <div id="app-update" onClick={this.update}>{translate('PHRASE_UPDATE_RDY')}</div>}
+        {this.props.appCacheUpdate ? <a className={'view-changes'} href={'https://github.com/EDCD/coriolis/compare/edcd:develop@{' + window.CORIOLIS_DATE + '}...edcd:develop'} target="_blank">
+          {'View Release Changes'}
+        </a> : null}
         <Link className='l' href='/' style={{ marginRight: '1em' }} title='Home'><CoriolisLogo className='icon xl' /></Link>
 
         <div className='l menu'>
@@ -528,6 +571,23 @@ export default class Header extends TranslatedComponent {
           {openedMenu == 'comp' ? this._getComparisonsMenu() : null}
         </div>
 
+        <div className='l menu'>
+          <div className={cn('menu-header', { selected: openedMenu == 'announce', disabled: this.props.announcements.length === 0})} onClick={this.props.announcements.length !== 0 && this._openAnnounce}>
+            <span className='menu-item-label'>{translate('announcements')}</span>
+          </div>
+          {openedMenu == 'announce' ? this._getAnnouncementsMenu() : null}
+        </div>
+
+        {window.location.origin.search('.edcd.io') >= 0 ?
+          <div className='l menu'>
+            <a href="https://youtu.be/4SvnLcefhtI" target="_blank">
+              <div className={cn('menu-header')}>
+                <Rocket className='warning'/><span className='menu-item-label'>{translate('please migrate to coriolis.io')}</span>
+              </div>
+            </a>
+          </div> : null
+        }
+
         <div className='r menu'>
           <div className={cn('menu-header', { selected: openedMenu == 'settings' })} onClick={this._openSettings}>
             <Cogs className='xl warning'/><span className='menu-item-label'>{translate('settings')}</span>

src/app/components/InternalSlot.jsx

@@ -63,6 +63,9 @@ export default class InternalSlot extends Slot {
           { m.getSpinup() ? <div className={'l'}>{translate('spinup')}: {formats.f1(m.getSpinup())}{u.s}</div> : null }
           { m.getDuration() ? <div className={'l'}>{translate('duration')}: {formats.f1(m.getDuration())}{u.s}</div> : null }
           { m.grp === 'scb' ? <div className={'l'}>{translate('cells')}: {formats.int(m.getAmmo() + 1)}</div> : null }
+          { m.grp === 'gsrp' ? <div className={'l'}>{translate('shield addition')}: {formats.f1(m.getShieldAddition())}{u.MJ}</div> : null }
+          { m.grp === 'gfsb' ? <div className={'l'}>{translate('jump addition')}: {formats.f1(m.getJumpBoost())}{u.LY}</div> : null }
+          { m.grp === 'gs' ? <div className={'l'}>{translate('shield addition')}: {formats.f1(m.getShieldAddition())}{u.MJ}</div> : null }
           { m.getShieldReinforcement() ? <div className={'l'}>{translate('shieldreinforcement')}: {formats.f1(m.getDuration() * m.getShieldReinforcement())}{u.MJ}</div> : null }
           { m.getShieldReinforcement() ? <div className={'l'}>{translate('total')}: {formats.int((m.getAmmo() + 1) * (m.getDuration() * m.getShieldReinforcement()))}{u.MJ}</div> : null }
           { m.repair ? <div className={'l'}>{translate('repair')}: {m.repair}</div> : null }
@@ -75,17 +78,18 @@ export default class InternalSlot extends Slot {
           { m.rangeLS ? <div className={'l'}>{translate('range')}: {m.rangeLS}{u.Ls}</div> : null }
           { m.rangeLS === null ? <div className={'l'}>∞{u.Ls}</div> : null }
           { m.rangeRating ? <div className={'l'}>{translate('range')}: {m.rangeRating}</div> : null }
-          { m.maximum ? <div className={'l'}>{translate('max')}: {(m.maximum)}</div> : null }
           { m.passengers ? <div className={'l'}>{translate('passengers')}: {m.passengers}</div> : null }
           { m.getRegenerationRate() ? <div className='l'>{translate('regen')}: {formats.round1(m.getRegenerationRate())}{u.ps}</div> : null }
           { m.getBrokenRegenerationRate() ? <div className='l'>{translate('brokenregen')}: {formats.round1(m.getBrokenRegenerationRate())}{u.ps}</div> : null }
           { showModuleResistances && m.getExplosiveResistance() ? <div className='l'>{translate('explres')}: {formats.pct(m.getExplosiveResistance())}</div> : null }
           { 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 }
+          { showModuleResistances && m.getCausticResistance() ? <div className='l'>{translate('causres')}: {formats.pct(m.getCausticResistance())}</div> : null }
           { m.getHullReinforcement() ? <div className='l'>{translate('armour')}: {formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)}</div> : null }
           { m.getProtection() ? <div className='l'>{translate('protection')}: {formats.rPct(m.getProtection())}</div> : null }
           { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
-	  { m && validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+          { m.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>;
     } else {

src/app/components/InternalSlotSection.jsx

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

src/app/components/JumpRange.jsx

@@ -1,12 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
 import LineChart from '../components/LineChart';
 import Slider from '../components/Slider';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import Module from '../shipyard/Module';
 import * as Calc from '../shipyard/Calculations';
 
 /**
@@ -61,7 +57,7 @@ export default class JumpRange extends TranslatedComponent {
     const fuel = this.state.fuelLevel * ship.fuelCapacity;
 
     // Obtain the jump range
-    return Calc.jumpRange(ship.unladenMass + fuel + cargo, fsd, fuel);
+    return Calc.jumpRange(ship.unladenMass + fuel + cargo, fsd, fuel, ship);
   }
 
   /**

src/app/components/LineChart.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Measure from 'react-measure';
+import ContainerDimensions from 'react-container-dimensions';
 import * as d3 from 'd3';
 import TranslatedComponent from './TranslatedComponent';
 
@@ -67,21 +67,17 @@ export default class LineChart extends TranslatedComponent {
       xAxisScale,
       yScale,
       tipHeight: 2 + (1.2 * (series ? series.length : 0.8)),
-      dimensions: {
-        width: 100,
-        height: 100
-      }
     };
   }
 
   /**
    * Update tooltip content
    * @param  {number} xPos x coordinate
+   * @param {number} width current container width
    */
-  _tooltip(xPos) {
+  _tooltip(xPos, width) {
     let { xLabel, yLabel, xUnit, yUnit, func, series } = this.props;
     let { xScale, yScale } = this.state;
-    let { width } = this.state.dimensions;
     let { formats, translate } = this.context.language;
     let x0 = xScale.invert(xPos),
         y0 = func(x0),
@@ -120,11 +116,11 @@ export default class LineChart extends TranslatedComponent {
    * 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) {
+  _updateDimensions(props, scale, width) {
     const { xMax, xMin, yMin, yMax } = props;
-    const { width, height } = this.state.dimensions;
     const innerWidth = width - MARGIN.left - MARGIN.right;
     const outerHeight = Math.round(width * props.aspect);
     const innerHeight = outerHeight - MARGIN.top - MARGIN.bottom;
@@ -149,10 +145,11 @@ export default class LineChart extends TranslatedComponent {
   /**
    * Move and update tooltip
    * @param  {SyntheticEvent} e Event
+   * @param {number} width current container width
    */
-  _moveTip(e) {
+  _moveTip(e, width) {
     let clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    this._tooltip(Math.round(clientX - e.currentTarget.getBoundingClientRect().left));
+    this._tooltip(Math.round(clientX - e.currentTarget.getBoundingClientRect().left), width);
   }
 
   /**
@@ -227,18 +224,17 @@ export default class LineChart extends TranslatedComponent {
    * @return {React.Component} Chart SVG
    */
   render() {
-    const { innerWidth, outerHeight, innerHeight } = this._updateDimensions(this.props, this.context.sizeRatio);
+    return (
-    const { width, height } = this.state.dimensions;
+      <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 line = this.line;
           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 (
-      <Measure width='100%' whitelist={['width', 'top']} onMeasure={ (dimensions) => { this.setState({ dimensions }); }}>
             <div width={width} height={height}>
               <svg style={{ width: '100%', height: outerHeight }}>
                 <g transform={`translate(${MARGIN.left},${MARGIN.top})`}>
@@ -271,13 +267,15 @@ export default class LineChart extends TranslatedComponent {
                     onTouchStart={this._showTip}
                     onMouseLeave={this._hideTip}
                     onTouchEnd={this._hideTip}
-                onMouseMove={this._moveTip}
+                    onMouseMove={e => this._moveTip(e, width)}
-                onTouchMove={this._moveTip}
+                    onTouchMove={e => this._moveTip(e, width)}
                   />
                 </g>
               </svg>
             </div>
-      </Measure>
+          );
+        }}
+      </ContainerDimensions>
     );
   }
 }

src/app/components/ModalDeleteAll.jsx

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

src/app/components/ModalImport.jsx

@@ -11,7 +11,10 @@ import * as ModuleUtils from '../shipyard/ModuleUtils';
 import { fromDetailedBuild } from '../shipyard/Serializer';
 import { Download } from './SvgIcons';
 import { outfitURL } from '../utils/UrlGenerators';
-import * as CompanionApiUtils from '../utils/CompanionApiUtils';
+import { shipFromJson, shipModelFromJson } from '../utils/CompanionApiUtils';
+import { shipFromLoadoutJSON } from '../utils/JournalUtils';
+
+const zlib = require('pako');
 
 const textBuildRegex = new RegExp('^\\[([\\w \\-]+)\\]\n');
 const lineRegex = new RegExp('^([\\dA-Z]{1,2}): (\\d)([A-I])[/]?([FGT])?([SD])? ([\\w\\- ]+)');
@@ -86,6 +89,7 @@ export default class ModalImport extends TranslatedComponent {
 
 
   static propTypes = {
+    importString: PropTypes.string, // Optional: Default data for import modal
     builds: PropTypes.object,  // Optional: Import object
   };
 
@@ -99,11 +103,12 @@ export default class ModalImport extends TranslatedComponent {
     this.state = {
       builds: props.builds,
       canEdit: !props.builds,
+      loadoutEvent: null,
       comparisons: null,
       shipDiscount: null,
       moduleDiscount: null,
       errorMsg: null,
-      importString: null,
+      importString: props.importString || null,
       importValid: false,
       insurance: null
     };
@@ -111,12 +116,28 @@ export default class ModalImport extends TranslatedComponent {
     this._process = this._process.bind(this);
     this._import = this._import.bind(this);
     this._importBackup = this._importBackup.bind(this);
+    this._importLoadout = this._importLoadout.bind(this);
     this._importDetailedArray = this._importDetailedArray.bind(this);
     this._importTextBuild = this._importTextBuild.bind(this);
     this._importCompanionApiBuild = this._importCompanionApiBuild.bind(this);
     this._validateImport = this._validateImport.bind(this);
   }
 
+  /**
+   * Import a Loadout event from Elite: Dangerous journal files
+   * @param  {Object} data Loadout event
+   * @throws {string} If import fails
+   */
+  _importLoadout(data) {
+    if (data && data.Ship && data.Modules) {
+      const deflated = zlib.deflate(JSON.stringify(data), { to: 'string' });
+      let compressed = btoa(deflated);
+      this.setState({loadoutEvent: compressed});
+    } else {
+      throw 'Loadout event must contain Ship and Modules';
+    }
+  }
+
   /**
    * Import a Coriolis backup
    * @param  {Object} importData Backup Data
@@ -126,7 +147,11 @@ export default class ModalImport extends TranslatedComponent {
     if (importData.builds && typeof importData.builds == 'object') {
       for (let shipId in importData.builds) {
         for (let buildName in importData.builds[shipId]) {
+          try {
             validateBuild(shipId, importData.builds[shipId][buildName], buildName);
+          } catch (err) {
+            delete importData.builds[shipId][buildName];
+          }
         }
       }
       this.setState({ builds: importData.builds });
@@ -155,7 +180,7 @@ export default class ModalImport extends TranslatedComponent {
     }
     // Check for module discount
     if (!isNaN(importData.moduleDiscount)) {
-      this.setState({ shipDiscount: importData.moduleDiscount * 1 });
+      this.setState({ moduleDiscount: importData.moduleDiscount * 1 });
     }
 
     if (typeof importData.insurance == 'string') {
@@ -191,8 +216,8 @@ export default class ModalImport extends TranslatedComponent {
    * @throws {string} if parse/import fails
    */
   _importCompanionApiBuild(build) {
-    const shipModel = CompanionApiUtils.shipModelFromJson(build);
+    const shipModel = shipModelFromJson(build);
-    const ship = CompanionApiUtils.shipFromJson(build);
+    const ship = shipFromJson(build);
 
     let builds = {};
     builds[shipModel] = {};
@@ -298,6 +323,30 @@ export default class ModalImport extends TranslatedComponent {
     this.setState({ builds, singleBuild: true });
   }
 
+  /**
+   * Import SLEF formatted builds. Sets state to a map of the builds on success
+   * and flags if there was only a single build.
+   *
+   * @param  {string} importData - Array of the list of builds.
+   * @throws {string} If parse / import fails
+   */
+  _importSlefBuilds(importData) {
+    const builds = importData.reduce((memo, { data }) => {
+      const shipModel = shipModelFromJson(data);
+      const ship = shipFromLoadoutJSON(data);
+      const shipTemplate = Ships[shipModel];
+      const shipName = data.ShipName || shipTemplate.properties.name;
+
+      const key = `Imported ${shipName}`;
+      memo[shipModel] = {};
+      memo[shipModel][key] = ship.toString();
+
+      return memo;
+    }, {});
+
+    this.setState({ builds, singleBuild: Object.keys(builds).length === 1 });
+  }
+
   /**
    * Validate the import string / text box contents
    * @param  {SyntheticEvent} event Event
@@ -332,8 +381,10 @@ export default class ModalImport extends TranslatedComponent {
           throw 'Must be an object or array!';
         }
 
-        if (importData.modules != null && importData.modules.Armour != null) { // Only the companion API has this information
+        if (importData?.[0]?.header?.appName) { // has SLEF envelope?
-          this._importCompanionApiBuild(importData); // Single sihp definition
+          this._importSlefBuilds(importData);
+        } else if (importData.modules != null && importData.modules.Armour != null) { // Only the companion API has this information
+          this._importCompanionApiBuild(importData); // Single ship definition
         } else if (importData.ship != null && importData.ship.modules != null && importData.ship.modules.Armour != null) { // Only the companion API has this information
           this._importCompanionApiBuild(importData.ship); // Complete API dump
         } else if (importData instanceof Array) {   // Must be detailed export json
@@ -341,12 +392,14 @@ export default class ModalImport extends TranslatedComponent {
         } else if (importData.ship && typeof importData.name !== undefined) { // Using JSON from a single ship build export
           this._importDetailedArray([importData]); // Convert to array with singleobject
           this.setState({ singleBuild: true });
+        } else if (importData.Modules != null && importData.Modules[0] != null) {
+          this._importLoadout(importData);
         } else { // Using Backup JSON
           this._importBackup(importData);
         }
       }
     } catch (e) {
-      // console.log(e.stack);
+      console.log(e);
       this.setState({ errorMsg: (typeof e == 'string') ? e : 'Cannot Parse the data!' });
       return;
     }
@@ -360,6 +413,10 @@ export default class ModalImport extends TranslatedComponent {
   _process() {
     let builds = null, comparisons = null;
 
+    if (this.state.loadoutEvent) {
+      return Router.go(`/import?data=${this.state.loadoutEvent}`);
+    }
+
     // If only importing a single build go straight to the outfitting page
     if (this.state.singleBuild) {
       builds = this.state.builds;
@@ -476,7 +533,7 @@ export default class ModalImport extends TranslatedComponent {
     if (!state.processed) {
       importStage = (
         <div>
-          <textarea className='cb json' ref={node => this.importField = node} onChange={this._validateImport} defaultValue={this.state.importString} placeholder={translate('PHRASE_IMPORT')} />
+          <textarea spellCheck={false} className='cb json' ref={node => this.importField = node} onChange={this._validateImport} defaultValue={this.state.importString} placeholder={translate('PHRASE_IMPORT')} />
           <button id='proceed' className='l cap' onClick={this._process} disabled={!state.importValid} >{translate('proceed')}</button>
           <div className='l warning' style={{ marginLeft:'3em' }}>{state.errorMsg}</div>
         </div>

src/app/components/ModalPermalink.jsx

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

src/app/components/ModalShoppingList.jsx

@@ -0,0 +1,336 @@
+import React from 'react';
+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
+ */
+export default class ModalShoppingList extends TranslatedComponent {
+
+  static propTypes = {
+    ship: PropTypes.object.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      matsList: '',
+      mats: {},
+      failed: false,
+      cmdrName: Persist.getCmdr().selected,
+      cmdrs: Persist.getCmdr().cmdrs,
+      matsPerGrade: Persist.getRolls(),
+      blueprints: []
+    };
+  }
+
+  /**
+   * React component did mount
+   */
+  componentDidMount() {
+    this.renderMats();
+    if (this.checkBrowserIsCompatible()) {
+      this.getCommanders();
+      this.registerBPs();
+    }
+  }
+
+  /**
+   * Find all blueprints needed to make a build.
+   */
+  registerBPs() {
+    const ship = this.props.ship;
+    let blueprints = [];
+    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) {
+          blueprints.push({ uuid: module.m.blueprint.special.uuid, number: 1 });
+        }
+        for (const g in module.m.blueprint.grades) {
+          if (!module.m.blueprint.grades.hasOwnProperty(g)) {
+            continue;
+          }
+          if (g > module.m.blueprint.grade) {
+            continue;
+          }
+          blueprints.push({ uuid: module.m.blueprint.grades[g].uuid, number: this.state.matsPerGrade[g] });
+        }
+      }
+    }
+    this.setState({ blueprints });
+  }
+
+  /**
+   * Check browser isn't firefox.
+   * @return {boolean} true if compatible, false if not.
+   */
+  checkBrowserIsCompatible() {
+    // Firefox 1.0+
+    return typeof InstallTrigger === 'undefined';
+  }
+
+  /**
+   * Get a list of commanders from EDEngineer.
+   */
+  getCommanders() {
+    request
+      .get('http://localhost:44405/commanders')
+      .end((err, res) => {
+        if (err) {
+          console.log(err);
+          return this.setState({ failed: true });
+        }
+        const cmdrs = JSON.parse(res.text);
+        if (!this.state.cmdrName) {
+          this.setState({ cmdrName: cmdrs[0] });
+        }
+        this.setState({ cmdrs }, () => {
+          Persist.setCmdr({ selected: this.state.cmdrName, cmdrs });
+        });
+      });
+  }
+
+  /**
+   * Send all blueprints to ED Engineer
+   * @param {Event} event React event
+   */
+  sendToEDEng(event) {
+    event.preventDefault();
+    let translate = this.context.language.translate;
+    const target = event.target;
+    target.disabled = this.state.blueprints.length > 0;
+    if (this.state.blueprints.length === 0) {
+      target.innerText = translate('No modded components.');
+      target.disabled = true;
+      setTimeout(() => {
+        target.innerText = translate('Send to EDEngineer');
+        target.disabled = false;
+      }, 3000);
+    } else {
+      target.innerText = translate('Sending...');
+    }
+    let countSent = 0;
+    let countTotal = this.state.blueprints.length;
+
+    for (const i of this.state.blueprints) {
+      request
+        .patch(`http://localhost:44405/${this.state.cmdrName}/shopping-list`)
+        .field('uuid', i.uuid)
+        .field('size', i.number)
+        .end(err => {
+          if (err) {
+            console.log(err);
+            if (err.message !== 'Bad Request') {
+              this.setState({ failed: true });
+            }
+          }
+          countSent++;
+          if (countSent === countTotal) {
+            target.disabled = false;
+            target.innerText = translate('Send to EDEngineer');
+          }
+        });
+    }
+  }
+
+  /**
+ * 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;
+    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) {
+          blueprints.push({
+            "item": module.m.symbol,
+            "blueprint": module.m.blueprint.special.edname
+          });
+        }
+        for (const g in module.m.blueprint.grades) {
+          if (!module.m.blueprint.grades.hasOwnProperty(g)) {
+            continue;
+          }
+          if (g < module.m.blueprint.grade) {
+            continue;
+          }
+          blueprints.push({
+            "item": module.m.symbol,
+            "blueprint": module.m.blueprint.fdname,
+            "grade": module.m.blueprint.grade,
+            "highestGradePercentage":1.0
+          });
+        }
+      }
+    }
+
+    //create JSON to encode
+    let baseJson = {
+      "version":1,
+      "name":ship.name, // 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
+   */
+  renderMats() {
+    const ship = this.props.ship;
+    let mats = {};
+    for (const module of ship.costList) {
+      if (module.type === 'SHIP') {
+        continue;
+      }
+      if (module.m && module.m.blueprint) {
+        if (!module.m.blueprint.grade || !module.m.blueprint.grades) {
+          continue;
+        }
+        for (const g in module.m.blueprint.grades) {
+          if (!module.m.blueprint.grades.hasOwnProperty(g)) {
+            continue;
+          }
+          if (g > module.m.blueprint.grade) {
+            continue;
+          }
+          for (const i in module.m.blueprint.grades[g].components) {
+            if (!module.m.blueprint.grades[g].components.hasOwnProperty(i)) {
+              continue;
+            }
+            if (mats[i]) {
+              mats[i] += module.m.blueprint.grades[g].components[i] * this.state.matsPerGrade[g];
+            } else {
+              mats[i] = module.m.blueprint.grades[g].components[i] * this.state.matsPerGrade[g];
+            }
+          }
+          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 = '';
+    for (const i in mats) {
+      if (!mats.hasOwnProperty(i)) {
+        continue;
+      }
+      if (mats[i] === 0) {
+        delete mats[i];
+        continue;
+      }
+      matsString += `${i}: ${mats[i]}\n`;
+    }
+    this.setState({ matsList: matsString, mats });
+  }
+
+  /**
+   * Handler for changing roll amounts
+   * @param {SyntheticEvent} e React Event
+   */
+  changeHandler(e) {
+    let grade = e.target.id;
+    let newState = this.state.matsPerGrade;
+    newState[grade] = parseInt(e.target.value);
+    this.setState({ matsPerGrade: newState });
+    Persist.setRolls(newState);
+    this.renderMats();
+    this.registerBPs();
+  }
+
+  /**
+   * Handler for changing cmdr name
+   * @param {SyntheticEvent} e React Event
+   */
+  cmdrChangeHandler(e) {
+    let cmdrName = e.target.value;
+    this.setState({ cmdrName }, () => {
+      Persist.setCmdr({ selected: this.state.cmdrName, cmdrs: this.state.cmdrs });
+    });
+  }
+
+  /**
+   * Render the modal
+   * @return {React.Component} Modal Content
+   */
+  render() {
+    let translate = this.context.language.translate;
+    this.changeHandler = this.changeHandler.bind(this);
+    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} />
+      <div>
+        <textarea className='cb json' readOnly value={this.state.matsList} />
+      </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>
+      <button style={{marginTop: 5}} className={'l cb dismiss cap'} disabled={!!this.state.failed} onClick={this.sendToEDOMH}>{translate('Send to EDOMH')}</button>
+      <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
+    </div>;
+  }
+}

src/app/components/Modification.jsx

@@ -3,18 +3,22 @@ import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
 import NumberEditor from 'react-number-editor';
+import { isChangeValueBeneficial } from '../utils/BlueprintFunctions';
+import { Modifications } from 'coriolis-data/dist';
 
 /**
  * Modification
  */
 export default class Modification extends TranslatedComponent {
-
   static propTypes = {
     ship: PropTypes.object.isRequired,
     m: PropTypes.object.isRequired,
     name: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    onKeyDown: PropTypes.func.isRequired,
+    modItems: PropTypes.array.isRequired,
+    handleModChange: PropTypes.func.isRequired
   };
 
   /**
@@ -35,60 +39,94 @@ export default class Modification extends TranslatedComponent {
    *                       in a value by hand
    */
   _updateValue(value) {
-    const name = this.props.name;
-
-    let scaledValue = Math.round(Number(value) * 100);
-    // Limit to +1000% / -99.99%
-    if (scaledValue > 100000) {
-      scaledValue = 100000;
-      value = 1000;
-    }
-    if (scaledValue < -9999) {
-      scaledValue = -9999;
-      value = -99.99;
-    }
-
-    let m = this.props.m;
-    let ship = this.props.ship;
-    ship.setModification(m, name, scaledValue, true);
-
     this.setState({ value });
+    let reCast = String(Number(value));
+    if (reCast.endsWith(value) || reCast.startsWith(value)) {
+      let { m, name, ship } = this.props;
+      value = Math.max(Math.min(value, 50000), -50000);
+      ship.setModification(m, name, value, true);
+    }
+  }
+
+  /**
+   * Triggered when a key is pressed down with focus on the number editor.
+   * @param {SyntheticEvent} event Key down event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      this._updateFinished();
+    }
+    this.props.onKeyDown(event);
   }
 
   /**
    * Triggered when an update to slider value is finished i.e. when losing focus
+   *
+   * pnellesen (24/05/2018): added value check below - this should prevent experimental effects from being recalculated
+   * with each onBlur event, even when no change has actually been made to the field.
    */
   _updateFinished() {
+    if (this.props.value != this.state.value) {
+      this.props.handleModChange(true);
       this.props.onChange();
     }
+  }
 
   /**
    * Render the modification
    * @return {React.Component} modification
    */
   render() {
-    let translate = this.context.language.translate;
+    let { translate, formats, units } = this.context.language;
     let { m, name } = this.props;
+    let modValue = m.getChange(name);
+    let isOverwrite = Modifications.modifications[name].method === 'overwrite';
 
     if (name === 'damagedist') {
       // We don't show damage distribution
       return null;
     }
 
-    let symbol;
+    let inputClassNames = {
-    if (name === 'jitter') {
+      'cb': true,
-      symbol = '°';
+      'greyed-out': !this.props.highlight
-    } else if (name !== 'burst' && name != 'burstrof') {
+    };
-      symbol = '%';
-    }
-    if (symbol) {
-      symbol = ' (' + symbol + ')';
-    }
 
     return (
-      <div onBlur={this._updateFinished.bind(this)} className={'cb'} key={name}>
+      <div onBlur={this._updateFinished.bind(this)} key={name}
-        <div className={'cb'}>{translate(name, m.grp)}{symbol}</div>
+        className={cn('cb', 'modification-container')}
-        <NumberEditor className={'cb'} style={{ width: '90%', textAlign: 'center' }} step={0.01} stepModifier={1} decimals={2} value={this.state.value} onValueChange={this._updateValue.bind(this)} />
+        ref={ modItem => this.props.modItems[name] = modItem }>
+        <span className={'cb'}>{translate(name, m.grp)}</span>
+        <span className={'header-adjuster'}></span>
+        <table style={{ width: '100%' }}>
+          <tbody>
+            <tr>
+              <td className={'input-container'}>
+                <span>
+                  {this.props.editable ?
+                    <NumberEditor className={cn(inputClassNames)} value={this.state.value}
+                      decimals={2} style={{ textAlign: 'right' }} step={0.01}
+                      stepModifier={1} onKeyDown={this._keyDown.bind(this)}
+                      onValueChange={this._updateValue.bind(this)} /> :
+                    <input type="text" value={formats.f2(this.state.value)}
+                      disabled className={cn('number-editor', 'greyed-out')}
+                      style={{ textAlign: 'right', cursor: 'inherit' }}/>
+                  }
+                  <span className={'unit-container'}>
+                    {units[m.getStoredUnitFor(name)]}
+                  </span>
+                </span>
+              </td>
+              <td style={{ textAlign: 'center' }} className={
+                modValue ?
+                  isChangeValueBeneficial(name, modValue) ? 'secondary' : 'warning' :
+                  ''
+              }>
+                {formats.f2(modValue / 100) || 0}{isOverwrite ? '' : '%'}
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     );
   }

src/app/components/ModificationsMenu.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as _ from 'lodash';
 import TranslatedComponent from './TranslatedComponent';
-import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { Modifications } from 'coriolis-data/dist';
 import Modification from './Modification';
@@ -13,18 +13,22 @@ import {
   getPercent,
   setRandom,
   specialToolTip
-} from '../utils/BlueprintFunctions'
+} from '../utils/BlueprintFunctions';
+
+const MODIFICATIONS_COMPARATOR = (mod1, mod2) => {
+  return mod1.props.name.localeCompare(mod2.props.name);
+};
 
 /**
  * Modifications menu
  */
 export default class ModificationsMenu extends TranslatedComponent {
-
   static propTypes = {
     ship: PropTypes.object.isRequired,
     m: PropTypes.object.isRequired,
     marker: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    modButton:PropTypes.object
   };
 
   /**
@@ -42,6 +46,16 @@ export default class ModificationsMenu extends TranslatedComponent {
     this._rollBest = this._rollBest.bind(this);
     this._rollWorst = this._rollWorst.bind(this);
     this._reset = this._reset.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this.modItems = [];// Array to hold various element refs (<li>, <div>, <ul>, etc.)
+    this.firstModId = null;
+    this.firstBPLabel = null;// First item in mod menu
+    this.lastModId = null;
+    this.selectedModId = null;
+    this.selectedSpecialId = null;
+    this.lastNeId = null;// Last number editor id. Used to set focus to last number editor when shift-tab pressed on first element in mod menu.
+    this.modValDidChange = false; // used to determine if component update was caused by change in modification value.
+    this._handleModChange = this._handleModChange.bind(this);
 
     this.state = {
       blueprintMenuOpened: !(props.m.blueprint && props.m.blueprint.name),
@@ -59,7 +73,6 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { m } = props;
     const { language, tooltip, termtip } = context;
     const translate = language.translate;
-
     const blueprints = [];
     for (const blueprintName in Modifications.modules[m.grp].blueprints) {
       const blueprint = getBlueprint(blueprintName, m);
@@ -73,9 +86,13 @@ export default class ModificationsMenu extends TranslatedComponent {
         const close = this._blueprintSelected.bind(this, blueprintName, grade);
         const key = blueprintName + ':' + grade;
         const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade], Modifications.modules[m.grp].blueprints[blueprintName].grades[grade].engineers, m.grp);
-        blueprintGrades.unshift(<li key={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close}>{grade}</li>);
+        if (classes.indexOf('active') >= 0) this.selectedModId = key;
+        blueprintGrades.unshift(<li key={key} tabIndex="0" data-id={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close} onKeyDown={this._keyDown} ref={modItem => this.modItems[key] = modItem}>{grade}</li>);
       }
       if (blueprintGrades) {
+        const thisLen = blueprintGrades.length;
+        if (this.firstModId == null) this.firstModId = blueprintGrades[0].key;
+        this.lastModId = blueprintGrades[thisLen - 1].key;
         blueprints.push(<div key={blueprint.name} className={'select-group cap'}>{translate(blueprint.name)}</div>);
         blueprints.push(<ul key={blueprintName}>{blueprintGrades}</ul>);
       }
@@ -83,6 +100,64 @@ export default class ModificationsMenu extends TranslatedComponent {
     return blueprints;
   }
 
+  /**
+   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
+   * @param  {SyntheticEvent} event Event
+   *
+   */
+  _keyDown(event) {
+    let className = null;
+    let elemId = null;
+    if (event.currentTarget.attributes['class']) className = event.currentTarget.attributes['class'].value;
+    if (event.currentTarget.attributes['data-id']) elemId = event.currentTarget.attributes['data-id'].value;
+
+    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
+      event.stopPropagation();
+      if (elemId != null) {
+        this.modItems[elemId].click();
+      } else {
+        event.currentTarget.click();
+      }
+      return;
+    }
+    if (event.key == 'Tab') {
+      // Shift-Tab
+      if(event.shiftKey) {
+        if (elemId == this.firstModId && elemId != null) {
+          // Initial modification menu
+          event.preventDefault();
+          this.modItems[this.lastModId].focus();
+          return;
+        } else  if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null && this.lastNeId != null && this.modItems[this.lastNeId] != null) {
+          // shift-tab on first element in modifications menu. set focus to last number editor field if open
+          event.preventDefault();
+          this.modItems[this.lastNeId].lastChild.focus();
+          return;
+        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null) {
+          // shift-tab on button-inline-menu with no number editor
+          event.preventDefault();
+          event.currentTarget.parentElement.lastElementChild.focus();
+        }
+      } else {
+        if (elemId == this.lastModId && elemId != null) {
+          // Initial modification menu
+          event.preventDefault();
+          this.modItems[this.firstModId].focus();
+          return;
+        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.nextSibling == null && event.currentTarget.nodeName != 'TD') {
+          // Experimental menu
+          event.preventDefault();
+          event.currentTarget.parentElement.firstElementChild.focus();
+          return;
+        } else if (event.currentTarget.className == 'cb' && event.currentTarget.parentElement.nextSibling == null) {
+          event.preventDefault();
+          this.modItems[this.firstBPLabel].focus();
+        }
+      }
+    }
+  }
+
+
   /**
    * Render the specials
    * @param  {Object} props   React component properties
@@ -97,7 +172,7 @@ export default class ModificationsMenu extends TranslatedComponent {
     const specialsId = m.missile && Modifications.modules[m.grp]['specials_' + m.missile] ? 'specials_' + m.missile : 'specials';
     if (Modifications.modules[m.grp][specialsId] && Modifications.modules[m.grp][specialsId].length > 0) {
       const close = this._specialSelected.bind(this, null);
-      specials.push(<div style={{ cursor: 'pointer', fontWeight: 'bold' }} className={ 'button-inline-menu warning' } key={ 'none' } onClick={ close }>{translate('PHRASE_NO_SPECIAL')}</div>);
+      specials.push(<div tabIndex="0" style={{ cursor: 'pointer', fontWeight: 'bold' }} className={ 'button-inline-menu warning' } key={ 'none' } data-id={ 'none' } onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems['none'] = modItem}>{translate('PHRASE_NO_SPECIAL')}</div>);
       for (const specialName of Modifications.modules[m.grp][specialsId]) {
         if (Modifications.specials[specialName].name.search('Legacy') >= 0) {
           continue;
@@ -105,6 +180,7 @@ export default class ModificationsMenu extends TranslatedComponent {
         const classes = cn('button-inline-menu', {
           active: m.blueprint && m.blueprint.special && m.blueprint.special.edname == specialName
         });
+        if (classes.indexOf('active') >= 0) this.selectedSpecialId = specialName;
         const close = this._specialSelected.bind(this, specialName);
         if (m.blueprint && m.blueprint.name) {
           let tmp = {};
@@ -116,9 +192,9 @@ export default class ModificationsMenu extends TranslatedComponent {
           m.blueprint.special = Modifications.specials[specialName];
           let specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, specialName);
           m.blueprint.special = tmp;
-          specials.push(<div style={{ cursor: 'pointer' }} className={classes} key={ specialName } onMouseOver={termtip.bind(null, specialTt)} onMouseOut={tooltip.bind(null, null)} onClick={ close }>{translate(Modifications.specials[specialName].name)}</div>);
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName } onMouseOver={termtip.bind(null, specialTt)} onMouseOut={tooltip.bind(null, null)} onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
         } else {
-          specials.push(<div style={{ cursor: 'pointer' }} className={classes} key={ specialName } onClick={ close }>{translate(Modifications.specials[specialName].name)}</div>);
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName }onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
         }
       }
     }
@@ -132,14 +208,26 @@ export default class ModificationsMenu extends TranslatedComponent {
    */
   _renderModifications(props) {
     const { m, onChange, ship } = props;
+    const modifiableModifications = [];
     const modifications = [];
     for (const modName of Modifications.modules[m.grp].modifications) {
       if (!Modifications.modifications[modName].hidden) {
         const key = modName + (m.getModValue(modName) / 100 || 0);
-        modifications.push(<Modification key={ key } ship={ ship } m={ m } name={ modName } value={ m.getModValue(modName) / 100 || 0 } onChange={ onChange }/>);
+        const editable = modName !== 'fallofffromrange';
+        const highlight = m.blueprint.grades[m.blueprint.grade].features[modName];
+        this.lastNeId = modName;
+        (editable && highlight ? modifiableModifications : modifications).push(
+          <Modification key={ key } ship={ ship } m={ m } highlight={highlight}
+            value={m.getPretty(modName) || 0} modItems={this.modItems}
+            onChange={onChange} onKeyDown={this._keyDown} name={modName}
+            editable={editable} handleModChange = {this._handleModChange} />
+        );
       }
     }
-    return modifications;
+
+    modifiableModifications.sort(MODIFICATIONS_COMPARATOR);
+    modifications.sort(MODIFICATIONS_COMPARATOR);
+    return modifiableModifications.concat(modifications);
   }
 
   /**
@@ -199,6 +287,10 @@ export default class ModificationsMenu extends TranslatedComponent {
   _rollFifty() {
     const { m, ship } = this.props;
     setPercent(ship, m, 50);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
     this.props.onChange();
   }
 
@@ -208,6 +300,10 @@ export default class ModificationsMenu extends TranslatedComponent {
   _rollRandom() {
     const { m, ship } = this.props;
     setRandom(ship, m);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
     this.props.onChange();
   }
 
@@ -217,6 +313,10 @@ export default class ModificationsMenu extends TranslatedComponent {
   _rollBest() {
     const { m, ship } = this.props;
     setPercent(ship, m, 100);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
     this.props.onChange();
   }
 
@@ -226,6 +326,8 @@ export default class ModificationsMenu extends TranslatedComponent {
   _rollWorst() {
     const { m, ship } = this.props;
     setPercent(ship, m, 0);
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
     this.props.onChange();
   }
 
@@ -236,10 +338,67 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { m, ship } = this.props;
     ship.clearModifications(m);
     ship.clearModuleBlueprint(m);
-
+    this.selectedModId = null;
+    this.selectedSpecialId = null;
     this.props.onChange();
   }
 
+  /**
+   * set mod did change boolean
+   * @param {boolean} b Boolean to determine if a change has been made to a module
+   */
+  _handleModChange(b) {
+    this.modValDidChange = b;
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * after it first mounts
+   */
+  componentDidMount() {
+    let firstEleCn = this.modItems['modMainDiv'].children.length > 0 ? this.modItems['modMainDiv'].children[0].className : null;
+    if (firstEleCn.indexOf('select-group cap') >= 0) {
+      this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+    } else {
+      this.modItems['modMainDiv'].firstElementChild.focus();
+    }
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * if component updates, unless update is due to value change
+   * in a modification
+   */
+  componentDidUpdate() {
+    if (!this.modValDidChange) {
+      if (this.modItems['modMainDiv'].children.length > 0) {
+        if (this.modItems[this.selectedModId]) {
+          this.modItems[this.selectedModId].focus();
+          return;
+        } else if (this.modItems[this.selectedSpecialId]) {
+          this.modItems[this.selectedSpecialId].focus();
+          return;
+        }
+        let firstEleCn = this.modItems['modMainDiv'].children[0].className;
+        if (firstEleCn.indexOf('button-inline-menu') >= 0) {
+          this.modItems['modMainDiv'].firstElementChild.focus();
+        } else if (firstEleCn.indexOf('select-group cap') >= 0)  {
+          this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+        }
+      }
+    } else {
+      this._handleModChange(false);// Need to reset if component update due to value change
+    }
+  }
+  /**
+   * set focus to the modification menu icon after mod menu is unmounted.
+   */
+  componentWillUnmount() {
+    if (this.props.modButton) {
+      this.props.modButton.focus();
+    }
+  }
+
   /**
    * Render the list
    * @return {React.Component} List
@@ -262,6 +421,11 @@ export default class ModificationsMenu extends TranslatedComponent {
     let haveBlueprint = false;
     let blueprintTt;
     let blueprintCv;
+    // TODO: Fix this to actually find the correct blueprint.
+    if (!m.blueprint || !m.blueprint.name || !m.blueprint.fdname || !Modifications.modules[m.grp].blueprints || !Modifications.modules[m.grp].blueprints[m.blueprint.fdname]) {
+      this.props.ship.clearModuleBlueprint(m);
+      this.props.ship.clearModuleSpecial(m);
+    }
     if (m.blueprint && m.blueprint.name && Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade]) {
       blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
       haveBlueprint = true;
@@ -272,45 +436,53 @@ export default class ModificationsMenu extends TranslatedComponent {
     let specialLabel;
     let specialTt;
     if (m.blueprint && m.blueprint.special) {
-      specialLabel = m.blueprint.special.name;
+      specialLabel = translate(m.blueprint.special.name);
       specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, m.blueprint.special.edname);
     } else {
       specialLabel = translate('PHRASE_SELECT_SPECIAL');
     }
 
     const specials = this._renderSpecials(this.props, this.context);
-
+    /**
+     * pnellesen - 05/28/2018 - added additional checks for specials.length below to ensure menus
+     * display correctly in cases where there are no specials (ex: AFMUs.)
+     */
     const showBlueprintsMenu = blueprintMenuOpened;
     const showSpecial = haveBlueprint && specials.length && !blueprintMenuOpened;
-    const showSpecialsMenu = specialMenuOpened;
+    const showSpecialsMenu = specialMenuOpened && specials.length;
-    const showRolls = haveBlueprint && !blueprintMenuOpened && !specialMenuOpened;
+    const showRolls = haveBlueprint && !blueprintMenuOpened && (!specialMenuOpened || !specials.length);
-    const showReset = !blueprintMenuOpened && !specialMenuOpened && haveBlueprint;
+    const showReset = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-    const showMods = !blueprintMenuOpened && !specialMenuOpened && haveBlueprint;
+    const showMods = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-
+    if (haveBlueprint) {
+      this.firstBPLabel = blueprintLabel;
+    } else {
+      this.firstBPLabel = 'selectBP';
+    }
     return (
       <div
         className={cn('select', this.props.className)}
         onClick={(e) => e.stopPropagation() }
         onContextMenu={stopCtxPropagation}
+        ref={modItem => this.modItems['modMainDiv'] = modItem}
       >
         { showBlueprintsMenu | showSpecialsMenu ? '' : haveBlueprint ?
-          <div className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu}>{blueprintLabel}</div> : 
+          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{blueprintLabel}</div> :
-          <div className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
+          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
         { showBlueprintsMenu ? this._renderBlueprints(this.props, this.context) : null }
-        { showSpecial & !showSpecialsMenu ? <div className={ cn('section-menu button-inline-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={specialTt ? termtip.bind(null, specialTt) : null} onMouseOut={specialTt ? tooltip.bind(null, null) : null}  onClick={_toggleSpecialsMenu}>{specialLabel}</div> : null }
+        { showSpecial & !showSpecialsMenu ? <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={specialTt ? termtip.bind(null, specialTt) : null} onMouseOut={specialTt ? tooltip.bind(null, null) : null}  onClick={_toggleSpecialsMenu} onKeyDown={ this._keyDown }>{specialLabel}</div> : null }
         { showSpecialsMenu ? specials : null }
-        { showReset ? <div className={'section-menu button-inline-menu warning'} style={{ cursor: 'pointer' }} onClick={_reset} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </div> : null }
+        { showReset ? <div tabIndex="0" className={'section-menu button-inline-menu warning'} style={{ cursor: 'pointer' }} onClick={_reset} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </div> : null }
         { showRolls ?
 
           <table style={{ width: '100%', backgroundColor: 'transparent' }}>
             <tbody>
               { showRolls ?
                 <tr>
-                  <td className={ cn('section-menu button-inline-menu', {active: false})}> { translate('roll') }: </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: false }) }> { translate('mroll') }: </td>
-                  <td className={ cn('section-menu button-inline-menu', { active: blueprintCv ===    0 })} style={{ cursor: 'pointer' }} onClick={_rollWorst} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('0%') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===    0 }) } style={{ cursor: 'pointer' }} onClick={_rollWorst} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('0%') } </td>
-                  <td className={ cn('section-menu button-inline-menu', { active: blueprintCv ===   50 })} style={{ cursor: 'pointer' }} onClick={_rollFifty} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')} onMouseOut={tooltip.bind(null, null)}> { translate('50%') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===   50 })} style={{ cursor: 'pointer' }} onClick={_rollFifty} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')} onMouseOut={tooltip.bind(null, null)}> { translate('50%') } </td>
-                  <td className={ cn('section-menu button-inline-menu', { active: blueprintCv ===  100 })} style={{ cursor: 'pointer' }} onClick={_rollFull} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('100%') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===  100 })} style={{ cursor: 'pointer' }} onClick={_rollFull} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('100%') } </td>
-                  <td className={ cn('section-menu button-inline-menu', { active: blueprintCv === null || blueprintCv % 50 != 0 })} style={{ cursor: 'pointer' }} onClick={_rollRandom} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv === null || blueprintCv % 50 != 0 })} style={{ cursor: 'pointer' }} onClick={_rollRandom} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
                 </tr> : null }
             </tbody>
           </table> : null }

src/app/components/Movement.jsx

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

src/app/components/Offence.jsx

@@ -5,7 +5,6 @@ import * as Calc from '../shipyard/Calculations';
 import PieChart from './PieChart';
 import { nameComparator } from '../utils/SlotFunctions';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
-import VerticalBarChart from './VerticalBarChart';
 
 /**
  * Generates an internationalization friendly weapon comparator that will
@@ -42,6 +41,63 @@ export function weaponComparator(translate, propComparator, desc) {
   };
 }
 
+/**
+ * Creates a tooltip that shows damage by type.
+ * @param {function} translate    Translation function
+ * @param {Object} formats        Object that holds format functions
+ * @param {Calc.SDps} sdpsObject  Object that holds sdps split up by type
+ * @returns {Array} Tooltip
+ */
+function getSDpsTooltip(translate, formats, sdpsObject) {
+  return Object.keys(sdpsObject).filter(key => sdpsObject[key])
+    .map(key => {
+      return (
+        <div key={key}>
+          {translate(key) + ' ' + formats.f1(sdpsObject[key])}
+        </div>
+      );
+    });
+}
+
+/**
+ * Returns a data object used by {@link PieChart} that shows damage by type.
+ * @param {function} translate    Translation function
+ * @param {Calc.SDps} sdpsObject  Object that holds sdps split up by type
+ * @returns {Object}              Data object
+ */
+function getSDpsData(translate, sdpsObject) {
+  return Object.keys(sdpsObject).map(key => {
+    return {
+      value: Math.round(sdpsObject[key]),
+      label: translate(key)
+    };
+  });
+}
+
+/**
+ * Adds all damage of `add` onto `addOn`.
+ * @param {Calc.SDps} addOn Object that holds sdps split up by type (will be mutated)
+ * @param {Calc.SDps} add   Object that holds sdps split up by type
+ */
+function addSDps(addOn, add) {
+  Object.keys(addOn).map(k => addOn[k] += (add[k] ? add[k] : 0));
+}
+
+/**
+ * Calculates the overall sdps of an sdps object.
+ * @param {Calc.SDps} sdpsObject Object that holds sdps spluit up by type
+ */
+function sumSDps(sdpsObject) {
+  if (sdpsObject.total) {
+    return sdpsObject.total;
+  }
+
+  return Object.keys(sdpsObject).reduce(
+    (acc, k) => acc + (sdpsObject[k] ? sdpsObject[k] : 0),
+    0
+  );
+}
+
 /**
  * Offence information
  * Offence information consists of four panels:
@@ -144,51 +200,36 @@ export default class Offence extends TranslatedComponent {
 
     const timeToDrain = Calc.timeToDrainWep(ship, wep);
 
-    let absoluteShieldsSDps = 0;
-    let explosiveShieldsSDps = 0;
-    let kineticShieldsSDps = 0;
-    let thermalShieldsSDps = 0;
-    let absoluteArmourSDps = 0;
-    let explosiveArmourSDps = 0;
-    let kineticArmourSDps = 0;
-    let thermalArmourSDps = 0;
 
     let totalSEps = 0;
+    let totalSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
+    let shieldsSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
+    let armourSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
 
     const rows = [];
     for (let i = 0; i < damage.length; i++) {
       const weapon = damage[i];
 
       totalSEps += weapon.seps;
-      absoluteShieldsSDps += weapon.sdps.shields.absolute;
+      addSDps(totalSDpsObject, weapon.sdps.base);
-      explosiveShieldsSDps += weapon.sdps.shields.explosive;
+      addSDps(shieldsSDpsObject, weapon.sdps.shields);
-      kineticShieldsSDps += weapon.sdps.shields.kinetic;
+      addSDps(armourSDpsObject, weapon.sdps.armour);
-      thermalShieldsSDps += weapon.sdps.shields.thermal;
+
-      absoluteArmourSDps += weapon.sdps.armour.absolute;
+      const baseSDpsTooltipDetails = getSDpsTooltip(translate, formats, weapon.sdps.base);
-      explosiveArmourSDps += weapon.sdps.armour.explosive;
-      kineticArmourSDps += weapon.sdps.armour.kinetic;
-      thermalArmourSDps += weapon.sdps.armour.thermal;
 
       const effectivenessShieldsTooltipDetails = [];
       effectivenessShieldsTooltipDetails.push(<div key='range'>{translate('range') + ' ' + formats.pct1(weapon.effectiveness.shields.range)}</div>);
       effectivenessShieldsTooltipDetails.push(<div key='resistance'>{translate('resistance') + ' ' + formats.pct1(weapon.effectiveness.shields.resistance)}</div>);
       effectivenessShieldsTooltipDetails.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.pct1(weapon.effectiveness.shields.sys)}</div>);
 
-      const effectiveShieldsSDpsTooltipDetails = [];
+      const effectiveShieldsSDpsTooltipDetails = getSDpsTooltip(translate, formats, weapon.sdps.armour);
-      if (weapon.sdps.shields.absolute) effectiveShieldsSDpsTooltipDetails.push(<div key='absolute'>{translate('absolute') + ' ' + formats.f1(weapon.sdps.shields.absolute)}</div>);
-      if (weapon.sdps.shields.explosive) effectiveShieldsSDpsTooltipDetails.push(<div key='explosive'>{translate('explosive') + ' ' + formats.f1(weapon.sdps.shields.explosive)}</div>);
-      if (weapon.sdps.shields.kinetic) effectiveShieldsSDpsTooltipDetails.push(<div key='kinetic'>{translate('kinetic') + ' ' + formats.f1(weapon.sdps.shields.kinetic)}</div>);
-      if (weapon.sdps.shields.thermal) effectiveShieldsSDpsTooltipDetails.push(<div key='thermal'>{translate('thermal') + ' ' + formats.f1(weapon.sdps.shields.thermal)}</div>);
 
       const effectivenessArmourTooltipDetails = [];
       effectivenessArmourTooltipDetails.push(<div key='range'>{translate('range') + ' ' + formats.pct1(weapon.effectiveness.armour.range)}</div>);
       effectivenessArmourTooltipDetails.push(<div key='resistance'>{translate('resistance') + ' ' + formats.pct1(weapon.effectiveness.armour.resistance)}</div>);
       effectivenessArmourTooltipDetails.push(<div key='hardness'>{translate('hardness') + ' ' + formats.pct1(weapon.effectiveness.armour.hardness)}</div>);
-      const effectiveArmourSDpsTooltipDetails = [];
+
-      if (weapon.sdps.armour.absolute) effectiveArmourSDpsTooltipDetails.push(<div key='absolute'>{translate('absolute') + ' ' + formats.f1(weapon.sdps.armour.absolute)}</div>);
+      const effectiveArmourSDpsTooltipDetails = getSDpsTooltip(translate, formats, weapon.sdps.armour);
-      if (weapon.sdps.armour.explosive) effectiveArmourSDpsTooltipDetails.push(<div key='explosive'>{translate('explosive') + ' ' + formats.f1(weapon.sdps.armour.explosive)}</div>);
-      if (weapon.sdps.armour.kinetic) effectiveArmourSDpsTooltipDetails.push(<div key='kinetic'>{translate('kinetic') + ' ' + formats.f1(weapon.sdps.armour.kinetic)}</div>);
-      if (weapon.sdps.armour.thermal) effectiveArmourSDpsTooltipDetails.push(<div key='thermal'>{translate('thermal') + ' ' + formats.f1(weapon.sdps.armour.thermal)}</div>);
 
       rows.push(
         <tr key={weapon.id}>
@@ -199,27 +240,30 @@ export default class Offence extends TranslatedComponent {
             {weapon.classRating} {translate(weapon.name)}
             {weapon.engineering ? ' (' + weapon.engineering + ')' : null }
           </td>
+          <td className='ri'><span onMouseOver={termtip.bind(null, baseSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>{formats.f1(weapon.sdps.base.total)}</span></td>
           <td className='ri'><span onMouseOver={termtip.bind(null, effectiveShieldsSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>{formats.f1(weapon.sdps.shields.total)}</span></td>
           <td className='ri'><span onMouseOver={termtip.bind(null, effectivenessShieldsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(weapon.effectiveness.shields.total)}</span></td>
+
+          <td className='ri'><span>{formats.f1(weapon.effectiveness.shields.dpe)}</span></td>
+
           <td className='ri'><span onMouseOver={termtip.bind(null, effectiveArmourSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>{formats.f1(weapon.sdps.armour.total)}</span></td>
           <td className='ri'><span onMouseOver={termtip.bind(null, effectivenessArmourTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(weapon.effectiveness.armour.total)}</span></td>
+
+          <td className='ri'><span>{formats.f1(weapon.effectiveness.armour.dpe)}</span></td>
         </tr>);
     }
 
-    const totalShieldsSDps = absoluteShieldsSDps + explosiveShieldsSDps + kineticShieldsSDps + thermalShieldsSDps;
+    const totalSDps = sumSDps(totalSDpsObject);
-    const totalArmourSDps = absoluteArmourSDps + explosiveArmourSDps + kineticArmourSDps + thermalArmourSDps;
+    const totalSDpsTooltipDetails = getSDpsTooltip(translate, formats, totalSDpsObject);
+    const totalSDpsData = getSDpsData(translate, totalSDpsObject);
 
-    const shieldsSDpsData = [];
+    const totalShieldsSDps = sumSDps(shieldsSDpsObject);
-    shieldsSDpsData.push({ value: Math.round(absoluteShieldsSDps), label: translate('absolute') });
+    const totalShieldsSDpsTooltipDetails = getSDpsTooltip(translate, formats, shieldsSDpsObject);
-    shieldsSDpsData.push({ value: Math.round(explosiveShieldsSDps), label: translate('explosive') });
+    const shieldsSDpsData = getSDpsData(translate, shieldsSDpsObject);
-    shieldsSDpsData.push({ value: Math.round(kineticShieldsSDps), label: translate('kinetic') });
-    shieldsSDpsData.push({ value: Math.round(thermalShieldsSDps), label: translate('thermal') });
 
-    const armourSDpsData = [];
+    const totalArmourSDps = sumSDps(armourSDpsObject);
-    armourSDpsData.push({ value: Math.round(absoluteArmourSDps), label: translate('absolute') });
+    const totalArmourSDpsTooltipDetails = getSDpsTooltip(translate, formats, armourSDpsObject);
-    armourSDpsData.push({ value: Math.round(explosiveArmourSDps), label: translate('explosive') });
+    const armourSDpsData = getSDpsData(translate, armourSDpsObject);
-    armourSDpsData.push({ value: Math.round(kineticArmourSDps), label: translate('kinetic') });
-    armourSDpsData.push({ value: Math.round(thermalArmourSDps), label: translate('thermal') });
 
     const timeToDepleteShields = Calc.timeToDeplete(opponentShields.total, totalShieldsSDps, totalSEps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * (wep / 4));
     const timeToDepleteArmour = Calc.timeToDeplete(opponentArmour.total, totalArmourSDps, totalSEps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * (wep / 4));
@@ -231,18 +275,37 @@ export default class Offence extends TranslatedComponent {
             <thead>
               <tr className='main'>
                 <th rowSpan='2' className='sortable' onClick={sortOrder.bind(this, 'n')}>{translate('weapon')}</th>
-            <th colSpan='2'>{translate('opponent\'s shields')}</th>
+                <th colSpan='1'>{translate('overall')}</th>
-            <th colSpan='2'>{translate('opponent\'s armour')}</th>
+                <th colSpan='3'>{translate('opponent\'s shields')}</th>
+                <th colSpan='3'>{translate('opponent\'s armour')}</th>
               </tr>
               <tr>
+                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
                 <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
                 <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_SHIELDS')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'es')}>{'eft'}</th>
+
+                <th className='sortable'>{'dpe'}</th>
+
                 <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'esdpsh')}>{'sdps'}</th>
                 <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'eh')}>{'eft'}</th>
+
+                <th className='sortable'>{'dpe'}</th> 
               </tr>
             </thead>
             <tbody>
               {rows}
+              {rows.length > 0 &&
+                <tr>
+                  <td></td>
+                  <td className='ri'><span onMouseOver={termtip.bind(null, totalSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>={formats.f1(totalSDps)}</span></td>
+                  <td className='ri'><span onMouseOver={termtip.bind(null, totalShieldsSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>={formats.f1(totalShieldsSDps)}</span></td>
+                  <td></td>
+                  <td></td>
+                  <td className='ri'><span onMouseOver={termtip.bind(null, totalArmourSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>={formats.f1(totalArmourSDps)}</span></td>
+                  <td></td>
+                  <td></td>
+                </tr>
+              }
             </tbody>
           </table>
         </div>
@@ -254,6 +317,10 @@ export default class Offence extends TranslatedComponent {
           <h2 onMouseOver={termtip.bind(null, translate('TT_EFFECTIVE_SDPS_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_EFFECTIVE_SDPS_ARMOUR')}<br/>{formats.f1(totalArmourSDps)}</h2>
           <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_REMOVE_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_REMOVE_ARMOUR')}<br/>{timeToDepleteArmour === Infinity ? translate('never') : formats.time(timeToDepleteArmour)}</h2>
         </div>
+        <div className='group quarter'>
+          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_OVERALL_DAMAGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('overall damage')}</h2>
+          <PieChart data={totalSDpsData} />
+        </div>
         <div className='group quarter'>
           <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_DAMAGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield damage sources')}</h2>
           <PieChart data={shieldsSDpsData} />

src/app/components/OutfittingSubpages.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { Ships } from 'coriolis-data/dist';
-import Ship from '../shipyard/Ship';
 import Persist from '../stores/Persist';
 import TranslatedComponent from './TranslatedComponent';
 import PowerManagement from './PowerManagement';
@@ -176,7 +174,7 @@ export default class OutfittingSubpages extends TranslatedComponent {
               <th style={{ width:'25%' }} className={cn({ active: tab == 'power' })} onClick={this._showTab.bind(this, 'power')} >{translate('power and costs')}</th>
               <th style={{ width:'25%' }} className={cn({ active: tab == 'profiles' })} onClick={this._showTab.bind(this, 'profiles')} >{translate('profiles')}</th>
               <th style={{ width:'25%' }} className={cn({ active: tab == 'offence' })} onClick={this._showTab.bind(this, 'offence')} >{translate('offence')}</th>
-              <th style={{ width:'25%' }} className={cn({ active: tab == 'defence' })} onClick={this._showTab.bind(this, 'defence')} >{translate('defence')}</th>
+              <th style={{ width:'25%' }} className={cn({ active: tab == 'defence' })} onClick={this._showTab.bind(this, 'defence')} >{translate('tab_defence')}</th>
             </tr>
           </thead>
         </table>

src/app/components/PieChart.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Measure from 'react-measure';
+import ContainerDimensions from 'react-container-dimensions';
 import * as d3 from 'd3';
 
 const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
@@ -27,13 +27,6 @@ export default class PieChart extends Component {
     this.colors = CORIOLIS_COLOURS;
     this.arc = d3.arc();
     this.arc.innerRadius(0);
-
-    this.state = {
-      dimensions: {
-        width: 100,
-        height: 100
-      }
-    };
   }
 
 
@@ -41,15 +34,15 @@ export default class PieChart extends Component {
    * 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) {
+  sliceGenerator(d, i, width) {
     if (!d || d.value == 0) {
       // Ignore 0 values
       return null;
     }
 
-    const { width, height } = this.state.dimensions;
     const { data } = this.props;
 
     // Push the labels further out from the centre of the slice
@@ -76,22 +69,24 @@ export default class PieChart extends Component {
    * @returns {object} Markup
    */
   render() {
-    const { width, height } = this.state.dimensions;
+    return (
+      <ContainerDimensions>
+        { ({ width }) => {
           const pie = this.pie(this.props.data),
               translate = `translate(${width / 2}, ${width * 0.4})`;
 
           this.arc.outerRadius(width * 0.4);
-
           return (
-      <Measure width='100%' whitelist={['width', 'top']} onMeasure={ (dimensions) => { this.setState({ dimensions }); }}>
             <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))}
+                  {pie.map((d, i) => this.sliceGenerator(d, i, width))}
                 </g>
               </svg>
             </div>
-      </Measure>
+          );
+        }}
+      </ContainerDimensions>
     );
   }
 }

src/app/components/Pips.jsx

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

src/app/components/PowerBands.jsx

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

src/app/components/ShipPicker.jsx

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

src/app/components/ShipSummaryTable.jsx

@@ -18,12 +18,16 @@ export default class ShipSummaryTable extends TranslatedComponent {
     pips: PropTypes.object.isRequired
   };
 
+  /**
+   * The ShipSummaryTable constructor
+   * @param {Object} props The props
+   */
   constructor(props) {
-    super(props)
+    super(props);
     this.didContextChange = this.didContextChange.bind(this);
     this.state = {
       shieldColour: 'blue'
-    }
+    };
   }
 
   /**
@@ -46,7 +50,10 @@ export default class ShipSummaryTable extends TranslatedComponent {
     const speedTooltip = canThrust ? 'TT_SUMMARY_SPEED' : 'TT_SUMMARY_SPEED_NONFUNCTIONAL';
     const canBoost = ship.canBoost(cargo, ship.fuelCapacity);
     const boostTooltip = canBoost ? 'TT_SUMMARY_BOOST' : canThrust ? 'TT_SUMMARY_BOOST_NONFUNCTIONAL' : 'TT_SUMMARY_SPEED_NONFUNCTIONAL';
-    const sgMetrics = Calc.shieldMetrics(ship, pips.sys || 2);
+    const canJump = ship.getSlotStatus(ship.standard[2]) == 3;
+    const sgMetrics = Calc.shieldMetrics(ship, pips.sys);
+    const shipBoost = canBoost ?  Calc.calcBoost(ship) : 'No Boost';
+    const restingHeat = Math.sqrt(((ship.standard[0].m.pgen * ship.standard[0].m.eff) / ship.heatCapacity) / 0.2);
     const armourMetrics = Calc.armourMetrics(ship);
     let shieldColour = 'blue';
     if (shieldGenerator && shieldGenerator.m.grp === 'psg') {
@@ -56,14 +63,16 @@ export default class ShipSummaryTable extends TranslatedComponent {
     }
     this.state = {
       shieldColour
-    }
+    };
     return <div id='summary'>
+      <div style={{display: "table", width: "100%"}}>
+        <div style={{display: "table-row"}}>
           <table className={'summaryTable'}>
             <thead>
               <tr className='main'>
                 <th rowSpan={2} className={ cn({ 'bg-warning-disabled': !canThrust }) }>{translate('speed')}</th>
                 <th rowSpan={2} className={ cn({ 'bg-warning-disabled': !canBoost }) }>{translate('boost')}</th>
-            <th colSpan={5}>{translate('jump range')}</th>
+                <th colSpan={5} className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('jump range')}</th>
                 <th rowSpan={2}>{translate('shield')}</th>
                 <th rowSpan={2}>{translate('integrity')}</th>
                 <th rowSpan={2}>{translate('DPS')}</th>
@@ -71,19 +80,21 @@ export default class ShipSummaryTable extends TranslatedComponent {
                 <th rowSpan={2}>{translate('TTD')}</th>
                 {/* <th onMouseEnter={termtip.bind(null, 'heat per second')} onMouseLeave={hide} rowSpan={2}>{translate('HPS')}</th> */}
                 <th rowSpan={2}>{translate('cargo')}</th>
-            <th rowSpan={2}>{translate('pax')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'passenger capacity', { cap: 0 })} onMouseLeave={hide}>{translate('pax')}</th>
                 <th rowSpan={2}>{translate('fuel')}</th>
                 <th colSpan={3}>{translate('mass')}</th>
                 <th onMouseEnter={termtip.bind(null, 'hull hardness', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('hrd')}</th>
                 <th rowSpan={2}>{translate('crew')}</th>
                 <th onMouseEnter={termtip.bind(null, 'mass lock factor', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('MLF')}</th>
+                <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_BOOST_INTERVAL', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('boost interval')}</th>
+                <th rowSpan={2}>{translate('resting heat (Beta)')}</th>
               </tr>
               <tr>
-            <th className='lft'>{translate('max')}</th>
+                <th className={ cn({ 'lft': true, 'bg-warning-disabled': !canJump }) }>{translate('max')}</th>
-            <th>{translate('unladen')}</th>
+                <th className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('unladen')}</th>
-            <th>{translate('laden')}</th>
+                <th className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('laden')}</th>
-            <th>{translate('total unladen')}</th>
+                <th className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('total unladen')}</th>
-            <th>{translate('total laden')}</th>
+                <th className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('total laden')}</th>
                 <th className='lft'>{translate('hull')}</th>
                 <th>{translate('unladen')}</th>
                 <th>{translate('laden')}</th>
@@ -93,11 +104,11 @@ export default class ShipSummaryTable extends TranslatedComponent {
               <tr>
                 <td onMouseEnter={termtip.bind(null, speedTooltip, { cap: 0 })} onMouseLeave={hide}>{ canThrust ? <span>{int(ship.calcSpeed(4, ship.fuelCapacity, 0, false))}{u['m/s']}</span> : <span className='warning'>0 <Warning/></span> }</td>
                 <td onMouseEnter={termtip.bind(null, boostTooltip, { cap: 0 })} onMouseLeave={hide}>{ canBoost ? <span>{int(ship.calcSpeed(4, ship.fuelCapacity, 0, true))}{u['m/s']}</span> : <span className='warning'>0 <Warning/></span> }</td>
-            <td><span onMouseEnter={termtip.bind(null, 'TT_SUMMARY_MAX_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{f2(Calc.jumpRange(ship.unladenMass + ship.standard[2].m.getMaxFuelPerJump(), ship.standard[2].m, ship.standard[2].m.getMaxFuelPerJump()))}{u.LY}</span></td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_MAX_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{ f2(Calc.jumpRange(ship.unladenMass + ship.standard[2].m.getMaxFuelPerJump(), ship.standard[2].m, ship.standard[2].m.getMaxFuelPerJump(), ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
-            <td><span onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{f2(Calc.jumpRange(ship.unladenMass + ship.fuelCapacity, ship.standard[2].m, ship.fuelCapacity))}{u.LY}</span></td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.jumpRange(ship.unladenMass + ship.fuelCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
-            <td><span onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{f2(Calc.jumpRange(ship.unladenMass + ship.fuelCapacity + ship.cargoCapacity, ship.standard[2].m, ship.fuelCapacity))}{u.LY}</span></td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.jumpRange(ship.unladenMass + ship.fuelCapacity + ship.cargoCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
-            <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_TOTAL_JUMP', { cap: 0 })} onMouseLeave={hide}>{f2(Calc.totalJumpRange(ship.unladenMass + ship.fuelCapacity, ship.standard[2].m, ship.fuelCapacity))}{u.LY}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_TOTAL_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.totalJumpRange(ship.unladenMass + ship.fuelCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
-            <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_TOTAL_JUMP', { cap: 0 })} onMouseLeave={hide}>{f2(Calc.totalJumpRange(ship.unladenMass + ship.fuelCapacity + ship.cargoCapacity, ship.standard[2].m, ship.fuelCapacity))}{u.LY}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_TOTAL_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.totalJumpRange(ship.unladenMass + ship.fuelCapacity + ship.cargoCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
                 <td className={sgClassNames} onMouseEnter={termtip.bind(null, sgTooltip, { cap: 0 })} onMouseLeave={hide}>{int(ship.shield)}{u.MJ}</td>
                 <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_INTEGRITY', { cap: 0 })} onMouseLeave={hide}>{int(ship.armour)}</td>
                 <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_DPS', { cap: 0 })} onMouseLeave={hide}>{f1(ship.totalDps)}</td>
@@ -113,69 +124,93 @@ export default class ShipSummaryTable extends TranslatedComponent {
                 <td>{int(ship.hardness)}</td>
                 <td>{ship.crew}</td>
                 <td>{ship.masslock}</td>
+                <td>{shipBoost !== 'No Boost' ? formats.time(shipBoost) : 'No Boost'}</td>
+                <td>{formats.pct(restingHeat)}</td>
               </tr>
             </tbody>
           </table>
           <table className={'summaryTable'}>
             <thead className={this.state.shieldColour}>
               <tr>
-            <th onMouseEnter={termtip.bind(null, 'shield ', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('explres')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'shield', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('shield')}</th>
-            <th onMouseEnter={termtip.bind(null, 'shield ', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('kinres')}</th>
+                <th colSpan={4} className='lft'>{translate('resistance')}</th>
-            <th onMouseEnter={termtip.bind(null, 'shield ', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('thermres')}</th>
 
-            <th onMouseEnter={termtip.bind(null, 'shield ', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('absolute') + ' ' + translate('HP')}</th>
+                <th colSpan={5} onMouseEnter={termtip.bind(null, 'TT_SUMMARY_SHIELDS_SCB', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('HP')}`}</th>
-            <th onMouseEnter={termtip.bind(null, 'shield ', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('explosive') + ' ' + translate('HP')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECOVER', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recovery')}</th>
-            <th onMouseEnter={termtip.bind(null, 'shield ', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('kinetic') + ' ' + translate('HP')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECHARGE', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recharge')}</th>
-            <th onMouseEnter={termtip.bind(null, 'shield ', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('thermal') + ' ' + translate('HP')}</th>
+              </tr>
-            <th onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECOVER', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recovery')}</th>
+              <tr>
-            <th onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECHARGE', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recharge')}</th>
+                <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th></th>
+
+                <th className={'bordered'}>{`${translate('absolute')}`}</th>
+                <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
-        <tr >
+            <tr>
-          <td>{int(ship.shieldExplRes * 100) + '%'}</td>
+              <td>{translate(shieldGenerator && shieldGenerator.m.grp || 'No Shield')}</td>
-          <td>{int(ship.shieldThermRes * 100) + '%'}</td>
+              <td>{formats.pct1(ship.shieldExplRes)}</td>
-          <td>{int(ship.shieldKinRes * 100) + '%'}</td>
+              <td>{formats.pct1(ship.shieldKinRes)}</td>
-          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.absolute.total : 0)}</td>
+              <td>{formats.pct1(ship.shieldThermRes)}</td>
-          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.explosive.total : 0)}</td>
+              <td></td>
-          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.kinetic.total : 0 )}</td>
+
-          <td>{int(sgMetrics && sgMetrics.generator ? sgMetrics.total / sgMetrics.thermal.total : 0 )}</td>
+              <td>{int(ship && sgMetrics.summary > 0 ? sgMetrics.summary : 0)}{u.MJ}</td>
-          <td>{sgMetrics && sgMetrics.recover ? formats.time(sgMetrics.recover) : 0}</td>
+              <td>{int(ship && sgMetrics.summary > 0 ? sgMetrics.summary / sgMetrics.explosive.base : 0)}{u.MJ}</td>
-          <td>{sgMetrics && sgMetrics.recharge ? formats.time(sgMetrics.recharge) : 0}</td>
+              <td>{int(ship && sgMetrics.summary ? sgMetrics.summary / sgMetrics.kinetic.base : 0)}{u.MJ}</td>
+              <td>{int(ship && sgMetrics.summary ? sgMetrics.summary / sgMetrics.thermal.base : 0)}{u.MJ}</td>
+              <td></td>
+              <td>{sgMetrics && sgMetrics.recover === Math.Inf ? translate('Never') : formats.time(sgMetrics.recover)}</td>
+              <td>{sgMetrics && sgMetrics.recharge === Math.Inf ? translate('Never') : formats.time(sgMetrics.recharge)}</td>
             </tr>
             </tbody>
             <thead>
               <tr>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('explres')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('armour')}</th>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('kinres')}</th>
+                <th colSpan={4} className='lft'>{translate('resistance')}</th>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('thermres')}</th>
-
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('absolute') + ' ' + translate('HP')}</th>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('explosive') + ' ' + translate('HP')}</th>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('kinetic') + ' ' + translate('HP')}</th>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('thermal') + ' ' + translate('HP')}</th>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('raw module armour')}</th>
-            <th onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('internal protection')}</th>
 
+                <th colSpan={5} onMouseEnter={termtip.bind(null, 'PHRASE_EFFECTIVE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('HP')}`}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'TT_MODULE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('raw module armour')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'TT_MODULE_PROTECTION_INTERNAL', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('internal protection')}</th>
+              </tr>
+              <tr>
+              <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th>{`${translate('caustic')}`}</th>
 
+                <th className={'bordered'}>{`${translate('absolute')}`}</th>
+                <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th>{`${translate('caustic')}`}</th>
               </tr>
             </thead>
             <tbody>
               <tr>
-            <td>{int(ship.hullExplRes * 100) + '%'}</td>
+                <td>{translate(ship && ship.bulkheads && ship.bulkheads.m && ship.bulkheads.m.name || 'No Armour')}</td>
-            <td>{int(ship.hullThermRes * 100) + '%'}</td>
+                <td>{formats.pct1(ship.hullExplRes)}</td>
-            <td>{int(ship.hullKinRes * 100) + '%'}</td>
+                <td>{formats.pct1(ship.hullKinRes)}</td>
-            <td>{int(armourMetrics.total / armourMetrics.absolute.total)}</td>
+                <td>{formats.pct1(ship.hullThermRes)}</td>
+                <td>{formats.pct1(ship.hullCausRes)}</td>
+                <td>{int(armourMetrics.total)}</td>
                 <td>{int(armourMetrics.total / armourMetrics.explosive.total)}</td>
-            <td>{int(armourMetrics.total / armourMetrics.kinetic.total)}</td>
+                <td>{int(armourMetrics.total/ armourMetrics.kinetic.total)}</td>
                 <td>{int(armourMetrics.total / armourMetrics.thermal.total)}</td>
+                <td>{int(armourMetrics.total/ armourMetrics.caustic.total)}</td>
                 <td>{int(armourMetrics.modulearmour)}</td>
                 <td>{int(armourMetrics.moduleprotection * 100) + '%'}</td>
 
               </tr>
             </tbody>
           </table>
-
+        </div>
+      </div>
     </div>;
   }
 }

src/app/components/Slider.jsx

@@ -17,12 +17,12 @@ export default class Slider extends React.Component {
 
   static propTypes = {
     axis: PropTypes.bool,
-    axisUnit: PropTypes.string,
+    axisUnit: PropTypes.string,// units (T, M, etc.)
     max: PropTypes.number,
     min: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,// function which determins percent value
     onResize: PropTypes.func,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired,// value of slider
     scale: PropTypes.number
   };
 
@@ -35,6 +35,11 @@ export default class Slider extends React.Component {
     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);
 
@@ -50,6 +55,7 @@ export default class Slider extends React.Component {
     this.left = rect.left;
     this.width = rect.width;
     this._move(event);
+    this.touchStartTimer = setTimeout(() => this.sliderInputBox._setDisplay('block'), 1500);
   }
 
   /**
@@ -69,11 +75,70 @@ export default class Slider extends React.Component {
    * @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
@@ -136,31 +201,186 @@ export default class Slider extends React.Component {
   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
-    return <svg onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onTouchEnd={this._up} style={style} ref={node => this.node = node}>
+      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} />
+      <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>;
+    </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

@@ -6,7 +6,6 @@ import AvailableModulesMenu from './AvailableModulesMenu';
 import ModificationsMenu from './ModificationsMenu';
 import { diffDetails } from '../utils/SlotFunctions';
 import { wrapCtxMenu } from '../utils/UtilityFunctions';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
 /**
  * Abstract Slot
@@ -40,6 +39,8 @@ export default class Slot extends TranslatedComponent {
 
     this._contextMenu = wrapCtxMenu(this._contextMenu.bind(this));
     this._getMaxClassLabel = this._getMaxClassLabel.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this.slotDiv = null;
   }
 
   // Must be implemented by subclasses:
@@ -73,6 +74,22 @@ export default class Slot extends TranslatedComponent {
     this.props.onSelect(null,null);
   }
 
+  /** Key Down handler
+   *  @param {SyntheticEvent} event Event
+   *  ToDo: see if this can be moved up
+   *  we do more or less the same thing
+   *  in every section when Enter key is pressed
+   *  on a focusable item
+   *
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      if(event.target.className == 'r') {
+        this._toggleModifications();
+      }
+      this.props.onOpen(event);
+    }
+  }
   /**
    * Render the slot
    * @return {React.Component} The slot
@@ -82,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
@@ -91,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 = '';
@@ -104,16 +127,18 @@ export default class Slot extends TranslatedComponent {
           ship={ship}
           m={m}
           marker={modificationsMarker}
+          modButton = {this.modButton}
         />;
       } else {
         menu = <AvailableModulesMenu
           className={this._getClassNames()}
           modules={availableModules()}
-          shipMass={ship.hullMass}
           m={m}
+          ship={ship}
           onSelect={onSelect}
           warning={warning}
           diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
         />;
       }
     }
@@ -121,8 +146,11 @@ export default class Slot extends TranslatedComponent {
     // TODO: implement touch dragging
     
     return (
-      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onContextMenu={this._contextMenu} onDragOver={dragOver}>
+      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onKeyDown={this._keyDown} onContextMenu={this._contextMenu} onDragOver={dragOver} tabIndex="0" ref={slotDiv => this.slotDiv = slotDiv}>
-        <div className='details-container'>
+        {
+          // 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>
@@ -131,6 +159,7 @@ export default class Slot extends TranslatedComponent {
     );
   }
 
+
   /**
    * Toggle the modifications flag when selecting the modifications icon
    */

src/app/components/SlotSection.jsx

@@ -18,7 +18,8 @@ export default class SlotSection extends TranslatedComponent {
     onCargoChange: PropTypes.func.isRequired,
     onFuelChange: PropTypes.func.isRequired,
     code: PropTypes.string.isRequired,
-    togglePwr: PropTypes.func
+    togglePwr: PropTypes.func,
+    sectionMenuRefs: PropTypes.object
   };
 
   /**
@@ -32,7 +33,10 @@ export default class SlotSection extends TranslatedComponent {
     super(props);
     this.sectionId = sectionId;
     this.sectionName = sectionName;
+    this.ssHeadRef = null;
 
+    this.sectionRefArr = this.props.sectionMenuRefs[this.sectionId] = [];
+    this.sectionRefArr['selectedRef'] = null;
     this._getSlots = this._getSlots.bind(this);
     this._selectModule = this._selectModule.bind(this);
     this._getSectionMenu = this._getSectionMenu.bind(this);
@@ -40,6 +44,8 @@ export default class SlotSection extends TranslatedComponent {
     this._drop = this._drop.bind(this);
     this._dragOverNone = this._dragOverNone.bind(this);
     this._close = this._close.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this._handleSectionFocus = this._handleSectionFocus.bind(this);
     this.state = {};
   }
 
@@ -47,7 +53,59 @@ export default class SlotSection extends TranslatedComponent {
   //  _getSlots()
   //  _getSectionMenu()
   //  _contextMenu()
+  //  componentDidUpdate(prevProps)
 
+  /**
+   * TODO: May either need to send the function to be triggered when Enter key is pressed, or else
+   * may need a separate keyDown handler for each subclass (StandardSlotSection, HardpointSlotSection, etc.)
+   * ex: _keyDown(_keyDownfn, event)
+   *
+   * @param {SyntheticEvent} event KeyDown event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      event.stopPropagation();
+      if (event.currentTarget.nodeName === 'H1') {
+        this._openMenu(this.sectionName, event);
+      } else {
+        event.currentTarget.click();
+      }
+      return;
+    }
+    if (event.key == 'Tab') {
+      if (event.shiftKey) {
+        if ((event.currentTarget === this.sectionRefArr[this.firstRefId]) && this.sectionRefArr[this.lastRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.lastRefId].focus();
+        }
+      } else {
+        if ((event.currentTarget === this.sectionRefArr[this.lastRefId]) &&  this.sectionRefArr[this.firstRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.firstRefId].focus();
+        }
+      }
+    }
+  }
+
+  /**
+   * Set focus on appropriate Slot Section Menu element
+   * @param {Object} focusPrevProps prevProps for componentDidUpdate() from ...SlotSection.jsx
+   * @param {String} firstRef id of the first ref in ...SlotSection.jsx
+   * @param {String} lastRef id of the last ref in ...SlotSection.jsx
+   *
+   */
+  _handleSectionFocus(focusPrevProps, firstRef, lastRef) {
+    if (this.selectedRefId !== null && this.sectionRefArr[this.selectedRefId]) {
+      // set focus on the previously selected option for the currently open section menu
+      this.sectionRefArr[this.selectedRefId].focus();
+    } else if (this.sectionRefArr[firstRef] && this.sectionRefArr[firstRef] != null) {
+      // set focus on the first option in the currently open section menu if none have been selected previously
+      this.sectionRefArr[firstRef].focus();
+    }  else if (this.props.currentMenu == null && focusPrevProps.currentMenu == this.sectionName && this.sectionRefArr['ssHeadRef']) {
+      // set focus on the section menu header when section menu is closed
+      this.sectionRefArr['ssHeadRef'].focus();
+    }
+  }
   /**
    * Open a menu
    * @param  {string} menu    Menu name
@@ -137,6 +195,15 @@ export default class SlotSection extends TranslatedComponent {
         if (targetSlot && canMount(this.props.ship, targetSlot, m.grp, m.class)) {
           const mCopy = m.clone();
           this.props.ship.use(targetSlot, mCopy, false);
+          let experimentalNum = this.props.ship.hardpoints
+            .filter(s => s.m && s.m.experimental).length;
+          // Remove the module on the last slot if we now exceed the number of
+          // experimentals allowed
+          if (m.experimental && 4 < experimentalNum) {
+            this.props.ship.updateStats(originSlot, null, originSlot.m);
+            originSlot.m = null;  // Empty the slot
+            originSlot.discountedCost = 0;
+          }
           // Copy power info
           targetSlot.enabled = originSlot.enabled;
           targetSlot.priority = originSlot.priority;
@@ -170,6 +237,18 @@ export default class SlotSection extends TranslatedComponent {
             targetSlot.priority = targetPriority;
           }
           this.props.onChange();
+          this.props.ship
+            .updatePowerGenerated()
+            .updatePowerUsed()
+            .recalculateMass()
+            .updateJumpStats()
+            .recalculateShield()
+            .recalculateShieldCells()
+            .recalculateArmour()
+            .recalculateDps()
+            .recalculateEps()
+            .recalculateHps()
+            .updateMovement();
         }
       }
     }
@@ -225,7 +304,7 @@ export default class SlotSection extends TranslatedComponent {
     return (
       <div id={this.sectionId} className={'group'}  onDragLeave={this._dragOverNone}>
         <div className={cn('section-menu', { selected: sectionMenuOpened })} onClick={open} onContextMenu={ctx}>
-          <h1>{translate(this.sectionName)} <Equalizer/></h1>
+          <h1 tabIndex="0" onKeyDown={this._keyDown} ref={ssHead => this.sectionRefArr['ssHeadRef'] = ssHead}>{translate(this.sectionName)} <Equalizer/></h1>
           {sectionMenuOpened ? this._getSectionMenu(translate, this.props.ship) : null }
         </div>
         {this._getSlots()}

src/app/components/StandardSlot.jsx

@@ -35,6 +35,21 @@ export default class StandardSlot extends TranslatedComponent {
   constructor(props) {
     super(props);
     this._modificationsSelected = false;
+    this._keyDown = this._keyDown.bind(this);
+    this.modButton = null;
+    this.slotDiv = null;
+  }
+  /**
+   * Handle Enter key
+   * @param {SyntheticEvent} event KeyDown event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      if(event.target.className == 'r') {
+        this._toggleModifications();
+      }
+      this.props.onOpen(event);
+    }
   }
 
   /**
@@ -49,6 +64,12 @@ export default class StandardSlot extends TranslatedComponent {
     let classRating = m.class + m.rating;
     let menu;
     let validMods = m == null || !Modifications.modules[m.grp] ? [] : (Modifications.modules[m.grp].modifications || []);
+    if (m && m.name && m.name === 'Guardian Hybrid Power Plant') {
+      validMods = [];
+    }
+    if (m && m.name && m.name === 'Guardian Power Distributor') {
+      validMods = [];
+    }
     let showModuleResistances = Persist.showModuleResistances();
     let mass = m.getMass() || m.cargo || m.fuel || 0;
 
@@ -72,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) {
@@ -82,26 +108,28 @@ export default class StandardSlot extends TranslatedComponent {
           ship={ship}
           m={m}
           marker={modificationsMarker}
+          modButton = {this.modButton}
         />;
       } else {
         menu = <AvailableModulesMenu
           className='standard'
           modules={modules}
-          shipMass={ModuleUtils.isShieldGenerator(m.grp) ? ship.hullMass : ship.unladenMass}
           m={m}
+          ship={ship}
           onSelect={onSelect}
           warning={warning}
           diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
         />;
       }
     }
 
     return (
-      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onContextMenu={stopCtxPropagation}>
+      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onKeyDown={this._keyDown} onContextMenu={stopCtxPropagation} tabIndex="0" ref={ slotDiv => this.slotDiv = slotDiv }>
         <div className={cn('details-container', { warning: warning && warning(slot.m), disabled: m.grp !== 'bh' && !slot.enabled })}>
           <div className={'sz'}>{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'}>
@@ -121,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' ><button 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/StandardSlotSection.jsx

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

src/app/components/SvgIcons.jsx

@@ -228,6 +228,97 @@ export class LinkIcon extends SvgIcon {
   }
 }
 
+/**
+ * Link / Permalink / Chain
+ */
+export class OrbisIcon extends SvgIcon {
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return (
+      <g transform="scale(.037296)">
+        <path d="m429 319c60.75 0 110 49.248 110 110 0 60.75-49.247 110-110 110s-110-49.247-110-110c0-60.749 49.248-110 110-110m0-20c-34.724 0-67.369 13.522-91.922 38.075s-38.075 57.198-38.075 91.922 13.522 67.369 38.075 91.922c24.553 24.554 57.198 38.075 91.922 38.075s67.369-13.521 91.922-38.075c24.554-24.553 38.075-57.198 38.075-91.922s-13.521-67.369-38.075-91.922c-24.553-24.553-57.198-38.075-91.922-38.075z" />
+        <path d="m429 235c107.14 0 194 86.855 194 194s-86.855 194-194 194-194-86.855-194-194 86.855-194 194-194m0-20c-28.881 0-56.908 5.661-83.304 16.825-25.485 10.779-48.368 26.207-68.016 45.853-19.646 19.647-35.074 42.53-45.853 68.015-11.163 26.396-16.824 54.423-16.824 83.304s5.661 56.908 16.825 83.304c10.779 25.484 26.207 48.368 45.853 68.016 19.647 19.646 42.53 35.073 68.015 45.854 26.396 11.164 54.423 16.825 83.304 16.825s56.908-5.661 83.304-16.825c25.484-10.779 48.368-26.206 68.016-45.854 19.646-19.646 35.073-42.53 45.854-68.016 11.164-26.396 16.825-54.423 16.825-83.304s-5.661-56.908-16.825-83.304c-10.779-25.485-26.206-48.368-45.854-68.015-19.646-19.646-42.53-35.074-68.016-45.853-26.396-11.164-54.423-16.825-83.304-16.825z" />
+        <path d="m429 63c202.14 0 366 163.86 366 366s-163.86 366-366 366-366-163.86-366-366 163.86-366 366-366m0-20c-52.101 0-102.65 10.208-150.25 30.342-45.966 19.442-87.244 47.271-122.69 82.714s-63.272 76.721-82.714 122.69c-20.134 47.601-30.342 98.153-30.342 150.25s10.208 102.65 30.342 150.25c19.442 45.967 47.271 87.244 82.714 122.69 35.443 35.442 76.721 63.271 122.69 82.715 47.601 20.133 98.153 30.342 150.25 30.342s102.65-10.209 150.25-30.342c45.967-19.442 87.244-47.271 122.69-82.715 35.441-35.442 63.271-76.721 82.714-122.69 20.133-47.601 30.342-98.153 30.342-150.25s-10.209-102.65-30.342-150.25c-19.442-45.966-47.271-87.244-82.714-122.69s-76.722-63.272-122.69-82.714c-47.601-20.134-98.153-30.342-150.25-30.342z"/>
+        <path d="m429 63c202.14 0 366 163.86 366 366s-163.86 366-366 366-366-163.86-366-366 163.86-366 366-366m0-20c-52.101 0-102.65 10.208-150.25 30.342-45.966 19.442-87.244 47.271-122.69 82.714s-63.272 76.721-82.714 122.69c-20.134 47.601-30.342 98.153-30.342 150.25s10.208 102.65 30.342 150.25c19.442 45.967 47.271 87.244 82.714 122.69 35.443 35.442 76.721 63.271 122.69 82.715 47.601 20.133 98.153 30.342 150.25 30.342s102.65-10.209 150.25-30.342c45.967-19.442 87.244-47.271 122.69-82.715 35.441-35.442 63.271-76.721 82.714-122.69 20.133-47.601 30.342-98.153 30.342-150.25s-10.209-102.65-30.342-150.25c-19.442-45.966-47.271-87.244-82.714-122.69s-76.722-63.272-122.69-82.714c-47.601-20.134-98.153-30.342-150.25-30.342z" />
+        <path d="m429 20c225.88 0 409 183.11 409 409s-183.11 409-409 409-409-183.11-409-409 183.11-409 409-409m0-20c-57.905 0-114.09 11.345-166.99 33.721-51.087 21.608-96.963 52.538-136.36 91.93s-70.321 85.269-91.93 136.36c-22.376 52.902-33.721 109.09-33.721 166.99s11.345 114.09 33.721 166.99c21.608 51.087 52.538 96.964 91.93 136.35 39.392 39.392 85.269 70.321 136.36 91.931 52.902 22.375 109.09 33.721 166.99 33.721s114.09-11.346 166.99-33.721c51.087-21.608 96.964-52.538 136.35-91.931 39.392-39.392 70.321-85.269 91.931-136.35 22.375-52.902 33.721-109.09 33.721-166.99s-11.346-114.09-33.721-166.99c-21.608-51.087-52.538-96.963-91.931-136.36-39.392-39.392-85.269-70.321-136.35-91.93-52.902-22.376-109.09-33.721-166.99-33.721z"/>
+        <path d="m155.34 679.12 173.25-190.21-15.626-13.721-170.9 190.4zm31.01 31.714 202.41-169.1-16.418-14.417-198.76 170.43z"/>
+        <path d="m702.66 178.87-173.25 190.21 15.625 13.721 170.9-190.4zm-31.01-31.714-202.41 169.1 16.418 14.417 198.76-170.43z" />
+        <rect transform="matrix(-.7071 -.7071 .7071 -.7071 429.34 1036.2)" x="387.09" y="420.77" width="84.379" height="16.859" />
+      </g>
+    );
+  }
+}
+
+
+/**
+ * Material
+ */
+export class MatIcon extends SvgIcon {
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return<g xmlns="http://www.w3.org/2000/svg">
+      <path fill="#FF7100" d="M 24.86,4.18
+           C 24.86,4.18 17.17,7.82 17.17,7.82
+             17.17,7.82 15.35,14.55 15.35,14.55
+             15.35,14.55 24.70,9.75 24.70,9.75
+             24.70,9.75 24.86,4.18 24.86,4.18 Z
+           M 32.21,17.45
+           C 32.21,17.45 26.41,11.18 26.41,11.18
+             26.41,11.18 19.51,11.51 19.51,11.51
+             19.51,11.51 26.92,19.01 26.92,19.01
+             26.92,19.01 32.21,17.45 32.21,17.45 Z
+           M 21.99,28.62
+           C 21.99,28.62 26.10,21.10 26.10,21.10
+             26.10,21.10 23.66,14.57 23.66,14.57
+             23.66,14.57 18.89,24.01 18.89,24.01
+             18.89,24.01 21.99,28.62 21.99,28.62 Z
+           M 8.33,22.24
+           C 8.33,22.24 16.67,23.87 16.67,23.87
+             16.67,23.87 22.06,19.51 22.06,19.51
+             22.06,19.51 11.70,17.84 11.70,17.84
+             11.70,17.84 8.33,22.24 8.33,22.24 Z
+           M 10.11,7.14
+           C 10.11,7.14 11.15,15.66 11.15,15.66
+             11.15,15.66 16.92,19.49 16.92,19.49
+             16.92,19.49 15.29,9.02 15.29,9.02
+             15.29,9.02 10.11,7.14 10.11,7.14 Z
+           M 27.69,2.67
+           C 27.69,2.67 35.89,16.00 35.89,16.00
+             35.89,16.00 27.69,29.33 27.69,29.33
+             27.69,29.33 11.31,29.33 11.31,29.33
+             11.31,29.33 3.11,16.00 3.11,16.00
+             3.11,16.00 11.31,2.67 11.31,2.67
+             11.31,2.67 27.67,2.67 27.67,2.67M 29.16,0.00
+           C 29.16,0.00 27.69,0.00 27.69,0.00
+             27.69,0.00 11.31,0.00 11.31,0.00
+             11.31,0.00 9.84,0.00 9.84,0.00
+             9.84,0.00 9.06,1.25 9.06,1.25
+             9.06,1.25 0.87,14.57 0.87,14.57
+             0.87,14.57 0.00,15.98 0.00,15.98
+             0.00,15.98 0.87,17.39 0.87,17.39
+             0.87,17.39 9.06,30.73 9.06,30.73
+             9.06,30.73 9.84,32.00 9.84,32.00
+             9.84,32.00 11.31,32.00 11.31,32.00
+             11.31,32.00 27.69,32.00 27.69,32.00
+             27.69,32.00 29.16,32.00 29.16,32.00
+             29.16,32.00 29.94,30.73 29.94,30.73
+             29.94,30.73 38.13,17.39 38.13,17.39
+             38.13,17.39 39.00,15.98 39.00,15.98
+             39.00,15.98 38.13,14.57 38.13,14.57
+             38.13,14.57 29.94,1.25 29.94,1.25
+             29.94,1.25 29.16,0.00 29.16,0.00
+             29.16,0.00 29.16,0.00 29.16,0.00 Z" />
+    </g>;
+  }
+}
+
+
 /**
  * Shopping icon (dollar sign)
  */

src/app/components/UtilitySlotSection.jsx

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

src/app/components/VerticalBarChart.jsx

@@ -1,7 +1,7 @@
 import TranslatedComponent from './TranslatedComponent';
 import React, { PropTypes } from 'react';
-import Measure from 'react-measure';
+import ContainerDimensions from 'react-container-dimensions';
-import { BarChart, Bar, XAxis, YAxis } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, LabelList } from 'recharts';
 
 const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
 const LABEL_COLOUR = '#000000';
@@ -17,7 +17,6 @@ const merge = function(one, two) {
  * A vertical bar chart
  */
 export default class VerticalBarChart extends TranslatedComponent {
-
   static propTypes = {
     data : PropTypes.array.isRequired,
     yMax : PropTypes.number
@@ -32,13 +31,6 @@ export default class VerticalBarChart extends TranslatedComponent {
     super(props);
 
     this._termtip = this._termtip.bind(this);
-
-    this.state = {
-      dimensions: {
-        width: 300,
-        height: 300
-      }
-    };
   }
 
   /**
@@ -46,7 +38,6 @@ export default class VerticalBarChart extends TranslatedComponent {
    * @returns {Object} the markup
    */
   render() {
-    const { width, height } = this.state.dimensions;
     const { tooltip, termtip } = this.context;
 
     // Calculate maximum for Y
@@ -56,15 +47,19 @@ export default class VerticalBarChart extends TranslatedComponent {
     const localMax = Math.max(dataMax, yMax);
 
     return (
-      <Measure whitelist={['width', 'top']} onMeasure={ (dimensions) => this.setState({ dimensions }) }>
+      <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' label={<ValueLabel />} fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}/>
+              <Bar dataKey='value' fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}>
+                <LabelList dataKey='value' position='insideTop'/>
+              </Bar>
             </BarChart>
           </div>
-      </Measure>
+        )}
+      </ContainerDimensions>
     );
   }
 
@@ -83,29 +78,3 @@ export default class VerticalBarChart extends TranslatedComponent {
     }
   }
 }
-
-/**
- * A label that displays the value within the bar of the chart
- */
-class ValueLabel extends React.Component {
-  static propTypes = {
-    x: PropTypes.number,
-    y: PropTypes.number,
-    payload: PropTypes.object,
-    value: PropTypes.number
-  };
-
-  /**
-   * Render offence
-   * @return {React.Component} contents
-   */
-  render() {
-    const { x, y, payload, value } = this.props;
-
-    const em = value < 1000 ? '1em' : value < 1000 ? '0.8em' : '0.7em';
-
-    return (
-      <text x={x} y={y} fill="#000000" textAnchor="middle" dy={20} style={{ fontSize: em }}>{value}</text>
-    );
-  }
-};

src/app/components/WeaponDamageChart.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
-import { CollapseSection, ExpandSection, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import LineChart from '../components/LineChart';
-import Slider from '../components/Slider';
 import * as Calc from '../shipyard/Calculations';
-import Module from '../shipyard/Module';
 
 const DAMAGE_DEALT_COLORS = ['#FFFFFF', '#FF0000', '#00FF00', '#7777FF', '#FFFF00', '#FF00FF', '#00FFFF', '#777777'];
 
@@ -184,7 +179,7 @@ export default class WeaponDamageChart extends TranslatedComponent {
     const code = `${ship.toString()}:${opponent.toString()}`;
 
     return (
-      <span>
+      <div>
         <LineChart
           xMax={maxRange}
           yMax={this.state.maxDps}
@@ -198,7 +193,7 @@ export default class WeaponDamageChart extends TranslatedComponent {
           points={200}
           code={code}
         />
-      </span>
+      </div>
     );
   }
 }

src/app/i18n/Language.jsx

@@ -7,6 +7,8 @@ import * as IT from './it';
 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;
@@ -27,6 +29,8 @@ export function getLanguage(langCode) {
     case 'ru': lang = RU; break;
     case 'pl': lang = PL; break;
     case 'pt': lang = PT; break;
+    case 'cn': lang = CN; break;
+    case 'ko': lang = KO; break;
     default:
       lang = EN;
   }
@@ -60,17 +64,20 @@ export function getLanguage(langCode) {
     },
     translate,
     units: {
+      ang: '°',                         // Angle
       CR: <u>{translate('CR')}</u>,     // Credits
       kg: <u>{translate('kg')}</u>,     // Kilograms
       kgs: <u>{translate('kg/s')}</u>,  // Kilograms per second
       km: <u>{translate('km')}</u>,     // Kilometers
       Ls: <u>{translate('Ls')}</u>,     // Light Seconds
       LY: <u>{translate('LY')}</u>,     // Light Years
+      m: <u>{translate('m')}</u>,      // Meters
       MJ: <u>{translate('MJ')}</u>,     // Mega Joules
       'm/s': <u>{translate('m/s')}</u>, // Meters per second
       '°/s': <u>{translate('°/s')}</u>, // Degrees per second
       MW: <u>{translate('MW')}</u>,     // Mega Watts (same as Mega Joules per second)
       mps: <u>{translate('m/s')}</u>,    // Metres per second
+      pct: '%',                         // Percent
       ps: <u>{translate('/s')}</u>,           // per second
       pm: <u>{translate('/min')}</u>,         // per minute
       s: <u>{translate('secs')}</u>,         // Seconds
@@ -91,5 +98,7 @@ export const Languages = {
   fr: 'Français',
   ru: 'ру́сский',
   pl: 'polski',
-  pt: 'português'
+  pt: 'português',
+  cn: '中文',
+  ko: '한국어'
 };

src/app/i18n/cn.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: ['AM', 'PM'],
+  days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+  shortDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+  months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+  shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+};
+
+export { default as terms } from './cn.json';

src/app/i18n/fr.json

@@ -59,7 +59,7 @@
     "empty all": "vide tout",
     "Enter Name": "Entrer nom",
     "Explorer": "explorateur",
-    "fastest range": "gamme la plus rapide",
+    "farthest range": "gamme la plus rapide",
     "fuel": "carburant",
     "fuel level": "niveau de carburant",
     "full tank": "Réservoir plein",

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/pt.js

@@ -2,15 +2,15 @@ export const formats = {
   decimal: ',',
   thousands: '.',
   grouping: [3],
-  currency: ['', ' €'],
+  currency: ['$', ''],
   dateTime: '%A, %e de %B de %Y, %X',
   date: '%d/%m/%Y',
   time: '%H:%M:%S',
   periods: ['AM', 'PM'],
-  days: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+  days: ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
-  shortDays: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+  shortDays: ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sab'],
-  months: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+  months: ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'],
-  shortMonths: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
+  shortMonths: ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez']
 };
 
 export { default as terms } from './pt.json';

src/app/i18n/ru.json

@@ -5,7 +5,7 @@
     "PHRASE_EXPORT_DESC": "Детальный JSON-экспорт вашей сборки для использования в других местах и инструментах",
     "PHRASE_FASTEST_RANGE": "Последовательные прыжки максимальной дальности",
     "PHRASE_IMPORT": "Для импорта вставьте код в эту форму",
-    "PHRASE_LADEN": "Масса корабля с учётом топлива и грузов",
+    "PHRASE_LADEN": "Масса корабля с учетом топлива и грузов",
     "PHRASE_NO_BUILDS": "Нечего сравнивать",
     "PHRASE_NO_RETROCH": "Нет ранних версий сборки",
     "PHRASE_SELECT_BUILDS": "Выберите конфигурацию для сравнения",
@@ -14,17 +14,20 @@
     "PHRASE_UNLADEN": "Масса корабля без учета топлива и грузов",
     "PHRASE_UPDATE_RDY": "Доступна новая версия. Нажмите для обновления.",
     "PHRASE_ENGAGEMENT_RANGE": "Дистанция между кораблём и целью",
-    "PHRASE_SELECT_BLUEPRINT": "Нажмите чтобы выбрать чертёж",
+    "PHRASE_SELECT_BLUEPRINT": "Нажмите чтобы выбрать чертеж",
     "PHRASE_BLUEPRINT_WORST": "Худшие основные значения для чертежа",
+    "PHRASE_BLUEPRINT_FIFTY": "50% значения для чертежа",
+    "PHRASE_BLUEPRINT_SEVEN_FIVE": "75% значения для чертежа",
     "PHRASE_BLUEPRINT_RANDOM": "Случайный выбор между худшими и лучшими значениями для этого чертежа",
     "PHRASE_BLUEPRINT_BEST": "Лучшие основные значения для чертежа",
     "PHRASE_BLUEPRINT_EXTREME": "Лучшие положительные и худшие отрицательные основные значения для чертежа",
-    "PHRASE_BLUEPRINT_RESET": "Убрать все изменения и чертёж",
+    "PHRASE_BLUEPRINT_RESET": "Сбросить все модификаторы и чертеж",
-    "PHRASE_SELECT_SPECIAL": "Нажмите чтобы выбрать экспериментальный эффект",
+    "PHRASE_SELECT_SPECIAL": "Нажмите, чтобы выбрать экспериментальный эффект",
     "PHRASE_NO_SPECIAL": "Без экспериментального эффекта",
-    "PHRASE_SHOPPING_LIST": "Станции что продают эту сборку",
+    "PHRASE_SHOPPING_LIST": "Станции, на которых продают эту сборку",
-    "PHRASE_REFIT_SHOPPING_LIST": "Станции что продают необходимые модули",
+    "PHRASE_SHOPPING_MATS": "Материалы которые нужны для сборки",
-    "PHRASE_TOTAL_EFFECTIVE_SHIELD": "Общий урон что может быть нанесён в каждым типе, если используются все щитонакопители",
+    "PHRASE_REFIT_SHOPPING_LIST": "Станции, на которых продают необходимые модули",
+    "PHRASE_TOTAL_EFFECTIVE_SHIELD": "Общий урон, что может быть нанесен в каждым типе, если используются все щитонакопители",
     "PHRASE_TIME_TO_LOSE_SHIELDS": "Щиты продержатся",
     "PHRASE_TIME_TO_RECOVER_SHIELDS": "Щиты восстановятся за",
     "PHRASE_TIME_TO_RECHARGE_SHIELDS": "Щиты будут заряжены за",
@@ -36,110 +39,155 @@
     "PHRASE_TIME_TO_LOSE_ARMOUR": "Броня продержится",
     "PHRASE_MODULE_PROTECTION_EXTERNAL": "Защита гнёзд",
     "PHRASE_MODULE_PROTECTION_INTERNAL": "Защита всех остальных модулей",
-    "PHRASE_SHIELD_DAMAGE": "Подробности источников поддерживаемого ДПС против щитов",
+    "PHRASE_OVERALL_DAMAGE": "Разбивка источников устойчивого УвС",
-    "PHRASE_ARMOUR_DAMAGE": "Подробности источников поддерживаемого ДПС против брони",
+    "PHRASE_SHIELD_DAMAGE": "Подробности источников поддерживаемого УвС против щитов",
+    "PHRASE_ARMOUR_DAMAGE": "Подробности источников поддерживаемого УвС против брони",
     "PHRASE_TIME_TO_REMOVE_SHIELDS": "Снимет щиты за",
+    "PHRASE_MULTI_CREW_CAPACITOR_POINTS": "Щелкните правой кновкой мыши чтобы объединить в группу.",
     "TT_TIME_TO_REMOVE_SHIELDS": "Непрерывным огнём из всех орудий",
     "PHRASE_TIME_TO_REMOVE_ARMOUR": "Снимет броню за",
     "TT_TIME_TO_REMOVE_ARMOUR": "Непрерывным огнём из всех орудий",
-    "PHRASE_TIME_TO_DRAIN_WEP": "Опустошит ОРУЖ за",
+    "PHRASE_TIME_TO_DRAIN_WEP": "Опустошит ОРУ за",
-    "TT_TIME_TO_DRAIN_WEP": "Время за которое опустошится аккумулятор ОРУЖ при стрельбе из всех орудий",
+    "TT_TIME_TO_DRAIN_WEP": "Время, за которое опустошится аккумулятор ОРУ при стрельбе из всех орудий",
     "TT_TIME_TO_LOSE_SHIELDS": "Против поддерживаемой стрельбы из всех орудий противника",
     "TT_TIME_TO_LOSE_ARMOUR": "Против поддерживаемой стрельбы из всех орудий противника",
-    "TT_MODULE_ARMOUR": "Броня защищаюшае модули от урона",
+    "TT_MODULE_ARMOUR": "Броня, защищающая модули от урона",
-    "TT_MODULE_PROTECTION_EXTERNAL": "Процент урона перенаправленного от гнёзд на наборы для усиления модулей",
+    "TT_MODULE_PROTECTION_EXTERNAL": "Процент урона, перенаправленного от гнезд на наборы для усиления модулей",
-    "TT_MODULE_PROTECTION_INTERNAL": "Процент урона перенаправленного от модулей вне гнёзд на наборы для усиления модулей",
+    "TT_MODULE_PROTECTION_INTERNAL": "Процент урона, перенаправленного от модулей вне гнёзд на наборы для усиления модулей",
-    "TT_EFFECTIVE_SDPS_SHIELDS": "Реальный поддерживаемый ДПС пока аккумулятор ОРУЖ не пуст",
+    "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_SHIELDS": "ПУвС против щитов",
-    "PHRASE_EFFECTIVE_SDPS_ARMOUR": "ПДПС против брони",
+    "PHRASE_EFFECTIVE_SDPS_ARMOUR": "ПУвС против брони",
-    "TT_SUMMARY_SPEED": "С полным топливным баком и 4 пунктами в ДВИ",
+    "TT_SUMMARY_SPEED": "С полным топливным баком и 4 пунктами в ДВГ",
-    "TT_SUMMARY_SPEED_NONFUNCTIONAL": "маневровые двигатели выключены или превышена максимальная масса с топливом и грузом",
+    "TT_SUMMARY_SPEED_NONFUNCTIONAL": "Маневровые двигатели выключены или превышена максимальная масса с топливом и грузом",
-    "TT_SUMMARY_BOOST": "С полным топливным баком и 4 пунктами в ДВИ",
+    "TT_SUMMARY_BOOST": "С полным топливным баком и 4 пунктами в ДВГ",
+    "TT_SUMMARY_BOOST_INTERVAL": "Время заполнения с 4 пунктами в СИС",
     "TT_SUMMARY_BOOST_NONFUNCTIONAL": "Распределитель питания не может обеспечить достаточно энергии для форсажа",
     "TT_SUMMARY_SHIELDS": "Чистая сила щита, включая усилители",
+    "TT_SUMMARY_SHIELDS_SCB": "Прочность щита, включая бустеры и щитонакопители",
     "TT_SUMMARY_SHIELDS_NONFUNCTIONAL": "Шитогенератор отсутствует или выключен",
     "TT_SUMMARY_INTEGRITY": "Целостность корабля, включая переборки и наборы для усиления корпуса",
     "TT_SUMMARY_HULL_MASS": "Масса корпуса без каких-либо модулей",
     "TT_SUMMARY_UNLADEN_MASS": "Масса корпуса и модулей без топлива и груза",
     "TT_SUMMARY_LADEN_MASS": "Масса корпуса и модулей с топливом и грузом",
     "TT_SUMMARY_DPS": "Урон в секунду при стрельбе из всех орудий",
-    "TT_SUMMARY_EPS": "Расход аккумулятора ОРУЖ в секунду при стрельбе из всех орудий",
+    "TT_SUMMARY_EPS": "Расход аккумулятора ОРУ в секунду при стрельбе из всех орудий",
-    "TT_SUMMARY_TTD": "Время расхода аккумулятора ОРУЖ при стрельбе из всех орудий и с 4 пунктами в ОРУЖ",
+    "TT_SUMMARY_TTD": "Время расхода аккумулятора ОРУ при стрельбе из всех орудий и с 4 пунктами в ОРУ",
-    "TT_SUMMARY_MAX_SINGLE_JUMP": "Самый дальний возможный прыжок без груза и с топливом достаточным только на сам прыжок",
+    "TT_SUMMARY_MAX_SINGLE_JUMP": "Самый дальний возможный прыжок без груза и с топливом, достаточным только на сам прыжок",
     "TT_SUMMARY_UNLADEN_SINGLE_JUMP": "Самый дальний возможный прыжок без груза и с полным топливным баком",
     "TT_SUMMARY_LADEN_SINGLE_JUMP": "Самый дальний возможный прыжок с полным грузовым отсеком и с полным топливным баком",
     "TT_SUMMARY_UNLADEN_TOTAL_JUMP": "Самая дальняя общая дистанция без груза, с полным топливным баком и при прыжках на максимальное расстояние",
     "TT_SUMMARY_LADEN_TOTAL_JUMP": "Самая дальняя общая дистанция с полным грузовым отсеком, с полным топливным баком и при прыжках на максимальное расстояние",
-    "HELP_MODIFICATIONS_MENU": "Ткните на номер чтобы ввести новое значение, или потяните вдоль полосы для малых изменений",
+    "HELP_MODIFICATIONS_MENU": "Нажмите на номер, чтобы ввести новое значение, или потяните вдоль полосы для малых изменений",
+    "PHRASE_FAIL_EDENGINEER": "Не удалось отправить в EDEngineer (запустите EDEngineer и убедитесь, что API запущен, затем обновите страницу).",
+    "PHRASE_FIREFOX_EDENGINEER": "Отправка в EDEngineer несовместима с настройками безопасности Firefox. Пожалуйста, попробуйте еще раз в Google Chrome.",
     "am": "Блок Автом. Полевого Ремонта",
     "bh": "Переборки",
-    "bl": "Пучковый Лазер",
+    "bl": "Пучковый лазер",
-    "bsg": "Двухпоточный Щитогенератор",
+    "bsg": "Двухпоточный щитогенератор",
-    "c": "Орудие",
+    "c": "Пушка",
-    "cc": "Контроллер магнитного снаряда для сбора",
+    "causres": "Сопротивление едк.урону",
+    "Caustic resistance": "Сопротивление едк.урону",
+    "cc": "Контроллер дронов-сборщиков",
     "ch": "Разбрасыватель дипольных отражателей",
     "cr": "Грузовой стеллаж",
     "cs": "Сканер содержимого",
+    "csl": "Антикор катапульта",
     "dc": "Стыковочный компьютер",
-    "ec": "Электр. противодействие",
+    "ec": "Радиоэлектронное подавление",
     "fc": "Залповое орудие",
     "fh": "Ангар для истребителя",
     "fi": "FSD-перехватчик",
     "fs": "Топливозаборник",
-    "fsd": "Рамочно Сместительный двигатель",
+    "fsd": "Рамочно-сместительный двигатель",
     "ft": "Топливный бак",
-    "fx": "Контроллер магнитного снаряда для топлива",
+    "fx": "Контроллер дронов-заправщиков",
-    "hb": "Контроллер магнитного снаряда для взлома трюма",
+    "hb": "Контроллер дронов-взломщиков трюмов",
     "hr": "Набор для усиления корпуса",
     "hs": "Теплоотводная катапульта",
     "kw": "Сканер преступников",
     "ls": "Система жизнеобеспечения",
     "mc": "Многоствольное орудие",
+    "axmc": "Многоствольное орудие АИ",
     "ml": "Проходочный лазер",
-    "mr": "Ракетный лоток",
+    "mr": "Блок ракет",
+    "axmr": "Блок ракет АИ",
+    "ews": "Стабилизатор экспериментального вооружения",
     "mrp": "Набор для усиления модуля",
     "nl": "Мины",
     "pa": "Ускоритель плазмы",
     "pas": "Комплект для сближения с планетой",
-    "pc": "Контроллер магнитного снаряда для геологоразведки",
+    "pc": "Контроллер дронов-геологоразведчиков",
     "pce": "Каюта пассажира эконом-класса",
+    "passenger capacity": "Количество пассажиров",
     "pci": "Каюта пассажира бизнес-класса",
     "pcm": "Каюта пассажира первого класса",
     "pcq": "Каюта пассажира класса люкс",
     "pd": "Распределитель питания",
-    "pl": "Ипмульсный лазер",
+    "pl": "Импульсный лазер",
     "po": "Точечная оборона",
     "pp": "Силовая установка",
+    "gpp": "Силовая установка Стражей",
+    "gpd": "Гибридный распределитель питания Стражей",
+    "gpc": "Плазменная пушка Стражей",
+    "ggc": "Пушка Гаусса Стражей",
+    "gsrp": "Набор для усиления щита Стражей",
+    "gfsb": "Ускоритель FSD Стражей",
+    "ghrp": "Набор для усиления корпуса Стражей",
+    "gmrp": "Набор для усиления модуля Стражей",
+    "pwa": "Анализатор импульсных волн",
+    "abl": "Абразивный бластер",
+    "scl": "Пусковая установка для сейсмических снарядов",
+    "sdm": "Вытесняющая ракета для добычи глубинных залежей",
+    "tbsc": "Шоковое орудие",
+    "gsc": "Осколочное орудие Стражей",
     "psg": "Призматический щитогенератор",
     "pv": "Гараж для планетарного транспорта",
-    "rf": "Устройство переработки",
+    "rf": "Очиститель",
-    "rg": "Электромагнитная пушка",
+    "rfl": "Зенитная установка (снаряды с дистанционным подрывом)",
+    "rg": "Рельсотрон",
+    "rsl": "Контроллер дронов-исследователей",
     "s": "Сенсоры",
     "sb": "Усилитель щита",
     "sc": "Сканер обнаружения",
     "scb": "Щитонакопитель",
+    "sfn": "Нейтрализатор отключающего поля",
     "sg": "Щитогенератор",
-    "ss": "Сканер Поверхностей",
+    "ss": "Сканер поверхностей",
+    "sua": "Помощь в гиперкрейсерском режиме",
     "t": "Маневровые двигатели",
-    "tp": "Торпедная стойка",
+    "tp": "Торпедная установка",
-    "ul": "Пульсирующие лазеры",
+    "ul": "Пульсирующий лазер",
+    "Send To EDEngineer": "Отправить в EDEngineer",
+    "Send To EDOMH": "Отправить в EDOMH",
     "ws": "Сканер следа FSD",
+    "rpl": "Контроллер дронов-ремонтников",
+    "rcpl": "Контроллер дронов-разведчиков",
+    "xs": "Ксено-сканер",
+    "tbem": "Блок энзимных ракет",
+    "tbrfl": "Установка для стрельбы стреловидными снарядами с дистанционным подрывом",
+    "dtl": "Контроллер дронов-очистителей",
+    "mlc": "Мультиконтроллер",
+    "mahr": "Метасплавное усиление корпуса",
     "emptyrestricted": "пусто (ограниченно)",
     "damage dealt to": "Урон нанесён",
     "damage received from": "Урон получен от",
-    "against shields": "Против шитов",
+    "against shields": "Против щитов",
     "against hull": "Против корпуса",
-    "total effective shield": "Общие эффективные щиты",
+    "total effective shield": "Общая эффективность щита",
     "ammunition": "Припасы",
     "secs": "с",
-    "rebuildsperbay": "Построек за полосу",
+    "bays": "Ячейки",
+    "rebuildsperbay": "Истребителей в ячейке",
+    "mroll": "Roll",
+    "feature": "Свойство",
     "worst": "Худшее",
     "average": "Среднее",
     "random": "Случайное",
     "best": "Лучшее",
+    "current": "Текущее",
     "extreme": "Экстремальное",
     "reset": "Сброс",
     "dpe": "Урон на МДж энергии",
@@ -148,14 +196,16 @@
     "dpssdps": "Урон в секунду (поддерживаемый урон в секунду)",
     "eps": "Энергия в секунду",
     "epsseps": "Энергия в секунду (поддерживаемая энергия в секунду)",
+    "fallofffromrange": "Спад",
+    "falloff": "Спад",
     "hps": "Нагрев в секунду",
-    "hpsshps": "Heat per second (sustained heat per second)",
+    "hpsshps": "Нагрев в секунду (поддерживаемый нагрев в секунду)",
     "damage by": "Урон",
     "damage from": "Урон от",
     "shield cells": "Щитонакопители",
     "recovery": "включение",
     "recharge": "перезарядка",
-    "engine pips": "Пункты в двигателе",
+    "engine pips": "Ячейки питания на ДВГ",
     "4b": "4 пункта и Форсаж",
     "speed": "скорость",
     "pitch": "Тангаж",
@@ -164,13 +214,15 @@
     "internal protection": "Внутренняя защита",
     "external protection": "Внешняя защита",
     "engagement range": "Боевое расстояние",
+    "boost interval": "Интервал повыш.",
     "total": "Всего",
-    "ammo": "Боекомплект",
+    "ammo": "Макс. боекомплект",
     "boot": "Время загрузки",
+    "hacktime": "Время взлома",
     "brokenregen": "Скорость восстановления при пробое",
     "burst": "Длина очереди",
     "burstrof": "Скорострельность очереди",
-    "clip": "Боекомплект",
+    "clip": "Размер боекомплекта",
     "damage": "Урон",
     "distdraw": "Тяга распределителя",
     "duration": "Продолжительность",
@@ -183,7 +235,7 @@
     "hullreinforcement": "Укрепление корпуса",
     "integrity": "Целостность",
     "jitter": "Дрожание",
-    "kinres": "Сопротивление китетическому урону",
+    "kinres": "Сопротивление кинетическому урону",
     "maxfuel": "Макс. топлива на прыжок",
     "mass": "Масса",
     "optmass": "Оптимизированная масса",
@@ -199,11 +251,16 @@
     "rof": "Скорострельность",
     "angle": "Угол сканера",
     "scanrate": "Скорость сканера",
+    "proberadius": "Радиус зонда",
     "scantime": "Время сканирования",
+    "scan range": "Дальность",
+    "max angle": "Макс. угол",
     "shield": "Щит",
+    "armour": "Броня",
     "shieldboost": "Усиление щитов",
     "shieldreinforcement": "Усилитель щита",
     "shotspeed": "Скорость выстрела",
+    "shotdmg": "Урон за выстрел(DPS)",
     "spinup": "Время раскрутки",
     "syscap": "Ресурс систем",
     "sysrate": "Перезарядка систем",
@@ -234,9 +291,12 @@
     "explosive": "Взрывч.",
     "kinetic": "Механич.",
     "thermal": "Тепл.",
+    "caustic": "Едкий",
     "generator": "Генератор",
     "boosters": "Усилители",
     "cells": "Ячейки",
+    "shield addition": "Добавления к щиту",
+    "jump addition": "Добавления к прыжку",
     "bulkheads": "Переборки",
     "reinforcement": "Усилители",
     "power and costs": "Энергия и стоимость",
@@ -250,7 +310,7 @@
     "damage to opponent's shields": "Урон щиту противника",
     "damage to opponent's hull": "Урон корпусу противника",
     "offence": "Нападение",
-    "defence": "Оборона",
+    "defence": "Защита",
     "shield metrics": "Данные щита",
     "raw shield strength": "Чистая мощность щита",
     "shield sources": "Ресурсы щита",
@@ -265,28 +325,70 @@
     "defence metrics": "Данные обороны",
     "fuel carried": "Топливо на борту",
     "cargo carried": "Груз на борту",
-    "ship control": "Управление кораблём",
+    "ship control": "Управление кораблем",
     "opponent": "Противник",
     "opponent's shields": "Щит противника",
     "opponent's armour": "Броня противника",
+    "overall damage": "общий урон",
+    "overall": "общий",
     "shield damage sources": "источники урона по щиту",
     "armour damage sources": "источники урона по броне",
     "never": "Никогда",
     "stock": "базовый",
     "boost": "форсаж",
+    "tab_defence": "защита",
+    "federation rank 1": "Рекрут",
+    "federation rank 2": "Кадет",
+    "federation rank 3": "Гардемарин",
+    "federation rank 4": "Старшина",
+    "federation rank 5": "Главный старшина",
+    "federation rank 6": "Уорент-офицер",
+    "federation rank 7": "Энсин",
+    "federation rank 8": "Лейтенант",
+    "federation rank 9": "Капитан-лейтенант",
+    "federation rank 10": "Начальник гарнизона",
+    "federation rank 11": "Командир корабля",
+    "federation rank 12": "Контр-адмирал",
+    "federation rank 13": "Вице-адмирал",
+    "federation rank 14": "Адмирал",
+    "federation rank required": "Минимальный ранг федерации для покупки",
+    "empire rank 1": "Чужак",
+    "empire rank 2": "Крепостной",
+    "empire rank 3": "Мастер",
+    "empire rank 4": "Оруженосец",
+    "empire rank 5": "Рыцарь",
+    "empire rank 6": "Лорд",
+    "empire rank 7": "Барон",
+    "empire rank 8": "Виконт",
+    "empire rank 9": "Граф",
+    "empire rank 10": "Эрл",
+    "empire rank 11": "Маркиз",
+    "empire rank 12": "Герцог",
+    "empire rank 13": "Принц",
+    "empire rank 14": "Король",
+    "empire rank required": "Минимальный ранг империи для покупки",
+    "kg": "кг",
+    "kg/s": "кг/с",
+    "km": "км",
+    "m": "м",
+    "MJ": "МДж",
+    "MW": "МВт",
+    "T": "т",
+    "°/s": "°/с",
     "/s": "/с",
+    "/min": "/мин",
     "m/s": "м/с",
-    "Ls": "Св.сек",
+    "Ls": "Св.с",
     "LY": "Св.лет",
-    "CR": "кр.",
+    "CR": "КР.",
-    "S": "M",
+    "S": "М",
     "M": "С",
-    "L": "б",
+    "L": "Б",
-    "H": "O",
+    "H": "О",
-    "U": "B",
+    "U": "В",
     "small": "Малый",
     "medium": "Средний",
-    "large": "большой",
+    "large": "Большой",
     "alpha": "Альфа",
     "beta": "Бета",
     "standard": "Стандартный",
@@ -299,28 +401,29 @@
     "edit data": "Редактирование",
     "empty all": "пусто все",
     "Enter Name": "Введите имя",
-    "fastest range": "быстрый диапазон",
+    "farthest range": "быстрый диапазон",
     "fuel level": "уровень топлива",
     "full tank": "Полный бак",
     "internal compartments": "внутренние отсеки",
     "jump range": "Дальность прыжка",
-    "mass lock factor": "Масс. блок",
+    "mass lock factor": "Коэффициент гравитационного захвата",
     "max mass": "Максимальная масса",
+    "minimum mass": "Минимальная масса",
+    "optimal mass": "Оптимальная масса",
     "net cost": "разница в цене",
     "none created": "не создано",
     "refuel time": "Время дозаправки",
     "retrofit from": "модификация от",
     "T-Load": "Тепл.",
     "utility mounts": "Вспомогательное оборудование",
-    "about": "О ...",
+    "about": "О сайте",
     "action": "Действие",
     "added": "Добавлено",
-    "armour": "Броня",
     "available": "доступно",
     "backup": "Резервная копия",
     "bins": "контейнеры",
-    "build": "cборка",
+    "build": "сборка",
-    "builds": "cборки",
+    "builds": "сборки",
     "buy": "купить",
     "cancel": "отменить",
     "cargo": "Груз",
@@ -336,21 +439,21 @@
     "deployed": "Открыты",
     "disabled": "Отключено",
     "discount": "Скидка",
-    "DPS": "УВС",
+    "DPS": "УвС",
     "efficiency": "Эффективность",
     "empty": "пусто",
-    "ENG": "ДВИ",
+    "ENG": "ДВГ",
     "export": "Экспорт",
     "forum": "Форум",
-    "fuel": "Топливо",
+    "fuel": "Топл.",
     "hardpoints": "Орудийные порты",
     "hull": "Корпус",
     "import": "импортировать ",
     "insurance": "Страховка",
     "jumps": "Прыжков",
-    "laden": "Груженый",
+    "laden": "Груж",
     "language": "Язык",
-    "maneuverability": "Маневренность",
+    "maneuverability": "Манёвренность",
     "max": "Макс",
     "no": "Нет",
     "pen": "ПБ",
@@ -361,13 +464,15 @@
     "rate": "скорость",
     "rename": "Переименовать",
     "repair": "Починка",
-    "ret": "Убр.",
+    "ret": "Убр",
     "retracted": "Убрано",
-    "ROF": "В/сек",
+    "ROF": "В\/с",
     "save": "Сохранить",
     "sell": "Продать",
     "settings": "Настройки",
     "shields": "Щиты",
+    "No Shield": "Нет щита",
+    "Never": "Никогда",
     "ship": "Корабль",
     "ships": "Корабли",
     "shortened": "Укороченный",
@@ -377,8 +482,296 @@
     "SYS": "СИС",
     "time": "Время",
     "type": "Тип",
-    "unladen": "Пустой",
+    "unladen": "Пуст",
     "URL": "Ссылка",
-    "WEP": "ОРУЖ",
+    "WEP": "ОРУ",
-    "yes": "Да"
+    "yes": "Да",
+    "crew": "экипаж",
+    "jump": "прыж",
+    "pax": "псж",
+    "RST": "СБР",
+    "grade": "уровень",
+    "total laden": "всего груж",
+    "total unladen": "всего пуст",
+    "module": "модуль",
+    "announcements": "объявления",
+    "resistance": "сопротивление",
+    "Lightweight Alloy": "Лёгкие сплавы",
+    "base": "базовые",
+    "core module classes": "основные модули",
+    "Group highlighted ships": "Сгруппировать выделенные корабли",
+    "tooltips": "всплывающие подсказки",
+    "module resistances": "сопротивление модулей",
+    "power plant": "силовая установка",
+    "thrusters": "маневровые двигатели",
+    "frame shift drive": "рамочно-сместительный двигатель",
+    "life support": "система жизнеобеспечения",
+    "power distributor": "распределитель питания",
+    "sensors": "сенсоры",
+    "fuel tank": "топливный бак",
+    "resting heat (Beta)": "тепло покоя (бета)",
+    "hull hardness": "Прочность корпуса",
+    "weapon": "оружие",
+    "maximum speed": "максимальная скорость",
+    "maximum range": "максимальная дальность",
+    "shortlink": "короткая ссылка",
+    "guardian": "Стражи",
+    "engineers": "инженеры",
+    "component": "компонент",
+    "amount": "кол-во",
+    "core internal": "основное оборуднование",
+    "optional internal": "доп. оборудование",
+    "Heat Sink Launcher": "Теплоотводная катапульта",
+    "scanners": "сканеры",
+    "experimental": "экспериментальное",
+    "mining": "добыча ресурсов",
+    "lasers": "лазеры",
+    "ordnance": "артиллерия",
+    "projectiles": "с боеприпасами",
+    "hangars": "ангары",
+    "limpet controllers": "контроллеры дронов",
+    "passenger cabins": "каюты пассажиров",
+    "structural reinforcement": "усиление конструктива",
+    "flight assists": "помощь в полёте",
+    "modifications": "модификации",
+    "wep_reload": "перезарядка",
+    "optimal multiplier": "оптимальный усилитель",
+    "Cargo Hatch": "Грузовой люк",
+    "Chaff Launcher": "Разбрасыватель дипольных отражателей",
+    "Point Defence": "Точечная оборона",
+    "Electronic Countermeasure": "Радиоэлектронное подавление",
+    "Xeno Scanner": "Ксено-сканер",
+    "Shutdown Field Neutraliser": "Нейтрализатор отключающего поля",
+    "Disruptor": "«Диверсант»",
+    "Pacifier": "«Миротворец»",
+    "Advanced Plasma Accelerator": "Улучшенный ускоритель плазмы",
+    "Cytoscrambler": "«Дезинтегратор»",
+    "Retributor": "«Каратель»",
+    "Enforcer": "«Убийца»",
+    "Imperial Hammer": "«Имперский молот»",
+    "Rocket Propelled FSD Disruptor": "Ракетный FSD-разрушитель",
+    "Pack-Hound": "«Гончие»",
+    "Shock Mine Launcher": "Установщик шоковых мин",
+    "Mining Lance": "«Копьё шахтера»",
+    "Corrosion Resistant": "Коррозийно-устойчивый стеллаж",
+    "Standard Docking Computer": "Стандартный стыковочный компьютер",
+    "Advanced Docking Computer": "Улучшенный стыковочный компьютер",
+    "Detailed Surface Scanner": "Подробный сканер поверхности",
+    "Supercruise Assist": "Помощь в гиперкрейсерском режиме",
+    "Guardian Power Distributor": "Рапределитель питания Стражей",
+    "Enhanced Performance": "Усиленные маневровые двигатели",
+    "Guardian Hybrid Power Plant": "Гибридная силовая установка Стражей",
+    "Reinforced Alloy": "Укреплённые сплавы",
+    "Military Grade Composite": "Композит военного класса",
+    "Mirrored Surface Composite": "Композит с зеркальной поверхностью",
+    "Reactive Surface Composite": "Композит с реактивной поверхностью",
+    "Proto Light Alloys": "Опытные лёгкие сплавы",
+    "Ammo capacity": "Вместимость магазина",
+    "Lightweight": "Облегчённый",
+    "Reinforced": "Усиленный",
+    "Shielded": "Защищённый",
+    "Fast scan": "Быстрое сканирование",
+    "Long range": "Дальнего действия",
+    "Wide angle": "Широкоугольный",
+    "Blast resistant": "Взрывостойкий",
+    "Heavy duty": "Надёжный",
+    "Kinetic resistant": "Противокинетический",
+    "Resistance augmented": "С универсальной защитой",
+    "Thermal resistant": "Термостойкий",
+    "Thermo Block": "Блокировка тепла",
+    "Force Block": "Усиленная блокировка",
+    "Blast Block": "Блокировка взрыва",
+    "Flow Control": "Контроль интенсивности",
+    "Double Braced": "Двойная прочность",
+    "Super Capacitors": "Суперконденсаторы",
+    "Efficient": "Эффективный",
+    "Focused": "Точный",
+    "Overcharged": "Усиленный",
+    "Rapid fire": "Скорострельный",
+    "Short range": "Ближнего действия",
+    "Sturdy": "Прочный",
+    "Oversized": "Сверхразмер",
+    "Stripped Down": "Урезанный вариант",
+    "Phasing sequence": "Последовательность фазирования",
+    "Concordant sequence": "Последовательность координации",
+    "Scramble spectrum": "Отключающая сетка",
+    "Thermal shock": "Тепловой удар",
+    "Emissive munitions": "Эмиссионные припасы",
+    "Multi-servos": "Сервосистема",
+    "Inertial impact": "Инерционный удар",
+    "Thermal vent": "Теплоотдача",
+    "Regeneration sequence": "Последовательность восстановления",
+    "Thermal conduit": "Проводник тепла",
+    "High capacity": "Вместительный магазин",
+    "Incendiary rounds": "Зажигательные припасы",
+    "Auto loader": "Автоматическая система заряжения",
+    "Smart rounds": "Умные боеприпасы",
+    "Corrosive shell": "Разъедающие припасы",
+    "Force shell": "Усиленные снаряды",
+    "High yield shell": "Снаряд большой мощности",
+    "Dispersal field": "Рассеивающее поле",
+    "Thermal cascade": "Термический залп",
+    "Double shot": "Двойной выстрел",
+    "Dazzle shell": "Ослепляющие снаряды",
+    "Screening shell": "Заслоняющие снаряды",
+    "Drag munitions": "Замедляющие боеприпасы",
+    "Target lock breaker": "Генератор помех для системы захвата цели",
+    "Plasma Slug": "Плазменный рельсовый снаряд",
+    "Feedback Cascade": "Ответный запл",
+    "Super Penetrator": "Модуль сверхпробития",
+    "Overload munitions": "Вызывающие перезагрузку боеприпасы",
+    "Penetrator payload": "Бронебойные снаряды",
+    "Penetrator Payload": "Бронебойные снаряды",
+    "FSD interrupt": "Помеха для FSD",
+    "Penetrator Munitions": "Бронебойные боеголовки",
+    "Mass lock munition": "Боеприпасы с гравитационным захватом",
+    "Mass Lock Munition": "Боеприпасы с гравитационным захватом",
+    "Reverberating cascade": "Отражённый залп",
+    "Shift-lock canister": "Рамоблокирующая кассета",
+    "Ion disruptor": "Ионный дестабилизатор",
+    "Radiant Canister": "Светящаяся кассета",
+    "Expanded capture arc": "Расширенная дуга захвата",
+    "Enhanced low power": "Улучшенное энергосбережение",
+    "Fast Charge": "Быстрый заряд",
+    "Multi-weave": "Мультипрошивка",
+    "Hi-Cap": "Высокая ёмкость",
+    "Lo-draw": "Пониженное потребление",
+    "Rapid charge": "Быстрая зарядка",
+    "Specialised": "Адаптивный",
+    "Boss Cells": "Босс-ячейки",
+    "Recycling Cell": "Рециркуляционная ячейка",
+    "Reflective Plating": "Отражающая броня",
+    "Angled Plating": "Угловая броня",
+    "Layered Plating": "Многослойная броня",
+    "Deep Plating": "Утолщённая броня",
+    "Expanded Probe Scanning Radius": "Увеличение радиуса сканирования зондов",
+    "High charge capacity": "Высокоёмкий",
+    "Charge enhanced": "Быстрозаряжающийся",
+    "Engine focused": "Фокус на двигатель",
+    "System focused": "Фокус на систему",
+    "Weapon focused": "Фокус на орудия",
+    "Super Conduits": "Сверхпроводники",
+    "Cluster Capacitors": "Кассетные конденсаторы",
+    "Increased range": "Увеличенная дальность",
+    "Faster boot sequence": "Ускорение запуска",
+    "Deep Charge": "Заряд повышенной мощности",
+    "Thermal Spread": "Рассеивание тепла",
+    "Mass Manager": "Распределитель гравитации",
+    "Dirty": "«Грязная» донастройка",
+    "Clean": "«Чистая» донастройка",
+    "Drag Drives": "Ускорители",
+    "Drive Distributors": "Распределители тяги",
+    "Armoured": "Бронированный",
+    "Low emissions": "Малое излучение",
+    "Monstered": "Монстрация",
+    "roles": "роли",
+    "Maximize Jump Range": "Максимизировать дальность прыжка",
+    "Multi-purpose": "Многоцелевой",
+    "Combat": "Боец",
+    "Trader": "Торговец",
+    "Explorer": "Исследователь",
+    "Planetary Explorer": "Исследователь планет",
+    "Miner": "Старатель",
+    "Racer": "Гонщик",
+
+    "Aberrant Shield Pattern Analysis": "Анализ аномального поведения щита",
+    "Abnormal Compact Emissions Data": "Аномальные компактные данные об излучении",
+    "Aerogel": "Аэрогель",
+    "Adaptive Encryptors Capture": "Захват адаптивного шифровальщика",
+    "Anomalous Bulk Scan Data": "Аномальный массив данных сканирования",
+    "Anomalous FSD Telemetry": "Аномальная телеметрия FSD",
+    "Antimony": "Сурьма",
+    "Arsenic": "Мышьяк",
+    "Atypical Disrupted Wake Echoes": "Атипичное эхо поврежденного следа",
+    "Atypical Encryption Archives": "Нетипичные архивы шифрования",
+    "Basic Conductors": "Простые проводники",
+    "Bio-Mechanical Conduits": "Биомеханические энергопроводники",
+    "Biotech Conductors": "Биотехнические проводники",
+    "Boron": "Бор",
+    "Cadmium": "Кадмий",
+    "Carbon": "Углерод",
+    "Carbon Fibre Plating": "Углеволоконная броня",
+    "Chemical Distillery": "Оборудование для перегонки химикатов",
+    "Chemical Manipulators": "Манипуляторы для работы с химикатами",
+    "Chemical Processors": "Оборудование для химобработки",
+    "Chromium": "Хром",
+    "Classified Scan Databanks": "Засекреченные базы данных сканирования",
+    "Classified Scan Fragment": "Засекреченные фрагменты данных сканирования",
+    "Compound Shielding": "Многоступенчатая защита",
+    "Conductive Ceramics": "Проводящая керамика",
+    "Conductive Components": "Проводящие компоненты",
+    "Conductive Polymers": "Проводящие полимеры",
+    "Configurable Components": "Настраиваемые компоненты",
+    "Core Dynamics Composites": "Композиты Core Dynamics",
+    "Cracked Industrial Firmware": "Взломанные промышленные микропрограммы",
+    "Datamined Wake Exceptions": "Исключения из глубинного анализа данных следа",
+    "Decoded Emission Data": "Расшифрованные данные об излучении",
+    "Distorted Shield Cycle Recordings": "Повреждённые цикличные записи щита",
+    "Divergent Scan Data": "Неформатные данные сканирования",
+    "Eccentric Hyperspace Trajectories": "Аномальные траектории в гиперпространстве",
+    "Electrochemical Arrays": "Электрохимические массивы",
+    "Exceptional Scrambled Emission Data": "Исключительные зашифрованные данные об излучении",
+    "Exquisite Focus Crystals": "Отборные фокусировочные кристаллы",
+    "Flawed Focus Crystals": "Поврежденные фокусировочные кристаллы",
+    "Focus Crystals": "Фокусировочные кристаллы",
+    "Galvanising Alloys": "Сплавы для гальванизации",
+    "Germanium": "Германий",
+    "Grid Resistors": "Наборные резисторы",
+    "Heat Conduction Wiring": "Теплопроводящие провода",
+    "Heat Dispersion Plate": "Теплорассеивающая пластина",
+    "Heat Exchangers": "Теплообменные агрегаты",
+    "Heat Vanes": "Тепловые заслонки",
+    "High Density Composites": "Высокоплотностные композиты",
+    "Hybrid Capacitors": "Гибридные конденсаторы",
+    "Imperial Shielding": "Имперская защита",
+    "Improvised Components": "Кустарные компоненты",
+    "Inconsistent Shield Soak Analysis": "Неполный анализ поглощения щита",
+    "Iron": "Железо",
+    "Irregular Emission Data": "Нестандартные данные об излучении",
+    "Manganese": "Марганец",
+    "Mechanical Components": "Механические компоненты",
+    "Mechanical Equipment": "Механическое оборудование",
+    "Mechanical Scrap": "Механические отходы",
+    "Mercury": "Ртуть",
+    "Military Grade Alloys": "Сплавы военного назначения",
+    "Military Supercapacitors": "Военные суперконденсаторы",
+    "Modified Consumer Firmware": "Изменённые пользовательские микропрограммы",
+    "Modified Embedded Firmware": "Изменённые встроенные микропрограммы",
+    "Molybdenum": "Молибден",
+    "Nickel": "Никель",
+    "Niobium": "Ниобий",
+    "Open Symmetric Keys": "Открытые симметричные ключи",
+    "Pharmaceutical Isolators": "Фармацевтические изоляционные материалы",
+    "Phase Alloys": "Фазовые сплавы",
+    "Phosphorus": "Фосфор",
+    "Polymer Capacitors": "Полимерные конденсаторы",
+    "Precipitated Alloys": "Осаждённые сплавы",
+    "Proprietary Composites": "Патентованные композиты",
+    "Proto Heat Radiators": "Прототипы теплоизлучателей",
+    "Proto Radiolic Alloys": "Сплавы для изготовления зондов",
+    "Refined Focus Crystals": "Обработанные фокусировочные кристаллы",
+    "Ruthenium": "Рутений",
+    "Salvaged Alloys": "Захваченные сплавы",
+    "Security Firmware Patch": "Обновление для защитной микропрограммы",
+    "Selenium": "Селен",
+    "Shield Emitters": "Щитоизлучатели",
+    "Shielding Sensors": "Сенсоры системы экранирования",
+    "Specialised Legacy Firmware": "Специальные микропрограммы предыдущего поколения",
+    "Strange Wake Solutions": "Странные расчёты следа",
+    "Sulphur": "Сера",
+    "Tagged Encryption Codes": "Меченные шифровальные коды",
+    "Technetium": "Технеций",
+    "Tellurium": "Теллур",
+    "Thermic Alloys": "Термические сплавы",
+    "Tin": "Олово",
+    "Tungsten": "Вольфрам",
+    "Unexpected Emission Data": "Неожиданные данные об излучении",
+    "Unidentified Scan Archives": "Неопознанные архивы сканирования",
+    "Untypical Shield Scans": "Нетипичные данные сканирования щитов",
+    "Unusual Encrypted Files": "Особые зашифрованные файлы",
+    "Vanadium": "Ванадий",
+    "Worn Shield Emitters": "Изношенные щитоизлучатели",
+    "Yttrium": "Иттрий",
+    "Zinc": "Цинк",
+    "Zirconium": "Цирконий"
 }

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/AboutPage.jsx

@@ -6,7 +6,6 @@ import { CoriolisLogo, GitHub } from '../components/SvgIcons';
  * About Page
  */
 export default class AboutPage extends Page {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -23,27 +22,79 @@ export default class AboutPage extends Page {
    * @return {React.Component} The page contents
    */
   renderPage() {
-    return <div className={'page'} style={{ textAlign: 'left', maxWidth: 800, margin: '0 auto' }}>
+    return (
-      <h1><CoriolisLogo style={{ marginRight: '0.4em' }} className='xl'/><span className='warning'>Coriolis EDCD Edition</span></h1>
+      <div
+        className={'page'}
+        style={{ textAlign: 'left', maxWidth: 800, margin: '0 auto' }}
+      >
+        <h1>
+          <CoriolisLogo style={{ marginRight: '0.4em' }} className="xl" />
+          <span className="warning">Coriolis EDCD Edition</span>
+        </h1>
 
-      <p>This is a clone of the Coriolis project, whose original author is currently unable to maintain it. This clone is maintained by the <a href="http://edcd.github.io/">EDCD community</a>.</p>
+        <p>
-      <p>To recover your builds, go to <a href='https://coriolis.io/' target='_blank'>https://coriolis.io/</a>, backup your builds (Settings / Backup), copy the text, return here and import (Settings / Import).</p>
+          This is a clone of the Coriolis project, whose original author is
-      <p>The Coriolis project was inspired by <a href='http://www.edshipyard.com/' target='_blank'>E:D Shipyard</a> and, of course, <a href='http://www.elitedangerous.com' target='_blank'>Elite Dangerous</a>. The ultimate goal of Coriolis is to provide rich features to support in-game play and planning while engaging the E:D community to support its development.</p>
+          currently unable to maintain it. This clone is maintained by the{' '}
-      <p>Coriolis was created using assets and imagery from Elite: Dangerous, with the permission of Frontier Developments plc, for non-commercial purposes. It is not endorsed by nor reflects the views or opinions of Frontier Developments.  A number of assets were sourced from <a href='http://edassets.org' target='_blank'>ED Assets</a></p>
+          <a href="http://edcd.github.io/">EDCD community</a>.
+        </p>
+        <p>
+          To recover your builds, go to{' '}
+          <a href="https://coriolis.io/" target="_blank">
+            https://coriolis.io/
+          </a>
+          , backup your builds (Settings / Backup), copy the text, return here
+          and import (Settings / Import).
+        </p>
+        <p>
+          The Coriolis project was inspired by{' '}
+          <a href="http://www.edshipyard.com/" target="_blank">
+            E:D Shipyard
+          </a>{' '}
+          and, of course,{' '}
+          <a href="http://www.elitedangerous.com" target="_blank">
+            Elite Dangerous
+          </a>
+          . The ultimate goal of Coriolis is to provide rich features to support
+          in-game play and planning while engaging the E:D community to support
+          its development.
+        </p>
+        <p>
+          Coriolis was created using assets and imagery from Elite: Dangerous,
+          with the permission of Frontier Developments plc, for non-commercial
+          purposes. It is not endorsed by nor reflects the views or opinions of
+          Frontier Developments. A number of assets were sourced from{' '}
+          <a href="http://edassets.org" target="_blank">
+            ED Assets
+          </a>
+        </p>
 
-      <a style={{ display: 'block', textDecoration: 'none' }} href='https://github.com/EDCD/coriolis' target='_blank' title='Coriolis Github Project'>
+        <a
-        <GitHub style={{ margin: '0.4em' }} className='l fg xl'/>
+          style={{ display: 'block', textDecoration: 'none' }}
+          href="https://github.com/EDCD/coriolis"
+          target="_blank"
+          title="Coriolis Github Project"
+        >
+          <GitHub style={{ margin: '0.4em' }} className="l fg xl" />
           <h2 style={{ margin: 0, textDecoration: 'none' }}>Github</h2>
           github.com/EDCD/coriolis
         </a>
 
-      <p>Coriolis is an open source project. Checkout the list of upcoming features and to-do list on github. Any and all contributions and feedback are welcome. If you encounter any bugs please report them and provide as much detail as possible.</p>
+        <p>
+          Coriolis is an open source project. Checkout the list of upcoming
+          features and to-do list on github. Any and all contributions and
+          feedback are welcome. If you encounter any bugs please report them and
+          provide as much detail as possible.
+        </p>
 
         <h3>Chat</h3>
-      <p>You can chat to us on our <a href='https://discord.gg/0uwCh6R62aPRjk9w' target='_blank'>EDCD Discord server</a>.</p>
+        <p>
-
+          You can chat to us on our{' '}
-      <h3>Supporting Coriolis</h3>
+          <a href="https://discord.gg/0uwCh6R62aPRjk9w" target="_blank">
-      <p>Coriolis is an open source project, and I work on it in my free time. I have set up a patreon at <a href='https://www.patreon.com/coriolis_elite'>patreon.com/coriolis_elite</a>, which will be used to keep Coriolis up to date and the servers running.</p>
+            EDCD Discord server
-    </div>;
+          </a>
+          .
+        </p>
+      </div>
+    );
   }
 }

src/app/pages/ComparisonPage.jsx

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

src/app/pages/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/NotFoundPage.jsx

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

src/app/pages/OutfittingPage.jsx

@@ -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';
@@ -7,9 +6,19 @@ import Router from '../Router';
 import Persist from '../stores/Persist';
 import * as Utils from '../utils/UtilityFunctions';
 import Ship from '../shipyard/Ship';
+import * as _ from 'lodash';
 import { toDetailedBuild } from '../shipyard/Serializer';
 import { outfitURL } from '../utils/UrlGenerators';
-import { FloppyDisk, Bin, Switch, Download, Reload, LinkIcon, ShoppingIcon } from '../components/SvgIcons';
+import {
+  FloppyDisk,
+  Bin,
+  Switch,
+  Download,
+  Reload,
+  LinkIcon,
+  ShoppingIcon,
+  MatIcon,
+} from '../components/SvgIcons';
 import LZString from 'lz-string';
 import ShipSummaryTable from '../components/ShipSummaryTable';
 import StandardSlotSection from '../components/StandardSlotSection';
@@ -25,6 +34,7 @@ import EngagementRange from '../components/EngagementRange';
 import OutfittingSubpages from '../components/OutfittingSubpages';
 import ModalExport from '../components/ModalExport';
 import ModalPermalink from '../components/ModalPermalink';
+import ModalShoppingList from '../components/ModalShoppingList';
 
 /**
  * Document Title Generator
@@ -40,7 +50,6 @@ function getTitle(shipName, buildName) {
  * The Outfitting Page
  */
 export default class OutfittingPage extends Page {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -48,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);
@@ -58,6 +66,7 @@ export default class OutfittingPage extends Page {
     this._fuelUpdated = this._fuelUpdated.bind(this);
     this._opponentUpdated = this._opponentUpdated.bind(this);
     this._engagementRangeUpdated = this._engagementRangeUpdated.bind(this);
+    this._sectionMenuRefs = {};
   }
 
   /**
@@ -86,7 +95,23 @@ export default class OutfittingPage extends Page {
     this._getTitle = getTitle.bind(this, data.properties.name);
 
     // Obtain ship control from code
-    const { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange } = this._obtainControlFromCode(ship, code);
+    const {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      fuel,
+      cargo,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      engagementRange
+    } = this._obtainControlFromCode(ship, code);
     return {
       error: null,
       title: this._getTitle(buildName),
@@ -100,6 +125,9 @@ export default class OutfittingPage extends Page {
       sys,
       eng,
       wep,
+      mcSys,
+      mcEng,
+      mcWep,
       boost,
       fuel,
       cargo,
@@ -122,7 +150,10 @@ export default class OutfittingPage extends Page {
     };
 
     if (Persist.hasBuild(this.state.shipId, stateChanges.newBuildName)) {
-      stateChanges.savedCode = Persist.getBuild(this.state.shipId, stateChanges.newBuildName);
+      stateChanges.savedCode = Persist.getBuild(
+        this.state.shipId,
+        stateChanges.newBuildName
+      );
     } else {
       stateChanges.savedCode = null;
     }
@@ -148,7 +179,9 @@ export default class OutfittingPage extends Page {
    * @returns {string}        the code for this ship
    */
   _fullCode(ship, fuel, cargo) {
-    return `${ship.toString()}.${LZString.compressToBase64(this._controlCode(fuel, cargo))}`;
+    return `${ship.toString()}.${LZString.compressToBase64(
+      this._controlCode(fuel, cargo)
+    )}`;
   }
 
   /**
@@ -162,10 +195,17 @@ export default class OutfittingPage extends Page {
     let sys = 2;
     let eng = 2;
     let wep = 2;
+    let mcSys = 0;
+    let mcEng = 0;
+    let mcWep = 0;
     let boost = false;
     let fuel = ship.fuelCapacity;
     let cargo = ship.cargoCapacity;
-    let opponent = new Ship('eagle', Ships['eagle'].properties, Ships['eagle'].slots).buildWith(Ships['eagle'].defaults);
+    let opponent = new Ship(
+      'eagle',
+      Ships['eagle'].properties,
+      Ships['eagle'].slots
+    ).buildWith(Ships['eagle'].defaults);
     let opponentSys = 2;
     let opponentEng = 2;
     let opponentWep = 2;
@@ -177,16 +217,25 @@ export default class OutfittingPage extends Page {
       const parts = code.split('.');
       if (parts.length >= 5) {
         // We have control information in the code
-        const control = LZString.decompressFromBase64(Utils.fromUrlSafe(parts[4])).split('/');
+        const control = LZString.decompressFromBase64(
+          Utils.fromUrlSafe(parts[4])
+        ).split('/');
         sys = parseFloat(control[0]);
         eng = parseFloat(control[1]);
         wep = parseFloat(control[2]);
+        if (sys + eng + wep > 6) {
+          sys = eng = wep = 2;
+        }
         boost = control[3] == 1 ? true : false;
-        fuel = parseFloat(control[4]);
+        fuel = parseFloat(control[4]) || fuel;
-        cargo = parseInt(control[5]);
+        cargo = parseInt(control[5]) || cargo;
         if (control[6]) {
           const shipId = control[6];
-          opponent = new Ship(shipId, Ships[shipId].properties, Ships[shipId].slots);
+          opponent = new Ship(
+            shipId,
+            Ships[shipId].properties,
+            Ships[shipId].slots
+          );
           if (control[7] && Persist.getBuild(shipId, control[7])) {
             // Ship is a particular build
             const opponentCode = Persist.getBuild(shipId, control[7]);
@@ -196,10 +245,12 @@ export default class OutfittingPage extends Page {
               // Obtain opponent's sys/eng/wep pips from their code
               const opponentParts = opponentCode.split('.');
               if (opponentParts.length >= 5) {
-                const opponentControl = LZString.decompressFromBase64(Utils.fromUrlSafe(opponentParts[4])).split('/');
+                const opponentControl = LZString.decompressFromBase64(
-                opponentSys = parseFloat(opponentControl[0]);
+                  Utils.fromUrlSafe(opponentParts[4])
-                opponentEng = parseFloat(opponentControl[1]);
+                ).split('/');
-                opponentWep = parseFloat(opponentControl[2]);
+                opponentSys = parseFloat(opponentControl[0]) || opponentSys;
+                opponentEng = parseFloat(opponentControl[1]) || opponentEng;
+                opponentWep = parseFloat(opponentControl[2]) || opponentWep;
               }
             }
           } else {
@@ -207,21 +258,50 @@ export default class OutfittingPage extends Page {
             opponent.buildWith(Ships[shipId].defaults);
           }
         }
-        engagementRange = parseInt(control[8]);
+        engagementRange = parseInt(control[8]) || engagementRange;
+
+        // Multi-crew pips were introduced later on so assign default values
+        // because those values might not be present.
+        mcSys = parseInt(control[9]) || mcSys;
+        mcEng = parseInt(control[10]) || mcEng;
+        mcWep = parseInt(control[11]) || mcWep;
       }
     }
 
-    return { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange };
+    return {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      fuel,
+      cargo,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      engagementRange
+    };
   }
 
   /**
-   * Triggered when pips have been updated
+   * Triggered when pips have been updated. Multi-crew pips are already included
+   * in sys, eng and wep but mcSys, mcEng and mcWep make clear where each pip
+   * comes from.
    * @param {number} sys    SYS pips
    * @param {number} eng    ENG pips
    * @param {number} wep    WEP pips
+   * @param {number} mcSys  SYS pips from multi-crew
+   * @param {number} mcEng  ENG pips from multi-crew
+   * @param {number} mcWep  WEP pips from multi-crew
    */
-  _pipsUpdated(sys, eng, wep) {
+  _pipsUpdated(sys, eng, wep, mcSys, mcEng, mcWep) {
-    this.setState({ sys, eng, wep }, () =>  this._updateRouteOnControlChange());
+    this.setState({ sys, eng, wep, mcSys, mcEng, mcWep }, () =>
+      this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -253,7 +333,9 @@ export default class OutfittingPage extends Page {
    * @param {number} engagementRange the engagement range, in m
    */
   _engagementRangeUpdated(engagementRange) {
-    this.setState({ engagementRange }, () =>  this._updateRouteOnControlChange());
+    this.setState({ engagementRange }, () =>
+      this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -262,7 +344,11 @@ export default class OutfittingPage extends Page {
    * @param {string} opponentBuild  the name of the opponent's build
    */
   _opponentUpdated(opponent, opponentBuild) {
-    const opponentShip  = new Ship(opponent, Ships[opponent].properties, Ships[opponent].slots);
+    const opponentShip = new Ship(
+      opponent,
+      Ships[opponent].properties,
+      Ships[opponent].slots
+    );
     let opponentSys = this.state.opponentSys;
     let opponentEng = this.state.opponentEng;
     let opponentWep = this.state.opponentWep;
@@ -270,9 +356,13 @@ export default class OutfittingPage extends Page {
       // Ship is a particular build
       opponentShip.buildFrom(Persist.getBuild(opponent, opponentBuild));
       // Set pips for opponent
-      const opponentParts = Persist.getBuild(opponent, opponentBuild).split('.');
+      const opponentParts = Persist.getBuild(opponent, opponentBuild).split(
+        '.'
+      );
       if (opponentParts.length >= 5) {
-        const opponentControl = LZString.decompressFromBase64(Utils.fromUrlSafe(opponentParts[4])).split('/');
+        const opponentControl = LZString.decompressFromBase64(
+          Utils.fromUrlSafe(opponentParts[4])
+        ).split('/');
         opponentSys = parseFloat(opponentControl[0]);
         opponentEng = parseFloat(opponentControl[1]);
         opponentWep = parseFloat(opponentControl[2]);
@@ -285,7 +375,16 @@ export default class OutfittingPage extends Page {
       opponentWep = 2;
     }
 
-    this.setState({ opponent: opponentShip, opponentBuild, opponentSys, opponentEng, opponentWep }, () =>  this._updateRouteOnControlChange());
+    this.setState(
+      {
+        opponent: opponentShip,
+        opponentBuild,
+        opponentSys,
+        opponentEng,
+        opponentWep
+      },
+      () => this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -295,8 +394,22 @@ export default class OutfittingPage extends Page {
    * @returns {string}        The control code
    */
   _controlCode(fuel, cargo) {
-    const { sys, eng, wep, boost, opponent, opponentBuild, engagementRange } = this.state;
+    const {
-    const code = `${sys}/${eng}/${wep}/${boost ? 1 : 0}/${fuel || this.state.fuel}/${cargo || this.state.cargo}/${opponent.id}/${opponentBuild ? opponentBuild : ''}/${engagementRange}`;
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      opponent,
+      opponentBuild,
+      engagementRange
+    } = this.state;
+    const code = `${sys}/${eng}/${wep}/${boost ? 1 : 0}/${fuel ||
+      this.state.fuel}/${cargo || this.state.cargo}/${opponent.id}/${
+      opponentBuild ? opponentBuild : ''
+    }/${engagementRange}/${mcSys}/${mcEng}/${mcWep}`;
     return code;
   }
 
@@ -313,10 +426,17 @@ export default class OutfittingPage extends Page {
     this._updateRoute(shipId, newBuildName, code);
 
     let opponent, opponentBuild, opponentSys, opponentEng, opponentWep;
-    if (shipId === this.state.opponent.id && buildName === this.state.opponentBuild) {
+    if (
+      shipId === this.state.opponent.id &&
+      buildName === this.state.opponentBuild
+    ) {
       // This is a save of our current opponent build; update it
       opponentBuild = newBuildName;
-      opponent  = new Ship(shipId, Ships[shipId].properties, Ships[shipId].slots).buildFrom(code);
+      opponent = new Ship(
+        shipId,
+        Ships[shipId].properties,
+        Ships[shipId].slots
+      ).buildFrom(code);
       opponentSys = this.state.sys;
       opponentEng = this.state.eng;
       opponentWep = this.state.wep;
@@ -327,7 +447,17 @@ export default class OutfittingPage extends Page {
       opponentEng = this.state.opponentEng;
       opponentWep = this.state.opponentWep;
     }
-    this.setState({ buildName: newBuildName, code, savedCode: code, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, title: this._getTitle(newBuildName) });
+    this.setState({
+      buildName: newBuildName,
+      code,
+      savedCode: code,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      title: this._getTitle(newBuildName)
+    });
   }
 
   /**
@@ -339,7 +469,12 @@ export default class OutfittingPage extends Page {
       Persist.deleteBuild(shipId, buildName);
       Persist.saveBuild(shipId, newBuildName, code);
       this._updateRoute(shipId, newBuildName, code);
-      this.setState({ buildName: newBuildName, code, savedCode: code, opponentBuild: newBuildName });
+      this.setState({
+        buildName: newBuildName,
+        code,
+        savedCode: code,
+        opponentBuild: newBuildName
+      });
     }
   }
 
@@ -359,19 +494,38 @@ export default class OutfittingPage extends Page {
     ship.buildWith(Ships[shipId].defaults);
     // Reset controls
     const code = ship.toString();
-    const { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, engagementRange } = this._obtainControlFromCode(ship, code);
+    const {
-    // Update state, and refresh the ship
-    this.setState({
       sys,
       eng,
       wep,
+      mcSys,
+      mcEng,
+      mcWep,
       boost,
       fuel,
       cargo,
       opponent,
       opponentBuild,
       engagementRange
-    }, () => this._updateRoute(shipId, buildName, code));
+    } = this._obtainControlFromCode(ship, code);
+    // Update state, and refresh the ship
+    this.setState(
+      {
+        sys,
+        eng,
+        wep,
+        mcSys,
+        mcEng,
+        mcWep,
+        boost,
+        fuel,
+        cargo,
+        opponent,
+        opponentBuild,
+        engagementRange
+      },
+      () => this._updateRoute(shipId, buildName, code)
+    );
   }
 
   /**
@@ -382,7 +536,10 @@ export default class OutfittingPage extends Page {
     Persist.deleteBuild(shipId, buildName);
 
     let opponentBuild;
-    if (shipId === this.state.opponent.id && buildName === this.state.opponentBuild) {
+    if (
+      shipId === this.state.opponent.id &&
+      buildName === this.state.opponentBuild
+    ) {
       // Our current opponent has been deleted; revert to stock
       opponentBuild = null;
     } else {
@@ -399,11 +556,13 @@ export default class OutfittingPage extends Page {
   _exportBuild() {
     let translate = this.context.language.translate;
     let { buildName, ship } = this.state;
-    this.context.showModal(<ModalExport
+    this.context.showModal(
+      <ModalExport
         title={(buildName || ship.name) + ' ' + translate('export')}
         description={translate('PHRASE_EXPORT_DESC')}
         data={toDetailedBuild(buildName, ship, ship.toString())}
-    />);
+      />
+    );
   }
 
   /**
@@ -416,19 +575,38 @@ export default class OutfittingPage extends Page {
     this.state.ship.buildFrom(code);
 
     // Obtain controls from the code
-    const { sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, engagementRange } = this._obtainControlFromCode(ship, code);
+    const {
-    // Update state, and refresh the route when complete
-    this.setState({
       sys,
       eng,
       wep,
+      mcSys,
+      mcEng,
+      mcWep,
       boost,
       fuel,
       cargo,
       opponent,
       opponentBuild,
       engagementRange
-    }, () => this._updateRoute(shipId, buildName, code));
+    } = this._obtainControlFromCode(ship, code);
+    // Update state, and refresh the route when complete
+    this.setState(
+      {
+        sys,
+        eng,
+        wep,
+        mcSys,
+        mcEng,
+        mcWep,
+        boost,
+        fuel,
+        cargo,
+        opponent,
+        opponentBuild,
+        engagementRange
+      },
+      () => this._updateRoute(shipId, buildName, code)
+    );
   }
 
   /**
@@ -444,8 +622,14 @@ export default class OutfittingPage extends Page {
     }
     const code = this._fullCode(ship, fuel, cargo);
     // Only update the state if this really has been updated
-    if (this.state.code != code || this.state.cargo != cargo || this.state.fuel != fuel) {
+    if (
-      this.setState({ code, cargo, fuel }, () => this._updateRoute(shipId, buildName, code));
+      this.state.code != code ||
+      this.state.cargo != cargo ||
+      this.state.fuel != fuel
+    ) {
+      this.setState({ code, cargo, fuel }, () =>
+        this._updateRoute(shipId, buildName, code)
+      );
     }
   }
 
@@ -465,7 +649,8 @@ export default class OutfittingPage extends Page {
    * @param  {Object} nextContext Incoming/Next conext
    */
   componentWillReceiveProps(nextProps, nextContext) {
-    if (this.context.route !== nextContext.route) {  // Only reinit state if the route has changed
+    if (this.context.route !== nextContext.route) {
+      // Only reinit state if the route has changed
       this.setState(this._initState(nextProps, nextContext));
     }
   }
@@ -488,21 +673,34 @@ export default class OutfittingPage extends Page {
    * Generates the short URL
    */
   _genShortlink() {
-    this.context.showModal(<ModalPermalink url={window.location.href}/>);
+    this.context.showModal(<ModalPermalink url={window.location.href} />);
   }
 
   /**
-   * 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;
     // Provide unique list of non-PP module EDDB IDs
-    const modIds = ship.internal.concat(ship.bulkheads, ship.standard, ship.hardpoints).filter(slot => slot !== null && slot.m !== null && !slot.m.pp).map(slot => slot.m.eddbID).filter((v, i, a) => a.indexOf(v) === i);
+    const modIds = ship.internal
+      .concat(ship.bulkheads, ship.standard, ship.hardpoints)
+      .filter(slot => slot !== null && slot.m !== null && !slot.m.pp)
+      .map(slot => slot.m.eddbID)
+      .filter((v, i, a) => a.indexOf(v) === i);
 
     // Open up the relevant URL
-    window.open('https://eddb.io/station?s=' + shipId + '&m=' + modIds.join(','));
+    window.open(
+      'https://inara.cz/inapi/corisearch.php?s=' + shipId + '&m=' + modIds.join(',')
+    );
+  }
+
+  /**
+   * Generates the shopping list
+   */
+  _genShoppingList() {
+    this.context.showModal(<ModalShoppingList ship={this.state.ship} />);
   }
 
   /**
@@ -513,7 +711,8 @@ export default class OutfittingPage extends Page {
     // .keyCode will eventually be replaced with .key
     switch (e.keyCode) {
       case 69: // 'e'
-        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + e
+        if (e.ctrlKey || e.metaKey) {
+          // CTRL/CMD + e
           e.preventDefault();
           this._exportBuild();
         }
@@ -529,7 +728,28 @@ export default class OutfittingPage extends Page {
     let state = this.state,
         { language, termtip, tooltip, sizeRatio, onWindowResize } = this.context,
         { translate, units, formats } = language,
-        { ship, code, savedCode, buildName, newBuildName, sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange } = state,
+        {
+          ship,
+          code,
+          savedCode,
+          buildName,
+          newBuildName,
+          sys,
+          eng,
+          wep,
+          mcSys,
+          mcEng,
+          mcWep,
+          boost,
+          fuel,
+          cargo,
+          opponent,
+          opponentBuild,
+          opponentSys,
+          opponentEng,
+          opponentWep,
+          engagementRange
+        } = state,
         hide = tooltip.bind(null, null),
         menu = this.props.currentMenu,
         shipUpdated = this._shipUpdated,
@@ -547,95 +767,288 @@ export default class OutfittingPage extends Page {
     const _pStr = `${ship.getPowerEnabledString()}${ship.getPowerPrioritiesString()}`;
     const _mStr = ship.getModificationsString();
 
-    const standardSlotMarker = `${ship.name}${_sStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
+    const standardSlotMarker = `${ship.name}${_sStr}${_pStr}${_mStr}${
+      ship.ladenMass
+    }${cargo}${fuel}`;
     const internalSlotMarker = `${ship.name}${_iStr}${_pStr}${_mStr}`;
     const hardpointsSlotMarker = `${ship.name}${_hStr}${_pStr}${_mStr}`;
     const boostMarker = `${ship.canBoost(cargo, fuel)}`;
-    const shipSummaryMarker = `${ship.name}${_sStr}${_iStr}${_hStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
+    const shipSummaryMarker = `${
+      ship.name
+    }${_sStr}${_iStr}${_hStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
 
     const requirements = Ships[ship.id].requirements;
-    var requirementElements = [];
+    let requirementElements = [];
-
+    /**
+     * Render the requirements for a ship / etc
+     * @param {string} className Class names
+     * @param {string} textKey The key for translating
+     * @param {String} tooltipTextKey  Tooltip key
+     */
     function renderRequirement(className, textKey, tooltipTextKey) {
-      requirementElements.push(<div key={textKey} className={className} onMouseEnter={termtip.bind(null, tooltipTextKey)} onMouseLeave={hide}>{translate(textKey)}</div>);
+      if (textKey.startsWith('empire') || textKey.startsWith('federation')) {
+        requirementElements.push(
+          <div
+            key={textKey}
+            className={className}
+            onMouseEnter={termtip.bind(null, tooltipTextKey)}
+            onMouseLeave={hide}
+          >
+            <a
+              href={
+                textKey.startsWith('empire') ?
+                  'http://elite-dangerous.wikia.com/wiki/Empire/Ranks' :
+                  'http://elite-dangerous.wikia.com/wiki/Federation/Ranks'
+              }
+              target="_blank"
+              rel="noopener"
+            >
+              {translate(textKey)}
+            </a>
+          </div>
+        );
+      } else {
+        requirementElements.push(
+          <div
+            key={textKey}
+            className={className}
+            onMouseEnter={termtip.bind(null, tooltipTextKey)}
+            onMouseLeave={hide}
+          >
+            {translate(textKey)}
+          </div>
+        );
+      }
     }
 
     if (requirements) {
-      requirements.federationRank && renderRequirement('federation', 'federation rank ' + requirements.federationRank, 'federation rank required');
+      requirements.federationRank &&
-      requirements.empireRank && renderRequirement('empire', 'empire rank ' + requirements.empireRank, 'empire rank required');
+        renderRequirement(
-      requirements.horizons && renderRequirement('horizons', 'horizons', 'horizons required');
+          'federation',
-      requirements.horizonsEarlyAdoption && renderRequirement('horizons', 'horizons early adoption', 'horizons early adoption required'); 
+          'federation rank ' + requirements.federationRank,
+          'federation rank required'
+        );
+      requirements.empireRank &&
+        renderRequirement(
+          'empire',
+          'empire rank ' + requirements.empireRank,
+          'empire rank required'
+        );
+      requirements.horizons &&
+        renderRequirement('horizons', 'horizons', 'horizons required');
+      requirements.horizonsEarlyAdoption &&
+        renderRequirement(
+          'horizons',
+          'horizons early adoption',
+          'horizons early adoption required'
+        );
     }
 
     return (
-      <div id='outfit' className={'page'} style={{ fontSize: (sizeRatio * 0.9) + 'em' }}>
+      <div
-        <div id='overview'>
+        id="outfit"
+        className={'page'}
+        style={{ fontSize: sizeRatio * 0.9 + 'em' }}
+      >
+        <div id="overview">
           <h1>{ship.name}</h1>
-          <div id='requirements'>{requirementElements}</div>
+          <div id="requirements">{requirementElements}</div>
-          <div id='build'>
+          <div id="build">
-            <input value={newBuildName || ''} onChange={this._buildNameChange} placeholder={translate('Enter Name')} maxLength={50} />
+            <input
-            <button onClick={canSave && this._saveBuild} disabled={!canSave} onMouseOver={termtip.bind(null, 'save')} onMouseOut={hide}>
+              value={newBuildName || ''}
-              <FloppyDisk className='lg' />
+              onChange={this._buildNameChange}
+              placeholder={translate('Enter Name')}
+              maxLength={50}
+            />
+            <button
+              onClick={canSave && this._saveBuild}
+              disabled={!canSave}
+              onMouseOver={termtip.bind(null, 'save')}
+              onMouseOut={hide}
+            >
+              <FloppyDisk className="lg" />
             </button>
-            <button onClick={canRename && this._renameBuild} disabled={!canRename} onMouseOver={termtip.bind(null, 'rename')} onMouseOut={hide}>
+            <button
-            <span style={{ textTransform: 'none', fontSize: '1.8em' }}>a|</span>
+              onClick={canRename && this._renameBuild}
+              disabled={!canRename}
+              onMouseOver={termtip.bind(null, 'rename')}
+              onMouseOut={hide}
+            >
+              <span style={{ textTransform: 'none', fontSize: '1.8em' }}>
+                a|
+              </span>
             </button>
-            <button onClick={canReload && this._reloadBuild} disabled={!canReload} onMouseOver={termtip.bind(null, 'reload')} onMouseOut={hide}>
+            <button
-              <Reload className='lg'/>
+              onClick={canReload && this._reloadBuild}
+              disabled={!canReload}
+              onMouseOver={termtip.bind(null, 'reload')}
+              onMouseOut={hide}
+            >
+              <Reload className="lg" />
             </button>
-            <button className={'danger'} onClick={savedCode && this._deleteBuild} disabled={!savedCode} onMouseOver={termtip.bind(null, 'delete')} onMouseOut={hide}>
+            <button
-              <Bin className='lg'/>
+              className={'danger'}
+              onClick={savedCode && this._deleteBuild}
+              disabled={!savedCode}
+              onMouseOver={termtip.bind(null, 'delete')}
+              onMouseOut={hide}
+            >
+              <Bin className="lg" />
             </button>
-            <button onClick={code && this._resetBuild} disabled={!code} onMouseOver={termtip.bind(null, 'reset')} onMouseOut={hide}>
+            <button
-              <Switch className='lg'/>
+              onClick={code && this._resetBuild}
+              disabled={!code}
+              onMouseOver={termtip.bind(null, 'reset')}
+              onMouseOut={hide}
+            >
+              <Switch className="lg" />
             </button>
-            <button onClick={buildName && this._exportBuild} disabled={!buildName} onMouseOver={termtip.bind(null, 'export')} onMouseOut={hide}>
+            <button
-              <Download className='lg'/>
+              onClick={buildName && this._exportBuild}
+              disabled={!buildName}
+              onMouseOver={termtip.bind(null, 'export')}
+              onMouseOut={hide}
+            >
+              <Download className="lg" />
             </button>
-            <button onClick={this._eddbShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_LIST')} onMouseOut={hide}>
+            <button
-              <ShoppingIcon className='lg' />
+              onClick={this._inaraShoppingList}
+              onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_LIST')}
+              onMouseOut={hide}
+            >
+              <ShoppingIcon className="lg" />
             </button>
-            <button onClick={this._genShortlink} onMouseOver={termtip.bind(null, 'shortlink')} onMouseOut={hide}>
+            <button
-              <LinkIcon className='lg' />
+              onClick={this._genShortlink}
+              onMouseOver={termtip.bind(null, 'shortlink')}
+              onMouseOut={hide}
+            >
+              <LinkIcon className="lg" />
+            </button>
+            <button
+              onClick={this._genShoppingList}
+              onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_MATS')}
+              onMouseOut={hide}
+            >
+              <MatIcon className="lg" />
             </button>
           </div>
         </div>
 
         {/* Main tables */}
-        <ShipSummaryTable ship={ship} fuel={fuel} cargo={cargo} marker={shipSummaryMarker} pips={{sys: this.state.sys, wep: this.state.wep, eng: this.state.eng}} />
+        <ShipSummaryTable
-        <StandardSlotSection ship={ship} fuel={fuel} cargo={cargo} code={standardSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
+          ship={ship}
-        <InternalSlotSection ship={ship} code={internalSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
+          fuel={fuel}
-        <HardpointSlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
+          cargo={cargo}
-        <UtilitySlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
+          marker={shipSummaryMarker}
+          pips={{
+            sys: this.state.sys,
+            wep: this.state.wep,
+            eng: this.state.eng
+          }}
+        />
+        <StandardSlotSection
+          ship={ship}
+          fuel={fuel}
+          cargo={cargo}
+          code={standardSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <InternalSlotSection
+          ship={ship}
+          code={internalSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <HardpointSlotSection
+          ship={ship}
+          code={hardpointsSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <UtilitySlotSection
+          ship={ship}
+          code={hardpointsSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
 
         {/* Control of ship and opponent */}
-        <div className='group quarter'>
+        <div className="group quarter">
-          <div className='group half'>
+          <div className="group half">
-            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>{translate('ship control')}</h2>
+            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>
+              {translate('ship control')}
+            </h2>
           </div>
-          <div className='group half'>
+          <div className="group half">
-            <Boost marker={boostMarker} ship={ship} boost={boost} onChange={this._boostUpdated} />
+            <Boost
+              marker={boostMarker}
+              ship={ship}
+              boost={boost}
+              onChange={this._boostUpdated}
+            />
           </div>
         </div>
-        <div className='group quarter'>
+        <div className="group quarter">
-          <Pips sys={sys} eng={eng} wep={wep} onChange={this._pipsUpdated} />
+          <Pips
+            sys={sys}
+            eng={eng}
+            wep={wep}
+            mcSys={mcSys}
+            mcEng={mcEng}
+            mcWep={mcWep}
+            onChange={this._pipsUpdated}
+          />
         </div>
-        <div className='group quarter'>
+        <div className="group quarter">
-          <Fuel fuelCapacity={ship.fuelCapacity} fuel={fuel} onChange={this._fuelUpdated}/>
+          <Fuel
+            fuelCapacity={ship.fuelCapacity}
+            fuel={fuel}
+            onChange={this._fuelUpdated}
+          />
         </div>
-        <div className='group quarter'>
+        <div className="group quarter">
-          { ship.cargoCapacity > 0 ? <Cargo cargoCapacity={ship.cargoCapacity} cargo={cargo} onChange={this._cargoUpdated}/> : null }
+          {ship.cargoCapacity > 0 ? (
+            <Cargo
+              cargoCapacity={ship.cargoCapacity}
+              cargo={cargo}
+              onChange={this._cargoUpdated}
+            />
+          ) : null}
         </div>
-        <div className='group half'>
+        <div className="group half">
-          <div className='group quarter'>
+          <div className="group quarter">
-            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>{translate('opponent')}</h2>
+            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>
+              {translate('opponent')}
+            </h2>
           </div>
-          <div className='group threequarters'>
+          <div className="group threequarters">
-            <ShipPicker ship={opponent.id} build={opponentBuild} onChange={this._opponentUpdated}/>
+            <ShipPicker
+              ship={opponent.id}
+              build={opponentBuild}
+              onChange={this._opponentUpdated}
+            />
           </div>
         </div>
-        <div className='group half'>
+        <div className="group half">
-          <EngagementRange ship={ship} engagementRange={engagementRange} onChange={this._engagementRangeUpdated}/>
+          <EngagementRange
+            ship={ship}
+            engagementRange={engagementRange}
+            onChange={this._engagementRangeUpdated}
+          />
         </div>
 
         {/* Tabbed subpages */}

src/app/pages/Page.jsx

@@ -51,23 +51,25 @@ export default class Page extends React.Component {
   }
 
   /**
-   * Pages are 'pure' components that only render when props, state, or context changes.
+   * Update the window title upon mount
-   * This method performs a shallow comparison to determine change.
-   *
-   * @param  {Object} np  Next/Incoming properties
-   * @param  {Object} ns  Next/Incoming state
-   * @param  {Object} nc  Next/Incoming context
-   * @return {Boolean}    True if props, state, or context has changed
    */
-  shouldComponentUpdate(np, ns, nc) {
+  componentWillMount() {
-    return !shallowEqual(this.props, np) || !shallowEqual(this.state, ns) || !shallowEqual(this.context, nc);
+    document.title = this.state.title || 'Coriolis';
   }
 
   /**
    * Update the window title upon mount
    */
-  componentWillMount() {
+  componentDidMount() {
     document.title = this.state.title || 'Coriolis';
+    try {
+      (window.adsbygoogle = window.adsbygoogle || []).push({
+        google_ad_client: "ca-pub-3709458261881414",
+        enable_page_level_ads: true
+      });
+    } catch (error) {
+
+    }
   }
 
   /**

src/app/pages/ShipyardPage.jsx

@@ -24,7 +24,9 @@ function countInt(slot) {
   let crEligible = !slot.eligible || slot.eligible.cr;
   this.int[slot.maxClass - 1]++; // Subtract 1 since there is no Class 0 Internal compartment
   this.intCount++;
-  this.maxCargo += crEligible ? ModuleUtils.findInternal('cr', slot.maxClass, 'E').cargo : 0;
+  this.maxCargo += crEligible ?
+    ModuleUtils.findInternal('cr', slot.maxClass, 'E').cargo :
+    0;
 
   // if no eligiblity, then assume pce
   let passSlotType = null;
@@ -42,7 +44,9 @@ function countInt(slot) {
     passSlotType = 'pcq';
     passSlotRating = 'B';
   }
-  let passengerBay = passSlotType ? ModuleUtils.findMaxInternal(passSlotType, slot.maxClass, passSlotRating) : null;
+  let passengerBay = passSlotType ?
+    ModuleUtils.findMaxInternal(passSlotType, slot.maxClass, passSlotRating) :
+    null;
   this.maxPassengers += passengerBay ? passengerBay.passengers : 0;
 }
 
@@ -57,12 +61,16 @@ function shipSummary(shipId, shipData) {
     id: shipId,
     hpCount: 0,
     intCount: 0,
+    beta: shipData.beta,
     maxCargo: 0,
     maxPassengers: 0,
     hp: [0, 0, 0, 0, 0], // Utility, Small, Medium, Large, Huge
     int: [0, 0, 0, 0, 0, 0, 0, 0], // Sizes 1 - 8
     standard: shipData.slots.standard,
-    agility: shipData.properties.pitch + shipData.properties.yaw + shipData.properties.roll
+    agility:
+      shipData.properties.pitch +
+      shipData.properties.yaw +
+      shipData.properties.roll
   };
   Object.assign(summary, shipData.properties);
   let ship = new Ship(shipId, shipData.properties, shipData.slots);
@@ -97,7 +105,6 @@ function shipSummary(shipId, shipData) {
  * The Shipyard summary page
  */
 export default class ShipyardPage extends Page {
-
   static cachedShipSummaries = null;
 
   /**
@@ -119,12 +126,14 @@ export default class ShipyardPage extends Page {
       title: 'Coriolis EDCD Edition - Shipyard',
       shipPredicate: 'name',
       shipDesc: true,
-      shipSummaries: ShipyardPage.cachedShipSummaries
+      shipSummaries: ShipyardPage.cachedShipSummaries,
+      compare: {},
+      groupCompared: false,
     };
   }
 
   /**
-   * Higlight the current ship in the table
+   * Higlight the current ship in the table on mouse over
    * @param  {String} shipId Ship Id
    * @param  {SyntheticEvent} event  Event
    */
@@ -133,6 +142,24 @@ export default class ShipyardPage extends Page {
     this.setState({ shipId });
   }
 
+  /**
+   * Toggle compare highlighting for ships in the table
+   * @param {String} shipId Ship Id
+   */
+  _toggleCompare(shipId) {
+    let compare = this.state.compare;
+    compare[shipId] = !compare[shipId];
+    this.setState({ compare });
+  }
+
+  /**
+   * Toggle grouping of compared ships in the table
+   * @private
+   */
+  _toggleGroupCompared() {
+    this.setState({groupCompared: !this.state.groupCompared})
+  }
+
   /**
    * Update state with the specified sort predicates
    * @param  {String} shipPredicate      Sort predicate - property name
@@ -145,12 +172,15 @@ export default class ShipyardPage extends Page {
       shipPredicateIndex = undefined;
     }
 
-    if (this.state.shipPredicate == shipPredicate && this.state.shipPredicateIndex == shipPredicateIndex) {
+    if (
+      this.state.shipPredicate == shipPredicate &&
+      this.state.shipPredicateIndex == shipPredicateIndex
+    ) {
       shipDesc = !shipDesc;
     }
 
     this.setState({ shipPredicate, shipDesc, shipPredicateIndex });
-  };
+  }
 
   /**
    * Generate the table row summary for the ship
@@ -159,42 +189,45 @@ export default class ShipyardPage extends Page {
    * @param  {Object} u           Localized unit map
    * @param  {Function} fInt      Localized integer formatter
    * @param  {Function} fRound    Localized round formatter
-   * @param  {Boolean} highlight  Should this row be highlighted
    * @return {React.Component}    Table Row
    */
-  _shipRowElement(s, translate, u, fInt, fRound, highlight) {
+  _shipRowElement(s, translate, u, fInt, fRound) {
     let noTouch = this.context.noTouch;
 
-    return <tr
+    return (
+      <tr
         key={s.id}
         style={{ height: '1.5em' }}
-        className={cn({ highlighted: noTouch && this.state.shipId === s.id, alt: highlight })}
+        className={cn({
+          highlighted: noTouch && this.state.shipId === s.id,
+          comparehighlight: this.state.compare[s.id],
+        })}
         onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
+        onClick={() => this._toggleCompare(s.id)}
       >
-      <td className='ri'>{s.manufacturer}</td>
+        <td className="ri">{fInt(s.retailCost)}</td>
-      <td className='ri'>{fInt(s.retailCost)}</td>
+        <td className="ri cap">{translate(SizeMap[s.class])}</td>
-      <td className='ri cap'>{translate(SizeMap[s.class])}</td>
+        <td className="ri">{fInt(s.crew)}</td>
-      <td className='ri'>{fInt(s.crew)}</td>
+        <td className="ri">{s.masslock}</td>
-      <td className='ri'>{s.masslock}</td>
+        <td className="ri">{fInt(s.agility)}</td>
-      <td className='ri'>{fInt(s.agility)}</td>
+        <td className="ri">{fInt(s.hardness)}</td>
-      <td className='ri'>{fInt(s.hardness)}</td>
+        <td className="ri">{fInt(s.hullMass)}</td>
-      <td className='ri'>{fInt(s.hullMass)}</td>
+        <td className="ri">{fInt(s.speed)}</td>
-      <td className='ri'>{fInt(s.speed)}</td>
+        <td className="ri">{fInt(s.boost)}</td>
-      <td className='ri'>{fInt(s.boost)}</td>
+        <td className="ri">{fInt(s.baseArmour)}</td>
-      <td className='ri'>{fInt(s.baseArmour)}</td>
+        <td className="ri">{fInt(s.baseShieldStrength)}</td>
-      <td className='ri'>{fInt(s.baseShieldStrength)}</td>
+        <td className="ri">{fInt(s.topSpeed)}</td>
-      <td className='ri'>{fInt(s.topSpeed)}</td>
+        <td className="ri">{fInt(s.topBoost)}</td>
-      <td className='ri'>{fInt(s.topBoost)}</td>
+        <td className="ri">{fRound(s.maxJumpRange)}</td>
-      <td className='ri'>{fRound(s.maxJumpRange)}</td>
+        <td className="ri">{fInt(s.maxCargo)}</td>
-      <td className='ri'>{fInt(s.maxCargo)}</td>
+        <td className="ri">{fInt(s.maxPassengers)}</td>
-      <td className='ri'>{fInt(s.maxPassengers)}</td>
+        <td className="cn">{s.standard[0]}</td>
-      <td className='cn'>{s.standard[0]}</td>
+        <td className="cn">{s.standard[1]}</td>
-      <td className='cn'>{s.standard[1]}</td>
+        <td className="cn">{s.standard[2]}</td>
-      <td className='cn'>{s.standard[2]}</td>
+        <td className="cn">{s.standard[3]}</td>
-      <td className='cn'>{s.standard[3]}</td>
+        <td className="cn">{s.standard[4]}</td>
-      <td className='cn'>{s.standard[4]}</td>
+        <td className="cn">{s.standard[5]}</td>
-      <td className='cn'>{s.standard[5]}</td>
+        <td className="cn">{s.standard[6]}</td>
-      <td className='cn'>{s.standard[6]}</td>
         <td className={cn({ disabled: !s.hp[1] })}>{s.hp[1]}</td>
         <td className={cn({ disabled: !s.hp[2] })}>{s.hp[2]}</td>
         <td className={cn({ disabled: !s.hp[3] })}>{s.hp[3]}</td>
@@ -208,7 +241,8 @@ export default class ShipyardPage extends Page {
         <td className={cn({ disabled: !s.int[5] })}>{s.int[5]}</td>
         <td className={cn({ disabled: !s.int[6] })}>{s.int[6]}</td>
         <td className={cn({ disabled: !s.int[7] })}>{s.int[7]}</td>
-    </tr>;
+      </tr>
+    );
   }
 
   /**
@@ -221,8 +255,9 @@ export default class ShipyardPage extends Page {
     let hide = this.context.tooltip.bind(null, null);
     let fInt = formats.int;
     let fRound = formats.round;
-    let { shipSummaries, shipPredicate, shipPredicateIndex } = this.state;
+    let { shipSummaries, shipPredicate, shipPredicateIndex, compare, groupCompared } = this.state;
-    let sortShips = (predicate, index) => this._sortShips.bind(this, predicate, index);
+    let sortShips = (predicate, index) =>
+      this._sortShips.bind(this, predicate, index);
 
     let filters = {
       // 'class': { 1: 1, 2: 1}
@@ -239,7 +274,8 @@ export default class ShipyardPage extends Page {
 
     // Sort shipsOverview
     shipSummaries.sort((a, b) => {
-      let valA = a[shipPredicate], valB = b[shipPredicate];
+      let valA = a[shipPredicate],
+          valB = b[shipPredicate];
 
       if (shipPredicateIndex != undefined) {
         valA = valA[shipPredicateIndex];
@@ -252,7 +288,16 @@ export default class ShipyardPage extends Page {
         valB = val;
       }
 
-      if(valA == valB) {
+      if (groupCompared) {
+        if (compare[a.id] && !compare[b.id]) {
+          return -1;
+        }
+        if (!compare[a.id] && compare[b.id]) {
+          return 1;
+        }
+      }
+
+      if (valA == valB) {
         if (a.name > b.name) {
           return 1;
         } else {
@@ -269,122 +314,298 @@ export default class ShipyardPage extends Page {
     let shipRows = new Array(shipSummaries.length);
     let detailRows = new Array(shipSummaries.length);
 
-    let lastShipSortValue = null;
-    let backgroundHighlight = false;
-
     for (let s of shipSummaries) {
-      let shipSortValue = s[shipPredicate];
+      detailRows[i] = this._shipRowElement(
-      if( shipPredicateIndex != undefined ) {
+        s,
-        shipSortValue = shipSortValue[shipPredicateIndex];
+        translate,
-      }
+        units,
-
+        fInt,
-      if( shipSortValue != lastShipSortValue ) {
+        formats.f1,
-        backgroundHighlight = !backgroundHighlight;
+      );
-        lastShipSortValue = shipSortValue;
-      }
-
-      detailRows[i] = this._shipRowElement(s, translate, units, fInt, formats.f1, backgroundHighlight);
       shipRows[i] = (
         <tr
           key={i}
           style={{ height: '1.5em' }}
-          className={cn({ highlighted: noTouch && this.state.shipId === s.id, alt: backgroundHighlight })}
+          className={cn({
+            highlighted: noTouch && this.state.shipId === s.id,
+            comparehighlight: this.state.compare[s.id],
+          })}
           onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
+          onClick={() => this._toggleCompare(s.id)}
         >
-          <td className='le'><Link href={'/outfit/' + s.id}>{s.name}</Link></td>
+          <td className="le">
+            <Link href={'/outfit/' + s.id}>{s.name} {s.beta === true ? '(Beta)' : null}</Link>
+          </td>
         </tr>
       );
       i++;
     }
 
     return (
-      <div className='page' style={{ fontSize: sizeRatio + 'em' }}>
+      <div className="page" style={{fontSize: sizeRatio + 'em'}}>
-        <div style={{ whiteSpace: 'nowrap', margin: '0 auto', fontSize: '0.8em', position: 'relative', display: 'inline-block', maxWidth: '100%' }}>
+        <div className="content-wrapper">
-          <table style={{ width: '12em', position: 'absolute', zIndex: 1 }}>
+        <div className="shipyard-table-wrapper">
+          <table style={{width: '12em', position: 'absolute', zIndex: 1}} className="shipyard-table">
             <thead>
               <tr>
-                <th className='le rgt'>&nbsp;</th>
+                <th className="le rgt">&nbsp;</th>
               </tr>
-              <tr className='main'>
+              <tr className="main">
-                <th className='sortable le rgt' onClick={sortShips('name')}>{translate('ship')}</th>
+                <th className="sortable le rgt" onClick={sortShips('name')}>
+                  {translate('ship')}
+                </th>
               </tr>
               <tr>
-                <th className='le rgt invisible'>{units['m/s']}</th>
+                <th className="le rgt invisible">{units['m/s']}</th>
               </tr>
             </thead>
             <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
               {shipRows}
             </tbody>
           </table>
-          <div style={{ overflowX: 'scroll', maxWidth: '100%' }}>
+          <div style={{ overflowX: 'auto', maxWidth: '100%' }}>
-          <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }}>
+            <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }} className="shipyard-table">
               <thead>
-              <tr className='main'>
+                <tr className="main">
-                <th rowSpan={3} className='sortable' onClick={sortShips('manufacturer')}>{translate('manufacturer')}</th>
                   <th>&nbsp;</th>
-                <th rowSpan={3} className='sortable' onClick={sortShips('class')}>{translate('size')}</th>
+                  <th
-                <th rowSpan={3} className='sortable' onClick={sortShips('crew')}>{translate('crew')}</th>
+                    rowSpan={3}
-                <th rowSpan={3} className='sortable' onMouseEnter={termtip.bind(null, 'mass lock factor')} onMouseLeave={hide} onClick={sortShips('masslock')} >{translate('MLF')}</th>
+                    className="sortable"
-                <th rowSpan={3} className='sortable' onClick={sortShips('agility')}>{translate('agility')}</th>
+                    onClick={sortShips('class')}
-                <th rowSpan={3} className='sortable' onMouseEnter={termtip.bind(null, 'hardness')} onMouseLeave={hide} onClick={sortShips('hardness')}>{translate('hrd')}</th>
+                  >
+                    {translate('size')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('crew')}
+                  >
+                    {translate('crew')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'mass lock factor')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('masslock')}
+                  >
+                    {translate('MLF')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('agility')}
+                  >
+                    {translate('agility')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'hardness')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('hardness')}
+                  >
+                    {translate('hrd')}
+                  </th>
                   <th>&nbsp;</th>
                   <th colSpan={4}>{translate('base')}</th>
                   <th colSpan={5}>{translate('max')}</th>
-                <th className='lft' colSpan={7}></th>
+                  <th className="lft" colSpan={7} />
-                <th className='lft' colSpan={5}></th>
+                  <th className="lft" colSpan={5} />
-                <th className='lft' colSpan={8}></th>
+                  <th className="lft" colSpan={8} />
                 </tr>
                 <tr>
-                <th className='sortable lft' onClick={sortShips('retailCost')}>{translate('cost')}</th>
+                  <th
-                <th className='sortable lft' onClick={sortShips('hullMass')}>{translate('hull')}</th>
+                    className="sortable lft"
-                <th className='sortable lft' onClick={sortShips('speed')}>{translate('speed')}</th>
+                    onClick={sortShips('retailCost')}
-                <th className='sortable' onClick={sortShips('boost')}>{translate('boost')}</th>
+                  >
-                <th className='sortable' onClick={sortShips('baseArmour')}>{translate('armour')}</th>
+                    {translate('cost')}
-                <th className='sortable' onClick={sortShips('baseShieldStrength')}>{translate('shields')}</th>
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('hullMass')}>
+                    {translate('hull')}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('speed')}>
+                    {translate('speed')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('boost')}>
+                    {translate('boost')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('baseArmour')}>
+                    {translate('armour')}
+                  </th>
+                  <th
+                    className="sortable"
+                    onClick={sortShips('baseShieldStrength')}
+                  >
+                    {translate('shields')}
+                  </th>
 
-                <th className='sortable lft' onClick={sortShips('topSpeed')}>{translate('speed')}</th>
+                  <th className="sortable lft" onClick={sortShips('topSpeed')}>
-                <th className='sortable' onClick={sortShips('topBoost')}>{translate('boost')}</th>
+                    {translate('speed')}
-                <th className='sortable' onClick={sortShips('maxJumpRange')}>{translate('jump')}</th>
+                  </th>
-                <th className='sortable' onClick={sortShips('maxCargo')}>{translate('cargo')}</th>
+                  <th className="sortable" onClick={sortShips('topBoost')}>
-                <th className='sortable' onClick={sortShips('maxPassengers')}>{translate('pax')}</th>
+                    {translate('boost')}
-
+                  </th>
-                <th className='lft' colSpan={7}>{translate('core module classes')}</th>
+                  <th className="sortable" onClick={sortShips('maxJumpRange')}>
-                <th colSpan={5} className='sortable lft' onClick={sortShips('hpCount')}>{translate('hardpoints')}</th>
+                    {translate('jump')}
-                <th colSpan={8} className='sortable lft' onClick={sortShips('intCount')}>{translate('internal compartments')}</th>
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxCargo')}>
+                    {translate('cargo')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxPassengers')} onMouseEnter={termtip.bind(null, 'passenger capacity')}
+                    onMouseLeave={hide}>
+                    {translate('pax')}
+                  </th>
+                  <th className="lft" colSpan={7}>
+                    {translate('core module classes')}
+                  </th>
+                  <th
+                    colSpan={5}
+                    className="sortable lft"
+                    onClick={sortShips('hpCount')}
+                  >
+                    {translate('hardpoints')}
+                  </th>
+                  <th
+                    colSpan={8}
+                    className="sortable lft"
+                    onClick={sortShips('intCount')}
+                  >
+                    {translate('internal compartments')}
+                  </th>
                 </tr>
                 <tr>
-                <th className='sortable lft' onClick={sortShips('retailCost')}>{units.CR}</th>
+                  <th
-                <th className='sortable lft' onClick={sortShips('hullMass')}>{units.T}</th>
+                    className="sortable lft"
-                <th className='sortable lft' onClick={sortShips('speed')}>{units['m/s']}</th>
+                    onClick={sortShips('retailCost')}
-                <th className='sortable'  onClick={sortShips('boost')}>{units['m/s']}</th>
+                  >
+                    {units.CR}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('hullMass')}>
+                    {units.T}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('speed')}>
+                    {units['m/s']}
+                  </th>
+                  <th className="sortable" onClick={sortShips('boost')}>
+                    {units['m/s']}
+                  </th>
                   <th>&nbsp;</th>
-                <th className='sortable' onClick={sortShips('baseShieldStrength')}>{units.MJ}</th>
+                  <th
-                <th className='sortable lft' onClick={sortShips('topSpeed')}>{units['m/s']}</th>
+                    className="sortable"
-                <th className='sortable' onClick={sortShips('topBoost')}>{units['m/s']}</th>
+                    onClick={sortShips('baseShieldStrength')}
-                <th className='sortable' onClick={sortShips('maxJumpRange')}>{units.LY}</th>
+                  >
-                <th className='sortable' onClick={sortShips('maxCargo')}>{units.T}</th>
+                    {units.MJ}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('topSpeed')}>
+                    {units['m/s']}
+                  </th>
+                  <th className="sortable" onClick={sortShips('topBoost')}>
+                    {units['m/s']}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxJumpRange')}>
+                    {units.LY}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxCargo')}>
+                    {units.T}
+                  </th>
                   <th>&nbsp;</th>
-                <th className='sortable lft' onMouseEnter={termtip.bind(null, 'power plant')} onMouseLeave={hide} onClick={sortShips('standard', 0)}>{'pp'}</th>
+                  <th
-                <th className='sortable' onMouseEnter={termtip.bind(null, 'thrusters')} onMouseLeave={hide} onClick={sortShips('standard', 1)}>{'th'}</th>
+                    className="sortable lft"
-                <th className='sortable' onMouseEnter={termtip.bind(null, 'frame shift drive')} onMouseLeave={hide} onClick={sortShips('standard', 2)}>{'fsd'}</th>
+                    onMouseEnter={termtip.bind(null, 'power plant')}
-                <th className='sortable' onMouseEnter={termtip.bind(null, 'life support')} onMouseLeave={hide} onClick={sortShips('standard', 3)}>{'ls'}</th>
+                    onMouseLeave={hide}
-                <th className='sortable' onMouseEnter={termtip.bind(null, 'power distriubtor')} onMouseLeave={hide} onClick={sortShips('standard', 4)}>{'pd'}</th>
+                    onClick={sortShips('standard', 0)}
-                <th className='sortable' onMouseEnter={termtip.bind(null, 'sensors')} onMouseLeave={hide} onClick={sortShips('standard', 5)}>{'s'}</th>
+                  >
-                <th className='sortable' onMouseEnter={termtip.bind(null, 'fuel tank')} onMouseLeave={hide} onClick={sortShips('standard', 6)}>{'ft'}</th>
+                    {'pp'}
-                <th className='sortable lft' onClick={sortShips('hp',1)}>{translate('S')}</th>
+                  </th>
-                <th className='sortable' onClick={sortShips('hp', 2)}>{translate('M')}</th>
+                  <th
-                <th className='sortable' onClick={sortShips('hp', 3)}>{translate('L')}</th>
+                    className="sortable"
-                <th className='sortable' onClick={sortShips('hp', 4)}>{translate('H')}</th>
+                    onMouseEnter={termtip.bind(null, 'thrusters')}
-                <th className='sortable' onClick={sortShips('hp', 0)}>{translate('U')}</th>
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 1)}
+                  >
+                    {'th'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'frame shift drive')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 2)}
+                  >
+                    {'fsd'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'life support')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 3)}
+                  >
+                    {'ls'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'power distributor')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 4)}
+                  >
+                    {'pd'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'sensors')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 5)}
+                  >
+                    {'s'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'fuel tank')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 6)}
+                  >
+                    {'ft'}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('hp', 1)}>
+                    {translate('S')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('hp', 2)}>
+                    {translate('M')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('hp', 3)}>
+                    {translate('L')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('hp', 4)}>
+                    {translate('H')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('hp', 0)}>
+                    {translate('U')}
+                  </th>
 
-                <th className='sortable lft' onClick={sortShips('int', 0)} >1</th>
+                  <th className="sortable lft" onClick={sortShips('int', 0)}>
-                <th className='sortable' onClick={sortShips('int', 1)} >2</th>
+                    1
-                <th className='sortable' onClick={sortShips('int', 2)} >3</th>
+                  </th>
-                <th className='sortable' onClick={sortShips('int', 3)} >4</th>
+                  <th className="sortable" onClick={sortShips('int', 1)}>
-                <th className='sortable' onClick={sortShips('int', 4)} >5</th>
+                    2
-                <th className='sortable' onClick={sortShips('int', 5)} >6</th>
+                  </th>
-                <th className='sortable' onClick={sortShips('int', 6)} >7</th>
+                  <th className="sortable" onClick={sortShips('int', 2)}>
-                <th className='sortable' onClick={sortShips('int', 7)} >8</th>
+                    3
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 3)}>
+                    4
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 4)}>
+                    5
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 5)}>
+                    6
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 6)}>
+                    7
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 7)}>
+                    8
+                  </th>
                 </tr>
               </thead>
               <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
@@ -393,6 +614,10 @@ export default class ShipyardPage extends Page {
             </table>
           </div>
         </div>
+        <div className="table-tools" >
+          <label><input type="checkbox" checked={this.state.groupCompared} onClick={() => this._toggleGroupCompared()}/>{translate('Group highlighted ships')}</label>
+        </div>
+        </div>
       </div>
     );
   }

src/app/shipyard/Calculations.js

@@ -7,11 +7,21 @@ import Module from './Module';
  * @param  {object} fsd  The FDS object/component with maxfuel, fuelmul, fuelpower, optmass
  * @param  {number} fuel Optional - The fuel consumed during the jump
  * @return {number}      Distance in Light Years
+ * @param {object} ship Ship instance
  */
-export function jumpRange(mass, fsd, fuel) {
+export function jumpRange(mass, fsd, fuel, ship) {
   const fsdMaxFuelPerJump = fsd instanceof Module ? fsd.getMaxFuelPerJump() : fsd.maxfuel;
   const fsdOptimalMass = fsd instanceof Module ? fsd.getOptMass() : fsd.optmass;
-  return Math.pow(Math.min(fuel === undefined ? fsdMaxFuelPerJump : fuel, fsdMaxFuelPerJump) / fsd.fuelmul, 1 / fsd.fuelpower) * fsdOptimalMass / mass;
+  let jumpAddition = 0;
+  if (ship) {
+    mass += ship.reserveFuelCapacity || 0;
+    for (const module of ship.internal) {
+      if (module && module.m && module.m.grp === 'gfsb' && ship.getSlotStatus(module) == 3) {
+        jumpAddition += module.m.getJumpBoost();
+      }
+    }
+  }
+  return (Math.pow(Math.min(fuel === undefined ? fsdMaxFuelPerJump : fuel, fsdMaxFuelPerJump) / fsd.fuelmul, 1 / fsd.fuelpower) * fsdOptimalMass / mass) + jumpAddition;
 }
 
 /**
@@ -21,8 +31,9 @@ export function jumpRange(mass, fsd, fuel) {
  * @param  {object} fsd  The FDS object/component with maxfuel, fuelmul, fuelpower, optmass
  * @param  {number} fuel The total fuel available
  * @return {number}      Distance in Light Years
+ * @param {object} ship Ship instance
  */
-export function totalJumpRange(mass, fsd, fuel) {
+export function totalJumpRange(mass, fsd, fuel, ship) {
   const fsdMaxFuelPerJump = fsd instanceof Module ? fsd.getMaxFuelPerJump() : fsd.maxfuel;
   const fsdOptimalMass = fsd instanceof Module ? fsd.getOptMass() : fsd.optmass;
 
@@ -30,7 +41,7 @@ export function totalJumpRange(mass, fsd, fuel) {
   let totalRange = 0;
   while (fuelRemaining > 0) {
     const fuelForThisJump = Math.min(fuelRemaining, fsdMaxFuelPerJump);
-    totalRange += this.jumpRange(mass, fsd, fuelForThisJump);
+    totalRange += this.jumpRange(mass, fsd, fuelForThisJump, ship);
     // Mass is reduced
     mass -= fuelForThisJump;
     fuelRemaining -= fuelForThisJump;
@@ -47,7 +58,7 @@ export function totalJumpRange(mass, fsd, fuel) {
  * @param  {number} multiplier  Shield multiplier for ship (1 + shield boosters if any)
  * @return {number} Approximate shield strengh in MJ
  */
-export function shieldStrength(mass, baseShield, sg, multiplier, ship) {
+export function shieldStrength(mass, baseShield, sg, multiplier) {
   // sg might be a module or a template; handle either here
   let minMass = sg instanceof Module ? sg.getMinMass() : sg.minmass;
   let optMass = sg instanceof Module ? sg.getOptMass() : sg.optmass;
@@ -55,23 +66,12 @@ export function shieldStrength(mass, baseShield, sg, multiplier, ship) {
   let minMul = sg instanceof Module ? sg.getMinMul() : sg.minmul;
   let optMul = sg instanceof Module ? sg.getOptMul() : sg.optmul;
   let maxMul = sg instanceof Module ? sg.getMaxMul() : sg.maxmul;
-  if (ship) {
-    for (const i of ship.hardpoints) {
-      if (!i.maxClass) {
-        if (i.grp === 'sb' || (i.m && i.m.grp === 'sb')) {
-          if (!isNaN(i.m.getModValue('optmul'))) {
-            optMul += i.m.getModValue('optmul') / 10000;
-          }
-        }
-      }
-    }
-  }
   let xnorm = Math.min(1, (maxMass - mass) / (maxMass - minMass));
   let exponent = Math.log((optMul - minMul) / (maxMul - minMul)) / Math.log(Math.min(1, (maxMass - optMass) / (maxMass - minMass)));
   let ynorm = Math.pow(xnorm, exponent);
   let mul = minMul + ynorm * (maxMul - minMul);
 
-  return baseShield * mul * multiplier;
+  return (baseShield * mul * multiplier);
 }
 
 /**
@@ -97,6 +97,16 @@ export function speed(mass, baseSpeed, thrusters, engpip) {
   return results;
 }
 
+/**
+ * Calculate pip multiplier for speed.
+ * @param {number} baseSpeed The base speed of ship in data
+ * @param {number} topSpeed The top speed of ship in data
+ * @return {number} The multiplier that pips affect speed.
+ */
+export function calcPipSpeed(baseSpeed, topSpeed) {
+  return (topSpeed - baseSpeed) / (4 * topSpeed);
+}
+
 /**
  * Calculate pitch of a ship based on mass and thrusters
  * @param {number}   mass       the mass of the ship
@@ -212,7 +222,7 @@ function calcValue(minMass, optMass, maxMass, minMul, optMul, maxMul, mass, base
  * Calculate speed for a given setup
  * @param {number}   mass         the mass of the ship
  * @param {number}   baseSpeed    the base speed of the ship
- * @param {ojbect}   thrusters    the thrusters of the ship
+ * @param {object}   thrusters    the thrusters of the ship
  * @param {number}   engpip       the multiplier per pip to engines
  * @param {number}   eng          the pips to engines
  * @param {number}   boostFactor  the boost factor for ths ship
@@ -240,7 +250,7 @@ export function calcSpeed(mass, baseSpeed, thrusters, engpip, eng, boostFactor,
  * Calculate pitch for a given setup
  * @param {number}   mass         the mass of the ship
  * @param {number}   basePitch    the base pitch of the ship
- * @param {ojbect}   thrusters    the thrusters of the ship
+ * @param {object}   thrusters    the thrusters of the ship
  * @param {number}   engpip       the multiplier per pip to engines
  * @param {number}   eng          the pips to engines
  * @param {number}   boostFactor  the boost factor for ths ship
@@ -335,7 +345,6 @@ export function shieldMetrics(ship, sys) {
   const shieldGeneratorSlot = ship.findInternalByGroup('sg');
   if (shieldGeneratorSlot && shieldGeneratorSlot.enabled && shieldGeneratorSlot.m) {
     const shieldGenerator = shieldGeneratorSlot.m;
-
     // Boosters
     let boost = 1;
     let boosterExplDmg = 1;
@@ -349,29 +358,33 @@ export function shieldMetrics(ship, sys) {
         boosterThermDmg = boosterThermDmg * (1 - slot.m.getThermalResistance());
       }
     }
-
     // Calculate diminishing returns for boosters
     // Diminishing returns not currently in-game
     // boost = Math.min(boost, (1 - Math.pow(Math.E, -0.7 * boost)) * 2.5);
 
     // Remove base shield generator strength
     boost -= 1;
-    // Apply diminishing returns
-    boosterExplDmg = boosterExplDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterExplDmg) / 2;
-    boosterKinDmg = boosterKinDmg > 0.7 ? boosterKinDmg : 0.7 - (0.7 - boosterKinDmg) / 2;
-    boosterThermDmg = boosterThermDmg > 0.7 ? boosterThermDmg : 0.7 - (0.7 - boosterThermDmg) / 2;
 
-    const generatorStrength = this.shieldStrength(ship.hullMass, ship.baseShieldStrength, shieldGenerator, 1, ship);
+    let shieldAddition = 0;
+    if (ship) {
+      for (const module of ship.internal) {
+        if (module && module.m && module.m.grp === 'gsrp' && module.enabled) {
+          shieldAddition += module.m.getShieldAddition();
+        }
+      }
+    }
+    let generatorStrength = this.shieldStrength(ship.hullMass, ship.baseShieldStrength, shieldGenerator, 1);
     const boostersStrength = generatorStrength * boost;
 
     // Recover time is the time taken to go from 0 to 50%.  It includes a 16-second wait before shields start to recover
-    const shieldToRecover = (generatorStrength + boostersStrength) / 2;
+    const shieldToRecover = (generatorStrength + boostersStrength + shieldAddition) / 2;
     const powerDistributor = ship.standard[4].m;
     const sysRechargeRate = this.sysRechargeRate(powerDistributor, 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;
@@ -384,19 +397,19 @@ export function shieldMetrics(ship, sys) {
       const remainingShieldToRecover = shieldToRecover - capacitorLifetime * shieldGenerator.getBrokenRegenerationRate();
       if (sys === 0) {
         // No system pips so will never recover shields
-        recover = Math.Inf;
+        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());
       }
     }
 
     // Recharge time is the time taken to go from 50% to 100%
-    const shieldToRecharge = (generatorStrength + boostersStrength) / 2;
+    const shieldToRecharge = (generatorStrength + boostersStrength + shieldAddition) / 2;
 
     // 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;
@@ -412,15 +425,17 @@ 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());
       }
     }
 
     shield = {
       generator: generatorStrength,
       boosters: boostersStrength,
+      addition: shieldAddition,
       cells: ship.shieldCells,
-      total: generatorStrength + boostersStrength + ship.shieldCells,
+      summary: generatorStrength + boostersStrength + shieldAddition,
+      total: generatorStrength + boostersStrength + ship.shieldCells + shieldAddition,
       recover,
       recharge,
     };
@@ -435,34 +450,74 @@ export function shieldMetrics(ship, sys) {
       max: 1 - maxSysResistance
     };
 
+    /**
+     * An object that stores a selection of difference damage multipliers that
+     * deal with a ship's shield strength.
+     * @typedef {Object} ShieldDamageMults
+     * @property {number} generator Base damage multiplier of the shield
+     * contributing it's base resistance.
+     * @property {number} boosters Damage multiplier contributed by all
+     * boosters, i.e. `rawMj / (generator * boosters)` equals shield strength
+     * with 0 pips to sys.
+     * @property {number} sys Damage multiplier contributed by pips to sys.
+     * @property {number} base Damage multiplier with 0 pips to sys; just
+     * boosters and shield generator. Equals `generator * boosters`.
+     * @property {number} total Damage multiplier with current pip settings.
+     * @property {number} max Damage multiplier with 4 pips to sys.
+     */
+
+    let sgExplosiveDmg = 1 - shieldGenerator.getExplosiveResistance();
+    let sgSbExplosiveDmg = diminishingReturnsShields(sgExplosiveDmg, sgExplosiveDmg * boosterExplDmg);
+    /** @type {ShieldDamageMults} */
     shield.explosive = {
-      generator: 1 - shieldGenerator.getExplosiveResistance(),
+      generator: sgExplosiveDmg,
-      boosters: boosterExplDmg,
+      boosters: sgSbExplosiveDmg / sgExplosiveDmg,
       sys: (1 - sysResistance),
-      total: (1 - shieldGenerator.getExplosiveResistance()) * boosterExplDmg * (1 - sysResistance),
+      base: sgSbExplosiveDmg,
-      max: (1 - shieldGenerator.getExplosiveResistance()) * boosterExplDmg * (1 - maxSysResistance)
+      total: sgSbExplosiveDmg * (1 - sysResistance),
+      max: sgSbExplosiveDmg * (1 - maxSysResistance),
     };
 
+    let sgKineticDmg = 1 - shieldGenerator.getKineticResistance();
+    let sgSbKineticDmg = diminishingReturnsShields(sgKineticDmg, sgKineticDmg * boosterKinDmg);
+    /** @type {ShieldDamageMults} */
     shield.kinetic = {
-      generator: 1 - shieldGenerator.getKineticResistance(),
+      generator: sgKineticDmg,
-      boosters: boosterKinDmg,
+      boosters: sgSbKineticDmg / sgKineticDmg,
       sys: (1 - sysResistance),
-      total: (1 - shieldGenerator.getKineticResistance()) * boosterKinDmg * (1 - sysResistance),
+      base: sgSbKineticDmg,
-      max: (1 - shieldGenerator.getKineticResistance()) * boosterKinDmg * (1 - maxSysResistance)
+      total: sgSbKineticDmg * (1 - sysResistance),
+      max: sgSbKineticDmg * (1 - maxSysResistance),
     };
 
+    let sgThermalDmg = 1 - shieldGenerator.getThermalResistance();
+    let sgSbThermalDmg = diminishingReturnsShields(sgThermalDmg , sgThermalDmg * boosterThermDmg);
+    /** @type {ShieldDamageMults} */
     shield.thermal = {
-      generator: 1 - shieldGenerator.getThermalResistance(),
+      generator: sgThermalDmg,
-      boosters: boosterThermDmg,
+      boosters: sgSbThermalDmg / sgThermalDmg,
       sys: (1 - sysResistance),
-      total: (1 - shieldGenerator.getThermalResistance()) * boosterThermDmg * (1 - sysResistance),
+      base: sgSbThermalDmg,
-      max: (1 - shieldGenerator.getThermalResistance()) * boosterThermDmg * (1 - maxSysResistance)
+      total: sgSbThermalDmg * (1 - sysResistance),
+      max: sgSbThermalDmg * (1 - maxSysResistance),
     };
   }
-
   return shield;
 }
 
+/**
+ * Calculate time from one boost to another
+ * @return {number} Boost frequency in seconds
+ * @param {Ship} ship Ship object
+ */
+export function calcBoost(ship) {
+  if (!ship.boostEnergy || !ship.standard[4] || !ship.standard[4].m) {
+    return undefined;
+  }
+  return ship.boostEnergy / ship.standard[4].m.getEnginesRechargeRate();
+}
+
+
 /**
  * Calculate armour metrics
  * @param   {Object}  ship            The ship
@@ -475,34 +530,29 @@ export function armourMetrics(ship) {
 
   let moduleArmour = 0;
   let moduleProtection = 1;
-
+  const bulkheads = ship.bulkheads.m;
-  let hullExplDmg = 1;
+  let hullExplDmgs = [];
-  let hullKinDmg = 1;
+  let hullKinDmgs = [];
-  let hullThermDmg = 1;
+  let hullThermDmgs = [];
-
+  let hullCausDmgs = [];
   // Armour from HRPs and module armour from MRPs
   for (let slot of ship.internal) {
-    if (slot.m && slot.m.grp == 'hr') {
+    if (slot.m && slot.enabled && (slot.m.grp === 'hr' || slot.m.grp === 'ghrp' || slot.m.grp == 'mahr')) {
       armourReinforcement += slot.m.getHullReinforcement();
       // Hull boost for HRPs is applied against the ship's base armour
       armourReinforcement += ship.baseArmour * slot.m.getModValue('hullboost') / 10000;
-
+      hullExplDmgs.push(1 - slot.m.getExplosiveResistance());
-      hullExplDmg = hullExplDmg * (1 - slot.m.getExplosiveResistance());
+      hullKinDmgs.push(1 - slot.m.getKineticResistance());
-      hullKinDmg = hullKinDmg * (1 - slot.m.getKineticResistance());
+      hullThermDmgs.push(1 - slot.m.getThermalResistance());
-      hullThermDmg = hullThermDmg * (1 - slot.m.getThermalResistance());
+      hullCausDmgs.push(1 - slot.m.getCausticResistance());
     }
-    if (slot.m && slot.m.grp == 'mrp') {
+    if (slot.m && slot.enabled && (slot.m.grp == 'mrp' || slot.m.grp == 'gmrp')) {
       moduleArmour += slot.m.getIntegrity();
       moduleProtection = moduleProtection * (1 - slot.m.getProtection());
     }
   }
   moduleProtection = 1 - moduleProtection;
 
-  // Apply diminishing returns
-  hullExplDmg = hullExplDmg > 0.7 ? hullExplDmg : 0.7 - (0.7 - hullExplDmg) / 2;
-  hullKinDmg = hullKinDmg > 0.7 ? hullKinDmg : 0.7 - (0.7 - hullKinDmg) / 2;
-  hullThermDmg = hullThermDmg > 0.7 ? hullThermDmg : 0.7 - (0.7 - hullThermDmg) / 2;
-
   const armour = {
     bulkheads: armourBulkheads,
     reinforcement: armourReinforcement,
@@ -519,24 +569,41 @@ export function armourMetrics(ship) {
     total: 1
   };
 
+  let armourExplDmg = 1 - ship.bulkheads.m.getExplosiveResistance();
+  let armourReinforcedExplDmg = diminishingReturnsArmour(armourExplDmg, ...hullExplDmgs);
   armour.explosive = {
-    bulkheads: 1 - ship.bulkheads.m.getExplosiveResistance(),
+    bulkheads: armourExplDmg,
-    reinforcement: hullExplDmg,
+    reinforcement: armourReinforcedExplDmg / armourExplDmg,
-    total: (1 - ship.bulkheads.m.getExplosiveResistance()) * hullExplDmg
+    total: armourReinforcedExplDmg,
+    res: 1 - armourReinforcedExplDmg
   };
 
+  let armourKinDmg = 1 - ship.bulkheads.m.getKineticResistance();
+  let armourReinforcedKinDmg = diminishingReturnsArmour(armourKinDmg, ...hullKinDmgs);
   armour.kinetic = {
-    bulkheads: 1 - ship.bulkheads.m.getKineticResistance(),
+    bulkheads: armourKinDmg,
-    reinforcement: hullKinDmg,
+    reinforcement: armourReinforcedKinDmg / armourKinDmg,
-    total: (1 - ship.bulkheads.m.getKineticResistance()) * hullKinDmg
+    total: armourReinforcedKinDmg,
+    res: 1 - armourReinforcedKinDmg
   };
 
+  let armourThermDmg = 1 - ship.bulkheads.m.getThermalResistance();
+  let armourReinforcedThermDmg = diminishingReturnsArmour(armourThermDmg, ...hullThermDmgs);
   armour.thermal = {
-    bulkheads: 1 - ship.bulkheads.m.getThermalResistance(),
+    bulkheads: armourThermDmg,
-    reinforcement: hullThermDmg,
+    reinforcement: armourReinforcedThermDmg / armourThermDmg,
-    total: (1 - ship.bulkheads.m.getThermalResistance()) * hullThermDmg
+    total: armourReinforcedThermDmg,
+    res: 1 - armourReinforcedThermDmg
   };
 
+  let armourCausDmg = 1 - ship.bulkheads.m.getCausticResistance();
+  let armourReinforcedCausDmg = diminishingReturnsArmour(armourCausDmg, ...hullCausDmgs);
+  armour.caustic = {
+    bulkheads: armourCausDmg,
+    reinforcement: armourReinforcedCausDmg / armourCausDmg,
+    total: armourReinforcedCausDmg,
+    res: 1 - armourReinforcedCausDmg,
+  };
   return armour;
 }
 
@@ -708,6 +775,34 @@ export function _sustainedDps(ship, opponent, opponentShields, opponentArmour, e
   return { shieldsdps, armoursdps, eps };
 }
 
+/**
+ * Stores SDPS split up by type.
+ * @typedef {Object} SDps
+ * @property {number} absolute  Damage of type absolute
+ * @property {number} explosive Damage of type explosive
+ * @property {number} kinetic   Damage of type kinetic
+ * @property {number} thermal   Damage of type thermal
+ * @property {number} [total]   Sum of all damage types
+ */
+
+/**
+ * An object that holds information about SDPS for a given weapon and opponent.
+ * @typedef {Object} WeaponDamage
+ * @property {number} eps           Energy per second
+ * @property {Object} damage        An object that stores damage inflicted by
+ *                                  the weapon.
+ * @property {Object} effectiveness An object that stores the effectiveness of
+ *                                  the weapon against the opponent given.
+ */
+
+/**
+ * Stores overall SDPS and against a given opponent's shields and armour.
+ * @typedef {Object} WeaponDamage~damage
+ * @property {SDps} base    Overall SDPS.
+ * @property {SDps} shields SDPS against the given opponent's shields.
+ * @property {SDps} armour  SDPS against the given opponent's armour.
+ */
+
 /**
  * Calculate the sustained DPS for a weapon at a given range
  * @param   {Object}  m                 The weapon
@@ -715,13 +810,20 @@ export function _sustainedDps(ship, opponent, opponentShields, opponentArmour, e
  * @param   {Object}  opponentShields   The opponent's shield resistances
  * @param   {Object}  opponentArmour    The opponent's armour resistances
  * @param   {int}     engagementrange   The range between the ship and opponent
- * @returns {Object}                    Sustained DPS for shield and armour
+ * @returns {WeaponDamage}              Sustained DPS for shield and armour
  */
 export function _weaponSustainedDps(m, opponent, opponentShields, opponentArmour, engagementrange) {
   const opponentHasShields = opponentShields.generator ? true : false;
   const weapon = {
     eps: 0,
     damage: {
+      base: {
+        absolute: 0,
+        explosive: 0,
+        kinetic: 0,
+        thermal: 0,
+        total: 0,
+      },
       shields: {
         absolute: 0,
         explosive: 0,
@@ -741,12 +843,14 @@ export function _weaponSustainedDps(m, opponent, opponentShields, opponentArmour
       shields: {
         range: 1,
         sys: opponentHasShields ? opponentShields.absolute.sys : 1,
-        resistance: 1
+        resistance: 1,
+        dpe: 1
       },
       armour: {
         range: 1,
         hardness: 1,
-        resistance: 1
+        resistance: 1,
+        dpe: 1
       }
     }
   };
@@ -755,7 +859,7 @@ export function _weaponSustainedDps(m, opponent, opponentShields, opponentArmour
   weapon.eps = m.getClip() ?  (m.getClip() * m.getEps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload()) : m.getEps();
 
   // Initial sustained DPS
-  let sDps = m.getClip() ?  (m.getClip() * m.getDps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload()) : m.getDps();
+  let sDps = m.getSDps();
 
   // Take fall-off in to account
   const falloff = m.getFalloff();
@@ -766,6 +870,12 @@ export function _weaponSustainedDps(m, opponent, opponentShields, opponentArmour
     sDps *= dropoff;
   }
 
+  weapon.damage.base.absolute = sDps * m.getDamageDist().A;
+  weapon.damage.base.explosive = sDps * m.getDamageDist().E;
+  weapon.damage.base.kinetic = sDps * m.getDamageDist().K;
+  weapon.damage.base.thermal = sDps * m.getDamageDist().T;
+  weapon.damage.base.total = sDps;
+
   // Piercing/hardness modifier (for armour only)
   const armourMultiple = m.getPiercing() >= opponent.hardness ? 1 : m.getPiercing() / opponent.hardness;
   weapon.effectiveness.armour.hardness = armourMultiple;
@@ -800,11 +910,19 @@ export function _weaponSustainedDps(m, opponent, opponentShields, opponentArmour
   weapon.damage.shields.total = weapon.damage.shields.absolute + weapon.damage.shields.explosive + weapon.damage.shields.kinetic + weapon.damage.shields.thermal;
   weapon.damage.armour.total = weapon.damage.armour.absolute + weapon.damage.armour.explosive + weapon.damage.armour.kinetic + weapon.damage.armour.thermal;
 
+
+
   weapon.effectiveness.shields.resistance *= shieldsResistance;
   weapon.effectiveness.armour.resistance *= armourResistance;
 
+
   weapon.effectiveness.shields.total = weapon.effectiveness.shields.range * weapon.effectiveness.shields.sys * weapon.effectiveness.shields.resistance;
   weapon.effectiveness.armour.total = weapon.effectiveness.armour.range * weapon.effectiveness.armour.resistance * weapon.effectiveness.armour.hardness;
+
+  weapon.effectiveness.shields.dpe = weapon.damage.shields.total / m.getEps() / m.getSustainedFactor();
+  weapon.effectiveness.armour.dpe =  weapon.damage.armour.total / m.getEps() / m.getSustainedFactor();
+
+
   return weapon;
 }
 
@@ -846,7 +964,10 @@ export function timeToDrainWep(ship, wep) {
  */
 export function timeToDeplete(amount, dps, eps, capacity, recharge) {
   const drainPerSecond = eps - recharge;
-  if (drainPerSecond <= 0) {
+  // If there is nothing to remove, we're don instantly
+  if (!amount) {
+    return 0;
+  } if (drainPerSecond <= 0) {
     // Simple result
     return amount / dps;
   } else {
@@ -863,3 +984,52 @@ export function timeToDeplete(amount, dps, eps, capacity, recharge) {
     }
   }
 }
+
+/**
+ * Checks whether diminishing returns should be applied to shield damage
+ * multipliers and does so if necessary.
+ * @param {number} shieldMult Damage multiplier of shield generator
+ * @param {number} combinedMult Damage multiplier of shields and shield boosters
+ * @returns {number} Overall damage multiplier
+ */
+export function diminishingReturnsShields(shieldMult, combinedMult) {
+  let max = shieldMult * 0.7;
+  if (combinedMult < max) {
+    return mapIntoDiminishingRange(max / 2, max, combinedMult);
+  } else {
+    return combinedMult;
+  }
+}
+
+/**
+ * Checks whether diminishing returns should be applied to armour damage
+ * multipliers and does so if necessary.
+ * @param  {...any} mults Damage multipliers of alloys and hull reinforcement
+ * packages
+ * @returns {number} Overall damage multiplier
+ */
+export function diminishingReturnsArmour(...mults) {
+  let max = Math.min(0.7, ...mults);
+  let combined = mults.reduce((aggr, v) => aggr * v);
+  let diminished = mapIntoDiminishingRange(0.35, max, combined);
+  if (diminished < 0.7) {
+    return diminished;
+  } else {
+    return combined;
+  }
+}
+
+/**
+ * Applies diminishing returns to a damage multiplier. Effictively, the range
+ * [`0`, `max`]` is mapped into the range [`min`, `max`] for the value `now`.
+ * It can also happen, that `now` is outside of the range [`min`, `max`], then
+ * `now` is actually improved, i.e. enlarged.
+ * @param {number} min Best theoretical damage multiplier
+ * @param {number} max Damage multiplier from which diminishing returns start to
+ * be applied
+ * @param {number} now The current damage multiplier
+ * @returns {number} Remapped damage multiplier
+ */
+export function mapIntoDiminishingRange(min, max, now) {
+  return min + (max - min) * (now / max);
+}

src/app/shipyard/Constants.js

@@ -18,7 +18,7 @@ export const ModuleGroupToName = {
   // Standard
   pp: 'Power Plant',
   gpp: 'Guardian Hybrid Power Plant',
-  gpd: 'Guardian Hybrid Power Distributor',
+  gpd: 'Guardian Power Distributor',
   t: 'Thrusters',
   fsd: 'Frame Shift Drive',
   ls: 'Life Support',
@@ -52,6 +52,14 @@ export const ModuleGroupToName = {
   pcq: 'Luxury Passenger Cabin',
   cc: 'Collector Limpet Controller',
   ss: 'Surface Scanner',
+  gsrp: 'Guardian Shield Reinforcement Packages',
+  gfsb: 'Guardian Frame Shift Drive Booster',
+  ghrp: 'Guardian Hull Reinforcement Package',
+  gmrp: 'Guardian Module Reinforcement Package',
+  mahr: 'Meta Alloy Hull Reinforcement Package',
+  sua: 'Supercruise Assist',
+  mlc: "Multi Limpet Controller",
+  rpl: "Repair Limpet Controller",
 
   // Hard Points
   bl: 'Beam Laser',
@@ -81,8 +89,18 @@ export const ModuleGroupToName = {
   sfn: 'Shutdown Field Neutraliser',
   xs: 'Xeno Scanner',
   rcpl: 'Recon Limpet Controller',
+  rsl: 'Research Limpet Controller',
+  dtl: 'Decontamination Limpet Controller',
   gpc: 'Guardian Plasma Charger',
   ggc: 'Guardian Gauss Cannon',
+  tbsc: 'Shock Cannon',
+  gsc: 'Guardian Shard Cannon',
+  tbem: 'Enzyme Missile Rack',
+  tbrfl: 'Remote Release Flechette Launcher',
+  pwa: 'Pulse Wave Analyser',
+  abl: 'Abrasion Blaster',
+  scl: 'Seismic Charge Launcher',
+  sdm: 'Sub-Surface Displacement Missile',
 };
 
 let GrpNameToCodeMap = {};
@@ -191,7 +209,7 @@ export const ShipFacets = [
     i: 9
   },
   {                   // 10
-    title: 'fastest range',
+    title: 'farthest range',
     props: ['unladenFastestRange', 'ladenFastestRange'],
     lbls: ['unladen', 'laden'],
     unit: 'LY',

src/app/shipyard/Modification.js

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

src/app/shipyard/ModuleSet.js

@@ -13,11 +13,23 @@ 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
  */
 export default class ModuleSet {
-
   /**
    * Instantiate the module set
    * @param  {Object} modules        All Modules
@@ -42,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/ModuleUtils.js

@@ -63,7 +63,10 @@ export function standard(type, id) {
   if (!isNaN(type)) {
     type = StandardArray[type];
   }
-  let s = Modules.standard[type].find(e => e.id == id || (e.class == id.charAt(0) && e.rating == id.charAt(1)));
+  let s = Modules.standard[type].find(e => e.id === id);
+  if (!s) {
+    s = Modules.standard[type].find(e => (e.class == id.charAt(0) && e.rating == id.charAt(1)));
+  }
   if (s) {
     s = new Module({ template: s });
   }

src/app/shipyard/Serializer.js

@@ -85,12 +85,12 @@ export function toDetailedBuild(buildName, ship) {
       code = ship.toString();
 
   let data = {
-    $schema: 'https://coriolis.edcd.io/schemas/ship-loadout/4.json#',
+    $schema: 'https://coriolis.io/schemas/ship-loadout/4.json#',
     name: buildName,
     ship: ship.name,
     references: [{
       name: 'Coriolis.io',
-      url: 'https://coriolis.edcd.io' + outfitURL(ship.id, code, buildName),
+      url: 'https://coriolis.io' + outfitURL(ship.id, code, buildName),
       code,
       shipId: ship.id
     }],

src/app/shipyard/Ship.js

@@ -7,9 +7,10 @@ import LZString from 'lz-string';
 import * as _ from 'lodash';
 import isEqual from 'lodash/lang';
 import { Ships, Modifications } from 'coriolis-data/dist';
+import { chain } from 'lodash';
 const zlib = require('zlib');
 
-const UNIQUE_MODULES = ['psg', 'sg', 'bsg', 'rf', 'fs', 'fh'];
+const UNIQUE_MODULES = ['psg', 'sg', 'bsg', 'rf', 'fs', 'fh', 'gfsb', 'dc', 'ews'];
 
 // Constants for modifications struct
 const SLOT_ID_DONE = -1;
@@ -70,7 +71,6 @@ function reduceToIDs(idArray, slot, slotIndex) {
  * Ship Model - Encapsulates and models in-game ship behavior
  */
 export default class Ship {
-
   /**
    * @param {String} id         Unique ship Id / Key
    * @param {Object} properties Basic ship properties such as name, manufacturer, mass, etc
@@ -151,7 +151,7 @@ export default class Ship {
    * @return {Number}           Jump range in Light Years
    */
   calcLadenRange(massDelta, fuel, fsd) {
-    return Calc.jumpRange(this.ladenMass + (massDelta || 0), fsd || this.standard[2].m, fuel);
+    return Calc.jumpRange(this.ladenMass + (massDelta || 0), fsd || this.standard[2].m, fuel, this);
   }
 
   /**
@@ -164,7 +164,7 @@ export default class Ship {
   calcUnladenRange(massDelta, fuel, fsd) {
     fsd = fsd || this.standard[2].m;
     let fsdMaxFuelPerJump = fsd instanceof Module ? fsd.getMaxFuelPerJump() : fsd.maxfuel;
-    return Calc.jumpRange(this.unladenMass + (massDelta || 0) +  Math.min(fsdMaxFuelPerJump, fuel || this.fuelCapacity), fsd || this.standard[2].m, fuel);
+    return Calc.jumpRange(this.unladenMass + (massDelta || 0) +  Math.min(fsdMaxFuelPerJump, fuel || this.fuelCapacity), fsd || this.standard[2].m, fuel, this);
   }
 
   /**
@@ -239,9 +239,8 @@ export default class Ship {
       }
       sg = sgSlot.m;
     }
-
     // TODO Not accurate if the ship has modified shield boosters
-    return Calc.shieldStrength(this.hullMass, this.baseShieldStrength, sg, 1 + (multiplierDelta || 0), this);
+    return Calc.shieldStrength(this.hullMass, this.baseShieldStrength, sg, 1 + (multiplierDelta || 0));
   }
 
   /**
@@ -437,12 +436,15 @@ export default class Ship {
     m.blueprint = bp;
     this.clearModifications(m);
     // Set any hidden items for the blueprint now
+    if (m.blueprint.grades[m.blueprint.grade] && m.blueprint.grades[m.blueprint.grade].features) {
       const features = m.blueprint.grades[m.blueprint.grade].features;
       for (const featureName in features) {
         if (Modifications.modifications[featureName].hidden) {
           this.setModification(m, featureName, bp.grades[bp.grade].features[featureName][0]);
         }
       }
+    }
+
     this.updateModificationsString();
   }
 
@@ -482,10 +484,7 @@ export default class Ship {
    * @param  {Object} m      The module for which to clear the blueprint
    */
   clearModuleSpecial(m) {
-    if (m.blueprint) {
+    this.setModuleSpecial(m, null);
-      m.blueprint.special = null;
-    }
-    this.recalculateDps().recalculateHps().recalculateEps();
   }
 
   /**
@@ -493,69 +492,61 @@ export default class Ship {
    * @param {Object} m          The module to change
    * @param {Object} name       The name of the modification to change
    * @param {Number} value The new value of the modification.  The value of the modification is scaled to provide two decimal places of precision in an integer.  For example 1.23% is stored as 123
-   * @param {bool}   sentfromui True if this update was sent from the UI
+   * @param {boolean}   isAbsolute True if value is an absolute value and not a modification value
    */
-  setModification(m, name, value, sentfromui) {
+  setModification(m, name, value, isAbsolute = false) {
     if (isNaN(value)) {
       // Value passed is invalid; reset it to 0
       value = 0;
     }
+
+    if (isAbsolute) {
+      m.setPretty(name, value, isAbsolute);
+    } else {
+      m.setModValue(name, value, false);
+    }
+
     // Handle special cases
     if (name === 'pgen') {
       // Power generation
-      m.setModValue(name, value, sentfromui);
       this.updatePowerGenerated();
     } else if (name === 'power') {
       // Power usage
-      m.setModValue(name, value, sentfromui);
       this.updatePowerUsed();
     } else if (name === 'mass') {
       // Mass
-      m.setModValue(name, value, sentfromui);
       this.recalculateMass();
       this.updateMovement();
       this.updateJumpStats();
     } else if (name === 'maxfuel') {
-      m.setModValue(name, value, sentfromui);
       this.updateJumpStats();
     } else if (name === 'optmass') {
-      m.setModValue(name, value, sentfromui);
       // Could be for any of thrusters, FSD or shield
       this.updateMovement();
       this.updateJumpStats();
       this.recalculateShield();
     } else if (name === 'optmul') {
-      m.setModValue(name, value, sentfromui);
       // Could be for any of thrusters, FSD or shield
       this.updateMovement();
       this.updateJumpStats();
       this.recalculateShield();
     } else if (name === 'shieldboost') {
-      m.setModValue(name, value, sentfromui);
       this.recalculateShield();
     } else if (name === 'hullboost' || name === 'hullreinforcement' || name === 'modulereinforcement') {
-      m.setModValue(name, value, sentfromui);
       this.recalculateArmour();
     } else if (name === 'shieldreinforcement') {
-      m.setModValue(name, value, sentfromui);
       this.recalculateShieldCells();
-    } else if (name === 'burst' || name == 'burstrof' || name === 'clip' || name === 'damage' || name === 'distdraw' || name === 'jitter' || name === 'piercing' || name === 'range' || name === 'reload' || name === 'rof' || name === 'thermload') {
+    } else if (name === 'burst' || name === 'burstrof' || name === 'clip' || name === 'damage' || name === 'distdraw' || name === 'jitter' || name === 'piercing' || name === 'range' || name === 'reload' || name === 'rof' || name === 'thermload') {
-      m.setModValue(name, value, sentfromui);
       this.recalculateDps();
       this.recalculateHps();
       this.recalculateEps();
     } else if (name === 'explres' || name === 'kinres' || name === 'thermres') {
-      m.setModValue(name, value, sentfromui);
       // Could be for shields or armour
       this.recalculateArmour();
       this.recalculateShield();
     } else if (name === 'engcap') {
-      m.setModValue(name, value, sentfromui);
       // Might have resulted in a change in boostability
       this.updateMovement();
-    } else {
-      // Generic
-      m.setModValue(name, value, sentfromui);
     }
   }
 
@@ -938,9 +929,14 @@ export default class Ship {
     let epsChanged = n && n.getEps() || old && old.getEps();
     let hpsChanged = n && n.getHps() || old && old.getHps();
 
-    let armourChange = (slot === this.bulkheads) || (n && n.grp === 'hr') || (old && old.grp === 'hr') || (n && n.grp === 'mrp') || (old && old.grp === 'mrp');
+    let armourChange = (slot === this.bulkheads) ||
+      (n && n.grp === 'hr') || (old && old.grp === 'hr') ||
+      (n && n.grp === 'ghrp') || (old && old.grp === 'ghrp') ||
+      (n && n.grp == 'mahr') || (old && old.grp == 'mahr') ||
+      (n && n.grp === 'mrp') || (old && old.grp === 'mrp') ||
+      (n && n.grp === 'gmrp') || (old && old.grp == 'gmrp');
 
-    let shieldChange = (n && n.grp === 'bsg') || (old && old.grp === 'bsg') || (n && n.grp === 'psg') || (old && old.grp === 'psg') || (n && n.grp === 'sg') || (old && old.grp === 'sg') || (n && n.grp === 'sb') || (old && old.grp === 'sb');
+    let shieldChange = (n && n.grp === 'bsg') || (old && old.grp === 'bsg') || (n && n.grp === 'psg') || (old && old.grp === 'psg') || (n && n.grp === 'sg') || (old && old.grp === 'sg') || (n && n.grp === 'sb') || (old && old.grp === 'sb') || (old && old.grp === 'gsrp') || (n && n.grp === 'gsrp');
 
     let shieldCellsChange = (n && n.grp === 'scb') || (old && old.grp === 'scb');
 
@@ -997,25 +993,6 @@ export default class Ship {
     return this;
   }
 
-  /**
-   * Calculate diminishing returns value, where values below a given limit are returned
-   * as-is, and values between the lower and upper limit of the diminishing returns are
-   * given at half value.
-   * Commonly used for resistances.
-   * @param {Number} val  The value
-   * @param {Number} drll  The lower limit for diminishing returns
-   * @param {Number} drul  The upper limit for diminishing returns
-   * @return {this} The ship instance (for chaining operations)
-   */
-  diminishingReturns(val, drll, drul) {
-    if (val < drll) {
-      val = drll;
-    }  else if (val < drul) {
-      val = drul - (drul - val) / 2;
-    }
-    return val;
-  }
-
   /**
    * Calculate damage per second and related items for weapons
    * @return {this} The ship instance (for chaining operations)
@@ -1202,38 +1179,35 @@ export default class Ship {
 
     unladenMass += this.bulkheads.m.getMass();
 
-    for (let slotNum in this.standard) {
+    let slots = this.standard.concat(this.internal, this.hardpoints);
-      const slot = this.standard[slotNum];
+    // TODO: create class for slot and also add slot.get
-      if (slot.m) {
+    // handle unladen mass
-        unladenMass += slot.m.getMass();
+    unladenMass += chain(slots)
-        if (slot.m.grp === 'ft') {
+      .map(slot => slot.m ? slot.m.get('mass') : null)
-          fuelCapacity += slot.m.fuel;
+      .map(mass => mass || 0)
-        }
+      .reduce((sum, mass) => sum + mass)
-      }
+      .value();
-    }
 
-    for (let slotNum in this.internal) {
+    // handle fuel capacity
-      const slot = this.internal[slotNum];
+    fuelCapacity += chain(slots)
-      if (slot.m) {
+      .map(slot => slot.m ? slot.m.get('fuel') : null)
-        unladenMass += slot.m.getMass();
+      .map(fuel => fuel || 0)
-        if (slot.m.grp === 'ft') {
+      .reduce((sum, fuel) => sum + fuel)
-          fuelCapacity += slot.m.fuel;
+      .value();
-        } else if (slot.m.grp === 'cr') {
-          cargoCapacity += slot.m.cargo;
-        } else if (slot.m.grp.slice(0,2) === 'pc') {
-          if (slot.m.passengers) {
-            passengerCapacity += slot.m.passengers;
-          }
-        }
-      }
-    }
 
-    for (let slotNum in this.hardpoints) {
+    // handle cargo capacity
-      const slot = this.hardpoints[slotNum];
+    cargoCapacity += chain(slots)
-      if (slot.m) {
+      .map(slot => slot.m ? slot.m.get('cargo') : null)
-        unladenMass += slot.m.getMass();
+      .map(cargo => cargo || 0)
-      }
+      .reduce((sum, cargo) => sum + cargo)
-    }
+      .value();
+
+    // handle passenger capacity
+    passengerCapacity += chain(slots)
+      .map(slot => slot.m ? slot.m.get('passengers') : null)
+      .map(passengers => passengers || 0)
+      .reduce((sum, passengers) => sum + passengers)
+      .value();
 
     // Update global stats
     this.unladenMass = unladenMass;
@@ -1274,7 +1248,7 @@ export default class Ship {
     // Obtain shield metrics with 0 pips to sys (parts affected by SYS aren't used here)
     const metrics = Calc.shieldMetrics(this, 0);
 
-    this.shield = metrics.generator ? metrics.generator + metrics.boosters : 0;
+    this.shield = metrics.generator ? metrics.generator + metrics.boosters + metrics.addition : 0;
     this.shieldExplRes = this.shield > 0 ? 1 - metrics.explosive.total : null;
     this.shieldKinRes = this.shield > 0 ?  1 - metrics.kinetic.total : null;
     this.shieldThermRes = this.shield > 0 ?  1 - metrics.thermal.total : null;
@@ -1307,45 +1281,15 @@ export default class Ship {
    */
   recalculateArmour() {
     // Armour from bulkheads
-    let bulkhead = this.bulkheads.m;
+    let metrics = Calc.armourMetrics(this);
-    let armour = this.baseArmour + (this.baseArmour * bulkhead.getHullBoost());
-    let modulearmour = 0;
-    let moduleprotection = 1;
-    let hullExplRes = 1 - bulkhead.getExplosiveResistance();
-    const hullExplResDRStart = hullExplRes * 0.7;
-    const hullExplResDREnd = hullExplRes * 0;
-    let hullKinRes = 1 - bulkhead.getKineticResistance();
-    const hullKinResDRStart = hullKinRes * 0.7;
-    const hullKinResDREnd = hullKinRes * 0;
-    let hullThermRes = 1 - bulkhead.getThermalResistance();
-    const hullThermResDRStart = hullThermRes * 0.7;
-    const hullThermResDREnd = hullThermRes * 0;
-
-    // Armour from HRPs and module armour from MRPs
-    for (let slot of this.internal) {
-      if (slot.m && slot.m.grp == 'hr') {
-        armour += slot.m.getHullReinforcement();
-        // Hull boost for HRPs is applied against the ship's base armour
-        armour += this.baseArmour * slot.m.getModValue('hullboost') / 10000;
-
-        hullExplRes *= (1 - slot.m.getExplosiveResistance());
-        hullKinRes *= (1 - slot.m.getKineticResistance());
-        hullThermRes *= (1 - slot.m.getThermalResistance());
-      }
-      if (slot.m && slot.m.grp == 'mrp') {
-        modulearmour += slot.m.getIntegrity();
-        moduleprotection = moduleprotection * (1 - slot.m.getProtection());
-      }
-    }
-    moduleprotection = 1 - moduleprotection;
-
-    this.armour = armour;
-    this.modulearmour = modulearmour;
-    this.moduleprotection = moduleprotection;
-    this.hullExplRes = 1 - this.diminishingReturns(hullExplRes, hullExplResDREnd, hullExplResDRStart);
-    this.hullKinRes = 1 - this.diminishingReturns(hullKinRes, hullKinResDREnd, hullKinResDRStart);
-    this.hullThermRes = 1 - this.diminishingReturns(hullThermRes, hullThermResDREnd, hullThermResDRStart);
 
+    this.armour = metrics.total ? metrics.total : 0;
+    this.modulearmour = metrics.modulearmour;
+    this.moduleprotection = metrics.moduleprotection;
+    this.hullExplRes = 1 - metrics.explosive.total;
+    this.hullKinRes = 1 - metrics.kinetic.total;
+    this.hullThermRes = 1 - metrics.thermal.total;
+    this.hullCausRes = 1 - metrics.caustic.total;
     return this;
   }
 
@@ -1357,10 +1301,10 @@ export default class Ship {
     let fsd = this.standard[2].m;   // Frame Shift Drive;
     let { unladenMass, fuelCapacity } = this;
     this.unladenRange = this.calcUnladenRange(); // Includes fuel weight for jump
-    this.fullTankRange = Calc.jumpRange(unladenMass + fuelCapacity, fsd); // Full Tank
+    this.fullTankRange = Calc.jumpRange(unladenMass + fuelCapacity, fsd, fuelCapacity, this); // Full Tank
     this.ladenRange = this.calcLadenRange(); // Includes full tank and caro
-    this.unladenFastestRange = Calc.totalJumpRange(unladenMass + this.fuelCapacity, fsd, fuelCapacity);
+    this.unladenFastestRange = Calc.totalJumpRange(unladenMass + this.fuelCapacity, fsd, fuelCapacity, this);
-    this.ladenFastestRange = Calc.totalJumpRange(unladenMass + this.fuelCapacity + this.cargoCapacity, fsd, fuelCapacity);
+    this.ladenFastestRange = Calc.totalJumpRange(unladenMass + this.fuelCapacity + this.cargoCapacity, fsd, fuelCapacity, this);
     this.maxJumpCount = Math.ceil(fuelCapacity / fsd.getMaxFuelPerJump());
     return this;
   }
@@ -1555,7 +1499,7 @@ export default class Ship {
             } else {
               buffer.writeInt32LE(slotMod.value, curpos);
             }
-            // const modification = _.find(Modifications.modifications, function(o) { return o.id === slotMod.id; });
+            const modification = _.find(Modifications.modifications, function(o) { return o.id === slotMod.id; });
             // console.log('ENCODE Slot ' + i + ': ' + modification.name + ' = ' + slotMod.value);
             curpos += 4;
           }
@@ -1568,6 +1512,7 @@ export default class Ship {
       }
 
       this.serialized.modifications = zlib.gzipSync(buffer).toString('base64');
+      // console.log(this.serialized.modifications)
     } else {
       this.serialized.modifications = null;
     }

src/app/shipyard/ShipRoles.js

@@ -1,5 +1,5 @@
-import * as ModuleUtils from './ModuleUtils'
+import * as ModuleUtils from './ModuleUtils';
-import { canMount } from '../utils/SlotFunctions'
+import { canMount } from '../utils/SlotFunctions';
 
 /**
  * Standard / typical role for multi-purpose or combat (if shielded with better bulkheads)
@@ -7,20 +7,20 @@ import { canMount } from '../utils/SlotFunctions'
  * @param {Boolean} shielded      True if shield generator should be included
  * @param {integer} bulkheadIndex Bulkhead to use see Constants.BulkheadNames
  */
-export function multiPurpose (ship, shielded, bulkheadIndex) {
+export function multiPurpose(ship, shielded, bulkheadIndex) {
   ship.useStandard('A')
     .use(ship.standard[3], ModuleUtils.standard(3, ship.standard[3].maxClass + 'D'))  // D Life Support
     .use(ship.standard[5], ModuleUtils.standard(5, ship.standard[5].maxClass + 'D'))  // D Sensors
-    .useBulkhead(bulkheadIndex)
+    .useBulkhead(bulkheadIndex);
 
   if (shielded) {
-    ship.internal.some(function (slot) {
+    ship.internal.some(function(slot) {
       if (canMount(ship, slot, 'sg')) { // Assuming largest slot can hold an eligible shield
-        ship.use(slot, ModuleUtils.findInternal('sg', slot.maxClass, 'A'))
+        ship.use(slot, ModuleUtils.findInternal('sg', slot.maxClass, 'A'));
-        ship.setSlotEnabled(slot, true)
+        ship.setSlotEnabled(slot, true);
-        return true
+        return true;
       }
-    })
+    });
   }
 }
 
@@ -30,51 +30,51 @@ export function multiPurpose (ship, shielded, bulkheadIndex) {
  * @param  {Boolean} shielded     True if shield generator should be included
  * @param  {Object} standardOpts  [Optional] Standard module optional overrides
  */
-export function trader (ship, shielded, standardOpts) {
+export function trader(ship, shielded, standardOpts) {
-  let usedSlots = []
+  let usedSlots = [];
-  let bstCount = 2
+  let bstCount = 2;
-  let sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass)
+  let sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass);
   ship.useStandard('A')
     .use(ship.standard[3], ModuleUtils.standard(3, ship.standard[3].maxClass + 'D'))  // D Life Support
     .use(ship.standard[1], ModuleUtils.standard(1, ship.standard[1].maxClass + 'D'))  // D Life Support
     .use(ship.standard[4], ModuleUtils.standard(4, ship.standard[4].maxClass + 'D'))  // D Life Support
-    .use(ship.standard[5], ModuleUtils.standard(5, ship.standard[5].maxClass + 'D'))  // D Sensors
+    .use(ship.standard[5], ModuleUtils.standard(5, ship.standard[5].maxClass + 'D'));  // D Sensors
 
-  const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8]
+  const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.sg)
     .filter(a => a.maxClass >= sg.class)
-    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass))
+    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
-  shieldInternals.some(function (slot) {
+  shieldInternals.some(function(slot) {
     if (canMount(ship, slot, 'sg')) { // Assuming largest slot can hold an eligible shield
-      const shield = ModuleUtils.findInternal('sg', slot.maxClass, 'A')
+      const shield = ModuleUtils.findInternal('sg', slot.maxClass, 'A');
       if (shield && shield.maxmass > ship.hullMass) {
-        ship.use(slot, shield)
+        ship.use(slot, shield);
-        ship.setSlotEnabled(slot, true)
+        ship.setSlotEnabled(slot, true);
-        usedSlots.push(slot)
+        usedSlots.push(slot);
-        return true
+        return true;
       }
     }
-  })
+  });
 
   // Fill the empty internals with cargo racks
   for (let i = ship.internal.length; i--;) {
-    let slot = ship.internal[i]
+    let slot = ship.internal[i];
     if (usedSlots.indexOf(slot) == -1 && canMount(ship, slot, 'cr')) {
-      ship.use(slot, ModuleUtils.findInternal('cr', slot.maxClass, 'E'))
+      ship.use(slot, ModuleUtils.findInternal('cr', slot.maxClass, 'E'));
     }
   }
 
   // Empty the hardpoints
   for (let s of ship.hardpoints) {
-    ship.use(s, null)
+    ship.use(s, null);
   }
   for (let s of ship.hardpoints) {
     if (s.maxClass == 0 && bstCount) {       // Mount up to 2 boosters
-      ship.use(s, ModuleUtils.hardpoints('04'))
+      ship.use(s, ModuleUtils.hardpoints('04'));
-      bstCount--
+      bstCount--;
     } else {
-      ship.use(s, null)
+      ship.use(s, null);
     }
   }
   // ship.useLightestStandard(standardOpts);
@@ -85,127 +85,127 @@ export function trader (ship, shielded, standardOpts) {
  * @param  {Ship} ship         Ship instance
  * @param  {Boolean} planetary True if Planetary Vehicle Hangar (PVH) should be included
  */
-export function explorer (ship, planetary) {
+export function explorer(ship, planetary) {
-  let standardOpts = {ppRating: 'A'},
+  let standardOpts = { ppRating: 'A' },
       heatSinkCount = 2,  // Fit 2 heat sinks if possible
       usedSlots = [],
       sgSlot,
       fuelScoopSlot,
-    sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass)
+      sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass);
 
   if (!planetary) { // Non-planetary explorers don't really need to boost
-    standardOpts.pd = '1D'
+    standardOpts.pd = '1D';
   }
 
   // Cargo hatch can be disabled
-  ship.setSlotEnabled(ship.cargoHatch, false)
+  ship.setSlotEnabled(ship.cargoHatch, false);
 
   // Advanced Discovery Scanner - class 1 or higher
-  const adsOrder = [1, 2, 3, 4, 5, 6, 7, 8]
+  const adsOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const adsInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.sc)
-    .sort((a, b) => adsOrder.indexOf(a.maxClass) - adsOrder.indexOf(b.maxClass))
+    .sort((a, b) => adsOrder.indexOf(a.maxClass) - adsOrder.indexOf(b.maxClass));
   for (let i = 0; i < adsInternals.length; i++) {
     if (canMount(ship, adsInternals[i], 'sc')) {
-      ship.use(adsInternals[i], ModuleUtils.internal('2f'))
+      ship.use(adsInternals[i], ModuleUtils.internal('2f'));
-      usedSlots.push(adsInternals[i])
+      usedSlots.push(adsInternals[i]);
-      break
+      break;
     }
   }
 
   if (planetary) {
     // Planetary Vehicle Hangar - class 2 or higher
-    const pvhOrder = [2, 3, 4, 5, 6, 7, 8, 1]
+    const pvhOrder = [2, 3, 4, 5, 6, 7, 8, 1];
     const pvhInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
       .filter(a => (!a.eligible) || a.eligible.pv)
-      .sort((a, b) => pvhOrder.indexOf(a.maxClass) - pvhOrder.indexOf(b.maxClass))
+      .sort((a, b) => pvhOrder.indexOf(a.maxClass) - pvhOrder.indexOf(b.maxClass));
     for (let i = 0; i < pvhInternals.length; i++) {
       if (canMount(ship, pvhInternals[i], 'pv')) {
         // Planetary Vehical Hangar only has even classes
-        const pvhClass = pvhInternals[i].maxClass % 2 === 1 ? pvhInternals[i].maxClass - 1 : pvhInternals[i].maxClass
+        const pvhClass = pvhInternals[i].maxClass % 2 === 1 ? pvhInternals[i].maxClass - 1 : pvhInternals[i].maxClass;
-        ship.use(pvhInternals[i], ModuleUtils.findInternal('pv', pvhClass, 'G')) // G is lower mass
+        ship.use(pvhInternals[i], ModuleUtils.findInternal('pv', pvhClass, 'G')); // G is lower mass
-        ship.setSlotEnabled(pvhInternals[i], false)   // Disable power for Planetary Vehical Hangar
+        ship.setSlotEnabled(pvhInternals[i], false);   // Disable power for Planetary Vehical Hangar
-        usedSlots.push(pvhInternals[i])
+        usedSlots.push(pvhInternals[i]);
-        break
+        break;
       }
     }
   }
 
   // Shield generator
-  const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8]
+  const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.sg)
     .filter(a => a.maxClass >= sg.class)
-    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass))
+    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
   for (let i = 0; i < shieldInternals.length; i++) {
     if (canMount(ship, shieldInternals[i], 'sg')) {
-      ship.use(shieldInternals[i], sg)
+      ship.use(shieldInternals[i], sg);
-      usedSlots.push(shieldInternals[i])
+      usedSlots.push(shieldInternals[i]);
-      sgSlot = shieldInternals[i]
+      sgSlot = shieldInternals[i];
-      break
+      break;
     }
   }
 
   // Detailed Surface Scanner
-  const dssOrder = [1, 2, 3, 4, 5, 6, 7, 8]
+  const dssOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const dssInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.sc)
-    .sort((a, b) => dssOrder.indexOf(a.maxClass) - dssOrder.indexOf(b.maxClass))
+    .sort((a, b) => dssOrder.indexOf(a.maxClass) - dssOrder.indexOf(b.maxClass));
   for (let i = 0; i < dssInternals.length; i++) {
     if (canMount(ship, dssInternals[i], 'sc')) {
-      ship.use(dssInternals[i], ModuleUtils.internal('2i'))
+      ship.use(dssInternals[i], ModuleUtils.internal('2i'));
-      usedSlots.push(dssInternals[i])
+      usedSlots.push(dssInternals[i]);
-      break
+      break;
     }
   }
 
   // Fuel scoop - best possible
-  const fuelScoopOrder = [8, 7, 6, 5, 4, 3, 2, 1]
+  const fuelScoopOrder = [8, 7, 6, 5, 4, 3, 2, 1];
   const fuelScoopInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.fs)
-    .sort((a, b) => fuelScoopOrder.indexOf(a.maxClass) - fuelScoopOrder.indexOf(b.maxClass))
+    .sort((a, b) => fuelScoopOrder.indexOf(a.maxClass) - fuelScoopOrder.indexOf(b.maxClass));
   for (let i = 0; i < fuelScoopInternals.length; i++) {
     if (canMount(ship, fuelScoopInternals[i], 'fs')) {
-      ship.use(fuelScoopInternals[i], ModuleUtils.findInternal('fs', fuelScoopInternals[i].maxClass, 'A'))
+      ship.use(fuelScoopInternals[i], ModuleUtils.findInternal('fs', fuelScoopInternals[i].maxClass, 'A'));
-      usedSlots.push(fuelScoopInternals[i])
+      usedSlots.push(fuelScoopInternals[i]);
-      fuelScoopSlot = fuelScoopInternals[i]
+      fuelScoopSlot = fuelScoopInternals[i];
-      break
+      break;
     }
   }
 
   // AFMUs - fill as they are 0-weight
-  const afmuOrder = [8, 7, 6, 5, 4, 3, 2, 1]
+  const afmuOrder = [8, 7, 6, 5, 4, 3, 2, 1];
   const afmuInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.pc)
-    .sort((a, b) => afmuOrder.indexOf(a.maxClass) - afmuOrder.indexOf(b.maxClass))
+    .sort((a, b) => afmuOrder.indexOf(a.maxClass) - afmuOrder.indexOf(b.maxClass));
   for (let i = 0; i < afmuInternals.length; i++) {
     if (canMount(ship, afmuInternals[i], 'am')) {
-      ship.use(afmuInternals[i], ModuleUtils.findInternal('am', afmuInternals[i].maxClass, 'A'))
+      ship.use(afmuInternals[i], ModuleUtils.findInternal('am', afmuInternals[i].maxClass, 'A'));
-      usedSlots.push(afmuInternals[i])
+      usedSlots.push(afmuInternals[i]);
-      ship.setSlotEnabled(afmuInternals[i], false)   // Disable power for AFM Unit
+      ship.setSlotEnabled(afmuInternals[i], false);   // Disable power for AFM Unit
     }
   }
 
   for (let s of ship.hardpoints) {
     if (s.maxClass == 0 && heatSinkCount) {       // Mount up to 2 heatsinks
-      ship.use(s, ModuleUtils.hardpoints('02'))
+      ship.use(s, ModuleUtils.hardpoints('02'));
-      ship.setSlotEnabled(s, heatSinkCount == 2) // Only enable a single Heatsink
+      ship.setSlotEnabled(s, heatSinkCount == 2); // Only enable a single Heatsink
-      heatSinkCount--
+      heatSinkCount--;
     } else {
-      ship.use(s, null)
+      ship.use(s, null);
     }
   }
 
   if (sgSlot && fuelScoopSlot) {
     // The SG and Fuel scoop to not need to be powered at the same time
     if (sgSlot.m.getPowerUsage() > fuelScoopSlot.m.getPowerUsage()) { // The Shield generator uses the most power
-      ship.setSlotEnabled(fuelScoopSlot, false)
+      ship.setSlotEnabled(fuelScoopSlot, false);
     } else {                                    // The Fuel scoop uses the most power
-      ship.setSlotEnabled(sgSlot, false)
+      ship.setSlotEnabled(sgSlot, false);
     }
   }
 
-  ship.useLightestStandard(standardOpts)
+  ship.useLightestStandard(standardOpts);
 }
 
 /**
@@ -213,188 +213,188 @@ export function explorer (ship, planetary) {
  * @param  {Ship} ship         Ship instance
  * @param  {Boolean} shielded  True if shield generator should be included
  */
-export function miner (ship, shielded) {
+export function miner(ship, shielded) {
-  shielded = true
+  shielded = true;
-  let standardOpts = {ppRating: 'A'},
+  let standardOpts = { ppRating: 'A' },
       miningLaserCount = 2,
       usedSlots = [],
-    sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass)
+      sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass);
 
   // Cargo hatch should be enabled
-  ship.setSlotEnabled(ship.cargoHatch, true)
+  ship.setSlotEnabled(ship.cargoHatch, true);
 
   // Largest possible refinery
-  const refineryOrder = [4, 5, 6, 7, 8, 3, 2, 1]
+  const refineryOrder = [4, 5, 6, 7, 8, 3, 2, 1];
   const refineryInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.rf)
-    .sort((a, b) => refineryOrder.indexOf(a.maxClass) - refineryOrder.indexOf(b.maxClass))
+    .sort((a, b) => refineryOrder.indexOf(a.maxClass) - refineryOrder.indexOf(b.maxClass));
   for (let i = 0; i < refineryInternals.length; i++) {
     if (canMount(ship, refineryInternals[i], 'rf')) {
-      ship.use(refineryInternals[i], ModuleUtils.findInternal('rf', Math.min(refineryInternals[i].maxClass, 4), 'A'))
+      ship.use(refineryInternals[i], ModuleUtils.findInternal('rf', Math.min(refineryInternals[i].maxClass, 4), 'A'));
-      usedSlots.push(refineryInternals[i])
+      usedSlots.push(refineryInternals[i]);
-      break
+      break;
     }
   }
 
   // Prospector limpet controller - 3A if possible
-  const prospectorOrder = [3, 4, 5, 6, 7, 8, 2, 1]
+  const prospectorOrder = [3, 4, 5, 6, 7, 8, 2, 1];
   const prospectorInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.pc)
-    .sort((a, b) => prospectorOrder.indexOf(a.maxClass) - prospectorOrder.indexOf(b.maxClass))
+    .sort((a, b) => prospectorOrder.indexOf(a.maxClass) - prospectorOrder.indexOf(b.maxClass));
   for (let i = 0; i < prospectorInternals.length; i++) {
     if (canMount(ship, prospectorInternals[i], 'pc')) {
       // Prospector only has odd classes
-      const prospectorClass = prospectorInternals[i].maxClass % 2 === 0 ? prospectorInternals[i].maxClass - 1 : prospectorInternals[i].maxClass
+      const prospectorClass = prospectorInternals[i].maxClass % 2 === 0 ? prospectorInternals[i].maxClass - 1 : prospectorInternals[i].maxClass;
-      ship.use(prospectorInternals[i], ModuleUtils.findInternal('pc', prospectorClass, 'A'))
+      ship.use(prospectorInternals[i], ModuleUtils.findInternal('pc', prospectorClass, 'A'));
-      usedSlots.push(prospectorInternals[i])
+      usedSlots.push(prospectorInternals[i]);
-      break
+      break;
     }
   }
 
   // Shield generator if required
   if (shielded) {
-    const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8]
+    const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
     const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
       .filter(a => (!a.eligible) || a.eligible.sg)
       .filter(a => a.maxClass >= sg.class)
-      .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass))
+      .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
     for (let i = 0; i < shieldInternals.length; i++) {
       if (canMount(ship, shieldInternals[i], 'sg')) {
-        ship.use(shieldInternals[i], sg)
+        ship.use(shieldInternals[i], sg);
-        usedSlots.push(shieldInternals[i])
+        usedSlots.push(shieldInternals[i]);
-        break
+        break;
       }
     }
   }
 
   // Dual mining lasers of highest possible class; remove anything else
-  const miningLaserOrder = [2, 3, 4, 1, 0]
+  const miningLaserOrder = [2, 3, 4, 1, 0];
-  const miningLaserHardpoints = ship.hardpoints.concat().sort(function (a, b) {
+  const miningLaserHardpoints = ship.hardpoints.concat().sort(function(a, b) {
-    return miningLaserOrder.indexOf(a.maxClass) - miningLaserOrder.indexOf(b.maxClass)
+    return miningLaserOrder.indexOf(a.maxClass) - miningLaserOrder.indexOf(b.maxClass);
-  })
+  });
   for (let s of miningLaserHardpoints) {
     if (s.maxClass >= 1 && miningLaserCount) {
-      ship.use(s, ModuleUtils.hardpoints(s.maxClass >= 2 ? '2m' : '2l'))
+      ship.use(s, ModuleUtils.hardpoints(s.maxClass >= 2 ? '2m' : '2l'));
-      miningLaserCount--
+      miningLaserCount--;
     } else {
-      ship.use(s, null)
+      ship.use(s, null);
     }
   }
 
   // Number of collector limpets required to be active is a function of the size of the ship and the power of the lasers
   const miningLaserDps = ship.hardpoints.filter(h => h.m != null)
-    .reduce(function (a, b) {
+    .reduce(function(a, b) {
-      return a + b.m.getDps()
+      return a + b.m.getDps();
-    }, 0)
+    }, 0);
   // Find out how many internal slots we have, and their potential cargo size
   const potentialCargo = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.cr)
-    .map(b => Math.pow(2, b.maxClass))
+    .map(b => Math.pow(2, b.maxClass));
   // One collector for each 1.25 DPS, multiply by 1.25 for medium ships and 1.5 for large ships as they have further to travel
   // 0 if we only have 1 cargo slot, otherwise minium of 1 and maximum of 6 (excluding size modifier)
-  const sizeModifier = ship.class == 2 ? 1.2 : ship.class == 3 ? 1.5 : 1
+  const sizeModifier = ship.class == 2 ? 1.2 : ship.class == 3 ? 1.5 : 1;
-  let collectorLimpetsRequired = potentialCargo.length == 1 ? 0 : Math.ceil(sizeModifier * Math.min(6, Math.floor(miningLaserDps / 1.25)))
+  let collectorLimpetsRequired = potentialCargo.length == 1 ? 0 : Math.ceil(sizeModifier * Math.min(6, Math.floor(miningLaserDps / 1.25)));
 
   if (collectorLimpetsRequired > 0) {
-    const collectorOrder = [1, 2, 3, 4, 5, 6, 7, 8]
+    const collectorOrder = [1, 2, 3, 4, 5, 6, 7, 8];
     const collectorInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
       .filter(a => (!a.eligible) || a.eligible.cc)
-      .sort((a, b) => collectorOrder.indexOf(a.maxClass) - collectorOrder.indexOf(b.maxClass))
+      .sort((a, b) => collectorOrder.indexOf(a.maxClass) - collectorOrder.indexOf(b.maxClass));
     // Always keep at least 2 slots free for cargo racks (1 for shielded)
     for (let i = 0; i < collectorInternals.length - (shielded ? 1 : 2) && collectorLimpetsRequired > 0; i++) {
       if (canMount(ship, collectorInternals[i], 'cc')) {
         // Collector only has odd classes
-        const collectorClass = collectorInternals[i].maxClass % 2 === 0 ? collectorInternals[i].maxClass - 1 : collectorInternals[i].maxClass
+        const collectorClass = collectorInternals[i].maxClass % 2 === 0 ? collectorInternals[i].maxClass - 1 : collectorInternals[i].maxClass;
-        ship.use(collectorInternals[i], ModuleUtils.findInternal('cc', collectorClass, 'D'))
+        ship.use(collectorInternals[i], ModuleUtils.findInternal('cc', collectorClass, 'D'));
-        usedSlots.push(collectorInternals[i])
+        usedSlots.push(collectorInternals[i]);
-        collectorLimpetsRequired -= collectorInternals[i].m.maximum
+        collectorLimpetsRequired -= collectorInternals[i].m.maximum;
       }
     }
   }
 
   // Power distributor to power the mining lasers indefinitely
   const wepRateRequired = ship.hardpoints.filter(h => h.m != null)
-    .reduce(function (a, b) {
+    .reduce(function(a, b) {
-      return a + b.m.getEps()
+      return a + b.m.getEps();
-    }, 0)
+    }, 0);
-  standardOpts.pd = ship.getAvailableModules().matchingPowerDist({weprate: wepRateRequired}).id
+  standardOpts.pd = ship.getAvailableModules().matchingPowerDist({ weprate: wepRateRequired }).id;
 
   // Fill the empty internals with cargo racks
   for (let i = ship.internal.length; i--;) {
-    let slot = ship.internal[i]
+    let slot = ship.internal[i];
     if (usedSlots.indexOf(slot) == -1 && canMount(ship, slot, 'cr')) {
-      ship.use(slot, ModuleUtils.findInternal('cr', slot.maxClass, 'E'))
+      ship.use(slot, ModuleUtils.findInternal('cr', slot.maxClass, 'E'));
     }
   }
 
-  ship.useLightestStandard(standardOpts)
+  ship.useLightestStandard(standardOpts);
 }
 
 /**
  * Racer Role
  * @param  {Ship} ship         Ship instance
  */
-export function racer (ship) {
+export function racer(ship) {
   let standardOpts = {},
       usedSlots = [],
       sgSlot,
-    sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass)
+      sg = ship.getAvailableModules().lightestShieldGenerator(ship.hullMass);
 
   // Cargo hatch can be disabled
-  ship.setSlotEnabled(ship.cargoHatch, false)
+  ship.setSlotEnabled(ship.cargoHatch, false);
 
   // Shield generator
-  const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8]
+  const shieldOrder = [1, 2, 3, 4, 5, 6, 7, 8];
   const shieldInternals = ship.internal.filter(a => usedSlots.indexOf(a) == -1)
     .filter(a => (!a.eligible) || a.eligible.sg)
     .filter(a => a.maxClass >= sg.class)
-    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass))
+    .sort((a, b) => shieldOrder.indexOf(a.maxClass) - shieldOrder.indexOf(b.maxClass));
   for (let i = 0; i < shieldInternals.length; i++) {
     if (canMount(ship, shieldInternals[i], 'sg')) {
-      ship.use(shieldInternals[i], sg)
+      ship.use(shieldInternals[i], sg);
-      usedSlots.push(shieldInternals[i])
+      usedSlots.push(shieldInternals[i]);
-      sgSlot = shieldInternals[i]
+      sgSlot = shieldInternals[i];
-      break
+      break;
     }
   }
 
   // Empty the hardpoints
   for (let s of ship.hardpoints) {
-    ship.use(s, null)
+    ship.use(s, null);
   }
 
   // Empty the internals
   for (let i = ship.internal.length; i--;) {
-    let slot = ship.internal[i]
+    let slot = ship.internal[i];
     if (usedSlots.indexOf(slot) == -1) {
-      ship.use(slot, null)
+      ship.use(slot, null);
     }
   }
 
   // Best thrusters
   if (ship.standard[1].maxClass === 3) {
-    standardOpts.th = 'tz'
+    standardOpts.th = 'tz';
   } else if (ship.standard[1].maxClass === 2) {
-    standardOpts.th = 'u0'
+    standardOpts.th = 'u0';
   } else {
-    standardOpts.th = ship.standard[1].maxClass + 'A'
+    standardOpts.th = ship.standard[1].maxClass + 'A';
   }
 
   // Best power distributor for more boosting
-  standardOpts.pd = ship.standard[4].maxClass + 'A'
+  standardOpts.pd = ship.standard[4].maxClass + 'A';
 
   // Smallest possible FSD drive
-  standardOpts.fsd = '2D'
+  standardOpts.fsd = '2D';
   // Minimal fuel tank
-  standardOpts.ft = '1C'
+  standardOpts.ft = '1C';
 
   // Disable nearly everything
-  standardOpts.fsdDisabled = true
+  standardOpts.fsdDisabled = true;
-  standardOpts.sDisabled = true
+  standardOpts.sDisabled = true;
-  standardOpts.pdDisabled = true
+  standardOpts.pdDisabled = true;
-  standardOpts.lsDisabled = true
+  standardOpts.lsDisabled = true;
 
-  ship.useLightestStandard(standardOpts)
+  ship.useLightestStandard(standardOpts);
 
   // Apply engineering to each module
   // ship.standard[1].m.blueprint = getBlueprint('Engine_Dirty', ship.standard[0]);