diff --git a/src/app/components/Modification.jsx b/src/app/components/Modification.jsx index 809175f7..c191b96c 100644 --- a/src/app/components/Modification.jsx +++ b/src/app/components/Modification.jsx @@ -13,6 +13,7 @@ export default class Modification extends TranslatedComponent { ship: React.PropTypes.object.isRequired, m: React.PropTypes.object.isRequired, name: React.PropTypes.string.isRequired, + value: React.PropTypes.number.isRequired, onChange: React.PropTypes.func.isRequired }; @@ -24,7 +25,7 @@ export default class Modification extends TranslatedComponent { constructor(props, context) { super(props); this.state = {}; - this.state.value = this.props.m.getModValue(this.props.name) / 100 || 0; + this.state.value = props.value; } /** @@ -61,7 +62,7 @@ export default class Modification extends TranslatedComponent { */ render() { let translate = this.context.language.translate; - let name = this.props.name; + let { m, name } = this.props; if (name === 'damagedist') { // We don't show damage distribution @@ -81,7 +82,7 @@ export default class Modification extends TranslatedComponent { return (
{translate(name)}{symbol}
- +
); } diff --git a/src/app/components/ModificationsMenu.jsx b/src/app/components/ModificationsMenu.jsx index 464eb05b..95b23af9 100644 --- a/src/app/components/ModificationsMenu.jsx +++ b/src/app/components/ModificationsMenu.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import * as _ from 'lodash'; import { findDOMNode } from 'react-dom'; import TranslatedComponent from './TranslatedComponent'; import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions'; @@ -26,10 +27,15 @@ export default class ModificationsMenu extends TranslatedComponent { constructor(props, context) { super(props); this.state = this._initState(props, context); + + this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this); + this._rollWorst = this._rollWorst.bind(this); + this._rollRandom = this._rollRandom.bind(this); + this._rollBest = this._rollBest.bind(this); } /** - * Initiate the list of modifications + * Initialise state * @param {Object} props React Component properties * @param {Object} context React Component context * @return {Object} list: Array of React Components @@ -40,30 +46,53 @@ export default class ModificationsMenu extends TranslatedComponent { let blueprints = []; for (const blueprintName in Modifications.modules[m.grp].blueprints) { for (const grade of Modifications.modules[m.grp].blueprints[blueprintName]) { - const close = this._closeMenu.bind(this, Modifications.blueprints[blueprintName].id, grade); - blueprints.push(
{Modifications.blueprints[blueprintName].name} grade {grade}
); + const close = this._blueprintSelected.bind(this, Modifications.blueprints[blueprintName].id, grade); + const key = blueprintName + ':' + grade; + blueprints.push(
{Modifications.blueprints[blueprintName].name} grade {grade}
); } } // Set up the modifications - let modifications = []; - for (const modName of Modifications.modules[m.grp].modifications) { - if (Modifications.modifications[modName].type === 'percentage' || Modifications.modifications[modName].type === 'numeric') { - modifications.push(); - } - } + const modifications = this._setModifications(props); const blueprintMenuOpened = false; + // Set up the specials for this module + // const specials = _selectSpecials(m); + return { blueprintMenuOpened, blueprints, modifications }; } - _openMenu() { - const blueprintMenuOpened = true; + /** + * Initialise the modifications + * @param {Object} props React Component properties + * @return {Object} list: Array of React Components + */ + _setModifications(props) { + const { m, onChange, ship } = props; + let modifications = []; + for (const modName of Modifications.modules[m.grp].modifications) { + if (Modifications.modifications[modName].type === 'percentage' || Modifications.modifications[modName].type === 'numeric') { + modifications.push(); + } + } + return modifications; + } + + /** + * Toggle the blueprints menu + */ + _toggleBlueprintsMenu() { + const blueprintMenuOpened = !this.state.blueprintMenuOpened; this.setState({ blueprintMenuOpened }); } - _closeMenu(blueprintId, grade) { + /** + * Activated when a blueprint is selected + * @param {int} blueprintId The ID of the selected blueprint + * @param {int} grade The grade of the selected blueprint + */ + _blueprintSelected(blueprintId, grade) { const { m } = this.props; const blueprint = Object.assign({}, _.find(Modifications.blueprints, function(o) { return o.id === blueprintId; })); blueprint.grade = grade; @@ -71,6 +100,52 @@ export default class ModificationsMenu extends TranslatedComponent { const blueprintMenuOpened = false; this.setState({ blueprintMenuOpened }); + this.props.onChange(); + } + + /** + * Provide a 'worst' roll within the information we have + */ + _rollWorst() { + const { m, ship } = this.props; + const features = m.blueprint.features[m.blueprint.grade]; + for (const featureName in features) { + const value = features[featureName][0]; + ship.setModification(m, featureName, value * 10000); + } + + this.setState({ modifications: this._setModifications(this.props) }); + this.props.onChange(); + } + + /** + * Provide a random roll within the information we have + */ + _rollRandom() { + const { m, ship } = this.props; + const features = m.blueprint.features[m.blueprint.grade]; + for (const featureName in features) { + const value = features[featureName][0] + (Math.random() * (features[featureName][1] - features[featureName][0])); + ship.setModification(m, featureName, value * 10000); + } + + this.setState({ modifications: this._setModifications(this.props) }); + this.props.onChange(); + } + + /** + * Provide a 'best' roll within the information we have + */ + _rollBest() { + const { m, ship } = this.props; + const features = m.blueprint.features[m.blueprint.grade]; + for (const featureName in features) { + const value = features[featureName][1]; + ship.setModification(m, featureName, value * 10000); + } + + this.setState({ modifications: this._setModifications(this.props) }); + this.props.onChange(); } /** @@ -83,11 +158,17 @@ export default class ModificationsMenu extends TranslatedComponent { const { tooltip, termtip } = this.context; const { m } = this.props; const { blueprintMenuOpened } = this.state; - const open = this._openMenu.bind(this); + + const _toggleBlueprintsMenu = this._toggleBlueprintsMenu; + const _rollBest = this._rollBest; + const _rollWorst = this._rollWorst; + const _rollRandom = this._rollRandom; let blueprintLabel; + let haveBlueprint = false; if (m.blueprint && !isEmpty(m.blueprint)) { blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade; + haveBlueprint = true; } else { blueprintLabel = translate('select a blueprint'); } @@ -98,11 +179,22 @@ export default class ModificationsMenu extends TranslatedComponent { onClick={(e) => e.stopPropagation() } onContextMenu={stopCtxPropagation} > - {blueprintMenuOpened && this.state.blueprints} - {!blueprintMenuOpened &&
{blueprintLabel}
} - {!blueprintMenuOpened && - - {this.state.modifications} +
{blueprintLabel}
+ { blueprintMenuOpened ? this.state.blueprints : + + + + + + + + + + +
{ translate('roll') } { translate('worst') } { translate('random') } { translate('best') }
+ + { this.state.modifications } +
} );