Merge pull request #800 from Brighter-Applications/develop

Develop

.babelrc

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

.dockerignore

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

.editorconfig

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

.esdoc.json

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

.eslintrc

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

.gitattributes

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

.gitignore

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

.travis.yml

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

ChangeLog.md

@@ -1,3 +1,208 @@
+#2.5.1  
+  * Passenger count on main page  
+  * AX Modules  
+  * Engineering fixes  
+  * Use coriolis-data 2.5.1  
+
+#2.5.0
+  * willyb321 and myself have conquered engineering. Mainly him though...  
+  * Use coriolis-data 2.5.0
+
+#2.4.2  
+  Lots of kind people have helped out for this release! Check out the PR history!  
+  * Uses coriolis-data update:
+    * Fixes issues with repair limpets
+    * Adds requirement data
+  * Adds requirements panel
+  * Adds comma formatting to tooltip numbers
+
+#2.4.1
+  * Small patches and changes  
+
+#2.4.0
+  * Changed compression library to Pako
+  * Use coriolis-data 2.4.0
+    * Repair Limpets added
+
+#2.3.7
+  * Fixed Travis test issues
+  * Bumped NodeJS version to provide better compatability and support
+  * Added updated German Translation
+  * Fixed issues with Safari
+  * Use coriolis-data 2.3.7
+    * Fixed Orca mass-lock
+
+#2.3.6
+  * Update miner role to provide better defaults
+  * Fix issue where torpedo special effects were not showing
+  * Fix typo causing long range blueprint to not modify shot speed in some circumstances
+  * Fix for Spanish translation of Chaff Launcher (thanks to DamonFstr)
+  * Update for Russian translation (thanks to LeeNTien)
+  * Use coriolis-data 2.3.6:
+    * Add shotspeed modifier to cannon/multi-cannon/fragment cannon
+
+#2.3.5
+  * Ensure that hidden blueprint effects are applied when a blueprint is selected
+  * Handle display when summary values show thrusters disabled but current mass keeps them enabled
+  * Added updated German translations (thanks to @sweisgerber-dev)
+  * Power state (enabled and priority) now follows modules when they are swapped or copied
+  * Grey out modules that are powered off to provide a clearer visual indication
+  * Use coriolis-data 2.3.5:
+    * Fix list of available blueprints for Point Defence
+    * Fix integrity values for class 6 power plants
+    * Add shot speed for long range weapon
+    * Fix components for dirty drive grade 3
+    * Update values for Cytoscrambler
+
+#2.3.4
+  * Fix crash when removing the special effect from a module
+  * Ensure comparisons with saved stock ships work correctly
+  * Add 'Racer' role
+  * Tidy up shipyard page; remove units from data columns and re-order for legibility
+  * Allow basic drag/drop functionality in Edge/Internet Explorer 11 browser
+  * Provide separate special effects for dumbfire and seeker missiles
+  * Include special effect modifiers in blueprint tooltip
+  * Use coriolis-data 2.3.4:
+    * Add missing Long Range blueprint to multi-cannon
+    * Fix values for thermal load of focused weapon grade 4
+    * Fix internal module information for power plant blueprints
+    * Add 'FSD Interrupt' special to dumbfire missile racks; this module now has `specials_S` and `specials_D` keys for specials to differentiate
+
+#2.3.3
+  * Remove unused blueprint when hitting reset
+  * Add 'purchase module' external link to EDDB for refit items
+  * Use coriolis-data 2.3.3:
+    * Add Felicity Farseer to list of engineers that supply sensor and detailed surface scanner modifications
+
+#2.3.2
+  * Use scan range for DSS rather than scan time
+  * Fix companion API import of Dolphin
+  * Use coriolis-data 2.3.2:
+    * Separate scan time and scan range
+    * Add Frontier IDs for new items in 2.3
+    * Update ownership of module blueprints for sensors and scanners
+    * Update railgun penetration
+
+#2.3.0
+  * Make scan time visible on scanners where available
+  * Update power distributor able-to-boost calculation to take fractional MJ values in to account
+  * Revert to floating header due to issues on iOS
+  * Fix issue where new module added to a slot did not reset its enabled status
+  * Show integrity value for relevant modules
+  * Reset old modification values when a new roll is applied
+  * Fix issue with miner role where refinery would not be present in ships with class 5 slots but no class 4
+  * Ensure that boost value is set correctly when modifications to power distributor enable/disable boost
+  * Ensure that hull reinforcement modifications take the inherent resistance in to account when calculating modification percentages
+  * Add tooltip for blueprints providing details of the features they alter, the components required for the blueprint and the engineer(s) who cam craft them
+  * Use opponent's saved pips if available
+  * Ignore rounds per shot for EPS and HPS calculations; it's already factored in to the numbers
+  * Ensure that clip size modification imports result in whole numbers
+  * Rework of separate offence/defence/movement sections to a unified interface
+  * Use cargo hatch information on import if available
+  * Additional information of power distributor pips, boost, cargo and fuel loads added to build
+  * Additional information of opponent and engagement range added to build
+  * Reworking of offence, defence and movement information in to separate tabs as part of the outfitting screen:
+    * Power and costs section provides the existing 'Power' and 'Costs' sections
+    * Profiles section provides a number of graphs that show how various components of the build (top speed, sustained DPS against opponent's shields and armour etc) are affected by mass, range, etc.
+    * Offence section provides details of your build's damage distribution and per-weapon effectiveness. It also gives summary information for how long it will take for your build to wear down your opponent's shields and armour
+    * Defence section provides details of your build's defences against your selected opponent. It provides details of the effectiveness of your resistances of both shields and armour, and effective strength of each as a result. It also provides key metrics around shield longevity and recovery times, as well as module protection
+  * Fix power band marker to show safe power limit at 40% rather than 50%
+  * Restyle blueprint list to improve consistency with similar menus
+  * Use coriolis-data 2.3.0:
+    * Add Dolphin
+    * Add turreted mining lasers
+    * Add long range / wide angle / fast scan scanner blueprints
+    * Fix EDDB IDs for class 5 and 7 fighter hangars for correct shopping list
+    * Fix cost for rocket-propelled FSD disruptor
+    * Add module names for blueprints
+    * Fix erroneous value for grade 5 kinetic shield booster
+    * Add missing integrity values for some modules
+    * Update module reinforcement package integrity
+    * Update specs of Beluga as per 2.3
+    * Update specs of Asp Scout as per 2.3
+    * Update specs of Diamondback Explorer as per 2.3
+    * Add ED ID for Rocket Propelled FSD Disruptor
+    * Fix ED name for target lock breaker special
+    * Update scan range and angle information for sensors
+    * Tidy up shield cell bank information to allow for accurate calculations with modifications
+    * Update mine launcher stats
+    * Add appropriate engineers to per-module blueprint information
+
+#2.2.19
+  * Power management panel now displays modules in descending order of power usage by default
+  * Shot speed can no longer be modified directly.  Its value is derived from the range modifier for Long Range and Focused modifications
+  * Ensure that jump range chart updates when fuel slider is changed
+  * Add 'Engine profile' and 'FSD profile' charts.  These show how your maximum speed/jump range will alter as you alter the mass of your build
+  * Use coriolis-data 2.2.19:
+    * Remove shot speed modification - it is directly tied to range
+    * Fix incorrect minimal mass for 3C bi-weave shield generator
+
+#2.2.18
+  * Change methodology for calculating explorer role; can result in lighter builds
+  * Tidy up layout for module selection and lay everything out in a consistent best-to-worst for both class and grade
+  * Make integrity for module reinforcement packages visible
+  * Clean up breakpoints for modules in available modules list; stops 7- or 8- module long lines
+  * Add damager/range graphs to damage dealt
+  * Reorder panels
+  * Use coriolis-data 2.2.18:
+    * Correct lower efficiency value to be better, not worse
+
+#2.2.17
+  * Use in-game terminology for shield generator optmul and optmass items
+  * Add crew to shipyard and outfitting page information
+  * Use coriolis-data 2.2.17:
+    * Add mass as potential SCB modification
+    * Fix mining laser statistics
+    * Remove non-existent grade 4 and 5 wake scanner modifications
+    * Add number of crew for each ship
+
+#2.2.16
+  * Fix 'Extreme' blueprint roll where some incorrect ranges were chosen
+  * Use coriolis-data 2.2.16:
+    * Fix incorrect thermal load modifiers for dirty drives
+    * Provide explicit information about if values are higher numeric value == better or not
+
+#2.2.15
+  * Ensure that standard slots are repainted when any component changes
+  * Reload page if Safari throws a security error
+  * Handle import of ships with incorrectly-sized slots
+  * Add 'Extreme' blueprint roll: best beneficial and worst detrimental outcome (in place of 'Average' roll)
+  * Display information about Microsoft browser issues when an import fails
+  * Add 'purchase this build' icon link to EDDB
+  * Add 'miner' and 'shielded miner' ship roles
+  * Use coriolis-data 2.2.15:
+    * Fix location of initial cargo rack for Vulture
+    * Fix broken regeneration rate for 6B shield generators
+    * Tidy up breach damage values
+
+#2.2.14
+  * Ensure that jitter is shown correctly when the result of a special effect
+  * Use restyled blueprint information
+  * Use the ship name (if available) rather than the ship model for the window title
+  * Use coriolis-data 2.2.14:
+    * Alter blueprint structure to combine components and features
+    * Make hidden value of modifications its own attribute
+    * Fix incorrect ED ID for class 6 passenger cabins
+
+#2.2.13
+  * Add 'time to drain' summary value.  This is the time to drain the WEP capacitor if firing all enabled weapons
+  * Do not include utility slot DPS/EPS/HPS in summary information
+  * Ensure that auto loader special shows in the tooltip
+  * Ensure that ship mass is recalculated when appropriate
+  * Use coriolis-data 2.2.13:
+    * Add plasma slug special effect for plasma accelerator
+    * Tweak hull costs of ships
+
+#2.2.12
+  * Tidy up old references to coriolis.io
+  * Add ability to add and remove special effects to weapon modifications
+  * Add weapon engineering information to Damage Dealt section
+  * Change shortcut for link from ctrl-l to ctrl-o to avoid clash with location bar
+  * Only show one of power generation or draw in tooltips, according to module
+  * Use coriolis-data 2.2.12:
+    * Add special effects for each blueprint
+    * Add IDs for most Powerplay modules
+
 #2.2.11
   * Add help system and initial help file
   * Make absolute damage visible

Dockerfile

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

Dockerfile-dev

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

Dockerfile-local-prod

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

LICENSE.md

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

README.md

@@ -1,52 +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.
-
-### 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/cmmcleod/coriolis/wiki/Developer's-Guide) in the wiki.
+This release includes the ability to run the app as a Docker container.
+```sh
+> git clone https://github.com/EDCD/coriolis.git
+> git clone https://github.com/EDCD/coriolis-data.git
+> cd coriolis
+> docker buildx build --build-context data=../coriolis-data --tag coriolis .
+> docker run -d -p 3300:3300 coriolis
+```
 
+Or to run an instance of coriolis without Docker Desktop, perform the following steps in a shell:
+```sh
+> git clone https://github.com/EDCD/coriolis.git
+> git clone https://github.com/EDCD/coriolis-data.git
+> cd ./coriolis-data
+> npm install
+> cd ../coriolis
+> npm install
+> npm start
+```
+
+You will then have a development server running on `localhost:3300`.
 
 ### Ship and Module Database
 
-See the [Data wiki](https://github.com/cmmcleod/coriolis-data/wiki) for details on structure, etc.
+See the [Data wiki](https://github.com/EDCD/coriolis-data/wiki) for details on structure, etc.
 
+## Deployment
 
-## License
+Follow the steps for [Development](#development) as above, but instead
+of `npm start` you'll want to:
 
-All Data and [associated JSON](https://github.com/EDCD/coriolis-data) files are intellectual property and copyright of Frontier Developments plc ('Frontier', 'Frontier Developments') and are subject to their
-[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/anaconda-test-detailed-export-v4.json

@@ -269,20 +269,19 @@
     "topSpeed": 187.01,
     "totalCost": 882362058,
     "totalDpe": 142.68,
-    "totalDps": 103.8,
-    "totalEps": 22.71,
-    "totalHps": 677.29,
+    "totalDps": 101.13,
+    "totalEps": 18.71,
     "totalExplDpe": 0,
     "totalExplDps": 0,
     "totalExplSDps": 0,
     "totalAbsDpe": 3.57,
     "totalAbsDps": 18.78,
     "totalAbsSDps": 14.45,
-    "totalHps": 33.62,
+    "totalHps": 28.28,
     "totalKinDpe": 117.48,
-    "totalKinDps": 24.94,
-    "totalKinSDps": 18.76,
-    "totalSDps": 91.84,
+    "totalKinDps": 22.27,
+    "totalKinSDps": 16.91,
+    "totalSDps": 89.99,
     "totalThermDpe": 21.63,
     "totalThermDps": 60.08,
     "totalThermSDps": 58.64,
@@ -320,6 +319,7 @@
     "shieldCells": 1840,
     "shieldExplRes": 0.5,
     "shieldKinRes": 0.4,
-    "shieldThermRes": -0.2
+    "shieldThermRes": -0.2,
+    "crew": 3
   }
 }

__tests__/fixtures/companion-api-import-3.json

@@ -0,0 +1,314 @@
+{
+  "cargo": {
+    "capacity": 264
+  },
+  "free": false,
+  "fuel": {
+    "main": {
+      "capacity": 32
+    },
+    "reserve": {
+      "capacity": 0.52
+    }
+  },
+  "id": 4,
+  "modules": {
+    "Armour": {
+      "module": {
+        "free": false,
+        "id": 128049298,
+        "name": "Type7_Armour_Grade1",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 0
+      }
+    },
+    "Bobble01": [],
+    "Bobble02": [],
+    "Bobble03": [],
+    "Bobble04": [],
+    "Bobble05": [],
+    "Bobble06": [],
+    "Bobble07": [],
+    "Bobble08": [],
+    "Bobble09": [],
+    "Bobble10": [],
+    "Decal1": {
+      "module": {
+        "free": false,
+        "id": 128667746,
+        "name": "Decal_Trade_Dealer",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 0
+      }
+    },
+    "Decal2": {
+      "module": {
+        "free": false,
+        "id": 128667738,
+        "name": "Decal_Combat_Competent",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 0
+      }
+    },
+    "Decal3": {
+      "module": {
+        "free": false,
+        "id": 128667753,
+        "name": "Decal_Explorer_Scout",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 0
+      }
+    },
+    "EngineColour": [],
+    "FrameShiftDrive": {
+      "module": {
+        "free": false,
+        "id": 128064122,
+        "name": "Int_Hyperdrive_Size5_Class5",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 5103953
+      }
+    },
+    "FuelTank": {
+      "module": {
+        "free": false,
+        "id": 128064350,
+        "name": "Int_FuelTank_Size5_Class3",
+        "on": true,
+        "priority": 1,
+        "unloaned": 97754,
+        "value": 97754
+      }
+    },
+    "LifeSupport": {
+      "module": {
+        "free": false,
+        "id": 128064154,
+        "name": "Int_LifeSupport_Size4_Class2",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 28373
+      }
+    },
+    "MainEngines": {
+      "module": {
+        "free": false,
+        "id": 128064087,
+        "name": "Int_Engine_Size5_Class5",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 5103953
+      }
+    },
+    "PaintJob": {
+      "module": {
+        "free": false,
+        "id": 128671422,
+        "name": "PaintJob_Type7_Tactical_White",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 0
+      }
+    },
+    "PlanetaryApproachSuite": {
+      "module": {
+        "free": false,
+        "id": 128672317,
+        "name": "Int_PlanetApproachSuite",
+        "on": true,
+        "priority": 1,
+        "unloaned": 500,
+        "value": 500
+      }
+    },
+    "PowerDistributor": {
+      "module": {
+        "free": false,
+        "id": 128064192,
+        "name": "Int_PowerDistributor_Size3_Class5",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 158331
+      }
+    },
+    "PowerPlant": {
+      "module": {
+        "free": false,
+        "id": 128064047,
+        "name": "Int_Powerplant_Size4_Class5",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 1610080
+      }
+    },
+    "Radar": {
+      "module": {
+        "free": false,
+        "id": 128064229,
+        "name": "Int_Sensors_Size3_Class2",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 10133
+      }
+    },
+    "Slot01_Size6": {
+      "module": {
+        "free": false,
+        "id": 128064343,
+        "name": "Int_CargoRack_Size6_Class1",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 362591
+      }
+    },
+    "Slot02_Size6": {
+      "module": {
+        "free": false,
+        "id": 128064343,
+        "name": "Int_CargoRack_Size6_Class1",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 362591
+      }
+    },
+    "Slot03_Size5": {
+      "module": {
+        "free": false,
+        "id": 128064343,
+        "name": "Int_CargoRack_Size6_Class1",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 362591
+      }
+    },
+    "Slot04_Size5": {
+      "module": {
+        "free": false,
+        "id": 128064342,
+        "name": "Int_CargoRack_Size5_Class1",
+        "on": true,
+        "priority": 1,
+        "unloaned": 111566,
+        "value": 111566
+      }
+    },
+    "Slot05_Size4": {
+      "module": {
+        "free": false,
+        "id": 128064342,
+        "name": "Int_CargoRack_Size5_Class1",
+        "on": true,
+        "priority": 1,
+        "unloaned": 111566,
+        "value": 111566
+      }
+    },
+    "Slot06_Size4": {
+      "module": {
+        "free": false,
+        "id": 128064279,
+        "name": "Int_ShieldGenerator_Size5_Class2",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 189035
+      }
+    },
+    "Slot07_Size2": {
+      "module": {
+        "free": false,
+        "id": 128049549,
+        "name": "Int_DockingComputer_Standard",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 4500
+      }
+    },
+    "Slot08_Size2": {
+      "module": {
+        "free": false,
+        "id": 128064340,
+        "name": "Int_CargoRack_Size3_Class1",
+        "on": true,
+        "priority": 1,
+        "unloaned": 0,
+        "value": 10563
+      }
+    },
+    "SmallHardpoint1": [],
+    "SmallHardpoint2": [],
+    "SmallHardpoint3": [],
+    "SmallHardpoint4": [],
+    "TinyHardpoint1": {
+      "module": {
+        "free": false,
+        "id": 128668536,
+        "name": "Hpt_ShieldBooster_Size0_Class5",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 281000
+      }
+    },
+    "TinyHardpoint2": {
+      "module": {
+        "free": false,
+        "id": 128668536,
+        "name": "Hpt_ShieldBooster_Size0_Class5",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 281000
+      }
+    },
+    "TinyHardpoint3": {
+      "module": {
+        "free": false,
+        "id": 128668536,
+        "name": "Hpt_ShieldBooster_Size0_Class5",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 281000
+      }
+    },
+    "TinyHardpoint4": {
+      "module": {
+        "free": false,
+        "id": 128049513,
+        "name": "Hpt_ChaffLauncher_Tiny",
+        "on": true,
+        "priority": 0,
+        "unloaned": 0,
+        "value": 8500
+      }
+    },
+    "WeaponColour": []
+  },
+  "name": "Type7",
+  "value": {
+    "hull": 16780009,
+    "modules": 14479580,
+    "unloaned": 321386
+  }
+}

__tests__/fixtures/companion-api-import-4.json

@@ -0,0 +1,225 @@
+{
+  "free": false,
+  "id": 2,
+  "modules": {
+    "Armour": {
+      "module": {
+        "free": false,
+        "id": 128049280,
+        "name": "CobraMkIII_Armour_Grade1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "FrameShiftDrive": {
+      "module": {
+        "free": false,
+        "id": 128064117,
+        "name": "Int_Hyperdrive_Size4_Class5",
+        "on": true,
+        "priority": 4,
+        "value": 1610080
+      }
+    },
+    "FuelTank": {
+      "module": {
+        "free": false,
+        "id": 128064349,
+        "name": "Int_FuelTank_Size4_Class3",
+        "on": true,
+        "priority": 1,
+        "value": 24734
+      }
+    },
+    "LifeSupport": {
+      "module": {
+        "free": false,
+        "id": 128064149,
+        "name": "Int_LifeSupport_Size3_Class2",
+        "on": true,
+        "priority": 0,
+        "value": 10133
+      }
+    },
+    "MainEngines": {
+      "module": {
+        "free": false,
+        "id": 128064079,
+        "name": "Int_Engine_Size4_Class2",
+        "on": true,
+        "priority": 0,
+        "value": 59633
+      }
+    },
+    "PaintJob": {
+      "module": {
+        "free": false,
+        "id": 128741033,
+        "name": "PaintJob_CobraMKIII_Corrosive_05",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "PlanetaryApproachSuite": {
+      "module": {
+        "free": false,
+        "id": 128672317,
+        "name": "Int_PlanetApproachSuite",
+        "on": true,
+        "priority": 1,
+        "value": 500
+      }
+    },
+    "PowerDistributor": {
+      "module": {
+        "free": false,
+        "id": 128064179,
+        "name": "Int_PowerDistributor_Size1_Class2",
+        "on": true,
+        "priority": 2,
+        "value": 1293
+      }
+    },
+    "PowerPlant": {
+      "module": {
+        "free": false,
+        "id": 128064037,
+        "name": "Int_Powerplant_Size2_Class5",
+        "on": true,
+        "priority": 1,
+        "value": 160224
+      }
+    },
+    "Radar": {
+      "module": {
+        "free": false,
+        "id": 128064229,
+        "name": "Int_Sensors_Size3_Class2",
+        "on": true,
+        "priority": 0,
+        "value": 10133
+      }
+    },
+    "ShipID0": {
+      "module": {
+        "free": false,
+        "id": 128758976,
+        "name": "Nameplate_ShipID_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipID1": {
+      "module": {
+        "free": false,
+        "id": 128758976,
+        "name": "Nameplate_ShipID_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitBumper": {
+      "module": {
+        "free": false,
+        "id": 128740698,
+        "name": "CobraMkIII_ShipkitRaider1_Bumper1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitSpoiler": {
+      "module": {
+        "free": false,
+        "id": 128740701,
+        "name": "CobraMkIII_ShipkitRaider1_Spoiler1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitTail": {
+      "module": {
+        "free": false,
+        "id": 128740705,
+        "name": "CobraMkIII_ShipkitRaider1_Tail2",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitWings": {
+      "module": {
+        "free": false,
+        "id": 128740707,
+        "name": "CobraMkIII_ShipkitRaider1_Wings1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipName0": {
+      "module": {
+        "free": false,
+        "id": 128758944,
+        "name": "Nameplate_Explorer01_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipName1": {
+      "module": {
+        "free": false,
+        "id": 128758944,
+        "name": "Nameplate_Explorer01_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "Slot01_Size4": {
+      "module": {
+        "free": false,
+        "id": 128666663,
+        "name": "Int_FuelScoop_Size4_Class3",
+        "on": true,
+        "priority": 2,
+        "value": 178898
+      }
+    },
+    "Slot02_Size4": [],
+    "Slot03_Size4": [],
+    "Slot04_Size2": [],
+    "Slot05_Size2": {
+      "module": {
+        "free": false,
+        "id": 128663561,
+        "name": "Int_StellarBodyDiscoveryScanner_Advanced",
+        "on": true,
+        "priority": 2,
+        "value": 1545000
+      }
+    },
+    "Slot06_Size2": {
+      "module": {
+        "free": false,
+        "id": 128666634,
+        "name": "Int_DetailedSurfaceScanner_Tiny",
+        "on": true,
+        "priority": 2,
+        "value": 250000
+      }
+    }
+  },
+  "name": "CobraMkIII",
+  "value": {
+    "hull": 205287,
+    "modules": 3850628,
+    "unloaned": 1751109
+  }
+}

__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.AwRj4zTI.AwiMIypI."
+    "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

@@ -1,8 +1,10 @@
-jest.dontMock('../src/app/stores/Persist');
-jest.dontMock('../src/app/components/TranslatedComponent');
-jest.dontMock('../src/app/components/ModalImport');
+jest.unmock('../src/app/stores/Persist');
+jest.unmock('../src/app/components/TranslatedComponent');
+jest.unmock('../src/app/components/ModalImport');
+jest.unmock('prop-types');
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import TU from 'react-testutils-additions';
 import Utils from './testUtils';
@@ -16,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);
@@ -108,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!');
@@ -142,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() {
@@ -167,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%2FPwMcAABTINwTEgAAAA%3D%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');
     });
   });
 
@@ -184,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%2FAwDFxwtofAAAAA%3D%3D&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() {
@@ -196,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.H4sIAAAAAAAAA12OP0tCYRjFj9fuVbvF1du9ekkT8s%2FkIg4NElyIBBd321yaGvwUQTS3N7UFfYygIT9EoyQUJA36ns47XJCWA%2B%2Fz%2Bz3Pe3ImBbDNKaqNPSBoGrL4ngfomKpFGiJ%2BLgHteR1IPjxJT5pF11uSeXNsJVcRfgdC92syWUuK0iMdKZqrjJ%2F0aoA71lJ5oKf38knWcCiptCPdhJIerdS00vlK0qktlqoj983UmqqHjQ33VsW8eazFmaTyULP2hQ4lX8LBme6g%2F6v0TTdbxJ2KhdEIaCw15MF%2FNB0L%2BS2hwEwyFM8KgP%2BqEpWWA3Qu9Z3z9kPWHzakt7Dt%2BAeD7ghSTgEAAA%3D%3D&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);
 
@@ -229,7 +235,7 @@ describe('Import Modal', function() {
 
     beforeEach(reset);
 
-    it('imports a valid v4 build', function() {
+    it('imports a valid companion API build', function() {
       const importData = require('./fixtures/companion-api-import-1');
       pasteText(JSON.stringify(importData));
 
@@ -238,10 +244,10 @@ 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.H4sIAAAAAAAAA02Svy9DURTHT1vvtfoat32eekVV9fm1kBgwSIw0YWYgBqmpMZkMBomFVfwFEoZKhBjE1qWTgegiDX%2BCQdKI1j2%2BR%2FJ4yzfnvu%2FnfO%2B979yQXiCi7xAkbRpEqsLMsRKWHNZpsSKQnppJVLAdIvc6DGiwxexMaWb7GDZHdJ%2BQaCf71Ia%2F88XsOp1EThk9bOh5P2kkahGN3qPM1wANbyOk87zNHH%2FBUs0gnWN61T9TOwfJ7EWJjMcms1lEo30Gx11BD8f1mh%2FcTkCMMvY0HZcoe4Wk5By%2BFcrrRL0N0OOlrd0Ntv57jGoc%2BH4%2F8EqHj3%2FCUXc4FicC5NFvsJBVIWeFvESlpuXSuCS5RRyLlV70z%2B4uQaw6ypSIJ6KOJDgZgFpQ60YgEU9EPQmUCkAfAj0IJOKJqC4wuYMY9rQD5CuubT0LSag8qdShxHUHoElcyWrAT4l4IsoCw65e%2BRv5BqKtC0mSJu8LH8OFT%2Bb%2BE8SZb0CcEn4AZ3TRDx5q4l1EJ%2BCP1bEM1WSaAwH%2FFkOLPoofwTo0LY8nr7O%2B37cp4yWIu4zHlHiXGfMPmat5gqMCAAA%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 v4 build', function() {
+    it('imports a valid companion API build', function() {
       const importData = require('./fixtures/companion-api-import-2');
       pasteText(JSON.stringify(importData));
 
@@ -250,7 +256,31 @@ 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%2FwMAIrEcGGsAAAA%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() {
+      const importData = require('./fixtures/companion-api-import-3');
+      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/type_7_transport?code=A0patfFflidasdf5----0404040005050504044d2402--.AwRj4yoo.CwRgDBlVK7HjEA%3D%3D.&bn=Imported%20Type-7%20Transporter');
+    });
+
+    it('imports a valid companion API build', function() {
+      const importData = require('./fixtures/companion-api-import-4');
+      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/cobra_mk_iii?code=A0p0tdFaldd3sdf4------34----2i--.AwRj4yqA.CwRgDMYExrezBig%3D.&bn=Imported%20Cobra%20Mk%20III');
     });
   });
 
@@ -298,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]);
+        }
+      }
+    });
+  });
 });

__tests__/test-persist.js

@@ -1,4 +1,4 @@
-jest.dontMock('../src/app/stores/Persist');
+jest.unmock('../src/app/stores/Persist');
 
 import React from 'react';
 import ReactDOM from 'react-dom';

__tests__/testUtils.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const TestUtils = {
   createContextProvider: function(context) {
     var _contextTypes = {};
 
     Object.keys(context).forEach(function(key) {
-      _contextTypes[key] = React.PropTypes.any;
+      _contextTypes[key] = PropTypes.any;
     });
 
     return React.createClass({
@@ -21,4 +22,4 @@ const TestUtils = {
 };
 
 
-export default TestUtils;
+export default TestUtils;

devServer.js

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

nginx.conf

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

package.json

@@ -1,14 +1,19 @@
 {
   "name": "coriolis_shipyard",
-  "version": "2.2.11",
+  "version": "3.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/EDCD/coriolis"
   },
-  "homepage": "https://coriolis.edcd.io",
+  "homepage": "https://coriolis.io",
   "bugs": "https://github.com/EDCD/coriolis/issues",
+  "contributors": [
+    { "name": "cmdrmcdonald" },
+    { "name": "willb321" },
+    { "name": "felixlinker" }
+  ],
   "private": true,
-  "engine": "node >= 4.0.0",
+  "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,12 +23,15 @@
     "test": "jest",
     "prod-serve": "nginx -p $(pwd) -c nginx.conf",
     "prod-stop": "kill -QUIT $(cat nginx.pid)",
-    "build": "npm run clean && NODE_ENV=production webpack -d -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"
   },
   "jest": {
-    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "transform": {
+      ".*": "<rootDir>/node_modules/babel-jest"
+    },
     "testRegex": "(/__tests__/test-.*|\\.(test|spec))\\.js$",
     "moduleFileExtensions": [
       "js",
@@ -36,7 +44,7 @@
       "<rootDir>/node_modules/lodash",
       "<rootDir>/node_modules/react",
       "<rootDir>/node_modules/react-dom",
-      "<rootDir>/node_modules/react-addons-test-utils",
+      "<rootDir>/node_modules/react-transition-group",
       "<rootDir>/node_modules/react-testutils-additions",
       "<rootDir>/node_modules/fbjs",
       "<rootDir>/node_modules/fbemitter",
@@ -53,47 +61,101 @@
     ]
   },
   "devDependencies": {
-    "appcache-webpack-plugin": "^1.2.1",
-    "babel-core": "*",
-    "babel-eslint": "*",
-    "babel-jest": "*",
-    "babel-loader": "*",
-    "babel-preset-es2015": "*",
-    "babel-preset-react": "*",
-    "babel-preset-stage-0": "*",
-    "css-loader": "^0.23.0",
-    "eslint": "2.2.0",
-    "eslint-plugin-react": "^4.0.0",
-    "expose-loader": "^0.7.1",
-    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.9.1",
-    "file-loader": "^0.8.4",
-    "html-webpack-plugin": "^1.7.0",
-    "jest-cli": "^16.0.1",
-    "jsen": "^0.6.0",
-    "json-loader": "^0.5.3",
-    "less": "^2.5.3",
-    "less-loader": "^2.2.1",
-    "react-addons-test-utils": "^15.0.1",
-    "react-testutils-additions": "^15.1.0",
-    "rimraf": "^2.4.3",
-    "style-loader": "^0.13.0",
-    "url-loader": "^0.5.6",
-    "webpack": "^1.9.6",
-    "webpack-dev-server": "^1.14.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",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "babel-loader": "^8.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "create-react-class": "^15.6.3",
+    "cross-env": "^5.2.0",
+    "css-loader": "^6.7.3",
+    "d3-selection": "^1.3.2",
+    "esdoc": "^1.1.0",
+    "esdoc-custom-theme": "^1.4.2",
+    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
+    "esdoc-jsx-plugin": "^1.0.0",
+    "esdoc-publish-html-plugin": "^1.1.2",
+    "esdoc-react-plugin": "^1.0.1",
+    "esdoc-standard-plugin": "^1.0.0",
+    "eslint": "^5.6.0",
+    "eslint-plugin-react": "^7.11.1",
+    "expose-loader": "^3.1.0",
+    "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.0",
+    "jsen": "^0.6.6",
+    "json-loader": "^0.5.4",
+    "less": "^3.8.1",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "react-container-dimensions": "^1.4.1",
+    "react-testutils-additions": "^15.0.0",
+    "react-transition-group": "^2.5.0",
+    "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": "*",
-    "classnames": "^2.2.0",
-    "browserify-zlib": "ipfs/browserify-zlib",
-    "coriolis-data": "EDCD/coriolis-data",
-    "d3": "3.5.16",
-    "fbemitter": "^2.0.0",
-    "lodash": "^4.15.0",
+    "assert": "^1.5.0",
+    "auto-bind": "^5.0.1",
+    "base64url": "^3.0.1",
+    "browserify-zlib-next": "^1.0.1",
+    "buffer": "^5.7.0",
+    "classnames": "^2.2.6",
+    "constants-browserify": "^1.0.0",
+    "core-js": "^3.28.0",
+    "coriolis-data": "../coriolis-data",
+    "crypto-browserify": "^3.12.0",
+    "d3": "^5.7.0",
+    "detect-browser": "^3.0.1",
+    "fbemitter": "^2.1.1",
+    "https-browserify": "^1.0.0",
+    "lodash": "^4.17.11",
     "lz-string": "^1.4.4",
-    "react-number-editor": "Athanasius/react-number-editor.git#miggy",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
-    "superagent": "^1.4.0"
+    "os-browserify": "^0.3.0",
+    "pako": "^2.1.0",
+    "path-browserify": "^1.0.1",
+    "prop-types": "^15.6.2",
+    "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.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

@@ -0,0 +1,9 @@
+import nodeResolve from "@rollup/plugin-node-resolve";
+
+export default {
+	  entry: "d3-funcs.js",
+	  format: "umd",
+	  moduleName: "d3",
+	  plugins: [nodeResolve({jsnext: true})],
+	  dest: "d3.js"
+};

src/.htaccess

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

src/app/Coriolis.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Router from './Router';
+import { register } from 'register-service-worker';
 import { EventEmitter } from 'fbemitter';
 import { getLanguage } from './i18n/Language';
 import Persist from './stores/Persist';
 
+import Announcement from './components/Announcement';
 import Header from './components/Header';
 import Tooltip from './components/Tooltip';
 import ModalExport from './components/ModalExport';
@@ -11,8 +14,7 @@ import ModalHelp from './components/ModalHelp';
 import ModalImport from './components/ModalImport';
 import ModalPermalink from './components/ModalPermalink';
 import * as CompanionApiUtils from './utils/CompanionApiUtils';
-import { outfitURL } from './utils/UrlGenerators';
-
+import * as JournalUtils from './utils/JournalUtils';
 import AboutPage from './pages/AboutPage';
 import NotFoundPage from './pages/NotFoundPage';
 import OutfittingPage from './pages/OutfittingPage';
@@ -20,26 +22,27 @@ import ComparisonPage from './pages/ComparisonPage';
 import ShipyardPage from './pages/ShipyardPage';
 import ErrorDetails from './pages/ErrorDetails';
 
-const zlib = require('zlib');
+
+const zlib = require('pako');
+const request = require('superagent');
 
 /**
  * Coriolis App
  */
 export default class Coriolis extends React.Component {
-
   static childContextTypes = {
-    closeMenu: React.PropTypes.func.isRequired,
-    hideModal: React.PropTypes.func.isRequired,
-    language: React.PropTypes.object.isRequired,
-    noTouch: React.PropTypes.bool.isRequired,
-    onCommand: React.PropTypes.func.isRequired,
-    onWindowResize: React.PropTypes.func.isRequired,
-    openMenu: React.PropTypes.func.isRequired,
-    route: React.PropTypes.object.isRequired,
-    showModal: React.PropTypes.func.isRequired,
-    sizeRatio: React.PropTypes.number.isRequired,
-    termtip: React.PropTypes.func.isRequired,
-    tooltip: React.PropTypes.func.isRequired
+    closeMenu: PropTypes.func.isRequired,
+    hideModal: PropTypes.func.isRequired,
+    language: PropTypes.object.isRequired,
+    noTouch: PropTypes.bool.isRequired,
+    onCommand: PropTypes.func.isRequired,
+    onWindowResize: PropTypes.func.isRequired,
+    openMenu: PropTypes.func.isRequired,
+    route: PropTypes.object.isRequired,
+    showModal: PropTypes.func.isRequired,
+    sizeRatio: PropTypes.number.isRequired,
+    termtip: PropTypes.func.isRequired,
+    tooltip: PropTypes.func.isRequired
   };
 
   /**
@@ -65,11 +68,12 @@ export default class Coriolis extends React.Component {
     this.state = {
       noTouch: !('ontouchstart' in window || navigator.msMaxTouchPoints || navigator.maxTouchPoints),
       page: null,
+      // Announcements must have an expiry date in format "YYYY-MM-DDTHH:MM:SSZ"
+      announcements: [{expiry: "2024-11-30T00:00:00Z", text: "Mandalay added"}, {expiry: "2024-12-06T00:00:00Z", text: "Concord Cannon added"}, {expiry: "2024-12-08T00:00:00Z", text: "Boost Interval Feature added"}],
       language: getLanguage(Persist.getLangCode()),
       route: {},
       sizeRatio: Persist.getSizeRatio()
     };
-
     Router('', (r) => this._setPage(ShipyardPage, r));
     Router('/import?', (r) => this._importBuild(r));
     Router('/import/:data', (r) => this._importBuild(r));
@@ -90,14 +94,44 @@ export default class Coriolis extends React.Component {
   _importBuild(r) {
     try {
       // Need to decode and gunzip the data, then build the ship
-      const data = zlib.gunzipSync(new Buffer(r.params.data, 'base64'));
+      const data = zlib.inflate(new Buffer.from(r.params.data, 'base64'), { to: 'string' });
       const json = JSON.parse(data);
-      const ship = CompanionApiUtils.shipFromJson(json);
-      r.params.ship = ship.id;
-      r.params.code = ship.toString();
-      this._setPage(OutfittingPage, r);
+      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;
+
+      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);
+      }
     }
   }
 
@@ -165,20 +199,21 @@ export default class Coriolis extends React.Component {
       case 72:     // 'h'
         if (e.ctrlKey || e.metaKey) { // CTRL/CMD + h
           e.preventDefault();
-          this._showModal(<ModalHelp />);
+          this._showModal(<ModalHelp/>);
         }
         break;
       case 73:     // 'i'
         if (e.ctrlKey || e.metaKey) { // CTRL/CMD + i
           e.preventDefault();
-          this._showModal(<ModalImport />);
+          this._showModal(<ModalImport/>);
         }
         break;
-      case 76:  // 'l'
-        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + l
+      case 79:  // 'o'
+        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + o
           e.preventDefault();
           this._showModal(<ModalPermalink url={window.location.href}/>);
         }
+        break;
       case 83:  // 's'
         if (e.ctrlKey || e.metaKey) { // CTRL/CMD + s
           e.preventDefault();
@@ -192,7 +227,7 @@ export default class Coriolis extends React.Component {
    * @param  {React.Component} content Modal Content
    */
   _showModal(content) {
-    let modal = <div className='modal-bg' onClick={(e) => this._hideModal() }>{content}</div>;
+    let modal = <div className='modal-bg' onClick={(e) => this._hideModal()}>{content}</div>;
     this.setState({ modal });
   }
 
@@ -241,14 +276,19 @@ export default class Coriolis extends React.Component {
   /**
    * Show the term tip
    * @param  {string} term            Term or Phrase
-   * @param  {Object} opts            Options - dontCap, orientation (n,e,s,w)
+   * @param  {Object} opts            Options - dontCap, orientation (n,e,s,w) (can also be the event if no options supplied)
    * @param  {SyntheticEvent} event   Event
+   * @param  {SyntheticEvent} e2      Alternative location for synthetic event from charts (where 'Event' is actually a chart index)
    */
-  _termtip(term, opts, event) {
-    if (opts && opts.nativeEvent) { // Opts is a SyntheticEvent
+  _termtip(term, opts, event, e2) {
+    if (opts && opts.nativeEvent) { // Opts is the SyntheticEvent
       event = opts;
       opts = { cap: true };
     }
+    if (e2 instanceof Object && e2.nativeEvent) { // E2 is the SyntheticEvent
+      event = e2;
+    }
+
     this._tooltip(
       <div className={'cen' + (opts.cap ? ' cap' : '')}>{this.state.language.translate(term)}</div>,
       event.currentTarget.getBoundingClientRect(),
@@ -265,7 +305,7 @@ export default class Coriolis extends React.Component {
     return this.emitter.addListener('windowResize', listener);
   }
 
-    /**
+  /**
    * Add a listener to global commands such as save,
    * @param  {Function} listener Listener callback
    * @return {Object}            Subscription token
@@ -301,14 +341,50 @@ export default class Coriolis extends React.Component {
    */
   componentWillMount() {
     // Listen for appcache updated event, present refresh to update view
-    if (window.applicationCache) {
-      window.applicationCache.addEventListener('updateready', () => {
-        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
-          this.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
-        }
+    // Check that service workers are registered
+    if (navigator.storage && navigator.storage.persist) {
+      window.addEventListener('load', () => {
+        navigator.storage.persist().then(granted => {
+          if (granted)
+            console.log('Storage will not be cleared except by explicit user action');
+          else
+            console.log('Storage may be cleared by the UA under storage pressure.');
+        });
       });
     }
-
+    if ('serviceWorker' in navigator) {
+      // Your service-worker.js *must* be located at the top-level directory relative to your site.
+      // It won't be able to control pages unless it's located at the same level or higher than them.
+      // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
+      // See https://github.com/slightlyoff/ServiceWorker/issues/468
+      const self = this;
+      if (process.env.NODE_ENV === 'production') {
+        register('/service-worker.js', {
+          ready(registration) {
+            console.log('Service worker is active.');
+          },
+          registered(registration) {
+            console.log('Service worker has been registered.');
+          },
+          cached(registration) {
+            console.log('Content has been cached for offline use.');
+          },
+          updatefound(registration) {
+            console.log('New content is downloading.');
+          },
+          updated(registration) {
+            self.setState({ appCacheUpdate: true });
+            console.log('New content is available; please refresh.');
+          },
+          offline() {
+            console.log('No internet connection found. App is running in offline mode.');
+          },
+          error(error) {
+            console.error('Error during service worker registration:', error);
+          }
+        });
+      }
+    }
     window.onerror = this._onError.bind(this);
     window.addEventListener('resize', () => this.emitter.emit('windowResize'));
     document.getElementById('coriolis').addEventListener('scroll', () => this._tooltip());
@@ -325,15 +401,27 @@ 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 appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu} />
-      { this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) : <NotFoundPage/> }
-      { this.state.modal }
-      { this.state.tooltip }
+    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.text}/>)}</div>
+      {this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) :
+        <NotFoundPage/>}
+      {this.state.modal}
+      {this.state.tooltip}
       <footer>
+
         <div className="right cap">
-          <a href="https://github.com/EDCD/coriolis" target="_blank" title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
+          <a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer"
+             title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
+          <br/>
+          <a
+            href={'https://github.com/EDCD/coriolis/compare/edcd:develop@{' + window.CORIOLIS_DATE + '}...edcd:develop'}
+            target="_blank" rel="noopener noreferrer" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits
+            since last release
+            ({window.CORIOLIS_DATE})</a>
         </div>
       </footer>
     </div>;

src/app/Router.js

@@ -72,11 +72,21 @@ Router.go = function(path, state) {
   gaTrack(path);
   let ctx = new Context(path, state);
   Router.dispatch(ctx);
+
   if (!ctx.unhandled) {
     if (isStandAlone()) {
       Persist.setState(ctx);
     }
-    history.pushState(ctx.state, ctx.title, ctx.canonicalPath);
+    try {
+      history.pushState(ctx.state, ctx.title, ctx.canonicalPath);
+    } catch (ex) {
+      sessionStorage.setItem('__safari_history_fix', JSON.stringify({
+        state: ctx.state,
+        title: ctx.title,
+        path: ctx.canonicalPath
+      }));
+      location.reload();
+    }
   }
   return ctx;
 };
@@ -99,7 +109,16 @@ Router.replace = function(path, state, dispatch) {
   if (isStandAlone()) {
     Persist.setState(ctx);
   }
-  history.replaceState(ctx.state, ctx.title, ctx.canonicalPath);
+  try {
+    history.replaceState(ctx.state, ctx.title, ctx.canonicalPath);
+  } catch (ex) {
+    sessionStorage.setItem('__safari_history_fix', JSON.stringify({
+      state: ctx.state,
+      title: ctx.title,
+      path: ctx.canonicalPath
+    }));
+    location.reload();
+  }
   return ctx;
 };
 
@@ -239,9 +258,8 @@ Route.prototype.match = function(path, params) {
  * @param  {string} path Path to track
  */
 function gaTrack(path) {
-  if (window.ga) {
-    window.ga('send', 'pageview', path);
-  }
+  const _paq = window._paq || [];
+  _paq.push(['trackPageView']);
 }
 
 /**

src/app/components/ActiveLink.jsx

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

src/app/components/Announcement.jsx

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

src/app/components/AvailableModulesMenu.jsx

@@ -1,28 +1,146 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
+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';
 
 const PRESS_THRESHOLD = 500; // mouse/touch down threshold
 
+/*
+ * 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'],
+};
+
 /**
  * Available modules menu
  */
 export default class AvailableModulesMenu extends TranslatedComponent {
-
   static propTypes = {
-    modules: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]).isRequired,
-    onSelect: React.PropTypes.func.isRequired,
-    diffDetails: React.PropTypes.func,
-    m: React.PropTypes.object,
-    shipMass: React.PropTypes.number,
-    warning: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    shipMass: 0
+    modules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+    onSelect: PropTypes.func.isRequired,
+    diffDetails: PropTypes.func,
+    m: PropTypes.object,
+    ship: PropTypes.object.isRequired,
+    warning: PropTypes.func,
+    firstSlotId: PropTypes.string,
+    lastSlotId: PropTypes.string,
+    activeSlotId: PropTypes.string,
+    slotDiv: PropTypes.object
   };
 
   /**
@@ -33,7 +151,9 @@ export default class AvailableModulesMenu extends TranslatedComponent {
   constructor(props, context) {
     super(props);
     this._hideDiff = this._hideDiff.bind(this);
+    this._showSearch = this._showSearch.bind(this);
     this.state = this._initState(props, context);
+    this.slotItems = [];// Array to hold <li> refs.
   }
 
   /**
@@ -44,61 +164,181 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   _initState(props, context) {
     let translate = context.language.translate;
-    let { m, warning, shipMass, onSelect, modules } = props;
+    let { m, warning, onSelect, modules, ship } = props;
     let list, currentGroup;
+
     let buildGroup = this._buildGroup.bind(
       this,
+      ship,
       translate,
       m,
       warning,
-      shipMass - (m && m.mass ? m.mass : 0),
       (m, event) => {
         this._hideDiff(event);
         onSelect(m);
       }
     );
-
+    let fuzzy = [];
     if (modules instanceof Array) {
       list = buildGroup(modules[0].grp, modules);
     } else {
       list = [];
       // At present time slots with grouped options (Hardpoints and Internal) can be empty
-      list.push(<div className='empty-c upp' key='empty' onClick={onSelect.bind(null, null)} >{translate('empty')}</div>);
-      for (let g in modules) {
-        if (m && g == m.grp) {
-          list.push(<div ref={(elem) => this.groupElem = elem} key={g} className={'select-group cap'}>{translate(g)}</div>);
-        } else {
-          list.push(<div key={g} className={'select-group cap'}>{translate(g)}</div>);
-        }
+      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>);
+      }
 
-        list.push(buildGroup(g, modules[g]));
+      // 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);
+              }
+            }
+          }
+        }
       }
     }
+    let trackingFocus = false;
+    return { list, currentGroup, fuzzy, trackingFocus };
+  }
 
-    return { list, currentGroup };
+  /**
+   * Return Is expiremental capacity reached
+   * @return {boolean}      Is experimental capacity reached
+   */
+  _experimentalCapacityReached() {
+    const ship = this.props.ship;
+    const ews = ship.internal.filter(o => o.m && o.m.grp === 'ews');
+    let expCap;
+
+    if(ews.length < 1){
+      expCap = 4;
+    } else{
+      expCap = ews[0].m.class == 3 ? 5 : 6;
+    }
+
+    return expCap <= this.props.ship.hardpoints.filter(o => o.m && o.m.experimental).length;
   }
 
   /**
    * Generate React Components for Module Group
+   * @param  {Ship} ship            Ship the selection is for
    * @param  {Function} translate   Translate function
-   * @param  {Objecy} mountedModule Mounted Module
-   * @param  {Funciton} warningFunc Warning function
-   * @param  {number} mass          Mass
+   * @param  {Object} mountedModule Mounted Module
+   * @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(translate, mountedModule, warningFunc, mass, onSelect, grp, modules) {
-    let prevClass = null, prevRating = null;
+  _buildGroup(ship, translate, mountedModule, warningFunc, onSelect, grp, modules) {
+    let prevClass = null, prevRating = null, prevName;
     let elems = [];
 
     const sortedModules = modules.sort(this._moduleOrder);
 
+    // Calculate the number of items per class.  Used so we don't have long lists with only a few items in each row
+    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => {
+      count[cls] = ++count[cls] || 1;
+      return count;
+    }, {});
+    const itemsPerClass = Math.max.apply(null, Object.keys(tmp).map(key => tmp[key]));
+
+    let itemsOnThisRow = 0;
     for (let i = 0; i < sortedModules.length; i++) {
       let m = sortedModules[i];
+      // If m.grp is mh or mm, or m.symbol contains 'Missing' skip it
+      if (m.grp == 'mh' || m.grp == 'mm' || (typeof(m.symbol) !== 'undefined' && m.symbol.includes("Missing"))) {
+        // If this is a missing module, skip it
+        continue;
+      }
       let mount = null;
-      let disabled = m.maxmass && (mass + (m.mass ? m.mass : 0)) > m.maxmass;
+      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),
@@ -107,9 +347,21 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       });
       let eventHandlers;
 
-      if (disabled || active) {
-        eventHandlers = {};
+      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);
 
@@ -118,31 +370,46 @@ export default class AvailableModulesMenu extends TranslatedComponent {
           onTouchStart: this._touchStart.bind(this, showDiff),
           onTouchEnd: this._touchEnd.bind(this, select),
           onMouseLeave: this._hideDiff,
-          onClick: select
+          onClick: select,
+          onKeyDown: this._keyDown.bind(this, select),
+          onKeyUp: this._keyUp.bind(this, select)
         };
       }
 
-      switch(m.mount) {
-        case 'F': mount = <MountFixed className={'lg'} />; break;
-        case 'G': mount = <MountGimballed className={'lg'}/>; break;
-        case 'T': mount = <MountTurret className={'lg'}/>; break;
+      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 (i > 0 && sortedModules.length > 3 && m.class != prevClass && (m.rating != prevRating || m.mount) && m.grp != 'pa') {
-        elems.push(<br key={'b' + m.grp + i} />);
+      if (m.name && m.name === prevName) {
+        // elems.push(<br key={'b' + m.grp + i} />);
+        itemsOnThisRow = 0;
       }
-
+      if (itemsOnThisRow == 6 || i > 0 && sortedModules.length > 3 && itemsPerClass > 2 && m.class != prevClass && (m.rating != prevRating || m.mount)) {
+        elems.push(<br key={'b' + m.grp + i}/>);
+        itemsOnThisRow = 0;
+      }
+      let tbIdx = (classes.indexOf('disabled') < 0) ? 0 : undefined;
       elems.push(
-        <li key={m.id} className={classes} {...eventHandlers}>
+        <li key={m.id} data-id={m.id} className={classes} {...eventHandlers} tabIndex={tbIdx}
+            ref={slotItem => this.slotItems[m.id] = slotItem}>
           {mount}
           {(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}
         </li>
       );
+
+      itemsOnThisRow++;
       prevClass = m.class;
       prevRating = m.rating;
+      prevName = m.name;
     }
-
-    return <ul key={'modules' + grp} >{elems}</ul>;
+    return <ul key={'modules' + grp}>{elems}</ul>;
   }
 
   /**
@@ -159,6 +426,50 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     }
   }
 
+  /**
+   * Generate tooltip content for the difference between the
+   * mounted module and the hovered modules
+   */
+  _showSearch() {
+    if (this.props.modules instanceof Array) {
+      return;
+    }
+    const mountedModule = this.props.m;
+    return (
+      <FuzzySearch
+        list={this.state.fuzzy}
+        keys={['grp', 'name']}
+        tokenize={true}
+        className={'input'}
+        width={'100%'}
+        style={{ padding: 0 }}
+        onSelect={e => this.props.onSelect.bind(null, e.m)()}
+        resultsTemplate={(props, state, styles, clickHandler) => {
+          return state.results.map((val, i) => {
+            let disabled;
+
+            if(val.m.experimental && (!mountedModule || !mountedModule.experimental)) {
+              disabled = this._experimentalCapacityReached();
+            } else{
+              disabled = false;
+            }
+            const handler = disabled ? null : () => clickHandler(i);
+
+            return (
+              <div
+                key={i}
+                className={cn('lc', {disabled})}
+                onClick={handler}
+              >
+                {val.name}
+              </div>
+            );
+          });
+        }}
+      />
+    );
+  }
+
   /**
    * Mouse over diff handler
    * @param  {Function} showDiff diff tooltip callback
@@ -193,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
@@ -232,12 +578,21 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         return 1;
       }
     }
-    // Rating ordered from lowest (E) to highest (A)
+    // 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;
+      return -1;
     }
     if (a.rating > b.rating) {
-      return -1;
+      return 1;
     }
     // Do not attempt to order by name at this point, as that mucks up the order of armour
     return 0;
@@ -248,7 +603,25 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   componentDidMount() {
     if (this.groupElem) {  // Scroll to currently selected group
-      findDOMNode(this).scrollTop = this.groupElem.offsetTop;
+      this.node.scrollTop = this.groupElem.offsetTop;
+    }
+    /**
+     * Set focus on active or first slot element, if applicable.
+     */
+    if (this.slotItems[this.activeSlotId]) {
+      this.slotItems[this.activeSlotId].focus();
+    } else if (this.slotItems[this.firstSlotId]) {
+      this.slotItems[this.firstSlotId].focus();
+    }
+  }
+
+  /**
+   * Handle focus if the component updates
+   *
+   */
+  componentWillUnmount() {
+    if (this.props.slotDiv) {
+      this.props.slotDiv.focus();
     }
   }
 
@@ -267,15 +640,15 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   render() {
     return (
-      <div
-          className={cn('select', this.props.className)}
-          onScroll={this._hideDiff}
-          onClick={(e) => e.stopPropagation() }
-          onContextMenu={stopCtxPropagation}
+      <div ref={node => this.node = node}
+           className={cn('select', this.props.className)}
+           onScroll={this._hideDiff}
+           onClick={(e) => e.stopPropagation()}
+           onContextMenu={stopCtxPropagation}
       >
+        {this._showSearch()}
         {this.state.list}
       </div>
     );
   }
-
 }

src/app/components/BarChart.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import d3 from 'd3';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
 import TranslatedComponent from './TranslatedComponent';
 
 const MARGIN = { top: 15, right: 20, bottom: 40, left: 150 };
@@ -37,24 +38,23 @@ function insertLinebreaks(d) {
  * Bar Chart
  */
 export default class BarChart extends TranslatedComponent {
-
   static defaultProps = {
     colors: ['#7b6888', '#6b486b', '#3182bd', '#a05d56', '#d0743c'],
     labels: null,
     unit: ''
   };
 
-  static PropTypes = {
-    colors: React.PropTypes.array,
-    data: React.PropTypes.array.isRequired,
-    desc: React.PropTypes.bool,
-    format: React.PropTypes.string.isRequired,
-    labels: React.PropTypes.array,
-    predicate: React.PropTypes.string,
-    properties: React.PropTypes.array,
-    title: React.PropTypes.string.isRequired,
-    unit: React.PropTypes.string.isRequired,
-    width: React.PropTypes.number.isRequired
+  static propTypes = {
+    colors: PropTypes.array,
+    data: PropTypes.array.isRequired,
+    desc: PropTypes.bool,
+    format: PropTypes.string.isRequired,
+    labels: PropTypes.array,
+    predicate: PropTypes.string,
+    properties: PropTypes.array,
+    title: PropTypes.string.isRequired,
+    unit: PropTypes.string.isRequired,
+    width: PropTypes.number.isRequired
   };
 
   /**
@@ -68,13 +68,13 @@ export default class BarChart extends TranslatedComponent {
     this._updateDimensions = this._updateDimensions.bind(this);
     this._hideTip = this._hideTip.bind(this);
 
-    let scale = d3.scale.linear();
-    let y0 = d3.scale.ordinal();
-    let y1 = d3.scale.ordinal();
+    let scale = d3.scaleLinear();
+    let y0 = d3.scaleBand();
+    let y1 = d3.scaleBand();
 
-    this.xAxis = d3.svg.axis().scale(scale).ticks(5).outerTickSize(0).orient('bottom').tickFormat(context.language.formats.s2);
-    this.yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient('left');
-    this.state = { scale, y0, y1, color: d3.scale.ordinal().range(props.colors) };
+    this.xAxis = d3.axisBottom(scale).ticks(5).tickSizeOuter(0).tickFormat(context.language.formats.s2);
+    this.yAxis = d3.axisLeft(y0).tickSizeOuter(0);
+    this.state = { scale, y0, y1, color: d3.scaleOrdinal().range(props.colors) };
   }
 
   /**
@@ -131,8 +131,8 @@ export default class BarChart extends TranslatedComponent {
     let max = data.reduce((max, build) => (properties.reduce(((m, p) => (m > build[p] ? m : build[p])), max)), 0);
 
     this.state.scale.range([0, innerWidth]).domain([0, max]);
-    this.state.y0.domain(data.map(bName)).rangeRoundBands([0, innerHeight], 0.3);
-    this.state.y1.domain(properties).rangeRoundBands([0, this.state.y0.rangeBand()]);
+    this.state.y0.domain(data.map(bName)).range([0, innerHeight], 0.3).padding(0.4);
+    this.state.y1.domain(properties).range([0, this.state.y0.bandwidth()]).padding(0.1);
 
     this.setState({
       barHeight,
@@ -192,7 +192,7 @@ export default class BarChart extends TranslatedComponent {
             x={0}
             y={y1(p)}
             width={scale(build[p])}
-            height={y1.rangeBand()}
+            height={y1.bandwidth()}
             fill={color(p)}
             onMouseOver={this._showTip.bind(this, build, p, propIndex)}
             onMouseOut={this._hideTip}

src/app/components/Boost.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+
+/**
+ * Boost displays a boost button that toggles bosot
+ * Requires an onChange() function of the form onChange(boost) which is triggered whenever the boost changes.
+ */
+export default class Boost extends TranslatedComponent {
+  static propTypes = {
+    marker: PropTypes.string.isRequired,
+    ship: PropTypes.object.isRequired,
+    boost: PropTypes.bool.isRequired,
+    onChange: PropTypes.func.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+    const { ship, boost } = props;
+
+    this._keyDown = this._keyDown.bind(this);
+    this._toggleBoost = this._toggleBoost.bind(this);
+  }
+
+  /**
+   * Add listeners after mounting
+   */
+  componentDidMount() {
+    document.addEventListener('keydown', this._keyDown);
+  }
+
+  /**
+   * Remove listeners before unmounting
+   */
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this._keyDown);
+  }
+
+  /**
+   * Handle Key Down
+   * @param  {Event} e  Keyboard Event
+   */
+  _keyDown(e) {
+    if (e.ctrlKey || e.metaKey) { // CTRL/CMD
+      switch (e.keyCode) {
+        case 66:     // b == boost
+          if (this.props.ship.canBoost()) {
+            e.preventDefault();
+            this._toggleBoost();
+          }
+          break;
+      }
+    }
+  }
+
+  /**
+   * Toggle the boost feature
+   */
+  _toggleBoost() {
+    this.props.onChange(!this.props.boost);
+  }
+
+  /**
+   * Render boost
+   * @return {React.Component} contents
+   */
+  render() {
+    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={boost ? 'selected' : null} onClick={this._toggleBoost}>{translate('boost')}</button>
+      </span>
+    );
+  }
+}

src/app/components/Cargo.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import Slider from '../components/Slider';
+
+/**
+ * Cargo slider
+ * Requires an onChange() function of the form onChange(cargo), providing the cargo in tonnes, which is triggered on cargo level change
+ */
+export default class Cargo extends TranslatedComponent {
+  static propTypes = {
+    cargo: PropTypes.number.isRequired,
+    cargoCapacity: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    this._cargoChange = this._cargoChange.bind(this);
+  }
+
+  /**
+   * Update cargo level
+   * @param  {number} cargoLevel percentage level from 0 to 1
+   */
+  _cargoChange(cargoLevel) {
+    const { cargo, cargoCapacity } = this.props;
+    if (cargoCapacity > 0) {
+      // We round the cargo to whole number of tonnes
+      const newCargo =  Math.round(cargoLevel * cargoCapacity);
+      if (newCargo != cargo) {
+        this.props.onChange(newCargo);
+      }
+    }
+  }
+
+  /**
+   * Render cargo slider
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { cargo, cargoCapacity } = this.props;
+
+    return (
+      <span>
+        <h3>{translate('cargo carried')}: {formats.int(cargo)}{units.T}</h3>
+        <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+          <tbody >
+            <tr>
+              <td>
+                <Slider
+                  axis={true}
+                  onChange={this._cargoChange}
+                  axisUnit={translate('T')}
+                  percent={cargo / cargoCapacity}
+                  max={cargoCapacity}
+                  scale={sizeRatio}
+                  onResize={onWindowResize}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </span>
+    );
+  }
+}

src/app/components/ComparisonTable.jsx

@@ -1,22 +1,21 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import Link from './Link';
 import cn from 'classnames';
 import { outfitURL } from '../utils/UrlGenerators';
-import { SizeMap } from '../shipyard/Constants';
 
 
 /**
  * Comparison Table
  */
 export default class ComparisonTable extends TranslatedComponent {
-
   static propTypes = {
-    facets: React.PropTypes.array.isRequired,
-    builds: React.PropTypes.array.isRequired,
-    onSort: React.PropTypes.func.isRequired,
-    predicate: React.PropTypes.string.isRequired, // Used only to test again prop changes for shouldRender
-    desc: React.PropTypes.oneOfType([React.PropTypes.bool.isRequired, React.PropTypes.number.isRequired]), // Used only to test again prop changes for shouldRender
+    facets: PropTypes.array.isRequired,
+    builds: PropTypes.array.isRequired,
+    onSort: PropTypes.func.isRequired,
+    predicate: PropTypes.string.isRequired, // Used only to test again prop changes for shouldRender
+    desc: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.number.isRequired]), // Used only to test again prop changes for shouldRender
   };
 
   /**
@@ -72,21 +71,22 @@ export default class ComparisonTable extends TranslatedComponent {
    * @return {React.Component}    Table row
    */
   _buildRow(build, facets, formats, units) {
-    let url = outfitURL(build.id, build.toString(), build.buildName);
-    let cells = [
-      <td key='s' className='tl'><Link href={url}>{build.name}</Link></td>,
-      <td key='bn' className='tl'><Link href={url}>{build.buildName}</Link></td>
-    ];
+    if (build && build.id && build.buildName) {
+      let url = outfitURL(build.id, build.toString(), build.buildName);
+      let cells = [
+        <td key='s' className='tl'><Link href={url}>{build.name}</Link></td>,
+        <td key='bn' className='tl'><Link href={url}>{build.buildName}</Link></td>
+      ];
 
-    for (let f of facets) {
-      if (f.active) {
-        for (let p of f.props) {
-          cells.push(<td key={p}>{formats[f.fmt](build[p])}{f.unit ? units[f.unit] : null}</td>);
+      for (let f of facets) {
+        if (f.active) {
+          for (let p of f.props) {
+            cells.push(<td key={p}>{formats[f.fmt](build[p])}{f.unit ? units[f.unit] : null}</td>);
+          }
         }
       }
+      return <tr key={build.id + build.buildName} className='tr'>{cells}</tr>;
     }
-
-    return <tr key={build.id + build.buildName} className='tr'>{cells}</tr>;
   }
 
   /**

src/app/components/CostSection.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Ships } from 'coriolis-data/dist';
 import Persist from '../stores/Persist';
@@ -6,16 +7,16 @@ import Ship from '../shipyard/Ship';
 import { Insurance } from '../shipyard/Constants';
 import { slotName, slotComparator } from '../utils/SlotFunctions';
 import TranslatedComponent from './TranslatedComponent';
+import { ShoppingIcon } from '../components/SvgIcons';
 
 /**
  * Cost Section
  */
 export default class CostSection extends TranslatedComponent {
-
-  static PropTypes = {
-    ship: React.PropTypes.object.isRequired,
-    code: React.PropTypes.string.isRequired,
-    buildName: React.PropTypes.string
+  static propTypes = {
+    ship: PropTypes.object.isRequired,
+    code: PropTypes.string.isRequired,
+    buildName: PropTypes.string
   };
 
   /**
@@ -31,6 +32,7 @@ export default class CostSection extends TranslatedComponent {
     this._buildRetrofitShip = this._buildRetrofitShip.bind(this);
     this._onBaseRetrofitChange = this._onBaseRetrofitChange.bind(this);
     this._defaultRetrofitName = this._defaultRetrofitName.bind(this);
+    this._eddbShoppingList = this._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);
@@ -304,8 +306,8 @@ export default class CostSection extends TranslatedComponent {
           <tr className='main'>
             <th colSpan='2' className='sortable le' onClick={this._sortCostBy.bind(this,'m')}>
               {translate('module')}
-              {shipDiscount ? <u className='cap optional-hide' style={{ marginLeft: '0.5em' }}>{`[${translate('ship')} -${formats.pct(shipDiscount)}]`}</u> : null}
-              {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._sortCostBy.bind(this, 'cr')} >{translate('credits')}</th>
           </tr>
@@ -325,12 +327,27 @@ export default class CostSection extends TranslatedComponent {
     </div>;
   }
 
+  /**
+   * Open up a window for inara with a shopping list of our retrofit components
+   */
+  _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);
+
+    // Open up the relevant URL
+    window.open('https://inara.cz/inapi/corisearch.php?m=' + modIds.join(','));
+  }
+
   /**
    * Render the retofit tab
    * @return {React.Component} Tab contents
    */
   _retrofitTab() {
     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>];
@@ -343,11 +360,11 @@ export default class CostSection extends TranslatedComponent {
       for (let i = 0, l = retrofitCosts.length; i < l; i++) {
         let item = retrofitCosts[i];
         rows.push(<tr key={i} className={cn('highlight', { disabled: !item.retroItem.incCost })} onClick={this._toggleRetrofitCost.bind(this, item)}>
-            <td className='ptr' style={{ width: '1em' }}>{item.sellClassRating}</td>
-            <td className='le ptr shorten cap'>{translate(item.sellName)}</td>
-            <td className='ptr' style={{ width: '1em' }}>{item.buyClassRating}</td>
-            <td className='le ptr shorten cap'>{translate(item.buyName)}</td>
-            <td colSpan='2' className={cn('ri ptr', item.retroItem.incCost ? item.netCost > 0 ? 'warning' : 'secondary-disabled' : 'disabled')}>{int(item.netCost)}{units.CR}</td>
+          <td className='ptr' style={{ width: '1em' }}>{item.sellClassRating}</td>
+          <td className='le ptr shorten cap'>{translate(item.sellName)}</td>
+          <td className='ptr' style={{ width: '1em' }}>{item.buyClassRating}</td>
+          <td className='le ptr shorten cap'>{translate(item.buyName)}</td>
+          <td colSpan='2' className={cn('ri ptr', item.retroItem.incCost ? item.netCost > 0 ? 'warning' : 'secondary-disabled' : 'disabled')}>{int(item.netCost)}{units.CR}</td>
         </tr>);
       }
     } else {
@@ -370,7 +387,8 @@ export default class CostSection extends TranslatedComponent {
           <tbody>
             {rows}
             <tr className='ri'>
-              <td colSpan='4' 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>
@@ -403,6 +421,8 @@ export default class CostSection extends TranslatedComponent {
     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,
@@ -424,6 +444,8 @@ export default class CostSection extends TranslatedComponent {
         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;
@@ -507,7 +529,7 @@ export default class CostSection extends TranslatedComponent {
               scoop = true;
               break;
             case 'scb':
-              q = slotGroup[i].m.getCells();
+              q = slotGroup[i].m.getAmmo() + 1;
               break;
             case 'am':
               q = slotGroup[i].m.getAmmo();

src/app/components/DamageDealt.jsx

@@ -1,344 +0,0 @@
-import React from 'react';
-import TranslatedComponent from './TranslatedComponent';
-import { Ships } from 'coriolis-data/dist';
-import ShipSelector from './ShipSelector';
-import { nameComparator } from '../utils/SlotFunctions';
-import { CollapseSection, ExpandSection, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
-import Slider from '../components/Slider';
-
-/**
- * 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
- */
-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);
-  };
-}
-
-/**
- * Damage against a selected ship
- */
-export default class DamageDealt extends TranslatedComponent {
-  static PropTypes = {
-    ship: React.PropTypes.object.isRequired,
-    code: React.PropTypes.string.isRequired
-  };
-
-  static DEFAULT_AGAINST = Ships['anaconda'];
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-
-    this._sort = this._sort.bind(this);
-    this._onShipChange = this._onShipChange.bind(this);
-    this._onCollapseExpand = this._onCollapseExpand.bind(this);
-
-    this.state = {
-      predicate: 'n',
-      desc: true,
-      against: DamageDealt.DEFAULT_AGAINST,
-      expanded: false,
-      range: 0.1667,
-      maxRange: 6000
-    };
-  }
-
-  /**
-   * Set the initial weapons state
-   */
-  componentWillMount() {
-    const data = this._calcWeapons(this.props.ship, this.state.against, this.state.range * this.state.maxRange);
-    this.setState({ weapons: data.weapons, totals: data.totals });
-  }
-
-  /**
-   * 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.code != this.props.code) {
-      const data = this._calcWeapons(this.props.ship, this.state.against, this.state.range * this.state.maxRange);
-      this.setState({ weapons: data.weapons, totals: data.totals });
-    }
-    return true;
-  }
-
-  /**
-   * Calculate the damage dealt by a ship
-   * @param  {Object} ship        The ship which will deal the damage 
-   * @param  {Object} against     The ship against which damage will be dealt
-   * @param  {Object} range       The engagement range
-   * @return {boolean}            Returns the per-weapon damage
-   */
-  _calcWeapons(ship, against, range) {
-    // Tidy up the range so that it's to 4 decimal places
-    range = Math.round(10000 * range) / 10000;
-
-    // Track totals
-    let totals = {};
-    totals.effectivenessShields = 0;
-    totals.effectiveDpsShields = 0;
-    totals.effectiveSDpsShields = 0;
-    totals.effectivenessHull = 0;
-    totals.effectiveDpsHull = 0;
-    totals.effectiveSDpsHull = 0;
-    let totalDps = 0;
-
-    let weapons = [];
-    for (let i = 0; i < ship.hardpoints.length; i++) {
-      if (ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
-        const m = ship.hardpoints[i].m;
-        if (m.getDamage() && m.grp !== 'po') {
-          let dropoff = 1;
-          if (m.getFalloff()) {
-            // Calculate the dropoff % due to range
-            if (range > m.getRange()) {
-              // Weapon is out of range
-              dropoff = 0;
-            } else {
-              const falloff = m.getFalloff();
-              if (range > falloff) {
-                const dropoffRange = m.getRange() - falloff;
-                // Assuming straight-line falloff
-                dropoff = 1 - (range - falloff) / dropoffRange;
-              }
-            }
-          }
-          const classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
-          const effectivenessShields = dropoff;
-          const effectiveDpsShields = m.getDps() * effectivenessShields * dropoff;
-          const effectiveSDpsShields = (m.getClip() ?  (m.getClip() * m.getDps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload()) * effectivenessShields : effectiveDpsShields) * dropoff;
-          const effectivenessHull = (m.getPiercing() >= against.properties.hardness ? 1 : m.getPiercing() / against.properties.hardness) * dropoff;
-          const effectiveDpsHull = m.getDps() * effectivenessHull * dropoff;
-          const effectiveSDpsHull = (m.getClip() ?  (m.getClip() * m.getDps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload()) * effectivenessHull : effectiveDpsHull) * dropoff;
-          totals.effectiveDpsShields += effectiveDpsShields;
-          totals.effectiveSDpsShields += effectiveSDpsShields;
-          totals.effectiveDpsHull += effectiveDpsHull;
-          totals.effectiveSDpsHull += effectiveSDpsHull;
-          totalDps += m.getDps();
-
-          weapons.push({ id: i,
-                         mount: m.mount,
-                         name: m.name || m.grp,
-                         classRating,
-                         effectiveDpsShields,
-                         effectiveSDpsShields,
-                         effectivenessShields,
-                         effectiveDpsHull,
-                         effectiveSDpsHull,
-                         effectivenessHull });
-        }
-      }
-    }
-    totals.effectivenessShields = totalDps == 0 ? 0 : totals.effectiveDpsShields / totalDps;
-    totals.effectivenessHull = totalDps == 0 ? 0 : totals.effectiveDpsHull / totalDps;
-    
-    return { weapons, totals };
-  }
-
-  /**
-   * Triggered when the collapse or expand icons are clicked
-   */
-  _onCollapseExpand() {
-    this.setState({ expanded: !this.state.expanded });
-  }
-
-  /**
-   * Triggered when the ship we compare against changes
-   * @param {string} s the new ship ID
-   */
-  _onShipChange(s) {
-    const against = Ships[s];
-    const data = this._calcWeapons(this.props.ship, against, this.state.range * this.state.maxRange);
-    this.setState({ against, weapons: data.weapons, totals: data.totals });
-  }
-
-  /**
-   * Set the sort order and sort
-   * @param  {string} predicate Sort predicate
-   */
-  _sortOrder(predicate) {
-    let desc = this.state.desc;
-
-    if (predicate == this.state.predicate) {
-      desc = !desc;
-    } else {
-      desc = true;
-    }
-
-    this._sort(this.props.ship, predicate, desc);
-    this.setState({ predicate, desc });
-  }
-
-  /**
-   * Sorts the weapon list
-   * @param  {Ship} ship          Ship instance
-   * @param  {string} predicate   Sort predicate
-   * @param  {Boolean} desc       Sort order descending
-   */
-  _sort(ship, predicate, desc) {
-    let comp = weaponComparator.bind(null, this.context.language.translate);
-
-    switch (predicate) {
-      case 'n': comp = comp(null, desc); break;
-      case 'edpss': comp = comp((a, b) => a.effectiveDpsShields - b.effectiveDpsShields, desc); break;
-      case 'esdpss': comp = comp((a, b) => a.effectiveSDpsShields - b.effectiveSDpsShields, desc); break;
-      case 'es': comp = comp((a, b) => a.effectivenessShields - b.effectivenessShields, desc); break;
-      case 'edpsh': comp = comp((a, b) => a.effectiveDpsHull - b.effectiveDpsHull, desc); break;
-      case 'esdpsh': comp = comp((a, b) => a.effectiveSDpsHull - b.effectiveSDpsHull, desc); break;
-      case 'eh': comp = comp((a, b) => a.effectivenessHull - b.effectivenessHull, desc); break;
-    }
-
-    this.state.weapons.sort(comp);
-  }
-
-  /**
-   * Render individual rows for hardpoints
-   * @param  {Function} translate   Translate function
-   * @param  {Object}   formats     Localised formats map
-   * @return {array}                The individual rows
-   *
-   */
-  _renderRows(translate, formats) {
-    const { termtip, tooltip } = this.context;
-
-    let rows = [];
-
-    if (this.state.weapons) {
-      for (let i = 0; i < this.state.weapons.length; i++) {
-        const weapon = this.state.weapons[i];
-
-        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)}
-                    </td>
-                    <td className='ri'>{formats.round1(weapon.effectiveDpsShields)}</td>
-                    <td className='ri'>{formats.round1(weapon.effectiveSDpsShields)}</td>
-                    <td className='ri'>{formats.pct(weapon.effectivenessShields)}</td>
-                    <td className='ri'>{formats.round1(weapon.effectiveDpsHull)}</td>
-                    <td className='ri'>{formats.round1(weapon.effectiveSDpsHull)}</td>
-                    <td className='ri'>{formats.pct(weapon.effectivenessHull)}</td>
-                  </tr>);
-      }
-    }
-
-    return rows;
-  }
-
-  /**
-   * Update current range
-   * @param  {number} range Range 0-1
-   */
-  _rangeChange(range) {
-    const data = this._calcWeapons(this.props.ship, this.state.against, this.state.range * this.state.maxRange);
-    this.setState({ range, weapons: data.weapons, totals: data.totals });
-  }
-
-  /**
-   * Render damage dealt
-   * @return {React.Component} contents
-   */
-  render() {
-    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
-    const { formats, translate, units } = language;
-    const { expanded, maxRange, range, totals } = this.state;
-
-    const sortOrder = this._sortOrder;
-    const onCollapseExpand = this._onCollapseExpand;
-
-    return (
-      <span>
-        <h1>{translate('damage dealt against')} {expanded ? <span onClick={onCollapseExpand}><CollapseSection className='summary'/></span> : <span onClick={onCollapseExpand}><ExpandSection className='summary'/></span>}</h1>
-        {expanded ?  <span>
-        <ShipSelector initial={this.state.against} currentMenu={this.props.currentMenu} onChange={this._onShipChange} />
-        <table className='summary' style={{ width: '100%' }}>
-          <thead>
-            <tr className='main'>
-              <th rowSpan='2' className='sortable' onClick={sortOrder.bind(this, 'n')}>{translate('weapon')}</th>
-              <th colSpan='3'>{translate('shields')}</th>
-              <th colSpan='3'>{translate('armour')}</th>
-            </tr>
-            <tr>
-              <th className='lft sortable' onClick={sortOrder.bind(this, 'edpss')}>{translate('effective dps')}</th>
-              <th className='sortable' onClick={sortOrder.bind(this, 'esdpss')}>{translate('effective sdps')}</th>
-              <th className='sortable' onClick={sortOrder.bind(this, 'es')}>{translate('effectiveness')}</th>
-              <th className='lft sortable' onClick={sortOrder.bind(this, 'edpsh')}>{translate('effective dps')}</th>
-              <th className='sortable' onClick={sortOrder.bind(this, 'esdpsh')}>{translate('effective sdps')}</th>
-              <th className='sortable' onClick={sortOrder.bind(this, 'eh')}>{translate('effectiveness')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {this._renderRows(translate, formats)}
-          </tbody>
-          <tfoot>
-            <tr className='main'>
-              <td className='ri'><i>{translate('total')}</i></td>
-              <td className='ri'><i>{formats.round1(totals.effectiveDpsShields)}</i></td>
-              <td className='ri'><i>{formats.round1(totals.effectiveSDpsShields)}</i></td>
-              <td className='ri'><i>{formats.pct(totals.effectivenessShields)}</i></td>
-              <td className='ri'><i>{formats.round1(totals.effectiveDpsHull)}</i></td>
-              <td className='ri'><i>{formats.round1(totals.effectiveSDpsHull)}</i></td>
-              <td className='ri'><i>{formats.pct(totals.effectivenessHull)}</i></td>
-            </tr>
-          </tfoot>
-        </table>
-        <table style={{ width: '80%', lineHeight: '1em', backgroundColor: 'transparent', margin: 'auto' }}>
-          <tbody >
-            <tr>
-              <td style={{ verticalAlign: 'top', padding: 0, width: '2.5em' }} onMouseEnter={termtip.bind(null, 'PHRASE_ENGAGEMENT_RANGE')} onMouseLeave={tooltip.bind(null, null)}>{translate('engagement range')}</td>
-              <td>
-                <Slider
-                  axis={true}
-                  onChange={this._rangeChange.bind(this)}
-                  axisUnit={translate('m')}
-                  percent={range}
-                  max={maxRange}
-                  scale={sizeRatio}
-                  onResize={onWindowResize}
-                />
-              </td>
-              <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
-                {formats.f2(range * maxRange / 1000)}{units.km}
-              </td>
-            </tr>
-          </tbody>
-        </table></span> : null }
-      </span>
-    );
-  }
-}

src/app/components/DamageReceived.jsx

@@ -1,327 +0,0 @@
-import React from 'react';
-import TranslatedComponent from './TranslatedComponent';
-import { Modules } from 'coriolis-data/dist';
-import { nameComparator } from '../utils/SlotFunctions';
-import { CollapseSection, ExpandSection, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
-import Module from '../shipyard/Module';
-import Slider from '../components/Slider';
-
-/**
- * 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
- */
-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);
-  };
-}
-
-/**
- * Damage received by a selected ship
- */
-export default class DamageReceived extends TranslatedComponent {
-  static PropTypes = {
-    ship: React.PropTypes.object.isRequired,
-    code: React.PropTypes.string.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-
-    this._sort = this._sort.bind(this);
-    this._onCollapseExpand = this._onCollapseExpand.bind(this);
-
-    this.state = {
-      predicate: 'n',
-      desc: true,
-      expanded: false,
-      range: 0.1667,
-      maxRange: 6000
-    };
-  }
-
-  /**
-   * Set the initial weapons state
-   */
-  componentWillMount() {
-    this.setState({ weapons: this._calcWeapons(this.props.ship, this.state.range * this.state.maxRange) });
-  }
-
-  /**
-   * Set the updated weapons state
-   * @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.code != this.props.code) {
-      this.setState({ weapons: this._calcWeapons(nextProps.ship, this.state.range * this.state.maxRange) });
-    }
-    return true;
-  }
-
-  /**
-   * Calculate the damage received by a ship
-   * @param  {Object} ship        The ship which will receive the damage
-   * @param  {Object} range       The engagement range
-   * @return {boolean}            Returns the per-weapon damage
-   */
-  _calcWeapons(ship, range) {
-    // Tidy up the range so that it's to 4 decimal places
-    range = Math.round(10000 * range) / 10000;
-
-    let weapons = [];
-    for (let grp in Modules.hardpoints) {
-      if (Modules.hardpoints[grp][0].damage && Modules.hardpoints[grp][0].damagedist) {
-        for (let mId in Modules.hardpoints[grp]) {
-          const m = new Module(Modules.hardpoints[grp][mId]);
-          let dropoff = 1;
-          if (m.getFalloff()) {
-            // Calculate the dropoff % due to range
-            if (range > m.getRange()) {
-              // Weapon is out of range
-              dropoff = 0;
-            } else {
-              const falloff = m.getFalloff();
-              if (range > falloff) {
-                const dropoffRange = m.getRange() - falloff;
-                // Assuming straight-line falloff
-                dropoff = 1 - (range - falloff) / dropoffRange;
-              }
-            }
-          }
-          const classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
-
-          // Base DPS
-          const baseDps = m.getDps() * dropoff;
-          const baseSDps = m.getClip() ?  ((m.getClip() * baseDps / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload())) * dropoff : baseDps;
-
-          // Effective DPS taking in to account shield resistance
-          let effectivenessShields = 0;
-          if (m.getDamageDist().E) {
-            effectivenessShields += m.getDamageDist().E * (1 - ship.shieldExplRes);
-          }
-          if (m.getDamageDist().K) {
-            effectivenessShields += m.getDamageDist().K * (1 - ship.shieldKinRes);
-          }
-          if (m.getDamageDist().T) {
-            effectivenessShields += m.getDamageDist().T * (1 - ship.shieldThermRes);
-          }
-          if (m.getDamageDist().A) {
-            effectivenessShields += m.getDamageDist().A;
-          }
-          effectivenessShields *= dropoff;
-          const effectiveDpsShields = baseDps * effectivenessShields;
-          const effectiveSDpsShields = baseSDps * effectivenessShields;
-
-          // Effective DPS taking in to account hull hardness and resistance
-          let effectivenessHull = 0;
-          if (m.getDamageDist().E) {
-            effectivenessHull += m.getDamageDist().E * (1 - ship.hullExplRes);
-          }
-          if (m.getDamageDist().K) {
-            effectivenessHull += m.getDamageDist().K * (1 - ship.hullKinRes);
-          }
-          if (m.getDamageDist().T) {
-            effectivenessHull += m.getDamageDist().T * (1 - ship.hullThermRes);
-          }
-          if (m.getDamageDist().A) {
-            effectivenessHull += m.getDamageDist().A;
-          }
-          effectivenessHull *= Math.min(m.getPiercing() / ship.hardness, 1) * dropoff;
-          const effectiveDpsHull = baseDps * effectivenessHull;
-          const effectiveSDpsHull = baseSDps * effectivenessHull;
-
-          weapons.push({ id: m.id,
-                         classRating,
-                         name: m.name || m.grp,
-                         mount: m.mount,
-                         effectiveDpsShields,
-                         effectiveSDpsShields,
-                         effectivenessShields,
-                         effectiveDpsHull,
-                         effectiveSDpsHull,
-                         effectivenessHull });
-        }
-      }
-    }
-
-    return weapons;
-  }
-
-  /**
-   * Triggered when the collapse or expand icons are clicked
-   */
-  _onCollapseExpand() {
-    this.setState({ expanded: !this.state.expanded });
-  }
-
-  /**
-   * Set the sort order and sort
-   * @param  {string} predicate Sort predicate
-   */
-  _sortOrder(predicate) {
-    let desc = this.state.desc;
-
-    if (predicate == this.state.predicate) {
-      desc = !desc;
-    } else {
-      desc = true;
-    }
-
-    this._sort(this.props.ship, predicate, desc);
-    this.setState({ predicate, desc });
-  }
-
-  /**
-   * Sorts the weapon list
-   * @param  {Ship} ship          Ship instance
-   * @param  {string} predicate   Sort predicate
-   * @param  {Boolean} desc       Sort order descending
-   */
-  _sort(ship, predicate, desc) {
-    let comp = weaponComparator.bind(null, this.context.language.translate);
-
-    switch (predicate) {
-      case 'n': comp = comp(null, desc); break;
-      case 'edpss': comp = comp((a, b) => a.effectiveDpsShields - b.effectiveDpsShields, desc); break;
-      case 'esdpss': comp = comp((a, b) => a.effectiveSDpsShields - b.effectiveSDpsShields, desc); break;
-      case 'es': comp = comp((a, b) => a.effectivenessShields - b.effectivenessShields, desc); break;
-      case 'edpsh': comp = comp((a, b) => a.effectiveDpsHull - b.effectiveDpsHull, desc); break;
-      case 'esdpsh': comp = comp((a, b) => a.effectiveSDpsHull - b.effectiveSDpsHull, desc); break;
-      case 'eh': comp = comp((a, b) => a.effectivenessHull - b.effectivenessHull, desc); break;
-    }
-
-    this.state.weapons.sort(comp);
-  }
-
-  /**
-   * Render individual rows for weapons
-   * @param  {Function} translate   Translate function
-   * @param  {Object}   formats     Localised formats map
-   * @return {array}                The individual rows
-   *
-   */
-  _renderRows(translate, formats) {
-    const { termtip, tooltip } = this.context;
-
-    let rows = [];
-
-    for (let i = 0; i < this.state.weapons.length; i++) {
-      const weapon = this.state.weapons[i];
-      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)}
-                  </td>
-                  <td>{formats.round1(weapon.effectiveDpsShields)}</td>
-                  <td>{formats.round1(weapon.effectiveSDpsShields)}</td>
-                  <td>{formats.pct(weapon.effectivenessShields)}</td>
-                  <td>{formats.round1(weapon.effectiveDpsHull)}</td>
-                  <td>{formats.round1(weapon.effectiveSDpsHull)}</td>
-                  <td>{formats.pct(weapon.effectivenessHull)}</td>
-                </tr>);
-    }
-    return rows;
-  }
-
-  /**
-   * Update current range
-   * @param  {number} range Range 0-1
-   */
-  _rangeChange(range) {
-    this.setState({ range, weapons: this._calcWeapons(this.props.ship, this.state.range * this.state.maxRange) });
-  }
-
-  /**
-   * Render damage received
-   * @return {React.Component} contents
-   */
-  render() {
-    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
-    const { formats, translate, units } = language;
-    const { expanded, maxRange, range } = this.state;
-
-    const sortOrder = this._sortOrder;
-    const onCollapseExpand = this._onCollapseExpand;
-
-    return (
-      <span>
-        <h1>{translate('damage received by')} {expanded ? <span onClick={onCollapseExpand}><CollapseSection className='summary'/></span> : <span onClick={onCollapseExpand}><ExpandSection className='summary'/></span>}</h1>
-	{expanded ? <span>
-        <table className='summary' style={{ width: '100%' }}>
-          <thead>
-          <tr className='main'>
-            <th rowSpan={2} className='sortable' onClick={sortOrder.bind(this, 'n')} >{translate('weapon')}</th>
-            <th colSpan={3} >{translate('against shields')}</th>
-            <th colSpan={3} >{translate('against hull')}</th>
-            </tr>
-          <tr>
-            <th className='sortable lft' onClick={sortOrder.bind(this, 'edpss')} onMouseOver={termtip.bind(null, 'dps')} onMouseOut={tooltip.bind(null, null)}>{translate('DPS')}</th>
-            <th className='sortable' onClick={sortOrder.bind(this, 'esdpss')} onMouseOver={termtip.bind(null, 'sdps')} onMouseOut={tooltip.bind(null, null)}>{translate('SDPS')}</th>
-            <th className='sortable' onClick={sortOrder.bind(this, 'es')} >{translate('effectiveness')}</th>
-            <th className='sortable lft' onClick={sortOrder.bind(this, 'edpsh')} onMouseOver={termtip.bind(null, 'dps')} onMouseOut={tooltip.bind(null, null)}>{translate('DPS')}</th>
-            <th className='sortable' onClick={sortOrder.bind(this, 'esdpsh')} onMouseOver={termtip.bind(null, 'sdps')} onMouseOut={tooltip.bind(null, null)}>{translate('SDPS')}</th>
-            <th className='sortable' onClick={sortOrder.bind(this, 'eh')} >{translate('effectiveness')}</th>
-          </tr>
-          </thead>
-          <tbody>
-            {this._renderRows(translate, formats)}
-          </tbody>
-        </table>
-        <table style={{ width: '80%', lineHeight: '1em', backgroundColor: 'transparent', margin: 'auto' }}>
-          <tbody >
-            <tr>
-              <td style={{ verticalAlign: 'top', padding: 0, width: '2.5em' }} onMouseEnter={termtip.bind(null, 'PHRASE_ENGAGEMENT_RANGE')} onMouseLeave={tooltip.bind(null, null)}>{translate('engagement range')}</td>
-              <td>
-                <Slider
-                  axis={true}
-                  onChange={this._rangeChange.bind(this)}
-                  axisUnit={translate('m')}
-                  percent={range}
-                  max={maxRange}
-                  scale={sizeRatio}
-                  onResize={onWindowResize}
-                />
-              </td>
-              <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
-                {formats.f2(range * maxRange / 1000)}{units.km}
-              </td>
-            </tr>
-          </tbody>
-        </table></span> : null }
-      </span>
-    );
-  }
-}

src/app/components/Defence.jsx

@@ -0,0 +1,274 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import * as Calc from '../shipyard/Calculations';
+import PieChart from './PieChart';
+import VerticalBarChart from './VerticalBarChart';
+
+/**
+ * Defence information
+ * Shield information consists of four panels:
+ *   - textual information (time to lose shields etc.)
+ *   - breakdown of shield sources (pie chart)
+ *   - comparison of shield resistances (bar chart)
+ *   - effective shield (bar chart)
+ */
+export default class Defence extends TranslatedComponent {
+  static propTypes = {
+    marker: PropTypes.string.isRequired,
+    ship: PropTypes.object.isRequired,
+    opponent: PropTypes.object.isRequired,
+    engagementrange: PropTypes.number.isRequired,
+    sys: PropTypes.number.isRequired,
+    opponentWep: PropTypes.number.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+
+    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;
+  }
+
+  /**
+   * Render defence
+   * @return {React.Component} contents
+   */
+  render() {
+    const { opponent, sys, opponentWep } = this.props;
+    const { language, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { shield, armour, shielddamage, armourdamage } = this.state;
+
+    const pd = opponent.standard[4].m;
+
+    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') });
+
+      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>);
+        }
+
+        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>);
+        }
+
+        // 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>);
+
+        // 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>);
+        }
+      }
+
+      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>);
+
+      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>);
+
+      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>);
+
+      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'>
+        {shield.total ? <span>
+          <div className='group quarter'>
+            <h2>{translate('shield metrics')}</h2>
+            <br/>
+            <h2 onMouseOver={termtip.bind(null, <div>{shieldSourcesTt}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw shield strength')}<br/>{formats.int(shield.total)}{units.MJ}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_SHIELDS')}<br/>{shielddamage.totalsdps == 0 ? translate('ever') : formats.time(Calc.timeToDeplete(shield.total, shielddamage.totalsdps, shielddamage.totalseps, pd.getWeaponsCapacity(), pd.getWeaponsRechargeRate() * opponentWep / 4))}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECOVER'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECOVER_SHIELDS')}<br/>{shield.recover === Math.Inf ? translate('never') : formats.time(shield.recover)}</h2>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECHARGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECHARGE_SHIELDS')}<br/>{shield.recharge === Math.Inf ? translate('never') : formats.time(shield.recharge)}</h2>
+          </div>
+          <div className='group quarter'>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_SOURCES'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield sources')}</h2>
+            <PieChart data={shieldSourcesData} />
+          </div>
+          <div className='group quarter'>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_DAMAGE_TAKEN'))} onMouseOut={tooltip.bind(null, null)}>{translate('damage taken')}(%)</h2>
+            <VerticalBarChart data={shieldDamageTakenData} yMax={140} />
+          </div>
+          <div className='group quarter'>
+            <h2 onMouseOver={termtip.bind(null, translate('PHRASE_EFFECTIVE_SHIELD'))} onMouseOut={tooltip.bind(null, null)}>{translate('effective shield')}(MJ)</h2>
+            <VerticalBarChart data={effectiveShieldData} yMax={maxEffectiveShield}/>
+          </div>
+        </span> : null }
+
+        <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.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'>
+          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_ARMOUR_SOURCES'))} onMouseOut={tooltip.bind(null, null)}>{translate('armour sources')}</h2>
+          <PieChart data={armourSourcesData} />
+        </div>
+        <div className='group quarter'>
+          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_DAMAGE_TAKEN'))} onMouseOut={tooltip.bind(null, null)}>{translate('damage taken')}(%)</h2>
+          <VerticalBarChart data={armourDamageTakenData} yMax={100} />
+        </div>
+        <div className='group quarter'>
+          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_EFFECTIVE_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('effective armour')}</h2>
+          <VerticalBarChart data={effectiveArmourData} />
+        </div>
+      </span>);
+  }
+}

src/app/components/DefenceSummary.jsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import TranslatedComponent from './TranslatedComponent';
-import { DamageKinetic, DamageThermal, DamageExplosive } from './SvgIcons';
-
-/**
- * Defence summary
- */
-export default class DefenceSummary extends TranslatedComponent {
-  static PropTypes = {
-    ship: React.PropTypes.object.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-  }
-
-  /**
-   * Render defence summary
-   * @return {React.Component} contents
-   */
-  render() {
-    let ship = this.props.ship;
-    let { language, tooltip, termtip } = this.context;
-    let { formats, translate, units } = language;
-    let hide = tooltip.bind(null, null);
-
-    const shieldGenerator = ship.findShieldGenerator();
-
-    // Damage values are 1 - resistance values
-    return (
-      <span>
-        <h1>{translate('defence summary')}</h1>
-        <table className='summary' style={{ marginLeft: 'auto', marginRight: 'auto', lineHeight: '1em', backgroundColor: 'transparent' }}>
-          <tbody>
-            {ship.shield ?
-            <tr>
-              <td colSpan='4' className='summary'><h2>{translate('shields')}: {formats.int(ship.shield)} {units.MJ}</h2></td>
-            </tr> : null }
-            {ship.shield ?
-            <tr>
-              <td className='ri' onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECOVER', { cap: 0 })} onMouseLeave={hide}>{translate('recovery')}</td>
-              <td className='le'>{formats.time(ship.calcShieldRecovery())}</td>
-              <td className='ri' onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECHARGE', { cap: 0 })} onMouseLeave={hide}>{translate('recharge')}</td>
-              <td className='le'>{formats.time(ship.calcShieldRecharge())}</td>
-            </tr> : null }
-            {ship.shield ?
-            <tr>
-              <td className='le'>{translate('damage from')}</td>
-              <td className='ri'>
-                <span onMouseOver={termtip.bind(null, 'explosive')} onMouseOut={tooltip.bind(null, null)}><DamageExplosive /></span>&nbsp;
-                <span onMouseOver={termtip.bind(null, translate('base') + ' ' + formats.pct1(1 - shieldGenerator.explres))} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(1 - ship.shieldExplRes)}</span>
-              </td>
-              <td className='ri'>
-                <span onMouseOver={termtip.bind(null, 'kinetic')} onMouseOut={tooltip.bind(null, null)}><DamageKinetic /></span>&nbsp;
-                <span onMouseOver={termtip.bind(null, translate('base') + ' ' + formats.pct1(1 - shieldGenerator.kinres))} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(1 - ship.shieldKinRes)}</span>
-              </td>
-              <td className='ri'>
-                <span onMouseOver={termtip.bind(null, 'thermal')} onMouseOut={tooltip.bind(null, null)}><DamageThermal /></span>&nbsp;
-                <span onMouseOver={termtip.bind(null, translate('base') + ' ' + formats.pct1(1 - shieldGenerator.thermres))} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(1 - ship.shieldThermRes)}</span>
-              </td>
-            </tr> : null }
-
-            { ship.shield && ship.shieldCells ?
-            <tr>
-              <td colSpan='4'><h2>{translate('shield cells')}: {formats.int(ship.shieldCells)} {units.MJ}</h2></td>
-            </tr> : null }
-
-            <tr>
-              <td colSpan='4'><h2>{translate('armour')}: {formats.int(ship.armour)}</h2></td>
-            </tr>
-            <tr>
-              <td className='le'>{translate('damage from')}</td>
-              <td className='ri'>
-                <span onMouseOver={termtip.bind(null, 'explosive')} onMouseOut={tooltip.bind(null, null)}><DamageExplosive /></span>&nbsp;
-                <span onMouseOver={termtip.bind(null, translate('base') + ' ' + formats.pct1(1 - ship.bulkheads.m.explres))} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(1 - ship.hullExplRes)}</span></td>
-              <td className='ri'>
-                <span onMouseOver={termtip.bind(null, 'kinetic')} onMouseOut={tooltip.bind(null, null)}><DamageKinetic /></span>&nbsp;
-                <span onMouseOver={termtip.bind(null, translate('base') + ' ' + formats.pct1(1 - ship.bulkheads.m.kinres))} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(1 - ship.hullKinRes)}</span>
-              </td>
-              <td className='ri'>
-                <span onMouseOver={termtip.bind(null, 'thermal')} onMouseOut={tooltip.bind(null, null)}><DamageThermal /></span>&nbsp;
-                <span onMouseOver={termtip.bind(null, translate('base') + ' ' + formats.pct1(1 - ship.bulkheads.m.thermres))} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(1 - ship.hullThermRes)}</span>
-              </td>
-            </tr>
-
-	    {ship.modulearmour > 0 ?
-            <tr>
-              <td colSpan='4'><h2>{translate('module armour')}: {formats.int(ship.modulearmour)}</h2></td>
-            </tr> : null }
-
-	    {ship.moduleprotection > 0 ?
-            <tr>
-              <td colSpan='2' className='cn'>{translate('internal protection')} {formats.pct1(ship.moduleprotection)}</td>
-              <td colSpan='2' className='cn'>{translate('external protection')} {formats.pct1(ship.moduleprotection / 2)}</td>
-            </tr> : null }
-          </tbody>
-        </table>
-      </span>
-    );
-  }
-}

