Artur
132 lines
3.6 KiB
JavaScript
132 lines
3.6 KiB
JavaScript
import { useBackend } from '../backend';
|
|
import { Box, Button, ColorBox, Section, Table } from '../components';
|
|
import { COLORS } from '../constants';
|
|
|
|
const HEALTH_COLOR_BY_LEVEL = [
|
|
'#17d568',
|
|
'#2ecc71',
|
|
'#e67e22',
|
|
'#ed5100',
|
|
'#e74c3c',
|
|
'#ed2814',
|
|
];
|
|
|
|
const jobIsHead = jobId => jobId % 10 === 0;
|
|
|
|
const jobToColor = jobId => {
|
|
if (jobId === 0) {
|
|
return COLORS.department.captain;
|
|
}
|
|
if (jobId >= 10 && jobId < 20) {
|
|
return COLORS.department.security;
|
|
}
|
|
if (jobId >= 20 && jobId < 30) {
|
|
return COLORS.department.medbay;
|
|
}
|
|
if (jobId >= 30 && jobId < 40) {
|
|
return COLORS.department.science;
|
|
}
|
|
if (jobId >= 40 && jobId < 50) {
|
|
return COLORS.department.engineering;
|
|
}
|
|
if (jobId >= 50 && jobId < 60) {
|
|
return COLORS.department.cargo;
|
|
}
|
|
if (jobId >= 200 && jobId < 230) {
|
|
return COLORS.department.centcom;
|
|
}
|
|
return COLORS.department.other;
|
|
};
|
|
|
|
const healthToColor = (oxy, tox, burn, brute) => {
|
|
const healthSum = oxy + tox + burn + brute;
|
|
const level = Math.min(Math.max(Math.ceil(healthSum / 25), 0), 5);
|
|
return HEALTH_COLOR_BY_LEVEL[level];
|
|
};
|
|
|
|
const HealthStat = props => {
|
|
const { type, value } = props;
|
|
return (
|
|
<Box
|
|
inline
|
|
width={4}
|
|
color={COLORS.damageType[type]}
|
|
textAlign="center">
|
|
{value}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export const CrewConsole = props => {
|
|
const { act, data } = useBackend(props);
|
|
const sensors = data.sensors || [];
|
|
return (
|
|
<Section minHeight={90}>
|
|
<Table>
|
|
<Table.Row>
|
|
<Table.Cell bold>
|
|
Name
|
|
</Table.Cell>
|
|
<Table.Cell bold collapsing />
|
|
<Table.Cell bold collapsing textAlign="center">
|
|
Vitals
|
|
</Table.Cell>
|
|
<Table.Cell bold>
|
|
Position
|
|
</Table.Cell>
|
|
{!!data.link_allowed && (
|
|
<Table.Cell bold collapsing>
|
|
Tracking
|
|
</Table.Cell>
|
|
)}
|
|
</Table.Row>
|
|
{sensors.map(sensor => (
|
|
<Table.Row key={sensor.name}>
|
|
<Table.Cell
|
|
bold={jobIsHead(sensor.ijob)}
|
|
color={jobToColor(sensor.ijob)}>
|
|
{sensor.name} ({sensor.assignment})
|
|
</Table.Cell>
|
|
<Table.Cell collapsing textAlign="center">
|
|
<ColorBox
|
|
color={healthToColor(
|
|
sensor.oxydam,
|
|
sensor.toxdam,
|
|
sensor.burndam,
|
|
sensor.brutedam)} />
|
|
</Table.Cell>
|
|
<Table.Cell collapsing textAlign="center">
|
|
{sensor.oxydam !== null ? (
|
|
<Box inline>
|
|
<HealthStat type="oxy" value={sensor.oxydam} />
|
|
{'/'}
|
|
<HealthStat type="toxin" value={sensor.toxdam} />
|
|
{'/'}
|
|
<HealthStat type="burn" value={sensor.burndam} />
|
|
{'/'}
|
|
<HealthStat type="brute" value={sensor.brutedam} />
|
|
</Box>
|
|
) : (
|
|
sensor.life_status ? 'Alive' : 'Dead'
|
|
)}
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
{sensor.pos_x !== null ? sensor.area : 'N/A'}
|
|
</Table.Cell>
|
|
{!!data.link_allowed && (
|
|
<Table.Cell collapsing>
|
|
<Button
|
|
content="Track"
|
|
disabled={!sensor.can_track}
|
|
onClick={() => act('select_person', {
|
|
name: sensor.name,
|
|
})} />
|
|
</Table.Cell>
|
|
)}
|
|
</Table.Row>
|
|
))}
|
|
</Table>
|
|
</Section>
|
|
);
|
|
};
|