Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-08 22:33:24 +00:00
Code Issues Projects Releases Wiki Activity

Updates to modifications menu

Browse Source
This commit is contained in:
Cmdr McDonald
2016-10-28 01:46:21 +01:00
parent 3656c7a18f
commit 7a33bd64f8
2 changed files with 16 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/components/ModSlider.jsx
View File

@@ -39,8 +39,9 @@ export default class ModSlider extends Slider {
let width = outerWidth - (margin * 2);
let pctPos = width * this.props.percent + margin;
// TODO add this back in from middle to point
// TODO add this back in from zero point to value
// <rect className='primary-disabled' x={margin} y='0.45em' rx='0.15em' ry='0.15em' width={pctPos} height='0.3em' />
// TODO fix locations for labels (min, 0, max)
return <svg onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onTouchEnd={this._up} style={style}>
<rect className='primary' style={{ opacity: 0.3, fillOpacity: 0 }} x={margin} y='0.25em' rx='0.3em' ry='0.3em' width={width} height='0.7em' />
<circle className='primary' r={margin} cy='0.6em' style={{ strokeWidth: 0, fillOpacity: 1 }} cx={pctPos} />

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

@@ -44,10 +44,11 @@ export default class ModificationsMenu extends TranslatedComponent {
let list = [];
for (let modId of Modifications.validity[m.grp]) {
let modifiers = Modifications.modifiers[modId]
list.push(<div className={'cb'} key={modId}>
<div className={'l'}>{translate(Modifications.modifiers[modId].name)}</div>
<div className={'l'}>{translate(modifiers.name)}</div>
<span className={'r'}>{formats.pct(m.getModValue(modId) || 0)}</span>
<ModSlider className={'cb'} percent={this._getSliderPercent(modId)} onChange={this._updateValue.bind(this, modId)} />
<ModSlider axis={true} axisUnit ={'%'} className={'cb'} min={modifiers.min || -1} max={modifiers.max || 1} percent={this._getSliderPercent(modId)} onChange={this._updateValue.bind(this, modId)} />
</div>);
}
//<NumericInput className={'r'} min={-100} max={100} step={0.1} precision={2} value={m.getModValue(modId) * 100} onChange={this._updateValue.bind(this, modId)} />
@@ -55,104 +56,6 @@ export default class ModificationsMenu extends TranslatedComponent {
return { list };
}
/**
* Generate React Components for Module Group
* @param {Function} translate Translate function
* @param {Objecy} mountedModule Mounted Module
* @param {Funciton} warningFunc Warning function
* @param {number} mass Mass
* @param {function} onSelect Select/Mount callback
* @param {string} grp Group name
* @param {Array} modules Available modules
* @return {React.Component} Available Module Group contents
*/
_buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules) {
let prevClass = null, prevRating = null;
let elems = [];
for (let i = 0; i < modules.length; i++) {
let m = modules[i];
let mount = null;
let disabled = m.maxmass && (mass + (m.mass ? m.mass : 0)) > m.maxmass;
let active = mountedModule && mountedModule === m;
let classes = cn(m.name ? 'lc' : 'c', {
warning: !disabled && warningFunc && warningFunc(m),
active,
disabled
});
let eventHandlers;
if (disabled || active) {
eventHandlers = {};
} else {
let showDiff = this._showDiff.bind(this, mountedModule, m);
let select = onSelect.bind(null, m);
eventHandlers = {
onMouseEnter: this._over.bind(this, showDiff),
onTouchStart: this._touchStart.bind(this, showDiff),
onTouchEnd: this._touchEnd.bind(this, select),
onMouseLeave: this._hideDiff,
onClick: select
};
}
switch(m.mount) {
case 'F': mount = <MountFixed className={'lg'} />; break;
case 'G': mount = <MountGimballed className={'lg'}/>; break;
case 'T': mount = <MountTurret className={'lg'}/>; break;
}
if (i > 0 && modules.length > 3 && m.class != prevClass && (m.rating != prevRating || m.mount) && m.grp != 'pa') {
elems.push(<br key={'b' + m.grp + i} />);
}
elems.push(
<li key={m.id} className={classes} {...eventHandlers}>
{mount}
{(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}
</li>
);
prevClass = m.class;
prevRating = m.rating;
}
return <ul key={'modules' + grp} >{elems}</ul>;
}
/**
* Touch Start - Show diff after press, otherwise treat as tap
* @param {Function} showDiff diff tooltip callback
* @param {SyntheticEvent} event Event
*/
_touchStart(showDiff, event) {
event.preventDefault();
let rect = event.currentTarget.getBoundingClientRect();
this.touchTimeout = setTimeout(showDiff.bind(this, rect), PRESS_THRESHOLD);
}
/**
* Touch End - Select module on tap
* @param {Function} select Select module callback
* @param {SyntheticEvent} event Event
*/
_touchEnd(select, event) {
event.preventDefault();
if (this.touchTimeout !== null) { // If timeout has not fired (been nulled out) yet
select();
}
}
/**
* Scroll to mounted (if it exists) module group on mount
*/
componentDidMount() {
if (this.groupElem) { // Scroll to currently selected group
findDOMNode(this).scrollTop = this.groupElem.offsetTop;
}
}
/**
* Update state based on property and context changes
* @param {Object} nextProps Incoming/Next properties
@@ -162,16 +65,20 @@ export default class ModificationsMenu extends TranslatedComponent {
this.setState(this._initState(nextProps, nextContext));
}
/**
* Update modification given a value.
* @param {Number} modId The ID of the modification
* @param {Number} value The value to set, in the range [0,1]
*/
_updateValue(modId, value) {
let scaledValue = (value - 0.5) * 2;
let m = this.props.m;
let ship = this.props.ship;
let modifiers = Modifications.modifiers[modId];
let max = modifiers.max || 1;
let min = modifiers.min || -1;
let scaledValue = min + ((max - min) * value);
ship.setModification(m, modId, scaledValue);
this.props.onChange();
}
@@ -182,11 +89,14 @@ export default class ModificationsMenu extends TranslatedComponent {
* @return {Number} value The value of the slider, in the range [0,1]
*/
_getSliderPercent(modId) {
let modifiers = Modifications.modifiers[modId];
let max = modifiers.max || 1;
let min = modifiers.min || -1;
let m = this.props.m;
if (m.getModValue(modId)) {
return (m.getModValue(modId) / 2) + 0.5;
return (m.getModValue(modId) - min) / (max - min);
}
return 0.5;
return -min / (max - min);
}
/**