Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-08 14:33:22 +00:00
Code Issues Projects Releases Wiki Activity

Display new-style hardpoint information

Browse Source
This commit is contained in:
Cmdr McDonald
2016-10-14 01:04:05 +01:00
parent 9c42179617
commit ed7a9ef037
4 changed files with 131 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/components/HardpointSlot.jsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import Slot from './Slot';
import { DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
/**
* Hardpoint / Utility Slot
@@ -33,24 +34,31 @@ export default class HardpointSlot extends Slot {
*/
_getSlotDetails(m, translate, formats, u) {
if (m) {
let classRating = `${m.class}${m.rating}${m.mount ? '/' + m.mount : ''}${m.missile ? m.missile : ''}`;
let classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
let { drag, drop } = this.props;
return <div className='details' draggable='true' onDragStart={drag} onDragEnd={drop}>
<div className={'cb'}>
<div className={'l'}>{classRating} {translate(m.name || m.grp)}</div>
<div className={'l'}>
{m.mount && m.mount == 'F' ? <MountFixed /> : ''}
{m.mount && m.mount == 'G' ? <MountGimballed /> : ''}
{m.mount && m.mount == 'T' ? <MountTurret /> : ''}
{m.type && m.type == 'K' ? <DamageKinetic /> : ''}
{m.type && m.type == 'T' ? <DamageThermal /> : ''}
{m.type && m.type == 'KT' ? <span><DamageKinetic /><DamageThermal /></span>: ''}
{m.type && m.type == 'E' ? <DamageExplosive />: ''}
{classRating} {translate(m.name || m.grp)}</div>
<div className={'r'}>{m.mass}{u.T}</div>
</div>
<div className={'cb'}>
{ m.damage ? <div className={'l'}>{translate('damage')}: {m.damage} { m.ssdam ? <span>({formats.int(m.ssdam)} {u.MJ})</span> : null }</div> : null }
{ m.dps ? <div className={'l'}>{translate('DPS')}: {m.dps} { m.mjdps ? <span>({formats.int(m.mjdps)} {u.MJ})</span> : null }</div> : null }
{ m.thermload ? <div className={'l'}>{translate('T-Load')}: {m.thermload}</div> : null }
{ m.type ? <div className={'l'}>{translate('type')}: {m.type}</div> : null }
{ m.dps ? <div className={'l'}>{translate('DPS')}: {formats.int(10 * m.dps) / 10} { m.clip ? <span>({formats.int(10 * (m.clip * m.dps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10})</span> : null }</div> : null }
{ m.eps ? <div className={'l'}>{translate('EPS')}: {formats.int(10 * m.eps) / 10} { m.clip ? <span>({formats.int(10 * (m.clip * m.eps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10})</span> : null }</div> : null }
{ m.hps ? <div className={'l'}>{translate('HPS')}: {formats.int(10 * m.hps) / 10} { m.clip ? <span>({formats.int(10 * (m.clip * m.hps / m.rof) / ((m.clip / m.rof) + m.reload)) / 10})</span> : null }</div> : null }
{ m.dps && m.eps ? <div className={'l'}>{translate('DPE')}: {formats.int( 10 * m.dps / m.eps) / 10}</div> : null }
{ m.rof ? <div className={'l'}>{translate('ROF')}: {m.rof}{u.ps}</div> : null }
{ m.armourpen ? <div className={'l'}>{translate('pen')}: {m.armourpen}</div> : null }
{ m.range && !m.dps ? <div className={'l'}>{translate('Range')}: {m.range/1000}{u.km}</div> : null }
{ m.shieldmul ? <div className={'l'}>+{formats.rPct(m.shieldmul)}</div> : null }
{ m.range ? <div className={'l'}>{m.range} <u>km</u></div> : null }
{ m.ammo >= 0 ? <div className={'l'}>{translate('ammo')}: {formats.int(m.clip)}+{formats.int(m.ammo)}</div> : null }
{ m.ammo >= 0 ? <div className={'l'}>{translate('ammo')}: {formats.int(m.clip)}/{formats.int(m.ammo)}</div> : null }
</div>
</div>;
} else {

109
src/app/components/SvgIcons.jsx
View File

@@ -319,6 +319,90 @@ export class Warning extends SvgIcon {
}
}
/**
* Thermal damage
*/
export class DamageThermal extends SvgIcon {
/**
* Overriden view box
* @return {String} view box
*/
viewBox() { return '0 0 200 200'; }
/**
* Generate the SVG
* @return {React.Component} SVG Contents
*/
svg() {
return <g>
<ellipse cx='100' cy='100' rx='90' ry='90' fillOpacity='0' />
<ellipse cx='100' cy='100' rx='30' ry='30' fillOpacity='1' />
<path d='M100 20v80' />
</g>;
}
}
/**
* Kinetic damage
*/
export class DamageKinetic extends SvgIcon {
/**
* Overriden view box
* @return {String} view box
*/
viewBox() { return '0 0 200 200'; }
/**
* Generate the SVG
* @return {React.Component} SVG Contents
*/
svg() {
return <g>
<ellipse cx='100' cy='100' rx='90' ry='90' fillOpacity='0' />
<ellipse cx='62' cy='67' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='62' cy='101' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='62' cy='135' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='100' cy='50' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='100' cy='84' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='100' cy='118' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='100' cy='152' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='138' cy='67' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='138' cy='101' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='138' cy='135' rx='5' ry='5' fillOpacity='1' />
</g>;
}
}
/**
* Explosive damage
*/
export class DamageExplosive extends SvgIcon {
/**
* Overriden view box
* @return {String} view box
*/
viewBox() { return '0 0 200 200'; }
/**
* Generate the SVG
* @return {React.Component} SVG Contents
*/
svg() {
return <g>
<ellipse cx='100' cy='100' rx='50' ry='50' fillOpacity='0' />
<ellipse cx='100' cy='20' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='156.57' cy='36.57' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='180' cy='100' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='156.57' cy='163.43' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='100' cy='180' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='43.43' cy='163.43' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='20' cy='100' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='43.43' cy='36.57' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='100' cy='75' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='125' cy='100' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='100' cy='125' rx='5' ry='5' fillOpacity='1' />
<ellipse cx='75' cy='100' rx='5' ry='5' fillOpacity='1' />
</g>;
}
}
/**
* Fixed mount hardpoint
*/
@@ -334,11 +418,11 @@ export class MountFixed extends SvgIcon {
*/
svg() {
return <g>
<circle fillOpacity='0' r='70' cy='100' cx='100' strokeWidth='5' />
<line y2='60' x2='101' y1='0' x1='101' strokeWidth='5' />
<line y2='101' x2='200' y1='101' x1='140' strokeWidth='5' />
<line y2='101' x2='60' y1='101' x1='0' strokeWidth='5' />
<line y2='200' x2='101' y1='140' x1='101' strokeWidth='5' />
<circle cx='100' cy='100' r='76' fillOpacity='0' />
<path d='M0 100h48' />
<path d='M152 100h48' />
<path d='M100 0v48' />
<path d='M100 152v48' />
</g>;
}
}
@@ -358,8 +442,8 @@ export class MountGimballed extends SvgIcon {
*/
svg() {
return <g>
<ellipse ry='25' rx='95' cy='100' cx='100' fillOpacity='0' strokeWidth='5' />
<ellipse ry='95' rx='25' cy='100' cx='100' fillOpacity='0' strokeWidth='5' />
<ellipse cx='100' cy='100' rx='90' ry='25' fillOpacity='0' />
<ellipse cx='100' cy='100' rx='20' ry='95' fillOpacity='0' />
</g>;
}
}
@@ -379,9 +463,14 @@ export class MountTurret extends SvgIcon {
*/
svg() {
return <g>
<line y2='170' x2='162' y1='170' x1='8' strokeWidth='6' />
<path d='m13,138l144,0l0,-50l-27,-40l-90,0l-27,40l0,50z' id='svg_12' fillOpacity='0' strokeWidth='6' />
<line y2='91' x2='200' y1='91' x1='159' strokeWidth='6' />
<path d='M40 50 A 40 40 0 0 0 0 90' />
<path d='M40 50h40' />
<path d='M120 90 A 40 40 0 0 0 80 50' />
<path d='M0 90v40' />
<path d='M120 90v40' />
<path d='M0 120h120' />
<path d='M120 90h80' />
<path d='M0 160h120' />
</g>;
}
}

6
src/app/utils/SlotFunctions.js
View File

@@ -127,7 +127,11 @@ const PROP_BLACKLIST = {
enginecapacity: 1,
enginerecharge: 1,
systemcapacity: 1,
systemrecharge: 1
systemrecharge: 1,
breachdps: 1,
breachmin: 1,
breachmax: 1,
integrity: 1
};
const TERM_LOOKUP = {

10
src/less/slot.less
View File

@@ -12,6 +12,8 @@
background-color: @primary-bg;
border: 1px solid @primary-disabled;
color: @fg;
stroke: @fg;
stroke-width: 20;
fill: @fg;
.details-container {
@@ -54,6 +56,8 @@
font-size: 1.2em;
width: 1.2em;
color: @primary-disabled;
stroke: @primary-disabled;
stroke-width: 20;
border-right: 1px solid @primary-disabled;
box-sizing: border-box;
padding-top: 0.2em;
@@ -64,6 +68,8 @@
text-transform: uppercase;
font-size: 1.3em;
color: lighten(@primary-bg, 12%);
stroke: lighten(@primary-bg, 12%);
stroke-width: 20;
text-align: center;
letter-spacing: 0.1em;
line-height: 1.7em;
@@ -71,12 +77,16 @@
&.selected {
color: @primary-bg;
stroke: @primary-bg;
stroke-width: 20;
fill: @primary-bg;
background-color: @primary;
border: 1px solid @primary;
z-index: 1;
.sz {
color: @primary;
stroke: @primary;
stroke-width: 20;
background-color: @primary-bg;
border-right: 1px solid @primary;
}