update

tgui/packages/tgui/interfaces/AirlockElectronics.js

@@ -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',

tgui/packages/tgui/interfaces/CameraConsole.js

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

tgui/packages/tgui/interfaces/CentcomPodLauncher.js

@@ -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

tgui/packages/tgui/interfaces/LanguageMenu.js

@@ -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.'

tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js

@@ -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>

tgui/packages/tgui/interfaces/OreRedemptionMachine.js

@@ -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,17 +98,15 @@ 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 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>
@@ -133,9 +131,7 @@ class MaterialRow extends Component {
           minValue={1}
           maxValue={50}
           value={amount}
-            onChange={(e, value) => this.setState({
-              amount: value,
-            })} />
+          onChange={(e, value) => setAmount(value)} />
         <Button
           disabled={amountAvailable < 1}
           content="Release"
@@ -143,5 +139,4 @@ class MaterialRow extends Component {
       </Table.Cell>
     </Table.Row>
   );
-  }
-}
+};

tgui/packages/tgui/interfaces/PowerMonitor.js

@@ -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,18 +24,14 @@ export const PowerMonitor = () => {
   );
 };
 
-export class PowerMonitorContent extends Component {
-  constructor() {
-    super();
-    this.state = {
-      sortByField: null,
-    };
-  }
-
-  render() {
-    const { data } = useBackend(this.context);
+export const PowerMonitorContent = (props, context) => {
+  const { data } = useBackend(context);
   const { history } = data;
-    const { sortByField } = this.state;
+
+  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]);
@@ -111,21 +107,17 @@ export class PowerMonitorContent extends Component {
           <Button.Checkbox
             checked={sortByField === 'name'}
             content="Name"
-              onClick={() => this.setState({
-                sortByField: sortByField !== 'name' && 'name',
-              })} />
+            onClick={() => setSortByField(sortByField !== 'name' && 'name')} />
           <Button.Checkbox
             checked={sortByField === 'charge'}
             content="Charge"
-              onClick={() => this.setState({
-                sortByField: sortByField !== 'charge' && 'charge',
-              })} />
+            onClick={() => setSortByField(
+              sortByField !== 'charge' && 'charge'
+            )} />
           <Button.Checkbox
             checked={sortByField === 'draw'}
             content="Draw"
-              onClick={() => this.setState({
-                sortByField: sortByField !== 'draw' && 'draw',
-              })} />
+            onClick={() => setSortByField(sortByField !== 'draw' && 'draw')} />
         </Box>
         <Table>
           <Table.Row header>
@@ -178,8 +170,7 @@ export class PowerMonitorContent extends Component {
       </Section>
     </Fragment>
   );
-  }
-}
+};
 
 const AreaCharge = props => {
   const { charging, charge } = props;

tgui/packages/tgui/interfaces/Roulette.js

@@ -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,22 +230,13 @@ 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);
 
-  setCustomBet(customBet) {
-    this.setState({
+  const [
     customBet,
-    });
-  }
-
-  render() {
-    const { act, data } = useBackend(this.context);
+    setCustomBet,
+  ] = useLocalState(context, 'customBet', 500);
 
   let {
     BetType,
@@ -332,19 +323,19 @@ export class RouletteBetTable extends Component {
                   fluid
                   content="Bet custom amount..."
                   onClick={() => act('ChangeBetAmount', {
-                      amount: this.state.customBet,
+                    amount: customBet,
                   })}
                 />
               </Grid.Column>
               <Grid.Column size={0.1}>
                 <NumberInput
-                    value={this.state.customBet}
+                  value={customBet}
                   minValue={0}
                   maxValue={1000}
                   step={10}
                   stepPixelSize={4}
                   width="40px"
-                    onChange={(e, value) => this.setCustomBet(value)}
+                  onChange={(e, value) => setCustomBet(value)}
                 />
               </Grid.Column>
             </Grid>
@@ -384,8 +375,7 @@ export class RouletteBetTable extends Component {
       </tr>
     </table>
   );
-  }
-}
+};
 
 export const Roulette = (props, context) => {
   return (

tgui/packages/tgui/interfaces/SkillPanel.js

@@ -1,12 +1,6 @@
-import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Window } from '../layouts';
 import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
-
-export const SkillPanel = (props, context) => {
-  const { act, data } = useBackend(context);
-  const skills = data.skills || [];
-  const see_mods = data.see_skill_mods;
+import { Window } from '../layouts';
 const skillgreen = {
   color: 'lightgreen',
   fontWeight: 'bold',
@@ -15,86 +9,40 @@ export const SkillPanel = (props, context) => {
   color: '#FFDB58',
   fontWeight: 'bold',
 };
+export const SkillPanel = (props, context) => {
+  const { act, data } = useBackend(context);
+  const skills = data.skills || [];
   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 ? (
+                <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>
-                        Level: [
-                        <span style={skill.mod_style}>
-                          {skill.lvl_mod}
-                        </span>]
+                    [{skill.exp_prog} / {skill.exp_req}]
                   </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>
-                )}
-                {see_mods ? (
-                  <ProgressBar
-                    value={skill.percent_mod}
-                    color="good" />
-                ) : (
-                  <ProgressBar
-                    value={skill.percent_base}
-                    color="good" />
-                )}
                 <br />
-                {!!data.admin && (
-                  <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', {
@@ -105,15 +53,11 @@ export const SkillPanel = (props, context) => {
                   onClick={() => act('set_exp', {
                     skill: skill.path,
                   })} />
-                    {!!skill.level_based && (
                 <Button
                   content="Set Level"
                   onClick={() => act('set_lvl', {
                     skill: skill.path,
                   })} />
-                    )}
-                  </Fragment>
-                )}
                 <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>
+  );
+};

tgui/packages/tgui/interfaces/Uplink.js

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

tgui/packages/tgui/interfaces/Vending.js

@@ -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
-                  && (
+              productStock === 0
+              || !free && (
                 !data.user
-                    || to_pay > data.user.cash
-                  )
+                || product.price > data.user.cash
               )
             )}
