tgui-core 1.1.11 → 1.1.13

package/lib/components/Blink.tsx

@@ -1,91 +0,0 @@
-import { Component, PropsWithChildren } from 'react';
-
-
-type Props = Partial<{
-  /**
-   * The interval between blinks, in milliseconds.
-   */
-  interval: number;
-
-  /**
-   * The time to wait before blinking again, in milliseconds.
-   */
-  time: number;
-}> & PropsWithChildren;
-
-type State = {
-  hidden: boolean;
-};
-
-const DEFAULT_BLINKING_INTERVAL = 1000;
-const DEFAULT_BLINKING_TIME = 1000;
-
-
-
-export class Blink extends Component<Props, State> {
-  interval: NodeJS.Timeout;
-  timer: NodeJS.Timeout;
-
-  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/lib/components/BlockQuote.tsx

@@ -1,9 +0,0 @@
-import { classes } from '../common/react';
-import styles from '../styles/components/BlockQuote.module.scss';
-import { Box, BoxProps } from './Box';
-
-export function BlockQuote(props: BoxProps) {
-  const { className, ...rest } = props;
-
-  return <Box className={classes([styles.blockQuote, className])} {...rest} />;
-}

package/lib/components/BodyZoneSelector.tsx

@@ -1,149 +0,0 @@
-import { Component, createRef } from 'react';
-
-import { resolveAsset } from '../common/assets';
-import { Image } from './Image';
-
-export enum BodyZone {
-  Chest = 'chest',
-  Eyes = 'eyes',
-  Groin = 'groin',
-  Head = 'head',
-  LeftArm = 'l_arm',
-  LeftLeg = 'l_leg',
-  Mouth = 'mouth',
-  RightArm = 'r_arm',
-  RightLeg = 'r_leg',
-}
-
-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>
-    );
-  }
-}

package/lib/components/Box.tsx

