diff --git a/ChangeLog.md b/ChangeLog.md index 581d8365..9f970043 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -2,6 +2,7 @@ * Power management panel now displays modules in descending order of power usage by default * Shot speed can no longer be modified directly. Its value is derived from the range modifier for Long Range and Focused modifications * Ensure that jump range chart updates when fuel slider is changed + * Add 'Engine profile' and 'FSD profile' charts. These show how your maximum speed/jump range will alter as you alter the mass of your build #2.2.18 * Change methodology for calculating explorer role; can result in lighter builds diff --git a/src/app/components/EngineProfile.jsx b/src/app/components/EngineProfile.jsx new file mode 100644 index 00000000..c6195246 --- /dev/null +++ b/src/app/components/EngineProfile.jsx @@ -0,0 +1,153 @@ +import React from 'react'; +import TranslatedComponent from './TranslatedComponent'; +import { Ships } from 'coriolis-data/dist'; +import ShipSelector from './ShipSelector'; +import { nameComparator } from '../utils/SlotFunctions'; +import LineChart from '../components/LineChart'; +import Slider from '../components/Slider'; +import * as ModuleUtils from '../shipyard/ModuleUtils'; +import Module from '../shipyard/Module'; +import * as Calc from '../shipyard/Calculations'; + +/** + * Engine profile for a given ship + */ +export default class EngineProfile extends TranslatedComponent { + static PropTypes = { + ship: React.PropTypes.object.isRequired, + chartWidth: React.PropTypes.number.isRequired, + code: React.PropTypes.string.isRequired + }; + + /** + * Constructor + * @param {Object} props React Component properties + * @param {Object} context React Component context + */ + constructor(props, context) { + super(props); + + const ship = this.props.ship; + + this.state = { + cargo: ship.cargoCapacity, + calcMaxSpeedFunc: this._calcMaxSpeed.bind(this, ship) + }; + } + + /** + * Update the state if our ship changes + * @param {Object} nextProps Incoming/Next properties + * @param {Object} nextContext Incoming/Next conext + * @return {boolean} Returns true if the component should be rerendered + */ + componentWillReceiveProps(nextProps, nextContext) { + if (nextProps.code != this.props.code) { + this.setState({ cargo: nextProps.ship.cargoCapacity, calcMaxSpeedFunc: this._calcMaxSpeed.bind(this, nextProps.ship) }); + } + return true; + } + + /** + * Calculate the maximum speed for this ship across its applicable mass + * @param {Object} ship The ship + * @param {Object} mass The mass at which to calculate the top speed + * @return {number} The maximum speed + */ + _calcMaxSpeed(ship, mass) { + // Obtain the thrusters for this ship + const thrusters = ship.standard[1].m; + + // Obtain the top speed + return Calc.speed(mass, ship.speed, thrusters, ship.engpip)[4]; + } + + /** + * Update cargo level + * @param {number} cargoLevel Cargo level 0 - 1 + */ + _cargoChange(cargoLevel) { + let ship = this.props.ship; + let cargo = Math.round(ship.cargoCapacity * cargoLevel); + this.setState({ + cargo + }); + } + + /** + * Render engine profile + * @return {React.Component} contents + */ + render() { + const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context; + const { formats, translate, units } = language; + const { ship } = this.props; + const { cargo } = this.state; + + // Calculate bounds for our line chart + const thrusters = ship.standard[1].m; + const minMass = thrusters.getMinMass(); + const maxMass = thrusters.getMaxMass(); + const minSpeed = Calc.speed(maxMass, ship.speed, thrusters, ship.engpip)[4]; + const maxSpeed = Calc.speed(minMass, ship.speed, thrusters, ship.engpip)[4]; + let mass = ship.unladenMass + ship.fuelCapacity + cargo; + let mark; + if (mass < minMass) { + mark = minMass; + } else if (mass > maxMass) { + mark = maxMass; + } else { + mark = mass; + } + + const cargoPercent = cargo / ship.cargoCapacity; + + const code = ship.toString() + '.' + ship.getModificationsString() + '.' + ship.getPowerEnabledString(); + + // This graph has a precipitous fall-off so we use lots of points to make it look a little smoother + return ( + +

{translate('engine profile')}