src/app/components/EngagementRange.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import Slider from '../components/Slider';
+
+/**
+ * Engagement range slider
+ * Requires an onChange() function of the form onChange(range), providing the range in metres, which is triggered on range change
+ */
+export default class EngagementRange extends TranslatedComponent {
+  static propTypes = {
+    ship: PropTypes.object.isRequired,
+    engagementRange: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    const { ship } = props;
+
+    const maxRange = Math.round(this._calcMaxRange(ship));
+
+    this.state = {
+      maxRange
+    };
+  }
+
+  /**
+   * 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;
+    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;
+  }
+
+  /**
+   * Update range
+   * @param  {number} rangeLevel percentage level from 0 to 1
+   */
+  _rangeChange(rangeLevel) {
+    const { maxRange } = this.state;
+
+    // We round the range to an integer value
+    const range = Math.round(rangeLevel * maxRange);
+
+    if (range !== this.props.engagementRange) {
+      this.props.onChange(range);
+    }
+  }
+
+  /**
+   * Render range slider
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { engagementRange } = this.props;
+    const { maxRange } = this.state;
+
+    return (
+      <span>
+        <h3>{translate('engagement range')}: {formats.int(engagementRange)}{translate('m')}</h3>
+        <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+          <tbody >
+            <tr>
+              <td>
+                <Slider
+                  axis={true}
+                  onChange={this._rangeChange.bind(this)}
+                  axisUnit={translate('m')}
+                  percent={engagementRange / maxRange}
+                  max={maxRange}
+                  scale={sizeRatio}
+                  onResize={onWindowResize}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </span>
+    );
+  }
+}

src/app/components/EngineProfile.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import LineChart from '../components/LineChart';
+import * as Calc from '../shipyard/Calculations';
+
+/**
+ * Engine profile for a given ship
+ */
+export default class EngineProfile extends TranslatedComponent {
+  static propTypes = {
+    ship: PropTypes.object.isRequired,
+    cargo: PropTypes.number.isRequired,
+    fuel: 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, 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 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={minSpeed}
+        yMax={maxSpeed}
+        xMark={mark}
+        xLabel={translate('mass')}
+        xUnit={translate('T')}
+        yLabel={translate('maximum speed')}
+        yUnit={translate('m/s')}
+        func={this.state.calcMaxSpeedFunc}
+        points={1000}
+        code={code}
+        aspect={0.7}
+      />
+    );
+  }
+}

