diff --git a/src/app/components/HardpointSlot.jsx b/src/app/components/HardpointSlot.jsx index 4726f526..1a48a3a5 100644 --- a/src/app/components/HardpointSlot.jsx +++ b/src/app/components/HardpointSlot.jsx @@ -4,6 +4,7 @@ import Persist from '../stores/Persist'; import { DamageAbsolute, DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret, ListModifications, Modified } from './SvgIcons'; import { Modifications } from 'coriolis-data/dist'; import { stopCtxPropagation } from '../utils/UtilityFunctions'; +import { blueprintTooltip } from '../utils/BlueprintFunctions'; /** @@ -51,6 +52,12 @@ export default class HardpointSlot extends Slot { if (m.blueprint.special && m.blueprint.special.id >= 0) { modTT += ', ' + translate(m.blueprint.special.name); } + modTT = ( +
+
{modTT}
+ {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade].features, m)} +
+ ); } return
diff --git a/src/app/components/InternalSlot.jsx b/src/app/components/InternalSlot.jsx index ec580311..562f7555 100644 --- a/src/app/components/InternalSlot.jsx +++ b/src/app/components/InternalSlot.jsx @@ -4,6 +4,7 @@ import Persist from '../stores/Persist'; import { ListModifications, Modified } from './SvgIcons'; import { Modifications } from 'coriolis-data/dist'; import { stopCtxPropagation } from '../utils/UtilityFunctions'; +import { blueprintTooltip } from '../utils/BlueprintFunctions'; /** * Internal Slot @@ -30,6 +31,12 @@ export default class InternalSlot extends Slot { let modTT = translate('modified'); if (m && m.blueprint && m.blueprint.name) { modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade; + modTT = ( +
+
{modTT}
+ {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade].features, m)} +
+ ); } let mass = m.getMass() || m.cargo || m.fuel || 0; diff --git a/src/app/components/ModificationsMenu.jsx b/src/app/components/ModificationsMenu.jsx index 52840fdc..8faea959 100644 --- a/src/app/components/ModificationsMenu.jsx +++ b/src/app/components/ModificationsMenu.jsx @@ -5,6 +5,7 @@ import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions'; import cn from 'classnames'; import { Modifications } from 'coriolis-data/dist'; import Modification from './Modification'; +import { blueprintTooltip } from '../utils/BlueprintFunctions'; /** * Modifications menu @@ -52,7 +53,7 @@ export default class ModificationsMenu extends TranslatedComponent { for (const grade of Modifications.modules[m.grp].blueprints[blueprintName]) { const close = this._blueprintSelected.bind(this, Modifications.blueprints[blueprintName].id, grade); const key = blueprintName + ':' + grade; - const tooltipContent = this._blueprintTooltip(translate, Modifications.blueprints[blueprintName].grades[grade].features); + const tooltipContent = blueprintTooltip(translate, Modifications.blueprints[blueprintName].grades[grade].features); blueprints.push(
{translate(Modifications.blueprints[blueprintName].name + ' grade ' + grade)}
); } } @@ -77,51 +78,6 @@ export default class ModificationsMenu extends TranslatedComponent { return { blueprintMenuOpened, blueprints, modifications, specialMenuOpened, specials }; } - /** - * Generate a tooltip with details of a blueprint's effects - * @param {Object} features The features of the blueprint - * @returns {Object} The react components - */ - _blueprintTooltip(translate, features) - { - const results = []; - for (const feature in features) { - const featureIsBeneficial = this._isBeneficial(feature, features[feature]); - const featureDef = Modifications.modifications[feature]; - if (!featureDef.hidden) { - let symbol = ''; - if (feature === 'jitter') { - symbol = '°'; - } else if (featureDef.type === 'percentage') { - symbol = '%'; - } - let lowerBound = features[feature][0]; - let upperBound = features[feature][1]; - if (featureDef.type === 'percentage') { - lowerBound = Math.round(lowerBound * 1000) / 10; - upperBound = Math.round(upperBound * 1000) / 10; - } - const range = `${lowerBound}${symbol} - ${upperBound}${symbol}`; - results.push({translate(feature)}{lowerBound}{symbol}{upperBound}{symbol}); - } - } - - return ( - - - - - - - - - - {results} - -
{translate('effect')}{translate('worst')}{translate('best')}
- ); - } - /** * Initialise the modifications * @param {Object} props React Component properties @@ -290,19 +246,6 @@ export default class ModificationsMenu extends TranslatedComponent { this.props.onChange(); } - /** - * Is this feature beneficial? - * - */ - _isBeneficial(feature, values) { - const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0)); - if (Modifications.modifications[feature].higherbetter) { - return !fact; - } else { - return fact; - } - } - /** * Reset modification information */ @@ -335,11 +278,11 @@ export default class ModificationsMenu extends TranslatedComponent { let blueprintLabel; let haveBlueprint = false; - let blueprintTooltip; + let blueprintTt; if (m.blueprint && !isEmpty(m.blueprint)) { blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade; haveBlueprint = true; - blueprintTooltip = this._blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade].features); + blueprintTt = blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade].features); } let specialLabel; @@ -363,7 +306,7 @@ export default class ModificationsMenu extends TranslatedComponent { onContextMenu={stopCtxPropagation} > { haveBlueprint ? -
{blueprintLabel}
+
{blueprintLabel}
:
{translate('PHRASE_SELECT_BLUEPRINT')}
} { showBlueprintsMenu ? this.state.blueprints : null } diff --git a/src/app/components/StandardSlot.jsx b/src/app/components/StandardSlot.jsx index 2dade7e1..8ec68235 100644 --- a/src/app/components/StandardSlot.jsx +++ b/src/app/components/StandardSlot.jsx @@ -8,6 +8,7 @@ import ModificationsMenu from './ModificationsMenu'; import { ListModifications, Modified } from './SvgIcons'; import { Modifications } from 'coriolis-data/dist'; import { stopCtxPropagation } from '../utils/UtilityFunctions'; +import { blueprintTooltip } from '../utils/BlueprintFunctions'; /** * Standard Slot @@ -53,6 +54,12 @@ export default class StandardSlot extends TranslatedComponent { let modTT = translate('modified'); if (m && m.blueprint && m.blueprint.name) { modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade; + modTT = ( +
+
{modTT}
+ {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade].features, m)} +
+ ); } if (!selected) { diff --git a/src/app/utils/BlueprintFunctions.js b/src/app/utils/BlueprintFunctions.js new file mode 100644 index 00000000..ece22eed --- /dev/null +++ b/src/app/utils/BlueprintFunctions.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { Modifications } from 'coriolis-data/dist'; + +/** + * Generate a tooltip with details of a blueprint's effects + * @param {Object} features The features of the blueprint + * @param {Object} m The module to compare with + * @returns {Object} The react components + */ +export function blueprintTooltip(translate, features, m) +{ + const results = []; + for (const feature in features) { + const featureIsBeneficial = isBeneficial(feature, features[feature]); + const featureDef = Modifications.modifications[feature]; + if (!featureDef.hidden) { + let symbol = ''; + if (feature === 'jitter') { + symbol = '°'; + } else if (featureDef.type === 'percentage') { + symbol = '%'; + } + let lowerBound = features[feature][0]; + let upperBound = features[feature][1]; + if (featureDef.type === 'percentage') { + lowerBound = Math.round(lowerBound * 1000) / 10; + upperBound = Math.round(upperBound * 1000) / 10; + } + const range = `${lowerBound}${symbol} - ${upperBound}${symbol}`; + if (m) { + // We have a module - add in the current value + let current = m.getModValue(feature); + if (featureDef.type === 'percentage') { + current = Math.round(current / 10) / 10; + } + results.push({translate(feature)}{lowerBound}{symbol}{current}{symbol}{upperBound}{symbol}); + } else { + // We do not have a module, no value + results.push({translate(feature)}{lowerBound}{symbol}{upperBound}{symbol}); + } + } + } + + return ( + + + + + + {m ? : null } + + + + + {results} + +
{translate('feature')}{translate('worst')}{translate('current')}{translate('best')}
+ ); +} + +/** + * Is this blueprint feature beneficial? + * + */ +export function isBeneficial(feature, values) { + const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0)); + if (Modifications.modifications[feature].higherbetter) { + return !fact; + } else { + return fact; + } +}