Files
GS13NG/tgui-next/packages/tgui/interfaces/BorgPanel.js

136 lines
4.5 KiB
JavaScript

import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
export const BorgPanel = props => {
const { act, data } = useBackend(props);
const borg = data.borg || {};
const cell = data.cell || {};
const cellPercent = cell.charge / cell.maxcharge;
const channels = data.channels || [];
const modules = data.modules || [];
const upgrades = data.upgrades || [];
const ais = data.ais || [];
const laws = data.laws || [];
return (
<Fragment>
<Section
title={borg.name}
buttons={(
<Button
icon="pencil-alt"
content="Rename"
onClick={() => act('rename')} />
)}>
<LabeledList>
<LabeledList.Item label="Status">
<Button
icon={borg.emagged ? 'check-square-o' : 'square-o'}
content="Emagged"
selected={borg.emagged}
onClick={() => act('toggle_emagged')} />
<Button
icon={borg.lockdown ? 'check-square-o' : 'square-o'}
content="Locked Down"
selected={borg.lockdown}
onClick={() => act('toggle_lockdown')} />
<Button
icon={borg.scrambledcodes ? 'check-square-o' : 'square-o'}
content="Scrambled Codes"
selected={borg.scrambledcodes}
onClick={() => act('toggle_scrambledcodes')} />
</LabeledList.Item>
<LabeledList.Item label="Charge">
{!cell.missing ? (
<ProgressBar
value={cellPercent}
content={cell.charge + ' / ' + cell.maxcharge} />
) : (
<span className="color-bad">No cell installed</span>
) }
<br />
<Button
icon="pencil-alt"
content="Set"
onClick={() => act('set_charge')} />
<Button
icon="eject"
content="Change"
onClick={() => act('change_cell')} />
<Button
icon="trash"
content="Remove"
color="bad"
onClick={() => act('remove_cell')} />
</LabeledList.Item>
<LabeledList.Item label="Radio Channels">
{channels.map(channel => (
<Button
key={channel.name}
icon={channel.installed ? 'check-square-o' : 'square-o'}
content={channel.name}
selected={channel.installed}
onClick={() => act('toggle_radio', {
channel: channel.name,
})} />
))}
</LabeledList.Item>
<LabeledList.Item label="Module">
{modules.map(module => (
<Button
key={module.type}
icon={borg.active_module === module.type
? 'check-square-o'
: 'square-o'}
content={module.name}
selected={borg.active_module === module.type}
onClick={() => act('setmodule', {
module: module.type,
})} />
))}
</LabeledList.Item>
<LabeledList.Item label="Upgrades">
{upgrades.map(upgrade => (
<Button
key={upgrade.type}
icon={upgrade.installed ? 'check-square-o' : 'square-o'}
content={upgrade.name}
selected={upgrade.installed}
onClick={() => act('toggle_upgrade', {
upgrade: upgrade.type,
})} />
))}
</LabeledList.Item>
<LabeledList.Item label="Master AI">
{ais.map(ai => (
<Button
key={ai.ref}
icon={ai.connected ? 'check-square-o' : 'square-o'}
content={ai.name}
selected={ai.connected}
onClick={() => act('slavetoai', {
slavetoai: ai.ref,
})} />
))}
</LabeledList.Item>
</LabeledList>
</Section>
<Section
title="Laws"
buttons={(
<Button
icon={borg.lawupdate ? 'check-square-o' : 'square-o'}
content="Lawsync"
selected={borg.lawupdate}
onClick={() => act('toggle_lawupdate')} />
)}>
{laws.map(law => (
<Box key={law}>
{law}
</Box>
))}
</Section>
</Fragment>
);
};