tgui-core 1.0.0

package/src/common/vector.ts

@@ -0,0 +1,51 @@
+/**
+ * N-dimensional vector manipulation functions.
+ *
+ * Vectors are plain number arrays, i.e. [x, y, z].
+ *
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { map, reduce, zip } from './collections';
+
+const ADD = (a: number, b: number): number => a + b;
+const SUB = (a: number, b: number): number => a - b;
+const MUL = (a: number, b: number): number => a * b;
+const DIV = (a: number, b: number): number => a / b;
+
+export type Vector = number[];
+
+export const vecAdd = (...vecs: Vector[]): Vector => {
+  return map(zip(...vecs), (x) => reduce(x, ADD));
+};
+
+export const vecSubtract = (...vecs: Vector[]): Vector => {
+  return map(zip(...vecs), (x) => reduce(x, SUB));
+};
+
+export const vecMultiply = (...vecs: Vector[]): Vector => {
+  return map(zip(...vecs), (x) => reduce(x, MUL));
+};
+
+export const vecDivide = (...vecs: Vector[]): Vector => {
+  return map(zip(...vecs), (x) => reduce(x, DIV));
+};
+
+export const vecScale = (vec: Vector, n: number): Vector => {
+  return map(vec, (x) => x * n);
+};
+
+export const vecInverse = (vec: Vector): Vector => {
+  return map(vec, (x) => -x);
+};
+
+export const vecLength = (vec: Vector): number => {
+  return Math.sqrt(reduce(vecMultiply(vec, vec), ADD));
+};
+
+export const vecNormalize = (vec: Vector): Vector => {
+  const length = vecLength(vec);
+  return map(vec, (c) => c / length);
+};

package/src/components/AnimatedNumber.tsx

@@ -0,0 +1,185 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { clamp, toFixed } from '../common/math';
+import { Component, createRef } from 'react';
+
+const isSafeNumber = (value: number) => {
+  return (
+    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
+  );
+};
+
+export type AnimatedNumberProps = {
+  /**
+   * The target value to approach.
+   */
+  value: number;
+
+  /**
+   * If provided, the initial value displayed. By default, the same as `value`.
+   * If `initial` and `value` are different, the component immediately starts
+   * animating.
+   */
+  initial?: number;
+
+  /**
+   * If provided, a function that formats the inner string. By default,
+   * attempts to match the numeric precision of `value`.
+   */
+  format?: (value: number) => string;
+};
+
+/**
+ * Animated numbers are animated at roughly 60 frames per second.
+ */
+const SIXTY_HZ = 1_000.0 / 60.0;
+
+/**
+ * The exponential moving average coefficient. Larger values result in a faster
+ * convergence.
+ */
+const Q = 0.8333;
+
+/**
+ * A small number.
+ */
+const EPSILON = 10e-4;
+
+/**
+ * An animated number label. Shows a number, formatted with an optionally
+ * provided function, and animates it towards its target value.
+ */
+export class AnimatedNumber extends Component<AnimatedNumberProps> {
+  /**
+   * The inner `<span/>` being updated sixty times per second.
+   */
+  ref = createRef<HTMLSpanElement>();
+
+  /**
+   * The interval being used to update the inner span.
+   */
+  interval?: NodeJS.Timeout;
+
+  /**
+   * The current value. This values approaches the target value.
+   */
+  currentValue: number = 0;
+
+  constructor(props: AnimatedNumberProps) {
+    super(props);
+
+    const { initial, value } = props;
+
+    if (initial !== undefined && isSafeNumber(initial)) {
+      this.currentValue = initial;
+    } else if (isSafeNumber(value)) {
+      this.currentValue = value;
+    }
+  }
+
+  componentDidMount() {
+    if (this.currentValue !== this.props.value) {
+      this.startTicking();
+    }
+  }
+
+  componentWillUnmount() {
+    // Stop animating when the component is unmounted.
+    this.stopTicking();
+  }
+
+  shouldComponentUpdate(newProps: AnimatedNumberProps) {
+    if (newProps.value !== this.props.value) {
+      // The target value has been adjusted; start animating if we aren't
+      // already.
+      this.startTicking();
+    }
+
+    return false;
+  }
+
+  /**
+   * Starts animating the inner span. If the inner span is already animating,
+   * this is a no-op.
+   */
+  startTicking() {
+    if (this.interval !== undefined) {
+      // We're already ticking; do nothing.
+      return;
+    }
+
+    this.interval = setInterval(() => this.tick(), SIXTY_HZ);
+  }
+
+  /**
+   * Stops animating the inner span.
+   */
+  stopTicking() {
+    if (this.interval === undefined) {
+      // We're not ticking; do nothing.
+      return;
+    }
+
+    clearInterval(this.interval);
+
+    this.interval = undefined;
+  }
+
+  /**
+   * Steps forward one frame.
+   */
+  tick() {
+    const { currentValue } = this;
+    const { value } = this.props;
+
+    if (isSafeNumber(value)) {
+      // Converge towards the value.
+      this.currentValue = currentValue * Q + value * (1 - Q);
+    } else {
+      // If the value is unsafe, we're never going to converge, so stop ticking.
+      this.stopTicking();
+    }
+
+    if (
+      Math.abs(value - this.currentValue) < Math.max(EPSILON, EPSILON * value)
+    ) {
+      // We're about as close as we're going to get--snap to the value and
+      // stop ticking.
+      this.currentValue = value;
+      this.stopTicking();
+    }
+
+    if (this.ref.current) {
+      this.ref.current.textContent = this.getText();
+    }
+  }
+
+  /**
+   * Gets the inner text of the span.
+   */
+  getText() {
+    const { props, currentValue } = this;
+    const { format, value } = props;
+
+    if (!isSafeNumber(value)) {
+      return String(value);
+    }
+
+    if (format) {
+      return format(this.currentValue);
+    }
+
+    const fraction = String(value).split('.')[1];
+    const precision = fraction ? fraction.length : 0;
+
+    return toFixed(currentValue, clamp(precision, 0, 8));
+  }
+
+  render() {
+    return <span ref={this.ref}>{this.getText()}</span>;
+  }
+}

