tgui-core 1.1.8 → 1.1.9

package/lib/components/TimeDisplay.jsx

@@ -0,0 +1,64 @@
+import { Component } from 'react';
+
+import { formatTime } from '../common/format';
+
+// AnimatedNumber Copypaste
+function 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/lib/components/Tooltip.tsx

@@ -0,0 +1,152 @@
+// 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';
+
+import styles from '../styles/components/Tooltip.module.scss';
+
+type Props = {
+  /** The content to display in the tooltip */
+  content: ReactNode;
+} & Partial<{
+  /** Hovering this element will show the tooltip */
+  children: ReactNode;
+  /** Where to place the tooltip relative to the reference element */
+  position: Placement;
+}>;
+
+type State = {
+  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<Props, State> {
+  // 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.
+    //
+
+    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 = styles.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/lib/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/lib/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 function 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/lib/styles/atomic/candystripe.scss

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.candystripe:nth-child(odd) {
+  background-color: rgba(0, 0, 0, 0.25);
+}

package/lib/styles/atomic/centered-image.scss

@@ -0,0 +1,7 @@
+.centered-image {
+  position: absolute;
+  height: 100%;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%) scale(0.8);
+}

package/lib/styles/atomic/color.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use '../colors.scss';
+
+$fg-map: colors.$fg-map !default;
+$bg-map: colors.$bg-map !default;
+
+@each $color-name, $color-value in $fg-map {
+  .color-#{$color-name} {
+    color: $color-value !important;
+  }
+}
+
+@each $color-name, $color-value in $bg-map {
+  .color-bg-#{$color-name} {
+    background-color: $color-value !important;
+  }
+}

package/lib/styles/atomic/debug-layout.scss

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.debug-layout,
+.debug-layout *:not(g):not(path) {
+  color: rgba(255, 255, 255, 0.9) !important;
+  background: transparent !important;
+  outline: 1px solid rgba(255, 255, 255, 0.5) !important;
+  box-shadow: none !important;
+  filter: none !important;
+
+  &:hover {
+    outline-color: rgba(255, 255, 255, 0.8) !important;
+  }
+}

package/lib/styles/atomic/fit-text.scss

@@ -0,0 +1,14 @@
+$mqIterations: 19;
+@mixin fontResize($iterations) {
+  $i: 1;
+  @while $i <= $iterations {
+    @media all and (min-width: 100px * $i) {
+      .fit-text {
+        font-size: 0.1em * $i;
+      }
+    }
+    $i: $i + 1;
+  }
+}
+
+@include fontResize($mqIterations);

package/lib/styles/atomic/links.scss

@@ -0,0 +1,12 @@
+@use '../colors.scss';
+
+a {
+  &:link,
+  &:visited {
+    color: colors.$blue;
+  }
+  &:hover,
+  &:active {
+    color: colors.$primary;
+  }
+}

package/lib/styles/atomic/outline.scss

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use '../colors.scss';
+
+.outline-dotted {
+  outline-style: dotted !important;
+}
+
+.outline-dashed {
+  outline-style: dashed !important;
+}
+
+.outline-solid {
+  outline-style: solid !important;
+}
+
+.outline-double {
+  outline-style: double !important;
+}
+
+.outline-groove {
+  outline-style: groove !important;
+}
+
+.outline-ridge {
+  outline-style: ridge !important;
+}
+
+.outline-inset {
+  outline-style: inset !important;
+}
+
+.outline-outset {
+  outline-style: outset !important;
+}
+
+$fg-map: colors.$fg-map !default;
+$bg-map: colors.$bg-map !default;
+
+@each $color-name, $color-value in $fg-map {
+  .outline-color-#{$color-name} {
+    outline: 0.167rem solid $color-value !important;
+  }
+}

package/lib/styles/atomic/text.scss

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-baseline {
+  text-align: baseline;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.text-pre {
+  white-space: pre;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-underline {
+  text-decoration: underline;
+}

package/lib/styles/base.scss

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:math';
+
+$color-fg: #ffffff !default;
+$color-bg: #252525 !default;
+$color-bg-section: rgba(0, 0, 0, 0.33) !default;
+$color-bg-grad-spread: 2% !default;
+$color-bg-start: color.adjust(
+  $color-bg,
+  $lightness: $color-bg-grad-spread
+) !default;
+$color-bg-end: color.adjust(
+  $color-bg,
+  $lightness: -$color-bg-grad-spread
+) !default;
+
+$unit: 12px;
+$font-size: 1 * $unit !default;
+$border-radius: 0.16em !default;
+
+@function em($px) {
+  @return 1em * math.div($px, $unit);
+}
+
+@function rem($px) {
+  @return 1rem * math.div($px, $unit);
+}

package/lib/styles/colors.scss

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+
+// Base colors
+$black: #000000 !default;
+$white: #ffffff !default;
+$red: #db2828 !default;
+$orange: #f2711c !default;
+$yellow: #fbd608 !default;
+$olive: #b5cc18 !default;
+$green: #20b142 !default;
+$teal: #00b5ad !default;
+$blue: #2185d0 !default;
+$violet: #6435c9 !default;
+$purple: #a333c8 !default;
+$pink: #e03997 !default;
+$brown: #a5673f !default;
+$grey: #767676 !default;
+$light-grey: #aaa !default;
+
+$primary: #4972a1 !default;
+$good: #5baa27 !default;
+$average: #f08f11 !default;
+$bad: #db2828 !default;
+$label: #7e90a7 !default;
+
+// Background and foreground color lightness ratios
+$bg-lightness: -15% !default;
+$fg-lightness: 10% !default;
+
+@function bg($color) {
+  @return color.scale($color, $lightness: $bg-lightness);
+}
+
+@function fg($color) {
+  @return color.scale($color, $lightness: $fg-lightness);
+}
+
+// Mappings of color names
+
+$_gen_map: (
+  "black": $black,
+  "white": $white,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "olive": $olive,
+  "green": $green,
+  "teal": $teal,
+  "blue": $blue,
+  "violet": $violet,
+  "purple": $purple,
+  "pink": $pink,
+  "brown": $brown,
+  "grey": $grey,
+  "light-grey": $light-grey,
+  "good": $good,
+  "average": $average,
+  "bad": $bad,
+  "label": $label,
+);
+
+// Foreground color names for which to generate a color map
+$fg-map-keys: map.keys($_gen_map) !default;
+// Background color names for which to generate a color map
+$bg-map-keys: map.keys($_gen_map) !default;
+
+$fg-map: ();
+@each $color-name in $fg-map-keys {
+  $fg-map: map-merge(
+    $fg-map,
+    (
+      $color-name: fg(map.get($_gen_map, $color-name)),
+    )
+  );
+}
+
+$bg-map: ();
+@each $color-name in $bg-map-keys {
+  $bg-map: map-merge(
+    $bg-map,
+    (
+      $color-name: bg(map.get($_gen_map, $color-name)),
+    )
+  );
+}

package/lib/styles/components/BlockQuote.module.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use '../base.scss';
+@use '../colors.scss';
+
+$color-default: colors.fg(colors.$label) !default;
+
+.blockQuote {
+  color: $color-default;
+  border-left: base.em(2px) solid $color-default;
+  padding-left: 0.5em;
+  margin-bottom: 0.5em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

package/lib/styles/components/BlockQuote.module.scss.d.ts

@@ -0,0 +1,4 @@
+declare const classNames: {
+  readonly blockQuote: 'blockQuote';
+};
+export = classNames;