initial ed-forgr

References #396

.docker/docker-compose.yml

@@ -29,6 +29,20 @@ services:
     - "traefik.basic.port=80"
     - "traefik.basic.protocol=http"
 
+  coriolis_dw2:
+    image: edcd/coriolis:dw2
+    restart: always
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf
+    networks:
+    - web
+    labels:
+    - "traefik.docker.network=web"
+    - "traefik.enable=true"
+    - "traefik.basic.frontend.rule=Host:dw2.coriolis.io"
+    - "traefik.basic.port=80"
+    - "traefik.basic.protocol=http"
+
 networks:
   web:
     external: true

nginx.conf

@@ -54,6 +54,8 @@ http {
     location / {
       try_files $uri $uri/ /index.html =404;
     }
+    location /iframe.html {
+      try_files $uri $uri/ /iframe.html =404;
+    }
   }
 }
-

package.json

@@ -127,6 +127,7 @@
     "coriolis-data": "../coriolis-data",
     "d3": "^5.7.0",
     "detect-browser": "^3.0.1",
+    "ed-forge": "^1.3.0",
     "fbemitter": "^2.1.1",
     "lodash": "^4.17.11",
     "lz-string": "^1.4.4",
@@ -135,6 +136,7 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-extras": "^0.7.1",
+    "react-fuzzy": "^0.5.2",
     "react-ga": "^2.5.3",
     "react-number-editor": "Athanasius/react-number-editor.git#miggy",
     "recharts": "^1.2.0",

src/app/Coriolis.jsx

@@ -6,6 +6,7 @@ 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';
@@ -14,7 +15,6 @@ import ModalImport from './components/ModalImport';
 import ModalPermalink from './components/ModalPermalink';
 import * as CompanionApiUtils from './utils/CompanionApiUtils';
 import * as JournalUtils from './utils/JournalUtils';
-
 import AboutPage from './pages/AboutPage';
 import NotFoundPage from './pages/NotFoundPage';
 import OutfittingPage from './pages/OutfittingPage';
@@ -344,12 +344,12 @@ export default class Coriolis extends React.Component {
       });
     }
     if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        // Your service-worker.js *must* be located at the top-level directory relative to your site.
-        // It won't be able to control pages unless it's located at the same level or higher than them.
-        // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
-        // See https://github.com/slightlyoff/ServiceWorker/issues/468
-        const self = this;
+      // 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.')
@@ -374,7 +374,7 @@ export default class Coriolis extends React.Component {
             console.error('Error during service worker registration:', error)
           }
         });
-      });
+      }
     }
     window.onerror = this._onError.bind(this);
     window.addEventListener('resize', () => this.emitter.emit('windowResize'));
@@ -395,19 +395,20 @@ export default class Coriolis extends React.Component {
 
     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}/>
+      <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu} />
+      <div className="announcement-container">{this.state.announcements.map(a => <Announcement text={a.message}/>)}</div>
       {this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) :
-        <NotFoundPage/>}
+        <NotFoundPage />}
       {this.state.modal}
       {this.state.tooltip}
       <footer>
         <div className="right cap">
-          <a href="https://github.com/EDCD/coriolis" target="_blank"
+          <a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer"
             title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
           <br/>
           <a
             href={'https://github.com/EDCD/coriolis/compare/edcd:develop@{' + window.CORIOLIS_DATE + '}...edcd:develop'}
-            target="_blank" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits since last release
+            target="_blank" rel="noopener noreferrer" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits since last release
             ({window.CORIOLIS_DATE})</a>
         </div>
       </footer>

src/app/Router.js

@@ -1,5 +1,6 @@
 import Persist from './stores/Persist';
 import ReactGA from 'react-ga';
+
 ReactGA.initialize('UA-55840909-18');
 let standalone = undefined;
 

src/app/components/Announcement.jsx

@@ -25,7 +25,7 @@ export default class Announcement extends React.Component {
    * @return {React.Component} A href element
    */
   render() {
-    return <p>{this.props.text}</p>;
+    return <div className="announcement" >{this.props.text}</div>;
   }
 
 }

src/app/components/AvailableModulesMenu.jsx

@@ -5,6 +5,7 @@ import TranslatedComponent from './TranslatedComponent';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
+import FuzzySearch from 'react-fuzzy';
 
 const PRESS_THRESHOLD = 500; // mouse/touch down threshold
 
@@ -39,7 +40,7 @@ const GRPCAT = {
   'mc': 'projectiles',
   'axmc': 'experimental',
   'fc': 'projectiles',
-  'rfl':  'experimental',
+  'rfl': 'experimental',
   'pa': 'projectiles',
   'rg': 'projectiles',
   'mr': 'ordnance',
@@ -133,6 +134,7 @@ 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.
   }
@@ -159,7 +161,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         onSelect(m);
       }
     );
-
+    let fuzzy = [];
     if (modules instanceof Array) {
       list = buildGroup(modules[0].grp, modules);
     } else {
@@ -167,9 +169,11 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       // At present time slots with grouped options (Hardpoints and Internal) can be empty
       if (m) {
         let emptyId = 'empty';
-        if(this.firstSlotId == null) this.firstSlotId = emptyId;
+        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(<div className='empty-c upp' key={emptyId} data-id={emptyId} onClick={onSelect.bind(null, null)}
+                       onKeyDown={keyDown} tabIndex="0"
+                       ref={slotItem => this.slotItems[emptyId] = slotItem}>{translate('empty')}</div>);
       }
 
       // Need to regroup the modules by our own categorisation
@@ -197,7 +201,8 @@ export default class AvailableModulesMenu extends TranslatedComponent {
               if (categories.length === 1) {
                 // Show category header instead of group header
                 if (m && grp == m.grp) {
-                  list.push(<div ref={(elem) => this.groupElem = elem} key={category} className={'select-category upp'}>{translate(category)}</div>);
+                  list.push(<div ref={(elem) => this.groupElem = elem} key={category}
+                                 className={'select-category upp'}>{translate(category)}</div>);
                 } else {
                   list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
                 }
@@ -208,19 +213,23 @@ export default class AvailableModulesMenu extends TranslatedComponent {
                   categoryHeader = true;
                 }
                 if (m && grp == m.grp) {
-                  list.push(<div ref={(elem) => this.groupElem = elem} key={grp} className={'select-group cap'}>{translate(grp)}</div>);
+                  list.push(<div ref={(elem) => this.groupElem = elem} key={grp}
+                                 className={'select-group cap'}>{translate(grp)}</div>);
                 } else {
                   list.push(<div key={grp} className={'select-group cap'}>{translate(grp)}</div>);
                 }
               }
               list.push(buildGroup(grp, modules[grp]));
+              for (const i of modules[grp]) {
+                fuzzy.push({ grp, m: i, name: `${i.class}${i.rating} ${translate(grp)} ${i.mount ? i.mount : ''}` });
+              }
             }
           }
         }
       }
     }
     let trackingFocus = false;
