Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-10 15:15:34 +00:00
Code Issues Projects Releases Wiki Activity

Add vertical bar chart and use it in battle centre

Browse Source
This commit is contained in:
Cmdr McDonald
2017-03-13 17:07:39 +00:00
parent 964cdd2b9a
commit 0729fc29fa
13 changed files with 699 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/components/BattleCentre.jsx
View File

@@ -9,7 +9,7 @@ import Cargo from './Cargo';
import Movement from './Movement';
import EngagementRange from './EngagementRange';
import ShipPicker from './ShipPicker';
import Shields from './Shields';
import Defence from './Defence';
/**
* Battle centre allows you to pit your current build against another ship,
@@ -113,28 +113,31 @@ export default class BattleCentre extends TranslatedComponent {
const { sys, eng, wep, cargo, fuel, boost, engagementRange, opponent } = this.state;
const { ship } = this.props;
// Markers are used to propagate state changes
const movementMarker = '' + ship.topSpeed + ':' + ship.pitch + ':' + ship.roll + ':' + ship.yaw;
const shieldMarker = '' + ship.shield + ':' + ship.cells + ':' + ship.shieldExplRes + ':' + ship.shieldKinRes + ':' + ship.shieldThermRes;
// Markers are used to propagate state changes without requiring a deep comparison of the ship
const pipsMarker = '' + ship.canBoost();
const movementMarker = '' + ship.topSpeed + ':' + ship.pitch + ':' + ship.roll + ':' + ship.yaw + ':' + ship.canBoost();
const shieldMarker = '' + ship.shield + ':' + ship.shieldCells + ':' + ship.shieldExplRes + ':' + ship.shieldKinRes + ':' + ship.shieldThermRes + ':' + ship.armour;
return (
<span>
<h1>{translate('battle centre')}</h1>
<ShipPicker onChange={this._opponentUpdated}/>
<div className='group third'>
<Pips ship={ship} onChange={this._pipsUpdated}/>
</div>
<div className='group twothirds'>
<h1>{translate('ship management')}</h1>
<Pips marker={pipsMarker} ship={ship} onChange={this._pipsUpdated}/>
<Fuel ship={ship} onChange={this._fuelUpdated}/>
<Cargo ship={ship} onChange={this._cargoUpdated}/>
{ ship.cargoCapacity > 0 ? <Cargo ship={ship} onChange={this._cargoUpdated}/> : null }
<h1>{translate('opponent')}</h1>
<ShipPicker onChange={this._opponentUpdated}/>
<EngagementRange ship={ship} onChange={this._engagementRangeUpdated}/>
</div>
<div className='group third'>
<Shields marker={shieldMarker} ship={ship} opponent={opponent} sys={sys}/>
</div>
<div className='group third'>
<h1>{translate('movement')}</h1>
<Movement marker={movementMarker} ship={ship} boost={boost} eng={eng} cargo={cargo} fuel={fuel}/>
</div>
<div className='group full'>
<h1>{translate('defence')}</h1>
<Defence marker={shieldMarker} ship={ship} opponent={opponent} sys={sys}/>
</div>
</span>
);
}