Show modification icon for modified modules

Fix for #14

ChangeLog.md

@@ -3,3 +3,4 @@
   * Use coriolis-data 2.2.2:
     * Add distributor draw modifier to shield generators
     * Remove modifiers for sensors
+  * Show modification icon for modified modules

src/app/components/HardpointSlot.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Slot from './Slot';
-import { DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret, ListModifications } from './SvgIcons';
+import { DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret, ListModifications, Modified } from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
@@ -51,7 +51,9 @@ export default class HardpointSlot extends Slot {
 	  {m.type && m.type.match('K') ? <span onMouseOver={termtip.bind(null, 'kinetic')} onMouseOut={tooltip.bind(null, null)}><DamageKinetic /></span> : ''}
 	  {m.type && m.type.match('T') ? <span onMouseOver={termtip.bind(null, 'thermal')} onMouseOut={tooltip.bind(null, null)}><DamageThermal /></span> : ''}
 	  {m.type && m.type.match('E') ? <span onMouseOver={termtip.bind(null, 'explosive')} onMouseOut={tooltip.bind(null, null)}><DamageExplosive /></span> : ''}
-          {classRating} {translate(m.name || m.grp)}</div>
+          {classRating} {translate(m.name || m.grp)}{ Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, 'modified')} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }
+	  </div>
+
           <div className={'r'}>{formats.round(m.getMass())}{u.T}</div>
         </div>
         <div className={'cb'}>

src/app/components/InternalSlot.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Slot from './Slot';
-import { ListModifications } from './SvgIcons';
+import { ListModifications, Modified } from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
@@ -27,7 +27,7 @@ export default class InternalSlot extends Slot {
       let mass = m.getMass() || m.cargo || m.fuel || 0;
       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'}>{classRating} {translate(m.name || m.grp)}{Object.keys(m.mods).length > 0 ? <span onMouseOver={termtip.bind(null, 'modified')} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : ''}</div>
           <div className={'r'}>{formats.round(mass)}{u.T}</div>
         </div>
         <div className={'cb'}>

src/app/components/StandardSlot.jsx

@@ -5,7 +5,7 @@ import { jumpRange } from '../shipyard/Calculations';
 import { diffDetails } from '../utils/SlotFunctions';
 import AvailableModulesMenu from './AvailableModulesMenu';
 import ModificationsMenu from './ModificationsMenu';
-import { ListModifications } from './SvgIcons';
+import { ListModifications, Modified } from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 
@@ -79,7 +79,7 @@ export default class StandardSlot extends TranslatedComponent {
         <div className={cn('details-container', { warning: warning && warning(slot.m) })}>
           <div className={'sz'}>{slot.maxClass}</div>
           <div>
-            <div className='l'>{classRating} {translate(m.grp == 'bh' ? m.grp : m.name || m.grp)}</div>
+            <div className={'l'}>{classRating}{translate(m.grp == 'bh' ? m.grp : m.name || m.grp)}{ Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, 'modified')} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
             <div className={'r'}>{formats.round(mass)}{units.T}</div>
 	    <div/>
             <div className={'cb'}>

src/app/components/SvgIcons.jsx

@@ -497,7 +497,19 @@ export class ListModifications extends SvgIcon {
    * @return {String} view box
    */
   viewBox() { return '0 0 200 200'; }
+
   /**
+   * Render the Icon
+   * @return {React.Component} SVG Icon
+   */
+  render() {
+    return (
+      <svg className={cn('modicon', this.props.className)} style={this.props.style} viewBox={this.viewBox()}>
+        {this.svg()}
+      </svg>
+    );
+  }
+
   /**
    * Generate the SVG
    * @return {React.Component} SVG Contents
@@ -507,6 +519,40 @@ export class ListModifications extends SvgIcon {
   }
 }
 
+/**
+ * Modified (engineers)
+ */
+export class Modified extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+
+  /**
+   * Render the Icon
+   * @return {React.Component} SVG Icon
+   */
+  render() {
+    return (
+      <svg className={cn('modicon', this.props.className)} style={this.props.style} viewBox={this.viewBox()}>
+        {this.svg()}
+      </svg>
+    );
+  }
+
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <g>
+           <path d="M100,5L18,52.5L18,147.5L100,195L182,147.5L182,52.5L100,5Z"/>
+           <path d="M100,70L74,85L74,115L100,130L126,115L126,85L100,70Z"/>
+           </g>;
+  }
+}
+
 /**
  * Hammer
  */

src/less/icons.less

@@ -1,4 +1,5 @@
 
+// Standard icons
 .icon {
   display: inline-block;
   vertical-align: middle;
@@ -25,3 +26,33 @@
     height: 2em;
   }
 }
+
+// Modifiction icons - hard-code stroke/fill
+.modicon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 1.1em;
+  height: 1em;
+  stoke: @fg;
+  fill: transparent;
+
+  &.sm {
+    width: 0.8em;
+    height: 0.75em;
+  }
+
+  &.tn {
+    width: 0.6em;
+    height: 0.5em;
+  }
+
+  &.lg {
+    width: 1.6em;
+    height: 1.5em;
+  }
+
+  &.xl {
+    width: 2.1em;
+    height: 2em;
+  }
+}