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-10 18:02:57 +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 <Button
icon={unres_direction & 2 ? 'check-square-o' : 'square-o'} icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
content="South" content="East"
selected={unres_direction & 2} selected={unres_direction & 2}
onClick={() => act('direc_set', { onClick={() => act('direc_set', {
unres_direction: '2', unres_direction: '2',
})} /> })} />
<Button <Button
icon={unres_direction & 4 ? 'check-square-o' : 'square-o'} icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
content="East" content="South"
selected={unres_direction & 4} selected={unres_direction & 4}
onClick={() => act('direc_set', { onClick={() => act('direc_set', {
unres_direction: '4', unres_direction: '4',

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

@@ -100,7 +100,6 @@ export const CameraConsoleContent = (props, context) => {
return ( return (
<Fragment> <Fragment>
<Input <Input
autoFocus
fluid fluid
mb={1} mb={1}
placeholder="Search for a camera" 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 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 if he has a smart enough mind, so offer up his body to ghosts
for maximum enjoyment. (Make sure to turn off bluespace and 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')} /> onClick={() => act('styleGondola')} />
<Button <Button

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

@@ -91,9 +91,7 @@ export const LanguageMenu = (props, context) => {
{' '} {' '}
Key: ,{language.key} Key: ,{language.key}
{' '} {' '}
{language.can_understand {!!language.shadow && '(gained from mob)'}
? 'Can understand.'
: 'Cannot understand.'}
{' '} {' '}
{language.can_speak {language.can_speak
? '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'; import { NtosWindow } from '../layouts';
export const NtosCyborgRemoteMonitor = (props, context) => { export const NtosCyborgRemoteMonitor = (props, context) => {
const { data } = useBackend(context);
const {
theme,
} = data;
return ( return (
<NtosWindow resizable> <NtosWindow theme={data.theme}>
<NtosWindow.Content scrollable> <NtosWindow.Content scrollable>
<NtosCyborgRemoteMonitorContent /> <NtosCyborgRemoteMonitorContent />
</NtosWindow.Content> </NtosWindow.Content>

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

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

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

@@ -1,5 +1,5 @@
import { classes } from "common/react"; import { classes } from "common/react";
import { useBackend } from "../backend"; import { useBackend, useLocalState } from "../backend";
import { Box, Button, Grid, NumberInput } from "../components"; import { Box, Button, Grid, NumberInput } from "../components";
import { Component } from "inferno"; import { Component } from "inferno";
import { Window } from "../layouts"; import { Window } from "../layouts";
@@ -230,162 +230,152 @@ export const RouletteBoard = (props, context) => {
); );
}; };
export class RouletteBetTable extends Component { export const RouletteBetTable = (props, context) => {
constructor() { const { act, data } = useBackend(context);
super();
this.state = { const [
customBet: 500, customBet,
}; setCustomBet,
] = useLocalState(context, 'customBet', 500);
let {
BetType,
} = data;
if (BetType.startsWith('s')) {
BetType = BetType.substring(1, BetType.length);
} }
setCustomBet(customBet) { return (
this.setState({ <table className="Roulette__lowertable">
customBet, <tr>
}); <th
} className={classes([
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([
'Roulette', 'Roulette',
'Roulette__lowertable--cell', 'Roulette__lowertable--cell',
'Roulette__lowertable--spinresult', 'Roulette__lowertable--header',
'Roulette__lowertable--spinresult-' + getNumberColor(data.LastSpin),
])}> ])}>
{data.LastSpin} Last Spun:
</td> </th>
<td className={classes([ <th
className={classes([
'Roulette', 'Roulette',
'Roulette__lowertable--cell', 'Roulette__lowertable--cell',
'Roulette__lowertable--betscell', 'Roulette__lowertable--header',
])}> ])}>
<Box Current Bet:
bold </th>
mt={1} </tr>
mb={1} <tr>
fontSize="25px" <td className={classes([
textAlign="center"> 'Roulette',
{data.BetAmount} cr on {BetType} 'Roulette__lowertable--cell',
</Box> 'Roulette__lowertable--spinresult',
<Box ml={1} mr={1}> 'Roulette__lowertable--spinresult-' + getNumberColor(data.LastSpin),
<Button ])}>
fluid {data.LastSpin}
content="Bet 10 cr" </td>
onClick={() => act('ChangeBetAmount', { <td className={classes([
amount: 10, 'Roulette',
})} 'Roulette__lowertable--cell',
/> 'Roulette__lowertable--betscell',
<Button ])}>
fluid <Box
content="Bet 50 cr" bold
onClick={() => act('ChangeBetAmount', { mt={1}
amount: 50, mb={1}
})} fontSize="25px"
/> textAlign="center">
<Button {data.BetAmount} cr on {BetType}
fluid </Box>
content="Bet 100 cr" <Box ml={1} mr={1}>
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">
<Button <Button
fluid fluid
content={data.IsAnchored ? "Bolted" : "Unbolted"} content="Bet 10 cr"
m={1} onClick={() => act('ChangeBetAmount', {
color="transparent" amount: 10,
textAlign="center" })}
onClick={() => act('anchor')}
/> />
</td> <Button
</tr> fluid
</table> 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) => { export const Roulette = (props, context) => {
return ( return (

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

@@ -1,119 +1,63 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend'; import { useBackend } from '../backend';
import { Window } from '../layouts';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components'; 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) => { export const SkillPanel = (props, context) => {
const { act, data } = useBackend(context); const { act, data } = useBackend(context);
const skills = data.skills || []; const skills = data.skills || [];
const see_mods = data.see_skill_mods;
const skillgreen = {
color: 'lightgreen',
fontWeight: 'bold',
};
const skillyellow = {
color: '#FFDB58',
fontWeight: 'bold',
};
return ( return (
<Window> <Window resizable>
<Window.Content scrollable> <Window.Content scrollable>
<Section <Section title={skills.playername}>
title={data.playername}
buttons={(
<Button
icon={see_mods ? 'Enabled' : 'Disabled'}
content={see_mods ? 'Modifiers Shown' : 'Modifiers Hidden'}
onClick={() => act('toggle_mods')} />
)}>
<LabeledList> <LabeledList>
{skills.map(skill => ( {skills.map(skill => (
<LabeledList.Item key={skill.name} label={skill.name}> <LabeledList.Item key={skill.name} label={skill.name}>
<span style={skillyellow}> <span style={skillyellow}>
{skill.desc} {skill.desc}
<br />
Modifiers: {skill.modifiers}
</span> </span>
<br /> <br />
{!!skill.level_based && ( <Level skill_lvl_num={skill.lvlnum} skill_lvl={skill.lvl} />
<Box> <br />
{see_mods ? ( Total Experience: [{skill.exp} XP]
<span> <br />
Level: [ XP To Next Level: 
<span style={skill.mod_style}> {skill.exp_req !== 0 ? (
{skill.lvl_mod} <span>
</span>] [{skill.exp_prog} / {skill.exp_req}]
</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>
) : ( ) : (
<span>{skill.base_readout}</span> <span style={skillgreen}>
)} [MAXXED]
{see_mods ? ( </span>
<ProgressBar
value={skill.percent_mod}
color="good" />
) : (
<ProgressBar
value={skill.percent_base}
color="good" />
)} )}
<br /> <br />
{!!data.admin && ( Overall Skill Progress: [{skill.exp} / {skill.max_exp}]
<Fragment> <ProgressBar
<Button value={skill.exp_percent}
content="Adjust Exp" color="good" />
onClick={() => act('adj_exp', { <br />
skill: skill.path, <Button
})} /> content="Adjust Exp"
<Button onClick={() => act('adj_exp', {
content="Set Exp" skill: skill.path,
onClick={() => act('set_exp', { })} />
skill: skill.path, <Button
})} /> content="Set Exp"
{!!skill.level_based && ( onClick={() => act('set_exp', {
<Button skill: skill.path,
content="Set Level" })} />
onClick={() => act('set_lvl', { <Button
skill: skill.path, content="Set Level"
})} /> onClick={() => act('set_lvl', {
)} skill: skill.path,
</Fragment> })} />
)}
<br /> <br />
<br /> <br />
</LabeledList.Item> </LabeledList.Item>
@@ -124,3 +68,31 @@ export const SkillPanel = (props, context) => {
</Window> </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> <Fragment>
Search Search
<Input <Input
autoFocus
value={searchText} value={searchText}
onInput={(e, value) => setSearchText(value)} onInput={(e, value) => setSearchText(value)}
mx={1} /> mx={1} />

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

@@ -10,19 +10,16 @@ const VendingRow = (props, context) => {
productStock, productStock,
custom, custom,
} = props; } = 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 = ( const free = (
!data.onstation !data.onstation
|| product.price === 0 || product.price === 0
|| (
!product.premium
&& data.department
&& data.user
&& data.department === data.user.department
)
); );
return ( return (
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
@@ -72,16 +69,13 @@ const VendingRow = (props, context) => {
<Button <Button
fluid fluid
disabled={( disabled={(
data.stock[product.namename] === 0 productStock === 0
|| ( || !free && (
!free !data.user
&& ( || product.price > data.user.cash
!data.user )
|| to_pay > data.user.cash
)
)
)} )}
content={!free ? pay_text : 'FREE'} content={free ? 'FREE' : product.price + ' cr'}
onClick={() => act('vend', { onClick={() => act('vend', {
'ref': product.ref, '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 { useBackend, useLocalState } from '../../backend';
import { BlockQuote, Box, Button, ByondUi, Collapsible, Flex, Icon, Input, Knob, LabeledList, NumberInput, ProgressBar, Section, Slider, Tabs, Tooltip } from '../../components'; import { BlockQuote, Box, Button, ByondUi, Collapsible, Flex, Icon, Input, Knob, LabeledList, NumberInput, ProgressBar, Section, Slider, Tabs, Tooltip } from '../../components';
import { DraggableControl } from '../../components/DraggableControl'; import { DraggableControl } from '../../components/DraggableControl';
@@ -117,7 +117,7 @@ const KitchenSinkButton = props => {
<Button fluid content="Fluid" /> <Button fluid content="Fluid" />
<Button <Button
my={1} my={1}
lineHeight={1} lineHeight={2}
minWidth={15} minWidth={15}
textAlign="center" textAlign="center"
content="With Box props" /> content="With Box props" />
@@ -181,45 +181,36 @@ const KitchenSinkBox = props => {
); );
}; };
class KitchenSinkProgressBar extends Component { const KitchenSinkProgressBar = (props, context) => {
constructor() { const [
super(); progress,
this.state = { setProgress,
progress: 0.5, ] = useLocalState(context, 'progress', 0.5);
};
}
render() { return (
const { progress } = this.state; <Box>
return ( <ProgressBar
<Box> ranges={{
<ProgressBar good: [0.5, Infinity],
ranges={{ bad: [-Infinity, 0.1],
good: [0.5, Infinity], average: [0, 0.5],
bad: [-Infinity, 0.1], }}
average: [0, 0.5], minValue={-1}
}} maxValue={1}
minValue={-1} value={progress}>
maxValue={1} Value: {Number(progress).toFixed(1)}
value={progress}> </ProgressBar>
Value: {Number(progress).toFixed(1)} <Box mt={1}>
</ProgressBar> <Button
<Box mt={1}> content="-0.1"
<Button onClick={() => setProgress(progress - 0.1)} />
content="-0.1" <Button
onClick={() => this.setState(prevState => ({ content="+0.1"
progress: prevState.progress - 0.1, onClick={() => setProgress(progress + 0.1)} />
}))} />
<Button
content="+0.1"
onClick={() => this.setState(prevState => ({
progress: prevState.progress + 0.1,
}))} />
</Box>
</Box> </Box>
); </Box>
} );
} };
const KitchenSinkTabs = (props, context) => { const KitchenSinkTabs = (props, context) => {
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
@@ -289,127 +280,110 @@ const KitchenSinkTooltip = props => {
); );
}; };
class KitchenSinkInput extends Component { const KitchenSinkInput = (props, context) => {
constructor() { const [
super(); number,
this.state = { setNumber,
number: 0, ] = useLocalState(context, 'number', 0);
text: 'Sample text',
};
}
render() { const [
const { number, text } = this.state; text,
return ( setText,
<Box> ] = useLocalState(context, 'text', "Sample text");
<LabeledList>
<LabeledList.Item label="Input (onChange)"> return (
<Input <Box>
value={text} <LabeledList>
onChange={(e, value) => this.setState({ <LabeledList.Item label="Input (onChange)">
text: value, <Input
})} /> value={text}
</LabeledList.Item> onChange={(e, value) => setText(value)} />
<LabeledList.Item label="Input (onInput)"> </LabeledList.Item>
<Input <LabeledList.Item label="Input (onInput)">
value={text} <Input
onInput={(e, value) => this.setState({ value={text}
text: value, onInput={(e, value) => setText(value)} />
})} /> </LabeledList.Item>
</LabeledList.Item> <LabeledList.Item label="NumberInput (onChange)">
<LabeledList.Item label="NumberInput (onChange)"> <NumberInput
<NumberInput animated
animated width="40px"
width="30px" 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} step={1}
stepPixelSize={5} stepPixelSize={5}
value={number} onDrag={(e, value) => setNumber(value)}>
minValue={-100} {control => (
maxValue={100} <Box onMouseDown={control.handleDragStart}>
onChange={(e, value) => this.setState({ <Icon
number: value, size={4}
})} /> color="yellow"
</LabeledList.Item> name="times"
<LabeledList.Item label="NumberInput (onDrag)"> rotation={control.displayValue * 4} />
<NumberInput {control.inputElement}
animated </Box>
width="30px" )}
step={1} </DraggableControl>
stepPixelSize={5} </Box>
value={number} </LabeledList.Item>
minValue={-100} </LabeledList>
maxValue={100} </Box>
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>
);
}
}
const KitchenSinkCollapsible = props => { const KitchenSinkCollapsible = props => {
return ( return (