mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-10 15:15:34 +00:00
More refactoring and porting to React
This commit is contained in:
Colin McLeod
@@ -1,25 +1,34 @@
|
||||
import React from 'react';
|
||||
import Page from './Page';
|
||||
import cn from 'classnames';
|
||||
import Router from '../Router';
|
||||
import Persist from '../stores/Persist';
|
||||
import Ships from '../shipyard/Ships';
|
||||
import InterfaceEvents from '../utils/InterfaceEvents';
|
||||
import { Ships } from 'coriolis-data';
|
||||
import Ship from '../shipyard/Ship';
|
||||
import { toShip } from '../shipyard/Serializer';
|
||||
import { toDetailedBuild } from '../shipyard/Serializer';
|
||||
import { FloppyDisk, Bin, Switch, Download, Reload } from '../components/SvgIcons';
|
||||
import ShipSummaryTable from '../components/ShipSummaryTable';
|
||||
import StandardSlotSection from '../components/StandardSlotSection';
|
||||
import HardpointsSlotSection from '../components/HardpointsSlotSection';
|
||||
import InternalSlotSection from '../components/InternalSlotSection';
|
||||
import UtilitySlotSection from '../components/UtilitySlotSection';
|
||||
import LineChart from '../components/LineChart';
|
||||
import PowerManagement from '../components/PowerManagement';
|
||||
import CostSection from '../components/CostSection';
|
||||
import ModalExport from '../components/ModalExport';
|
||||
|
||||
const SPEED_SERIES = ['boost', '4 Pips', '2 Pips', '0 Pips'];
|
||||
const SPEED_COLORS = ['#0088d2', '#ff8c0d', '#D26D00', '#c06400'];
|
||||
|
||||
export default class OutfittingPage extends Page {
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = this._initState(props, context);
|
||||
this.state = this._initState(context);
|
||||
}
|
||||
|
||||
_initState(props, context) {
|
||||
_initState(context) {
|
||||
let params = context.route.params;
|
||||
let shipId = params.ship;
|
||||
let code = params.code;
|
||||
@@ -34,22 +43,13 @@ export default class OutfittingPage extends Page {
|
||||
}
|
||||
|
||||
let ship = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
|
||||
let retrofitShip = new Ship(shipId, data.properties, data.slots); // Create a new Ship for retrofit comparison
|
||||
|
||||
if (code) {
|
||||
toShip(ship, code); // Populate components from 'code' URL param
|
||||
ship.buildFrom(code); // Populate modules from serialized 'code' URL param
|
||||
} else {
|
||||
ship.buildWith(data.defaults); // Populate with default components
|
||||
}
|
||||
|
||||
if (savedCode) {
|
||||
toShip(retrofitShip, savedCode); // Populate components from last save
|
||||
} else {
|
||||
retrofitShip.buildWith(data.defaults);
|
||||
}
|
||||
|
||||
//this.applyDiscounts();
|
||||
|
||||
return {
|
||||
title: 'Outfitting - ' + data.properties.name,
|
||||
costTab: Persist.getCostTab() || 'costs',
|
||||
@@ -57,43 +57,94 @@ export default class OutfittingPage extends Page {
|
||||
shipId,
|
||||
ship,
|
||||
code,
|
||||
savedCode,
|
||||
retrofitShip,
|
||||
retrofitBuild: savedCode ? buildName : null
|
||||
savedCode
|
||||
};
|
||||
}
|
||||
|
||||
_applyDiscounts() {
|
||||
this.state.ship.applyDiscounts(Persist.getShipDiscount(), Persist.getComponentDiscount());
|
||||
this.state.retrofitShip.applyDiscounts(Persist.getShipDiscount(), Persist.getComponentDiscount());
|
||||
_buildNameChange(event) {
|
||||
let stateChanges = {
|
||||
buildName: event.target.value
|
||||
}
|
||||
|
||||
if(Persist.hasBuild(this.state.shipId, stateChanges.buildName)) {
|
||||
stateChanges.savedCode = Persist.getBuild(this.state.shipId, stateChanges.buildName);
|
||||
} else {
|
||||
stateChanges.savedCode = null;
|
||||
}
|
||||
|
||||
this.setState(stateChanges);
|
||||
}
|
||||
|
||||
_buildNameChange() {
|
||||
|
||||
_saveBuild() {
|
||||
let code = this.state.ship.toString();
|
||||
Persist.saveBuild(this.state.shipId, this.state.buildName, code);
|
||||
this.setState({ code, savedCode: code});
|
||||
}
|
||||
|
||||
_saveBuild() {}
|
||||
_reloadBuild() {
|
||||
this.state.ship.buildFrom(this.state.savedCode);
|
||||
this._shipUpdated();
|
||||
}
|
||||
|
||||
_reloadBuild() {}
|
||||
_resetBuild() {
|
||||
this.state.ship.buildWith(Ships[this.state.shipId].defaults);
|
||||
this._shipUpdated();
|
||||
}
|
||||
|
||||
_resetBuild() {}
|
||||
_deleteBuild() {
|
||||
Persist.deleteBuild(this.state.shipId, this.state.buildName);
|
||||
Router.go(`/outfit/${this.state.shipId}`);
|
||||
}
|
||||
|
||||
_exportBuild() {}
|
||||
_exportBuild() {
|
||||
let translate = this.context.language.translate;
|
||||
let {buildName, ship } = this.state;
|
||||
InterfaceEvents.showModal(<ModalExport
|
||||
title={buildName + ' ' + translate('export')}
|
||||
description={translate('PHRASE_EXPORT_DESC')}
|
||||
data={toDetailedBuild(buildName, ship, ship.toString())}
|
||||
/>);
|
||||
}
|
||||
|
||||
_shipUpdated() {
|
||||
let { shipId, buildName } = this.state;
|
||||
let newCode = this.state.ship.toString();
|
||||
this._updateRoute(shipId, newCode, buildName);
|
||||
this.setState({ code: newCode });
|
||||
}
|
||||
|
||||
_updateRoute(shipId, code, buildName) {
|
||||
let qStr = '';
|
||||
|
||||
if (buildName) {
|
||||
qStr = '?bn=' + encodeURIComponent(buildName);
|
||||
}
|
||||
|
||||
Router.replace(`/outfit/${shipId}/${code}${qStr}`);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
this.setState(this._initState(nextProps, nextContext));
|
||||
if (this.context.route !== nextContext.route) { // Only reinit state if the route has changed
|
||||
this.setState(this._initState(nextContext));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
let { ship, code, savedCode, buildName } = this.state;
|
||||
let { translate, units } = this.context.language;
|
||||
let state = this.state;
|
||||
let { ship, code, savedCode, buildName } = state;
|
||||
let menu = this.props.currentMenu;
|
||||
let shipUpdated = this._shipUpdated;
|
||||
let hStr = ship.getHardpointsString();
|
||||
let sStr = ship.getStandardString();
|
||||
let iStr = ship.getInternalString();
|
||||
|
||||
return (
|
||||
<div id='outfit' className={'page'}>
|
||||
<div id='overview'>
|
||||
<h1>{ship.name}</h1>
|
||||
<div id='build'>
|
||||
<input value={buildName} onChange={this._buildNameChange} placeholder={translate('enter name')} maxsize={50} />
|
||||
<input value={buildName} onChange={this._buildNameChange} placeholder={translate('Enter Name')} maxsize={50} />
|
||||
<button onClick={this._saveBuild} disabled={!buildName || savedCode && code == savedCode}>
|
||||
<FloppyDisk className='lg'/><span className='button-lbl'>{translate('save')}</span>
|
||||
</button>
|
||||
@@ -112,20 +163,65 @@ export default class OutfittingPage extends Page {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ShipSummaryTable ship={ship} />
|
||||
<ShipSummaryTable ship={ship} code={code} />
|
||||
|
||||
<StandardSlotSection ship={ship} />
|
||||
<InternalSlotSection ship={ship} />
|
||||
<HardpointsSlotSection ship={ship} />
|
||||
<UtilitySlotSection ship={ship} />
|
||||
<StandardSlotSection ship={ship} code={sStr} onChange={shipUpdated} currentMenu={menu} />
|
||||
<InternalSlotSection ship={ship} code={iStr} onChange={shipUpdated} currentMenu={menu} />
|
||||
<HardpointsSlotSection ship={ship} code={hStr} onChange={shipUpdated} currentMenu={menu} />
|
||||
<UtilitySlotSection ship={ship} code={hStr} onChange={shipUpdated} currentMenu={menu} />
|
||||
|
||||
Component Priorities & Power
|
||||
<PowerManagement ship={ship} code={code} onChange={shipUpdated} />
|
||||
<CostSection ship={ship} shipId={state.shipId} buildName={buildName} code={sStr + hStr + iStr} />
|
||||
|
||||
Cost/Pricing List
|
||||
<div className='group third'>
|
||||
<h1>{translate('jump range')}</h1>
|
||||
<LineChart
|
||||
xMax={ship.cargoCapacity}
|
||||
yMax={ship.unladenRange}
|
||||
xUnit={units.T}
|
||||
yUnit={units.LY}
|
||||
yLabel={translate('jump range')}
|
||||
xLabel={translate('cargo')}
|
||||
func={state.jumpRangeChartFunc}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='group third'>
|
||||
<h1>{translate('total range')}</h1>
|
||||
<LineChart
|
||||
xMax={ship.cargoCapacity}
|
||||
yMax={ship.boostSpeed}
|
||||
xUnit={units.T}
|
||||
yUnit={units.ms}
|
||||
yLabel={translate('total range')}
|
||||
xLabel={translate('cargo')}
|
||||
func={state.totalRangeChartFunc}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='group third'>
|
||||
<h1>{translate('speed')}</h1>
|
||||
<LineChart
|
||||
xMax={ship.cargoCapacity}
|
||||
yMax={ship.boostSpeed}
|
||||
xUnit={units.T}
|
||||
yUnit={units.ms}
|
||||
yLabel={translate('speed')}
|
||||
series={SPEED_SERIES}
|
||||
color={SPEED_COLORS}
|
||||
xLabel={translate('cargo')}
|
||||
func={state.speedChartFunc}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
<div class='group half'>
|
||||
<div slider max='ship.fuelCapacity' unit=''T'' on-change='::fuelChange(val)' style='position:relative; margin: 0 auto;'>
|
||||
<svg class='icon xl primary-disabled' style='position:absolute;height: 100%;'><use xlink:href='#fuel'></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
|
||||
Jump Range Chart
|
||||
Total Range Chart
|
||||
Speed Chart
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user