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

Move boost in to pips component

Browse Source
This commit is contained in:
Cmdr McDonald
2017-03-12 19:11:40 +00:00
parent 49c3e395db
commit 964cdd2b9a
6 changed files with 144 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/components/BattleCentre.jsx
View File

@@ -42,6 +42,7 @@ export default class BattleCentre extends TranslatedComponent {
wep: 2, wep: 2,
fuel: ship.fuelCapacity, fuel: ship.fuelCapacity,
cargo: ship.cargoCapacity, cargo: ship.cargoCapacity,
boost: false,
engagementRange: 1500, engagementRange: 1500,
opponent: new Ship('anaconda', Ships['anaconda'].properties, Ships['anaconda'].slots) opponent: new Ship('anaconda', Ships['anaconda'].properties, Ships['anaconda'].slots)
}; };
@@ -60,12 +61,13 @@ export default class BattleCentre extends TranslatedComponent {
/** /**
* Triggered when pips have been updated * Triggered when pips have been updated
* @param {number} sys SYS pips * @param {number} sys SYS pips
* @param {number} eng ENG pips * @param {number} eng ENG pips
* @param {number} wep WEP pips * @param {number} wep WEP pips
* @param {boolean} boost true if boosting
*/ */
_pipsUpdated(sys, eng, wep) { _pipsUpdated(sys, eng, wep, boost) {
this.setState({ sys, eng, wep }); this.setState({ sys, eng, wep, boost });
} }
/** /**
@@ -108,7 +110,7 @@ export default class BattleCentre extends TranslatedComponent {
render() { render() {
const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context; const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
const { formats, translate, units } = language; const { formats, translate, units } = language;
const { sys, eng, wep, cargo, fuel, engagementRange, opponent } = this.state; const { sys, eng, wep, cargo, fuel, boost, engagementRange, opponent } = this.state;
const { ship } = this.props; const { ship } = this.props;
// Markers are used to propagate state changes // Markers are used to propagate state changes
@@ -131,7 +133,7 @@ export default class BattleCentre extends TranslatedComponent {
<Shields marker={shieldMarker} ship={ship} opponent={opponent} sys={sys}/> <Shields marker={shieldMarker} ship={ship} opponent={opponent} sys={sys}/>
</div> </div>
<div className='group third'> <div className='group third'>
<Movement marker={movementMarker} ship={ship} eng={eng} cargo={cargo} fuel={fuel}/> <Movement marker={movementMarker} ship={ship} boost={boost} eng={eng} cargo={cargo} fuel={fuel}/>
</div> </div>
</span> </span>
); );

19
src/app/components/Movement.jsx
View File

@@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import cn from 'classnames';
import TranslatedComponent from './TranslatedComponent'; import TranslatedComponent from './TranslatedComponent';
/** /**
@@ -9,6 +8,7 @@ export default class Movement extends TranslatedComponent {
static propTypes = { static propTypes = {
marker: React.PropTypes.string.isRequired, marker: React.PropTypes.string.isRequired,
ship: React.PropTypes.object.isRequired, ship: React.PropTypes.object.isRequired,
boost: React.PropTypes.bool.isRequired,
eng: React.PropTypes.number.isRequired, eng: React.PropTypes.number.isRequired,
fuel: React.PropTypes.number.isRequired, fuel: React.PropTypes.number.isRequired,
cargo: React.PropTypes.number.isRequired cargo: React.PropTypes.number.isRequired
@@ -20,19 +20,6 @@ export default class Movement extends TranslatedComponent {
*/ */
constructor(props) { constructor(props) {
super(props); super(props);
this._toggleBoost = this._toggleBoost.bind(this);
this.state = { boost: false };
}
/**
* Toggle the boost feature
*/
_toggleBoost() {
let { boost } = this.state;
boost = !boost;
this.setState({ boost });
} }
/** /**
@@ -40,10 +27,9 @@ export default class Movement extends TranslatedComponent {
* @return {React.Component} contents * @return {React.Component} contents
*/ */
render() { render() {
const { ship, eng, cargo, fuel } = this.props; const { ship, boost, eng, cargo, fuel } = this.props;
const { language } = this.context; const { language } = this.context;
const { formats, translate, units } = language; const { formats, translate, units } = language;
const { boost } = this.state;
return ( return (
<span id='movement'> <span id='movement'>
@@ -79,7 +65,6 @@ export default class Movement extends TranslatedComponent {
// Yaw // Yaw
<text x="160" y="430" strokeWidth='1'>{formats.int(ship.calcYaw(eng, fuel, cargo, boost))}°/s</text> <text x="160" y="430" strokeWidth='1'>{formats.int(ship.calcYaw(eng, fuel, cargo, boost))}°/s</text>
</svg> </svg>
{ ship.canBoost() ? <button className={boost ? 'boost' : 'noboost'} onClick={this._toggleBoost}>Boost</button> : null }
</span>); </span>);
} }
} }

