cyberpresidentvanellope/S.P.L.U.R.T-Station-13
1
0
Fork 0
mirror of https://github.com/SPLURT-Station/S.P.L.U.R.T-Station-13.git synced 2025-12-09 16:07:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Makes it prim and proper

Browse Source
This commit is contained in:
Artur
2020-05-07 19:31:09 +03:00
parent 50881d42fd
commit 9212969657
2 changed files with 191 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
tgui/packages/tgui/interfaces/ChemMaster.js
View File

@@ -1,11 +1,26 @@
import { Component, Fragment } from 'inferno'; import { Fragment } from 'inferno';
import { act } from '../byond'; import { useBackend, useSharedState } from '../backend';
import { AnimatedNumber, Box, Button, ColorBox, LabeledList, NumberInput, Section, Table } from '../components'; import { AnimatedNumber, Box, Button, ColorBox, LabeledList, NumberInput, Section, Table } from '../components';
import { Window } from '../layouts';
export const ChemMaster = props => { export const ChemMaster = (props, context) => {
const { state } = props; const { data } = useBackend(context);
const { config, data } = state; const { screen } = data;
const { ref } = config; return (
<Window resizable>
<Window.Content scrollable>
{screen === 'analyze' && (
<AnalysisResults />
) || (
<ChemMasterContent />
)}
</Window.Content>
</Window>
);
};
const ChemMasterContent = (props, context) => {
const { act, data } = useBackend(context);
const { const {
screen, screen,
beakerContents = [], beakerContents = [],
@@ -17,7 +32,9 @@ export const ChemMaster = props => {
pillBottleCurrentAmount, pillBottleCurrentAmount,
pillBottleMaxAmount, pillBottleMaxAmount,
} = data; } = data;
if (screen === 'analyze') {
return <AnalysisResults />;
}
return ( return (
<Fragment> <Fragment>
<Section <Section
@@ -33,7 +50,7 @@ export const ChemMaster = props => {
<Button <Button
icon="eject" icon="eject"
content="Eject" content="Eject"
onClick={() => act(ref, 'eject')} /> onClick={() => act('eject')} />
</Fragment> </Fragment>
)}> )}>
{!isBeakerLoaded && ( {!isBeakerLoaded && (
@@ -50,7 +67,6 @@ export const ChemMaster = props => {
{beakerContents.map(chemical => ( {beakerContents.map(chemical => (
<ChemicalBufferEntry <ChemicalBufferEntry
key={chemical.id} key={chemical.id}
state={state}
chemical={chemical} chemical={chemical}
transferTo="buffer" /> transferTo="buffer" />
))} ))}
@@ -67,7 +83,7 @@ export const ChemMaster = props => {
color={data.mode ? 'good' : 'bad'} color={data.mode ? 'good' : 'bad'}
icon={data.mode ? 'exchange-alt' : 'times'} icon={data.mode ? 'exchange-alt' : 'times'}
content={data.mode ? 'Transfer' : 'Destroy'} content={data.mode ? 'Transfer' : 'Destroy'}
onClick={() => act(ref, 'toggleMode')} /> onClick={() => act('toggleMode')} />
</Fragment> </Fragment>
)}> )}>
{bufferContents.length === 0 && ( {bufferContents.length === 0 && (
@@ -79,7 +95,6 @@ export const ChemMaster = props => {
{bufferContents.map(chemical => ( {bufferContents.map(chemical => (
<ChemicalBufferEntry <ChemicalBufferEntry
key={chemical.id} key={chemical.id}
state={state}
chemical={chemical} chemical={chemical}
transferTo="beaker" /> transferTo="beaker" />
))} ))}
@@ -87,7 +102,7 @@ export const ChemMaster = props => {
</Section> </Section>
<Section <Section
title="Packaging"> title="Packaging">
<PackagingControls state={state} /> <PackagingControls />
</Section> </Section>
{!!isPillBottleLoaded && ( {!!isPillBottleLoaded && (
<Section <Section
@@ -100,7 +115,7 @@ export const ChemMaster = props => {
<Button <Button
icon="eject" icon="eject"
content="Eject" content="Eject"
onClick={() => act(ref, 'ejectPillBottle')} /> onClick={() => act('ejectPillBottle')} />
</Fragment> </Fragment>
)} /> )} />
)} )}
@@ -110,9 +125,9 @@ export const ChemMaster = props => {
const ChemicalBuffer = Table; const ChemicalBuffer = Table;
const ChemicalBufferEntry = props => { const ChemicalBufferEntry = (props, context) => {
const { state, chemical, transferTo } = props; const { act } = useBackend(context);
const { ref } = state.config; const { chemical, transferTo } = props;
return ( return (
<Table.Row key={chemical.id}> <Table.Row key={chemical.id}>
<Table.Cell color="label"> <Table.Cell color="label">
@@ -124,28 +139,28 @@ const ChemicalBufferEntry = props => {
<Table.Cell collapsing> <Table.Cell collapsing>
<Button <Button
content="1" content="1"
onClick={() => act(ref, 'transfer', { onClick={() => act('transfer', {
id: chemical.id, id: chemical.id,
amount: 1, amount: 1,
to: transferTo, to: transferTo,
})} /> })} />
<Button <Button
content="5" content="5"
onClick={() => act(ref, 'transfer', { onClick={() => act('transfer', {
id: chemical.id, id: chemical.id,
amount: 5, amount: 5,
to: transferTo, to: transferTo,
})} /> })} />
<Button <Button
content="10" content="10"
onClick={() => act(ref, 'transfer', { onClick={() => act('transfer', {
id: chemical.id, id: chemical.id,
amount: 10, amount: 10,
to: transferTo, to: transferTo,
})} /> })} />
<Button <Button
content="All" content="All"
onClick={() => act(ref, 'transfer', { onClick={() => act('transfer', {
id: chemical.id, id: chemical.id,
amount: 1000, amount: 1000,
to: transferTo, to: transferTo,
@@ -153,7 +168,7 @@ const ChemicalBufferEntry = props => {
<Button <Button
icon="ellipsis-h" icon="ellipsis-h"
title="Custom amount" title="Custom amount"
onClick={() => act(ref, 'transfer', { onClick={() => act('transfer', {
id: chemical.id, id: chemical.id,
amount: -1, amount: -1,
to: transferTo, to: transferTo,
@@ -161,7 +176,7 @@ const ChemicalBufferEntry = props => {
<Button <Button
icon="question" icon="question"
title="Analyze" title="Analyze"
onClick={() => act(ref, 'analyze', { onClick={() => act('analyze', {
id: chemical.id, id: chemical.id,
})} /> })} />
</Table.Cell> </Table.Cell>
@@ -181,7 +196,7 @@ const PackagingControlsItem = props => {
return ( return (
<LabeledList.Item label={label}> <LabeledList.Item label={label}>
<NumberInput <NumberInput
width={14} width="84px"
unit={amountUnit} unit={amountUnit}
step={1} step={1}
stepPixelSize={15} stepPixelSize={15}
@@ -189,176 +204,165 @@ const PackagingControlsItem = props => {
minValue={1} minValue={1}
maxValue={10} maxValue={10}
onChange={onChangeAmount} /> onChange={onChangeAmount} />
<Button ml={1} <Button
ml={1}
content="Create" content="Create"
onClick={onCreate} /> onClick={onCreate} />
<Box inline ml={1} <Box inline ml={1} color="label">
color="label" {sideNote}
content={sideNote} /> </Box>
</LabeledList.Item> </LabeledList.Item>
); );
}; };
class PackagingControls extends Component { const PackagingControls = (props, context) => {
constructor() { const { act, data } = useBackend(context);
super(); const [
this.state = { pillAmount,
pillAmount: 1, setPillAmount,
patchAmount: 1,
bottleAmount: 1,
packAmount: 1,
vialAmount: 1,
dartAmount: 1,
};
}
render() { ] = useSharedState(context, 'pillAmount', 1);
const { state, props } = this; const [
const { ref } = props.state.config; patchAmount,
const { setPatchAmount,
pillAmount, ] = useSharedState(context, 'patchAmount', 1);
patchAmount, const [
bottleAmount, bottleAmount,
packAmount, setBottleAmount,
vialAmount, ] = useSharedState(context, 'bottleAmount', 1);
dartAmount, const [
} = this.state; packAmount,
const { setPackAmount,
condi, ] = useSharedState(context, 'packAmount', 1);
chosenPillStyle, const [
pillStyles = [], vialAmount,
} = props.state.data; setvialAmount,
return ( ] = useSharedState(context, 'setvialAmount', 1);
<LabeledList> const [
{!condi && ( dartAmount,
<LabeledList.Item label="Pill type"> setdartAmount,
{pillStyles.map(pill => ( ] = useSharedState(context, 'setdartAmount', 1);
<Button const {
key={pill.id} condi,
width={5} chosenPillStyle,
selected={pill.id === chosenPillStyle} pillStyles = [],
textAlign="center" } = data;
color="transparent" return (
onClick={() => act(ref, 'pillStyle', { id: pill.id })}> <LabeledList>
<Box mx={-1} className={pill.className} /> {!condi && (
</Button> <LabeledList.Item label="Pill type">
))} {pillStyles.map(pill => (
</LabeledList.Item> <Button
)} key={pill.id}
{!condi && ( width="30px"
<PackagingControlsItem selected={pill.id === chosenPillStyle}
label="Pills" textAlign="center"
amount={pillAmount} color="transparent"
amountUnit="pills" onClick={() => act('pillStyle', { id: pill.id })}>
sideNote="max 50u" <Box mx={-1} className={pill.className} />
onChangeAmount={(e, value) => this.setState({ </Button>
pillAmount: value, ))}
})} </LabeledList.Item>
onCreate={() => act(ref, 'create', { )}
type: 'pill', {!condi && (
amount: pillAmount, <PackagingControlsItem
volume: 'auto', label="Pills"
})} /> amount={pillAmount}
)} amountUnit="pills"
{!condi && ( sideNote="max 50u"
<PackagingControlsItem onChangeAmount={(e, value) => setPillAmount(value)}
label="Patches" onCreate={() => act('create', {
amount={patchAmount} type: 'pill',
amountUnit="patches" amount: pillAmount,
sideNote="max 40u" volume: 'auto',
onChangeAmount={(e, value) => this.setState({ })} />
patchAmount: value, )}
})} {!condi && (
onCreate={() => act(ref, 'create', { <PackagingControlsItem
type: 'patch', label="Patches"
amount: patchAmount, amount={patchAmount}
volume: 'auto', amountUnit="patches"
})} /> sideNote="max 40u"
)} onChangeAmount={(e, value) => setPatchAmount(value)}
{!condi && ( onCreate={() => act('create', {
<PackagingControlsItem type: 'patch',
label="Bottles" amount: patchAmount,
amount={bottleAmount} volume: 'auto',
amountUnit="bottles" })} />
sideNote="max 30u" )}
onChangeAmount={(e, value) => this.setState({ {!condi && (
bottleAmount: value, <PackagingControlsItem
})} label="Bottles"
onCreate={() => act(ref, 'create', { amount={bottleAmount}
type: 'bottle', amountUnit="bottles"
amount: bottleAmount, sideNote="max 30u"
volume: 'auto', onChangeAmount={(e, value) => setBottleAmount(value)}
})} /> onCreate={() => act('create', {
)} type: 'bottle',
{!condi && ( amount: bottleAmount,
<PackagingControlsItem volume: 'auto',
label="Hypovials" })} />
amount={vialAmount} )}
amountUnit="vials" {!condi && (
sideNote="max 60u" <PackagingControlsItem
onChangeAmount={(e, value) => this.setState({ label="Hypovials"
vialAmount: value, amount={vialAmount}
})} amountUnit="vials"
onCreate={() => act(ref, 'create', { sideNote="max 60u"
type: 'hypoVial', onChangeAmount={(e, value) => setvialAmount(value)}
amount: vialAmount, onCreate={() => act('create', {
volume: 'auto', type: 'hypoVial',
})} /> amount: vialAmount,
)} volume: 'auto',
{!condi && ( })} />
<PackagingControlsItem )}
label="Smartdarts" {!condi && (
amount={dartAmount} <PackagingControlsItem
amountUnit="darts" label="Smartdarts"
sideNote="max 20u" amount={dartAmount}
onChangeAmount={(e, value) => this.setState({ amountUnit="darts"
dartAmount: value, sideNote="max 20u"
})} onChangeAmount={(e, value) => setdartAmount(value)}
onCreate={() => act(ref, 'create', { onCreate={() => act('create', {
type: 'smartDart', type: 'smartDart',
amount: dartAmount, amount: dartAmount,
volume: 'auto', volume: 'auto',
})} /> })} />
)} )}
{!!condi && ( {!!condi && (
<PackagingControlsItem <PackagingControlsItem
label="Packs" label="Packs"
amount={packAmount} amount={packAmount}
amountUnit="packs" amountUnit="packs"
sideNote="max 10u" sideNote="max 10u"
onChangeAmount={(e, value) => this.setState({ onChangeAmount={(e, value) => setPackAmount(value)}
packAmount: value, onCreate={() => act('create', {
})} type: 'condimentPack',
onCreate={() => act(ref, 'create', { amount: packAmount,
type: 'condimentPack', volume: 'auto',
amount: packAmount, })} />
volume: 'auto', )}
})} /> {!!condi && (
)} <PackagingControlsItem
{!!condi && ( label="Bottles"
<PackagingControlsItem amount={bottleAmount}
label="Bottles" amountUnit="bottles"
amount={bottleAmount} sideNote="max 50u"
amountUnit="bottles" onChangeAmount={(e, value) => setBottleAmount(value)}
sideNote="max 50u" onCreate={() => act('create', {
onChangeAmount={(e, value) => this.setState({ type: 'condimentBottle',
bottleAmount: value, amount: bottleAmount,
})} volume: 'auto',
onCreate={() => act(ref, 'create', { })} />
type: 'condimentBottle', )}
amount: bottleAmount, </LabeledList>
volume: 'auto', );
})} /> };
)}
</LabeledList>
);
}
}
const AnalysisResults = props => { const AnalysisResults = (props, context) => {
const { state, fermianalyze } = props; const { act, data } = useBackend(context);
const { ref } = state.config; const { fermianalyze } = props;
const { analyzeVars } = state.data; const { analyzeVars } = data;
return ( return (
<Section <Section
title="Analysis Results" title="Analysis Results"
@@ -366,7 +370,7 @@ const AnalysisResults = props => {
<Button <Button
icon="arrow-left" icon="arrow-left"
content="Back" content="Back"
onClick={() => act(ref, 'goScreen', { onClick={() => act('goScreen', {
screen: 'home', screen: 'home',
})} /> })} />
)}> )}>

2
tgui/packages/tgui/public/tgui.bundle.js
View File

File diff suppressed because one or more lines are too long