Add 'Damage dealt' section

ChangeLog.md

@@ -13,6 +13,7 @@
   * Obey restricted slot rules when adding all for internal slots
   * Version URLs to handle changes to ship specifications over time
   * Do not include disabled shield boosters in calculations
+  * Add 'Damage dealt' section
 
 #2.2.5
   * Calculate rate of fire for multi-burst weapons

src/app/components/DamageDealt.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import cn from 'classnames';
+import TranslatedComponent from './TranslatedComponent';
+import { Ships } from 'coriolis-data/dist';
+import { slotName, slotComparator } from '../utils/SlotFunctions';
+import ShipSelector from './ShipSelector';
+
+/**
+ * Damage against a selected ship
+ */
+export default class DamageDealt extends TranslatedComponent {
+  static PropTypes = {
+    ship: React.PropTypes.object.isRequired,
+    code: React.PropTypes.string.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+
+    this._sort = this._sort.bind(this);
+    this._onShipChange = this._onShipChange.bind(this);
+
+    this.state = {
+      predicate: 'n',
+      desc: true,
+      against: Ships['anaconda'],
+    };
+  }
+
+  /**
+   * Triggered when the comparator ship changes
+   */
+  _onShipChange(s) {
+    this.setState({ against: Ships[s] });
+  }
+
+  /**
+   * Set the sort order and sort
+   * @param  {string} predicate Sort predicate
+   */
+  _sortOrder(predicate) {
+    let desc = this.state.desc;
+
+    if (predicate == this.state.predicate) {
+      desc = !desc;
+    } else {
+      desc = true;
+    }
+
+    this._sort(this.props.ship, predicate, desc);
+    this.setState({ predicate, desc });
+  }
+
+  /**
+   * Sorts the weapon list
+   * @param  {Ship} ship          Ship instance
+   * @param  {Ship} against       The ship to compare against
+   * @param  {string} predicate   Sort predicate
+   * @param  {Boolean} desc       Sort order descending
+   */
+  _sort(ship, against, predicate, desc) {
+    let weaponList = ship.hardpoints;
+    let comp = slotComparator.bind(null, this.context.language.translate);
+
+    switch (predicate) {
+      case 'n': comp = comp(null, desc); break;
+      case 'd': comp = comp((a, b) => a.m.getDps() - b.m.getDps(), desc); break;
+      case 'e': comp = comp((a, b) => (a.m.getPiercing() > a.m.hardness ? a.m.getDps() : a.m.getDps() * a.m.getPiercing() / a.m.hardness) - (b.m.getPiercing() > b.m.hardness ? b.m.getDps() : b.m.getDps() * b.m.getPiercing() / b.m.hardness), desc); break;
+    }
+
+    weaponList.sort(comp);
+  }
+
+  /**
+   * Render individual rows for hardpoints
+   * @param  {Function} translate   Translate function
+   * @param  {Object}   formats     Localised formats map
+   * @param  {Object}   ship        Our ship
+   * @param  {Object}   against     The ship against which to compare
+   * @return {array}                The individual rows
+   *
+   */
+  _renderRows(translate, formats, ship, against) {
+    let rows = [];
+
+    for (let hardpoint in ship.hardpoints) {
+      if (ship.hardpoints[hardpoint].m) {
+        const m = ship.hardpoints[hardpoint].m;
+        const classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
+        const effectiveness = m.getPiercing() >= against.properties.hardness ? 1 : m.getPiercing() / against.properties.hardness;
+        const effectiveDps = m.getDps() * effectiveness;
+        const effectiveSDps = m.getClip() ?  (m.getClip() * m.getDps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload()) * effectiveness : effectiveDps;
+
+        rows.push(<tr key={hardpoint}>
+                    <td>{classRating} {slotName(translate, ship.hardpoints[hardpoint])}</td>
+                    <td>{formats.round1(effectiveDps)}</td>
+                    <td>{formats.round1(effectiveSDps)}</td>
+                    <td>{formats.pct(effectiveness)}</td>
+                  </tr>);
+      }
+    }
+
+
+    return rows;
+  }
+
+  /**
+   * Render damage dealt
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, tooltip, termtip } = this.context;
+    const { formats, translate } = language;
+
+    const ship = this.props.ship;
+    const against = this.state.against;
+    const hardness = against.properties.hardness;
+
+    return (
+      <span>
+        <h1>{translate('damage dealt against')}</h1>
+        <ShipSelector currentMenu={this.props.currentMenu} onChange={this._onShipChange} />
+        <table style={{ width: '100%' }}>
+          <thead>
+          <tr className='main'>
+            <td>{translate('weapon')}</td>
+            <td>{translate('effective dps')}</td>
+            <td>{translate('effective sdps')}</td>
+            <td>{translate('effectiveness')}</td>
+          </tr>
+          </thead>
+          <tbody>
+            {this._renderRows(translate, formats, ship, against)}
+          </tbody>
+        </table>
+      </span>
+    );
+  }
+}

src/app/components/HardpointsSlotSection.jsx

@@ -133,6 +133,10 @@ export default class HardpointsSlotSection extends SlotSection {
         <li className='c' onClick={_fill.bind(this, 'fc', 'G')}><MountGimballed className='lg'/></li>
         <li className='c' onClick={_fill.bind(this, 'fc', 'T')}><MountTurret className='lg'/></li>
       </ul>
+      <div className='select-group cap'>{translate('pa')}</div>
+      <ul>
+        <li className='lc' onClick={_fill.bind(this, 'pa', 'F')}>{translate('pa')}</li>
+      </ul>
       <div className='select-group cap'>{translate('nl')}</div>
       <ul>
         <li className='lc' onClick={_fill.bind(this, 'nl', 'F')}>{translate('nl')}</li>

src/app/components/ShipSelector.jsx

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

src/app/pages/OutfittingPage.jsx

@@ -17,6 +17,7 @@ import UtilitySlotSection from '../components/UtilitySlotSection';
 import OffenceSummary from '../components/OffenceSummary';
 import DefenceSummary from '../components/DefenceSummary';
 import MovementSummary from '../components/MovementSummary';
+import DamageDealt from '../components/DamageDealt';
 import LineChart from '../components/LineChart';
 import PowerManagement from '../components/PowerManagement';
 import CostSection from '../components/CostSection';
@@ -348,30 +349,8 @@ export default class OutfittingPage extends Page {
           <MovementSummary ship={ship} code={code}/>
         </div>
 
-        <div className='group half'>
+        <div>
-          <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+          <DamageDealt ship={ship} code={code} currentMenu={menu}/>
-            <tbody >
-              <tr>
-                <td style={{ verticalAlign: 'top', padding: 0, width: '2.5em' }} onMouseEnter={termtip.bind(null, 'fuel level')} onMouseLeave={hide}>
-                  <Fuel className='xl primary-disabled' />
-                </td>
-                <td>
-                  <Slider
-                    axis={true}
-                    onChange={this._fuelChange}
-                    axisUnit={translate('T')}
-                    percent={fuelLevel}
-                    max={fuelCapacity}
-                    scale={sizeRatio}
-                    onResize={onWindowResize}
-                  />
-                </td>
-                <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
-                  {formats.f2(fuelLevel * fuelCapacity)}{units.T} {formats.pct1(fuelLevel)}
-                </td>
-              </tr>
-            </tbody>
-          </table>
         </div>
 
       </div>
@@ -406,4 +385,28 @@ export default class OutfittingPage extends Page {
 //            func={state.speedChartFunc}
 //          />
 //        </div>
-
+//        <div className='group half'>
+//          <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+//            <tbody >
+//              <tr>
+//                <td style={{ verticalAlign: 'top', padding: 0, width: '2.5em' }} onMouseEnter={termtip.bind(null, 'fuel level')} onMouseLeave={hide}>
+//                  <Fuel className='xl primary-disabled' />
+//                </td>
+//                <td>
+//                  <Slider
+//                    axis={true}
+//                    onChange={this._fuelChange}
+//                    axisUnit={translate('T')}
+//                    percent={fuelLevel}
+//                    max={fuelCapacity}
+//                    scale={sizeRatio}
+//                    onResize={onWindowResize}
+//                  />
+//                </td>
+//                <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
+//                  {formats.f2(fuelLevel * fuelCapacity)}{units.T} {formats.pct1(fuelLevel)}
+//                </td>
+//              </tr>
+//            </tbody>
+//          </table>
+//        </div>

src/app/shipyard/Module.js

@@ -587,6 +587,14 @@ export default class Module {
     return this._getModifiedValue('shieldreinforcement');
   }
 
+  /**
+   * Get the piercing for this module, taking in to account modifications
+   * @return {Number} the piercing for this module
+   */
+  getPiercing() {
+    return this._getModifiedValue('piercing');
+  }
+
   /**
    * Get the bays for this module, taking in to account modifications
    * @return {Number} the bays for this module

src/less/app.less

@@ -16,6 +16,7 @@
 @import 'tooltip';
 @import 'buttons';
 @import 'error';
+@import 'shipselector';
 @import 'sortable';
 @import 'loader';
 

src/less/shipselector.less

@@ -0,0 +1,218 @@
+.shipselector {
+  background-color: @bgBlack;
+  margin: 0;
+  padding: 0 0 0 1em;
+  height: 3em;
+  line-height: 3em;
+  font-family: @fTitle;
+  vertical-align: middle;
+  position: relative;
+
+  .user-select-none();
+
+  .menu {
+    position: relative;
+    z-index: 1;
+    cursor: default;
+
+    &.r {
+      .menu-list {
+        right: 0;
+      }
+    }
+
+    .smallTablet({
+      position: static;
+      position: initial;
+    });
+  }
+
+  .menu-header {
+    padding : 0 1em;
+    cursor: pointer;
+    color: @warning;
+    text-transform: uppercase;
+    // Less than 600px screen width: hide text
+
+    &.disabled {
+      color: @warning-disabled;
+      cursor: default;
+    }
+
+    &.selected {
+      background-color: @bgBlack;
+    }
+
+    .menu-item-label {
+      margin-left: 1em;
+      display: inline-block;
+
+      .smallTablet({
+        display: none;
+      });
+    }
+  }
+
+  .menu-list {
+    font-family: @fStandard;
+    position: absolute;
+    padding: 0.5em 1em;
+    box-sizing: border-box;
+    min-width: 100%;
+    overflow-x: hidden;
+    background-color: @bgBlack;
+    font-size: 0.9em;
+    overflow-y: auto;
+    z-index: 0;
+    -webkit-overflow-scrolling: touch;
+    max-height: 500px;
+
+    &::-webkit-scrollbar {
+      width: 0.5em;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: @warning-disabled;
+    }
+
+    input {
+      border: none;
+      background-color: transparent;
+      text-align: right;
+      font-size: 1em;
+      font-family: @fStandard;
+    }
+
+    .smallTablet({
+      max-height: 400px;
+      left: 0;
+      right: 0;
+      border-bottom: 1px solid @bg;
+    });
+
+
+    .tablet({
+      li, a {
+        padding: 0.3em 0;
+      }
+    });
+  }
+
+  .dbl {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    ul {
+      min-width: 10em;
+    }
+
+    .smallTablet({
+      -webkit-column-count: 3; /* Chrome, Safari, Opera */
+      -moz-column-count: 3; /* Firefox */
+      column-count: 3;
+
+      ul {
+        min-width: 20em;
+      }
+    });
+
+    .largePhone({
+      -webkit-column-count: 2; /* Chrome, Safari, Opera */
+      -moz-column-count: 2; /* Firefox */
+      column-count: 2;
+    });
+
+    .smallPhone({
+      -webkit-column-count: 1; /* Chrome, Safari, Opera */
+      -moz-column-count: 1; /* Firefox */
+      column-count: 1;
+    });
+  }
+
+  .quad {
+    -webkit-column-count: 4; /* Chrome, Safari, Opera */
+    -moz-column-count: 4; /* Firefox */
+    column-count: 4;
+    ul {
+      min-width: 10em;
+    }
+
+    .smallTablet({
+      -webkit-column-count: 3; /* Chrome, Safari, Opera */
+      -moz-column-count: 3; /* Firefox */
+      column-count: 3;
+
+      ul {
+        min-width: 20em;
+      }
+    });
+
+    .largePhone({
+      -webkit-column-count: 2; /* Chrome, Safari, Opera */
+      -moz-column-count: 2; /* Firefox */
+      column-count: 2;
+    });
+
+    .smallPhone({
+      -webkit-column-count: 1; /* Chrome, Safari, Opera */
+      -moz-column-count: 1; /* Firefox */
+      column-count: 1;
+    });
+  }
+
+  ul {
+    display: inline-block;
+    white-space: nowrap;
+    margin: 0 0 0.5em;
+    padding: 0;
+    line-height: 1.3em;
+  }
+
+  li {
+    white-space: normal;
+    list-style: none;
+    margin-left: 1em;
+    line-height: 1.1em;
+  }
+
+  a {
+    vertical-align: middle;
+    color: @warning;
+    text-decoration: none;
+
+    &:visited {
+      color: @warning;
+    }
+    .no-touch &:hover {
+      color: teal;
+    }
+    &.active {
+      color: @primary;
+    }
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid @disabled;
+  }
+
+  .no-wrap {
+    white-space: nowrap;
+  }
+
+  .block {
+    display: block;
+    line-height: 1.5em;
+  }
+
+  .title {
+    font-size: 1.3em;
+    display: inline-block;
+    margin:0px;
+    text-transform: uppercase;
+  }
+}