package/src/components/Autofocus.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren, useEffect, useRef } from 'react';
+
+/** Used to force the window to steal focus on load. Children optional */
+export function Autofocus(props: PropsWithChildren) {
+  const { children } = props;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      ref.current?.focus();
+    }, 1);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <div ref={ref} tabIndex={-1}>
+      {children}
+    </div>
+  );
+}

package/src/components/Blink.jsx

@@ -0,0 +1,69 @@
+import { Component } from 'react';
+
+const DEFAULT_BLINKING_INTERVAL = 1000;
+const DEFAULT_BLINKING_TIME = 1000;
+
+export class Blink extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hidden: false,
+    };
+  }
+
+  createTimer() {
+    const {
+      interval = DEFAULT_BLINKING_INTERVAL,
+      time = DEFAULT_BLINKING_TIME,
+    } = this.props;
+
+    clearInterval(this.interval);
+    clearTimeout(this.timer);
+
+    this.setState({
+      hidden: false,
+    });
+
+    this.interval = setInterval(() => {
+      this.setState({
+        hidden: true,
+      });
+
+      this.timer = setTimeout(() => {
+        this.setState({
+          hidden: false,
+        });
+      }, time);
+    }, interval + time);
+  }
+
+  componentDidMount() {
+    this.createTimer();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.interval !== this.props.interval ||
+      prevProps.time !== this.props.time
+    ) {
+      this.createTimer();
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    return (
+      <span
+        style={{
+          visibility: this.state.hidden ? 'hidden' : 'visible',
+        }}
+      >
+        {this.props.children}
+      </span>
+    );
+  }
+}

package/src/components/BlockQuote.tsx

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+import { Box, BoxProps } from './Box';
+
+export function BlockQuote(props: BoxProps) {
+  const { className, ...rest } = props;
+
+  return <Box className={classes(['BlockQuote', className])} {...rest} />;
+}

package/src/components/BodyZoneSelector.tsx