src/app/components/FSDProfile.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import LineChart from '../components/LineChart';
+import * as Calc from '../shipyard/Calculations';
+
+/**
+ * FSD profile for a given ship
+ */
+export default class FSDProfile extends TranslatedComponent {
+  static propTypes = {
+    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
+   * @param  {Object}  fuel          The fuel on the ship
+   * @param  {Object}  mass          The mass at which to calculate the maximum range
+   * @return {number}                The maximum range
+   */
+  _calcMaxRange(ship, fuel, mass) {
+    // Obtain the maximum range
+    return Calc.jumpRange(mass, ship.standard[2].m, Math.min(fuel, ship.standard[2].m.getMaxFuelPerJump()), ship);
+  }
+
+  /**
+   * Render FSD profile
+   * @return {React.Component} contents
+   */
+  render() {
+    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;
+
+    return (
+      <LineChart
+        xMin={minMass}
+        xMax={maxMass}
+        yMin={minRange}
+        yMax={maxRange}
+        xMark={mark}
+        xLabel={translate('mass')}
+        xUnit={translate('T')}
+        yLabel={translate('maximum range')}
+        yUnit={translate('LY')}
+        func={this.state.calcMaxRangeFunc}
+        points={200}
+        code={code}
+        aspect={0.7}
+      />
+    );
+  }
+}

src/app/components/Fuel.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import Slider from '../components/Slider';
+
+/**
+ * Fuel slider
+ * Requires an onChange() function of the form onChange(fuel), providing the fuel in tonnes, which is triggered on fuel level change
+ */
+export default class Fuel extends TranslatedComponent {
+  static propTypes = {
+    fuel: PropTypes.number.isRequired,
+    fuelCapacity: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    this._fuelChange = this._fuelChange.bind(this);
+  }
+
+  /**
+   * Update fuel level
+   * @param  {number} fuelLevel percentage level from 0 to 1
+   */
+  _fuelChange(fuelLevel) {
+    const { fuel, fuelCapacity } = this.props;
+
+    const newFuel = fuelLevel * fuelCapacity;
+    // Only send an update if the fuel has changed significantly
+    if (Math.round(fuel * 10) != Math.round(newFuel * 10)) {
+      this.props.onChange(Math.round(newFuel * 10) / 10);
+    }
+  }
+
+  /**
+   * Render fuel slider
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { fuel, fuelCapacity } = this.props;
+
+    return (
+      <span>
+        <h3>{translate('fuel carried')}: {formats.f1(fuel)}{units.T}</h3>
+        <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+          <tbody >
+            <tr>
+              <td>
+                <Slider
+                  axis={true}
+                  onChange={this._fuelChange}
+                  axisUnit={translate('T')}
+                  percent={fuel / fuelCapacity}
+                  max={fuelCapacity}
+                  scale={sizeRatio}
+                  onResize={onWindowResize}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </span>
+    );
+  }
+}

src/app/components/HardpointSlot.jsx

@@ -1,10 +1,21 @@
 import React from 'react';
+import cn from 'classnames';
 import Slot from './Slot';
 import Persist from '../stores/Persist';
-import { DamageAbsolute, DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret, ListModifications, Modified } from './SvgIcons';
+import {
+  DamageAbsolute,
+  DamageKinetic,
+  DamageThermal,
+  DamageExplosive,
+  MountFixed,
+  MountGimballed,
+  MountTurret,
+  ListModifications,
+  Modified
+} from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
-
+import { blueprintTooltip } from '../utils/BlueprintFunctions';
 
 /**
  * Hardpoint / Utility Slot
@@ -25,18 +36,19 @@ export default class HardpointSlot extends Slot {
    * @return {string}               Label
    */
   _getMaxClassLabel(translate) {
-    return translate(['U','S','M','L','H'][this.props.maxClass]);
+    return translate(['U', 'S', 'M', 'L', 'H'][this.props.maxClass]);
   }
 
   /**
    * 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, translate, formats, u) {
+  _getSlotDetails(m, enabled, translate, formats, u) {
     if (m) {
       let classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
       let { drag, drop } = this.props;
@@ -48,48 +60,93 @@ export default class HardpointSlot extends Slot {
       let modTT = translate('modified');
       if (m && m.blueprint && m.blueprint.name) {
         modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
-        if (m.blueprint.special && m.blueprint.special.id) {
+        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>
+        );
       }
 
-      return <div className='details' draggable='true' onDragStart={drag} onDragEnd={drop}>
+      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 }
+            {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.getClip() * m.getDps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload())) })</span> : null }</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.getClip() * m.getEps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload())) }{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.getClip() * m.getHps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload())) })</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')} {formats.f1(m.getRange() / 1000)}{u.km}</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.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 }
-          { 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 && validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
-
+          {m.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>;
+      return <div className={'empty'}>{translate('empty')}</div>;
     }
   }
+
 }

src/app/components/HardpointSlotSection.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import SlotSection from './SlotSection';
+import HardpointSlot from './HardpointSlot';
+import { MountFixed, MountGimballed, MountTurret } from '../components/SvgIcons';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
+
+/**
+ * Hardpoint slot section
+ */
+export default class HardpointSlotSection extends SlotSection {
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
+  constructor(props, context) {
+    super(props, context, 'hardpoints', 'hardpoints');
+    this._empty = this._empty.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = 'nl-F';
+  }
+
+  /**
+   * Handle focus when component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
+  }
+
+  /**
+   * Empty all slots
+   */
+  _empty() {
+    this.selectedRefId = 'emptyall';
+    this.props.ship.emptyWeapons();
+    this.props.onChange();
+    this._close();
+  }
+
+  /**
+   * Fill slots with specified module
+   * @param  {string} group           Group name
+   * @param  {string} mount           Mount Type - F, G, T
+   * @param  {SyntheticEvent} event   Event
+   */
+  _fill(group, mount, event) {
+    this.selectedRefId = group + '-' + mount;
+    this.props.ship.useWeapon(group, mount, null, event.getModifierState('Alt'));
+    this.props.onChange();
+    this._close();
+  }
+
+  /**
+   * Empty all on section header right click
+   */
+  _contextMenu() {
+    this._empty();
+  }
+
+  /**
+   * Generate the slot React Components
+   * @return {Array} Array of Slots
+   */
+  _getSlots() {
+    let { ship, currentMenu } = this.props;
+    let { originSlot, targetSlot } = this.state;
+    let slots = [];
+    let hardpoints = ship.hardpoints;
+    let availableModules = ship.getAvailableModules();
+
+    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;
+  }
+
+  /**
+   * Generate the section drop-down menu
+   * @param  {Function} translate Translate function
+   * @return {React.Component}    Section menu
+   */
+  _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} 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')} 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')} 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')} 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')} 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')} 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')} 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')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pa-F'] = smRef}>{translate('pa')}</li>
+      </ul>
+      <div className='select-group cap'>{translate('rg')}</div>
+      <ul>
+        <li className='lc' tabIndex='0'  onClick={_fill.bind(this, 'rg', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['rg-F'] = smRef}>{translate('rg')}</li>
+      </ul>
+      <div className='select-group cap'>{translate('nl')}</div>
+      <ul>
+        <li className='lc' tabIndex='0' onClick={_fill.bind(this, 'nl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['nl-F'] = smRef}>{translate('nl')}</li>
+      </ul>
+      <div className='select-group cap'>{translate('rfl')}</div>
+      <ul>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'rfl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['rfl-F'] = smRef}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'rfl', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['rfl-T'] = smRef}><MountTurret className='lg'/></li>
+      </ul>
+    </div>;
+  }
+
+}

src/app/components/HardpointsSlotSection.jsx

@@ -1,147 +0,0 @@
-import React from 'react';
-import SlotSection from './SlotSection';
-import HardpointSlot from './HardpointSlot';
-import cn from 'classnames';
-import { MountFixed, MountGimballed, MountTurret } from '../components/SvgIcons';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
-
-/**
- * Hardpoint slot section
- */
-export default class HardpointsSlotSection extends SlotSection {
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
-  constructor(props, context) {
-    super(props, context, 'hardpoints', 'hardpoints');
-
-    this._empty = this._empty.bind(this);
-  }
-
-  /**
-   * Empty all slots
-   */
-  _empty() {
-    this.props.ship.emptyWeapons();
-    this.props.onChange();
-    this._close();
-  }
-
-  /**
-   * Fill slots with specified module
-   * @param  {string} group           Group name
-   * @param  {string} mount           Mount Type - F, G, T
-   * @param  {SyntheticEvent} event   Event
-   */
-  _fill(group, mount, event) {
-    this.props.ship.useWeapon(group, mount, null, event.getModifierState('Alt'));
-    this.props.onChange();
-    this._close();
-  }
-
-  /**
-   * Empty all on section header right click
-   */
-  _contextMenu() {
-    this._empty();
-  }
-
-  /**
-   * Generate the slot React Components
-   * @return {Array} Array of Slots
-   */
-  _getSlots() {
-    let { ship, currentMenu } = this.props;
-    let { originSlot, targetSlot } = this.state;
-    let slots = [];
-    let hardpoints = ship.hardpoints;
-    let availableModules = ship.getAvailableModules();
-
-    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}
-        />);
-      }
-    }
-
-    return slots;
-  }
-
-  /**
-   * Generate the section drop-down menu
-   * @param  {Function} translate Translate function
-   * @return {React.Component}    Section menu
-   */
-  _getSectionMenu(translate) {
-    let _fill = this._fill;
-
-    return <div className='select hardpoint' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
-      <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
-        <li className='optional-hide' style={{ textAlign: 'center', marginTop: '1em' }}>{translate('PHRASE_ALT_ALL')}</li>
-      </ul>
-      <div className='select-group cap'>{translate('pl')}</div>
-      <ul>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'T')}><MountTurret className='lg'/></li>
-      </ul>
-      <div className='select-group cap'>{translate('ul')}</div>
-      <ul>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'T')}><MountTurret className='lg'/></li>
-      </ul>
-      <div className='select-group cap'>{translate('bl')}</div>
-      <ul>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'T')}><MountTurret className='lg'/></li>
-      </ul>
-      <div className='select-group cap'>{translate('mc')}</div>
-      <ul>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'T')}><MountTurret className='lg'/></li>
-      </ul>
-      <div className='select-group cap'>{translate('c')}</div>
-      <ul>
-        <li className='c' onClick={_fill.bind(this, 'c', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'c', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'c', 'T')}><MountTurret className='lg'/></li>
-      </ul>
-      <div className='select-group cap'>{translate('fc')}</div>
-      <ul>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'T')}><MountTurret className='lg'/></li>
-      </ul>
-      <div className='select-group cap'>{translate('pa')}</div>
-      <ul>
-        <li className='lc' onClick={_fill.bind(this, 'pa', 'F')}>{translate('pa')}</li>
-      </ul>
-      <div className='select-group cap'>{translate('nl')}</div>
-      <ul>
-        <li className='lc' onClick={_fill.bind(this, 'nl', 'F')}>{translate('nl')}</li>
-      </ul>
-    </div>;
-  }
-
-}

