[tgui] Linter fixes 8 (#92101)

8! Yeah! How many more? Well, there's seemingly a fountain of old code from TG at any given point, and probably a hundred more linter errors that have collected over time. However, this should be the last batch before we ship biome. Knock on wood (I am not sitting near anything made of wood)! Get [Biome](https://biomejs.dev/guides/manual-installation/) (the executable, at least) `biome lint --write --only "useTemplate" --unsafe` I would like to install a new linter/formatter
2026-08-31 00:58:26 +01:00 · 2025-07-19 20:29:24 -04:00
parent 88499438a8
commit 9073125417
133 changed files with 281 additions and 286 deletions
@@ -37,13 +37,13 @@ export class DreamSeeker {
    const query = Object.keys(params)
      .map(
        (key) =>
-          encodeURIComponent(key) + '=' + encodeURIComponent(params[key]),
+          `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`,
      )
      .join('&');
    logger.log(
      `topic call at ${this.client.defaults.baseURL}/dummy.htm?${query}`,
    );
-    return this.client.get('/dummy.htm?' + query);
+    return this.client.get(`/dummy.htm?${query}`);
  }

  static async getInstancesByPids(pids: number[]): Promise<DreamSeeker[]> {
@@ -111,5 +111,5 @@ export class DreamSeeker {
 }

 function plural(word: string, n: number): string {
-  return n !== 1 ? word + 's' : word;
+  return n !== 1 ? `${word}s` : word;
 }
@@ -84,5 +84,5 @@ export function retrace(stack: string): string | undefined {
    })
    .join('\n');

-  return header + '\n' + mappedStack;
+  return `${header}\n${mappedStack}`;
 }
@@ -61,7 +61,7 @@ export async function findCacheRoot(): Promise<string | undefined> {
      'userpath',
    );
    if (userpath) {
-      cacheRoot = userpath.replace(/\\$/, '').replace(/\\/g, '/') + '/cache';
+      cacheRoot = `${userpath.replace(/\\$/, '').replace(/\\/g, '/')}/cache`;
      await onCacheRootFound(cacheRoot);
      return cacheRoot;
    }
