tgui-core 1.1.11 → 1.1.13

package/lib/components/TimeDisplay.jsx

@@ -1,64 +0,0 @@
-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

@@ -1,152 +0,0 @@
-// 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

@@ -1,35 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,8 +0,0 @@
-/**
- * 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

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

package/lib/styles/atomic/color.scss

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,14 +0,0 @@
-$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

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

package/lib/styles/atomic/outline.scss

@@ -1,47 +0,0 @@
-/**
- * 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

@@ -1,44 +0,0 @@
-/**
- * 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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,92 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-/**
- * 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

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