@@ -1,252 +0,0 @@
-import {
-  createElement,
-  CSSProperties,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  ReactNode,
-  UIEventHandler,
-} from 'react';
-
-import { CSS_COLORS } from '../common/constants';
-import { BooleanLike, classes } from '../common/react';
-
-type BooleanProps = Partial<Record<keyof typeof booleanStyleMap, boolean>>;
-type StringProps = Partial<
-  Record<keyof typeof stringStyleMap, string | BooleanLike>
->;
-
-export type EventHandlers = Partial<{
-  onClick: MouseEventHandler<HTMLDivElement>;
-  onContextMenu: MouseEventHandler<HTMLDivElement>;
-  onDoubleClick: MouseEventHandler<HTMLDivElement>;
-  onKeyDown: KeyboardEventHandler<HTMLDivElement>;
-  onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-  onMouseDown: MouseEventHandler<HTMLDivElement>;
-  onMouseMove: MouseEventHandler<HTMLDivElement>;
-  onMouseOver: MouseEventHandler<HTMLDivElement>;
-  onMouseUp: MouseEventHandler<HTMLDivElement>;
-  onScroll: UIEventHandler<HTMLDivElement>;
-}>;
-
-export type BoxProps = Partial<{
-  as: string;
-  children: ReactNode;
-  className: string | BooleanLike;
-  style: CSSProperties;
-}> &
-  BooleanProps &
-  StringProps &
-  EventHandlers;
-
-// Don't you dare put this elsewhere
-type DangerDoNotUse = {
-  dangerouslySetInnerHTML?: {
-    __html: any;
-  };
-};
-
-/**
- * Coverts our rem-like spacing unit into a CSS unit.
- */
-export function unit(value: unknown) {
-  if (typeof value === 'string') {
-    // Transparently convert pixels into rem units
-    if (value.endsWith('px')) {
-      return parseFloat(value) / 12 + 'rem';
-    }
-    return value;
-  }
-  if (typeof value === 'number') {
-    return value + 'rem';
-  }
-}
-
-/**
- * Same as `unit`, but half the size for integers numbers.
- */
-export function halfUnit(value: unknown): string | undefined {
-  if (typeof value === 'string') {
-    return unit(value);
-  }
-  if (typeof value === 'number') {
-    return unit(value * 0.5);
-  }
-}
-
-function isColorCode(str: unknown): boolean {
-  return !isColorClass(str);
-}
-
-function isColorClass(str: unknown): boolean {
-  return typeof str === 'string' && CSS_COLORS.includes(str as any);
-}
-
-const mapRawPropTo = (attrName) => (style, value) => {
-  if (typeof value === 'number' || typeof value === 'string') {
-    style[attrName] = value;
-  }
-};
-
-const mapUnitPropTo = (attrName, unit) => (style, value) => {
-  if (typeof value === 'number' || typeof value === 'string') {
-    style[attrName] = unit(value);
-  }
-};
-
-const mapBooleanPropTo = (attrName, attrValue) => (style, value) => {
-  if (value) {
-    style[attrName] = attrValue;
-  }
-};
-
-const mapDirectionalUnitPropTo = (attrName, unit, dirs) => (style, value) => {
-  if (typeof value === 'number' || typeof value === 'string') {
-    for (let i = 0; i < dirs.length; i++) {
-      style[attrName + '-' + dirs[i]] = unit(value);
-    }
-  }
-};
-
-const mapColorPropTo = (attrName) => (style, value) => {
-  if (isColorCode(value)) {
-    style[attrName] = value;
-  }
-};
-
-// String / number props
-const stringStyleMap = {
-  align: mapRawPropTo('textAlign'),
-  bottom: mapUnitPropTo('bottom', unit),
-  fontFamily: mapRawPropTo('fontFamily'),
-  fontSize: mapUnitPropTo('fontSize', unit),
-  fontWeight: mapRawPropTo('fontWeight'),
-  height: mapUnitPropTo('height', unit),
-  left: mapUnitPropTo('left', unit),
-  maxHeight: mapUnitPropTo('maxHeight', unit),
-  maxWidth: mapUnitPropTo('maxWidth', unit),
-  minHeight: mapUnitPropTo('minHeight', unit),
-  minWidth: mapUnitPropTo('minWidth', unit),
-  opacity: mapRawPropTo('opacity'),
-  overflow: mapRawPropTo('overflow'),
-  overflowX: mapRawPropTo('overflowX'),
-  overflowY: mapRawPropTo('overflowY'),
-  position: mapRawPropTo('position'),
-  right: mapUnitPropTo('right', unit),
-  textAlign: mapRawPropTo('textAlign'),
-  top: mapUnitPropTo('top', unit),
-  verticalAlign: mapRawPropTo('verticalAlign'),
-  width: mapUnitPropTo('width', unit),
-
-  lineHeight: (style, value) => {
-    if (typeof value === 'number') {
-      style['lineHeight'] = value;
-    } else if (typeof value === 'string') {
-      style['lineHeight'] = unit(value);
-    }
-  },
-  // Margin
-  m: mapDirectionalUnitPropTo('margin', halfUnit, [
-    'Top',
-    'Bottom',
-    'Left',
-    'Right',
-  ]),
-  mb: mapUnitPropTo('marginBottom', halfUnit),
-  ml: mapUnitPropTo('marginLeft', halfUnit),
-  mr: mapUnitPropTo('marginRight', halfUnit),
-  mt: mapUnitPropTo('marginTop', halfUnit),
-  mx: mapDirectionalUnitPropTo('margin', halfUnit, ['Left', 'Right']),
-  my: mapDirectionalUnitPropTo('margin', halfUnit, ['Top', 'Bottom']),
-  // Padding
-  p: mapDirectionalUnitPropTo('padding', halfUnit, [
-    'Top',
-    'Bottom',
-    'Left',
-    'Right',
-  ]),
-  pb: mapUnitPropTo('paddingBottom', halfUnit),
-  pl: mapUnitPropTo('paddingLeft', halfUnit),
-  pr: mapUnitPropTo('paddingRight', halfUnit),
-  pt: mapUnitPropTo('paddingTop', halfUnit),
-  px: mapDirectionalUnitPropTo('padding', halfUnit, ['Left', 'Right']),
-  py: mapDirectionalUnitPropTo('padding', halfUnit, ['Top', 'Bottom']),
-  // Color props
-  color: mapColorPropTo('color'),
-  textColor: mapColorPropTo('color'),
-  backgroundColor: mapColorPropTo('backgroundColor'),
-} as const;
-
-// Boolean props
-const booleanStyleMap = {
-  bold: mapBooleanPropTo('fontWeight', 'bold'),
-  fillPositionedParent: (style, value) => {
-    if (value) {
-      style['position'] = 'absolute';
-      style['top'] = 0;
-      style['bottom'] = 0;
-      style['left'] = 0;
-      style['right'] = 0;
-    }
-  },
-  inline: mapBooleanPropTo('display', 'inline-block'),
-  italic: mapBooleanPropTo('fontStyle', 'italic'),
-  nowrap: mapBooleanPropTo('whiteSpace', 'nowrap'),
-  preserveWhitespace: mapBooleanPropTo('whiteSpace', 'pre-wrap'),
-} as const;
-
-export function computeBoxProps(props): Record<string, any> {
-  const computedProps: Record<string, any> = {};
-  const computedStyles: Record<string, string | number> = {};
-
-  // Compute props
-  for (const propName of Object.keys(props)) {
-    if (propName === 'style') {
-      continue;
-    }
-
-    const propValue = props[propName];
-
-    const mapPropToStyle =
-      stringStyleMap[propName] || booleanStyleMap[propName];
-
-    if (mapPropToStyle) {
-      mapPropToStyle(computedStyles, propValue);
-    } else {
-      computedProps[propName] = propValue;
-    }
-  }
-
-  // Merge computed styles and any directly provided styles
-  computedProps.style = { ...computedStyles, ...props.style };
-
-  return computedProps;
-}
-
-export function computeBoxClassName(props: BoxProps): string {
-  const color = props.textColor || props.color;
-  const backgroundColor = props.backgroundColor;
-  return classes([
-    isColorClass(color) && 'color-' + color,
-    isColorClass(backgroundColor) && 'color-bg-' + backgroundColor,
-  ]);
-}
-
-export function Box(props: BoxProps & DangerDoNotUse) {
-  const { as = 'div', className, children, ...rest } = props;
-
-  // Compute class name and styles
-  const computedClassName = className
-    ? `${className} ${computeBoxClassName(rest)}`
-    : computeBoxClassName(rest);
-  const computedProps = computeBoxProps(rest);
-
-  // Render the component
-  return createElement(
-    typeof as === 'string' ? as : 'div',
-    {
-      ...computedProps,
-      className: computedClassName,
-    },
-    children,
-  );
-}