Ready for testmerge
This commit is contained in:
Artur
@@ -1,180 +0,0 @@
|
||||
import { toFixed } from 'common/math';
|
||||
import { toTitleCase } from 'common/string';
|
||||
import { Fragment } from 'inferno';
|
||||
import { useBackend } from '../backend';
|
||||
import { AnimatedNumber, Box, Button, Icon, LabeledList, ProgressBar, Section } from '../components';
|
||||
|
||||
export const ChemDispenser = props => {
|
||||
const { act, data } = useBackend(props);
|
||||
const recording = !!data.recordingRecipe;
|
||||
// TODO: Change how this piece of shit is built on server side
|
||||
// It has to be a list, not a fucking OBJECT!
|
||||
const recipes = Object.keys(data.recipes)
|
||||
.map(name => ({
|
||||
name,
|
||||
contents: data.recipes[name],
|
||||
}));
|
||||
const beakerTransferAmounts = data.beakerTransferAmounts || [];
|
||||
const beakerContents = recording
|
||||
&& Object.keys(data.recordingRecipe)
|
||||
.map(id => ({
|
||||
id,
|
||||
name: toTitleCase(id.replace(/_/, ' ')),
|
||||
volume: data.recordingRecipe[id],
|
||||
}))
|
||||
|| data.beakerContents
|
||||
|| [];
|
||||
return (
|
||||
<Fragment>
|
||||
<Section
|
||||
title="Status"
|
||||
buttons={recording && (
|
||||
<Box inline mx={1} color="red">
|
||||
<Icon name="circle" mr={1} />
|
||||
Recording
|
||||
</Box>
|
||||
)}>
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Energy">
|
||||
<ProgressBar
|
||||
value={data.energy / data.maxEnergy}
|
||||
content={toFixed(data.energy) + ' units'} />
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
<Section
|
||||
title="Recipes"
|
||||
buttons={(
|
||||
<Fragment>
|
||||
{!recording && (
|
||||
<Box inline mx={1}>
|
||||
<Button
|
||||
color="transparent"
|
||||
content="Clear recipes"
|
||||
onClick={() => act('clear_recipes')} />
|
||||
</Box>
|
||||
)}
|
||||
{!recording && (
|
||||
<Button
|
||||
icon="circle"
|
||||
disabled={!data.isBeakerLoaded}
|
||||
content="Record"
|
||||
onClick={() => act('record_recipe')} />
|
||||
)}
|
||||
{recording && (
|
||||
<Button
|
||||
icon="ban"
|
||||
color="transparent"
|
||||
content="Discard"
|
||||
onClick={() => act('cancel_recording')} />
|
||||
)}
|
||||
{recording && (
|
||||
<Button
|
||||
icon="save"
|
||||
color="green"
|
||||
content="Save"
|
||||
onClick={() => act('save_recording')} />
|
||||
)}
|
||||
</Fragment>
|
||||
)}>
|
||||
<Box mr={-1}>
|
||||
{recipes.map(recipe => (
|
||||
<Button key={recipe.name}
|
||||
icon="tint"
|
||||
width="129.5px"
|
||||
lineHeight="21px"
|
||||
content={recipe.name}
|
||||
onClick={() => act('dispense_recipe', {
|
||||
recipe: recipe.name,
|
||||
})} />
|
||||
))}
|
||||
{recipes.length === 0 && (
|
||||
<Box color="light-gray">
|
||||
No recipes.
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Section>
|
||||
<Section
|
||||
title="Dispense"
|
||||
buttons={(
|
||||
beakerTransferAmounts.map(amount => (
|
||||
<Button key={amount}
|
||||
icon="plus"
|
||||
selected={amount === data.amount}
|
||||
content={amount}
|
||||
onClick={() => act('amount', {
|
||||
target: amount,
|
||||
})} />
|
||||
))
|
||||
)}>
|
||||
<Box mr={-1}>
|
||||
{data.chemicals.map(chemical => (
|
||||
<Button key={chemical.id}
|
||||
icon="tint"
|
||||
width="129.5px"
|
||||
lineHeight="21px"
|
||||
content={chemical.title}
|
||||
onClick={() => act('dispense', {
|
||||
reagent: chemical.id,
|
||||
})} />
|
||||
))}
|
||||
</Box>
|
||||
</Section>
|
||||
<Section
|
||||
title="Beaker"
|
||||
buttons={(
|
||||
beakerTransferAmounts.map(amount => (
|
||||
<Button key={amount}
|
||||
icon="minus"
|
||||
disabled={recording}
|
||||
content={amount}
|
||||
onClick={() => act('remove', { amount })} />
|
||||
))
|
||||
)}>
|
||||
<LabeledList>
|
||||
<LabeledList.Item
|
||||
label="Beaker"
|
||||
buttons={!!data.isBeakerLoaded && (
|
||||
<Button
|
||||
icon="eject"
|
||||
content="Eject"
|
||||
disabled={!data.isBeakerLoaded}
|
||||
onClick={() => act('eject')} />
|
||||
)}>
|
||||
{recording
|
||||
&& 'Virtual beaker'
|
||||
|| data.isBeakerLoaded
|
||||
&& (
|
||||
<Fragment>
|
||||
<AnimatedNumber
|
||||
initial={0}
|
||||
value={data.beakerCurrentVolume} />
|
||||
/{data.beakerMaxVolume} units
|
||||
</Fragment>
|
||||
)
|
||||
|| 'No beaker'}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item
|
||||
label="Contents">
|
||||
<Box color="label">
|
||||
{(!data.isBeakerLoaded && !recording) && 'N/A'
|
||||
|| beakerContents.length === 0 && 'Nothing'}
|
||||
</Box>
|
||||
{beakerContents.map(chemical => (
|
||||
<Box
|
||||
key={chemical.name}
|
||||
color="label">
|
||||
<AnimatedNumber
|
||||
initial={0}
|
||||
value={chemical.volume} />
|
||||
{' '}
|
||||
units of {chemical.name}
|
||||
</Box>
|
||||
))}
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
import { round, toFixed } from 'common/math';
|
||||
import { Fragment } from 'inferno';
|
||||
import { useBackend } from '../backend';
|
||||
import { AnimatedNumber, Box, Button, LabeledList, NumberInput, Section } from '../components';
|
||||
import { BeakerContents } from './common/BeakerContents';
|
||||
|
||||
export const ChemHeater = props => {
|
||||
const { act, data } = useBackend(props);
|
||||
const {
|
||||
targetTemp,
|
||||
isActive,
|
||||
isBeakerLoaded,
|
||||
currentTemp,
|
||||
beakerCurrentVolume,
|
||||
beakerMaxVolume,
|
||||
beakerContents = [],
|
||||
} = data;
|
||||
return (
|
||||
<Fragment>
|
||||
<Section
|
||||
title="Thermostat"
|
||||
buttons={(
|
||||
<Button
|
||||
icon={isActive ? 'power-off' : 'times'}
|
||||
selected={isActive}
|
||||
content={isActive ? 'On' : 'Off'}
|
||||
onClick={() => act('power')} />
|
||||
)}>
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Target">
|
||||
<NumberInput
|
||||
width="65px"
|
||||
unit="K"
|
||||
step={2}
|
||||
stepPixelSize={1}
|
||||
value={round(targetTemp)}
|
||||
minValue={0}
|
||||
maxValue={1000}
|
||||
onDrag={(e, value) => act('temperature', {
|
||||
target: value,
|
||||
})} />
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Reading">
|
||||
<Box
|
||||
width="60px"
|
||||
textAlign="right">
|
||||
{isBeakerLoaded && (
|
||||
<AnimatedNumber
|
||||
value={currentTemp}
|
||||
format={value => toFixed(value) + ' K'} />
|
||||
) || '—'}
|
||||
</Box>
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
<Section
|
||||
title="Beaker"
|
||||
buttons={!!isBeakerLoaded && (
|
||||
<Fragment>
|
||||
<Box inline color="label" mr={2}>
|
||||
{beakerCurrentVolume} / {beakerMaxVolume} units
|
||||
</Box>
|
||||
<Button
|
||||
icon="eject"
|
||||
content="Eject"
|
||||
onClick={() => act('eject')} />
|
||||
</Fragment>
|
||||
)}>
|
||||
<BeakerContents
|
||||
beakerLoaded={isBeakerLoaded}
|
||||
beakerContents={beakerContents} />
|
||||
</Section>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
@@ -1,367 +0,0 @@
|
||||
import { Component, Fragment } from 'inferno';
|
||||
import { act } from '../byond';
|
||||
import { AnimatedNumber, Box, Button, ColorBox, LabeledList, NumberInput, Section, Table } from '../components';
|
||||
|
||||
export const ChemMaster = props => {
|
||||
const { state } = props;
|
||||
const { config, data } = state;
|
||||
const { ref } = config;
|
||||
const {
|
||||
screen,
|
||||
beakerContents = [],
|
||||
bufferContents = [],
|
||||
beakerCurrentVolume,
|
||||
beakerMaxVolume,
|
||||
isBeakerLoaded,
|
||||
isPillBottleLoaded,
|
||||
pillBottleCurrentAmount,
|
||||
pillBottleMaxAmount,
|
||||
} = data;
|
||||
if (screen === 'analyze') {
|
||||
return <AnalysisResults state={state} />;
|
||||
}
|
||||
return (
|
||||
<Fragment>
|
||||
<Section
|
||||
title="Beaker"
|
||||
buttons={!!data.isBeakerLoaded && (
|
||||
<Fragment>
|
||||
<Box inline color="label" mr={2}>
|
||||
<AnimatedNumber
|
||||
value={beakerCurrentVolume}
|
||||
initial={0} />
|
||||
{` / ${beakerMaxVolume} units`}
|
||||
</Box>
|
||||
<Button
|
||||
icon="eject"
|
||||
content="Eject"
|
||||
onClick={() => act(ref, 'eject')} />
|
||||
</Fragment>
|
||||
)}>
|
||||
{!isBeakerLoaded && (
|
||||
<Box color="label" mt="3px" mb="5px">
|
||||
No beaker loaded.
|
||||
</Box>
|
||||
)}
|
||||
{!!isBeakerLoaded && beakerContents.length === 0 && (
|
||||
<Box color="label" mt="3px" mb="5px">
|
||||
Beaker is empty.
|
||||
</Box>
|
||||
)}
|
||||
<ChemicalBuffer>
|
||||
{beakerContents.map(chemical => (
|
||||
<ChemicalBufferEntry
|
||||
key={chemical.id}
|
||||
state={state}
|
||||
chemical={chemical}
|
||||
transferTo="buffer" />
|
||||
))}
|
||||
</ChemicalBuffer>
|
||||
</Section>
|
||||
<Section
|
||||
title="Buffer"
|
||||
buttons={(
|
||||
<Fragment>
|
||||
<Box inline color="label" mr={1}>
|
||||
Mode:
|
||||
</Box>
|
||||
<Button
|
||||
color={data.mode ? 'good' : 'bad'}
|
||||
icon={data.mode ? 'exchange-alt' : 'times'}
|
||||
content={data.mode ? 'Transfer' : 'Destroy'}
|
||||
onClick={() => act(ref, 'toggleMode')} />
|
||||
</Fragment>
|
||||
)}>
|
||||
{bufferContents.length === 0 && (
|
||||
<Box color="label" mt="3px" mb="5px">
|
||||
Buffer is empty.
|
||||
</Box>
|
||||
)}
|
||||
<ChemicalBuffer>
|
||||
{bufferContents.map(chemical => (
|
||||
<ChemicalBufferEntry
|
||||
key={chemical.id}
|
||||
state={state}
|
||||
chemical={chemical}
|
||||
transferTo="beaker" />
|
||||
))}
|
||||
</ChemicalBuffer>
|
||||
</Section>
|
||||
<Section
|
||||
title="Packaging">
|
||||
<PackagingControls state={state} />
|
||||
</Section>
|
||||
{!!isPillBottleLoaded && (
|
||||
<Section
|
||||
title="Pill Bottle"
|
||||
buttons={(
|
||||
<Fragment>
|
||||
<Box inline color="label" mr={2}>
|
||||
{pillBottleCurrentAmount} / {pillBottleMaxAmount} pills
|
||||
</Box>
|
||||
<Button
|
||||
icon="eject"
|
||||
content="Eject"
|
||||
onClick={() => act(ref, 'ejectPillBottle')} />
|
||||
</Fragment>
|
||||
)} />
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const ChemicalBuffer = Table;
|
||||
|
||||
const ChemicalBufferEntry = props => {
|
||||
const { state, chemical, transferTo } = props;
|
||||
const { ref } = state.config;
|
||||
return (
|
||||
<Table.Row key={chemical.id}>
|
||||
<Table.Cell color="label">
|
||||
<AnimatedNumber
|
||||
value={chemical.volume}
|
||||
initial={0} />
|
||||
{` units of ${chemical.name}`}
|
||||
</Table.Cell>
|
||||
<Table.Cell collapsing>
|
||||
<Button
|
||||
content="1"
|
||||
onClick={() => act(ref, 'transfer', {
|
||||
id: chemical.id,
|
||||
amount: 1,
|
||||
to: transferTo,
|
||||
})} />
|
||||
<Button
|
||||
content="5"
|
||||
onClick={() => act(ref, 'transfer', {
|
||||
id: chemical.id,
|
||||
amount: 5,
|
||||
to: transferTo,
|
||||
})} />
|
||||
<Button
|
||||
content="10"
|
||||
onClick={() => act(ref, 'transfer', {
|
||||
id: chemical.id,
|
||||
amount: 10,
|
||||
to: transferTo,
|
||||
})} />
|
||||
<Button
|
||||
content="All"
|
||||
onClick={() => act(ref, 'transfer', {
|
||||
id: chemical.id,
|
||||
amount: 1000,
|
||||
to: transferTo,
|
||||
})} />
|
||||
<Button
|
||||
icon="ellipsis-h"
|
||||
title="Custom amount"
|
||||
onClick={() => act(ref, 'transfer', {
|
||||
id: chemical.id,
|
||||
amount: -1,
|
||||
to: transferTo,
|
||||
})} />
|
||||
<Button
|
||||
icon="question"
|
||||
title="Analyze"
|
||||
onClick={() => act(ref, 'analyze', {
|
||||
id: chemical.id,
|
||||
})} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
);
|
||||
};
|
||||
|
||||
const PackagingControlsItem = props => {
|
||||
const {
|
||||
label,
|
||||
amountUnit,
|
||||
amount,
|
||||
onChangeAmount,
|
||||
onCreate,
|
||||
sideNote,
|
||||
} = props;
|
||||
return (
|
||||
<LabeledList.Item label={label}>
|
||||
<NumberInput
|
||||
width={14}
|
||||
unit={amountUnit}
|
||||
step={1}
|
||||
stepPixelSize={15}
|
||||
value={amount}
|
||||
minValue={1}
|
||||
maxValue={10}
|
||||
onChange={onChangeAmount} />
|
||||
<Button ml={1}
|
||||
content="Create"
|
||||
onClick={onCreate} />
|
||||
<Box inline ml={1}
|
||||
color="label"
|
||||
content={sideNote} />
|
||||
</LabeledList.Item>
|
||||
);
|
||||
};
|
||||
|
||||
class PackagingControls extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
pillAmount: 1,
|
||||
patchAmount: 1,
|
||||
bottleAmount: 1,
|
||||
packAmount: 1,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { state, props } = this;
|
||||
const { ref } = props.state.config;
|
||||
const {
|
||||
pillAmount,
|
||||
patchAmount,
|
||||
bottleAmount,
|
||||
packAmount,
|
||||
} = this.state;
|
||||
const {
|
||||
condi,
|
||||
chosenPillStyle,
|
||||
pillStyles = [],
|
||||
} = props.state.data;
|
||||
return (
|
||||
<LabeledList>
|
||||
{!condi && (
|
||||
<LabeledList.Item label="Pill type">
|
||||
{pillStyles.map(pill => (
|
||||
<Button
|
||||
key={pill.id}
|
||||
width={5}
|
||||
selected={pill.id === chosenPillStyle}
|
||||
textAlign="center"
|
||||
color="transparent"
|
||||
onClick={() => act(ref, 'pillStyle', { id: pill.id })}>
|
||||
<Box mx={-1} className={pill.className} />
|
||||
</Button>
|
||||
))}
|
||||
</LabeledList.Item>
|
||||
)}
|
||||
{!condi && (
|
||||
<PackagingControlsItem
|
||||
label="Pills"
|
||||
amount={pillAmount}
|
||||
amountUnit="pills"
|
||||
sideNote="max 50u"
|
||||
onChangeAmount={(e, value) => this.setState({
|
||||
pillAmount: value,
|
||||
})}
|
||||
onCreate={() => act(ref, 'create', {
|
||||
type: 'pill',
|
||||
amount: pillAmount,
|
||||
volume: 'auto',
|
||||
})} />
|
||||
)}
|
||||
{!condi && (
|
||||
<PackagingControlsItem
|
||||
label="Patches"
|
||||
amount={patchAmount}
|
||||
amountUnit="patches"
|
||||
sideNote="max 40u"
|
||||
onChangeAmount={(e, value) => this.setState({
|
||||
patchAmount: value,
|
||||
})}
|
||||
onCreate={() => act(ref, 'create', {
|
||||
type: 'patch',
|
||||
amount: patchAmount,
|
||||
volume: 'auto',
|
||||
})} />
|
||||
)}
|
||||
{!condi && (
|
||||
<PackagingControlsItem
|
||||
label="Bottles"
|
||||
amount={bottleAmount}
|
||||
amountUnit="bottles"
|
||||
sideNote="max 30u"
|
||||
onChangeAmount={(e, value) => this.setState({
|
||||
bottleAmount: value,
|
||||
})}
|
||||
onCreate={() => act(ref, 'create', {
|
||||
type: 'bottle',
|
||||
amount: bottleAmount,
|
||||
volume: 'auto',
|
||||
})} />
|
||||
)}
|
||||
{!!condi && (
|
||||
<PackagingControlsItem
|
||||
label="Packs"
|
||||
amount={packAmount}
|
||||
amountUnit="packs"
|
||||
sideNote="max 10u"
|
||||
onChangeAmount={(e, value) => this.setState({
|
||||
packAmount: value,
|
||||
})}
|
||||
onCreate={() => act(ref, 'create', {
|
||||
type: 'condimentPack',
|
||||
amount: packAmount,
|
||||
volume: 'auto',
|
||||
})} />
|
||||
)}
|
||||
{!!condi && (
|
||||
<PackagingControlsItem
|
||||
label="Bottles"
|
||||
amount={bottleAmount}
|
||||
amountUnit="bottles"
|
||||
sideNote="max 50u"
|
||||
onChangeAmount={(e, value) => this.setState({
|
||||
bottleAmount: value,
|
||||
})}
|
||||
onCreate={() => act(ref, 'create', {
|
||||
type: 'condimentBottle',
|
||||
amount: bottleAmount,
|
||||
volume: 'auto',
|
||||
})} />
|
||||
)}
|
||||
</LabeledList>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const AnalysisResults = props => {
|
||||
const { state } = props;
|
||||
const { ref } = state.config;
|
||||
const { analyzeVars } = state.data;
|
||||
return (
|
||||
<Section
|
||||
title="Analysis Results"
|
||||
buttons={(
|
||||
<Button
|
||||
icon="arrow-left"
|
||||
content="Back"
|
||||
onClick={() => act(ref, 'goScreen', {
|
||||
screen: 'home',
|
||||
})} />
|
||||
)}>
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Name">
|
||||
{analyzeVars.name}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="State">
|
||||
{analyzeVars.state}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Color">
|
||||
<ColorBox color={analyzeVars.color} mr={1} />
|
||||
{analyzeVars.color}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Description">
|
||||
{analyzeVars.description}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Metabolization Rate">
|
||||
{analyzeVars.metaRate} u/minute
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Overdose Threshold">
|
||||
{analyzeVars.overD}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Addiction Threshold">
|
||||
{analyzeVars.addicD}
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user