Display new-style hardpoint information

src/app/components/HardpointSlot.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Slot from './Slot';
+import { DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 
 /**
  * Hardpoint / Utility Slot
@@ -33,24 +34,31 @@ export default class HardpointSlot extends Slot {
    */
   _getSlotDetails(m, translate, formats, u) {
     if (m) {
-      let classRating = `${m.class}${m.rating}${m.mount ? '/' + m.mount : ''}${m.missile ? m.missile : ''}`;
+      let classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
       let { drag, drop } = this.props;
 
       return <div className='details' draggable='true' onDragStart={drag} onDragEnd={drop}>
         <div className={'cb'}>
-          <div className={'l'}>{classRating} {translate(m.name || m.grp)}</div>
+          <div className={'l'}>
+	  {m.mount && m.mount == 'F' ? <MountFixed /> : ''}
+	  {m.mount && m.mount == 'G' ? <MountGimballed /> : ''}
+	  {m.mount && m.mount == 'T' ? <MountTurret /> : ''}
+	  {m.type && m.type == 'K' ? <DamageKinetic /> : ''}
+	  {m.type && m.type == 'T' ? <DamageThermal /> : ''}
+	  {m.type && m.type == 'KT' ? <span><DamageKinetic /><DamageThermal /></span>: ''}
+	  {m.type && m.type == 'E' ? <DamageExplosive />: ''}
+          {classRating} {translate(m.name || m.grp)}</div>
           <div className={'r'}>{m.mass}{u.T}</div>
         </div>
         <div className={'cb'}>
-          { m.damage ? <div className={'l'}>{translate('damage')}: {m.damage} { m.ssdam ? <span>({formats.int(m.ssdam)} {u.MJ})</span> : null }</div> : null }
+          { m.dps ? <div className={'l'}>{translate('DPS')}: {formats.int(10 * m.dps) / 10} { m.clip ? <span>({formats.int(10 * (m.clip * m.dps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10})</span> : null }</div> : null }
-          { m.dps ? <div className={'l'}>{translate('DPS')}: {m.dps} { m.mjdps ? <span>({formats.int(m.mjdps)} {u.MJ})</span> : null }</div> : null }
+          { m.eps ? <div className={'l'}>{translate('EPS')}: {formats.int(10 * m.eps) / 10} { m.clip ? <span>({formats.int(10 * (m.clip * m.eps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10})</span> : null }</div> : null }
-          { m.thermload ? <div className={'l'}>{translate('T-Load')}: {m.thermload}</div> : null }
+          { m.hps ? <div className={'l'}>{translate('HPS')}: {formats.int(10 * m.hps) / 10} { m.clip ? <span>({formats.int(10 * (m.clip * m.hps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10})</span> : null }</div> : null }
-          { m.type ? <div className={'l'}>{translate('type')}: {m.type}</div> : null }
+          { m.dps && m.eps ? <div className={'l'}>{translate('DPE')}: {formats.int( 10 * m.dps / m.eps) / 10}</div> : null }
           { m.rof ? <div className={'l'}>{translate('ROF')}: {m.rof}{u.ps}</div> : null }
-          { m.armourpen ? <div className={'l'}>{translate('pen')}: {m.armourpen}</div> : null }
+          { m.range && !m.dps ? <div className={'l'}>{translate('Range')}: {m.range/1000}{u.km}</div> : null }
           { m.shieldmul ? <div className={'l'}>+{formats.rPct(m.shieldmul)}</div> : null }
-          { m.range ? <div className={'l'}>{m.range} <u>km</u></div> : null }
+          { m.ammo >= 0 ? <div className={'l'}>{translate('ammo')}: {formats.int(m.clip)}/{formats.int(m.ammo)}</div> : null }
-          { m.ammo >= 0 ? <div className={'l'}>{translate('ammo')}: {formats.int(m.clip)}+{formats.int(m.ammo)}</div> : null }
         </div>
       </div>;
     } else {

src/app/components/SvgIcons.jsx

@@ -319,6 +319,90 @@ export class Warning extends SvgIcon {
   }
 }
 
+/**
+ * Thermal damage
+ */
+export class DamageThermal extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <g>
+      <ellipse cx='100' cy='100' rx='90' ry='90' fillOpacity='0' />
+      <ellipse cx='100' cy='100' rx='30' ry='30' fillOpacity='1' />
+      <path d='M100 20v80' />
+    </g>;
+  }
+}
+
+/**
+ * Kinetic damage
+ */
+export class DamageKinetic extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <g>
+      <ellipse cx='100' cy='100' rx='90' ry='90' fillOpacity='0' />
+      <ellipse cx='62' cy='67' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='62' cy='101' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='62' cy='135' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='100' cy='50' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='100' cy='84' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='100' cy='118' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='100' cy='152' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='138' cy='67' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='138' cy='101' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='138' cy='135' rx='5' ry='5' fillOpacity='1' />
+    </g>;
+  }
+}
+
+/**
+ * Explosive damage
+ */
+export class DamageExplosive extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <g>
+      <ellipse cx='100' cy='100' rx='50' ry='50' fillOpacity='0' />
+      <ellipse cx='100' cy='20' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='156.57' cy='36.57' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='180' cy='100' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='156.57' cy='163.43' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='100' cy='180' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='43.43' cy='163.43' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='20' cy='100' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='43.43' cy='36.57' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='100' cy='75' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='125' cy='100' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='100' cy='125' rx='5' ry='5' fillOpacity='1' />
+      <ellipse cx='75' cy='100' rx='5' ry='5' fillOpacity='1' />
+    </g>;
+  }
+}
+
 /**
  * Fixed mount hardpoint
  */
@@ -334,11 +418,11 @@ export class MountFixed extends SvgIcon {
    */
   svg() {
     return <g>
-      <circle fillOpacity='0'  r='70' cy='100' cx='100' strokeWidth='5' />
+      <circle cx='100' cy='100' r='76' fillOpacity='0' />
-      <line y2='60' x2='101' y1='0' x1='101' strokeWidth='5' />
+      <path d='M0 100h48' />
-      <line y2='101' x2='200' y1='101' x1='140' strokeWidth='5' />
+      <path d='M152 100h48' />
-      <line y2='101' x2='60' y1='101' x1='0' strokeWidth='5' />
+      <path d='M100 0v48' />
-      <line y2='200' x2='101' y1='140' x1='101' strokeWidth='5' />
+      <path d='M100 152v48' />
     </g>;
   }
 }
@@ -358,8 +442,8 @@ export class MountGimballed extends SvgIcon {
    */
   svg() {
     return <g>
-      <ellipse ry='25' rx='95' cy='100' cx='100' fillOpacity='0' strokeWidth='5' />
+      <ellipse cx='100' cy='100' rx='90' ry='25' fillOpacity='0' />
-      <ellipse ry='95' rx='25' cy='100' cx='100' fillOpacity='0' strokeWidth='5' />
+      <ellipse cx='100' cy='100' rx='20' ry='95' fillOpacity='0' />
     </g>;
   }
 }
@@ -379,9 +463,14 @@ export class MountTurret extends SvgIcon {
    */
   svg() {
     return <g>
-      <line y2='170' x2='162' y1='170' x1='8' strokeWidth='6' />
+      <path d='M40 50 A 40 40 0 0 0 0 90' />
-      <path d='m13,138l144,0l0,-50l-27,-40l-90,0l-27,40l0,50z' id='svg_12' fillOpacity='0' strokeWidth='6' />
+      <path d='M40 50h40' />
-      <line y2='91' x2='200' y1='91' x1='159' strokeWidth='6' />
+      <path d='M120 90 A 40 40 0 0 0 80 50' />
+      <path d='M0 90v40' />
+      <path d='M120 90v40' />
+      <path d='M0 120h120' />
+      <path d='M120 90h80' />
+      <path d='M0 160h120' />
     </g>;
   }
 }

src/app/utils/SlotFunctions.js

@@ -127,7 +127,11 @@ const PROP_BLACKLIST = {
   enginecapacity: 1,
   enginerecharge: 1,
   systemcapacity: 1,
-  systemrecharge: 1
+  systemrecharge: 1,
+  breachdps: 1,
+  breachmin: 1,
+  breachmax: 1,
+  integrity: 1
 };
 
 const TERM_LOOKUP = {

src/less/slot.less

@@ -12,6 +12,8 @@
   background-color: @primary-bg;
   border: 1px solid @primary-disabled;
   color: @fg;
+  stroke: @fg;
+  stroke-width: 20;
   fill: @fg;
 
   .details-container {
@@ -54,6 +56,8 @@
     font-size: 1.2em;
     width: 1.2em;
     color: @primary-disabled;
+    stroke: @primary-disabled;
+    stroke-width: 20;
     border-right: 1px solid @primary-disabled;
     box-sizing: border-box;
     padding-top: 0.2em;
@@ -64,6 +68,8 @@
     text-transform: uppercase;
     font-size: 1.3em;
     color: lighten(@primary-bg, 12%);
+    stroke: lighten(@primary-bg, 12%);
+    stroke-width: 20;
     text-align: center;
     letter-spacing: 0.1em;
     line-height: 1.7em;
@@ -71,12 +77,16 @@
 
   &.selected {
     color: @primary-bg;
+    stroke: @primary-bg;
+    stroke-width: 20;
     fill: @primary-bg;
     background-color: @primary;
     border: 1px solid @primary;
     z-index: 1;
     .sz {
         color: @primary;
+        stroke: @primary;
+        stroke-width: 20;
         background-color: @primary-bg;
         border-right: 1px solid @primary;
     }