Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 14:45:35 +00:00
Code Issues Projects Releases Wiki Activity

Shipyard page changes - in progress

Browse Source
This commit is contained in:
Colin McLeod
2016-03-10 12:29:19 -08:00
parent 15748066c9
commit 363bf7fd2a
1 changed files with 86 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/app/pages/ShipyardPage.jsx
View File

@@ -28,61 +28,12 @@ function countInt(slot) {
}
/**
* The Shipyard summary page
*/
export default class ShipyardPage extends Page {
static cachedShipSummaries = null;
/**
* Constructor
* @param {Object} props React Component properties
* @param {Object} context React Component context
*/
constructor(props, context) {
super(props, context);
this.state = {
title: 'Coriolis - Shipyard',
shipPredicate: 'name',
shipDesc: true
};
if (!ShipyardPage.cachedShipSummaries) {
ShipyardPage.cachedShipSummaries = [];
for (let s in Ships) {
ShipyardPage.cachedShipSummaries.push(this._shipSummary(s, Ships[s]));
}
}
this.shipSummaries = ShipyardPage.cachedShipSummaries;
}
/**
* Update state with the specified sort predicates
* @param {String} shipPredicate Sort predicate - property name
* @param {number} shipPredicateIndex Sort predicate - property index
*/
_sortShips(shipPredicate, shipPredicateIndex) {
let shipDesc = this.state.shipDesc;
if (typeof shipPredicateIndex == 'object') {
shipPredicateIndex = undefined;
}
if (this.state.shipPredicate == shipPredicate && this.state.shipPredicateIndex == shipPredicateIndex) {
shipDesc = !shipDesc;
}
this.setState({ shipPredicate, shipDesc, shipPredicateIndex });
};
/**
* Generate Ship summary and aggregated properties
* @param {String} shipId Ship Id
* @param {Object} shipData Ship Default Data
* @return {Object} Ship summary and aggregated properties
*/
_shipSummary(shipId, shipData) {
function shipSummary(shipId, shipData) {
let summary = {
id: shipId,
hpCount: 0,
@@ -106,7 +57,56 @@ export default class ShipyardPage extends Page {
summary.topBoost = ship.topBoost;
return summary;
}
/**
* The Shipyard summary page
*/
export default class ShipyardPage extends Page {
static cachedShipSummaries = null;
/**
* Constructor
* @param {Object} props React Component properties
* @param {Object} context React Component context
*/
constructor(props, context) {
super(props, context);
if (!ShipyardPage.cachedShipSummaries) {
ShipyardPage.cachedShipSummaries = [];
for (let s in Ships) {
ShipyardPage.cachedShipSummaries.push(shipSummary(s, Ships[s]));
}
}
this.state = {
title: 'Coriolis - Shipyard',
shipPredicate: 'name',
shipDesc: true,
shipSummaries: ShipyardPage.cachedShipSummaries
};
}
/**
* Update state with the specified sort predicates
* @param {String} shipPredicate Sort predicate - property name
* @param {number} shipPredicateIndex Sort predicate - property index
*/
_sortShips(shipPredicate, shipPredicateIndex) {
let shipDesc = this.state.shipDesc;
if (typeof shipPredicateIndex == 'object') {
shipPredicateIndex = undefined;
}
if (this.state.shipPredicate == shipPredicate && this.state.shipPredicateIndex == shipPredicateIndex) {
shipDesc = !shipDesc;
}
this.setState({ shipPredicate, shipDesc, shipPredicateIndex });
};
/**
* Generate the table row summary for the ship
@@ -118,8 +118,7 @@ export default class ShipyardPage extends Page {
* @return {React.Component} Table Row
*/
_shipRowElement(s, translate, u, fInt, fRound) {
return <tr key={s.id} className='highlight'>
<td className='le'><Link href={'/outfit/' + s.id}>{s.name}</Link></td>
return <tr key={s.id} style={{ height: '1.5em' }}>
<td className='le'>{s.manufacturer}</td>
<td className='cap'>{translate(SizeMap[s.class])}</td>
<td>{s.agility}</td>
@@ -155,17 +154,27 @@ export default class ShipyardPage extends Page {
* @return {React.Component} The page contents
*/
renderPage() {
let { translate, formats, units } = this.context.language;
let { sizeRatio, language, termtip } = this.context;
let { translate, formats, units } = language;
let hide = this.context.tooltip.bind(null, null);
let fInt = formats.int;
let fRound = formats.round;
let shipSummaries = this.shipSummaries;
let shipPredicate = this.state.shipPredicate;
let shipPredicateIndex = this.state.shipPredicateIndex;
let shipRows = [];
let hide = this.context.tooltip.bind(null, null);
let tip = this.context.termtip;
let { shipSummaries, shipPredicate, shipPredicateIndex } = this.state;
let sortShips = (predicate, index) => this._sortShips.bind(this, predicate, index);
let filters = {
// 'class': { 1: 1, 2: 1}
};
shipSummaries = shipSummaries.filter(s => {
for (let prop in filters) {
if (!(s[prop] in filters[prop])) {
return false;
}
}
return true;
});
// Sort shipsOverview
shipSummaries.sort((a, b) => {
let valA = a[shipPredicate], valB = b[shipPredicate];
@@ -194,26 +203,46 @@ export default class ShipyardPage extends Page {
}
});
let i = 0;
let shipRows = new Array(shipSummaries.length);
let detailRows = new Array(shipSummaries.length);
for (let s of shipSummaries) {
shipRows.push(this._shipRowElement(s, translate, units, fInt, fRound));
detailRows[i] = this._shipRowElement(s, translate, units, fInt, fRound);
shipRows[i] = <tr key={i} style={{ height: '1.5em' }}><td className='le'><Link href={'/outfit/' + s.id}>{s.name}</Link></td></tr>;
i++;
}
return (
<div className='page' style={{ fontSize: this.context.sizeRatio + 'em' }}>
<div className='scroll-x'>
<table style={{ fontSize:'0.85em', whiteSpace:'nowrap', margin: '0 auto' }} align='center'>
<div className='page' style={{ fontSize: sizeRatio + 'em' }}>
<div>
Show: manufacturer, size, maneuverability, base stats, max stats, hardpoints, internal slots, hull mass, mass lock factor, cost
</div>
<div style={{ whiteSpace: 'nowrap', margin: '0 auto', fontSize: '0.9em', position: 'relative', display: 'inline-block', maxWidth: '100%' }}>
<table style={{ width: '12em', position: 'absolute' }}>
<thead>
<tr className='main'>
<th style={{ height: '2.6em', padding: '2px 0.4em 1px' }} className='sortable le rgt' onClick={sortShips('name')}>{translate('ship')}</th>
</tr>
</thead>
<tbody>
{shipRows}
</tbody>
</table>
<div style={{ overflowX: 'scroll', maxWidth: '100%' }}>
<table style={{ marginLeft: 'calc(12em - 1px)' }}>
<thead>
<tr className='main'>
<th rowSpan={2} className='sortable le' onClick={sortShips('name')}>{translate('ship')}</th>
<th rowSpan={2} className='sortable' onClick={sortShips('manufacturer')}>{translate('manufacturer')}</th>
<th rowSpan={2} className='sortable' onClick={sortShips('class')}>{translate('size')}</th>
<th rowSpan={2} className='sortable' onMouseEnter={tip.bind(null, 'maneuverability')} onMouseLeave={hide} onClick={sortShips('agility')}>{translate('mnv')}</th>
<th rowSpan={2} className='sortable' onMouseEnter={termtip.bind(null, 'maneuverability')} onMouseLeave={hide} onClick={sortShips('agility')}>{translate('mnv')}</th>
<th colSpan={4}>{translate('base')}</th>
<th colSpan={4}>{translate('max')}</th>
<th colSpan={5} className='sortable' onClick={sortShips('hpCount')}>{translate('hardpoints')}</th>
<th colSpan={8} className='sortable' onClick={sortShips('intCount')}>{translate('internal compartments')}</th>
<th rowSpan={2} className='sortable' onClick={sortShips('hullMass')}>{translate('hull')}</th>
<th rowSpan={2} className='sortable' onMouseEnter={tip.bind(null, 'mass lock factor')} onMouseLeave={hide} onClick={sortShips('masslock')} >{translate('MLF')}</th>
<th rowSpan={2} className='sortable' onMouseEnter={termtip.bind(null, 'mass lock factor')} onMouseLeave={hide} onClick={sortShips('masslock')} >{translate('MLF')}</th>
<th rowSpan={2} className='sortable' onClick={sortShips('retailCost')}>{translate('cost')}</th>
</tr>
<tr>
@@ -244,11 +273,12 @@ export default class ShipyardPage extends Page {
</tr>
</thead>
<tbody>
{shipRows}
{detailRows}
</tbody>
</table>
</div>
</div>
</div>
);
}
}