src/app/components/Header.jsx

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

src/app/components/InternalSlot.jsx

@@ -1,9 +1,11 @@
 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
@@ -13,62 +15,81 @@ 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, translate, formats, u) {
+  _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 || [];
+      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;
-      return <div className='details' draggable='true' onDragStart={drag} onDragEnd={drop}>
+
+      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('optimal mass')}: {formats.int(m.getOptMass())}{u.T}</div> : null }
-          { m.getMaxMass() ? <div className={'l'}>{translate('max mass')}: {formats.int(m.getMaxMass())}{u.T}</div> : null }
+          { 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() ? <div className={'l'}>{translate('ammunition')}: {formats.gen(m.getAmmo())}</div> : null }
-          { m.cells ? <div className={'l'}>{translate('cells')}: {m.cells}</div> : null }
-          { m.shieldreinforcement ? <div className={'l'}>{translate('shieldreinforcement')}: {formats.int(m.getShieldReinforcement())} <u>MJ</u>&nbsp;&nbsp;&nbsp;{translate('total')}: {formats.int(m.cells * m.getShieldReinforcement())}{u.MJ}</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.spinup ? <div className={'l'}>{translate('spinup')}: {formats.f1(m.spinup)}{u.s}</div> : null }
-          { m.time ? <div className={'l'}>{translate('time')}: {formats.time(m.time)}</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.getHullReinforcement() ? <div className={'l'}>+{formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)} <u className='cap'>{translate('armour')}</u></div> : null }
-          { m.getProtection() ? <div className={'l'}>{formats.rPct(m.getProtection())} <u className='cap'>{translate('protection')}</u></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 }
-          { 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 }
-
-	  { m && validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
-
+          { 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 {

src/app/components/InternalSlotSection.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import cn from 'classnames';
 import SlotSection from './SlotSection';
 import InternalSlot from './InternalSlot';
 import * as ModuleUtils from '../shipyard/ModuleUtils';
@@ -18,7 +17,6 @@ export default class InternalSlotSection extends SlotSection {
    */
   constructor(props, context) {
     super(props, context, 'internal', 'optional internal');
-
     this._empty = this._empty.bind(this);
     this._fillWithCargo = this._fillWithCargo.bind(this);
     this._fillWithCells = this._fillWithCells.bind(this);
@@ -29,12 +27,24 @@ export default class InternalSlotSection extends SlotSection {
     this._fillWithFirstClassCabins = this._fillWithFirstClassCabins.bind(this);
     this._fillWithBusinessClassCabins = this._fillWithBusinessClassCabins.bind(this);
     this._fillWithEconomyClassCabins = this._fillWithEconomyClassCabins.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = this.sectionRefArr['pcq'] ? 'pcq' : 'pcm';
+  }
+
+  /**
+   * Handle focus when component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Empty all slots
    */
   _empty() {
+    this.selectedRefId = 'emptyall';
     this.props.ship.emptyInternal();
     this.props.onChange();
     this._close();
@@ -45,6 +55,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithCargo(event) {
+    this.selectedRefId = 'cargo';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -61,6 +72,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithFuelTanks(event) {
+    this.selectedRefId = 'ft';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -77,6 +89,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithLuxuryCabins(event) {
+    this.selectedRefId = 'pcq';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -93,6 +106,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithFirstClassCabins(event) {
+    this.selectedRefId = 'pcm';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -109,6 +123,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithBusinessClassCabins(event) {
+    this.selectedRefId = 'pci';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -125,6 +140,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithEconomyClassCabins(event) {
+    this.selectedRefId = 'pce';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -141,6 +157,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithCells(event) {
+    this.selectedRefId = 'scb';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     let chargeCap = 0; // Capacity of single activation
@@ -160,6 +177,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithArmor(event) {
+    this.selectedRefId = 'hr';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -176,6 +194,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithModuleReinforcementPackages(event) {
+    this.selectedRefId = 'mrp';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -216,7 +235,6 @@ export default class InternalSlotSection extends SlotSection {
 	onChange={this.props.onChange}
         onSelect={this._selectModule.bind(this, s)}
         selected={currentMenu == s}
-        enabled={s.enabled}
         eligible={s.eligible}
         m={s.m}
         drag={this._drag.bind(this, s)}
@@ -225,6 +243,7 @@ export default class InternalSlotSection extends SlotSection {
         dropClass={this._dropClass(s, originSlot, targetSlot)}
         fuel={fuelCapacity}
         ship={ship}
+        enabled={s.enabled ? true : false}
       />);
     }
 
@@ -240,16 +259,16 @@ export default class InternalSlotSection extends SlotSection {
   _getSectionMenu(translate, ship) {
     return <div className='select' onClick={e => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
-        <li className='lc' onClick={this._fillWithCargo}>{translate('cargo')}</li>
-        <li className='lc' onClick={this._fillWithCells}>{translate('scb')}</li>
-        <li className='lc' onClick={this._fillWithArmor}>{translate('hr')}</li>
-        <li className='lc' onClick={this._fillWithModuleReinforcementPackages}>{translate('mrp')}</li>
-        <li className='lc' onClick={this._fillWithFuelTanks}>{translate('ft')}</li>
-        <li className='lc' onClick={this._fillWithEconomyClassCabins}>{translate('pce')}</li>
-        <li className='lc' onClick={this._fillWithBusinessClassCabins}>{translate('pci')}</li>
-        <li className='lc' onClick={this._fillWithFirstClassCabins}>{translate('pcm')}</li>
-	{ ship.luxuryCabins ? <li className='lc' 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

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import LineChart from '../components/LineChart';
+import Slider from '../components/Slider';
+import * as Calc from '../shipyard/Calculations';
+
+/**
+ * Jump range for a given ship
+ */
+export default class JumpRange extends TranslatedComponent {
+  static propTypes = {
+    ship: PropTypes.object.isRequired,
+    code: 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 = {
+      fuelLevel: 1,
+      calcJumpRangeFunc: this._calcJumpRange.bind(this, ship)
+    };
+  }
+
+  /**
+   * 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.code != this.props.code) {
+      this.setState({ fuelLevel: 1,
+        calcJumpRangeFunc: this._calcJumpRange.bind(this, nextProps.ship) });
+    }
+    return true;
+  }
+
+  /**
+   * Calculate the jump range this ship at a given cargo
+   * @param  {Object}  ship          The ship
+   * @param  {Object}  cargo         The cargo
+   * @return {number}                The jump range
+   */
+  _calcJumpRange(ship, cargo) {
+    // Obtain the FSD for this ship
+    const fsd = ship.standard[2].m;
+
+    const fuel = this.state.fuelLevel * ship.fuelCapacity;
+
+    // Obtain the jump range
+    return Calc.jumpRange(ship.unladenMass + fuel + cargo, fsd, fuel, ship);
+  }
+
+  /**
+   * Update fuel level
+   * @param  {number} fuelLevel Fuel level 0 - 1
+   */
+  _fuelChange(fuelLevel) {
+    this.setState({
+      fuelLevel,
+    });
+  }
+
+  /**
+   * Render engine profile
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { ship } = this.props;
+    const { fuelLevel } = this.state;
+
+    const code = ship.toString() + '.' + ship.getModificationsString() + '.' + fuelLevel;
+
+    return (
+      <span>
+        <h1>{translate('jump range')}</h1>
+        <LineChart
+          xMax={ship.cargoCapacity}
+          yMax={ship.unladenRange}
+          xLabel={translate('cargo')}
+          xUnit={translate('T')}
+          yLabel={translate('jump range')}
+          yUnit={translate('LY')}
+          func={this.state.calcJumpRangeFunc}
+          points={200}
+          code={code}
+        />
+        <h3>{translate('fuel carried')}: {formats.f2(fuelLevel * ship.fuelCapacity)}{units.T}</h3>
+        <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+          <tbody >
+            <tr>
+              <td>
+                <Slider
+                  axis={true}
+                  onChange={this._fuelChange.bind(this)}
+                  axisUnit={translate('T')}
+                  percent={fuelLevel}
+                  max={ship.fuelCapacity}
+                  scale={sizeRatio}
+                  onResize={onWindowResize}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </span>
+    );
+  }
+}

src/app/components/LineChart.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import d3 from 'd3';
+import PropTypes from 'prop-types';
+import ContainerDimensions from 'react-container-dimensions';
+import * as d3 from 'd3';
 import TranslatedComponent from './TranslatedComponent';
 
-const RENDER_POINTS = 20;   // Only render 20 points on the graph
 const MARGIN = { top: 15, right: 20, bottom: 35, left: 60 };
 
 /**
@@ -11,24 +12,30 @@ const MARGIN = { top: 15, right: 20, bottom: 35, left: 60 };
 export default class LineChart extends TranslatedComponent {
 
   static defaultProps = {
+    code: '',
     xMin: 0,
     yMin: 0,
-    colors: ['#ff8c0d']
+    points: 20,
+    colors: ['#ff8c0d'],
+    aspect: 0.5
   };
 
-  static PropTypes = {
-    width: React.PropTypes.number.isRequired,
-    func: React.PropTypes.func.isRequired,
-    xLabel: React.PropTypes.string.isRequired,
-    xMin: React.PropTypes.number,
-    xMax: React.PropTypes.number.isRequired,
-    xUnit: React.PropTypes.string.isRequired,
-    yLabel: React.PropTypes.string.isRequired,
-    yMin: React.PropTypes.number,
-    yMax: React.PropTypes.number.isRequired,
-    yUnit: React.PropTypes.string.isRequired,
-    series: React.PropTypes.array,
-    colors: React.PropTypes.array,
+  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,
   };
 
   /**
@@ -40,54 +47,43 @@ export default class LineChart extends TranslatedComponent {
     super(props);
 
     this._updateDimensions = this._updateDimensions.bind(this);
-    this._updateSeriesData = this._updateSeriesData.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);
 
-    let markerElems = [];
-    let detailElems = [<text key='lbl' className='text-tip x' y='1.25em'/>];
-    let xScale = d3.scale.linear();
-    let xAxisScale = d3.scale.linear();
-    let yScale = d3.scale.linear();
-    let series = props.series;
-    let seriesLines = [];
+    const series = props.series;
 
-    this.xAxis = d3.svg.axis().scale(xAxisScale).outerTickSize(0).orient('bottom');
-    this.yAxis = d3.svg.axis().scale(yScale).ticks(6).outerTickSize(0).orient('left');
+    let xScale = d3.scaleLinear();
+    let yScale = d3.scaleLinear();
+    let xAxisScale = d3.scaleLinear();
 
-    for(let i = 0, l = series ? series.length : 1; i < l; i++) {
-      let yAccessor = series ? function(d) { return yScale(d[1][this]); }.bind(series[i]) : (d) => yScale(d[1]);
-      seriesLines.push(d3.svg.line().x((d) => xScale(d[0])).y(yAccessor));
-      detailElems.push(<text key={i} className='text-tip y' y={1.25 * (i + 2) + 'em'}/>);
-      markerElems.push(<circle key={i} className='marker' r='4' />);
-    }
+    this.xAxis = d3.axisBottom(xAxisScale).tickSizeOuter(0);
+    this.yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0);
 
     this.state = {
       xScale,
       xAxisScale,
       yScale,
-      seriesLines,
-      detailElems,
-      markerElems,
-      tipHeight: 2 + (1.2 * (series ? series.length : 0.8))
+      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) {
+  _tooltip(xPos, width) {
     let { xLabel, yLabel, xUnit, yUnit, func, series } = this.props;
-    let { xScale, yScale, innerWidth } = this.state;
+    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 / innerWidth > 0.60),
+        flip = (xPos / width > 0.50),
         tipWidth = 0,
         tipHeightPx = tips.selectAll('rect').node().getBoundingClientRect().height;
 
@@ -98,7 +94,7 @@ export default class LineChart extends TranslatedComponent {
       let yVal = series ? y0[series[i]] : y0;
       yTotal += yVal;
       return (series ? translate(series[i]) : '') + ' ' + formats.f2(yVal);
-    }).append('tspan').attr('class', 'metric').text(' ' + yUnit);
+    }).append('tspan').attr('class', 'metric').text(yUnit ? ' ' + yUnit : '');
 
     tips.selectAll('text').each(function() {
       if (this.getBBox().width > tipWidth) {
@@ -118,19 +114,21 @@ export default class LineChart extends TranslatedComponent {
 
   /**
    * Update dimensions based on properties and scale
-   * @param  {Object} props   React Component properties
+   * @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) {
-    let { width, xMax, xMin, yMin, yMax } = props;
-    let innerWidth = width - MARGIN.left - MARGIN.right;
-    let outerHeight = Math.round(width * 0.5 * scale);
-    let innerHeight = outerHeight - MARGIN.top - MARGIN.bottom;
+  _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]);
-    this.setState({ innerWidth, outerHeight, innerHeight });
+    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 };
   }
 
   /**
@@ -147,10 +145,11 @@ export default class LineChart extends TranslatedComponent {
   /**
    * Move and update tooltip
    * @param  {SyntheticEvent} e Event
+   * @param {number} width current container width
    */
-  _moveTip(e) {
+  _moveTip(e, width) {
     let clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    this._tooltip(Math.round(clientX - e.currentTarget.getBoundingClientRect().left));
+    this._tooltip(Math.round(clientX - e.currentTarget.getBoundingClientRect().left), width);
   }
 
   /**
@@ -164,35 +163,47 @@ export default class LineChart extends TranslatedComponent {
   }
 
   /**
-   * Update series data generated from props
-   * @param  {Object} props   React Component properties
+   * Update series generated from props
+   * @param   {Object} props   React Component properties
+   * @param   {Object} state   React Component state
    */
-  _updateSeriesData(props) {
-    let { func, xMin, xMax, series } = props;
-    let delta = (xMax - xMin) / RENDER_POINTS;
-    let seriesData = new Array(RENDER_POINTS);
+  _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(RENDER_POINTS);
-      for (let i = 0, x = xMin; i < RENDER_POINTS; i++) {
+      seriesData = new Array(points);
+      for (let i = 0, x = xMin; i < points; i++) {
         seriesData[i] = [x, func(x)];
         x += delta;
       }
-      seriesData[RENDER_POINTS - 1] = [xMax, func(xMax)];
+      seriesData[points - 1] = [xMax, func(xMax)];
     } else {
       let yVal = func(xMin);
       seriesData = [[0, yVal], [1, yVal]];
     }
 
-    this.setState({ seriesData });
+    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._updateDimensions(this.props, this.context.sizeRatio);
-    this._updateSeriesData(this.props);
+    this._updateSeries(this.props, this.state);
   }
 
   /**
@@ -201,17 +212,10 @@ export default class LineChart extends TranslatedComponent {
    * @param  {Object} nextContext Incoming/Next conext
    */
   componentWillReceiveProps(nextProps, nextContext) {
-    let { func, xMin, xMax, yMin, yMax, width } = nextProps;
-    let props = this.props;
+    const props = this.props;
 
-    let domainChanged = xMax != props.xMax || xMin != props.xMin || yMax != props.yMax || yMin != props.yMin || func != props.func;
-
-    if (width != props.width || domainChanged || this.context.sizeRatio != nextContext.sizeRatio) {
-      this._updateDimensions(nextProps, nextContext.sizeRatio);
-    }
-
-    if (domainChanged) {
-      this._updateSeriesData(nextProps);
+    if (props.code != nextProps.code) {
+      this._updateSeries(nextProps, this.state);
     }
   }
 
@@ -220,49 +224,58 @@ export default class LineChart extends TranslatedComponent {
    * @return {React.Component} Chart SVG
    */
   render() {
-    if (!this.props.width) {
-      return null;
-    }
+    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();
 
-    let { xLabel, yLabel, xUnit, yUnit, colors } = this.props;
-    let { innerWidth, outerHeight, innerHeight, tipHeight, detailElems, markerElems, seriesData, seriesLines } = this.state;
-    let line = this.line;
-    let lines = seriesLines.map((line, i) => <path key={i} className='line' stroke={colors[i]} strokeWidth='2' d={line(seriesData)} />);
-
-    return <svg style={{ width: '100%', height: outerHeight }}>
-      <g transform={`translate(${MARGIN.left},${MARGIN.top})`}>
-        <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>
-            <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={this._moveTip}
-          onTouchMove={this._moveTip}
-        />
-      </g>
-    </svg>;
+          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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Router from '../Router';
 import { shallowEqual } from '../utils/UtilityFunctions';
 
@@ -8,9 +9,9 @@ import { shallowEqual } from '../utils/UtilityFunctions';
 export default class Link extends React.Component {
 
   static propTypes = {
-    children: React.PropTypes.any,
-    href: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func
+    children: PropTypes.any,
+    href: PropTypes.string.isRequired,
+    onClick: PropTypes.func
   };
 
   /**
@@ -56,4 +57,4 @@ export default class Link extends React.Component {
     return <a {...this.props} onClick={this.handler}>{this.props.children}</a>;
   }
 
-}
+}

src/app/components/ModalCompare.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import { Ships } from 'coriolis-data/dist';
 import Persist from '../stores/Persist';
@@ -22,8 +23,8 @@ function buildComparator(a, b) {
 export default class ModalCompare extends TranslatedComponent {
 
   static propTypes = {
-    onSelect: React.PropTypes.func.isRequired,
-    builds: React.PropTypes.array
+    onSelect: PropTypes.func.isRequired,
+    builds: PropTypes.array
   };
 
   static defaultProps = {

src/app/components/ModalDeleteAll.jsx

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

src/app/components/ModalExport.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 
 /**
@@ -8,9 +8,9 @@ import TranslatedComponent from './TranslatedComponent';
 export default class ModalExport extends TranslatedComponent {
 
   static propTypes = {
-    title: React.PropTypes.string,
-    generator: React.PropTypes.func,
-    data: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object, React.PropTypes.array])
+    title: PropTypes.string,
+    generator: PropTypes.func,
+    data: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array])
   };
 
   /**
@@ -45,10 +45,9 @@ export default class ModalExport extends TranslatedComponent {
    * Focus on textarea and select all
    */
   componentDidMount() {
-    let e = findDOMNode(this.refs.exportField);
-    if (e) {
-      e.focus();
-      e.select();
+    if (this.exportField) {
+      this.exportField.focus();
+      this.exportField.select();
     }
   }
 
@@ -68,7 +67,7 @@ export default class ModalExport extends TranslatedComponent {
       <h2>{translate(this.props.title || 'Export')}</h2>
       {description}
       <div>
-        <textarea className='cb json' ref='exportField' readOnly value={this.state.exportJson} />
+        <textarea className='cb json' ref={node => this.exportField = node} readOnly value={this.state.exportJson} />
       </div>
       <button className='r dismiss cap' onClick={this.context.hideModal}>{translate('close')}</button>
     </div>;

src/app/components/ModalHelp.jsx

@@ -1,6 +1,6 @@
 /* eslint react/no-danger: 0 */
+import PropTypes from 'prop-types';
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import TranslatedComponent from './TranslatedComponent';
 
 /**
@@ -9,7 +9,7 @@ import TranslatedComponent from './TranslatedComponent';
 export default class ModalHelp extends TranslatedComponent {
 
   static propTypes = {
-    title: React.PropTypes.string
+    title: PropTypes.string
   };
 
   /**
@@ -20,17 +20,6 @@ export default class ModalHelp extends TranslatedComponent {
     super(props);
   }
 
-  /**
-   * Focus on textarea and select all
-   */
-  componentDidMount() {
-    const e = findDOMNode(this.refs.exportField);
-    if (e) {
-      e.focus();
-      e.select();
-    }
-  }
-
   /**
    * Render the modal
    * @return {React.Component} Modal Content

src/app/components/ModalImport.jsx

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

src/app/components/ModalPermalink.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import ShortenUrl from '../utils/ShortenUrl';
 
@@ -8,7 +9,7 @@ import ShortenUrl from '../utils/ShortenUrl';
 export default class ModalPermalink extends TranslatedComponent {
 
   static propTypes = {
-    url: React.PropTypes.string.isRequired
+    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,14 +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/>
+      <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

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

@@ -1,20 +1,24 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
 import NumberEditor from 'react-number-editor';
+import { isChangeValueBeneficial } from '../utils/BlueprintFunctions';
+import { Modifications } from 'coriolis-data/dist';
 
 /**
  * Modification
  */
 export default class Modification extends TranslatedComponent {
-
   static propTypes = {
-    ship: React.PropTypes.object.isRequired,
-    m: React.PropTypes.object.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.number.isRequired,
-    onChange: React.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
   };
 
   /**
@@ -35,25 +39,37 @@ export default class Modification extends TranslatedComponent {
    *                       in a value by hand
    */
   _updateValue(value) {
-    const name = this.props.name;
-
-    let scaledValue = Math.round(Number(value) * 100);
-    // Limit to +1000% / -100%
-    if (scaledValue > 100000) {
-      scaledValue = 100000;
-      value = 1000;
-    }
-    if (scaledValue < -9999) {
-      scaledValue = -9999;
-      value = -99.99;
-    }
-
-    let m = this.props.m;
-    let ship = this.props.ship;
-    ship.setModification(m, name, scaledValue);
-
     this.setState({ value });
-    this.props.onChange();
+    let reCast = String(Number(value));
+    if (reCast.endsWith(value) || reCast.startsWith(value)) {
+      let { m, name, ship } = this.props;
+      value = Math.max(Math.min(value, 50000), -50000);
+      ship.setModification(m, name, value, true);
+    }
+  }
+
+  /**
+   * Triggered when a key is pressed down with focus on the number editor.
+   * @param {SyntheticEvent} event Key down event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      this._updateFinished();
+    }
+    this.props.onKeyDown(event);
+  }
+
+  /**
+   * Triggered when an update to slider value is finished i.e. when losing focus
+   *
+   * pnellesen (24/05/2018): added value check below - this should prevent experimental effects from being recalculated
+   * with each onBlur event, even when no change has actually been made to the field.
+   */
+  _updateFinished() {
+    if (this.props.value != this.state.value) {
+      this.props.handleModChange(true);
+      this.props.onChange();
+    }
   }
 
   /**
@@ -61,28 +77,56 @@ export default class Modification extends TranslatedComponent {
    * @return {React.Component} modification
    */
   render() {
-    let translate = this.context.language.translate;
+    let { translate, formats, units } = this.context.language;
     let { m, name } = this.props;
+    let modValue = m.getChange(name);
+    let isOverwrite = Modifications.modifications[name].method === 'overwrite';
 
     if (name === 'damagedist') {
       // We don't show damage distribution
       return null;
     }
 
-    let symbol;
-    if (name === 'jitter') {
-      symbol = '°';
-    } else if (name !== 'burst' && name != 'burstrof') {
-      symbol = '%';
-    }
-    if (symbol) {
-      symbol = ' (' + symbol + ')';
-    }
+    let inputClassNames = {
+      'cb': true,
+      'greyed-out': !this.props.highlight
+    };
 
     return (
-      <div className={'cb'} key={name}>
-        <div className={'cb'}>{translate(name)}{symbol}</div>
-        <NumberEditor className={'cb'} style={{ width: '90%', textAlign: 'center' }} step={0.01} stepModifier={1} decimals={2} value={this.state.value} onValueChange={this._updateValue.bind(this)} />
+      <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,22 +1,34 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as _ from 'lodash';
-import { findDOMNode } from 'react-dom';
 import TranslatedComponent from './TranslatedComponent';
-import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
-import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
 import Modification from './Modification';
+import {
+  getBlueprint,
+  blueprintTooltip,
+  setPercent,
+  getPercent,
+  setRandom,
+  specialToolTip
+} from '../utils/BlueprintFunctions';
+
+const MODIFICATIONS_COMPARATOR = (mod1, mod2) => {
+  return mod1.props.name.localeCompare(mod2.props.name);
+};
 
 /**
  * Modifications menu
  */
 export default class ModificationsMenu extends TranslatedComponent {
-
   static propTypes = {
-    ship: React.PropTypes.object.isRequired,
-    m: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired
+    ship: PropTypes.object.isRequired,
+    m: PropTypes.object.isRequired,
+    marker: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    modButton:PropTypes.object
   };
 
   /**
@@ -26,60 +38,197 @@ export default class ModificationsMenu extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    this.state = this._initState(props, context);
 
     this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this);
-    this._rollWorst = this._rollWorst.bind(this);
+    this._toggleSpecialsMenu = this._toggleSpecialsMenu.bind(this);
+    this._rollFifty = this._rollFifty.bind(this);
     this._rollRandom = this._rollRandom.bind(this);
-    this._rollAverage = this._rollAverage.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);
+
+    // console.log(props.m.blueprint)
+    this.state = {
+      blueprintMenuOpened: !(props.m.blueprint && props.m.blueprint.name),
+      specialMenuOpened: false
+    };
   }
 
   /**
-   * Initialise state
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
+   * Render the blueprints
+   * @param  {Object} props   React component properties
+   * @param  {Object} context React component context
    * @return {Object}         list: Array of React Components
    */
-  _initState(props, context) {
-    let { m, onChange, ship } = props;
-
-    let blueprints = [];
+  _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) {
-      for (const grade of Modifications.modules[m.grp].blueprints[blueprintName]) {
-        const close = this._blueprintSelected.bind(this, Modifications.blueprints[blueprintName].id, grade);
+      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 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;
-        blueprints.push(<div style={{ cursor: 'pointer' }} key={ key } onClick={ close }>{Modifications.blueprints[blueprintName].name} grade {grade}</div>);
+        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>);
       }
     }
-
-    // Set up the modifications
-    const modifications = this._setModifications(props);
-
-    const blueprintMenuOpened = false;
-
-    // Set up the specials for this module
-    // const specials = _selectSpecials(m);
-
-    return { blueprintMenuOpened, blueprints, modifications };
+    return blueprints;
   }
 
   /**
-   * Initialise the modifications
+   * 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(props, context) {
+    const { m } = props;
+    const { language, tooltip, termtip } = context;
+    const translate = language.translate;
+    const specials = [];
+    const specialsId = m.missile && Modifications.modules[m.grp]['specials_' + m.missile] ? 'specials_' + m.missile : 'specials';
+    if (Modifications.modules[m.grp][specialsId] && Modifications.modules[m.grp][specialsId].length > 0) {
+      const close = this._specialSelected.bind(this, null);
+      specials.push(<div 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>);
+        }
+      }
+    }
+    return specials;
+  }
+
+  /**
+   * Render the modifications
    * @param  {Object} props   React Component properties
    * @return {Object}         list: Array of React Components
    */
-  _setModifications(props) {
+  _renderModifications(props) {
     const { m, onChange, ship } = props;
-    let modifications = [];
+    const modifiableModifications = [];
+    const modifications = [];
     for (const modName of Modifications.modules[m.grp].modifications) {
-      if (Modifications.modifications[modName].type === 'percentage' || Modifications.modifications[modName].type === 'numeric') {
+      if (!Modifications.modifications[modName].hidden) {
         const key = modName + (m.getModValue(modName) / 100 || 0);
-        modifications.push(<Modification key={ key } ship={ ship } m={ m } name={ modName } value={ m.getModValue(modName) / 100 || 0 } onChange={ onChange }/>);
+        const editable = modName !== 'fallofffromrange';
+        const highlight = m.blueprint.grades[m.blueprint.grade].features[modName];
+        this.lastNeId = modName;
+        (editable && highlight ? modifiableModifications : modifications).push(
+          <Modification key={ key } ship={ ship } m={ m } highlight={highlight}
+            value={m.getPretty(modName) || 0} modItems={this.modItems}
+            onChange={onChange} onKeyDown={this._keyDown} name={modName}
+            editable={editable} handleModChange = {this._handleModChange} />
+        );
       }
     }
-    return modifications;
+
+    modifiableModifications.sort(MODIFICATIONS_COMPARATOR);
+    modifications.sort(MODIFICATIONS_COMPARATOR);
+    return modifiableModifications.concat(modifications);
   }
 
   /**
@@ -92,73 +241,57 @@ export default class ModificationsMenu extends TranslatedComponent {
 
   /**
    * Activated when a blueprint is selected
-   * @param  {int} blueprintId The ID of the selected blueprint
-   * @param  {int} grade       The grade of the selected blueprint
+   * @param  {int} fdname     The Frontier name of the blueprint
+   * @param  {int} grade      The grade of the selected blueprint
    */
-  _blueprintSelected(blueprintId, grade) {
-    const { m } = this.props;
-    const blueprint = Object.assign({}, _.find(Modifications.blueprints, function(o) { return o.id === blueprintId; }));
+  _blueprintSelected(fdname, grade) {
+    this.context.tooltip(null);
+    const { m, ship } = this.props;
+    const blueprint = getBlueprint(fdname, m);
     blueprint.grade = grade;
-    m.blueprint = blueprint;
+    ship.setModuleBlueprint(m, blueprint);
+    setPercent(ship, m, 100);
 
-    const blueprintMenuOpened = false;
-    this.setState({ blueprintMenuOpened });
+    this.setState({ blueprintMenuOpened: false, specialMenuOpened: true });
     this.props.onChange();
   }
 
   /**
-   * Provide a 'worst' roll within the information we have
+   * Toggle the specials menu
    */
-  _rollWorst() {
-    const { m, ship } = this.props;
-    const features = m.blueprint.features[m.blueprint.grade];
-    for (const featureName in features) {
-      if (Modifications.modifications[featureName].method == 'overwrite') {
-        ship.setModification(m, featureName, features[featureName][1]);
-      } else {
-        let value = features[featureName][0];
-        if (m.grp == 'sb' && featureName == 'shieldboost') {
-          // Shield boosters are a special case.  Their boost is dependent on their base so we need to calculate the value here
-          value = ((1 + m.shieldboost) * (1 + value) - 1) / m.shieldboost - 1;
-        }
+  _toggleSpecialsMenu() {
+    const specialMenuOpened = !this.state.specialMenuOpened;
+    this.setState({ specialMenuOpened });
+  }
 
-        if (Modifications.modifications[featureName].type == 'percentage') {
-          ship.setModification(m, featureName, value * 10000);
-        } else if (Modifications.modifications[featureName].type == 'numeric') {
-          ship.setModification(m, featureName, value * 100);
-        }
-      }
+  /**
+   * Activated when a special is selected
+   * @param  {int} special     The name of the selected special
+   */
+  _specialSelected(special) {
+    this.context.tooltip(null);
+    const { m, ship } = this.props;
+
+    if (special === null) {
+      ship.clearModuleSpecial(m);
+    } else {
+      ship.setModuleSpecial(m, Modifications.specials[special]);
     }
 
-    this.setState({ modifications: this._setModifications(this.props) });
+    this.setState({ specialMenuOpened: false });
     this.props.onChange();
   }
 
   /**
-   * Provide an 'average' roll within the information we have
+   * Provide a '50%' roll within the information we have
    */
-  _rollAverage() {
+  _rollFifty() {
     const { m, ship } = this.props;
-    const features = m.blueprint.features[m.blueprint.grade];
-    for (const featureName in features) {
-      if (Modifications.modifications[featureName].method == 'overwrite') {
-        ship.setModification(m, featureName, (features[featureName][0] + features[featureName][1]) / 2);
-      } else {
-        let value = (features[featureName][0] + features[featureName][1]) / 2;
-        if (m.grp == 'sb' && featureName == 'shieldboost') {
-          // Shield boosters are a special case.  Their boost is dependent on their base so we need to calculate the value here
-          value = ((1 + m.shieldboost) * (1 + value) - 1) / m.shieldboost - 1;
-        }
+    setPercent(ship, m, 50);
 
-        if (Modifications.modifications[featureName].type == 'percentage') {
-          ship.setModification(m, featureName, value * 10000);
-        } else if (Modifications.modifications[featureName].type == 'numeric') {
-          ship.setModification(m, featureName, value * 100);
-        }
-      }
-    }
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
 
-    this.setState({ modifications: this._setModifications(this.props) });
     this.props.onChange();
   }
 
@@ -167,26 +300,11 @@ export default class ModificationsMenu extends TranslatedComponent {
    */
   _rollRandom() {
     const { m, ship } = this.props;
-    const features = m.blueprint.features[m.blueprint.grade];
-    for (const featureName in features) {
-      if (Modifications.modifications[featureName].method == 'overwrite') {
-        ship.setModification(m, featureName, features[featureName][1]);
-      } else {
-        let value = features[featureName][0] + (Math.random() * (features[featureName][1] - features[featureName][0]));
-        if (m.grp == 'sb' && featureName == 'shieldboost') {
-          // Shield boosters are a special case.  Their boost is dependent on their base so we need to calculate the value here
-          value = ((1 + m.shieldboost) * (1 + value) - 1) / m.shieldboost - 1;
-        }
+    setRandom(ship, m);
 
-        if (Modifications.modifications[featureName].type == 'percentage') {
-          ship.setModification(m, featureName, value * 10000);
-        } else if (Modifications.modifications[featureName].type == 'numeric') {
-          ship.setModification(m, featureName, value * 100);
-        }
-      }
-    }
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
 
-    this.setState({ modifications: this._setModifications(this.props) });
     this.props.onChange();
   }
 
@@ -195,26 +313,22 @@ export default class ModificationsMenu extends TranslatedComponent {
    */
   _rollBest() {
     const { m, ship } = this.props;
-    const features = m.blueprint.features[m.blueprint.grade];
-    for (const featureName in features) {
-      if (Modifications.modifications[featureName].method == 'overwrite') {
-        ship.setModification(m, featureName, features[featureName][1]);
-      } else {
-        let value = features[featureName][1];
-        if (m.grp == 'sb' && featureName == 'shieldboost') {
-          // Shield boosters are a special case.  Their boost is dependent on their base so we need to calculate the value here
-          value = ((1 + m.shieldboost) * (1 + value) - 1) / m.shieldboost - 1;
-        }
+    setPercent(ship, m, 100);
 
-        if (Modifications.modifications[featureName].type == 'percentage') {
-          ship.setModification(m, featureName, value * 10000);
-        } else if (Modifications.modifications[featureName].type == 'numeric') {
-          ship.setModification(m, featureName, value * 100);
-        }
-      }
-    }
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
 
-    this.setState({ modifications: this._setModifications(this.props) });
+    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();
   }
 
@@ -224,64 +338,176 @@ export default class ModificationsMenu extends TranslatedComponent {
   _reset() {
     const { m, ship } = this.props;
     ship.clearModifications(m);
-    ship.clearBlueprint(m);
-
-    this.setState({ modifications: this._setModifications(this.props) });
+    ship.clearModuleBlueprint(m);
+    this.selectedModId = null;
+    this.selectedSpecialId = null;
     this.props.onChange();
   }
 
+  /**
+   * set mod did change boolean
+   * @param {boolean} b Boolean to determine if a change has been made to a module
+   */
+  _handleModChange(b) {
+    this.modValDidChange = b;
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * after it first mounts
+   */
+  componentDidMount() {
+    let firstEleCn = this.modItems['modMainDiv'].children.length > 0 ? this.modItems['modMainDiv'].children[0].className : null;
+    if (firstEleCn.indexOf('select-group cap') >= 0) {
+      this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+    } else {
+      this.modItems['modMainDiv'].firstElementChild.focus();
+    }
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * if component updates, unless update is due to value change
+   * in a modification
+   */
+  componentDidUpdate() {
+    if (!this.modValDidChange) {
+      if (this.modItems['modMainDiv'].children.length > 0) {
+        if (this.modItems[this.selectedModId]) {
+          this.modItems[this.selectedModId].focus();
+          return;
+        } else if (this.modItems[this.selectedSpecialId]) {
+          this.modItems[this.selectedSpecialId].focus();
+          return;
+        }
+        let firstEleCn = this.modItems['modMainDiv'].children[0].className;
+        if (firstEleCn.indexOf('button-inline-menu') >= 0) {
+          this.modItems['modMainDiv'].firstElementChild.focus();
+        } else if (firstEleCn.indexOf('select-group cap') >= 0)  {
+          this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+        }
+      }
+    } else {
+      this._handleModChange(false);// Need to reset if component update due to value change
+    }
+  }
+  /**
+   * set focus to the modification menu icon after mod menu is unmounted.
+   */
+  componentWillUnmount() {
+    if (this.props.modButton) {
+      this.props.modButton.focus();
+    }
+  }
+
   /**
    * Render the list
    * @return {React.Component} List
    */
   render() {
-    const language = this.context.language;
+    const { language, tooltip, termtip } = this.context;
     const translate = language.translate;
-    const { tooltip, termtip } = this.context;
     const { m } = this.props;
-    const { blueprintMenuOpened } = this.state;
+    const { blueprintMenuOpened, specialMenuOpened } = this.state;
 
     const _toggleBlueprintsMenu = this._toggleBlueprintsMenu;
-    const _rollBest = this._rollBest;
+    const _toggleSpecialsMenu = this._toggleSpecialsMenu;
+    const _rollFull = this._rollBest;
     const _rollWorst = this._rollWorst;
-    const _rollAverage = this._rollAverage;
+    const _rollFifty = this._rollFifty;
     const _rollRandom = this._rollRandom;
     const _reset = this._reset;
 
     let blueprintLabel;
     let haveBlueprint = false;
-    if (m.blueprint && !isEmpty(m.blueprint)) {
+    let blueprintTt;
+    let blueprintCv;
+    let bprintSearchName;
+
+    // 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';
+        }
+      }
+    }
+    // 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;
-    } else {
-      blueprintLabel = translate('PHRASE_SELECT_BLUEPRINT');
+      // 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() }
-          onContextMenu={stopCtxPropagation}
+        className={cn('select', this.props.className)}
+        onClick={(e) => e.stopPropagation() }
+        onContextMenu={stopCtxPropagation}
+        ref={modItem => this.modItems['modMainDiv'] = modItem}
       >
-        <div className={ cn('section-menu', { selected: true })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu}>{blueprintLabel}</div>
-        { blueprintMenuOpened ? this.state.blueprints : '' }
-        { haveBlueprint ?
+        { 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>
-              <tr>
-                <td> { translate('roll') }: </td>
-                <td style={{ cursor: 'pointer' }} onClick={_rollWorst} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('worst') } </td>
-                <td style={{ cursor: 'pointer' }} onClick={_rollAverage}onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_AVERAGE')} onMouseOut={tooltip.bind(null, null)}> { translate('average') } </td>
-                <td style={{ cursor: 'pointer' }} onClick={_rollBest}onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('best') } </td>
-                <td style={{ cursor: 'pointer' }} onClick={_rollRandom} onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
-                <td style={{ cursor: 'pointer' }} onClick={_reset}onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </td>
-              </tr>
+              { 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> : '' }
-        { blueprintMenuOpened ? '' : 
+          </table> : null }
+        { showMods ? <hr /> : null }
+        { showMods ?
           <span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
-            { this.state.modifications }
-          </span> }
+            { this._renderModifications(this.props) }
+          </span> : null }
       </div>
     );
   }

src/app/components/Movement.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+
+/**
+ * Movement
+ */
+export default class Movement extends TranslatedComponent {
+  static propTypes = {
+    marker: PropTypes.string.isRequired,
+    ship: PropTypes.object.isRequired,
+    boost: PropTypes.bool.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, eng, cargo, fuel } = this.props;
+    const { language } = this.context;
+    const { formats, translate, units } = language;
+
+    return (
+      <span id='movement'>
+        <svg viewBox='0 0 600 600' fillRule="evenodd" clipRule="evenodd">
+          {/* Axes */}
+          <path d="M150 250v300" strokeWidth='1'/>
+          <path d="M150 250l236 236" strokeWidth='1'/>
+          <path d="M150 250l350 -200" strokeWidth='1'/>
+          {/* End Arrow */}
+          <path d="M508 43.3L487 67l-10-17.3 31-6.4z"/>
+          {/* Axes arcs and arrows */}
+          <path d="M71.7 251.7C64.2 259.2 60 269.4 60 280c0 22 18 40 40 40s40-18 40-40c0-10.6-4.2-20.8-11.7-28.3 7.5 7.5 11.7 17.7 11.7 28.3 0 22-18 40-40 40s-40-18-40-40c0-10.6 4.2-20.8 11.7-28.3z" strokeWidth='4' transform="matrix(.6 0 0 .3 87.5 376.3)"/>
+          <path d="M142.8 453l-13.2 8.7-2.6-9.7 15.8 1z"/>
+          <path d="M144.7 451.6l.5 1.6-16.2 10.6h-.4l-3.5-13 .7-.4 19.3 1.2zm-14.2 7.7l7.7-5-9.2-.7 1.5 5.7zm25.7-6.3l15.8-1-2.6 9.7-13.2-8.8z"/>
+          <path d="M174 450.8l-3.6 13h-.4l-16.2-10.6.5-1.6 19.3-1.2.3.4zm-13.2 3.4l7.7 5 1.5-5.6-9.2.6z"/>
+
+          <path d="M407.7 119c2 .7 4.3 1 6.4 1 14 0 25-11.2 25-25s-11-25-25-25c-11 0-21 7.6-24 18.5 3-11 13-18.5 24-18.5 14 0 25 11.2 25 25s-11 25-25 25c-2 0-4-.3-6-1z" strokeWidth='2'/>
+          <path d="M388 99.7L387 84l9.8 2.5-8.7 13.2z"/>
+          <path d="M398.8 85.5l.2.5-10.7 16-1.6-.3-1.2-19.3.4-.3 12.5 3.8zm-9.5 9.7l5-7.7-5.6-1.6.6 9zm10 20.8l15.7-1-2.6 9.7-13.2-8.8z"/>
+          <path d="M417 113.8l-3.6 13h-.4l-16.2-10.6.5-1.6 19.3-1.2.3.4zm-13.2 3.4l7.7 5 1.5-5.6-9.2.6z"/>
+
+          <path d="M355 430c0-13.8-11.2-25-25-25s-25 11.2-25 25 11.2 25 25 25c-13.8 0-25-11.2-25-25s11.2-25 25-25 25 11.2 25 25z" strokeWidth='2'/>
+          <path d="M357 439.7l-8.8-13 9.7-2.7-1 15.7z"/>
+          <path d="M359.5 422.4l-1.2 19.3-1.6.4-10.7-16 .2-.2 13-3.4.3.4zm-9 5l5.2 7.8.6-9.3-5.7 1.2zm-10.5 24l-13.2 8.6-2.6-9.7 15.8 1z"/>
+          <path d="M342 450l.4 1.5-16.2 10.7-.4-.2-3.5-13 .3-.3L342 450zm-14.3 7.6l7.7-5-9.2-.6 1.5 5.6z"/>
+
+          {/* Speed */}
+          <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/MovementSummary.jsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import TranslatedComponent from './TranslatedComponent';
-
-/**
- * Movement summary
- */
-export default class MovementSummary extends TranslatedComponent {
-  static PropTypes = {
-    ship: React.PropTypes.object.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-  }
-
-  /**
-   * Render movement summary
-   * @return {React.Component} contents
-   */
-  render() {
-    let ship = this.props.ship;
-    let { language, tooltip, termtip } = this.context;
-    let { formats, translate, units } = language;
-    let hide = tooltip.bind(null, null);
-    let boostMultiplier = ship.topBoost / ship.topSpeed;
-
-    return (
-      <span>
-        <h1>{translate('movement summary')}</h1>
-        <table style={{ marginLeft: 'auto', marginRight: 'auto', lineHeight: '1em', backgroundColor: 'transparent', borderSpacing: '0.5em' }}>
-          <tbody>
-            <tr>
-              <td >&nbsp;</td>
-              <td colSpan='6'>{translate('engine pips')}</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>0</td>
-              <td>1</td>
-              <td>2</td>
-              <td>3</td>
-              <td>4</td>
-              <td onMouseOver={termtip.bind(null, '4b')} onMouseOut={tooltip.bind(null, null)}>4B</td>
-            </tr>
-            <tr>
-              <td className='ri'>{translate('speed')} ({units['m/s']})</td>
-              <td className='ri'>{formats.int(ship.speeds[0])}</td>
-              <td className='ri'>{formats.int(ship.speeds[1])}</td>
-              <td className='ri'>{formats.int(ship.speeds[2])}</td>
-              <td className='ri'>{formats.int(ship.speeds[3])}</td>
-              <td className='ri'>{formats.int(ship.speeds[4])}</td>
-              <td className='ri'>{formats.int(ship.speeds[4] * boostMultiplier)}</td>
-            </tr>
-            <tr>
-              <td className='ri'>{translate('pitch')} ({units['°/s']})</td>
-              <td className='ri'>{formats.int(ship.pitches[0])}</td>
-              <td className='ri'>{formats.int(ship.pitches[1])}</td>
-              <td className='ri'>{formats.int(ship.pitches[2])}</td>
-              <td className='ri'>{formats.int(ship.pitches[3])}</td>
-              <td className='ri'>{formats.int(ship.pitches[4])}</td>
-              <td className='ri'>{formats.int(ship.pitches[4] * boostMultiplier)}</td>
-            </tr>
-            <tr>
-              <td className='ri'>{translate('roll')} ({units['°/s']})</td>
-              <td className='ri'>{formats.int(ship.rolls[0])}</td>
-              <td className='ri'>{formats.int(ship.rolls[1])}</td>
-              <td className='ri'>{formats.int(ship.rolls[2])}</td>
-              <td className='ri'>{formats.int(ship.rolls[3])}</td>
-              <td className='ri'>{formats.int(ship.rolls[4])}</td>
-              <td className='ri'>{formats.int(ship.rolls[4] * boostMultiplier)}</td>
-            </tr>
-            <tr>
-              <td className='ri'>{translate('yaw')} ({units['°/s']})</td>
-              <td className='ri'>{formats.int(ship.yaws[0])}</td>
-              <td className='ri'>{formats.int(ship.yaws[1])}</td>
-              <td className='ri'>{formats.int(ship.yaws[2])}</td>
-              <td className='ri'>{formats.int(ship.yaws[3])}</td>
-              <td className='ri'>{formats.int(ship.yaws[4])}</td>
-              <td className='ri'>{formats.int(ship.yaws[4] * boostMultiplier)}</td>
-            </tr>
-          </tbody>
-        </table>
-      </span>
-    );
-  }
-}

src/app/components/Offence.jsx

@@ -0,0 +1,334 @@
+import React from 'react';
+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';
+
+/**
+ * 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
+ */
+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} sdpsObject  Object that holds sdps split up by type
+ * @returns {Object}              Data object
+ */
+function getSDpsData(translate, sdpsObject) {
+  return Object.keys(sdpsObject).map(key => {
+    return {
+      value: Math.round(sdpsObject[key]),
+      label: translate(key)
+    };
+  });
+}
+
+/**
+ * Adds all damage of `add` onto `addOn`.
+ * @param {Calc.SDps} addOn Object that holds sdps split up by type (will be mutated)
+ * @param {Calc.SDps} add   Object that holds sdps split up by type
+ */
+function addSDps(addOn, add) {
+  Object.keys(addOn).map(k => addOn[k] += (add[k] ? add[k] : 0));
+}
+
+/**
+ * Calculates the overall sdps of an sdps object.
+ * @param {Calc.SDps} sdpsObject Object that holds sdps spluit up by type
+ */
+function sumSDps(sdpsObject) {
+  if (sdpsObject.total) {
+    return sdpsObject.total;
+  }
+
+  return Object.keys(sdpsObject).reduce(
+    (acc, k) => acc + (sdpsObject[k] ? sdpsObject[k] : 0),
+    0
+  );
+}
+
+/**
+ * Offence information
+ * Offence information consists of four panels:
+ *   - textual information (time to drain cap, time to take down shields etc.)
+ *   - breakdown of damage sources (pie chart)
+ *   - comparison of shield resistances (table chart)
+ *   - effective sustained DPS of weapons (bar chart)
+ */
+export default class Offence extends TranslatedComponent {
+  static propTypes = {
+    marker: PropTypes.string.isRequired,
+    ship: PropTypes.object.isRequired,
+    opponent: PropTypes.object.isRequired,
+    engagementrange: PropTypes.number.isRequired,
+    wep: PropTypes.number.isRequired,
+    opponentSys: PropTypes.number.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+
+    this._sort = this._sort.bind(this);
+
+    const damage = Calc.offenceMetrics(props.ship, props.opponent, props.wep, props.opponentSys, props.engagementrange);
+    this.state = {
+      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 = 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, 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 pd = ship.standard[4].m;
+
+    const opponentShields = Calc.shieldMetrics(opponent, 4);
+    const opponentArmour = Calc.armourMetrics(opponent);
+
+    const timeToDrain = Calc.timeToDrainWep(ship, wep);
+
+
+    let totalSEps = 0;
+    let totalSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
+    let shieldsSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
+    let armourSDpsObject = { 'absolute': 0, 'explosive': 0, 'kinetic': 0, 'thermal': 0 };
+
+    const rows = [];
+    for (let i = 0; i < damage.length; i++) {
+      const weapon = damage[i];
+
+      totalSEps += weapon.seps;
+      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 totalSDps = sumSDps(totalSDpsObject);
+    const totalSDpsTooltipDetails = getSDpsTooltip(translate, formats, totalSDpsObject);
+    const totalSDpsData = getSDpsData(translate, totalSDpsObject);
+
+    const totalShieldsSDps = sumSDps(shieldsSDpsObject);
+    const totalShieldsSDpsTooltipDetails = getSDpsTooltip(translate, formats, shieldsSDpsObject);
+    const shieldsSDpsData = getSDpsData(translate, shieldsSDpsObject);
+
+    const totalArmourSDps = sumSDps(armourSDpsObject);
+    const totalArmourSDpsTooltipDetails = getSDpsTooltip(translate, formats, armourSDpsObject);
+    const armourSDpsData = getSDpsData(translate, armourSDpsObject);
+
+    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'>
+        <div className='group full'>
+          <table>
+            <thead>
+              <tr className='main'>
+                <th rowSpan='2' className='sortable' onClick={sortOrder.bind(this, 'n')}>{translate('weapon')}</th>
+                <th colSpan='1'>{translate('overall')}</th>
+                <th colSpan='3'>{translate('opponent\'s shields')}</th>
+                <th colSpan='3'>{translate('opponent\'s armour')}</th>
+              </tr>
+              <tr>
+                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
+                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_SHIELDS')} onMouseOut={tooltip.bind(null, null)} onClick={sortOrder.bind(this, 'esdpss')}>{'sdps'}</th>
+                <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_SHIELDS')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'es')}>{'eft'}</th>
+
+                <th className='sortable'>{'dpe'}</th>
+
+                <th className='lft sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVE_SDPS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'esdpsh')}>{'sdps'}</th>
+                <th className='sortable' onMouseOver={termtip.bind(null, 'TT_EFFECTIVENESS_ARMOUR')} onMouseOut={tooltip.bind(null, null)}onClick={sortOrder.bind(this, 'eh')}>{'eft'}</th>
+
+                <th className='sortable'>{'dpe'}</th> 
+              </tr>
+            </thead>
+            <tbody>
+              {rows}
+              {rows.length > 0 &&
+                <tr>
+                  <td></td>
+                  <td className='ri'><span onMouseOver={termtip.bind(null, totalSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>={formats.f1(totalSDps)}</span></td>
+                  <td className='ri'><span onMouseOver={termtip.bind(null, totalShieldsSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>={formats.f1(totalShieldsSDps)}</span></td>
+                  <td></td>
+                  <td></td>
+                  <td className='ri'><span onMouseOver={termtip.bind(null, totalArmourSDpsTooltipDetails)} onMouseOut={tooltip.bind(null, null)}>={formats.f1(totalArmourSDps)}</span></td>
+                  <td></td>
+                  <td></td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        <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(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={totalSDpsData} />
+        </div>
+        <div className='group quarter'>
+          <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_DAMAGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield damage sources')}</h2>
+          <PieChart data={shieldsSDpsData} />
+        </div>
+        <div className='group quarter'>
+          <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/OffenceSummary.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import TranslatedComponent from './TranslatedComponent';
-import { DamageAbsolute, DamageKinetic, DamageThermal, DamageExplosive } from './SvgIcons';
-
-/**
- * Offence summary
- */
-export default class OffenceSummary extends TranslatedComponent {
-  static PropTypes = {
-    ship: React.PropTypes.object.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-  }
-
-  /**
-   * Render offence summary
-   * @return {React.Component} contents
-   */
-  render() {
-    let ship = this.props.ship;
-    let { language, tooltip, termtip } = this.context;
-    let { formats, translate } = language;
-
-    return (
-      <span>
-        <h1>{translate('offence summary')}</h1>
-        <table className='summary' style={{ marginLeft: 'auto', marginRight: 'auto', lineHeight: '1em', backgroundColor: 'transparent' }}>
-          <tbody>
-            <tr>
-              <td colSpan='5' className='summary'><h2>{translate('dps')}: {formats.f1(ship.totalDps)}</h2></td>
-            </tr>
-            <tr>
-              <td className='le'>{translate('damage by')}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'absolute')} onMouseOut={tooltip.bind(null, null)}><DamageAbsolute /> {formats.f1(ship.totalAbsDps)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'explosive')} onMouseOut={tooltip.bind(null, null)}><DamageExplosive /> {formats.f1(ship.totalExplDps)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'kinetic')} onMouseOut={tooltip.bind(null, null)}><DamageKinetic /> {formats.f1(ship.totalKinDps)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'thermal')} onMouseOut={tooltip.bind(null, null)}><DamageThermal /> {formats.f1(ship.totalThermDps)}</td>
-            </tr>
-            
-            <tr>
-              <td colSpan='5' className='summary'><h2>{translate('sdps')}: {formats.f1(ship.totalSDps)}</h2></td>
-            </tr>
-            <tr>
-              <td className='le'>{translate('damage by')}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'absolute')} onMouseOut={tooltip.bind(null, null)}><DamageAbsolute /> {formats.f1(ship.totalAbsSDps)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'explosive')} onMouseOut={tooltip.bind(null, null)}><DamageExplosive /> {formats.f1(ship.totalExplSDps)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'kinetic')} onMouseOut={tooltip.bind(null, null)}><DamageKinetic /> {formats.f1(ship.totalKinSDps)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'thermal')} onMouseOut={tooltip.bind(null, null)}><DamageThermal /> {formats.f1(ship.totalThermSDps)}</td>
-            </tr>
-            
-            <tr>
-              <td colSpan='5' className='summary'><h2>{translate('dpe')}: {formats.f1(ship.totalDpe)}</h2></td>
-            </tr>
-            <tr>
-              <td className='le'>{translate('damage by')}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'absolute')} onMouseOut={tooltip.bind(null, null)}><DamageAbsolute /> {formats.f1(ship.totalAbsDpe)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'explosive')} onMouseOut={tooltip.bind(null, null)}><DamageExplosive /> {formats.f1(ship.totalExplDpe)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'kinetic')} onMouseOut={tooltip.bind(null, null)}><DamageKinetic /> {formats.f1(ship.totalKinDpe)}</td>
-              <td className='ri' onMouseOver={termtip.bind(null, 'thermal')} onMouseOut={tooltip.bind(null, null)}><DamageThermal /> {formats.f1(ship.totalThermDpe)}</td>
-            </tr>
-          </tbody>
-        </table>
-      </span>
-    );
-  }
-}

src/app/components/OutfittingSubpages.jsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import Persist from '../stores/Persist';
+import TranslatedComponent from './TranslatedComponent';
+import PowerManagement from './PowerManagement';
+import CostSection from './CostSection';
+import EngineProfile from './EngineProfile';
+import FSDProfile from './FSDProfile';
+import Movement from './Movement';
+import Offence from './Offence';
+import Defence from './Defence';
+import WeaponDamageChart from './WeaponDamageChart';
+
+/**
+ * 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,
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+    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.state = {
+      tab: Persist.getOutfittingTab() || 'power',
+    };
+  }
+
+  /**
+   * Show selected tab
+   * @param  {string} tab Tab name
+   */
+  _showTab(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 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;
+    }
+
+    return (
+      <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

@@ -0,0 +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>
+    );
+  }
+}

src/app/components/Pips.jsx

@@ -0,0 +1,282 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import { Pip } from './SvgIcons';
+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.
+ * Requires an onChange() function of the form onChange(sys, eng, wep) which is triggered whenever the pips change.
+ */
+export default class Pips extends TranslatedComponent {
+  static propTypes = {
+    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
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+    autoBind(this);
+  }
+
+  /**
+   * Add listeners after mounting
+   */
+  componentDidMount() {
+    document.addEventListener('keydown', this._keyDown);
+  }
+
+  /**
+   * Remove listeners before unmounting
+   */
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this._keyDown);
+  }
+
+  /**
+   * Handle Key Down
+   * @param  {Event} e  Keyboard Event
+   */
+  _keyDown(e) {
+    if (e.ctrlKey || e.metaKey) { // CTRL/CMD
+      switch (e.keyCode) {
+        case 37:     // Left arrow == increase SYS
+          e.preventDefault();
+          this._incSys();
+          break;
+        case 38:     // Up arrow == increase ENG
+          e.preventDefault();
+          this._incEng();
+          break;
+        case 39:     // Right arrow == increase WEP
+          e.preventDefault();
+          this._incWep();
+          break;
+        case 40:     // Down arrow == reset
+          e.preventDefault();
+          this._reset();
+          break;
+      }
+    }
+  }
+
+  /**
+   * Reset the capacitor
+   */
+  _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(sys, eng, wep, mcSys, mcEng, mcWep) {
+    const pipsSvg = {
+      SYS: [],
+      ENG: [],
+      WEP: [],
+    };
+
+    // 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 (pips > Math.floor(pips)) {
+        pipsSvg[pipName].push(<Pip className='half' key={'half'} />);
+      }
+      for (let i = pips - mcPips; i < Math.floor(pips); i++) {
+        pipsSvg[pipName].push(<Pip key={i} className='mc' />);
+      }
+      for (let i = Math.floor(pips + 0.5); i < 4; i++) {
+        pipsSvg[pipName].push(<Pip className='empty' key={i} />);
+      }
+    }
+
+    return pipsSvg;
+  }
+
+  /**
+   * Render pips
+   * @return {React.Component} contents
+   */
+  render() {
+    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(sys, eng, wep, mcSys, mcEng, mcWep);
+    return (
+      <span id='pips'>
+        <table>
+          <tbody>
+            <tr>
+              <td>&nbsp;</td>
+              <td>&nbsp;</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}
+                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}
+                onContextMenu={this._wrapMcClick('sys')}>{translate('SYS')}</td>
+              <td className='clickable' onClick={this._reset.bind(this, false)}>
+                {translate('RST')}
+              </td>
+              <td className='clickable' onClick={this._incWep}
+                onContextMenu={this._wrapMcClick('wep')}>{translate('WEP')}</td>
+            </tr>
+            <tr>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td className='clickable secondary' onClick={this._wrapMcClick('rst')}
+                onMouseEnter={termtip.bind(null, 'PHRASE_MULTI_CREW_CAPACITOR_POINTS')}
+                onMouseLeave={tooltip.bind(null, null)}>
+                {translate('RST')}
+              </td>
+              <td>&nbsp;</td>
+            </tr>
+          </tbody>
+        </table>
+      </span>
+    );
+  }
+}

src/app/components/PowerBands.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import d3 from 'd3';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
 import cn from 'classnames';
 import TranslatedComponent from './TranslatedComponent';
 import { wrapCtxMenu } from '../utils/UtilityFunctions';
@@ -31,12 +32,11 @@ function bandText(val, index, wattScale) {
  * Renders the SVG to simulate in-game power bands
  */
 export default class PowerBands extends TranslatedComponent {
-
   static propTypes = {
-    bands: React.PropTypes.array.isRequired,
-    available: React.PropTypes.number.isRequired,
-    width: React.PropTypes.number.isRequired,
-    code: React.PropTypes.string,
+    bands: PropTypes.array.isRequired,
+    available: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    code: PropTypes.string,
   };
 
   /**
@@ -46,10 +46,10 @@ export default class PowerBands extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    this.wattScale = d3.scale.linear();
-    this.pctScale = d3.scale.linear().domain([0, 1]);
-    this.wattAxis = d3.svg.axis().scale(this.wattScale).outerTickSize(0).orient('top').tickFormat(context.language.formats.r2);
-    this.pctAxis = d3.svg.axis().scale(this.pctScale).outerTickSize(0).orient('bottom').tickFormat(context.language.formats.rPct);
+    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);
@@ -186,10 +186,10 @@ export default class PowerBands extends TranslatedComponent {
 
     let { wattScale, pctScale, context, props, state } = this;
     let { translate, formats } = context.language;
-    let { f2, pct1, rPct, r2 } = formats; // wattFmt, pctFmt, pctAxis, wattAxis
-    let { available, bands, width } = props;
-    let { innerWidth, maxPwr, ret, dep } = state;
-    let pwrWarningClass = cn('threshold', { exceeded: bands[0].retractedSum * 2 >= available });
+    let { f2, pct1 } = formats; // wattFmt, pctFmt
+    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;
@@ -268,7 +268,7 @@ export default class PowerBands extends TranslatedComponent {
             axis.call(this.pctAxis);
             axis.select('g:nth-child(6)').selectAll('line, text').attr('class', pwrWarningClass);
           }} className='pct axis' transform={`translate(0,${state.innerHeight})`}></g>
-          <line x1={pctScale(0.5)} x2={pctScale(0.5)} y1='0' y2={state.innerHeight} className={pwrWarningClass} />
+          <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, available)}>{f2(Math.max(0, retSum))} ({pct1(Math.max(0, retSum / available))})</text>

src/app/components/PowerManagement.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import TranslatedComponent from './TranslatedComponent';
 import PowerBands from './PowerBands';
@@ -17,10 +17,10 @@ const POWER = [
  * Power Management Section
  */
 export default class PowerManagement extends TranslatedComponent {
-  static PropTypes = {
-    ship: React.PropTypes.object.isRequired,
-    code: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired
+  static propTypes = {
+    ship: PropTypes.object.isRequired,
+    code: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired
   };
 
   /**
@@ -34,8 +34,8 @@ export default class PowerManagement extends TranslatedComponent {
     this._sort = this._sort.bind(this);
 
     this.state = {
-      predicate: 'n',
-      desc: true,
+      predicate: 'pwr',
+      desc: false,
       width: 0
     };
   }
@@ -125,15 +125,32 @@ export default class PowerManagement extends TranslatedComponent {
           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
+        console.log(slot);
+        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>
-          <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>
+          {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}
@@ -148,7 +165,7 @@ export default class PowerManagement extends TranslatedComponent {
    * Update power bands width from DOM
    */
   _updateWidth() {
-    this.setState({ width: findDOMNode(this).offsetWidth });
+    this.setState({ width: this.node.offsetWidth });
   }
 
   /**
@@ -196,7 +213,7 @@ export default class PowerManagement extends TranslatedComponent {
     let sortOrder = this._sortOrder;
 
     return (
-      <div className='group half' id='componentPriority'>
+      <div ref={node => this.node = node} className='group half' id='componentPriority'>
         <table style={{ width: '100%' }}>
           <thead>
             <tr className='main'>

src/app/components/ShipPicker.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import { Ships } from 'coriolis-data/dist';
+import { Rocket } from './SvgIcons';
+import Persist from '../stores/Persist';
+import cn from 'classnames';
+
+/**
+ * Ship picker
+ * Requires an onChange() function of the form onChange(ship), providing the ship, which is triggered on ship change
+ */
+export default class ShipPicker extends TranslatedComponent {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    ship: PropTypes.string.isRequired,
+    build: PropTypes.string
+  };
+
+  static defaultProps = {
+    ship: 'eagle'
+  }
+
+  /**
+   * constructor
+   * @param {object} props  Properties react
+   * @param {object} context   react context
+   */
+  constructor(props, context) { // eslint-disable-line
+    super(props);
+
+    this.shipOrder = Object.keys(Ships).sort();
+    this._toggleMenu = this._toggleMenu.bind(this);
+    this._closeMenu = this._closeMenu.bind(this);
+
+    this.state = { menuOpen: false };
+  }
+
+  /**
+   * Update ship
+   * @param {object} ship  the ship
+   * @param {string} build   the build, if present
+   */
+  _shipChange(ship, build) {
+    this._closeMenu();
+
+    // Ensure that the ship has changed
+    if (ship !== this.props.ship || build !== this.props.build) {
+      this.props.onChange(ship, build);
+    }
+  }
+
+  /**
+   * Render the menu for the picker
+   * @returns {object}    the picker menu
+   */
+  _renderPickerMenu() {
+    const { ship, build } = this.props;
+    const _shipChange = this._shipChange;
+    const builds = Persist.getBuilds();
+    const buildList = [];
+    for (let shipId of this.shipOrder) {
+      const shipBuilds = [];
+      // Add stock build
+      const stockSelected = (ship == shipId && !build);
+      shipBuilds.push(<li key={shipId} className={ cn({ 'selected': stockSelected })} onClick={_shipChange.bind(this, shipId, null)}>Stock</li>);
+      if (builds[shipId]) {
+        let buildNameOrder = Object.keys(builds[shipId]).sort();
+        for (let buildName of buildNameOrder) {
+          const buildSelected = ship === shipId && build === buildName;
+          shipBuilds.push(<li key={shipId + '-' + buildName} className={ cn({ 'selected': buildSelected })} onClick={_shipChange.bind(this, shipId, buildName)}>{buildName}</li>);
+        }
+      }
+      buildList.push(<ul key={shipId} className='block'>{Ships[shipId].properties.name}{shipBuilds}</ul>);
+    }
+
+    return buildList;
+  }
+
+  /**
+   * Toggle the menu state
+   */
+  _toggleMenu() {
+    const { menuOpen } = this.state;
+    this.setState({ menuOpen: !menuOpen });
+  }
+
+  /**
+   * Close the menu
+   */
+  _closeMenu() {
+    const { menuOpen } = this.state;
+    if (menuOpen) {
+      this._toggleMenu();
+    }
+  }
+
+  /**
+   * Render picker
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { ship, build } = this.props;
+    const { menuOpen } = this.state;
+
+    const shipString = ship + ': ' + (build ? build : translate('stock'));
+    return (
+      <div className='shippicker' onClick={ (e) => e.stopPropagation() }>
+        <div className='menu'>
+          <div className={cn('menu-header', { selected: menuOpen })} onClick={this._toggleMenu}>
+            <span><Rocket className='warning' /></span>
+            <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>
+      </div>
+    );
+  }
+}

src/app/components/ShipSelector.jsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Ships } from 'coriolis-data/dist';
-import TranslatedComponent from './TranslatedComponent';
-import { Rocket } from './SvgIcons';
-
-/**
- * Selector for ships
- */
-export default class ShipSelector extends TranslatedComponent {
-  static PropTypes = {
-    initial: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = { ship : this.props.initial };
-  }
-
-  /**
-   * Generate the ships menu
-   * @return {React.Component} Menu
-   */
-  _getShipsMenu() {
-    const _selectShip = this._selectShip;
-    const _openMenu = this._openMenu;
-
-    let shipList = [];
-
-    for (let s in Ships) {
-      shipList.push(<div key={s} onClick={_selectShip.bind(this, s)} className='block' >{Ships[s].properties.name}</div>);
-    }
-
-    return shipList;
-  }
-
-  /**
-   * Handle opening the menu
-   * @param  {string}         menu  The ID of the opened menu
-   * @param  {SyntheticEvent} event Event
-   */
-  _openMenu(menu, event) {
-    event.stopPropagation();
-    if (this.props.currentMenu == menu) {
-      menu = null;
-    }
-
-    this.context.openMenu(menu);
-  }
-
-  /**
-   * Handle selection of a ship
-   * @param {string} s  The selected ship ID
-   */
-  _selectShip(s) {
-    this.setState({ ship: Ships[s] });
-
-    this.context.openMenu(null);
-    this.props.onChange(s);
-  }
-
-  /**
-   * Render ship selector
-   * @return {React.Component} contents
-   */
-  render() {
-    const currentMenu = this.props.currentMenu;
-    const ship = this.state.ship;
-
-    return (
-      <div className='shipselector'>
-      <div className='menu'>
-        <div className={cn('menu-header', { selected: currentMenu == 'wds' })} onClick={this._openMenu.bind(this, 'wds')}>
-          <Rocket className='warning' /><span className='menu-item-label'>{ship.properties.name}</span>
-	  {currentMenu == 'wds' ? 
-          <div className='menu-list quad no-wrap' onClick={ (e) => e.stopPropagation() }>
-            {this._getShipsMenu()}
-          </div> : null }
-        </div>
-      </div>
-      </div>
-    );
-  }
-}

src/app/components/ShipSummaryTable.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
-import { SizeMap } from '../shipyard/Constants';
 import { Warning } from './SvgIcons';
+import * as Calc from '../shipyard/Calculations';
 
 /**
  * Ship Summary Table / Stats
@@ -10,86 +11,210 @@ import { Warning } from './SvgIcons';
 export default class ShipSummaryTable extends TranslatedComponent {
 
   static propTypes = {
-    ship: React.PropTypes.object.isRequired
+    ship: PropTypes.object.isRequired,
+    cargo: PropTypes.number.isRequired,
+    fuel: PropTypes.number.isRequired,
+    marker: PropTypes.string.isRequired,
+    pips: PropTypes.object.isRequired
   };
 
+  /**
+   * The ShipSummaryTable constructor
+   * @param {Object} props The props
+   */
+  constructor(props) {
+    super(props);
+    this.didContextChange = this.didContextChange.bind(this);
+    this.state = {
+      shieldColour: 'blue'
+    };
+  }
+
   /**
    * Render the table
    * @return {React.Component} Summary table
    */
   render() {
-    let ship = this.props.ship;
+    const { ship, cargo, fuel, pips } = this.props;
     let { language, tooltip, termtip } = this.context;
     let translate = language.translate;
     let u = language.units;
     let formats = language.formats;
-    let { time, int, round, f1, f2, pct } = formats;
-    let sgClassNames = cn({ warning: ship.findInternalByGroup('sg') && !ship.shield, muted: !ship.findInternalByGroup('sg') });
-    let sgRecover = '-';
-    let sgRecharge = '-';
+    let { time, int, round, f1, f2 } = formats;
     let hide = tooltip.bind(null, null);
-
-    if (ship.shield) {
-      sgRecover = time(ship.calcShieldRecovery());
-      sgRecharge = time(ship.calcShieldRecharge());
+    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 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';
+    if (shieldGenerator && shieldGenerator.m.grp === 'psg') {
+      shieldColour = 'green';
+    } else if (shieldGenerator && shieldGenerator.m.grp === 'bsg') {
+      shieldColour = 'purple';
     }
-
+    this.state = {
+      shieldColour
+    };
     return <div id='summary'>
-      <table id='summaryTable'>
-        <thead>
-          <tr className='main'>
-            <th rowSpan={2} className={ cn({ 'bg-warning-disabled': !ship.canThrust() }) }>{translate('speed')}</th>
-            <th rowSpan={2} className={ cn({ 'bg-warning-disabled': !ship.canBoost() }) }>{translate('boost')}</th>
-            <th onMouseEnter={termtip.bind(null, 'damage per second')} onMouseLeave={hide} rowSpan={2}>{translate('DPS')}</th>
-            <th onMouseEnter={termtip.bind(null, 'energy per second')} onMouseLeave={hide} rowSpan={2}>{translate('EPS')}</th>
-            <th onMouseEnter={termtip.bind(null, 'heat per second')} onMouseLeave={hide} rowSpan={2}>{translate('HPS')}</th>
-            <th rowSpan={2}>{translate('hardness')}</th>
-            <th rowSpan={2}>{translate('armour')}</th>
-            <th rowSpan={2}>{translate('shields')}</th>
-            <th colSpan={3}>{translate('mass')}</th>
-            <th rowSpan={2}>{translate('cargo')}</th>
-            <th rowSpan={2}>{translate('fuel')}</th>
-            <th colSpan={3}>{translate('jump range')}</th>
-            <th onMouseEnter={termtip.bind(null, 'PHRASE_FASTEST_RANGE')} onMouseLeave={hide} colSpan={3}>{translate('fastest range')}</th>
-            <th onMouseEnter={termtip.bind(null, 'mass lock factor')} onMouseLeave={hide} rowSpan={2}>{translate('MLF')}</th>
-          </tr>
-          <tr>
-            <th className='lft'>{translate('hull')}</th>
-            <th onMouseEnter={termtip.bind(null, 'PHRASE_UNLADEN', { cap: 0 })} onMouseLeave={hide}>{translate('unladen')}</th>
-            <th onMouseEnter={termtip.bind(null, 'PHRASE_LADEN', { cap: 0 })} onMouseLeave={hide}>{translate('laden')}</th>
-            <th className='lft'>{translate('max')}</th>
-            <th>{translate('full tank')}</th>
-            <th>{translate('laden')}</th>
-            <th className='lft'>{translate('jumps')}</th>
-            <th>{translate('unladen')}</th>
-            <th>{translate('laden')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{ ship.canThrust() ? <span>{int(ship.topSpeed)} {u['m/s']}</span> : <span className='warning'>0 <Warning/></span> }</td>
-            <td>{ ship.canBoost() ? <span>{int(ship.topBoost)} {u['m/s']}</span> : <span className='warning'>0 <Warning/></span> }</td>
-            <td>{f1(ship.totalDps)}</td>
-            <td>{f1(ship.totalEps)}</td>
-            <td>{f1(ship.totalHps)}</td>
-            <td>{int(ship.hardness)}</td>
-            <td>{int(ship.armour)}</td>
-            <td className={sgClassNames}>{int(ship.shield)} {u.MJ}</td>
-            <td>{ship.hullMass} {u.T}</td>
-            <td>{int(ship.unladenMass)} {u.T}</td>
-            <td>{int(ship.ladenMass)} {u.T}</td>
-            <td>{round(ship.cargoCapacity)} {u.T}</td>
-            <td>{round(ship.fuelCapacity)} {u.T}</td>
-            <td>{f2(ship.unladenRange)} {u.LY}</td>
-            <td>{f2(ship.fullTankRange)} {u.LY}</td>
-            <td>{f2(ship.ladenRange)} {u.LY}</td>
-            <td>{int(ship.maxJumpCount)}</td>
-            <td>{f2(ship.unladenFastestRange)} {u.LY}</td>
-            <td>{f2(ship.ladenFastestRange)} {u.LY}</td>
-            <td>{ship.masslock}</td>
-          </tr>
-        </tbody>
-      </table>
+      <div style={{display: "table", width: "100%"}}>
+        <div style={{display: "table-row"}}>
+          <table className={'summaryTable'}>
+            <thead>
+              <tr className='main'>
+                <th rowSpan={2} className={ cn({ 'bg-warning-disabled': !canThrust }) }>{translate('speed')}</th>
+                <th rowSpan={2} className={ cn({ 'bg-warning-disabled': !canBoost }) }>{translate('boost')}</th>
+                <th 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>
+                <th rowSpan={2}>{translate('EPS')}</th>
+                <th rowSpan={2}>{translate('TTD')}</th>
+                {/* <th onMouseEnter={termtip.bind(null, 'heat per second')} onMouseLeave={hide} rowSpan={2}>{translate('HPS')}</th> */}
+                <th rowSpan={2}>{translate('cargo')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'passenger capacity', { cap: 0 })} onMouseLeave={hide}>{translate('pax')}</th>
+                <th rowSpan={2}>{translate('fuel')}</th>
+                <th colSpan={3}>{translate('mass')}</th>
+                <th onMouseEnter={termtip.bind(null, 'hull hardness', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('hrd')}</th>
+                <th rowSpan={2}>{translate('crew')}</th>
+                <th onMouseEnter={termtip.bind(null, 'mass lock factor', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('MLF')}</th>
+                <th rowSpan={2}>{translate('resting heat (Beta)')}</th>
+              </tr>
+              <tr>
+                <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td onMouseEnter={termtip.bind(null, speedTooltip, { cap: 0 })} onMouseLeave={hide}>{ canThrust ? <span>{int(ship.calcSpeed(4, ship.fuelCapacity, 0, false))}{u['m/s']}</span> : <span className='warning'>0 <Warning/></span> }</td>
+                <td onMouseEnter={termtip.bind(null, boostTooltip, { cap: 0 })} onMouseLeave={hide}>{ canBoost ? <span>{int(ship.calcSpeed(4, ship.fuelCapacity, 0, true))}{u['m/s']}</span> : <span className='warning'>0 <Warning/></span> }</td>
+                <td>{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.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.fuelCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_SINGLE_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.jumpRange(ship.unladenMass + ship.fuelCapacity + ship.cargoCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_UNLADEN_TOTAL_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.totalJumpRange(ship.unladenMass + ship.fuelCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_LADEN_TOTAL_JUMP', { cap: 0 })} onMouseLeave={hide}>{ canJump ? <span>{f2(Calc.totalJumpRange(ship.unladenMass + ship.fuelCapacity + ship.cargoCapacity, ship.standard[2].m, ship.fuelCapacity, ship))}{u.LY}</span> : <span className='warning'>0 <Warning/></span> }</td>
+                <td className={sgClassNames} onMouseEnter={termtip.bind(null, sgTooltip, { cap: 0 })} onMouseLeave={hide}>{int(ship.shield)}{u.MJ}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_INTEGRITY', { cap: 0 })} onMouseLeave={hide}>{int(ship.armour)}</td>
+                <td onMouseEnter={termtip.bind(null, 'TT_SUMMARY_DPS', { cap: 0 })} onMouseLeave={hide}>{f1(ship.totalDps)}</td>
+                <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>{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>
+          <table className={'summaryTable'}>
+            <thead className={this.state.shieldColour}>
+              <tr>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'shield', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('shield')}</th>
+                <th colSpan={4} className='lft'>{translate('resistance')}</th>
+
+                <th colSpan={5} onMouseEnter={termtip.bind(null, 'TT_SUMMARY_SHIELDS_SCB', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('HP')}`}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECOVER', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recovery')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'PHRASE_SG_RECHARGE', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('recharge')}</th>
+              </tr>
+              <tr>
+                <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th></th>
+
+                <th className={'bordered'}>{`${translate('absolute')}`}</th>
+                <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <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(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>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'armour', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('armour')}</th>
+                <th colSpan={4} className='lft'>{translate('resistance')}</th>
+
+                <th colSpan={5} onMouseEnter={termtip.bind(null, 'PHRASE_EFFECTIVE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{`${translate('HP')}`}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'TT_MODULE_ARMOUR', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('raw module armour')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'TT_MODULE_PROTECTION_INTERNAL', { cap: 0 })} onMouseLeave={hide} className='lft'>{translate('internal protection')}</th>
+              </tr>
+              <tr>
+              <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th>{`${translate('caustic')}`}</th>
+
+                <th className={'bordered'}>{`${translate('absolute')}`}</th>
+                <th>{`${translate('explosive')}`}</th>
+                <th>{`${translate('kinetic')}`}</th>
+                <th>{`${translate('thermal')}`}</th>
+                <th>{`${translate('caustic')}`}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>{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>
+        </div>
+      </div>
     </div>;
   }
 }

src/app/components/Slider.jsx

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

src/app/components/Slot.jsx

@@ -1,13 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
 import AvailableModulesMenu from './AvailableModulesMenu';
 import ModificationsMenu from './ModificationsMenu';
-import { Modifications } from 'coriolis-data/dist';
-import { ListModifications } from './SvgIcons';
 import { diffDetails } from '../utils/SlotFunctions';
 import { wrapCtxMenu } from '../utils/UtilityFunctions';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
 /**
  * Abstract Slot
@@ -15,18 +13,19 @@ import { stopCtxPropagation } from '../utils/UtilityFunctions';
 export default class Slot extends TranslatedComponent {
 
   static propTypes = {
-    availableModules: React.PropTypes.func.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
-    onOpen: React.PropTypes.func.isRequired,
-    maxClass: React.PropTypes.number.isRequired,
-    selected: React.PropTypes.bool,
-    m: React.PropTypes.object,
-    ship: React.PropTypes.object.isRequired,
-    eligible: React.PropTypes.object,
-    warning: React.PropTypes.func,
-    drag: React.PropTypes.func,
-    drop: React.PropTypes.func,
-    dropClass: React.PropTypes.string
+    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
   };
 
   /**
@@ -40,6 +39,8 @@ export default class Slot extends TranslatedComponent {
 
     this._contextMenu = wrapCtxMenu(this._contextMenu.bind(this));
     this._getMaxClassLabel = this._getMaxClassLabel.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this.slotDiv = null;
   }
 
   // Must be implemented by subclasses:
@@ -73,6 +74,22 @@ export default class Slot extends TranslatedComponent {
     this.props.onSelect(null,null);
   }
 
+  /** Key Down handler
+   *  @param {SyntheticEvent} event Event
+   *  ToDo: see if this can be moved up
+   *  we do more or less the same thing
+   *  in every section when Enter key is pressed
+   *  on a focusable item
+   *
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      if(event.target.className == 'r') {
+        this._toggleModifications();
+      }
+      this.props.onOpen(event);
+    }
+  }
   /**
    * Render the slot
    * @return {React.Component} The slot
@@ -80,8 +97,9 @@ export default class Slot extends TranslatedComponent {
   render() {
     let language = this.context.language;
     let translate = language.translate;
-    let { ship, m, dropClass, dragOver, onOpen, onChange, selected, eligible, onSelect, warning, availableModules } = this.props;
-    let slotDetails, menu;
+    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
@@ -89,9 +107,16 @@ export default class Slot extends TranslatedComponent {
     }
 
     if (m) {
-      slotDetails = this._getSlotDetails(m, translate, language.formats, language.units);  // Must be implemented by sub classes
+      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) {
@@ -101,33 +126,40 @@ export default class Slot extends TranslatedComponent {
           onChange={onChange}
           ship={ship}
           m={m}
+          marker={modificationsMarker}
+          modButton = {this.modButton}
         />;
       } else {
         menu = <AvailableModulesMenu
           className={this._getClassNames()}
           modules={availableModules()}
-          shipMass={ship.hullMass}
           m={m}
+          ship={ship}
           onSelect={onSelect}
           warning={warning}
           diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
         />;
       }
     }
 
     // TODO: implement touch dragging
-
+    
     return (
-      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onContextMenu={this._contextMenu} onDragOver={dragOver}>
-        <div className='details-container'>
+      <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>
+  	    </div>
         {menu}
       </div>
     );
   }
 
+
   /**
    * Toggle the modifications flag when selecting the modifications icon
    */

src/app/components/SlotSection.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import { wrapCtxMenu } from '../utils/UtilityFunctions';
 import { canMount } from '../utils/SlotFunctions';
 import { Equalizer } from '../components/SvgIcons';
 import cn from 'classnames';
+const browser = require('detect-browser');
 
 /**
  * Abstract Slot Section
@@ -11,10 +13,13 @@ import cn from 'classnames';
 export default class SlotSection extends TranslatedComponent {
 
   static propTypes = {
-    ship: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    code: React.PropTypes.string.isRequired,
-    togglePwr: React.PropTypes.func
+    ship: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onCargoChange: PropTypes.func.isRequired,
+    onFuelChange: PropTypes.func.isRequired,
+    code: PropTypes.string.isRequired,
+    togglePwr: PropTypes.func,
+    sectionMenuRefs: PropTypes.object
   };
 
   /**
@@ -28,7 +33,10 @@ export default class SlotSection extends TranslatedComponent {
     super(props);
     this.sectionId = sectionId;
     this.sectionName = sectionName;
+    this.ssHeadRef = null;
 
+    this.sectionRefArr = this.props.sectionMenuRefs[this.sectionId] = [];
+    this.sectionRefArr['selectedRef'] = null;
     this._getSlots = this._getSlots.bind(this);
     this._selectModule = this._selectModule.bind(this);
     this._getSectionMenu = this._getSectionMenu.bind(this);
@@ -36,6 +44,8 @@ export default class SlotSection extends TranslatedComponent {
     this._drop = this._drop.bind(this);
     this._dragOverNone = this._dragOverNone.bind(this);
     this._close = this._close.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this._handleSectionFocus = this._handleSectionFocus.bind(this);
     this.state = {};
   }
 
@@ -43,7 +53,59 @@ export default class SlotSection extends TranslatedComponent {
   //  _getSlots()
   //  _getSectionMenu()
   //  _contextMenu()
+  //  componentDidUpdate(prevProps)
 
+  /**
+   * TODO: May either need to send the function to be triggered when Enter key is pressed, or else
+   * may need a separate keyDown handler for each subclass (StandardSlotSection, HardpointSlotSection, etc.)
+   * ex: _keyDown(_keyDownfn, event)
+   *
+   * @param {SyntheticEvent} event KeyDown event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      event.stopPropagation();
+      if (event.currentTarget.nodeName === 'H1') {
+        this._openMenu(this.sectionName, event);
+      } else {
+        event.currentTarget.click();
+      }
+      return;
+    }
+    if (event.key == 'Tab') {
+      if (event.shiftKey) {
+        if ((event.currentTarget === this.sectionRefArr[this.firstRefId]) && this.sectionRefArr[this.lastRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.lastRefId].focus();
+        }
+      } else {
+        if ((event.currentTarget === this.sectionRefArr[this.lastRefId]) &&  this.sectionRefArr[this.firstRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.firstRefId].focus();
+        }
+      }
+    }
+  }
+
+  /**
+   * Set focus on appropriate Slot Section Menu element
+   * @param {Object} focusPrevProps prevProps for componentDidUpdate() from ...SlotSection.jsx
+   * @param {String} firstRef id of the first ref in ...SlotSection.jsx
+   * @param {String} lastRef id of the last ref in ...SlotSection.jsx
+   *
+   */
+  _handleSectionFocus(focusPrevProps, firstRef, lastRef) {
+    if (this.selectedRefId !== null && this.sectionRefArr[this.selectedRefId]) {
+      // set focus on the previously selected option for the currently open section menu
+      this.sectionRefArr[this.selectedRefId].focus();
+    } else if (this.sectionRefArr[firstRef] && this.sectionRefArr[firstRef] != null) {
+      // set focus on the first option in the currently open section menu if none have been selected previously
+      this.sectionRefArr[firstRef].focus();
+    }  else if (this.props.currentMenu == null && focusPrevProps.currentMenu == this.sectionName && this.sectionRefArr['ssHeadRef']) {
+      // set focus on the section menu header when section menu is closed
+      this.sectionRefArr['ssHeadRef'].focus();
+    }
+  }
   /**
    * Open a menu
    * @param  {string} menu    Menu name
@@ -64,7 +126,7 @@ export default class SlotSection extends TranslatedComponent {
    * @param  {Object} m    Selected module
    */
   _selectModule(slot, m) {
-    this.props.ship.use(slot, m);
+    this.props.ship.use(slot, m, false);
     this.props.onChange();
     this._close();
   }
@@ -75,8 +137,10 @@ export default class SlotSection extends TranslatedComponent {
    * @param  {Event} e           Drag Event
    */
   _drag(originSlot, e) {
-    e.dataTransfer.setData('text/html', e.currentTarget);
-    e.dataTransfer.effectAllowed = 'all';
+    if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
+      e.dataTransfer.setData('text/html', e.currentTarget);
+    }
+    e.dataTransfer.effectAllowed = 'copyMove';
     this.setState({ originSlot, copy: e.getModifierState('Alt') });
     this._close();
   }
@@ -93,10 +157,14 @@ export default class SlotSection extends TranslatedComponent {
     if (os) {
       // Show correct icon
       const effect = this.state.copy ? 'copy' : 'move';
-      e.dataTransfer.dropEffect = os != targetSlot && canMount(this.props.ship, targetSlot, os.m.grp, os.m.class) ? effect : 'none';
+      if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
+        e.dataTransfer.dropEffect = os != targetSlot && canMount(this.props.ship, targetSlot, os.m.grp, os.m.class) ? effect : 'none';
+      }
       this.setState({ targetSlot });
     } else {
-      e.dataTransfer.dropEffect = 'none';
+      if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
+        e.dataTransfer.dropEffect = 'none';
+      }
     }
   }
 
@@ -106,7 +174,9 @@ export default class SlotSection extends TranslatedComponent {
    */
   _dragOverNone(e) {
     e.preventDefault();
-    e.dataTransfer.dropEffect = 'none';
+    if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
+      e.dataTransfer.dropEffect = 'none';
+    }
     this.setState({ targetSlot: null });
   }
 
@@ -119,24 +189,67 @@ export default class SlotSection extends TranslatedComponent {
     let { originSlot, targetSlot, copy } = this.state;
     let m = originSlot.m;
 
-    if (copy) {
-      // We want to copy the module in to the target slot
-      if (targetSlot && canMount(this.props.ship, targetSlot, m.grp, m.class)) {
-        const mCopy = m.clone();
-        this.props.ship.use(targetSlot, mCopy);
-        this.props.onChange();
-      }
-    } else {
-      // We want to move the module in to the target slot, and swap back any module that was originally in the target slot
-      if (targetSlot && m && canMount(this.props.ship, targetSlot, m.grp, m.class)) {
-        // Swap modules if possible
-        if (targetSlot.m && canMount(this.props.ship, originSlot, targetSlot.m.grp, targetSlot.m.class)) {
-          this.props.ship.use(originSlot, targetSlot.m, true);
-        } else { // Otherwise empty the  origin slot
-          this.props.ship.use(originSlot, null, true);  // Empty but prevent summary update
+    if (targetSlot && originSlot != targetSlot) {
+      if (copy) {
+        // We want to copy the module in to the target slot
+        if (targetSlot && canMount(this.props.ship, targetSlot, m.grp, m.class)) {
+          const mCopy = m.clone();
+          this.props.ship.use(targetSlot, mCopy, false);
+          let experimentalNum = this.props.ship.hardpoints
+            .filter(s => s.m && s.m.experimental).length;
+          // Remove the module on the last slot if we now exceed the number of
+          // experimentals allowed
+          if (m.experimental && 4 < experimentalNum) {
+            this.props.ship.updateStats(originSlot, null, originSlot.m);
+            originSlot.m = null;  // Empty the slot
+            originSlot.discountedCost = 0;
+          }
+          // Copy power info
+          targetSlot.enabled = originSlot.enabled;
+          targetSlot.priority = originSlot.priority;
+          this.props.onChange();
+        }
+      } else {
+        // Store power info
+        const originEnabled = targetSlot.enabled;
+        const originPriority = targetSlot.priority;
+        const targetEnabled = originSlot.enabled;
+        const targetPriority = originSlot.priority;
+        // We want to move the module in to the target slot, and swap back any module that was originally in the target slot
+        if (targetSlot && m && canMount(this.props.ship, targetSlot, m.grp, m.class)) {
+          // Swap modules if possible
+          if (targetSlot.m && canMount(this.props.ship, originSlot, targetSlot.m.grp, targetSlot.m.class)) {
+            this.props.ship.use(originSlot, targetSlot.m, true);
+            this.props.ship.use(targetSlot, m);
+            // Swap power
+            originSlot.enabled = originEnabled;
+            originSlot.priority = originPriority;
+            targetSlot.enabled = targetEnabled;
+            targetSlot.priority = targetPriority;
+          } else { // Otherwise empty the origin slot
+            // Store power
+            const targetEnabled = originSlot.enabled;
+            this.props.ship.use(originSlot, null, true);  // Empty but prevent summary update
+            this.props.ship.use(targetSlot, m);
+            originSlot.enabled = 0;
+            originSlot.priority = 0;
+            targetSlot.enabled = targetEnabled;
+            targetSlot.priority = targetPriority;
+          }
+          this.props.onChange();
+          this.props.ship
+            .updatePowerGenerated()
+            .updatePowerUsed()
+            .recalculateMass()
+            .updateJumpStats()
+            .recalculateShield()
+            .recalculateShieldCells()
+            .recalculateArmour()
+            .recalculateDps()
+            .recalculateEps()
+            .recalculateHps()
+            .updateMovement();
         }
-        this.props.ship.use(targetSlot, m); // update target slot
-        this.props.onChange();
       }
     }
     this.setState({ originSlot: null, targetSlot: null, copy: null });
@@ -191,7 +304,7 @@ export default class SlotSection extends TranslatedComponent {
     return (
       <div id={this.sectionId} className={'group'}  onDragLeave={this._dragOverNone}>
         <div className={cn('section-menu', { selected: sectionMenuOpened })} onClick={open} onContextMenu={ctx}>
-          <h1>{translate(this.sectionName)} <Equalizer/></h1>
+          <h1 tabIndex="0" onKeyDown={this._keyDown} ref={ssHead => this.sectionRefArr['ssHeadRef'] = ssHead}>{translate(this.sectionName)} <Equalizer/></h1>
           {sectionMenuOpened ? this._getSectionMenu(translate, this.props.ship) : null }
         </div>
         {this._getSlots()}

src/app/components/StandardSlot.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import Persist from '../stores/Persist';
 import TranslatedComponent from './TranslatedComponent';
-import { jumpRange } from '../shipyard/Calculations';
 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
@@ -16,14 +18,14 @@ import { stopCtxPropagation } from '../utils/UtilityFunctions';
 export default class StandardSlot extends TranslatedComponent {
 
   static propTypes = {
-    slot: React.PropTypes.object,
-    modules: React.PropTypes.array.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
-    onOpen: React.PropTypes.func.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    ship: React.PropTypes.object.isRequired,
-    selected: React.PropTypes.bool,
-    warning: React.PropTypes.func,
+    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,
   };
 
   /**
@@ -33,6 +35,21 @@ export default class StandardSlot extends TranslatedComponent {
   constructor(props) {
     super(props);
     this._modificationsSelected = false;
+    this._keyDown = this._keyDown.bind(this);
+    this.modButton = null;
+    this.slotDiv = null;
+  }
+  /**
+   * Handle Enter key
+   * @param {SyntheticEvent} event KeyDown event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      if(event.target.className == 'r') {
+        this._toggleModifications();
+      }
+      this.props.onOpen(event);
+    }
   }
 
   /**
@@ -46,7 +63,13 @@ export default class StandardSlot extends TranslatedComponent {
     let m = slot.m;
     let classRating = m.class + m.rating;
     let menu;
-    let validMods = m == null ? [] : (Modifications.modules[m.grp].modifications || []);
+    let validMods = m == null || !Modifications.modules[m.grp] ? [] : (Modifications.modules[m.grp].modifications || []);
+    if (m && m.name && m.name === 'Guardian Hybrid Power Plant') {
+      validMods = [];
+    }
+    if (m && m.name && m.name === 'Guardian Power Distributor') {
+      validMods = [];
+    }
     let showModuleResistances = Persist.showModuleResistances();
     let mass = m.getMass() || m.cargo || m.fuel || 0;
 
@@ -54,6 +77,15 @@ export default class StandardSlot extends TranslatedComponent {
     let modTT = translate('modified');
     if (m && m.blueprint && m.blueprint.name) {
       modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+      if (m.blueprint.special && m.blueprint.special.id >= 0) {
+        modTT += ', ' + translate(m.blueprint.special.name);
+      }
+      modTT = (
+          <div>
+            <div>{modTT}</div>
+            {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], null, m.grp, m)}
+          </div>
+        );
     }
 
     if (!selected) {
@@ -61,6 +93,13 @@ export default class StandardSlot extends TranslatedComponent {
       this._modificationsSelected = false;
     }
 
+    // If this is a missing module, therefore has the 'info' field, set the warning value on the module to be true when loaded.
+    if (m.info) {
+      warning = () => true;
+    }
+
+    const modificationsMarker = JSON.stringify(m);
+
     if (selected) {
       if (this._modificationsSelected) {
         menu = <ModificationsMenu
@@ -68,32 +107,37 @@ export default class StandardSlot extends TranslatedComponent {
           onChange={onChange}
           ship={ship}
           m={m}
+          marker={modificationsMarker}
+          modButton = {this.modButton}
         />;
       } else {
         menu = <AvailableModulesMenu
           className='standard'
           modules={modules}
-          shipMass={ship.ladenMass}
           m={m}
+          ship={ship}
           onSelect={onSelect}
           warning={warning}
           diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
         />;
       }
     }
 
     return (
-      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onContextMenu={stopCtxPropagation}>
-        <div className={cn('details-container', { warning: warning && warning(slot.m) })}>
-          <div className={'sz'}>{slot.maxClass}</div>
+      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onKeyDown={this._keyDown} onContextMenu={stopCtxPropagation} tabIndex="0" ref={ slotDiv => this.slotDiv = slotDiv }>
+        <div className={cn('details-container', { warning: warning && warning(slot.m), disabled: m.grp !== 'bh' && !slot.enabled })}>
+          <div className={'sz'}>{m.grp == 'bh' ? m.name.charAt(0) : slot.maxClass}</div>
           <div>
-            <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
+            <div className={'l'}>{classRating} {m.getInfo() ? translate(m.ukName) : translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
             <div className={'r'}>{formats.round(mass)}{units.T}</div>
 	    <div/>
             <div className={'cb'}>
-                { m.getOptimalMass() ? <div className='l'>{translate('optimal mass')}: {formats.int(m.getOptimalMass())}{units.T}</div> : null }
-                { m.getMaxMass() ? <div className='l'>{translate('max mass')}: {formats.int(m.getMaxMass())}{units.T}</div> : null }
-                { m.getRange() ? <div className='l'>{translate('range')}: {formats.f2(m.getRange())}{units.km}</div> : null }
+                { 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 }
@@ -104,8 +148,9 @@ export default class StandardSlot extends TranslatedComponent {
                 { 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 }
-
-	        { validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+                { m.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>

src/app/components/StandardSlotSection.jsx

@@ -3,7 +3,6 @@ import cn from 'classnames';
 import SlotSection from './SlotSection';
 import StandardSlot from './StandardSlot';
 import Module from '../shipyard/Module';
-import { diffDetails } from '../utils/SlotFunctions';
 import * as ShipRoles from '../shipyard/ShipRoles';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
@@ -21,14 +20,27 @@ export default class StandardSlotSection extends SlotSection {
     super(props, context, 'standard', 'core internal');
     this._optimizeStandard = this._optimizeStandard.bind(this);
     this._selectBulkhead = this._selectBulkhead.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'maxjump';
+    this.lastRefId = 'racer';
+  }
+  /**
+   * Handle focus if the component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Use the lightest/optimal available standard modules
    */
   _optimizeStandard() {
+    this.selectedRefId = 'maxjump';
     this.props.ship.useLightestStandard();
     this.props.onChange();
+    this.props.onCargoChange(this.props.ship.cargoCapacity);
+    this.props.onFuelChange(this.props.ship.fuelCapacity);
     this._close();
   }
 
@@ -38,8 +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();
   }
 
@@ -48,8 +64,24 @@ 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();
+  }
+
+  /**
+   * Miner Build
+   * @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();
   }
 
@@ -58,8 +90,24 @@ 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();
+  }
+
+  /**
+   * 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();
   }
 
@@ -86,7 +134,7 @@ export default class StandardSlotSection extends SlotSection {
    * @return {Array} Array of Slots
    */
   _getSlots() {
-    let { ship, currentMenu } = this.props;
+    let { ship, currentMenu, cargo, fuel } = this.props;
     let slots = new Array(8);
     let open = this._openMenu;
     let select = this._selectModule;
@@ -126,7 +174,7 @@ export default class StandardSlotSection extends SlotSection {
       selected={currentMenu == st[1]}
       onChange={this.props.onChange}
       ship={ship}
-      warning={m => m instanceof Module ? m.getMaxMass() < (ship.ladenMass - st[1].mass + m.mass) : m.maxmass < (ship.ladenMass - st[1].mass + m.mass)}
+      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)}
     />;
 
 
@@ -199,16 +247,17 @@ export default class StandardSlotSection extends SlotSection {
     let planetaryDisabled = this.props.ship.internal.length < 4;
     return <div className='select' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._optimizeStandard}>{translate('Maximize Jump Range')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeStandard} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['maxjump'] = smRef}>{translate('Maximize Jump Range')}</li>
       </ul>
       <div className='select-group cap'>{translate('roles')}</div>
       <ul>
-        <li className='lc' onClick={this._multiPurpose.bind(this, false, 0)}>{translate('Multi-purpose')}</li>
-        <li className='lc' onClick={this._multiPurpose.bind(this, true, 2)}>{translate('Combat')}</li>
-        <li className='lc' onClick={this._optimizeCargo.bind(this, false)}>{translate('Trader')}</li>
-        <li className='lc' onClick={this._optimizeCargo.bind(this, true)}>{translate('Shielded Trader')}</li>
-        <li className='lc' onClick={this._optimizeExplorer.bind(this, false)}>{translate('Explorer')}</li>
-        <li className={cn('lc', { disabled:  planetaryDisabled })} onClick={!planetaryDisabled && this._optimizeExplorer.bind(this, true)}>{translate('Planetary Explorer')}</li>
+        <li className='lc' tabIndex="0" onClick={this._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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { shallowEqual } from '../utils/UtilityFunctions';
 
@@ -8,8 +9,8 @@ import { shallowEqual } from '../utils/UtilityFunctions';
 class SvgIcon extends React.Component {
 
   static propTypes = {
-    className: React.PropTypes.any,
-    style: React.PropTypes.object
+    className: PropTypes.any,
+    style: PropTypes.object
   };
 
   /**
@@ -227,6 +228,117 @@ export class LinkIcon extends SvgIcon {
   }
 }
 
+/**
+ * Link / Permalink / Chain
+ */
+export class OrbisIcon extends SvgIcon {
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return (
+      <g transform="scale(.037296)">
+        <path d="m429 319c60.75 0 110 49.248 110 110 0 60.75-49.247 110-110 110s-110-49.247-110-110c0-60.749 49.248-110 110-110m0-20c-34.724 0-67.369 13.522-91.922 38.075s-38.075 57.198-38.075 91.922 13.522 67.369 38.075 91.922c24.553 24.554 57.198 38.075 91.922 38.075s67.369-13.521 91.922-38.075c24.554-24.553 38.075-57.198 38.075-91.922s-13.521-67.369-38.075-91.922c-24.553-24.553-57.198-38.075-91.922-38.075z" />
+        <path d="m429 235c107.14 0 194 86.855 194 194s-86.855 194-194 194-194-86.855-194-194 86.855-194 194-194m0-20c-28.881 0-56.908 5.661-83.304 16.825-25.485 10.779-48.368 26.207-68.016 45.853-19.646 19.647-35.074 42.53-45.853 68.015-11.163 26.396-16.824 54.423-16.824 83.304s5.661 56.908 16.825 83.304c10.779 25.484 26.207 48.368 45.853 68.016 19.647 19.646 42.53 35.073 68.015 45.854 26.396 11.164 54.423 16.825 83.304 16.825s56.908-5.661 83.304-16.825c25.484-10.779 48.368-26.206 68.016-45.854 19.646-19.646 35.073-42.53 45.854-68.016 11.164-26.396 16.825-54.423 16.825-83.304s-5.661-56.908-16.825-83.304c-10.779-25.485-26.206-48.368-45.854-68.015-19.646-19.646-42.53-35.074-68.016-45.853-26.396-11.164-54.423-16.825-83.304-16.825z" />
+        <path d="m429 63c202.14 0 366 163.86 366 366s-163.86 366-366 366-366-163.86-366-366 163.86-366 366-366m0-20c-52.101 0-102.65 10.208-150.25 30.342-45.966 19.442-87.244 47.271-122.69 82.714s-63.272 76.721-82.714 122.69c-20.134 47.601-30.342 98.153-30.342 150.25s10.208 102.65 30.342 150.25c19.442 45.967 47.271 87.244 82.714 122.69 35.443 35.442 76.721 63.271 122.69 82.715 47.601 20.133 98.153 30.342 150.25 30.342s102.65-10.209 150.25-30.342c45.967-19.442 87.244-47.271 122.69-82.715 35.441-35.442 63.271-76.721 82.714-122.69 20.133-47.601 30.342-98.153 30.342-150.25s-10.209-102.65-30.342-150.25c-19.442-45.966-47.271-87.244-82.714-122.69s-76.722-63.272-122.69-82.714c-47.601-20.134-98.153-30.342-150.25-30.342z"/>
+        <path d="m429 63c202.14 0 366 163.86 366 366s-163.86 366-366 366-366-163.86-366-366 163.86-366 366-366m0-20c-52.101 0-102.65 10.208-150.25 30.342-45.966 19.442-87.244 47.271-122.69 82.714s-63.272 76.721-82.714 122.69c-20.134 47.601-30.342 98.153-30.342 150.25s10.208 102.65 30.342 150.25c19.442 45.967 47.271 87.244 82.714 122.69 35.443 35.442 76.721 63.271 122.69 82.715 47.601 20.133 98.153 30.342 150.25 30.342s102.65-10.209 150.25-30.342c45.967-19.442 87.244-47.271 122.69-82.715 35.441-35.442 63.271-76.721 82.714-122.69 20.133-47.601 30.342-98.153 30.342-150.25s-10.209-102.65-30.342-150.25c-19.442-45.966-47.271-87.244-82.714-122.69s-76.722-63.272-122.69-82.714c-47.601-20.134-98.153-30.342-150.25-30.342z" />
+        <path d="m429 20c225.88 0 409 183.11 409 409s-183.11 409-409 409-409-183.11-409-409 183.11-409 409-409m0-20c-57.905 0-114.09 11.345-166.99 33.721-51.087 21.608-96.963 52.538-136.36 91.93s-70.321 85.269-91.93 136.36c-22.376 52.902-33.721 109.09-33.721 166.99s11.345 114.09 33.721 166.99c21.608 51.087 52.538 96.964 91.93 136.35 39.392 39.392 85.269 70.321 136.36 91.931 52.902 22.375 109.09 33.721 166.99 33.721s114.09-11.346 166.99-33.721c51.087-21.608 96.964-52.538 136.35-91.931 39.392-39.392 70.321-85.269 91.931-136.35 22.375-52.902 33.721-109.09 33.721-166.99s-11.346-114.09-33.721-166.99c-21.608-51.087-52.538-96.963-91.931-136.36-39.392-39.392-85.269-70.321-136.35-91.93-52.902-22.376-109.09-33.721-166.99-33.721z"/>
+        <path d="m155.34 679.12 173.25-190.21-15.626-13.721-170.9 190.4zm31.01 31.714 202.41-169.1-16.418-14.417-198.76 170.43z"/>
+        <path d="m702.66 178.87-173.25 190.21 15.625 13.721 170.9-190.4zm-31.01-31.714-202.41 169.1 16.418 14.417 198.76-170.43z" />
+        <rect transform="matrix(-.7071 -.7071 .7071 -.7071 429.34 1036.2)" x="387.09" y="420.77" width="84.379" height="16.859" />
+      </g>
+    );
+  }
+}
+
+
+/**
+ * Material
+ */
+export class MatIcon extends SvgIcon {
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return<g xmlns="http://www.w3.org/2000/svg">
+      <path fill="#FF7100" d="M 24.86,4.18
+           C 24.86,4.18 17.17,7.82 17.17,7.82
+             17.17,7.82 15.35,14.55 15.35,14.55
+             15.35,14.55 24.70,9.75 24.70,9.75
+             24.70,9.75 24.86,4.18 24.86,4.18 Z
+           M 32.21,17.45
+           C 32.21,17.45 26.41,11.18 26.41,11.18
+             26.41,11.18 19.51,11.51 19.51,11.51
+             19.51,11.51 26.92,19.01 26.92,19.01
+             26.92,19.01 32.21,17.45 32.21,17.45 Z
+           M 21.99,28.62
+           C 21.99,28.62 26.10,21.10 26.10,21.10
+             26.10,21.10 23.66,14.57 23.66,14.57
+             23.66,14.57 18.89,24.01 18.89,24.01
+             18.89,24.01 21.99,28.62 21.99,28.62 Z
+           M 8.33,22.24
+           C 8.33,22.24 16.67,23.87 16.67,23.87
+             16.67,23.87 22.06,19.51 22.06,19.51
+             22.06,19.51 11.70,17.84 11.70,17.84
+             11.70,17.84 8.33,22.24 8.33,22.24 Z
+           M 10.11,7.14
+           C 10.11,7.14 11.15,15.66 11.15,15.66
+             11.15,15.66 16.92,19.49 16.92,19.49
+             16.92,19.49 15.29,9.02 15.29,9.02
+             15.29,9.02 10.11,7.14 10.11,7.14 Z
+           M 27.69,2.67
+           C 27.69,2.67 35.89,16.00 35.89,16.00
+             35.89,16.00 27.69,29.33 27.69,29.33
+             27.69,29.33 11.31,29.33 11.31,29.33
+             11.31,29.33 3.11,16.00 3.11,16.00
+             3.11,16.00 11.31,2.67 11.31,2.67
+             11.31,2.67 27.67,2.67 27.67,2.67M 29.16,0.00
+           C 29.16,0.00 27.69,0.00 27.69,0.00
+             27.69,0.00 11.31,0.00 11.31,0.00
+             11.31,0.00 9.84,0.00 9.84,0.00
+             9.84,0.00 9.06,1.25 9.06,1.25
+             9.06,1.25 0.87,14.57 0.87,14.57
+             0.87,14.57 0.00,15.98 0.00,15.98
+             0.00,15.98 0.87,17.39 0.87,17.39
+             0.87,17.39 9.06,30.73 9.06,30.73
+             9.06,30.73 9.84,32.00 9.84,32.00
+             9.84,32.00 11.31,32.00 11.31,32.00
+             11.31,32.00 27.69,32.00 27.69,32.00
+             27.69,32.00 29.16,32.00 29.16,32.00
+             29.16,32.00 29.94,30.73 29.94,30.73
+             29.94,30.73 38.13,17.39 38.13,17.39
+             38.13,17.39 39.00,15.98 39.00,15.98
+             39.00,15.98 38.13,14.57 38.13,14.57
+             38.13,14.57 29.94,1.25 29.94,1.25
+             29.94,1.25 29.16,0.00 29.16,0.00
+             29.16,0.00 29.16,0.00 29.16,0.00 Z" />
+    </g>;
+  }
+}
+
+
+/**
+ * Shopping icon (dollar sign)
+ */
+export class ShoppingIcon extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <g>
+      <path d='M94 188v-17c-9-1-16-3-21-6-6-3-11-7-15-14-4-6-6-14-6-23l17-3c2 9 4 16 7 21 5 6 11 9 18 10v-56c-7-1-14-4-22-8-6-3-10-8-13-13-3-6-4-12-4-19 0-13 4-23 13-31 6-5 15-8 26-9v-8h11v8c10 1 18 4 24 9 8 6 12 15 14 26l-18 3c-1-7-4-12-7-16s-8-6-13-7v50l17 6c6 2 10 5 13 8 4 4 7 8 8 13 2 4 3 10 3 15 0 12-4 22-11 31-8 8-18 12-30 13v17H94zm0-153c-7 1-12 3-16 8-4 4-6 9-6 15s2 11 5 16c4 4 9 7 17 9V35zm11 121a28 28 0 0 0 24-28c-1-6-2-11-6-15-3-4-9-7-18-10v53z'/>
+    </g>;
+  }
+}
+
 /**
  * No Power - Lightning bolt + no entry
  */
@@ -688,6 +800,24 @@ export class Switch extends SvgIcon {
   }
 }
 
+/**
+ * Pip
+ */
+export class Pip extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <rect x='10' y='10' width='180' height='180'/>;
+  }
+}
+
 /**
  * In-game Coriolis Station logo
  */

src/app/components/Tooltip.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 
 /**
@@ -7,8 +8,8 @@ import TranslatedComponent from './TranslatedComponent';
 export default class Tooltip extends TranslatedComponent {
 
   static propTypes = {
-    rect: React.PropTypes.object.isRequired,
-    options: React.PropTypes.object
+    rect: PropTypes.object.isRequired,
+    options: PropTypes.object
   };
 
   static defaultProps = {
@@ -127,4 +128,4 @@ export default class Tooltip extends TranslatedComponent {
     </div>;
   }
 
-}
+}

src/app/components/TranslatedComponent.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { shallowEqual } from '../utils/UtilityFunctions';
 
 /**
@@ -7,15 +8,15 @@ import { shallowEqual } from '../utils/UtilityFunctions';
 export default class TranslatedComponent extends React.Component {
 
   static contextTypes = {
-    language: React.PropTypes.object.isRequired,
-    sizeRatio: React.PropTypes.number.isRequired,
-    openMenu: React.PropTypes.func.isRequired,
-    closeMenu: React.PropTypes.func.isRequired,
-    showModal: React.PropTypes.func.isRequired,
-    hideModal: React.PropTypes.func.isRequired,
-    tooltip: React.PropTypes.func.isRequired,
-    termtip: React.PropTypes.func.isRequired,
-    onWindowResize: React.PropTypes.func.isRequired
+    language: PropTypes.object.isRequired,
+    sizeRatio: PropTypes.number.isRequired,
+    openMenu: PropTypes.func.isRequired,
+    closeMenu: PropTypes.func.isRequired,
+    showModal: PropTypes.func.isRequired,
+    hideModal: PropTypes.func.isRequired,
+    tooltip: PropTypes.func.isRequired,
+    termtip: PropTypes.func.isRequired,
+    onWindowResize: PropTypes.func.isRequired
   };
 
   /**

src/app/components/UtilitySlotSection.jsx

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

src/app/components/VerticalBarChart.jsx

@@ -0,0 +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;
+    }
+  }
+}

src/app/components/WeaponDamageChart.jsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import LineChart from '../components/LineChart';
+import * as Calc from '../shipyard/Calculations';
+
+const DAMAGE_DEALT_COLORS = ['#FFFFFF', '#FF0000', '#00FF00', '#7777FF', '#FFFF00', '#FF00FF', '#00FFFF', '#777777'];
+
+/**
+ * Weapon damage chart
+ */
+export default class WeaponDamageChart extends TranslatedComponent {
+  static propTypes = {
+    ship: 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, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { maxRange } = this.state;
+    const { ship, opponent, engagementRange } = this.props;
+
+    const sortOrder = this._sortOrder;
+    const onCollapseExpand = this._onCollapseExpand;
+
+    const code = `${ship.toString()}:${opponent.toString()}`;
+
+    return (
+      <div>
+        <LineChart
+          xMax={maxRange}
+          yMax={this.state.maxDps}
+          xLabel={translate('range')}
+          xUnit={translate('m')}
+          yLabel={translate('sdps')}
+          series={this.state.weaponNames}
+          xMark={this.props.engagementRange}
+          colors={DAMAGE_DEALT_COLORS}
+          func={this.state.calcSDpsFunc}
+          points={200}
+          code={code}
+        />
+      </div>
+    );
+  }
+}

src/app/i18n/Language.jsx

@@ -6,7 +6,10 @@ import * as FR from './fr';
 import * as IT from './it';
 import * as RU from './ru';
 import * as PL from './pl';
-import d3 from 'd3';
+import * as PT from './pt';
+import * as CN from './cn';
+import * as KO from './ko';
+import * as d3 from 'd3';
 
 let fallbackTerms = EN.terms;
 
@@ -25,53 +28,60 @@ export function getLanguage(langCode) {
     case 'it': lang = IT; break;
     case 'ru': lang = RU; break;
     case 'pl': lang = PL; break;
+    case 'pt': lang = PT; break;
+    case 'cn': lang = CN; break;
+    case 'ko': lang = KO; break;
     default:
       lang = EN;
   }
 
   let currentTerms = lang.terms;
-  let d3Locale = d3.locale(lang.formats);
-  let gen = d3Locale.numberFormat('n');
+  let d3Locale = d3.formatLocale(lang.formats);
+  let gen = d3Locale.format('');
+  const round = function(x, n) { const ten_n = Math.pow(10,n); return Math.round(x * ten_n) / ten_n; };
 
   if(lang === EN) {
-    translate = (t) => { return currentTerms[t] || t; };
+    translate = (t, x) => { return currentTerms[t + '_' + x] || currentTerms[t] || t; };
   } else {
-    translate = (t) => { return currentTerms[t] || fallbackTerms[t] || t; };
+    translate = (t, x) => { return currentTerms[t + '_' + x] || currentTerms[t] || fallbackTerms[t + '_' + x] || fallbackTerms[t] || t; };
   }
 
   return {
     formats: {
-      gen,                                    // General number format (.e.g 1,001,001.1234)
-      int: d3Locale.numberFormat(',.0f'),     // Fixed to 0 decimal places (.e.g 1,001)
-      f1: d3Locale.numberFormat(',.1f'),      // Fixed to 1 decimal place (.e.g 1,001.1)
-      f2: d3Locale.numberFormat(',.2f'),      // Fixed to 2 decimal places (.e.g 1,001.10)
-      s2: d3Locale.numberFormat('.2s'),       // SI Format to 2 decimal places (.e.g 1.1k)
-      pct: d3Locale.numberFormat('.2%'),      // % to 2 decimal places (.e.g 5.40%)
-      pct1: d3Locale.numberFormat('.1%'),     // % to 1 decimal places (.e.g 5.4%)
-      r1: d3Locale.numberFormat('.1r'),       // Rounded to 1 significant number (.e.g 512 => 500, 4.122 => 4)
-      r2: d3Locale.numberFormat('.2r'),       // Rounded to 2 significant numbers (.e.g 512 => 510, 4.122 => 4.1)
-      rPct: d3.format('%'),                   // % to 0 decimal places (.e.g 5%)
-      round1: (d) => gen(d3.round(d, 1)),      // Rounded to 0-1 decimal places (.e.g 5.1, 4)
-      round: (d) => gen(d3.round(d, 2)),      // Rounded to 0-2 decimal places (.e.g 5.12, 4.1)
+      gen,                              // General number format (.e.g 1,001,001.1234)
+      int: d3Locale.format(',.0f'),     // Fixed to 0 decimal places (.e.g 1,001)
+      f1: d3Locale.format(',.1f'),      // Fixed to 1 decimal place (.e.g 1,001.1)
+      f2: d3Locale.format(',.2f'),      // Fixed to 2 decimal places (.e.g 1,001.10)
+      s2: d3Locale.format('.2s'),       // SI Format to 2 decimal places (.e.g 1.1k)
+      pct: d3Locale.format('.2%'),      // % to 2 decimal places (.e.g 5.40%)
+      pct1: d3Locale.format('.1%'),     // % to 1 decimal places (.e.g 5.4%)
+      r1: d3Locale.format('.1r'),       // Rounded to 1 significant number (.e.g 512 => 500, 4.122 => 4)
+      r2: d3Locale.format('.2r'),       // Rounded to 2 significant numbers (.e.g 512 => 510, 4.122 => 4.1)
+      rPct: d3Locale.format('.0%'),                   // % to 0 decimal places (.e.g 5%)
+      round1: (d) => gen(round(d, 1)),  // Round to 0-1 decimal places (e.g. 5.1, 4)
+      round: (d) => gen(round(d, 2)),      // Rounded to 0-2 decimal places (.e.g 5.12, 4.1)
       time: (d) => (d < 0 ? '-' : '') + Math.floor(Math.abs(d) / 60) + ':' + ('00' + Math.floor(Math.abs(d) % 60)).substr(-2, 2)
     },
     translate,
     units: {
-      CR: <u> {translate('CR')}</u>,     // Credits
-      kg: <u> {translate('kg')}</u>,     // Kilograms
-      kgs: <u> {translate('kg/s')}</u>,  // Kilograms per second
-      km: <u> {translate('km')}</u>,     // Kilometers
-      Ls: <u> {translate('Ls')}</u>,     // Light Seconds
-      LY: <u> {translate('LY')}</u>,     // Light Years
-      MJ: <u> {translate('MJ')}</u>,     // Mega Joules
-      'm/s': <u> {translate('m/s')}</u>, // Meters per second
-      '°/s': <u> {translate('°/s')}</u>, // Degrees per second
-      MW: <u> {translate('MW')}</u>,     // Mega Watts (same as Mega Joules per second)
+      ang: '°',                         // Angle
+      CR: <u>{translate('CR')}</u>,     // Credits
+      kg: <u>{translate('kg')}</u>,     // Kilograms
+      kgs: <u>{translate('kg/s')}</u>,  // Kilograms per second
+      km: <u>{translate('km')}</u>,     // Kilometers
+      Ls: <u>{translate('Ls')}</u>,     // Light Seconds
+      LY: <u>{translate('LY')}</u>,     // Light Years
+      m: <u>{translate('m')}</u>,      // Meters
+      MJ: <u>{translate('MJ')}</u>,     // Mega Joules
+      'm/s': <u>{translate('m/s')}</u>, // Meters per second
+      '°/s': <u>{translate('°/s')}</u>, // Degrees per second
+      MW: <u>{translate('MW')}</u>,     // Mega Watts (same as Mega Joules per second)
       mps: <u>{translate('m/s')}</u>,    // Metres per second
+      pct: '%',                         // Percent
       ps: <u>{translate('/s')}</u>,           // per second
       pm: <u>{translate('/min')}</u>,         // per minute
       s: <u>{translate('secs')}</u>,         // Seconds
-      T: <u> {translate('T')}</u>,       // Metric Tons
+      T: <u>{translate('T')}</u>,       // Metric Tons
     }
   };
 }
@@ -87,5 +97,8 @@ export const Languages = {
   es: 'Español',
   fr: 'Français',
   ru: 'ру́сский',
-  pl: 'polski'
+  pl: 'polski',
+  pt: 'português',
+  cn: '中文',
+  ko: '한국어'
 };

src/app/i18n/cn.js

@@ -0,0 +1,16 @@
+export const formats = {
+  decimal: '.',
+  thousands: ',',
+  grouping: [3],
+  currency: ['￥', ''],
+  dateTime: '%a %b %e %X %Y',
+  date: '%Y年%m月%d日',
+  time: '%H:%M:%S',
+  periods: ['AM', 'PM'],
+  days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+  shortDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+  months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+  shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+};
+
+export { default as terms } from './cn.json';

src/app/i18n/de.js

@@ -13,154 +13,4 @@ export const formats = {
   shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
 };
 
-export const terms = {
-  // Phrases
-  PHRASE_BACKUP_DESC: 'Export aller Coriolis-Daten, um sie zu sichern oder um sie zu einem anderen Browser/Gerät zu übertragen.', // Backup of all Coriolis data to save or transfer to another browser/device
-  PHRASE_CONFIRMATION: 'Sind Sie sicher?',  // Are You Sure?
-  PHRASE_EXPORT_DESC: 'Ein detaillierter JSON-Export Ihrer Konfiguration für die Verwendung in anderen Websites und Tools', // A detailed JSON export of your build for use in other sites and tools
-  PHRASE_FASTEST_RANGE: 'aufeinanderfolgende maximale Reichweite/Sprünge',  // Consecutive max range jumps
-  PHRASE_IMPORT: 'JSON hier einfügen oder importieren', // Paste JSON or import here
-  PHRASE_LADEN: 'Schiffsmasse + Treibstoff + Fracht', // Ship Mass + Fuel + Cargo
-  PHRASE_NO_BUILDS: 'Keine Konfigurationen zum Vergleich ausgewählt!',  // No builds added to comparison!
-  PHRASE_NO_RETROCH: 'Keine Umrüständerungen',  // No Retrofitting changes
-  PHRASE_SELECT_BUILDS: 'Ausstattung zum Vergleich auswählen',  // Select Builds to Compare
-  PHRASE_SG_RECHARGE: 'Zeit von 50% bis 100% der Ladung', // Time from 50% to 100% Charge
-  PHRASE_SG_RECOVER: 'Erneuerung (zu 50%) nach Zusammenbruch',  // Recovery (to 50%) after collapse
-  PHRASE_UNLADEN: 'Schiffsmasse ohne Treibstoff und Fracht',  // Ship Mass excluding Fuel and Cargo
-  PHRASE_UPDATE_RDY: 'Update verfügbar! Klicken zum Aktualisieren', // Update Available! Click to Refresh
-
-  // Units / Metrics
-  LY: 'Lj', // Light Years
-  T: 't', // Tons (Metric Ton - 1000kg)
-
-  // Sizes
-  S: 'K', // Small Hardpoint (single Character)
-  L: 'G', // Large Hardpoint size (single character)
-  H: 'R', // Huge Hardpoint size (single character)
-  U: 'W', // Utility Hardpoint size (single character) - Kill warrant scanner, etc
-  small: 'klein', // Small ship size
-  medium: 'mittel', // Medium ship size
-  large: 'groß',  // Large Ship Size
-
-  // Terms
-  about: 'über',  // Link to about page / about Coriolis.io
-  action: 'Aktion',
-  added: 'hinzugefügt',
-  ammo: 'Munition', // Ammunition
-  armour: 'Panzerung',
-  available: 'verfügbar', // Available options
-  backup: 'Sicherungsdatei',
-  base: 'Basis',  // Base speed, boost, etc - Base ship stats
-  bays: 'Lagerraum',
-  bins: 'Behälter', // Number of Mining Refinery bins
-  build: 'Ausstattung', // Shorthand for the build/configuration/design name
-  'build name': 'Ausstattungsname', // Ship build/configuration/design name
-  builds: 'Ausstattungen',  // Ship build/configuration/design names
-  buy: 'kaufen',
-  cancel: 'abbrechen',
-  cargo: 'Fracht',
-  cells: 'Zellen',  // Number of cells in a shield cell bank
-  close: 'schließen',
-  compare: 'vergleichen',
-  'compare all': 'alles vergleichen',
-  comparison: 'Vergleich',
-  comparisons: 'Vergleiche',
-  cost: 'Preis',  // Cost / price of a module or price of a ship
-  costs: 'Kosten',  // Costs / prices of a modules or prices of ships
-  create: 'erstellen',
-  'create new': 'neu erstellen',
-  credits: 'Credits',
-  damage: 'Schaden',
-  'damage per second': 'Schaden pro Sekunde',
-  delete: 'löschen',
-  'delete all': 'alles löschen',
-  dep: 'ausg',  // Weapons/Hardpoints Deployed abbreviation
-  deployed: 'ausgefahren',  // Weapons/Hardpoints Deployed
-  'detailed export': 'detailierter Export',
-  disabled: 'deaktiviert',
-  discount: 'Rabatt',
-  'edit data': 'bearbeiten',
-  efficiency: 'Effizienz',  // Power Plant efficiency
-  empty: 'leer',
-  'empty all': 'alles entfernen',
-  ENG: 'ANT', // Abbreviation - Engine recharge rate for power distributor
-  'Enter Name': 'Namen eingeben',
-  Explorer: 'Forscher',
-  export: 'Export',
-  'fastest range': 'maximale Reichweite', // Fastet totaljump range - sum of succesive jumps
-  forum: 'Forum',
-  fuel: 'Treibstoff',
-  'fuel level': 'Tankfüllstand',  // Percent of fuel (T) in the tank
-  'full tank': 'Tank voll',
-  hardpoints: 'Waffenaufhängungen',
-  hull: 'Rumpf',  // Ships hull
-  import: 'importieren',
-  insurance: 'Versicherung',
-  'internal compartments': 'Innenbereich',
-  jump: 'Sprung', // Single jump range
-  'jump range': 'Sprungreichweite',
-  jumps: 'Sprünge',
-  laden: 'beladen',
-  language: 'Sprache',
-  maneuverability: 'Manövrierbarkeit',
-  manufacturer: 'Hersteller',
-  mass: 'Masse',
-  'mass lock factor': 'Massensperrefaktor',
-  'max mass': 'maximale Masse',
-  MLF: 'MSF', // Mass Lock Factor Abbreviation
-  module: 'Modul',
-  modules: 'Module',
-  'net cost': 'Nettokosten',
-  no: 'Nein',
-  'none created': 'nicht erstellt',
-  ok: 'OK',
-  'optimal mass': 'optimale Masse', // Lowest weight / best weight for jump distance, etc
-  optimize: 'optimieren',
-  pen: 'Durchdr.',  // Armour peneration abbreviation
-  permalink: 'Permanentlink',
-  power: 'Energie', // Power = Energy / second. Power generated by the power plant, or power consumed (MW / Mega Watts). Used in the power plant section
-  pri: 'Prio',  // Priority abbreviation for power management
-  proceed: 'fortfahren',
-  qty: 'Menge', // Quantity abbreviation
-  range: 'Reichweite',
-  rate: 'Rate',
-  recharge: 'aufladen', // Shield Recharge time from 50% -> 100%
-  recovery: 'Erneuerung', // Shield recovery time (after losing shields/turning on -> 50%)
-  'refuel time': 'Auftankzeit', // Time to refuel the tank when scooping
-  reload: 'aktualisieren',  // Reload weapon/hardpoint
-  'reload costs': 'Nachladekosten',
-  rename: 'umbenennen',
-  repair: 'reparieren',
-  reset: 'zurücksetzen',
-  ret: 'eing',  // Retracted abbreviation
-  retracted: 'eingefahren', // Weapons/Hardpoints retracted
-  'retrofit costs': 'Änderungskosten',  // The cost difference when upgrading / downgrading a component
-  'retrofit from': 'nachrüsten von',  // Retrofit from Build A against build B
-  ROF: 'Kad', // Rate of Fire abbreviation
-  roles: 'Rollen',  // Commander/Ship build roles - e.g. Trader, Bounty-Hunter, Explorer, etc
-  save: 'speichern',
-  sell: 'verkaufen',
-  settings: 'Einstellungen',  // Coriolis application settings
-  shields: 'Schilde',
-  ship: 'Schiff',
-  ships: 'Schiffe',
-  shortened: 'gekürzt', // Standard/Stock build of a ship when purchased new
-  size: 'Größe',
-  skip: 'überspringen', // Skip past something / ignore it
-  speed: 'Geschwindigkeit',
-  standard: 'Grundausstattung', // Standard / Common modules (FSD, power plant, life support, etc)
-  Stock: 'Standard',  // Thermal-load abbreviation
-  strength: 'Stärke', // Strength in reference to Shield Strength
-  subtotal: 'Zwischensumme',
-  time: 'Dauer',  // time it takes to complete something
-  tooltips: 'Tooltips', // Tooltips setting - show/hide
-  total: 'gesamt',
-  'total range': 'Gesamtbereich',
-  Trader: 'Händler',  // Trader role
-  type: 'Typ',
-  'unit cost': 'Kosten pro Einheit',
-  unladen: 'unbeladen', // No cargo or fuel
-  'utility mounts': 'Werkzeug-Steckplätze',
-  WEP: 'WAF', // Abbreviation - Weapon recharge rate for power distributor
-  yes: 'ja'
-};
+export { default as terms } from './de.json';

src/app/i18n/en.js

@@ -13,301 +13,4 @@ export const formats = {
   shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 };
 
-export const terms = {
-  PHRASE_ALT_ALL: 'Alt + Click to fill all slots',
-  PHRASE_BACKUP_DESC: 'Backup of all Coriolis data to save or transfer to another browser/device',
-  PHRASE_CONFIRMATION: 'Are you sure?',
-  PHRASE_EXPORT_DESC: 'A detailed JSON export of your build for use in other sites and tools',
-  PHRASE_FASTEST_RANGE: 'Consecutive max range jumps',
-  PHRASE_IMPORT: 'Paste JSON or import here',
-  PHRASE_LADEN: 'Ship mass + fuel + cargo',
-  PHRASE_NO_BUILDS: 'No builds added to comparison!',
-  PHRASE_NO_RETROCH: 'No Retrofitting changes',
-  PHRASE_SELECT_BUILDS: 'Select builds to compare',
-  PHRASE_SG_RECHARGE: 'Time from 50% to 100% charge',
-  PHRASE_SG_RECOVER: 'Recovery (to 50%) after collapse',
-  PHRASE_UNLADEN: 'Ship mass excluding fuel and cargo',
-  PHRASE_UPDATE_RDY: 'Update Available! Click to refresh',
-  PHRASE_ENGAGEMENT_RANGE: 'The distance between your ship and its target',
-  PHRASE_SELECT_BLUEPRINT: 'Click to select a blueprint',
-  PHRASE_BLUEPRINT_WORST: 'Worst primary values for this blueprint',
-  PHRASE_BLUEPRINT_AVERAGE: 'Average primary values for this blueprint',
-  PHRASE_BLUEPRINT_RANDOM: 'Random selection between worst and best primary values for this blueprint',
-  PHRASE_BLUEPRINT_BEST: 'Best primary values for this blueprint',
-  PHRASE_BLUEPRINT_RESET: 'Remove all modifications and blueprint',
-
-  HELP_MODIFICATIONS_MENU: 'Click on a number to enter a new value, or drag along the bar for small changes',
-
-  // Other languages fallback to these  values
-  // Only Translate to other languages if the name is different in-game
-  am: 'Auto Field-Maintenance Unit',
-  bh: 'Bulkheads',
-  bl: 'Beam Laser',
-  bsg: 'Bi-Weave Shield Generator',
-  c: 'Cannon',
-  cc: 'Collector Limpet Controller',
-  ch: 'Chaff Launcher',
-  cr: 'Cargo Rack',
-  cs: 'Manifest Scanner',
-  dc: 'Docking Computer',
-  ec: 'Electronic Countermeasure',
-  fc: 'Fragment Cannon',
-  fh: 'Fighter Hangar',
-  fi: 'FSD Interdictor',
-  fs: 'Fuel Scoop',
-  fsd: 'Frame Shift Drive',
-  ft: 'Fuel Tank',
-  fx: 'Fuel Transfer Limpet Controller',
-  hb: 'Hatch Breaker Limpet Controller',
-  hr: 'Hull Reinforcement Package',
-  hs: 'Heat Sink Launcher',
-  kw: 'Kill Warrant Scanner',
-  ls: 'Life Support',
-  mc: 'Multi-cannon',
-  ml: 'Mining Laser',
-  mr: 'Missile Rack',
-  mrp: 'Module Reinforcement Package',
-  nl: 'Mine Launcher',
-  pa: 'Plasma Accelerator',
-  pas: 'Planetary Approach Suite',
-  pc: 'Prospector Limpet Controller',
-  pce: 'Economy Class Passenger Cabin',
-  pci: 'Business Class Passenger Cabin',
-  pcm: 'First Class Passenger Cabin',
-  pcq: 'Luxury Passenger Cabin',
-  pd: 'power distributor',
-  pl: 'Pulse Laser',
-  po: 'Point Defence',
-  pp: 'Power Plant',
-  psg: 'Prismatic Shield Generator',
-  pv: 'Planetary Vehicle Hangar',
-  rf: 'Refinery',
-  rg: 'Rail Gun',
-  s: 'Sensors',
-  sb: 'Shield Booster',
-  sc: 'Scanner',
-  scb: 'Shield Cell Bank',
-  sg: 'Shield Generator',
-  t: 'thrusters',
-  tp: 'Torpedo Pylon',
-  ul: 'Burst Laser',
-  ws: 'Frame Shift Wake Scanner',
-
-  // Items on the outfitting page
-  // Notification of restricted slot
-  emptyrestricted: 'empty (restricted)',
-  'damage dealt against': 'Damage dealt against',
-  'damage received by': 'Damage received by',
-  'against shields': 'Against shields',
-  'against hull': 'Against hull',
-  // 'ammo' was overloaded for outfitting page and modul info, so changed to ammunition for outfitting page
-  ammunition: 'Ammo',
-
-  // Unit for seconds
-  secs: 's',
-
-  rebuildsperbay: 'Rebuilds per bay',
-
-  // Blueprint rolls
-  worst: 'Worst',
-  average: 'Average',
-  random: 'Random',
-  best: 'Best',
-  reset: 'Reset',
-
-  // Weapon, offence, defence and movement
-  dpe: 'Damage per MJ of energy',
-  dps: 'Damage per second',
-  sdps: 'Sustained damage per second',
-  dpssdps: 'Damage per second (sustained damage per second)',
-  eps: 'Energy per second',
-  epsseps: 'Energy per second (sustained energy per second)',
-  hps: 'Heat per second',
-  hpsshps: 'Heat per second (sustained heat per second)',
-  'damage by': 'Damage by',
-  'damage from': 'Damage from',
-  'shield cells': 'Shield cells',
-  'recovery': 'Recovery',
-  'recharge': 'Recharge',
-  'engine pips': 'Engine Pips',
-  '4b': '4 pips and boost',
-  'speed': 'Speed',
-  'pitch': 'Pitch',
-  'roll': 'Roll',
-  'yaw': 'Yaw',
-  'internal protection': 'Internal protection',
-  'external protection': 'External protection',
-  'engagement range': 'Engagement range',
-  'total': 'Total',
-
-  // Modifications
-  ammo: 'Ammunition maximum',
-  boot: 'Boot time',
-  brokenregen: 'Broken regeneration rate',
-  burst: 'Burst',
-  burstrof: 'Burst rate of fire',
-  clip: 'Ammunition clip',
-  damage: 'Damage',
-  distdraw: 'Distributor draw',
-  duration: 'Duration',
-  eff: 'Efficiency',
-  engcap: 'Engines capacity',
-  engrate: 'Engines recharge rate',
-  explres: 'Explosive resistance',
-  facinglimit: 'Facing limit',
-  hullboost: 'Hull boost',
-  hullreinforcement: 'Hull reinforcement',
-  integrity: 'Integrity',
-  jitter: 'Jitter',
-  kinres: 'Kinetic resistance',
-  maxfuel: 'Maximum fuel per jump',
-  mass: 'Mass',
-  optmass: 'Optimal mass',
-  optmul: 'Optimal multiplier',
-  pgen: 'Power generation',
-  piercing: 'Piercing',
-  power: 'Power draw',
-  protection: 'Protection',
-  range: 'Range',
-  ranget: 'Range', // Range in time (for FSD interdictor)
-  regen: 'Regeneration rate',
-  reload: 'Reload',
-  rof: 'Rate of fire',
-  shield: 'Shield',
-  shieldboost: 'Shield boost',
-  shieldreinforcement: 'Shield reinforcement',
-  shotspeed: 'Shot speed',
-  spinup: 'Spin up time',
-  syscap: 'Systems capacity',
-  sysrate: 'Systems recharge rate',
-  thermload: 'Thermal load',
-  thermres: 'Thermal resistance',
-  wepcap: 'Weapons capacity',
-  weprate: 'Weapons recharge rate',
-
-  // Help text
-  HELP_TEXT: `
-<h1>Introduction</h1>
-Coriolis is a ship builder for Elite: Dangerous.  This help file provides you with the information you need to use Coriolis.
-
-<h1>Importing Your Ship Into Coriolis</h1>
-Often, you will want to start with your existing ship in Coriolis and see how particular changes might affect it, for example upgrading your FSD.  There are a number of tools that can be used to import your ship without you having to create it manually.  This has the added benefit of copying over any engineering modifications that have taken place as well. </p>
-
-<h2>Importing Your Ship From EDDI</h2>
-To import your ship from EDDI first ensure that your connection to the Frontier servers&apos; companion API is working.  To do this check the &apos;Companion App&apos; tab where you should see "Your connection to the companion app is operational".  If not then follow the instructions in the companion app tab in EDDI to connect to the Frontier servers.</p>
-
-Once you have a working companion API connection go to the &apos;Shipyard&apos; tab.  At the right-hand side of each ship is an &apos;Export to Coriolis&apos; button that will open your default web browser in Coriolis with the ship&apos;s build. </p>
-
-Note that Internet Explorer and Edge might not import correctly, due to their internal restrictions on URL length.  If you find that this is the case then please change your default browser to Chrome. </p>
-
-<h2>Importing Your Ship From EDMC</h2>
-To import your ship from EDMC once your connection to the Frontier servers&apos; companion API is working go to &apos;Settings -&gt;Configuration&apos; and set the &apos;Preferred Shipyard&apos; to &apos;Coriolis&apos;.  Once this is set up clicking on your ship in the main window will open your default web browser in Coriolis with the ship&apos;s build.</p>
-
-Note that Internet Explorer and Edge might not import correctly, due to their internal restrictions on URL length.  If you find that this is the case then please change your default browser to Chrome. </p>
-
-<h1>Understanding And Using The Outfitting Panels</h1>
-The outfitting page is where you will spend most of your time, and contains the information for your ship.  Information on each of the panels is provided below. </p>
-
-<h2>Key Values</h2>
-Along the top of the screen are some of the key values for your build.  This is a handy reference for the values, but more information is provided for the values in the further panels. </p>
-
-Here, along with most places in Coriolis, acronyms will have tooltips explaining what they mean.  Hover over the acronym to obtain more detail, or look in the glossary at the end of this help.</p>
-
-<h2>Modules</h2>
-The next set of panels laid out horizontally across the screen contain the modules you have put in your build.  From left to right these are the core modules, the internal modules, the hardpoints and the utility mounts.  These represent the available slots in your ship and cannot be altered.  Each slot has a class, or size, and in general any module up to a given size can fit in a given slot (exceptions being bulkheads, life support and sensors in core modules and restricted internal slots, which can only take a subset of module depending on their restrictions). </p>
-
-To add a module to a slot left-click on the slot and select the required module.  Only the modules capable of fitting in the selected slot will be shown. </p>
-
-To remove a module from a slot right-click on the module. </p>
-
-To move a module from one slot to another drag it.  If you instead want to copy the module drag it whilst holding down the &apos;Alt&apos; key. </p>
-
-<h2>Power Management</h2>
-The power management panel provides information about power usage and priorities.  It allows you to enable and disable individual modules, as well as set power priorities for each module.</p>
-
-<h2>Costs</h2>
-The costs panel provides information about the costs for each of your modules, and the total cost and insurance for your build.  By default Coriolis uses the standard costs, however discounts for your ship, modules and insurance can be altered in the &apos;Settings&apos; at the top-right of the page.</p>
-
-The retrofit costs provides information about the costs of changing the base build for your ship, or your saved build, to the current build.</p>
-
-The reload costs provides information about the costs of reloading your current build.</p>
-
-<h2>Offence Summary</h2>
-The offence summary panel provides information about the damage that you deal with your weapons.</p>
-
-The first headline gives an overall damage per second rating: this is the optimum amount of damage the build will do per second according to weapon statistics.  After that is a breakdown of the damage per second the build will do for each type of damage: absolute, explosive, kinetic, and thermal.</p>
-
-The next headline gives an overall sustained damage per second rating: this is the optimum amount of damage the build will do per second over a longer period of time, taking in to account ammunition clip capacities and reload times.  After that is a breakdown of the sustained damage per second the build will do for each type of damage: absolute, explosive, kinetic, and thermal.</p>
-
-The final headline gives an overall damage per energy rating: this is the amount of damage the build will do per unit of weapon capacitor energy expended.  After that is a breakdown of the damage per energy the build will do for each type of damage: absolute, explosive, kinetic, and thermal.</p>
-
-<h2>Defence Summary</h2>
-The defence summary panel provides information about the strength of your defences and the damage that you receive from opponents.</p>
-
-The first headline gives your total shield strength (if you have shields), taking in to account your base shield plus boosters.  After that are the details of how long it will take for your shields to recover from 0 to 50% (recovery time) and from 50% to 100% (recharge time).  The next line provides a breakdown of the shield damage taken from different damage types.  For example, if you damage from kinetic is 60% then it means that a weapon usually dealing 10 points of damage will only deal 6, the rest being resisted by the shield.  Note that this does not include any resistance alterations due to pips in your SYS capacitor.</p>
-
-The second headline gives your total shield cell strength (if you have shield cell banks).  This is the sum of the recharge of all of equipped shield cell banks.</p>
-
-The third headline gives your total armour strength, taking in to account your base armour plus hull reinforcement packages.  The next line provides a breakdown of the hull damage taken from different damage types.  For example, if you damage from kinetic is 120% then it means that a weapon usually dealing 10 points of damage will deal 12.</p>
-
-The fourth headline gives your total module protection strength from module reinforcement packages. The next line provides a breakdown of the protection for both internal and external modules whilst all module reinforcement packages are functioning.  For example, if external module protection is 20% then 10 points of damage will 2 points of damage to the module reinforcement packages and 8 points of damage to the module</p>
-
-<h2>Movement Summary</h2>
-The movement summary panel provides information about the build&apos;s speed and agility.</p>
-
-Along the top of this panel are the number of pips you put in to your ENG capacitor, from 0 to 4 and also include 4 pips and boost (4b).  Along the side of this panel are the names of the metrics.  These are:
-<dl>
-<dt>Speed</dt><dd>The fastest the ship can move, in metres per second</dd>
-<dt>Pitch</dt><dd>The fastest the ship can raise or lower its nose, in degrees per second</dd>
-<dt>Roll</dt><dd>The fastest the ship can roll its body, in degrees per second</dd>
-<dt>Yaw</dt><dd>The fastest the ship can turn its nose left or right, in degrees per second</dd>
-</dl>
-
-<h2>Jump Range</h2>
-The jump range panel provides information about the build&apos; jump range.  The graph shows how the build&apos;s jump range changes with the amount of cargo on-board.  The slider can be altered to change the amount of fuel you have on-board.
-
-<h2>Damage Dealt</h2>
-The damage dealt panel provides information about the effectiveness of your build&apos;s weapons against opponents&apos; shields and hull at different engagement distances.</p>
-
-The ship against which you want to check damage dealt can be selected by clicking on the red ship icon or the red ship name at the top of this panel.</p>
-
-The main section of this panel is a table showing your weapons and their effectiveness.  Effectiveness against shields takes in to account the weapon and its engagement range, but does not consider the target ship&apos;s resistances.  Effectiveness against hull takes in to account the weapon and, its engagement range and the target&apos;s hardness, but does not consider the target ship&apos;s resistances.  This is because resistances will alter significantly depending on the target&apos;s build.</p>
-
-Effective DPS and effective SDPS are the equivalent of DPS and SDPS for the weapon.  Effectiveness is a percentage value that shows how effective the DPS of the weapon is compared in reality against the given target compared to the weapon&apos;s stated DPS.  Effectiveness can never go above 100%.</p>
-
-Total effective DPS, SDPS and effectiveness against both shields and hull are provided at the bottom of the table.</p>
-
-At the bottom of this panel you can change your engagement range.  The engagement range is the distance between your ship and your target.  Many weapons suffer from what is known as damage falloff, where their effectiveness decreases the further the distance between your ship and your target.  This allows you to model the effect of engaging at different ranges.
-
-Note that this panel only shows enabled weapons, so if you want to see your overall effectiveness for a subset of your weapons you can disable the undesired weapons in the power management panel.
-
-<h2>Damage Received</h2>
-The damage received panel provides information about the effectiveness of your build&apos;s defences against opponent&apos;s weapons at different engagement range.  Features and functions are the same as the damage dealt panel, except that it does take in to account your build&apos;s resistances.</p>
-
-<h1>Keyboard Shortcuts</h1>
-<dl>
-<dt>Ctrl-e</dt><dd>open export dialogue (outfitting page only)</dd>
-<dt>Ctrl-h</dt><dd>open help dialogue</dd>
-<dt>Ctrl-i</dt><dd>open import dialogue</dd>
-<dt>Ctrl-l</dt><dd>open shortlink dialogue</dd>
-<dt>Esc</dt><dd>close any open dialogue</dd>
-</dl>
-<h1>Glossary</h1>
-<dl>
-<dt>Absolute damage</dt><dd>A type of damage, without any protection.  Absolute damage is always dealt at 100% regardless of if the damage is to shields, hull or modules, and irrespective of resistances</dd>
-<dt>DPS</dt><dd>Damage per second; the amount of damage that a weapon or a ship can deal per second to a target under optimum conditions</dd>
-<dt>EPS</dt><dd>Energy per second; the amount of energy that a weapon or a ship drains from the weapons capacitor per second when firing</dd>
-<dt>HPS</dt><dd>Heat per second; the amount of heat that a weapon or a ship generates per second when firing</dd>
-<dt>Effectivness</dt><dd>A comparison of the maximum DPS of a given weapon to the actual DPS of the given weapon in a specific situation.  DPS can be reduced by range to the target, the target&apos;s hull and shield resistances, and the target&apos;s hardness</dd>
-<dt>Explosive damage</dt><dd>A type of damage, protected against by explosive resistance</dd>
-<dt>Hardness</dt><dd>The inherent resistance to damage of a ship&apos;s hull.  Hardness is defined on a per-ship basis and there is currently nothing that can be done to change it.  Hardness of a ship&apos;s hull is compared to the piercing of weapons: if piercing is higher than hardness the weapon does 100% damage, otherwise it does a fraction of its damage calculated as piercing/hardness</dd>
-<dt>Falloff</dt><dd>The distance at which a weapons starts to do less damage than its stated DPS</dd>
-<dt>Kinetic damage</dt><dd>A type of damage, protected against by kinetic resistance</dd>
-<dt>SDPS</dt><dd>Sustained damage per second; the amount of damage that a weapon or a ship can deal per second to a target, taking in to account ammunition reload</dd>
-<dt>SEPS</dt><dd>Sustained energy per second; the amount of energy that a weapon or a ship drains from the weapons capacitor per second when firing, taking in to account ammunition reload</dd>
-<dt>SHPS</dt><dd>Sustained heat per second; the amount of heat that a weapon or a ship generates per second when firing, taking in to account ammunition reload</dd>
-<dt>Thermal damage</dt><dd>A type of damage, protected against by thermal resistance</dd>
-</dl>
-
-  `,
-};
+export { default as terms } from './en.json';

src/app/i18n/es.js

@@ -13,196 +13,4 @@ export const formats = {
   shortMonths: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
 };
 
-export const terms = {
-  'PHRASE_EXPORT_DESC': 'Una detallada exportaci\u00f3n JSON de tu construcci\u00f3n para usarlo en otros sitios web y herramientas',
-  'A-Rated': 'Calidad-A',
-  'about': 'Acerca',
-  'action': 'Acci\u00f3n',
-  'added': 'A\u00f1adido',
-  'Advanced Discovery Scanner': 'Esc\u00e1ner de exploraci\u00f3n avanzado',
-  maneuverability: 'Maniobrabilidad',
-  'alpha': 'Alfa',
-  'ammo': 'Munici\u00f3n',
-  'PHRASE_CONFIRMATION': '\u00bfEst\u00e1s seguro?',
-  'armour': 'Blindaje',
-  'am': 'Unidad de auto-reparaciones',
-  'available': 'Disponible',
-  'backup': 'Reserva',
-  'Basic Discovery Scanner': 'Esc\u00e1ner de exploraci\u00f3n b\u00e1sico',
-  'bl': 'L\u00e1ser de haz',
-  'bins': 'contenedores',
-  'boost': 'incrementar',
-  'build': 'Construcci\u00f3n',
-  'build name': 'Nombre de la construcci\u00f3n',
-  'builds': 'Construcciones',
-  'bh': 'mamparos',
-  'ul': 'Laser de r\u00e1fagas',
-  'buy': 'Comprar',
-  'cancel': 'Cancelar',
-  'c': 'Ca\u00f1\u00f3n',
-  'capital': 'capital',
-  'cargo': 'Carga',
-  'Cargo Hatch': 'Compuerta de carga',
-  'cr': 'Compartimento de carga',
-  'cs': 'Esc\u00e1ner de carga',
-  'cells': 'celdas',
-  'Chaff Launcher': 'Lanzador de birutas',
-  'close': 'Cerrar',
-  'cc': 'Controlador de Drones de Recogida',
-  'compare': 'Comparar',
-  'compare all': 'comparar todas',
-  'comparison': 'Comparativa',
-  'comparisons': 'Comparativas',
-  'component': 'Componente',
-  'cost': 'Coste',
-  'costs': 'Costes',
-  'cm': 'Contramedidas',
-  'create': 'Crear',
-  'create new': 'Crear nuevo',
-  'credits': 'Cr\u00e9ditos',
-  'damage': 'Da\u00f1o',
-  'delete': 'Borrar',
-  'delete all': 'Borrar todo',
-  'dep': 'desp',
-  'deployed': 'Desplegado',
-  'detailed export': 'Exportacion detallada',
-  'Detailed Surface Scanner': 'Escaner de exploraci\u00f3n detallada',
-  'disabled': 'Desactivado',
-  'discount': 'Descuento',
-  'dc': 'Ordenador de aterrizaje',
-  'done': 'Hecho',
-  'DPS': 'DPS (Da\u00f1o Por Segundo)',
-  'edit data': 'Editar datos',
-  'efficiency': 'Eficiencia',
-  'Electronic Countermeasure': 'Contramedidas electr\u00f3nicas',
-  'empty': 'Vac\u00edo',
-  'ENG': 'MOT',
-  'enter name': 'Introduce el nombre',
-  'export': 'exportar',
-  'fixed': 'fijo',
-  'forum': 'Foro',
-  'fc': 'Ca\u00f1\u00f3n de fragmentaci\u00f3n',
-  'fsd': 'Motor de salto',
-  'ws': 'Esc\u00e1ner de Salto',
-  'fi': 'Interdictor FSD',
-  'fuel': 'Combustible',
-  'fs': 'Recolector de Combustible',
-  'ft': 'Tanque de combustible',
-  'fx': 'Sistema de Transferencia de Combustilble',
-  'full tank': 'Tanque lleno',
-  'Gimballed': 'Card\u00e1n',
-  'H': 'E',
-  'hardpoints': 'Montura de armas',
-  'hb': 'Controlador de Apertura de Bah\u00eda de Carga',
-  'Heat Sink Launcher': 'Eyector de Acumulador de Calor',
-  'huge': 'enorme',
-  'hull': 'Casco',
-  'hr': 'Sistema de Casco Reforzado',
-  'import': 'Importar',
-  'import all': 'Importar todo',
-  'insurance': 'Seguro',
-  'Intermediate Discovery Scanner': 'Esc\u00e1ner de exploraci\u00f3n media',
-  'internal compartments': 'Compartimentos internos',
-  'jump range': 'Rango de salto',
-  'jumps': 'Saltos',
-  'kw': 'Esc\u00e1ner Detector de Recompensas',
-  'L': 'G',
-  'laden': 'Cargada',
-  'language': 'Idioma',
-  'large': 'Grande',
-  'ls': 'Soporte vital',
-  'Lightweight Alloy': 'Aleaci\u00f3n ligera',
-  'limpets': 'Drones',
-  'lock factor': 'factor de bloqueo',
-  'mass': 'Masa',
-  'max': 'm\u00e1x',
-  'max mass': 'Masa m\u00e1xima',
-  'medium': 'medio',
-  'Military Grade Composite': 'Blindaje Militar',
-  'nl': 'Lanzaminas',
-  'Mining Lance': 'Lanza de miner\u00eda',
-  'ml': 'L\u00e1ser de miner\u00eda',
-  'Mirrored Surface Composite': 'Blindaje Reflectante',
-  'mr': 'Bah\u00eda de Misiles',
-  'mc': 'Ca\u00f1\u00f3n m\u00faltiple',
-  'net cost': 'Coste neto',
-  'PHRASE_NO_BUILDS': '\u00a1No se a\u00f1adieron plantillas para comparaci\u00f3n!',
-  'PHRASE_NO_RETROCH': 'No hay cambios en los ajutes',
-  'none': 'Nada',
-  'none created': 'Nada creado',
-  'off': 'apagado',
-  'on': 'encendido',
-  'optimal': '\u00f3ptimo',
-  'optimal mass': 'masa \u00f3ptima',
-  'optimize mass': 'optimizar masa',
-  'overwrite': 'Sobreescribir',
-  'PHRASE_IMPORT': 'Pega el JSON o imp\u00f3rtalo aqu\u00ed',
-  'penetration': 'penetraci\u00f3n',
-  'permalink': 'enlace permanente',
-  'pa': 'Acelerador de Plasma',
-  'Point Defence': 'Punto de Defensa',
-  'power': 'energ\u00eda',
-  'pd': 'distribuidor de energ\u00eda',
-  'pp': 'Planta de Energ\u00eda',
-  'priority': 'prioridad',
-  'proceed': 'Proceder',
-  'pc': 'Controlador de drones de prospecci\u00f3n',
-  'pl': 'L\u00e1ser de Pulso',
-  'PWR': 'POT',
-  'rg': 'Ca\u00f1\u00f3n de Riel',
-  'range': 'rango',
-  'rate': 'ratio',
-  'Reactive Surface Composite': 'Blindaje Reactivo',
-  'recharge': 'recargar',
-  'rf': 'Refineria',
-  'refuel time': 'Tiempo para repostar',
-  'Reinforced Alloy': 'Armadura reforzada',
-  'reload': 'Recargar',
-  'rename': 'Renombrar',
-  'repair': 'Reparar',
-  'reset': 'Reiniciar',
-  'ret': 'PLE',
-  'retracted': 'plegadas',
-  'retrofit costs': 'costes de equipamiento',
-  'retrofit from': 'equipamiento desde',
-  'ROF': 'RDF',
-  'S': 'P',
-  'save': 'guardar',
-  'sc': 'sc\u00e1ner',
-  'PHRASE_SELECT_BUILDS': 'Selecciona equipamientos para comparar',
-  'sell': 'Vender',
-  's': 'Sensores',
-  'settings': 'Configuraci\u00f3n',
-  'sb': 'Potenciador de Escudos',
-  'scb': 'C\u00e9lula de Energ\u00eda de Escudos',
-  'sg': 'Generador de escudos',
-  'shields': 'Escudos',
-  'ship': 'Nave ',
-  'ships': 'Naves',
-  'shortened': 'Abreviado',
-  'size': 'Tama\u00f1o',
-  'skip': 'omitir',
-  'small': 'Peque\u00f1o',
-  'speed': 'velocidad',
-  'standard': 'est\u00e1ndar',
-  'Standard Docking Computer': 'Computador de Atraque Est\u00e1ndar',
-  'Stock': 'De serie',
-  'SYS': 'SIS',
-  'T_LOAD': 'c-t\u00e9rmica',
-  't': 'Propulsores',
-  'time': 'Tiempo',
-  'tp': 'Anclaje de torpedo',
-  'total': 'Total',
-  'total range': 'Rango total',
-  'turret': 'torreta',
-  'type': 'Tipo',
-  'unladen': 'Sin carga',
-  'PHRASE_UPDATE_RDY': 'Actualizacion disponible! Haz click para recargar',
-  'URL': 'Enlace',
-  'utility': 'utilidad',
-  'utility mounts': 'monturas de utilidad',
-  'version': 'Versi\u00f3n',
-  'WEP': 'ARM',
-  'yes': 'si',
-  'PHRASE_BACKUP_DESC': 'Copia de seguridad de todos los datos de Coriolis para guardarlos o transferirlos a otro navegador\/dispositivo'
-};
+export { default as terms } from './es.json';

src/app/i18n/es.json

@@ -0,0 +1,193 @@
+{
+    "PHRASE_EXPORT_DESC": "Una detallada exportación JSON de tu construcción para usarlo en otros sitios web y herramientas",
+    "A-Rated": "Calidad-A",
+    "about": "Acerca",
+    "action": "Acción",
+    "added": "Añadido",
+    "Advanced Discovery Scanner": "Escáner de exploración avanzado",
+    "maneuverability": "Maniobrabilidad",
+    "alpha": "Alfa",
+    "ammo": "Munición",
+    "PHRASE_CONFIRMATION": "¿Estás seguro?",
+    "armour": "Blindaje",
+    "am": "Unidad de auto-reparaciones",
+    "available": "Disponible",
+    "backup": "Reserva",
+    "Basic Discovery Scanner": "Escáner de exploración básico",
+    "bl": "Láser de haz",
+    "bins": "contenedores",
+    "boost": "incrementar",
+    "build": "Construcción",
+    "build name": "Nombre de la construcción",
+    "builds": "Construcciones",
+    "bh": "mamparos",
+    "ul": "Laser de ráfagas",
+    "buy": "Comprar",
+    "cancel": "Cancelar",
+    "c": "Cañón",
+    "capital": "capital",
+    "cargo": "Carga",
+    "Cargo Hatch": "Compuerta de carga",
+    "cr": "Compartimento de carga",
+    "cs": "Escáner de carga",
+    "cells": "celdas",
+    "Chaff Launcher": "Lanzador de virutas",
+    "close": "Cerrar",
+    "cc": "Controlador de Drones de Recogida",
+    "compare": "Comparar",
+    "compare all": "comparar todas",
+    "comparison": "Comparativa",
+    "comparisons": "Comparativas",
+    "component": "Componente",
+    "cost": "Coste",
+    "costs": "Costes",
+    "cm": "Contramedidas",
+    "create": "Crear",
+    "create new": "Crear nuevo",
+    "credits": "Créditos",
+    "damage": "Daño",
+    "delete": "Borrar",
+    "delete all": "Borrar todo",
+    "dep": "desp",
+    "deployed": "Desplegado",
+    "detailed export": "Exportacion detallada",
+    "Detailed Surface Scanner": "Escaner de exploración detallada",
+    "disabled": "Desactivado",
+    "discount": "Descuento",
+    "dc": "Ordenador de aterrizaje",
+    "done": "Hecho",
+    "DPS": "DPS (Daño Por Segundo)",
+    "edit data": "Editar datos",
+    "efficiency": "Eficiencia",
+    "Electronic Countermeasure": "Contramedidas electrónicas",
+    "empty": "Vacío",
+    "ENG": "MOT",
+    "enter name": "Introduce el nombre",
+    "export": "exportar",
+    "fixed": "fijo",
+    "forum": "Foro",
+    "fc": "Cañón de fragmentación",
+    "fsd": "Motor de salto",
+    "ws": "Escáner de Salto",
+    "fi": "Interdictor FSD",
+    "fuel": "Combustible",
+    "fs": "Recolector de Combustible",
+    "ft": "Tanque de combustible",
+    "fx": "Sistema de Transferencia de Combustilble",
+    "full tank": "Tanque lleno",
+    "Gimballed": "Cardán",
+    "H": "E",
+    "hardpoints": "Montura de armas",
+    "hb": "Controlador de Apertura de Bahía de Carga",
+    "Heat Sink Launcher": "Eyector de Acumulador de Calor",
+    "huge": "enorme",
+    "hull": "Casco",
+    "hr": "Sistema de Casco Reforzado",
+    "import": "Importar",
+    "import all": "Importar todo",
+    "insurance": "Seguro",
+    "Intermediate Discovery Scanner": "Escáner de exploración media",
+    "internal compartments": "Compartimentos internos",
+    "jump range": "Rango de salto",
+    "jumps": "Saltos",
+    "kw": "Escáner Detector de Recompensas",
+    "L": "G",
+    "laden": "Cargada",
+    "language": "Idioma",
+    "large": "Grande",
+    "ls": "Soporte vital",
+    "Lightweight Alloy": "Aleación ligera",
+    "limpets": "Drones",
+    "lock factor": "factor de bloqueo",
+    "mass": "Masa",
+    "max": "máx",
+    "max mass": "Masa máxima",
+    "medium": "medio",
+    "Military Grade Composite": "Blindaje Militar",
+    "nl": "Lanzaminas",
+    "Mining Lance": "Lanza de minería",
+    "ml": "Láser de minería",
+    "Mirrored Surface Composite": "Blindaje Reflectante",
+    "mr": "Bahía de Misiles",
+    "mc": "Cañón múltiple",
+    "net cost": "Coste neto",
+    "PHRASE_NO_BUILDS": "¡No se añadieron plantillas para comparación!",
+    "PHRASE_NO_RETROCH": "No hay cambios en los ajutes",
+    "none": "Nada",
+    "none created": "Nada creado",
+    "off": "apagado",
+    "on": "encendido",
+    "optimal": "óptimo",
+    "optimal mass": "masa óptima",
+    "optimize mass": "optimizar masa",
+    "overwrite": "Sobreescribir",
+    "PHRASE_IMPORT": "Pega el JSON o impórtalo aquí",
+    "penetration": "penetración",
+    "permalink": "enlace permanente",
+    "pa": "Acelerador de Plasma",
+    "Point Defence": "Punto de Defensa",
+    "power": "energía",
+    "pd": "distribuidor de energía",
+    "pp": "Planta de Energía",
+    "priority": "prioridad",
+    "proceed": "Proceder",
+    "pc": "Controlador de drones de prospección",
+    "pl": "Láser de Pulso",
+    "PWR": "POT",
+    "rg": "Cañón de Riel",
+    "range": "rango",
+    "rate": "ratio",
+    "Reactive Surface Composite": "Blindaje Reactivo",
+    "recharge": "recargar",
+    "rf": "Refineria",
+    "refuel time": "Tiempo para repostar",
+    "Reinforced Alloy": "Armadura reforzada",
+    "reload": "Recargar",
+    "rename": "Renombrar",
+    "repair": "Reparar",
+    "reset": "Reiniciar",
+    "ret": "PLE",
+    "retracted": "plegadas",
+    "retrofit costs": "costes de equipamiento",
+    "retrofit from": "equipamiento desde",
+    "ROF": "RDF",
+    "S": "P",
+    "save": "guardar",
+    "sc": "scáner",
+    "PHRASE_SELECT_BUILDS": "Selecciona equipamientos para comparar",
+    "sell": "Vender",
+    "s": "Sensores",
+    "settings": "Configuración",
+    "sb": "Potenciador de Escudos",
+    "scb": "Célula de Energía de Escudos",
+    "sg": "Generador de escudos",
+    "shields": "Escudos",
+    "ship": "Nave ",
+    "ships": "Naves",
+    "shortened": "Abreviado",
+    "size": "Tamaño",
+    "skip": "omitir",
+    "small": "Pequeño",
+    "speed": "velocidad",
+    "standard": "estándar",
+    "Standard Docking Computer": "Computador de Atraque Estándar",
+    "Stock": "De serie",
+    "SYS": "SIS",
+    "T_LOAD": "c-térmica",
+    "t": "Propulsores",
+    "time": "Tiempo",
+    "tp": "Anclaje de torpedo",
+    "total": "Total",
+    "total range": "Rango total",
+    "turret": "torreta",
+    "type": "Tipo",
+    "unladen": "Sin carga",
+    "PHRASE_UPDATE_RDY": "Actualizacion disponible! Haz click para recargar",
+    "URL": "Enlace",
+    "utility": "utilidad",
+    "utility mounts": "monturas de utilidad",
+    "version": "Versión",
+    "WEP": "ARM",
+    "yes": "si",
+    "PHRASE_BACKUP_DESC": "Copia de seguridad de todos los datos de Coriolis para guardarlos o transferirlos a otro navegador/dispositivo"
+}