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

more rewrite

Browse Source
This commit is contained in:
willyb321
2018-12-11 14:05:50 +11:00
parent 01e795903e
commit 7e27fa73b5
8 changed files with 3882 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3435
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -18,6 +18,7 @@
"css-loader": "1.0.0", "css-loader": "1.0.0",
"dotenv": "6.0.0", "dotenv": "6.0.0",
"dotenv-expand": "4.2.0", "dotenv-expand": "4.2.0",
"ed-forge": "file:../ed-forge",
"eslint": "5.6.0", "eslint": "5.6.0",
"eslint-config-react-app": "^3.0.5", "eslint-config-react-app": "^3.0.5",
"eslint-loader": "2.1.1", "eslint-loader": "2.1.1",

5
public/index.html
View File

@@ -41,11 +41,12 @@
<meta name="msapplication-config" content="/browserconfig.xml"> <meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
</head> </head>
<body> <body style="background-color:#000;">
<noscript> <noscript>
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </noscript>
<div id="coriolis"></div> <section id="coriolis"></section>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.

18
src/App.jsx
View File

@@ -1,22 +1,26 @@
import React, { Component } from 'react'; 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 Loadable from "react-loadable";
import Header from './components/Header'; import Header from './components/Header';
const LoadableComponent = Loadable({ const LoadableHome = Loadable({
loader: () => import("./pages/Home"), loader: () => import("./pages/Home"),
loading: () => <h2>Loading</h2> loading: () => <h2>Loading</h2>
}); });
const LoadableOutfit = Loadable({
loader: () => import("./pages/Outfit"),
loading: () => <h2>Loading</h2>
});
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div style={{ minHeight: '100%' }}> <div style={{ minHeight: '100%' }}>
<Switch>
<Route exact path='/' component={LoadableComponent}/>
</Switch>
<Header/> <Header/>
<Switch>
<Route exact path='/' component={LoadableHome}/>
<Route path='/outfit/:ship' component={LoadableOutfit}/>
</Switch>
<footer> <footer>
<div className="right cap"> <div className="right cap">
<a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer" <a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer"

2
src/components/Header.jsx
View File

@@ -11,7 +11,7 @@ class Header extends Component {
render() { render() {
return ( return (
<header className={"header"}> <header className={"header"}>
<CoriolisLogo className='icon xl' /> <Link className='l menu' to={'/'}><CoriolisLogo className='icon xl' /></Link>
<div className='l menu'> <div className='l menu'>
<div className={'menu-header'} onClick={this._openShips}> <div className={'menu-header'} onClick={this._openShips}>
<Rocket className='warning' /><span className='menu-item-label'>{translate('ships')}</span> <Rocket className='warning' /><span className='menu-item-label'>{translate('ships')}</span>

413
src/components/ShipTable.jsx Normal file
View 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">&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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;

6
src/pages/Home.jsx
View File

@@ -1,9 +1,13 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ShipTable from '../components/ShipTable';
class Home extends Component { class Home extends Component {
render() { render() {
return ( return (
<div> <div className="page">
<Link className={"link"} to={'/outfit/fer_de_lance'}>Fer De Lance</Link>
<ShipTable/>
</div> </div>
); );
} }

13
src/pages/Outfit.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React, { Component } from 'react';
class Outfit extends Component {
render() {
return (
<div>
Hi
</div>
);
}
}
export default Outfit;