-    return { list, currentGroup, trackingFocus };
+    return { list, currentGroup, fuzzy, trackingFocus };
   }
 
   /**
@@ -242,9 +251,11 @@ export default class AvailableModulesMenu extends TranslatedComponent {
 
     const sortedModules = modules.sort(this._moduleOrder);
 
-
     // Calculate the number of items per class.  Used so we don't have long lists with only a few items in each row
-    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => { count[cls] = ++count[cls] || 1; return count; }, {});
+    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => {
+      count[cls] = ++count[cls] || 1;
+      return count;
+    }, {});
     const itemsPerClass = Math.max.apply(null, Object.keys(tmp).map(key => tmp[key]));
 
     let itemsOnThisRow = 0;
@@ -297,22 +308,29 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         };
       }
 
-      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 (m.name && m.name === prevName) {
         // elems.push(<br key={'b' + m.grp + i} />);
         itemsOnThisRow = 0;
       }
       if (itemsOnThisRow == 6 || i > 0 && sortedModules.length > 3 && itemsPerClass > 2 && m.class != prevClass && (m.rating != prevRating || m.mount)) {
-        elems.push(<br key={'b' + m.grp + i} />);
+        elems.push(<br key={'b' + m.grp + i}/>);
         itemsOnThisRow = 0;
       }
       let tbIdx = (classes.indexOf('disabled') < 0) ? 0 : undefined;
       elems.push(
-        <li key={m.id} data-id={m.id} className={classes} {...eventHandlers} tabIndex={tbIdx} ref={slotItem => this.slotItems[m.id] = slotItem}>
+        <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>
@@ -340,6 +358,36 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     }
   }
 
+  /**
+   * Generate tooltip content for the difference between the
+   * mounted module and the hovered modules
+   */
+  _showSearch() {
+    return (
+      <FuzzySearch
+        list={this.state.fuzzy}
+        keys={['grp', 'name']}
+        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) => {
+            return (
+              <div
+                key={i}
+                className={'lc'}
+                onClick={() => clickHandler(i)}
+              >
+                {val.name}
+              </div>
+            );
+          });
+        }}
+      />
+    );
+  }
+
   /**
    * Mouse over diff handler
    * @param  {Function} showDiff diff tooltip callback
@@ -405,7 +453,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    * @param {Function}  select Select module callback
    * @param {SytheticEvent} event Event
    */
-  _keyUp(select,event) {
+  _keyUp(select, event) {
     // nothing here yet
   }
 
@@ -475,12 +523,13 @@ export default class AvailableModulesMenu extends TranslatedComponent {
       this.slotItems[this.firstSlotId].focus();
     }
   }
