mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-08 22:33:24 +00:00
more rewrite
This commit is contained in:
willyb321
3435
package-lock.json
generated
3435
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -18,6 +18,7 @@
|
||||
"css-loader": "1.0.0",
|
||||
"dotenv": "6.0.0",
|
||||
"dotenv-expand": "4.2.0",
|
||||
"ed-forge": "file:../ed-forge",
|
||||
"eslint": "5.6.0",
|
||||
"eslint-config-react-app": "^3.0.5",
|
||||
"eslint-loader": "2.1.1",
|
||||
|
||||
@@ -41,11 +41,12 @@
|
||||
<meta name="msapplication-config" content="/browserconfig.xml">
|
||||
<meta name="theme-color" content="#000000">
|
||||
</head>
|
||||
<body>
|
||||
<body style="background-color:#000;">
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="coriolis"></div>
|
||||
<section id="coriolis"></section>
|
||||
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
18
src/App.jsx
18
src/App.jsx
@@ -1,22 +1,26 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Switch, Route } from 'react-router-dom';
|
||||
import { Switch, Route, Link } from 'react-router-dom';
|
||||
import Loadable from "react-loadable";
|
||||
import Header from './components/Header';
|
||||
const LoadableComponent = Loadable({
|
||||
const LoadableHome = Loadable({
|
||||
loader: () => import("./pages/Home"),
|
||||
loading: () => <h2>Loading</h2>
|
||||
});
|
||||
|
||||
const LoadableOutfit = Loadable({
|
||||
loader: () => import("./pages/Outfit"),
|
||||
loading: () => <h2>Loading</h2>
|
||||
});
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={{ minHeight: '100%' }}>
|
||||
<Switch>
|
||||
<Route exact path='/' component={LoadableComponent}/>
|
||||
</Switch>
|
||||
<Header/>
|
||||
|
||||
|
||||
<Switch>
|
||||
<Route exact path='/' component={LoadableHome}/>
|
||||
<Route path='/outfit/:ship' component={LoadableOutfit}/>
|
||||
</Switch>
|
||||
<footer>
|
||||
<div className="right cap">
|
||||
<a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer"
|
||||
|
||||
@@ -11,7 +11,7 @@ class Header extends Component {
|
||||
render() {
|
||||
return (
|
||||
<header className={"header"}>
|
||||
<CoriolisLogo className='icon xl' />
|
||||
<Link className='l menu' to={'/'}><CoriolisLogo className='icon xl' /></Link>
|
||||
<div className='l menu'>
|
||||
<div className={'menu-header'} onClick={this._openShips}>
|
||||
<Rocket className='warning' /><span className='menu-item-label'>{translate('ships')}</span>
|
||||
|
||||
413
src/components/ShipTable.jsx
Normal file
413
src/components/ShipTable.jsx
Normal file
@@ -0,0 +1,413 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Factory, Ship, Module } from 'ed-forge';
|
||||
import {Link} from 'react-router-dom';
|
||||
import cn from 'classnames';
|
||||
|
||||
const sortShips = () => {};
|
||||
const translate = args => args;
|
||||
const hide = args => args;
|
||||
const termtip = args => args;
|
||||
const units = {};
|
||||
|
||||
/**
|
||||
* Generate Ship summary and aggregated properties
|
||||
* @param {String} shipId Ship Id
|
||||
* @return {Object} Ship summary and aggregated properties
|
||||
*/
|
||||
function shipSummary(shipId) {
|
||||
const forgeShip = Factory.newShip(shipId);
|
||||
let summary = {
|
||||
id: shipId,
|
||||
hpCount: 0,
|
||||
intCount: 0,
|
||||
maxCargo: 0,
|
||||
maxPassengers: 0,
|
||||
hp: [0, 0, 0, 0, 0], // Utility, Small, Medium, Large, Huge
|
||||
int: [0, 0, 0, 0, 0, 0, 0, 0], // Sizes 1 - 8
|
||||
standard: forgeShip.getCoreModules().map(e => e.getSize()),
|
||||
agility: 0
|
||||
// shipData.properties.pitch +
|
||||
// shipData.properties.yaw +
|
||||
// shipData.properties.roll
|
||||
};
|
||||
Object.assign(summary);
|
||||
// Build Ship
|
||||
return summary;
|
||||
}
|
||||
|
||||
|
||||
const FORGE_SHIPS = ['adder',
|
||||
'anaconda',
|
||||
'asp explorer',
|
||||
'asp scout',
|
||||
'beluga liner',
|
||||
'cobra mk iii',
|
||||
'cobra mk iv',
|
||||
'imperial cutter',
|
||||
'diamondback explorer',
|
||||
'diamondback scout',
|
||||
'dolphin',
|
||||
'eagle',
|
||||
'imperial courier',
|
||||
'imperial eagle',
|
||||
'imperial clipper',
|
||||
'federal corvette',
|
||||
'federal dropship',
|
||||
'federal assault ship',
|
||||
'federal gunship',
|
||||
'fer-de-lance',
|
||||
'hauler',
|
||||
'keelback',
|
||||
'krait mk ii',
|
||||
'mamba',
|
||||
'krait phantom',
|
||||
'orca',
|
||||
'python',
|
||||
'sidewinder',
|
||||
'type-6 transporter',
|
||||
'type-7 transporter',
|
||||
'type-9 heavy',
|
||||
'type-10 defender',
|
||||
'alliance chieftain',
|
||||
'alliance crusader',
|
||||
'alliance challenger',
|
||||
'viper',
|
||||
'viper mk iv',
|
||||
'vulture'];
|
||||
|
||||
class ShipTable extends Component {
|
||||
static cachedSummaries = null;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
if (!ShipTable.cachedShipSummaries) {
|
||||
ShipTable.cachedShipSummaries = [];
|
||||
for (let s of FORGE_SHIPS) {
|
||||
ShipTable.cachedShipSummaries.push(shipSummary(s));
|
||||
}
|
||||
}
|
||||
this.state = {
|
||||
shipRows: [],
|
||||
detailRows: []
|
||||
};
|
||||
this._genShipRows();
|
||||
}
|
||||
|
||||
_genShipRows() {
|
||||
const shipRows = [];
|
||||
for (const shipName of FORGE_SHIPS) {
|
||||
const ship = Factory.newShip(shipName);
|
||||
console.log(ship);
|
||||
shipRows.push(<tr
|
||||
key={shipName}
|
||||
style={{ height: '1.5em' }}
|
||||
className={cn({
|
||||
highlighted: this.state.shipId === shipName,
|
||||
alt: null
|
||||
})}
|
||||
>
|
||||
<td className="le">
|
||||
<Link to={'/outfit/' + shipName}>{ship.getShipName()}</Link>
|
||||
</td>
|
||||
</tr>);
|
||||
}
|
||||
}
|
||||
|
||||
_highlightShip() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
whiteSpace: 'nowrap',
|
||||
margin: '0 auto',
|
||||
fontSize: '0.8em',
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
maxWidth: '100%'
|
||||
}}
|
||||
>
|
||||
<table style={{ width: '12em', position: 'absolute', zIndex: 1 }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="le rgt"> </th>
|
||||
</tr>
|
||||
<tr className="main">
|
||||
<th className="sortable le rgt" onClick={sortShips('name')}>
|
||||
{translate('ship')}
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="le rgt invisible">{units['m/s']}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody onMouseLeave={this._highlightShip.bind(this, null)}>
|
||||
{this.state.shipRows}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style={{ overflowX: 'scroll', maxWidth: '100%' }}>
|
||||
<table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }}>
|
||||
<thead>
|
||||
<tr className="main">
|
||||
<th
|
||||
rowSpan={3}
|
||||
className="sortable"
|
||||
onClick={sortShips('manufacturer')}
|
||||
>
|
||||
{translate('manufacturer')}
|
||||
</th>
|
||||
<th> </th>
|
||||
<th
|
||||
rowSpan={3}
|
||||
className="sortable"
|
||||
onClick={sortShips('class')}
|
||||
>
|
||||
{translate('size')}
|
||||
</th>
|
||||
<th
|
||||
rowSpan={3}
|
||||
className="sortable"
|
||||
onClick={sortShips('crew')}
|
||||
>
|
||||
{translate('crew')}
|
||||
</th>
|
||||
<th
|
||||
rowSpan={3}
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'mass lock factor')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('masslock')}
|
||||
>
|
||||
{translate('MLF')}
|
||||
</th>
|
||||
<th
|
||||
rowSpan={3}
|
||||
className="sortable"
|
||||
onClick={sortShips('agility')}
|
||||
>
|
||||
{translate('agility')}
|
||||
</th>
|
||||
<th
|
||||
rowSpan={3}
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'hardness')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('hardness')}
|
||||
>
|
||||
{translate('hrd')}
|
||||
</th>
|
||||
<th> </th>
|
||||
<th colSpan={4}>{translate('base')}</th>
|
||||
<th colSpan={5}>{translate('max')}</th>
|
||||
<th className="lft" colSpan={7}/>
|
||||
<th className="lft" colSpan={5}/>
|
||||
<th className="lft" colSpan={8}/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
className="sortable lft"
|
||||
onClick={sortShips('retailCost')}
|
||||
>
|
||||
{translate('cost')}
|
||||
</th>
|
||||
<th className="sortable lft" onClick={sortShips('hullMass')}>
|
||||
{translate('hull')}
|
||||
</th>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<th className="sortable" onClick={sortShips('maxPassengers')}
|
||||
onMouseEnter={termtip.bind(null, 'passenger capacity')}
|
||||
onMouseLeave={hide}>
|
||||
{translate('pax')}
|
||||
</th>
|
||||
<th className="lft" colSpan={7}>
|
||||
{translate('core module classes')}
|
||||
</th>
|
||||
<th
|
||||
colSpan={5}
|
||||
className="sortable lft"
|
||||
onClick={sortShips('hpCount')}
|
||||
>
|
||||
{translate('hardpoints')}
|
||||
</th>
|
||||
<th
|
||||
colSpan={8}
|
||||
className="sortable lft"
|
||||
onClick={sortShips('intCount')}
|
||||
>
|
||||
{translate('internal compartments')}
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
className="sortable lft"
|
||||
onClick={sortShips('retailCost')}
|
||||
>
|
||||
{units.CR}
|
||||
</th>
|
||||
<th className="sortable lft" onClick={sortShips('hullMass')}>
|
||||
{units.T}
|
||||
</th>
|
||||
<th className="sortable lft" onClick={sortShips('speed')}>
|
||||
{units['m/s']}
|
||||
</th>
|
||||
<th className="sortable" onClick={sortShips('boost')}>
|
||||
{units['m/s']}
|
||||
</th>
|
||||
<th> </th>
|
||||
<th
|
||||
className="sortable"
|
||||
onClick={sortShips('baseShieldStrength')}
|
||||
>
|
||||
{units.MJ}
|
||||
</th>
|
||||
<th className="sortable lft" onClick={sortShips('topSpeed')}>
|
||||
{units['m/s']}
|
||||
</th>
|
||||
<th className="sortable" onClick={sortShips('topBoost')}>
|
||||
{units['m/s']}
|
||||
</th>
|
||||
<th className="sortable" onClick={sortShips('maxJumpRange')}>
|
||||
{units.LY}
|
||||
</th>
|
||||
<th className="sortable" onClick={sortShips('maxCargo')}>
|
||||
{units.T}
|
||||
</th>
|
||||
<th> </th>
|
||||
<th
|
||||
className="sortable lft"
|
||||
onMouseEnter={termtip.bind(null, 'power plant')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('standard', 0)}
|
||||
>
|
||||
{'pp'}
|
||||
</th>
|
||||
<th
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'thrusters')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('standard', 1)}
|
||||
>
|
||||
{'th'}
|
||||
</th>
|
||||
<th
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'frame shift drive')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('standard', 2)}
|
||||
>
|
||||
{'fsd'}
|
||||
</th>
|
||||
<th
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'life support')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('standard', 3)}
|
||||
>
|
||||
{'ls'}
|
||||
</th>
|
||||
<th
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'power distriubtor')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('standard', 4)}
|
||||
>
|
||||
{'pd'}
|
||||
</th>
|
||||
<th
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'sensors')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('standard', 5)}
|
||||
>
|
||||
{'s'}
|
||||
</th>
|
||||
<th
|
||||
className="sortable"
|
||||
onMouseEnter={termtip.bind(null, 'fuel tank')}
|
||||
onMouseLeave={hide}
|
||||
onClick={sortShips('standard', 6)}
|
||||
>
|
||||
{'ft'}
|
||||
</th>
|
||||
<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>
|
||||
|
||||
<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 onMouseLeave={this._highlightShip.bind(this, null)}>
|
||||
{this.state.detailRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ShipTable;
|
||||
@@ -1,9 +1,13 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import ShipTable from '../components/ShipTable';
|
||||
|
||||
class Home extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="page">
|
||||
<Link className={"link"} to={'/outfit/fer_de_lance'}>Fer De Lance</Link>
|
||||
<ShipTable/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
13
src/pages/Outfit.jsx
Normal file
13
src/pages/Outfit.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class Outfit extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Hi
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Outfit;
|
||||
Reference in New Issue
Block a user