diff --git a/src/app/components/BattleCentre.jsx b/src/app/components/BattleCentre.jsx index addfe793..21a10c29 100644 --- a/src/app/components/BattleCentre.jsx +++ b/src/app/components/BattleCentre.jsx @@ -42,6 +42,7 @@ export default class BattleCentre extends TranslatedComponent { wep: 2, fuel: ship.fuelCapacity, cargo: ship.cargoCapacity, + boost: false, engagementRange: 1500, 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 - * @param {number} sys SYS pips - * @param {number} eng ENG pips - * @param {number} wep WEP pips + * @param {number} sys SYS pips + * @param {number} eng ENG pips + * @param {number} wep WEP pips + * @param {boolean} boost true if boosting */ - _pipsUpdated(sys, eng, wep) { - this.setState({ sys, eng, wep }); + _pipsUpdated(sys, eng, wep, boost) { + this.setState({ sys, eng, wep, boost }); } /** @@ -108,7 +110,7 @@ export default class BattleCentre extends TranslatedComponent { render() { const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context; 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; // Markers are used to propagate state changes @@ -131,7 +133,7 @@ export default class BattleCentre extends TranslatedComponent {
- +
); diff --git a/src/app/components/Movement.jsx b/src/app/components/Movement.jsx index a098ea2e..62dbf544 100644 --- a/src/app/components/Movement.jsx +++ b/src/app/components/Movement.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import cn from 'classnames'; import TranslatedComponent from './TranslatedComponent'; /** @@ -9,6 +8,7 @@ export default class Movement extends TranslatedComponent { static propTypes = { marker: React.PropTypes.string.isRequired, ship: React.PropTypes.object.isRequired, + boost: React.PropTypes.bool.isRequired, eng: React.PropTypes.number.isRequired, fuel: React.PropTypes.number.isRequired, cargo: React.PropTypes.number.isRequired @@ -20,19 +20,6 @@ export default class Movement extends TranslatedComponent { */ constructor(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 */ render() { - const { ship, eng, cargo, fuel } = this.props; + const { ship, boost, eng, cargo, fuel } = this.props; const { language } = this.context; const { formats, translate, units } = language; - const { boost } = this.state; return ( @@ -79,7 +65,6 @@ export default class Movement extends TranslatedComponent { // Yaw {formats.int(ship.calcYaw(eng, fuel, cargo, boost))}°/s - { ship.canBoost() ? : null } ); } } diff --git a/src/app/components/Pips.jsx b/src/app/components/Pips.jsx index 8d123e82..185ddf74 100644 --- a/src/app/components/Pips.jsx +++ b/src/app/components/Pips.jsx @@ -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. - * 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 { static propTypes = { @@ -30,12 +30,14 @@ export default class Pips extends TranslatedComponent { const pd = ship.standard[4].m; this._keyDown = this._keyDown.bind(this); + this._toggleBoost = this._toggleBoost.bind(this); let pipsSvg = this._renderPips(2, 2, 2); this.state = { sys: 2, eng: 2, wep: 2, + boost: false, sysCap: pd.getSystemsCapacity(), engCap: pd.getEnginesCapacity(), wepCap: pd.getWeaponsCapacity(), @@ -101,6 +103,10 @@ export default class Pips extends TranslatedComponent { */ _keyDown(e) { switch (e.keyCode) { + case 9: // Tab == boost + e.preventDefault(); + this._toggleBoost(); + break; case 37: // Left arrow == increase SYS e.preventDefault(); 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() { - let { sys, eng, wep } = this.state; + let { sys, eng, wep, boost } = this.state; if (sys != 2 || eng != 2 || wep != 2) { sys = eng = wep = 2; 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 */ _incSys() { - let { sys, eng, wep } = this.state; + let { sys, eng, wep, boost } = this.state; const required = Math.min(1, 4 - sys); 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.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 */ _incEng() { - let { sys, eng, wep } = this.state; + let { sys, eng, wep, boost } = this.state; const required = Math.min(1, 4 - eng); 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.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 */ _incWep() { - let { sys, eng, wep } = this.state; + let { sys, eng, wep, boost } = this.state; const required = Math.min(1, 4 - wep); 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.props.onChange(sys, eng, wep); + this.props.onChange(sys, eng, wep, boost); } } /** - * Handle a click - * @param {string} which Which item was clicked + * Toggle the boost feature */ - 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(); - } + _toggleBoost() { + let { boost, sys, eng, wep } = this.state; + boost = !boost; + this.setState({ boost }); + this.props.onChange(sys, eng, wep, boost); } /** @@ -269,37 +285,37 @@ export default class Pips extends TranslatedComponent { // SYS pipsSvg['SYS'] = []; for (let i = 0; i < Math.floor(sys); i++) { - pipsSvg['SYS'].push(); + pipsSvg['SYS'].push(); } if (sys > Math.floor(sys)) { - pipsSvg['SYS'].push(); + pipsSvg['SYS'].push(); } for (let i = Math.floor(sys + 0.5); i < 4; i++) { - pipsSvg['SYS'].push(); + pipsSvg['SYS'].push(); } // ENG pipsSvg['ENG'] = []; for (let i = 0; i < Math.floor(eng); i++) { - pipsSvg['ENG'].push(); + pipsSvg['ENG'].push(); } if (eng > Math.floor(eng)) { - pipsSvg['ENG'].push(); + pipsSvg['ENG'].push(); } for (let i = Math.floor(eng + 0.5); i < 4; i++) { - pipsSvg['ENG'].push(); + pipsSvg['ENG'].push(); } // WEP pipsSvg['WEP'] = []; for (let i = 0; i < Math.floor(wep); i++) { - pipsSvg['WEP'].push(); + pipsSvg['WEP'].push(); } if (wep > Math.floor(wep)) { - pipsSvg['WEP'].push(); + pipsSvg['WEP'].push(); } for (let i = Math.floor(wep + 0.5); i < 4; i++) { - pipsSvg['WEP'].push(); + pipsSvg['WEP'].push(); } return pipsSvg; @@ -312,7 +328,7 @@ export default class Pips extends TranslatedComponent { render() { const { formats, translate, units } = this.context.language; 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 onEngClicked = this.onClick.bind(this, 'ENG'); @@ -320,40 +336,49 @@ export default class Pips extends TranslatedComponent { const onRstClicked = this.onClick.bind(this, 'RST'); return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  {pipsSvg['ENG']} 
 {pipsSvg['SYS']}{translate('ENG')}{pipsSvg['WEP']}
 {translate('SYS')}{translate('RST')}{translate('WEP')}
{translate('capacity')} ({units.MJ}){formats.f1(sysCap)}{formats.f1(engCap)}{formats.f1(wepCap)}
{translate('recharge')} ({units.MW}){formats.f1(sysRate * (sys / 4))}{formats.f1(engRate * (eng / 4))}{formats.f1(wepRate * (wep / 4))}
+
+ + + { ship.canBoost() ? + + + + + + : null } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
   
  {pipsSvg['ENG']} 
 {pipsSvg['SYS']}{translate('ENG')}{pipsSvg['WEP']}
 {translate('SYS')}{translate('RST')}{translate('WEP')}
{translate('capacity')} ({units.MJ}){formats.f1(sysCap)}{formats.f1(engCap)}{formats.f1(wepCap)}
{translate('recharge')} ({units.MW}){formats.f1(sysRate * (sys / 4))}{formats.f1(engRate * (eng / 4))}{formats.f1(wepRate * (wep / 4))}
+
); } } diff --git a/src/app/components/Shields.jsx b/src/app/components/Shields.jsx index 376f6f88..445d8e72 100644 --- a/src/app/components/Shields.jsx +++ b/src/app/components/Shields.jsx @@ -74,8 +74,8 @@ export default class Shields extends TranslatedComponent { // Remove base shield generator strength boost -= 1; boosterExplDmg = boosterExplDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterExplDmg) / 2; - boosterKinDmg = boosterKinDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterKinDmg) / 2; - boosterThermDmg = boosterThermDmg > 0.7 ? boosterExplDmg : 0.7 - (0.7 - boosterThermDmg) / 2; + boosterKinDmg = boosterKinDmg > 0.7 ? boosterKinDmg : 0.7 - (0.7 - boosterKinDmg) / 2; + boosterThermDmg = boosterThermDmg > 0.7 ? boosterThermDmg : 0.7 - (0.7 - boosterThermDmg) / 2; const generatorStrength = Calc.shieldStrength(ship.hullMass, ship.baseShieldStrength, shieldGenerator, 1); const boostersStrength = generatorStrength * boost; diff --git a/src/less/movement.less b/src/less/movement.less index bfd43bac..724fae86 100644 --- a/src/less/movement.less +++ b/src/less/movement.less @@ -10,17 +10,4 @@ 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; - } - } - } diff --git a/src/less/pips.less b/src/less/pips.less index d1b09f43..10220914 100755 --- a/src/less/pips.less +++ b/src/less/pips.less @@ -1,29 +1,44 @@ // The pips table - keep the background black -.pipstable { - background-color: @bgBlack; - color: @primary; -} - -// A clickable entity in the pips table -.pipsclickable { - cursor: pointer; -} - -// A full pip -.fullpip { - stroke: @primary; - fill: @primary; -} - -// A half pip -.halfpip { - stroke: @primary-disabled; - fill: @primary-disabled; -} - -// An empty pip -.emptypip { - stroke: @primary-bg; - fill: @primary-bg; +#pips { + table { + background-color: @bgBlack; + color: @primary; + } + + // A clickable entity in the pips table + .clickable { + cursor: pointer; + } + + button { + font-size: 1.2em; + background: @primary-bg; + color: @primary; + border: 1px solid @primary; + margin: 20px; + &.selected { + // Shown when button is selected + background: @primary; + color: @primary-bg; + } + } + + // A full pip + .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; + } }