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

On-going tidy-ups

Browse Source
This commit is contained in:
Cmdr McDonald
2017-03-13 22:59:01 +00:00
parent 7b3ad555a1
commit a3c03266bf
4 changed files with 96 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/app/components/Defence.jsx
View File

@@ -233,16 +233,12 @@ export default class Defence extends TranslatedComponent {
const shieldSourcesData = []; const shieldSourcesData = [];
const effectiveShieldData = []; const effectiveShieldData = [];
const damageTakenData = []; const shieldDamageTakenData = [];
const shieldTooltipDetails = []; const shieldTooltipDetails = [];
const shieldAbsoluteTooltipDetails = []; const shieldAbsoluteTooltipDetails = [];
const shieldExplosiveTooltipDetails = []; const shieldExplosiveTooltipDetails = [];
const shieldKineticTooltipDetails = []; const shieldKineticTooltipDetails = [];
const shieldThermalTooltipDetails = []; const shieldThermalTooltipDetails = [];
let effectiveAbsoluteShield = 0;
let effectiveExplosiveShield = 0;
let effectiveKineticShield = 0;
let effectiveThermalShield = 0;
if (shield.total) { if (shield.total) {
if (Math.round(shield.generator) > 0) shieldSourcesData.push({ value: Math.round(shield.generator), label: translate('generator') }); if (Math.round(shield.generator) > 0) shieldSourcesData.push({ value: Math.round(shield.generator), label: translate('generator') });
if (Math.round(shield.boosters) > 0) shieldSourcesData.push({ value: Math.round(shield.boosters), label: translate('boosters') }); if (Math.round(shield.boosters) > 0) shieldSourcesData.push({ value: Math.round(shield.boosters), label: translate('boosters') });
@@ -268,24 +264,24 @@ export default class Defence extends TranslatedComponent {
shieldThermalTooltipDetails.push(<div key='boosters'>{translate('boosters') + ' ' + formats.pct1(shield.thermal.boosters)}</div>); shieldThermalTooltipDetails.push(<div key='boosters'>{translate('boosters') + ' ' + formats.pct1(shield.thermal.boosters)}</div>);
shieldThermalTooltipDetails.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.pct1(shield.thermal.sys)}</div>); shieldThermalTooltipDetails.push(<div key='power distributor'>{translate('power distributor') + ' ' + formats.pct1(shield.thermal.sys)}</div>);
effectiveAbsoluteShield = shield.total / shield.absolute.total; const effectiveAbsoluteShield = shield.total / shield.absolute.total;
effectiveShieldData.push({ value: Math.round(effectiveAbsoluteShield), label: translate('absolute') }); effectiveShieldData.push({ value: Math.round(effectiveAbsoluteShield), label: translate('absolute') });
effectiveExplosiveShield = shield.total / shield.explosive.total; const effectiveExplosiveShield = shield.total / shield.explosive.total;
effectiveShieldData.push({ value: Math.round(effectiveExplosiveShield), label: translate('explosive') }); effectiveShieldData.push({ value: Math.round(effectiveExplosiveShield), label: translate('explosive') });
effectiveKineticShield = shield.total / shield.kinetic.total; const effectiveKineticShield = shield.total / shield.kinetic.total;
effectiveShieldData.push({ value: Math.round(effectiveKineticShield), label: translate('kinetic') }); effectiveShieldData.push({ value: Math.round(effectiveKineticShield), label: translate('kinetic') });
effectiveThermalShield = shield.total / shield.thermal.total; const effectiveThermalShield = shield.total / shield.thermal.total;
effectiveShieldData.push({ value: Math.round(effectiveThermalShield), label: translate('thermal') }); effectiveShieldData.push({ value: Math.round(effectiveThermalShield), label: translate('thermal') });
damageTakenData.push({ value: Math.round(shield.absolute.total * 100), label: translate('absolute') }); shieldDamageTakenData.push({ value: Math.round(shield.absolute.total * 100), label: translate('absolute') });
damageTakenData.push({ value: Math.round(shield.explosive.total * 100), label: translate('explosive') }); shieldDamageTakenData.push({ value: Math.round(shield.explosive.total * 100), label: translate('explosive') });
damageTakenData.push({ value: Math.round(shield.kinetic.total * 100), label: translate('kinetic') }); shieldDamageTakenData.push({ value: Math.round(shield.kinetic.total * 100), label: translate('kinetic') });
damageTakenData.push({ value: Math.round(shield.thermal.total * 100), label: translate('thermal') }); shieldDamageTakenData.push({ value: Math.round(shield.thermal.total * 100), label: translate('thermal') });
} }
const armourData = []; const armourSourcesData = [];
if (Math.round(armour.bulkheads) > 0) armourData.push({ value: Math.round(armour.bulkheads), label: translate('bulkheads') }); if (Math.round(armour.bulkheads) > 0) armourSourcesData.push({ value: Math.round(armour.bulkheads), label: translate('bulkheads') });
if (Math.round(armour.reinforcement) > 0) armourData.push({ value: Math.round(armour.reinforcement), label: translate('reinforcement') }); if (Math.round(armour.reinforcement) > 0) armourSourcesData.push({ value: Math.round(armour.reinforcement), label: translate('reinforcement') });
const armourTooltipDetails = []; const armourTooltipDetails = [];
if (armour.bulkheads > 0) armourTooltipDetails.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>); if (armour.bulkheads > 0) armourTooltipDetails.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.int(armour.bulkheads)}</div>);
@@ -307,55 +303,64 @@ export default class Defence extends TranslatedComponent {
armourThermalTooltipDetails.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.pct1(armour.thermal.bulkheads)}</div>); armourThermalTooltipDetails.push(<div key='bulkheads'>{translate('bulkheads') + ' ' + formats.pct1(armour.thermal.bulkheads)}</div>);
armourThermalTooltipDetails.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.pct1(armour.thermal.reinforcement)}</div>); armourThermalTooltipDetails.push(<div key='reinforcement'>{translate('reinforcement') + ' ' + formats.pct1(armour.thermal.reinforcement)}</div>);
const effectiveArmourData = [];
const effectiveAbsoluteArmour = armour.total / armour.absolute.total;
effectiveArmourData.push({ value: Math.round(effectiveAbsoluteArmour), label: translate('absolute') });
const effectiveExplosiveArmour = armour.total / armour.explosive.total;
effectiveArmourData.push({ value: Math.round(effectiveExplosiveArmour), label: translate('explosive') });
const effectiveKineticArmour = armour.total / armour.kinetic.total;
effectiveArmourData.push({ value: Math.round(effectiveKineticArmour), label: translate('kinetic') });
const effectiveThermalArmour = armour.total / armour.thermal.total;
effectiveArmourData.push({ value: Math.round(effectiveThermalArmour), label: translate('thermal') });
// TODO these aren't updating when HRP metrics are altered (maybe - need to confirm)
const armourDamageTakenData = [];
armourDamageTakenData.push({ value: Math.round(armour.absolute.total * 100), label: translate('absolute') });
armourDamageTakenData.push({ value: Math.round(armour.explosive.total * 100), label: translate('explosive') });
armourDamageTakenData.push({ value: Math.round(armour.kinetic.total * 100), label: translate('kinetic') });
armourDamageTakenData.push({ value: Math.round(armour.thermal.total * 100), label: translate('thermal') });
// TODO versions of ship.calcShieldRecovery() and ship.calcShieldRecharge() that take account of SYS pips
return ( return (
<span id='defence'> <span id='defence'>
{shield.total ? <span> {shield.total ? <span>
<div className='group half'> <div className='group quarter'>
<div className='group half'> <h2>{translate('shield metrics')}</h2>
<h2 onMouseOver={termtip.bind(null, <div>{shieldTooltipDetails}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('shields')}: {formats.int(shield.total)}{units.MJ}</h2> <br/>
<h2>{translate('PHRASE_TIME_TO_LOSE_SHIELDS')} {formats.time(shield.total / shielddamage.totalsdps)}</h2> <h2 onMouseOver={termtip.bind(null, <div>{shieldTooltipDetails}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('raw shield strength')}: {formats.int(shield.total)}{units.MJ}</h2>
</div> <h2 onMouseOver={termtip.bind(null, translate('TT_TIME_TO_LOSE_SHIELDS'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_LOSE_SHIELDS')} {formats.time(shield.total / shielddamage.totalsdps)}</h2>
<div className='group half'> <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECOVER'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECOVER_SHIELDS')} {formats.time(ship.calcShieldRecovery())}</h2>
<h2>{translate('shield sources')}</h2> <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SG_RECHARGE'))} onMouseOut={tooltip.bind(null, null)}>{translate('PHRASE_TIME_TO_RECHARGE_SHIELDS')} {formats.time(ship.calcShieldRecharge())}</h2>
<PieChart data={shieldSourcesData} />
</div>
</div> </div>
<div className='group half'> <div className='group quarter'>
<div className='group half'> <h2 onMouseOver={termtip.bind(null, translate('PHRASE_SHIELD_SOURCES'))} onMouseOut={tooltip.bind(null, null)}>{translate('shield sources')}</h2>
<h2>{translate('effective shield')}(MJ)</h2> <PieChart data={shieldSourcesData} />
<VerticalBarChart data={effectiveShieldData} /> </div>
</div> <div className='group quarter'>
<div className='group half'> <h2 onMouseOver={termtip.bind(null, translate('PHRASE_EFFECTIVE_SHIELD'))} onMouseOut={tooltip.bind(null, null)}>{translate('effective shield')}(MJ)</h2>
<h2>{translate('damage taken')}(%)</h2> <VerticalBarChart data={effectiveShieldData} />
<VerticalBarChart data={damageTakenData} /> </div>
</div> <div className='group quarter'>
</div></span> : null } <h2 onMouseOver={termtip.bind(null, translate('PHRASE_DAMAGE_TAKEN'))} onMouseOut={tooltip.bind(null, null)}>{translate('damage taken')}(%)</h2>
<VerticalBarChart data={shieldDamageTakenData} yMax={100} />
</div>
</span> : null }
<div className='group twothirds'> <div className='group quarter'>
<h2 onMouseOver={termtip.bind(null, <div>{armourTooltipDetails}</div>)} onMouseOut={tooltip.bind(null, null)} className='summary'>{translate('armour')}: {formats.int(armour.total)}</h2> <h2>{translate('armour metrics')}</h2>
<table> <br/>
<tbody>
<tr>
<td className='le'>{translate('damage taken')}</td>
<td className='ri'>
<span onMouseOver={termtip.bind(null, <div>{armourAbsoluteTooltipDetails}</div>)} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(armour.absolute.total)}</span>
</td>
<td className='ri'>
<span onMouseOver={termtip.bind(null, <div>{armourExplosiveTooltipDetails}</div>)} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(armour.explosive.total)}</span>
</td>
<td className='ri'>
<span onMouseOver={termtip.bind(null, <div>{armourKineticTooltipDetails}</div>)} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(armour.kinetic.total)}</span>
</td>
<td className='ri'>
<span onMouseOver={termtip.bind(null, <div>{armourThermalTooltipDetails}</div>)} onMouseOut={tooltip.bind(null, null)}>{formats.pct1(armour.thermal.total)}</span>
</td>
</tr>
</tbody>
</table>
</div> </div>
<div className='group third'> <div className='group quarter'>
<h2>{translate('armour sources')}</h2> <h2 onMouseOver={termtip.bind(null, translate('PHRASE_ARMOUR_SOURCES'))} onMouseOut={tooltip.bind(null, null)}>{translate('armour sources')}</h2>
<PieChart data={armourData} /> <PieChart data={armourSourcesData} />
</div>
<div className='group quarter'>
<h2 onMouseOver={termtip.bind(null, translate('PHRASE_EFFECTIVE_ARMOUR'))} onMouseOut={tooltip.bind(null, null)}>{translate('effective armour')}</h2>
<VerticalBarChart data={effectiveArmourData} />
</div>
<div className='group quarter'>
<h2 onMouseOver={termtip.bind(null, translate('PHRASE_DAMAGE_TAKEN'))} onMouseOut={tooltip.bind(null, null)}>{translate('damage taken')}(%)</h2>
<VerticalBarChart data={armourDamageTakenData} yMax={100} />
</div> </div>
</span>); </span>);
} }

