mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-08 22:33:24 +00:00
Link in components
This commit is contained in:
Cmdr McDonald
@@ -5,6 +5,7 @@ import Slider from '../components/Slider';
|
||||
import Pips from '../components/Pips';
|
||||
import Fuel from '../components/Fuel';
|
||||
import Cargo from '../components/Cargo';
|
||||
import Movement from '../components/Movement';
|
||||
import EngagementRange from '../components/EngagementRange';
|
||||
|
||||
/**
|
||||
@@ -29,7 +30,23 @@ export default class BattleCentre extends TranslatedComponent {
|
||||
const { ship } = this.props;
|
||||
const opponent = BattleCentre.DEFAULT_OPPONENT;
|
||||
|
||||
this.state = { };
|
||||
this._cargoUpdated = this._cargoUpdated.bind(this);
|
||||
this._fuelUpdated = this._fuelUpdated.bind(this);
|
||||
this._pipsUpdated = this._pipsUpdated.bind(this);
|
||||
this._engagementRangeUpdated = this._engagementRangeUpdated.bind(this);
|
||||
|
||||
this.state = {
|
||||
// Pips
|
||||
sys: 2,
|
||||
eng: 2,
|
||||
wep: 2,
|
||||
// Fuel
|
||||
fuel: ship.fuelCapacity,
|
||||
// Cargo
|
||||
cargo: ship.cargoCapacity,
|
||||
// Engagement range
|
||||
engagementRange: 1500,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
@@ -42,28 +59,28 @@ export default class BattleCentre extends TranslatedComponent {
|
||||
* Triggered when pips have been updated
|
||||
*/
|
||||
_pipsUpdated(sys, eng, wep) {
|
||||
console.log('Pips are now ' + sys + '/' + eng + '/' + wep);
|
||||
this.setState({ sys, eng, wep });
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggered when fuel has been updated
|
||||
*/
|
||||
_fuelUpdated(fuel) {
|
||||
console.log('Fuel is now ' + fuel);
|
||||
this.setState({ fuel });
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggered when cargo has been updated
|
||||
*/
|
||||
_cargoUpdated(cargo) {
|
||||
console.log('Cargo is now ' + cargo);
|
||||
this.setState({ cargo });
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggered when engagement range has been updated
|
||||
*/
|
||||
_engagementRangeUpdated(engagementRange) {
|
||||
console.log('Engagement range is now ' + engagementRange);
|
||||
this.setState({ engagementRange });
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -73,24 +90,22 @@ export default class BattleCentre extends TranslatedComponent {
|
||||
render() {
|
||||
const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
|
||||
const { formats, translate, units } = language;
|
||||
const { against, expanded, maxRange, range, totals } = this.state;
|
||||
const { sys, eng, wep, cargo, fuel, engagementRange, totals } = this.state;
|
||||
const { ship } = this.props;
|
||||
const shipUpdated = this._shipUpdated;
|
||||
const pipsUpdated = this._pipsUpdated;
|
||||
const fuelUpdated = this._fuelUpdated;
|
||||
const cargoUpdated = this._cargoUpdated;
|
||||
const engagementRangeUpdated = this._engagementRangeUpdated;
|
||||
|
||||
return (
|
||||
<span>
|
||||
<h1>{translate('battle centre')}</h1>
|
||||
<div className='group third'>
|
||||
<Pips ship={ship} onChange={pipsUpdated}/>
|
||||
<Pips ship={ship} onChange={this._pipsUpdated}/>
|
||||
</div>
|
||||
<div className='group twothirds'>
|
||||
<Fuel ship={ship} onChange={fuelUpdated}/>
|
||||
<Cargo ship={ship} onChange={cargoUpdated}/>
|
||||
<EngagementRange ship={ship} onChange={engagementRangeUpdated}/>
|
||||
<Fuel ship={ship} onChange={this._fuelUpdated}/>
|
||||
<Cargo ship={ship} onChange={this._cargoUpdated}/>
|
||||
<EngagementRange ship={ship} onChange={this._engagementRangeUpdated}/>
|
||||
</div>
|
||||
<div className='group third'>
|
||||
<Movement ship={ship} eng={eng} cargo={cargo} fuel={fuel}/>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -58,12 +58,14 @@ export default class Cargo extends TranslatedComponent {
|
||||
*/
|
||||
_cargoChange(cargoLevel) {
|
||||
const { cargoCapacity } = this.state;
|
||||
// We round the cargo level to a suitable value given the capacity
|
||||
cargoLevel = Math.round(cargoLevel * cargoCapacity) / cargoCapacity;
|
||||
if (cargoCapacity > 0) {
|
||||
// We round the cargo level to a suitable value given the capacity
|
||||
cargoLevel = Math.round(cargoLevel * cargoCapacity) / cargoCapacity;
|
||||
|
||||
if (cargoLevel != this.state.cargoLevel) {
|
||||
this.setState({ cargoLevel });
|
||||
this.props.onChange(Math.round(cargoLevel * cargoCapacity));
|
||||
if (cargoLevel != this.state.cargoLevel) {
|
||||
this.setState({ cargoLevel });
|
||||
this.props.onChange(Math.round(cargoLevel * cargoCapacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
85
src/app/components/Movement.jsx
Normal file
85
src/app/components/Movement.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
|
||||
/**
|
||||
* Movement
|
||||
*/
|
||||
export default class Movement extends TranslatedComponent {
|
||||
static PropTypes = {
|
||||
ship: React.PropTypes.object.isRequired,
|
||||
eng: React.PropTypes.number.isRequired,
|
||||
fuel: React.PropTypes.number.isRequired,
|
||||
cargo: React.PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param {Object} props React Component properties
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._toggleBoost = this._toggleBoost.bind(this);
|
||||
|
||||
this.state = { boost: false };
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the boost feature
|
||||
*/
|
||||
_toggleBoost() {
|
||||
let { boost } = this.state;
|
||||
boost = !boost;
|
||||
this.setState({ boost });
|
||||
}
|
||||
|
||||
/**
|
||||
* Render movement
|
||||
* @return {React.Component} contents
|
||||
*/
|
||||
render() {
|
||||
const { ship, eng, cargo, fuel } = this.props;
|
||||
const { language } = this.context;
|
||||
const { formats, translate, units } = language;
|
||||
const { boost } = this.state;
|
||||
|
||||
//<svg style={{ width: '100%', height: '100%', stroke: '#FF8C0D', fill: '#FF8C0D' }} viewBox='0 0 600 600' fillRule="evenodd" clipRule="evenodd">
|
||||
return (
|
||||
<span id='movement'>
|
||||
<svg viewBox='0 0 600 600' fillRule="evenodd" clipRule="evenodd">
|
||||
// Axes
|
||||
<path d="M150 250v300" strokeWidth='1'/>
|
||||
<path d="M150 250l236 236" strokeWidth='1'/>
|
||||
<path d="M150 250l350 -200" strokeWidth='1'/>
|
||||
// End Arrow
|
||||
<path d="M508 43.3L487 67l-10-17.3 31-6.4z"/>
|
||||
// Axes arcs and arrows
|
||||
<path d="M71.7 251.7C64.2 259.2 60 269.4 60 280c0 22 18 40 40 40s40-18 40-40c0-10.6-4.2-20.8-11.7-28.3 7.5 7.5 11.7 17.7 11.7 28.3 0 22-18 40-40 40s-40-18-40-40c0-10.6 4.2-20.8 11.7-28.3z" strokeWidth='4' transform="matrix(.6 0 0 .3 87.5 376.3)"/>
|
||||
<path d="M142.8 453l-13.2 8.7-2.6-9.7 15.8 1z"/>
|
||||
<path d="M144.7 451.6l.5 1.6-16.2 10.6h-.4l-3.5-13 .7-.4 19.3 1.2zm-14.2 7.7l7.7-5-9.2-.7 1.5 5.7zm25.7-6.3l15.8-1-2.6 9.7-13.2-8.8z"/>
|
||||
<path d="M174 450.8l-3.6 13h-.4l-16.2-10.6.5-1.6 19.3-1.2.3.4zm-13.2 3.4l7.7 5 1.5-5.6-9.2.6z"/>
|
||||
|
||||
<path d="M407.7 119c2 .7 4.3 1 6.4 1 14 0 25-11.2 25-25s-11-25-25-25c-11 0-21 7.6-24 18.5 3-11 13-18.5 24-18.5 14 0 25 11.2 25 25s-11 25-25 25c-2 0-4-.3-6-1z" strokeWidth='2'/>
|
||||
<path d="M388 99.7L387 84l9.8 2.5-8.7 13.2z"/>
|
||||
<path d="M398.8 85.5l.2.5-10.7 16-1.6-.3-1.2-19.3.4-.3 12.5 3.8zm-9.5 9.7l5-7.7-5.6-1.6.6 9zm10 20.8l15.7-1-2.6 9.7-13.2-8.8z"/>
|
||||
<path d="M417 113.8l-3.6 13h-.4l-16.2-10.6.5-1.6 19.3-1.2.3.4zm-13.2 3.4l7.7 5 1.5-5.6-9.2.6z"/>
|
||||
|
||||
<path d="M355 430c0-13.8-11.2-25-25-25s-25 11.2-25 25 11.2 25 25 25c-13.8 0-25-11.2-25-25s11.2-25 25-25 25 11.2 25 25z" strokeWidth='2'/>
|
||||
<path d="M357 439.7l-8.8-13 9.7-2.7-1 15.7z"/>
|
||||
<path d="M359.5 422.4l-1.2 19.3-1.6.4-10.7-16 .2-.2 13-3.4.3.4zm-9 5l5.2 7.8.6-9.3-5.7 1.2zm-10.5 24l-13.2 8.6-2.6-9.7 15.8 1z"/>
|
||||
<path d="M342 450l.4 1.5-16.2 10.7-.4-.2-3.5-13 .3-.3L342 450zm-14.3 7.6l7.7-5-9.2-.6 1.5 5.6z"/>
|
||||
|
||||
// Speed
|
||||
<text x="500" y="80" strokeWidth='1'>{formats.int(ship.calcSpeed(eng, fuel, cargo, boost))}m/s</text>
|
||||
// Pitch
|
||||
<text x="355" y="410" strokeWidth='1'>{formats.f1(ship.calcPitch(eng, fuel, cargo, boost))}°/s</text>
|
||||
// Roll
|
||||
<text x="450" y="100" strokeWidth='1'>{formats.f1(ship.calcRoll(eng, fuel, cargo, boost))}°/s</text>
|
||||
// Yaw
|
||||
<text x="160" y="430" strokeWidth='1'>{formats.f1(ship.calcYaw(eng, fuel, cargo, boost))}°/s</text>
|
||||
</svg>
|
||||
<button className={boost ? 'boost' : 'noboost'} onClick={this._toggleBoost}>Boost</button>
|
||||
</span>);
|
||||
}
|
||||
}
|
||||
@@ -173,3 +173,82 @@ function normValues(minMass, optMass, maxMass, minMul, optMul, maxMul, mass, bas
|
||||
res * (1 - (engpip * 1)),
|
||||
res];
|
||||
}
|
||||
|
||||
function calcValue(minMass, optMass, maxMass, minMul, optMul, maxMul, mass, base, engpip, eng) {
|
||||
const xnorm = Math.min(1, (maxMass - mass) / (maxMass - minMass));
|
||||
const exponent = Math.log((optMul - minMul) / (maxMul - minMul)) / Math.log(Math.min(1, (maxMass - optMass) / (maxMass - minMass)));
|
||||
const ynorm = Math.pow(xnorm, exponent);
|
||||
const mul = minMul + ynorm * (maxMul - minMul);
|
||||
const res = base * mul;
|
||||
|
||||
return res * (1 - (engpip * (4 - eng)));
|
||||
}
|
||||
|
||||
export function calcSpeed(mass, baseSpeed, thrusters, engpip, eng, boostFactor, boost) {
|
||||
// thrusters might be a module or a template; handle either here
|
||||
const minMass = thrusters instanceof Module ? thrusters.getMinMass() : thrusters.minmass;
|
||||
const optMass = thrusters instanceof Module ? thrusters.getOptMass() : thrusters.optmass;
|
||||
const maxMass = thrusters instanceof Module ? thrusters.getMaxMass() : thrusters.maxmass;
|
||||
const minMul = thrusters instanceof Module ? thrusters.getMinMul('speed') : (thrusters.minmulspeed ? thrusters.minmulspeed : thrusters.minmul);
|
||||
const optMul = thrusters instanceof Module ? thrusters.getOptMul('speed') : (thrusters.optmulspeed ? thrusters.minmulspeed : thrusters.minmul);
|
||||
const maxMul = thrusters instanceof Module ? thrusters.getMaxMul('speed') : (thrusters.maxmulspeed ? thrusters.minmulspeed : thrusters.minmul);
|
||||
|
||||
let result = calcValue(minMass, optMass, maxMass, minMul, optMul, maxMul, mass, baseSpeed, engpip, eng);
|
||||
if (boost == true) {
|
||||
result *= boostFactor;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function calcPitch(mass, basePitch, thrusters, engpip, eng, boostFactor, boost) {
|
||||
// thrusters might be a module or a template; handle either here
|
||||
let minMass = thrusters instanceof Module ? thrusters.getMinMass() : thrusters.minmass;
|
||||
let optMass = thrusters instanceof Module ? thrusters.getOptMass() : thrusters.optmass;
|
||||
let maxMass = thrusters instanceof Module ? thrusters.getMaxMass() : thrusters.maxmass;
|
||||
let minMul = thrusters instanceof Module ? thrusters.getMinMul('rotation') : (thrusters.minmulrotation ? thrusters.minmulrotation : thrusters.minmul);
|
||||
let optMul = thrusters instanceof Module ? thrusters.getOptMul('rotation') : (thrusters.optmulrotation ? thrusters.optmulrotation : thrusters.optmul);
|
||||
let maxMul = thrusters instanceof Module ? thrusters.getMaxMul('rotation') : (thrusters.maxmulrotation ? thrusters.maxmulrotation : thrusters.maxmul);
|
||||
|
||||
let result = calcValue(minMass, optMass, maxMass, minMul, optMul, maxMul, mass, basePitch, engpip, eng);
|
||||
if (boost == true) {
|
||||
result *= boostFactor;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function calcRoll(mass, baseRoll, thrusters, engpip, eng, boostFactor, boost) {
|
||||
// thrusters might be a module or a template; handle either here
|
||||
let minMass = thrusters instanceof Module ? thrusters.getMinMass() : thrusters.minmass;
|
||||
let optMass = thrusters instanceof Module ? thrusters.getOptMass() : thrusters.optmass;
|
||||
let maxMass = thrusters instanceof Module ? thrusters.getMaxMass() : thrusters.maxmass;
|
||||
let minMul = thrusters instanceof Module ? thrusters.getMinMul('rotation') : (thrusters.minmulrotation ? thrusters.minmulrotation : thrusters.minmul);
|
||||
let optMul = thrusters instanceof Module ? thrusters.getOptMul('rotation') : (thrusters.optmulrotation ? thrusters.optmulrotation : thrusters.optmul);
|
||||
let maxMul = thrusters instanceof Module ? thrusters.getMaxMul('rotation') : (thrusters.maxmulrotation ? thrusters.maxmulrotation : thrusters.maxmul);
|
||||
|
||||
let result = calcValue(minMass, optMass, maxMass, minMul, optMul, maxMul, mass, baseRoll, engpip, eng);
|
||||
if (boost == true) {
|
||||
result *= boostFactor;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function calcYaw(mass, baseYaw, thrusters, engpip, eng, boostFactor, boost) {
|
||||
// thrusters might be a module or a template; handle either here
|
||||
let minMass = thrusters instanceof Module ? thrusters.getMinMass() : thrusters.minmass;
|
||||
let optMass = thrusters instanceof Module ? thrusters.getOptMass() : thrusters.optmass;
|
||||
let maxMass = thrusters instanceof Module ? thrusters.getMaxMass() : thrusters.maxmass;
|
||||
let minMul = thrusters instanceof Module ? thrusters.getMinMul('rotation') : (thrusters.minmulrotation ? thrusters.minmulrotation : thrusters.minmul);
|
||||
let optMul = thrusters instanceof Module ? thrusters.getOptMul('rotation') : (thrusters.optmulrotation ? thrusters.optmulrotation : thrusters.optmul);
|
||||
let maxMul = thrusters instanceof Module ? thrusters.getMaxMul('rotation') : (thrusters.maxmulrotation ? thrusters.maxmulrotation : thrusters.maxmul);
|
||||
|
||||
let result = calcValue(minMass, optMass, maxMass, minMul, optMul, maxMul, mass, baseYaw, engpip, eng);
|
||||
if (boost == true) {
|
||||
result *= boostFactor;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
@@ -194,6 +194,54 @@ export default class Ship {
|
||||
return Calc.speed(this.unladenMass + fuel + cargo, this.speed, this.standard[1].m, this.pipSpeed);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the speed for a given configuration
|
||||
* @param {Number} eng Number of pips in ENG
|
||||
* @param {Number} fuel Amount of fuel carried
|
||||
* @param {Number} cargo Amount of cargo carried
|
||||
* @param {boolean} boost true if boost is applied
|
||||
* @return {Number} Speed
|
||||
*/
|
||||
calcSpeed(eng, fuel, cargo, boost) {
|
||||
return Calc.calcSpeed(this.unladenMass + fuel + cargo, this.speed, this.standard[1].m, this.pipSpeed, eng, this.topBoost / this.topSpeed, boost);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the pitch for a given configuration
|
||||
* @param {Number} eng Number of pips in ENG
|
||||
* @param {Number} fuel Amount of fuel carried
|
||||
* @param {Number} cargo Amount of cargo carried
|
||||
* @param {boolean} boost true if boost is applied
|
||||
* @return {Number} Pitch
|
||||
*/
|
||||
calcPitch(eng, fuel, cargo, boost) {
|
||||
return Calc.calcPitch(this.unladenMass + fuel + cargo, this.pitch, this.standard[1].m, this.pipSpeed, eng, this.topBoost / this.topSpeed, boost);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the roll for a given configuration
|
||||
* @param {Number} eng Number of pips in ENG
|
||||
* @param {Number} fuel Amount of fuel carried
|
||||
* @param {Number} cargo Amount of cargo carried
|
||||
* @param {boolean} boost true if boost is applied
|
||||
* @return {Number} Roll
|
||||
*/
|
||||
calcRoll(eng, fuel, cargo, boost) {
|
||||
return Calc.calcRoll(this.unladenMass + fuel + cargo, this.roll, this.standard[1].m, this.pipSpeed, eng, this.topBoost / this.topSpeed, boost);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the yaw for a given configuration
|
||||
* @param {Number} eng Number of pips in ENG
|
||||
* @param {Number} fuel Amount of fuel carried
|
||||
* @param {Number} cargo Amount of cargo carried
|
||||
* @param {boolean} boost true if boost is applied
|
||||
* @return {Number} Yaw
|
||||
*/
|
||||
calcYaw(eng, fuel, cargo, boost) {
|
||||
return Calc.calcYaw(this.unladenMass + fuel + cargo, this.yaw, this.standard[1].m, this.pipSpeed, eng, this.topBoost / this.topSpeed, boost);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the recovery time after losing or turning on shields
|
||||
* Thanks to CMDRs Al Gray, GIF, and Nomad Enigma for providing Shield recharge data and formulas
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
@import 'sortable';
|
||||
@import 'loader';
|
||||
@import 'pips';
|
||||
@import 'movement';
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
||||
26
src/less/movement.less
Normal file
26
src/less/movement.less
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
#movement {
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: @primary-disabled;
|
||||
fill: @primary-disabled;
|
||||
|
||||
text {
|
||||
stroke: @primary;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.4em;
|
||||
background: @primary-bg;
|
||||
color: @primary;
|
||||
border: 1px solid @primary;
|
||||
&.boost {
|
||||
// Shown when boost is enabled
|
||||
background: @primary;
|
||||
color: @primary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user