From f7f35c47b991b641f8d9d1f77904b9f4514cd97f Mon Sep 17 00:00:00 2001
From: Letter N <24603524+LetterN@users.noreply.github.com>
Date: Tue, 21 Jul 2020 15:00:47 +0800
Subject: [PATCH] update

---
 .../tgui/interfaces/AirlockElectronics.js     |   4 +-
 .../packages/tgui/interfaces/CameraConsole.js |   1 -
 .../tgui/interfaces/CentcomPodLauncher.js     |   2 +-
 tgui/packages/tgui/interfaces/LanguageMenu.js |   4 +-
 .../interfaces/NtosCyborgRemoteMonitor.js     |   6 +-
 .../tgui/interfaces/OreRedemptionMachine.js   |  89 +++---
 tgui/packages/tgui/interfaces/PowerMonitor.js | 299 +++++++++---------
 tgui/packages/tgui/interfaces/Roulette.js     | 282 ++++++++---------
 tgui/packages/tgui/interfaces/SkillPanel.js   | 170 +++++-----
 tgui/packages/tgui/interfaces/Uplink.js       |   1 -
 tgui/packages/tgui/interfaces/Vending.js      |  30 +-
 .../interfaces/manually-routed/KitchenSink.js | 288 ++++++++---------
 12 files changed, 546 insertions(+), 630 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/AirlockElectronics.js b/tgui/packages/tgui/interfaces/AirlockElectronics.js
index e291052e25..1575bdeb45 100644
--- a/tgui/packages/tgui/interfaces/AirlockElectronics.js
+++ b/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',
diff --git a/tgui/packages/tgui/interfaces/CameraConsole.js b/tgui/packages/tgui/interfaces/CameraConsole.js
index 767b8d635b..594de52eb2 100644
--- a/tgui/packages/tgui/interfaces/CameraConsole.js
+++ b/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"
diff --git a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js b/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
index 7b21239144..28ff827f78 100644
--- a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
+++ b/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
diff --git a/tgui/packages/tgui/interfaces/LanguageMenu.js b/tgui/packages/tgui/interfaces/LanguageMenu.js
index 79249fd1f5..80e0168c42 100644
--- a/tgui/packages/tgui/interfaces/LanguageMenu.js
+++ b/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.'
diff --git a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
index 77a914814d..6fe9bc8f67 100644
--- a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
+++ b/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>
diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.js b/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
index cccf75ebeb..f1bfcd4529 100644
--- a/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
+++ b/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,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>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.js b/tgui/packages/tgui/interfaces/PowerMonitor.js
index 20d6943c60..8f5aaa4ebd 100644
--- a/tgui/packages/tgui/interfaces/PowerMonitor.js
+++ b/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,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;
diff --git a/tgui/packages/tgui/interfaces/Roulette.js b/tgui/packages/tgui/interfaces/Roulette.js
index 9134b87458..1bfa094c22 100644
--- a/tgui/packages/tgui/interfaces/Roulette.js
+++ b/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,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 (
diff --git a/tgui/packages/tgui/interfaces/SkillPanel.js b/tgui/packages/tgui/interfaces/SkillPanel.js
index 42b34e36f8..636e4f2154 100644
--- a/tgui/packages/tgui/interfaces/SkillPanel.js
+++ b/tgui/packages/tgui/interfaces/SkillPanel.js
@@ -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>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/Uplink.js b/tgui/packages/tgui/interfaces/Uplink.js
index f9f92dee33..be337241bf 100644
--- a/tgui/packages/tgui/interfaces/Uplink.js
+++ b/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} />
diff --git a/tgui/packages/tgui/interfaces/Vending.js b/tgui/packages/tgui/interfaces/Vending.js
index c2f10161e4..0a90e8a737 100644
--- a/tgui/packages/tgui/interfaces/Vending.js
+++ b/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
-                  && (
-                    !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,
             })} />
diff --git a/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js b/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js
index 43a7b05813..fcca031fe9 100644
--- a/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js
+++ b/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,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 (