10
src/app/components/VerticalBarChart.jsx
View File

@@ -20,7 +20,7 @@ export default class VerticalBarChart extends Component {
static propTypes = { static propTypes = {
data : React.PropTypes.array.isRequired, data : React.PropTypes.array.isRequired,
ylabel : React.PropTypes.string yMax : React.PropTypes.number
}; };
/** /**
@@ -57,7 +57,13 @@ export default class VerticalBarChart extends Component {
// Y axis is a numeric scale with values being 'value' // Y axis is a numeric scale with values being 'value'
this.y = d3.scaleLinear(); this.y = d3.scaleLinear();
this.y.domain([0, d3.max(this.props.data, d => d.value)]); if (props.yMax) {
// Fixed maximum value (unless we go off the scale)
const localMax = d3.max(this.props.data, d => d.value);
this.y.domain([0, localMax > props.yMax ? localMax : props.yMax]);
} else {
this.y.domain([0, d3.max(this.props.data, d => d.value)]);
}
this.yAxis = d3.axisLeft(this.y); this.yAxis = d3.axisLeft(this.y);
this.y.range([height, 0]); this.y.range([height, 0]);

11
src/app/i18n/en.js
View File

@@ -25,7 +25,7 @@ export const terms = {
PHRASE_NO_RETROCH: 'No Retrofitting changes', PHRASE_NO_RETROCH: 'No Retrofitting changes',
PHRASE_SELECT_BUILDS: 'Select builds to compare', PHRASE_SELECT_BUILDS: 'Select builds to compare',
PHRASE_SG_RECHARGE: 'Time from 50% to 100% charge', PHRASE_SG_RECHARGE: 'Time from 50% to 100% charge',
PHRASE_SG_RECOVER: 'Recovery (to 50%) after collapse', PHRASE_SG_RECOVER: 'Time from 0% to 50% charge',
PHRASE_UNLADEN: 'Ship mass excluding fuel and cargo', PHRASE_UNLADEN: 'Ship mass excluding fuel and cargo',
PHRASE_UPDATE_RDY: 'Update Available! Click to refresh', PHRASE_UPDATE_RDY: 'Update Available! Click to refresh',
PHRASE_ENGAGEMENT_RANGE: 'The distance between your ship and its target', PHRASE_ENGAGEMENT_RANGE: 'The distance between your ship and its target',
@@ -40,6 +40,13 @@ export const terms = {
PHRASE_SHOPPING_LIST: 'Stations that sell this build', PHRASE_SHOPPING_LIST: 'Stations that sell this build',
PHRASE_TOTAL_EFFECTIVE_SHIELD: 'Total amount of damage that can be taken from each damage type, if using all shield cells', PHRASE_TOTAL_EFFECTIVE_SHIELD: 'Total amount of damage that can be taken from each damage type, if using all shield cells',
PHRASE_TIME_TO_LOSE_SHIELDS: 'Shields will hold for', PHRASE_TIME_TO_LOSE_SHIELDS: 'Shields will hold for',
PHRASE_TIME_TO_RECOVER_SHIELDS: 'Shields will recover in',
PHRASE_TIME_TO_RECHARGE_SHIELDS: 'Shields will recharge in',
PHRASE_SHIELD_SOURCES: 'Breakdown of the supply of shield energy',
PHRASE_EFFECTIVE_SHIELD: 'Effective shield strength against different damage types',
PHRASE_DAMAGE_TAKEN: '% of raw damage taken for different damage types',
TT_TIME_TO_LOSE_SHIELDS: 'Against sustained fire from all opponent\'s weapons',
HELP_MODIFICATIONS_MENU: 'Click on a number to enter a new value, or drag along the bar for small changes', HELP_MODIFICATIONS_MENU: 'Click on a number to enter a new value, or drag along the bar for small changes',
@@ -208,7 +215,7 @@ export const terms = {
// Damage types // Damage types
absolute: 'Absolute', absolute: 'Absolute',
explosive: 'Explosive', explosive: 'Explosive',
kinetic: 'Kinetia', kinetic: 'Kinetic',
thermal: 'Thermal', thermal: 'Thermal',
// Shield sources // Shield sources

16
src/less/outfit.less
View File

@@ -190,11 +190,25 @@
}); });
} }
&.quarter {
width: 25%;
.tablet({
td {
line-height: 2em;
}
});
.smallTablet({
width: 50% !important;
});
}
&.third { &.third {
width: 33%; width: 33%;
.smallTablet({ .smallTablet({
width: 100% !important; width: 50% !important;
}); });
} }