tgui-core 1.0.0

package/src/components/TimeDisplay.jsx

@@ -0,0 +1,64 @@
+import { Component } from 'react';
+
+import { formatTime } from '../format';
+
+// AnimatedNumber Copypaste
+const isSafeNumber = (value) => {
+  return (
+    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
+  );
+};
+
+export class TimeDisplay extends Component {
+  constructor(props) {
+    super(props);
+    this.timer = null;
+    this.last_seen_value = undefined;
+    this.state = {
+      value: 0,
+    };
+    // Set initial state with value provided in props
+    if (isSafeNumber(props.value)) {
+      this.state.value = Number(props.value);
+      this.last_seen_value = Number(props.value);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.auto !== undefined) {
+      clearInterval(this.timer);
+      this.timer = setInterval(() => this.tick(), 1000); // every 1 s
+    }
+  }
+
+  tick() {
+    let current = Number(this.state.value);
+    if (this.props.value !== this.last_seen_value) {
+      this.last_seen_value = this.props.value;
+      current = this.props.value;
+    }
+    const mod = this.props.auto === 'up' ? 10 : -10; // Time down by default.
+    const value = Math.max(0, current + mod); // one sec tick
+    this.setState({ value });
+  }
+
+  componentDidMount() {
+    if (this.props.auto !== undefined) {
+      this.timer = setInterval(() => this.tick(), 1000); // every 1 s
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  render() {
+    const val = this.state.value;
+    // Directly display weird stuff
+    if (!isSafeNumber(val)) {
+      return this.state.value || null;
+    }
+
+    return formatTime(val);
+  }
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable react/no-deprecated */
+// TODO: Rewrite as an FC, remove this lint disable
+import { createPopper, Placement, VirtualElement } from '@popperjs/core';
+import { Component, ReactNode } from 'react';
+import { findDOMNode, render } from 'react-dom';
+
+type TooltipProps = {
+  children?: ReactNode;
+  content: ReactNode;
+  position?: Placement;
+};
+
+type TooltipState = {
+  hovered: boolean;
+};
+
+const DEFAULT_OPTIONS = {
+  modifiers: [
+    {
+      name: 'eventListeners',
+      enabled: false,
+    },
+  ],
+};
+
+const NULL_RECT: DOMRect = {
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => null,
+};
+
+export class Tooltip extends Component<TooltipProps, TooltipState> {
+  // Mounting poppers is really laggy because popper.js is very slow.
+  // Thus, instead of using the Popper component, Tooltip creates ONE popper
+  // and stores every tooltip inside that.
+  // This means you can never have two tooltips at once, for instance.
+  static renderedTooltip: HTMLDivElement | undefined;
+  static singletonPopper: ReturnType<typeof createPopper> | undefined;
+  static currentHoveredElement: Element | undefined;
+  static virtualElement: VirtualElement = {
+    getBoundingClientRect: () =>
+      Tooltip.currentHoveredElement?.getBoundingClientRect() ?? NULL_RECT,
+  };
+
+  getDOMNode() {
+    // HACK: We don't want to create a wrapper, as it could break the layout
+    // of consumers, so we use findDOMNode.
+    // This is usually bad as refs are usually better, but refs did
+    // not work in this case, as they weren't propagating correctly.
+    // A previous attempt was made as a render prop that passed an ID,
+    // but this made consuming use too unwieldly.
+    // Because this component is written in TypeScript, we will know
+    // immediately if this internal variable is removed.
+    //
+    // eslint-disable-next-line react/no-find-dom-node
+    return findDOMNode(this) as Element;
+  }
+
+  componentDidMount() {
+    const domNode = this.getDOMNode();
+
+    if (!domNode) {
+      return;
+    }
+
+    domNode.addEventListener('mouseenter', () => {
+      let renderedTooltip = Tooltip.renderedTooltip;
+      if (renderedTooltip === undefined) {
+        renderedTooltip = document.createElement('div');
+        renderedTooltip.className = 'Tooltip';
+        document.body.appendChild(renderedTooltip);
+        Tooltip.renderedTooltip = renderedTooltip;
+      }
+
+      Tooltip.currentHoveredElement = domNode;
+
+      renderedTooltip.style.opacity = '1';
+
+      this.renderPopperContent();
+    });
+
+    domNode.addEventListener('mouseleave', () => {
+      this.fadeOut();
+    });
+  }
+
+  fadeOut() {
+    if (Tooltip.currentHoveredElement !== this.getDOMNode()) {
+      return;
+    }
+
+    Tooltip.currentHoveredElement = undefined;
+    Tooltip.renderedTooltip!.style.opacity = '0';
+  }
+
+  renderPopperContent() {
+    const renderedTooltip = Tooltip.renderedTooltip;
+    if (!renderedTooltip) {
+      return;
+    }
+
+    render(<span>{this.props.content}</span>, renderedTooltip, () => {
+      let singletonPopper = Tooltip.singletonPopper;
+      if (singletonPopper === undefined) {
+        singletonPopper = createPopper(
+          Tooltip.virtualElement,
+          renderedTooltip!,
+          {
+            ...DEFAULT_OPTIONS,
+            placement: this.props.position || 'auto',
+          }
+        );
+
+        Tooltip.singletonPopper = singletonPopper;
+      } else {
+        singletonPopper.setOptions({
+          ...DEFAULT_OPTIONS,
+          placement: this.props.position || 'auto',
+        });
+
+        singletonPopper.update();
+      }
+    });
+  }
+
+  componentDidUpdate() {
+    if (Tooltip.currentHoveredElement !== this.getDOMNode()) {
+      return;
+    }
+
+    this.renderPopperContent();
+  }
+
+  componentWillUnmount() {
+    this.fadeOut();
+  }
+
+  render() {
+    return this.props.children;
+  }
+}

package/src/components/TrackOutsideClicks.tsx

@@ -0,0 +1,35 @@
+import { Component, createRef, PropsWithChildren } from 'react';
+
+type Props = {
+  onOutsideClick: () => void;
+} & PropsWithChildren;
+
+export class TrackOutsideClicks extends Component<Props> {
+  ref = createRef<HTMLDivElement>();
+
+  constructor(props) {
+    super(props);
+
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+
+    document.addEventListener('click', this.handleOutsideClick);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+
+  handleOutsideClick(event: MouseEvent) {
+    if (!(event.target instanceof Node)) {
+      return;
+    }
+
+    if (this.ref.current && !this.ref.current.contains(event.target)) {
+      this.props.onOutsideClick();
+    }
+  }
+
+  render() {
+    return <div ref={this.ref}>{this.props.children}</div>;
+  }
+}

package/src/components/VirtualList.tsx

@@ -0,0 +1,69 @@
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+/**
+ * A vertical list that renders items to fill space up to the extents of the
+ * current window, and then defers rendering of other items until they come
+ * into view.
+ */
+export const VirtualList = (props: PropsWithChildren) => {
+  const { children } = props;
+  const containerRef = useRef(null as HTMLDivElement | null);
+  const [visibleElements, setVisibleElements] = useState(1);
+  const [padding, setPadding] = useState(0);
+
+  const adjustExtents = useCallback(() => {
+    const { current } = containerRef;
+
+    if (
+      !children ||
+      !Array.isArray(children) ||
+      !current ||
+      visibleElements >= children.length
+    ) {
+      return;
+    }
+
+    const unusedArea =
+      document.body.offsetHeight - current.getBoundingClientRect().bottom;
+
+    const averageItemHeight = Math.ceil(current.offsetHeight / visibleElements);
+
+    if (unusedArea > 0) {
+      const newVisibleElements = Math.min(
+        children.length,
+        visibleElements +
+          Math.max(1, Math.ceil(unusedArea / averageItemHeight)),
+      );
+
+      setVisibleElements(newVisibleElements);
+
+      setPadding((children.length - newVisibleElements) * averageItemHeight);
+    }
+  }, [containerRef, visibleElements, children]);
+
+  useEffect(() => {
+    adjustExtents();
+
+    const interval = setInterval(adjustExtents, 100);
+
+    return () => clearInterval(interval);
+  }, [adjustExtents]);
+
+  return (
+    <div className={'VirtualList'}>
+      <div className={'VirtualList__Container'} ref={containerRef}>
+        {Array.isArray(children) ? children.slice(0, visibleElements) : null}
+      </div>
+      <div
+        className={'VirtualList__Padding'}
+        style={{ paddingBottom: `${padding}px` }}
+      />
+    </div>
+  );
+};

package/src/constants.ts

@@ -0,0 +1,355 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+type Gas = {
+  id: string;
+  path: string;
+  name: string;
+  label: string;
+  color: string;
+};
+
+// UI states, which are mirrored from the BYOND code.
+export const UI_INTERACTIVE = 2;
+export const UI_UPDATE = 1;
+export const UI_DISABLED = 0;
+export const UI_CLOSE = -1;
+
+// All game related colors are stored here
+export const COLORS = {
+  // Department colors
+  department: {
+    captain: '#c06616',
+    security: '#e74c3c',
+    medbay: '#3498db',
+    science: '#9b59b6',
+    engineering: '#f1c40f',
+    cargo: '#f39c12',
+    service: '#7cc46a',
+    centcom: '#00c100',
+    other: '#c38312',
+  },
+  // Damage type colors
+  damageType: {
+    oxy: '#3498db',
+    toxin: '#2ecc71',
+    burn: '#e67e22',
+    brute: '#e74c3c',
+  },
+  // reagent / chemistry related colours
+  reagent: {
+    acidicbuffer: '#fbc314',
+    basicbuffer: '#3853a4',
+  },
+} as const;
+
+// Colors defined in CSS
+export const CSS_COLORS = [
+  'average',
+  'bad',
+  'black',
+  'blue',
+  'brown',
+  'good',
+  'green',
+  'grey',
+  'label',
+  'olive',
+  'orange',
+  'pink',
+  'purple',
+  'red',
+  'teal',
+  'transparent',
+  'violet',
+  'white',
+  'yellow',
+] as const;
+
+export type CssColor = (typeof CSS_COLORS)[number];
+
+/* IF YOU CHANGE THIS KEEP IT IN SYNC WITH CHAT CSS */
+export const RADIO_CHANNELS = [
+  {
+    name: 'Syndicate',
+    freq: 1213,
+    color: '#8f4a4b',
+  },
+  {
+    name: 'Red Team',
+    freq: 1215,
+    color: '#ff4444',
+  },
+  {
+    name: 'Blue Team',
+    freq: 1217,
+    color: '#3434fd',
+  },
+  {
+    name: 'Green Team',
+    freq: 1219,
+    color: '#34fd34',
+  },
+  {
+    name: 'Yellow Team',
+    freq: 1221,
+    color: '#fdfd34',
+  },
+  {
+    name: 'CentCom',
+    freq: 1337,
+    color: '#2681a5',
+  },
+  {
+    name: 'Supply',
+    freq: 1347,
+    color: '#b88646',
+  },
+  {
+    name: 'Service',
+    freq: 1349,
+    color: '#6ca729',
+  },
+  {
+    name: 'Science',
+    freq: 1351,
+    color: '#c68cfa',
+  },
+  {
+    name: 'Command',
+    freq: 1353,
+    color: '#fcdf03',
+  },
+  {
+    name: 'Medical',
+    freq: 1355,
+    color: '#57b8f0',
+  },
+  {
+    name: 'Engineering',
+    freq: 1357,
+    color: '#f37746',
+  },
+  {
+    name: 'Security',
+    freq: 1359,
+    color: '#dd3535',
+  },
+  {
+    name: 'AI Private',
+    freq: 1447,
+    color: '#d65d95',
+  },
+  {
+    name: 'Common',
+    freq: 1459,
+    color: '#1ecc43',
+  },
+] as const;
+
+const GASES = [
+  {
+    id: 'o2',
+    path: '/datum/gas/oxygen',
+    name: 'Oxygen',
+    label: 'O₂',
+    color: 'blue',
+  },
+  {
+    id: 'n2',
+    path: '/datum/gas/nitrogen',
+    name: 'Nitrogen',
+    label: 'N₂',
+    color: 'yellow',
+  },
+  {
+    id: 'co2',
+    path: '/datum/gas/carbon_dioxide',
+    name: 'Carbon Dioxide',
+    label: 'CO₂',
+    color: 'grey',
+  },
+  {
+    id: 'plasma',
+    path: '/datum/gas/plasma',
+    name: 'Plasma',
+    label: 'Plasma',
+    color: 'pink',
+  },
+  {
+    id: 'water_vapor',
+    path: '/datum/gas/water_vapor',
+    name: 'Water Vapor',
+    label: 'H₂O',
+    color: 'lightsteelblue',
+  },
+  {
+    id: 'hypernoblium',
+    path: '/datum/gas/hypernoblium',
+    name: 'Hyper-noblium',
+    label: 'Hyper-nob',
+    color: 'teal',
+  },
+  {
+    id: 'n2o',
+    path: '/datum/gas/nitrous_oxide',
+    name: 'Nitrous Oxide',
+    label: 'N₂O',
+    color: 'bisque',
+  },
+  {
+    id: 'no2',
+    path: '/datum/gas/nitrium',
+    name: 'Nitrium',
+    label: 'Nitrium',
+    color: 'brown',
+  },
+  {
+    id: 'tritium',
+    path: '/datum/gas/tritium',
+    name: 'Tritium',
+    label: 'Tritium',
+    color: 'limegreen',
+  },
+  {
+    id: 'bz',
+    path: '/datum/gas/bz',
+    name: 'BZ',
+    label: 'BZ',
+    color: 'mediumpurple',
+  },
+  {
+    id: 'pluoxium',
+    path: '/datum/gas/pluoxium',
+    name: 'Pluoxium',
+    label: 'Pluoxium',
+    color: 'mediumslateblue',
+  },
+  {
+    id: 'miasma',
+    path: '/datum/gas/miasma',
+    name: 'Miasma',
+    label: 'Miasma',
+    color: 'olive',
+  },
+  {
+    id: 'freon',
+    path: '/datum/gas/freon',
+    name: 'Freon',
+    label: 'Freon',
+    color: 'paleturquoise',
+  },
+  {
+    id: 'hydrogen',
+    path: '/datum/gas/hydrogen',
+    name: 'Hydrogen',
+    label: 'H₂',
+    color: 'white',
+  },
+  {
+    id: 'healium',
+    path: '/datum/gas/healium',
+    name: 'Healium',
+    label: 'Healium',
+    color: 'salmon',
+  },
+  {
+    id: 'proto_nitrate',
+    path: '/datum/gas/proto_nitrate',
+    name: 'Proto Nitrate',
+    label: 'Proto-Nitrate',
+    color: 'greenyellow',
+  },
+  {
+    id: 'zauker',
+    path: '/datum/gas/zauker',
+    name: 'Zauker',
+    label: 'Zauker',
+    color: 'darkgreen',
+  },
+  {
+    id: 'halon',
+    path: '/datum/gas/halon',
+    name: 'Halon',
+    label: 'Halon',
+    color: 'purple',
+  },
+  {
+    id: 'helium',
+    path: '/datum/gas/helium',
+    name: 'Helium',
+    label: 'He',
+    color: 'aliceblue',
+  },
+  {
+    id: 'antinoblium',
+    path: '/datum/gas/antinoblium',
+    name: 'Antinoblium',
+    label: 'Anti-Noblium',
+    color: 'maroon',
+  },
+  {
+    id: 'nitrium',
+    path: '/datum/gas/nitrium',
+    name: 'Nitrium',
+    label: 'Nitrium',
+    color: 'brown',
+  },
+] as const;
+
+// Returns gas label based on gasId
+export const getGasLabel = (gasId: string, fallbackValue?: string) => {
+  if (!gasId) return fallbackValue || 'None';
+
+  const gasSearchString = gasId.toLowerCase();
+
+  for (let idx = 0; idx < GASES.length; idx++) {
+    if (GASES[idx].id === gasSearchString) {
+      return GASES[idx].label;
+    }
+  }
+
+  return fallbackValue || 'None';
+};
+
+// Returns gas color based on gasId
+export const getGasColor = (gasId: string) => {
+  if (!gasId) return 'black';
+
+  const gasSearchString = gasId.toLowerCase();
+
+  for (let idx = 0; idx < GASES.length; idx++) {
+    if (GASES[idx].id === gasSearchString) {
+      return GASES[idx].color;
+    }
+  }
+
+  return 'black';
+};
+
+// Returns gas object based on gasId
+export const getGasFromId = (gasId: string): Gas | undefined => {
+  if (!gasId) return;
+
+  const gasSearchString = gasId.toLowerCase();
+
+  for (let idx = 0; idx < GASES.length; idx++) {
+    if (GASES[idx].id === gasSearchString) {
+      return GASES[idx];
+    }
+  }
+};
+
+// Returns gas object based on gasPath
+export const getGasFromPath = (gasPath: string): Gas | undefined => {
+  if (!gasPath) return;
+
+  for (let idx = 0; idx < GASES.length; idx++) {
+    if (GASES[idx].path === gasPath) {
+      return GASES[idx];
+    }
+  }
+};