diff --git a/tgui/packages/tgui/interfaces/Apc.js b/tgui/packages/tgui/interfaces/Apc.js
index 605f5ef23df..59c65f0ba71 100644
--- a/tgui/packages/tgui/interfaces/Apc.js
+++ b/tgui/packages/tgui/interfaces/Apc.js
@@ -1,10 +1,21 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+import { Window } from '../layouts';
import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
-export const Apc = props => {
- const { act, data } = useBackend(props);
+export const Apc = (props, context) => {
+ return (
+
+
+
+
+
+ );
+};
+
+const ApcContent = (props, context) => {
+ const { act, data } = useBackend(context);
const locked = data.locked && !data.siliconUser;
const powerStatusMap = {
2: {
diff --git a/tgui/packages/tgui/interfaces/Canister.js b/tgui/packages/tgui/interfaces/Canister.js
index 50a4f09fcc8..ddf881007ae 100644
--- a/tgui/packages/tgui/interfaces/Canister.js
+++ b/tgui/packages/tgui/interfaces/Canister.js
@@ -1,9 +1,10 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { AnimatedNumber, Box, Button, Flex, Knob, LabeledList, NoticeBox, Section } from '../components';
+import { Window } from '../layouts';
-export const Canister = props => {
- const { act, data } = useBackend(props);
+export const Canister = (props, context) => {
+ const { act, data } = useBackend(context);
const {
portConnected,
tankPressure,
@@ -18,109 +19,111 @@ export const Canister = props => {
restricted,
} = data;
return (
-
-
- The regulator {hasHoldingTank ? 'is' : 'is not'} connected
- to a tank.
-
- act('relabel')} />
- )}>
-
-
- act('pressure', {
- pressure: value,
- })} />
-
-
-
- Valve
-
-
- kPa
-
+
+
+
+ The regulator {hasHoldingTank ? 'is' : 'is not'} connected
+ to a tank.
+
+
-
-
-
- kPa
-
-
- {portConnected ? 'Connected' : 'Not Connected'}
-
- {!!isPrototype && (
-
-
+ act('eject')} />
+ )}>
+ {!!hasHoldingTank && (
+
+
+ {holdingTank.name}
+
+
+ kPa
+
-
-
-
- act('eject')} />
- )}>
- {!!hasHoldingTank && (
-
-
- {holdingTank.name}
-
-
- kPa
-
-
- )}
- {!hasHoldingTank && (
-
- No Holding Tank
-
- )}
-
-
+ )}
+ {!hasHoldingTank && (
+
+ No Holding Tank
+
+ )}
+
+
+
);
};
diff --git a/tgui/packages/tgui/interfaces/NtosPowerMonitor.js b/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
new file mode 100644
index 00000000000..a9f6d2e8fc2
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
@@ -0,0 +1,12 @@
+import { NtosWindow } from '../layouts';
+import { PowerMonitorContent } from './PowerMonitor';
+
+export const NtosPowerMonitor = () => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.js b/tgui/packages/tgui/interfaces/PowerMonitor.js
index ebb343039f2..20d6943c605 100644
--- a/tgui/packages/tgui/interfaces/PowerMonitor.js
+++ b/tgui/packages/tgui/interfaces/PowerMonitor.js
@@ -4,6 +4,8 @@ import { toFixed } from 'common/math';
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';
const PEAK_DRAW = 500000;
@@ -12,7 +14,17 @@ const powerRank = str => {
return ['w', 'kw', 'mw', 'gw'].indexOf(unit);
};
-export class PowerMonitor extends Component {
+export const PowerMonitor = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export class PowerMonitorContent extends Component {
constructor() {
super();
this.state = {
@@ -21,8 +33,7 @@ export class PowerMonitor extends Component {
}
render() {
- const { state } = this.props;
- const { data } = state;
+ const { data } = useBackend(this.context);
const { history } = data;
const { sortByField } = this.state;
const supply = history.supply[history.supply.length - 1] || 0;
diff --git a/tgui/packages/tgui/interfaces/Smes.js b/tgui/packages/tgui/interfaces/Smes.js
index 368ddda78e3..552ad1d1a5d 100644
--- a/tgui/packages/tgui/interfaces/Smes.js
+++ b/tgui/packages/tgui/interfaces/Smes.js
@@ -1,13 +1,13 @@
-import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, Flex, LabeledList, ProgressBar, Section, Slider } from '../components';
import { formatPower } from '../format';
+import { Window } from '../layouts';
// Common power multiplier
const POWER_MUL = 1e3;
-export const Smes = props => {
- const { act, data } = useBackend(props);
+export const Smes = (props, context) => {
+ const { act, data } = useBackend(context);
const {
capacityPercent,
capacity,
@@ -34,153 +34,155 @@ export const Smes = props => {
|| 'bad'
);
return (
-
-
-
-
- act('tryinput')}>
- {inputAttempt ? 'Auto' : 'Off'}
-
- }>
-
- {capacityPercent >= 100 && 'Fully Charged'
- || inputting && 'Charging'
- || 'Not Charging'}
-
-
-
-
-
+
+
+
+
+
+ act('input', {
- target: 'min',
- })} />
+ icon={inputAttempt ? 'sync-alt' : 'times'}
+ selected={inputAttempt}
+ onClick={() => act('tryinput')}>
+ {inputAttempt ? 'Auto' : 'Off'}
+
+ }>
+
+ {capacityPercent >= 100 && 'Fully Charged'
+ || inputting && 'Charging'
+ || 'Not Charging'}
+
+
+
+
+
+
+
+ formatPower(value * POWER_MUL, 1)}
+ onDrag={(e, value) => act('input', {
+ target: value * POWER_MUL,
+ })} />
+
+
+
+
+
+
+ {formatPower(inputAvailable)}
+
+
+
+
+
+ act('input', {
- adjust: -10000,
- })} />
-
-
- formatPower(value * POWER_MUL, 1)}
- onDrag={(e, value) => act('input', {
- target: value * POWER_MUL,
- })} />
-
-
-
-
-
-
- {formatPower(inputAvailable)}
-
-
-
-
-
- act('tryoutput')}>
- {outputAttempt ? 'On' : 'Off'}
-
- }>
-
- {outputting
- ? 'Sending'
- : charge > 0
- ? 'Not Sending'
- : 'No Charge'}
-
-
-
-
-
-
-
- formatPower(value * POWER_MUL, 1)}
- onDrag={(e, value) => act('output', {
- target: value * POWER_MUL,
- })} />
-
-
-
-
-
-
- {formatPower(outputUsed)}
-
-
-
-
+ icon={outputAttempt ? 'power-off' : 'times'}
+ selected={outputAttempt}
+ onClick={() => act('tryoutput')}>
+ {outputAttempt ? 'On' : 'Off'}
+
+ }>
+
+ {outputting
+ ? 'Sending'
+ : charge > 0
+ ? 'Not Sending'
+ : 'No Charge'}
+
+
+
+
+
+
+
+ formatPower(value * POWER_MUL, 1)}
+ onDrag={(e, value) => act('output', {
+ target: value * POWER_MUL,
+ })} />
+
+
+
+
+
+
+ {formatPower(outputUsed)}
+
+
+
+
+
);
};
diff --git a/tgui/packages/tgui/layouts/NtosWindow.js b/tgui/packages/tgui/layouts/NtosWindow.js
index c3a5579262c..010a7b4fda3 100644
--- a/tgui/packages/tgui/layouts/NtosWindow.js
+++ b/tgui/packages/tgui/layouts/NtosWindow.js
@@ -1,6 +1,7 @@
import { useBackend } from '../backend';
import { Box, Button } from '../components';
-import { Layout, refocusLayout } from './Layout';
+import { refocusLayout } from './Layout';
+import { Window } from './Window';
export const NtosWindow = (props, context) => {
const { children } = props;
@@ -16,7 +17,7 @@ export const NtosWindow = (props, context) => {
PC_showexitprogram,
} = data;
return (
-
+
-
+
);
};
const NtosWindowContent = props => {
return (
-
+
);
};