mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-10 07:05:35 +00:00
more react changes, incomplete
This commit is contained in:
Colin McLeod
235
src/app/pages/ShipyardPage.jsx
Executable file
235
src/app/pages/ShipyardPage.jsx
Executable file
@@ -0,0 +1,235 @@
|
||||
import React from 'react';
|
||||
import Page from './Page';
|
||||
import Ships from '../shipyard/Ships';
|
||||
import cn from 'classnames';
|
||||
import Ship from '../shipyard/Ship';
|
||||
import * as ModuleUtils from '../shipyard/ModuleUtils';
|
||||
import { SizeMap } from '../shipyard/Constants';
|
||||
import Link from '../components/Link';
|
||||
|
||||
function countHp(slot) {
|
||||
this.hp[slot.maxClass]++;
|
||||
this.hpCount++;
|
||||
}
|
||||
|
||||
function countInt(slot) {
|
||||
var crEligible = !slot.eligible || slot.eligible.cr;
|
||||
this.int[slot.maxClass - 1]++; // Subtract 1 since there is no Class 0 Internal compartment
|
||||
this.intCount++;
|
||||
this.maxCargo += crEligible ? ModuleUtils.findInternal('cr', slot.maxClass, 'E').capacity : 0;
|
||||
}
|
||||
|
||||
export default class ShipyardPage extends Page {
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
title: 'Coriolis - Shipyard',
|
||||
shipPredicate: 'name',
|
||||
shipDesc: false
|
||||
};
|
||||
this.context = context;
|
||||
this.shipSummaries = [];
|
||||
|
||||
for (let s in Ships) {
|
||||
this.shipSummaries.push(this._shipSummary(s, Ships[s]));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sort ships
|
||||
* @param {object} key Sort predicate
|
||||
*/
|
||||
_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 });
|
||||
};
|
||||
|
||||
_shipSummary(shipId, shipData) {
|
||||
let language = this.context.language;
|
||||
let u = language.units;
|
||||
let fInt = language.formats.int;
|
||||
let fRound = language.formats.round;
|
||||
let translate = language.translate;
|
||||
let summary = {
|
||||
id: shipId,
|
||||
hpCount: 0,
|
||||
intCount: 0,
|
||||
maxCargo: 0,
|
||||
hp: [0, 0, 0, 0, 0], // Utility, Small, Medium, Large, Huge
|
||||
int: [0, 0, 0, 0, 0, 0, 0, 0] // Sizes 1 - 8
|
||||
};
|
||||
Object.assign(summary, shipData.properties);
|
||||
let ship = new Ship(shipId, shipData.properties, shipData.slots);
|
||||
|
||||
// Build Ship
|
||||
ship.buildWith(shipData.defaults); // Populate with stock/default components
|
||||
ship.hardpoints.forEach(countHp.bind(summary)); // Count Hardpoints by class
|
||||
ship.internal.forEach(countInt.bind(summary)); // Count Internal Compartments by class
|
||||
summary.retailCost = ship.totalCost; // Record Stock/Default/retail cost
|
||||
ship.optimizeMass({ pd: '1D' }); // Optimize Mass with 1D PD for maximum possible jump range
|
||||
summary.maxJumpRange = ship.unladenRange; // Record Jump Range
|
||||
ship.optimizeMass({ th: ship.standard[1].maxClass + 'A' }); // Optmize mass with Max Thrusters
|
||||
summary.topSpeed = ship.topSpeed;
|
||||
summary.topBoost = ship.topBoost;
|
||||
summary.rowElement = this._shipRowElement(summary, translate, u, fInt, fRound);
|
||||
|
||||
return summary;
|
||||
}
|
||||
|
||||
_shipRowElement(s, translate, u, fInt, fRound) {
|
||||
return <tr key={s.id} className={'highlight'}>
|
||||
<td className={'le'}><Link href={'/outfitting/' + s.id}>{s.name}</Link></td>
|
||||
<td className={'le'}>{s.manufacturer}</td>
|
||||
<td className={'cap'}>{translate(SizeMap[s.class])}</td>
|
||||
<td className={'ri'}>{fInt(s.speed)}{u.ms}</td>
|
||||
<td className={'ri'}>{fInt(s.boost)}{u.ms}</td>
|
||||
<td className={'ri'}>{s.baseArmour}</td>
|
||||
<td className={'ri'}>{fInt(s.baseShieldStrength)}{u.MJ}</td>
|
||||
<td className={'ri'}>{fInt(s.topSpeed)}{u.ms}</td>
|
||||
<td className={'ri'}>{fInt(s.topBoost)}{u.ms}</td>
|
||||
<td className={'ri'}>{fRound(s.maxJumpRange)}{u.LY}</td>
|
||||
<td className={'ri'}>{fInt(s.maxCargo)}{u.T}</td>
|
||||
<td className={cn({ disabled: !s.hp[1] })}>{s.hp[1]}</td>
|
||||
<td className={cn({ disabled: !s.hp[2] })}>{s.hp[2]}</td>
|
||||
<td className={cn({ disabled: !s.hp[3] })}>{s.hp[3]}</td>
|
||||
<td className={cn({ disabled: !s.hp[4] })}>{s.hp[4]}</td>
|
||||
<td className={cn({ disabled: !s.hp[0] })}>{s.hp[0]}</td>
|
||||
<td className={cn({ disabled: !s.int[0] })}>{s.int[0]}</td>
|
||||
<td className={cn({ disabled: !s.int[1] })}>{s.int[1]}</td>
|
||||
<td className={cn({ disabled: !s.int[2] })}>{s.int[2]}</td>
|
||||
<td className={cn({ disabled: !s.int[3] })}>{s.int[3]}</td>
|
||||
<td className={cn({ disabled: !s.int[4] })}>{s.int[4]}</td>
|
||||
<td className={cn({ disabled: !s.int[5] })}>{s.int[5]}</td>
|
||||
<td className={cn({ disabled: !s.int[6] })}>{s.int[6]}</td>
|
||||
<td className={cn({ disabled: !s.int[7] })}>{s.int[7]}</td>
|
||||
<td className={'ri'}>{fInt(s.hullMass)}{u.T}</td>
|
||||
<td className={'ri'}>{s.masslock}</td>
|
||||
<td className={'ri'}>{fInt(s.retailCost)}{u.CR}</td>
|
||||
</tr>;
|
||||
}
|
||||
|
||||
_renderSummaries(language) {
|
||||
let fInt = language.formats.int;
|
||||
let fRound = language.formats.round;
|
||||
let translate = language.translate;
|
||||
let u = language.units;
|
||||
// Regenerate ship rows on prop change
|
||||
for (let s of this.shipSummaries) {
|
||||
s.rowElement = this._shipRowElement(s, translate, u, fInt, fRound);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUpdate(nextProps, nextState, nextContext) {
|
||||
if (this.context.language !== nextContext.language) {
|
||||
this._renderSummaries(language);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let shipSummaries = this.shipSummaries;
|
||||
let shipPredicate = this.state.shipPredicate;
|
||||
let shipPredicateIndex = this.state.shipPredicateIndex;
|
||||
let shipRows = [];
|
||||
let sortShips = (predicate, index) => this._sortShips.bind(this, predicate, index);
|
||||
|
||||
// Sort shipsOverview
|
||||
shipSummaries.sort((a, b) => {
|
||||
let valA = a[shipPredicate], valB = b[shipPredicate];
|
||||
|
||||
if (shipPredicateIndex != undefined) {
|
||||
valA = valA[shipPredicateIndex];
|
||||
valB = valB[shipPredicateIndex];
|
||||
}
|
||||
|
||||
if (!this.state.shipDesc) {
|
||||
let val = valA;
|
||||
valA = valB;
|
||||
valB = val;
|
||||
}
|
||||
|
||||
if(valA == valB) {
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
} else if (valA > valB) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
});
|
||||
|
||||
let formats = this.context.language.formats;
|
||||
let fInt = formats.int;
|
||||
let fRound = formats.round;
|
||||
let translate = this.context.language.translate;
|
||||
|
||||
for (let s of shipSummaries) {
|
||||
shipRows.push(s.rowElement);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'page'}>
|
||||
<div className={'scroll-x'}>
|
||||
<table style={{ fontSize:'0.85em', whiteSpace:'nowrap', margin: '0 auto' }} align='center'>
|
||||
<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 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'} onClick={sortShips('masslock')}>{translate('MLF')}</th>
|
||||
<th rowSpan={2} className={'sortable'} onClick={sortShips('retailCost')}>{translate('cost')}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* Base */}
|
||||
<th className={'sortable lft'} onClick={sortShips('speed')}>{translate('speed')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('boost')}>{translate('boost')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('baseArmour')}>{translate('armour')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('baseShieldStrength')}>{translate('shields')}</th>
|
||||
{/* Max */}
|
||||
<th className={'sortable lft'} onClick={sortShips('topSpeed')}>{translate('speed')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('topBoost')}>{translate('boost')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('maxJumpRange')}>{translate('jump')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('maxCargo')}>{translate('cargo')}</th>
|
||||
{/* Hardpoints */}
|
||||
<th className={'sortable lft'} onClick={sortShips('hp',1)}>{translate('S')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('hp', 2)}>{translate('M')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('hp', 3)}>{translate('L')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('hp', 4)}>{translate('H')}</th>
|
||||
<th className={'sortable'} onClick={sortShips('hp', 0)}>{translate('U')}</th>
|
||||
{/* Internal */}
|
||||
<th className={'sortable lft'} onClick={sortShips('int', 0)} >1</th>
|
||||
<th className={'sortable'} onClick={sortShips('int', 1)} >2</th>
|
||||
<th className={'sortable'} onClick={sortShips('int', 2)} >3</th>
|
||||
<th className={'sortable'} onClick={sortShips('int', 3)} >4</th>
|
||||
<th className={'sortable'} onClick={sortShips('int', 4)} >5</th>
|
||||
<th className={'sortable'} onClick={sortShips('int', 5)} >6</th>
|
||||
<th className={'sortable'} onClick={sortShips('int', 6)} >7</th>
|
||||
<th className={'sortable'} onClick={sortShips('int', 7)} >8</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shipRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user