155
src/app/components/Pips.jsx
View File

@@ -11,7 +11,7 @@ import Module from '../shipyard/Module';
/** /**
* Pips displays SYS/ENG/WEP pips and allows users to change them with key presses by clicking on the relevant area. * Pips displays SYS/ENG/WEP pips and allows users to change them with key presses by clicking on the relevant area.
* Requires an onChange() function of the form onChange(sys, eng, wep) which is triggered whenever the pips change. * Requires an onChange() function of the form onChange(sys, eng, wep, boost) which is triggered whenever the pips change.
*/ */
export default class Pips extends TranslatedComponent { export default class Pips extends TranslatedComponent {
static propTypes = { static propTypes = {
@@ -30,12 +30,14 @@ export default class Pips extends TranslatedComponent {
const pd = ship.standard[4].m; const pd = ship.standard[4].m;
this._keyDown = this._keyDown.bind(this); this._keyDown = this._keyDown.bind(this);
this._toggleBoost = this._toggleBoost.bind(this);
let pipsSvg = this._renderPips(2, 2, 2); let pipsSvg = this._renderPips(2, 2, 2);
this.state = { this.state = {
sys: 2, sys: 2,
eng: 2, eng: 2,
wep: 2, wep: 2,
boost: false,
sysCap: pd.getSystemsCapacity(), sysCap: pd.getSystemsCapacity(),
engCap: pd.getEnginesCapacity(), engCap: pd.getEnginesCapacity(),
wepCap: pd.getWeaponsCapacity(), wepCap: pd.getWeaponsCapacity(),
@@ -101,6 +103,10 @@ export default class Pips extends TranslatedComponent {
*/ */
_keyDown(e) { _keyDown(e) {
switch (e.keyCode) { switch (e.keyCode) {
case 9: // Tab == boost
e.preventDefault();
this._toggleBoost();
break;
case 37: // Left arrow == increase SYS case 37: // Left arrow == increase SYS
e.preventDefault(); e.preventDefault();
this._incSys(); this._incSys();
@@ -120,15 +126,31 @@ export default class Pips extends TranslatedComponent {
} }
} }
/**
* Handle a click
* @param {string} which Which item was clicked
*/
onClick(which) {
if (which == 'SYS') {
this._incSys();
} else if (which == 'ENG') {
this._incEng();
} else if (which == 'WEP') {
this._incWep();
} else if (which == 'RST') {
this._reset();
}
}
/** /**
* Reset the capacitor * Reset the capacitor
*/ */
_reset() { _reset() {
let { sys, eng, wep } = this.state; let { sys, eng, wep, boost } = this.state;
if (sys != 2 || eng != 2 || wep != 2) { if (sys != 2 || eng != 2 || wep != 2) {
sys = eng = wep = 2; sys = eng = wep = 2;
this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) }); this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) });
this.props.onChange(sys, eng, wep); this.props.onChange(sys, eng, wep, boost);
} }
} }
@@ -136,7 +158,7 @@ export default class Pips extends TranslatedComponent {
* Increment the SYS capacitor * Increment the SYS capacitor
*/ */
_incSys() { _incSys() {
let { sys, eng, wep } = this.state; let { sys, eng, wep, boost } = this.state;
const required = Math.min(1, 4 - sys); const required = Math.min(1, 4 - sys);
if (required > 0) { if (required > 0) {
@@ -164,7 +186,7 @@ export default class Pips extends TranslatedComponent {
} }
} }
this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) }); this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) });
this.props.onChange(sys, eng, wep); this.props.onChange(sys, eng, wep, boost);
} }
} }
@@ -172,7 +194,7 @@ export default class Pips extends TranslatedComponent {
* Increment the ENG capacitor * Increment the ENG capacitor
*/ */
_incEng() { _incEng() {
let { sys, eng, wep } = this.state; let { sys, eng, wep, boost } = this.state;
const required = Math.min(1, 4 - eng); const required = Math.min(1, 4 - eng);
if (required > 0) { if (required > 0) {
@@ -200,7 +222,7 @@ export default class Pips extends TranslatedComponent {
} }
} }
this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) }); this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) });
this.props.onChange(sys, eng, wep); this.props.onChange(sys, eng, wep, boost);
} }
} }
@@ -208,7 +230,7 @@ export default class Pips extends TranslatedComponent {
* Increment the WEP capacitor * Increment the WEP capacitor
*/ */
_incWep() { _incWep() {
let { sys, eng, wep } = this.state; let { sys, eng, wep, boost } = this.state;
const required = Math.min(1, 4 - wep); const required = Math.min(1, 4 - wep);
if (required > 0) { if (required > 0) {
@@ -236,24 +258,18 @@ export default class Pips extends TranslatedComponent {
} }
} }
this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) }); this.setState({ sys, eng, wep, pipsSvg: this._renderPips(sys, eng, wep) });
this.props.onChange(sys, eng, wep); this.props.onChange(sys, eng, wep, boost);
} }
} }
/** /**
* Handle a click * Toggle the boost feature
* @param {string} which Which item was clicked
*/ */
onClick(which) { _toggleBoost() {
if (which == 'SYS') { let { boost, sys, eng, wep } = this.state;
this._incSys(); boost = !boost;
} else if (which == 'ENG') { this.setState({ boost });
this._incEng(); this.props.onChange(sys, eng, wep, boost);
} else if (which == 'WEP') {
this._incWep();
} else if (which == 'RST') {
this._reset();
}
} }
/** /**
@@ -269,37 +285,37 @@ export default class Pips extends TranslatedComponent {
// SYS // SYS
pipsSvg['SYS'] = []; pipsSvg['SYS'] = [];
for (let i = 0; i < Math.floor(sys); i++) { for (let i = 0; i < Math.floor(sys); i++) {
pipsSvg['SYS'].push(<Pip className='fullpip' key={i} />); pipsSvg['SYS'].push(<Pip className='full' key={i} />);
} }
if (sys > Math.floor(sys)) { if (sys > Math.floor(sys)) {
pipsSvg['SYS'].push(<Pip className='halfpip' key={'half'} />); pipsSvg['SYS'].push(<Pip className='half' key={'half'} />);
} }
for (let i = Math.floor(sys + 0.5); i < 4; i++) { for (let i = Math.floor(sys + 0.5); i < 4; i++) {
pipsSvg['SYS'].push(<Pip className='emptypip' key={i} />); pipsSvg['SYS'].push(<Pip className='empty' key={i} />);
} }
// ENG // ENG
pipsSvg['ENG'] = []; pipsSvg['ENG'] = [];
for (let i = 0; i < Math.floor(eng); i++) { for (let i = 0; i < Math.floor(eng); i++) {
pipsSvg['ENG'].push(<Pip className='fullpip' key={i} />); pipsSvg['ENG'].push(<Pip className='full' key={i} />);
} }
if (eng > Math.floor(eng)) { if (eng > Math.floor(eng)) {
pipsSvg['ENG'].push(<Pip className='halfpip' key={'half'} />); pipsSvg['ENG'].push(<Pip className='half' key={'half'} />);
} }
for (let i = Math.floor(eng + 0.5); i < 4; i++) { for (let i = Math.floor(eng + 0.5); i < 4; i++) {
pipsSvg['ENG'].push(<Pip className='emptypip' key={i} />); pipsSvg['ENG'].push(<Pip className='empty' key={i} />);
} }
// WEP // WEP
pipsSvg['WEP'] = []; pipsSvg['WEP'] = [];
for (let i = 0; i < Math.floor(wep); i++) { for (let i = 0; i < Math.floor(wep); i++) {
pipsSvg['WEP'].push(<Pip className='fullpip' key={i} />); pipsSvg['WEP'].push(<Pip className='full' key={i} />);
} }
if (wep > Math.floor(wep)) { if (wep > Math.floor(wep)) {
pipsSvg['WEP'].push(<Pip className='halfpip' key={'half'} />); pipsSvg['WEP'].push(<Pip className='half' key={'half'} />);
} }
for (let i = Math.floor(wep + 0.5); i < 4; i++) { for (let i = Math.floor(wep + 0.5); i < 4; i++) {
pipsSvg['WEP'].push(<Pip className='emptypip' key={i} />); pipsSvg['WEP'].push(<Pip className='empty' key={i} />);
} }
return pipsSvg; return pipsSvg;
@@ -312,7 +328,7 @@ export default class Pips extends TranslatedComponent {
render() { render() {
const { formats, translate, units } = this.context.language; const { formats, translate, units } = this.context.language;
const { ship } = this.props; const { ship } = this.props;
const { sys, eng, wep, sysCap, engCap, wepCap, sysRate, engRate, wepRate, pipsSvg } = this.state; const { boost, sys, eng, wep, sysCap, engCap, wepCap, sysRate, engRate, wepRate, pipsSvg } = this.state;
const onSysClicked = this.onClick.bind(this, 'SYS'); const onSysClicked = this.onClick.bind(this, 'SYS');
const onEngClicked = this.onClick.bind(this, 'ENG'); const onEngClicked = this.onClick.bind(this, 'ENG');
@@ -320,40 +336,49 @@ export default class Pips extends TranslatedComponent {
const onRstClicked = this.onClick.bind(this, 'RST'); const onRstClicked = this.onClick.bind(this, 'RST');
return ( return (
<table className='pipstable'> <div id='pips'>
<tbody> <table>
<tr> <tbody>
<td>&nbsp;</td> { ship.canBoost() ?
<td>&nbsp;</td> <tr>
<td className = 'pipsclickable' onClick={onEngClicked}>{pipsSvg['ENG']}</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td><button className={boost ? 'selected' : null} onClick={this._toggleBoost}>{translate('boost')}</button></td>
<tr> <td>&nbsp;</td>
<td>&nbsp;</td> </tr> : null }
<td className = 'pipsclickable' onClick={onSysClicked}>{pipsSvg['SYS']}</td> <tr>
<td className = 'pipsclickable' onClick={onEngClicked}>{translate('ENG')}</td> <td>&nbsp;</td>
<td className = 'pipsclickable' onClick={onWepClicked}>{pipsSvg['WEP']}</td> <td>&nbsp;</td>
</tr> <td className='clickable' onClick={onEngClicked}>{pipsSvg['ENG']}</td>
<tr> <td>&nbsp;</td>
<td>&nbsp;</td> </tr>
<td className = 'pipsclickable' onClick={onSysClicked}>{translate('SYS')}</td> <tr>
<td className = 'pipsclickable' onClick={onRstClicked}>{translate('RST')}</td> <td>&nbsp;</td>
<td className = 'pipsclickable' onClick={onWepClicked}>{translate('WEP')}</td> <td className='clickable' onClick={onSysClicked}>{pipsSvg['SYS']}</td>
</tr> <td className='clickable' onClick={onEngClicked}>{translate('ENG')}</td>
<tr> <td className='clickable' onClick={onWepClicked}>{pipsSvg['WEP']}</td>
<td>{translate('capacity')} ({units.MJ})</td> </tr>
<td>{formats.f1(sysCap)}</td> <tr>
<td>{formats.f1(engCap)}</td> <td>&nbsp;</td>
<td>{formats.f1(wepCap)}</td> <td className='clickable' onClick={onSysClicked}>{translate('SYS')}</td>
</tr> <td className='clickable' onClick={onRstClicked}>{translate('RST')}</td>
<tr> <td className='clickable' onClick={onWepClicked}>{translate('WEP')}</td>
<td>{translate('recharge')} ({units.MW})</td> </tr>
<td>{formats.f1(sysRate * (sys / 4))}</td> <tr>
<td>{formats.f1(engRate * (eng / 4))}</td> <td>{translate('capacity')} ({units.MJ})</td>
<td>{formats.f1(wepRate * (wep / 4))}</td> <td>{formats.f1(sysCap)}</td>
</tr> <td>{formats.f1(engCap)}</td>
</tbody> <td>{formats.f1(wepCap)}</td>
</table> </tr>
<tr>
<td>{translate('recharge')} ({units.MW})</td>
<td>{formats.f1(sysRate * (sys / 4))}</td>
<td>{formats.f1(engRate * (eng / 4))}</td>
<td>{formats.f1(wepRate * (wep / 4))}</td>
</tr>
</tbody>
</table>
</div>
); );
} }
} }

4
src/app/components/Shields.jsx
View File

@@ -74,8 +74,8 @@ export default class Shields extends TranslatedComponent {
// Remove base shield generator strength // Remove base shield generator strength
boost -= 1; boost -= 1;
boosterExplDmg = boosterExplDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterExplDmg) / 2; boosterExplDmg = boosterExplDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterExplDmg) / 2;
boosterKinDmg = boosterKinDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterKinDmg) / 2; boosterKinDmg = boosterKinDmg > 0.7 ? boosterKinDmg : 0.7 - (0.7 - boosterKinDmg) / 2;
boosterThermDmg = boosterThermDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterThermDmg) / 2; boosterThermDmg = boosterThermDmg > 0.7 ? boosterThermDmg : 0.7 - (0.7 - boosterThermDmg) / 2;
const generatorStrength = Calc.shieldStrength(ship.hullMass, ship.baseShieldStrength, shieldGenerator, 1); const generatorStrength = Calc.shieldStrength(ship.hullMass, ship.baseShieldStrength, shieldGenerator, 1);
const boostersStrength = generatorStrength * boost; const boostersStrength = generatorStrength * boost;

13
src/less/movement.less
View File

@@ -10,17 +10,4 @@
stroke: @primary; stroke: @primary;
} }
} }
button {
font-size: 1.4em;
background: @primary-bg;
color: @primary;
border: 1px solid @primary;
&.boost {
// Shown when boost is enabled
background: @primary;
color: @primary-bg;
}
}
} }

67
src/less/pips.less
View File

@@ -1,29 +1,44 @@
// The pips table - keep the background black // The pips table - keep the background black
.pipstable { #pips {
background-color: @bgBlack; table {
color: @primary; background-color: @bgBlack;
} color: @primary;
}
// A clickable entity in the pips table
.pipsclickable { // A clickable entity in the pips table
cursor: pointer; .clickable {
} cursor: pointer;
}
// A full pip
.fullpip { button {
stroke: @primary; font-size: 1.2em;
fill: @primary; background: @primary-bg;
} color: @primary;
border: 1px solid @primary;
// A half pip margin: 20px;
.halfpip { &.selected {
stroke: @primary-disabled; // Shown when button is selected
fill: @primary-disabled; background: @primary;
} color: @primary-bg;
}
// An empty pip }
.emptypip {
stroke: @primary-bg; // A full pip
fill: @primary-bg; .full {
stroke: @primary;
fill: @primary;
}
// A half pip
.half {
stroke: @primary-disabled;
fill: @primary-disabled;
}
// An empty pip
.empty {
stroke: @primary-bg;
fill: @primary-bg;
}
} }