tgui-core 1.1.8 → 1.1.10

package/lib/components/Blink.tsx

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

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

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

@@ -0,0 +1,252 @@
+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,
+  );
+}