+ + {ship.cargoCapacity ? + +

{translate('cargo carried')}

+ + + + + + + +
+ + + {formats.int(cargo)}{units.T} +
+
: '' } +
+ ); + } +} diff --git a/src/app/components/FSDProfile.jsx b/src/app/components/FSDProfile.jsx new file mode 100644 index 00000000..07071bfb --- /dev/null +++ b/src/app/components/FSDProfile.jsx @@ -0,0 +1,154 @@ +import React from 'react'; +import TranslatedComponent from './TranslatedComponent'; +import { Ships } from 'coriolis-data/dist'; +import ShipSelector from './ShipSelector'; +import { nameComparator } from '../utils/SlotFunctions'; +import LineChart from '../components/LineChart'; +import Slider from '../components/Slider'; +import * as ModuleUtils from '../shipyard/ModuleUtils'; +import Module from '../shipyard/Module'; +import * as Calc from '../shipyard/Calculations'; + +/** + * FSD profile for a given ship + */ +export default class FSDProfile extends TranslatedComponent { + static PropTypes = { + ship: React.PropTypes.object.isRequired, + chartWidth: React.PropTypes.number.isRequired, + code: React.PropTypes.string.isRequired + }; + + /** + * Constructor + * @param {Object} props React Component properties + * @param {Object} context React Component context + */ + constructor(props, context) { + super(props); + + const ship = this.props.ship; + + this.state = { + cargo: ship.cargoCapacity, + calcMaxRangeFunc: this._calcMaxRange.bind(this, ship) + }; + } + + /** + * Update the state if our ship changes + * @param {Object} nextProps Incoming/Next properties + * @param {Object} nextContext Incoming/Next conext + * @return {boolean} Returns true if the component should be rerendered + */ + componentWillReceiveProps(nextProps, nextContext) { + if (nextProps.code != this.props.code) { + this.setState({ cargo: nextProps.ship.cargoCapacity, calcMaxRangeFunc: this._calcMaxRange.bind(this, nextProps.ship) }); + } + return true; + } + + /** + * Calculate the maximum range for this ship across its applicable mass + * @param {Object} ship The ship + * @param {Object} mass The mass at which to calculate the maximum range + * @return {number} The maximum range + */ + _calcMaxRange(ship, mass) { + // Obtain the FSD for this ship + const fsd = ship.standard[2].m; + + // Obtain the maximum range + return Calc.jumpRange(mass, fsd, fsd.getMaxFuelPerJump()); + } + + /** + * Update cargo level + * @param {number} cargoLevel Cargo level 0 - 1 + */ + _cargoChange(cargoLevel) { + let ship = this.props.ship; + let cargo = Math.round(ship.cargoCapacity * cargoLevel); + this.setState({ + cargo + }); + } + + /** + * Render engine profile + * @return {React.Component} contents + */ + render() { + const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context; + const { formats, translate, units } = language; + const { ship } = this.props; + const { cargo } = this.state; + + + // Calculate bounds for our line chart - use thruster info for X + const thrusters = ship.standard[1].m; + const fsd = ship.standard[2].m; + const minMass = thrusters.getMinMass(); + const maxMass = thrusters.getMaxMass(); + const minRange = 0; + const maxRange = Calc.jumpRange(minMass + fsd.getMaxFuelPerJump(), fsd, fsd.getMaxFuelPerJump()); + let mass = ship.unladenMass + fsd.getMaxFuelPerJump() + cargo; + let mark; + if (mass < minMass) { + mark = minMass; + } else if (mass > maxMass) { + mark = maxMass; + } else { + mark = mass; + } + + const cargoPercent = cargo / ship.cargoCapacity; + + const code = ship.name + ship.toString() + '.' + ship.getModificationsString() + '.' + ship.getPowerEnabledString(); + + return ( + +

{translate('fsd profile')}

+ + {ship.cargoCapacity ? + +

{translate('cargo carried')}

+ + + + + + + +
+ + + {formats.int(cargo)}{units.T} +
+
: '' } +
+ ); + } +} diff --git a/src/app/components/JumpRange.jsx b/src/app/components/JumpRange.jsx new file mode 100644 index 00000000..9475d9b2 --- /dev/null +++ b/src/app/components/JumpRange.jsx @@ -0,0 +1,129 @@ +import React from 'react'; +import TranslatedComponent from './TranslatedComponent'; +import { Ships } from 'coriolis-data/dist'; +import ShipSelector from './ShipSelector'; +import { nameComparator } from '../utils/SlotFunctions'; +import LineChart from '../components/LineChart'; +import Slider from '../components/Slider'; +import * as ModuleUtils from '../shipyard/ModuleUtils'; +import Module from '../shipyard/Module'; +import * as Calc from '../shipyard/Calculations'; + +/** + * Jump range for a given ship + */ +export default class JumpRange extends TranslatedComponent { + static PropTypes = { + ship: React.PropTypes.object.isRequired, + chartWidth: React.PropTypes.number.isRequired, + code: React.PropTypes.string.isRequired + }; + + /** + * Constructor + * @param {Object} props React Component properties + * @param {Object} context React Component context + */ + constructor(props, context) { + super(props); + + const ship = this.props.ship; + + this.state = { + fuelLevel: 1, + calcJumpRangeFunc: this._calcJumpRange.bind(this, ship) + }; + } + + /** + * Update the state if our ship changes + * @param {Object} nextProps Incoming/Next properties + * @param {Object} nextContext Incoming/Next conext + * @return {boolean} Returns true if the component should be rerendered + */ + componentWillReceiveProps(nextProps, nextContext) { + if (nextProps.code != this.props.code) { + this.setState({ fuelLevel: 1, + calcJumpRangeFunc: this._calcJumpRange.bind(this, nextProps.ship) }); + } + return true; + } + + /** + * Calculate the jump range this ship at a given cargo + * @param {Object} ship The ship + * @param {Object} cargo The cargo + * @return {number} The jump range + */ + _calcJumpRange(ship, cargo) { + // Obtain the FSD for this ship + const fsd = ship.standard[2].m; + + const fuel = this.state.fuelLevel * ship.fuelCapacity; + + // Obtain the jump range + return Calc.jumpRange(ship.unladenMass + fuel + cargo, fsd, fuel); + } + + /** + * Update fuel level + * @param {number} fuelLevel Fuel level 0 - 1 + */ + _fuelChange(fuelLevel) { + this.setState({ + fuelLevel, + }); + } + + /** + * Render engine profile + * @return {React.Component} contents + */ + render() { + const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context; + const { formats, translate, units } = language; + const { ship } = this.props; + const { fuelLevel } = this.state; + + const code = ship.toString() + '.' + ship.getModificationsString() + '.' + fuelLevel; + + return ( + +

{translate('jump range')}

+ +

{translate('fuel carried')}

+ + + + + + + +
+ + + {formats.f2(fuelLevel * ship.fuelCapacity)}{units.T} {formats.pct1(fuelLevel)} +
+
+ ); + } +} diff --git a/src/app/components/LineChart.jsx b/src/app/components/LineChart.jsx index 7e6b2603..41021ff2 100644 --- a/src/app/components/LineChart.jsx +++ b/src/app/components/LineChart.jsx @@ -24,6 +24,7 @@ export default class LineChart extends TranslatedComponent { xMin: React.PropTypes.number, xMax: React.PropTypes.number.isRequired, xUnit: React.PropTypes.string.isRequired, + xMark: React.PropTypes.number, yLabel: React.PropTypes.string.isRequired, yMin: React.PropTypes.number, yMax: React.PropTypes.number.isRequired, @@ -120,7 +121,7 @@ export default class LineChart extends TranslatedComponent { this.state.xScale.range([0, innerWidth]).domain([xMin, xMax || 1]).clamp(true); this.state.xAxisScale.range([0, innerWidth]).domain([xMin, xMax]).clamp(true); - this.state.yScale.range([innerHeight, 0]).domain([yMin, yMax * 1.1]); // 10% higher than maximum value for tooltip visibility + this.state.yScale.range([innerHeight, 0]).domain([yMin, yMax + (yMax - yMin) * 0.1]); // 10% higher than maximum value for tooltip visibility this.setState({ innerWidth, outerHeight, innerHeight }); } @@ -186,7 +187,7 @@ export default class LineChart extends TranslatedComponent { markerElems.push(); } - const tipHeight = 2 + (1.2 * (seriesLines ? seriesLines.length : 0.8)) + const tipHeight = 2 + (1.2 * (seriesLines ? seriesLines.length : 0.8)); this.setState({ markerElems, detailElems, seriesLines, seriesData, tipHeight }); } @@ -228,13 +229,17 @@ export default class LineChart extends TranslatedComponent { return null; } - let { xLabel, yLabel, xUnit, yUnit, colors } = this.props; + let { xMin, xMax, xLabel, yLabel, xUnit, yUnit, xMark, colors } = this.props; let { innerWidth, outerHeight, innerHeight, tipHeight, detailElems, markerElems, seriesData, seriesLines } = this.state; let line = this.line; let lines = seriesLines.map((line, i) => ).reverse(); + const markX = xMark ? innerWidth * (xMark - xMin) / (xMax - xMin) : 0; + const xmark = xMark ? : ''; + return + {xmark} {lines} d3.select(elem).call(this.xAxis)} transform={`translate(0,${innerHeight})`}> diff --git a/src/app/i18n/en.js b/src/app/i18n/en.js index 5a96d5e4..c4dc2fe0 100644 --- a/src/app/i18n/en.js +++ b/src/app/i18n/en.js @@ -281,6 +281,12 @@ The retrofit costs provides information about the costs of changing the base bui The reload costs provides information about the costs of reloading your current build.

+

Engine Profile

+The engine profile panel provides information about the capabilities of your current thrusters. The graph shows you how the maximum speed (with 4 pips to engines) alters with the overall mass of your build. The slider can be altered to change the amount of cargo you have on-board. Your engine profile can be altered by obtaining different thrusters or engineering your existing thrusters.

+ +

FSD Profile

+The FSD profile panel provides information about the capabilities of your current frame shift drive. The graph shows you how the maximum jump range alters with the overall mass of your build. The slider can be altered to change the amount of cargo you have on-board. Your FSD profile can be altered by obtaining a different FSD or engineering your existing FSD.

+

Jump Range

The jump range panel provides information about the build' jump range. The graph shows how the build's jump range changes with the amount of cargo on-board. The slider can be altered to change the amount of fuel you have on-board.

diff --git a/src/app/pages/OutfittingPage.jsx b/src/app/pages/OutfittingPage.jsx index f7ea7c64..0e50fc63 100644 --- a/src/app/pages/OutfittingPage.jsx +++ b/src/app/pages/OutfittingPage.jsx @@ -8,7 +8,7 @@ import Persist from '../stores/Persist'; import Ship from '../shipyard/Ship'; import { toDetailedBuild } from '../shipyard/Serializer'; import { outfitURL } from '../utils/UrlGenerators'; -import { FloppyDisk, Bin, Switch, Download, Reload, Fuel, LinkIcon, ShoppingIcon } from '../components/SvgIcons'; +import { FloppyDisk, Bin, Switch, Download, Reload, LinkIcon, ShoppingIcon } from '../components/SvgIcons'; import ShipSummaryTable from '../components/ShipSummaryTable'; import StandardSlotSection from '../components/StandardSlotSection'; import HardpointsSlotSection from '../components/HardpointsSlotSection'; @@ -17,18 +17,17 @@ import UtilitySlotSection from '../components/UtilitySlotSection'; import OffenceSummary from '../components/OffenceSummary'; import DefenceSummary from '../components/DefenceSummary'; import MovementSummary from '../components/MovementSummary'; +import EngineProfile from '../components/EngineProfile'; +import FSDProfile from '../components/FSDProfile'; +import JumpRange from '../components/JumpRange'; import DamageDealt from '../components/DamageDealt'; import DamageReceived from '../components/DamageReceived'; -import LineChart from '../components/LineChart'; import PowerManagement from '../components/PowerManagement'; import CostSection from '../components/CostSection'; import ModalExport from '../components/ModalExport'; import ModalPermalink from '../components/ModalPermalink'; import Slider from '../components/Slider'; -const SPEED_SERIES = ['boost', '4 Pips', '2 Pips', '0 Pips']; -const SPEED_COLORS = ['#0088d2', '#ff8c0d', '#D26D00', '#c06400']; - /** * Document Title Generator * @param {String} shipName Ship Name @@ -81,7 +80,6 @@ export default class OutfittingPage extends Page { ship.buildWith(data.defaults); // Populate with default components } - let fuelCapacity = ship.fuelCapacity; this._getTitle = getTitle.bind(this, data.properties.name); return { @@ -93,12 +91,7 @@ export default class OutfittingPage extends Page { shipId, ship, code, - savedCode, - fuelCapacity, - fuelLevel: 1, - jumpRangeChartFunc: ship.calcJumpRangeWith.bind(ship, fuelCapacity), - fastestRangeChartFunc: ship.calcFastestRangeWith.bind(ship, fuelCapacity), - speedChartFunc: ship.calcSpeedsWith.bind(ship, fuelCapacity) + savedCode }; } @@ -193,13 +186,9 @@ export default class OutfittingPage extends Page { * Trigger render on ship model change */ _shipUpdated() { - let { shipId, buildName, ship, fuelCapacity } = this.state; + let { shipId, buildName, ship } = this.state; let code = ship.toString(); - if (fuelCapacity != ship.fuelCapacity) { - this._fuelChange(this.state.fuelLevel); - } - this._updateRoute(shipId, buildName, code); this.setState({ code }); } @@ -214,23 +203,6 @@ export default class OutfittingPage extends Page { Router.replace(outfitURL(shipId, code, buildName)); } - /** - * Update current fuel level - * @param {number} fuelLevel Fuel leval 0 - 1 - */ - _fuelChange(fuelLevel) { - let ship = this.state.ship; - let fuelCapacity = ship.fuelCapacity; - let fuel = fuelCapacity * fuelLevel; - this.setState({ - fuelLevel, - fuelCapacity, - jumpRangeChartFunc: ship.calcJumpRangeWith.bind(ship, fuel), - fastestRangeChartFunc: ship.calcFastestRangeWith.bind(ship, fuel), - speedChartFunc: ship.calcSpeedsWith.bind(ship, fuel) - }); - } - /** * Update dimenions from rendered DOM */ @@ -240,7 +212,7 @@ export default class OutfittingPage extends Page { if (elem) { this.setState({ thirdChartWidth: findDOMNode(this.refs.chartThird).offsetWidth, - halfChartWidth: findDOMNode(this.refs.chartHalf).offsetWidth + halfChartWidth: findDOMNode(this.refs.chartThird).offsetWidth * 3 / 2 }); } } @@ -323,7 +295,7 @@ export default class OutfittingPage extends Page { let state = this.state, { language, termtip, tooltip, sizeRatio, onWindowResize } = this.context, { translate, units, formats } = language, - { ship, code, savedCode, buildName, newBuildName, halfChartWidth, thirdChartWidth, fuelCapacity, fuelLevel } = state, + { ship, code, savedCode, buildName, newBuildName, halfChartWidth, thirdChartWidth } = state, hide = tooltip.bind(null, null), menu = this.props.currentMenu, shipUpdated = this._shipUpdated, @@ -333,6 +305,9 @@ export default class OutfittingPage extends Page { hStr = ship.getHardpointsString() + '.' + ship.getModificationsString(), iStr = ship.getInternalString() + '.' + ship.getModificationsString(); + // Code can be blank for a default loadout. Prefix it with the ship name to ensure that changes in default ships is picked up + code = ship.name + (code || ''); + return (
@@ -366,13 +341,13 @@ export default class OutfittingPage extends Page {
- - + + -
+
@@ -382,48 +357,19 @@ export default class OutfittingPage extends Page {
- - + + -
-
+
+ +
-
-

{translate('jump range')}

- - - - - - - - - -
- - - - - {formats.f2(fuelLevel * fuelCapacity)}{units.T} {formats.pct1(fuelLevel)} -
+
+ +
+ +
+
@@ -438,56 +384,3 @@ export default class OutfittingPage extends Page { ); } } -//
-//

{translate('jump range')}

-// -//
-//
-//

{translate('speed')}

-// -//
-//
-// -// -// -// -// -// -// -// -//
-// -// -// -// -// {formats.f2(fuelLevel * fuelCapacity)}{units.T} {formats.pct1(fuelLevel)} -//
-//