Merge pull request #821 from Brighter-Applications/develop

Develop

.babelrc

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

.dockerignore

@@ -1,77 +1,7 @@
+Dockerfile
+.dockerignore
+.gitignore
+README.md
+
+build
 node_modules
-npm-debug.log
-### Node template
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-

.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

.gitlab-ci.yml

@@ -1,13 +0,0 @@
-image: docker:stable
-services:
-  - docker:dind
-
-stages:
-  - Build image
-
-docker build:
-  stage: Build image
-  script:
-  - img build --build-arg branch=$CI_COMMIT_REF_NAME -t edcd/coriolis:$CI_COMMIT_REF_NAME .
-  - echo "$REGISTRY_PASSWORD" | img login --username "$REGISTRY_USER" --password-stdin
-  - img push edcd/coriolis:$CI_COMMIT_REF_NAME

.travis.yml

@@ -1,16 +0,0 @@
-language: node_js
-notifications:
-  email: false
-sudo: false
-node_js:
-  - "4.8.1"
-cache:
-  directories:
-    - node_modules
-
-before_install:
-  - git clone https://github.com/EDCD/coriolis-data.git ../coriolis-data
-
-script:
-  - npm run lint
-  - npm test

Dockerfile

@@ -1,35 +1,25 @@
-### STAGE 1: Build ###
-FROM node:9.11.1-alpine as builder
-ARG branch=develop
-ENV BRANCH=$branch
-WORKDIR /src/app
-RUN mkdir -p /src/app/coriolis
-RUN mkdir -p /src/app/coriolis-data
+#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 .
 
-RUN apk add --update git
+FROM node:18-alpine
 
-COPY . /src/app/coriolis
+# 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/
 
-RUN npm i -g npm
+# Git is required before install if any modules (like coriolis-data) are loaded from github
+RUN apk update
+RUN apk add git
 
-# Set up coriolis-data
-WORKDIR /src/app/coriolis-data
-RUN git clone https://github.com/EDCD/coriolis-data.git .
-RUN git checkout ${BRANCH}
-RUN npm install --no-package-lock
-RUN npm start
+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)
 
-# Set up coriolis
-WORKDIR /src/app/coriolis
-RUN git checkout ${BRANCH}
-RUN npm install --no-package-lock
-RUN npm run build
-
-
-### STAGE 2: Production Environment ###
-FROM fholzer/nginx-brotli as web
-COPY nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder /src/app/coriolis/build /usr/share/nginx/html
-WORKDIR /usr/share/nginx/html
-EXPOSE 80
-CMD ["nginx", "-c", "/etc/nginx/nginx.conf", "-g", "daemon off;"]
+# Optimally, this will start a static asset server like nginx/apache. Currently, this will start dev webpack server.
+CMD ["npm", "start"]
+EXPOSE 3300

Dockerfile-dev

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

Dockerfile-local-prod

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

README.md

@@ -1,60 +1,57 @@
-![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
 
-The Coriolis project was inspired by [E:D Shipyard](http://www.edshipyard.com/) and, of course, [Elite Dangerous](http://www.elitedangerous.com). 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.
+The Coriolis project was inspired by E:D Shipyard and, of course, [Elite Dangerous](http://www.elitedangerous.com). 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.
 
 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 and no employee of Frontier Developments was involved in the making of it.
 
 ## 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.
-
-### Translations
-
-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)!
+- [Submit issues](https://github.com/EDCD/coriolis/issues)
+- [Submit pull requests](https://github.com/EDCD/coriolis/pulls) targetting `develop` branch
+- 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
+```
 
-Also see [the documentation site.](https://coriolis.willb.info/)
+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.
 
-You can find hosted and compiled versions of these data-jsons under https://coriolis.io/data/ and https://beta.coriolis.io/data/.
-You might want to load these as depedency instead of reyling on the npm-dependency.
+## 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
-[terms and conditions](https://www.frontierstore.net/terms-and-conditions/).
+```sh
+> 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
-
-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.
+After this you need to serve the files in some manner.
+Either configure your webserver to make the actual `build/` directory
+visible on the web, or alternatively copy it to somewhere to serve it
+from.

__tests__/fixtures/expected-builds.json

@@ -1,50 +1,50 @@
 {
   "type_6_transporter": {
-    "Cargo": "A0p0tdFal8d8s8f4-----04040303430101.Iw1/kA==.Aw1/kA==.",
-    "Miner": "A0p5tdFal8d8s8f42l2l---040403451q0101.Iw1/kA==.Aw1/kA==.",
-    "Hopper": "A0p0tdFal8d0s8f41717---030302024300-.Iw1/kA==.Aw1/kA==."
+    "Cargo": "A0p0tdFal8d8s8f4-----04040303430101-.Iw18UA==.Aw18UA==.",
+    "Miner": "A0p5tdFal8d8s8f42l2l---040403451q0101-.Iw18UA==.Aw18UA==.",
+    "Hopper": "A0p0tdFal8d0s8f41717---030302024300--.Iw18UA==.Aw18UA==."
   },
   "type_7_transport": {
-    "Cargo": "A0p0tiFfliddsdf5--------0505040403480101.Iw18aQ==.Aw18aQ==.",
-    "Miner": "A0pdtiFflid8sdf5--2l2l----0505041v03450000.Iw18aQ==.Aw18aQ==."
+    "Cargo": "A0p0tiFfliddsdf5--------0505040403480101--.Iw18eQ==.Aw18eQ==.",
+    "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==.",
-    "Dream": "A2pktkFflndpskf40v0v0s0s0404040n4k5n5d2b29292o-.AwRj4yWU1I==.CwBhCYy6YRigzLIA.",
-    "Current": "A0patkFflndfskf4----------------.AwRj4yWU1I==.CwBhCYy6YRigzLIA."
+    "Cargo": "A0p5tiFflndisnf4--0s0s----0605450302020101-.Iw18WQ==.Aw18WQ==.",
+    "Dream": "A2pktkFflndpskf40v0v0s0s0404040n4k5n5d2b29292o--.AwRj4yWU1Yg=.CwBhCYy6YRigzPIA.",
+    "Current": "A0patkFflndfskf4-----------------.AwRj4yWU1Yg=.CwBhCYy6YRigzPIA."
   },
   "type_9_heavy": {
-    "Current": "A0patsFklndnsif6---------0706054a0303020224.AwRj4yoo.EwBhEYy6dsg=."
+    "Current": "A0patsFklndnsif6---------0706054a0303020224--.AwRj4yo5iA==.EwBhEYy6d6g=."
   },
   "python": {
-    "Cargo": "A0patnFflidsssf5---------050505040448020201.Iw18eQ==.Aw18eQ==.",
-    "Miner": "A0pktkFflidpspf50v0v0v2m2m0404--050505Ce4a1v02022o.Iw18eQ==.IwBhBYy6dkCYg===.",
-    "Dream": "A2pptkFfliduspf50v0v0v27270404040m5n5n4f2d2d032t0201.Iw1+gDBxA===.EwBhEYy6e0WEA===.",
-    "Missile": "A0pttoFjljdystf52f2g2d2ePh----04044j03---002h.Iw18eQ==.Aw18eQ==."
+    "Cargo": "A0patnFflidsssf5---------050505040448020201-.Iw18eAMQ.Aw18RQ==.",
+    "Miner": "A0pktkFflidpspf50v0v0v2m2m0404--050505Ce4a1v02022o-.Iw18eAMQ.IwBhBYy6dkCYRA==.",
+    "Dream": "A2pptkFfliduspf50v0v0v27270404040m5n5n4f2d2d032t0201-.Iw1+gDByUA==.EwBhEYy6e0VEA===.",
+    "Missile": "A0pttoFjljdystf52f2g2d2ePh----04044j03---00--.Iw18eAMQ.Aw18RQ==."
   },
   "anaconda": {
-    "Dream": "A4putpFklndzsuf52c0o0o0o1m1m0q0q0404040l0b0100004k5n5n112d2d04-0303326b.AwRj4yo5dyg=.MwBhCYy6duvARiA=.",
-    "Cargo": "A0patnFklndnsxf5----------------06050505040404-45030301.Iw18ZVA=.Aw18ZVA=.",
-    "Current": "A0patnFklndksxf5----------------06050505040404-03034524.Iw18ZVA=.Aw18ZVA=.",
-    "Explorer": "A0patnFklndksxf5--------0202------f7050505040s37-2f2i4524.AwRj4yVKJ9hA.AwhMIyumQRhEA===.",
-    "Test": "A4putkFklkdzsuf52c0o0o0o1m1m0q0q0404-0l0b0100034k5n052d04---0303326b.Iw18ZVA=.Aw18ZVA=."
+    "Dream": "A4putpFklndzsuf52c0o0o0o1m1m0q0q0404040l0b0100004k5n5n112d2d04-0303326b-.AwRj4yo5dzhA.MwBhCYy6duvARhEA.",
+    "Cargo": "A0patnFklndnsxf5----------------06050505040404-45030301-.Iw18ZUAxA===.Aw18ZXEA.",
+    "Current": "A0patnFklndksxf5----------------06050505040404-03034524-.Iw18ZUAxA===.Aw18ZXEA.",
+    "Explorer": "A0patnFklndksxf5--------0202------f7050505040s37--2i4524-.AwRj4yVKJ9jCA===.AwhMIyumQRgkA===.",
+    "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(),
-    closeMenu: jest.genMockFunction(),
-    showModal: jest.genMockFunction(),
-    hideModal: jest.genMockFunction(),
-    tooltip: jest.genMockFunction(),
-    termtip: jest.genMockFunction(),
-    onWindowResize: jest.genMockFunction()
+    openMenu: jest.fn(),
+    closeMenu: jest.fn(),
+    showModal: jest.fn(),
+    hideModal: jest.fn(),
+    tooltip: jest.fn(),
+    termtip: jest.fn(),
+    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]);
+        }
+      }
+    });
+  });
 });

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

docker-compose.yml

@@ -1,56 +0,0 @@
-version: '2.2'
-
-services:
-  coriolis_prod:
-    image: edcd/coriolis:master
-    build:
-      dockerfile: Dockerfile
-      args:
-        branch: master
-    restart: always
-    volumes:
-    - ./nginx.conf:/etc/nginx/nginx.conf
-    networks:
-    - web
-    labels:
-    - "traefik.docker.network=web"
-    - "traefik.enable=true"
-    - "traefik.basic.frontend.rule=Host:coriolis.io,coriolis.edcd.io"
-    - "traefik.basic.port=80"
-    - "traefik.basic.protocol=http"
-
-  coriolis_dev:
-    image: edcd/coriolis:develop
-    build:
-      dockerfile: Dockerfile
-      args:
-        branch: develop
-    restart: always
-    volumes:
-      - ./nginx.conf:/etc/nginx/nginx.conf
-    networks:
-    - web
-    labels:
-    - "traefik.docker.network=web"
-    - "traefik.enable=true"
-    - "traefik.basic.frontend.rule=Host:beta.coriolis.io,beta.coriolis.edcd.io"
-    - "traefik.basic.port=80"
-    - "traefik.basic.protocol=http"
-
-  coriolis_dw2:
-    image: edcd/coriolis:dw2
-    restart: always
-    volumes:
-      - ./nginx.conf:/etc/nginx/nginx.conf
-    networks:
-    - web
-    labels:
-    - "traefik.docker.network=web"
-    - "traefik.enable=true"
-    - "traefik.basic.frontend.rule=Host:dw2.coriolis.io"
-    - "traefik.basic.port=80"
-    - "traefik.basic.protocol=http"
-
-networks:
-  web:
-    external: true

nginx.conf

@@ -1,96 +0,0 @@
-worker_processes 1;
-user nobody nobody;
-error_log /tmp/error.log;
-pid /tmp/nginx.pid;
-
-events {
-
-	worker_connections 1024;
-}
-
-http {
-
-    include /etc/nginx/mime.types;
-    default_type application/octet-stream;
-    sendfile on;
-    client_body_temp_path /tmp/client_body;
-    fastcgi_temp_path /tmp/fastcgi_temp;
-    proxy_temp_path /tmp/proxy_temp;
-    scgi_temp_path /tmp/scgi_temp;
-    uwsgi_temp_path /tmp/uwsgi_temp;
-    access_log /tmp/access.log;
-    error_log /tmp/error.log;
-
-    # https://nginx.org/en/docs/http/ngx_http_gzip_module.html
-    # Enable gzip compression.
-    # Default: off
-    gzip off;
-
-    # Compression level (1-9).
-    # 5 is a perfect compromise between size and CPU usage, offering about
-    # 75% reduction for most ASCII files (almost identical to level 9).
-    # Default: 1
-    gzip_comp_level 5;
-
-    # Don't compress anything that's already small and unlikely to shrink much
-    # if at all (the default is 20 bytes, which is bad as that usually leads to
-    # larger files after gzipping).
-    # Default: 20
-    gzip_min_length 256;
-
-    # Compress data even for clients that are connecting to us via proxies,
-    # identified by the "Via" header (required for CloudFront).
-    # Default: off
-    gzip_proxied any;
-
-    # Tell proxies to cache both the gzipped and regular version of a resource
-    # whenever the client's Accept-Encoding capabilities header varies;
-    # Avoids the issue where a non-gzip capable client (which is extremely rare
-    # today) would display gibberish if their proxy gave them the gzipped version.
-    # Default: off
-    gzip_vary on;
-
-    # Compress all output labeled with one of the following MIME-types.
-    # text/html is always compressed by gzip module.
-    # Default: text/html
-    gzip_types *;
-    brotli on;
-    # brotli_static on;
-    brotli_types *;
-    # This should be turned on if you are going to have pre-compressed copies (.gz) of
-    # static files available. If not it should be left off as it will cause extra I/O
-    # for the check. It is best if you enable this in a location{} block for
-    # a specific directory, or on an individual server{} level.
-    # gzip_static on;
-	keepalive_timeout 3000;
-	server {
-		listen 80;
-		listen [::]:80;
-        index index.html;
-		server_name localhost;
-		root /usr/share/nginx/html;
-		autoindex on;
-
-		location ~* \.(?:manifest|appcache|html?|xml|json|css|js|map|jpg|jpeg|gif|png|ico|svg|eot|ttf|woff|woff2)$ {
-			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 /service-worker.js {
-		    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;
-		}
-		location /iframe.html {
-            try_files $uri $uri/ /iframe.html =404;
-        }
-	}
-}

package.json

@@ -1,14 +1,19 @@
 {
   "name": "coriolis_shipyard",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/EDCD/coriolis"
   },
   "homepage": "https://coriolis.io",
   "bugs": "https://github.com/EDCD/coriolis/issues",
+  "contributors": [
+    { "name": "cmdrmcdonald" },
+    { "name": "willb321" },
+    { "name": "felixlinker" }
+  ],
   "private": true,
-  "engine": "node >= 4.8.1",
+  "engine": "node >= 10.13.0",
   "license": "MIT",
   "scripts": {
     "extract-translations": "grep -hroE \"(translate\\('[^']+'\\))|(tip.bind\\(null, '[^']+')\" src/* | grep -oE \"'[^']+'\" | grep -oE \"[^']+\" | sort -u -f",
@@ -18,7 +23,8 @@
     "test": "jest",
     "prod-serve": "nginx -p $(pwd) -c nginx.conf",
     "prod-stop": "kill -QUIT $(cat nginx.pid)",
-    "build": "npm run clean && cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js",
+    "buildfresh": "rimraf node_modules && rm package-lock.json && npm install && npm run build > >(tee -a stdout.log) 2> >(tee -a stderr.log >&2)",
+    "build": "npm run clean && cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
     "rsync": "rsync -ae \"ssh -i $CORIOLIS_PEM\" --delete build/ $CORIOLIS_USER@$CORIOLIS_HOST:~/wwws",
     "deploy": "npm run lint && npm test && npm run build && npm run rsync"
   },
@@ -55,7 +61,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.0.0",
     "@babel/plugin-proposal-do-expressions": "^7.0.0",
@@ -74,15 +80,12 @@
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "appcache-webpack-plugin": "^1.4.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^4.5.2",
+    "copy-webpack-plugin": "^10.2.4",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^6.7.3",
     "d3-selection": "^1.3.2",
     "esdoc": "^1.1.0",
     "esdoc-custom-theme": "^1.4.2",
@@ -93,56 +96,66 @@
     "esdoc-standard-plugin": "^1.0.0",
     "eslint": "^5.6.0",
     "eslint-plugin-react": "^7.11.1",
-    "expose-loader": "^0.7.5",
-    "express": "^4.16.3",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^2.0.0",
-    "html-webpack-plugin": "^3.0.7",
-    "jest-cli": "^23.6.0",
-    "jsen": "^0.6.4",
+    "expose-loader": "^3.1.0",
+    "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.0",
+    "jsen": "^0.6.6",
     "json-loader": "^0.5.4",
     "less": "^3.8.1",
-    "less-loader": "^4.1.0",
-    "react-addons-perf": "^15.4.2",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "react-container-dimensions": "^1.4.1",
-    "react-testutils-additions": "^16.0.0",
+    "react-testutils-additions": "^15.0.0",
     "react-transition-group": "^2.5.0",
-    "rimraf": "^2.6.1",
-    "rollup": "^0.66.2",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "style-loader": "^0.23.0",
-    "uglify-js": "^3.4.9",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.20.2",
-    "webpack-bugsnag-plugins": "^1.2.2",
-    "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.9",
-    "webpack-notifier": "^1.6.0",
-    "workbox-webpack-plugin": "^3.6.1"
+    "rimraf": "^4.1.2",
+    "rollup": "^3.17.2",
+    "style-loader": "^3.3.1",
+    "uglify-js": "^3.17.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0",
+    "webpack-notifier": "^1.15.0",
+    "workbox-cacheable-response": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4",
+    "workbox-webpack-plugin": "^6.5.4"
   },
   "sideEffects": false,
   "dependencies": {
-    "@babel/polyfill": "^7.0.0",
-    "auto-bind": "^2.1.1",
+    "assert": "^1.5.0",
+    "auto-bind": "^5.0.1",
+    "base64url": "^3.0.1",
     "browserify-zlib-next": "^1.0.1",
+    "buffer": "^5.7.0",
     "classnames": "^2.2.6",
+    "constants-browserify": "^1.0.0",
+    "core-js": "^3.28.0",
     "coriolis-data": "../coriolis-data",
+    "crypto-browserify": "^3.12.0",
     "d3": "^5.7.0",
     "detect-browser": "^3.0.1",
-    "ed-forge": "github:EDCD/ed-forge",
     "fbemitter": "^2.1.1",
+    "https-browserify": "^1.0.0",
     "lodash": "^4.17.11",
     "lz-string": "^1.4.4",
-    "pako": "^1.0.6",
+    "os-browserify": "^0.3.0",
+    "pako": "^2.1.0",
+    "path-browserify": "^1.0.1",
     "prop-types": "^15.6.2",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-extras": "^0.7.1",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
     "react-fuzzy": "^0.5.2",
     "react-ga": "^2.5.3",
     "react-number-editor": "^4.0.3",
     "recharts": "^1.2.0",
-    "register-service-worker": "^1.5.2",
-    "superagent": "^3.8.3"
+    "register-service-worker": "^1.7.2",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "superagent": "^3.8.3",
+    "url": "^0.11.0",
+    "vm-browserify": "^1.1.2"
   }
 }

rollup.config.js

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

src/.htaccess

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

src/app/Coriolis.jsx

@@ -5,14 +5,16 @@ import { register } from 'register-service-worker';
 import { EventEmitter } from 'fbemitter';
 import { getLanguage } from './i18n/Language';
 import Persist from './stores/Persist';
-import { Ship } from 'ed-forge';
 
 import Announcement from './components/Announcement';
 import Header from './components/Header';
 import Tooltip from './components/Tooltip';
+import ModalExport from './components/ModalExport';
 import ModalHelp from './components/ModalHelp';
 import ModalImport from './components/ModalImport';
 import ModalPermalink from './components/ModalPermalink';
+import * as CompanionApiUtils from './utils/CompanionApiUtils';
+import * as JournalUtils from './utils/JournalUtils';
 import AboutPage from './pages/AboutPage';
 import NotFoundPage from './pages/NotFoundPage';
 import OutfittingPage from './pages/OutfittingPage';
@@ -20,6 +22,8 @@ import ComparisonPage from './pages/ComparisonPage';
 import ShipyardPage from './pages/ShipyardPage';
 import ErrorDetails from './pages/ErrorDetails';
 
+
+const zlib = require('pako');
 const request = require('superagent');
 
 /**
@@ -58,17 +62,18 @@ export default class Coriolis extends React.Component {
     this._onLanguageChange = this._onLanguageChange.bind(this);
     this._onSizeRatioChange = this._onSizeRatioChange.bind(this);
     this._keyDown = this._keyDown.bind(this);
+    this._importBuild = this._importBuild.bind(this);
 
     this.emitter = new EventEmitter();
     this.state = {
       noTouch: !('ontouchstart' in window || navigator.msMaxTouchPoints || navigator.maxTouchPoints),
       page: null,
-      announcements: [],
+      // Announcements must have an expiry date in format "YYYY-MM-DDTHH:MM:SSZ"
+      announcements: [{expiry: "2025-04-10T00:00:00Z", text: "Corsair added"}],
       language: getLanguage(Persist.getLangCode()),
       route: {},
       sizeRatio: Persist.getSizeRatio()
     };
-    this._getAnnouncements();
     Router('', (r) => this._setPage(ShipyardPage, r));
     Router('/import?', (r) => this._importBuild(r));
     Router('/import/:data', (r) => this._importBuild(r));
@@ -89,22 +94,44 @@ export default class Coriolis extends React.Component {
   _importBuild(r) {
     try {
       // Need to decode and gunzip the data, then build the ship
-      let ship = new Ship(r.params.data);
-      r.params.ship = ship.getShipType();
-      r.params.code = ship.compress();
-      this._setPage(OutfittingPage, r);
+      const data = zlib.inflate(new Buffer.from(r.params.data, 'base64'), { to: 'string' });
+      const json = JSON.parse(data);
+      console.info('Ship import data: ');
+      console.info(json);
+      let ship, importString;
+      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.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);
-    }
-  }
+      const fullUrl = window.location.href;
 
-  async _getAnnouncements() {
-    try {
-      const announces = await request.get('https://orbis.zone/api/announcement')
-        .query({ showInCoriolis: true });
-      this.setState({ announcements: announces.body });
-    } catch (err) {
-      console.error(err)
+      if (fullUrl.length >= 2083) {
+        err = 'URL Length = ' + fullUrl.length;
+        this._onError('Failed to import ship - Potential URL Length issue', r.path, 0, 0, err);
+      }
+      else {
+        this._onError('Failed to import ship - Unknown Reason', r.path, 0, 0, err);
+      }
     }
   }
 
@@ -131,13 +158,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,
@@ -381,18 +401,18 @@ export default class Coriolis extends React.Component {
    */
   render() {
     let currentMenu = this.state.currentMenu;
-
     return <div style={{ minHeight: '100%' }} onClick={this._closeMenu}
                 className={this.state.noTouch ? 'no-touch' : null}>
       <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate}
               currentMenu={currentMenu}/>
       <div className="announcement-container">{this.state.announcements.map(a => <Announcement
-        text={a.message}/>)}</div>
+        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" rel="noopener noreferrer"
              title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>

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

src/app/components/Announcement.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { autoBind } from 'react-extras';
+import autoBind from 'auto-bind';
 
 /**
  * Announcement component
  */
 export default class Announcement extends React.Component {
+
   static propTypes = {
     text: PropTypes.string
   };
@@ -26,4 +27,5 @@ export default class Announcement extends React.Component {
   render() {
     return <div className="announcement" >{this.props.text}</div>;
   }
+
 }

src/app/components/AvailableModulesMenu.jsx

@@ -1,20 +1,129 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+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';
-import { getModuleInfo } from 'ed-forge/lib/data/items';
-import { groupBy, mapValues, sortBy } from 'lodash';
-import autoBind from 'auto-bind';
 
 const PRESS_THRESHOLD = 500; // mouse/touch down threshold
 
-const MOUNT_MAP = {
-  fixed: <MountFixed className={'lg'} />,
-  gimbal: <MountGimballed className={'lg'} />,
-  turret: <MountTurret className={'lg'} />,
+/*
+ * Categorisation of module groups
+ */
+const GRPCAT = {
+  'sg': 'shields',
+  'bsg': 'shields',
+  'psg': 'shields',
+  'scb': 'shields',
+  'cc': 'limpet controllers',
+  'fx': 'limpet controllers',
+  'hb': 'limpet controllers',
+  'mlc': 'limpet controllers',
+  'pc': 'limpet controllers',
+  'rpl': 'limpet controllers',
+  'pce': 'passenger cabins',
+  'pci': 'passenger cabins',
+  'pcm': 'passenger cabins',
+  'pcq': 'passenger cabins',
+  'fh': 'hangars',
+  'pv': 'hangars',
+  'fs': 'fuel',
+  'ft': 'fuel',
+  'hr': 'structural reinforcement',
+  'mrp': 'structural reinforcement',
+  'bl': 'lasers',
+  'pl': 'lasers',
+  'ul': 'lasers',
+  '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',
+  'ss': 'scanners',
+  // Utilities
+  'cs': 'scanners',
+  'kw': 'scanners',
+  'ws': 'scanners',
+  'xs': 'scanners',
+  'ch': 'defence',
+  'po': 'defence',
+  'ec': 'defence',
+  'sfn': 'defence',
+  // Guardian
+  'gpp': 'guardian',
+  'gpc': '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 = {
+  // Internals
+  'am': ['am'],
+  'cr': ['cr'],
+  'fi': ['fi'],
+  'fuel': ['ft', 'fs'],
+  'hangars': ['fh', 'pv'],
+  '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'],
+  'flight assists': ['dc', 'sua'],
+
+  // Hardpoints
+  'lasers': ['pl', 'ul', 'bl'],
+  'projectiles': ['mc', 'advmc', 'c', 'fc', 'pa', 'rg'],
+  'ordnance': ['mr', 'amr', 'tp', 'nl'],
+  // Utilities
+  'sb': ['sb'],
+  'hs': ['hs'],
+  'csl': ['csl'],
+  'defence': ['ch', 'po', 'ec'],
+  'scanners': ['sc', 'ss', 'cs', 'kw', 'ws'], // Overloaded with internal scanners
+  // Experimental
+  'experimental': ['axmc', 'axmce', 'axmr', 'axmre', 'ntp','rfl', 'tbrfl', 'tbsc', 'tbem', 'xs', 'sfn', 'rcpl', 'dtl', 'rsl', 'mahr',],
+  'weapon stabilizers': ['ews'],
+  // Guardian
+  'guardian': ['gpp', 'gpd', 'gpc', 'ggc', 'gsrp', 'gfsb', 'ghrp', 'gmrp', 'gsc'],
+
+  'mining': ['ml', 'scl', 'pwa', 'sdm', 'abl'],
 };
 
 /**
@@ -22,11 +131,15 @@ const MOUNT_MAP = {
  */
 export default class AvailableModulesMenu extends TranslatedComponent {
   static propTypes = {
+    modules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
     onSelect: PropTypes.func.isRequired,
     diffDetails: PropTypes.func,
-    hideSearch: PropTypes.bool,
     m: PropTypes.object,
+    ship: PropTypes.object.isRequired,
     warning: PropTypes.func,
+    firstSlotId: PropTypes.string,
+    lastSlotId: PropTypes.string,
+    activeSlotId: PropTypes.string,
     slotDiv: PropTypes.object
   };
 
@@ -37,8 +150,10 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    autoBind(this);
+    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.
   }
 
   /**
@@ -48,173 +163,278 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    * @return {Object}         list: Array of React Components, currentGroup Component if any
    */
   _initState(props, context) {
-    const { translate } = context.language;
-    const { m } = props;
-    const list = [], fuzzy = [];
-    let currentGroup;
+    let translate = context.language.translate;
+    let { m, warning, onSelect, modules, ship } = props;
+    let list, currentGroup;
 
-    const modules = m.getApplicableItems().map(getModuleInfo);
-    const groups = mapValues(
-      groupBy(modules, (info) => info.meta.group),
-      (infos) => groupBy(infos, (info) => info.meta.type),
+    let buildGroup = this._buildGroup.bind(
+      this,
+      ship,
+      translate,
+      m,
+      warning,
+      (m, event) => {
+        this._hideDiff(event);
+        onSelect(m);
+      }
     );
-    // Build categories sorted by translated category name
-    const groupKeys = sortBy(Object.keys(groups), translate);
-    for (const group of groupKeys) {
-      const groupName = translate(group);
-      if (groupKeys.length > 1) {
-        list.push(<div key={`group-${group}`} className="select-category upp">{groupName}</div>);
+    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) {
+        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>);
       }
 
-      const categories = groups[group];
-      const categoryKeys = sortBy(Object.keys(categories), translate);
-      for (const category of categoryKeys) {
-        const categoryName = translate(category);
-        const infos = categories[category];
-        if (categoryKeys.length > 1) {
-          list.push(<div key={`category-${category}`} className="select-group cap">{categoryName}</div>);
+      // Need to regroup the modules by our own categorisation
+      let catmodules = {};
+      // Pre-create to preserve ordering
+      for (let cat in CATEGORIES) {
+        catmodules[cat] = [];
+      }
+      for (let g in modules) {
+        const moduleCategory = GRPCAT[g] || g;
+        const existing = catmodules[moduleCategory] || [];
+        catmodules[moduleCategory] = existing.concat(modules[g]);
+      }
+
+      for (let category in catmodules) {
+        let categoryHeader = false;
+        // Order through CATEGORIES if present
+        const categories = CATEGORIES[category] || [category];
+        if (categories && categories.length) {
+          for (let n in categories) {
+            const grp = categories[n];
+            // We now have the group and the category.  We might not have any modules, though...
+            if (modules[grp]) {
+              // Decide if we need a category header as well as a group header
+              if (categories.length === 1) {
+                // Show category header instead of group header
+                if (m && grp == m.grp) {
+                  // 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>);
+                } 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);
+              }
+            }
+          }
         }
-        list.push(
-          this._buildGroup(
-            m,
-            category,
-            infos,
-          ),
-        );
-        fuzzy.push(
-          ...infos.map((info) => {
-            const { meta } = info;
-            const mount = meta.mount ? ' ' + translate(meta.mount) : '';
-            return {
-              grp: groupName,
-              cat: categoryName,
-              m: info.proto.Item,
-              name: `${meta.class}${meta.rating}${mount} ${categoryName}`,
-            };
-          }),
-        );
       }
     }
-    return { list, currentGroup, fuzzy, trackingFocus: false };
+    let trackingFocus = false;
+    return { list, currentGroup, fuzzy, trackingFocus };
+  }
+
+  /**
+   * Return Is expiremental capacity reached
+   * @return {boolean}      Is experimental capacity reached
+   */
+  _experimentalCapacityReached() {
+    const ship = this.props.ship;
+    const ews = ship.internal.filter(o => o.m && o.m.grp === 'ews');
+    let expCap;
+
+    if(ews.length < 1){
+      expCap = 4;
+    } else{
+      expCap = ews[0].m.class == 3 ? 5 : 6;
+    }
+
+    return expCap <= this.props.ship.hardpoints.filter(o => o.m && o.m.experimental).length;
   }
 
   /**
    * Generate React Components for Module Group
+   * @param  {Ship} ship            Ship the selection is for
+   * @param  {Function} translate   Translate function
    * @param  {Object} mountedModule Mounted Module
-   * @param  {String} category      Category key
+   * @param  {Function} warningFunc Warning function
+   * @param  {function} onSelect    Select/Mount callback
+   * @param  {string} grp           Group name
    * @param  {Array} modules        Available modules
    * @return {React.Component}      Available Module Group contents
    */
-  _buildGroup(mountedModule, category, modules) {
-    const { warning } = this.props;
-    const ship = mountedModule.getShip();
-    const classMapping = groupBy(modules, (info) => info.meta.class);
+  _buildGroup(ship, translate, mountedModule, warningFunc, onSelect, grp, modules) {
+    let prevClass = null, prevRating = null, prevName;
+    let elems = [];
 
-    const itemsPerClass = Math.max(
-      ...Object.values(classMapping).map((l) => l.length),
-    );
-    const itemsPerRow = itemsPerClass <= 2 ? 6 : itemsPerClass;
-    // Nested array of <li> elements; will be flattened before being rendered.
-    // Each sub-array represents one row in the final view.
-    const elems = [[]];
+    const sortedModules = modules.sort(this._moduleOrder);
 
-    // Reverse sort for descending order of module class
-    for (const clazz of Object.keys(classMapping).sort().reverse()) {
-      for (let info of sortBy(
-        classMapping[clazz],
-        (info) => info.meta.mount || info.meta.rating,
-      )) {
-        const { meta } = info;
-        const { Item } = info.proto;
+    // Calculate the number of items per class.  Used so we don't have long lists with only a few items in each row
+    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => {
+      count[cls] = ++count[cls] || 1;
+      return count;
+    }, {});
+    const itemsPerClass = Math.max.apply(null, Object.keys(tmp).map(key => tmp[key]));
 
-        // Can only be true if shieldgenmaximalmass is defined, i.e. this
-        // module must be a shield generator
-        let disabled = info.props.shieldgenmaximalmass < ship.readProp('hullmass');
-        if (meta.experimental && !mountedModule.readMeta('experimental')) {
-          disabled =
-            4 <=
-            ship.getHardpoints().filter((m) => m.readMeta('experimental'))
-              .length;
-        }
-
-        // Default event handlers for objects that are disabled
-        let eventHandlers = {};
-        if (!disabled) {
-          const showDiff = this._showDiff.bind(this, mountedModule, info);
-          const select = (event) => {
-            this._hideDiff(event);
-            this.props.onSelect(Item);
-          };
-
-          eventHandlers = {
-            onMouseEnter: this._over.bind(this, showDiff),
-            onTouchStart: this._touchStart.bind(this, showDiff),
-            onTouchEnd: this._touchEnd.bind(this, select),
-            onMouseLeave: this._hideDiff,
-            onClick: select,
-          };
-        }
-
-        const mountSymbol = MOUNT_MAP[meta.mount];
-        const li = (
-          <li key={Item} data-id={Item}
-            ref={Item === mountedModule.getItem() ? (ref) => { this.activeSlotRef = ref; } : undefined}
-            className={cn('c', {
-              warning: !disabled && warning && warning(info),
-              active: mountedModule.getItem() === Item,
-              disabled,
-              hardpoint: mountSymbol,
-            })}
-            {...eventHandlers}
-          >{mountSymbol}{meta.class}{meta.rating}</li>
-        );
-
-        const tail = elems.pop();
-        let newTail = [tail];
-        if (tail.length < itemsPerRow) {
-          // If the row has not grown too long, the new <li> element can be
-          // added to the row itself
-          tail.push(li);
-        } else {
-          // Otherwise, the last row gets a line break element added and this
-          // item is put into a new row
-          tail.push(<br key={elems.length}/>);
-          newTail.push([li]);
-        }
-        elems.push(...newTail);
+    let itemsOnThisRow = 0;
+    for (let i = 0; i < sortedModules.length; i++) {
+      let m = sortedModules[i];
+      // If m.grp is mh or mm, or m.symbol contains 'Missing' skip it
+      if (m.grp == 'mh' || m.grp == 'mm' || (typeof(m.symbol) !== 'undefined' && m.symbol.includes("Missing"))) {
+        // If this is a missing module, skip it
+        continue;
       }
-    }
+      let mount = null;
+      let disabled = false;
+      prevName = m.name;
+      if (ModuleUtils.isShieldGenerator(m.grp)) {
+        // Shield generators care about maximum hull mass
+        disabled = ship.hullMass > m.maxmass;
+      // If the mounted module is experimental as well, we can replace it so
+      // the maximum does not apply
+      } else if (m.experimental && (!mountedModule || !mountedModule.experimental)) {
+        disabled = 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', {
+        warning: !disabled && warningFunc && warningFunc(m),
+        active,
+        disabled
+      });
+      let eventHandlers;
 
-    return <ul key={'ul' + category}>{[].concat(...elems)}</ul>;
+      if (disabled) {
+        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);
+
+        eventHandlers = {
+          onMouseEnter: this._over.bind(this, showDiff),
+          onTouchStart: this._touchStart.bind(this, showDiff),
+          onTouchEnd: this._touchEnd.bind(this, select),
+          onMouseLeave: this._hideDiff,
+          onClick: select,
+          onKeyDown: this._keyDown.bind(this, select),
+          onKeyUp: this._keyUp.bind(this, select)
+        };
+      }
+
+      switch (m.mount) {
+        case 'F':
+          mount = <MountFixed className={'lg'}/>;
+          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}/>);
+        itemsOnThisRow = 0;
+      }
+      let tbIdx = (classes.indexOf('disabled') < 0) ? 0 : undefined;
+      elems.push(
+        <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>;
   }
 
   /**
    * Generate tooltip content for the difference between the
    * mounted module and the hovered modules
-   * @param  {Object} mountedModule    The module mounted currently
-   * @param  {Object} hoveringModule     The hovered module
+   * @param  {Object} mm    The module mounet currently
+   * @param  {Object} m     The hovered module
    * @param  {DOMRect} rect DOMRect for target element
    */
-  _showDiff(mountedModule, hoveringModule, rect) {
+  _showDiff(mm, m, rect) {
     if (this.props.diffDetails) {
       this.touchTimeout = null;
-      // TODO:
-      // this.context.tooltip(
-      //   this.props.diffDetails(hoveringModule, mountedModule),
-      //   rect,
-      // );
+      this.context.tooltip(this.props.diffDetails(m, mm), rect);
     }
   }
 
   /**
    * Generate tooltip content for the difference between the
    * mounted module and the hovered modules
-   * @returns {React.Component} Search component if available
    */
   _showSearch() {
-    if (this.props.hideSearch) {
+    if (this.props.modules instanceof Array) {
       return;
     }
+    const mountedModule = this.props.m;
     return (
       <FuzzySearch
         list={this.state.fuzzy}
@@ -226,11 +446,20 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         onSelect={e => this.props.onSelect.bind(null, e.m)()}
         resultsTemplate={(props, state, styles, clickHandler) => {
           return state.results.map((val, i) => {
+            let disabled;
+
+            if(val.m.experimental && (!mountedModule || !mountedModule.experimental)) {
+              disabled = this._experimentalCapacityReached();
+            } else{
+              disabled = false;
+            }
+            const handler = disabled ? null : () => clickHandler(i);
+
             return (
               <div
                 key={i}
-                className={'lc'}
-                onClick={() => clickHandler(i)}
+                className={cn('lc', {disabled})}
+                onClick={handler}
               >
                 {val.name}
               </div>
@@ -275,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
@@ -285,12 +549,69 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     this.context.tooltip();
   }
 
+  /**
+   * Order two modules suitably for display in module selection
+   * @param  {Object} a the first module
+   * @param  {Object} b the second module
+   * @return {int}      -1 if the first module should go first, 1 if the second module should go first
+   */
+  _moduleOrder(a, b) {
+    // Named modules go last
+    if (!a.name && b.name) {
+      return -1;
+    }
+    if (a.name && !b.name) {
+      return 1;
+    }
+    // Class ordered from highest (8) to lowest (1)
+    if (a.class < b.class) {
+      return 1;
+    }
+    if (a.class > b.class) {
+      return -1;
+    }
+    // Mount type, if applicable
+    if (a.mount && b.mount && a.mount !== b.mount) {
+      if (a.mount === 'F' || (a.mount === 'G' && b.mount === 'T')) {
+        return -1;
+      } else {
+        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;
+    }
+    if (a.rating > b.rating) {
+      return 1;
+    }
+    // Do not attempt to order by name at this point, as that mucks up the order of armour
+    return 0;
+  }
+
   /**
    * Scroll to mounted (if it exists) module group on mount
    */
   componentDidMount() {
-    if (this.activeSlotRef) {
-      this.activeSlotRef.focus();
+    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();
     }
   }
 
@@ -320,10 +641,10 @@ export default class AvailableModulesMenu extends TranslatedComponent {
   render() {
     return (
       <div ref={node => this.node = node}
-        className={cn('select', this.props.className)}
-        onScroll={this._hideDiff}
-        onClick={(e) => e.stopPropagation()}
-        onContextMenu={stopCtxPropagation}
+           className={cn('select', this.props.className)}
+           onScroll={this._hideDiff}
+           onClick={(e) => e.stopPropagation()}
+           onContextMenu={stopCtxPropagation}
       >
         {this._showSearch()}
         {this.state.list}

src/app/components/Boost.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import autoBind from 'auto-bind';
 
 /**
  * Boost displays a boost button that toggles bosot
@@ -9,6 +8,8 @@ import autoBind from 'auto-bind';
  */
 export default class Boost extends TranslatedComponent {
   static propTypes = {
+    marker: PropTypes.string.isRequired,
+    ship: PropTypes.object.isRequired,
     boost: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired
   };
@@ -18,9 +19,12 @@ export default class Boost extends TranslatedComponent {
    * @param  {Object} props   React Component properties
    * @param  {Object} context   React Component context
    */
-  constructor(props) {
+  constructor(props, context) {
     super(props);
-    autoBind(this);
+    const { ship, boost } = props;
+
+    this._keyDown = this._keyDown.bind(this);
+    this._toggleBoost = this._toggleBoost.bind(this);
   }
 
   /**
@@ -66,12 +70,13 @@ export default class Boost extends TranslatedComponent {
    * @return {React.Component} contents
    */
   render() {
-    const { translate } = this.context.language;
+    const { formats, translate, units } = this.context.language;
+    const { ship, boost } = this.props;
+
+    // TODO disable if ship cannot boost
     return (
       <span id='boost'>
-        <button id='boost' className={this.props.boost ? 'selected' : null} onClick={this._toggleBoost}>
-          {translate('boost')}
-        </button>
+        <button id='boost' className={boost ? 'selected' : null} onClick={this._toggleBoost}>{translate('boost')}</button>
       </span>
     );
   }

src/app/components/Cargo.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import Slider from '../components/Slider';
-import autoBind from 'auto-bind';
 
 /**
  * Cargo slider
@@ -22,7 +21,8 @@ export default class Cargo extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    autoBind(this);
+
+    this._cargoChange = this._cargoChange.bind(this);
   }
 
   /**

src/app/components/CostSection.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import { Ships } from 'coriolis-data/dist';
 import Persist from '../stores/Persist';
-import { Factory, Ship } from 'ed-forge';
+import Ship from '../shipyard/Ship';
 import { Insurance } from '../shipyard/Constants';
+import { slotName, slotComparator } from '../utils/SlotFunctions';
 import TranslatedComponent from './TranslatedComponent';
-import { ShoppingIcon } from './SvgIcons';
-import autoBind from 'auto-bind';
-import { assign, differenceBy, sortBy, reverse } from 'lodash';
-import { FUEL_CAPACITY } from 'ed-forge/lib/ship-stats';
+import { ShoppingIcon } from '../components/SvgIcons';
 
 /**
  * Cost Section
@@ -17,7 +16,7 @@ export default class CostSection extends TranslatedComponent {
   static propTypes = {
     ship: PropTypes.object.isRequired,
     code: PropTypes.string.isRequired,
-    buildName: PropTypes.string,
+    buildName: PropTypes.string
   };
 
   /**
@@ -26,34 +25,71 @@ export default class CostSection extends TranslatedComponent {
    */
   constructor(props) {
     super(props);
-    autoBind(this);
+    this._costsTab = this._costsTab.bind(this);
+    this._sortCost = this._sortCost.bind(this);
+    this._sortAmmo = this._sortAmmo.bind(this);
+    this._sortRetrofit = this._sortRetrofit.bind(this);
+    this._buildRetrofitShip = this._buildRetrofitShip.bind(this);
+    this._onBaseRetrofitChange = this._onBaseRetrofitChange.bind(this);
+    this._defaultRetrofitName = this._defaultRetrofitName.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);
+    let retrofitShip = this._buildRetrofitShip(props.ship.id, retrofitName);
+    let shipDiscount = Persist.getShipDiscount();
+    let moduleDiscount = Persist.getModuleDiscount();
+
+    this.props.ship.applyDiscounts(shipDiscount, moduleDiscount);
+    retrofitShip.applyDiscounts(shipDiscount, moduleDiscount);
 
-    const { ship, buildName } = props;
-    this.shipType = ship.getShipType();
     this.state = {
-      retrofitName: Persist.hasBuild(ship.getShipType(), buildName) ? buildName : null,
-      shipDiscount: Persist.getShipDiscount(),
-      moduleDiscount: Persist.getModuleDiscount(),
+      retrofitShip,
+      retrofitName,
+      shipDiscount,
+      moduleDiscount,
       insurance: Insurance[Persist.getInsurance()],
       tab: Persist.getCostTab(),
-      buildOptions: Persist.getBuildsNamesFor(ship.getShipType()),
-      predicate: 'cr',
-      desc: true,
-      excluded: {},
+      buildOptions: Persist.getBuildsNamesFor(props.ship.id),
+      ammoPredicate: 'cr',
+      ammoDesc: true,
+      costPredicate: 'cr',
+      costDesc: true,
+      retroPredicate: 'cr',
+      retroDesc: true
     };
   }
 
   /**
    * Create a ship instance to base/reference retrofit changes from
+   * @param  {string} shipId       Ship Id
+   * @param  {string} name         Build name
+   * @param  {Ship} retrofitShip   Existing retrofit ship
    * @return {Ship}                Retrofit ship
    */
-  _buildRetrofitShip() {
-    const { retrofitName } = this.state;
-    if (Persist.hasBuild(this.shipType, retrofitName)) {
-      return new Ship(Persist.getBuild(this.shipType, retrofitName));
-    } else {
-      return Factory.newShip(this.shipType);
+  _buildRetrofitShip(shipId, name, retrofitShip) {
+    let data = Ships[shipId];   // Retrieve the basic ship properties, slots and defaults
+
+    if (!retrofitShip) {  // Don't create a new instance unless needed
+      retrofitShip = new Ship(shipId, data.properties, data.slots);  // Create a new Ship for retrofit comparison
     }
+
+    if (Persist.hasBuild(shipId, name)) {
+      retrofitShip.buildFrom(Persist.getBuild(shipId, name));  // Populate modules from existing build
+    } else {
+      retrofitShip.buildWith(data.defaults);  // Populate with default components
+    }
+    return retrofitShip;
+  }
+
+  /**
+   * Get the default retrofit build name if it exists
+   * @param  {string} shipId       Ship Id
+   * @param  {string} name         Build name
+   * @return {string}              Build name or null
+   */
+  _defaultRetrofitName(shipId, name) {
+    return Persist.hasBuild(shipId, name) ? name : null;
   }
 
   /**
@@ -71,6 +107,9 @@ export default class CostSection extends TranslatedComponent {
   _onDiscountChanged() {
     let shipDiscount = Persist.getShipDiscount();
     let moduleDiscount = Persist.getModuleDiscount();
+    this.props.ship.applyDiscounts(shipDiscount, moduleDiscount);
+    this.state.retrofitShip.applyDiscounts(shipDiscount, moduleDiscount);
+    this._updateRetrofit(this.props.ship, this.state.retrofitShip);
     this.setState({ shipDiscount, moduleDiscount });
   }
 
@@ -87,33 +126,156 @@ export default class CostSection extends TranslatedComponent {
    * @param  {SyntheticEvent} event Build name to base the retrofit ship on
    */
   _onBaseRetrofitChange(event) {
-    this.setState({ retrofitName: event.target.value });
+    let retrofitName = event.target.value;
+    let ship = this.props.ship;
+
+    if (retrofitName) {
+      this.state.retrofitShip.buildFrom(Persist.getBuild(ship.id, retrofitName));
+    } else {
+      this.state.retrofitShip.buildWith(Ships[ship.id].defaults);  // Retrofit ship becomes stock build
+    }
+    this._updateRetrofit(ship, this.state.retrofitShip);
+    this.setState({ retrofitName });
   }
 
   /**
-   * Toggle item cost inclusion
-   * @param  {String} key Key of the row to toggle
+   * On builds changed check to see if the retrofit ship needs
+   * to be updated
    */
-  _toggleExcluded(key) {
-    let { excluded } = this.state;
-    excluded = assign({}, excluded);
-    const slotExcluded = excluded[key];
-    excluded[key] = (slotExcluded === undefined ? true : !slotExcluded);
-    this.setState({ excluded });
-  }
+  _onBuildsChanged() {
+    let update = false;
+    let ship = this.props.ship;
+    let { retrofitName, retrofitShip } = this.state;
 
-  /**
-   * Set list sort predicate
-   * @param  {string} newPredicate sort predicate
-   */
-  _sortBy(newPredicate) {
-    let { predicate, desc } = this.state;
-
-    if (newPredicate == predicate) {
-      desc = !desc;
+    if(!Persist.hasBuild(ship.id, retrofitName)) {
+      retrofitShip.buildWith(Ships[ship.id].defaults);  // Retrofit ship becomes stock build
+      this.setState({ retrofitName: null });
+      update = true;
+    } else if (Persist.getBuild(ship.id, retrofitName) != retrofitShip.toString()) {
+      retrofitShip.buildFrom(Persist.getBuild(ship.id, retrofitName));  // Repopulate modules from saved build
+      update = true;
     }
 
-    this.setState({ predicate: newPredicate, desc });
+    if (update) { // Update retrofit comparison
+      this._updateRetrofit(ship, retrofitShip);
+    }
+    // Update list of retrofit base build options
+    this.setState({ buildOptions: Persist.getBuildsNamesFor(ship.id) });
+  }
+
+  /**
+   * Toggle item cost inclusion in overall total
+   * @param  {Object} item Cost item
+   */
+  _toggleCost(item) {
+    this.props.ship.setCostIncluded(item, !item.incCost);
+    this.forceUpdate();
+  }
+
+  /**
+   * Toggle item cost inclusion in retrofit total
+   * @param  {Object} item Cost item
+   */
+  _toggleRetrofitCost(item) {
+    let retrofitTotal = this.state.retrofitTotal;
+    item.retroItem.incCost = !item.retroItem.incCost;
+    retrofitTotal += item.netCost * (item.retroItem.incCost ? 1 : -1);
+    this.setState({ retrofitTotal });
+  }
+
+  /**
+   * Set cost list sort predicate
+   * @param  {string} predicate sort predicate
+   */
+  _sortCostBy(predicate) {
+    let { costPredicate, costDesc } = this.state;
+
+    if (costPredicate == predicate) {
+      costDesc = !costDesc;
+    }
+
+    this.setState({ costPredicate: predicate, costDesc });
+  }
+
+  /**
+   * Sort cost list
+   * @param  {Ship} ship        Ship instance
+   * @param  {string} predicate Sort predicate
+   * @param  {Boolean} desc     Sort descending
+   */
+  _sortCost(ship, predicate, desc) {
+    let costList = ship.costList;
+    let translate = this.context.language.translate;
+
+    if (predicate == 'm') {
+      costList.sort(slotComparator(translate, null, desc));
+    } else {
+      costList.sort(slotComparator(translate, (a, b) => (a.m.cost || 0) - (b.m.cost || 0), desc));
+    }
+  }
+
+  /**
+   * Set ammo list sort predicate
+   * @param  {string} predicate sort predicate
+   */
+  _sortAmmoBy(predicate) {
+    let { ammoPredicate, ammoDesc } = this.state;
+
+    if (ammoPredicate == predicate) {
+      ammoDesc = !ammoDesc;
+    }
+
+    this.setState({ ammoPredicate: predicate, ammoDesc });
+  }
+
+  /**
+   * Sort ammo cost list
+   * @param  {Array} ammoCosts  Ammo cost list
+   * @param  {string} predicate Sort predicate
+   * @param  {Boolean} desc     Sort descending
+   */
+  _sortAmmo(ammoCosts, predicate, desc) {
+    let translate = this.context.language.translate;
+
+    if (predicate == 'm') {
+      ammoCosts.sort(slotComparator(translate, null, desc));
+    } else {
+      ammoCosts.sort(slotComparator(translate, (a, b) => a[predicate] - b[predicate], desc));
+    }
+  }
+
+  /**
+   * Set retrofit list sort predicate
+   * @param  {string} predicate sort predicate
+   */
+  _sortRetrofitBy(predicate) {
+    let { retroPredicate, retroDesc } = this.state;
+
+    if (retroPredicate == predicate) {
+      retroDesc = !retroDesc;
+    }
+
+    this.setState({ retroPredicate: predicate, retroDesc });
+  }
+
+  /**
+   * Sort retrofit cost list
+   * @param  {Array} retrofitCosts  Retrofit cost list
+   * @param  {string} predicate     Sort predicate
+   * @param  {Boolean} desc         Sort descending
+   */
+  _sortRetrofit(retrofitCosts, predicate, desc) {
+    let translate = this.context.language.translate;
+
+    if (predicate == 'cr') {
+      retrofitCosts.sort((a, b) => a.netCost - b.netCost);
+    } else {
+      retrofitCosts.sort((a , b) => (a[predicate] ? translate(a[predicate]).toLowerCase() : '').localeCompare(b[predicate] ? translate(b[predicate]).toLowerCase() : ''));
+    }
+
+    if (!desc) {
+      retrofitCosts.reverse();
+    }
   }
 
   /**
@@ -122,34 +284,18 @@ export default class CostSection extends TranslatedComponent {
    */
   _costsTab() {
     let { ship } = this.props;
-    let {
-      excluded, shipDiscount, moduleDiscount, insurance, desc, predicate
-    } = this.state;
+    let { shipDiscount, moduleDiscount, insurance } = this.state;
     let { translate, formats, units } = this.context.language;
     let rows = [];
 
-    let modules = sortBy(
-      ship.getModules(),
-      (predicate === 'm' ? (m) => m.getItem() : (m) => m.readMeta('cost'))
-    );
-    if (desc) {
-      reverse(modules);
-    }
-
-    let totalCost = 0;
-    for (let module of modules) {
-      const cost = module.readMeta('cost');
-      const slot = module.getSlot();
-      if (cost) {
-        let toggle = this._toggleExcluded.bind(this, slot);
-        const disabled = excluded[slot];
-        if (!disabled) {
-          totalCost += cost;
-        }
-        rows.push(<tr key={slot} className={cn('highlight', { disabled })}>
-          <td className='ptr' style={{ width: '1em' }} onClick={toggle}>{module.getClassRating()}</td>
-          <td className='le ptr shorten cap' onClick={toggle}>{translate(module.readMeta('type'))}</td>
-          <td className='ri ptr' onClick={toggle}>{formats.int(cost * (1 - moduleDiscount))}{units.CR}</td>
+    for (let i = 0, l = ship.costList.length; i < l; i++) {
+      let item = ship.costList[i];
+      if (item.m && item.m.cost) {
+        let toggle = this._toggleCost.bind(this, item);
+        rows.push(<tr key={i} className={cn('highlight', { disabled: !item.incCost })}>
+          <td className='ptr' style={{ width: '1em' }} onClick={toggle}>{item.m.class + item.m.rating}</td>
+          <td className='le ptr shorten cap' onClick={toggle}>{slotName(translate, item)}</td>
+          <td className='ri ptr' onClick={toggle}>{formats.int(item.discountedCost)}{units.CR}</td>
         </tr>);
       }
     }
@@ -158,23 +304,23 @@ export default class CostSection extends TranslatedComponent {
       <table style={{ width: '100%', borderCollapse: 'collapse' }}>
         <thead>
           <tr className='main'>
-            <th colSpan='2' className='sortable le' onClick={() => this._sortBy('m')}>
+            <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}
-              {moduleDiscount ? <u className='cap optional-hide' style={{ marginLeft: '0.5em' }}>{`[${translate('modules')} -${formats.pct(moduleDiscount)}]`}</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(-1 * moduleDiscount)}]`}</u> : null}
             </th>
-            <th className='sortable le' onClick={() => this._sortBy('cr')} >{translate('credits')}</th>
+            <th className='sortable le' onClick={this._sortCostBy.bind(this, 'cr')} >{translate('credits')}</th>
           </tr>
         </thead>
         <tbody>
           {rows}
           <tr className='ri'>
             <td colSpan='2' className='lbl' >{translate('total')}</td>
-            <td className='val'>{formats.int(totalCost)}{units.CR}</td>
+            <td className='val'>{formats.int(ship.totalCost)}{units.CR}</td>
           </tr>
           <tr className='ri'>
             <td colSpan='2' className='lbl'>{translate('insurance')}</td>
-            <td className='val'>{formats.int(totalCost * insurance)}{units.CR}</td>
+            <td className='val'>{formats.int(ship.totalCost * insurance)}{units.CR}</td>
           </tr>
         </tbody>
       </table>
@@ -182,66 +328,17 @@ 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() {
-    const {} = this.state;
+  _inaraShoppingList() {
+    const { retrofitCosts } = this.state;
     const { ship } = this.props;
 
     // Provide unique list of non-PP module EDDB IDs to buy
-    // const modIds = retrofitCosts.filter(item => item.retroItem.incCost && item.buyId && !item.buyPp).map(item => item.buyId).filter((v, i, a) => a.indexOf(v) === i);
+    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
-    // TODO:
-    // window.open('https://eddb.io/station?m=' + modIds.join(','));
-  }
-
-  /**
-   *
-   */
-  _retrofitInfo() {
-    const { ship } = this.props;
-    const { desc, moduleDiscount, predicate, retrofitName, excluded } = this.state;
-    const retrofitShip = this._buildRetrofitShip();
-
-    const currentModules = ship.getModules();
-    const oldModules = retrofitShip.getModules();
-    const buyModules = differenceBy(currentModules, oldModules, (m) => m.getItem());
-    const sellModules = differenceBy(oldModules, currentModules, (m) => m.getItem());
-
-    let modules = [];
-    let totalCost = 0;
-    const addModule = (m, costFactor) => {
-      const key = `${m.getItem()}@${m.getSlot()}`;
-      const cost = costFactor * m.readMeta('cost') * (1 - moduleDiscount);
-      modules.push({
-        key, cost,
-        rating: m.getClassRating(),
-        item: m.readMeta('type'),
-      });
-      if (!excluded[key]) {
-        totalCost += cost;
-      }
-    };
-    for (let m of buyModules) {
-      addModule(m, 1);
-    }
-    for (let m of sellModules) {
-      addModule(m, -1);
-    }
-
-    let _sortF = undefined;
-    switch (predicate) {
-      case 'cr': _sortF = (o) => o.cost; break;
-      case 'm':
-      default: _sortF = (o) => o.item; break;
-    };
-
-    modules = sortBy(modules, _sortF);
-    if (desc) {
-      reverse(modules);
-    }
-    return [totalCost, modules];
+    window.open('https://inara.cz/inapi/corisearch.php?m=' + modIds.join(','));
   }
 
   /**
@@ -249,52 +346,59 @@ export default class CostSection extends TranslatedComponent {
    * @return {React.Component} Tab contents
    */
   _retrofitTab() {
-    let { buildOptions, excluded, moduleDiscount, retrofitName } = this.state;
+    let { retrofitTotal, retrofitCosts, moduleDiscount, retrofitName } = this.state;
     const { termtip, tooltip } = this.context;
     let { translate, formats, units } = this.context.language;
     let int = formats.int;
+    let rows = [], options = [<option key='stock' value=''>{translate('Stock')}</option>];
+
+    for (let opt of this.state.buildOptions) {
+      options.push(<option key={opt} value={opt}>{opt}</option>);
+    }
+
+    if (retrofitCosts.length) {
+      for (let i = 0, l = retrofitCosts.length; i < l; i++) {
+        let item = retrofitCosts[i];
+        rows.push(<tr key={i} className={cn('highlight', { disabled: !item.retroItem.incCost })} onClick={this._toggleRetrofitCost.bind(this, item)}>
+          <td className='ptr' style={{ width: '1em' }}>{item.sellClassRating}</td>
+          <td className='le ptr shorten cap'>{translate(item.sellName)}</td>
+          <td className='ptr' style={{ width: '1em' }}>{item.buyClassRating}</td>
+          <td className='le ptr shorten cap'>{translate(item.buyName)}</td>
+          <td colSpan='2' className={cn('ri ptr', item.retroItem.incCost ? item.netCost > 0 ? 'warning' : 'secondary-disabled' : 'disabled')}>{int(item.netCost)}{units.CR}</td>
+        </tr>);
+      }
+    } else {
+      rows = <tr><td colSpan='7' style={{ padding: '3em 0' }}>{translate('PHRASE_NO_RETROCH')}</td></tr>;
+    }
 
-    const [retrofitTotal, retrofitInfo] = this._retrofitInfo();
     return <div>
       <div className='scroll-x'>
         <table style={{ width: '100%' }}>
           <thead>
             <tr className='main'>
-              <th colSpan='2' className='sortable le' onClick={() => this._sortBy('m')}>{translate('module')}</th>
-              <th colSpan='2' className='sortable le' onClick={() => this._sortBy('cr')}>
+              <th colSpan='2' className='sortable le' onClick={this._sortRetrofitBy.bind(this, 'sellName')}>{translate('sell')}</th>
+              <th colSpan='2' className='sortable le' onClick={this._sortRetrofitBy.bind(this, 'buyName')}>{translate('buy')}</th>
+              <th colSpan='2' className='sortable le' onClick={this._sortRetrofitBy.bind(this, 'cr')}>
                 {translate('net cost')}
                 {moduleDiscount ? <u className='cap optional-hide' style={{ marginLeft: '0.5em' }}>{`[${translate('modules')} -${formats.pct(moduleDiscount)}]`}</u> : null}
               </th>
             </tr>
           </thead>
           <tbody>
-            {retrofitInfo.length ?
-              retrofitInfo.map((info) => (
-                <tr key={info.key} className={cn('highlight', { disabled: excluded[info.key] })}
-                  onClick={() => this._toggleExcluded(info.key)}>
-                  <td className='ptr' style={{ width: '1em' }}>{info.rating}</td>
-                  <td className='le ptr shorten cap'>{translate(info.item)}</td>
-                  <td colSpan="2" className={cn('ri ptr', excluded[info.key] ? 'disabled' : (info.cost < 0 ? 'secondary-disabled' : 'warning'))}>
-                    {int(info.cost)}{units.CR}
-                  </td>
-                </tr>
-              )) : (
-                <tr><td colSpan='7' style={{ padding: '3em 0' }}>{translate('PHRASE_NO_RETROCH')}</td></tr>
-              )}
+            {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' >{translate('cost')}</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}
               </td>
             </tr>
             <tr className='ri'>
-              <td colSpan='2' className='lbl cap' >{translate('retrofit from')}</td>
+              <td colSpan='4' className='lbl cap' >{translate('retrofit from')}</td>
               <td className='val cen' style={{ borderRight: 'none', width: '1em' }}><u className='primary-disabled'>&#9662;</u></td>
               <td className='val' style={{ borderLeft:'none', padding: 0 }}>
                 <select style={{ width: '100%', padding: 0 }} value={retrofitName || translate('Stock')} onChange={this._onBaseRetrofitChange}>
-                  <option key='stock' value=''>{translate('Stock')}</option>
-                  {buildOptions.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
+                  {options}
                 </select>
               </td>
             </tr>
@@ -304,50 +408,63 @@ export default class CostSection extends TranslatedComponent {
     </div>;
   }
 
-  /**
-   *
-   * @param {*} modules
-   */
-  _ammoInfo() {
-    const { ship } = this.props;
-    const { desc, predicate } = this.state;
 
-    let info = [{
-      key: 'fuel',
-      item: 'Fuel',
-      qty: ship.get(FUEL_CAPACITY),
-      unitCost: 50,
-      cost: 50 * ship.get(FUEL_CAPACITY),
-    }];
-    for (let m of ship.getModules()) {
-      const rebuilds = m.get('bays') * m.get('rebuildsperbay');
-      const ammo = (m.get('ammomaximum') + m.get('ammoclipsize')) || rebuilds;
-      if (ammo) {
-        const unitCost = m.readMeta('ammocost');
-        info.push({
-          key: `restock_${m.getSlot()}`,
-          rating: m.getClassRating(),
-          item: m.readMeta('type'),
-          qty: ammo,
-          unitCost, cost: unitCost * ammo,
-        });
+  /**
+   * Update retrofit costs
+   * @param  {Ship} ship          Ship instance
+   * @param  {Ship} retrofitShip  Retrofit Ship instance
+   */
+  _updateRetrofit(ship, retrofitShip) {
+    let retrofitCosts = [];
+    let retrofitTotal = 0, i, l, item;
+
+    if (ship.bulkheads.m.index != retrofitShip.bulkheads.m.index) {
+      item = {
+        buyClassRating: ship.bulkheads.m.class + ship.bulkheads.m.rating,
+        buyId: ship.bulkheads.m.eddbID,
+        buyPp: ship.bulkheads.m.pp,
+        buyName: ship.bulkheads.m.name,
+        sellClassRating: retrofitShip.bulkheads.m.class + retrofitShip.bulkheads.m.rating,
+        sellName: retrofitShip.bulkheads.m.name,
+        netCost: ship.bulkheads.discountedCost - retrofitShip.bulkheads.discountedCost,
+        retroItem: retrofitShip.bulkheads
+      };
+      retrofitCosts.push(item);
+      if (retrofitShip.bulkheads.incCost) {
+        retrofitTotal += item.netCost;
       }
     }
 
-    let _sortF = undefined;
-    switch (predicate) {
-      case 'cr': _sortF = (o) => o.cost; break;
-      case 'qty': _sortF = (o) => o.qty; break;
-      case 'cost': _sortF = (o) => o.unitCost; break;
-      case 'm':
-      default: _sortF = (o) => o.item;
-    }
-    info = sortBy(info, _sortF);
-    if (desc) {
-      reverse(info);
+    for (let g in { standard: 1, internal: 1, hardpoints: 1 }) {
+      let retroSlotGroup = retrofitShip[g];
+      let slotGroup = ship[g];
+      for (i = 0, l = slotGroup.length; i < l; i++) {
+        const modId = slotGroup[i].m ? slotGroup[i].m.eddbID : null;
+        const retroModId = retroSlotGroup[i].m ? retroSlotGroup[i].m.eddbID : null;
+        if (modId != retroModId) {
+          item = { netCost: 0, retroItem: retroSlotGroup[i] };
+          if (slotGroup[i].m) {
+            item.buyId = slotGroup[i].m.eddbID,
+            item.buyPp = slotGroup[i].m.pp,
+            item.buyName = slotGroup[i].m.name || slotGroup[i].m.grp;
+            item.buyClassRating = slotGroup[i].m.class + slotGroup[i].m.rating;
+            item.netCost = slotGroup[i].discountedCost;
+          }
+          if (retroSlotGroup[i].m) {
+            item.sellName = retroSlotGroup[i].m.name || retroSlotGroup[i].m.grp;
+            item.sellClassRating = retroSlotGroup[i].m.class + retroSlotGroup[i].m.rating;
+            item.netCost -= retroSlotGroup[i].discountedCost;
+          }
+          retrofitCosts.push(item);
+          if (retroSlotGroup[i].incCost) {
+            retrofitTotal += item.netCost;
+          }
+        }
+      }
     }
 
-    return info;
+    this.setState({ retrofitCosts, retrofitTotal });
+    this._sortRetrofit(retrofitCosts, this.state.retroPredicate, this.state.retroDesc);
   }
 
   /**
@@ -355,24 +472,20 @@ export default class CostSection extends TranslatedComponent {
    * @return {React.Component} Tab contents
    */
   _ammoTab() {
-    const { excluded } = this.state;
-    const { translate, formats, units } = this.context.language;
-    const int = formats.int;
-    const rows = [];
+    let { ammoTotal, ammoCosts } = this.state;
+    let { translate, formats, units } = this.context.language;
+    let int = formats.int;
+    let rows = [];
 
-    const ammoInfo = this._ammoInfo();
-    let total = 0;
-    for (let i of ammoInfo) {
-      const disabled = excluded[i.key];
-      rows.push(<tr key={i.key} onClick={() => this._toggleExcluded(i.key)}
-        className={cn('highlight', { disabled })}>
-        <td style={{ width: '1em' }}>{i.rating}</td>
-        <td className='le shorten cap'>{translate(i.item)}</td>
-        <td className='ri'>{int(i.qty)}</td>
-        <td className='ri'>{int(i.unitCost)}{units.CR}</td>
-        <td className='ri'>{int(i.cost)}{units.CR}</td>
+    for (let i = 0, l = ammoCosts.length; i < l; i++) {
+      let item = ammoCosts[i];
+      rows.push(<tr key={i} className='highlight'>
+        <td style={{ width: '1em' }}>{item.m.class + item.m.rating}</td>
+        <td className='le shorten cap'>{slotName(translate, item)}</td>
+        <td className='ri'>{int(item.max)}</td>
+        <td className='ri'>{int(item.cost)}{units.CR}</td>
+        <td className='ri'>{int(item.total)}{units.CR}</td>
       </tr>);
-      total += disabled ? 0 : i.cost;
     }
 
     return <div>
@@ -380,17 +493,17 @@ export default class CostSection extends TranslatedComponent {
         <table style={{ width: '100%' }}>
           <thead>
             <tr className='main'>
-              <th colSpan='2' className='sortable le' onClick={() => this._sortBy('m')}>{translate('module')}</th>
-              <th colSpan='1' className='sortable le' onClick={() => this._sortBy('qty')}>{translate('qty')}</th>
-              <th colSpan='1' className='sortable le' onClick={() => this._sortBy('cost')}>{translate('unit cost')}</th>
-              <th className='sortable le' onClick={() => this._sortBy('cr')}>{translate('subtotal')}</th>
+              <th colSpan='2' className='sortable le' onClick={this._sortAmmoBy.bind(this, 'm')} >{translate('module')}</th>
+              <th colSpan='1' className='sortable le' onClick={this._sortAmmoBy.bind(this, 'max')} >{translate('qty')}</th>
+              <th colSpan='1' className='sortable le' onClick={this._sortAmmoBy.bind(this, 'cost')} >{translate('unit cost')}</th>
+              <th className='sortable le' onClick={this._sortAmmoBy.bind(this, 'total')}>{translate('subtotal')}</th>
             </tr>
           </thead>
           <tbody>
             {rows}
             <tr className='ri'>
               <td colSpan='4' className='lbl' >{translate('total')}</td>
-              <td className='val'>{int(total)}{units.CR}</td>
+              <td className='val'>{int(ammoTotal)}{units.CR}</td>
             </tr>
           </tbody>
         </table>
@@ -398,6 +511,103 @@ export default class CostSection extends TranslatedComponent {
     </div>;
   }
 
+  /**
+   * Recalculate all ammo costs
+   * @param  {Ship} ship  Ship instance
+   */
+  _updateAmmoCosts(ship) {
+    let ammoCosts = [], ammoTotal = 0, item, q, limpets = 0, srvs = 0, scoop = false;
+
+    for (let g in { standard: 1, internal: 1, hardpoints: 1 }) {
+      let slotGroup = ship[g];
+      for (let i = 0, l = slotGroup.length; i < l; i++) {
+        if (slotGroup[i].m) {
+          // Special cases needed for SCB, AFMU, and limpet controllers since they don't use standard ammo/clip
+          q = 0;
+          switch (slotGroup[i].m.grp) {
+            case 'fs': // Skip fuel calculation if scoop present
+              scoop = true;
+              break;
+            case 'scb':
+              q = slotGroup[i].m.getAmmo() + 1;
+              break;
+            case 'am':
+              q = slotGroup[i].m.getAmmo();
+              break;
+            case 'pv':
+              srvs += slotGroup[i].m.getBays();
+              break;
+            case 'fx': case 'hb': case 'cc': case 'pc':
+              limpets = ship.cargoCapacity;
+              break;
+            default:
+              q = slotGroup[i].m.getClip() + slotGroup[i].m.getAmmo();
+          }
+          // Calculate ammo costs only if a cost is specified
+          if (slotGroup[i].m.ammocost > 0) {
+            item = {
+              m: slotGroup[i].m,
+              max: q,
+              cost: slotGroup[i].m.ammocost,
+              total: q * slotGroup[i].m.ammocost
+            };
+            ammoCosts.push(item);
+            ammoTotal += item.total;
+          }
+          // Add fighters
+          if (slotGroup[i].m.grp === 'fh') {
+            item = {
+              m: slotGroup[i].m,
+              max: slotGroup[i].m.getRebuildsPerBay() * slotGroup[i].m.getBays(),
+              cost: slotGroup[i].m.fightercost,
+              total: slotGroup[i].m.getRebuildsPerBay() * slotGroup[i].m.getBays() * slotGroup[i].m.fightercost
+            };
+            ammoCosts.push(item);
+            ammoTotal += item.total;
+          }
+        }
+      }
+    }
+
+    // Limpets if controllers exist and cargo space available
+    if (limpets > 0) {
+      item = {
+        m: { name: 'limpets', class: '', rating: '' },
+        max: ship.cargoCapacity,
+        cost: 101,
+        total: ship.cargoCapacity * 101
+      };
+      ammoCosts.push(item);
+      ammoTotal += item.total;
+    }
+
+    if (srvs > 0) {
+      item = {
+        m: { name: 'SRVs', class: '', rating: '' },
+        max: srvs,
+        cost: 1030,
+        total: srvs * 1030
+      };
+      ammoCosts.push(item);
+      ammoTotal += item.total;
+    }
+
+    // Calculate refuel costs if no scoop present
+    if (!scoop) {
+      item = {
+        m: { name: 'fuel', class: '', rating: '' },
+        max: ship.fuelCapacity,
+        cost: 50,
+        total: ship.fuelCapacity * 50
+      };
+      ammoCosts.push(item);
+      ammoTotal += item.total;
+    }
+
+    this.setState({ ammoTotal, ammoCosts });
+    this._sortAmmo(ammoCosts, this.state.ammoPredicate, this.state.ammoDesc);
+  }
+
   /**
    * Add listeners on mount and update costs
    */
@@ -405,7 +615,64 @@ export default class CostSection extends TranslatedComponent {
     this.listeners = [
       Persist.addListener('discounts', this._onDiscountChanged.bind(this)),
       Persist.addListener('insurance', this._onInsuranceChanged.bind(this)),
+      Persist.addListener('builds', this._onBuildsChanged.bind(this)),
     ];
+    this._updateAmmoCosts(this.props.ship);
+    this._updateRetrofit(this.props.ship, this.state.retrofitShip);
+    this._sortCost(this.props.ship);
+  }
+
+  /**
+   * Update state based on property and context changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next context
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    let retrofitShip = this.state.retrofitShip;
+
+    if (nextProps.ship != this.props.ship) { // Ship has changed
+      let nextId = nextProps.ship.id;
+      let retrofitName = this._defaultRetrofitName(nextId, nextProps.buildName);
+      retrofitShip = this._buildRetrofitShip(nextId, retrofitName, nextId == this.props.ship.id ? retrofitShip : null);
+      this.setState({
+        retrofitShip,
+        retrofitName,
+        buildOptions: Persist.getBuildsNamesFor(nextId)
+      });
+    }
+
+    if (nextProps.ship != this.props.ship || nextProps.code != this.props.code) {
+      nextProps.ship.applyDiscounts(Persist.getShipDiscount(), Persist.getModuleDiscount());
+      this._updateAmmoCosts(nextProps.ship);
+      this._updateRetrofit(nextProps.ship, retrofitShip);
+      this._sortCost(nextProps.ship);
+    }
+  }
+
+  /**
+   * Sort lists before render
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextState Incoming/Next state
+   */
+  componentWillUpdate(nextProps, nextState) {
+    let state = this.state;
+
+    switch (nextState.tab) {
+      case 'ammo':
+        if (state.ammoPredicate != nextState.ammoPredicate || state.ammoDesc != nextState.ammoDesc) {
+          this._sortAmmo(nextState.ammoCosts, nextState.ammoPredicate, nextState.ammoDesc);
+        }
+        break;
+      case 'retrofit':
+        if (state.retroPredicate != nextState.retroPredicate || state.retroDesc != nextState.retroDesc) {
+          this._sortRetrofit(nextState.retrofitCosts, nextState.retroPredicate, nextState.retroDesc);
+        }
+        break;
+      default:
+        if (state.costPredicate != nextState.costPredicate || state.costDesc != nextState.costDesc) {
+          this._sortCost(nextProps.ship, nextState.costPredicate, nextState.costDesc);
+        }
+    }
   }
 
   /**

src/app/components/Defence.jsx

@@ -4,8 +4,6 @@ import TranslatedComponent from './TranslatedComponent';
 import * as Calc from '../shipyard/Calculations';
 import PieChart from './PieChart';
 import VerticalBarChart from './VerticalBarChart';
-import autoBind from 'auto-bind';
-import { ARMOUR_METRICS, MODULE_PROTECTION_METRICS, SHIELD_METRICS } from 'ed-forge/lib/ship-stats';
 
 /**
  * Defence information
@@ -17,10 +15,12 @@ import { ARMOUR_METRICS, MODULE_PROTECTION_METRICS, SHIELD_METRICS } from 'ed-fo
  */
 export default class Defence extends TranslatedComponent {
   static propTypes = {
-    code: PropTypes.string.isRequired,
+    marker: PropTypes.string.isRequired,
     ship: PropTypes.object.isRequired,
     opponent: PropTypes.object.isRequired,
-    engagementRange: PropTypes.number.isRequired,
+    engagementrange: PropTypes.number.isRequired,
+    sys: PropTypes.number.isRequired,
+    opponentWep: PropTypes.number.isRequired
   };
 
   /**
@@ -29,7 +29,22 @@ export default class Defence extends TranslatedComponent {
    */
   constructor(props) {
     super(props);
-    autoBind(this);
+
+    const { shield, armour, shielddamage, armourdamage } = Calc.defenceMetrics(props.ship, props.opponent, props.sys, props.opponentWep, props.engagementrange);
+    this.state = { shield, armour, shielddamage, armourdamage };
+  }
+
+  /**
+   * Update the state if our properties change
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps) {
+    if (this.props.marker != nextProps.marker || this.props.sys != nextProps.sys) {
+      const { shield, armour, shielddamage, armourdamage } = Calc.defenceMetrics(nextProps.ship, nextProps.opponent, nextProps.sys, nextProps.opponentWep, nextProps.engagementrange);
+      this.setState({ shield, armour, shielddamage, armourdamage });
+    }
+    return true;
   }
 
   /**
@@ -37,104 +52,187 @@ export default class Defence extends TranslatedComponent {
    * @return {React.Component} contents
    */
   render() {
-    const { ship } = 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 shields = ship.get(SHIELD_METRICS);
+    const pd = opponent.standard[4].m;
 
-    // Data for pie chart (absolute MJ)
-    const shieldSourcesData = [
-      'byBoosters', 'byGenerator', 'byReinforcements', 'bySCBs',
-    ].map((key) => { return { label: key, value: Math.round(shields[key]) }; });
+    const shieldSourcesData = [];
+    const effectiveShieldData = [];
+    const shieldDamageTakenData = [];
+    const shieldSourcesTt = [];
+    const shieldDamageTakenAbsoluteTt = [];
+    const shieldDamageTakenExplosiveTt = [];
+    const shieldDamageTakenKineticTt = [];
+    const shieldDamageTakenThermalTt = [];
+    const effectiveShieldAbsoluteTt = [];
+    const effectiveShieldExplosiveTt = [];
+    const effectiveShieldKineticTt = [];
+    const effectiveShieldThermalTt = [];
+    let maxEffectiveShield = 0;
+    if (shield.total) {
+      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') });
 
-    // Data for tooltip
-    const shieldSourcesTt = shieldSourcesData.map((o) => {
-      let { label, value } = o;
-      return <div key={label}>
-        {translate(label)} {formats.int(value)}{units.MJ}
-      </div>;
-    });
+      if (shield.generator > 0) {
+        shieldSourcesTt.push(<div key='generator'>{translate('generator') + ' ' + formats.int(shield.generator)}{units.MJ}</div>);
+        effectiveShieldAbsoluteTt.push(<div key='generator'>{translate('generator') + ' ' + formats.int(shield.generator)}{units.MJ}</div>);
+        effectiveShieldExplosiveTt.push(<div key='generator'>{translate('generator') + ' ' + formats.int(shield.generator)}{units.MJ}</div>);
+        effectiveShieldKineticTt.push(<div key='generator'>{translate('generator') + ' ' + formats.int(shield.generator)}{units.MJ}</div>);
+        effectiveShieldThermalTt.push(<div key='generator'>{translate('generator') + ' ' + formats.int(shield.generator)}{units.MJ}</div>);
+        if (shield.boosters > 0) {
+          shieldSourcesTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.int(shield.boosters)}{units.MJ}</div>);
+          effectiveShieldAbsoluteTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.int(shield.boosters)}{units.MJ}</div>);
+          effectiveShieldExplosiveTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.int(shield.boosters)}{units.MJ}</div>);
+          effectiveShieldKineticTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.int(shield.boosters)}{units.MJ}</div>);
+          effectiveShieldThermalTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.int(shield.boosters)}{units.MJ}</div>);
+        }
 
-    // Shield resistances
-    const shieldDamageTakenData = [
-      'absolute', 'explosive', 'kinetic', 'thermal',
-    ].map((label) => {
-      const dmgMult = shields[label];
-      const tooltip = ['byBoosters', 'byGenerator', 'bySys'].map(
-        (label) => <div key={label}>
-          {translate(label)} {formats.pct1(dmgMult[label])}
-        </div>
-      );
-      return { label, value: Math.round(100 * dmgMult.withSys), tooltip };
-    });
+        if (shield.cells > 0) {
+          shieldSourcesTt.push(<div key='cells'>{translate('cells') + ' ' + formats.int(shield.cells)}{units.MJ}</div>);
+          effectiveShieldAbsoluteTt.push(<div key='cells'>{translate('cells') + ' ' + formats.int(shield.cells)}{units.MJ}</div>);
+          effectiveShieldExplosiveTt.push(<div key='cells'>{translate('cells') + ' ' + formats.int(shield.cells)}{units.MJ}</div>);
+          effectiveShieldKineticTt.push(<div key='cells'>{translate('cells') + ' ' + formats.int(shield.cells)}{units.MJ}</div>);
+          effectiveShieldThermalTt.push(<div key='cells'>{translate('cells') + ' ' + formats.int(shield.cells)}{units.MJ}</div>);
+        }
 
-    // Effective MJ
-    const effectiveShieldData = [
-      'absolute', 'explosive', 'kinetic', 'thermal'
-    ].map((label) => {
-      const dmgMult = shields[label];
-      const raw = shields.withSCBs;
-      const tooltip = ['byBoosters', 'byGenerator', 'bySys'].map(
-        (label) => <div key={label}>
-          {translate(label)} {formats.int(raw * dmgMult[label])}{units.MJ}
-        </div>
-      );
-      return { label, value: Math.round(dmgMult.withSys * raw), tooltip };
-    });
-    const maxEffectiveShield = Math.max(...effectiveShieldData.map((o) => o.value));
+        // Add effective shield from resistances
+        const rawMj = shield.generator + shield.boosters + shield.cells;
+        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.base) - rawMj;
+        if (kineticMj != 0) effectiveShieldKineticTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(kineticMj)}{units.MJ}</div>);
+        const thermalMj = rawMj / (shield.thermal.base) - rawMj;
+        if (thermalMj != 0) effectiveShieldThermalTt.push(<div key='resistance'>{translate('resistance') + ' ' + formats.int(thermalMj)}{units.MJ}</div>);
 
-    const armour = ship.get(ARMOUR_METRICS);
-    const moduleProtection = ship.get(MODULE_PROTECTION_METRICS);
+        // 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.total - 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.total - rawMj / shield.kinetic.base)}{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>);
+        }
+      }
 
-    // Data for pie chart (absolute HP)
-    const armourSourcesData = ['base', 'byAlloys', 'byHRPs',].map(
-      (key) => { return { label: key, value: Math.round(armour[key]) }; }
-    );
+      shieldDamageTakenAbsoluteTt.push(<div key='generator'>{translate('generator') + ' ' + formats.pct1(shield.absolute.generator)}</div>);
+      shieldDamageTakenAbsoluteTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.pct1(shield.absolute.boosters)}</div>);
+      shieldDamageTakenAbsoluteTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.pct1(shield.absolute.sys)}</div>);
 
-    // Data for tooltip
-    const armourSourcesTt = armourSourcesData.map((o) => {
-      let { label, value } = o;
-      return <div key={label}>{translate(label)} {formats.int(value)}</div>;
-    });
+      shieldDamageTakenExplosiveTt.push(<div key='generator'>{translate('generator') + ' ' + formats.pct1(shield.explosive.generator)}</div>);
+      shieldDamageTakenExplosiveTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.pct1(shield.explosive.boosters)}</div>);
+      shieldDamageTakenExplosiveTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.pct1(shield.explosive.sys)}</div>);
 
-    // Armour resistances
-    const armourDamageTakenData = [
-      'absolute', 'explosive', 'kinetic', 'thermal', 'caustic',
-    ].map((label) => {
-      const dmgMult = armour[label];
-      const tooltip = ['byAlloys', 'byHRPs'].map(
-        (label) => <div key={label}>
-          {translate(label)} {formats.pct1(dmgMult[label])}
-        </div>
-      );
-      return { label, value: Math.round(100 * dmgMult.damageMultiplier), tooltip };
-    });
+      shieldDamageTakenKineticTt.push(<div key='generator'>{translate('generator') + ' ' + formats.pct1(shield.kinetic.generator)}</div>);
+      shieldDamageTakenKineticTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.pct1(shield.kinetic.boosters)}</div>);
+      shieldDamageTakenKineticTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.pct1(shield.kinetic.sys)}</div>);
 
-    // Effective HP
-    const effectiveArmourData = [
-      'absolute', 'explosive', 'kinetic', 'thermal'
-    ].map((label) => {
-      const dmgMult = armour[label];
-      const raw = armour.armour;
-      const tooltip = ['byBoosters', 'byGenerator', 'bySys'].map(
-        (label) => <div key={label}>
-          {translate(label)} {formats.int(raw * dmgMult[label])}
-        </div>
-      );
-      return { label, value: Math.round(dmgMult.damageMultiplier * raw), tooltip };
-    });
+      shieldDamageTakenThermalTt.push(<div key='generator'>{translate('generator') + ' ' + formats.pct1(shield.thermal.generator)}</div>);
+      shieldDamageTakenThermalTt.push(<div key='boosters'>{translate('boosters') + ' ' + formats.pct1(shield.thermal.boosters)}</div>);
+      shieldDamageTakenThermalTt.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.pct1(shield.thermal.sys)}</div>);
+
+      const effectiveAbsoluteShield = shield.total / shield.absolute.total;
+      effectiveShieldData.push({ value: Math.round(effectiveAbsoluteShield), label: translate('absolute'), tooltip: effectiveShieldAbsoluteTt });
+      const effectiveExplosiveShield = shield.total / shield.explosive.total;
+      effectiveShieldData.push({ value: Math.round(effectiveExplosiveShield), label: translate('explosive'), tooltip: effectiveShieldExplosiveTt });
+      const effectiveKineticShield = shield.total / shield.kinetic.total;
+      effectiveShieldData.push({ value: Math.round(effectiveKineticShield), label: translate('kinetic'), tooltip: effectiveShieldKineticTt });
+      const effectiveThermalShield = shield.total / shield.thermal.total;
+      effectiveShieldData.push({ value: Math.round(effectiveThermalShield), label: translate('thermal'), tooltip: effectiveShieldThermalTt });
+
+      shieldDamageTakenData.push({ value: Math.round(shield.absolute.total * 100), label: translate('absolute'), tooltip: shieldDamageTakenAbsoluteTt });
+      shieldDamageTakenData.push({ value: Math.round(shield.explosive.total * 100), label: translate('explosive'), tooltip: shieldDamageTakenExplosiveTt });
+      shieldDamageTakenData.push({ value: Math.round(shield.kinetic.total * 100), label: translate('kinetic'), tooltip: shieldDamageTakenKineticTt });
+      shieldDamageTakenData.push({ value: Math.round(shield.thermal.total * 100), label: translate('thermal'), tooltip: shieldDamageTakenThermalTt });
+
+      maxEffectiveShield = Math.max(shield.total / shield.absolute.max, shield.total / shield.explosive.max, shield.total / shield.kinetic.max, shield.total / shield.thermal.max);
+    }
+
+    const armourSourcesData = [];
+    armourSourcesData.push({ value: Math.round(armour.bulkheads), label: translate('bulkheads') });
+    armourSourcesData.push({ value: Math.round(armour.reinforcement), label: translate('reinforcement') });
+
+    const armourSourcesTt = [];
+    const effectiveArmourAbsoluteTt = [];
+    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>);
+      }
+    }
+
+    const rawArmour = armour.bulkheads + armour.reinforcement;
+
+    const armourDamageTakenTt = [];
+    armourDamageTakenTt.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.pct1(armour.absolute.bulkheads)}</div>);
+    armourDamageTakenTt.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.pct1(armour.absolute.reinforcement)}</div>);
+
+    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.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.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.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;
+    effectiveArmourData.push({ value: Math.round(effectiveAbsoluteArmour), label: translate('absolute'), tooltip: effectiveArmourAbsoluteTt });
+    const effectiveExplosiveArmour = armour.total / armour.explosive.total;
+    effectiveArmourData.push({ value: Math.round(effectiveExplosiveArmour), label: translate('explosive'), tooltip: effectiveArmourExplosiveTt });
+    const effectiveKineticArmour = armour.total / armour.kinetic.total;
+    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'>
-        {shields.withSCBs ? <span>
+        {shield.total ? <span>
           <div className='group quarter'>
             <h2>{translate('shield metrics')}</h2>
             <br/>
-            <h2 onMouseOver={termtip.bind(null, <div>{shieldSourcesTt}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw shield strength')}<br/>{formats.int(shields.withSCBs)}{units.MJ}</h2>
-            <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_SHIELDS')}<br/>TODO</h2>
-            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECOVER'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECOVER_SHIELDS')}<br/>{shields.recover ? formats.time(shields.recover) : translate('never')}</h2>
-            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECHARGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECHARGE_SHIELDS')}<br/>{shields.recharge ? formats.time(shields.recharge) : translate('never')}</h2>
+            <h2 onMouseOver={termtip.bind(null, <div>{shieldSourcesTt}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw shield strength')}<br/>{formats.int(shield.total)}{units.MJ}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_SHIELDS')}<br/>{shielddamage.totalsdps == 0 ? translate('ever') : formats.time(Calc.timeToDeplete(shield.total, shielddamage.totalsdps, shielddamage.totalseps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * opponentWep / 4))}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECOVER'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECOVER_SHIELDS')}<br/>{shield.recover === Math.Inf ? translate('never') : formats.time(shield.recover)}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECHARGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECHARGE_SHIELDS')}<br/>{shield.recharge === Math.Inf ? translate('never') : formats.time(shield.recharge)}</h2>
           </div>
           <div className='group quarter'>
             <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_SOURCES'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield sources')}</h2>
@@ -152,11 +250,11 @@ export default class Defence extends TranslatedComponent {
 
         <div className='group quarter'>
           <h2>{translate('armour metrics')}</h2>
-          <h2 onMouseOver={termtip.bind(null, <div>{armourSourcesTt}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw armour strength')}<br/>{formats.int(armour.armour)}</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_ARMOUR')}<br/>TODO</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_MODULE_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('raw module armour')}<br/>{formats.int(moduleProtection.moduleArmour)}</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_MODULE_PROTECTION_EXTERNAL'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_MODULE_PROTECTION_EXTERNAL')}<br/>{formats.pct1((1 - moduleProtection.moduleProtection) / 2)}</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_MODULE_PROTECTION_INTERNAL'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_MODULE_PROTECTION_INTERNAL')}<br/>{formats.pct1(1 - moduleProtection.moduleProtection)}</h2>
+          <h2 onMouseOver={termtip.bind(null, <div>{armourSourcesTt}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw armour strength')}<br/>{formats.int(armour.total)}</h2>
+          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_ARMOUR')}<br/>{armourdamage.totalsdps == 0 ? translate('ever') : formats.time(Calc.timeToDeplete(armour.total, armourdamage.totalsdps, armourdamage.totalseps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * opponentWep / 4))}</h2>
+          <h2 onMouseOver={termtip.bind(null, translate('TT_MODULE_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('raw module armour')}<br/>{formats.int(armour.modulearmour)}</h2>
+          <h2 onMouseOver={termtip.bind(null, translate('TT_MODULE_PROTECTION_EXTERNAL'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_MODULE_PROTECTION_EXTERNAL')}<br/>{formats.pct1(armour.moduleprotection / 2)}</h2>
+          <h2 onMouseOver={termtip.bind(null, translate('TT_MODULE_PROTECTION_INTERNAL'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_MODULE_PROTECTION_INTERNAL')}<br/>{formats.pct1(armour.moduleprotection)}</h2>
           <br/>
         </div>
         <div className='group quarter'>

src/app/components/EngineProfile.jsx

@@ -2,58 +2,98 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import LineChart from '../components/LineChart';
-import { getBoostMultiplier, getSpeedMultipliers } from 'ed-forge/lib/stats/SpeedProfile';
-import { ShipProps } from 'ed-forge';
-const { LADEN_MASS } = ShipProps;
+import * as Calc from '../shipyard/Calculations';
 
 /**
  * Engine profile for a given ship
  */
 export default class EngineProfile extends TranslatedComponent {
   static propTypes = {
-    code: PropTypes.string.isRequired,
     ship: PropTypes.object.isRequired,
     cargo: PropTypes.number.isRequired,
     fuel: PropTypes.number.isRequired,
-    pips: PropTypes.number.isRequired,
+    eng: PropTypes.number.isRequired,
     boost: PropTypes.bool.isRequired,
+    marker: PropTypes.string.isRequired
   };
 
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    const ship = this.props.ship;
+
+    this.state = {
+      calcMaxSpeedFunc: this.calcMaxSpeed.bind(this, ship, this.props.eng, this.props.boost)
+    };
+  }
+
+  /**
+   * Update the state if our ship changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.marker != this.props.marker) {
+      this.setState({ calcMaxSpeedFunc: this.calcMaxSpeed.bind(this, nextProps.ship, nextProps.eng, nextProps.boost) });
+    }
+    return true;
+  }
+
+  /**
+   * Calculate the top speed for this ship given thrusters, mass and pips to ENG
+   * @param  {Object}  ship          The ship
+   * @param  {Object}  eng           The number of pips to ENG
+   * @param  {Object}  boost         If boost is enabled
+   * @param  {Object}  mass          The mass at which to calculate the top speed
+   * @return {number}                The maximum speed
+   */
+  calcMaxSpeed(ship, eng, boost, mass) {
+    // Obtain the top speed
+    return Calc.calcSpeed(mass, ship.speed, ship.standard[1].m, ship.pipSpeed, eng, ship.boost / ship.speed, boost);
+  }
+
   /**
    * Render engine profile
    * @return {React.Component} contents
    */
   render() {
-    const { language } = this.context;
-    const { translate } = language;
-    const { code, ship, pips, boost } = this.props;
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { ship, cargo, eng, fuel, boost } = this.props;
 
     // Calculate bounds for our line chart
-    const minMass = ship.readProp('hullmass');
-    const maxMass = ship.getThrusters().get('enginemaximalmass');
-    const baseSpeed = ship.readProp('speed');
-    const baseBoost = getBoostMultiplier(ship);
-    const cb = (eng, boost, mass) => {
-      const mult = getSpeedMultipliers(ship, mass)[(boost ? 4 : eng) / 0.5];
-      return baseSpeed * (boost ? baseBoost : 1) * mult;
-    };
+    const thrusters = ship.standard[1].m;
+    const minMass = ship.calcLowestPossibleMass({ th: thrusters });
+    const maxMass = thrusters.getMaxMass();
+    const mass = ship.unladenMass + fuel + cargo;
+    const minSpeed = Calc.calcSpeed(maxMass, ship.speed, thrusters, ship.pipSpeed, 0, ship.boost / ship.speed, false);
+    const maxSpeed = Calc.calcSpeed(minMass, ship.speed, thrusters, ship.pipSpeed, 4, ship.boost / ship.speed, true);
+    // Add a mark at our current mass
+    const mark = Math.min(mass, maxMass);
+
+    const code = `${ship.toString()}:${cargo}:${fuel}:${eng}:${boost}`;
+
     // This graph can have a precipitous fall-off so we use lots of points to make it look a little smoother
     return (
       <LineChart
         xMin={minMass}
         xMax={maxMass}
-        yMin={cb(0, false, maxMass)}
-        yMax={cb(4, true, minMass)}
-        // Add a mark at our current mass
-        xMark={Math.min(ship.get(LADEN_MASS), maxMass)}
+        yMin={minSpeed}
+        yMax={maxSpeed}
+        xMark={mark}
         xLabel={translate('mass')}
         xUnit={translate('T')}
         yLabel={translate('maximum speed')}
         yUnit={translate('m/s')}
-        func={cb.bind(this, pips.Eng.base + pips.Eng.mc, boost)}
+        func={this.state.calcMaxSpeedFunc}
         points={1000}
-        // Encode boost in code to re-render on state change
-        code={`${pips.Eng.base + pips.Eng.mc}:${Number(boost)}:${code}`}
+        code={code}
         aspect={0.7}
       />
     );

src/app/components/FSDProfile.jsx

@@ -3,21 +3,46 @@ import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import LineChart from '../components/LineChart';
 import * as Calc from '../shipyard/Calculations';
-import { calculateJumpRange } from 'ed-forge/lib/stats/JumpRangeProfile';
-import { ShipProps } from 'ed-forge';
-const { LADEN_MASS } = ShipProps;
 
 /**
  * FSD profile for a given ship
  */
 export default class FSDProfile extends TranslatedComponent {
   static propTypes = {
-    code: PropTypes.string.isRequired,
     ship: PropTypes.object.isRequired,
     cargo: PropTypes.number.isRequired,
     fuel: PropTypes.number.isRequired,
+    marker: PropTypes.string.isRequired
   };
 
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    const ship = this.props.ship;
+
+    this.state = {
+      calcMaxRangeFunc: this._calcMaxRange.bind(this, ship, this.props.fuel)
+    };
+  }
+
+  /**
+   * Update the state if our ship changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.marker != this.props.marker) {
+      this.setState({ calcMaxRangeFunc: this._calcMaxRange.bind(this, nextProps.ship, nextProps.fuel) });
+    }
+    return true;
+  }
+
   /**
    * Calculate the maximum range for this ship across its applicable mass
    * @param  {Object}  ship          The ship
@@ -35,27 +60,36 @@ export default class FSDProfile extends TranslatedComponent {
    * @return {React.Component} contents
    */
   render() {
-    const { language } = this.context;
-    const { translate } = language;
-    const { code, ship } = this.props;
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { ship, cargo, fuel } = this.props;
+
+
+    // Calculate bounds for our line chart - use thruster info for X
+    const thrusters = ship.standard[1].m;
+    const fsd = ship.standard[2].m;
+    const minMass = ship.calcLowestPossibleMass({ th: thrusters });
+    const maxMass = thrusters.getMaxMass();
+    const mass = ship.unladenMass + fuel + cargo;
+    const minRange = 0;
+    const maxRange = Calc.jumpRange(minMass + fsd.getMaxFuelPerJump(), fsd, fsd.getMaxFuelPerJump(), ship);
+    // Add a mark at our current mass
+    const mark = Math.min(mass, maxMass);
+
+    const code = ship.name + ship.toString() + '.' + fuel;
 
-    const minMass = ship.readProp('hullmass');
-    const maxMass = ship.getThrusters().get('enginemaximalmass');
-    const mass = ship.get(LADEN_MASS);
-    const cb = (mass) => calculateJumpRange(ship, mass, Infinity, true);
     return (
       <LineChart
         xMin={minMass}
         xMax={maxMass}
-        yMin={0}
-        yMax={cb(minMass)}
-        // Add a mark at our current mass
-        xMark={Math.min(mass, maxMass)}
+        yMin={minRange}
+        yMax={maxRange}
+        xMark={mark}
         xLabel={translate('mass')}
         xUnit={translate('T')}
         yLabel={translate('maximum range')}
         yUnit={translate('LY')}
-        func={cb}
+        func={this.state.calcMaxRangeFunc}
         points={200}
         code={code}
         aspect={0.7}

src/app/components/Fuel.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import Slider from '../components/Slider';
-import autoBind from 'auto-bind';
 
 /**
  * Fuel slider
@@ -22,7 +21,8 @@ export default class Fuel extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    autoBind(this);
+
+    this._fuelChange = this._fuelChange.bind(this);
   }
 
   /**

src/app/components/HardpointSlot.jsx

@@ -0,0 +1,152 @@
+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 { Modifications } from 'coriolis-data/dist';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
+import { blueprintTooltip } from '../utils/BlueprintFunctions';
+
+/**
+ * Hardpoint / Utility Slot
+ */
+export default class HardpointSlot extends Slot {
+
+  /**
+   * Get the CSS class name for the slot.
+   * @return {string} CSS Class name
+   */
+  _getClassNames() {
+    return this.props.maxClass > 0 ? 'hardpoint' : null;
+  }
+
+  /**
+   * Get the label for the slot
+   * @param  {Function} translate   Translate function
+   * @return {string}               Label
+   */
+  _getMaxClassLabel(translate) {
+    return translate(['U', 'S', 'M', 'L', 'H'][this.props.maxClass]);
+  }
+
+  /**
+   * Generate the slot contents
+   * @param  {Object} m             Mounted Module
+   * @param  {Boolean} enabled      Slot enabled
+   * @param  {Function} translate   Translate function
+   * @param  {Object} formats       Localized Formats map
+   * @param  {Object} u             Localized Units Map
+   * @return {React.Component}      Slot contents
+   */
+  _getSlotDetails(m, enabled, translate, formats, u) {
+    if (m) {
+      let classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
+      let { drag, drop } = this.props;
+      let { termtip, tooltip } = this.context;
+      let validMods = Modifications.modules[m.grp].modifications || [];
+      let showModuleResistances = Persist.showModuleResistances();
+
+      // Modifications tooltip shows blueprint and grade, if available
+      let modTT = translate('modified');
+      if (m && m.blueprint && m.blueprint.name) {
+        modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+        if (m.blueprint.special && m.blueprint.special.id >= 0) {
+          modTT += ', ' + translate(m.blueprint.special.name);
+        }
+        modTT = (
+          <div>
+            <div>{modTT}</div>
+            {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], null, m.grp, m)}
+          </div>
+        );
+      }
+
+      const className = cn('details', enabled ? '' : 'disabled');
+      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 == 'G' ? <span onMouseOver={termtip.bind(null, 'gimballed')}
+                                               onMouseOut={tooltip.bind(null, null)}><MountGimballed/></span> : ''}
+            {m.mount && m.mount == 'T' ? <span onMouseOver={termtip.bind(null, 'turreted')}
+                                               onMouseOut={tooltip.bind(null, null)}><MountTurret/></span> : ''}
+            {m.getDamageDist() && m.getDamageDist().K ? <span onMouseOver={termtip.bind(null, 'kinetic')}
+                                                              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.getSDps())})</span> : null}</div> : null}
+          {m.getDamage() ? <div className={'l'} onMouseOver={termtip.bind(null, m.getDamage() ? 'shotdmg' : 'shotdmg')}
+                                onMouseOut={tooltip.bind(null, null)}>{translate('shotdmg')}: {formats.round1(m.getDamage())}</div> : null}
+          {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.getEps() * m.getSustainedFactor())}{u.MW})</span> : null}</div> : null}
+          {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.getHps() * m.getSustainedFactor())})</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.getRoF() ? <div className={'l'} onMouseOver={termtip.bind(null, 'rof')}
+                             onMouseOut={tooltip.bind(null, null)}>{translate('ROF')}: {formats.f1(m.getRoF())}{u.ps}</div> : null}
+          {m.getRange() ? <div
+            className={'l'}>{translate('range', m.grp)} {formats.f1(m.getRange() / 1000)}{u.km}</div> : null}
+          {m.getScanTime() ? <div
+            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,29 +1,42 @@
 import React from 'react';
 import SlotSection from './SlotSection';
-import Slot from './Slot';
+import HardpointSlot from './HardpointSlot';
 import { MountFixed, MountGimballed, MountTurret } from '../components/SvgIcons';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
-import autoBind from 'auto-bind';
 
 /**
  * Hardpoint slot section
  */
 export default class HardpointSlotSection extends SlotSection {
+
   /**
    * Constructor
    * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
    */
-  constructor(props) {
-    super(props, 'hardpoints');
-    autoBind(this);
+  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() {
-    // TODO:
-    // this.props.ship.emptyWeapons();
+    this.selectedRefId = 'emptyall';
+    this.props.ship.emptyWeapons();
+    this.props.onChange();
     this._close();
   }
 
@@ -34,8 +47,9 @@ export default class HardpointSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event   Event
    */
   _fill(group, mount, event) {
-    // TODO:
-    // this.props.ship.useWeapon(group, mount, null, event.getModifierState('Alt'));
+    this.selectedRefId = group + '-' + mount;
+    this.props.ship.useWeapon(group, mount, null, event.getModifierState('Alt'));
+    this.props.onChange();
     this._close();
   }
 
@@ -51,24 +65,32 @@ export default class HardpointSlotSection extends SlotSection {
    * @return {Array} Array of Slots
    */
   _getSlots() {
-    let { ship, currentMenu, propsToShow, onPropToggle } = this.props;
+    let { ship, currentMenu } = this.props;
     let { originSlot, targetSlot } = this.state;
     let slots = [];
+    let hardpoints = ship.hardpoints;
+    let availableModules = ship.getAvailableModules();
 
-    for (let h of ship.getHardpoints(undefined, true)) {
-      slots.push(<Slot
-        key={h.object.Slot}
-        maxClass={h.getSize()}
-        currentMenu={currentMenu}
-        drag={this._drag.bind(this, h)}
-        dragOver={this._dragOverSlot.bind(this, h)}
-        drop={this._drop}
-        dropClass={this._dropClass(h, originSlot, targetSlot)}
-        m={h}
-        enabled={h.enabled ? true : false}
-        propsToShow={propsToShow}
-        onPropToggle={onPropToggle}
-      />);
+    for (let i = 0, l = hardpoints.length; i < l; i++) {
+      let h = hardpoints[i];
+      if (h.maxClass) {
+        slots.push(<HardpointSlot
+          key={i}
+          maxClass={h.maxClass}
+          availableModules={() => availableModules.getHps(h.maxClass)}
+          onOpen={this._openMenu.bind(this, h)}
+          onSelect={this._selectModule.bind(this, h)}
+          onChange={this.props.onChange}
+          selected={currentMenu == h}
+          drag={this._drag.bind(this, h)}
+          dragOver={this._dragOverSlot.bind(this, h)}
+          drop={this._drop}
+          dropClass={this._dropClass(h, originSlot, targetSlot)}
+          ship={ship}
+          m={h.m}
+          enabled={h.enabled ? true : false}
+        />);
+      }
     }
 
     return slots;
@@ -79,68 +101,68 @@ export default class HardpointSlotSection extends SlotSection {
    * @param  {Function} translate Translate function
    * @return {React.Component}    Section menu
    */
-  _getSectionMenu() {
-    const { translate } = this.context.language;
+  _getSectionMenu(translate) {
     let _fill = this._fill;
 
     return <div className='select hardpoint' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' tabIndex="0" onClick={this._empty} ref={smRef => this.sectionRefArr['emptyall'] = smRef}>{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" tabIndex="0" onClick={_fill.bind(this, 'pl', 'F')}><MountFixed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'pl', 'G')}><MountGimballed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'pl', 'T')}><MountTurret 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' 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' 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" tabIndex="0" onClick={_fill.bind(this, 'ul', 'F')}><MountFixed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'ul', 'G')}><MountGimballed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'ul', 'T')}><MountTurret 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' 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' 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" tabIndex="0" onClick={_fill.bind(this, 'bl', 'F')}><MountFixed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'bl', 'G')}><MountGimballed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'bl', 'T')}><MountTurret 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' 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' 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" tabIndex="0" onClick={_fill.bind(this, 'mc', 'F')}><MountFixed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'mc', 'G')}><MountGimballed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'mc', 'T')}><MountTurret 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' 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' 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" tabIndex="0" onClick={_fill.bind(this, 'c', 'F')}><MountFixed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'c', 'G')}><MountGimballed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'c', 'T')}><MountTurret 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' 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' 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" tabIndex="0" onClick={_fill.bind(this, 'fc', 'F')}><MountFixed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'fc', 'G')}><MountGimballed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'fc', 'T')}><MountTurret 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' 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' 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' tabIndex="0"  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')}>{translate('rg')}</li>
+        <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' tabIndex="0" 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')}><MountFixed className='lg'/></li>
-        <li className="c" tabIndex="0" onClick={_fill.bind(this, 'rfl', 'T')}><MountTurret className='lg'/></li>
+        <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

@@ -10,7 +10,6 @@ import { Ships } from 'coriolis-data/dist';
 import Persist from '../stores/Persist';
 import { toDetailedExport } from '../shipyard/Serializer';
 import Ship from '../shipyard/Ship';
-import ModalBatchOrbis from './ModalBatchOrbis';
 import ModalDeleteAll from './ModalDeleteAll';
 import ModalExport from './ModalExport';
 import ModalHelp from './ModalHelp';
@@ -56,11 +55,12 @@ function selectAll(e) {
  * Coriolis App Header section / menus
  */
 export default class Header extends TranslatedComponent {
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
+
+	/**
+	 * Constructor
+	 * @param  {Object} props   React Component properties
+	 * @param  {Object} context React Component context
+	 */
   constructor(props, context) {
     super(props);
     this.shipOrder = Object.keys(Ships).sort();
@@ -240,43 +240,6 @@ export default class Header extends TranslatedComponent {
     />);
   };
 
-  /**
-   * Uploads all ship-builds to orbis
-   * @param {e} e Event
-   */
-  _uploadAllBuildsToOrbis(e) {
-    e.preventDefault();
-    const data = Persist.getBuilds();
-    let postObject = [];
-    for (const ship in data) {
-      for (const code in data[ship]) {
-        const shipModel = ship;
-        if (!shipModel) {
-          throw 'No such ship found: "' + ship + '"';
-        }
-        const shipTemplate = Ships[shipModel];
-        const shipPostObject = {};
-        let shipInstance = new Ship(shipModel, shipTemplate.properties, shipTemplate.slots);
-        shipInstance.buildWith(null);
-        shipInstance.buildFrom(data[ship][code]);
-        shipPostObject.coriolisId = shipInstance.id;
-        shipPostObject.coriolisShip = shipInstance;
-
-        shipPostObject.coriolisShip.url = window.location.origin + outfitURL(shipModel, data[ship][code], code);
-        shipPostObject.title = code || shipInstance.id;
-        shipPostObject.description = code || shipInstance.id;
-        shipPostObject.ShipName = shipInstance.id;
-        shipPostObject.Ship = shipInstance.id;
-        postObject.push(shipPostObject);
-      }
-    }
-    console.log(postObject);
-
-    this.context.showModal(<ModalBatchOrbis
-      ships={postObject}
-    />);
-  }
-
   /**
    * Show export modal with detailed export
    * @param  {SyntheticEvent} e Event
@@ -425,14 +388,18 @@ export default class Header extends TranslatedComponent {
     if (this.props.announcements) {
       announcements = [];
       for (let announce of this.props.announcements) {
-        announcements.push(<Announcement text={announce.message} />);
+        // Announcement has expired, skip it
+        if (Date.now() > Date.parse(announce.expiry)) {
+          continue;
+        }
+        // Add announcements which have not expired to the menu
+        announcements.push(<Announcement text={announce.text} />);
         announcements.push(<hr/>);
       }
     }
     return (
       <div className='menu-list' onClick={ (e) => e.stopPropagation() } style={{ whiteSpace: 'nowrap' }}>
         {announcements}
-        <hr />
       </div>
     );
   }
@@ -495,7 +462,6 @@ export default class Header extends TranslatedComponent {
           {translate('builds')} & {translate('comparisons')}
           <li><Link href="#" className='block' onClick={this._showBackup.bind(this)}>{translate('backup')}</Link></li>
           <li><Link href="#" className='block' onClick={this._showDetailedExport.bind(this)}>{translate('detailed export')}</Link></li>
-          <li><Link href="#" className='block' onClick={this._uploadAllBuildsToOrbis.bind(this)}>{translate('upload all builds to orbis')}</Link></li>
           <li><Link href="#" className='block' onClick={this._showImport.bind(this)}>{translate('import')}</Link></li>
           <li><Link href="#" className='block' onClick={this._showDeleteAll.bind(this)}>{translate('delete all')}</Link></li>
         </ul>
@@ -508,7 +474,7 @@ export default class Header extends TranslatedComponent {
               <td style={{ width: 20 }}><span style={{ fontSize: 30 }}>A</span></td>
             </tr>
             <tr>
-              <td colSpan='3' style={{ textAlign: 'center', cursor: 'pointer' }} className='primary-disabled cap' onClick={this._resetTextSize.bind(this)}>{translate('reset')}</td>
+             <td colSpan='3' style={{ textAlign: 'center', cursor: 'pointer' }} className='primary-disabled cap' onClick={this._resetTextSize.bind(this)}>{translate('reset')}</td>
             </tr>
           </tbody>
         </table>
@@ -607,7 +573,7 @@ export default class Header extends TranslatedComponent {
         </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}>
+          <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}
@@ -638,4 +604,5 @@ export default class Header extends TranslatedComponent {
       </header>
     );
   }
+
 }

src/app/components/InternalSlot.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import cn from 'classnames';
+import Slot from './Slot';
+import Persist from '../stores/Persist';
+import { ListModifications, Modified } from './SvgIcons';
+import { Modifications } from 'coriolis-data/dist';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
+import { blueprintTooltip } from '../utils/BlueprintFunctions';
+
+/**
+ * Internal Slot
+ */
+export default class InternalSlot extends Slot {
+
+  /**
+   * Generate the slot contents
+   * @param  {Object} m             Mounted Module
+   * @param  {Boolean} enabled      Slot enabled
+   * @param  {Function} translate   Translate function
+   * @param  {Object} formats       Localized Formats map
+   * @param  {Object} u             Localized Units Map
+   * @return {React.Component}      Slot contents
+   */
+  _getSlotDetails(m, enabled, translate, formats, u) {
+    if (m) {
+      let classRating = m.class + m.rating;
+      let { drag, drop, ship } = this.props;
+      let { termtip, tooltip } = this.context;
+      let validMods = (Modifications.modules[m.grp] ? Modifications.modules[m.grp].modifications : []);
+      let showModuleResistances = Persist.showModuleResistances();
+
+      // Modifications tooltip shows blueprint and grade, if available
+      let modTT = translate('modified');
+      if (m && m.blueprint && m.blueprint.name) {
+        modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+        if (m.blueprint.special && m.blueprint.special.id >= 0) {
+          modTT += ', ' + translate(m.blueprint.special.name);
+        }
+        modTT = (
+          <div>
+            <div>{modTT}</div>
+            {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], null, m.grp, m)}
+          </div>
+        );
+      }
+
+      let mass = m.getMass() || m.cargo || m.fuel || 0;
+
+      const className = cn('details', enabled ? '' : 'disabled');
+      return <div className={className} draggable='true' onDragStart={drag} onDragEnd={drop}>
+        <div className={'cb'}>
+          <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : ''}</div>
+          <div className={'r'}>{formats.round(mass)}{u.T}</div>
+        </div>
+        <div className={'cb'}>
+          { m.getOptMass() ? <div className={'l'}>{translate('optmass', 'sg')}: {formats.int(m.getOptMass())}{u.T}</div> : null }
+          { m.getMaxMass() ? <div className={'l'}>{translate('maxmass', 'sg')}: {formats.int(m.getMaxMass())}{u.T}</div> : null }
+          { m.bins ? <div className={'l'}>{m.bins} <u>{translate('bins')}</u></div> : null }
+          { m.bays ? <div className={'l'}>{translate('bays')}: {m.bays}</div> : null }
+          { m.rebuildsperbay ? <div className={'l'}>{translate('rebuildsperbay')}: {m.rebuildsperbay}</div> : null }
+          { m.rate ? <div className={'l'}>{translate('rate')}: {m.rate}{u.kgs}&nbsp;&nbsp;&nbsp;{translate('refuel time')}: {formats.time(this.props.fuel * 1000 / m.rate)}</div> : null }
+          { m.getAmmo() && m.grp !== 'scb' ? <div className={'l'}>{translate('ammunition')}: {formats.gen(m.getAmmo())}</div> : null }
+          { 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 }
+          { m.getFacingLimit() ? <div className={'l'}>{translate('facinglimit')} {formats.f1(m.getFacingLimit())}°</div> : null }
+          { m.getRange() ? <div className={'l'}>{translate('range')} {formats.f2(m.getRange())}{u.km}</div> : null }
+          { m.getRangeT() ? <div className={'l'}>{translate('ranget')} {formats.f1(m.getRangeT())}{u.s}</div> : null }
+          { m.getTime() ? <div className={'l'}>{translate('time')}: {formats.time(m.getTime())}</div> : null }
+          { m.getHackTime() ? <div className={'l'}>{translate('hacktime')}: {formats.time(m.getHackTime())}</div> : null }
+          { m.maximum ? <div className={'l'}>{translate('max')}: {(m.maximum)}</div> : null }
+          { m.rangeLS ? <div className={'l'}>{translate('range')}: {m.rangeLS}{u.Ls}</div> : null }
+          { m.rangeLS === null ? <div className={'l'}>∞{u.Ls}</div> : null }
+          { m.rangeRating ? <div className={'l'}>{translate('range')}: {m.rangeRating}</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.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/InternalSlotSection.jsx

@@ -1,30 +1,52 @@
 import React from 'react';
 import SlotSection from './SlotSection';
-import Slot from './Slot';
+import InternalSlot from './InternalSlot';
 import * as ModuleUtils from '../shipyard/ModuleUtils';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import { canMount } from '../utils/SlotFunctions';
-import autoBind from 'auto-bind';
 
 /**
  * Internal slot section
  */
 export default class InternalSlotSection extends SlotSection {
+
   /**
    * Constructor
    * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
    */
-  constructor(props) {
-    super(props, 'optional internal');
-    autoBind(this);
+  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);
+    this._fillWithArmor = this._fillWithArmor.bind(this);
+    this._fillWithModuleReinforcementPackages = this._fillWithModuleReinforcementPackages.bind(this);
+    this._fillWithFuelTanks = this._fillWithFuelTanks.bind(this);
+    this._fillWithLuxuryCabins = this._fillWithLuxuryCabins.bind(this);
+    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() {
-    // TODO:
-    // this.props.ship.emptyInternal();
+    this.selectedRefId = 'emptyall';
+    this.props.ship.emptyInternal();
+    this.props.onChange();
     this._close();
   }
 
@@ -33,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) => {
@@ -40,6 +63,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('cr', slot.maxClass, 'E'));
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -48,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) => {
@@ -55,6 +80,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('ft', slot.maxClass, 'C'));
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -63,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) => {
@@ -70,6 +97,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('pcq', Math.min(slot.maxClass, 6), 'B')); // Passenger cabins top out at 6
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -78,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) => {
@@ -85,6 +114,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('pcm', Math.min(slot.maxClass, 6), 'C')); // Passenger cabins top out at 6
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -93,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) => {
@@ -100,6 +131,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('pci', Math.min(slot.maxClass, 6), 'D')); // Passenger cabins top out at 6
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -108,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) => {
@@ -115,6 +148,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('pce', Math.min(slot.maxClass, 6), 'E')); // Passenger cabins top out at 6
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -123,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
@@ -133,6 +168,7 @@ export default class InternalSlotSection extends SlotSection {
         chargeCap += slot.m.recharge;
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -141,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) => {
@@ -148,6 +185,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('hr', Math.min(slot.maxClass, 5), 'D')); // Hull reinforcements top out at 5D
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -156,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) => {
@@ -163,6 +202,7 @@ export default class InternalSlotSection extends SlotSection {
         ship.use(slot, ModuleUtils.findInternal('mrp', Math.min(slot.maxClass, 5), 'D')); // Module reinforcements top out at 5D
       }
     });
+    this.props.onChange();
     this._close();
   }
 
@@ -179,20 +219,31 @@ export default class InternalSlotSection extends SlotSection {
    */
   _getSlots() {
     let slots = [];
-    let { currentMenu, ship, propsToShow, onPropToggle } = this.props;
+    let { currentMenu, ship } = this.props;
     let { originSlot, targetSlot } = this.state;
+    let { internal, fuelCapacity } = ship;
+    let availableModules = ship.getAvailableModules();
 
-    for (const m of ship.getInternals(undefined, true)) {
-      slots.push(<Slot
-        key={m.object.Slot}
-        currentMenu={currentMenu}
-        m={m}
-        drag={this._drag.bind(this, m)}
-        dragOver={this._dragOverSlot.bind(this, m)}
+    for (let i = 0, l = internal.length; i < l; i++) {
+      let s = internal[i];
+
+      slots.push(<InternalSlot
+        key={i}
+        maxClass={s.maxClass}
+        availableModules={() => availableModules.getInts(ship, s.maxClass, s.eligible)}
+        onOpen={this._openMenu.bind(this,s)}
+	onChange={this.props.onChange}
+        onSelect={this._selectModule.bind(this, s)}
+        selected={currentMenu == s}
+        eligible={s.eligible}
+        m={s.m}
+        drag={this._drag.bind(this, s)}
+        dragOver={this._dragOverSlot.bind(this, s)}
         drop={this._drop}
-        dropClass={this._dropClass(m, originSlot, targetSlot)}
-        propsToShow={propsToShow}
-        onPropToggle={onPropToggle}
+        dropClass={this._dropClass(s, originSlot, targetSlot)}
+        fuel={fuelCapacity}
+        ship={ship}
+        enabled={s.enabled ? true : false}
       />);
     }
 
@@ -205,23 +256,22 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {Function} ship      The ship
    * @return {React.Component}    Section menu
    */
-  _getSectionMenu() {
-    const { ship } = this.props;
-    const { translate } = this.context.language;
+  _getSectionMenu(translate, ship) {
     return <div className='select' onClick={e => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' tabIndex='0' onClick={this._empty}>{translate('empty all')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithCargo}>{translate('cargo')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithCells}>{translate('scb')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithArmor}>{translate('hr')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithModuleReinforcementPackages}>{translate('mrp')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithFuelTanks}>{translate('ft')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithEconomyClassCabins}>{translate('pce')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithBusinessClassCabins}>{translate('pci')}</li>
-        <li className='lc' tabIndex='0' onClick={this._fillWithFirstClassCabins} onKeyDown={ship.luxuryCabins ? '' : this._keyDown}>{translate('pcm')}</li>
-        { ship.luxuryCabins ? <li className='lc' tabIndex='0' onClick={this._fillWithLuxuryCabins}>{translate('pcq')}</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' tabIndex='0' onClick={this._fillWithCargo} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['cargo'] = smRef}>{translate('cargo')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithCells} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['scb'] = smRef}>{translate('scb')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithArmor} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['hr'] = smRef}>{translate('hr')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithModuleReinforcementPackages} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mrp'] = smRef}>{translate('mrp')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithFuelTanks} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ft'] = smRef}>{translate('ft')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithEconomyClassCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pce'] = smRef}>{translate('pce')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithBusinessClassCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pci'] = smRef}>{translate('pci')}</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' 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

@@ -57,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, ship);
+    return Calc.jumpRange(ship.unladenMass + cargo, fsd, fuel, ship);
   }
 
   /**

src/app/components/LineChart.jsx

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

src/app/components/Link.jsx

@@ -7,6 +7,7 @@ import { shallowEqual } from '../utils/UtilityFunctions';
  * Link wrapper component
  */
 export default class Link extends React.Component {
+
   static propTypes = {
     children: PropTypes.any,
     href: PropTypes.string.isRequired,
@@ -55,4 +56,5 @@ export default class Link extends React.Component {
   render() {
     return <a {...this.props} onClick={this.handler}>{this.props.children}</a>;
   }
+
 }

src/app/components/ModalBatchOrbis.jsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import request from 'superagent';
-import TranslatedComponent from './TranslatedComponent';
-import { orbisUpload } from '../utils/ShortenUrl';
-import Persist from '../stores/Persist';
-
-/**
- * Permalink modal
- */
-export default class ModalBatchOrbis extends TranslatedComponent {
-  static propTypes = {
-    ships: PropTypes.any.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      orbisCreds: Persist.getOrbisCreds(),
-      resp: ''
-    };
-  }
-
-  /**
-   * Send ship to Orbis.zone
-   * @param {SyntheticEvent} e React Event
-   * @return {Promise} Promise sending post request to orbis
-   */
-  sendToOrbis(e) {
-    let agent;
-    try {
-      agent = request.agent(); // apparently this crashes somehow
-    } catch (e) {
-      console.error(e);
-    }
-    if (!agent) {
-      agent = request;
-    }
-    const API_ORBIS = 'https://orbis.zone/api/builds/add/batch';
-    return new Promise((resolve, reject) => {
-      try {
-        agent
-          .post(API_ORBIS)
-          .withCredentials()
-          .redirects(0)
-          .set('Content-Type', 'application/json')
-          .send(this.props.ships)
-          .end((err, response) => {
-            console.log(response);
-            if (err) {
-              console.error(err);
-              this.setState({ resp: response.text });
-              reject('Bad Request');
-            } else {
-              this.setState({ resp: 'All builds uploaded. Check https://orbis.zone' });
-              resolve('All builds uploaded. Check https://orbis.zone');
-            }
-          });
-      } catch (e) {
-        console.log(e);
-        reject(e.message ? e.message : e);
-      }
-    });
-  }
-
-  /**
-   * Render the modal
-   * @return {React.Component} Modal Content
-   */
-  render() {
-    let translate = this.context.language.translate;
-    this.sendToOrbis = this.sendToOrbis.bind(this);
-
-    return <div className='modal' onClick={ (e) => e.stopPropagation() }>
-      <h2>{translate('permalink')}</h2>
-      <br/>
-      <a className='button' href="https://orbis.zone/api/auth">Log in / signup to Orbis</a>
-      <br/><br/>
-      <h3 >{translate('success')}</h3>
-      <input value={this.state.resp} readOnly size={25} onFocus={ (e) => e.target.select() }/>
-      <br/><br/>
-      <p>Orbis.zone is currently in a trial period, and may be wiped at any time as development progresses. Some elements are also still placeholders.</p>
-      <button className={'l cb dismiss cap'} disabled={!!this.state.failed} onClick={this.sendToOrbis}>{translate('PHASE_UPLOAD_ORBIS')}</button>
-      <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
-    </div>;
-  }
-}

src/app/components/ModalCompare.jsx

@@ -21,6 +21,7 @@ function buildComparator(a, b) {
  * Compare builds modal
  */
 export default class ModalCompare extends TranslatedComponent {
+
   static propTypes = {
     onSelect: PropTypes.func.isRequired,
     builds: PropTypes.array
@@ -104,8 +105,8 @@ export default class ModalCompare extends TranslatedComponent {
 
     let selectedBuilds = usedBuilds.map((build, i) =>
       <tr key={i} onClick={this._removeBuild.bind(this, i)}>
-        <td className='tl'>{build.name}</td>
-        <td className='tl'>{build.buildName}</td>
+        <td className='tl'>{build.name}</td><
+        td className='tl'>{build.buildName}</td>
       </tr>
     );
 

src/app/components/ModalExport.jsx

@@ -6,6 +6,7 @@ import TranslatedComponent from './TranslatedComponent';
  * Export Modal
  */
 export default class ModalExport extends TranslatedComponent {
+
   static propTypes = {
     title: PropTypes.string,
     generator: PropTypes.func,

src/app/components/ModalHelp.jsx

@@ -7,10 +7,19 @@ import TranslatedComponent from './TranslatedComponent';
  * Help Modal
  */
 export default class ModalHelp extends TranslatedComponent {
+
   static propTypes = {
     title: PropTypes.string
   };
 
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+  }
+
   /**
    * Render the modal
    * @return {React.Component} Modal Content

src/app/components/ModalImport.jsx

@@ -11,7 +11,8 @@ 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');
 
@@ -85,7 +86,10 @@ function detailedJsonToBuild(detailedBuild) {
  * Import Modal
  */
 export default class ModalImport extends TranslatedComponent {
+
+
   static propTypes = {
+    importString: PropTypes.string, // Optional: Default data for import modal
     builds: PropTypes.object,  // Optional: Import object
   };
 
@@ -104,7 +108,7 @@ export default class ModalImport extends TranslatedComponent {
       shipDiscount: null,
       moduleDiscount: null,
       errorMsg: null,
-      importString: null,
+      importString: props.importString || null,
       importValid: false,
       insurance: null
     };
@@ -128,7 +132,7 @@ export default class ModalImport extends TranslatedComponent {
     if (data && data.Ship && data.Modules) {
       const deflated = zlib.deflate(JSON.stringify(data), { to: 'string' });
       let compressed = btoa(deflated);
-      this.setState({ loadoutEvent: compressed });
+      this.setState({loadoutEvent: compressed});
     } else {
       throw 'Loadout event must contain Ship and Modules';
     }
@@ -212,8 +216,8 @@ export default class ModalImport extends TranslatedComponent {
    * @throws {string} if parse/import fails
    */
   _importCompanionApiBuild(build) {
-    const shipModel = CompanionApiUtils.shipModelFromJson(build);
-    const ship = CompanionApiUtils.shipFromJson(build);
+    const shipModel = shipModelFromJson(build);
+    const ship = shipFromJson(build);
 
     let builds = {};
     builds[shipModel] = {};
@@ -319,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
@@ -353,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
-          this._importCompanionApiBuild(importData); // Single sihp definition
+        if (importData?.[0]?.header?.appName) { // has SLEF envelope?
+          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

src/app/components/ModalOrbis.jsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import TranslatedComponent from './TranslatedComponent';
-import { orbisUpload } from '../utils/ShortenUrl';
-import Persist from '../stores/Persist';
-
-/**
- * Permalink modal
- */
-export default class ModalOrbis extends TranslatedComponent {
-  static propTypes = {
-    ship: PropTypes.any.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      orbisCreds: Persist.getOrbisCreds(),
-      orbisUrl: '...',
-      ship: this.props.ship,
-      authenticatedStatus: 'Checking...'
-    };
-    this.orbisCategory = this.orbisCategory.bind(this);
-  }
-
-  /**
-   * Send ship to Orbis.zone
-   * @param {SyntheticEvent} e React Event
-   */
-  sendToOrbis(e) {
-    const target = e.target;
-    target.disabled = true;
-    this.setState({ orbisUrl: 'Sending...' }, () => {
-      orbisUpload(this.props.ship, this.state.orbisCreds)
-        .then(orbisUrl => {
-          target.disabled = false;
-          this.setState({ orbisUrl });
-        })
-        .catch(err => {
-          target.disabled = false;
-          this.setState({ orbisUrl: 'Error - ' + err });
-        });
-    });
-  }
-
-  /**
-   * Get Orbis.zone auth status
-   * @returns {Object} auth status
-   */
-  getOrbisAuthStatus() {
-    return fetch('https://orbis.zone/api/checkauth', {
-      credentials: 'include',
-      mode: 'cors'
-    })
-      .then(data => data.json())
-      .then(res => {
-        this.setState({ authenticatedStatus: res.status || res.error });
-      })
-      .catch(err => {
-        console.error(err);
-        this.setState({ authenticatedStatus: err.message });
-      });
-  }
-
-  /**
-   * Handler for changing cmdr name
-   * @param {SyntheticEvent} e React Event
-   */
-  orbisPasswordHandler(e) {
-    let password = e.target.value;
-    this.setState({ orbisCreds: { email: this.state.orbisCreds.email, password } }, () => {
-      Persist.setOrbisCreds(this.state.orbisCreds);
-    });
-  }
-
-  /**
-   * Handler for changing cmdr name
-   * @param {SyntheticEvent} e React Event
-   */
-  orbisUsername(e) {
-    let orbisUsername = e.target.value;
-    this.setState({ orbisCreds: { email: orbisUsername, password: this.state.orbisCreds.password } }, () => {
-      Persist.setOrbisCreds(this.state.orbisCreds);
-    });
-  }
-
-  /**
-   * Handler for changing category
-   * @param {SyntheticEvent} e React Event
-   */
-  orbisCategory(e) {
-    let ship = this.state.ship;
-    let cat = e.target.value;
-    ship.category = cat;
-    this.setState({ ship });
-  }
-
-  /**
-   * Render the modal
-   * @return {React.Component} Modal Content
-   */
-  render() {
-    let translate = this.context.language.translate;
-    this.orbisPasswordHandler = this.orbisPasswordHandler.bind(this);
-    this.orbisUsername = this.orbisUsername.bind(this);
-    this.sendToOrbis = this.sendToOrbis.bind(this);
-    this.getOrbisAuthStatus();
-    return <div className='modal' onClick={ (e) => e.stopPropagation() }>
-      <h2>{translate('upload to orbis')}</h2>
-      <br/>
-      <label>Orbis auth status: </label>
-      <input value={this.state.authenticatedStatus} readOnly size={25} onFocus={ (e) => e.target.select() }/>
-      <br/><br/>
-      <a className='button' href="https://orbis.zone/api/auth">Log in / signup to Orbis</a>
-      <br/><br/>
-      <h3>Category</h3>
-      <select onChange={this.orbisCategory}>
-        <option value="">No Category</option>
-        <option>Combat</option>
-        <option>Mining</option>
-        <option>Trading</option>
-        <option>Exploration</option>
-        <option>Passenger Liner</option>
-        <option>PvP</option>
-      </select>
-      <br/><br/>
-      <h3 >{translate('Orbis link')}</h3>
-      <input value={this.state.orbisUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/>
-      <br/><br/>
-      <p>Orbis.zone is currently in a trial period, and may be wiped at any time as development progresses. Some elements are also still placeholders.</p>
-      <button className={'l cb dismiss cap'} disabled={!!this.state.failed} onClick={this.sendToOrbis}>{translate('PHASE_UPLOAD_ORBIS')}</button>
-      <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
-    </div>;
-  }
-}

src/app/components/ModalPermalink.jsx

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

src/app/components/ModalShoppingList.jsx

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

src/app/components/Modification.jsx

@@ -3,52 +3,73 @@ import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
 import NumberEditor from 'react-number-editor';
-import { Module } from 'ed-forge';
+import { isChangeValueBeneficial } from '../utils/BlueprintFunctions';
+import { Modifications } from 'coriolis-data/dist';
 
 /**
  * Modification
  */
 export default class Modification extends TranslatedComponent {
   static propTypes = {
-    highlight: PropTypes.bool,
-    m: PropTypes.instanceOf(Module).isRequired,
-    property: PropTypes.string.isRequired,
-    onSet: PropTypes.func.isRequired,
-    showProp: PropTypes.object,
-    onPropToggle: PropTypes.func.isRequired,
+    ship: PropTypes.object.isRequired,
+    m: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onKeyDown: PropTypes.func.isRequired,
+    modItems: PropTypes.array.isRequired,
+    handleModChange: PropTypes.func.isRequired
   };
 
   /**
    * Constructor
    * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
    */
-  constructor(props) {
+  constructor(props, context) {
     super(props);
-    const { m, property, showProp } = props;
-    const { beneficial, unit, value } = m.getFormatted(property, true);
-    this.state = { beneficial, unit, value, showProp };
+    this.state = {};
+    this.state.value = props.value;
   }
 
   /**
-   * Notify listeners that a new value has been entered and commited.
+   * Update modification given a value.
+   * @param {Number} value The value to set.  This comes in as a string and must be stored in state as a string,
+   *                       because it needs to allow illegal 'numbers' ('-', '1.', etc) when the user is typing
+   *                       in a value by hand
    */
-  _updateFinished() {
-    const { onSet, m, property } = this.props;
-    const { inputValue } = this.state;
-    const numValue = Number(inputValue);
-    if (!isNaN(numValue) && this.state.value !== numValue) {
-      onSet(property, numValue);
-      const { beneficial, unit, value } = m.getFormatted(property, true);
-      this.setState({ beneficial, unit, value });
+  _updateValue(value) {
+    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);
     }
   }
 
-  _toggleProperty() {
-    const { onPropToggle, property } = this.props;
-    const showProp = !this.state.showProp;
-    // TODO: defer until menu closed
-    onPropToggle(property, showProp);
-    this.setState({ showProp });
+  /**
+   * 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();
+    }
   }
 
   /**
@@ -56,53 +77,57 @@ export default class Modification extends TranslatedComponent {
    * @return {React.Component} modification
    */
   render() {
-    const { formats } = this.context.language;
-    const { highlight, m, property } = this.props;
-    const { beneficial, unit, value, inputValue, showProp } = this.state;
+    let { translate, formats, units } = this.context.language;
+    let { m, name } = this.props;
+    let modValue = m.getChange(name);
+    let isOverwrite = Modifications.modifications[name].method === 'overwrite';
 
-    // Some features only apply to specific modules; these features will be
-    // undefined on items that do not belong to the same class. Filter these
-    // features here
-    if (value === undefined) {
+    if (name === 'damagedist') {
+      // We don't show damage distribution
       return null;
     }
 
-    const { value: modifierValue, unit: modifierUnit } = m.getModifierFormatted(property);
+    let inputClassNames = {
+      'cb': true,
+      'greyed-out': !this.props.highlight
+    };
+
     return (
-      <tr>
-        <td>
-          <span>
-            <input type="checkbox" checked={showProp} onClick={() => this._toggleProperty()}/>
-          </span>
-        </td>
-        <td className="input-container">
-          <span>
-            <NumberEditor value={inputValue || value} stepModifier={1}
-              decimals={2} step={0.01} style={{ textAlign: 'right', width: '100%' }}
-              className={cn('cb', { 'greyed-out': !highlight })}
-              onKeyDown={(event) => {
-                if (event.key == 'Enter') {
-                  this._updateFinished();
-                  event.stopPropagation();
-                }
-              }}
-              onValueChange={(inputValue) => {
-                if (inputValue.length <= 15) {
-                  this.setState({ inputValue });
-                }
-              }} />
-          </span>
-        </td>
-        <td style={{ textAlign: 'left' }}>
-          <span className="unit-container">{unit}</span>
-        </td>
-        <td style={{ textAlign: 'center' }}
-          className={cn({
-            secondary: beneficial,
-            warning: beneficial === false,
-          })}
-        >{formats.f2(modifierValue)}{modifierUnit || ''}</td>
-      </tr>
+      <div onBlur={this._updateFinished.bind(this)} key={name}
+        className={cn('cb', 'modification-container')}
+        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

@@ -1,27 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { chain, flatMap, keys } from 'lodash';
+import * as _ from 'lodash';
 import TranslatedComponent from './TranslatedComponent';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
+import { Modifications } from 'coriolis-data/dist';
 import Modification from './Modification';
 import {
+  getBlueprint,
   blueprintTooltip,
+  setPercent,
+  getPercent,
+  setRandom,
   specialToolTip
 } from '../utils/BlueprintFunctions';
-import { getBlueprintInfo, getExperimentalInfo } from 'ed-forge/lib/data/blueprints';
-import { getModuleInfo } from 'ed-forge/lib/data/items';
-import { SHOW } from '../shipyard/StatsMapping';
+
+const MODIFICATIONS_COMPARATOR = (mod1, mod2) => {
+  return mod1.props.name.localeCompare(mod2.props.name);
+};
 
 /**
  * Modifications menu
  */
 export default class ModificationsMenu extends TranslatedComponent {
   static propTypes = {
-    className: PropTypes.string,
+    ship: PropTypes.object.isRequired,
     m: PropTypes.object.isRequired,
-    propsToShow: PropTypes.object.isRequired,
-    onPropToggle: PropTypes.func.isRequired,
+    marker: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    modButton:PropTypes.object
   };
 
   /**
@@ -34,177 +41,328 @@ export default class ModificationsMenu extends TranslatedComponent {
 
     this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this);
     this._toggleSpecialsMenu = this._toggleSpecialsMenu.bind(this);
-    this.selectedModRef = null;
-    this.selectedSpecialRef = null;
+    this._rollFifty = this._rollFifty.bind(this);
+    this._rollRandom = this._rollRandom.bind(this);
+    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);
 
-    const { m } = props;
+    // console.log(props.m.blueprint)
     this.state = {
-      blueprintProgress: m.getBlueprintProgress(),
-      blueprintMenuOpened: !m.getBlueprint(),
+      blueprintMenuOpened: !(props.m.blueprint && props.m.blueprint.name),
       specialMenuOpened: false
     };
   }
 
   /**
    * Render the blueprints
+   * @param  {Object} props   React component properties
+   * @param  {Object} context React component context
    * @return {Object}         list: Array of React Components
    */
-  _renderBlueprints() {
-    const { m } = this.props;
-    const { language, tooltip, termtip } = this.context;
-    const { translate } = language;
-
-    const blueprints = m.getApplicableBlueprints().map(blueprint => {
-      const info = getBlueprintInfo(blueprint);
-      let blueprintGrades = keys(info.features).map(grade => {
+  _renderBlueprints(props, context) {
+    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);
+      let blueprintGrades = [];
+      for (let grade in Modifications.modules[m.grp].blueprints[blueprintName].grades) {
         // Grade is a string in the JSON so make it a number
         grade = Number(grade);
-        const active = m.getBlueprint() === blueprint && m.getBlueprintGrade() === grade;
-        const key = blueprint + ':' + grade;
-        return <li key={key} data-id={key} className={cn('c', { active })}
-          style={{ width: '2em' }}
-          onMouseOver={termtip.bind(null, blueprintTooltip(language, m, blueprint, grade))}
-          onMouseOut={tooltip.bind(null, null)}
-          onClick={() => {
-            m.setBlueprint(blueprint, grade, 1);
-            this.setState({
-              blueprintMenuOpened: false,
-              specialMenuOpened: true,
-            });
-          }}
-          ref={active ? (ref) => { this.selectedModRef = ref; } : undefined}
-        >{grade}</li>;
-      });
-
-      return [
-        <div key={'div' + blueprint} className={'select-group cap'}>
-          {translate(blueprint)}
-        </div>,
-        <ul key={'ul' + blueprint}>{blueprintGrades}</ul>
-      ];
-    });
-
-    return flatMap(blueprints);
+        const classes = cn('c', {
+          active: m.blueprint && blueprint.id === m.blueprint.id && grade === m.blueprint.grade
+        });
+        const close = this._blueprintSelected.bind(this, blueprintName, grade);
+        const key = blueprintName + ':' + grade;
+        const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade], Modifications.modules[m.grp].blueprints[blueprintName].grades[grade].engineers, m.grp);
+        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>);
+      }
+    }
+    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
    * @param  {Object} context React component context
    * @return {Object}         list: Array of React Components
    */
-  _renderSpecials() {
-    const { m } = this.props;
-    const { language, tooltip, termtip } = this.context;
+  _renderSpecials(props, context) {
+    const { m } = props;
+    const { language, tooltip, termtip } = context;
     const translate = language.translate;
-
-    const applied = m.getExperimental();
-    const experimentals = [];
-    for (const experimental of m.getApplicableExperimentals()) {
-      const active = experimental === applied;
-      let specialTt = specialToolTip(language, m, experimental);
-      experimentals.push(
-        <div key={experimental} data-id={experimental}
-          style={{ cursor: 'pointer' }}
-          className={cn('button-inline-menu', { active })}
-          onClick={this._specialSelected(experimental)}
-          ref={active ? (ref) => { this.selectedSpecialRef = ref; } : undefined}
-          onMouseOver={termtip.bind(null, specialTt)}
-          onMouseOut={tooltip.bind(null, null)}
-        >{translate(experimental)}</div>
-      );
+    const specials = [];
+    const specialsId = m.missile && Modifications.modules[m.grp]['specials_' + m.missile] ? 'specials_' + m.missile : 'specials';
+    if (Modifications.modules[m.grp][specialsId] && Modifications.modules[m.grp][specialsId].length > 0) {
+      const close = this._specialSelected.bind(this, null);
+      specials.push(<div tabIndex="0" style={{ cursor: 'pointer', fontWeight: 'bold' }} className={ 'button-inline-menu warning' } key={ 'none' } data-id={ 'none' } onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems['none'] = modItem}>{translate('PHRASE_NO_SPECIAL')}</div>);
+      for (const specialName of Modifications.modules[m.grp][specialsId]) {
+        if (Modifications.specials[specialName].name.search('Legacy') >= 0) {
+          continue;
+        }
+        const classes = cn('button-inline-menu', {
+          active: m.blueprint && m.blueprint.special && m.blueprint.special.edname == specialName
+        });
+        if (classes.indexOf('active') >= 0) this.selectedSpecialId = specialName;
+        const close = this._specialSelected.bind(this, specialName);
+        if (m.blueprint && m.blueprint.name) {
+          let tmp = {};
+          if (m.blueprint.special) {
+            tmp = m.blueprint.special;
+          } else {
+            tmp = undefined;
+          }
+          m.blueprint.special = Modifications.specials[specialName];
+          let specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, specialName);
+          m.blueprint.special = tmp;
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName } onMouseOver={termtip.bind(null, specialTt)} onMouseOut={tooltip.bind(null, null)} onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
+        } else {
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName }onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
+        }
+      }
     }
-
-    if (experimentals.length) {
-      experimentals.unshift(
-        <div style={{ cursor: 'pointer', fontWeight: 'bold' }}
-          className="button-inline-menu warning" key="none" data-id="none"
-          // Setting the special effect to undefined clears it
-          onClick={this._specialSelected(undefined)}
-          ref={!applied ? (ref) => { this.selectedSpecialRef = ref; } : undefined}
-        >{translate('PHRASE_NO_SPECIAL')}</div>
-      );
-    }
-
-    return experimentals;
-  }
-
-  /**
-   * Create a modification component
-   */
-  _mkModification(property, highlight) {
-    const { translate } = this.context.language;
-    const { m, propsToShow, onPropToggle } = this.props;
-
-    let onSet = m.set.bind(m);
-    // Show resistance instead of effectiveness
-    const mapped = SHOW[property];
-    if (mapped) {
-      property = mapped.as;
-      onSet = mapped.setter.bind(undefined, m);
-    }
-
-    return [
-      <tr key={`th-${property}`}>
-        <th colSpan="4">
-          <span className="cb">{translate(property)}</span>
-        </th>
-      </tr>,
-      <Modification key={property} m={m} property={property}
-        onSet={onSet} highlight={highlight} showProp={propsToShow[property]}
-        onPropToggle={onPropToggle} />
-    ];
+    return specials;
   }
 
   /**
    * Render the modifications
-   * @return {Array}          Array of React Components
+   * @param  {Object} props   React Component properties
+   * @return {Object}         list: Array of React Components
    */
-  _renderModifications() {
-    const { m } = this.props;
+  _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);
+        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} />
+        );
+      }
+    }
 
-    const blueprintFeatures = getBlueprintInfo(m.getBlueprint()).features[
-      m.getBlueprintGrade()
-    ];
-    const blueprintModifications = chain(keys(blueprintFeatures))
-      .map((feature) => this._mkModification(feature, true))
-      .filter(([_, mod]) => Boolean(mod))
-      .flatMap()
-      .value();
-    const moduleModifications = chain(keys(getModuleInfo(m.getItem()).props))
-      .filter((prop) => !blueprintFeatures[prop])
-      .map((prop) => this._mkModification(prop, false))
-      .flatMap()
-      .value();
-
-    return blueprintModifications.concat(moduleModifications);
+    modifiableModifications.sort(MODIFICATIONS_COMPARATOR);
+    modifications.sort(MODIFICATIONS_COMPARATOR);
+    return modifiableModifications.concat(modifications);
   }
 
   /**
    * Toggle the blueprints menu
    */
   _toggleBlueprintsMenu() {
-    this.setState({ blueprintMenuOpened: !this.state.blueprintMenuOpened });
+    const blueprintMenuOpened = !this.state.blueprintMenuOpened;
+    this.setState({ blueprintMenuOpened });
+  }
+
+  /**
+   * Activated when a blueprint is selected
+   * @param  {int} fdname     The Frontier name of the blueprint
+   * @param  {int} grade      The grade of the selected blueprint
+   */
+  _blueprintSelected(fdname, grade) {
+    this.context.tooltip(null);
+    const { m, ship } = this.props;
+    const blueprint = getBlueprint(fdname, m);
+    blueprint.grade = grade;
+    ship.setModuleBlueprint(m, blueprint);
+    setPercent(ship, m, 100);
+
+    this.setState({ blueprintMenuOpened: false, specialMenuOpened: true });
+    this.props.onChange();
   }
 
   /**
    * Toggle the specials menu
    */
   _toggleSpecialsMenu() {
-    this.setState({ specialMenuOpened: !this.state.specialMenuOpened });
+    const specialMenuOpened = !this.state.specialMenuOpened;
+    this.setState({ specialMenuOpened });
   }
 
   /**
-   * Creates a callback for when a special effect is being selected
-   * @param   {string} special The name of the selected special
-   * @returns {function} Callback
+   * Activated when a special is selected
+   * @param  {int} special     The name of the selected special
    */
   _specialSelected(special) {
-    return () => {
-      const { m } = this.props;
-      m.setExperimental(special);
-      this.setState({ specialMenuOpened: false });
-    };
+    this.context.tooltip(null);
+    const { m, ship } = this.props;
+
+    if (special === null) {
+      ship.clearModuleSpecial(m);
+    } else {
+      ship.setModuleSpecial(m, Modifications.specials[special]);
+    }
+
+    this.setState({ specialMenuOpened: false });
+    this.props.onChange();
+  }
+
+  /**
+   * Provide a '50%' roll within the information we have
+   */
+  _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();
+  }
+
+  /**
+   * Provide a random roll within the information we have
+   */
+  _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();
+  }
+
+  /**
+   * Provide a 'best' roll within the information we have
+   */
+  _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();
+  }
+
+  /**
+   * Provide a 'worst' roll within the information we have
+   */
+  _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();
+  }
+
+  /**
+   * Reset modification information
+   */
+  _reset() {
+    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();
+    }
   }
 
   /**
@@ -213,12 +371,32 @@ export default class ModificationsMenu extends TranslatedComponent {
    * in a modification
    */
   componentDidUpdate() {
-    if (this.selectedModRef) {
-      this.selectedModRef.focus();
-      return;
-    } else if (this.selectedSpecialRef) {
-      this.selectedSpecialRef.focus();
-      return;
+    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();
     }
   }
 
@@ -230,155 +408,106 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { language, tooltip, termtip } = this.context;
     const translate = language.translate;
     const { m } = this.props;
-    const {
-      blueprintProgress, blueprintMenuOpened, specialMenuOpened,
-    } = this.state;
+    const { blueprintMenuOpened, specialMenuOpened } = this.state;
 
-    const appliedBlueprint = m.getBlueprint();
-    const appliedGrade = m.getBlueprintGrade();
-    const appliedExperimental = m.getExperimental();
+    const _toggleBlueprintsMenu = this._toggleBlueprintsMenu;
+    const _toggleSpecialsMenu = this._toggleSpecialsMenu;
+    const _rollFull = this._rollBest;
+    const _rollWorst = this._rollWorst;
+    const _rollFifty = this._rollFifty;
+    const _rollRandom = this._rollRandom;
+    const _reset = this._reset;
 
-    let renderComponents = [];
-    switch (true) {
-      case !appliedBlueprint || blueprintMenuOpened:
-        renderComponents = this._renderBlueprints();
-        break;
-      case specialMenuOpened:
-        renderComponents = this._renderSpecials();
-        break;
-      default:
-        // Since the first case didn't apply, there is a blueprint applied so
-        // we render the modifications
-        let blueprintTt  = blueprintTooltip(language, m, appliedBlueprint, appliedGrade);
+    let blueprintLabel;
+    let haveBlueprint = false;
+    let blueprintTt;
+    let blueprintCv;
+    let bprintSearchName;
 
-        renderComponents.push(
-          <div style={{ cursor: 'pointer' }} key="blueprintsMenu"
-            className="section-menu button-inline-menu"
-            onMouseOver={termtip.bind(null, blueprintTt)}
-            onMouseOut={tooltip.bind(null, null)}
-            onClick={this._toggleBlueprintsMenu}
-          >
-            {translate(appliedBlueprint)} {translate('grade')} {appliedGrade}
-          </div>
-        );
-
-        if (m.getApplicableExperimentals().length) {
-          let specialLabel = translate('PHRASE_SELECT_SPECIAL');
-          let specialTt;
-          if (appliedExperimental) {
-            specialLabel = appliedExperimental;
-            specialTt = specialToolTip(language, m, appliedExperimental);
-          }
-          renderComponents.push(
-            <div className="section-menu button-inline-menu"
-              style={{ cursor: 'pointer' }}
-              onMouseOver={specialTt ? termtip.bind(null, specialTt) : null}
-              onMouseOut={specialTt ? tooltip.bind(null, null) : null}
-              onClick={this._toggleSpecialsMenu}
-            >{specialLabel}</div>
-          );
+    // If the fdname is Weapon_Overcharged, we need to check if it's an MC
+    if (m.blueprint && m.blueprint.fdname) {
+      // Set the bprintSearchName value to the fdname of the blueprint for this module
+      bprintSearchName = m.blueprint.fdname;
+      if (m.blueprint.fdname === 'Weapon_Overcharged') {
+        // If the module is a MultiCannon, we need to fix the blueprint search name, else it will find the Laser Weapon_Overcharged Blueprint and not the MC Weapon_Overcharged Blueprint
+        if (m.symbol.match(/MultiCannon/i)) {
+          // console.log(Modifications.modules[m.grp].blueprints['MC_Overcharged']);
+          // console.log(m.blueprint.fdname);
+          bprintSearchName = 'MC_Overcharged';
         }
-
-        renderComponents.push(
-          <div
-            className="section-menu button-inline-menu warning"
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              m.resetEngineering();
-              this.selectedModRef = null;
-              this.selectedSpecialRef = null;
-              tooltip(null);
-              this.setState({
-                blueprintMenuOpened: true,
-                blueprintProgress: undefined,
-              });
-            }}
-            onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')}
-            onMouseOut={tooltip.bind(null, null)}
-          >{translate('reset')}</div>,
-          <table style={{ width: '100%', backgroundColor: 'transparent' }}>
-            <tbody>
-              <tr>
-                <td
-                  className={cn(
-                    'section-menu button-inline-menu',
-                    { active: false },
-                  )}
-                >{translate('mroll')}:</td>
-                <td
-                  className={cn(
-                    'section-menu button-inline-menu',
-                    { active: blueprintProgress === 0 },
-                  )} style={{ cursor: 'pointer' }}
-                  onClick={() => {
-                    m.setBlueprintProgress(0);
-                    this.setState({ blueprintProgress: 0 });
-                  }}
-                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')}
-                  onMouseOut={tooltip.bind(null, null)}
-                >{translate('0%')}</td>
-                <td
-                  className={cn(
-                    'section-menu button-inline-menu',
-                    { active: blueprintProgress === 0.5 },
-                  )} style={{ cursor: 'pointer' }}
-                  onClick={() => {
-                    m.setBlueprintProgress(0.5);
-                    this.setState({ blueprintProgress: 0.5 });
-                  }}
-                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')}
-                  onMouseOut={tooltip.bind(null, null)}
-                >{translate('50%')}</td>
-                <td
-                  className={cn(
-                    'section-menu button-inline-menu',
-                    { active: blueprintProgress === 1 },
-                  )}
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => {
-                    m.setBlueprintProgress(1);
-                    this.setState({ blueprintProgress: 1 });
-                  }}
-                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')}
-                  onMouseOut={tooltip.bind(null, null)}
-                >{translate('100%')}</td>
-                <td
-                  className={cn(
-                    'section-menu button-inline-menu',
-                    { active: blueprintProgress % 0.5 !== 0 },
-                  )}
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => {
-                    const blueprintProgress = Math.random();
-                    m.setBlueprintProgress(blueprintProgress);
-                    this.setState({ blueprintProgress });
-                  }}
-                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')}
-                  onMouseOut={tooltip.bind(null, null)}
-                >{translate('random')}</td>
-              </tr>
-            </tbody>
-          </table>,
-          <hr />,
-          <span
-            onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')}
-            onMouseOut={tooltip.bind(null, null)}
-          >
-            <table style={{ width: '100%' }}>
-              <tbody>
-                {this._renderModifications()}
-              </tbody>
-            </table>
-          </span>
-        );
+      }
+    }
+    // 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[bprintSearchName]) {
+      this.props.ship.clearModuleBlueprint(m);
+      this.props.ship.clearModuleSpecial(m);
+    }
+    if (m.blueprint && m.blueprint.name && Modifications.modules[m.grp].blueprints[bprintSearchName].grades[m.blueprint.grade]) {
+      blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+      haveBlueprint = true;
+      // console.log(haveBlueprint);
+      blueprintTt  = blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], Modifications.modules[m.grp].blueprints[bprintSearchName].grades[m.blueprint.grade].engineers, m.grp);
+      blueprintCv = getPercent(m);
     }
 
+    let specialLabel;
+    let specialTt;
+    if (m.blueprint && m.blueprint.special) {
+      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 && specials.length;
+    const showRolls = haveBlueprint && !blueprintMenuOpened && (!specialMenuOpened || !specials.length);
+    const showReset = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && 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()}
+      <div
+        className={cn('select', this.props.className)}
+        onClick={(e) => e.stopPropagation() }
         onContextMenu={stopCtxPropagation}
+        ref={modItem => this.modItems['modMainDiv'] = modItem}
       >
-        {renderComponents}
+        { showBlueprintsMenu | showSpecialsMenu ? '' : haveBlueprint ?
+          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{blueprintLabel}</div> :
+          <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 tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={specialTt ? termtip.bind(null, specialTt) : null} onMouseOut={specialTt ? tooltip.bind(null, null) : null}  onClick={_toggleSpecialsMenu} onKeyDown={ this._keyDown }>{specialLabel}</div> : null }
+        { showSpecialsMenu ? specials : null }
+        { showReset ? <div tabIndex="0" className={'section-menu button-inline-menu warning'} style={{ cursor: 'pointer' }} onClick={_reset} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </div> : null }
+        { showRolls ?
+
+          <table style={{ width: '100%', backgroundColor: 'transparent' }}>
+            <tbody>
+              { showRolls ?
+                <tr>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: false }) }> { translate('mroll') }: </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 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 tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===  100 })} style={{ cursor: 'pointer' }} onClick={_rollFull} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('100%') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv === null || blueprintCv % 50 != 0 })} style={{ cursor: 'pointer' }} onClick={_rollRandom} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
+                </tr> : null }
+            </tbody>
+          </table> : null }
+        { showMods ? <hr /> : null }
+        { showMods ?
+          <span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
+            { this._renderModifications(this.props) }
+          </span> : null }
       </div>
     );
   }

src/app/components/Movement.jsx

@@ -1,28 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { ShipProps } from 'ed-forge';
-const { SPEED, BOOST_SPEED, ROLL, BOOST_ROLL, YAW, BOOST_YAW, PITCH, BOOST_PITCH } = ShipProps;
 
 /**
  * Movement
  */
 export default class Movement extends TranslatedComponent {
   static propTypes = {
-    code: PropTypes.string.isRequired,
+    marker: PropTypes.string.isRequired,
     ship: PropTypes.object.isRequired,
     boost: PropTypes.bool.isRequired,
-    pips: PropTypes.object.isRequired,
+    eng: PropTypes.number.isRequired,
+    fuel: PropTypes.number.isRequired,
+    cargo: PropTypes.number.isRequired
   };
 
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+  }
+
   /**
    * Render movement
    * @return {React.Component} contents
    */
   render() {
-    const { ship, boost } = this.props;
+    const { ship, boost, eng, cargo, fuel } = this.props;
     const { language } = this.context;
-    const { formats } = language;
+    const { formats, translate, units } = language;
 
     return (
       <span id='movement'>
@@ -49,10 +57,14 @@ 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"/>
 
-          <text x="470" y="30" strokeWidth='0'>{formats.int(ship.get(boost ? BOOST_SPEED : SPEED)) + 'm/s'}</text>
-          <text x="355" y="410" strokeWidth='0'>{formats.int(ship.get(boost ? BOOST_PITCH : PITCH)) + '°/s'}</text>
-          <text x="450" y="110" strokeWidth='0'>{formats.int(ship.get(boost ? BOOST_ROLL : ROLL)) + '°/s'}</text>
-          <text x="160" y="430" strokeWidth='0'>{formats.int(ship.get(boost ? BOOST_YAW : YAW)) + '°/s'}</text>
+          {/* Speed */}
+          <text x="470" y="30" strokeWidth='0'>{ship.canThrust(cargo, fuel) ? formats.int(ship.calcSpeed(eng, fuel, cargo, boost)) + 'm/s' : '-'}</text>
+          {/* Pitch */}
+          <text x="355" y="410" strokeWidth='0'>{ship.canThrust(cargo, fuel) ? formats.int(ship.calcPitch(eng, fuel, cargo, boost)) + '°/s' : '-'}</text>
+          {/* Roll */}
+          <text x="450" y="110" strokeWidth='0'>{ship.canThrust(cargo, fuel) ? formats.int(ship.calcRoll(eng, fuel, cargo, boost)) + '°/s' : '-'}</text>
+          {/* 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

@@ -3,36 +3,101 @@ import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import * as Calc from '../shipyard/Calculations';
 import PieChart from './PieChart';
+import { nameComparator } from '../utils/SlotFunctions';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
-import { Ship } from 'ed-forge';
-import autoBind from 'auto-bind';
-import { DAMAGE_METRICS } from 'ed-forge/lib/ship-stats';
-import { clone, mapValues, mergeWith, reverse, sortBy, sum, toPairs, values } from 'lodash';
 
 /**
- * Turns an object into a tooltip.
- * @param {function} translate Translate function
- * @param {object} o Map to make the tooltip from
- * @returns {React.Component} Tooltip
+ * Generates an internationalization friendly weapon comparator that will
+ * sort by specified property (if provided) then by name/group, class, rating
+ * @param  {function} translate       Translation function
+ * @param  {function} propComparator  Optional property comparator
+ * @param  {boolean} desc             Use descending order
+ * @return {function}                 Comparator function for names
  */
-function objToTooltip(translate, o) {
-  return toPairs(o)
-    .filter(([k, v]) => Boolean(v))
-    .map(([k, v]) => <div key={k}>{`${translate(k)}: ${v}`}</div>);
+export function weaponComparator(translate, propComparator, desc) {
+  return (a, b) => {
+    if (!desc) {  // Flip A and B if ascending order
+      let t = a;
+      a = b;
+      b = t;
+    }
+
+    // If a property comparator is provided use it first
+    let diff = propComparator ? propComparator(a, b) : nameComparator(translate, a, b);
+
+    if (diff) {
+      return diff;
+    }
+
+    // Property matches so sort by name / group, then class, rating
+    if (a.name === b.name && a.grp === b.grp) {
+      if(a.class == b.class) {
+        return a.rating > b.rating ? 1 : -1;
+      }
+      return a.class - b.class;
+    }
+
+    return nameComparator(translate, a, b);
+  };
+}
+
+/**
+ * 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} o         Object that holds sdps split up by type
- * @returns {Object}            Data object
+ * @param {function} translate    Translation function
+ * @param {Calc.SDps} sdpsObject  Object that holds sdps split up by type
+ * @returns {Object}              Data object
  */
-function objToPie(translate, o) {
-  return toPairs(o).map(([k, value]) => {
-    return { label: translate(k), value };
+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:
@@ -43,10 +108,12 @@ function objToPie(translate, o) {
  */
 export default class Offence extends TranslatedComponent {
   static propTypes = {
-    code: PropTypes.string.isRequired,
-    ship: PropTypes.instanceOf(Ship).isRequired,
-    opponent: PropTypes.instanceOf(Ship).isRequired,
-    engagementRange: PropTypes.number.isRequired,
+    marker: PropTypes.string.isRequired,
+    ship: PropTypes.object.isRequired,
+    opponent: PropTypes.object.isRequired,
+    engagementrange: PropTypes.number.isRequired,
+    wep: PropTypes.number.isRequired,
+    opponentSys: PropTypes.number.isRequired
   };
 
   /**
@@ -55,196 +122,151 @@ export default class Offence extends TranslatedComponent {
    */
   constructor(props) {
     super(props);
-    autoBind(this);
 
+    this._sort = this._sort.bind(this);
+
+    const damage = Calc.offenceMetrics(props.ship, props.opponent, props.wep, props.opponentSys, props.engagementrange);
     this.state = {
-      predicate: 'classRating',
+      predicate: 'n',
       desc: true,
+      damage
     };
   }
 
+  /**
+   * Update the state if our properties change
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps) {
+    if (this.props.marker != nextProps.marker || this.props.eng != nextProps.eng) {
+      const damage = Calc.offenceMetrics(nextProps.ship, nextProps.opponent, nextProps.wep, nextProps.opponentSys, nextProps.engagementrange);
+      this.setState({ damage });
+    }
+    return true;
+  }
+
   /**
    * Set the sort order and sort
    * @param  {string} predicate Sort predicate
    */
   _sortOrder(predicate) {
-    let desc = predicate == this.state.predicate ? !this.state.desc : true;
+    let desc = this.state.desc;
+
+    if (predicate == this.state.predicate) {
+      desc = !desc;
+    } else {
+      desc = true;
+    }
+
+    this._sort(predicate, desc);
     this.setState({ predicate, desc });
   }
 
+  /**
+   * Sorts the weapon list
+   * @param  {string} predicate   Sort predicate
+   * @param  {Boolean} desc       Sort order descending
+   */
+  _sort(predicate, desc) {
+    let comp = weaponComparator.bind(null, this.context.language.translate);
+
+    switch (predicate) {
+      case 'n': comp = comp(null, desc); break;
+      case 'esdpss': comp = comp((a, b) => a.sdps.shields.total - b.sdps.shields.total, desc); break;
+      case 'es': comp = comp((a, b) => a.effectiveness.shields.total - b.effectiveness.shields.total, desc); break;
+      case 'esdpsh': comp = comp((a, b) => a.sdps.armour.total - b.sdps.armour.total, desc); break;
+      case 'eh': comp = comp((a, b) => a.effectiveness.armour.total - b.effectiveness.armour.total, desc); break;
+    }
+
+    this.state.damage.sort(comp);
+  }
+
   /**
    * Render offence
    * @return {React.Component} contents
    */
   render() {
-    const { ship } = this.props;
+    const { ship, opponent, wep, engagementrange } = this.props;
     const { language, tooltip, termtip } = this.context;
     const { formats, translate, units } = language;
+    const { damage } = this.state;
     const sortOrder = this._sortOrder;
 
-    const damage = ship.getMetrics(DAMAGE_METRICS);
-    const portions = {
-      Absolute: damage.types.abs,
-      Explosive: damage.types.expl,
-      Kinetic: damage.types.kin,
-      Thermic: damage.types.therm,
-    };
+    const pd = ship.standard[4].m;
 
-    const oppShield = ship.getOpponent().getShield();
-    const shieldMults = {
-      Absolute: 1,
-      Explosive: oppShield.explosive.damageMultiplier,
-      Kinetic: oppShield.kinetic.damageMultiplier,
-      Thermic: oppShield.thermal.damageMultiplier,
-    };
+    const opponentShields = Calc.shieldMetrics(opponent, 4);
+    const opponentArmour = Calc.armourMetrics(opponent);
 
-    const oppArmour = ship.getOpponent().getArmour();
-    const armourMults = {
-      Absolute: 1,
-      Explosive: oppArmour.explosive.damageMultiplier,
-      Kinetic: oppArmour.kinetic.damageMultiplier,
-      Thermic: oppArmour.thermal.damageMultiplier,
-    };
+    const timeToDrain = Calc.timeToDrainWep(ship, wep);
 
-    let rows = [];
-    for (let weapon of ship.getHardpoints()) {
-      const sdps = weapon.get('sustaineddamagepersecond');
-      const byRange = weapon.getRangeEffectiveness();
-      const weaponPortions = {
-        Absolute: weapon.get('absolutedamageportion'),
-        Explosive: weapon.get('explosivedamageportion'),
-        Kinetic: weapon.get('kineticdamageportion'),
-        Thermic: weapon.get('thermicdamageportion'),
-      };
-      const baseSdpsTooltip = objToTooltip(
-        translate,
-        mapValues(weaponPortions, (p) => formats.f1(sdps * p)),
-      );
 
-      const bySys = oppShield.absolute.bySys;
-      const shieldResEfts = mergeWith(
-        clone(weaponPortions),
-        shieldMults,
-        (objV, srcV) => objV * srcV
-      );
-      const byShieldRes = sum(values(shieldResEfts));
-      const shieldsSdpsTooltip = objToTooltip(
-        translate,
-        mapValues(
-          shieldResEfts,
-          (mult) => formats.f1(byRange * mult * bySys * sdps),
-        ),
-      );
-      const shieldsEftTooltip = objToTooltip(
-        translate,
-        {
-          range: formats.pct1(byRange),
-          resistance: formats.pct1(byShieldRes),
-          'power distributor': formats.pct1(bySys),
-        },
-      );
-      const shieldEft = byRange * byShieldRes * bySys;
+    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 byHardness = weapon.getArmourEffectiveness();
-      const armourResEfts = mergeWith(
-        clone(weaponPortions),
-        armourMults,
-        (objV, srcV) => objV * srcV,
-      );
-      const byArmourRes = sum(values(armourResEfts));
-      const armourSdpsTooltip = objToTooltip(
-        translate,
-        mapValues(
-          armourResEfts,
-          (mult) => formats.f1(byRange * mult * byHardness * sdps)
-        ),
-      );
-      const armourEftTooltip = objToTooltip(
-        translate,
-        {
-          range: formats.pct1(byRange),
-          resistance: formats.pct1(byArmourRes),
-          hardness: formats.pct1(byHardness),
-        },
-      );
-      const armourEft = byRange * byArmourRes * byHardness;
+    const rows = [];
+    for (let i = 0; i < damage.length; i++) {
+      const weapon = damage[i];
 
-      const bp = weapon.getBlueprint();
-      const grade = weapon.getBlueprintGrade();
-      const exp = weapon.getExperimental();
-      let bpTitle = `${translate(bp)} ${translate('grade')} ${grade}`;
-      if (exp) {
-        bpTitle += `, ${translate(exp)}`;
-      }
-      rows.push({
-        slot: weapon.getSlot(),
-        mount: weapon.mount,
-        classRating: weapon.getClassRating(),
-        type: weapon.readMeta('type'),
-        bpTitle: bp ? ` (${bpTitle})` : null,
-        sdps,
-        baseSdpsTooltip,
-        shieldSdps: sdps * shieldEft,
-        shieldEft,
-        shieldsSdpsTooltip,
-        shieldsEftTooltip,
-        armourSdps: sdps * armourEft,
-        armourEft,
-        armourSdpsTooltip,
-        armourEftTooltip,
-      });
-    }
-    const { predicate, desc } = this.state;
-    rows = sortBy(rows, (row) => row[predicate]);
-    if (desc) {
-      reverse(rows);
+      totalSEps += weapon.seps;
+      addSDps(totalSDpsObject, weapon.sdps.base);
+      addSDps(shieldsSDpsObject, weapon.sdps.shields);
+      addSDps(armourSDpsObject, weapon.sdps.armour);
+
+      const baseSDpsTooltipDetails = getSDpsTooltip(translate, formats, weapon.sdps.base);
+
+      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 = getSDpsTooltip(translate, formats, weapon.sdps.armour);
+
+      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 = getSDpsTooltip(translate, formats, weapon.sdps.armour);
+
+      rows.push(
+        <tr key={weapon.id}>
+          <td className='ri'>
+            {weapon.mount == 'F' ? <span onMouseOver={termtip.bind(null, 'fixed')} onMouseOut={tooltip.bind(null, null)}><MountFixed className='icon'/></span> : null}
+            {weapon.mount == 'G' ? <span onMouseOver={termtip.bind(null, 'gimballed')} onMouseOut={tooltip.bind(null, null)}><MountGimballed /></span> : null}
+            {weapon.mount == 'T' ? <span onMouseOver={termtip.bind(null, 'turreted')} onMouseOut={tooltip.bind(null, null)}><MountTurret /></span> : null}
+            {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 sdpsTooltip = objToTooltip(
-      translate,
-      mapValues(portions, (p) => formats.f1(damage.sustained.dps * p)),
-    );
-    const sdpsPie = objToPie(
-      translate,
-      mapValues(portions, (p) => Math.round(damage.sustained.dps * p)),
-    );
+    const totalSDps = sumSDps(totalSDpsObject);
+    const totalSDpsTooltipDetails = getSDpsTooltip(translate, formats, totalSDpsObject);
+    const totalSDpsData = getSDpsData(translate, totalSDpsObject);
 
-    const shieldSdpsSrcs = mergeWith(
-      clone(portions),
-      shieldMults,
-      (objV, srcV) => damage.sustained.dps * oppShield.absolute.bySys *
-        damage.rangeMultiplier * objV * srcV,
-    );
-    const shieldsSdps = sum(values(shieldSdpsSrcs));
-    const shieldsSdpsTooltip = objToTooltip(
-      translate,
-      mapValues(shieldSdpsSrcs, (v) => formats.f1(v)),
-    );
-    const shieldsSdpsPie = objToPie(
-      translate,
-      mapValues(shieldSdpsSrcs, (v) => Math.round(v)),
-    );
+    const totalShieldsSDps = sumSDps(shieldsSDpsObject);
+    const totalShieldsSDpsTooltipDetails = getSDpsTooltip(translate, formats, shieldsSDpsObject);
+    const shieldsSDpsData = getSDpsData(translate, shieldsSDpsObject);
 
-    const armourSdpsSrcs = mergeWith(
-      clone(portions),
-      armourMults,
-      (objV, srcV) => damage.sustained.dps * damage.hardnessMultiplier *
-        damage.rangeMultiplier * objV * srcV,
-    );
-    const armourSdps = sum(values(armourSdpsSrcs));
-    const totalArmourSDpsTooltipDetails = objToTooltip(
-      translate,
-      mapValues(armourSdpsSrcs, (v) => formats.f1(v)),
-    );
-    const armourSDpsData = objToPie(
-      translate,
-      mapValues(armourSdpsSrcs, (v) => Math.round(v)),
-    );
+    const totalArmourSDps = sumSDps(armourSDpsObject);
+    const totalArmourSDpsTooltipDetails = getSDpsTooltip(translate, formats, armourSDpsObject);
+    const armourSDpsData = getSDpsData(translate, armourSDpsObject);
 
-    const pd = ship.getPowerDistributor();
-    const timeToDrain = damage.sustained.timeToDrain[ship.getDistributorSettings().Wep];
-    // const timeToDepleteShields = Calc.timeToDeplete(opponentShields.total, shieldsSdps, totalSEps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * (wep / 4));
-    // const timeToDepleteArmour = Calc.timeToDeplete(opponentArmour.total, armourSdps, totalSEps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * (wep / 4));
+    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));
 
     return (
       <span id='offence'>
@@ -252,75 +274,35 @@ export default class Offence extends TranslatedComponent {
           <table>
             <thead>
               <tr className='main'>
-                <th rowSpan='2' className='sortable' onClick={sortOrder.bind(this, 'classRating')}>{translate('weapon')}</th>
+                <th rowSpan='2' className='sortable' onClick={sortOrder.bind(this, 'n')}>{translate('weapon')}</th>
                 <th colSpan='1'>{translate('overall')}</th>
-                <th colSpan='2'>{translate('opponent\'s shields')}</th>
-                <th colSpan='2'>{translate('opponent\'s armour')}</th>
+                <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, 'sdps')}>sdps</th>
-                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')}
-                  onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'shieldSdps')}>sdps</th>
-                <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_SHIELDS')}
-                  onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'shieldEft')}>eft</th>
-                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_ARMOUR')}
-                  onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'armourSdps')}>sdps</th>
-                <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_ARMOUR')}
-                  onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'armourEft')}>eft</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='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.map((row) => (
-                <tr key={row.slot}>
-                  <td className='ri'>
-                    {row.mount == 'F' ? <span onMouseOver={termtip.bind(null, 'fixed')} onMouseOut={tooltip.bind(null, null)}><MountFixed className='icon'/></span> : null}
-                    {row.mount == 'G' ? <span onMouseOver={termtip.bind(null, 'gimballed')} onMouseOut={tooltip.bind(null, null)}><MountGimballed /></span> : null}
-                    {row.mount == 'T' ? <span onMouseOver={termtip.bind(null, 'turreted')} onMouseOut={tooltip.bind(null, null)}><MountTurret /></span> : null}
-                    {row.classRating} {translate(row.type)}
-                    {row.bpTitle}
-                  </td>
-                  <td className='ri'>
-                    <span onMouseOver={termtip.bind(null, row.baseSdpsTooltip)}
-                      onMouseOut={tooltip.bind(null, null)}
-                    >{formats.f1(row.sdps)}</span></td>
-                  <td className='ri'>
-                    <span onMouseOver={termtip.bind(null, row.shieldsSdpsTooltip)}
-                      onMouseOut={tooltip.bind(null, null)}
-                    >{formats.f1(row.shieldSdps)}</span></td>
-                  <td className='ri'>
-                    <span onMouseOver={termtip.bind(null, row.shieldsEftTooltip)}
-                      onMouseOut={tooltip.bind(null, null)}
-                    >{formats.pct1(row.shieldEft)}</span></td>
-                  <td className='ri'>
-                    <span onMouseOver={termtip.bind(null, row.armourSdpsTooltip)}
-                      onMouseOut={tooltip.bind(null, null)}
-                    >{formats.f1(row.armourSdps)}</span></td>
-                  <td className='ri'>
-                    <span onMouseOver={termtip.bind(null, row.armourEftTooltip)}
-                      onMouseOut={tooltip.bind(null, null)}
-                    >{formats.pct1(row.armourEft)}</span></td>
-                </tr>
-              ))}
+              {rows}
               {rows.length > 0 &&
                 <tr>
                   <td></td>
-                  <td className='ri'>
-                    <span onMouseOver={termtip.bind(null, sdpsTooltip)} onMouseOut={tooltip.bind(null, null)}>
-                      ={formats.f1(damage.sustained.dps)}
-                    </span>
-                  </td>
-                  <td className='ri'>
-                    <span onMouseOver={termtip.bind(null, shieldsSdpsTooltip)} onMouseOut={tooltip.bind(null, null)}>
-                      ={formats.f1(shieldsSdps)}
-                    </span>
-                  </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 className='ri'>
-                    <span onMouseOver={termtip.bind(null, totalArmourSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>
-                      ={formats.f1(armourSdps)}
-                    </span>
-                  </td>
                   <td></td>
                 </tr>
               }
@@ -329,53 +311,22 @@ export default class Offence extends TranslatedComponent {
         </div>
         <div className='group quarter'>
           <h2>{translate('offence metrics')}</h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_DRAIN_WEP'))}
-            onMouseOut={tooltip.bind(null, null)}>
-            {translate('PHRASE_TIME_TO_DRAIN_WEP')}<br/>
-            {timeToDrain === Infinity ? translate('never') : formats.time(timeToDrain)}
-          </h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_EFFECTIVE_SDPS_SHIELDS'))}
-            onMouseOut={tooltip.bind(null, null)}>
-            {translate('PHRASE_EFFECTIVE_SDPS_SHIELDS')}<br/>
-            {formats.f1(shieldsSdps)}
-          </h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_REMOVE_SHIELDS'))}
-            onMouseOut={tooltip.bind(null, null)}>
-            {translate('PHRASE_TIME_TO_REMOVE_SHIELDS')}<br/>
-            ToDo
-            {/* {timeToDepleteShields === Infinity ? translate('never') : formats.time(timeToDepleteShields)} */}
-          </h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_EFFECTIVE_SDPS_ARMOUR'))}
-            onMouseOut={tooltip.bind(null, null)}>
-            {translate('PHRASE_EFFECTIVE_SDPS_ARMOUR')}<br/>
-            {formats.f1(armourSdps)}
-          </h2>
-          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_REMOVE_ARMOUR'))}
-            onMouseOut={tooltip.bind(null, null)}>
-            {translate('PHRASE_TIME_TO_REMOVE_ARMOUR')}<br/>
-            ToDo
-            {/* {timeToDepleteArmour === Infinity ? translate('never') : formats.time(timeToDepleteArmour)} */}
-          </h2>
+          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_DRAIN_WEP'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_DRAIN_WEP')}<br/>{timeToDrain === Infinity ? translate('never') : formats.time(timeToDrain)}</h2>
+          <h2 onMouseOver={termtip.bind(null, translate('TT_EFFECTIVE_SDPS_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_EFFECTIVE_SDPS_SHIELDS')}<br/>{formats.f1(totalShieldsSDps)}</h2>
+          <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_REMOVE_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_REMOVE_SHIELDS')}<br/>{timeToDepleteShields === Infinity ? translate('never') : formats.time(timeToDepleteShields)}</h2>
+          <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={sdpsPie} />
+          <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={shieldsSdpsPie} />
+          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_DAMAGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield damage sources')}</h2>
+          <PieChart data={shieldsSDpsData} />
         </div>
         <div className='group quarter'>
-          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_ARMOUR_DAMAGE'))}
-            onMouseOut={tooltip.bind(null, null)}>
-            {translate('armour damage sources')}
-          </h2>
+          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_ARMOUR_DAMAGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('armour damage sources')}</h2>
           <PieChart data={armourSDpsData} />
         </div>
       </span>);

src/app/components/OutfittingSubpages.jsx

@@ -11,24 +11,29 @@ import Movement from './Movement';
 import Offence from './Offence';
 import Defence from './Defence';
 import WeaponDamageChart from './WeaponDamageChart';
-import Pips from '../components/Pips';
-import Boost from '../components/Boost';
-import Fuel from '../components/Fuel';
-import Cargo from '../components/Cargo';
-import ShipPicker from '../components/ShipPicker';
-import EngagementRange from '../components/EngagementRange';
-import autoBind from 'auto-bind';
-import { ShipProps } from 'ed-forge';
-const { CARGO_CAPACITY, FUEL_CAPACITY } = ShipProps;
 
 /**
  * Outfitting subpages
  */
 export default class OutfittingSubpages extends TranslatedComponent {
+
   static propTypes = {
     ship: PropTypes.object.isRequired,
     code: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
     buildName: PropTypes.string,
+    sys: PropTypes.number.isRequired,
+    eng: PropTypes.number.isRequired,
+    wep: PropTypes.number.isRequired,
+    cargo: PropTypes.number.isRequired,
+    fuel: PropTypes.number.isRequired,
+    boost: PropTypes.bool.isRequired,
+    engagementRange: PropTypes.number.isRequired,
+    opponent: PropTypes.object.isRequired,
+    opponentBuild: PropTypes.string,
+    opponentSys: PropTypes.number.isRequired,
+    opponentEng: PropTypes.number.isRequired,
+    opponentWep: PropTypes.number.isRequired,
   };
 
   /**
@@ -37,17 +42,13 @@ export default class OutfittingSubpages extends TranslatedComponent {
    */
   constructor(props) {
     super(props);
-    autoBind(this);
+    this._powerTab = this._powerTab.bind(this);
+    this._profilesTab = this._profilesTab.bind(this);
+    this._offenceTab = this._offenceTab.bind(this);
+    this._defenceTab = this._defenceTab.bind(this);
 
-    this.props.ship.setOpponent(this.props.ship);
     this.state = {
-      boost: false,
-      cargo: props.ship.get(CARGO_CAPACITY),
-      fuel: props.ship.get(FUEL_CAPACITY),
-      pips: props.ship.getDistributorSettingsObject(),
       tab: Persist.getOutfittingTab() || 'power',
-      engagementRange: 1000,
-      opponent: this.props.ship,
     };
   }
 
@@ -56,114 +57,128 @@ export default class OutfittingSubpages extends TranslatedComponent {
    * @param  {string} tab Tab name
    */
   _showTab(tab) {
-    Persist.setOutfittingTab(tab);
     this.setState({ tab });
   }
 
+  /**
+   * Render the power tab
+   * @return {React.Component} Tab contents
+   */
+  _powerTab() {
+    let { ship, buildName, code, onChange } = this.props;
+    Persist.setOutfittingTab('power');
+
+    const powerMarker = `${ship.toString()}`;
+    const costMarker = `${ship.toString().split('.')[0]}`;
+
+    return <div>
+      <PowerManagement ship={ship} code={powerMarker} onChange={onChange} />
+      <CostSection ship={ship} buildName={buildName} code={costMarker} />
+    </div>;
+  }
+
+  /**
+   * Render the profiles tab
+   * @return {React.Component} Tab contents
+   */
+  _profilesTab() {
+    const { ship, opponent, cargo, fuel, eng, boost, engagementRange, opponentSys } = this.props;
+    const { translate } = this.context.language;
+    let realBoost = boost && ship.canBoost(cargo, fuel);
+    Persist.setOutfittingTab('profiles');
+
+    const engineProfileMarker = `${ship.toString()}:${cargo}:${fuel}:${eng}:${realBoost}`;
+    const fsdProfileMarker = `${ship.toString()}:${cargo}:${fuel}`;
+    const movementMarker = `${ship.topSpeed}:${ship.pitch}:${ship.roll}:${ship.yaw}:${ship.canBoost(cargo, fuel)}`;
+    const damageMarker = `${ship.toString()}:${opponent.toString()}:${engagementRange}:${opponentSys}`;
+
+    return <div>
+      <div className='group third'>
+        <h1>{translate('engine profile')}</h1>
+        <EngineProfile ship={ship} marker={engineProfileMarker} fuel={fuel} cargo={cargo} eng={eng} boost={realBoost} />
+      </div>
+
+      <div className='group third'>
+        <h1>{translate('fsd profile')}</h1>
+        <FSDProfile ship={ship} marker={fsdProfileMarker} fuel={fuel} cargo={cargo} />
+      </div>
+
+      <div className='group third'>
+        <h1>{translate('movement profile')}</h1>
+        <Movement marker={movementMarker} ship={ship} boost={boost} eng={eng} cargo={cargo} fuel={fuel} />
+      </div>
+
+      <div className='group half'>
+        <h1>{translate('damage to opponent\'s shields')}</h1>
+        <WeaponDamageChart marker={damageMarker} ship={ship} opponent={opponent} opponentSys={opponentSys} hull={false} engagementRange={engagementRange} />
+      </div>
+
+      <div className='group half'>
+        <h1>{translate('damage to opponent\'s hull')}</h1>
+        <WeaponDamageChart marker={damageMarker} ship={ship} opponent={opponent} opponentSys={opponentSys} hull={true} engagementRange={engagementRange} />
+      </div>
+    </div>;
+  }
+
+  /**
+   * Render the offence tab
+   * @return {React.Component} Tab contents
+   */
+  _offenceTab() {
+    const { ship, sys, eng, wep, cargo, fuel, boost, engagementRange, opponent, opponentBuild, opponentSys } = this.props;
+    Persist.setOutfittingTab('offence');
+
+    const marker = `${ship.toString()}${opponent.toString()}${opponentBuild}${engagementRange}${opponentSys}`;
+
+    return <div>
+      <Offence marker={marker} ship={ship} opponent={opponent} wep={wep} opponentSys={opponentSys} engagementrange={engagementRange}/>
+    </div>;
+  }
+
+  /**
+   * Render the defence tab
+   * @return {React.Component} Tab contents
+   */
+  _defenceTab() {
+    const { ship, sys, eng, wep, cargo, fuel, boost, engagementRange, opponent, opponentBuild, opponentWep } = this.props;
+    Persist.setOutfittingTab('defence');
+
+    const marker = `${ship.toString()}${opponent.toString()}{opponentBuild}${engagementRange}${opponentWep}`;
+
+    return <div>
+      <Defence marker={marker} ship={ship} opponent={opponent} sys={sys} opponentWep={opponentWep} engagementrange={engagementRange}/>
+    </div>;
+  }
+
   /**
    * Render the section
    * @return {React.Component} Contents
    */
   render() {
-    const { buildName, code, ship } = this.props;
-    const { boost, cargo, fuel, pips, tab, engagementRange, opponent } = this.state;
-    const { translate } = this.context.language;
+    const tab = this.state.tab;
+    const translate = this.context.language.translate;
+    let tabSection;
+
+    switch (tab) {
+      case 'power': tabSection = this._powerTab(); break;
+      case 'profiles': tabSection = this._profilesTab(); break;
+      case 'offence': tabSection = this._offenceTab(); break;
+      case 'defence': tabSection = this._defenceTab(); break;
+    }
 
-    const cargoCapacity = ship.get(CARGO_CAPACITY);
-    const showCargoSlider = cargoCapacity > 0;
     return (
-      <div>
-        {/* Control of ship and opponent */}
-        <div className="group quarter">
-          <h2 style={{ verticalAlign: 'middle', textAlign: 'center' }}>
-            {translate('ship control')}
-          </h2>
-          <Boost boost={boost} onChange={(boost) => this.setState({ boost })} />
-        </div>
-        <div className="group quarter">
-          <h2 style={{ verticalAlign: 'middle', textAlign: 'center' }}>
-            {translate('opponent')}
-          </h2>
-          <ShipPicker ship={ship} onChange={(opponent) => this.setState({ opponent })} />
-        </div>
-        <div className={cn('group', { quarter: showCargoSlider, half: !showCargoSlider })}>
-          <Fuel fuelCapacity={ship.get(FUEL_CAPACITY)} fuel={fuel}
-            onChange={(fuel) => this.setState({ fuel })} />
-        </div>
-        {showCargoSlider ?
-          <div className="group quarter">
-            <Cargo cargoCapacity={cargoCapacity} cargo={cargo}
-              onChange={(cargo) => this.setState({ cargo })} />
-          </div> : null}
-        <div className="group half">
-          <Pips ship={ship} pips={pips} onChange={(pips) => this.setState({ pips })} />
-        </div>
-        <div className="group half">
-          <EngagementRange ship={ship} engagementRange={engagementRange}
-            onChange={(engagementRange) => this.setState({ engagementRange })} />
-        </div>
-        <div className='group full' style={{ minHeight: '1000px' }}>
-          <table className='tabs'>
-            {/* Select tab section */}
-            <thead>
-              <tr>
-                <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('tab_defence')}
-                </th>
-              </tr>
-            </thead>
-          </table>
-          {/* Show selected tab */}
-          {tab == 'power' ?
-            <div>
-              <PowerManagement ship={ship} code={code} />
-              <CostSection ship={ship} buildName={buildName} code={code} />
-            </div> : null}
-          {tab == 'profiles' ?
-            <div>
-              <div className='group third'>
-                <h1>{translate('engine profile')}</h1>
-                <EngineProfile code={code} ship={ship} fuel={fuel} cargo={cargo} pips={pips} boost={boost} />
-              </div>
-              <div className='group third'>
-                <h1>{translate('fsd profile')}</h1>
-                <FSDProfile code={code} ship={ship} fuel={fuel} cargo={cargo} />
-              </div>
-              <div className='group third'>
-                <h1>{translate('movement profile')}</h1>
-                <Movement code={code} ship={ship} boost={boost} pips={pips} />
-              </div>
-              <div className='group third'>
-                <h1>{translate('damage to opponent\'s shields')}</h1>
-                <WeaponDamageChart code={code} ship={ship} opponentDefence={opponent.getShield()} engagementRange={engagementRange} />
-              </div>
-
-              <div className='group third'>
-                <h1>{translate('damage to opponent\'s hull')}</h1>
-                <WeaponDamageChart code={code} ship={ship} opponentDefence={opponent.getArmour()} engagementRange={engagementRange} />
-              </div>
-            </div> : null}
-          {tab == 'offence' ?
-            <div>
-              <Offence code={code} ship={ship} opponent={opponent} engagementRange={engagementRange} />
-            </div> : null}
-          {tab == 'defence' ?
-            <div>
-              <Defence code={code} ship={ship} opponent={opponent} engagementRange={engagementRange} />
-            </div> : null}
-        </div>
+      <div className='group full' style={{ minHeight: '1000px' }}>
+        <table className='tabs'>
+          <thead>
+            <tr>
+              <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('tab_defence')}</th>
+            </tr>
+          </thead>
+        </table>
+        {tabSection}
       </div>
     );
   }

src/app/components/PieChart.jsx

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

src/app/components/Pips.jsx

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import { Pip } from './SvgIcons';
-import { autoBind } from 'react-extras';
-import { Ship } from 'ed-forge';
+import autoBind from 'auto-bind';
 
 /**
  * Pips displays SYS/ENG/WEP pips and allows users to change them with key presses by clicking on the relevant area.
@@ -11,9 +10,13 @@ import { Ship } from 'ed-forge';
  */
 export default class Pips extends TranslatedComponent {
   static propTypes = {
-    ship: PropTypes.instanceOf(Ship).isRequired,
-    pips: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
+    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
   };
 
   /**
@@ -24,12 +27,6 @@ export default class Pips extends TranslatedComponent {
   constructor(props, context) {
     super(props);
     autoBind(this);
-
-    const { ship } = props;
-    this._incSys = this._change(ship.incSys);
-    this._incEng = this._change(ship.incEng);
-    this._incWep = this._change(ship.incWep);
-    this._reset = this._change(ship.pipsReset);
   }
 
   /**
@@ -74,42 +71,153 @@ export default class Pips extends TranslatedComponent {
   }
 
   /**
-   * Creates a function that handles pip assignment and call `onChance`.
-   * @param {String} cb Callback that handles the actual pip assignment
-   * @param {Boolean} isMc True when increase is by multi crew
-   * @returns {Function} Function that handles pip assigment
+   * Reset the capacitor
    */
-  _change(cb, isMc) {
-    return () => {
-      cb(isMc);
-      this.props.onChange(this.props.ship.getDistributorSettingsObject());
+  _reset(isMc) {
+    let { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
+    if (isMc) {
+      if (mcSys || mcEng || mcWep) {
+        sys -= mcSys;
+        eng -= mcEng;
+        wep -= mcWep;
+        this.props.onChange(sys, eng, wep, 0, 0, 0);
+      }
+    } else if (sys != 2 || eng != 2 || wep != 2) {
+      sys = eng = wep = 2;
+      this.props.onChange(sys + mcSys, eng + mcEng, wep + mcWep, mcSys, mcEng, mcWep);
+    }
+  }
+
+  /**
+   * Increment the SYS capacitor
+   */
+  _incSys() {
+    this._inc('sys', false);
+  }
+
+  /**
+   * Increment the ENG capacitor
+   */
+  _incEng() {
+    this._inc('eng', false);
+  }
+
+  /**
+   * Increment the WEP capacitor
+   */
+  _incWep() {
+    this._inc('wep', false);
+  }
+
+  _wrapMcClick(key) {
+    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 (other1 > other2) {
+          other1 -= 0.5;
+        } else {
+          other2 -= 0.5;
+        }
+        pips += 0.5;
+      } else {
+        // Required is 1 - take from both if possible
+        if (other1 == 0) {
+          other2 -= 1;
+        } else if (other2 == 0) {
+          other1 -= 1;
+        } else {
+          other1 -= 0.5;
+          other2 -= 0.5;
+        }
+        pips += 1;
+      }
+    }
+
+    sys = mcSys + (key == 'sys' ? pips : other1);
+    eng = mcEng + (key == 'eng' ? pips : (key == 'sys' ? other1 : other2));
+    wep = mcWep + (key == 'wep' ? pips : other2);
+    this.props.onChange(sys, eng, wep, mcSys, mcEng, mcWep);
+  }
+
   /**
    * Set up the rendering for pips
+   * @param   {Number}     sys the SYS pips
+   * @param   {Number}     eng the ENG pips
+   * @param   {Number}     wep the WEP pips
+   * @param   {Number}     mcSys SYS pips from multi-crew
+   * @param   {Number}     mcEng ENG pips from multi-crew
+   * @param   {Number}     mcWep WEP pips from multi-crew
    * @returns {Object}      Object containing the rendering for the pips
    */
-  _renderPips() {
+  _renderPips(sys, eng, wep, mcSys, mcEng, mcWep) {
     const pipsSvg = {
-      Sys: [],
-      Eng: [],
-      Wep: [],
+      SYS: [],
+      ENG: [],
+      WEP: [],
     };
 
-    for (let k in this.props.pips) {
-      let { base, mc } = this.props.pips[k];
-      for (let i = 0; i < Math.floor(base); i++) {
-        pipsSvg[k].push(<Pip key={i} className='full' />);
+    // Multi-crew pipsSettings actually are included in the overall pip count therefore
+    // we can consider [0, sys - mcSys] as normal pipsSettings whilst [sys - mcSys, sys]
+    // are the multi-crew pipsSettings in what follows.
+
+    let pipsSettings = {
+      SYS: [sys, mcSys],
+      ENG: [eng, mcEng],
+      WEP: [wep, mcWep],
+    };
+
+    for (let pipName in pipsSettings) {
+      let [pips, mcPips] = pipsSettings[pipName];
+      for (let i = 0; i < Math.floor(pips - mcPips); i++) {
+        pipsSvg[pipName].push(<Pip key={i} className='full' />);
       }
-      if (base > Math.floor(base)) {
-        pipsSvg[k].push(<Pip className='half' key={'half'} />);
+      if (pips > Math.floor(pips)) {
+        pipsSvg[pipName].push(<Pip className='half' key={'half'} />);
       }
-      for (let i = 0; i < mc; i++) {
-        pipsSvg[k].push(<Pip key={base + i} className='mc' />);
+      for (let i = pips - mcPips; i < Math.floor(pips); i++) {
+        pipsSvg[pipName].push(<Pip key={i} className='mc' />);
       }
-      for (let i = Math.ceil(base + mc); i < 4; i++) {
-        pipsSvg[k].push(<Pip className='empty' key={i} />);
+      for (let i = Math.floor(pips + 0.5); i < 4; i++) {
+        pipsSvg[pipName].push(<Pip className='empty' key={i} />);
       }
     }
 
@@ -121,10 +229,11 @@ export default class Pips extends TranslatedComponent {
    * @return {React.Component} contents
    */
   render() {
-    const { ship } = this.props;
-    const { translate } = this.context.language;
+    const { tooltip, termtip } = this.context;
+    const { formats, translate, units } = this.context.language;
+    const { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
 
-    const pipsSvg = this._renderPips();
+    const pipsSvg = this._renderPips(sys, eng, wep, mcSys, mcEng, mcWep);
     return (
       <span id='pips'>
         <table>
@@ -132,40 +241,38 @@ export default class Pips extends TranslatedComponent {
             <tr>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
-              <td className='clickable' onClick={this._incEng}>{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={this._incSys}>{pipsSvg.Sys}</td>
-              <td className='clickable' onClick={this._incEng}>
-                {translate('ENG')}
-              </td>
-              <td className='clickable' onClick={this._incWep}>{pipsSvg.Wep}</td>
+              <td className='clickable' onClick={this._incSys}
+                onContextMenu={this._wrapMcClick('sys')}>{pipsSvg['SYS']}</td>
+              <td className='clickable' onClick={this._incEng}
+                onContextMenu={this._wrapMcClick('eng')}>{translate('ENG')}</td>
+              <td className='clickable' onClick={this._incWep}
+                onContextMenu={this._wrapMcClick('wep')}>{pipsSvg['WEP']}</td>
             </tr>
             <tr>
               <td>&nbsp;</td>
-              <td className='clickable' onClick={this._incSys}>
-                {translate('SYS')}
-              </td>
-              <td className='clickable' onClick={this._reset}>
+              <td className='clickable' onClick={this._incSys}
+                onContextMenu={this._wrapMcClick('sys')}>{translate('SYS')}</td>
+              <td className='clickable' onClick={this._reset.bind(this, false)}>
                 {translate('RST')}
               </td>
-              <td className='clickable' onClick={this._incWep}>
-                {translate('WEP')}
-              </td>
+              <td className='clickable' onClick={this._incWep}
+                onContextMenu={this._wrapMcClick('wep')}>{translate('WEP')}</td>
             </tr>
             <tr>
               <td>&nbsp;</td>
-              <td className='clickable' onClick={this._change(ship.incSys, true)}>
-                <Pip className='mc' />
-              </td>
-              <td className='clickable' onClick={this._change(ship.incEng, true)}>
-                <Pip className='mc' />
-              </td>
-              <td className='clickable' onClick={this._change(ship.incWep, true)}>
-                <Pip className='mc' />
+              <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

@@ -4,25 +4,27 @@ import * as d3 from 'd3';
 import cn from 'classnames';
 import TranslatedComponent from './TranslatedComponent';
 import { wrapCtxMenu } from '../utils/UtilityFunctions';
-import { Ship } from 'ed-forge';
-import { POWER_METRICS } from 'ed-forge/lib/ship-stats';
-import autoBind from 'auto-bind';
 
 /**
- * Get the band-class.
+ * Round to avoid floating point precision errors
  * @param  {Boolean} selected Band selected
- * @param  {Number} relDraw   Relative amount of power drawn by this band and
- * all prior
- * @return {string}           CSS Class name
+ * @param  {number} sum       Band power sum
+ * @param  {number} avail     Total available power
+ * @return {string}          CSS Class name
  */
-function getClass(selected, relDraw) {
-  if (selected) {
-    return 'secondary';
-  } else if (relDraw >= 1) {
-    return 'warning';
-  } else {
-    return 'primary';
-  }
+function getClass(selected, sum, avail) {
+  return selected ? 'secondary' : ((Math.round(sum * 100) / 100) >= avail) ? 'warning' : 'primary';
+}
+
+/**
+ * Get the # label for a Priority band
+ * @param  {number} val           Priority Band Watt value
+ * @param  {number} index         Priority Band index
+ * @param  {Function} wattScale   Watt Scale function
+ * @return {number}               label / text
+ */
+function bandText(val, index, wattScale) {
+  return (val > 0 && wattScale(val) > 13) ? index + 1 : null;
 }
 
 /**
@@ -31,9 +33,10 @@ function getClass(selected, relDraw) {
  */
 export default class PowerBands extends TranslatedComponent {
   static propTypes = {
-    ship: PropTypes.instanceOf(Ship).isRequired,
-    code: PropTypes.string.isRequired,
+    bands: PropTypes.array.isRequired,
+    available: PropTypes.number.isRequired,
     width: PropTypes.number.isRequired,
+    code: PropTypes.string,
   };
 
   /**
@@ -43,16 +46,20 @@ export default class PowerBands extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    autoBind(this);
     this.wattScale = d3.scaleLinear();
     this.pctScale = d3.scaleLinear().domain([0, 1]);
     this.wattAxis = d3.axisTop(this.wattScale).tickSizeOuter(0).tickFormat(context.language.formats.r2);
     this.pctAxis = d3.axisBottom(this.pctScale).tickSizeOuter(0).tickFormat(context.language.formats.rPct);
 
+    this._updateDimensions = this._updateDimensions.bind(this);
+    this._updateScales = this._updateScales.bind(this);
+    this._selectNone = this._selectNone.bind(this);
     this._hidetip = () => this.context.tooltip();
 
-    this.profile = props.ship.getMetrics(POWER_METRICS);
+    let maxBand = props.bands[props.bands.length - 1];
+
     this.state = {
+      maxPwr: Math.max(props.available, maxBand.retractedSum, maxBand.deployedSum),
       ret: {},
       dep: {}
     };
@@ -76,6 +83,8 @@ export default class PowerBands extends TranslatedComponent {
     let mRight = Math.round(140 * scale);
     let innerWidth = props.width - mLeft - mRight;
 
+    this._updateScales(innerWidth, this.state.maxPwr, props.available);
+
     this.setState({
       barHeight,
       innerHeight,
@@ -131,67 +140,41 @@ export default class PowerBands extends TranslatedComponent {
     this.setState({ dep: Object.assign({}, dep) });
   }
 
+  /**
+   * Update scale
+   * @param  {number} innerWidth  SVG innerwidth
+   * @param  {number} maxPwr      Maximum power level MJ (deployed or available)
+   * @param  {number} available   Available power MJ
+   */
+  _updateScales(innerWidth, maxPwr, available) {
+    this.wattScale.range([0, innerWidth]).domain([0, maxPwr]).clamp(true);
+    this.pctScale.range([0, innerWidth]).domain([0, maxPwr / available]).clamp(true);
+  }
+
   /**
    * Update state based on property and context changes
    * @param  {Object} nextProps   Incoming/Next properties
    * @param  {Object} nextContext Incoming/Next context
    */
   componentWillReceiveProps(nextProps, nextContext) {
+    let { innerWidth, maxPwr } = this.state;
     let { language, sizeRatio } = this.context;
+    let maxBand = nextProps.bands[nextProps.bands.length - 1];
+    let nextMaxPwr = Math.max(nextProps.available, maxBand.retractedSum, maxBand.deployedSum);
+
     if (language !== nextContext.language) {
       this.wattAxis.tickFormat(nextContext.language.formats.r2);
       this.pctAxis.tickFormat(nextContext.language.formats.rPct);
     }
 
-    if (nextProps.width != this.props.width || sizeRatio != nextContext.sizeRatio) {
+    if (maxPwr != nextMaxPwr) { // Update Axes if max power has changed
+      this._updateScales(innerWidth, nextMaxPwr, nextProps.available);
+      this.setState({ maxPwr: nextMaxPwr });
+    } else if (nextProps.width != this.props.width || sizeRatio != nextContext.sizeRatio) {
       this._updateDimensions(nextProps, nextContext.sizeRatio);
     }
   }
 
-  /**
-   * Assemble bands for relative consumption array.
-   * @param {Number[]} consumed Array of relative-consumption numbers
-   * @param {object} selected Object mapping selected bands to 1
-   * @param {Number} yOffset Offset in y-direction of the bar
-   * @param {Function} onClick onClick callback
-   * @returns {React.Component} Bands
-   */
-  _consumedToBands(consumed, selected, yOffset, onClick) {
-    const { state, wattScale } = this;
-    const bands = [];
-    let consumesPrev = 0;
-    for (let i = 0; i < consumed.length; i++) {
-      consumesPrev = consumed[i - 1] || consumesPrev;
-      const consumes = consumed[i];
-
-      if (!consumes) {
-        continue;
-      }
-
-      bands.push(<rect
-        key={'b' + i}
-        width={Math.ceil(Math.max(wattScale(consumes - consumesPrev), 0))}
-        height={state.barHeight}
-        x={wattScale(consumesPrev)}
-        y={yOffset + 1}
-        onClick={onClick.bind(this, i)}
-        className={getClass(selected[i], consumes)}
-      />);
-
-      bands.push(<text
-        key={'t' + i}
-        dy='0.5em'
-        textAnchor='middle'
-        height={state.barHeight}
-        x={wattScale(consumesPrev) + (wattScale(consumes - consumesPrev) / 2)}
-        y={yOffset + (state.barHeight / 2)}
-        onClick={onClick.bind(this, i)}
-        className='primary-bg'>{i + 1}</text>
-      );
-    }
-    return bands;
-  }
-
   /**
    * Render the power bands
    * @return {React.Component} Power bands
@@ -201,27 +184,78 @@ export default class PowerBands extends TranslatedComponent {
       return null;
     }
 
-    let { pctScale, context, props, state } = this;
+    let { wattScale, pctScale, context, props, state } = this;
     let { translate, formats } = context.language;
     let { f2, pct1 } = formats; // wattFmt, pctFmt
-    let { ship } = props;
-    let { innerWidth, ret, dep, barHeight } = state;
-
-    let {
-      consumed, generated, relativeConsumed, relativeConsumedRetracted
-    } = ship.getMetrics(POWER_METRICS);
-    let maxPwr = Math.max(consumed, generated);
-    let retSum = relativeConsumedRetracted[relativeConsumedRetracted.length - 1];
-    let depSum = relativeConsumed[relativeConsumed.length - 1];
-
-    this.wattScale.range([0, innerWidth]).domain([0, 1]).clamp(true);
-    this.pctScale.range([0, innerWidth]).domain([0, maxPwr / generated]).clamp(true);
-
-    let pwrWarningClass = cn('threshold', { exceeded: retSum > generated * 0.4 });
-    let retracted = this._consumedToBands(relativeConsumedRetracted, ret, 0, this._selectRet);
-    let deployed = this._consumedToBands(relativeConsumed, dep, barHeight, this._selectDep);
+    let { available, bands } = props;
+    let { innerWidth, ret, dep } = state;
+    let pwrWarningClass = cn('threshold', { exceeded: bands[0].retractedSum > available * 0.4 });
+    let deployed = [];
+    let retracted = [];
     let retSelected = Object.keys(ret).length > 0;
     let depSelected = Object.keys(dep).length > 0;
+    let retSum = 0;
+    let depSum = 0;
+
+    for (let i = 0; i < bands.length; i++) {
+      let b = bands[i];
+      retSum += (!retSelected || ret[i]) ? b.retracted : 0;
+      depSum += (!depSelected || dep[i]) ? b.deployed + b.retracted : 0;
+
+      if (b.retracted > 0) {
+        let retLbl = bandText(b.retracted, i, wattScale);
+
+        retracted.push(<rect
+          key={'rB' + i}
+          width={Math.ceil(Math.max(wattScale(b.retracted), 0))}
+          height={state.barHeight}
+          x={Math.floor(Math.max(wattScale(b.retractedSum) - wattScale(b.retracted), 0))}
+          y={1}
+          onClick={this._selectRet.bind(this, i)}
+          className={getClass(ret[i], b.retractedSum, available)}
+        />);
+
+        if (retLbl) {
+          retracted.push(<text
+            key={'rT' + i}
+            dy='0.5em'
+            textAnchor='middle'
+            height={state.barHeight}
+            x={wattScale(b.retractedSum) - (wattScale(b.retracted) / 2)}
+            y={state.retY}
+            onClick={this._selectRet.bind(this, i)}
+            className='primary-bg'>{retLbl}</text>
+          );
+        }
+      }
+
+      if (b.retracted > 0 || b.deployed > 0) {
+        let depLbl = bandText(b.deployed + b.retracted, i, wattScale);
+
+        deployed.push(<rect
+          key={'dB' + i}
+          width={Math.ceil(Math.max(wattScale(b.deployed + b.retracted), 0))}
+          height={state.barHeight}
+          x={Math.floor(Math.max(wattScale(b.deployedSum) - wattScale(b.retracted) - wattScale(b.deployed), 0))}
+          y={state.barHeight + 1}
+          onClick={this._selectDep.bind(this, i)}
+          className={getClass(dep[i], b.deployedSum, available)}
+        />);
+
+        if (depLbl) {
+          deployed.push(<text
+            key={'dT' + i}
+            dy='0.5em'
+            textAnchor='middle'
+            height={state.barHeight}
+            x={wattScale(b.deployedSum) - ((wattScale(b.retracted) + wattScale(b.deployed)) / 2)}
+            y={state.depY}
+            onClick={this._selectDep.bind(this, i)}
+            className='primary-bg'>{depLbl}</text>
+          );
+        }
+      }
+    }
 
     return (
       <svg style={{ marginTop: '1em', width: '100%', height: state.height }} onContextMenu={wrapCtxMenu(this._selectNone)}>
@@ -237,8 +271,8 @@ export default class PowerBands extends TranslatedComponent {
           <line x1={pctScale(0.4)} x2={pctScale(0.4)} y1='0' y2={state.innerHeight} className={pwrWarningClass} />
           <text dy='0.5em' x='-3' y={state.retY} className='primary upp' textAnchor='end' onMouseOver={this.context.termtip.bind(null, 'retracted')} onMouseLeave={this._hidetip}>{translate('ret')}</text>
           <text dy='0.5em' x='-3' y={state.depY} className='primary upp' textAnchor='end' onMouseOver={this.context.termtip.bind(null, 'deployed', { orientation: 's', cap: 1 })} onMouseLeave={this._hidetip}>{translate('dep')}</text>
-          <text dy='0.5em' x={innerWidth + 5} y={state.retY} className={getClass(retSelected, retSum, generated)}>{f2(Math.max(0, retSum * generated))} ({pct1(Math.max(0, retSum))})</text>
-          <text dy='0.5em' x={innerWidth + 5} y={state.depY} className={getClass(depSelected, depSum, generated)}>{f2(Math.max(0, depSum * generated))} ({pct1(Math.max(0, depSum))})</text>
+          <text dy='0.5em' x={innerWidth + 5} y={state.retY} className={getClass(retSelected, retSum, available)}>{f2(Math.max(0, retSum))} ({pct1(Math.max(0, retSum / available))})</text>
+          <text dy='0.5em' x={innerWidth + 5} y={state.depY} className={getClass(depSelected, depSum, available)}>{f2(Math.max(0, depSum))} ({pct1(Math.max(0, depSum / available))})</text>
         </g>
       </svg>
     );

src/app/components/PowerManagement.jsx

@@ -3,49 +3,24 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import TranslatedComponent from './TranslatedComponent';
 import PowerBands from './PowerBands';
+import { slotName, slotComparator } from '../utils/SlotFunctions';
 import { Power, NoPower } from './SvgIcons';
-import autoBind from 'auto-bind';
-import { Ship, Module } from 'ed-forge';
 
-/**
- * Makes a comparison based on the order `false < undefined < true` (fut) and
- * maps it to `[-1, 0, 1]`.
- * @param {boolean} a Bool or undefined
- * @param {boolean} b Bool or undefined
- * @returns {number} Comparison
- */
-function futComp(a, b) {
-  switch (a) {
-    case false: return (b === false ? 0 : 1);
-    // The next else-expression maps false to -1 and true to 1
-    case undefined: return (b === undefined ? 0 : 2 * Number(b) - 1);
-    case true: return (b === true ? 0 : -1);
-  }
-}
-
-/**
- * Get the enabled-icon.
- * @param {boolean} enabled Is the module enabled?
- * @returns {React.Component} Enabled icon.
- */
-function getPowerIcon(enabled) {
-  if (enabled === undefined) {
-    return null;
-  }
-  if (enabled) {
-    return <Power className='secondary-disabled' />;
-  } else {
-    return <NoPower className='icon warning' />;
-  }
-}
+const POWER = [
+  null,
+  null,
+  <NoPower className='icon warning' />,
+  <Power className='secondary-disabled' />
+];
 
 /**
  * Power Management Section
  */
 export default class PowerManagement extends TranslatedComponent {
   static propTypes = {
-    ship: PropTypes.instanceOf(Ship).isRequired,
+    ship: PropTypes.object.isRequired,
     code: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired
   };
 
   /**
@@ -54,17 +29,19 @@ export default class PowerManagement extends TranslatedComponent {
    */
   constructor(props) {
     super(props);
-    autoBind(this);
+    this._renderPowerRows = this._renderPowerRows.bind(this);
+    this._updateWidth = this._updateWidth.bind(this);
+    this._sort = this._sort.bind(this);
 
     this.state = {
       predicate: 'pwr',
-      desc: true,
+      desc: false,
       width: 0
     };
   }
 
   /**
-   * Set the sort order
+   * Set the sort order and sort
    * @param  {string} predicate Sort predicate
    */
   _sortOrder(predicate) {
@@ -76,51 +53,50 @@ export default class PowerManagement extends TranslatedComponent {
       desc = true;
     }
 
+    this._sort(this.props.ship, predicate, desc);
     this.setState({ predicate, desc });
   }
 
   /**
    * Sorts the power list
-   * @param  {Module[]} modules Modules to sort
-   * @returns {Module[]} Sorted modules
+   * @param  {Ship} ship          Ship instance
+   * @param  {string} predicate   Sort predicate
+   * @param  {Boolean} desc       Sort order descending
    */
-  _sortAndFilter(modules) {
-    modules = modules.filter((m) => m.get('powerdraw') >= 0);
-    let { translate } = this.context.language;
-    const { predicate, desc } = this.state;
-    let comp;
+  _sort(ship, predicate, desc) {
+    let powerList = ship.powerList;
+    let comp = slotComparator.bind(null, this.context.language.translate);
+
     switch (predicate) {
-      case 'n': comp = (a, b) => translate(a.readMeta('type')).localeCompare(
-        translate(b.readMeta('type'))
-      ); break;
-      // case 't': comp = comp((a, b) => a.type.localeCompare(b.type), desc); break;
-      case 'pri': comp = (a, b) => a.getPowerPriority() - b.getPowerPriority(); break;
-      case 'pwr': comp = (a, b) => a.get('powerdraw') - b.get('powerdraw'); break;
-      case 'r': comp = (a, b) => futComp(a.isPowered().retracted, b.isPowered().retracted); break;
-      case 'd': comp = (a, b) => futComp(a.isPowered().deployed, b.isPowered().deployed); break;
+      case 'n': comp = comp(null, desc); break;
+      case 't': comp = comp((a, b) => a.type.localeCompare(b.type), desc); break;
+      case 'pri': comp = comp((a, b) => a.priority - b.priority, desc); break;
+      case 'pwr': comp = comp((a, b) => a.m.getPowerUsage() - b.m.getPowerUsage(), desc); break;
+      case 'r': comp = comp((a, b) => ship.getSlotStatus(a) - ship.getSlotStatus(b), desc); break;
+      case 'd': comp = comp((a, b) => ship.getSlotStatus(a, true) - ship.getSlotStatus(b, true), desc); break;
     }
-    modules.sort(comp);
-    if (desc) {
-      modules.reverse();
-    }
-    return modules;
+
+    powerList.sort(comp);
   }
 
   /**
-   * Creates a callback that changes the power priority for the given module
-   * based on the given delta.
-   * @param {Module} m Module to set the priority for
-   * @param {Number} delta Delta to set
-   * @returns {Function} Callback
+   * Update slot priority
+   * @param  {Object} slot Slot model
+   * @param  {number} inc  increment / decrement
    */
-  _prioCb(m, delta) {
-    return () => {
-      const prio = m.getPowerPriority();
-      const newPrio = Math.max(0, prio + delta);
-      if (0 <= newPrio) {
-        m.setPowerPriority(newPrio);
-      }
-    };
+  _priority(slot, inc) {
+    if (this.props.ship.setSlotPriority(slot, slot.priority + inc)) {
+      this.props.onChange();
+    }
+  }
+
+  /**
+   * Toggle slot active/inactive
+   * @param  {Object} slot Slot model
+   */
+  _toggleEnabled(slot) {
+    this.props.ship.setSlotEnabled(slot, !slot.enabled);
+    this.props.onChange();
   }
 
   /**
@@ -134,35 +110,52 @@ export default class PowerManagement extends TranslatedComponent {
   _renderPowerRows(ship, translate, pwr, pct) {
     let powerRows = [];
 
-    let modules = this._sortAndFilter(ship.getModules());
-    for (let m of modules) {
-      let retractedElem = null, deployedElem = null;
-      const flipEnabled = () => m.setEnabled();
-      if (m.isEnabled()) {
-        let powered = m.isPowered();
-        retractedElem = <td className='ptr upp' onClick={flipEnabled}>{getPowerIcon(powered.retracted)}</td>;
-        deployedElem = <td className='ptr upp' onClick={flipEnabled}>{getPowerIcon(powered.deployed)}</td>;
-      } else {
-        retractedElem = <td className='ptr disabled upp' colSpan='2' onClick={flipEnabled}>{translate('disabled')}</td>;
-      }
+    for (let i = 0, l = ship.powerList.length; i < l; i++) {
+      let slot = ship.powerList[i];
 
-      const slot = m.getSlot();
-      powerRows.push(<tr key={slot} className={cn('highlight', { disabled: !m.isEnabled() })}>
-        <td className='ptr' style={{ width: '1em' }} onClick={flipEnabled}>{String(m.getClass()) + m.getRating()}</td>
-        <td className='ptr le shorten cap' onClick={flipEnabled}>{translate(m.readMeta('type'))}</td>
-        {/* <td className='ptr' onClick={flipEnabled}><u>{translate(slot.type)}</u></td> */}
-        <td>
-          <span className='flip ptr btn' onClick={this._prioCb(m, -1)}>&#9658;</span>
-          {' ' + (m.getPowerPriority() + 1) + ' '}
-          <span className='ptr btn' onClick={this._prioCb(m, 1)}>&#9658;</span>
-        </td>
-        <td className='ri ptr' style={{ width: '3.25em' }} onClick={flipEnabled}>{pwr(m.get('powerdraw'))}</td>
-        <td className='ri ptr' style={{ width: '3em' }} onClick={flipEnabled}>
-          <u>{pct(m.get('powerdraw') / ship.getPowerPlant().get('powercapacity'))}</u>
-        </td>
-        {retractedElem}
-        {deployedElem}
-      </tr>);
+      if (slot.m && slot.m.getPowerUsage() > 0) {
+        let m = slot.m;
+        let toggleEnabled = this._toggleEnabled.bind(this, slot);
+        let retractedElem = null, deployedElem = null;
+
+        if (slot.enabled) {
+          retractedElem = <td className='ptr upp' onClick={toggleEnabled}>{POWER[ship.getSlotStatus(slot, false)]}</td>;
+          deployedElem = <td className='ptr upp' onClick={toggleEnabled}>{POWER[ship.getSlotStatus(slot, true)]}</td>;
+        } else {
+          retractedElem = <td className='ptr disabled upp' colSpan='2' onClick={toggleEnabled}>{translate('disabled')}</td>;
+        }
+
+        // If this is a Guardian Shield Reinforcement Package or Guardian Hull Reinforcement Package, or Guardian Module Reinforcement Package, it cannot change priority
+        let priorityField;
+        if (m.symbol) {
+          if (m.symbol.match(/GuardianShield/i) || m.symbol.match(/GuardianHull/i) || m.symbol.match(/GuardianModule/i)) {
+            priorityField = <td>1</td>;
+          } else {
+            priorityField = <td>
+            <span className='flip ptr btn' onClick={this._priority.bind(this, slot, -1)}>&#9658;</span>
+            {' ' + (slot.priority + 1) + ' '}
+            <span className='ptr btn' onClick={this._priority.bind(this, slot, 1)}>&#9658;</span>
+          </td>;
+          }
+        }
+        else {
+          priorityField = <td>
+          <span className='flip ptr btn' onClick={this._priority.bind(this, slot, -1)}>&#9658;</span>
+          {' ' + (slot.priority + 1) + ' '}
+          <span className='ptr btn' onClick={this._priority.bind(this, slot, 1)}>&#9658;</span>
+        </td>;
+        }
+        powerRows.push(<tr key={i} className={cn('highlight', { disabled: !slot.enabled })}>
+          <td className='ptr' style={{ width: '1em' }} onClick={toggleEnabled}>{m.class + m.rating}</td>
+          <td className='ptr le shorten cap' onClick={toggleEnabled}>{slotName(translate, slot)}</td>
+          <td className='ptr' onClick={toggleEnabled}><u>{translate(slot.type)}</u></td>
+          {priorityField}
+          <td className='ri ptr' style={{ width: '3.25em' }} onClick={toggleEnabled}>{pwr(m.getPowerUsage())}</td>
+          <td className='ri ptr' style={{ width: '3em' }} onClick={toggleEnabled}><u>{pct(m.getPowerUsage() / ship.powerAvailable)}</u></td>
+          {retractedElem}
+          {deployedElem}
+        </tr>);
+      }
     }
     return powerRows;
   }
@@ -178,6 +171,7 @@ export default class PowerManagement extends TranslatedComponent {
    * Add listeners when about to mount and sort power list
    */
   componentWillMount() {
+    this._sort(this.props.ship, this.state.predicate, this.state.desc);
     this.resizeListener = this.context.onWindowResize(this._updateWidth);
   }
 
@@ -188,6 +182,17 @@ export default class PowerManagement extends TranslatedComponent {
     this._updateWidth();
   }
 
+  /**
+   * Sort power list if the ship instance has changed
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextState   Incoming/Next state
+   */
+  componentWillUpdate(nextProps, nextState) {
+    if (this.props.ship != nextProps.ship) {
+      this._sort(nextProps.ship, nextState.predicate, nextState.desc);
+    }
+  }
+
   /**
    * Remove listeners on unmount
    */
@@ -202,38 +207,39 @@ export default class PowerManagement extends TranslatedComponent {
   render() {
     let { ship, code } = this.props;
     let { translate, formats } = this.context.language;
-    let pp = ship.getPowerPlant();
+    let pwr = formats.f2;
+    let pp = ship.standard[0].m;
+    let sortOrder = this._sortOrder;
 
     return (
       <div ref={node => this.node = node} className='group half' id='componentPriority'>
         <table style={{ width: '100%' }}>
           <thead>
             <tr className='main'>
-              <th colSpan='2' className='sortable le' onClick={() => this._sortOrder('n')} >{translate('module')}</th>
-              {/* <th style={{ width: '3em' }} className='sortable' onClick={() => this._sortOrder('t')} >{translate('type')}</th> */}
-              <th style={{ width: '4em' }} className='sortable' onClick={() => this._sortOrder('pri')} >{translate('pri')}</th>
-              <th colSpan='2' className='sortable' onClick={() => this._sortOrder('pwr')} >{translate('PWR')}</th>
-              <th style={{ width: '3em' }} className='sortable' onClick={() => this._sortOrder('r')} >{translate('ret')}</th>
-              <th style={{ width: '3em' }} className='sortable' onClick={() => this._sortOrder('d')} >{translate('dep')}</th>
+              <th colSpan='2' className='sortable le' onClick={sortOrder.bind(this, 'n')} >{translate('module')}</th>
+              <th style={{ width: '3em' }} className='sortable' onClick={sortOrder.bind(this, 't')} >{translate('type')}</th>
+              <th style={{ width: '4em' }} className='sortable' onClick={sortOrder.bind(this, 'pri')} >{translate('pri')}</th>
+              <th colSpan='2' className='sortable' onClick={sortOrder.bind(this, 'pwr')} >{translate('PWR')}</th>
+              <th style={{ width: '3em' }} className='sortable' onClick={sortOrder.bind(this, 'r')} >{translate('ret')}</th>
+              <th style={{ width: '3em' }} className='sortable' onClick={sortOrder.bind(this, 'd')} >{translate('dep')}</th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>{String(pp.getClass()) + pp.getRating()}</td>
+              <td>{pp.class + pp.rating}</td>
               <td className='le shorten cap' >{translate('pp')}</td>
+              <td><u >{translate('SYS')}</u></td>
               <td>1</td>
-              <td className='ri'>{formats.f2(pp.get('powercapacity'))}</td>
+              <td className='ri'>{pwr(pp.getPowerGeneration())}</td>
               <td className='ri'><u>100%</u></td>
               <td></td>
               <td></td>
             </tr>
-            <tr><td style={{ lineHeight:0 }} colSpan='8'>
-              <hr style={{ margin: '0 0 3px', background: '#ff8c0d', border: 0, height: 1 }} />
-            </td></tr>
-            {this._renderPowerRows(ship, translate, formats.f2, formats.pct1)}
+            <tr><td style={{ lineHeight:0 }} colSpan='8'><hr style={{ margin: '0 0 3px', background: '#ff8c0d', border: 0, height: 1 }} /></td></tr>
+            {this._renderPowerRows(ship, translate, pwr, formats.pct1)}
           </tbody>
         </table>
-        <PowerBands width={this.state.width} ship={ship} code={code} />
+        <PowerBands width={this.state.width} code={code} available={pp.getPowerGeneration()} bands={ship.priorityBands} />
       </div>
     );
   }

src/app/components/ShipPicker.jsx

@@ -5,7 +5,6 @@ import { Ships } from 'coriolis-data/dist';
 import { Rocket } from './SvgIcons';
 import Persist from '../stores/Persist';
 import cn from 'classnames';
-import autoBind from 'auto-bind';
 
 /**
  * Ship picker
@@ -27,9 +26,13 @@ export default class ShipPicker extends TranslatedComponent {
    * @param {object} props  Properties react
    * @param {object} context   react context
    */
-  constructor(props, context) {
+  constructor(props, context) { // eslint-disable-line
     super(props);
-    autoBind(this);
+
+    this.shipOrder = Object.keys(Ships).sort();
+    this._toggleMenu = this._toggleMenu.bind(this);
+    this._closeMenu = this._closeMenu.bind(this);
+
     this.state = { menuOpen: false };
   }
 
@@ -111,11 +114,11 @@ export default class ShipPicker extends TranslatedComponent {
             <span className='menu-item-label'>{shipString}</span>
           </div>
           { menuOpen ?
-            <div className='menu-list' onClick={ (e) => e.stopPropagation() }>
-              <div className='quad'>
-                {this._renderPickerMenu()}
-              </div>
-            </div> : null }
+          <div className='menu-list' onClick={ (e) => e.stopPropagation() }>
+            <div className='quad'>
+              {this._renderPickerMenu()}
+            </div>
+          </div> : null }
         </div>
       </div>
     );

src/app/components/ShipSummaryTable.jsx

@@ -1,24 +1,21 @@
-import autoBind from 'auto-bind';
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
 import { Warning } from './SvgIcons';
-
-import { ShipProps } from 'ed-forge';
-const {
-  SPEED, BOOST_SPEED, DAMAGE_METRICS, JUMP_METRICS, SHIELD_METRICS,
-  ARMOUR_METRICS, CARGO_CAPACITY, FUEL_CAPACITY, UNLADEN_MASS, MAXIMUM_MASS,
-  MODULE_PROTECTION_METRICS, PASSENGER_CAPACITY
-} = ShipProps;
+import * as Calc from '../shipyard/Calculations';
 
 /**
  * Ship Summary Table / Stats
  */
 export default class ShipSummaryTable extends TranslatedComponent {
+
   static propTypes = {
     ship: PropTypes.object.isRequired,
-    code: PropTypes.string.isRequired,
+    cargo: PropTypes.number.isRequired,
+    fuel: PropTypes.number.isRequired,
+    marker: PropTypes.string.isRequired,
+    pips: PropTypes.object.isRequired
   };
 
   /**
@@ -27,7 +24,7 @@ export default class ShipSummaryTable extends TranslatedComponent {
    */
   constructor(props) {
     super(props);
-    autoBind(this);
+    this.didContextChange = this.didContextChange.bind(this);
     this.state = {
       shieldColour: 'blue'
     };
@@ -38,54 +35,46 @@ export default class ShipSummaryTable extends TranslatedComponent {
    * @return {React.Component} Summary table
    */
   render() {
-    const { ship } = this.props;
+    const { ship, cargo, fuel, pips } = this.props;
     let { language, tooltip, termtip } = this.context;
     let translate = language.translate;
     let u = language.units;
     let formats = language.formats;
-    let { time, int, f1, f2 } = formats;
+    let { time, int, round, f1, f2 } = formats;
     let hide = tooltip.bind(null, null);
-
-    const speed = ship.get(SPEED);
-    const shipBoost = ship.get(BOOST_SPEED);
-    const canThrust = 0 < speed;
-    const canBoost = canThrust && !isNaN(shipBoost);
-    const speedTooltip = canThrust ? 'TT_SUMMARY_SPEED' : 'TT_SUMMARY_SPEED_NONFUNCTIONAL';
-    const boostTooltip = canBoost ? 'TT_SUMMARY_BOOST' : canThrust ? 'TT_SUMMARY_BOOST_NONFUNCTIONAL' : 'TT_SUMMARY_SPEED_NONFUNCTIONAL';
-
-    const sgMetrics = ship.get(SHIELD_METRICS);
-    const armourMetrics = ship.get(ARMOUR_METRICS);
-    const damageMetrics = ship.get(DAMAGE_METRICS);
-    const moduleProtectionMetrics = ship.get(MODULE_PROTECTION_METRICS);
-    const timeToDrain = damageMetrics.timeToDrain[8];
-
-    const shieldGenerator = ship.getShieldGenerator();
-    const sgClassNames = cn({
-      warning: shieldGenerator && !shieldGenerator.isEnabled(),
-      muted: !shieldGenerator,
-    });
+    const shieldGenerator = ship.findInternalByGroup('sg') || ship.findInternalByGroup('psg');
+    const sgClassNames = cn({ warning: shieldGenerator && !ship.shield, muted: !shieldGenerator });
     const sgTooltip = shieldGenerator ? 'TT_SUMMARY_SHIELDS' : 'TT_SUMMARY_SHIELDS_NONFUNCTIONAL';
-    const sgType = shieldGenerator ? shieldGenerator.readMeta('type') : undefined;
+    const timeToDrain = Calc.timeToDrainWep(ship, 4);
+    const canThrust = ship.canThrust(cargo, ship.fuelCapacity);
+    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 canJump = ship.getSlotStatus(ship.standard[2]) == 3;
+    const sgMetrics = Calc.shieldMetrics(ship, pips.sys);
+    const distBoost = canBoost ?  Calc.calcBoost(ship) : 'No Boost';
+    //const shipBoost = ship.boostInterval(ship)
+    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';
-    switch (sgType) {
-      case 'biweaveshieldgen': shieldColour = 'purple'; break;
-      case 'prismaticshieldgen': shieldColour = 'green'; break;
+    if (shieldGenerator && shieldGenerator.m.grp === 'psg') {
+      shieldColour = 'green';
+    } else if (shieldGenerator && shieldGenerator.m.grp === 'bsg') {
+      shieldColour = 'purple';
     }
-    this.state = { shieldColour };
-
-    const jumpRangeMetrics = ship.getMetrics(JUMP_METRICS);
-    // TODO:
-    const canJump = true;
-
+    this.state = {
+      shieldColour
+    };
     return <div id='summary'>
-      <div style={{ display: 'table', width: '100%' }}>
-        <div style={{ display: 'table-row' }}>
+      <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': speed == 0 }) }>{translate('speed')}</th>
+                <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} className={ cn({ 'bg-warning-disabled': jumpRangeMetrics.jumpRange == 0 }) }>{translate('jump range')}</th>
+                <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_BOOST_INTERVALS', { cap: 0 })}colSpan={2} className={ cn({ 'bg-warning-disabled': !canBoost }) }>{translate('boost int')}</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>
@@ -99,15 +88,16 @@ export default class ShipSummaryTable extends TranslatedComponent {
                 <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>{translate('unladen')}</th>
-                <th>{translate('laden')}</th>
-                <th>{translate('total unladen')}</th>
-                <th>{translate('total laden')}</th>
+                <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_BOOST_INTERVAL', { cap: 0 })} onMouseLeave={hide}>{translate('distro')}</th>
+                <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_SHIP_BOOST_INTERVAL', { cap: 0 })} onMouseLeave={hide}>{translate('ship')}</th>
+                <th className={ cn({ 'lft': true, 'bg-warning-disabled': !canJump }) }>{translate('max')}</th>
+                <th className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('unladen')}</th>
+                <th className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('laden')}</th>
+                <th className={ cn({ 'bg-warning-disabled': !canJump }) }>{translate('total unladen')}</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>
@@ -115,87 +105,31 @@ export default class ShipSummaryTable extends TranslatedComponent {
             </thead>
             <tbody>
               <tr>
-                <td onMouseEnter={termtip.bind(null, speedTooltip, { cap: 0 })}
-                  onMouseLeave={hide}
-                >{canThrust ?
-                    <span>{int(speed)}{u['m/s']}</span> :
-                    <span className='warning'>0<Warning/></span>
-                  }</td>
-                <td onMouseEnter={termtip.bind(null, boostTooltip, { cap: 0 })}
-                  onMouseLeave={hide}
-                >{canBoost ?
-                    <span>{int(shipBoost)}{u['m/s']}</span> :
-                    <span className='warning'>0<Warning/></span>
-                  }</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_MAX_SINGLE_JUMP', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{canJump ?
-                  // TODO:
-                    <span>{NaN}{u.LY}</span> :
-                    <span className='warning'>0<Warning/></span>
-                  }</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_SINGLE_JUMP', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{canJump ?
-                  // TODO:
-                    <span>{NaN}{u.LY}</span> :
-                    <span className='warning'>0<Warning/></span>
-                  }</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_SINGLE_JUMP', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{canJump ?
-                    <span>{f2(jumpRangeMetrics.jumpRange)}{u.LY}</span> :
-                    <span className='warning'>0<Warning/></span>
-                  }</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_TOTAL_JUMP', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{canJump ?
-                  // TODO:
-                    <span>{NaN}{u.LY}</span> :
-                    <span className='warning'>0 <Warning/></span>
-                  }</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_TOTAL_JUMP', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{canJump ?
-                    <span>{f2(jumpRangeMetrics.totalRange)}{u.LY}</span> :
-                    <span className='warning'>0<Warning/></span>
-                  }</td>
-                <td className={sgClassNames}
-                  onMouseEnter={termtip.bind(null, sgTooltip, { cap: 0 })}
-                  onMouseLeave={hide}
-                >{int(sgMetrics.shieldStrength)}{u.MJ}</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_INTEGRITY', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{int(armourMetrics.armour)}</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_DPS', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{f1(damageMetrics.dps)}</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_EPS', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{f1(damageMetrics.eps)}</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_TTD', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{timeToDrain === Infinity ? '∞' : time(timeToDrain)}</td>
+                <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>{distBoost !== 'No Boost' ? formats.time(distBoost) : 'No Boost'}</td>
+                <td>{ship.boostInt && ship.boostInt !== 'undefined' ? formats.time(ship.boostInt) : 0 }</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_MAX_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{ f2(Calc.jumpRange(ship.unladenMass - ship.fuelCapacity + 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 onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.jumpRange(ship.unladenMass, 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_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.jumpRange(ship.unladenMass + 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}>{ canJump ? <span>{f2(Calc.totalJumpRange(ship.unladenMass, 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}>{ canJump ? <span>{f2(Calc.totalJumpRange(ship.unladenMass + 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>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_EPS', { cap: 0 })} onMouseLeave={hide}>{f1(ship.totalEps)}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_TTD', { cap: 0 })} onMouseLeave={hide}>{timeToDrain === Infinity ? '∞' : time(timeToDrain)}</td>
                 {/* <td>{f1(ship.totalHps)}</td> */}
-                <td>{ship.get(CARGO_CAPACITY)}{u.T}</td>
-                <td>{ship.get(PASSENGER_CAPACITY)}</td>
-                <td>{ship.get(FUEL_CAPACITY)}{u.T}</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_HULL_MASS', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{ship.readProp('hullmass')}{u.T}</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_MASS', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{int(ship.get(UNLADEN_MASS))}{u.T}</td>
-                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_MASS', { cap: 0 })}
-                  onMouseLeave={hide}
-                >{int(ship.get(MAXIMUM_MASS))}{u.T}</td>
-                <td>{int(ship.readProp('hardness'))}</td>
-                <td>{ship.readMeta('crew')}</td>
-                <td>{ship.readProp('masslock')}</td>
-                {/* TODO: boost intervall */}
-                <td>{NaN}</td>
-                {/* TODO: resting heat */}
-                <td>{NaN}</td>
+                <td>{round(ship.cargoCapacity)}{u.T}</td>
+                <td>{ship.passengerCapacity}</td>
+                <td>{round(ship.fuelCapacity)}{u.T}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_HULL_MASS', { cap: 0 })} onMouseLeave={hide}>{ship.hullMass}{u.T}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_MASS', { cap: 0 })} onMouseLeave={hide}>{int(ship.unladenMass)}{u.T}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_MASS', { cap: 0 })} onMouseLeave={hide}>{int(ship.ladenMass)}{u.T}</td>
+                <td>{int(ship.hardness)}</td>
+                <td>{ship.crew}</td>
+                <td>{ship.masslock}</td>
+                <td>{formats.pct(restingHeat)}</td>
               </tr>
             </tbody>
           </table>
@@ -223,21 +157,21 @@ export default class ShipSummaryTable extends TranslatedComponent {
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>{translate(sgType || 'No Shield')}</td>
-                <td>{formats.pct1(1 - sgMetrics.explosive.damageMultiplier)}</td>
-                <td>{formats.pct1(1 - sgMetrics.kinetic.damageMultiplier)}</td>
-                <td>{formats.pct1(1 - sgMetrics.thermal.damageMultiplier)}</td>
-                <td></td>
+            <tr>
+              <td>{translate(shieldGenerator && shieldGenerator.m.grp || 'No Shield')}</td>
+              <td>{formats.pct1(ship.shieldExplRes)}</td>
+              <td>{formats.pct1(ship.shieldKinRes)}</td>
+              <td>{formats.pct1(ship.shieldThermRes)}</td>
+              <td></td>
 
-                <td>{int(sgMetrics.shieldStrength || 0)}{u.MJ}</td>
-                <td>{int(sgMetrics.shieldStrength / sgMetrics.explosive.damageMultiplier || 0)}{u.MJ}</td>
-                <td>{int(sgMetrics.shieldStrength / sgMetrics.kinetic.damageMultiplier || 0)}{u.MJ}</td>
-                <td>{int(sgMetrics.shieldStrength / sgMetrics.thermal.damageMultiplier || 0)}{u.MJ}</td>
-                <td></td>
-                <td>{formats.time(sgMetrics.recover) || translate('Never')}</td>
-                <td>{formats.time(sgMetrics.recharge) || translate('Never')}</td>
-              </tr>
+              <td>{int(ship && sgMetrics.summary > 0 ? sgMetrics.summary : 0)}{u.MJ}</td>
+              <td>{int(ship && sgMetrics.summary > 0 ? sgMetrics.summary / sgMetrics.explosive.base : 0)}{u.MJ}</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>
@@ -249,7 +183,7 @@ export default class ShipSummaryTable extends TranslatedComponent {
                 <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('explosive')}`}</th>
                 <th>{`${translate('kinetic')}`}</th>
                 <th>{`${translate('thermal')}`}</th>
                 <th>{`${translate('caustic')}`}</th>
@@ -263,18 +197,19 @@ export default class ShipSummaryTable extends TranslatedComponent {
             </thead>
             <tbody>
               <tr>
-                <td>{translate(ship.getAlloys().readMeta('type') || 'No Armour')}</td>
-                <td>{formats.pct1(1 - armourMetrics.explosive.damageMultiplier)}</td>
-                <td>{formats.pct1(1 - armourMetrics.kinetic.damageMultiplier)}</td>
-                <td>{formats.pct1(1 - armourMetrics.thermal.damageMultiplier)}</td>
-                <td>{formats.pct1(1 - armourMetrics.caustic.damageMultiplier)}</td>
-                <td>{int(armourMetrics.armour)}</td>
-                <td>{int(armourMetrics.armour / armourMetrics.explosive.damageMultiplier)}</td>
-                <td>{int(armourMetrics.armour / armourMetrics.kinetic.damageMultiplier)}</td>
-                <td>{int(armourMetrics.armour / armourMetrics.thermal.damageMultiplier)}</td>
-                <td>{int(armourMetrics.armour / armourMetrics.caustic.damageMultiplier)}</td>
-                <td>{int(moduleProtectionMetrics.moduleArmour)}</td>
-                <td>{formats.pct1(1 - moduleProtectionMetrics.moduleProtection)}</td>
+                <td>{translate(ship && ship.bulkheads && ship.bulkheads.m && ship.bulkheads.m.name || 'No Armour')}</td>
+                <td>{formats.pct1(ship.hullExplRes)}</td>
+                <td>{formats.pct1(ship.hullKinRes)}</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.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>

src/app/components/Slider.jsx

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

src/app/components/Slot.jsx

@@ -2,38 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
-import { ListModifications, Modified } from './SvgIcons';
 import AvailableModulesMenu from './AvailableModulesMenu';
 import ModificationsMenu from './ModificationsMenu';
 import { diffDetails } from '../utils/SlotFunctions';
-import { stopCtxPropagation, wrapCtxMenu } from '../utils/UtilityFunctions';
-import { blueprintTooltip } from '../utils/BlueprintFunctions';
-import { Module } from 'ed-forge';
-import { REG_MILITARY_SLOT, REG_HARDPOINT_SLOT } from 'ed-forge/lib/data/slots';
-import autoBind from 'auto-bind';
-import { toPairs } from 'lodash';
-
-const HARDPOINT_SLOT_LABELS = {
-  1: 'S',
-  2: 'M',
-  3: 'L',
-  4: 'H',
-};
+import { wrapCtxMenu } from '../utils/UtilityFunctions';
 
 /**
  * Abstract Slot
  */
 export default class Slot extends TranslatedComponent {
+
   static propTypes = {
-    currentMenu: PropTypes.any,
-    hideSearch: PropTypes.bool,
-    m: PropTypes.instanceOf(Module),
+    availableModules: PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    maxClass: PropTypes.number.isRequired,
+    selected: PropTypes.bool,
+    m: PropTypes.object,
+    enabled: PropTypes.bool.isRequired,
+    ship: PropTypes.object.isRequired,
+    eligible: PropTypes.object,
     warning: PropTypes.func,
     drag: PropTypes.func,
     drop: PropTypes.func,
-    dropClass: PropTypes.string,
-    propsToShow: PropTypes.object.isRequired,
-    onPropToggle: PropTypes.func.isRequired,
+    dropClass: PropTypes.string
   };
 
   /**
@@ -42,122 +34,25 @@ export default class Slot extends TranslatedComponent {
    */
   constructor(props) {
     super(props);
-    autoBind(this);
-    this.state = { menuIndex: 0 };
+
+    this._modificationsSelected = false;
+
+    this._contextMenu = wrapCtxMenu(this._contextMenu.bind(this));
+    this._getMaxClassLabel = this._getMaxClassLabel.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this.slotDiv = null;
   }
 
-  /**
-   * Opens a menu while setting state.
-   * @param {Object} newMenuIndex New menu index
-   * @param {Event} event Event object
-   */
-  _openMenu(newMenuIndex, event) {
-    const slotName = this.props.m.getSlot();
-    if (
-      this.props.currentMenu === slotName &&
-      newMenuIndex === this.state.menuIndex
-    ) {
-      this.context.closeMenu();
-    } {
-      this.setState({ menuIndex: newMenuIndex });
-      this.context.openMenu(slotName);
-    }
-    // If we don't stop event propagation, the underlying divs also might
-    // get clicked which would open up other menus
-    event.stopPropagation();
-  }
+  // Must be implemented by subclasses:
+  // _getSlotDetails()
 
   /**
-   * Generate the slot contents
-   * @return {React.Component}      Slot contents
+   * Get the CSS class name for the slot. Can/should be overriden
+   * as necessary.
+   * @return {string} CSS Class name
    */
-  _getSlotDetails() {
-    const { m, propsToShow } = this.props;
-    let { termtip, tooltip, language } = this.context;
-    const { translate, units, formats } = language;
-
-    if (m.isEmpty()) {
-      return <div className="empty">
-        {translate(
-          m.getSlot().match(REG_MILITARY_SLOT) ? 'emptyrestricted' : 'empty'
-        )}
-      </div>;
-    } else {
-      let classRating = m.getClassRating();
-      let { drag, drop } = this.props;
-
-      // Modifications tooltip shows blueprint and grade, if available
-      let modTT = translate('modified');
-      const blueprint = m.getBlueprint();
-      const experimental = m.getExperimental();
-      const grade = m.getBlueprintGrade();
-      if (blueprint) {
-        modTT = `${translate(blueprint)} ${translate('grade')}: ${grade}`;
-        if (experimental) {
-          modTT += `, ${translate(experimental)}`;
-        }
-        modTT = (
-          <div>
-            <div>{modTT}</div>
-            {blueprintTooltip(language, m)}
-          </div>
-        );
-      }
-
-      let mass = m.get('mass') || m.get('cargo') || m.get('fuel') || 0;
-      return (
-        <div
-          className={cn('details', { disabled: !m.isEnabled() })}
-          draggable="true"
-          onDragStart={drag}
-          onDragEnd={drop}
-        >
-          <div className={'cb'}>
-            <div className={'l'}>
-              {classRating} {translate(m.readMeta('type'))}
-              {blueprint && (
-                <span
-                  onMouseOver={termtip.bind(null, modTT)}
-                  onMouseOut={tooltip.bind(null, null)}
-                >
-                  <Modified />
-                </span>
-              )}
-            </div>
-            {propsToShow.mass ?
-              <div className={'r'}>
-                {formats.round(mass)}
-                {units.T}
-              </div> : null}
-          </div>
-          <div className={'cb'}>
-            {toPairs(propsToShow).sort().map(([prop, show]) => {
-              const { unit, value } = m.getFormatted(prop, true);
-              // Don't show mass again; it's already shown on the top right
-              // corner of a slot
-              if (!show || isNaN(value) || prop == 'mass') {
-                return null;
-              } else {
-                return (<div className='l'>
-                  {translate(prop)}: {formats.round(value)}{unit}
-                </div>);
-              }
-            })}
-            {(m.getApplicableBlueprints() || []).length > 0 ? (
-              <div className="r">
-                <button onClick={this._openMenu.bind(this, 1)}
-                  onContextMenu={stopCtxPropagation}
-                  onMouseOver={termtip.bind(null, translate('modifications'))}
-                  onMouseOut={tooltip.bind(null, null)}
-                >
-                  <ListModifications />
-                </button>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      );
-    }
+  _getClassNames() {
+    return null;
   }
 
   /**
@@ -166,19 +61,7 @@ export default class Slot extends TranslatedComponent {
    * @return {string} label
    */
   _getMaxClassLabel() {
-    const { m } = this.props;
-    let size = m.getSize();
-    switch (true) {
-      case m.getSlot() === 'armour':
-        return '';
-      case size === 0:
-        // This can also happen for armour but that case was handled above
-        return 'U';
-      case Boolean(m.getSlot().match(REG_HARDPOINT_SLOT)):
-        return HARDPOINT_SLOT_LABELS[size];
-      default:
-        return size;
-    }
+    return this.props.maxClass;
   }
 
   /**
@@ -188,15 +71,25 @@ export default class Slot extends TranslatedComponent {
   _contextMenu(event) {
     event.stopPropagation();
     event.preventDefault();
-    const { m } = this.props;
-    m.reset();
-    if (this.props.currentMenu === m.getSlot()) {
-      this.context.closeMenu();
-    } else {
-      this.forceUpdate();
-    }
+    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
@@ -204,42 +97,73 @@ export default class Slot extends TranslatedComponent {
   render() {
     let language = this.context.language;
     let translate = language.translate;
-    let {
-      currentMenu, m, dropClass, dragOver, warning, hideSearch, propsToShow,
-      onPropToggle,
-    } = this.props;
-    const { menuIndex } = this.state;
+    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
+      this._modificationsSelected = false;
+    }
+
+    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 = '';
+    }
+
+    if (selected) {
+      if (this._modificationsSelected) {
+        menu = <ModificationsMenu
+          className={this._getClassNames()}
+          onChange={onChange}
+          ship={ship}
+          m={m}
+          marker={modificationsMarker}
+          modButton = {this.modButton}
+        />;
+      } else {
+        menu = <AvailableModulesMenu
+          className={this._getClassNames()}
+          modules={availableModules()}
+          m={m}
+          ship={ship}
+          onSelect={onSelect}
+          warning={warning}
+          diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
+        />;
+      }
+    }
 
     // TODO: implement touch dragging
-    const selected = currentMenu === m.getSlot();
+    
     return (
-      <div
-        className={cn('slot', dropClass, { selected })}
-        onContextMenu={this._contextMenu}
-        onDragOver={dragOver} tabIndex="0"
-        onClick={this._openMenu.bind(this, 0)}
-      >
-        <div className={cn(
-          'details-container',
-          { warning: warning && warning(m) },
-        )}>
-          <div className="sz">{this._getMaxClassLabel(translate)}</div>
-          {this._getSlotDetails()}
-        </div>
-        {selected && menuIndex === 0 &&
-          <AvailableModulesMenu
-            m={m} hideSearch={hideSearch}
-            onSelect={(item) => {
-              m.setItem(item);
-              this.context.closeMenu();
-            }}
-            warning={warning}
-            // diffDetails={diffDetails.bind(ship, this.context.language)}
-          />}
-        {selected && menuIndex === 1 &&
-          <ModificationsMenu m={m} propsToShow={propsToShow}
-            onPropToggle={onPropToggle} />}
+      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onKeyDown={this._keyDown} onContextMenu={this._contextMenu} onDragOver={dragOver} tabIndex="0" ref={slotDiv => this.slotDiv = slotDiv}>
+        {
+          // 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>
+        {menu}
       </div>
     );
   }
+
+
+  /**
+   * Toggle the modifications flag when selecting the modifications icon
+   */
+  _toggleModifications() {
+    this._modificationsSelected = !this._modificationsSelected;
+  }
 }

src/app/components/SlotSection.jsx

@@ -5,33 +5,47 @@ import { wrapCtxMenu } from '../utils/UtilityFunctions';
 import { canMount } from '../utils/SlotFunctions';
 import { Equalizer } from '../components/SvgIcons';
 import cn from 'classnames';
-import { Ship } from 'ed-forge';
-import autoBind from 'auto-bind';
 const browser = require('detect-browser');
 
 /**
  * Abstract Slot Section
  */
 export default class SlotSection extends TranslatedComponent {
+
   static propTypes = {
-    ship: PropTypes.instanceOf(Ship),
+    ship: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onCargoChange: PropTypes.func.isRequired,
+    onFuelChange: PropTypes.func.isRequired,
     code: PropTypes.string.isRequired,
     togglePwr: PropTypes.func,
-    propsToShow: PropTypes.object.isRequired,
-    onPropToggle: PropTypes.func.isRequired,
+    sectionMenuRefs: PropTypes.object
   };
 
   /**
    * Constructor
    * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   * @param  {string} sectionId   Section DOM Id
    * @param  {string} sectionName Section name
    */
-  constructor(props, sectionName) {
+  constructor(props, context, sectionId, sectionName) {
     super(props);
-    autoBind(this);
-
+    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);
+    this._contextMenu = this._contextMenu.bind(this);
+    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 = {};
   }
 
@@ -41,6 +55,82 @@ export default class SlotSection extends TranslatedComponent {
   //  _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
+   * @param  {SyntheticEvent} event Event
+   */
+  _openMenu(menu, event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.props.currentMenu === menu) {
+      menu = null;
+    }
+    this.context.openMenu(menu);
+  }
+
+  /**
+   * Mount/Use the specified module in the slot
+   * @param  {Object} slot Slot
+   * @param  {Object} m    Selected module
+   */
+  _selectModule(slot, m) {
+    this.props.ship.use(slot, m, false);
+    this.props.onChange();
+    this._close();
+  }
+
   /**
    * Slot Drag Handler
    * @param  {object} originSlot Origin slot model
@@ -117,6 +207,7 @@ export default class SlotSection extends TranslatedComponent {
           // Copy power info
           targetSlot.enabled = originSlot.enabled;
           targetSlot.priority = originSlot.priority;
+          this.props.onChange();
         }
       } else {
         // Store power info
@@ -145,6 +236,7 @@ export default class SlotSection extends TranslatedComponent {
             targetSlot.enabled = targetEnabled;
             targetSlot.priority = targetPriority;
           }
+          this.props.onChange();
           this.props.ship
             .updatePowerGenerated()
             .updatePowerUsed()
@@ -190,17 +282,6 @@ export default class SlotSection extends TranslatedComponent {
     return 'ineligible';  // Cannot be dropped / invalid drop slot
   }
 
-  _open(newMenu, event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const { currentMenu } = this.props;
-    if (currentMenu === newMenu) {
-      this.context.closeMenu();
-    } else {
-      this.context.openMenu(newMenu);
-    }
-  }
-
   /**
    * Close current menu
    */
@@ -217,13 +298,14 @@ export default class SlotSection extends TranslatedComponent {
   render() {
     let translate = this.context.language.translate;
     let sectionMenuOpened = this.props.currentMenu === this.sectionName;
+    let open = this._openMenu.bind(this, this.sectionName);
+    let ctx = wrapCtxMenu(this._contextMenu);
 
     return (
-      <div className="group" onDragLeave={this._dragOverNone}>
-        <div className={cn('section-menu', { selected: sectionMenuOpened })}
-          onContextMenu={wrapCtxMenu(this._contextMenu)} onClick={this._open.bind(this, this.sectionName)}>
-          <h1 tabIndex="0">{translate(this.sectionName)}<Equalizer/></h1>
-          {sectionMenuOpened && this._getSectionMenu()}
+      <div id={this.sectionId} className={'group'}  onDragLeave={this._dragOverNone}>
+        <div className={cn('section-menu', { selected: sectionMenuOpened })} onClick={open} onContextMenu={ctx}>
+          <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()}
       </div>

src/app/components/StandardSlot.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import Persist from '../stores/Persist';
+import TranslatedComponent from './TranslatedComponent';
+import { diffDetails } from '../utils/SlotFunctions';
+import AvailableModulesMenu from './AvailableModulesMenu';
+import ModificationsMenu from './ModificationsMenu';
+import * as ModuleUtils from '../shipyard/ModuleUtils';
+import { ListModifications, Modified } from './SvgIcons';
+import { Modifications } from 'coriolis-data/dist';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
+import { blueprintTooltip } from '../utils/BlueprintFunctions';
+
+/**
+ * Standard Slot
+ */
+export default class StandardSlot extends TranslatedComponent {
+
+  static propTypes = {
+    slot: PropTypes.object,
+    modules: PropTypes.array.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    ship: PropTypes.object.isRequired,
+    selected: PropTypes.bool,
+    warning: PropTypes.func,
+  };
+
+  /**
+   * Construct the slot
+   * @param {object} props Object properties
+   */
+  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);
+    }
+  }
+
+  /**
+   * Render the slot
+   * @return {React.Component} Slot component
+   */
+  render() {
+    let { termtip, tooltip } = this.context;
+    let { translate, formats, units } = this.context.language;
+    let { modules, slot, selected, warning, onSelect, onChange, ship } = this.props;
+    let m = slot.m;
+    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;
+
+    // Modifications tooltip shows blueprint and grade, if available
+    let modTT = translate('modified');
+    if (m && m.blueprint && m.blueprint.name) {
+      modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+      if (m.blueprint.special && m.blueprint.special.id >= 0) {
+        modTT += ', ' + translate(m.blueprint.special.name);
+      }
+      modTT = (
+          <div>
+            <div>{modTT}</div>
+            {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], null, m.grp, m)}
+          </div>
+        );
+    }
+
+    if (!selected) {
+      // If not selected then sure that modifications flag is unset
+      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) {
+      if (this._modificationsSelected) {
+        menu = <ModificationsMenu
+          className='standard'
+          onChange={onChange}
+          ship={ship}
+          m={m}
+          marker={modificationsMarker}
+          modButton = {this.modButton}
+        />;
+      } else {
+        menu = <AvailableModulesMenu
+          className='standard'
+          modules={modules}
+          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} 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} {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'}>
+                { m.getMinMass() ? <div className='l'>{translate('minmass')}: {formats.int(m.getMinMass())}{units.T}</div> : null }
+                { m.getOptMass() ? <div className='l'>{translate('optmass')}: {formats.int(m.getOptMass())}{units.T}</div> : null }
+                { m.getMaxMass() ? <div className='l'>{translate('maxmass')}: {formats.int(m.getMaxMass())}{units.T}</div> : null }
+                { m.getOptMul() ? <div className='l'>{translate('optmul')}: {formats.rPct(m.getOptMul())}</div> : null }
+                { m.getRange() ? <div className='l'>{translate('range', m.grp)}: {formats.f2(m.getRange())}{units.km}</div> : null }
+                { m.time ? <div className='l'>{translate('time')}: {formats.time(m.time)}</div> : null }
+                { m.getThermalEfficiency() ? <div className='l'>{translate('efficiency')}: {formats.f2(m.getThermalEfficiency())}</div> : null }
+                { m.getPowerGeneration() > 0 ? <div className='l'>{translate('pgen')}: {formats.f1(m.getPowerGeneration())}{units.MW}</div> : null }
+                { m.getMaxFuelPerJump() ? <div className='l'>{translate('max')} {translate('fuel')}: {formats.f1(m.getMaxFuelPerJump())}{units.T}</div> : null }
+                { m.getWeaponsCapacity() ? <div className='l'>{translate('WEP')}: {formats.f1(m.getWeaponsCapacity())}{units.MJ} / {formats.f1(m.getWeaponsRechargeRate())}{units.MW}</div> : null }
+                { m.getSystemsCapacity() ? <div className='l'>{translate('SYS')}: {formats.f1(m.getSystemsCapacity())}{units.MJ} / {formats.f1(m.getSystemsRechargeRate())}{units.MW}</div> : null }
+                { m.getEnginesCapacity() ? <div className='l'>{translate('ENG')}: {formats.f1(m.getEnginesCapacity())}{units.MJ} / {formats.f1(m.getEnginesRechargeRate())}{units.MW}</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.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>
+        {menu}
+      </div>
+    );
+  }
+
+  /**
+   * Toggle the modifications flag when selecting the modifications icon
+   */
+  _toggleModifications() {
+    this._modificationsSelected = !this._modificationsSelected;
+  }
+}

src/app/components/StandardSlotSection.jsx

@@ -1,33 +1,46 @@
 import React from 'react';
 import cn from 'classnames';
 import SlotSection from './SlotSection';
-import Slot from './Slot';
+import StandardSlot from './StandardSlot';
 import Module from '../shipyard/Module';
 import * as ShipRoles from '../shipyard/ShipRoles';
-import autoBind from 'auto-bind';
-import { stopCtxPropagation, moduleGet } from '../utils/UtilityFunctions';
-import { ShipProps } from 'ed-forge';
-const { CONSUMED_RETR, LADEN_MASS } = ShipProps;
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
 /**
  * Standard Slot section
  */
 export default class StandardSlotSection extends SlotSection {
+
   /**
    * Constructor
    * @param  {Object} props   React Component properties
    * @param  {Object} context React Component context
    */
-  constructor(props) {
-    super(props, 'core internal');
-    autoBind(this);
+  constructor(props, context) {
+    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);
+    this.props.onFuelChange(this.props.ship.fuelCapacity);
     this._close();
   }
 
@@ -37,7 +50,12 @@ 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);
+    this.props.onFuelChange(this.props.ship.fuelCapacity);
     this._close();
   }
 
@@ -46,7 +64,11 @@ 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);
+    this.props.onFuelChange(this.props.ship.fuelCapacity);
     this._close();
   }
 
@@ -55,7 +77,11 @@ 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);
+    this.props.onFuelChange(this.props.ship.fuelCapacity);
     this._close();
   }
 
@@ -64,7 +90,12 @@ 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);
+    this.props.onFuelChange(this.props.ship.fuelCapacity);
     this._close();
   }
 
@@ -72,7 +103,22 @@ 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);
+    this.props.onFuelChange(this.props.ship.fuelCapacity);
+    this._close();
+  }
+
+  /**
+   * Use the specified bulkhead
+   * @param  {Object} bulkhead Bulkhead module details
+   */
+  _selectBulkhead(bulkhead) {
+    this.props.ship.useBulkhead(bulkhead.index);
+    this.context.tooltip();
+    this.props.onChange();
     this._close();
   }
 
@@ -83,48 +129,113 @@ export default class StandardSlotSection extends SlotSection {
     this._optimizeStandard();
   }
 
-  /**
-   * Creates a new slot for a given module.
-   * @param {Module} m Module to create the slot for
-   * @param {function} warning Warning callback
-   * @return {React.Component} Slot component
-   */
-  _mkSlot(m, warning) {
-    const { currentMenu, propsToShow, onPropToggle } = this.props;
-    return <Slot key={m.getSlot()} m={m} warning={warning} hideSearch={true}
-      currentMenu={currentMenu} propsToShow={propsToShow} onPropToggle={onPropToggle}
-    />;
-  }
-
   /**
    * Generate the slot React Components
    * @return {Array} Array of Slots
    */
   _getSlots() {
-    const { ship } = this.props;
-    const fsd = ship.getFSD();
-    return [
-      this._mkSlot(ship.getAlloys()),
-      this._mkSlot(
-        ship.getPowerPlant(),
-        (m) => moduleGet(m, 'powercapacity') < ship.get(CONSUMED_RETR),
-      ),
-      this._mkSlot(
-        ship.getThrusters(),
-        (m) => moduleGet(m, 'enginemaximalmass') < ship.get(LADEN_MASS),
-      ),
-      this._mkSlot(fsd),
-      this._mkSlot(
-        ship.getPowerDistributor(),
-        (m) => moduleGet(m, 'enginescapacity') <= ship.readProp('boostenergy'),
-      ),
-      this._mkSlot(ship.getLifeSupport()),
-      this._mkSlot(ship.getSensors()),
-      this._mkSlot(
-        ship.getCoreFuelTank(),
-        (m) => moduleGet(m, 'fuel') < fsd.get('maxfuel')
-      ),
-    ];
+    let { ship, currentMenu, cargo, fuel } = this.props;
+    let slots = new Array(8);
+    let open = this._openMenu;
+    let select = this._selectModule;
+    let st = ship.standard;
+    let avail = ship.getAvailableModules().standard;
+    let bh = ship.bulkheads;
+
+    slots[0] = <StandardSlot
+      key='bh'
+      slot={bh}
+      modules={ship.getAvailableModules().bulkheads}
+      onOpen={open.bind(this, bh)}
+      onSelect={this._selectBulkhead}
+      selected={currentMenu == bh}
+      onChange={this.props.onChange}
+      ship={ship}
+    />;
+
+    slots[1] = <StandardSlot
+      key='pp'
+      slot={st[0]}
+      modules={avail[0]}
+      onOpen={open.bind(this, st[0])}
+      onSelect={select.bind(this, st[0])}
+      selected={currentMenu == st[0]}
+      onChange={this.props.onChange}
+      ship={ship}
+      warning={m => m instanceof Module ? m.getPowerGeneration() < ship.powerRetracted : m.pgen < ship.powerRetracted}
+    />;
+
+    slots[2] = <StandardSlot
+      key='th'
+      slot={st[1]}
+      modules={avail[1]}
+      onOpen={open.bind(this, st[1])}
+      onSelect={select.bind(this, st[1])}
+      selected={currentMenu == st[1]}
+      onChange={this.props.onChange}
+      ship={ship}
+      warning={m => m instanceof Module ? m.getMaxMass() < (ship.unladenMass + cargo + fuel - st[1].m.mass + m.mass) : m.maxmass < (ship.unladenMass + cargo + fuel - st[1].m.mass + m.mass)}
+    />;
+
+
+    slots[3] = <StandardSlot
+      key='fsd'
+      slot={st[2]}
+      modules={avail[2]}
+      onOpen={open.bind(this, st[2])}
+      onSelect={select.bind(this, st[2])}
+      onChange={this.props.onChange}
+      ship={ship}
+      selected={currentMenu == st[2]}
+    />;
+
+    slots[4] = <StandardSlot
+      key='ls'
+      slot={st[3]}
+      modules={avail[3]}
+      onOpen={open.bind(this, st[3])}
+      onSelect={select.bind(this, st[3])}
+      onChange={this.props.onChange}
+      ship={ship}
+      selected={currentMenu == st[3]}
+    />;
+
+    slots[5] = <StandardSlot
+      key='pd'
+      slot={st[4]}
+      modules={avail[4]}
+      onOpen={open.bind(this, st[4])}
+      onSelect={select.bind(this, st[4])}
+      selected={currentMenu == st[4]}
+      onChange={this.props.onChange}
+      ship={ship}
+      warning={m => m instanceof Module ? m.getEnginesCapacity() < ship.boostEnergy : m.engcap < ship.boostEnergy}
+    />;
+
+    slots[6] = <StandardSlot
+      key='ss'
+      slot={st[5]}
+      modules={avail[5]}
+      onOpen={open.bind(this, st[5])}
+      onSelect={select.bind(this, st[5])}
+      selected={currentMenu == st[5]}
+      onChange={this.props.onChange}
+      ship={ship}
+    />;
+
+    slots[7] = <StandardSlot
+      key='ft'
+      slot={st[6]}
+      modules={avail[6]}
+      onOpen={open.bind(this, st[6])}
+      onSelect={select.bind(this, st[6])}
+      selected={currentMenu == st[6]}
+      onChange={this.props.onChange}
+      ship={ship}
+      warning= {m => m.fuel < st[2].m.maxfuel}  // Show warning when fuel tank is smaller than FSD Max Fuel
+    />;
+
+    return slots;
   }
 
   /**
@@ -132,22 +243,23 @@ export default class StandardSlotSection extends SlotSection {
    * @param  {Function} translate Translate function
    * @return {React.Component}    Section menu
    */
-  _getSectionMenu() {
-    const { translate } = this.context.language;
+  _getSectionMenu(translate) {
+    let planetaryDisabled = this.props.ship.internal.length < 4;
     return <div className='select' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' tabIndex="0" 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' tabIndex="0" onClick={this._multiPurpose.bind(this, false, 0)}>{translate('Multi-purpose')}</li>
-        <li className='lc' tabIndex="0" onClick={this._multiPurpose.bind(this, true, 2)}>{translate('Combat')}</li>
-        <li className='lc' tabIndex="0" onClick={this._optimizeCargo.bind(this, true)}>{translate('Trader')}</li>
-        <li className='lc' tabIndex="0" onClick={this._optimizeExplorer.bind(this, false)}>{translate('Explorer')}</li>
-        <li className='lc' tabIndex="0" onClick={this._optimizeExplorer.bind(this, true)}>{translate('Planetary Explorer')}</li>
-        <li className='lc' tabIndex="0" onClick={this._optimizeMiner.bind(this, true)}>{translate('Miner')}</li>
-        <li className='lc' tabIndex="0" onClick={this._optimizeRacer.bind(this)}>{translate('Racer')}</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' tabIndex="0" onClick={this._multiPurpose.bind(this, true, 2)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['combat'] = smRef}>{translate('Combat')}</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' 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 })} 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' tabIndex="0" onClick={this._optimizeMiner.bind(this, true)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['miner'] = smRef}>{translate('Miner')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeRacer.bind(this)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['racer'] = smRef}>{translate('Racer')}</li>
       </ul>
     </div>;
   }
+
 }

src/app/components/SvgIcons.jsx

@@ -247,7 +247,8 @@ export class OrbisIcon extends SvgIcon {
         <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>);
+      </g>
+    );
   }
 }
 
@@ -741,9 +742,9 @@ export class Modified extends SvgIcon {
    */
   svg() {
     return <g>
-      <path d="M100,5L18,52.5L18,147.5L100,195L182,147.5L182,52.5L100,5Z"/>
-      <path d="M100,70L74,85L74,115L100,130L126,115L126,85L100,70Z"/>
-    </g>;
+           <path d="M100,5L18,52.5L18,147.5L100,195L182,147.5L182,52.5L100,5Z"/>
+           <path d="M100,70L74,85L74,115L100,130L126,115L126,85L100,70Z"/>
+           </g>;
   }
 }
 

src/app/components/Tooltip.jsx

@@ -6,6 +6,7 @@ import TranslatedComponent from './TranslatedComponent';
  * Document Root Tooltip
  */
 export default class Tooltip extends TranslatedComponent {
+
   static propTypes = {
     rect: PropTypes.object.isRequired,
     options: PropTypes.object
@@ -126,4 +127,5 @@ export default class Tooltip extends TranslatedComponent {
       </div>
     </div>;
   }
+
 }

src/app/components/TranslatedComponent.jsx

@@ -6,6 +6,7 @@ import { shallowEqual } from '../utils/UtilityFunctions';
  * Abstract Translated Component
  */
 export default class TranslatedComponent extends React.Component {
+
   static contextTypes = {
     language: PropTypes.object.isRequired,
     sizeRatio: PropTypes.number.isRequired,

src/app/components/UtilitySlotSection.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import SlotSection from './SlotSection';
-import Slot from './Slot';
+import HardpointSlot from './HardpointSlot';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
-import autoBind from 'auto-bind';
 
 /**
  * Utility Slot Section
@@ -11,16 +10,28 @@ export default class UtilitySlotSection extends SlotSection {
   /**
    * Constructor
    * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
    */
-  constructor(props) {
-    super(props, 'utility mounts');
-    autoBind(this);
+  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();
@@ -34,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();
@@ -52,24 +66,31 @@ export default class UtilitySlotSection extends SlotSection {
    */
   _getSlots() {
     let slots = [];
-    let { ship, currentMenu, propsToShow, onPropToggle } = this.props;
+    let { ship, currentMenu } = this.props;
+    let hardpoints = ship.hardpoints;
     let { originSlot, targetSlot } = this.state;
+    let availableModules = ship.getAvailableModules();
 
-    for (let h of ship.getUtilities(undefined, true)) {
-      slots.push(<Slot
-        key={h.object.Slot}
-        maxClass={h.getSize()}
-        onChange={this.props.onChange}
-        currentMenu={currentMenu}
-        drag={this._drag.bind(this, h)}
-        dragOver={this._dragOverSlot.bind(this, h)}
-        drop={this._drop}
-        dropClass={this._dropClass(h, originSlot, targetSlot)}
-        m={h}
-        enabled={h.enabled ? true : false}
-        propsToShow={propsToShow}
-        onPropToggle={onPropToggle}
-      />);
+    for (let i = 0, l = hardpoints.length; i < l; i++) {
+      let h = hardpoints[i];
+      if (h.maxClass === 0) {
+        slots.push(<HardpointSlot
+          key={i}
+          maxClass={h.maxClass}
+          availableModules={() => availableModules.getHps(h.maxClass)}
+          onOpen={this._openMenu.bind(this,h)}
+          onSelect={this._selectModule.bind(this, h)}
+          onChange={this.props.onChange}
+          selected={currentMenu == h}
+          drag={this._drag.bind(this, h)}
+          dragOver={this._dragOverSlot.bind(this, h)}
+          drop={this._drop}
+          dropClass={this._dropClass(h, originSlot, targetSlot)}
+          ship={ship}
+          m={h.m}
+          enabled={h.enabled ? true : false}
+        />);
+      }
     }
 
     return slots;
@@ -80,34 +101,33 @@ export default class UtilitySlotSection extends SlotSection {
    * @param  {Function} translate Translate function
    * @return {React.Component}   Section menu
    */
-  _getSectionMenu() {
-    const { translate } = this.context.language;
+  _getSectionMenu(translate) {
     let _use = this._use;
 
     return <div className='select' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' tabIndex='0' 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' tabIndex='0' onClick={_use.bind(this, 'sb', 'A', null)}>A</li>
-        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'B', null)}>B</li>
-        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'C', null)}>C</li>
-        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'D', null)}>D</li>
-        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'E', null)}>E</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' tabIndex='0' onClick={_use.bind(this, 'sb', 'B', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-B'] = smRef}>B</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' tabIndex='0' onClick={_use.bind(this, 'sb', 'D', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-D'] = smRef}>D</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' tabIndex='0' 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' tabIndex='0' 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' tabIndex='0' 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,80 +1,80 @@
-import TranslatedComponent from './TranslatedComponent';
-import React, { PropTypes } from 'react';
-import ContainerDimensions from 'react-container-dimensions';
-import { BarChart, Bar, XAxis, YAxis, LabelList } from 'recharts';
-
-const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
-const LABEL_COLOUR = '#000000';
-const AXIS_COLOUR = '#C06400';
-
-const ASPECT = 1;
-
-const merge = function(one, two) {
-  return Object.assign({}, one, two);
-};
-
-/**
- * A vertical bar chart
- */
-export default class VerticalBarChart extends TranslatedComponent {
-  static propTypes = {
-    data : PropTypes.array.isRequired,
-    yMax : PropTypes.number
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
-  constructor(props, context) {
-    super(props);
-
-    this._termtip = this._termtip.bind(this);
-  }
-
-  /**
-   * Render the bar chart
-   * @returns {Object} the markup
-   */
-  render() {
-    const { tooltip, termtip } = this.context;
-
-    // Calculate maximum for Y
-    let dataMax = Math.max(...this.props.data.map(d => d.value));
-    if (dataMax == -Infinity) dataMax = 0;
-    let yMax = this.props.yMax ? Math.round(this.props.yMax) : 0;
-    const localMax = Math.max(dataMax, yMax);
-
-    return (
-      <ContainerDimensions>
-        { ({ width }) => (
-          <div width='100%'>
-            <BarChart width={width} height={width * ASPECT} data={this.props.data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
-              <XAxis interval={0} fontSize='0.8em' stroke={AXIS_COLOUR} dataKey='label' />
-              <YAxis interval={'preserveStart'} tickCount={11} fontSize='0.8em' stroke={AXIS_COLOUR} type='number' domain={[0, localMax]}/>
-              <Bar dataKey='value' fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}>
-                <LabelList dataKey='value' position='insideTop'/>
-              </Bar>
-            </BarChart>
-          </div>
-        )}
-      </ContainerDimensions>
-    );
-  }
-
-  /**
-   * Generate a term tip
-   * @param {Object} d the data
-   * @param {number} i the index
-   * @param {Object} e the event
-   * @returns {Object} termtip markup
-   */
-  _termtip(d, i, e) {
-    if (this.props.data[i].tooltip) {
-      return this.context.termtip(this.props.data[i].tooltip, e);
-    } else {
-      return null;
-    }
-  }
-}
+import TranslatedComponent from './TranslatedComponent';
+import React, { PropTypes } from 'react';
+import ContainerDimensions from 'react-container-dimensions';
+import { BarChart, Bar, XAxis, YAxis, LabelList } from 'recharts';
+
+const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
+const LABEL_COLOUR = '#000000';
+const AXIS_COLOUR = '#C06400';
+
+const ASPECT = 1;
+
+const merge = function(one, two) {
+  return Object.assign({}, one, two);
+};
+
+/**
+ * A vertical bar chart
+ */
+export default class VerticalBarChart extends TranslatedComponent {
+  static propTypes = {
+    data : PropTypes.array.isRequired,
+    yMax : PropTypes.number
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    this._termtip = this._termtip.bind(this);
+  }
+
+  /**
+   * Render the bar chart
+   * @returns {Object} the markup
+   */
+  render() {
+    const { tooltip, termtip } = this.context;
+
+    // Calculate maximum for Y
+    let dataMax = Math.max(...this.props.data.map(d => d.value));
+    if (dataMax == -Infinity) dataMax = 0;
+    let yMax = this.props.yMax ? Math.round(this.props.yMax) : 0;
+    const localMax = Math.max(dataMax, yMax);
+
+    return (
+      <ContainerDimensions>
+        { ({ width }) => (
+          <div width='100%'>
+            <BarChart width={width} height={width * ASPECT} data={this.props.data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+              <XAxis interval={0} fontSize='0.8em' stroke={AXIS_COLOUR} dataKey='label' />
+              <YAxis interval={'preserveStart'} tickCount={11} fontSize='0.8em' stroke={AXIS_COLOUR} type='number' domain={[0, localMax]}/>
+              <Bar dataKey='value' fill={CORIOLIS_COLOURS[0]} isAnimationActive={false} onMouseOver={this._termtip} onMouseOut={tooltip.bind(null, null)}>
+                <LabelList dataKey='value' position='insideTop'/>
+              </Bar>
+            </BarChart>
+          </div>
+        )}
+      </ContainerDimensions>
+    );
+  }
+
+  /**
+   * Generate a term tip
+   * @param {Object} d the data
+   * @param {number} i the index
+   * @param {Object} e the event
+   * @returns {Object} termtip markup
+   */
+  _termtip(d, i, e) {
+    if (this.props.data[i].tooltip) {
+      return this.context.termtip(this.props.data[i].tooltip, e);
+    } else {
+      return null;
+    }
+  }
+}

src/app/components/WeaponDamageChart.jsx

@@ -3,99 +3,193 @@ import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import LineChart from '../components/LineChart';
 import * as Calc from '../shipyard/Calculations';
-import { moduleReduce } from 'ed-forge/lib/helper';
-import { chain, keys, mapValues, values } from 'lodash';
 
 const DAMAGE_DEALT_COLORS = ['#FFFFFF', '#FF0000', '#00FF00', '#7777FF', '#FFFF00', '#FF00FF', '#00FFFF', '#777777'];
-const PORTION_MAPPINGS = {
-  'absolute': 'absolutedamageportion',
-  'explosive': 'explosivedamageportion',
-  'kinetic': 'kineticdamageportion',
-  'thermal': 'thermicdamageportion',
-};
-const MULTS = keys(PORTION_MAPPINGS);
-
-// TODO: help with this in ed-forge
-/**
- * .
- * @param {Object} opponentDefence .
- * @returns {Object} .
- */
-function defenceToMults(opponentDefence) {
-  return chain(opponentDefence)
-    .pick(MULTS)
-    .mapKeys((v, k) => PORTION_MAPPINGS[k])
-    .mapValues((resistanceProfile) => resistanceProfile.damageMultiplier)
-    .value();
-}
 
 /**
  * Weapon damage chart
  */
 export default class WeaponDamageChart extends TranslatedComponent {
   static propTypes = {
-    code: PropTypes.string.isRequired,
     ship: PropTypes.object.isRequired,
-    opponentDefence: PropTypes.object.isRequired,
+    opponent: PropTypes.object.isRequired,
+    hull: PropTypes.bool.isRequired,
     engagementRange: PropTypes.number.isRequired,
+    opponentSys: PropTypes.number.isRequired,
+    marker: PropTypes.string.isRequired
   };
 
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+  }
+
+  /**
+   * Set the initial weapons state
+   */
+  componentWillMount() {
+    const weaponNames = this._weaponNames(this.props.ship, this.context);
+    const opponentShields = Calc.shieldMetrics(this.props.opponent, this.props.opponentSys);
+    const opponentArmour = Calc.armourMetrics(this.props.opponent);
+    const maxRange = this._calcMaxRange(this.props.ship);
+    const maxDps = this._calcMaxSDps(this.props.ship, this.props.opponent, opponentShields, opponentArmour);
+
+    this.setState({ maxRange, maxDps, weaponNames, opponentShields, opponentArmour, calcSDpsFunc: this._calcSDps.bind(this, this.props.ship, weaponNames, this.props.opponent, opponentShields, opponentArmour, this.props.hull) });
+  }
+
+  /**
+   * Set the updated weapons state if our ship changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.marker != this.props.marker) {
+      const weaponNames = this._weaponNames(nextProps.ship, nextContext);
+      const opponentShields = Calc.shieldMetrics(nextProps.opponent, nextProps.opponentSys);
+      const opponentArmour = Calc.armourMetrics(nextProps.opponent);
+      const maxRange = this._calcMaxRange(nextProps.ship);
+      const maxDps = this._calcMaxSDps(nextProps.ship, nextProps.opponent, opponentShields, opponentArmour);
+      this.setState({ weaponNames,
+        opponentShields,
+        opponentArmour,
+        maxRange,
+        maxDps,
+        calcSDpsFunc: this._calcSDps.bind(this, nextProps.ship, weaponNames, nextProps.opponent, opponentShields, opponentArmour, nextProps.hull)
+      });
+    }
+    return true;
+  }
+
+  /**
+   * Calculate the maximum range of a ship's weapons
+   * @param   {Object}  ship     The ship
+   * @returns {int}              The maximum range, in metres
+   */
+  _calcMaxRange(ship) {
+    let maxRange = 1000; // Minimum
+    for (let i = 0; i < ship.hardpoints.length; i++) {
+      if (ship.hardpoints[i].maxClass > 0 && ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
+        const thisRange = ship.hardpoints[i].m.getRange();
+        if (thisRange > maxRange) {
+          maxRange = thisRange;
+        }
+      }
+    }
+
+    return maxRange;
+  }
+
+  /**
+   * Calculate the maximum sustained single-weapon DPS for this ship
+   * @param  {Object}  ship             The ship
+   * @param  {Object}  opponent         The opponent ship
+   * @param  {Object}  opponentShields  The opponent's shields
+   * @param  {Object}  opponentArmour   The opponent's armour
+   * @return {number}                   The maximum sustained single-weapon DPS
+   */
+  _calcMaxSDps(ship, opponent, opponentShields, opponentArmour) {
+    // Additional information to allow effectiveness calculations
+    let maxSDps = 0;
+    for (let i = 0; i < ship.hardpoints.length; i++) {
+      if (ship.hardpoints[i].maxClass > 0 && ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
+        const m = ship.hardpoints[i].m;
+
+        const sustainedDps = Calc._weaponSustainedDps(m, opponent, opponentShields, opponentArmour, 0);
+        const thisSDps = sustainedDps.damage.armour.total > sustainedDps.damage.shields.total ? sustainedDps.damage.armour.total : sustainedDps.damage.shields.total;
+        if (thisSDps > maxSDps) {
+          maxSDps = thisSDps;
+        }
+      }
+    }
+    return maxSDps;
+  }
+
+  /**
+   * Obtain the weapon names for this ship
+   * @param  {Object}  ship      The ship
+   * @param  {Object}  context   The context
+   * @return {array}             The weapon names
+   */
+  _weaponNames(ship, context) {
+    const translate = context.language.translate;
+    let names = [];
+    let num = 1;
+    for (let i = 0; i < ship.hardpoints.length; i++) {
+      if (ship.hardpoints[i].maxClass > 0 && ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
+        const m = ship.hardpoints[i].m;
+        let name = '' + num++ + ': ' + m.class + m.rating + (m.missile ? '/' + m.missile : '') + ' ' + translate(m.name || m.grp);
+        let engineering;
+        if (m.blueprint && m.blueprint.name) {
+          engineering = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+          if (m.blueprint.special && m.blueprint.special.id) {
+            engineering += ', ' + translate(m.blueprint.special.name);
+          }
+        }
+        if (engineering) {
+          name = name + ' (' + engineering + ')';
+        }
+        names.push(name);
+      }
+    }
+    return names;
+  }
+
+  /**
+   * Calculate the per-weapon sustained DPS for this ship against another ship at a given range
+   * @param  {Object}  ship            The ship
+   * @param  {Object}  weaponNames     The names of the weapons for which to calculate DPS
+   * @param  {Object}  opponent        The target
+   * @param  {Object}  opponentShields The opponent's shields
+   * @param  {Object}  opponentArmour  The opponent's armour
+   * @param  {bool}    hull            true if to calculate against hull, false if to calculate against shields
+   * @param  {Object}  engagementRange The engagement range
+   * @return {array}                   The array of weapon DPS
+   */
+  _calcSDps(ship, weaponNames, opponent, opponentShields, opponentArmour, hull, engagementRange) {
+    let results = {};
+    let weaponNum = 0;
+    for (let i = 0; i < ship.hardpoints.length; i++) {
+      if (ship.hardpoints[i].maxClass > 0 && ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
+        const m = ship.hardpoints[i].m;
+        const sustainedDps = Calc._weaponSustainedDps(m, opponent, opponentShields, opponentArmour, engagementRange);
+        results[weaponNames[weaponNum++]] = hull ? sustainedDps.damage.armour.total : sustainedDps.damage.shields.total;
+      }
+    }
+    return results;
+  }
+
   /**
    * Render damage dealt
    * @return {React.Component} contents
    */
   render() {
-    const { language } = this.context;
-    const { translate } = language;
-    const { code, ship, opponentDefence, engagementRange } = this.props;
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { maxRange } = this.state;
+    const { ship, opponent, engagementRange } = this.props;
 
-    const hardpoints = ship.getHardpoints();
-    const hardpointsMap = chain(hardpoints)
-      .map((m) => [m.getSlot(), m])
-      .fromPairs()
-      .value();
-    const mults = defenceToMults(opponentDefence);
-    const cb = (range) => {
-      return mapValues(
-        hardpointsMap,
-        (m) => {
-          const sdps = m.get('sustaineddamagepersecond', true);
-          const resistanceMul = chain(mults)
-            .toPairs()
-            .map((pair) => {
-              const [k, mul] = pair;
-              return m.get(k, true) * mul;
-            })
-            .sum()
-            .value();
+    const sortOrder = this._sortOrder;
+    const onCollapseExpand = this._onCollapseExpand;
+
+    const code = `${ship.toString()}:${opponent.toString()}`;
 
-          const falloff = m.get('damagefalloffrange', true);
-          const rangeMul = Math.min(1, Math.max(0,
-            1 - (range - falloff) / (m.get('maximumrange', true) - falloff)
-          ));
-          return sdps * resistanceMul * rangeMul;
-        }
-      );
-    };
     return (
       <div>
         <LineChart
-          xMin={0}
-          xMax={moduleReduce(
-            hardpoints, 'maximumrange', true, (a, v) => Math.max(a, v), 1000,
-          )}
-          yMin={0}
-          // Factor in highest damage multiplier to get a safe upper bound
-          yMax={Math.max(1, ...values(mults)) * moduleReduce(
-            hardpoints, 'sustaineddamagepersecond', true, (a, v) => Math.max(a, v), 0,
-          )}
+          xMax={maxRange}
+          yMax={this.state.maxDps}
           xLabel={translate('range')}
           xUnit={translate('m')}
-          yLabel={translate('sustaineddamagepersecond')}
-          series={hardpoints.map((m) => m.getSlot())}
-          xMark={engagementRange}
+          yLabel={translate('sdps')}
+          series={this.state.weaponNames}
+          xMark={this.props.engagementRange}
           colors={DAMAGE_DEALT_COLORS}
-          func={cb}
+          func={this.state.calcSDpsFunc}
           points={200}
           code={code}
         />

src/app/i18n/Language.jsx

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

src/app/i18n/cn.json

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

src/app/i18n/de.js

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

src/app/i18n/en.json

@@ -26,6 +26,9 @@
     "PHRASE_NO_SPECIAL": "No experimental effect",
     "PHRASE_SHOPPING_LIST": "Stations that sell this build",
     "PHRASE_SHOPPING_MATS": "Materials needed for this build",
+    "PHRASE_DIFFERENT_ROLLS": "Material requirements will differ, based on the number of rolls per grade, per module.",
+    "PHRASE_FOR_FINER_CONTROL": "For finer control over rolls per grade/module, a more accurate list of required mats and help in finding those mats, please consider using the export options below to ED Odyssey Materials Helper, or ED Engineer, or use the Crafting Lists feature on inara.cz.",
+    "PHRASE_ALL_MODULES_ALL_ROLLS": "The list below, assumes standard to G5 Engineered (approx 80% - 90%) with the rolls above, for ALL engineered modules in the build. You can adjust the number of rolls above for each grade, however it will still apply to all engineered modules in the build.",
     "PHRASE_REFIT_SHOPPING_LIST": "Stations that sell required modules",
     "PHRASE_TOTAL_EFFECTIVE_SHIELD": "Total amount of damage that can be taken from each damage type, if using all shield cells",
     "PHRASE_TIME_TO_LOSE_SHIELDS": "Shields will hold for",
@@ -63,15 +66,17 @@
     "TT_SUMMARY_SPEED": "With full fuel tank and 4 pips to ENG",
     "TT_SUMMARY_SPEED_NONFUNCTIONAL": "Thrusters powered off or over maximum mass with full fuel and cargo loads",
     "TT_SUMMARY_BOOST": "With full fuel tank and 4 pips to ENG",
-    "TT_SUMMARY_BOOST_INTERVAL": "Time between each boost with 4 pips to ENG",
+    "TT_SUMMARY_SHIP_BOOST_INTERVAL": "Time each boost lasts on this ship",
+    "TT_SUMMARY_BOOST_INTERVAL": "Time between boosts with 4 pips to ENG",
+    "TT_SUMMARY_BOOST_INTERVALS": "If DISTRO is less than or equal to SHIP, the ship can boost continuously",
     "TT_SUMMARY_BOOST_NONFUNCTIONAL": "Power distributor not able to supply enough power to boost",
     "TT_SUMMARY_SHIELDS": "Raw shield strength, including boosters",
     "TT_SUMMARY_SHIELDS_SCB": "Raw shield strength, including boosters and SCBs",
     "TT_SUMMARY_SHIELDS_NONFUNCTIONAL": "No shield generator or shield generator powered off",
     "TT_SUMMARY_INTEGRITY": "Ship integrity, including bulkheads and hull reinforcement packages",
     "TT_SUMMARY_HULL_MASS": "Mass of the hull prior to any modules being installed",
-    "TT_SUMMARY_UNLADEN_MASS": "Mass of the hull and modules prior to any fuel or cargo",
-    "TT_SUMMARY_LADEN_MASS": "Mass of the hull and modules with full fuel and cargo",
+    "TT_SUMMARY_UNLADEN_MASS": "Mass of the hull and modules prior to any cargo or passengers",
+    "TT_SUMMARY_LADEN_MASS": "Mass of the hull and modules with full fuel, cargo, passengers, etc.",
     "TT_SUMMARY_DPS": "Damage per second with all weapons firing",
     "TT_SUMMARY_EPS": "WEP capacitor consumed per second with all weapons firing",
     "TT_SUMMARY_TTD": "Time to drain WEP capacitor with all weapons firing and 4 pips to WEP",
@@ -81,8 +86,10 @@
     "TT_SUMMARY_UNLADEN_TOTAL_JUMP": "Farthest possible range with no cargo, a full fuel tank, and jumping as far as possible each time",
     "TT_SUMMARY_LADEN_TOTAL_JUMP": "Farthest possible range with full cargo, a full fuel tank, and jumping as far as possible each time",
     "HELP_MODIFICATIONS_MENU": "Click on a number to enter a new value, or drag along the bar for small changes",
-	"PHRASE_FAIL_EDENGINEER": "Failed to send to EDEngineer (Launch EDEngineer and make sure the API is started then refresh the page.)",
-	"PHRASE_FIREFOX_EDENGINEER": "Sending to EDEngineer is not compatible with Firefox's security settings. Please try again with Chrome.",
+    "PHRASE_ENSURE_EDOMH": "Ensure ED Odyssey Material Helper is installed and registered to handle edomh:// urls, else this button will do nothing!",
+    "PHRASE_FIREFOX_EDENGINEER": "Sending to EDEngineer is not compatible with Firefox's security settings. Please try again with Chrome.",
+    "PHRASE_FAILED_TO_FIND_EDENGINEER": "Failed to find ED Engineer API. Please ensure it is running and try again.",
+    "MISSING_MODULES": "Missing Modules",
     "am": "Auto Field-Maintenance Unit",
     "bh": "Bulkheads",
     "bl": "Beam Laser",
@@ -93,6 +100,7 @@
     "ch": "Chaff Launcher",
     "cr": "Cargo Rack",
     "cs": "Manifest Scanner",
+    "csl": "Caustic Sink Launcher",
     "dc": "Docking Computer",
     "ec": "Electronic Countermeasure",
     "fc": "Fragment Cannon",
@@ -108,10 +116,18 @@
     "kw": "Kill Warrant Scanner",
     "ls": "Life Support",
     "mc": "Multi-cannon",
+    "mh": "Missing Weapon/Utility",
+    "mm": "Missing Module",
+    "advmc": "Multi-cannon (Advanced)",
     "axmc": "AX Multi-cannon",
+    "axmce": "AX Multi-cannon (Enhanced)",
     "ml": "Mining Laser",
+    "mlc": "Multi Limpet Controller",
     "mr": "Missile Rack",
+    "amr": "Missile Rack (Advanced)",
     "axmr": "AX Missile Rack",
+    "axmre": "AX Missile Rack (Enhanced)",
+    "ews": "Experimental Weapon Stabilizer",
     "mrp": "Module Reinforcement Package",
     "nl": "Mine Launcher",
     "pa": "Plasma Accelerator",
@@ -156,8 +172,10 @@
     "sua": "Supercruise Assist",
     "t": "thrusters",
     "tp": "Torpedo Pylon",
+    "ntp": "Nanite Torpedo Pylon",
     "ul": "Burst Laser",
     "Send To EDEngineer": "Send To EDEngineer",
+    "Send To EDOMH": "Send To EDOMH",
     "ws": "Frame Shift Wake Scanner",
     "rpl": "Repair Limpet Controller",
     "rcpl": "Recon Limpet Controller",
@@ -205,9 +223,10 @@
     "internal protection": "Internal protection",
     "external protection": "External protection",
     "engagement range": "Engagement range",
-    "boost interval": "Boost intervall",
+    "boost interval": "Boost interval",
     "total": "Total",
     "ammo": "Ammunition maximum",
+    "info": "Info",
     "boot": "Boot time",
     "hacktime": "Hack time",
     "brokenregen": "Broken regeneration rate",
@@ -257,8 +276,10 @@
     "thermres": "Thermal resistance",
     "wepcap": "Weapons capacity",
     "weprate": "Weapons recharge rate",
+    "minmass": "Minimum mass",
     "minmass_sg": "Minimum hull mass",
     "optmass_sg": "Optimal hull mass",
+    "maxmass": "Maximum mass",
     "maxmass_sg": "Maximum hull mass",
     "minmul_sg": "Minimum strength",
     "optmul_sg": "Optimal strength",

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'],
-  shortDays: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
-  months: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
-  shortMonths: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
+  days: ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+  shortDays: ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sab'],
+  months: ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'],
+  shortMonths: ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez']
 };
 
 export { default as terms } from './pt.json';

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

@@ -33,24 +33,27 @@ export default class AboutPage extends Page {
         </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{' '}
+          This is now the only active version of the Coriolis project. The original author has handed over the maintenance of the project to the {' '}
           <a href="http://edcd.github.io/">EDCD community</a>.
         </p>
+        <h3>Expectations</h3>
         <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).
+          Although every attempt is made to update the data as soon as possible, following the release of new modules and ships, there may be a delay, of up-to a few days, before the data is available. Wherever possible, the current maintainers aim to keep this delay to a minimum. Please be aware that the project maintainers are volunteers and have real lives to attend to, so please be patient. If you would like to help with the maintenance of the project, please see the link to the EDCD Discord Server below, where you can get involved.
         </p>
         <p>
-          The Coriolis project was inspired by{' '}
-          <a href="http://www.edshipyard.com/" target="_blank">
-            E:D Shipyard
-          </a>{' '}
-          and, of course,{' '}
+          There are, some missing modules from the time where the project was essentially not being maintained. These modules are gradually being added to the Coriolis database as and when the maintainers have the time to do so.
+        </p>
+        <p>
+          Please check the {' '} <a href="https://github.com/EDCD/coriolis/issues/" target="_blank" >Github Issues List</a> for any specific modules you cannot find and see if there is an open request for them. If not, please feel free to open a new issue, however, please note that there is an existing issue open for the addition of pre-engineered modules, so please do not open a new issue for these.
+        </p>
+        <h3>Donations</h3>
+        <p>
+          If you would like to donate to the project, in order to help with the costs of hosting and maintainence, please see the link to the {' '}
+          <a href="https://github.com/Brighter-Applications/coriolis" target="_blank">Current Maintainers version of the Git Repository</a> and use the 'Sponsor' button at the top of the page.
+        </p>
+        <h3>History</h3>
+        <p>
+          The Coriolis project was inspired by 'E:D Shipyard' (Now Defunct) and, of course,{' '}
           <a href="http://www.elitedangerous.com" target="_blank">
             Elite Dangerous
           </a>
@@ -94,39 +97,6 @@ export default class AboutPage extends Page {
           </a>
           .
         </p>
-
-        <h3>Supporting Coriolis</h3>
-        <p>
-          Coriolis is an open source project, and I work on it in my free time.
-          I have set up a patreon at{' '}
-          <a href="https://www.patreon.com/coriolis_elite">
-            patreon.com/coriolis_elite
-          </a>
-          , which will be used to keep Coriolis up to date and the servers
-          running.
-        </p>
-        <form
-          action="https://www.paypal.com/cgi-bin/webscr"
-          method="post"
-          target="_top"
-        >
-          <input type="hidden" name="cmd" value="_s-xclick" />
-          <input type="hidden" name="hosted_button_id" value="SJBKT2SWEEU68" />
-          <input
-            type="image"
-            src="https://www.paypalobjects.com/en_AU/i/btn/btn_donate_SM.gif"
-            border="0"
-            name="submit"
-            alt="PayPal – The safer, easier way to pay online!"
-          />
-          <img
-            alt=""
-            border="0"
-            src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif"
-            width="1"
-            height="1"
-          />
-        </form>
       </div>
     );
   }

src/app/pages/ErrorDetails.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
  * Unexpected Error page / block
  */
 export default class ErrorDetails extends React.Component {
+
   static contextTypes = {
     route: PropTypes.object.isRequired,
     language: PropTypes.object.isRequired
@@ -32,7 +33,7 @@ export default class ErrorDetails extends React.Component {
         <div style={{ marginTop: '2em' }}>
           <div><span className='warning'>Browser:</span> {window.navigator.userAgent}</div>
           <div><span className='warning'>Path:</span> {this.context.route.canonicalPath}</div>
-          <div><span className='warning'>Error:</span> {error.type || 'Unknown'}</div>
+          <div><span className='warning'>Error:</span> {ed["error"] || 'Unknown'}</div>
           <div className='warning'>Details:</div>
           <div><pre>{typeof ed == 'object' ? Object.keys(ed).map((e) => `${e}: ${ed[e]}\n`) : ed}</pre></div>
         </div>
@@ -41,15 +42,67 @@ export default class ErrorDetails extends React.Component {
 
     const importerror = ed && ed.scriptUrl && ed.scriptUrl.indexOf('/import') != -1;
 
-    return <div className='error'>
-      <h1>Jameson, we have a problem..</h1>
-      <h1><small>{error.message}</small></h1>
-      <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/>
-      <div>Please note that this site uses Google Analytics to track performance and usage.  If you are blocking cookies, for example using Ghostery, please disable blocking for this site and try again.</div>
-      <br/>
-      {content}
-    </div>;
+    if (ed['error'].match(/URL Length/i)) {
+      return <div className='error'>
+        <h1>Jameson, we have a problem..</h1>
+        <h1><small>{error.message}</small></h1>
+          It looks as though you've encountered a URL Length issue for your browser.
+
+          <br /><br />
+
+          This is a known issue with Internet Explorer and Edge, as well as Google Chrome, all of which only support 2083 characters and your URL is:
+
+          <br /><br />
+
+          {ed["error"]} characters.
+
+          <br /><br />
+
+          Please try using another browser first, before reporting an issue, such as Firefox which supports 65,536 characters or Safari, which supports 80,000 characters.
+
+          <br /><br />
+
+          Don't copy the URL from Explorer, Edge or Chrome, as they will have truncated it and the data string will be incorrect. You'll need to change your default browser settings, so that when you click the link, it opens in the browser you want to use.
+          <br /><br />
+          If you're already using Firefox, which supports up to 65,536 characters or Safari, which supports up to 80,000 characters, please see the data output below.
+          <br/><br />
+          <h3>Data Output</h3>
+          {content}
+        </div>;
+    }
+    else {
+      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 /><br />
+
+          If you're seeing this page, we may have failed to handle the errors in your import correctly. Please check the common import failures list and then 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 />
+          <h3>Common Import Failures</h3>
+
+          <ul>
+            <li>
+              Previously, most failures were a result of missing modules in Coriolis, although this is rarer now since the import system was improved. If you're using a module in game and you know it isn't in Coriolis, this could be the problem, please check the data output section below.
+            </li>
+            <li>
+              Incorrect import strings generated by third party apps do still occur, please check the data output below and if the import was from something like EDMC, please check you're using the latest version.
+            </li>
+            <li>
+              You've hit a 'maximum URL Length' for your browser.  This is a known issue with Internet Explorer and Edge, as well as Google Chrome, all of which only support 2083 characters. Please try using another browser first, before reporting an issue, such as Firefox which supports 65,536 characters or Safari, which supports 80,000 characters. Don't copy the URL from Explorer, Edge or Chrome, as they will have truncated it and the data string will be incorrect. You'll need to change your default browser settings, so that when you click the link, it opens in the browser you want to use.
+            </li>
+            <li>
+              {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 understood correctly by the browser. This is a common problem when using Microsoft Internet Explorer or Microsoft Edge, and you should use another browser instead.</div> : null }
+            </li>
+          </ul>
+        <br/>
+        <div>Please note that this site uses Google Analytics to track performance and usage.  If you are blocking cookies, for example using Ghostery, please disable blocking for this site and try again.</div>
+        <br/>
+        <h3>Data Output</h3>
+        {content}
+      </div>;
+    }
   }
 }

src/app/pages/Page.jsx

@@ -7,6 +7,7 @@ import { shallowEqual } from '../utils/UtilityFunctions';
  * Abstract/Base Page
  */
 export default class Page extends React.Component {
+
   static contextTypes = {
     closeMenu: PropTypes.func.isRequired,
     hideModal: PropTypes.func.isRequired,
@@ -61,6 +62,14 @@ export default class Page extends React.Component {
    */
   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) {
+
+    }
   }
 
   /**
@@ -83,4 +92,5 @@ export default class Page extends React.Component {
     }
     return this.renderPage();
   }
+
 }

src/app/pages/ShipyardPage.jsx

@@ -1,80 +1,102 @@
 import React from 'react';
 import Page from './Page';
+import { Ships } from 'coriolis-data/dist';
 import cn from 'classnames';
-import { Factory } from 'ed-forge';
+import Ship from '../shipyard/Ship';
+import * as ModuleUtils from '../shipyard/ModuleUtils';
 import { SizeMap } from '../shipyard/Constants';
 import Link from '../components/Link';
 
+/**
+ * Counts the hardpoints by class/size
+ * @param  {Object} slot Hardpoint Slot model
+ */
+function countHp(slot) {
+  this.hp[slot.maxClass]++;
+  this.hpCount++;
+}
+
+/**
+ * Counts the internal slots and aggregated properties
+ * @param  {Object} slot Internal Slots
+ */
+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;
+
+  // if no eligiblity, then assume pce
+  let passSlotType = null;
+  let passSlotRating = null;
+  if (!slot.eligible || slot.eligible.pce) {
+    passSlotType = 'pce';
+    passSlotRating = 'E';
+  } else if (slot.eligible.pci) {
+    passSlotType = 'pci';
+    passSlotRating = 'D';
+  } else if (slot.eligible.pcm) {
+    passSlotType = 'pcm';
+    passSlotRating = 'C';
+  } else if (slot.eligible.pcq) {
+    passSlotType = 'pcq';
+    passSlotRating = 'B';
+  }
+  let passengerBay = passSlotType ?
+    ModuleUtils.findMaxInternal(passSlotType, slot.maxClass, passSlotRating) :
+    null;
+  this.maxPassengers += passengerBay ? passengerBay.passengers : 0;
+}
+
 /**
  * Generate Ship summary and aggregated properties
  * @param  {String} shipId   Ship Id
+ * @param  {Object} shipData Ship Default Data
  * @return {Object}          Ship summary and aggregated properties
  */
-function shipSummary(shipId) {
-  // Build Ship
-  let ship = Factory.newShip(shipId);
-
-  let coreSizes = ship.readMeta('coreSizes');
+function shipSummary(shipId, shipData) {
   let summary = {
-    baseArmour: ship.readProp('basearmour'),
-    baseShieldStrength: ship.readProp('baseshieldstrength'),
-    boost: ship.readProp('boost'),
-    class: ship.readMeta('class'),
-    crew: ship.readMeta('crew'),
     id: shipId,
-    hardness: ship.readProp('hardness'),
     hpCount: 0,
-    hullMass: ship.readProp('hullmass'),
     intCount: 0,
-    manufacturer: ship.readMeta('manufacturer'),
-    masslock: ship.readProp('masslock'),
+    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
-    retailCost: ship.readMeta('retailCost'),
-    speed: ship.readProp('speed'),
-    standard: [
-      'powerplant',
-      'mainengines',
-      'frameshiftdrive',
-      'lifesupport',
-      'powerdistributor',
-      'radar',
-      'fueltank'
-    ].map(k => coreSizes[k]),
+    standard: shipData.slots.standard,
     agility:
-      ship.readProp('pitch') +
-      ship.readProp('yaw') +
-      ship.readProp('roll')
+      shipData.properties.pitch +
+      shipData.properties.yaw +
+      shipData.properties.roll
   };
+  Object.assign(summary, shipData.properties);
+  let ship = new Ship(shipId, shipData.properties, shipData.slots);
 
-  // Count Hardpoints by class
-  ship.getHardpoints(undefined, true).forEach(hardpoint => {
-    summary.hp[hardpoint.getSize()]++;
-    summary.hpCount++;
-  });
-  // Count Internal Compartments by class
-  ship.getInternals(undefined, true).forEach(internal => {
-    summary.int[internal.getSize()]++;
-    summary.intCount++;
-  });
-  // ship.optimizeMass({ pd: '1D' }); // Optimize Mass with 1D PD for maximum possible jump range
-  summary.maxJumpRange = -1; // ship.unladenRange; // Record Jump Range
+  // Build Ship
+  ship.buildWith(shipData.defaults); // Populate with stock/default components
+  ship.hardpoints.forEach(countHp.bind(summary)); // Count Hardpoints by class
+  ship.internal.forEach(countInt.bind(summary)); // Count Internal Compartments by class
+  summary.retailCost = ship.totalCost; // Record Stock/Default/retail cost
+  ship.optimizeMass({ pd: '1D' }); // Optimize Mass with 1D PD for maximum possible jump range
+  summary.maxJumpRange = ship.unladenRange; // Record Jump Range
 
   // Best thrusters
-  // let th;
-  // if (ship.standard[1].maxClass === 3) {
-  //   th = 'tz';
-  // } else if (ship.standard[1].maxClass === 2) {
-  //   th = 'u0';
-  // } else {
-  //   th = ship.standard[1].maxClass + 'A';
-  // }
+  let th;
+  if (ship.standard[1].maxClass === 3) {
+    th = 'tz';
+  } else if (ship.standard[1].maxClass === 2) {
+    th = 'u0';
+  } else {
+    th = ship.standard[1].maxClass + 'A';
+  }
 
-  // ship.optimizeMass({ th, fsd: '2D', ft: '1C' }); // Optmize mass with Max Thrusters
-  summary.topSpeed = -1; // ship.topSpeed;
-  summary.topBoost = -1; // ship.topBoost;
+  ship.optimizeMass({ th, fsd: '2D', ft: '1C' }); // Optmize mass with Max Thrusters
+  summary.topSpeed = ship.topSpeed;
+  summary.topBoost = ship.topBoost;
+  summary.baseArmour = ship.armour;
 
   return summary;
 }
@@ -95,14 +117,14 @@ export default class ShipyardPage extends Page {
 
     if (!ShipyardPage.cachedShipSummaries) {
       ShipyardPage.cachedShipSummaries = [];
-      for (let s of Factory.getAllShipTypes()) {
-        ShipyardPage.cachedShipSummaries.push(shipSummary(s));
+      for (let s in Ships) {
+        ShipyardPage.cachedShipSummaries.push(shipSummary(s, Ships[s]));
       }
     }
 
     this.state = {
       title: 'Coriolis EDCD Edition - Shipyard',
-      shipPredicate: 'id',
+      shipPredicate: 'name',
       shipDesc: true,
       shipSummaries: ShipyardPage.cachedShipSummaries,
       compare: {},
@@ -135,7 +157,7 @@ export default class ShipyardPage extends Page {
    * @private
    */
   _toggleGroupCompared() {
-    this.setState({ groupCompared: !this.state.groupCompared });
+    this.setState({groupCompared: !this.state.groupCompared})
   }
 
   /**
@@ -183,7 +205,6 @@ export default class ShipyardPage extends Page {
         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 cap">{translate(SizeMap[s.class])}</td>
         <td className="ri">{fInt(s.crew)}</td>
@@ -233,6 +254,7 @@ export default class ShipyardPage extends Page {
     let { translate, formats, units } = language;
     let hide = this.context.tooltip.bind(null, null);
     let fInt = formats.int;
+    let fRound = formats.round;
     let { shipSummaries, shipPredicate, shipPredicateIndex, compare, groupCompared } = this.state;
     let sortShips = (predicate, index) =>
       this._sortShips.bind(this, predicate, index);
@@ -276,7 +298,7 @@ export default class ShipyardPage extends Page {
       }
 
       if (valA == valB) {
-        if (a.id > b.id) {
+        if (a.name > b.name) {
           return 1;
         } else {
           return -1;
@@ -312,7 +334,7 @@ export default class ShipyardPage extends Page {
           onClick={() => this._toggleCompare(s.id)}
         >
           <td className="le">
-            <Link href={'/outfit/' + s.id}>{s.id} {s.beta === true ? '(Beta)' : null}</Link>
+            <Link href={'/outfit/' + s.id}>{s.name} {s.beta === true ? '(Beta)' : null}</Link>
           </td>
         </tr>
       );
@@ -320,289 +342,282 @@ export default class ShipyardPage extends Page {
     }
 
     return (
-      <div className="page" style={{ fontSize: sizeRatio + 'em' }}>
+      <div className="page" style={{fontSize: sizeRatio + 'em'}}>
         <div className="content-wrapper">
-          <div className="shipyard-table-wrapper">
-            <table style={{ width: '12em', position: 'absolute', zIndex: 1 }} className="shipyard-table">
+        <div className="shipyard-table-wrapper">
+          <table style={{width: '12em', position: 'absolute', zIndex: 1}} className="shipyard-table">
+            <thead>
+              <tr>
+                <th className="le rgt">&nbsp;</th>
+              </tr>
+              <tr className="main">
+                <th className="sortable le rgt" onClick={sortShips('name')}>
+                  {translate('ship')}
+                </th>
+              </tr>
+              <tr>
+                <th className="le rgt invisible">{units['m/s']}</th>
+              </tr>
+            </thead>
+            <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
+              {shipRows}
+            </tbody>
+          </table>
+          <div style={{ overflowX: 'auto', maxWidth: '100%' }}>
+            <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }} className="shipyard-table">
               <thead>
-                <tr>
-                  <th className="le rgt">&nbsp;</th>
-                </tr>
                 <tr className="main">
-                  <th className="sortable le rgt" onClick={sortShips('id')}>
-                    {translate('ship')}
+                  <th>&nbsp;</th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('class')}
+                  >
+                    {translate('size')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('crew')}
+                  >
+                    {translate('crew')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'mass lock factor')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('masslock')}
+                  >
+                    {translate('MLF')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onClick={sortShips('agility')}
+                  >
+                    {translate('agility')}
+                  </th>
+                  <th
+                    rowSpan={3}
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'hardness')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('hardness')}
+                  >
+                    {translate('hrd')}
+                  </th>
+                  <th>&nbsp;</th>
+                  <th colSpan={4}>{translate('base')}</th>
+                  <th colSpan={5}>{translate('max')}</th>
+                  <th className="lft" colSpan={7} />
+                  <th className="lft" colSpan={5} />
+                  <th className="lft" colSpan={8} />
+                </tr>
+                <tr>
+                  <th
+                    className="sortable lft"
+                    onClick={sortShips('retailCost')}
+                  >
+                    {translate('cost')}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('hullMass')}>
+                    {translate('hull')}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('speed')}>
+                    {translate('speed')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('boost')}>
+                    {translate('boost')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('baseArmour')}>
+                    {translate('armour')}
+                  </th>
+                  <th
+                    className="sortable"
+                    onClick={sortShips('baseShieldStrength')}
+                  >
+                    {translate('shields')}
+                  </th>
+
+                  <th className="sortable lft" onClick={sortShips('topSpeed')}>
+                    {translate('speed')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('topBoost')}>
+                    {translate('boost')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxJumpRange')}>
+                    {translate('jump')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxCargo')}>
+                    {translate('cargo')}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxPassengers')} 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="le rgt invisible">{units['m/s']}</th>
+                  <th
+                    className="sortable lft"
+                    onClick={sortShips('retailCost')}
+                  >
+                    {units.CR}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('hullMass')}>
+                    {units.T}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('speed')}>
+                    {units['m/s']}
+                  </th>
+                  <th className="sortable" onClick={sortShips('boost')}>
+                    {units['m/s']}
+                  </th>
+                  <th>&nbsp;</th>
+                  <th
+                    className="sortable"
+                    onClick={sortShips('baseShieldStrength')}
+                  >
+                    {units.MJ}
+                  </th>
+                  <th className="sortable lft" onClick={sortShips('topSpeed')}>
+                    {units['m/s']}
+                  </th>
+                  <th className="sortable" onClick={sortShips('topBoost')}>
+                    {units['m/s']}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxJumpRange')}>
+                    {units.LY}
+                  </th>
+                  <th className="sortable" onClick={sortShips('maxCargo')}>
+                    {units.T}
+                  </th>
+                  <th>&nbsp;</th>
+                  <th
+                    className="sortable lft"
+                    onMouseEnter={termtip.bind(null, 'power plant')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 0)}
+                  >
+                    {'pp'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'thrusters')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 1)}
+                  >
+                    {'th'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'frame shift drive')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 2)}
+                  >
+                    {'fsd'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'life support')}
+                    onMouseLeave={hide}
+                    onClick={sortShips('standard', 3)}
+                  >
+                    {'ls'}
+                  </th>
+                  <th
+                    className="sortable"
+                    onMouseEnter={termtip.bind(null, 'power 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" onClick={sortShips('int', 1)}>
+                    2
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 2)}>
+                    3
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 3)}>
+                    4
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 4)}>
+                    5
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 5)}>
+                    6
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 6)}>
+                    7
+                  </th>
+                  <th className="sortable" onClick={sortShips('int', 7)}>
+                    8
+                  </th>
                 </tr>
               </thead>
               <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
-                {shipRows}
+                {detailRows}
               </tbody>
             </table>
-            <div style={{ overflowX: 'auto', maxWidth: '100%' }}>
-              <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }} className="shipyard-table">
-                <thead>
-                  <tr className="main">
-                    <th
-                      rowSpan={3}
-                      className="sortable"
-                      onClick={sortShips('manufacturer')}
-                    >
-                      {translate('manufacturer')}
-                    </th>
-                    <th>&nbsp;</th>
-                    <th
-                      rowSpan={3}
-                      className="sortable"
-                      onClick={sortShips('class')}
-                    >
-                      {translate('size')}
-                    </th>
-                    <th
-                      rowSpan={3}
-                      className="sortable"
-                      onClick={sortShips('crew')}
-                    >
-                      {translate('crew')}
-                    </th>
-                    <th
-                      rowSpan={3}
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'mass lock factor')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('masslock')}
-                    >
-                      {translate('MLF')}
-                    </th>
-                    <th
-                      rowSpan={3}
-                      className="sortable"
-                      onClick={sortShips('agility')}
-                    >
-                      {translate('agility')}
-                    </th>
-                    <th
-                      rowSpan={3}
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'hardness')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('hardness')}
-                    >
-                      {translate('hrd')}
-                    </th>
-                    <th>&nbsp;</th>
-                    <th colSpan={4}>{translate('base')}</th>
-                    <th colSpan={5}>{translate('max')}</th>
-                    <th className="lft" colSpan={7} />
-                    <th className="lft" colSpan={5} />
-                    <th className="lft" colSpan={8} />
-                  </tr>
-                  <tr>
-                    <th
-                      className="sortable lft"
-                      onClick={sortShips('retailCost')}
-                    >
-                      {translate('cost')}
-                    </th>
-                    <th className="sortable lft" onClick={sortShips('hullMass')}>
-                      {translate('hull')}
-                    </th>
-                    <th className="sortable lft" onClick={sortShips('speed')}>
-                      {translate('speed')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('boost')}>
-                      {translate('boost')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('baseArmour')}>
-                      {translate('armour')}
-                    </th>
-                    <th
-                      className="sortable"
-                      onClick={sortShips('baseShieldStrength')}
-                    >
-                      {translate('shields')}
-                    </th>
-
-                    <th className="sortable lft" onClick={sortShips('topSpeed')}>
-                      {translate('speed')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('topBoost')}>
-                      {translate('boost')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('maxJumpRange')}>
-                      {translate('jump')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('maxCargo')}>
-                      {translate('cargo')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('maxPassengers')} 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 className="sortable lft" onClick={sortShips('hullMass')}>
-                      {units.T}
-                    </th>
-                    <th className="sortable lft" onClick={sortShips('speed')}>
-                      {units['m/s']}
-                    </th>
-                    <th className="sortable" onClick={sortShips('boost')}>
-                      {units['m/s']}
-                    </th>
-                    <th>&nbsp;</th>
-                    <th
-                      className="sortable"
-                      onClick={sortShips('baseShieldStrength')}
-                    >
-                      {units.MJ}
-                    </th>
-                    <th className="sortable lft" onClick={sortShips('topSpeed')}>
-                      {units['m/s']}
-                    </th>
-                    <th className="sortable" onClick={sortShips('topBoost')}>
-                      {units['m/s']}
-                    </th>
-                    <th className="sortable" onClick={sortShips('maxJumpRange')}>
-                      {units.LY}
-                    </th>
-                    <th className="sortable" onClick={sortShips('maxCargo')}>
-                      {units.T}
-                    </th>
-                    <th>&nbsp;</th>
-                    <th
-                      className="sortable lft"
-                      onMouseEnter={termtip.bind(null, 'power plant')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('standard', 0)}
-                    >
-                      {'pp'}
-                    </th>
-                    <th
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'thrusters')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('standard', 1)}
-                    >
-                      {'th'}
-                    </th>
-                    <th
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'frame shift drive')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('standard', 2)}
-                    >
-                      {'fsd'}
-                    </th>
-                    <th
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'life support')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('standard', 3)}
-                    >
-                      {'ls'}
-                    </th>
-                    <th
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'power distriubtor')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('standard', 4)}
-                    >
-                      {'pd'}
-                    </th>
-                    <th
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'sensors')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('standard', 5)}
-                    >
-                      {'s'}
-                    </th>
-                    <th
-                      className="sortable"
-                      onMouseEnter={termtip.bind(null, 'fuel tank')}
-                      onMouseLeave={hide}
-                      onClick={sortShips('standard', 6)}
-                    >
-                      {'ft'}
-                    </th>
-                    <th className="sortable lft" onClick={sortShips('hp', 1)}>
-                      {translate('S')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('hp', 2)}>
-                      {translate('M')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('hp', 3)}>
-                      {translate('L')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('hp', 4)}>
-                      {translate('H')}
-                    </th>
-                    <th className="sortable" onClick={sortShips('hp', 0)}>
-                      {translate('U')}
-                    </th>
-
-                    <th className="sortable lft" onClick={sortShips('int', 0)}>
-                      1
-                    </th>
-                    <th className="sortable" onClick={sortShips('int', 1)}>
-                      2
-                    </th>
-                    <th className="sortable" onClick={sortShips('int', 2)}>
-                      3
-                    </th>
-                    <th className="sortable" onClick={sortShips('int', 3)}>
-                      4
-                    </th>
-                    <th className="sortable" onClick={sortShips('int', 4)}>
-                      5
-                    </th>
-                    <th className="sortable" onClick={sortShips('int', 5)}>
-                      6
-                    </th>
-                    <th className="sortable" onClick={sortShips('int', 6)}>
-                      7
-                    </th>
-                    <th className="sortable" onClick={sortShips('int', 7)}>
-                      8
-                    </th>
-                  </tr>
-                </thead>
-                <tbody onMouseLeave={this._highlightShip.bind(this, null)}>
-                  {detailRows}
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div className="table-tools" >
-            <label><input type="checkbox" checked={this.state.groupCompared} onClick={() => this._toggleGroupCompared()}/>Group highlighted ships</label>
           </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

@@ -14,6 +14,7 @@ export function jumpRange(mass, fsd, fuel, ship) {
   const fsdOptimalMass = fsd instanceof Module ? fsd.getOptMass() : fsd.optmass;
   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();
@@ -340,63 +341,30 @@ export function shieldMetrics(ship, sys) {
   const maxSysResistance = this.sysResistance(4);
 
   let shield = {};
-  const dimReturnLine = (res) => 1 - (1 - res) * 0.7;
 
   const shieldGeneratorSlot = ship.findInternalByGroup('sg');
   if (shieldGeneratorSlot && shieldGeneratorSlot.enabled && shieldGeneratorSlot.m) {
     const shieldGenerator = shieldGeneratorSlot.m;
-    let res = {
-      kin: shieldGenerator.kinres,
-      therm: shieldGenerator.thermres,
-      expl: shieldGenerator.explres
-    };
     // Boosters
     let boost = 1;
     let boosterExplDmg = 1;
     let boosterKinDmg = 1;
     let boosterThermDmg = 1;
-    // const explDim = dimReturnLine(shieldGenerator.explres);
-    // const thermDim = dimReturnLine(shieldGenerator.thermres);
-    // const kinDim = dimReturnLine(shieldGenerator.kinres);
     for (let slot of ship.hardpoints) {
       if (slot.enabled && slot.m && slot.m.grp == 'sb') {
         boost += slot.m.getShieldBoost();
-        res.expl += slot.m.getExplosiveResistance();
-        res.kin += slot.m.getKineticResistance();
-        res.therm += slot.m.getThermalResistance();
         boosterExplDmg = boosterExplDmg * (1 - slot.m.getExplosiveResistance());
         boosterKinDmg = boosterKinDmg * (1 - slot.m.getKineticResistance());
         boosterThermDmg = boosterThermDmg * (1 - slot.m.getThermalResistance());
       }
-      if (slot.m && slot.m.grp == 'gsrp') {
-
-      }
     }
     // 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;
 
-    // if (res.expl > explDim) {
-    //   const overage = (res.expl - explDim) * 0.5;
-    //   res.expl = explDim + overage;
-    //   boosterExplDmg = explDim + overage;
-    // }
-    //
-    // if (res.therm > thermDim) {
-    //   const overage = (res.therm - thermDim) * 0.5;
-    //   res.therm = thermDim + overage;
-    //   boosterThermDmg = thermDim + overage;
-    // }
-    //
-    // if (res.kin > kinDim) {
-    //   const overage = (res.kin - kinDim) * 0.5;
-    //   res.kin = kinDim + overage;
-    //   boosterKinDmg = kinDim + overage;
-    // }
     let shieldAddition = 0;
     if (ship) {
       for (const module of ship.internal) {
@@ -415,7 +383,8 @@ export function shieldMetrics(ship, sys) {
 
     // Our initial regeneration comes from the SYS capacitor store, which is replenished as it goes
     // 0.6 is a magic number from FD: each 0.6 MW of energy from the power distributor recharges 1 MJ/s of regeneration
-    let capacitorDrain = (shieldGenerator.getBrokenRegenerationRate() * 0.6) - sysRechargeRate;
+    let capacitorDrain = (shieldGenerator.getBrokenRegenerationRate() * shieldGenerator.getDistDraw()) - sysRechargeRate;
+    
     let capacitorLifetime = powerDistributor.getSystemsCapacity() / capacitorDrain;
 
     let recover = 16;
@@ -431,7 +400,7 @@ export function shieldMetrics(ship, sys) {
         recover = Math.Infinity;
       } else {
         // Recover remaining shields at the rate of the power distributor's recharge
-        recover += remainingShieldToRecover / (sysRechargeRate / 0.6);
+        recover += remainingShieldToRecover / (sysRechargeRate / shieldGenerator.getDistDraw());
       }
     }
 
@@ -440,7 +409,7 @@ export function shieldMetrics(ship, sys) {
 
     // Our initial regeneration comes from the SYS capacitor store, which is replenished as it goes
     // 0.6 is a magic number from FD: each 0.6 MW of energy from the power distributor recharges 1 MJ/s of regeneration
-    capacitorDrain = (shieldGenerator.getRegenerationRate() * 0.6) - sysRechargeRate;
+    capacitorDrain = (shieldGenerator.getRegenerationRate() * shieldGenerator.getDistDraw()) - sysRechargeRate;
     capacitorLifetime = powerDistributor.getSystemsCapacity() / capacitorDrain;
 
     let recharge = 0;
@@ -456,7 +425,7 @@ export function shieldMetrics(ship, sys) {
         recharge = Math.Inf;
       } else {
         // Recharge remaining shields at the rate of the power distributor's recharge
-        recharge += remainingShieldToRecharge / (sysRechargeRate / 0.6);
+        recharge += remainingShieldToRecharge / (sysRechargeRate / shieldGenerator.getDistDraw());
       }
     }
 
@@ -498,7 +467,7 @@ export function shieldMetrics(ship, sys) {
      */
 
     let sgExplosiveDmg = 1 - shieldGenerator.getExplosiveResistance();
-    let sgSbExplosiveDmg = diminishDamageMult(sgExplosiveDmg * 0.7, (1 - shieldGenerator.getExplosiveResistance()) * boosterExplDmg);
+    let sgSbExplosiveDmg = diminishingReturnsShields(sgExplosiveDmg, sgExplosiveDmg * boosterExplDmg);
     /** @type {ShieldDamageMults} */
     shield.explosive = {
       generator: sgExplosiveDmg,
@@ -510,7 +479,7 @@ export function shieldMetrics(ship, sys) {
     };
 
     let sgKineticDmg = 1 - shieldGenerator.getKineticResistance();
-    let sgSbKineticDmg = diminishDamageMult(sgKineticDmg * 0.7, (1 - shieldGenerator.getKineticResistance()) * boosterKinDmg);
+    let sgSbKineticDmg = diminishingReturnsShields(sgKineticDmg, sgKineticDmg * boosterKinDmg);
     /** @type {ShieldDamageMults} */
     shield.kinetic = {
       generator: sgKineticDmg,
@@ -522,7 +491,7 @@ export function shieldMetrics(ship, sys) {
     };
 
     let sgThermalDmg = 1 - shieldGenerator.getThermalResistance();
-    let sgSbThermalDmg = diminishDamageMult(sgThermalDmg * 0.7, (1 - shieldGenerator.getThermalResistance()) * boosterThermDmg);
+    let sgSbThermalDmg = diminishingReturnsShields(sgThermalDmg , sgThermalDmg * boosterThermDmg);
     /** @type {ShieldDamageMults} */
     shield.thermal = {
       generator: sgThermalDmg,
@@ -562,29 +531,20 @@ export function armourMetrics(ship) {
   let moduleArmour = 0;
   let moduleProtection = 1;
   const bulkheads = ship.bulkheads.m;
-  let hullExplDmg = 1;
-  let hullKinDmg = 1;
-  let hullThermDmg = 1;
-  let hullCausDmg = 1;
-  // const dimReturnLine = (res) => 1 - (1 - res) * 0.7;
-  // let res = {
-  //   kin: 0,
-  //   therm: 0,
-  //   expl: 0
-  // };
+  let hullExplDmgs = [];
+  let hullKinDmgs = [];
+  let hullThermDmgs = [];
+  let hullCausDmgs = [];
   // Armour from HRPs and module armour from MRPs
   for (let slot of ship.internal) {
     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;
-      // res.expl += slot.m.getExplosiveResistance();
-      // res.kin += slot.m.getKineticResistance();
-      // res.therm += slot.m.getThermalResistance();
-      hullExplDmg = hullExplDmg * (1 - slot.m.getExplosiveResistance());
-      hullKinDmg = hullKinDmg * (1 - slot.m.getKineticResistance());
-      hullThermDmg = hullThermDmg * (1 - slot.m.getThermalResistance());
-      hullCausDmg = hullCausDmg * (1 - slot.m.getCausticResistance());
+      hullExplDmgs.push(1 - slot.m.getExplosiveResistance());
+      hullKinDmgs.push(1 - slot.m.getKineticResistance());
+      hullThermDmgs.push(1 - slot.m.getThermalResistance());
+      hullCausDmgs.push(1 - slot.m.getCausticResistance());
     }
     if (slot.m && slot.enabled && (slot.m.grp == 'mrp' || slot.m.grp == 'gmrp')) {
       moduleArmour += slot.m.getIntegrity();
@@ -593,27 +553,6 @@ export function armourMetrics(ship) {
   }
   moduleProtection = 1 - moduleProtection;
 
-  // const explDim = dimReturnLine(bulkheads.explres);
-  // const thermDim = dimReturnLine(bulkheads.thermres);
-  // const kinDim = dimReturnLine(bulkheads.kinres);
-  // if (res.expl > explDim) {
-  //   const overage = (res.expl - explDim) * 0.5;
-  //   res.expl = explDim + overage;
-  //   hullExplDmg = explDim + overage;
-  // }
-  //
-  // if (res.therm > thermDim) {
-  //   const overage = (res.therm - thermDim) * 0.5;
-  //   res.therm = thermDim + overage;
-  //   hullThermDmg = thermDim + overage;
-  // }
-  //
-  // if (res.kin > kinDim) {
-  //   const overage = (res.kin - kinDim) * 0.5;
-  //   res.kin = kinDim + overage;
-  //   hullKinDmg = kinDim + overage;
-  // }
-
   const armour = {
     bulkheads: armourBulkheads,
     reinforcement: armourReinforcement,
@@ -630,8 +569,8 @@ export function armourMetrics(ship) {
     total: 1
   };
 
-  let armourExplDmg = diminishDamageMult(0.7, 1 - ship.bulkheads.m.getExplosiveResistance());
-  let armourReinforcedExplDmg = diminishDamageMult(0.7, (1 - ship.bulkheads.m.getExplosiveResistance()) * hullExplDmg);
+  let armourExplDmg = 1 - ship.bulkheads.m.getExplosiveResistance();
+  let armourReinforcedExplDmg = diminishingReturnsArmour(armourExplDmg, ...hullExplDmgs);
   armour.explosive = {
     bulkheads: armourExplDmg,
     reinforcement: armourReinforcedExplDmg / armourExplDmg,
@@ -639,8 +578,8 @@ export function armourMetrics(ship) {
     res: 1 - armourReinforcedExplDmg
   };
 
-  let armourKinDmg = diminishDamageMult(0.7, 1 - ship.bulkheads.m.getKineticResistance());
-  let armourReinforcedKinDmg = diminishDamageMult(0.7, (1 - ship.bulkheads.m.getKineticResistance()) * hullKinDmg);
+  let armourKinDmg = 1 - ship.bulkheads.m.getKineticResistance();
+  let armourReinforcedKinDmg = diminishingReturnsArmour(armourKinDmg, ...hullKinDmgs);
   armour.kinetic = {
     bulkheads: armourKinDmg,
     reinforcement: armourReinforcedKinDmg / armourKinDmg,
@@ -648,8 +587,8 @@ export function armourMetrics(ship) {
     res: 1 - armourReinforcedKinDmg
   };
 
-  let armourThermDmg = diminishDamageMult(0.7, 1 - ship.bulkheads.m.getThermalResistance());
-  let armourReinforcedThermDmg = diminishDamageMult(0.7, (1 - ship.bulkheads.m.getThermalResistance()) * hullThermDmg);
+  let armourThermDmg = 1 - ship.bulkheads.m.getThermalResistance();
+  let armourReinforcedThermDmg = diminishingReturnsArmour(armourThermDmg, ...hullThermDmgs);
   armour.thermal = {
     bulkheads: armourThermDmg,
     reinforcement: armourReinforcedThermDmg / armourThermDmg,
@@ -657,8 +596,8 @@ export function armourMetrics(ship) {
     res: 1 - armourReinforcedThermDmg
   };
 
-  let armourCausDmg = diminishDamageMult(0.7, 1 - ship.bulkheads.m.getCausticResistance());
-  let armourReinforcedCausDmg = diminishDamageMult(0.7, (1 - ship.bulkheads.m.getCausticResistance()) * hullCausDmg);
+  let armourCausDmg = 1 - ship.bulkheads.m.getCausticResistance();
+  let armourReinforcedCausDmg = diminishingReturnsArmour(armourCausDmg, ...hullCausDmgs);
   armour.caustic = {
     bulkheads: armourCausDmg,
     reinforcement: armourReinforcedCausDmg / armourCausDmg,
@@ -904,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
       }
     }
   };
@@ -969,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;
 }
 
@@ -1037,15 +986,50 @@ export function timeToDeplete(amount, dps, eps, capacity, recharge) {
 }
 
 /**
- * Applies diminishing returns to resistances.
- * @param {number} diminishFrom The base resistance up to which no diminishing returns are applied.
- * @param {number} damageMult Resistance as damage multiplier
- * @returns {number} Actual damage multiplier
+ * 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 diminishDamageMult(diminishFrom, damageMult) {
-  if (damageMult > diminishFrom) {
-    return damageMult;
+export function diminishingReturnsShields(shieldMult, combinedMult) {
+  let max = shieldMult * 0.7;
+  if (combinedMult < max) {
+    return mapIntoDiminishingRange(max / 2, max, combinedMult);
   } else {
-    return (diminishFrom / 2) + 0.5 * damageMult;
+    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

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

src/app/shipyard/Module.js

@@ -70,7 +70,7 @@ export default class Module {
 
   /**
    * Set a value for a given modification ID
-   * @param {Number} name                 The name of the modification
+   * @param {String} name                 The name of the modification
    * @param {object} value  The value of the modification. If it is a numeric value then it should be an integer scaled so that -2.34% == -234
    * @param {Boolean}   valueiswithspecial   true if the value includes the special effect (when coming from a UI component)
    */
@@ -81,7 +81,13 @@ export default class Module {
     if (!this.origVals) {
       this.origVals = {};
     }
-    if (valueiswithspecial && this.blueprint && this.blueprint.special) {
+    if (!valueiswithspecial) {
+      // Resistance modifiers scale with the base value.
+      if (name === 'kinres' || name === 'thermres' || name === 'causres' || name === 'explres') {
+        let baseValue = this.get(name, false);
+        value = (1 - baseValue) * value;
+      }
+    } else if (valueiswithspecial && this.blueprint && this.blueprint.special) {
       // This module has a special effect, see if we need to alter the stored value
       const modifierActions = Modifications.modifierActions[this.blueprint.special.edname];
       if (modifierActions && modifierActions[name]) {
@@ -113,7 +119,7 @@ export default class Module {
   /**
    * Helper to obtain a module's value.
    * @param {String} name     The name of the modifier to obtain
-   * @param {Number} modified Whether to return the raw or modified value
+   * @param {Boolean} modified Whether to return the raw or modified value
    * @return {Number} The value queried
    */
   get(name, modified = true) {
@@ -433,6 +439,15 @@ export default class Module {
     return this.get('integrity', modified);
   }
 
+  /**
+   * Get the info of this module
+   * @param {Boolean} [modified=false] Whether to take modifications into account
+   * @return {String} the info of this module
+   */
+  getInfo(modified = false) {
+    return (modified && this.getModValue('info')) || this.info;
+  }
+
   /**
    * Get the mass of this module
    * @param {Boolean} [modified=true] Whether to take modifications into account
@@ -694,7 +709,7 @@ export default class Module {
     let result = 0;
     if (this['maxmass']) {
       result = this['maxmass'];
-      if (result && modified) {
+      if (result && modified && !ModuleUtils.isShieldGenerator(this['grp'])) {
         let mult = this.getModValue('optmass') / 10000;
         if (mult) { result = result * (1 + mult); }
       }
@@ -912,8 +927,9 @@ export default class Module {
     const burst = this.get('burst', modified) || 1;
     const burstRoF = this.get('burstrof', modified) || 1;
     const intRoF = this.get('rof', modified);
+    const charge = this.get('charge', modified) || 0;
 
-    return burst / (((burst - 1) / burstRoF) + 1 / intRoF);
+    return burst / (((burst - 1) / burstRoF) + 1 / intRoF + charge);
   }
 
   /**

src/app/shipyard/ModuleSet.js

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

src/app/shipyard/Ship.js

@@ -10,7 +10,7 @@ import { Ships, Modifications } from 'coriolis-data/dist';
 import { chain } from 'lodash';
 const zlib = require('zlib');
 
-const UNIQUE_MODULES = ['psg', 'sg', 'bsg', 'rf', 'fs', 'fh', 'gfsb', 'dc'];
+const UNIQUE_MODULES = ['psg', 'sg', 'bsg', 'rf', 'fs', 'fh', 'gfsb', 'dc', 'ews'];
 
 // Constants for modifications struct
 const SLOT_ID_DONE = -1;
@@ -140,7 +140,7 @@ export default class Ship {
    */
   canBoost(cargo, fuel) {
     return this.canThrust(cargo, fuel) &&                           // Thrusters operational
-        this.standard[4].m.getEnginesCapacity() > this.boostEnergy; // PD capacitor is sufficient for boost
+        this.standard[4].m.getEnginesCapacity() >= this.boostEnergy; // PD capacitor is sufficient for boost
   }
 
   /**
@@ -492,25 +492,18 @@ 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 {bool}   isAbsolute True if value is an absolute value and not a
-   *                            modification value
+   * @param {boolean}   isAbsolute True if value is an absolute value and not a modification value
    */
-  setModification(m, name, value, sentfromui, isAbsolute) {
+  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, sentfromui);
+      m.setPretty(name, value, isAbsolute);
     } else {
-      // Resistance modifiers scale with the base value
-      if (name == 'kinres' || name == 'thermres' || name == 'causres' || name == 'explres') {
-        let baseValue = m.get(name, false);
-        value = (1 - baseValue) * value;
-      }
-      m.setModValue(name, value, sentfromui);
+      m.setModValue(name, value, false);
     }
 
     // Handle special cases
@@ -543,7 +536,7 @@ export default class Ship {
       this.recalculateArmour();
     } else if (name === 'shieldreinforcement') {
       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') {
       this.recalculateDps();
       this.recalculateHps();
       this.recalculateEps();
@@ -1217,12 +1210,11 @@ export default class Ship {
       .value();
 
     // Update global stats
-    this.unladenMass = unladenMass;
+    this.unladenMass = unladenMass + fuelCapacity;
     this.cargoCapacity = cargoCapacity;
     this.fuelCapacity = fuelCapacity;
     this.passengerCapacity = passengerCapacity;
     this.ladenMass = unladenMass + fuelCapacity + cargoCapacity;
-
     return this;
   }
 

src/app/shipyard/StatsMapping.js

@@ -1,33 +0,0 @@
-import { Module } from 'ed-forge';
-
-/**
- * Sets a resistance value of a module as
- * @param {Module} module Module to set the property
- * @param {string} prop Property name; must end with 'resistance'
- * @param {number} val Resistance value to set
- */
-function setterResToEff(module, prop, val) {
-  module.set(
-    prop.replace('resistance', 'effectiveness'),
-    1 - val / 100,
-  );
-}
-
-export const SHOW = {
-  causticeffectiveness: {
-    as: 'causticresistance',
-    setter: setterResToEff,
-  },
-  explosiveeffectiveness: {
-    as: 'explosiveresistance',
-    setter: setterResToEff,
-  },
-  kineticeffectiveness: {
-    as: 'kineticresistance',
-    setter: setterResToEff,
-  },
-  thermiceffectiveness: {
-    as: 'thermicresistance',
-    setter: setterResToEff,
-  },
-};

src/app/stores/Persist.js

@@ -15,7 +15,6 @@ const LS_KEY_SIZE_RATIO = 'sizeRatio';
 const LS_KEY_TOOLTIPS = 'tooltips';
 const LS_KEY_MODULE_RESISTANCES = 'moduleResistances';
 const LS_KEY_ROLLS = 'matsPerGrade';
-const LS_KEY_ORBIS = 'orbis';
 
 let LS;
 
@@ -95,7 +94,6 @@ export class Persist extends EventEmitter {
     let buildJson = _get(LS_KEY_BUILDS);
     let comparisonJson = _get(LS_KEY_COMPARISONS);
 
-    this.orbisCreds = _get(LS_KEY_ORBIS) || { email: '', password: '' };
     this.onStorageChange = this.onStorageChange.bind(this);
     this.langCode = _getString(LS_KEY_LANG) || 'en';
     this.insurance = insurance && Insurance[insurance.toLowerCase()] !== undefined ? insurance : 'standard';
@@ -110,9 +108,9 @@ export class Persist extends EventEmitter {
     this.matsPerGrade = matsPerGrade || {
       1: 2,
       2: 2,
-      3: 4,
+      3: 3,
       4: 4,
-      5: 10
+      5: 5
     };
     this.cmdrName = cmdrName || { selected: '', cmdrs: [] };
     this.tooltipsEnabled = tips === null ? true : tips;
@@ -169,10 +167,6 @@ export class Persist extends EventEmitter {
           this.matsPerGrade = JSON.parse(newValue);
           this.emit('matsPerGrade', this.matsPerGrade);
           break;
-        case LS_KEY_ORBIS:
-          this.orbisCreds = JSON.parse(newValue);
-          this.emit('orbis', this.orbisCreds);
-          break;
       }
     } catch (e) {
       // On JSON.Parse Error - don't sync or do anything
@@ -198,24 +192,6 @@ export class Persist extends EventEmitter {
     this.emit('language', langCode);
   }
 
-  /**
-   * Get the current orbis.zone credentials
-   * @return {String} language code
-   */
-  getOrbisCreds() {
-    return this.orbisCreds;
-  };
-
-  /**
-   * Update and save the orbis.zone credentials
-   * @param {Object} creds object with username and password properties.
-   */
-  setOrbisCreds(creds) {
-    this.langCode = creds;
-    _put(LS_KEY_ORBIS, creds);
-    this.emit('orbis', creds);
-  }
-
   /**
    * Show tooltips setting
    * @param  {boolean} show Optional - update setting

src/app/utils/BlueprintFunctions.js

@@ -1,127 +1,458 @@
-import React from 'react';
-import { Modifications } from 'coriolis-data/dist';
-import { Module } from 'ed-forge';
-import { getBlueprintInfo, getExperimentalInfo } from 'ed-forge/lib/data/blueprints';
-import { entries, keys, uniq } from 'lodash';
-
-/**
- * Generate a tooltip with details of a blueprint's specials
- * @param   {Object} language   The translate object
- * @param   {Module} m           The module to compare with
- * @param   {string} specialName  The name of the special
- * @returns {Object}              The react components
- */
-export function specialToolTip(language, m, specialName) {
-  const { formats, translate } = language;
-  return (
-    <div>
-      <table width='100%'>
-        <tbody>
-          {entries(getExperimentalInfo(specialName).features).map(
-            ([prop, feats]) => {
-              const { max, only } = feats;
-              if (only && !m.getItem().match(only)) {
-                return null;
-              }
-
-              const { value, unit, beneficial } = m.getModifierFormatted(prop);
-              // If the product of value and min/max is positive, both values
-              // point into the same direction, i.e. positive/negative.
-              const specialBeneficial  = (value * max) > 0 === beneficial;
-
-              return <tr key={prop + '_specialTT'}>
-                <td style={{ textAlign: 'left' }}>{translate(prop)}</td>
-                <td>&nbsp;</td>
-                <td className={specialBeneficial ? 'secondary' : 'warning'}
-                  style={{ textAlign: 'right' }}>{formats.round(max * 100)}{unit}</td>
-                <td>&nbsp;</td>
-              </tr>;
-            }
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-/**
- * Generate a tooltip with details and preview of a blueprint's effects
- * @param {Object} language The language object
- * @param {Module} m The module to compare with
- * @param {string} previewBP Blueprint to preview
- * @param {number} previewGrade Grade to preview
- * @returns {Object} The react components
- */
-export function blueprintTooltip(language, m, previewBP, previewGrade) {
-  const { translate, formats } = language;
-  const blueprint = previewBP || m.getBlueprint();
-  const grade = previewGrade || m.getBlueprintGrade();
-  if (!blueprint) {
-    return null;
-  }
-
-  const bpFeatures = getBlueprintInfo(blueprint).features[grade];
-  const features = uniq(m.getModifiedProperties().concat(keys(bpFeatures)));
-
-  return (
-    <div>
-      <table width='100%'>
-        <thead>
-          <tr>
-            <td>{translate('feature')}</td>
-            <td>{translate('worst')}</td>
-            <td>{translate('current')}</td>
-            <td>{translate('best')}</td>
-          </tr>
-        </thead>
-        <tbody>
-          {features.map((prop) => {
-            const { min, max, only } = bpFeatures[prop] || {};
-            // Skip this property if it doesn't apply to this module
-            if (only && !m.getItem().match(only)) {
-              return null;
-            }
-            const { value, unit, beneficial } = m.getModifierFormatted(prop);
-            if (!bpFeatures[prop] && !value) {
-              // Can happen for exported synthetics
-              return null;
-            }
-            // If the product of value and min/max is positive, both values
-            // point into the same direction, i.e. positive/negative.
-            const minBeneficial  = (value * min) > 0 === beneficial;
-            const maxBeneficial  = (value * max) > 0 === beneficial;
-            return (<tr key={prop}>
-              <td style={{ textAlign: 'left' }}>{translate(prop)}</td>
-              <td className={!min ? '' : minBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>
-                {!isNaN(min) && formats.round(min * 100)}{!isNaN(min) && unit}
-              </td>
-              <td className={!value ? '' : beneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>
-                {formats.round(value || 0)}{unit}
-              </td>
-              <td className={!max ? '' : maxBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>
-                {!isNaN(max) && formats.round(max * 100)}{!isNaN(max) && unit}
-              </td>
-            </tr>);
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-/**
- * Get a blueprint with a given name and an optional module
- * @param   {string} name    The name of the blueprint
- * @param   {Object} module  The module for which to obtain this blueprint
- * @returns {Object}         The matching blueprint
- */
-export function getBlueprint(name, module) {
-  // Start with a copy of the blueprint
-  const findMod = val => Object.keys(Modifications.blueprints).find(elem => elem.toString().toLowerCase().search(val.toString().toLowerCase().replace(/(OutfittingFieldType_|persecond)/igm, '')) >= 0);
-  const found = Modifications.blueprints[findMod(name)];
-  if (!found || !found.fdname) {
-    return {};
-  }
-  const blueprint = JSON.parse(JSON.stringify(found));
-  return blueprint;
-}
+import React from 'react';
+import { Modifications } from 'coriolis-data/dist';
+import { STATS_FORMATTING } from '../shipyard/StatsFormatting';
+
+/**
+ * Generate a tooltip with details of a blueprint's specials
+ * @param   {Object}  translate   The translate object
+ * @param   {Object}  blueprint   The blueprint at the required grade
+ * @param   {string}  grp         The group of the module
+ * @param   {Object}  m           The module to compare with
+ * @param   {string} specialName  The name of the special
+ * @returns {Object}              The react components
+ */
+export function specialToolTip(translate, blueprint, grp, m, specialName) {
+  const description = [];
+  const effects = [];
+  if (!blueprint || !blueprint.features) {
+    return undefined;
+  }
+  if (m) {
+    // We also add in any benefits from specials that aren't covered above
+    if (m.blueprint) {
+      if (specialName) {
+        if (Modifications.specials[specialName].description) {
+          description.push(
+            <div className={'success'} style={{ maxWidth: 350, padding: 5, marginBottom: 10 }}>
+              {Modifications.specials[specialName].description}
+            </div>
+          );
+        }
+      }
+      for (const feature in Modifications.modifierActions[specialName]) {
+        // if (!blueprint.features[feature] && !m.mods.feature) {
+        const featureDef = Modifications.modifications[feature];
+        if (featureDef && !featureDef.hidden) {
+          let symbol = '';
+          if (feature === 'jitter') {
+            symbol = '°';
+          } else if (featureDef.type === 'percentage') {
+            symbol = '%';
+          }
+          let current = m.getModValue(feature) - m.getModValue(feature, true);
+          if (featureDef.type === 'percentage') {
+            current = Math.round(current / 10) / 10;
+          } else if (featureDef.type === 'numeric') {
+            current /= 100;
+          }
+          const currentIsBeneficial = isValueBeneficial(feature, current);
+
+          effects.push(
+            <tr key={feature + '_specialTT'}>
+              <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+              <td>&nbsp;</td>
+              <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'}
+                style={{ textAlign: 'right' }}>{current}{symbol}</td>
+              <td>&nbsp;</td>
+            </tr>
+          );
+        }
+      }
+    }
+  }
+
+  return (
+    <div>
+      {description}
+      <table width='100%'>
+        <tbody>
+          {effects}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * Generate a tooltip with details of a blueprint's effects
+ * @param   {Object}  translate   The translate object
+ * @param   {Object}  blueprint   The blueprint at the required grade
+ * @param   {Array}   engineers   The engineers supplying this blueprint
+ * @param   {string}  grp         The group of the module
+ * @param   {Object}  m           The module to compare with
+ * @returns {Object}              The react components
+ */
+export function blueprintTooltip(translate, blueprint, engineers, grp, m) {
+  const effects = [];
+  if (!blueprint || !blueprint.features) {
+    return undefined;
+  }
+  for (const feature in blueprint.features) {
+    const featureIsBeneficial = isBeneficial(feature, blueprint.features[feature]);
+    const featureDef = Modifications.modifications[feature];
+    if (!featureDef.hidden) {
+      let symbol = '';
+      if (feature === 'jitter') {
+        symbol = '°';
+      } else if (featureDef.type === 'percentage') {
+        symbol = '%';
+      }
+      let lowerBound = blueprint.features[feature][0];
+      let upperBound = blueprint.features[feature][1];
+      if (featureDef.type === 'percentage') {
+        lowerBound = Math.round(lowerBound * 1000) / 10;
+        upperBound = Math.round(upperBound * 1000) / 10;
+      }
+      const lowerIsBeneficial  = isValueBeneficial(feature, lowerBound);
+      const upperIsBeneficial  = isValueBeneficial(feature, upperBound);
+      if (m) {
+        // We have a module - add in the current value
+        let current = m.getModValue(feature);
+        if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+          current = Math.round(current / 10) / 10;
+        } else if (featureDef.type === 'numeric') {
+          current /= 100;
+        }
+        const currentIsBeneficial  = isValueBeneficial(feature, current);
+        effects.push(
+          <tr key={feature}>
+            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
+            <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
+            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
+          </tr>
+        );
+      } else {
+        // We do not have a module, no value
+        effects.push(
+          <tr key={feature}>
+            <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+            <td className={lowerBound === 0 ? '' : lowerIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td>
+            <td className={upperBound === 0 ? '' : upperIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{upperBound}{symbol}</td>
+          </tr>
+        );
+      }
+    }
+  }
+  if (m) {
+    // Because we have a module add in any benefits that aren't part of the primary blueprint
+    for (const feature in m.mods) {
+      if (!blueprint.features[feature]) {
+        const featureDef = Modifications.modifications[feature];
+        if (featureDef && !featureDef.hidden) {
+          let symbol = '';
+          if (feature === 'jitter') {
+            symbol = '°';
+          } else if (featureDef.type === 'percentage') {
+            symbol = '%';
+          }
+          let current = m.getModValue(feature);
+          if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+            current = Math.round(current / 10) / 10;
+          } else if (featureDef.type === 'numeric') {
+            current /= 100;
+          }
+          const currentIsBeneficial  = isValueBeneficial(feature, current);
+          effects.push(
+            <tr key={feature}>
+              <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+              <td>&nbsp;</td>
+              <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
+              <td>&nbsp;</td>
+            </tr>
+          );
+        }
+      }
+    }
+
+    // We also add in any benefits from specials that aren't covered above
+    if (m.blueprint && m.blueprint.special) {
+      for (const feature in Modifications.modifierActions[m.blueprint.special.edname]) {
+        if (!blueprint.features[feature] && !m.mods.feature) {
+          const featureDef = Modifications.modifications[feature];
+          if (featureDef && !featureDef.hidden) {
+            let symbol = '';
+            if (feature === 'jitter') {
+              symbol = '°';
+            } else if (featureDef.type === 'percentage') {
+              symbol = '%';
+            }
+            let current = m.getModValue(feature);
+            if (featureDef.type === 'percentage' || featureDef.name === 'burst' || featureDef.name === 'burstrof') {
+              current = Math.round(current / 10) / 10;
+            } else if (featureDef.type === 'numeric') {
+              current /= 100;
+            }
+            const currentIsBeneficial  = isValueBeneficial(feature, current);
+            effects.push(
+              <tr key={feature}>
+                <td style={{ textAlign: 'left' }}>{translate(feature, grp)}</td>
+                <td>&nbsp;</td>
+                <td className={current === 0 ? '' : currentIsBeneficial ? 'secondary' : 'warning'} style={{ textAlign: 'right' }}>{current}{symbol}</td>
+                <td>&nbsp;</td>
+              </tr>
+            );
+          }
+        }
+      }
+    }
+  }
+
+  let components;
+  if (!m) {
+    components = [];
+    for (const component in blueprint.components) {
+      components.push(
+        <tr key={component}>
+          <td style={{ textAlign: 'left' }}>{translate(component)}</td>
+          <td style={{ textAlign: 'right' }}>{blueprint.components[component]}</td>
+        </tr>
+      );
+    }
+  }
+
+  let engineersList;
+  if (engineers) {
+    engineersList = [];
+    for (const engineer of engineers) {
+      engineersList.push(
+        <tr key={engineer}>
+          <td style={{ textAlign: 'left' }}>{engineer}</td>
+        </tr>
+      );
+    }
+  }
+
+  return (
+    <div>
+      <table width='100%'>
+        <thead>
+          <tr>
+            <td>{translate('feature')}</td>
+            <td>{translate('worst')}</td>
+            {m ? <td>{translate('current')}</td> : null }
+            <td>{translate('best')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {effects}
+        </tbody>
+      </table>
+      { components ?  <table width='100%'>
+        <thead>
+          <tr>
+            <td>{translate('component')}</td>
+            <td>{translate('amount')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {components}
+        </tbody>
+      </table> : null }
+      { engineersList ? <table width='100%'>
+        <thead>
+          <tr>
+            <td>{translate('engineers')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {engineersList}
+        </tbody>
+      </table>  : null }
+    </div>
+  );
+}
+
+/**
+ * Is this blueprint feature beneficial?
+ * @param   {string}  feature    The name of the feature
+ * @param   {array}   values     The value of the feature
+ * @returns {boolean}            True if this feature is beneficial
+ */
+export function isBeneficial(feature, values) {
+  const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0));
+  if (Modifications.modifications[feature].higherbetter) {
+    return !fact;
+  } else {
+    return fact;
+  }
+}
+
+/**
+ * Is this feature value beneficial?
+ * @param   {string}  feature    The name of the feature
+ * @param   {number}  value      The value of the feature
+ * @returns {boolean}            True if this value is beneficial
+ */
+export function isValueBeneficial(feature, value) {
+  if (Modifications.modifications[feature].higherbetter) {
+    return value > 0;
+  } else {
+    return value < 0;
+  }
+}
+
+/**
+ * Is the change as shown beneficial?
+ * @param {string} feature The name of the feature
+ * @param {number} value The value of the feature as percentage change
+ * @returns True if the value is beneficial
+ */
+export function isChangeValueBeneficial(feature, value) {
+  let changeHigherBetter = STATS_FORMATTING[feature].higherbetter;
+  if (changeHigherBetter === undefined) {
+    return isValueBeneficial(feature, value);
+  }
+
+  if (changeHigherBetter) {
+    return value > 0;
+  } else {
+    return value < 0;
+  }
+}
+
+/**
+ * Get a blueprint with a given name and an optional module
+ * @param   {string} name    The name of the blueprint
+ * @param   {Object} module  The module for which to obtain this blueprint
+ * @returns {Object}         The matching blueprint
+ */
+export function getBlueprint(name, module) {
+  // Special case for multi-cannons. Conflicting 'Weapon_Overcharged' Blueprints exist due to FD's naming conventions. If this blueprint is for a multi-cannon, we need to use the correct blueprint.
+  if (name === 'weapon_overcharged') {
+    if (module.symbol.match(/MultiCannon/i)) {
+      name = 'mc_overcharged';
+    }
+  }
+  else if (name === 'Weapon_Overcharged') {
+    if (module.symbol.match(/MultiCannon/i)) {
+      name = 'MC_Overcharged';
+    }
+  }
+  // Start with a copy of the blueprint
+  const findMod = val => Object.keys(Modifications.blueprints).find(elem => elem.toString().toLowerCase().search(val.toString().toLowerCase().replace(/(OutfittingFieldType_|persecond)/igm, '')) >= 0);
+  const found = Modifications.blueprints[findMod(name)];
+  if (!found || !found.fdname) {
+    console.error('Blueprint not found:', name);
+    return {};
+  }
+  const blueprint = JSON.parse(JSON.stringify(found));
+  return blueprint;
+}
+
+/**
+ * Provide 'percent' primary modifications
+ * @param {Object}      ship      The ship for which to perform the modifications
+ * @param {Object}      m         The module for which to perform the modifications
+ * @param {Number} percent The percent to set values to of full.
+ */
+export function setPercent(ship, m, percent) {
+  ship.clearModifications(m);
+  // Pick given value as multiplier
+  const mult = percent / 100;
+  setQualityCB(m.blueprint, mult, (featureName, value) => ship.setModification(m, featureName, value));
+}
+
+/**
+ * Sets the blueprint quality and fires a callback for each property affected.
+ * @param {Object}   blueprint  The ship for which to perform the modifications
+ * @param {Number}   quality    The quality to apply - float number 0 to 1.
+ * @param {Function} cb         The Callback to run for each property. Function (featureName, value)
+ */
+export function setQualityCB(blueprint, quality, cb) {
+  // Pick given value as multiplier
+  const features = blueprint.grades[blueprint.grade].features;
+  for (const featureName in features) {
+    let value;
+    if (Modifications.modifications[featureName].higherbetter) {
+      // Higher is better, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * quality);
+      } else {
+        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * quality);
+      }
+    } else {
+      // Higher is worse, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        value = features[featureName][0] + ((features[featureName][1] - features[featureName][0]) * quality);
+      } else {
+        value = features[featureName][1] + ((features[featureName][0] - features[featureName][1]) * quality);
+      }
+    }
+
+    if (Modifications.modifications[featureName].type == 'percentage') {
+      value = value * 10000;
+    } else if (Modifications.modifications[featureName].type == 'numeric') {
+      value = value * 100;
+    }
+
+    cb(featureName, value);
+  }
+}
+
+/**
+ * Provide 'random' primary modifications
+ * @param {Object}      ship      The ship for which to perform the modifications
+ * @param {Object}      m         The module for which to perform the modifications
+ */
+export function setRandom(ship, m) {
+  // Pick a single value for our randomness
+  setPercent(ship, m, Math.random() * 100);
+}
+
+/**
+ * Provide 'percent' primary query
+ * @param {Object}      m         The module for which to perform the query
+ * @returns {Number} percent The percentage indicator of current applied values.
+ */
+export function getPercent(m) {
+  let result = null;
+  const features = m.blueprint.grades[m.blueprint.grade].features;
+  for (const featureName in features) {
+    if (features[featureName][0] === features[featureName][1]) {
+      continue;
+    }
+
+    let value = _getValue(m, featureName);
+    let mult;
+    if (Modifications.modifications[featureName].higherbetter) {
+      // Higher is better, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
+      } else {
+        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
+      }
+    } else {
+      // Higher is worse, but is this making it better or worse?
+      if (features[featureName][0] < 0 || (features[featureName][0] === 0 && features[featureName][1] < 0)) {
+        mult = Math.round((value - features[featureName][0]) / (features[featureName][1] - features[featureName][0]) * 100);
+      } else {
+        mult = Math.round((value - features[featureName][1]) / (features[featureName][0] - features[featureName][1]) * 100);
+      }
+    }
+
+    if (result && result != mult) {
+      return null;
+    } else if (result != mult) {
+      result = mult;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Query a feature value
+ * @param {Object}      m             The module for which to perform the query
+ * @param {string}      featureName   The feature being queried
+ * @returns {number}  The value of the modification as a %
+ */
+function _getValue(m, featureName) {
+  if (Modifications.modifications[featureName].type == 'percentage') {
+    return m.getModValue(featureName, true) / 10000;
+  } else if (Modifications.modifications[featureName].type == 'numeric') {
+    return m.getModValue(featureName, true) / 100;
+  } else {
+    return m.getModValue(featureName, true);
+  }
+}

src/app/utils/CompanionApiUtils.js

@@ -14,6 +14,8 @@ export const SHIP_FD_NAME_TO_CORIOLIS_NAME = {
   'BelugaLiner': 'beluga',
   'CobraMkIII': 'cobra_mk_iii',
   'CobraMkIV': 'cobra_mk_iv',
+  'CobraMkV': 'cobramkv',
+  'Corsair': 'imperial_corsair',
   'Cutter': 'imperial_cutter',
   'DiamondBackXL': 'diamondback_explorer',
   'DiamondBack': 'diamondback',
@@ -31,12 +33,15 @@ export const SHIP_FD_NAME_TO_CORIOLIS_NAME = {
   'Independant_Trader': 'keelback',
   'Krait_MkII': 'krait_mkii',
   'Mamba': 'mamba',
+  'Mandalay': 'mandalay',
   'Krait_Light': 'krait_phantom',
   'Orca': 'orca',
   'Python': 'python',
+  'Python_nx': 'python_nx',
   'SideWinder': 'sidewinder',
   'Type6': 'type_6_transporter',
   'Type7': 'type_7_transport',
+  'Type8': 'type_8_transport',
   'Type9': 'type_9_heavy',
   'Type9_Military': 'type_10_defender',
   'TypeX': 'alliance_chieftain',

src/app/utils/JournalUtils.js

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

src/app/utils/ShortenUrl.js

@@ -105,7 +105,7 @@ function orbisShorten(url, success, error) {
   }
 }
 
-const API_ORBIS = 'https://orbis.zone/api/builds/add';
+const API_ORBIS = 'https://api.orbis.zone/ships';
 /**
  * Upload to Orbis
  * @param  {object} ship        The URL to shorten

src/app/utils/UtilityFunctions.js

@@ -1,4 +1,3 @@
-import { Module } from 'ed-forge';
 
 /**
  * Wraps the callback/context menu handler such that the default
@@ -84,18 +83,3 @@ export function isEmpty(obj) {
   }
   return true;
 };
-
-/**
- * Fetches a property from either a Module or a moduleInfo object
- * @param {Object} m Either a Module or a moduleInfo object
- * @param {string} property Property name
- * @returns {number} Property value
- */
-export function moduleGet(m, property) {
-  if (m instanceof Module) {
-    return m.get(property);
-  } else {
-    // Assume its a moduleInfo object
-    return m.props[property];
-  }
-}

src/index.ejs

@@ -2,19 +2,14 @@
 <html>
   <head>
     <title>Coriolis EDCD Edition</title>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({
-              google_ad_client: "ca-pub-3709458261881414",
-              enable_page_level_ads: true
-        });
-    </script>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
     <!-- Standard headers -->
     <meta name="description" content="A ship builder, outfitting and comparison
       tool for Elite Dangerous">
     <meta name="mobile-web-app-capable" content="yes">
+   
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0,
       maximum-scale=1.0, user-scalable=0">
     <link rel="manifest" href="/manifest.json">
@@ -32,7 +27,7 @@
     <meta name="msapplication-TileImage" content="/mstile-144x144.png">
     <meta name="msapplication-config" content="/browserconfig.xml">
     <meta name="theme-color" content="#000000">
-
+    <!-- <script data-ad-client="ca-pub-3709458261881414" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> -->
     <script>
       window.CORIOLIS_GAPI_KEY = '<%- htmlWebpackPlugin.options.gapiKey %>';
       window.CORIOLIS_VERSION = '<%- htmlWebpackPlugin.options.version %>';
@@ -45,21 +40,12 @@
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
-
       gtag('config', 'UA-55840909-18');
     </script>
+  </head>
+  <body style="background-color:#000;">
+    <section id="coriolis">
 
-
-
-    <!-- Bugsnag -->
-        <script src="https://d2wy8f7a9ursnm.cloudfront.net/v5.0.0/bugsnag.min.js"></script>
-        <script>
-      window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.BUGSNAG_VERSION || undefined})
-      window.Bugsnag = window.bugsnagClient
-    </script>
-      </head>
-      <body style="background-color:#000;">
-        <section id="coriolis"></section>
-
-      </body>
-    </html>
+    </section>
+  </body>
+</html>

src/less/app.less

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