Rework Offence tab

src/app/components/Offence.jsx

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