+
   /**
    * Handle focus if the component updates
    *
    */
   componentWillUnmount() {
-    if(this.props.slotDiv) {
+    if (this.props.slotDiv) {
       this.props.slotDiv.focus();
     }
   }
@@ -501,11 +550,12 @@ export default class AvailableModulesMenu extends TranslatedComponent {
   render() {
     return (
       <div ref={node => this.node = node}
-        className={cn('select', this.props.className)}
-        onScroll={this._hideDiff}
-        onClick={(e) => e.stopPropagation() }
-        onContextMenu={stopCtxPropagation}
+           className={cn('select', this.props.className)}
+           onScroll={this._hideDiff}
+           onClick={(e) => e.stopPropagation()}
+           onContextMenu={stopCtxPropagation}
       >
+        {this._showSearch()}
         {this.state.list}
       </div>
     );

src/app/components/HardpointSlot.jsx

@@ -2,12 +2,21 @@ import React from 'react';
 import cn from 'classnames';
 import Slot from './Slot';
 import Persist from '../stores/Persist';
-import { DamageAbsolute, DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret, ListModifications, Modified } from './SvgIcons';
+import {
+  DamageAbsolute,
+  DamageKinetic,
+  DamageThermal,
+  DamageExplosive,
+  MountFixed,
+  MountGimballed,
+  MountTurret,
+  ListModifications,
+  Modified
+} from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import { blueprintTooltip } from '../utils/BlueprintFunctions';
 
-
 /**
  * Hardpoint / Utility Slot
  */
@@ -27,7 +36,7 @@ export default class HardpointSlot extends Slot {
    * @return {string}               Label
    */
   _getMaxClassLabel(translate) {
-    return translate(['U','S','M','L','H'][this.props.maxClass]);
+    return translate(['U', 'S', 'M', 'L', 'H'][this.props.maxClass]);
   }
 
   /**
@@ -66,42 +75,73 @@ export default class HardpointSlot extends Slot {
       return <div className={className} draggable='true' onDragStart={drag} onDragEnd={drop}>
         <div className={'cb'}>
           <div className={'l'}>
-          {m.mount && m.mount == 'F' ? <span onMouseOver={termtip.bind(null, 'fixed')} onMouseOut={tooltip.bind(null, null)}><MountFixed /></span> : ''}
-          {m.mount && m.mount == '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.getSDps()) })</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', 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('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 }
-          { 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 && validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+          {m.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.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', 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('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}
+          {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 && 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

@@ -153,6 +153,15 @@ export default class HardpointSlotSection extends SlotSection {
       <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('ggc')}</div>
+      <ul>
+        <li className='lc' tabIndex='0' onClick={_fill.bind(this, 'ggc', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ggc-F'] = smRef}>{translate('ggc')}</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/ModalOrbis.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
-import { orbisUpload } from '../utils/ShortenUrl';
+import { orbisUpload, API_ORBIS_BASE_URL } from '../utils/ShortenUrl';
 import Persist from '../stores/Persist';
 
 /**
@@ -52,7 +52,7 @@ export default class ModalOrbis extends TranslatedComponent {
    * @returns {Object} auth status
    */
   getOrbisAuthStatus() {
-    return fetch('https://orbis.zone/api/checkauth', {
+    return fetch(`${API_ORBIS_BASE_URL}/api/checkauth`, {
       credentials: 'include',
       mode: 'cors'
     })
@@ -104,7 +104,7 @@ export default class ModalOrbis extends TranslatedComponent {
       <label>Orbis auth status: </label>
       <input value={this.state.authenticatedStatus} readOnly size={25} onFocus={ (e) => e.target.select() }/>
       <br/><br/>
-      <a className='button' href="https://orbis.zone/api/auth">Log in / signup to Orbis</a>
+      <a className='button' href={`${API_ORBIS_BASE_URL}/api/checkauth`}>Log in / signup to Orbis</a>
       <br/><br/>
       <h3 >{translate('Orbis link')}</h3>
       <input value={this.state.orbisUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/>

src/app/components/ShipSummaryTable.jsx

@@ -52,6 +52,7 @@ export default class ShipSummaryTable extends TranslatedComponent {
     const boostTooltip = canBoost ? 'TT_SUMMARY_BOOST' : canThrust ? 'TT_SUMMARY_BOOST_NONFUNCTIONAL' : 'TT_SUMMARY_SPEED_NONFUNCTIONAL';
     const sgMetrics = Calc.shieldMetrics(ship, pips.sys);
     const shipBoost = canBoost ?  Calc.calcBoost(ship) : 'No Boost';
+    const restingHeat = Math.sqrt(((ship.standard[0].m.pgen * ship.standard[0].m.eff) / ship.heatCapacity) / 0.2);
     const armourMetrics = Calc.armourMetrics(ship);
     let shieldColour = 'blue';
     if (shieldGenerator && shieldGenerator.m.grp === 'psg') {
@@ -78,13 +79,14 @@ export default class ShipSummaryTable extends TranslatedComponent {
                 <th rowSpan={2}>{translate('TTD')}</th>
                 {/* <th onMouseEnter={termtip.bind(null, 'heat per second')} onMouseLeave={hide} rowSpan={2}>{translate('HPS')}</th> */}
                 <th rowSpan={2}>{translate('cargo')}</th>
-                <th rowSpan={2}>{translate('pax')}</th>
+                <th rowSpan={2} onMouseEnter={termtip.bind(null, 'passenger capacity', { cap: 0 })} onMouseLeave={hide}>{translate('pax')}</th>
                 <th rowSpan={2}>{translate('fuel')}</th>
                 <th colSpan={3}>{translate('mass')}</th>
                 <th onMouseEnter={termtip.bind(null, 'hull hardness', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('hrd')}</th>
                 <th rowSpan={2}>{translate('crew')}</th>
                 <th onMouseEnter={termtip.bind(null, 'mass lock factor', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('MLF')}</th>
                 <th onMouseEnter={termtip.bind(null, 'TT_SUMMARY_BOOST_TIME', { cap: 0 })} onMouseLeave={hide} rowSpan={2}>{translate('boost time')}</th>
+                <th rowSpan={2}>{translate('resting heat (Beta)')}</th>
               </tr>
               <tr>
                 <th className='lft'>{translate('max')}</th>
@@ -122,6 +124,7 @@ export default class ShipSummaryTable extends TranslatedComponent {
                 <td>{ship.crew}</td>
                 <td>{ship.masslock}</td>
                 <td>{shipBoost !== 'No Boost' ? formats.time(shipBoost) : 'No Boost'}</td>
+                <td>{formats.pct(restingHeat)}</td>
               </tr>
             </tbody>
           </table>

src/app/components/VerticalBarChart.jsx

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

src/app/pages/AboutPage.jsx

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

src/app/pages/ComparisonPage.jsx

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

src/app/pages/NotFoundPage.jsx

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

src/app/pages/OutfittingPage.jsx

@@ -53,7 +53,6 @@ function getTitle(shipName, buildName) {
  * The Outfitting Page
  */
 export default class OutfittingPage extends Page {
-
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -85,22 +84,38 @@ export default class OutfittingPage extends Page {
     let shipId = params.ship;
     let code = params.code;
     let buildName = params.bn;
-    let data = Ships[shipId];   // Retrieve the basic ship properties, slots and defaults
+    let data = Ships[shipId]; // Retrieve the basic ship properties, slots and defaults
     let savedCode = Persist.getBuild(shipId, buildName);
     if (!data) {
       return { error: { message: 'Ship not found: ' + shipId } };
     }
-    let ship = new Ship(shipId, data.properties, data.slots);          // Create a new Ship instance
+    let ship = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
     if (code) {
-      ship.buildFrom(code);  // Populate modules from serialized 'code' URL param
+      ship.buildFrom(code); // Populate modules from serialized 'code' URL param
     } else {
-      ship.buildWith(data.defaults);  // Populate with default components
+      ship.buildWith(data.defaults); // Populate with default components
     }
 
     this._getTitle = getTitle.bind(this, data.properties.name);
 
     // Obtain ship control from code
-    const { sys, eng, wep, mcSys, mcEng, mcWep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange } = this._obtainControlFromCode(ship, code);
+    const {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      fuel,
+      cargo,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      engagementRange
+    } = this._obtainControlFromCode(ship, code);
     return {
       error: null,
       title: this._getTitle(buildName),
@@ -139,7 +154,10 @@ export default class OutfittingPage extends Page {
     };
 
     if (Persist.hasBuild(this.state.shipId, stateChanges.newBuildName)) {
-      stateChanges.savedCode = Persist.getBuild(this.state.shipId, stateChanges.newBuildName);
+      stateChanges.savedCode = Persist.getBuild(
+        this.state.shipId,
+        stateChanges.newBuildName
+      );
     } else {
       stateChanges.savedCode = null;
     }
@@ -165,7 +183,9 @@ export default class OutfittingPage extends Page {
    * @returns {string}        the code for this ship
    */
   _fullCode(ship, fuel, cargo) {
-    return `${ship.toString()}.${LZString.compressToBase64(this._controlCode(fuel, cargo))}`;
+    return `${ship.toString()}.${LZString.compressToBase64(
+      this._controlCode(fuel, cargo)
+    )}`;
   }
 
   /**
@@ -185,7 +205,11 @@ export default class OutfittingPage extends Page {
     let boost = false;
     let fuel = ship.fuelCapacity;
     let cargo = ship.cargoCapacity;
-    let opponent = new Ship('eagle', Ships['eagle'].properties, Ships['eagle'].slots).buildWith(Ships['eagle'].defaults);
+    let opponent = new Ship(
+      'eagle',
+      Ships['eagle'].properties,
+      Ships['eagle'].slots
+    ).buildWith(Ships['eagle'].defaults);
     let opponentSys = 2;
     let opponentEng = 2;
     let opponentWep = 2;
@@ -197,7 +221,9 @@ export default class OutfittingPage extends Page {
       const parts = code.split('.');
       if (parts.length >= 5) {
         // We have control information in the code
-        const control = LZString.decompressFromBase64(Utils.fromUrlSafe(parts[4])).split('/');
+        const control = LZString.decompressFromBase64(
+          Utils.fromUrlSafe(parts[4])
+        ).split('/');
         sys = parseFloat(control[0]) || sys;
         eng = parseFloat(control[1]) || eng;
         wep = parseFloat(control[2]) || wep;
@@ -206,7 +232,11 @@ export default class OutfittingPage extends Page {
         cargo = parseInt(control[5]) || cargo;
         if (control[6]) {
           const shipId = control[6];
-          opponent = new Ship(shipId, Ships[shipId].properties, Ships[shipId].slots);
+          opponent = new Ship(
+            shipId,
+            Ships[shipId].properties,
+            Ships[shipId].slots
+          );
           if (control[7] && Persist.getBuild(shipId, control[7])) {
             // Ship is a particular build
             const opponentCode = Persist.getBuild(shipId, control[7]);
@@ -216,7 +246,9 @@ export default class OutfittingPage extends Page {
               // Obtain opponent's sys/eng/wep pips from their code
               const opponentParts = opponentCode.split('.');
               if (opponentParts.length >= 5) {
-                const opponentControl = LZString.decompressFromBase64(Utils.fromUrlSafe(opponentParts[4])).split('/');
+                const opponentControl = LZString.decompressFromBase64(
+                  Utils.fromUrlSafe(opponentParts[4])
+                ).split('/');
                 opponentSys = parseFloat(opponentControl[0]) || opponentSys;
                 opponentEng = parseFloat(opponentControl[1]) || opponentEng;
                 opponentWep = parseFloat(opponentControl[2]) || opponentWep;
@@ -237,7 +269,23 @@ export default class OutfittingPage extends Page {
       }
     }
 
-    return { sys, eng, wep, mcSys, mcEng, mcWep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange };
+    return {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      fuel,
+      cargo,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      engagementRange
+    };
   }
 
   /**
@@ -252,7 +300,9 @@ export default class OutfittingPage extends Page {
    * @param {number} mcWep  WEP pips from multi-crew
    */
   _pipsUpdated(sys, eng, wep, mcSys, mcEng, mcWep) {
-    this.setState({ sys, eng, wep, mcSys, mcEng, mcWep }, () =>  this._updateRouteOnControlChange());
+    this.setState({ sys, eng, wep, mcSys, mcEng, mcWep }, () =>
+      this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -260,7 +310,7 @@ export default class OutfittingPage extends Page {
    * @param {boolean} boost true if boosting
    */
   _boostUpdated(boost) {
-    this.setState({ boost }, () =>  this._updateRouteOnControlChange());
+    this.setState({ boost }, () => this._updateRouteOnControlChange());
   }
 
   /**
@@ -268,7 +318,7 @@ export default class OutfittingPage extends Page {
    * @param {number} fuel the amount of fuel, in T
    */
   _fuelUpdated(fuel) {
-    this.setState({ fuel }, () =>  this._updateRouteOnControlChange());
+    this.setState({ fuel }, () => this._updateRouteOnControlChange());
   }
 
   /**
@@ -276,7 +326,7 @@ export default class OutfittingPage extends Page {
    * @param {number} cargo the amount of cargo, in T
    */
   _cargoUpdated(cargo) {
-    this.setState({ cargo }, () =>  this._updateRouteOnControlChange());
+    this.setState({ cargo }, () => this._updateRouteOnControlChange());
   }
 
   /**
@@ -284,7 +334,9 @@ export default class OutfittingPage extends Page {
    * @param {number} engagementRange the engagement range, in m
    */
   _engagementRangeUpdated(engagementRange) {
-    this.setState({ engagementRange }, () =>  this._updateRouteOnControlChange());
+    this.setState({ engagementRange }, () =>
+      this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -293,7 +345,11 @@ export default class OutfittingPage extends Page {
    * @param {string} opponentBuild  the name of the opponent's build
    */
   _opponentUpdated(opponent, opponentBuild) {
-    const opponentShip  = new Ship(opponent, Ships[opponent].properties, Ships[opponent].slots);
+    const opponentShip = new Ship(
+      opponent,
+      Ships[opponent].properties,
+      Ships[opponent].slots
+    );
     let opponentSys = this.state.opponentSys;
     let opponentEng = this.state.opponentEng;
     let opponentWep = this.state.opponentWep;
@@ -301,9 +357,13 @@ export default class OutfittingPage extends Page {
       // Ship is a particular build
       opponentShip.buildFrom(Persist.getBuild(opponent, opponentBuild));
       // Set pips for opponent
-      const opponentParts = Persist.getBuild(opponent, opponentBuild).split('.');
+      const opponentParts = Persist.getBuild(opponent, opponentBuild).split(
+        '.'
+      );
       if (opponentParts.length >= 5) {
-        const opponentControl = LZString.decompressFromBase64(Utils.fromUrlSafe(opponentParts[4])).split('/');
+        const opponentControl = LZString.decompressFromBase64(
+          Utils.fromUrlSafe(opponentParts[4])
+        ).split('/');
         opponentSys = parseFloat(opponentControl[0]);
         opponentEng = parseFloat(opponentControl[1]);
         opponentWep = parseFloat(opponentControl[2]);
@@ -316,7 +376,16 @@ export default class OutfittingPage extends Page {
       opponentWep = 2;
     }
 
-    this.setState({ opponent: opponentShip, opponentBuild, opponentSys, opponentEng, opponentWep }, () =>  this._updateRouteOnControlChange());
+    this.setState(
+      {
+        opponent: opponentShip,
+        opponentBuild,
+        opponentSys,
+        opponentEng,
+        opponentWep
+      },
+      () => this._updateRouteOnControlChange()
+    );
   }
 
   /**
@@ -326,8 +395,22 @@ export default class OutfittingPage extends Page {
    * @returns {string}        The control code
    */
   _controlCode(fuel, cargo) {
-    const { sys, eng, wep, mcSys, mcEng, mcWep, boost, opponent, opponentBuild, engagementRange } = this.state;
-    const code = `${sys}/${eng}/${wep}/${boost ? 1 : 0}/${fuel || this.state.fuel}/${cargo || this.state.cargo}/${opponent.id}/${opponentBuild ? opponentBuild : ''}/${engagementRange}/${mcSys}/${mcEng}/${mcWep}`;
+    const {
+      sys,
+      eng,
+      wep,
+      mcSys,
+      mcEng,
+      mcWep,
+      boost,
+      opponent,
+      opponentBuild,
+      engagementRange
+    } = this.state;
+    const code = `${sys}/${eng}/${wep}/${boost ? 1 : 0}/${fuel ||
+      this.state.fuel}/${cargo || this.state.cargo}/${opponent.id}/${
+      opponentBuild ? opponentBuild : ''
+    }/${engagementRange}/${mcSys}/${mcEng}/${mcWep}`;
     return code;
   }
 
@@ -338,27 +421,44 @@ export default class OutfittingPage extends Page {
     const { ship, buildName, newBuildName, shipId } = this.state;
 
     // If this is a stock ship the code won't be set, so ensure that we have it
-    const code =  this.state.code || ship.toString();
+    const code = this.state.code || ship.toString();
 
     Persist.saveBuild(shipId, newBuildName, code);
     this._updateRoute(shipId, newBuildName, code);
 
     let opponent, opponentBuild, opponentSys, opponentEng, opponentWep;
-    if (shipId === this.state.opponent.id && buildName === this.state.opponentBuild) {
+    if (
+      shipId === this.state.opponent.id &&
+      buildName === this.state.opponentBuild
+    ) {
       // This is a save of our current opponent build; update it
       opponentBuild = newBuildName;
-      opponent  = new Ship(shipId, Ships[shipId].properties, Ships[shipId].slots).buildFrom(code);
+      opponent = new Ship(
+        shipId,
+        Ships[shipId].properties,
+        Ships[shipId].slots
+      ).buildFrom(code);
       opponentSys = this.state.sys;
       opponentEng = this.state.eng;
       opponentWep = this.state.wep;
     } else {
       opponentBuild = this.state.opponentBuild;
-      opponent  = this.state.opponent;
+      opponent = this.state.opponent;
       opponentSys = this.state.opponentSys;
       opponentEng = this.state.opponentEng;
       opponentWep = this.state.opponentWep;
     }
-    this.setState({ buildName: newBuildName, code, savedCode: code, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, title: this._getTitle(newBuildName) });
+    this.setState({
+      buildName: newBuildName,
+      code,
+      savedCode: code,
+      opponent,
+      opponentBuild,
+      opponentSys,
+      opponentEng,
+      opponentWep,
+      title: this._getTitle(newBuildName)
+    });
   }
 
   /**
@@ -370,7 +470,12 @@ export default class OutfittingPage extends Page {
       Persist.deleteBuild(shipId, buildName);
       Persist.saveBuild(shipId, newBuildName, code);
       this._updateRoute(shipId, newBuildName, code);
-      this.setState({ buildName: newBuildName, code, savedCode: code, opponentBuild: newBuildName });
+      this.setState({
+        buildName: newBuildName,
+        code,
+        savedCode: code,
+        opponentBuild: newBuildName
+      });
     }
   }
 
@@ -390,9 +495,7 @@ export default class OutfittingPage extends Page {
     ship.buildWith(Ships[shipId].defaults);
     // Reset controls
     const code = ship.toString();
-    const { sys, eng, wep, mcSys, mcEng, mcWep, boost, fuel, cargo, opponent, opponentBuild, engagementRange } = this._obtainControlFromCode(ship, code);
-    // Update state, and refresh the ship
-    this.setState({
+    const {
       sys,
       eng,
       wep,
@@ -405,7 +508,25 @@ export default class OutfittingPage extends Page {
       opponent,
       opponentBuild,
       engagementRange
-    }, () => this._updateRoute(shipId, buildName, code));
+    } = this._obtainControlFromCode(ship, code);
+    // Update state, and refresh the ship
+    this.setState(
+      {
+        sys,
+        eng,
+        wep,
+        mcSys,
+        mcEng,
+        mcWep,
+        boost,
+        fuel,
+        cargo,
+        opponent,
+        opponentBuild,
+        engagementRange
+      },
+      () => this._updateRoute(shipId, buildName, code)
+    );
   }
 
   /**
@@ -416,7 +537,10 @@ export default class OutfittingPage extends Page {
     Persist.deleteBuild(shipId, buildName);
 
     let opponentBuild;
-    if (shipId === this.state.opponent.id && buildName === this.state.opponentBuild) {
+    if (
+      shipId === this.state.opponent.id &&
+      buildName === this.state.opponentBuild
+    ) {
       // Our current opponent has been deleted; revert to stock
       opponentBuild = null;
     } else {
@@ -433,11 +557,13 @@ export default class OutfittingPage extends Page {
   _exportBuild() {
     let translate = this.context.language.translate;
     let { buildName, ship } = this.state;
-    this.context.showModal(<ModalExport
-      title={(buildName || ship.name) + ' ' + translate('export')}
-      description={translate('PHRASE_EXPORT_DESC')}
-      data={toDetailedBuild(buildName, ship, ship.toString())}
-    />);
+    this.context.showModal(
+      <ModalExport
+        title={(buildName || ship.name) + ' ' + translate('export')}
+        description={translate('PHRASE_EXPORT_DESC')}
+        data={toDetailedBuild(buildName, ship, ship.toString())}
+      />
+    );
   }
 
   /**
@@ -450,9 +576,7 @@ export default class OutfittingPage extends Page {
     this.state.ship.buildFrom(code);
 
     // Obtain controls from the code
-    const { sys, eng, wep, mcSys, mcEng, mcWep, boost, fuel, cargo, opponent, opponentBuild, engagementRange } = this._obtainControlFromCode(ship, code);
-    // Update state, and refresh the route when complete
-    this.setState({
+    const {
       sys,
       eng,
       wep,
@@ -465,7 +589,25 @@ export default class OutfittingPage extends Page {
       opponent,
       opponentBuild,
       engagementRange
-    }, () => this._updateRoute(shipId, buildName, code));
+    } = this._obtainControlFromCode(ship, code);
+    // Update state, and refresh the route when complete
+    this.setState(
+      {
+        sys,
+        eng,
+        wep,
+        mcSys,
+        mcEng,
+        mcWep,
+        boost,
+        fuel,
+        cargo,
+        opponent,
+        opponentBuild,
+        engagementRange
+      },
+      () => this._updateRoute(shipId, buildName, code)
+    );
   }
 
   /**
@@ -481,8 +623,14 @@ export default class OutfittingPage extends Page {
     }
     const code = this._fullCode(ship, fuel, cargo);
     // Only update the state if this really has been updated
-    if (this.state.code != code || this.state.cargo != cargo || this.state.fuel != fuel) {
-      this.setState({ code, cargo, fuel }, () => this._updateRoute(shipId, buildName, code));
+    if (
+      this.state.code != code ||
+      this.state.cargo != cargo ||
+      this.state.fuel != fuel
+    ) {
+      this.setState({ code, cargo, fuel }, () =>
+        this._updateRoute(shipId, buildName, code)
+      );
     }
   }
 
@@ -502,7 +650,8 @@ export default class OutfittingPage extends Page {
    * @param  {Object} nextContext Incoming/Next conext
    */
   componentWillReceiveProps(nextProps, nextContext) {
-    if (this.context.route !== nextContext.route) {  // Only reinit state if the route has changed
+    if (this.context.route !== nextContext.route) {
+      // Only reinit state if the route has changed
       this.setState(this._initState(nextProps, nextContext));
     }
   }
@@ -525,7 +674,7 @@ export default class OutfittingPage extends Page {
    * Generates the short URL
    */
   _genShortlink() {
-    this.context.showModal(<ModalPermalink url={window.location.href}/>);
+    this.context.showModal(<ModalPermalink url={window.location.href} />);
   }
 
   /**
@@ -533,7 +682,32 @@ export default class OutfittingPage extends Page {
    */
   _genOrbis() {
     const data = {};
+    const {Ship, Module, Factory} = require('ed-forge');
+    const forgeShip = Factory.newShip(this.state.ship.id);
+    console.log(forgeShip);
     const ship = this.state.ship;
+    const forgeOrder = {
+      0: 'bh',
+      1: 'pp',
+      2: 't',
+      3: 'fsd',
+      4: 'ls',
+      5: 'pd',
+      6: 's',
+      7: 'ft'
+    }
+    ship.standard.forEach((standard, idx) => {
+      console.log(standard)
+      const mod = Factory.newModule(standard.m.symbol, standard.m.class.toString(), standard.m.rating.toString());
+      console.log(mod);
+      const coreIdx = Object.entries(forgeOrder).findIndex(e => e[1] === standard.m.grp);
+      console.log(coreIdx)
+      console.log(forgeShip.getCoreModules())
+      forgeShip.getCoreModules()[coreIdx].setItem(standard.m.symbol);
+      if (standard.m.blueprint) {
+        console.log(standard.m.blueprint)
+      }
+    });
     ship.coriolisId = ship.id;
     data.coriolisShip = ship;
     data.url = window.location.href;
@@ -542,7 +716,7 @@ export default class OutfittingPage extends Page {
     data.ShipName = ship.id;
     data.Ship = ship.id;
     console.log(data);
-    this.context.showModal(<ModalOrbis ship={data}/>);
+    this.context.showModal(<ModalOrbis ship={data} />);
   }
 
   /**
@@ -553,17 +727,23 @@ export default class OutfittingPage extends Page {
 
     const shipId = Ships[ship.id].eddbID;
     // Provide unique list of non-PP module EDDB IDs
-    const modIds = ship.internal.concat(ship.bulkheads, ship.standard, ship.hardpoints).filter(slot => slot !== null && slot.m !== null && !slot.m.pp).map(slot => slot.m.eddbID).filter((v, i, a) => a.indexOf(v) === i);
+    const modIds = ship.internal
+      .concat(ship.bulkheads, ship.standard, ship.hardpoints)
+      .filter(slot => slot !== null && slot.m !== null && !slot.m.pp)
+      .map(slot => slot.m.eddbID)
+      .filter((v, i, a) => a.indexOf(v) === i);
 
     // Open up the relevant URL
-    window.open('https://eddb.io/station?s=' + shipId + '&m=' + modIds.join(','));
+    window.open(
+      'https://eddb.io/station?s=' + shipId + '&m=' + modIds.join(',')
+    );
   }
 
   /**
    * Generates the shopping list
    */
   _genShoppingList() {
-    this.context.showModal(<ModalShoppingList ship={this.state.ship}/>);
+    this.context.showModal(<ModalShoppingList ship={this.state.ship} />);
   }
 
   /**
@@ -573,8 +753,9 @@ export default class OutfittingPage extends Page {
   _keyDown(e) {
     // .keyCode will eventually be replaced with .key
     switch (e.keyCode) {
-      case 69:     // 'e'
-        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + e
+      case 69: // 'e'
+        if (e.ctrlKey || e.metaKey) {
+          // CTRL/CMD + e
           e.preventDefault();
           this._exportBuild();
         }
@@ -590,7 +771,28 @@ export default class OutfittingPage extends Page {
     let state = this.state,
         { language, termtip, tooltip, sizeRatio, onWindowResize } = this.context,
         { translate, units, formats } = language,
-        { ship, code, savedCode, buildName, newBuildName, sys, eng, wep, mcSys, mcEng, mcWep, boost, fuel, cargo, opponent, opponentBuild, opponentSys, opponentEng, opponentWep, engagementRange } = state,
+        {
+          ship,
+          code,
+          savedCode,
+          buildName,
+          newBuildName,
+          sys,
+          eng,
+          wep,
+          mcSys,
+          mcEng,
+          mcWep,
+          boost,
+          fuel,
+          cargo,
+          opponent,
+          opponentBuild,
+          opponentSys,
+          opponentEng,
+          opponentWep,
+          engagementRange
+        } = state,
         hide = tooltip.bind(null, null),
         menu = this.props.currentMenu,
         shipUpdated = this._shipUpdated,
@@ -608,11 +810,15 @@ export default class OutfittingPage extends Page {
     const _pStr = `${ship.getPowerEnabledString()}${ship.getPowerPrioritiesString()}`;
     const _mStr = ship.getModificationsString();
 
-    const standardSlotMarker = `${ship.name}${_sStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
+    const standardSlotMarker = `${ship.name}${_sStr}${_pStr}${_mStr}${
+      ship.ladenMass
+    }${cargo}${fuel}`;
     const internalSlotMarker = `${ship.name}${_iStr}${_pStr}${_mStr}`;
     const hardpointsSlotMarker = `${ship.name}${_hStr}${_pStr}${_mStr}`;
     const boostMarker = `${ship.canBoost(cargo, fuel)}`;
-    const shipSummaryMarker = `${ship.name}${_sStr}${_iStr}${_hStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
+    const shipSummaryMarker = `${
+      ship.name
+    }${_sStr}${_iStr}${_hStr}${_pStr}${_mStr}${ship.ladenMass}${cargo}${fuel}`;
 
     const requirements = Ships[ship.id].requirements;
     let requirementElements = [];
@@ -624,94 +830,275 @@ export default class OutfittingPage extends Page {
      */
     function renderRequirement(className, textKey, tooltipTextKey) {
       if (textKey.startsWith('empire') || textKey.startsWith('federation')) {
-        requirementElements.push(<div key={textKey} className={className} onMouseEnter={termtip.bind(null, tooltipTextKey)} onMouseLeave={hide}><a href={textKey.startsWith('empire') ? 'http://elite-dangerous.wikia.com/wiki/Empire/Ranks' : 'http://elite-dangerous.wikia.com/wiki/Federation/Ranks'} target="_blank" rel="noopener">{translate(textKey)}</a></div>);
+        requirementElements.push(
+          <div
+            key={textKey}
+            className={className}
+            onMouseEnter={termtip.bind(null, tooltipTextKey)}
+            onMouseLeave={hide}
+          >
+            <a
+              href={
+                textKey.startsWith('empire') ?
+                  'http://elite-dangerous.wikia.com/wiki/Empire/Ranks' :
+                  'http://elite-dangerous.wikia.com/wiki/Federation/Ranks'
+              }
+              target="_blank"
+              rel="noopener"
+            >
+              {translate(textKey)}
+            </a>
+          </div>
+        );
       } else {
-        requirementElements.push(<div key={textKey} className={className} onMouseEnter={termtip.bind(null, tooltipTextKey)} onMouseLeave={hide}>{translate(textKey)}</div>);
+        requirementElements.push(
+          <div
+            key={textKey}
+            className={className}
+            onMouseEnter={termtip.bind(null, tooltipTextKey)}
+            onMouseLeave={hide}
+          >
+            {translate(textKey)}
+          </div>
+        );
       }
     }
 
     if (requirements) {
-      requirements.federationRank && renderRequirement('federation', 'federation rank ' + requirements.federationRank, 'federation rank required');
-      requirements.empireRank && renderRequirement('empire', 'empire rank ' + requirements.empireRank, 'empire rank required');
-      requirements.horizons && renderRequirement('horizons', 'horizons', 'horizons required');
-      requirements.horizonsEarlyAdoption && renderRequirement('horizons', 'horizons early adoption', 'horizons early adoption required');
+      requirements.federationRank &&
+        renderRequirement(
+          'federation',
+          'federation rank ' + requirements.federationRank,
+          'federation rank required'
+        );
+      requirements.empireRank &&
+        renderRequirement(
+          'empire',
+          'empire rank ' + requirements.empireRank,
+          'empire rank required'
+        );
+      requirements.horizons &&
+        renderRequirement('horizons', 'horizons', 'horizons required');
+      requirements.horizonsEarlyAdoption &&
+        renderRequirement(
+          'horizons',
+          'horizons early adoption',
+          'horizons early adoption required'
+        );
     }
 
     return (
-      <div id='outfit' className={'page'} style={{ fontSize: (sizeRatio * 0.9) + 'em' }}>
-        <div id='overview'>
+      <div
+        id="outfit"
+        className={'page'}
+        style={{ fontSize: sizeRatio * 0.9 + 'em' }}
+      >
+        <div id="overview">
           <h1>{ship.name}</h1>
-          <div id='requirements'>{requirementElements}</div>
-          <div id='build'>
-            <input value={newBuildName || ''} onChange={this._buildNameChange} placeholder={translate('Enter Name')} maxLength={50} />
-            <button onClick={canSave && this._saveBuild} disabled={!canSave} onMouseOver={termtip.bind(null, 'save')} onMouseOut={hide}>
-              <FloppyDisk className='lg' />
+          <div id="requirements">{requirementElements}</div>
+          <div id="build">
+            <input
+              value={newBuildName || ''}
+              onChange={this._buildNameChange}
+              placeholder={translate('Enter Name')}
+              maxLength={50}
+            />
+            <button
+              onClick={canSave && this._saveBuild}
+              disabled={!canSave}
+              onMouseOver={termtip.bind(null, 'save')}
+              onMouseOut={hide}
+            >
+              <FloppyDisk className="lg" />
             </button>
-            <button onClick={canRename && this._renameBuild} disabled={!canRename} onMouseOver={termtip.bind(null, 'rename')} onMouseOut={hide}>
-            <span style={{ textTransform: 'none', fontSize: '1.8em' }}>a|</span>
+            <button
+              onClick={canRename && this._renameBuild}
+              disabled={!canRename}
+              onMouseOver={termtip.bind(null, 'rename')}
+              onMouseOut={hide}
+            >
+              <span style={{ textTransform: 'none', fontSize: '1.8em' }}>
+                a|
+              </span>
             </button>
-            <button onClick={canReload && this._reloadBuild} disabled={!canReload} onMouseOver={termtip.bind(null, 'reload')} onMouseOut={hide}>
-              <Reload className='lg'/>
+            <button
+              onClick={canReload && this._reloadBuild}
+              disabled={!canReload}
+              onMouseOver={termtip.bind(null, 'reload')}
+              onMouseOut={hide}
+            >
+              <Reload className="lg" />
             </button>
-            <button className={'danger'} onClick={savedCode && this._deleteBuild} disabled={!savedCode} onMouseOver={termtip.bind(null, 'delete')} onMouseOut={hide}>
-              <Bin className='lg'/>
+            <button
+              className={'danger'}
+              onClick={savedCode && this._deleteBuild}
+              disabled={!savedCode}
+              onMouseOver={termtip.bind(null, 'delete')}
+              onMouseOut={hide}
+            >
+              <Bin className="lg" />
             </button>
-            <button onClick={code && this._resetBuild} disabled={!code} onMouseOver={termtip.bind(null, 'reset')} onMouseOut={hide}>
-              <Switch className='lg'/>
+            <button
+              onClick={code && this._resetBuild}
+              disabled={!code}
+              onMouseOver={termtip.bind(null, 'reset')}
+              onMouseOut={hide}
+            >
+              <Switch className="lg" />
             </button>
-            <button onClick={buildName && this._exportBuild} disabled={!buildName} onMouseOver={termtip.bind(null, 'export')} onMouseOut={hide}>
-              <Download className='lg'/>
+            <button
+              onClick={buildName && this._exportBuild}
+              disabled={!buildName}
+              onMouseOver={termtip.bind(null, 'export')}
+              onMouseOut={hide}
+            >
+              <Download className="lg" />
             </button>
-            <button onClick={this._eddbShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_LIST')} onMouseOut={hide}>
-              <ShoppingIcon className='lg' />
+            <button
+              onClick={this._eddbShoppingList}
+              onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_LIST')}
+              onMouseOut={hide}
+            >
+              <ShoppingIcon className="lg" />
             </button>
-            <button onClick={this._genShortlink} onMouseOver={termtip.bind(null, 'shortlink')} onMouseOut={hide}>
-              <LinkIcon className='lg' />
+            <button
+              onClick={this._genShortlink}
+              onMouseOver={termtip.bind(null, 'shortlink')}
+              onMouseOut={hide}
+            >
+              <LinkIcon className="lg" />
             </button>
-            <button onClick={this._genOrbis} onMouseOver={termtip.bind(null, 'PHASE_UPLOAD_ORBIS')} onMouseOut={hide}>
-              <OrbisIcon className='lg' />
+            <button
+              onClick={this._genOrbis}
+              onMouseOver={termtip.bind(null, 'PHASE_UPLOAD_ORBIS')}
+              onMouseOut={hide}
+            >
+              <OrbisIcon className="lg" />
             </button>
-            <button onClick={this._genShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_MATS')} onMouseOut={hide}>
-              <MatIcon className='lg' />
+            <button
+              onClick={this._genShoppingList}
+              onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_MATS')}
+              onMouseOut={hide}
+            >
+              <MatIcon className="lg" />
             </button>
           </div>
         </div>
 
         {/* Main tables */}
-        <ShipSummaryTable ship={ship} fuel={fuel} cargo={cargo} marker={shipSummaryMarker} pips={{ sys: this.state.sys, wep: this.state.wep, eng: this.state.eng }} />
-        <StandardSlotSection ship={ship} fuel={fuel} cargo={cargo} code={standardSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
-        <InternalSlotSection ship={ship} code={internalSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
-        <HardpointSlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
-        <UtilitySlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
+        <ShipSummaryTable
+          ship={ship}
+          fuel={fuel}
+          cargo={cargo}
+          marker={shipSummaryMarker}
+          pips={{
+            sys: this.state.sys,
+            wep: this.state.wep,
+            eng: this.state.eng
+          }}
+        />
+        <StandardSlotSection
+          ship={ship}
+          fuel={fuel}
+          cargo={cargo}
+          code={standardSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <InternalSlotSection
+          ship={ship}
+          code={internalSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <HardpointSlotSection
+          ship={ship}
+          code={hardpointsSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
+        <UtilitySlotSection
+          ship={ship}
+          code={hardpointsSlotMarker}
+          onChange={shipUpdated}
+          onCargoChange={this._cargoUpdated}
+          onFuelChange={this._fuelUpdated}
+          currentMenu={menu}
+          sectionMenuRefs={this._sectionMenuRefs}
+        />
 
         {/* Control of ship and opponent */}
-        <div className='group quarter'>
-          <div className='group half'>
-            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>{translate('ship control')}</h2>
+        <div className="group quarter">
+          <div className="group half">
+            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>
+              {translate('ship control')}
+            </h2>
           </div>
-          <div className='group half'>
-            <Boost marker={boostMarker} ship={ship} boost={boost} onChange={this._boostUpdated} />
+          <div className="group half">
+            <Boost
+              marker={boostMarker}
+              ship={ship}
+              boost={boost}
+              onChange={this._boostUpdated}
+            />
           </div>
         </div>
-        <div className='group quarter'>
-          <Pips sys={sys} eng={eng} wep={wep} mcSys={mcSys} mcEng={mcEng} mcWep={mcWep} onChange={this._pipsUpdated} />
+        <div className="group quarter">
+          <Pips
+            sys={sys}
+            eng={eng}
+            wep={wep}
+            mcSys={mcSys}
+            mcEng={mcEng}
+            mcWep={mcWep}
+            onChange={this._pipsUpdated}
+          />
         </div>
-        <div className='group quarter'>
-          <Fuel fuelCapacity={ship.fuelCapacity} fuel={fuel} onChange={this._fuelUpdated}/>
+        <div className="group quarter">
+          <Fuel
+            fuelCapacity={ship.fuelCapacity}
+            fuel={fuel}
+            onChange={this._fuelUpdated}
+          />
         </div>
-        <div className='group quarter'>
-          { ship.cargoCapacity > 0 ? <Cargo cargoCapacity={ship.cargoCapacity} cargo={cargo} onChange={this._cargoUpdated}/> : null }
+        <div className="group quarter">
+          {ship.cargoCapacity > 0 ? (
+            <Cargo
+              cargoCapacity={ship.cargoCapacity}
+              cargo={cargo}
+              onChange={this._cargoUpdated}
+            />
+          ) : null}
         </div>
-        <div className='group half'>
-          <div className='group quarter'>
-            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>{translate('opponent')}</h2>
+        <div className="group half">
+          <div className="group quarter">
+            <h2 style={{ verticalAlign: 'middle', textAlign: 'left' }}>
+              {translate('opponent')}
+            </h2>
           </div>
-          <div className='group threequarters'>
-            <ShipPicker ship={opponent.id} build={opponentBuild} onChange={this._opponentUpdated}/>
+          <div className="group threequarters">
+            <ShipPicker
+              ship={opponent.id}
+              build={opponentBuild}
+              onChange={this._opponentUpdated}
+            />
           </div>
         </div>
-        <div className='group half'>
-          <EngagementRange ship={ship} engagementRange={engagementRange} onChange={this._engagementRangeUpdated}/>
+        <div className="group half">
+          <EngagementRange
+            ship={ship}
+            engagementRange={engagementRange}
+            onChange={this._engagementRangeUpdated}
+          />
         </div>
 
         {/* Tabbed subpages */}

src/app/pages/ShipyardPage.jsx

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

src/app/shipyard/Module.js

@@ -41,6 +41,7 @@ export default class Module {
    * @return {object}     The value of the modification. If it is a numeric value then it is returned as an integer value scaled so that 1.23% == 123
    */
   getModValue(name, raw) {
+    let baseVal = this[name];
     let result = this.mods  && this.mods[name] ? this.mods[name] : null;
 
     if ((!raw) && this.blueprint && this.blueprint.special) {
@@ -51,13 +52,8 @@ export default class Module {
         const modification = Modifications.modifications[name];
         const multiplier = modification.type === 'percentage' ? 10000 : 100;
         if (name === 'explres' || name === 'kinres' || name === 'thermres' || name === 'causres') {
-          // Resistance modifications in itself are additive, however their
-          // special effects are multiplicative. They affect the overall result
-          // by (special effect resistance) * (damage mult after modification),
-          // i. e. we need to apply the special effect as a multiplier to the
-          // overall result and then calculate the difference.
-          let baseMult = this[name] ? 1 - this[name] : 1;
-          result = (baseMult - (baseMult - result / multiplier) * (1 - modifierActions[name] / 100)) * multiplier;
+          // Apply resistance modding mechanisms to special effects subsequently
+          result = result + modifierActions[name] * (1 - (this[name] + result / multiplier)) * 100;
         } else if (modification.method === 'additive') {
           result = result + modifierActions[name] * 100;
         } else if (modification.method === 'overwrite') {
@@ -75,15 +71,6 @@ export default class Module {
       }
     }
 
-    // Resistance modding for hull reinforcement packages has additional
-    // diminishing returns implemented. The mod value gets lowered by
-    // the amount of base resistance the hrp has.
-    if (!isNaN(result) && this.grp === 'hr' &&
-      (name === 'kinres' || name === 'thermres' || name === 'explres')) {
-      let baseRes = this[name];
-      result = result * (1 - baseRes);
-    }
-
     // Sanitise the resultant value to 4dp equivalent
     return isNaN(result) ? result : Math.round(result);
   }
@@ -108,11 +95,11 @@ export default class Module {
         // This special effect modifies the value being set, so we need to revert it prior to storing the value
         const modification = Modifications.modifications[name];
         if (name === 'explres' || name === 'kinres' || name === 'thermres' || name === 'causres') {
-          // Resistance modifications in itself are additive but their
-          // experimentals are applied multiplicatively therefor we must handle
-          // them differently here (cf. documentation in getModValue).
-          let baseMult = (this[name] ? 1 - this[name] : 1);
-          value = ((baseMult - value / 10000) / (1 - modifierActions[name] / 100) - baseMult) * -10000;
+          let res = (this[name] ? this[name] : 0) + value / 10000;
+          let experimental = modifierActions[name] / 100;
+          value = (experimental - res) / (experimental - 1) - this[name];
+          value *= 10000;
+          // value = ((baseMult - value / 10000) / (1 - modifierActions[name] / 100) - baseMult) * -10000;
         } else if (modification.method === 'additive') {
           value = value - modifierActions[name];
         } else if (modification.method === 'overwrite') {
@@ -177,10 +164,6 @@ export default class Module {
         baseValue = 0;
       }
       modValue = value - baseValue;
-      if (this.grp === 'hr' &&
-        (name === 'kinres' || name === 'thermres' || name === 'explres')) {
-        modValue = modValue / (1 - baseValue);
-      }
     } else if (name === 'shieldboost' || name === 'hullboost') {
       modValue = (1 + value) / (1 + baseValue) - 1;
     } else { // multiplicative

src/app/shipyard/ModuleUtils.js

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

src/app/shipyard/Ship.js

@@ -505,6 +505,11 @@ export default class Ship {
     if (isAbsolute) {
       m.setPretty(name, value, sentfromui);
     } else {
+      // Resistance modifiers scale with the base value
+      if (name == 'kinres' || name == 'thermres' || name == 'causres' || name == 'explres') {
+        let baseValue = m.get(name, false);
+        value = (1 - baseValue) * value;
+      }
       m.setModValue(name, value, sentfromui);
     }
 
@@ -1501,7 +1506,7 @@ export default class Ship {
             } else {
               buffer.writeInt32LE(slotMod.value, curpos);
             }
-            // const modification = _.find(Modifications.modifications, function(o) { return o.id === slotMod.id; });
+            const modification = _.find(Modifications.modifications, function(o) { return o.id === slotMod.id; });
             // console.log('ENCODE Slot ' + i + ': ' + modification.name + ' = ' + slotMod.value);
             curpos += 4;
           }
@@ -1514,6 +1519,7 @@ export default class Ship {
       }
 
       this.serialized.modifications = zlib.gzipSync(buffer).toString('base64');
+      // console.log(this.serialized.modifications)
     } else {
       this.serialized.modifications = null;
     }

src/app/utils/CompanionApiUtils.js

@@ -30,6 +30,8 @@ export const SHIP_FD_NAME_TO_CORIOLIS_NAME = {
   'Hauler': 'hauler',
   'Independant_Trader': 'keelback',
   'Krait_MkII': 'krait_mkii',
+  'Mamba': 'mamba',
+  'Krait_Light': 'krait_phantom',
   'Orca': 'orca',
   'Python': 'python',
   'SideWinder': 'sidewinder',

src/app/utils/ShortenUrl.js

@@ -105,7 +105,7 @@ function orbisShorten(url, success, error) {
   }
 }
 
-const API_ORBIS = 'https://orbis.zone/api/builds/add';
+export const API_ORBIS_BASE_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:3030' : 'https://orbis.zone';
 /**
  * Upload to Orbis
  * @param  {object} ship        The URL to shorten
@@ -117,7 +117,7 @@ export function orbisUpload(ship, creds) {
     if (window.navigator.onLine) {
       try {
         agent
-          .post(API_ORBIS)
+          .post(`${API_ORBIS_BASE_URL}/api/builds/add`)
           .withCredentials()
           .redirects(0)
           .set('Content-Type', 'application/json')

src/iframe.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="xdLocalStoragePostMessageApi.min.js"></script>
+</head>
+<body>
+    This is the magical iframe
+</body>
+</html>

src/index.ejs

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

src/less/app.less

@@ -171,3 +171,16 @@ footer {
     text-align: right;
   }
 }
+
+.announcement-container {
+  display: flex;
+  align-items: center;
+  padding-top: 10px;
+  justify-content: center;
+  flex-flow: row wrap;
+}
+
+.announcement {
+  border: 1px @secondary solid;
+  padding: 10px;
+}

src/less/select.less

@@ -22,6 +22,15 @@ select {
   }
 }
 
+.react-fuzzy-search > * {
+  padding: 0 !important;
+  color: @primary;
+  & > input {
+    border: 1px solid @primary !important;
+    color: @primary-bg;
+  }
+}
+
 .cmdr-select {
   border: 1px solid @primary;
   padding: 0.5em 0.5em;

src/sw.js

@@ -2,6 +2,15 @@ console.log('Hello from sw.js');
 
 if (workbox) {
   console.log('Yay! Workbox is loaded 🎉');
+  workbox.precaching.precacheAndRoute(self.__precacheManifest);
+
+  workbox.routing.registerNavigationRoute('/index.html');
+
+  workbox.routing.registerRoute(
+    new RegExp('/(.*?)'),
+    workbox.strategies.staleWhileRevalidate()
+  );
+
   workbox.routing.registerRoute(
     new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
     workbox.strategies.cacheFirst({
@@ -16,24 +25,7 @@ if (workbox) {
       ]
     })
   );
-  workbox.routing.registerRoute(
-    /\.(?:png|gif|jpg|jpeg|svg)$/,
-    workbox.strategies.cacheFirst({
-      cacheName: 'images',
-      plugins: [
-        new workbox.expiration.Plugin({
-          maxEntries: 60,
-          maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
-        })
-      ]
-    })
-  );
-  workbox.routing.registerRoute(
-    /\.(?:js|css)$/,
-    workbox.strategies.staleWhileRevalidate({
-      cacheName: 'static-resources'
-    })
-  );
+
   try {
     workbox.googleAnalytics.initialize();
   } catch (e) {
@@ -43,38 +35,17 @@ if (workbox) {
   console.log('Boo! Workbox didn\'t load 😬');
 }
 
-
 self.addEventListener('message', event => {
-	if (!event.data) {
-		return;
-	}
+  if (!event.data) {
+    return;
+  }
 
-	switch (event.data) {
-		case 'skipWaiting':
-			self.skipWaiting();
-			break;
-		default:
-			// NOOP
-			break;
-	}
-});
-
-self.addEventListener('fetch', function(event) {
-	console.log('Handling fetch event for', event.request.url);
-
-	event.respondWith(
-		caches.match(event.request).then(function(response) {
-			if (response) {
-				return response;
-			}
-
-			return fetch(event.request)
-				.then(function(response) {
-					return response;
-				})
-				.catch(function(error) {
-					return caches.match(OFFLINE_URL);
-				});
-		})
-	);
+  switch (event.data) {
+    case 'skipWaiting':
+      self.skipWaiting();
+      break;
+    default:
+      // NOOP
+      break;
+  }
 });

src/xdLocalStoragePostMessageApi.min.js

@@ -0,0 +1 @@
+"use strict";window.XdUtils=window.XdUtils||function(){function a(a,b){var c,d=b||{};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);return d}return{extend:a}}(),function(){function a(a,b){var c=XdUtils.extend(b,l);c.id=a,parent.postMessage(JSON.stringify(c),"*")}function b(b,c){a(b,{key:c,value:localStorage.getItem(c)})}function c(b,c,d){localStorage.setItem(c,d),a(b,{success:localStorage.getItem(c)===d})}function d(b,c){localStorage.removeItem(c),a(b,{})}function e(b,c){a(b,{key:localStorage.key(c)})}function f(b){a(b,{size:JSON.stringify(localStorage).length})}function g(b){a(b,{length:localStorage.length})}function h(b){localStorage.clear(),a(b,{})}function i(a){var i;try{i=JSON.parse(a.data)}catch(a){}i&&i.namespace===k&&("set"===i.action?c(i.id,i.key,i.value):"get"===i.action?b(i.id,i.key):"remove"===i.action?d(i.id,i.key):"key"===i.action?e(i.id,i.key):"size"===i.action?f(i.id):"length"===i.action?g(i.id):"clear"===i.action&&h(i.id))}function j(){var a={namespace:k,id:"iframe-ready"};parent.postMessage(JSON.stringify(a),"*")}var k="cross-domain-local-message",l={namespace:k};window.addEventListener?window.addEventListener("message",i,!1):window.attachEvent("onmessage",i),j()}();

webpack.config.dev.js

@@ -22,9 +22,6 @@ module.exports = {
   },
   optimization: {
     minimize: false,
-    splitChunks: {
-      chunks: 'all'
-    }
   },
   output: {
     path: path.join(__dirname, 'build'),
@@ -32,7 +29,7 @@ module.exports = {
     publicPath: '/'
   },
   plugins: [
-    new CopyWebpackPlugin(['src/.htaccess']),
+    new CopyWebpackPlugin(['src/.htaccess', 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']),
     // new webpack.optimize.CommonsChunkPlugin({
     //   name: 'lib',
     //   filename: 'lib.js'

webpack.config.prod.js

@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins');
+const { BugsnagSourceMapUploaderPlugin, BugsnagBuildReporterPlugin } = require('webpack-bugsnag-plugins');
 const pkgJson = require('./package');
 const buildDate = new Date();
 
@@ -30,7 +30,7 @@ module.exports = {
     }
   },
   plugins: [
-    new CopyWebpackPlugin(['src/.htaccess', { from: 'src/schemas', to: 'schemas' }, {from: 'src/images/logo/*', flatten: true, to: ''}]),
+    new CopyWebpackPlugin(['src/.htaccess', { from: 'src/schemas', to: 'schemas' }, {from: 'src/images/logo/*', flatten: true, to: ''}, 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']),
     // new webpack.optimize.CommonsChunkPlugin({
     //  name: 'lib',
     //  filename: 'lib.[chunkhash:6].js'
@@ -48,10 +48,15 @@ module.exports = {
       disable: false,
       allChunks: true
     }),
-    // new BugsnagSourceMapUploaderPlugin({
-    //   apiKey: 'ba9fae819372850fb660755341fa6ef5',
-    //   appVersion: `${pkgJson.version}-${buildDate.toISOString()}`
-    // }),
+    new BugsnagBuildReporterPlugin({
+      apiKey: 'ba9fae819372850fb660755341fa6ef5',
+      appVersion: `${pkgJson.version}-${buildDate.toISOString()}`
+    }, { /* opts */ }),
+    new BugsnagSourceMapUploaderPlugin({
+      apiKey: 'ba9fae819372850fb660755341fa6ef5',
+      overwrite: true,
+      appVersion: `${pkgJson.version}-${buildDate.toISOString()}`
+    }),
     new InjectManifest({
       swSrc: './src/sw.js',
       importWorkboxFrom: 'cdn',