@@ -0,0 +1,149 @@
+import { Component, createRef } from 'react';
+
+import { resolveAsset } from '../assets';
+import { Image } from './Image';
+
+export enum BodyZone {
+  Head = 'head',
+  Chest = 'chest',
+  LeftArm = 'l_arm',
+  RightArm = 'r_arm',
+  LeftLeg = 'l_leg',
+  RightLeg = 'r_leg',
+  Eyes = 'eyes',
+  Mouth = 'mouth',
+  Groin = 'groin',
+}
+
+const bodyZonePixelToZone = (x: number, y: number): BodyZone | null => {
+  // TypeScript translation of /atom/movable/screen/zone_sel/proc/get_zone_at
+  if (y < 1) {
+    return null;
+  } else if (y < 10) {
+    if (x > 10 && x < 15) {
+      return BodyZone.RightLeg;
+    } else if (x > 17 && x < 22) {
+      return BodyZone.LeftLeg;
+    }
+  } else if (y < 13) {
+    if (x > 8 && x < 11) {
+      return BodyZone.RightArm;
+    } else if (x > 12 && x < 20) {
+      return BodyZone.Groin;
+    } else if (x > 21 && x < 24) {
+      return BodyZone.LeftArm;
+    }
+  } else if (y < 22) {
+    if (x > 8 && x < 11) {
+      return BodyZone.RightArm;
+    } else if (x > 12 && x < 20) {
+      return BodyZone.Chest;
+    } else if (x > 21 && x < 24) {
+      return BodyZone.LeftArm;
+    }
+  } else if (y < 30 && x > 12 && x < 20) {
+    if (y > 23 && y < 24 && x > 15 && x < 17) {
+      return BodyZone.Mouth;
+    } else if (y > 25 && y < 27 && x > 14 && x < 18) {
+      return BodyZone.Eyes;
+    } else {
+      return BodyZone.Head;
+    }
+  }
+
+  return null;
+};
+
+type BodyZoneSelectorProps = {
+  onClick?: (zone: BodyZone) => void;
+  scale?: number;
+  selectedZone: BodyZone | null;
+  theme?: string;
+};
+
+type BodyZoneSelectorState = {
+  hoverZone: BodyZone | null;
+};
+
+export class BodyZoneSelector extends Component<
+  BodyZoneSelectorProps,
+  BodyZoneSelectorState
+> {
+  ref = createRef<HTMLDivElement>();
+  state: BodyZoneSelectorState = {
+    hoverZone: null,
+  };
+
+  render() {
+    const { hoverZone } = this.state;
+    const { scale = 3, selectedZone, theme = 'midnight' } = this.props;
+
+    return (
+      <div
+        ref={this.ref}
+        style={{
+          width: `${32 * scale}px`,
+          height: `${32 * scale}px`,
+          position: 'relative',
+        }}
+      >
+        <Image
+          src={resolveAsset(`body_zones.base_${theme}.png`)}
+          onClick={() => {
+            const onClick = this.props.onClick;
+            if (onClick && this.state.hoverZone) {
+              onClick(this.state.hoverZone);
+            }
+          }}
+          onMouseMove={(event) => {
+            if (!this.props.onClick) {
+              return;
+            }
+
+            const rect = this.ref.current?.getBoundingClientRect();
+            if (!rect) {
+              return;
+            }
+
+            const x = event.clientX - rect.left;
+            const y = 32 * scale - (event.clientY - rect.top);
+
+            this.setState({
+              hoverZone: bodyZonePixelToZone(x / scale, y / scale),
+            });
+          }}
+          style={{
+            position: 'absolute',
+            width: `${32 * scale}px`,
+            height: `${32 * scale}px`,
+          }}
+        />
+
+        {selectedZone && (
+          <Image
+            src={resolveAsset(`body_zones.${selectedZone}.png`)}
+            style={{
+              pointerEvents: 'none',
+              position: 'absolute',
+              width: `${32 * scale}px`,
+              height: `${32 * scale}px`,
+            }}
+          />
+        )}
+
+        {hoverZone && hoverZone !== selectedZone && (
+          <Image
+            src={resolveAsset(`body_zones.${hoverZone}.png`)}
+            style={{
+              opacity: '0.5',
+              pointerEvents: 'none',
+              position: 'absolute',
+              width: `${32 * scale}px`,
+              height: `${32 * scale}px`,
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+}