sigh

tgui/packages/tgui/interfaces/CentcomPodLauncher.tsx

@@ -12,14 +12,14 @@ const pod_grey = {
   color: 'grey',
 };
 
-const useCompact = context => {
+const useCompact = () => {
   const [compact, setCompact] = useLocalState('compact', false);
   const toggleCompact = () => setCompact(!compact);
   return [compact, toggleCompact];
 };
 
 export const CentcomPodLauncher = (props) => {
-  const [compact] = useCompact(context);
+  const [compact] = useCompact();
   return (
     <Window
       title="Supply Pod Menu (Use against Helen Weinstein)"
@@ -31,7 +31,7 @@ export const CentcomPodLauncher = (props) => {
 };
 
 const CentcomPodLauncherContent = (props) => {
-  const [compact] = useCompact(context);
+  const [compact] = useCompact();
   return (
     <Window.Content>
       <Stack fill vertical>
@@ -543,7 +543,7 @@ const TabDrop = (props) => {
 
 const PodStatusPage = (props) => {
   const { act, data } = useBackend<any>();
-  const [compact, toggleCompact] = useCompact(context);
+  const [compact, toggleCompact] = useCompact();
   return (
     <Section fill width="100%">
       <Stack>
@@ -914,7 +914,7 @@ class PresetsPage extends Component {
 }
 
 const LaunchPage = (props) => {
-  const [compact] = useCompact(context);
+  const [compact] = useCompact();
   const { act, data } = useBackend<any>();
   return (
     <Button
@@ -988,7 +988,7 @@ const StylePage = (props) => {
 
 const Bays = (props) => {
   const { act, data } = useBackend<any>();
-  const [compact] = useCompact(context);
+  const [compact] = useCompact();
   return (
     <Section
       fill

tgui/packages/tgui/interfaces/ExodroneConsole.tsx

@@ -141,13 +141,13 @@ const SignalLostModal = (props) => {
       width={30}
       height={22}
       p={0}
-      style={{ "border-radius": "5%" }}>
+      style={{ "borderRadius": "5%" }}>
       <img src={nt_logo} width={64} height={64} />
       <Box
         backgroundColor="black"
         textColor="red"
         fontSize={2}
-        style={{ "border-radius": "-10%" }}>
+        style={{ "borderRadius": "-10%" }}>
         CONNECTION LOST
       </Box>
       <Box p={2} italic>

tgui/packages/tgui/interfaces/FishCatalog.tsx

@@ -18,7 +18,7 @@ export const FishCatalog = (props) => {
   const [
     currentFish,
     setCurrentFish,
-  ] = useLocalState('currentFish', null);
+  ] = useLocalState<any>('currentFish', null);
   return (
     <Window
       width={500}

tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.tsx

@@ -24,6 +24,9 @@ export const FUNDAMENTAL_DATA_TYPES = {
         value={value}
         defaultValue={0}>
         <NumberInput
+          step={0.1}
+          minValue={-Infinity}
+          maxValue={Infinity}
           value={value}
           color={color}
           onChange={(val) => setValue(val)}
@@ -66,7 +69,8 @@ export const FUNDAMENTAL_DATA_TYPES = {
           : Object.keys(extraData)}
         onSelected={setValue}
         displayText={value}
-        noscroll
+        selected={value}
+        autoScroll={false}
       />
     );
   },

tgui/packages/tgui/interfaces/IntegratedCircuit/Port.tsx

@@ -94,9 +94,8 @@ export class Port extends Component<any, any> {
             onMouseDown={this.handlePortMouseDown}
             onContextMenu={this.handlePortRightClick}
             onMouseUp={this.handlePortMouseUp}
-          >
-            <span ref={this.iconRef} className="ObjectComponent__PortPos" />
-          </Icon>
+          ></Icon>
+          <span ref={this.iconRef} className="ObjectComponent__PortPos" />
         </Stack.Item>
         {!isOutput && (
           <Stack.Item>

tgui/packages/tgui/interfaces/Interview.tsx

@@ -47,8 +47,8 @@ export const Interview = (props) => {
     for (let i = 1; i < parts.length; i += 2) {
       const match = link_decompose_regex.exec(parts[i]);
       parts[i] = (
-        <a key={'link' + i} href={match[2]}>
-          {match[1]}
+        <a key={'link' + i} href={match?.[2]}>
+          {match?.[1]}
         </a>
       );
     }
@@ -77,7 +77,7 @@ export const Interview = (props) => {
                 <span>
                   <Button
                     content="Admin PM"
-                    enabled={connected}
+                    disabled={!connected}
                     onClick={() => act('adminpm')}
                   />
                   <Button
@@ -109,20 +109,20 @@ export const Interview = (props) => {
               {((read_only || is_admin) && (
                 <BlockQuote>{response || 'No response.'}</BlockQuote>
               )) || (
-                <TextArea
-                  value={response}
-                  fluid
-                  height={10}
-                  maxLength={500}
-                  placeholder="Write your response here, max of 500 characters."
-                  onChange={(e, input) =>
-                    input !== response
-                    && act('update_answer', {
-                      qidx: qidx,
-                      answer: input,
-                    })}
-                />
-              )}
+                  <TextArea
+                    value={response}
+                    fluid
+                    height={10}
+                    maxLength={500}
+                    placeholder="Write your response here, max of 500 characters."
+                    onChange={(input) =>
+                      input !== response
+                      && act('update_answer', {
+                        qidx: qidx,
+                        answer: input,
+                      })}
+                  />
+                )}
             </Section>
           ))}
         </Section>

tgui/packages/tgui/interfaces/NtosNetChat.tsx

@@ -135,7 +135,7 @@ export const NtosNetChat = (props) => {
                     fluid
                     mt={1}
                     content={username + '...'}
-                    currentValue={username}
+                    value={username}
                     onCommit={(value) => act('PRG_changename', {
                       new_name: value,
                     })} />
@@ -265,7 +265,7 @@ export const NtosNetChat = (props) => {
                           <Button.Input
                             fluid
                             content="Save log..."
-                            defaultValue="new_log"
+                            value="new_log"
                             onCommit={(value) => act('PRG_savelog', {
                               log_name: value,
                             })} />

tgui/packages/tgui/interfaces/PaperSheet.tsx

@@ -44,8 +44,10 @@ const textWidth = (text, font, fontsize) => {
   font = fontsize + "x " + font;
   const c = document.createElement('canvas');
   const ctx = c.getContext("2d");
-  ctx.font = font;
-  const width = ctx.measureText(text).width;
+  if (ctx) {
+    ctx.font = font;
+  }
+  const width = ctx?.measureText(text).width;
   return width;
 };
 
@@ -144,7 +146,7 @@ const run_marked_default = value => {
 const checkAllFields = (txt, font, color, user_name, bold = false) => {
   let matches;
   let values = {};
-  let replace = [];
+  let replace: any[] = [];
   // I know its tempting to wrap ALL this in a .replace
   // HOWEVER the user might not of entered anything
   // if thats the case we are rebuilding the entire string
@@ -153,34 +155,34 @@ const checkAllFields = (txt, font, color, user_name, bold = false) => {
     const full_match = matches[0];
     const id = matches.groups.id;
     if (id) {
-      const dom = document.getElementById(id);
+      // trample checking ):
+      const dom: HTMLElement = document.getElementById(id) as HTMLElement;
       // make sure we got data, and kill any html that might
       // be in it
-      const dom_text = dom && dom.value ? dom.value : "";
+      const dom_text = dom && dom.textContent ? dom.textContent : "";
       if (dom_text.length === 0) {
         continue;
       }
-      const sanitized_text = sanitizeText(dom.value.trim(), []);
+      const sanitized_text = sanitizeText(dom.textContent.trim(), []);
       if (sanitized_text.length === 0) {
         continue;
       }
       // this is easier than doing a bunch of text manipulations
-      const target = dom.cloneNode(true);
+      const target = dom.cloneNode(true) as HTMLElement;
       // in case they sign in a field
       if (sanitized_text.match(sign_regex)) {
         target.style.fontFamily = "Times New Roman";
         bold = true;
-        target.defaultValue = user_name;
+        target.textContent = user_name;
       }
       else {
         target.style.fontFamily = font;
-        target.defaultValue = sanitized_text;
+        target.textContent = sanitized_text;
       }
       if (bold) {
         target.style.fontWeight = "bold";
       }
       target.style.color = color;
-      target.disabled = true;
       const wrap = document.createElement('div');
       wrap.appendChild(target);
       values[id] = sanitized_text; // save the data
@@ -270,7 +272,11 @@ const PaperSheetView = (props) => {
 };
 
 // again, need the states for dragging and such
-class PaperSheetStamper extends Component {
+class PaperSheetStamper extends Component<any, any> {
+  style: any;
+  handleMouseMove: any;
+  handleMouseClick: any;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -300,13 +306,13 @@ class PaperSheetStamper extends Component {
 
   findStampPosition(e) {
     let rotating;
-    const windowRef = document.querySelector('.Layout__content');
+    const windowRef = document.querySelector('.Layout__content') as Element;
     if (e.shiftKey) {
       rotating = true;
     }
 
     if (document.getElementById("stamp")) {
-      const stamp = document.getElementById("stamp");
+      const stamp = document.getElementById("stamp") as HTMLElement;
       const stampHeight = stamp.clientHeight;
       const stampWidth = stamp.clientWidth;
 

tgui/packages/tgui/interfaces/PersonalCrafting.tsx

@@ -85,20 +85,23 @@ export const PersonalCrafting = (props) => {
           <Flex>
             <Flex.Item>
               <Tabs vertical>
-                {categories.map(category => (
-                  <Tabs.Tab
-                    key={category.name}
-                    selected={category.name === tab}
-                    onClick={() => {
-                      setTab(category.name);
-                      act('set_category', {
-                        category: category.category,
-                        subcategory: category.subcategory,
-                      });
-                    }}>
-                    {category.name}
-                  </Tabs.Tab>
-                ))}
+                {categories.map(c1 => {
+                  let category: any = c1;
+                  return (
+                    <Tabs.Tab
+                      key={category.name}
+                      selected={category.name === tab}
+                      onClick={() => {
+                        setTab(category.name);
+                        act('set_category', {
+                          category: category.category,
+                          subcategory: category.subcategory,
+                        });
+                      }}>
+                      {category.name}
+                    </Tabs.Tab>
+                  )
+                })}
               </Tabs>
             </Flex.Item>
             <Flex.Item grow={1} basis={0}>

tgui/packages/tgui/interfaces/RadioactiveMicrolaser.tsx

@@ -66,6 +66,7 @@ export const RadioactiveMicrolaser = (props) => {
                 onClick={() => act('radintensity', { adjust: -1 })} />
               {' '}
               <NumberInput
+                step={1}
                 value={Math.round(intensity)}
                 width="40px"
                 minValue={1}
@@ -92,6 +93,7 @@ export const RadioactiveMicrolaser = (props) => {
                 onClick={() => act('radwavelength', { adjust: -1 })} />
               {' '}
               <NumberInput
+                step={1}
                 value={Math.round(wavelength)}
                 width="40px"
                 minValue={0}

tgui/packages/tgui/interfaces/RequestKiosk.tsx

@@ -130,7 +130,7 @@ export const RequestKioskContent = (props) => {
                 })} />
               <Box>
                 <NumberInput
-                  animate
+                  step={1}
                   unit="cr"
                   minValue={1}
                   maxValue={1000}

tgui/packages/tgui/interfaces/common/RecipeLookup.tsx

@@ -52,7 +52,7 @@ export const RecipeLookup = (props) => {
         )}
       </LabeledList.Item>
       {recipe.products && (
-        <LabeledList.Item bold label="Products">
+        <LabeledList.Item label="Products">
           {recipe.products.map(product => (
             <Button
               key={product.name}
@@ -65,7 +65,7 @@ export const RecipeLookup = (props) => {
           ))}
         </LabeledList.Item>
       )}
-      <LabeledList.Item bold label="Reactants">
+      <LabeledList.Item label="Reactants">
         {recipe.reactants.map(reactant => (
           <Box key={reactant.id}>
             <Button
@@ -89,7 +89,7 @@ export const RecipeLookup = (props) => {
         ))}
       </LabeledList.Item>
       {recipe.catalysts && (
-        <LabeledList.Item bold label="Catalysts">
+        <LabeledList.Item label="Catalysts">
           {recipe.catalysts.map(catalyst => (
             <Box key={catalyst.id}>
               {catalyst.tooltipBool && (
@@ -213,7 +213,7 @@ export const RecipeLookup = (props) => {
           )}
         </Flex>
       </LabeledList.Item>
-      <LabeledList.Item bold label="Dynamics">
+      <LabeledList.Item label="Dynamics">
         <LabeledList>
           <LabeledList.Item label="Optimal rate">
             <Tooltip