diff --git a/tgui/packages/tgui/interfaces/ChemMaster.js b/tgui/packages/tgui/interfaces/ChemMaster.js index 1997b3b9b6..da89ee5c9d 100644 --- a/tgui/packages/tgui/interfaces/ChemMaster.js +++ b/tgui/packages/tgui/interfaces/ChemMaster.js @@ -1,11 +1,26 @@ -import { Component, Fragment } from 'inferno'; -import { act } from '../byond'; +import { Fragment } from 'inferno'; +import { useBackend, useSharedState } from '../backend'; import { AnimatedNumber, Box, Button, ColorBox, LabeledList, NumberInput, Section, Table } from '../components'; +import { Window } from '../layouts'; -export const ChemMaster = props => { - const { state } = props; - const { config, data } = state; - const { ref } = config; +export const ChemMaster = (props, context) => { + const { data } = useBackend(context); + const { screen } = data; + return ( + + + {screen === 'analyze' && ( + + ) || ( + + )} + + + ); +}; + +const ChemMasterContent = (props, context) => { + const { act, data } = useBackend(context); const { screen, beakerContents = [], @@ -17,7 +32,9 @@ export const ChemMaster = props => { pillBottleCurrentAmount, pillBottleMaxAmount, } = data; - + if (screen === 'analyze') { + return ; + } return (
{
- +
{!!isPillBottleLoaded && (
{ - ))} - - )} - {!condi && ( - this.setState({ - pillAmount: value, - })} - onCreate={() => act(ref, 'create', { - type: 'pill', - amount: pillAmount, - volume: 'auto', - })} /> - )} - {!condi && ( - this.setState({ - patchAmount: value, - })} - onCreate={() => act(ref, 'create', { - type: 'patch', - amount: patchAmount, - volume: 'auto', - })} /> - )} - {!condi && ( - this.setState({ - bottleAmount: value, - })} - onCreate={() => act(ref, 'create', { - type: 'bottle', - amount: bottleAmount, - volume: 'auto', - })} /> - )} - {!condi && ( - this.setState({ - vialAmount: value, - })} - onCreate={() => act(ref, 'create', { - type: 'hypoVial', - amount: vialAmount, - volume: 'auto', - })} /> - )} - {!condi && ( - this.setState({ - dartAmount: value, - })} - onCreate={() => act(ref, 'create', { - type: 'smartDart', - amount: dartAmount, - volume: 'auto', - })} /> - )} - {!!condi && ( - this.setState({ - packAmount: value, - })} - onCreate={() => act(ref, 'create', { - type: 'condimentPack', - amount: packAmount, - volume: 'auto', - })} /> - )} - {!!condi && ( - this.setState({ - bottleAmount: value, - })} - onCreate={() => act(ref, 'create', { - type: 'condimentBottle', - amount: bottleAmount, - volume: 'auto', - })} /> - )} - - ); - } -} + ] = useSharedState(context, 'pillAmount', 1); + const [ + patchAmount, + setPatchAmount, + ] = useSharedState(context, 'patchAmount', 1); + const [ + bottleAmount, + setBottleAmount, + ] = useSharedState(context, 'bottleAmount', 1); + const [ + packAmount, + setPackAmount, + ] = useSharedState(context, 'packAmount', 1); + const [ + vialAmount, + setvialAmount, + ] = useSharedState(context, 'setvialAmount', 1); + const [ + dartAmount, + setdartAmount, + ] = useSharedState(context, 'setdartAmount', 1); + const { + condi, + chosenPillStyle, + pillStyles = [], + } = data; + return ( + + {!condi && ( + + {pillStyles.map(pill => ( + + ))} + + )} + {!condi && ( + setPillAmount(value)} + onCreate={() => act('create', { + type: 'pill', + amount: pillAmount, + volume: 'auto', + })} /> + )} + {!condi && ( + setPatchAmount(value)} + onCreate={() => act('create', { + type: 'patch', + amount: patchAmount, + volume: 'auto', + })} /> + )} + {!condi && ( + setBottleAmount(value)} + onCreate={() => act('create', { + type: 'bottle', + amount: bottleAmount, + volume: 'auto', + })} /> + )} + {!condi && ( + setvialAmount(value)} + onCreate={() => act('create', { + type: 'hypoVial', + amount: vialAmount, + volume: 'auto', + })} /> + )} + {!condi && ( + setdartAmount(value)} + onCreate={() => act('create', { + type: 'smartDart', + amount: dartAmount, + volume: 'auto', + })} /> + )} + {!!condi && ( + setPackAmount(value)} + onCreate={() => act('create', { + type: 'condimentPack', + amount: packAmount, + volume: 'auto', + })} /> + )} + {!!condi && ( + setBottleAmount(value)} + onCreate={() => act('create', { + type: 'condimentBottle', + amount: bottleAmount, + volume: 'auto', + })} /> + )} + + ); +}; -const AnalysisResults = props => { - const { state, fermianalyze } = props; - const { ref } = state.config; - const { analyzeVars } = state.data; +const AnalysisResults = (props, context) => { + const { act, data } = useBackend(context); + const { fermianalyze } = props; + const { analyzeVars } = data; return (
{