Fixing interfaces...

tgui-next/packages/tgui/interfaces/Canvas.js

@@ -1,96 +0,0 @@
-import { Fragment } from 'inferno';
-import { useBackend } from '../backend';
-import { Box, Button } from '../components';
-import { Component, createRef } from 'inferno';
-import { pureComponentHooks } from 'common/react';
-
-
-class PaintCanvas extends Component {
-  constructor(props) {
-    super(props);
-    this.canvasRef = createRef();
-    this.onCVClick = props.onCanvasClick;
-  }
-
-  componentDidMount() {
-    this.drawCanvas(this.props);
-  }
-
-  componentDidUpdate() {
-    this.drawCanvas(this.props);
-  }
-
-  drawCanvas(propSource) {
-    const ctx = this.canvasRef.current.getContext("2d");
-    const grid = propSource.value;
-    const x_size = grid.length;
-    if (!x_size) {
-      return;
-    }
-    const y_size = grid[0].length;
-    const x_scale = Math.round(this.canvasRef.current.width / x_size);
-    const y_scale = Math.round(this.canvasRef.current.height / y_size);
-    ctx.save();
-    ctx.scale(x_scale, y_scale);
-    for (let x = 0; x < grid.length; x++) {
-      const element = grid[x];
-      for (let y = 0; y < element.length; y++) {
-        const color = element[y];
-        ctx.fillStyle = color;
-        ctx.fillRect(x, y, 1, 1);
-      }
-    }
-    ctx.restore();
-  }
-
-  clickwrapper(event) {
-    const x_size = this.props.value.length;
-    if (!x_size)
-    {
-      return;
-    }
-    const y_size = this.props.value[0].length;
-    const x_scale = this.canvasRef.current.width / x_size;
-    const y_scale = this.canvasRef.current.height / y_size;
-    const x = Math.floor(event.offsetX / x_scale)+1;
-    const y = Math.floor(event.offsetY / y_scale)+1;
-    this.onCVClick(x, y);
-  }
-
-  render() {
-    const {
-      res = 1,
-      value,
-      px_per_unit = 28,
-      ...rest
-    } = this.props;
-    const x_size = value.length * px_per_unit;
-    const y_size = x_size !== 0 ? value[0].length * px_per_unit : 0;
-    return (
-      <canvas
-        ref={this.canvasRef}
-        width={x_size || 300}
-        height={y_size || 300}
-        {...rest}
-        onClick={e => this.clickwrapper(e)}>
-          Canvas failed to render.
-      </canvas>
-    );
-  }
-}
-export const Canvas = props => {
-  const { act, data } = useBackend(props);
-  return (
-    <Box textAlign="center">
-      <PaintCanvas
-        value={data.grid}
-        onCanvasClick={(x, y) => act("paint", { x, y })} />
-      <Box>
-        {!data.finalized
-        && <Button.Confirm
-          onClick={() => act("finalize")}
-          content="Finalize" />}
-        {data.name}
-      </Box>
-    </Box>);
-};

tgui/packages/tgui/interfaces/Apc.js

@@ -1,63 +1,50 @@
 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, context) => {
-  return (
-    <Window resizable>
-      <Window.Content scrollable>
-        <ApcContent />
-      </Window.Content>
-    </Window>
-  );
-};
-
-const powerStatusMap = {
-  2: {
-    color: 'good',
-    externalPowerText: 'External Power',
-    chargingText: 'Fully Charged',
-  },
-  1: {
-    color: 'average',
-    externalPowerText: 'Low External Power',
-    chargingText: 'Charging',
-  },
-  0: {
-    color: 'bad',
-    externalPowerText: 'No External Power',
-    chargingText: 'Not Charging',
-  },
-};
-
-const malfMap = {
-  1: {
-    icon: 'terminal',
-    content: 'Override Programming',
-    action: 'hack',
-  },
-  2: {
-    icon: 'caret-square-down',
-    content: 'Shunt Core Process',
-    action: 'occupy',
-  },
-  3: {
-    icon: 'caret-square-left',
-    content: 'Return to Main Core',
-    action: 'deoccupy',
-  },
-  4: {
-    icon: 'caret-square-down',
-    content: 'Shunt Core Process',
-    action: 'occupy',
-  },
-};
-
-const ApcContent = (props, context) => {
-  const { act, data } = useBackend(context);
+export const Apc = props => {
+  const { act, data } = useBackend(props);
   const locked = data.locked && !data.siliconUser;
+  const powerStatusMap = {
+    2: {
+      color: 'good',
+      externalPowerText: 'External Power',
+      chargingText: 'Fully Charged',
+    },
+    1: {
+      color: 'average',
+      externalPowerText: 'Low External Power',
+      chargingText: 'Charging',
+    },
+    0: {
+      color: 'bad',
+      externalPowerText: 'No External Power',
+      chargingText: 'Not Charging',
+    },
+  };
+  const malfMap = {
+    1: {
+      icon: 'terminal',
+      content: 'Override Programming',
+      action: 'hack',
+    },
+    2: {
+      icon: 'caret-square-down',
+      content: 'Shunt Core Process',
+      action: 'occupy',
+    },
+    3: {
+      icon: 'caret-square-left',
+      content: 'Return to Main Core',
+      action: 'deoccupy',
+    },
+    4: {
+      icon: 'caret-square-down',
+      content: 'Shunt Core Process',
+      action: 'occupy',
+    },
+  };
   const externalPowerStatus = powerStatusMap[data.externalPower]
     || powerStatusMap[0];
   const chargingStatus = powerStatusMap[data.chargingStatus]
@@ -65,6 +52,7 @@ const ApcContent = (props, context) => {
   const channelArray = data.powerChannels || [];
   const malfStatus = malfMap[data.malfStatus] || malfMap[0];
   const adjustedCellChange = data.powerCellStatus / 100;
+
   if (data.failTime > 0) {
     return (
       <NoticeBox>
@@ -85,7 +73,10 @@ const ApcContent = (props, context) => {
 
   return (
     <Fragment>
-      <InterfaceLockNoticeBox />
+      <InterfaceLockNoticeBox
+        siliconUser={data.siliconUser}
+        locked={data.locked}
+        onLockStatusChange={() => act('lock')} />
       <Section title="Power Status">
         <LabeledList>
           <LabeledList.Item
@@ -206,9 +197,33 @@ const ApcContent = (props, context) => {
             <Button
               icon="lightbulb-o"
               content={data.nightshiftLights ? 'Enabled' : 'Disabled'}
+              disabled={locked}
               onClick={() => act('toggle_nightshift')} />
           )} />
       </Section>
+      {data.hijackable && (
+        <Section
+          title="Hijacking"
+          buttons={(
+            <Fragment>
+              <Button
+                icon="unlock"
+                content="Hijack"
+                disabled={data.hijacker}
+                onClick={() => act('hijack')} />
+              <Button
+                icon="lock"
+                content="Lockdown"
+                disabled={!data.lockdownavail}
+                onClick={() => act('lockdown')} />
+              <Button
+                icon="lightbulb-o"
+                content="Drain"
+                disabled={!data.drainavail}
+                onClick={() => act('drain')} />
+            </Fragment>
+          )} />
+      )}
     </Fragment>
   );
 };

tgui/packages/tgui/interfaces/ClockworkSlab.js

@@ -28,8 +28,8 @@ export const ClockworkSlab = props => {
           {rec_text}
           {recollection_categories.map(categories => {
             return (
-              <Window>
-                <br key={category.name} />
+              <Window key={rec_section} >
+                <br />
                 <Button
                   content={`${categories.name} - ${categories.desc}`}
                   onClick={() => act('rec_category', {