cyberpresidentvanellope/Bubberstation
1
0
Fork 0
mirror of https://github.com/Bubberstation/Bubberstation.git synced 2026-08-24 21:48:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Chem Plumbing Interfaces V2 (#47983)

Browse Source 
* chem interfaces v2

* reaction chamber cleanup

* rebuild + fixes

* Revert input style changes, add placeholder styles, reduce input width
This commit is contained in:
Rob Bailey
2019-12-02 01:59:07 +02:00
committed by Aleksej Komarov
parent 586a9c1b4e
commit eadbc14cde
13 changed files with 206 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
code/modules/plumbing/plumbers/filter.dm
+1 -1
View File
@@ -38,7 +38,7 @@
. = TRUE
switch(action)
if("add")
var/new_chem_name = input("Enter chemical to filter:", name) as text|null
var/new_chem_name = params["name"]
var/chem_id = get_chem_id(new_chem_name)
if(chem_id)
switch(params["which"])
code/modules/plumbing/plumbers/pill_press.dm
+1 -1
View File
@@ -96,7 +96,7 @@
if("change_pill_size")
pill_size = CLAMP(text2num(params["volume"]), minimum_pill, maximum_pill)
if("change_pill_name")
var/new_name = stripped_input(usr, "Enter a pill name.", name, pill_name)
var/new_name = html_encode(params["name"])
if(findtext(new_name, "pill")) //names like pillatron and Pilliam are thus valid
pill_name = new_name
else
code/modules/plumbing/plumbers/reaction_chamber.dm
+5 -3
View File
@@ -6,6 +6,8 @@
buffer = 200
reagent_flags = TRANSPARENT | NO_REACT
ui_x = 250
ui_y = 225
/**list of set reagents that the reaction_chamber allows in, and must all be present before mixing is enabled.
* example: list(/datum/reagent/water = 20, /datum/reagent/fuel/oil = 50)
*/
@@ -32,7 +34,7 @@
/obj/machinery/plumbing/reaction_chamber/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
if(!ui)
ui = new(user, src, ui_key, "reaction_chamber", name, 500, 300, master_ui, state)
ui = new(user, src, ui_key, "reaction_chamber", name, ui_x, ui_y, master_ui, state)
ui.open()
/obj/machinery/plumbing/reaction_chamber/ui_data(mob/user)
@@ -56,8 +58,8 @@
if(reagent)
required_reagents.Remove(reagent)
if("add")
var/input_reagent = get_chem_id(input("Enter the name of the reagent", "Input") as text|null)
var/input_reagent = get_chem_id(params["chem"])
if(input_reagent && !required_reagents.Find(input_reagent))
var/input_amount = CLAMP(round(input("Enter amount", "Input") as num|null), 1, 100)
var/input_amount = text2num(params["amount"])
if(input_amount)
required_reagents[input_reagent] = input_amount
code/modules/plumbing/plumbers/synthesizer.dm
+1 -1
View File
@@ -49,7 +49,7 @@
)
ui_x = 300
ui_y = 360
ui_y = 375
/obj/machinery/plumbing/synthesizer/Initialize(mapload, bolt)
. = ..()
tgui-next/README.md
+1
View File
@@ -514,6 +514,7 @@ Props:
- See inherited props: [Box](#box)
- `value: string` - Value of an input.
- `placeholder: string` - Text placed into Input box when value is otherwise nothing. Clears automatically when focused.
- `fluid: boolean` - Fill all available horizontal space.
- `onChange: (e, value) => void` - An event, which fires when you commit
the text by either unfocusing the input box, or by pressing the Enter key.
tgui-next/packages/tgui/components/Input.js
+13 -4
View File
@@ -1,7 +1,14 @@
import { classes } from 'common/react';
import { classes, isFalsy } from 'common/react';
import { Component, createRef } from 'inferno';
import { Box } from './Box';
const toInputValue = value => {
if (isFalsy(value)) {
return '';
}
return value;
};
export class Input extends Component {
constructor() {
super();
@@ -50,7 +57,7 @@ export class Input extends Component {
}
if (e.keyCode === 27) {
this.setEditing(false);
e.target.value = this.props.value;
e.target.value = toInputValue(this.props.value);
e.target.blur();
return;
}
@@ -61,7 +68,7 @@ export class Input extends Component {
const nextValue = this.props.value;
const input = this.inputRef.current;
if (input) {
input.value = nextValue;
input.value = toInputValue(nextValue);
}
}
@@ -71,7 +78,7 @@ export class Input extends Component {
const nextValue = this.props.value;
const input = this.inputRef.current;
if (input && !editing && prevValue !== nextValue) {
input.value = nextValue;
input.value = toInputValue(nextValue);
}
}
@@ -87,6 +94,7 @@ export class Input extends Component {
onChange,
value,
maxLength,
placeholder,
...boxProps
} = props;
// Box props
@@ -109,6 +117,7 @@ export class Input extends Component {
<input
ref={this.inputRef}
className="Input__input"
placeholder={placeholder}
onInput={this.handleInput}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
tgui-next/packages/tgui/interfaces/ChemFilter.js
+65 -32
View File
@@ -1,10 +1,10 @@
import { Fragment } from 'inferno';
import { Component, Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, Grid, Section } from '../components';
import { Button, Grid, Section, Input } from '../components';
export const ChemFilterPane = props => {
const { act } = useBackend(props);
const { title, list } = props;
const { title, list, reagentName, onReagentInput } = props;
const titleKey = title.toLowerCase();
return (
<Section
@@ -13,11 +13,18 @@ export const ChemFilterPane = props => {
ml={0.5}
mr={0.5}
buttons={(
<Button
icon="plus"
onClick={() => act('add', {
which: titleKey,
})} />
<Fragment>
<Input
placeholder="Reagent"
width="140px"
onInput={(e, value) => onReagentInput(value)} />
<Button
icon="plus"
onClick={() => act('add', {
which: titleKey,
name: reagentName,
})} />
</Fragment>
)}>
{list.map(filter => (
<Fragment key={filter}>
@@ -35,27 +42,53 @@ export const ChemFilterPane = props => {
);
};
export const ChemFilter = props => {
const { state } = props;
const { data } = useBackend(props);
const {
left = [],
right = [],
} = data;
return (
<Grid>
<Grid.Column>
<ChemFilterPane
title="Left"
list={left}
state={state} />
</Grid.Column>
<Grid.Column>
<ChemFilterPane
title="Right"
list={right}
state={state} />
</Grid.Column>
</Grid>
);
};
export class ChemFilter extends Component {
constructor() {
super();
this.state = {
leftReagentName: '',
rightReagentName: '',
};
}
setLeftReagentName(leftReagentName) {
this.setState({
leftReagentName,
});
}
setRightReagentName(rightReagentName) {
this.setState({
rightReagentName,
});
}
render() {
const { state } = this.props;
const { data } = state;
const {
left = [],
right = [],
} = data;
return (
<Grid>
<Grid.Column>
<ChemFilterPane
title="Left"
list={left}
reagentName={this.state.leftReagentName}
onReagentInput={value => this.setLeftReagentName(value)}
state={state} />
</Grid.Column>
<Grid.Column>
<ChemFilterPane
title="Right"
list={right}
reagentName={this.state.rightReagentName}
onReagentInput={value => this.setRightReagentName(value)}
state={state} />
</Grid.Column>
</Grid>
);
}
}
tgui-next/packages/tgui/interfaces/ChemPress.js
+6 -5
View File
@@ -1,5 +1,5 @@
import { useBackend } from '../backend';
import { Box, Button, LabeledList, NumberInput, Section } from '../components';
import { Box, Button, Input, LabeledList, NumberInput, Section } from '../components';
export const ChemPress = props => {
const { act, data } = useBackend(props);
@@ -26,10 +26,11 @@ export const ChemPress = props => {
})} />
</LabeledList.Item>
<LabeledList.Item label="Pill Name">
<Button
icon="pencil-alt"
content={pill_name}
onClick={() => act('change_pill_name')} />
<Input
value={pill_name}
onChange={(e, value) => act('change_pill_name', {
name: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Pill Style">
{pill_styles.map(pill => (
tgui-next/packages/tgui/interfaces/ChemReactionChamber.js
+99
View File
@@ -0,0 +1,99 @@
import { Component } from 'inferno';
import { act } from '../byond';
import { Box, Button, LabeledList, NumberInput, Section, Input } from '../components';
import { map } from 'common/collections';
import { classes } from 'common/react';
export class ChemReactionChamber extends Component {
constructor() {
super();
this.state = {
reagentName: "",
reagentQuantity: 1,
};
}
setReagentName(reagentName) {
this.setState({
reagentName,
});
}
setReagentQuantity(reagentQuantity) {
this.setState({
reagentQuantity,
});
}
render() {
const { state } = this.props;
const { config, data } = state;
const { ref } = config;
const emptying = data.emptying;
const reagents = data.reagents || [];
return (
<Section
title="Reagents"
buttons={(
<Box
inline
bold
color={emptying ? "bad" : "good"} >
{emptying ? "Emptying" : "Filling"}
</Box>
)} >
<LabeledList>
<tr className="LabledList__row">
<td
colSpan="2"
className="LabeledList__cell" >
<Input
fluid
value=""
placeholder="Reagent Name"
onInput={(e, value) => this.setReagentName(value)} />
</td>
<td
className={classes([
"LabeledList__buttons",
"LabeledList__cell",
])} >
<NumberInput
value={this.state.reagentQuantity}
minValue={1}
maxValue={100}
step={1}
stepPixelSize={3}
width="39px"
onDrag={(e, value) => this.setReagentQuantity(value)} />
<Box inline mr={1} />
<Button
icon="plus"
onClick={() => act(ref, 'add', {
chem: this.state.reagentName,
amount: this.state.reagentQuantity,
})} />
</td>
</tr>
{map((amount, reagent) => (
<LabeledList.Item
key={reagent}
label={reagent}
buttons={(
<Button
icon="minus"
color="bad"
onClick={() => act(ref, 'remove', {
chem: reagent,
})} />
)}
>
{amount}
</LabeledList.Item>
))(reagents)}
</LabeledList>
</Section>
);
}
}
tgui-next/packages/tgui/public/tgui.bundle.css
+1 -1
View File
File diff suppressed because one or more lines are too long
tgui-next/packages/tgui/public/tgui.bundle.js
+2 -2
View File
File diff suppressed because one or more lines are too long
tgui-next/packages/tgui/routes.js
+5
View File
@@ -22,6 +22,7 @@ import { ChemFilter } from './interfaces/ChemFilter';
import { ChemHeater } from './interfaces/ChemHeater';
import { ChemMaster } from './interfaces/ChemMaster';
import { ChemPress } from './interfaces/ChemPress';
import { ChemReactionChamber } from './interfaces/ChemReactionChamber';
import { ChemSplitter } from './interfaces/ChemSplitter';
import { ChemSynthesizer } from './interfaces/ChemSynthesizer';
import { CodexGigas } from './interfaces/CodexGigas';
@@ -173,6 +174,10 @@ const ROUTES = {
component: () => ChemPress,
scrollable: false,
},
reaction_chamber: {
component: () => ChemReactionChamber,
scrollable: true,
},
chem_splitter: {
component: () => ChemSplitter,
scrollable: false,
tgui-next/packages/tgui/styles/components/Input.scss
+6
View File
@@ -49,4 +49,10 @@ $border-radius: base.$border-radius !default;
background-color: transparent;
color: #fff;
color: inherit;
&:-ms-input-placeholder {
font-style: italic;
color: #777;
color: rgba(255, 255, 255, 0.45);
}
}