@@ -72,7 +72,7 @@ export async function findCacheRoot(): Promise<string | undefined> {
 async function onCacheRootFound(cacheRoot: string): Promise<void> {
  logger.log(`found cache at '${cacheRoot}'`);
  // Plant a dummy browser window file, we'll be using this to avoid world topic. For byond 514.
-  await Bun.write(cacheRoot + '/dummy.htm', '');
+  await Bun.write(`${cacheRoot}/dummy.htm`, '');
 }

 export async function reloadByondCache(bundleDir: string): Promise<void> {
@@ -103,7 +103,7 @@ export async function reloadByondCache(bundleDir: string): Promise<void> {

    try {
      // Plant a dummy browser window file, we'll be using this to avoid world topic. For byond 515-516.
-      await Bun.write(cacheDir + '/dummy.htm', '');
+      await Bun.write(`${cacheDir}/dummy.htm`, '');

      // Copy assets
      for (const asset of assets) {
@@ -98,7 +98,7 @@ export const NowPlayingWidget = (props) => {
          value={settings.adminMusicVolume}
          step={0.0025}
          stepPixelSize={1}
-          format={(value) => toFixed(value * 100) + '%'}
+          format={(value) => `${toFixed(value * 100)}%`}
          onChange={(e, value) =>
            settings.update({
              adminMusicVolume: value,
@@ -62,7 +62,7 @@ const findNearestScrollableParent = (startingNode) => {
 const createHighlightNode = (text, color) => {
  const node = document.createElement('span');
  node.className = 'Chat__highlight';
-  node.setAttribute('style', 'background-color:' + color);
+  node.setAttribute('style', `background-color:${color}`);
  node.textContent = text;
  return node;
 };
@@ -93,7 +93,7 @@ const handleImageError = (e) => {
    }
    const src = node.src;
    node.src = null;
-    node.src = src + '#' + attempts;
+    node.src = `${src}#${attempts}`;
    node.setAttribute('data-reload-n', attempts + 1);
  }, IMAGE_RETRY_DELAY);
 };
@@ -258,13 +258,13 @@ class ChatRenderer {
        }
      }
      const regexStr = regexExpressions.join('|');
-      const flags = 'g' + (matchCase ? '' : 'i');
+      const flags = `g${matchCase ? '' : 'i'}`;
      // We wrap this in a try-catch to ensure that broken regex doesn't break
      // the entire chat.
      try {
        // setting regex overrides matchword
        if (regexStr) {
-          highlightRegex = new RegExp('(' + regexStr + ')', flags);
+          highlightRegex = new RegExp(`(${regexStr})`, flags);
        } else {
          const pattern = `${matchWord ? '\\b' : ''}(${highlightWords.join(
            '|',
@@ -603,7 +603,7 @@ class ChatRenderer {
      for (let i = 0; i < cssRules.length; i++) {
        const rule = cssRules[i];
        if (rule && typeof rule.cssText === 'string') {
-          cssText += rule.cssText + '\n';
+          cssText += `${rule.cssText}\n`;
        }
      }
    }
@@ -612,7 +612,7 @@ class ChatRenderer {
    let messagesHtml = '';
    for (const message of this.visibleMessages) {
      if (message.node) {
-        messagesHtml += message.node.outerHTML + '\n';
+        messagesHtml += `${message.node.outerHTML}\n`;
      }
    }
    // Create a page
@@ -360,7 +360,7 @@ export const sendAct = (action: string, payload: object = {}) => {

  const stringifiedPayload = JSON.stringify(payload);
  const urlSize = Object.entries({
-    type: 'act/' + action,
+    type: `act/${action}`,
    payload: stringifiedPayload,
    tgui: 1,
    windowId: Byond.windowId,
@@ -375,14 +375,14 @@ export const sendAct = (action: string, payload: object = {}) => {
    const id = `${Date.now()}`;
    globalStore?.dispatch(backendCreatePayloadQueue({ id, chunks }));
    Byond.sendMessage('oversizedPayloadRequest', {
-      type: 'act/' + action,
+      type: `act/${action}`,
      id,
      chunkCount: chunks.length,
    });
    return;
  }

-  Byond.sendMessage('act/' + action, payload);
+  Byond.sendMessage(`act/${action}`, payload);
 };

 type BackendState<TData> = {
@@ -65,7 +65,7 @@ export function relayMiddleware(store) {
  return (next) => (action) => {
    const { type, relayed } = action;
    if (type === openExternalBrowser.type) {
-      window.open(location.href + '?external', '_blank');
+      window.open(`${location.href}?external`, '_blank');
      return;
    }
    if (relayedTypes.includes(type) && !relayed && !externalBrowser) {
@@ -43,14 +43,14 @@ export const getWindowSize = (): [number, number] => [
 export const setWindowPosition = (vec: [number, number]) => {
  const byondPos = vecAdd(vec, screenOffset);
  return Byond.winset(Byond.windowId, {
-    pos: byondPos[0] + ',' + byondPos[1],
+    pos: `${byondPos[0]},${byondPos[1]}`,
  });
 };

 // Set window size
 const setWindowSize = (vec: [number, number]) => {
  return Byond.winset(Byond.windowId, {
-    size: vec[0] + 'x' + vec[1],
+    size: `${vec[0]}x${vec[1]}`,
  });
 };

@@ -82,7 +82,7 @@ const UsersScreen = (props) => {
      {PlayerAccounts.map((account) => (
        <Collapsible
          key={account.index}
-          title={account.name + ' the ' + account.job}
+          title={`${account.name} the ${account.job}`}
        >
          <Stack vertical>
            <BlockQuote>
@@ -12,7 +12,7 @@ type ViewerData = {
 export const AdminBookViewer = (_: any) => {
  const { data } = useBackend<ViewerData>();
  return (
-    <Window title={'Reading: ' + data.title} height={400} width={400}>
+    <Window title={`Reading: ${data.title}`} height={400} width={400}>
      <Window.Content scrollable>
        {data.view_raw ? (
          data.content
@@ -28,7 +28,7 @@ export function AirAlarmControlModes(props) {
            }
            onClick={() => act('mode', { mode: mode.path })}
          >
-            {mode.name + ' - ' + mode.desc}
+            {`${mode.name} - ${mode.desc}`}
          </Button>
        </Stack.Item>
      ))}
@@ -47,7 +47,7 @@ export function AirAlarmControlThresholds(props) {
            >
              {tlv.hazard_min === -1
                ? 'Disabled'
-                : tlv.hazard_min + ' ' + tlv.unit}
+                : `${tlv.hazard_min} ${tlv.unit}`}
            </Button>
          </Table.Cell>
          <Table.Cell>
@@ -67,7 +67,7 @@ export function AirAlarmControlThresholds(props) {
            >
              {tlv.warning_min === -1
                ? 'Disabled'
-                : tlv.warning_min + ' ' + tlv.unit}
+                : `${tlv.warning_min} ${tlv.unit}`}
            </Button>
          </Table.Cell>
          <Table.Cell>
@@ -87,7 +87,7 @@ export function AirAlarmControlThresholds(props) {
            >
              {tlv.warning_max === -1
                ? 'Disabled'
-                : tlv.warning_max + ' ' + tlv.unit}
+                : `${tlv.warning_max} ${tlv.unit}`}
            </Button>
          </Table.Cell>
          <Table.Cell>
@@ -107,7 +107,7 @@ export function AirAlarmControlThresholds(props) {
            >
              {tlv.hazard_max === -1
                ? 'Disabled'
-                : tlv.hazard_max + ' ' + tlv.unit}
+                : `${tlv.hazard_max} ${tlv.unit}`}
            </Button>
          </Table.Cell>
          <Table.Cell>
@@ -36,7 +36,7 @@ export function AlertModal(props) {
  // Stolen wholesale from fontcode
  function textWidth(text: string, font: string, fontsize: number) {
    // default font height is 12 in tgui
-    font = fontsize + 'px ' + font;
+    font = `${fontsize}px ${font}`;
    const c = document.createElement('canvas');
    const ctx = c.getContext('2d') as CanvasRenderingContext2D;
    ctx.font = font;
@@ -99,7 +99,7 @@ const CoreCompressorContent = (props) => {
            </LabeledList.Item>
            <LabeledList.Item label={'Required Radius'}>
              {requiredRadius
-                ? requiredRadius + ' tiles'
+                ? `${requiredRadius} tiles`
                : 'Implosion not possible.'}
            </LabeledList.Item>
          </LabeledList>
@@ -140,9 +140,11 @@ const CoreCompressorContent = (props) => {
                  ' Kelvin'}
              </Box>
              <Box height={2} width="100%">
-                {(gasList[1].total_moles
-                  ? String(gasList[1].pressure.toFixed(2))
-                  : '-') + ' kPa'}
+                {`${
+                  gasList[1].total_moles
+                    ? String(gasList[1].pressure.toFixed(2))
+                    : '-'
+                } kPa`}
              </Box>
            </Stack.Item>
            <Stack.Item>
@@ -165,9 +167,11 @@ const CoreCompressorContent = (props) => {
                  ' Kelvin'}
              </Box>
              <Box height={2} width="100%">
-                {(gasList[1].total_moles
-                  ? String(gasList[0].pressure.toFixed(2))
-                  : '-') + ' kPa'}
+                {`${
+                  gasList[1].total_moles
+                    ? String(gasList[0].pressure.toFixed(2))
+                    : '-'
+                } kPa`}
              </Box>
            </Stack.Item>
          </Stack>
@@ -89,12 +89,12 @@ export const AutomatedAnnouncement = (props) => {
                          icon="info"
                          tooltip={
                            (entry.generalTooltip
-                              ? entry.generalTooltip + '\n'
+                              ? `${entry.generalTooltip}\n`
                              : '') +
                            Object.entries(entry.varsAndTooltipsMap)
                              .map(
                                ([varName, tooltip]) =>
-                                  '%' + varName + ' ' + tooltip,
+                                  `%${varName} ${tooltip}`,
                              )
                              .join('\n')
                          }
@@ -25,7 +25,7 @@ export const BankMachine = (props) => {
    <Window width={350} height={155}>
      <Window.Content>
        <NoticeBox danger>Authorized personnel only</NoticeBox>
-        <Section title={station_name + ' Vault'}>
+        <Section title={`${station_name} Vault`}>
          <LabeledList>
            <LabeledList.Item
              label="Current Balance"
@@ -65,7 +65,7 @@ export const BlackMarketUplink = (props) => {
            <Box inline bold>
              <AnimatedNumber
                value={money}
-                format={(value) => formatMoney(value) + ' cr'}
+                format={(value) => `${formatMoney(value)} cr`}
              />
            </Box>
          }
@@ -126,9 +126,9 @@ export const BlackMarketUplink = (props) => {
                    </Stack>
                  </Stack.Item>
                  <Stack.Item color="label">
-                    {item.amount ? item.amount + ' in stock' : 'Out of stock'}
+                    {item.amount ? `${item.amount} in stock` : 'Out of stock'}
                  </Stack.Item>
-                  <Stack.Item>{formatMoney(item.cost) + ' cr'}</Stack.Item>
+                  <Stack.Item>{`${formatMoney(item.cost)} cr`}</Stack.Item>
                  <Stack.Item>
                    <Button
                      content="Buy"
@@ -177,7 +177,7 @@ const ShipmentSelector = (props) => {
              <Box mt={1}>{method.description}</Box>
              <Button
                mt={2}
-                content={formatMoney(method.price) + ' cr'}
+                content={`${formatMoney(method.price)} cr`}
                disabled={money < method.price}
                onClick={() =>
                  act('buy', {
@@ -103,7 +103,7 @@ export const BluespaceSender = (props) => {
            </>
          }
        >
-          <Box>{'The vendors have made ' + credits + ' credits so far.'}</Box>
+          <Box>{`The vendors have made ${credits} credits so far.`}</Box>
          <Divider />
          <LabeledList>
            {gases.map((gas, index) => (
@@ -152,7 +152,7 @@ const GasDisplay = (props: GasDisplayProps) => {
          />
        </Stack.Item>
        <Stack.Item color="label" grow={2}>
-          {toFixed(amount, 2) + ' moles'}
+          {`${toFixed(amount, 2)} moles`}
        </Stack.Item>
      </Stack>
    </LabeledList.Item>
@@ -194,7 +194,7 @@ const GasDisplay = (props: GasDisplayProps) => {
          <Button
            icon="play"
            tooltipPosition="left"
-            tooltip={'Start adding ' + name + '.'}
+            tooltip={`Start adding ${name}.`}
            disabled={!inserted_tank}
            onClick={() =>
              act('start_pumping', {
@@ -207,7 +207,7 @@ const GasDisplay = (props: GasDisplayProps) => {
            disabled={selected_gas !== id}
            icon="minus"
            tooltipPosition="left"
-            tooltip={'Stop adding ' + name + '.'}
+            tooltip={`Stop adding ${name}.`}
            onClick={() =>
              act('stop_pumping', {
                gas_id: id,
@@ -58,7 +58,7 @@ const ReagentDisplay = (props) => {
            <Flex.Item grow textAlign={'left'}>
              {reagent.name}
            </Flex.Item>
-            <Flex.Item>{toFixed(reagent.volume) + 'u'}</Flex.Item>
+            <Flex.Item>{`${toFixed(reagent.volume)}u`}</Flex.Item>
          </Flex>
        </ProgressBar>
      </Flex.Item>
@@ -56,7 +56,7 @@ export const BorgPanel = (props) => {
            <LabeledList.Item label="Charge">
              {!cell.missing ? (
                <ProgressBar value={cellPercent}>
-                  {cell.charge + ' / ' + cell.maxcharge}
+                  {`${cell.charge} / ${cell.maxcharge}`}
                </ProgressBar>
              ) : (
                <span className="color-bad">No cell installed</span>
@@ -88,7 +88,7 @@ export const BountyBoardContent = (props) => {
                    {request.owner}
                  </Stack.Item>
                  <Stack.Item width="100px">
-                    {formatMoney(request.value) + ' cr'}
+                    {`${formatMoney(request.value)} cr`}
                  </Stack.Item>
                  <Stack.Item>
                    <Button
@@ -19,7 +19,7 @@ import { Window } from '../layouts';

 const formatPressure = (value: number) => {
  if (value < 10000) {
-    return toFixed(value) + ' kPa';
+    return `${toFixed(value)} kPa`;
  }
  return formatSiUnit(value * 1000, 1, 'Pa');
 };
@@ -184,7 +184,7 @@ export const Canister = (props) => {
            <Section>
              <LabeledList>
                <LabeledList.Item label="Cell Charge">
-                  {cellCharge > 0 ? cellCharge + '%' : 'Missing Cell'}
+                  {cellCharge > 0 ? `${cellCharge}%` : 'Missing Cell'}
                </LabeledList.Item>
                {!!hasHypernobCrystal && (
                  <LabeledList.Item label="Reaction Suppression">
@@ -23,7 +23,7 @@ export function CargoCartButtons(props) {
      <Box inline mx={1}>
        {amount === 0 && 'Cart is empty'}
        {amount === 1 && '1 item'}
-        {amount >= 2 && amount + ' items'}{' '}
+        {amount >= 2 && `${amount} items`}{' '}
        {total > 0 && `(${formatMoney(total)} cr)`}
      </Box>

@@ -34,7 +34,7 @@ export function DelayHelper(props: Props) {
            onChange={(e, value) => {
              act('editTiming', {
                reverse: reverse,
-                timer: '' + (i + 1),
+                timer: `${i + 1}`,
                value: Math.max(value, 0),
              });
            }}
@@ -42,8 +42,8 @@ export function PodBays(props) {
      {BAYS.map((bay, i) => (
        <Button
          key={i}
-          onClick={() => act('switchBay', { bayNumber: '' + (i + 1) })}
-          selected={bayNumber === '' + (i + 1)}
+          onClick={() => act('switchBay', { bayNumber: `${i + 1}` })}
+          selected={bayNumber === `${i + 1}`}
          tooltipPosition="bottom-end"
        >
          {bay.title}
@@ -16,7 +16,7 @@ export function PodSounds(props) {
          icon="volume-up"
          onClick={() => act('soundVolume')}
          selected={soundVolume !== defaultSoundVolume}
-          tooltip={`Sound Volume:` + soundVolume}
+          tooltip={`Sound Volume:${soundVolume}`}
          tooltipPosition="top-start"
        />
      }
@@ -21,7 +21,7 @@ type Preset = {
 };

 async function saveDataToPreset(id: string, data: any) {
-  await storage.set('podlauncher_preset_' + id, data);
+  await storage.set(`podlauncher_preset_${id}`, data);
 }

 export function PresetsPage(props) {
@@ -45,7 +45,7 @@ export function PresetsPage(props) {
  }

  async function loadPreset(id: string) {
-    const presetData = await storage.get('podlauncher_preset_' + id);
+    const presetData = await storage.get(`podlauncher_preset_${id}`);
    if (presetData !== null && presetData !== undefined) {
      act('loadDataFromPreset', { payload: presetData });
    }
@@ -52,7 +52,7 @@ export function StylePage(props) {
          width="45px"
        >
          <Box
-            className={classes(['supplypods64x64', 'pod_asset' + page.id])}
+            className={classes(['supplypods64x64', `pod_asset${page.id}`])}
            style={{
              pointerEvents: 'none',
              transform: 'rotate(45deg) translate(-25%,-10%)',
@@ -73,21 +73,19 @@ export class Changelog extends Component {
    const maxAttempts = 6;

    if (attemptNumber > maxAttempts) {
-      return this.setData(
-        'Failed to load data after ' + maxAttempts + ' attempts',
-      );
+      return this.setData(`Failed to load data after ${maxAttempts} attempts`);
    }

    act('get_month', { date });

-    fetch(resolveAsset(date + '.yml')).then(async (changelogData) => {
+    fetch(resolveAsset(`${date}.yml`)).then(async (changelogData) => {
      const result = await changelogData.text();
      const errorRegex = /^Cannot find/;

      if (errorRegex.test(result)) {
        const timeout = 50 + attemptNumber * 50;

-        self.setData('Loading changelog data' + '.'.repeat(attemptNumber + 3));
+        self.setData(`Loading changelog data${'.'.repeat(attemptNumber + 3)}`);
        setTimeout(() => {
          self.getData(date, attemptNumber + 1);
        }, timeout);
@@ -195,7 +195,7 @@ export const ChemDispenser = (props) => {
                textColor={showPhCol ? chemical.pHCol : chemical.color}
                width="129.5px"
                lineHeight={1.75}
-                tooltip={'pH: ' + chemical.pH}
+                tooltip={`pH: ${chemical.pH}`}
                style={{
                  textShadow: '1px 1px 0 black',
                }}
@@ -68,7 +68,7 @@ export const ReactionDisplay = (props: ReactionDisplayProps) => {
          <Flex.Item color="label">
            <AnimatedNumber
              value={beaker.pH}
-              format={(value) => 'pH: ' + round(value, 3)}
+              format={(value) => `pH: ${round(value, 3)}`}
            />
          </Flex.Item>
          <Flex.Item>
@@ -279,7 +279,7 @@ export const ChemHeater = (props) => {
                color={COLORS.reagent.acidicbuffer}
                textAlign="center"
              >
-                {acidicBufferVol + 'u'}
+                {`${acidicBufferVol}u`}
              </Table.Cell>
              <Table.Cell>
                <Button
@@ -304,7 +304,7 @@ export const ChemHeater = (props) => {
                  {(isBeakerLoaded && (
                    <AnimatedNumber
                      value={currentTemp}
-                      format={(value) => toFixed(value) + ' K'}
+                      format={(value) => `${toFixed(value)} K`}
                    />
                  )) ||
                    '—'}
@@ -327,7 +327,7 @@ export const ChemHeater = (props) => {
                />
              </Table.Cell>
              <Table.Cell color={COLORS.reagent.basicbuffer} textAlign="center">
-                {basicBufferVol + 'u'}
+                {`${basicBufferVol}u`}
              </Table.Cell>
              <Table.Cell>
                <Button
@@ -72,7 +72,7 @@ export const ChemMixingChamber = (props) => {
                    <Stack.Item grow>
                      <AnimatedNumber
                        value={temperature}
-                        format={(value) => toFixed(value) + ' K'}
+                        format={(value) => `${toFixed(value)} K`}
                      />
                    </Stack.Item>
                  </Stack>
@@ -137,7 +137,7 @@ export const ChemMixingChamber = (props) => {
                      <Stack.Item key={reagent.name}>
                        <Stack fill>
                          <Stack.Item mt={0.25} textColor="label">
-                            {reagent.name + ':'}
+                            {`${reagent.name}:`}
                          </Stack.Item>
                          <Stack.Item mt={0.25} grow>
                            {reagent.volume}
@@ -76,7 +76,7 @@ export const ChemReactionChamber = (props) => {
                    <Stack.Item grow>
                      <AnimatedNumber
                        value={temperature}
-                        format={(value) => toFixed(value) + ' K'}
+                        format={(value) => `${toFixed(value)} K`}
                      />
                    </Stack.Item>
                    <Stack.Item grow>
@@ -222,7 +222,7 @@ export const ChemReactionChamber = (props) => {
                      <Stack.Item key={reagent.name}>
                        <Stack fill>
                          <Stack.Item mt={0.25} textColor="label">
-                            {reagent.name + ':'}
+                            {`${reagent.name}:`}
                          </Stack.Item>
                          <Stack.Item mt={0.25} grow>
                            {reagent.volume}
@@ -272,7 +272,7 @@ export const ChemReactionChamber = (props) => {
                    <Stack.Item key={reagent.name}>
                      <Stack fill>
                        <Stack.Item mt={0.25} textColor="label">
-                          {reagent.name + ':'}
+                          {`${reagent.name}:`}
                        </Stack.Item>
                        <Stack.Item mt={0.25} grow>
                          {reagent.volume}
@@ -93,7 +93,7 @@ const Prefixes = (props) => {
          key={prefix.toLowerCase()}
          content={prefix}
          disabled={currentSection !== 1}
-          onClick={() => act(prefix + ' ')}
+          onClick={() => act(`${prefix} `)}
        />
      ))}
    </LabeledList.Item>
@@ -147,7 +147,7 @@ const Suffixes = (props) => {
          key={suffix.toLowerCase()}
          content={suffix}
          disabled={currentSection !== 4}
-          onClick={() => act(' ' + suffix)}
+          onClick={() => act(` ${suffix}`)}
        />
      ))}
    </LabeledList.Item>
@@ -49,13 +49,13 @@ export function SubsystemRow(props: Props) {
  let rangeDisplay = {};
  if (showBars) {
    if (sortType === SortType.Cost) {
-      valueDisplay = value.toFixed(2) + 'ms';
+      valueDisplay = `${value.toFixed(2)}ms`;
      rangeDisplay = {
        average: [75, 124.99],
        bad: [125, Infinity],
      };
    } else {
-      valueDisplay = value.toFixed(2) + '%';
+      valueDisplay = `${value.toFixed(2)}%`;
      rangeDisplay = {
        average: [10, 24.99],
        bad: [25, Infinity],
@@ -26,7 +26,7 @@ export const CrewManifest = (props) => {
      <Window.Content scrollable>
        {Object.entries(manifest).map(([dept, crew]) => (
          <Section
-            className={'CrewManifest--' + dept}
+            className={`CrewManifest--${dept}`}
            key={dept}
            title={
              dept +
@@ -133,7 +133,7 @@ const Requirements = (props) => {
              bad: [logScale(5000), Infinity],
            }}
          >
-            {toFixed(internal_temperature) + ' K'}
+            {`${toFixed(internal_temperature)} K`}
          </ProgressBar>
        </LabeledList.Item>
      </LabeledList>
@@ -156,7 +156,7 @@ const Gases = (props) => {
              minValue={0}
              maxValue={1000}
            >
-              {toFixed(amount, 2) + ' moles'}
+              {`${toFixed(amount, 2)} moles`}
            </ProgressBar>
          </LabeledList.Item>
        ))}
@@ -17,7 +17,7 @@ const BoardTab = (props) => {
      className={classes([
        'BoardTab',
        selected ? 'BoardTab__Selected' : 'BoardTab__Perspective',
-        !selected && 'BoardTab__' + color,
+        !selected && `BoardTab__${color}`,
      ])}
    >
      <Box className={'BoardTab__Contain'}>{children}</Box>
@@ -279,7 +279,7 @@ const PulseBoard = (props) => {
    }
  }
  return (
-    <Section title={'Unique ' + name} minHeight="100%" position="relative">
+    <Section title={`Unique ${name}`} minHeight="100%" position="relative">
      <Box mx="-1px">{blocks}</Box>
    </Section>
  );
@@ -46,17 +46,17 @@ export function DnaVault(props) {
          <LabeledList>
            <LabeledList.Item label="Human DNA">
              <ProgressBar value={dna / dna_max}>
-                {dna + ' / ' + dna_max + ' Samples'}
+                {`${dna} / ${dna_max} Samples`}
              </ProgressBar>
            </LabeledList.Item>
            <LabeledList.Item label="Plant DNA">
              <ProgressBar value={plants / plants_max}>
-                {plants + ' / ' + plants_max + ' Samples'}
+                {`${plants} / ${plants_max} Samples`}
              </ProgressBar>
            </LabeledList.Item>
            <LabeledList.Item label="Animal DNA">
              <ProgressBar value={animals / animals_max}>
-                {animals + ' / ' + animals_max + ' Samples'}
+                {`${animals} / ${animals_max} Samples`}
              </ProgressBar>
            </LabeledList.Item>
          </LabeledList>
@@ -33,7 +33,7 @@ const DopplerArrayContent = (props) => {
    return record.name === activeRecordName;
  });
  const DopplerArrayFooter = (
-    <Section title={disk ? disk + ' (' + storage + ')' : 'No Disk Inserted'}>
+    <Section title={disk ? `${disk} (${storage})` : 'No Disk Inserted'}>
      <Button
        textAlign="center"
        fluid
@@ -112,7 +112,7 @@ const DopplerArrayContent = (props) => {
                <LabeledList.Item label="Outer Radius">
                  {activeRecord.factual_outer_radius}
                  {activeRecord.theory_outer_radius &&
-                    ' (Theoretical: ' + activeRecord.theory_outer_radius + ')'}
+                    ` (Theoretical: ${activeRecord.theory_outer_radius})`}
                </LabeledList.Item>
                <LabeledList.Item label="Shockwave Radius">
                  {activeRecord.factual_shockwave_radius}
@@ -85,7 +85,7 @@ export function EmergencyShuttleConsole(props) {
              minHeight="150px"
              buttons={
                <Box inline bold color={emagged ? 'bad' : 'good'}>
-                  {emagged ? 'ERROR' : 'Remaining: ' + authorizations_remaining}
+                  {emagged ? 'ERROR' : `Remaining: ${authorizations_remaining}`}
                </Box>
              }
            >
@@ -30,7 +30,7 @@ export const EngravedMessage = (props) => {
              <Button
                fluid
                icon="arrow-up"
-                content={' ' + num_likes}
+                content={` ${num_likes}`}
                disabled={is_creator}
                selected={has_liked}
                textAlign="center"
@@ -55,7 +55,7 @@ export const EngravedMessage = (props) => {
              <Button
                fluid
                icon="arrow-down"
-                content={' ' + num_dislikes}
+                content={` ${num_dislikes}`}
                disabled={is_creator}
                selected={has_disliked}
                textAlign="center"
@@ -68,7 +68,7 @@ export const ExosuitControlConsole = (props) => {
                    'good'
                  }
                >
-                  {(typeof mech.charge === 'number' && mech.charge + '%') ||
+                  {(typeof mech.charge === 'number' && `${mech.charge}%`) ||
                    'Not Found'}
                </Box>
              </LabeledList.Item>
@@ -76,7 +76,7 @@ export const ExosuitControlConsole = (props) => {
                {(typeof mech.airtank === 'number' && (
                  <AnimatedNumber
                    value={mech.airtank}
-                    format={(value) => toFixed(value, 2) + ' kPa'}
+                    format={(value) => `${toFixed(value, 2)} kPa`}
                  />
                )) ||
                  'Not Equipped'}
@@ -225,7 +225,7 @@ const FilterEntry = (props) => {

  return (
    <Collapsible
-      title={name + ' (' + type + ')'}
+      title={`${name} (${type})`}
      buttons={
        <>
          <NumberInput
@@ -68,7 +68,7 @@ export const FishCatalog = (props) => {
              title={
                currentFish
                  ? capitalize(currentFish.name)
-                  : sponsored_by + ' Fish Index'
+                  : `${sponsored_by} Fish Index`
              }
            >
              {currentFish && (
@@ -168,7 +168,7 @@ function EventSection(props) {
    EVENT_PAGE_ITEMS,
  );

-  const sectionTitle = searchQuery ? 'Searching...' : category.name + ' Events';
+  const sectionTitle = searchQuery ? 'Searching...' : `${category.name} Events`;

  return (
    <Section scrollable fill title={sectionTitle} buttons={<PanelOptions />}>
@@ -122,7 +122,7 @@ export const Gps = (props) => {
                          rotation={signal.degrees}
                        />
                      )}
-                      {signal.dist !== undefined && signal.dist + 'm'}
+                      {signal.dist !== undefined && `${signal.dist}m`}
                    </Table.Cell>
                    <Table.Cell collapsing>{signal.coords}</Table.Cell>
                  </Table.Row>
@@ -134,7 +134,7 @@ const TerminalDisplay = (props) => {
              content={
                <>
                  <Icon name="coins" />
-                  Pay {force_fee + ' cr'}
+                  Pay {`${force_fee} cr`}
                </>
              }
              disabled={cannot_pay}
@@ -90,8 +90,8 @@ const HolopadContent = (props) => {
                  icon={call.connected ? 'phone-slash' : 'phone-alt'}
                  content={
                    call.connected
-                      ? 'Disconnect call from ' + call.caller
-                      : 'Answer call from ' + call.caller
+                      ? `Disconnect call from ${call.caller}`
+                      : `Answer call from ${call.caller}`
                  }
                  color={call.connected ? 'bad' : 'good'}
                  disabled={!on_network}
@@ -147,7 +147,7 @@ const GasList = (props: GasListProps) => {
              minValue={0}
              maxValue={minimumScale}
            >
-              {toFixed(gas.amount, 2) + ' moles'}
+              {`${toFixed(gas.amount, 2)} moles`}
            </ProgressBar>
          </LabeledList.Item>
        );
@@ -88,7 +88,7 @@ const recipe_effect_structure: Recipe[] = [
    override_base: 0.85,
    scale: 1.15,
    tooltip: (v, d) =>
-      'Maximum: ' + (d.baseMaxTemperature * v).toExponential() + ' K',
+      `Maximum: ${(d.baseMaxTemperature * v).toExponential()} K`,
  },
 ];

@@ -210,7 +210,7 @@ export const HypertorusRecipes = (props: RecipeProps) => {
                    return (
                      <Table.Cell key={param}>
                        <Tooltip
-                          content={(tooltip || ((v) => 'x' + v))(value, rest)}
+                          content={(tooltip || ((v) => `x${v}`))(value, rest)}
                        >
                          <Icon
                            className="hypertorus-recipes__icon"
@@ -53,7 +53,7 @@ const BarLabel = (props) => {
      <Box align="center">{label}</Box>
      {value > 0 ? (
        <>
-          <Box align="center">{to_exponential_if_big(value) + ' K'}</Box>
+          <Box align="center">{`${to_exponential_if_big(value)} K`}</Box>
          <Box align="center">
            {delta === 0
              ? '-'
@@ -158,7 +158,7 @@ export const HypertorusTemperatures = (props) => {
            name={icon}
          />
        )}
-        {to_exponential_if_big(value) + ' K'}
+        {`${to_exponential_if_big(value)} K`}
      </Box>
    );
    return (
@@ -250,7 +250,7 @@ const InfuserEntry = (props: InfuserEntryProps) => {
  return (
    <Section
      fill
-      title={entry.name + ' Mutant'}
+      title={`${entry.name} Mutant`}
      height={PAGE_HEIGHT}
      buttons={
        <Button tooltip={tierData.desc} icon={tierData.icon}>
@@ -48,7 +48,7 @@ const linkifyText = (text: string) => {
    if (!match) continue;

    parts[i] = (
-      <a key={'link' + i} href={match[2]}>
+      <a key={`link${i}`} href={match[2]}>
        {match[1]}
      </a>
    );
@@ -133,7 +133,7 @@ export function KeyComboModal(props) {
                  setBinding(true);
                }}
              >
-                {binding ? 'Awaiting input...' : '' + input}
+                {binding ? 'Awaiting input...' : `${input}`}
              </Button>
            </Stack.Item>
            <Stack.Item>
@@ -204,7 +204,7 @@ const OmnitongueToggle = (props) => {
      selected={omnitongue}
      onClick={() => act('toggle_omnitongue')}
    >
-      {'Omnitongue ' + (omnitongue ? 'Enabled' : 'Disabled')}
+      {`Omnitongue ${omnitongue ? 'Enabled' : 'Disabled'}`}
    </Button>
  );
 };
@@ -31,7 +31,7 @@ export function PageSelect(props) {
      </Stack.Item>
      <Stack.Item>
        <Input
-          placeholder={current_page + '/' + page_count}
+          placeholder={`${current_page}/${page_count}`}
          onBlur={(value) => {
            if (value !== '') {
              call_on_change(value);
@@ -182,7 +182,7 @@ export function CheckoutEntries(props) {
            <Table.Cell>{entry.author}</Table.Cell>
            <Table.Cell>{entry.borrower}</Table.Cell>
            <Table.Cell backgroundColor={entry.overdue ? 'bad' : 'good'}>
-              {entry.overdue ? 'Overdue' : entry.due_in_minutes + ' Minutes'}
+              {entry.overdue ? 'Overdue' : `${entry.due_in_minutes} Minutes`}
            </Table.Cell>
            <Table.Cell width="70px" textAlign="center">
              <Button
@@ -66,7 +66,7 @@ export const LightController = (props) => {
  const category_keys = category_ids ? Object.keys(category_ids) : [];

  return (
-    <Window title={light_info.name + ': Lighting'} width={600} height={400}>
+    <Window title={`${light_info.name}: Lighting`} width={600} height={400}>
      <Window.Content scrollable>
        <Stack fill>
          <Stack.Item>
@@ -98,7 +98,7 @@ export const LightController = (props) => {
                      ml={0.1}
                      className={classes([
                        'lights32x32',
-                        'light_fantastic_' + id,
+                        `light_fantastic_${id}`,
                      ])}
                    />
                  </Tabs.Tab>
@@ -86,7 +86,7 @@ export function LightSpawn(props) {
                        align="center"
                        className={classes([
                          'lights32x32',
-                          'light_fantastic_' + id,
+                          `light_fantastic_${id}`,
                        ])}
                      />
                      <Stack.Item fontSize="14px" textColor="#cee" nowrap>
@@ -66,7 +66,7 @@ export function LootBox(props: Props) {
          {!is_blind && name}
        </Stack.Item>
        <Stack.Item lineHeight="34px" pr={1}>
-          {amount > 1 && 'x' + amount}
+          {amount > 1 && `x${amount}`}
        </Stack.Item>
      </Stack>
    </Button>
@@ -431,8 +431,8 @@ const SuitStatusSection = (props) => {
            content={
              link_freq
                ? link_call
-                  ? 'Calling (' + link_call + ')'
-                  : 'Call (' + link_id + ')'
+                  ? `Calling (${link_call})`
+                  : `Call (${link_id})`
                : 'Frequency Unset'
            }
            onClick={() => act('call')}
@@ -504,7 +504,7 @@ const ModParts = (props) => {
        return (
          <LabeledList.Item
            key={part.slot}
-            label={part.slot + ' Slot'}
+            label={`${part.slot} Slot`}
            buttons={
              <Button
                selected={part.deployed}
@@ -435,7 +435,7 @@ const MafiaPlayers = (props) => {
              >
                {player.name}
                {(!!player.is_you && ' (YOU)') ||
-                  (!!player.role_revealed && ' - ' + player.role_revealed)}
+                  (!!player.role_revealed && ` - ${player.role_revealed}`)}
              </Stack.Item>
              <Stack.Item>
                {player.votes !== undefined &&
@@ -64,7 +64,7 @@ export function ManufacturingSorter(props) {
              <LabeledList>
                {filters.map((filter, i) => (
                  <LabeledList.Item
-                    label={i + 1 + '. ' + filter.name}
+                    label={`${i + 1}. ${filter.name}`}
                    key={filter.ref}
                  >
                    <Button
@@ -64,7 +64,7 @@ export const MassSpec = (props) => {
        {!!processing && (
          <Dimmer fontSize="32px">
            <Icon name="cog" spin={1} />
-            {' Purifying... ' + round(eta, 0) + 's'}
+            {` Purifying... ${round(eta, 0)}s`}
          </Dimmer>
        )}
        <Section
@@ -126,7 +126,7 @@ export const MassSpec = (props) => {
            beaker={beaker1}
          />
          {!!beaker_1_has_contents && (
-            <Box>{'Eta of selection: ' + round(eta, 0) + ' seconds'}</Box>
+            <Box>{`Eta of selection: ${round(eta, 0)} seconds`}</Box>
          )}
        </Section>
        <Section
@@ -403,7 +403,7 @@ const MassSpectroscopy = (props: SpectroscopyProps) => {
        step={graphUpperRange / base_width}
        height={17.2}
        format={(value: number) => round(value, 2).toString()}
-        width={(centerValue / graphUpperRange) * base_width + 'px'}
+        width={`${(centerValue / graphUpperRange) * base_width}px`}
        value={lowerRange}
        minValue={graphLowerRange}
        maxValue={centerValue}
@@ -418,7 +418,7 @@ const MassSpectroscopy = (props: SpectroscopyProps) => {
        height={17.2}
        format={(value: number) => round(value, 2).toString()}
        step={graphUpperRange / base_width}
-        width={base_width - (centerValue / graphUpperRange) * base_width + 'px'}
+        width={`${base_width - (centerValue / graphUpperRange) * base_width}px`}
        value={upperRange}
        minValue={centerValue}
        maxValue={graphUpperRange}
@@ -435,7 +435,7 @@ const MassSpectroscopy = (props: SpectroscopyProps) => {
        value={centerValue}
        height={1.9}
        format={(value: number) => round(value, 2).toString()}
-        width={base_width + 'px'}
+        width={`${base_width}px`}
        minValue={graphLowerRange + 1}
        maxValue={graphUpperRange - 1}
        color={'invisible'}
@@ -632,7 +632,7 @@ const SnowflakeRadio = (props) => {
          selected={microphone}
          icon={microphone ? 'microphone' : 'microphone-slash'}
        >
-          {(microphone ? 'En' : 'Dis') + 'abled'}
+          {`${microphone ? 'En' : 'Dis'}abled`}
        </Button>
      </LabeledList.Item>
      <LabeledList.Item label="Speaker">
@@ -646,7 +646,7 @@ const SnowflakeRadio = (props) => {
          selected={speaker}
          icon={speaker ? 'volume-up' : 'volume-mute'}
        >
-          {(speaker ? 'En' : 'Dis') + 'abled'}
+          {`${speaker ? 'En' : 'Dis'}abled`}
        </Button>
      </LabeledList.Item>
      <LabeledList.Item label="Frequency">
@@ -1029,7 +1029,7 @@ const SnowflakeGeneraor = (props) => {
    <LabeledList.Item label="Fuel Amount">
      {fuel === null
        ? 'None'
-        : toFixed(fuel * sheet_material_amount, 0.1) + ' cm³'}
+        : `${toFixed(fuel * sheet_material_amount, 0.1)} cm³`}
    </LabeledList.Item>
  );
 };
@@ -118,9 +118,7 @@ const CellList = (props) => {
                    fluid
                    color="good"
                    key={reagent}
-                    tooltip={
-                      '+' + cell_line.supplementaries[reagent] + '% growth/sec.'
-                    }
+                    tooltip={`+${cell_line.supplementaries[reagent]}% growth/sec.`}
                  >
                    {reagent}
                  </Button>
@@ -133,7 +131,7 @@ const CellList = (props) => {
                    fluid
                    color="bad"
                    key={reagent}
-                    tooltip={cell_line.suppressives[reagent] + '% growth/sec.'}
+                    tooltip={`${cell_line.suppressives[reagent]}% growth/sec.`}
                  >
                    {reagent}
                  </Button>
@@ -489,7 +489,7 @@ const NewscasterChannelSelector = (props) => {
  const { act, data } = useBackend();
  const { channels = [], viewing_channel, wanted = [] } = data;
  return (
-    <Section minHeight="100%" width={window.innerWidth - 410 + 'px'}>
+    <Section minHeight="100%" width={`${window.innerWidth - 410}px`}>
      <Tabs vertical>
        {wanted.map((activeWanted) => (
          <Tabs.Tab
@@ -148,7 +148,7 @@ export const NtosCyborgRemoteMonitorContent = (props) => {
                        }
                      >
                        {typeof cyborg.charge === 'number'
-                          ? cyborg.charge + '%'
+                          ? `${cyborg.charge}%`
                          : 'Not Found'}
                      </Box>
                    </LabeledList.Item>
@@ -27,7 +27,7 @@ export const NtosEmojipedia = (props) => {
      <NtosWindow.Content scrollable>
        <Section
          // required: follow semantic versioning every time you touch this file
-          title={'Emojipedia V2.7.10' + (filter ? ` - ${filter}` : '')}
+          title={`Emojipedia V2.7.10${filter ? ` - ${filter}` : ''}`}
          buttons={
            <>
              <Input
@@ -143,9 +143,7 @@ export const NtosMain = (props) => {
              {show_imprint
                ? login.IDName +
                  ' ' +
-                  (proposed_login.IDName
-                    ? '(' + proposed_login.IDName + ')'
-                    : '')
+                  (proposed_login.IDName ? `(${proposed_login.IDName})` : '')
                : (proposed_login.IDName ?? '')}
            </Table.Row>
            <Table.Row>
@@ -153,7 +151,7 @@ export const NtosMain = (props) => {
              {show_imprint
                ? login.IDJob +
                  ' ' +
-                  (proposed_login.IDJob ? '(' + proposed_login.IDJob + ')' : '')
+                  (proposed_login.IDJob ? `(${proposed_login.IDJob})` : '')
                : (proposed_login.IDJob ?? '')}
            </Table.Row>
          </Table>
@@ -135,7 +135,7 @@ export const NtosNetChat = (props) => {
                    <Button
                      fluid
                      bold
-                      content={'ADMIN MODE: ' + (adminmode ? 'ON' : 'OFF')}
+                      content={`ADMIN MODE: ${adminmode ? 'ON' : 'OFF'}`}
                      color={adminmode ? 'bad' : 'good'}
                      onClick={() => act('PRG_toggleadmin')}
                    />
@@ -175,7 +175,7 @@ export const NtosNetChat = (props) => {
                  height="22px"
                  placeholder={
                    (this_client?.muted && 'You are muted!') ||
-                    'Message ' + title
+                    `Message ${title}`
                  }
                  fluid
                  disabled={this_client?.muted}
@@ -19,9 +19,9 @@ export const NtosPortraitPrinter = (props) => {
  const got_paintings = !!paintings.length;
  const current_portrait_title = got_paintings && paintings[listIndex].title;
  const current_portrait_author =
-    got_paintings && 'By ' + paintings[listIndex].creator;
+    got_paintings && `By ${paintings[listIndex].creator}`;
  const current_portrait_asset_name =
-    got_paintings && 'paintings' + '_' + paintings[listIndex].md5;
+    got_paintings && `paintings_${paintings[listIndex].md5}`;
  const current_portrait_ratio = got_paintings && paintings[listIndex].ratio;

  return (
@@ -51,8 +51,7 @@ export const NtosRadarContent = (props) => {
      </Stack.Item>
      <Stack.Item
        style={{
-          backgroundImage:
-            'url("' + resolveAsset('ntosradarbackground.png') + '")',
+          backgroundImage: `url("${resolveAsset('ntosradarbackground.png')}")`,
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          top: '20px',
@@ -148,8 +147,8 @@ const TargetDisplay = (props) => {
      position="absolute"
      size={2}
      color={target.color}
-      top={target.locy * 10 + 19 + 'px'}
-      left={target.locx * 10 + 16 + 'px'}
+      top={`${target.locy * 10 + 19}px`}
+      left={`${target.locx * 10 + 16}px`}
    />
  );
 };
@@ -203,7 +203,7 @@ export const NtosRobotactContent = (props) => {
                      />
                    </LabeledList.Item>
                    <LabeledList.Item
-                      label={'Stored Photos (' + printerPictures + ')'}
+                      label={`Stored Photos (${printerPictures})`}
                    >
                      <Button
                        content="View"
@@ -424,7 +424,7 @@ export const NtosRobotactContent = (props) => {
                              }
                            >
                              {typeof cyborg.charge === 'number'
-                                ? cyborg.charge + '%'
+                                ? `${cyborg.charge}%`
                                : 'No Cell'}
                            </Box>
                          </LabeledList.Item>
@@ -236,7 +236,7 @@ const PaperBrowser = (props) => {
        <Section>
          <LabeledList>
            <LabeledList.Item label="Topic">
-              {paper.experimentName + ' - ' + paper.tier}
+              {`${paper.experimentName} - ${paper.tier}`}
            </LabeledList.Item>
            <LabeledList.Item label="Author">
              {paper.author + (paper.etAlia ? ' et al.' : '')}
@@ -279,7 +279,7 @@ const ExperimentBrowser = (props) => {
              String(Number(tier) + 1)
            }
          >
-            {experiment.target[tier] + ' ' + experiment.suffix}
+            {`${experiment.target[tier]} ${experiment.suffix}`}
          </LabeledList.Item>
        ))}
      </LabeledList>
@@ -299,7 +299,7 @@ const PartnersBrowser = (props) => {
  } = data;
  return partnersInformation.map((partner) => (
    <Section title={partner.name} key={partner.path}>
-      <Collapsible title={'Relations: ' + relations[partner.path]}>
+      <Collapsible title={`Relations: ${relations[partner.path]}`}>
        <LabeledList>
          <LabeledList.Item label="Description">
            {partner.flufftext}
@@ -308,10 +308,10 @@ const PartnersBrowser = (props) => {
            {relations[partner.path]}
          </LabeledList.Item>
          <LabeledList.Item label="Cooperation Bonus">
-            {partner.multipliers[coopIndex - 1] + 'x'}
+            {`${partner.multipliers[coopIndex - 1]}x`}
          </LabeledList.Item>
          <LabeledList.Item label="Funding Bonus">
-            {partner.multipliers[fundingIndex - 1] + 'x'}
+            {`${partner.multipliers[fundingIndex - 1]}x`}
          </LabeledList.Item>
          <LabeledList.Item label="Accepted Experiments">
            {partner.acceptedExperiments.map((experiment_name) => (
@@ -336,7 +336,7 @@ const PartnersBrowser = (props) => {
                        !purchaseableBoosts[partner.path].includes(node.id)
                      }
                      content="Purchase"
-                      tooltip={'Discount: ' + node.discount}
+                      tooltip={`Discount: ${node.discount}`}
                      onClick={() =>
                        act('purchase_boost', {
                          purchased_boost: node.id,
@@ -85,7 +85,7 @@ export const PollsSection = () => {
            { name, description, owner, creator, current_bets = [], locked },
            index,
          ) => (
-            <Section title={name + ' - Created by ' + creator} key={name}>
+            <Section title={`${name} - Created by ${creator}`} key={name}>
              <Stack>
                <Stack.Item grow>
                  <Stack.Item grow>{description}</Stack.Item>
@@ -40,7 +40,7 @@ export const NtosSupermatter = (props) => {
            <Table>
              {sm_data.map((sm) => (
                <Table.Row key={sm.uid}>
-                  <Table.Cell>{sm.uid + '. ' + sm.area_name}</Table.Cell>
+                  <Table.Cell>{`${sm.uid}. ${sm.area_name}`}</Table.Cell>
                  <Table.Cell collapsing color="label">
                    Integrity:
                  </Table.Cell>
@@ -42,7 +42,7 @@ export function NukeKeypad(props) {
                className={classes([
                  'NuclearBomb__Button',
                  'NuclearBomb__Button--keypad',
-                  'NuclearBomb__Button--' + key,
+                  `NuclearBomb__Button--${key}`,
                ])}
                onClick={() => act('keypad', { digit: key })}
              >
@@ -49,7 +49,7 @@ export function OrbitCollapsible(props: Props) {
      bold
      color={color || 'grey'}
      open={!!color}
-      title={title + ` - (${filteredSection.length})`}
+      title={`${title} - (${filteredSection.length})`}
    >
      <Stack wrap g={0.5}>
        {filteredSection.map((item) => (
@@ -109,7 +109,7 @@ function MaterialRow(props: MaterialRowProps) {
      <Table.Cell collapsing textAlign="left">
        <Button
          color="transparent"
-          tooltip={material.value ? material.value + ' cr' : 'No cost'}
+          tooltip={material.value ? `${material.value} cr` : 'No cost'}
          onClick={() => onRelease(1)}
        >
          x1
@@ -117,7 +117,7 @@ function MaterialRow(props: MaterialRowProps) {
        <Button
          color="transparent"
          tooltip={
-            material.value ? material.value * print_amount + ' cr' : 'No cost'
+            material.value ? `${material.value * print_amount} cr` : 'No cost'
          }
          onClick={() => onRelease(print_amount)}
        >
@@ -187,7 +187,7 @@ function PointsSection(props) {
          <Box inline color="label" ml={1}>
            Unclaimed points:
          </Box>
-          {' ' + unclaimedPoints}
+          {` ${unclaimedPoints}`}
        </Stack.Item>
        <Stack.Item>
          <Button
@@ -153,7 +153,7 @@ const AdventureStatus = (props) => {
                />
              </Stack.Item>
              <Stack.Item
-                className={'moods32x32 mood' + (settlermoods[settler] + 1)}
+                className={`moods32x32 mood${settlermoods[settler] + 1}`}
              />
            </Stack>
          ))}
@@ -165,7 +165,7 @@ const AdventureStatus = (props) => {
              <Button
                fluid
                icon="hamburger"
-                content={'Food Left: ' + food}
+                content={`Food Left: ${food}`}
                color="green"
              />
            </Stack.Item>
@@ -173,7 +173,7 @@ const AdventureStatus = (props) => {
              <Button
                fluid
                icon="gas-pump"
-                content={'Fuel Left: ' + fuel}
+                content={`Fuel Left: ${fuel}`}
                color="olive"
              />
            </Stack.Item>
@@ -181,7 +181,7 @@ const AdventureStatus = (props) => {
              <Button
                fluid
                icon="wrench"
-                content={'Hull Parts: ' + hull}
+                content={`Hull Parts: ${hull}`}
                color="average"
              />
            </Stack.Item>
@@ -189,7 +189,7 @@ const AdventureStatus = (props) => {
              <Button
                fluid
                icon="server"
-                content={'Electronics: ' + electronics}
+                content={`Electronics: ${electronics}`}
                color="blue"
              />
            </Stack.Item>
@@ -197,7 +197,7 @@ const AdventureStatus = (props) => {
              <Button
                fluid
                icon="rocket"
-                content={'Engine Parts: ' + engine}
+                content={`Engine Parts: ${engine}`}
                color="violet"
              />
            </Stack.Item>
@@ -342,7 +342,7 @@ export class PreviewView extends Component<PreviewViewProps> {

  // Builds a paper field ID from a number or string.
  createIDHeader = (index: number | string): string => {
-    return 'paperfield_' + index;
+    return `paperfield_${index}`;
  };

  // Returns the width the text with the provided attributes would take up in px.
@@ -92,7 +92,7 @@ export class PrimaryView extends Component {
            />
          </Flex.Item>
          {canEdit && (
-            <Flex.Item shrink={1} height={TEXTAREA_INPUT_HEIGHT + 'px'}>
+            <Flex.Item shrink={1} height={`${TEXTAREA_INPUT_HEIGHT}px`}>
              <Section
                title="Insert Text"
                fitted
@@ -7,9 +7,9 @@ const Z_INDEX_STAMP_PREVIEW = 2;
 export function Stamp(props) {
  const { activeStamp, sprite, x, y, rotation, opacity, yOffset = 0 } = props;
  const stamp_transform = {
-    left: x + 'px',
-    top: y + yOffset + 'px',
-    transform: 'rotate(' + rotation + 'deg)',
+    left: `${x}px`,
+    top: `${y + yOffset}px`,
+    transform: `rotate(${rotation}deg)`,
    opacity: opacity || 1.0,
    zIndex: activeStamp ? Z_INDEX_STAMP_PREVIEW : Z_INDEX_STAMP,
  };
@@ -68,7 +68,7 @@ export const ParticleEdit = (props) => {
  return (
    <ParticleContext.Provider value={{ desc, setDesc }}>
      <Window
-        title={data.target_name + "'s particles"}
+        title={`${data.target_name}'s particles`}
        width={940}
        height={890}
      >
@@ -96,7 +96,7 @@ export function RecipeContentCompact(props: Props) {
                <Box>
                  {!!item.tool_behaviors && (
                    <Tooltip
-                      content={'Tools: ' + item.tool_behaviors.join(', ')}
+                      content={`Tools: ${item.tool_behaviors.join(', ')}`}
                    >
                      <Icon p={1} name="screwdriver-wrench" />
                    </Tooltip>
@@ -3,7 +3,7 @@ import type { CraftingData } from './types';
 export function findIcon(atom_id: number, data: CraftingData): string {
  let icon: string = data.icon_data[atom_id];
  if (!icon) {
-    icon = (data.mode ? 'cooking32x32' : 'crafting32x32') + ' a' + atom_id;
+    icon = `${data.mode ? 'cooking32x32' : 'crafting32x32'} a${atom_id}`;
  }

  return icon;
@@ -188,7 +188,7 @@ const Status = (props: StatusProps) => {
                  fluid
                  dmIcon={paper.icon}
                  dmIconState={paper.icon_state}
-                  tooltip={paper.name + ' amount is ' + paper.amount}
+                  tooltip={`${paper.name} amount is ${paper.amount}`}
                  imageSize={32}
                  disabled={!paper.amount}
                  selected={created_paper === paper.type && paper.amount}
@@ -38,7 +38,7 @@ type Filter = {

 const formatPressure = (value) => {
  if (value < 10000) {
-    return toFixed(value) + ' kPa';
+    return `${toFixed(value)} kPa`;
  }
  return formatSiUnit(value * 1000, 1, 'Pa');
 };
@@ -18,7 +18,7 @@ export function PlantAnalyzerGraft(props) {

  return (
    <Section
-      title={'Graft: ' + capitalizeFirst(graft_data.name)}
+      title={`Graft: ${capitalizeFirst(graft_data.name)}`}
      buttons={
        !!graft_data.graft_gene && (
          <TraitTooltip path={graft_data.graft_gene} trait_db={data.trait_db} />
@@ -56,7 +56,7 @@ export const PortableChemMixer = (props) => {
                icon="tint"
                fluid
                lineHeight={1.75}
-                tooltip={'pH: ' + chemical.pH}
+                tooltip={`pH: ${chemical.pH}`}
                onClick={() =>
                  act('dispense', {
                    reagent: chemical.id,
@@ -32,7 +32,7 @@ export const PortableGenerator = (props) => {
                {data.active ? 'On' : 'Off'}
              </Button>
            </LabeledList.Item>
-            <LabeledList.Item label={data.sheet_name + ' sheets'}>
+            <LabeledList.Item label={`${data.sheet_name} sheets`}>
              <Box inline color={stackPercentState}>
                {data.sheets}
              </Box>
@@ -32,8 +32,8 @@ export const PortablePump = (props) => {
            <Button
              content={
                direction
-                  ? area_or_tank + ' → ' + pump_or_port
-                  : pump_or_port + ' → ' + area_or_tank
+                  ? `${area_or_tank} → ${pump_or_port}`
+                  : `${pump_or_port} → ${area_or_tank}`
              }
              color={!direction && !holding ? 'caution' : null}
              onClick={() => act('direction')}
@@ -27,11 +27,11 @@ export const Portagrav = (props) => {
          textAlign="center"
        >
          {!wiremode && percentage !== undefined
-            ? percentage + '%'
+            ? `${percentage}%`
            : wiremode
              ? 'WIRE POWERED'
              : 'NO CELL'}
-          {' - ' + gravity + 'G'}
+          {` - ${gravity}G`}
        </Box>
        <Box
          width="100%"
@@ -12,9 +12,9 @@ export const PortraitPicker = (props) => {
  const got_paintings = !!paintings.length;
  const current_portrait_title = got_paintings && paintings[listIndex].title;
  const current_portrait_author =
-    got_paintings && 'By ' + paintings[listIndex].creator;
+    got_paintings && `By ${paintings[listIndex].creator}`;
  const current_portrait_asset_name =
-    got_paintings && 'paintings' + '_' + paintings[listIndex].md5;
+    got_paintings && `paintings_${paintings[listIndex].md5}`;

  return (
    <Window theme="ntos" title="Portrait Picker" width={400} height={406}>
@@ -111,7 +111,7 @@ export function PowerMonitorContent(props) {
                    maxValue={maxValue}
                    color="teal"
                  >
-                    {toFixed(supply / 1000) + ' kW'}
+                    {`${toFixed(supply / 1000)} kW`}
                  </ProgressBar>
                </LabeledList.Item>
                <LabeledList.Item label="Draw">
@@ -121,7 +121,7 @@ export function PowerMonitorContent(props) {
                    maxValue={maxValue}
                    color="pink"
                  >
-                    {toFixed(demand / 1000) + ' kW'}
+                    {`${toFixed(demand / 1000)} kW`}
                  </ProgressBar>
                </LabeledList.Item>
              </LabeledList>
@@ -290,7 +290,7 @@ export function AreaCharge(props: AreaChargeProps) {
        }
      />
      <Box inline width="36px" textAlign="right">
-        {toFixed(charge) + '%'}
+        {`${toFixed(charge)}%`}
      </Box>
    </>
  );
@@ -305,7 +305,7 @@ function AreaStatusColorBox(props: AreaStatusColorBoxProps) {

  const power = Boolean(status & 2);
  const mode = Boolean(status & 1);
-  const tooltipText = (power ? 'On' : 'Off') + ` [${mode ? 'auto' : 'manual'}]`;
+  const tooltipText = `${power ? 'On' : 'Off'} [${mode ? 'auto' : 'manual'}]`;

  return (
    <Tooltip content={tooltipText}>
@@ -69,7 +69,7 @@ export const Radio = (props) => {
            <LabeledList.Item label="Frequency">
              {(freqlock && (
                <Box inline color="light-gray">
-                  {toFixed(frequency / 10, 1) + ' kHz'}
+                  {`${toFixed(frequency / 10, 1)} kHz`}
                </Box>
              )) || (
                <NumberInput
--- a/Show More
+++ b/Show More