Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 14:45:35 +00:00
Code Issues Projects Releases Wiki Activity

Restyle modifications menu

Browse Source
This commit is contained in:
Cmdr McDonald
2017-03-31 09:21:13 +01:00
parent 3b058bda7f
commit db1a976e20
6 changed files with 62 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/app/components/ModificationsMenu.jsx
View File

@@ -15,6 +15,7 @@ export default class ModificationsMenu extends TranslatedComponent {
static propTypes = {
ship: React.PropTypes.object.isRequired,
m: React.PropTypes.object.isRequired,
marker: React.PropTypes.string.isRequired,
onChange: React.PropTypes.func.isRequired
};
@@ -25,7 +26,6 @@ export default class ModificationsMenu extends TranslatedComponent {
*/
constructor(props, context) {
super(props);
this.state = this._initState(props, context);
this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this);
this._toggleSpecialsMenu = this._toggleSpecialsMenu.bind(this);
@@ -34,33 +34,59 @@ export default class ModificationsMenu extends TranslatedComponent {
this._rollBest = this._rollBest.bind(this);
this._rollExtreme = this._rollExtreme.bind(this);
this._reset = this._reset.bind(this);
this.state = {
blueprintMenuOpened: false,
specialMenuOpened: false
};
}
/**
* Initialise state
* @param {Object} props React Component properties
* @param {Object} context React Component context
* Render the blueprints
* @param {Object} props React component properties
* @param {Object} context React component context
* @return {Object} list: Array of React Components
*/
_initState(props, context) {
let { m } = props;
_renderBlueprints(props, context) {
const { m } = props;
const { language, tooltip, termtip } = context;
const translate = language.translate;
// Set up the blueprints
let blueprints = [];
const blueprints = [];
for (const blueprintName in Modifications.modules[m.grp].blueprints) {
for (const grade in Modifications.modules[m.grp].blueprints[blueprintName].grades) {
const blueprint = getBlueprint(blueprintName, m);
let blueprintGrades = [];
for (let grade in Modifications.modules[m.grp].blueprints[blueprintName].grades) {
// Grade is a string in the JSON so make it a number
grade = Number(grade);
const classes = cn('c', {
active: m.blueprint && blueprint.id === m.blueprint.id && grade === m.blueprint.grade
});
const close = this._blueprintSelected.bind(this, blueprintName, grade);
const key = blueprintName + ':' + grade;
const blueprint = getBlueprint(blueprintName, m);
const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade], Modifications.modules[m.grp].blueprints[blueprintName].grades[grade].engineers);
blueprints.push(<div style={{ cursor: 'pointer' }} key={ key } onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={ close }>{translate(blueprint.name + ' grade ' + grade)}</div>);
blueprintGrades.unshift(<li key={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close}>{grade}</li>);
}
if (blueprintGrades) {
blueprints.push(<div key={blueprint.name} className={'select-group cap'}>{translate(blueprint.name)}</div>);
blueprints.push(<ul key={blueprintName}>{blueprintGrades}</ul>);
}
}
return blueprints;
}
// Set up the special effects
let specials = [];
/**
* Render the specials
* @param {Object} props React component properties
* @param {Object} context React component context
* @return {Object} list: Array of React Components
*/
_renderSpecials(props, context) {
const { m } = props;
const { language, tooltip, termtip } = context;
const translate = language.translate;
const specials = [];
if (Modifications.modules[m.grp].specials && Modifications.modules[m.grp].specials.length > 0) {
const close = this._specialSelected.bind(this, null);
specials.push(<div style={{ cursor: 'pointer' }} key={ 'none' } onClick={ close }>{translate('PHRASE_NO_SPECIAL')}</div>);
@@ -69,24 +95,17 @@ export default class ModificationsMenu extends TranslatedComponent {
specials.push(<div style={{ cursor: 'pointer' }} key={ specialName } onClick={ close }>{translate(Modifications.specials[specialName].name)}</div>);
}
}
// Set up the modifications
const modifications = this._setModifications(props);
const blueprintMenuOpened = false;
const specialMenuOpened = false;
return { blueprintMenuOpened, blueprints, modifications, specialMenuOpened, specials };
return specials;
}
/**
* Initialise the modifications
* Render the modifications
* @param {Object} props React Component properties
* @return {Object} list: Array of React Components
*/
_setModifications(props) {
_renderModifications(props) {
const { m, onChange, ship } = props;
let modifications = [];
const modifications = [];
for (const modName of Modifications.modules[m.grp].modifications) {
if (!Modifications.modifications[modName].hidden) {
const key = modName + (m.getModValue(modName) / 100 || 0);
@@ -116,8 +135,7 @@ export default class ModificationsMenu extends TranslatedComponent {
blueprint.grade = grade;
m.blueprint = blueprint;
const blueprintMenuOpened = false;
this.setState({ blueprintMenuOpened });
this.setState({ blueprintMenuOpened: false });
this.props.onChange();
}
@@ -148,8 +166,7 @@ export default class ModificationsMenu extends TranslatedComponent {
ship.recalculateEps();
}
const specialMenuOpened = false;
this.setState({ specialMenuOpened, modifications: this._setModifications(this.props) });
this.setState({ specialMenuOpened: false });
this.props.onChange();
}
@@ -181,7 +198,7 @@ export default class ModificationsMenu extends TranslatedComponent {
let value = features[featureName][0];
this._setRollResult(ship, m, featureName, value);
}
this.setState({ modifications: this._setModifications(this.props) });
this.props.onChange();
}
@@ -196,7 +213,7 @@ export default class ModificationsMenu extends TranslatedComponent {
let value = features[featureName][0] + (Math.random() * (features[featureName][1] - features[featureName][0]));
this._setRollResult(ship, m, featureName, value);
}
this.setState({ modifications: this._setModifications(this.props) });
this.props.onChange();
}
@@ -210,7 +227,7 @@ export default class ModificationsMenu extends TranslatedComponent {
let value = features[featureName][1];
this._setRollResult(ship, m, featureName, value);
}
this.setState({ modifications: this._setModifications(this.props) });
this.props.onChange();
}
@@ -241,7 +258,7 @@ export default class ModificationsMenu extends TranslatedComponent {
this._setRollResult(ship, m, featureName, value);
}
this.setState({ modifications: this._setModifications(this.props) });
this.props.onChange();
}
@@ -253,7 +270,6 @@ export default class ModificationsMenu extends TranslatedComponent {
ship.clearModifications(m);
ship.clearBlueprint(m);
this.setState({ modifications: this._setModifications(this.props) });
this.props.onChange();
}
@@ -291,8 +307,10 @@ export default class ModificationsMenu extends TranslatedComponent {
specialLabel = translate('PHRASE_SELECT_SPECIAL');
}
const specials = this._renderSpecials(this.props, this.context);
const showBlueprintsMenu = blueprintMenuOpened;
const showSpecial = haveBlueprint && this.state.specials.length > 0 && !blueprintMenuOpened;
const showSpecial = haveBlueprint && specials.length && !blueprintMenuOpened;
const showSpecialsMenu = specialMenuOpened;
const showRolls = haveBlueprint && !blueprintMenuOpened && !specialMenuOpened;
const showReset = !blueprintMenuOpened && !specialMenuOpened;
@@ -304,12 +322,12 @@ export default class ModificationsMenu extends TranslatedComponent {
onClick={(e) => e.stopPropagation() }
onContextMenu={stopCtxPropagation}
>
{ haveBlueprint ?
{ showBlueprintsMenu ? '' : haveBlueprint ?
<div className={ cn('section-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu}>{blueprintLabel}</div> :
<div className={ cn('section-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
{ showBlueprintsMenu ? this.state.blueprints : null }
{ showBlueprintsMenu ? this._renderBlueprints(this.props, this.context) : null }
{ showSpecial ? <div className={ cn('section-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleSpecialsMenu}>{specialLabel}</div> : null }
{ showSpecialsMenu ? this.state.specials : null }
{ showSpecialsMenu ? specials : null }
{ showRolls || showReset ?
<table style={{ width: '100%', backgroundColor: 'transparent' }}>
<tbody>
@@ -329,7 +347,7 @@ export default class ModificationsMenu extends TranslatedComponent {
</table> : null }
{ showMods ?
<span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
{ this.state.modifications }
{ this._renderModifications(this.props) }
</span> : null }
</div>
);