From ed7a9ef03763e21a382a1e144dbf55302bf1c82c Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Fri, 14 Oct 2016 01:04:05 +0100 Subject: [PATCH] Display new-style hardpoint information --- src/app/components/HardpointSlot.jsx | 26 ++++--- src/app/components/SvgIcons.jsx | 109 ++++++++++++++++++++++++--- src/app/utils/SlotFunctions.js | 6 +- src/less/slot.less | 10 +++ 4 files changed, 131 insertions(+), 20 deletions(-) diff --git a/src/app/components/HardpointSlot.jsx b/src/app/components/HardpointSlot.jsx index 5f910b7a..5e253015 100644 --- a/src/app/components/HardpointSlot.jsx +++ b/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
-
{classRating} {translate(m.name || m.grp)}
+
+ {m.mount && m.mount == 'F' ? : ''} + {m.mount && m.mount == 'G' ? : ''} + {m.mount && m.mount == 'T' ? : ''} + {m.type && m.type == 'K' ? : ''} + {m.type && m.type == 'T' ? : ''} + {m.type && m.type == 'KT' ? : ''} + {m.type && m.type == 'E' ? : ''} + {classRating} {translate(m.name || m.grp)}
{m.mass}{u.T}
- { m.damage ?
{translate('damage')}: {m.damage} { m.ssdam ? ({formats.int(m.ssdam)} {u.MJ}) : null }
: null } - { m.dps ?
{translate('DPS')}: {m.dps} { m.mjdps ? ({formats.int(m.mjdps)} {u.MJ}) : null }
: null } - { m.thermload ?
{translate('T-Load')}: {m.thermload}
: null } - { m.type ?
{translate('type')}: {m.type}
: null } + { m.dps ?
{translate('DPS')}: {formats.int(10 * m.dps) / 10} { m.clip ? ({formats.int(10 * (m.clip * m.dps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10}) : null }
: null } + { m.eps ?
{translate('EPS')}: {formats.int(10 * m.eps) / 10} { m.clip ? ({formats.int(10 * (m.clip * m.eps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10}) : null }
: null } + { m.hps ?
{translate('HPS')}: {formats.int(10 * m.hps) / 10} { m.clip ? ({formats.int(10 * (m.clip * m.hps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10}) : null }
: null } + { m.dps && m.eps ?
{translate('DPE')}: {formats.int( 10 * m.dps / m.eps) / 10}
: null } { m.rof ?
{translate('ROF')}: {m.rof}{u.ps}
: null } - { m.armourpen ?
{translate('pen')}: {m.armourpen}
: null } + { m.range && !m.dps ?
{translate('Range')}: {m.range/1000}{u.km}
: null } { m.shieldmul ?
+{formats.rPct(m.shieldmul)}
: null } - { m.range ?
{m.range} km
: null } - { m.ammo >= 0 ?
{translate('ammo')}: {formats.int(m.clip)}+{formats.int(m.ammo)}
: null } + { m.ammo >= 0 ?
{translate('ammo')}: {formats.int(m.clip)}/{formats.int(m.ammo)}
: null }
; } else { diff --git a/src/app/components/SvgIcons.jsx b/src/app/components/SvgIcons.jsx index 58debe2d..6e228026 100644 --- a/src/app/components/SvgIcons.jsx +++ b/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 + + + + ; + } +} + +/** + * 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 + + + + + + + + + + + + ; + } +} + +/** + * 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 + + + + + + + + + + + + + + ; + } +} + /** * Fixed mount hardpoint */ @@ -334,11 +418,11 @@ export class MountFixed extends SvgIcon { */ svg() { return - - - - - + + + + + ; } } @@ -358,8 +442,8 @@ export class MountGimballed extends SvgIcon { */ svg() { return - - + + ; } } @@ -379,9 +463,14 @@ export class MountTurret extends SvgIcon { */ svg() { return - - - + + + + + + + + ; } } diff --git a/src/app/utils/SlotFunctions.js b/src/app/utils/SlotFunctions.js index d0bb60ea..4069a54e 100644 --- a/src/app/utils/SlotFunctions.js +++ b/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 = { diff --git a/src/less/slot.less b/src/less/slot.less index 641b876b..11d17d30 100755 --- a/src/less/slot.less +++ b/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; }