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

update

Browse Source
This commit is contained in:
Letter N
2020-07-21 15:00:47 +08:00
parent c8145304df
commit f7f35c47b9
12 changed files with 546 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tgui/packages/tgui/interfaces/AirlockElectronics.js
View File

@@ -34,14 +34,14 @@ export const AirlockElectronics = (props, context) => {
})} />
<Button
icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
content="South"
content="East"
selected={unres_direction & 2}
onClick={() => act('direc_set', {
unres_direction: '2',
})} />
<Button
icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
content="East"
content="South"
selected={unres_direction & 4}
onClick={() => act('direc_set', {
unres_direction: '4',

1
tgui/packages/tgui/interfaces/CameraConsole.js
View File

@@ -100,7 +100,6 @@ export const CameraConsoleContent = (props, context) => {
return (
<Fragment>
<Input
autoFocus
fluid
mb={1}
placeholder="Search for a camera"

2
tgui/packages/tgui/interfaces/CentcomPodLauncher.js
View File

@@ -419,7 +419,7 @@ export const CentcomPodLauncherContent = (props, context) => {
This gondola can control when he wants to deliver his supplies
if he has a smart enough mind, so offer up his body to ghosts
for maximum enjoyment. (Make sure to turn off bluespace and
set a arbitrarily high open-time if you do!
set an arbitrarily high open-time if you do!
`}
onClick={() => act('styleGondola')} />
<Button

4
tgui/packages/tgui/interfaces/LanguageMenu.js
View File

@@ -91,9 +91,7 @@ export const LanguageMenu = (props, context) => {
{' '}
Key: ,{language.key}
{' '}
{language.can_understand
? 'Can understand.'
: 'Cannot understand.'}
{!!language.shadow && '(gained from mob)'}
{' '}
{language.can_speak
? 'Can speak.'

6
tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
View File

@@ -4,8 +4,12 @@ import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
import { NtosWindow } from '../layouts';
export const NtosCyborgRemoteMonitor = (props, context) => {
const { data } = useBackend(context);
const {
theme,
} = data;
return (
<NtosWindow resizable>
<NtosWindow theme={data.theme}>
<NtosWindow.Content scrollable>
<NtosCyborgRemoteMonitorContent />
</NtosWindow.Content>

89
tgui/packages/tgui/interfaces/OreRedemptionMachine.js
View File

@@ -1,6 +1,6 @@
import { toTitleCase } from 'common/string';
import { Component, Fragment } from 'inferno';
import { useBackend } from '../backend';
import { useBackend, useLocalState } from '../backend';
import { BlockQuote, Box, Button, NumberInput, Section, Table } from '../components';
import { Window } from '../layouts';
@@ -98,50 +98,45 @@ export const OreRedemptionMachine = (props, context) => {
);
};
class MaterialRow extends Component {
constructor() {
super();
this.state = {
amount: 1,
};
}
render() {
const { amount } = this.state;
const { material, onRelease } = this.props;
const amountAvailable = Math.floor(material.amount);
return (
<Table.Row>
<Table.Cell>
{toTitleCase(material.name).replace('Alloy', '')}
</Table.Cell>
<Table.Cell collapsing textAlign="right">
<Box mr={2} color="label" inline>
{material.value && material.value + ' cr'}
</Box>
</Table.Cell>
<Table.Cell collapsing textAlign="right">
<Box mr={2} color="label" inline>
{amountAvailable} sheets
</Box>
</Table.Cell>
<Table.Cell collapsing>
<NumberInput
width="32px"
step={1}
stepPixelSize={5}
minValue={1}
maxValue={50}
value={amount}
onChange={(e, value) => this.setState({
amount: value,
})} />
<Button
disabled={amountAvailable < 1}
content="Release"
onClick={() => onRelease(amount)} />
</Table.Cell>
</Table.Row>
);
}
}
const MaterialRow = (props, context) => {
const { material, onRelease } = props;
const [
amount,
setAmount,
] = useLocalState(context, "amount" + material.name, 1);
const amountAvailable = Math.floor(material.amount);
return (
<Table.Row>
<Table.Cell>
{toTitleCase(material.name).replace('Alloy', '')}
</Table.Cell>
<Table.Cell collapsing textAlign="right">
<Box mr={2} color="label" inline>
{material.value && material.value + ' cr'}
</Box>
</Table.Cell>
<Table.Cell collapsing textAlign="right">
<Box mr={2} color="label" inline>
{amountAvailable} sheets
</Box>
</Table.Cell>
<Table.Cell collapsing>
<NumberInput
width="32px"
step={1}
stepPixelSize={5}
minValue={1}
maxValue={50}
value={amount}
onChange={(e, value) => setAmount(value)} />
<Button
disabled={amountAvailable < 1}
content="Release"
onClick={() => onRelease(amount)} />
</Table.Cell>
</Table.Row>
);
};

299
tgui/packages/tgui/interfaces/PowerMonitor.js
View File

@@ -5,7 +5,7 @@ import { pureComponentHooks } from 'common/react';
import { Component, Fragment } from 'inferno';
import { Box, Button, Chart, ColorBox, Flex, Icon, LabeledList, ProgressBar, Section, Table } from '../components';
import { Window } from '../layouts';
import { useBackend } from '../backend';
import { useBackend, useLocalState } from '../backend';
const PEAK_DRAW = 500000;
@@ -24,162 +24,153 @@ export const PowerMonitor = () => {
);
};
export class PowerMonitorContent extends Component {
constructor() {
super();
this.state = {
sortByField: null,
};
}
export const PowerMonitorContent = (props, context) => {
const { data } = useBackend(context);
const { history } = data;
render() {
const { data } = useBackend(this.context);
const { history } = data;
const { sortByField } = this.state;
const supply = history.supply[history.supply.length - 1] || 0;
const demand = history.demand[history.demand.length - 1] || 0;
const supplyData = history.supply.map((value, i) => [i, value]);
const demandData = history.demand.map((value, i) => [i, value]);
const maxValue = Math.max(
PEAK_DRAW,
...history.supply,
...history.demand);
const [
sortByField,
setSortByField,
] = useLocalState(context, 'sortByField', null);
const supply = history.supply[history.supply.length - 1] || 0;
const demand = history.demand[history.demand.length - 1] || 0;
const supplyData = history.supply.map((value, i) => [i, value]);
const demandData = history.demand.map((value, i) => [i, value]);
const maxValue = Math.max(
PEAK_DRAW,
...history.supply,
...history.demand);
// Process area data
const areas = flow([
map((area, i) => ({
...area,
// Generate a unique id
id: area.name + i,
})),
sortByField === 'name' && sortBy(area => area.name),
sortByField === 'charge' && sortBy(area => -area.charge),
sortByField === 'draw' && sortBy(
area => -powerRank(area.load),
area => -parseFloat(area.load)),
])(data.areas);
return (
<Fragment>
<Flex spacing={1}>
<Flex.Item width="200px">
<Section>
<LabeledList>
<LabeledList.Item label="Supply">
<ProgressBar
value={supply}
minValue={0}
maxValue={maxValue}
color="teal">
{toFixed(supply / 1000) + ' kW'}
</ProgressBar>
</LabeledList.Item>
<LabeledList.Item label="Draw">
<ProgressBar
value={demand}
minValue={0}
maxValue={maxValue}
color="pink">
{toFixed(demand / 1000) + ' kW'}
</ProgressBar>
</LabeledList.Item>
</LabeledList>
</Section>
</Flex.Item>
<Flex.Item grow={1}>
<Section position="relative" height="100%">
<Chart.Line
fillPositionedParent
data={supplyData}
rangeX={[0, supplyData.length - 1]}
rangeY={[0, maxValue]}
strokeColor="rgba(0, 181, 173, 1)"
fillColor="rgba(0, 181, 173, 0.25)" />
<Chart.Line
fillPositionedParent
data={demandData}
rangeX={[0, demandData.length - 1]}
rangeY={[0, maxValue]}
strokeColor="rgba(224, 57, 151, 1)"
fillColor="rgba(224, 57, 151, 0.25)" />
</Section>
</Flex.Item>
</Flex>
<Section>
<Box mb={1}>
<Box inline mr={2} color="label">
Sort by:
</Box>
<Button.Checkbox
checked={sortByField === 'name'}
content="Name"
onClick={() => this.setState({
sortByField: sortByField !== 'name' && 'name',
})} />
<Button.Checkbox
checked={sortByField === 'charge'}
content="Charge"
onClick={() => this.setState({
sortByField: sortByField !== 'charge' && 'charge',
})} />
<Button.Checkbox
checked={sortByField === 'draw'}
content="Draw"
onClick={() => this.setState({
sortByField: sortByField !== 'draw' && 'draw',
})} />
const areas = flow([
map((area, i) => ({
...area,
// Generate a unique id
id: area.name + i,
})),
sortByField === 'name' && sortBy(area => area.name),
sortByField === 'charge' && sortBy(area => -area.charge),
sortByField === 'draw' && sortBy(
area => -powerRank(area.load),
area => -parseFloat(area.load)),
])(data.areas);
return (
<Fragment>
<Flex spacing={1}>
<Flex.Item width="200px">
<Section>
<LabeledList>
<LabeledList.Item label="Supply">
<ProgressBar
value={supply}
minValue={0}
maxValue={maxValue}
color="teal">
{toFixed(supply / 1000) + ' kW'}
</ProgressBar>
</LabeledList.Item>
<LabeledList.Item label="Draw">
<ProgressBar
value={demand}
minValue={0}
maxValue={maxValue}
color="pink">
{toFixed(demand / 1000) + ' kW'}
</ProgressBar>
</LabeledList.Item>
</LabeledList>
</Section>
</Flex.Item>
<Flex.Item grow={1}>
<Section position="relative" height="100%">
<Chart.Line
fillPositionedParent
data={supplyData}
rangeX={[0, supplyData.length - 1]}
rangeY={[0, maxValue]}
strokeColor="rgba(0, 181, 173, 1)"
fillColor="rgba(0, 181, 173, 0.25)" />
<Chart.Line
fillPositionedParent
data={demandData}
rangeX={[0, demandData.length - 1]}
rangeY={[0, maxValue]}
strokeColor="rgba(224, 57, 151, 1)"
fillColor="rgba(224, 57, 151, 0.25)" />
</Section>
</Flex.Item>
</Flex>
<Section>
<Box mb={1}>
<Box inline mr={2} color="label">
Sort by:
</Box>
<Table>
<Table.Row header>
<Table.Cell>
Area
</Table.Cell>
<Table.Cell collapsing>
Charge
</Table.Cell>
<Table.Cell textAlign="right">
Draw
</Table.Cell>
<Table.Cell collapsing title="Equipment">
Eqp
</Table.Cell>
<Table.Cell collapsing title="Lighting">
Lgt
</Table.Cell>
<Table.Cell collapsing title="Environment">
Env
</Table.Cell>
</Table.Row>
{areas.map((area, i) => (
<tr
key={area.id}
className="Table__row candystripe">
<td>
{area.name}
</td>
<td className="Table__cell text-right text-nowrap">
<AreaCharge
charging={area.charging}
charge={area.charge} />
</td>
<td className="Table__cell text-right text-nowrap">
{area.load}
</td>
<td className="Table__cell text-center text-nowrap">
<AreaStatusColorBox status={area.eqp} />
</td>
<td className="Table__cell text-center text-nowrap">
<AreaStatusColorBox status={area.lgt} />
</td>
<td className="Table__cell text-center text-nowrap">
<AreaStatusColorBox status={area.env} />
</td>
</tr>
))}
</Table>
</Section>
</Fragment>
);
}
}
<Button.Checkbox
checked={sortByField === 'name'}
content="Name"
onClick={() => setSortByField(sortByField !== 'name' && 'name')} />
<Button.Checkbox
checked={sortByField === 'charge'}
content="Charge"
onClick={() => setSortByField(
sortByField !== 'charge' && 'charge'
)} />
<Button.Checkbox
checked={sortByField === 'draw'}
content="Draw"
onClick={() => setSortByField(sortByField !== 'draw' && 'draw')} />
</Box>
<Table>
<Table.Row header>
<Table.Cell>
Area
</Table.Cell>
<Table.Cell collapsing>
Charge
</Table.Cell>
<Table.Cell textAlign="right">
Draw
</Table.Cell>
<Table.Cell collapsing title="Equipment">
Eqp
</Table.Cell>
<Table.Cell collapsing title="Lighting">
Lgt
</Table.Cell>
<Table.Cell collapsing title="Environment">
Env
</Table.Cell>
</Table.Row>
{areas.map((area, i) => (
<tr
key={area.id}
className="Table__row candystripe">
<td>
{area.name}
</td>
<td className="Table__cell text-right text-nowrap">
<AreaCharge
charging={area.charging}
charge={area.charge} />
</td>
<td className="Table__cell text-right text-nowrap">
{area.load}
</td>
<td className="Table__cell text-center text-nowrap">
<AreaStatusColorBox status={area.eqp} />
</td>
<td className="Table__cell text-center text-nowrap">
<AreaStatusColorBox status={area.lgt} />
</td>
<td className="Table__cell text-center text-nowrap">
<AreaStatusColorBox status={area.env} />
</td>
</tr>
))}
</Table>
</Section>
</Fragment>
);
};
const AreaCharge = props => {
const { charging, charge } = props;

282
tgui/packages/tgui/interfaces/Roulette.js
View File

@@ -1,5 +1,5 @@
import { classes } from "common/react";
import { useBackend } from "../backend";
import { useBackend, useLocalState } from "../backend";
import { Box, Button, Grid, NumberInput } from "../components";
import { Component } from "inferno";
import { Window } from "../layouts";
@@ -230,162 +230,152 @@ export const RouletteBoard = (props, context) => {
);
};
export class RouletteBetTable extends Component {
constructor() {
super();
this.state = {
customBet: 500,
};
export const RouletteBetTable = (props, context) => {
const { act, data } = useBackend(context);
const [
customBet,
setCustomBet,
] = useLocalState(context, 'customBet', 500);
let {
BetType,
} = data;
if (BetType.startsWith('s')) {
BetType = BetType.substring(1, BetType.length);
}
setCustomBet(customBet) {
this.setState({
customBet,
});
}
render() {
const { act, data } = useBackend(this.context);
let {
BetType,
} = data;
if (BetType.startsWith('s')) {
BetType = BetType.substring(1, BetType.length);
}
return (
<table className="Roulette__lowertable">
<tr>
<th
className={classes([
'Roulette',
'Roulette__lowertable--cell',
'Roulette__lowertable--header',
])}>
Last Spun:
</th>
<th
className={classes([
'Roulette',
'Roulette__lowertable--cell',
'Roulette__lowertable--header',
])}>
Current Bet:
</th>
</tr>
<tr>
<td className={classes([
return (
<table className="Roulette__lowertable">
<tr>
<th
className={classes([
'Roulette',
'Roulette__lowertable--cell',
'Roulette__lowertable--spinresult',
'Roulette__lowertable--spinresult-' + getNumberColor(data.LastSpin),
'Roulette__lowertable--header',
])}>
{data.LastSpin}
</td>
<td className={classes([
Last Spun:
</th>
<th
className={classes([
'Roulette',
'Roulette__lowertable--cell',
'Roulette__lowertable--betscell',
'Roulette__lowertable--header',
])}>
<Box
bold
mt={1}
mb={1}
fontSize="25px"
textAlign="center">
{data.BetAmount} cr on {BetType}
</Box>
<Box ml={1} mr={1}>
<Button
fluid
content="Bet 10 cr"
onClick={() => act('ChangeBetAmount', {
amount: 10,
})}
/>
<Button
fluid
content="Bet 50 cr"
onClick={() => act('ChangeBetAmount', {
amount: 50,
})}
/>
<Button
fluid
content="Bet 100 cr"
onClick={() => act('ChangeBetAmount', {
amount: 100,
})}
/>
<Button
fluid
content="Bet 500 cr"
onClick={() => act('ChangeBetAmount', {
amount: 500,
})}
/>
<Grid>
<Grid.Column>
<Button
fluid
content="Bet custom amount..."
onClick={() => act('ChangeBetAmount', {
amount: this.state.customBet,
})}
/>
</Grid.Column>
<Grid.Column size={0.1}>
<NumberInput
value={this.state.customBet}
minValue={0}
maxValue={1000}
step={10}
stepPixelSize={4}
width="40px"
onChange={(e, value) => this.setCustomBet(value)}
/>
</Grid.Column>
</Grid>
</Box>
</td>
</tr>
<tr>
<td colSpan="2">
<Box
bold
m={1}
fontSize="14px"
textAlign="center">
Swipe an ID card with a connected account to spin!
</Box>
</td>
</tr>
<tr>
<td className="Roulette__lowertable--cell">
<Box inline bold mr={1}>
House Balance:
</Box>
<Box inline>
{data.HouseBalance ? data.HouseBalance + ' cr': "None"}
</Box>
</td>
<td className="Roulette__lowertable--cell">
Current Bet:
</th>
</tr>
<tr>
<td className={classes([
'Roulette',
'Roulette__lowertable--cell',
'Roulette__lowertable--spinresult',
'Roulette__lowertable--spinresult-' + getNumberColor(data.LastSpin),
])}>
{data.LastSpin}
</td>
<td className={classes([
'Roulette',
'Roulette__lowertable--cell',
'Roulette__lowertable--betscell',
])}>
<Box
bold
mt={1}
mb={1}
fontSize="25px"
textAlign="center">
{data.BetAmount} cr on {BetType}
</Box>
<Box ml={1} mr={1}>
<Button
fluid
content={data.IsAnchored ? "Bolted" : "Unbolted"}
m={1}
color="transparent"
textAlign="center"
onClick={() => act('anchor')}
content="Bet 10 cr"
onClick={() => act('ChangeBetAmount', {
amount: 10,
})}
/>
</td>
</tr>
</table>
);
}
}
<Button
fluid
content="Bet 50 cr"
onClick={() => act('ChangeBetAmount', {
amount: 50,
})}
/>
<Button
fluid
content="Bet 100 cr"
onClick={() => act('ChangeBetAmount', {
amount: 100,
})}
/>
<Button
fluid
content="Bet 500 cr"
onClick={() => act('ChangeBetAmount', {
amount: 500,
})}
/>
<Grid>
<Grid.Column>
<Button
fluid
content="Bet custom amount..."
onClick={() => act('ChangeBetAmount', {
amount: customBet,
})}
/>
</Grid.Column>
<Grid.Column size={0.1}>
<NumberInput
value={customBet}
minValue={0}
maxValue={1000}
step={10}
stepPixelSize={4}
width="40px"
onChange={(e, value) => setCustomBet(value)}
/>
</Grid.Column>
</Grid>
</Box>
</td>
</tr>
<tr>
<td colSpan="2">
<Box
bold
m={1}
fontSize="14px"
textAlign="center">
Swipe an ID card with a connected account to spin!
</Box>
</td>
</tr>
<tr>
<td className="Roulette__lowertable--cell">
<Box inline bold mr={1}>
House Balance:
</Box>
<Box inline>
{data.HouseBalance ? data.HouseBalance + ' cr': "None"}
</Box>
</td>
<td className="Roulette__lowertable--cell">
<Button
fluid
content={data.IsAnchored ? "Bolted" : "Unbolted"}
m={1}
color="transparent"
textAlign="center"
onClick={() => act('anchor')}
/>
</td>
</tr>
</table>
);
};
export const Roulette = (props, context) => {
return (

170
tgui/packages/tgui/interfaces/SkillPanel.js
View File

@@ -1,119 +1,63 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Window } from '../layouts';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
import { Window } from '../layouts';
const skillgreen = {
color: 'lightgreen',
fontWeight: 'bold',
};
const skillyellow = {
color: '#FFDB58',
fontWeight: 'bold',
};
export const SkillPanel = (props, context) => {
const { act, data } = useBackend(context);
const skills = data.skills || [];
const see_mods = data.see_skill_mods;
const skillgreen = {
color: 'lightgreen',
fontWeight: 'bold',
};
const skillyellow = {
color: '#FFDB58',
fontWeight: 'bold',
};
return (
<Window>
<Window resizable>
<Window.Content scrollable>
<Section
title={data.playername}
buttons={(
<Button
icon={see_mods ? 'Enabled' : 'Disabled'}
content={see_mods ? 'Modifiers Shown' : 'Modifiers Hidden'}
onClick={() => act('toggle_mods')} />
)}>
<Section title={skills.playername}>
<LabeledList>
{skills.map(skill => (
<LabeledList.Item key={skill.name} label={skill.name}>
<span style={skillyellow}>
{skill.desc}
<br />
Modifiers: {skill.modifiers}
</span>
<br />
{!!skill.level_based && (
<Box>
{see_mods ? (
<span>
Level: [
<span style={skill.mod_style}>
{skill.lvl_mod}
</span>]
</span>
) : (
<span>
Level: [
<span style={skill.base_style}>
{skill.lvl_base}
</span>]
</span>
)}
<br />
Total Experience:
{see_mods ? (
<span>[{skill.value_mod} XP]</span>
) : (
<span>[{skill.value_base} XP]</span>
)}
<br />
XP To Next Level:
{skill.max_lvl !== (see_mods
? skill.lvl_mod_num
: skill.lvl_base_num) ? (
<Box inline>
{see_mods ? (
<span>{skill.xp_next_lvl_mod}</span>
) : (
<span>{skill.xp_next_lvl_base}</span>
)}
</Box>
) : (
<span style={skillgreen}>
[MAXXED]
</span>
)}
</Box>
)}
{see_mods ? (
<span>{skill.mod_readout}</span>
<Level skill_lvl_num={skill.lvlnum} skill_lvl={skill.lvl} />
<br />
Total Experience: [{skill.exp} XP]
<br />
XP To Next Level: 
{skill.exp_req !== 0 ? (
<span>
[{skill.exp_prog} / {skill.exp_req}]
</span>
) : (
<span>{skill.base_readout}</span>
)}
{see_mods ? (
<ProgressBar
value={skill.percent_mod}
color="good" />
) : (
<ProgressBar
value={skill.percent_base}
color="good" />
<span style={skillgreen}>
[MAXXED]
</span>
)}
<br />
{!!data.admin && (
<Fragment>
<Button
content="Adjust Exp"
onClick={() => act('adj_exp', {
skill: skill.path,
})} />
<Button
content="Set Exp"
onClick={() => act('set_exp', {
skill: skill.path,
})} />
{!!skill.level_based && (
<Button
content="Set Level"
onClick={() => act('set_lvl', {
skill: skill.path,
})} />
)}
</Fragment>
)}
Overall Skill Progress: [{skill.exp} / {skill.max_exp}]
<ProgressBar
value={skill.exp_percent}
color="good" />
<br />
<Button
content="Adjust Exp"
onClick={() => act('adj_exp', {
skill: skill.path,
})} />
<Button
content="Set Exp"
onClick={() => act('set_exp', {
skill: skill.path,
})} />
<Button
content="Set Level"
onClick={() => act('set_lvl', {
skill: skill.path,
})} />
<br />
<br />
</LabeledList.Item>
@@ -124,3 +68,31 @@ export const SkillPanel = (props, context) => {
</Window>
);
};
const Level = (props, context) => {
const { act, data } = useBackend(context);
const {
skill_lvl_num,
skill_lvl,
} = props;
let textstyle="font-weight:bold; color:hsl("+skill_lvl_num*50+", 50%, 50%)";
return (
<span>Level: [<span style={textstyle}>{skill_lvl}</span>]</span>
);
};
const XPToNextLevel = (props, context) => {
const { act, data } = useBackend(context);
const {
xp_req,
xp_prog,
} = props;
if (xp_req === 0) {
return (
<span style={skillgreen}>
to next level: MAXXED
</span>
);
}
return (
<span>XP to next level: [{xp_prog} / {xp_req}]</span>
);
};

1
tgui/packages/tgui/interfaces/Uplink.js
View File

@@ -70,7 +70,6 @@ export const GenericUplink = (props, context) => {
<Fragment>
Search
<Input
autoFocus
value={searchText}
onInput={(e, value) => setSearchText(value)}
mx={1} />

30
tgui/packages/tgui/interfaces/Vending.js
View File

@@ -10,19 +10,16 @@ const VendingRow = (props, context) => {
productStock,
custom,
} = props;
const to_pay = (!product.premium
? Math.round(product.price * data.cost_mult)
: product.price
);
const pay_text = (!product.premium
? to_pay + ' cr' + data.cost_text
: to_pay + ' cr'
);
const free = (
!data.onstation
|| product.price === 0
|| (
!product.premium
&& data.department
&& data.user
&& data.department === data.user.department
)
);
return (
<Table.Row>
<Table.Cell collapsing>
@@ -72,16 +69,13 @@ const VendingRow = (props, context) => {
<Button
fluid
disabled={(
data.stock[product.namename] === 0
|| (
!free
&& (
!data.user
|| to_pay > data.user.cash
)
)
productStock === 0
|| !free && (
!data.user
|| product.price > data.user.cash
)
)}
content={!free ? pay_text : 'FREE'}
content={free ? 'FREE' : product.price + ' cr'}
onClick={() => act('vend', {
'ref': product.ref,
})} />

288
tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js
View File

@@ -1,4 +1,4 @@
import { Component, Fragment } from 'inferno';
import { Fragment } from 'inferno';
import { useBackend, useLocalState } from '../../backend';
import { BlockQuote, Box, Button, ByondUi, Collapsible, Flex, Icon, Input, Knob, LabeledList, NumberInput, ProgressBar, Section, Slider, Tabs, Tooltip } from '../../components';
import { DraggableControl } from '../../components/DraggableControl';
@@ -117,7 +117,7 @@ const KitchenSinkButton = props => {
<Button fluid content="Fluid" />
<Button
my={1}
lineHeight={1}
lineHeight={2}
minWidth={15}
textAlign="center"
content="With Box props" />
@@ -181,45 +181,36 @@ const KitchenSinkBox = props => {
);
};
class KitchenSinkProgressBar extends Component {
constructor() {
super();
this.state = {
progress: 0.5,
};
}
const KitchenSinkProgressBar = (props, context) => {
const [
progress,
setProgress,
] = useLocalState(context, 'progress', 0.5);
render() {
const { progress } = this.state;
return (
<Box>
<ProgressBar
ranges={{
good: [0.5, Infinity],
bad: [-Infinity, 0.1],
average: [0, 0.5],
}}
minValue={-1}
maxValue={1}
value={progress}>
Value: {Number(progress).toFixed(1)}
</ProgressBar>
<Box mt={1}>
<Button
content="-0.1"
onClick={() => this.setState(prevState => ({
progress: prevState.progress - 0.1,
}))} />
<Button
content="+0.1"
onClick={() => this.setState(prevState => ({
progress: prevState.progress + 0.1,
}))} />
</Box>
return (
<Box>
<ProgressBar
ranges={{
good: [0.5, Infinity],
bad: [-Infinity, 0.1],
average: [0, 0.5],
}}
minValue={-1}
maxValue={1}
value={progress}>
Value: {Number(progress).toFixed(1)}
</ProgressBar>
<Box mt={1}>
<Button
content="-0.1"
onClick={() => setProgress(progress - 0.1)} />
<Button
content="+0.1"
onClick={() => setProgress(progress + 0.1)} />
</Box>
);
}
}
</Box>
);
};
const KitchenSinkTabs = (props, context) => {
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
@@ -289,127 +280,110 @@ const KitchenSinkTooltip = props => {
);
};
class KitchenSinkInput extends Component {
constructor() {
super();
this.state = {
number: 0,
text: 'Sample text',
};
}
const KitchenSinkInput = (props, context) => {
const [
number,
setNumber,
] = useLocalState(context, 'number', 0);
render() {
const { number, text } = this.state;
return (
<Box>
<LabeledList>
<LabeledList.Item label="Input (onChange)">
<Input
value={text}
onChange={(e, value) => this.setState({
text: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Input (onInput)">
<Input
value={text}
onInput={(e, value) => this.setState({
text: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="NumberInput (onChange)">
<NumberInput
animated
width="30px"
const [
text,
setText,
] = useLocalState(context, 'text', "Sample text");
return (
<Box>
<LabeledList>
<LabeledList.Item label="Input (onChange)">
<Input
value={text}
onChange={(e, value) => setText(value)} />
</LabeledList.Item>
<LabeledList.Item label="Input (onInput)">
<Input
value={text}
onInput={(e, value) => setText(value)} />
</LabeledList.Item>
<LabeledList.Item label="NumberInput (onChange)">
<NumberInput
animated
width="40px"
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onChange={(e, value) => setNumber(value)} />
</LabeledList.Item>
<LabeledList.Item label="NumberInput (onDrag)">
<NumberInput
animated
width="40px"
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => setNumber(value)} />
</LabeledList.Item>
<LabeledList.Item label="Slider (onDrag)">
<Slider
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => setNumber(value)} />
</LabeledList.Item>
<LabeledList.Item label="Knob (onDrag)">
<Knob
inline
size={1}
step={1}
stepPixelSize={2}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => setNumber(value)} />
<Knob
ml={1}
inline
bipolar
size={1}
step={1}
stepPixelSize={2}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => setNumber(value)} />
</LabeledList.Item>
<LabeledList.Item label="Rotating Icon">
<Box inline position="relative">
<DraggableControl
value={number}
minValue={-100}
maxValue={100}
dragMatrix={[0, -1]}
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onChange={(e, value) => this.setState({
number: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="NumberInput (onDrag)">
<NumberInput
animated
width="30px"
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => this.setState({
number: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Slider (onDrag)">
<Slider
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => this.setState({
number: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Knob (onDrag)">
<Knob
inline
size={1}
step={1}
stepPixelSize={2}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => this.setState({
number: value,
})} />
<Knob
ml={1}
inline
bipolar
size={1}
step={1}
stepPixelSize={2}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => this.setState({
number: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Rotating Icon">
<Box inline position="relative">
<DraggableControl
value={number}
minValue={-100}
maxValue={100}
dragMatrix={[0, -1]}
step={1}
stepPixelSize={5}
onDrag={(e, value) => this.setState({
number: value,
})}>
{control => (
<Box onMouseDown={control.handleDragStart}>
<Icon
size={4}
color="yellow"
name="times"
rotation={control.displayValue * 4} />
{control.inputElement}
</Box>
)}
</DraggableControl>
</Box>
</LabeledList.Item>
</LabeledList>
</Box>
);
}
}
onDrag={(e, value) => setNumber(value)}>
{control => (
<Box onMouseDown={control.handleDragStart}>
<Icon
size={4}
color="yellow"
name="times"
rotation={control.displayValue * 4} />
{control.inputElement}
</Box>
)}
</DraggableControl>
</Box>
</LabeledList.Item>
</LabeledList>
</Box>
);
};
const KitchenSinkCollapsible = props => {
return (