mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2026-07-18 19:44:58 +01:00
[MIRROR] Refactors Reaction Chamber Code (jesus christ it was so bad), Fixes bugs with it too (#5235)
* Refactors Reaction Chamber Code (jesus christ it was so bad), Fixes bugs with it too (#58709) fixes #58574 (Adding a reagent to the reaction chamber increase the UI width beyond the size of the window) Adds in a new reaction chamber panel, looks nice, ya did a good job * Refactors Reaction Chamber Code (jesus christ it was so bad), Fixes bugs with it too Co-authored-by: tralezab <40974010+tralezab@users.noreply.github.com>
This commit is contained in:
SkyratBot
@@ -83,11 +83,14 @@
|
||||
/obj/machinery/plumbing/reaction_chamber/ui_data(mob/user)
|
||||
var/list/data = list()
|
||||
|
||||
var/list/text_reagents = list()
|
||||
var/list/reagents_data = list()
|
||||
for(var/datum/reagent/required_reagent as anything in required_reagents) //make a list where the key is text, because that looks alot better in the ui than a typepath
|
||||
text_reagents[initial(required_reagent.name)] = required_reagents[required_reagent]
|
||||
var/list/reagent_data = list()
|
||||
reagent_data["name"] = initial(required_reagent.name)
|
||||
reagent_data["required_reagent"] = required_reagents[required_reagent]
|
||||
reagents_data += list(reagent_data)
|
||||
|
||||
data["reagents"] = text_reagents
|
||||
data["reagents"] = reagents_data
|
||||
data["emptying"] = emptying
|
||||
data["temperature"] = round(reagents.chem_temp, 0.1)
|
||||
data["ph"] = round(reagents.ph, 0.01)
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { map } from 'common/collections';
|
||||
import { classes } from 'common/react';
|
||||
import { useBackend, useLocalState } from '../backend';
|
||||
import { AnimatedNumber, Box, Button, Flex, Input, LabeledList, NumberInput, Section, RoundGauge } from '../components';
|
||||
import { AnimatedNumber, Box, Button, Input, LabeledList, NumberInput, Section, RoundGauge, Stack } from '../components';
|
||||
import { Window } from '../layouts';
|
||||
import { round, toFixed } from 'common/math';
|
||||
|
||||
@@ -30,181 +28,206 @@ export const ChemReactionChamber = (props, context) => {
|
||||
return (
|
||||
<Window
|
||||
width={290}
|
||||
height={280}>
|
||||
<Window.Content scrollable>
|
||||
<Section
|
||||
title="Conditions"
|
||||
buttons={(
|
||||
<Flex>
|
||||
<Box>
|
||||
{"Target:"}
|
||||
</Box>
|
||||
<NumberInput
|
||||
width="65px"
|
||||
unit="K"
|
||||
step={10}
|
||||
stepPixelSize={3}
|
||||
value={round(targetTemp)}
|
||||
minValue={0}
|
||||
maxValue={1000}
|
||||
onDrag={(e, value) => act('temperature', {
|
||||
target: value,
|
||||
})} />
|
||||
</Flex>
|
||||
)}>
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Current Temperature">
|
||||
<AnimatedNumber
|
||||
value={temperature}
|
||||
format={value => toFixed(value) + ' K'} />
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="pH">
|
||||
<Flex position="relative">
|
||||
<AnimatedNumber value={ph}>
|
||||
{(_, value) => (
|
||||
<RoundGauge
|
||||
value={value}
|
||||
height={400}>
|
||||
<Window.Content>
|
||||
<Stack vertical fill>
|
||||
<Stack.Item>
|
||||
<Section
|
||||
title="Conditions"
|
||||
buttons={(
|
||||
<Stack>
|
||||
<Stack.Item mt={0.3}>
|
||||
{"Target:"}
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<NumberInput
|
||||
width="65px"
|
||||
unit="K"
|
||||
step={10}
|
||||
stepPixelSize={3}
|
||||
value={round(targetTemp)}
|
||||
minValue={0}
|
||||
maxValue={14}
|
||||
format={value => null}
|
||||
left={-7.5}
|
||||
position="absolute"
|
||||
size={1.50}
|
||||
ranges={{
|
||||
"red": [-0.22, 1.5],
|
||||
"orange": [1.5, 3],
|
||||
"yellow": [3, 4.5],
|
||||
"olive": [4.5, 5],
|
||||
"good": [5, 6],
|
||||
"green": [6, 8.5],
|
||||
"teal": [8.5, 9.5],
|
||||
"blue": [9.5, 11],
|
||||
"purple": [11, 12.5],
|
||||
"violet": [12.5, 14],
|
||||
}} />
|
||||
)}
|
||||
</AnimatedNumber>
|
||||
<Flex position="relative"
|
||||
top={0.2}>
|
||||
<AnimatedNumber
|
||||
value={ph}
|
||||
format={value => round(value, 3)} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
<Section
|
||||
title="Settings"
|
||||
buttons={(
|
||||
isReacting && (
|
||||
<Box
|
||||
inline
|
||||
bold
|
||||
color={"purple"}>
|
||||
{"Reacting"}
|
||||
</Box>
|
||||
) || (
|
||||
<Box
|
||||
inline
|
||||
bold
|
||||
color={emptying ? "bad" : "good"}>
|
||||
{emptying ? "Emptying" : "Filling"}
|
||||
</Box>
|
||||
)
|
||||
)}>
|
||||
<LabeledList>
|
||||
<tr className="LabledList__row">
|
||||
<LabeledList.Item label="Acidic pH limit">
|
||||
<td
|
||||
className={classes([
|
||||
"LabeledList__buttons",
|
||||
"LabeledList__cell",
|
||||
])}>
|
||||
<NumberInput
|
||||
value={reagentAcidic}
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
step={1}
|
||||
stepPixelSize={3}
|
||||
width="39px"
|
||||
onDrag={(e, value) => act('acidic', {
|
||||
target: value,
|
||||
})} />
|
||||
<Box inline mr={1} />
|
||||
</td>
|
||||
</LabeledList.Item>
|
||||
</tr>
|
||||
<tr className="LabledList__row">
|
||||
<LabeledList.Item label="Alkaline pH limit">
|
||||
<td
|
||||
className={classes([
|
||||
"LabeledList__buttons",
|
||||
"LabeledList__cell",
|
||||
])}>
|
||||
<NumberInput
|
||||
value={reagentAlkaline}
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
step={1}
|
||||
stepPixelSize={3}
|
||||
width="39px"
|
||||
onDrag={(e, value) => act('alkaline', {
|
||||
target: value,
|
||||
})} />
|
||||
<Box inline mr={1} />
|
||||
</td>
|
||||
</LabeledList.Item>
|
||||
</tr>
|
||||
<tr className="LabledList__row">
|
||||
<td
|
||||
colSpan="2"
|
||||
className="LabeledList__cell">
|
||||
<Input
|
||||
fluid
|
||||
value=""
|
||||
placeholder="Reagent Name"
|
||||
onInput={(e, value) => setReagentName(value)} />
|
||||
</td>
|
||||
<td
|
||||
className={classes([
|
||||
"LabeledList__buttons",
|
||||
"LabeledList__cell",
|
||||
])}>
|
||||
<NumberInput
|
||||
value={reagentQuantity}
|
||||
minValue={1}
|
||||
maxValue={100}
|
||||
step={1}
|
||||
stepPixelSize={3}
|
||||
width="39px"
|
||||
onDrag={(e, value) => setReagentQuantity(value)} />
|
||||
<Box inline mr={1} />
|
||||
<Button
|
||||
icon="plus"
|
||||
onClick={() => act('add', {
|
||||
chem: reagentName,
|
||||
amount: reagentQuantity,
|
||||
})} />
|
||||
</td>
|
||||
</tr>
|
||||
{map((amount, reagent) => (
|
||||
<LabeledList.Item
|
||||
key={reagent}
|
||||
label={reagent}
|
||||
buttons={(
|
||||
<Button
|
||||
icon="minus"
|
||||
color="bad"
|
||||
onClick={() => act('remove', {
|
||||
chem: reagent,
|
||||
})} />
|
||||
)}>
|
||||
{amount}
|
||||
</LabeledList.Item>
|
||||
))(reagents)}
|
||||
</LabeledList>
|
||||
</Section>
|
||||
maxValue={1000}
|
||||
onDrag={(e, value) => act('temperature', {
|
||||
target: value,
|
||||
})} />
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
)}>
|
||||
<Stack vertical>
|
||||
<Stack.Item>
|
||||
<Stack fill>
|
||||
<Stack.Item textColor="label">
|
||||
Current Temperature:
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<AnimatedNumber
|
||||
value={temperature}
|
||||
format={value => toFixed(value) + ' K'} />
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<RoundGauge
|
||||
value={ph}
|
||||
minValue={0}
|
||||
maxValue={14}
|
||||
format={() => null}
|
||||
position="absolute"
|
||||
size={1.50}
|
||||
top={0.5}
|
||||
right={0.5}
|
||||
ranges={{
|
||||
"red": [-0.22, 1.5],
|
||||
"orange": [1.5, 3],
|
||||
"yellow": [3, 4.5],
|
||||
"olive": [4.5, 5],
|
||||
"good": [5, 6],
|
||||
"green": [6, 8.5],
|
||||
"teal": [8.5, 9.5],
|
||||
"blue": [9.5, 11],
|
||||
"purple": [11, 12.5],
|
||||
"violet": [12.5, 14],
|
||||
}} />
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Stack fill>
|
||||
<Stack.Item textColor="label">
|
||||
{"ph:"}
|
||||
</Stack.Item>
|
||||
<Stack.Item grow={15}>
|
||||
{ph}
|
||||
</Stack.Item>
|
||||
<Stack.Item grow mt={1} mb={-0.5}>
|
||||
<Button
|
||||
color="transparent"
|
||||
icon="question"
|
||||
tooltip={multiline`
|
||||
In chemistry, pH is a scale used to specify
|
||||
the acidity or basicity of an aqueous solution.
|
||||
Acidic solutions are measured to have lower
|
||||
pH values than basic or alkaline solutions.
|
||||
The pH scale is logarithmic and inversely
|
||||
indicates the concentration of hydrogen ions
|
||||
in the solution.`}
|
||||
tooltipPosition="bottom-left" />
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<Section
|
||||
title="Settings"
|
||||
fill
|
||||
scrollable
|
||||
buttons={(
|
||||
isReacting && (
|
||||
<Box
|
||||
inline
|
||||
bold
|
||||
color={"purple"}>
|
||||
{"Reacting"}
|
||||
</Box>
|
||||
) || (
|
||||
<Box
|
||||
fontSize="16px"
|
||||
inline
|
||||
bold
|
||||
color={emptying ? "bad" : "good"}>
|
||||
{emptying ? "Emptying" : "Filling"}
|
||||
</Box>
|
||||
)
|
||||
)}>
|
||||
<Stack vertical fill>
|
||||
<Stack.Item>
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Acidic pH limit">
|
||||
<NumberInput
|
||||
value={reagentAcidic}
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
step={1}
|
||||
stepPixelSize={3}
|
||||
width="39px"
|
||||
onDrag={(e, value) => act('acidic', {
|
||||
target: value,
|
||||
})} />
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Alkaline pH limit">
|
||||
<NumberInput
|
||||
value={reagentAlkaline}
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
step={1}
|
||||
stepPixelSize={3}
|
||||
width="39px"
|
||||
onDrag={(e, value) => act('alkaline', {
|
||||
target: value,
|
||||
})} />
|
||||
<Box inline mr={1} />
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Stack fill>
|
||||
<Stack.Item grow>
|
||||
<Input
|
||||
fluid
|
||||
value=""
|
||||
placeholder="Reagent Name"
|
||||
onInput={(e, value) => setReagentName(value)} />
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<NumberInput
|
||||
value={reagentQuantity}
|
||||
minValue={1}
|
||||
maxValue={100}
|
||||
step={1}
|
||||
stepPixelSize={3}
|
||||
width="39px"
|
||||
onDrag={(e, value) => setReagentQuantity(value)} />
|
||||
<Box inline mr={1} />
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Button
|
||||
icon="plus"
|
||||
onClick={() => act('add', {
|
||||
chem: reagentName,
|
||||
amount: reagentQuantity,
|
||||
})} />
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Stack vertical>
|
||||
{reagents.map(reagent => (
|
||||
<Stack.Item key={reagent}>
|
||||
<Stack fill>
|
||||
<Stack.Item mt={0.25} textColor="label">
|
||||
{reagent.name+":"}
|
||||
</Stack.Item>
|
||||
<Stack.Item mt={0.25} grow>
|
||||
{reagent.required_reagent}
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Button
|
||||
icon="minus"
|
||||
color="bad"
|
||||
onClick={() => act('remove', {
|
||||
chem: reagent,
|
||||
})} />
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Window.Content>
|
||||
</Window>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user