From a9fdf73d8604fa7da23a0dd3cad7501d31c29aab Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Sat, 25 Feb 2017 13:15:24 +0000 Subject: [PATCH 1/5] Update to webpack 2 --- package.json | 10 ++++----- src/{index.html => index.ejs} | 20 ++++++++--------- webpack.config.dev.js | 32 +++++++++++++++------------ webpack.config.prod.js | 41 ++++++++++++++++++++--------------- 4 files changed, 56 insertions(+), 47 deletions(-) rename src/{index.html => index.ejs} (64%) diff --git a/package.json b/package.json index 75a1be19..e8ae4094 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ ] }, "devDependencies": { - "appcache-webpack-plugin": "^1.2.1", + "appcache-webpack-plugin": "^1.3.0", "babel-core": "*", "babel-eslint": "*", "babel-jest": "*", @@ -68,9 +68,9 @@ "eslint-plugin-react": "^4.0.0", "expose-loader": "^0.7.1", "express": "^4.13.3", - "extract-text-webpack-plugin": "^0.9.1", + "extract-text-webpack-plugin": "2.0.0", "file-loader": "^0.8.4", - "html-webpack-plugin": "^1.7.0", + "html-webpack-plugin": "^2.28.0", "jest-cli": "^16.0.1", "jsen": "^0.6.0", "json-loader": "^0.5.3", @@ -83,8 +83,8 @@ "rollup-plugin-node-resolve": "2", "style-loader": "^0.13.0", "url-loader": "^0.5.6", - "webpack": "^1.9.6", - "webpack-dev-server": "^1.14.0" + "webpack": "^2.2.1", + "webpack-dev-server": "^2.4.1" }, "dependencies": { "babel-polyfill": "*", diff --git a/src/index.html b/src/index.ejs similarity index 64% rename from src/index.html rename to src/index.ejs index d6742abf..27897d2a 100644 --- a/src/index.html +++ b/src/index.ejs @@ -1,9 +1,9 @@ - + > Coriolis EDCD Edition - + @@ -24,22 +24,22 @@ - {% if (o.htmlWebpackPlugin.options.uaTracking) { %} + <% if (htmlWebpackPlugin.options.uaTracking) { %> - {% } %} + <% } %>
- - + + diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 0c2f06bb..27789b0e 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -27,7 +27,7 @@ module.exports = { }, resolve: { // When requiring, you don't need to add these extensions - extensions: ['', '.js', '.jsx', '.json', '.less'] + extensions: ['.js', '.jsx', '.json', '.less'] }, output: { path: path.join(__dirname, 'build'), @@ -36,30 +36,34 @@ module.exports = { }, plugins: [ new CopyDirPlugin(path.join(__dirname, 'src/.htaccess'), ''), - new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'), + new webpack.optimize.CommonsChunkPlugin({ + name: 'lib', + filename: 'lib.js' + }), new HtmlWebpackPlugin({ inject: false, - template: path.join(__dirname, "src/index.html"), + template: path.join(__dirname, "src/index.ejs"), version: pkgJson.version, gapiKey: process.env.CORIOLIS_GAPI_KEY || '', }), - new ExtractTextPlugin('app.css', { + new ExtractTextPlugin({ + filename: 'app.css', + disable: false, allChunks: true }), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { - loaders: [ - { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader') }, - { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader','css-loader!less-loader') }, - { test: /\.(js|jsx)$/, loaders: [ 'babel' ], include: path.join(__dirname, 'src') }, - { test: /\.json$/, loader: 'json-loader' }, - { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, - { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, - { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, - { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, - { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' } + rules: [ + { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) }, + { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader'}) }, + { test: /\.(js|jsx)$/, loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') }, + { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, + { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, + { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' }, + { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' }, + { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' } ] } }; diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 8c8a66ba..59704c3e 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -29,7 +29,7 @@ module.exports = { lib: ['babel-polyfill', 'd3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string'] }, resolve: { - extensions: ['', '.js', '.jsx', '.json', '.less'], + extensions: ['.js', '.jsx', '.json', '.less'], alias: { 'd3': d3Path, 'react': reactPath, @@ -45,12 +45,16 @@ module.exports = { }, plugins: [ new webpack.optimize.UglifyJsPlugin({ + sourceMap: true, mangle: { except: [] }, 'screw-ie8': true }), - new webpack.optimize.CommonsChunkPlugin('lib', 'lib.[chunkhash:6].js'), + new webpack.optimize.CommonsChunkPlugin({ + name: 'lib', + filename: 'lib.[chunkhash:6].js' + }), new HtmlWebpackPlugin({ inject: false, appCache: 'coriolis.appcache', @@ -64,12 +68,14 @@ module.exports = { removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true }, - template: path.join(__dirname, "src/index.html"), + template: path.join(__dirname, "src/index.ejs"), uaTracking: process.env.CORIOLIS_UA_TRACKING || '', gapiKey: process.env.CORIOLIS_GAPI_KEY || '', version: pkgJson.version }), - new ExtractTextPlugin('[contenthash:6].css', { + new ExtractTextPlugin({ + filename: '[contenthash:6].css', + disable: false, allChunks: true }), new CopyDirPlugin(path.join(__dirname, 'src/schemas'), 'schemas'), @@ -84,22 +90,21 @@ module.exports = { }) ], module: { - noParse: [d3Path, reactPath, lzStringPath], - loaders: [ + noParse: /.*\.min\.js$/, + rules: [ // Expose non-parsed globally scoped libs - { test: reactPath, loader: "expose?React" }, - { test: d3Path, loader: "expose?d3" }, - { test: lzStringPath, loader: "expose?LZString" }, + { test: reactPath, loader: "expose-loader?React" }, + { test: d3Path, loader: "expose-loader?d3" }, + { test: lzStringPath, loader: "expose-loader?LZString" }, - { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader') }, - { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader','css-loader!less-loader') }, - { test: /\.(js|jsx)$/, loaders: [ 'babel' ], include: path.join(__dirname, 'src') }, - { test: /\.json$/, loader: 'json-loader' }, - { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, - { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, - { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, - { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, - { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' } + { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) }, + { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader',use: 'css-loader!less-loader'}) }, + { test: /\.(js|jsx)$/, loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') }, + { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, + { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, + { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' }, + { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' }, + { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' } ] } }; From 4bf30c0cd52497bf446bb77388b1e576db787c8f Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Sat, 25 Feb 2017 14:45:47 +0000 Subject: [PATCH 2/5] Updates --- webpack.config.prod.js | 43 ++++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 59704c3e..00c2f03f 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -6,11 +6,11 @@ var HtmlWebpackPlugin = require("html-webpack-plugin"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var AppCachePlugin = require('appcache-webpack-plugin'); -var node_modules_dir = path.resolve(__dirname, 'node_modules'); -var d3Path = path.resolve(__dirname, 'd3.min.js'); -var reactPath = path.resolve(node_modules_dir, 'react/dist/react.min.js'); -var reactDomPath = path.resolve(node_modules_dir, 'react-dom/dist/react-dom.min.js'); -var lzStringPath = path.resolve(node_modules_dir, 'lz-string/libs/lz-string.min.js'); +//var node_modules_dir = path.resolve(__dirname, 'node_modules'); +//var d3Path = path.resolve(__dirname, 'd3.min.js'); +//var reactPath = path.resolve(node_modules_dir, 'react/dist/react.min.js'); +//var reactDomPath = path.resolve(node_modules_dir, 'react-dom/dist/react-dom.min.js'); +//var lzStringPath = path.resolve(node_modules_dir, 'lz-string/libs/lz-string.min.js'); function CopyDirPlugin(source, destination) { this.source = source; @@ -26,16 +26,16 @@ CopyDirPlugin.prototype.apply = function(compiler) { module.exports = { entry: { app: ['babel-polyfill', path.resolve(__dirname, 'src/app/index')], - lib: ['babel-polyfill', 'd3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string'] + lib: ['d3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string'] }, resolve: { extensions: ['.js', '.jsx', '.json', '.less'], - alias: { - 'd3': d3Path, - 'react': reactPath, - 'react-dom': reactDomPath, - 'lz-string': lzStringPath - }, +// alias: { +// 'd3': d3Path, +// 'react': reactPath, +// 'react-dom': reactDomPath, +// 'lz-string': lzStringPath +// }, }, output: { path: path.join(__dirname, 'build'), @@ -51,10 +51,10 @@ module.exports = { }, 'screw-ie8': true }), - new webpack.optimize.CommonsChunkPlugin({ - name: 'lib', - filename: 'lib.[chunkhash:6].js' - }), + //new webpack.optimize.CommonsChunkPlugin({ + // name: 'lib', + // filename: 'lib.[chunkhash:6].js' + //}), new HtmlWebpackPlugin({ inject: false, appCache: 'coriolis.appcache', @@ -90,12 +90,15 @@ module.exports = { }) ], module: { - noParse: /.*\.min\.js$/, + //noParse: /.*\.min\.js$/, rules: [ // Expose non-parsed globally scoped libs - { test: reactPath, loader: "expose-loader?React" }, - { test: d3Path, loader: "expose-loader?d3" }, - { test: lzStringPath, loader: "expose-loader?LZString" }, + //{ test: reactPath, loader: "expose-loader?React" }, + //{ test: d3Path, loader: "expose-loader?d3" }, + //{ test: lzStringPath, loader: "expose-loader?LZString" }, + //{ test: reactPath, use: [ { loader: 'expose-loader', options: 'React' } ] }, + //{ test: d3Path, use: [ { loader: 'expose-loader', options: 'd3' } ] }, + //{ test: lzStringPath, use: [ { loader: 'expose-loader', options: 'LZString' } ] }, { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) }, { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader',use: 'css-loader!less-loader'}) }, From af2e0cbed31d3fb2678cd1b648303ccd46198073 Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Sat, 25 Feb 2017 22:18:09 +0000 Subject: [PATCH 3/5] Fixes --- ChangeLog.md | 1 + package.json | 4 ++-- src/app/components/DamageDealt.jsx | 2 +- src/app/components/LineChart.jsx | 5 +++-- src/app/pages/OutfittingPage.jsx | 1 + webpack.config.dev.js | 2 +- webpack.config.prod.js | 13 ------------- 7 files changed, 9 insertions(+), 19 deletions(-) diff --git a/ChangeLog.md b/ChangeLog.md index 2bc78e4b..581d8365 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,6 +1,7 @@ #2.2.19 * 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 #2.2.18 * Change methodology for calculating explorer role; can result in lighter builds diff --git a/package.json b/package.json index e8ae4094..abc271b8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coriolis_shipyard", - "version": "2.2.18", + "version": "2.2.19b", "repository": { "type": "git", "url": "https://github.com/EDCD/coriolis" @@ -19,7 +19,7 @@ "test": "jest", "prod-serve": "nginx -p $(pwd) -c nginx.conf", "prod-stop": "kill -QUIT $(cat nginx.pid)", - "build": "npm run clean && NODE_ENV=production webpack -d -p --config webpack.config.prod.js", + "build": "npm run clean && NODE_ENV=production webpack -p --config webpack.config.prod.js", "rsync": "rsync -ae \"ssh -i $CORIOLIS_PEM\" --delete build/ $CORIOLIS_USER@$CORIOLIS_HOST:~/wwws", "deploy": "npm run lint && npm test && npm run build && npm run rsync" }, diff --git a/src/app/components/DamageDealt.jsx b/src/app/components/DamageDealt.jsx index 2e048c97..bb4bd484 100644 --- a/src/app/components/DamageDealt.jsx +++ b/src/app/components/DamageDealt.jsx @@ -494,7 +494,7 @@ export default class DamageDealt extends TranslatedComponent { const sortOrder = this._sortOrder; const onCollapseExpand = this._onCollapseExpand; - const code = ship.getHardpointsString() + '.' + ship.getModificationsString() + '.' + against.properties.name; + const code = ship.getHardpointsString() + '.' + ship.getModificationsString() + '.' + ship.getPowerEnabledString() + '.' + against.properties.name; return ( diff --git a/src/app/components/LineChart.jsx b/src/app/components/LineChart.jsx index 484d9491..7e6b2603 100644 --- a/src/app/components/LineChart.jsx +++ b/src/app/components/LineChart.jsx @@ -176,7 +176,6 @@ export default class LineChart extends TranslatedComponent { seriesData = [[0, yVal], [1, yVal]]; } - const markerElems = []; const detailElems = []; const seriesLines = []; @@ -187,7 +186,9 @@ export default class LineChart extends TranslatedComponent { markerElems.push(); } - this.setState({ markerElems, detailElems, seriesLines, seriesData }); + const tipHeight = 2 + (1.2 * (seriesLines ? seriesLines.length : 0.8)) + + this.setState({ markerElems, detailElems, seriesLines, seriesData, tipHeight }); } /** diff --git a/src/app/pages/OutfittingPage.jsx b/src/app/pages/OutfittingPage.jsx index 6819a8a7..f7ea7c64 100644 --- a/src/app/pages/OutfittingPage.jsx +++ b/src/app/pages/OutfittingPage.jsx @@ -399,6 +399,7 @@ export default class OutfittingPage extends Page { yLabel={translate('jump range')} xLabel={translate('cargo')} func={state.jumpRangeChartFunc} + code={state.fuelLevel} /> diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 27789b0e..0613aa29 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -52,7 +52,7 @@ module.exports = { allChunks: true }), new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() + new webpack.NoEmitOnErrorsPlugin() ], module: { rules: [ diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 00c2f03f..82eefb65 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -45,10 +45,6 @@ module.exports = { }, plugins: [ new webpack.optimize.UglifyJsPlugin({ - sourceMap: true, - mangle: { - except: [] - }, 'screw-ie8': true }), //new webpack.optimize.CommonsChunkPlugin({ @@ -90,16 +86,7 @@ module.exports = { }) ], module: { - //noParse: /.*\.min\.js$/, rules: [ - // Expose non-parsed globally scoped libs - //{ test: reactPath, loader: "expose-loader?React" }, - //{ test: d3Path, loader: "expose-loader?d3" }, - //{ test: lzStringPath, loader: "expose-loader?LZString" }, - //{ test: reactPath, use: [ { loader: 'expose-loader', options: 'React' } ] }, - //{ test: d3Path, use: [ { loader: 'expose-loader', options: 'd3' } ] }, - //{ test: lzStringPath, use: [ { loader: 'expose-loader', options: 'LZString' } ] }, - { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) }, { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader',use: 'css-loader!less-loader'}) }, { test: /\.(js|jsx)$/, loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') }, From bec3ae3f89f3eaa1952020be514c9b79e87469c2 Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Sun, 26 Feb 2017 09:14:10 +0000 Subject: [PATCH 4/5] Tidy ups --- src/migrate.html | 79 ------------------------------------------ webpack.config.prod.js | 15 +------- 2 files changed, 1 insertion(+), 93 deletions(-) delete mode 100644 src/migrate.html diff --git a/src/migrate.html b/src/migrate.html deleted file mode 100644 index 5fb06c22..00000000 --- a/src/migrate.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - Coriolis: Migrate to HTTPS - - - - - - - diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 82eefb65..bbb4f065 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -6,12 +6,6 @@ var HtmlWebpackPlugin = require("html-webpack-plugin"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var AppCachePlugin = require('appcache-webpack-plugin'); -//var node_modules_dir = path.resolve(__dirname, 'node_modules'); -//var d3Path = path.resolve(__dirname, 'd3.min.js'); -//var reactPath = path.resolve(node_modules_dir, 'react/dist/react.min.js'); -//var reactDomPath = path.resolve(node_modules_dir, 'react-dom/dist/react-dom.min.js'); -//var lzStringPath = path.resolve(node_modules_dir, 'lz-string/libs/lz-string.min.js'); - function CopyDirPlugin(source, destination) { this.source = source; this.destination = destination; @@ -29,13 +23,7 @@ module.exports = { lib: ['d3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string'] }, resolve: { - extensions: ['.js', '.jsx', '.json', '.less'], -// alias: { -// 'd3': d3Path, -// 'react': reactPath, -// 'react-dom': reactDomPath, -// 'lz-string': lzStringPath -// }, + extensions: ['.js', '.jsx', '.json', '.less'] }, output: { path: path.join(__dirname, 'build'), @@ -76,7 +64,6 @@ module.exports = { }), new CopyDirPlugin(path.join(__dirname, 'src/schemas'), 'schemas'), new CopyDirPlugin(path.join(__dirname, 'src/images/logo/*'), ''), - new CopyDirPlugin(path.join(__dirname, 'src/migrate.html'), ''), new CopyDirPlugin(path.join(__dirname, 'src/.htaccess'), ''), new AppCachePlugin({ network: ['*'], From 87146b2cf3c8dc5e49164d2db18ea16c6be8e784 Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Sun, 26 Feb 2017 21:06:07 +0000 Subject: [PATCH 5/5] Add engine and FSD profiles --- ChangeLog.md | 1 + src/app/components/EngineProfile.jsx | 153 ++++++++++++++++++++++++++ src/app/components/FSDProfile.jsx | 154 ++++++++++++++++++++++++++ src/app/components/JumpRange.jsx | 129 ++++++++++++++++++++++ src/app/components/LineChart.jsx | 11 +- src/app/i18n/en.js | 6 + src/app/pages/OutfittingPage.jsx | 157 +++++---------------------- 7 files changed, 476 insertions(+), 135 deletions(-) create mode 100644 src/app/components/EngineProfile.jsx create mode 100644 src/app/components/FSDProfile.jsx create mode 100644 src/app/components/JumpRange.jsx 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)} -//
-//