-            content={!free ? pay_text : 'FREE'}
+            content={free ? 'FREE' : product.price + ' cr'}
             onClick={() => act('vend', {
               'ref': product.ref,
             })} />

tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js

@@ -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,16 +181,12 @@ 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
@@ -207,19 +203,14 @@ class KitchenSinkProgressBar extends Component {
       <Box mt={1}>
         <Button
           content="-0.1"
-            onClick={() => this.setState(prevState => ({
-              progress: prevState.progress - 0.1,
-            }))} />
+          onClick={() => setProgress(progress - 0.1)} />
         <Button
           content="+0.1"
-            onClick={() => this.setState(prevState => ({
-              progress: prevState.progress + 0.1,
-            }))} />
+          onClick={() => setProgress(progress + 0.1)} />
       </Box>
     </Box>
   );
-  }
-}
+};
 
 const KitchenSinkTabs = (props, context) => {
   const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
@@ -289,59 +280,51 @@ 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);
+
+  const [
+    text,
+    setText,
+  ] = useLocalState(context, 'text', "Sample text");
 
-  render() {
-    const { number, text } = this.state;
   return (
     <Box>
       <LabeledList>
         <LabeledList.Item label="Input (onChange)">
           <Input
             value={text}
-              onChange={(e, value) => this.setState({
-                text: value,
-              })} />
+            onChange={(e, value) => setText(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="Input (onInput)">
           <Input
             value={text}
-              onInput={(e, value) => this.setState({
-                text: value,
-              })} />
+            onInput={(e, value) => setText(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="NumberInput (onChange)">
           <NumberInput
             animated
-              width="30px"
+            width="40px"
             step={1}
             stepPixelSize={5}
             value={number}
             minValue={-100}
             maxValue={100}
-              onChange={(e, value) => this.setState({
-                number: value,
-              })} />
+            onChange={(e, value) => setNumber(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="NumberInput (onDrag)">
           <NumberInput
             animated
-              width="30px"
+            width="40px"
             step={1}
             stepPixelSize={5}
             value={number}
             minValue={-100}
             maxValue={100}
-              onDrag={(e, value) => this.setState({
-                number: value,
-              })} />
+            onDrag={(e, value) => setNumber(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="Slider (onDrag)">
           <Slider
@@ -350,9 +333,7 @@ class KitchenSinkInput extends Component {
             value={number}
             minValue={-100}
             maxValue={100}
-              onDrag={(e, value) => this.setState({
-                number: value,
-              })} />
+            onDrag={(e, value) => setNumber(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="Knob (onDrag)">
           <Knob
@@ -363,9 +344,7 @@ class KitchenSinkInput extends Component {
             value={number}
             minValue={-100}
             maxValue={100}
-              onDrag={(e, value) => this.setState({
-                number: value,
-              })} />
+            onDrag={(e, value) => setNumber(value)} />
           <Knob
             ml={1}
             inline
@@ -376,9 +355,7 @@ class KitchenSinkInput extends Component {
             value={number}
             minValue={-100}
             maxValue={100}
-              onDrag={(e, value) => this.setState({
-                number: value,
-              })} />
+            onDrag={(e, value) => setNumber(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="Rotating Icon">
           <Box inline position="relative">
@@ -389,9 +366,7 @@ class KitchenSinkInput extends Component {
               dragMatrix={[0, -1]}
               step={1}
               stepPixelSize={5}
-                onDrag={(e, value) => this.setState({
-                  number: value,
-                })}>
+              onDrag={(e, value) => setNumber(value)}>
               {control => (
                 <Box onMouseDown={control.handleDragStart}>
                   <Icon
@@ -408,8 +383,7 @@ class KitchenSinkInput extends Component {
       </LabeledList>
     </Box>
   );
-  }
-}
+};
 
 const KitchenSinkCollapsible = props => {
   return (