From 616ed0bf1049cf7a76cc4c1488b4d978730a61fe Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Mon, 7 Nov 2016 17:11:39 +0000 Subject: [PATCH] Show modification icon for modified modules Fix for #14 --- ChangeLog.md | 1 + src/app/components/HardpointSlot.jsx | 6 ++-- src/app/components/InternalSlot.jsx | 4 +-- src/app/components/StandardSlot.jsx | 4 +-- src/app/components/SvgIcons.jsx | 46 ++++++++++++++++++++++++++++ src/less/icons.less | 31 +++++++++++++++++++ 6 files changed, 86 insertions(+), 6 deletions(-) diff --git a/ChangeLog.md b/ChangeLog.md index ae2c14b8..1b7ac9b7 100644 --- a/ChangeLog.md +++ b/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 diff --git a/src/app/components/HardpointSlot.jsx b/src/app/components/HardpointSlot.jsx index 9ecc6dae..e89e1770 100644 --- a/src/app/components/HardpointSlot.jsx +++ b/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') ? : ''} {m.type && m.type.match('T') ? : ''} {m.type && m.type.match('E') ? : ''} - {classRating} {translate(m.name || m.grp)} + {classRating} {translate(m.name || m.grp)}{ Object.keys(m.mods).length > 0 ? : null } + +
{formats.round(m.getMass())}{u.T}
diff --git a/src/app/components/InternalSlot.jsx b/src/app/components/InternalSlot.jsx index 318bb85b..ce1e25f5 100644 --- a/src/app/components/InternalSlot.jsx +++ b/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
-
{classRating} {translate(m.name || m.grp)}
+
{classRating} {translate(m.name || m.grp)}{Object.keys(m.mods).length > 0 ? : ''}
{formats.round(mass)}{u.T}
diff --git a/src/app/components/StandardSlot.jsx b/src/app/components/StandardSlot.jsx index 8140f7f0..3b54fd7c 100644 --- a/src/app/components/StandardSlot.jsx +++ b/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 {
{slot.maxClass}
-
{classRating} {translate(m.grp == 'bh' ? m.grp : m.name || m.grp)}
+
{classRating}{translate(m.grp == 'bh' ? m.grp : m.name || m.grp)}{ Object.keys(m.mods).length > 0 ? : null }
{formats.round(mass)}{units.T}
diff --git a/src/app/components/SvgIcons.jsx b/src/app/components/SvgIcons.jsx index 50c13e16..b762fbe0 100644 --- a/src/app/components/SvgIcons.jsx +++ b/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 ( + + {this.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 ( + + {this.svg()} + + ); + } + + /** + * Generate the SVG + * @return {React.Component} SVG Contents + */ + svg() { + return + + + ; + } +} + /** * Hammer */ diff --git a/src/less/icons.less b/src/less/icons.less index 63c8316f..91362fd6 100755 --- a/src/less/icons.less +++ b/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; + } +}