mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-08 22:33:24 +00:00
Rework PIP menu
This commit is contained in:
felixlinker
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import { Pip } from './SvgIcons';
|
||||
import { autoBind } from 'react-extras';
|
||||
import { Ship } from 'ed-forge';
|
||||
|
||||
/**
|
||||
* Pips displays SYS/ENG/WEP pips and allows users to change them with key presses by clicking on the relevant area.
|
||||
@@ -10,13 +11,9 @@ import { autoBind } from 'react-extras';
|
||||
*/
|
||||
export default class Pips extends TranslatedComponent {
|
||||
static propTypes = {
|
||||
sys: PropTypes.number.isRequired,
|
||||
eng: PropTypes.number.isRequired,
|
||||
wep: PropTypes.number.isRequired,
|
||||
mcSys: PropTypes.number.isRequired,
|
||||
mcEng: PropTypes.number.isRequired,
|
||||
mcWep: PropTypes.number.isRequired,
|
||||
onChange: PropTypes.func.isRequired
|
||||
ship: PropTypes.instanceOf(Ship).isRequired,
|
||||
pips: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -27,6 +24,12 @@ export default class Pips extends TranslatedComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
autoBind(this);
|
||||
|
||||
const { ship } = props;
|
||||
this._incSys = this._change(ship.incSys);
|
||||
this._incEng = this._change(ship.incEng);
|
||||
this._incWep = this._change(ship.incWep);
|
||||
this._reset = this._change(ship.pipsReset);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -71,153 +74,42 @@ export default class Pips extends TranslatedComponent {
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the capacitor
|
||||
*/
|
||||
_reset(isMc) {
|
||||
let { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
|
||||
if (isMc) {
|
||||
if (mcSys || mcEng || mcWep) {
|
||||
sys -= mcSys;
|
||||
eng -= mcEng;
|
||||
wep -= mcWep;
|
||||
this.props.onChange(sys, eng, wep, 0, 0, 0);
|
||||
}
|
||||
} else if (sys != 2 || eng != 2 || wep != 2) {
|
||||
sys = eng = wep = 2;
|
||||
this.props.onChange(sys + mcSys, eng + mcEng, wep + mcWep, mcSys, mcEng, mcWep);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Increment the SYS capacitor
|
||||
*/
|
||||
_incSys() {
|
||||
this._inc('sys', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Increment the ENG capacitor
|
||||
*/
|
||||
_incEng() {
|
||||
this._inc('eng', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Increment the WEP capacitor
|
||||
*/
|
||||
_incWep() {
|
||||
this._inc('wep', false);
|
||||
}
|
||||
|
||||
_wrapMcClick(key) {
|
||||
return (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
if (key == 'rst') {
|
||||
this._reset(true);
|
||||
} else {
|
||||
this._inc(key, true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Increases a given capacitor
|
||||
* @param {String} key Pip name to increase (one of 'sys', 'eng', 'wep')
|
||||
* Creates a function that handles pip assignment and call `onChance`.
|
||||
* @param {String} cb Callback that handles the actual pip assignment
|
||||
* @param {Boolean} isMc True when increase is by multi crew
|
||||
* @returns {Function} Function that handles pip assigment
|
||||
*/
|
||||
_inc(key, isMc) {
|
||||
if (!['sys', 'eng', 'wep'].includes(key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
|
||||
let mc = key == 'sys' ? mcSys : (key == 'eng' ? mcEng : mcWep);
|
||||
let pips = this.props[key] - mc;
|
||||
let other1 = key == 'sys' ? eng - mcEng : sys - mcSys;
|
||||
let other2 = key == 'wep' ? eng - mcEng : wep - mcWep;
|
||||
|
||||
const required = Math.min(1, 4 - mc - pips);
|
||||
if (isMc) {
|
||||
// We can only set full pips in multi-crew also we can only set two pips
|
||||
if (required > 0.5 && mcSys + mcEng + mcWep < 2) {
|
||||
if (key == 'sys') {
|
||||
mcSys += 1;
|
||||
} else if (key == 'eng') {
|
||||
mcEng += 1;
|
||||
} else {
|
||||
mcWep += 1;
|
||||
}
|
||||
}
|
||||
} else if (required > 0) {
|
||||
if (required == 0.5) {
|
||||
// Take from whichever is larger
|
||||
if (other1 > other2) {
|
||||
other1 -= 0.5;
|
||||
} else {
|
||||
other2 -= 0.5;
|
||||
}
|
||||
pips += 0.5;
|
||||
} else {
|
||||
// Required is 1 - take from both if possible
|
||||
if (other1 == 0) {
|
||||
other2 -= 1;
|
||||
} else if (other2 == 0) {
|
||||
other1 -= 1;
|
||||
} else {
|
||||
other1 -= 0.5;
|
||||
other2 -= 0.5;
|
||||
}
|
||||
pips += 1;
|
||||
}
|
||||
}
|
||||
|
||||
sys = mcSys + (key == 'sys' ? pips : other1);
|
||||
eng = mcEng + (key == 'eng' ? pips : (key == 'sys' ? other1 : other2));
|
||||
wep = mcWep + (key == 'wep' ? pips : other2);
|
||||
this.props.onChange(sys, eng, wep, mcSys, mcEng, mcWep);
|
||||
_change(cb, isMc) {
|
||||
return () => {
|
||||
cb(isMc);
|
||||
this.props.onChange(this.props.ship.getDistributorSettingsObject());
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up the rendering for pips
|
||||
* @param {Number} sys the SYS pips
|
||||
* @param {Number} eng the ENG pips
|
||||
* @param {Number} wep the WEP pips
|
||||
* @param {Number} mcSys SYS pips from multi-crew
|
||||
* @param {Number} mcEng ENG pips from multi-crew
|
||||
* @param {Number} mcWep WEP pips from multi-crew
|
||||
* @returns {Object} Object containing the rendering for the pips
|
||||
*/
|
||||
_renderPips(sys, eng, wep, mcSys, mcEng, mcWep) {
|
||||
_renderPips() {
|
||||
const pipsSvg = {
|
||||
SYS: [],
|
||||
ENG: [],
|
||||
WEP: [],
|
||||
Sys: [],
|
||||
Eng: [],
|
||||
Wep: [],
|
||||
};
|
||||
|
||||
// Multi-crew pipsSettings actually are included in the overall pip count therefore
|
||||
// we can consider [0, sys - mcSys] as normal pipsSettings whilst [sys - mcSys, sys]
|
||||
// are the multi-crew pipsSettings in what follows.
|
||||
|
||||
let pipsSettings = {
|
||||
SYS: [sys, mcSys],
|
||||
ENG: [eng, mcEng],
|
||||
WEP: [wep, mcWep],
|
||||
};
|
||||
|
||||
for (let pipName in pipsSettings) {
|
||||
let [pips, mcPips] = pipsSettings[pipName];
|
||||
for (let i = 0; i < Math.floor(pips - mcPips); i++) {
|
||||
pipsSvg[pipName].push(<Pip key={i} className='full' />);
|
||||
for (let k in this.props.pips) {
|
||||
let { base, mc } = this.props.pips[k];
|
||||
for (let i = 0; i < Math.floor(base); i++) {
|
||||
pipsSvg[k].push(<Pip key={i} className='full' />);
|
||||
}
|
||||
if (pips > Math.floor(pips)) {
|
||||
pipsSvg[pipName].push(<Pip className='half' key={'half'} />);
|
||||
if (base > Math.floor(base)) {
|
||||
pipsSvg[k].push(<Pip className='half' key={'half'} />);
|
||||
}
|
||||
for (let i = pips - mcPips; i < Math.floor(pips); i++) {
|
||||
pipsSvg[pipName].push(<Pip key={i} className='mc' />);
|
||||
for (let i = 0; i < mc; i++) {
|
||||
pipsSvg[k].push(<Pip key={base + i} className='mc' />);
|
||||
}
|
||||
for (let i = Math.floor(pips + 0.5); i < 4; i++) {
|
||||
pipsSvg[pipName].push(<Pip className='empty' key={i} />);
|
||||
for (let i = Math.ceil(base + mc); i < 4; i++) {
|
||||
pipsSvg[k].push(<Pip className='empty' key={i} />);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -229,11 +121,10 @@ export default class Pips extends TranslatedComponent {
|
||||
* @return {React.Component} contents
|
||||
*/
|
||||
render() {
|
||||
const { tooltip, termtip } = this.context;
|
||||
const { formats, translate, units } = this.context.language;
|
||||
const { sys, eng, wep, mcSys, mcEng, mcWep } = this.props;
|
||||
const { ship } = this.props;
|
||||
const { translate } = this.context.language;
|
||||
|
||||
const pipsSvg = this._renderPips(sys, eng, wep, mcSys, mcEng, mcWep);
|
||||
const pipsSvg = this._renderPips();
|
||||
return (
|
||||
<span id='pips'>
|
||||
<table>
|
||||
@@ -241,38 +132,40 @@ export default class Pips extends TranslatedComponent {
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td className='clickable' onClick={() => this._inc('eng')}
|
||||
onContextMenu={this._wrapMcClick('eng')}>{pipsSvg['ENG']}</td>
|
||||
<td className='clickable' onClick={this._incEng}>{pipsSvg.Eng}</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td className='clickable' onClick={this._incSys}
|
||||
onContextMenu={this._wrapMcClick('sys')}>{pipsSvg['SYS']}</td>
|
||||
<td className='clickable' onClick={this._incEng}
|
||||
onContextMenu={this._wrapMcClick('eng')}>{translate('ENG')}</td>
|
||||
<td className='clickable' onClick={this._incWep}
|
||||
onContextMenu={this._wrapMcClick('wep')}>{pipsSvg['WEP']}</td>
|
||||
<td className='clickable' onClick={this._incSys}>{pipsSvg.Sys}</td>
|
||||
<td className='clickable' onClick={this._incEng}>
|
||||
{translate('ENG')}
|
||||
</td>
|
||||
<td className='clickable' onClick={this._incWep}>{pipsSvg.Wep}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td className='clickable' onClick={this._incSys}
|
||||
onContextMenu={this._wrapMcClick('sys')}>{translate('SYS')}</td>
|
||||
<td className='clickable' onClick={this._reset.bind(this, false)}>
|
||||
<td className='clickable' onClick={this._incSys}>
|
||||
{translate('SYS')}
|
||||
</td>
|
||||
<td className='clickable' onClick={this._reset}>
|
||||
{translate('RST')}
|
||||
</td>
|
||||
<td className='clickable' onClick={this._incWep}
|
||||
onContextMenu={this._wrapMcClick('wep')}>{translate('WEP')}</td>
|
||||
<td className='clickable' onClick={this._incWep}>
|
||||
{translate('WEP')}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td className='clickable secondary' onClick={this._wrapMcClick('rst')}
|
||||
onMouseEnter={termtip.bind(null, 'PHRASE_MULTI_CREW_CAPACITOR_POINTS')}
|
||||
onMouseLeave={tooltip.bind(null, null)}>
|
||||
{translate('RST')}
|
||||
<td className='clickable' onClick={this._change(ship.incSys, true)}>
|
||||
<Pip className='mc' />
|
||||
</td>
|
||||
<td className='clickable' onClick={this._change(ship.incEng, true)}>
|
||||
<Pip className='mc' />
|
||||
</td>
|
||||
<td className='clickable' onClick={this._change(ship.incWep, true)}>
|
||||
<Pip className='mc' />
|
||||
</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user