e.stopPropagation() }>
diff --git a/src/app/pages/OutfittingPage.jsx b/src/app/pages/OutfittingPage.jsx
index 35c43532..7ad4b5d4 100644
--- a/src/app/pages/OutfittingPage.jsx
+++ b/src/app/pages/OutfittingPage.jsx
@@ -17,12 +17,13 @@ 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 BattleCentre from '../components/BattleCentre';
-import PowerManagement from '../components/PowerManagement';
-import CostSection from '../components/CostSection';
+import Pips from '../components/Pips';
+import Boost from '../components/Boost';
+import Fuel from '../components/Fuel';
+import Cargo from '../components/Cargo';
+import ShipPicker from '../components/ShipPicker';
+import EngagementRange from '../components/EngagementRange';
+import OutfittingSubpages from '../components/OutfittingSubpages';
import ModalExport from '../components/ModalExport';
import ModalPermalink from '../components/ModalPermalink';
@@ -51,6 +52,12 @@ export default class OutfittingPage extends Page {
this.state = this._initState(context);
this._keyDown = this._keyDown.bind(this);
this._exportBuild = this._exportBuild.bind(this);
+ this._pipsUpdated = this._pipsUpdated.bind(this);
+ this._boostUpdated = this._boostUpdated.bind(this);
+ this._cargoUpdated = this._cargoUpdated.bind(this);
+ this._fuelUpdated = this._fuelUpdated.bind(this);
+ this._opponentUpdated = this._opponentUpdated.bind(this);
+ this._engagementRangeUpdated = this._engagementRangeUpdated.bind(this);
}
/**
@@ -90,7 +97,15 @@ export default class OutfittingPage extends Page {
shipId,
ship,
code,
- savedCode
+ savedCode,
+ sys: 2,
+ eng: 2,
+ wep: 2,
+ fuel: ship.fuelCapacity,
+ cargo: 0,
+ boost: false,
+ engagementRange: 1500,
+ opponent: new Ship('anaconda', Ships['anaconda'].properties, Ships['anaconda'].slots).buildWith(Ships['anaconda'].defaults)
};
}
@@ -112,6 +127,57 @@ export default class OutfittingPage extends Page {
this.setState(stateChanges);
}
+ /**
+ * Triggered when pips have been updated
+ * @param {number} sys SYS pips
+ * @param {number} eng ENG pips
+ * @param {number} wep WEP pips
+ */
+ _pipsUpdated(sys, eng, wep) {
+ this.setState({ sys, eng, wep });
+ }
+
+ /**
+ * Triggered when boost has been updated
+ * @param {boolean} boost true if boosting
+ */
+ _boostUpdated(boost) {
+ this.setState({ boost });
+ }
+
+ /**
+ * Triggered when fuel has been updated
+ * @param {number} fuel the amount of fuel, in T
+ */
+ _fuelUpdated(fuel) {
+ this.setState({ fuel });
+ }
+
+ /**
+ * Triggered when cargo has been updated
+ * @param {number} cargo the amount of cargo, in T
+ */
+ _cargoUpdated(cargo) {
+ this.setState({ cargo });
+ }
+
+ /**
+ * Triggered when engagement range has been updated
+ * @param {number} engagementRange the engagement range, in m
+ */
+ _engagementRangeUpdated(engagementRange) {
+ this.setState({ engagementRange });
+ }
+
+ /**
+ * Triggered when target ship has been updated
+ * @param {object} opponent the opponent's ship
+ * @param {string} opponentBuild the name of the opponent's build
+ */
+ _opponentUpdated(opponent, opponentBuild) {
+ this.setState({ opponent, opponentBuild });
+ }
+
/**
* Save the current build
*/
@@ -294,7 +360,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 } = state,
+ { ship, code, savedCode, buildName, newBuildName, halfChartWidth, thirdChartWidth, sys, eng, wep, boost, fuel, cargo, opponent, opponentBuild, engagementRange } = state,
hide = tooltip.bind(null, null),
menu = this.props.currentMenu,
shipUpdated = this._shipUpdated,
@@ -307,6 +373,9 @@ export default class OutfittingPage extends Page {
// 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 || '');
+ // Markers are used to propagate state changes without requiring a deep comparison of the ship, as that takes a long time
+ const boostMarker = `${ship.canBoost()}`;
+
return (
@@ -340,40 +409,59 @@ export default class OutfittingPage extends Page {
+ {/* Main tables */}
-
-
+ {/* Control of ship and opponent */}
+
+
+
{translate('ship control')}
+
+
+
+
-
+
-
-
+
+
-
-
-
-
-
-
+
+ { ship.cargoCapacity > 0 ? : null }
-
-
-
+
+
+
{translate('opponent')}
+
+
+
+
-
-
-
-
-
-
-
+
+
+ {/* Tabbed subpages */}
+
);
diff --git a/src/less/app.less b/src/less/app.less
index 3dc03d2d..f1234db6 100755
--- a/src/less/app.less
+++ b/src/less/app.less
@@ -20,6 +20,7 @@
@import 'sortable';
@import 'loader';
@import 'pips';
+@import 'boost';
@import 'movement';
@import 'shippicker';
@import 'defence';
diff --git a/src/less/boost.less b/src/less/boost.less
new file mode 100755
index 00000000..75db11be
--- /dev/null
+++ b/src/less/boost.less
@@ -0,0 +1,14 @@
+#boost {
+ button {
+ font-size: 1.2em;
+ background: @primary-bg;
+ color: @primary;
+ border: 1px solid @primary;
+ &.selected {
+ // Shown when button is selected
+ background: @primary;
+ color: @primary-bg;
+ }
+ }
+}
+
diff --git a/src/less/outfit.less b/src/less/outfit.less
index bccd47f8..092fd499 100755
--- a/src/less/outfit.less
+++ b/src/less/outfit.less
@@ -220,6 +220,14 @@
});
}
+ &.threequarters {
+ width: 75%;
+
+ .smallTablet({
+ width: 100% !important;
+ });
+ }
+
&.full {
width: 100%;
diff --git a/src/less/pips.less b/src/less/pips.less
index 1db973ae..2d3dccbd 100755
--- a/src/less/pips.less
+++ b/src/less/pips.less
@@ -12,19 +12,6 @@
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;
diff --git a/src/less/shippicker.less b/src/less/shippicker.less
index 11726fff..8c7658c1 100755
--- a/src/less/shippicker.less
+++ b/src/less/shippicker.less
@@ -1,12 +1,11 @@
.shippicker {
background-color: @bgBlack;
margin: 0;
- padding: 0 0 0 1em;
height: 3em;
- line-height: 3em;
font-family: @fTitle;
vertical-align: middle;
position: relative;
+ display: block;
.user-select-none();
@@ -34,7 +33,6 @@
cursor: pointer;
color: @warning;
text-transform: uppercase;
- // Less than 600px screen width: hide text
&.disabled {
color: @warning-disabled;
@@ -47,7 +45,6 @@
.menu-item-label {
margin-left: 1em;
- display: inline-block;
.smallTablet({
display: none;