tgui-core 1.0.0

package/src/components/ByondUi.jsx

@@ -0,0 +1,121 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { shallowDiffers } from '../common/react';
+import { debounce } from '../common/timer';
+import { Component, createRef } from 'react';
+
+import { computeBoxProps } from './Box';
+
+const logger = createLogger('ByondUi');
+
+// Stack of currently allocated BYOND UI element ids.
+const byondUiStack = [];
+
+const createByondUiElement = (elementId) => {
+  // Reserve an index in the stack
+  const index = byondUiStack.length;
+  byondUiStack.push(null);
+  // Get a unique id
+  const id = elementId || 'byondui_' + index;
+  // Return a control structure
+  return {
+    render: (params) => {
+      logger.log(`rendering '${id}'`);
+      byondUiStack[index] = id;
+      Byond.winset(id, params);
+    },
+    unmount: () => {
+      logger.log(`unmounting '${id}'`);
+      byondUiStack[index] = null;
+      Byond.winset(id, {
+        parent: '',
+      });
+    },
+  };
+};
+
+window.addEventListener('beforeunload', () => {
+  // Cleanly unmount all visible UI elements
+  for (let index = 0; index < byondUiStack.length; index++) {
+    const id = byondUiStack[index];
+    if (typeof id === 'string') {
+      logger.log(`unmounting '${id}' (beforeunload)`);
+      byondUiStack[index] = null;
+      Byond.winset(id, {
+        parent: '',
+      });
+    }
+  }
+});
+
+/**
+ * Get the bounding box of the DOM element in display-pixels.
+ */
+const getBoundingBox = (element) => {
+  const pixelRatio = window.devicePixelRatio ?? 1;
+  const rect = element.getBoundingClientRect();
+
+  return {
+    pos: [rect.left * pixelRatio, rect.top * pixelRatio],
+    size: [
+      (rect.right - rect.left) * pixelRatio,
+      (rect.bottom - rect.top) * pixelRatio,
+    ],
+  };
+};
+
+export class ByondUi extends Component {
+  constructor(props) {
+    super(props);
+    this.containerRef = createRef();
+    this.byondUiElement = createByondUiElement(props.params?.id);
+    this.handleResize = debounce(() => {
+      this.forceUpdate();
+    }, 100);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { params: prevParams = {}, ...prevRest } = this.props;
+    const { params: nextParams = {}, ...nextRest } = nextProps;
+    return (
+      shallowDiffers(prevParams, nextParams) ||
+      shallowDiffers(prevRest, nextRest)
+    );
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+    this.componentDidUpdate();
+    this.handleResize();
+  }
+
+  componentDidUpdate() {
+    const { params = {} } = this.props;
+    const box = getBoundingBox(this.containerRef.current);
+    this.byondUiElement.render({
+      parent: Byond.windowId,
+      ...params,
+      pos: box.pos[0] + ',' + box.pos[1],
+      size: box.size[0] + 'x' + box.size[1],
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    this.byondUiElement.unmount();
+  }
+
+  render() {
+    const { params, ...rest } = this.props;
+    return (
+      <div ref={this.containerRef} {...computeBoxProps(rest)}>
+        {/* Filler */}
+        <div style={{ minHeight: '22px' }} />
+      </div>
+    );
+  }
+}

package/src/components/Chart.tsx

@@ -0,0 +1,160 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { map, zip } from '../common/collections';
+import { Component, createRef, RefObject } from 'react';
+
+import { Box, BoxProps } from './Box';
+
+type Props = {
+  data: number[][];
+} & Partial<{
+  fillColor: string;
+  rangeX: [number, number];
+  rangeY: [number, number];
+  strokeColor: string;
+  strokeWidth: number;
+}> &
+  BoxProps;
+
+type State = {
+  viewBox: [number, number];
+};
+
+type Point = number[];
+type Range = [number, number];
+
+const normalizeData = (
+  data: Point[],
+  scale: number[],
+  rangeX?: Range,
+  rangeY?: Range
+) => {
+  if (data.length === 0) {
+    return [];
+  }
+
+  const min = map(zip(...data), (p) => Math.min(...p));
+  const max = map(zip(...data), (p) => Math.max(...p));
+
+  if (rangeX !== undefined) {
+    min[0] = rangeX[0];
+    max[0] = rangeX[1];
+  }
+
+  if (rangeY !== undefined) {
+    min[1] = rangeY[0];
+    max[1] = rangeY[1];
+  }
+
+  const normalized = map(data, (point) =>
+    map(
+      zip(point, min, max, scale),
+      ([value, min, max, scale]) => ((value - min) / (max - min)) * scale
+    )
+  );
+
+  return normalized;
+};
+
+const dataToPolylinePoints = (data) => {
+  let points = '';
+  for (let i = 0; i < data.length; i++) {
+    const point = data[i];
+    points += point[0] + ',' + point[1] + ' ';
+  }
+  return points;
+};
+
+class LineChart extends Component<Props> {
+  ref: RefObject<HTMLDivElement>;
+  state: State;
+
+  constructor(props: Props) {
+    super(props);
+    this.ref = createRef();
+    this.state = {
+      // Initial guess
+      viewBox: [600, 200],
+    };
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = () => {
+    const element = this.ref.current;
+    if (!element) {
+      return;
+    }
+    this.setState({
+      viewBox: [element.offsetWidth, element.offsetHeight],
+    });
+  };
+
+  render() {
+    const {
+      data = [],
+      rangeX,
+      rangeY,
+      fillColor = 'none',
+      strokeColor = '#ffffff',
+      strokeWidth = 2,
+      ...rest
+    } = this.props;
+    const { viewBox } = this.state;
+    const normalized = normalizeData(data, viewBox, rangeX, rangeY);
+    // Push data outside viewBox and form a fillable polygon
+    if (normalized.length > 0) {
+      const first = normalized[0];
+      const last = normalized[normalized.length - 1];
+      normalized.push([viewBox[0] + strokeWidth, last[1]]);
+      normalized.push([viewBox[0] + strokeWidth, -strokeWidth]);
+      normalized.push([-strokeWidth, -strokeWidth]);
+      normalized.push([-strokeWidth, first[1]]);
+    }
+    const points = dataToPolylinePoints(normalized);
+    const divProps = { ...rest, className: '', ref: this.ref };
+
+    return (
+      <Box position="relative" {...rest}>
+        <Box {...divProps}>
+          <svg
+            viewBox={`0 0 ${viewBox[0]} ${viewBox[1]}`}
+            preserveAspectRatio="none"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              overflow: 'hidden',
+            }}
+          >
+            <polyline
+              transform={`scale(1, -1) translate(0, -${viewBox[1]})`}
+              fill={fillColor}
+              stroke={strokeColor}
+              strokeWidth={strokeWidth}
+              points={points}
+            />
+          </svg>
+        </Box>
+      </Box>
+    );
+  }
+}
+
+export const Chart = {
+  Line: LineChart,
+};

package/src/components/Collapsible.tsx

@@ -0,0 +1,45 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { ReactNode, useState } from 'react';
+
+import { Box, BoxProps } from './Box';
+import { Button } from './Button';
+
+type Props = Partial<{
+  buttons: ReactNode;
+  open: boolean;
+  title: ReactNode;
+  icon: string;
+}> &
+  BoxProps;
+
+export function Collapsible(props: Props) {
+  const { children, color, title, buttons, icon, ...rest } = props;
+  const [open, setOpen] = useState(props.open);
+
+  return (
+    <Box mb={1}>
+      <div className="Table">
+        <div className="Table__cell">
+          <Button
+            fluid
+            color={color}
+            icon={icon ? icon : open ? 'chevron-down' : 'chevron-right'}
+            onClick={() => setOpen(!open)}
+            {...rest}
+          >
+            {title}
+          </Button>
+        </div>
+        {buttons && (
+          <div className="Table__cell Table__cell--collapsing">{buttons}</div>
+        )}
+      </div>
+      {open && <Box mt={1}>{children}</Box>}
+    </Box>
+  );
+}

package/src/components/ColorBox.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+import { ReactNode } from 'react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  content?: ReactNode;
+} & BoxProps;
+
+export function ColorBox(props: Props) {
+  const { content, children, className, ...rest } = props;
+
+  rest.color = content ? null : 'default';
+  rest.backgroundColor = props.color || 'default';
+
+  return (
+    <div
+      className={classes(['ColorBox', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}
+    >
+      {content || '.'}
+    </div>
+  );
+}

package/src/components/Dialog.tsx

@@ -0,0 +1,85 @@
+/**
+ * @file
+ * @copyright 2022 raffclar
+ * @license MIT
+ */
+import { Box } from './Box';
+import { Button } from './Button';
+
+type DialogProps = {
+  title: any;
+  onClose: () => void;
+  children: any;
+  width?: string;
+  height?: string;
+};
+
+export const Dialog = (props: DialogProps) => {
+  const { title, onClose, children, width, height } = props;
+  return (
+    <div className="Dialog">
+      <Box className="Dialog__content" width={width || '370px'} height={height}>
+        <div className="Dialog__header">
+          <div className="Dialog__title">{title}</div>
+          <Box mr={2}>
+            <Button
+              mr="-3px"
+              width="26px"
+              lineHeight="22px"
+              textAlign="center"
+              color="transparent"
+              icon="window-close-o"
+              tooltip="Close"
+              tooltipPosition="bottom-start"
+              onClick={onClose}
+            />
+          </Box>
+        </div>
+        {children}
+      </Box>
+    </div>
+  );
+};
+
+type DialogButtonProps = {
+  onClick: () => void;
+  children: any;
+};
+
+const DialogButton = (props: DialogButtonProps) => {
+  const { onClick, children } = props;
+  return (
+    <Button
+      onClick={onClick}
+      className="Dialog__button"
+      verticalAlignContent="middle"
+    >
+      {children}
+    </Button>
+  );
+};
+
+Dialog.Button = DialogButton;
+
+type UnsavedChangesDialogProps = {
+  documentName: string;
+  onSave: () => void;
+  onDiscard: () => void;
+  onClose: () => void;
+};
+
+export const UnsavedChangesDialog = (props: UnsavedChangesDialogProps) => {
+  const { documentName, onSave, onDiscard, onClose } = props;
+  return (
+    <Dialog title="Notepad" onClose={onClose}>
+      <div className="Dialog__body">
+        Do you want to save changes to {documentName}?
+      </div>
+      <div className="Dialog__footer">
+        <DialogButton onClick={onSave}>Save</DialogButton>
+        <DialogButton onClick={onDiscard}>Don&apos;t Save</DialogButton>
+        <DialogButton onClick={onClose}>Cancel</DialogButton>
+      </div>
+    </Dialog>
+  );
+};

package/src/components/Dimmer.tsx

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

package/src/components/Divider.tsx

@@ -0,0 +1,26 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+type Props = Partial<{
+  hidden: boolean;
+  vertical: boolean;
+}>;
+
+export function Divider(props: Props) {
+  const { hidden, vertical } = props;
+
+  return (
+    <div
+      className={classes([
+        'Divider',
+        hidden && 'Divider--hidden',
+        vertical ? 'Divider--vertical' : 'Divider--horizontal',
+      ])}
+    />
+  );
+}

package/src/components/DmIcon.tsx

@@ -0,0 +1,72 @@
+import { ReactNode, useEffect, useState } from 'react';
+
+import { resolveAsset } from '../assets';
+import { fetchRetry } from '../http';
+import { BoxProps } from './Box';
+import { Image } from './Image';
+
+enum Direction {
+  NORTH = 1,
+  SOUTH = 2,
+  EAST = 4,
+  WEST = 8,
+  NORTHEAST = NORTH | EAST,
+  NORTHWEST = NORTH | WEST,
+  SOUTHEAST = SOUTH | EAST,
+  SOUTHWEST = SOUTH | WEST,
+}
+
+type Props = {
+  /** Required: The path of the icon */
+  icon: string;
+  /** Required: The state of the icon */
+  icon_state: string;
+} & Partial<{
+  /** Facing direction. See direction enum. Default is South */
+  direction: Direction;
+  /** Fallback icon. */
+  fallback: ReactNode;
+  /** Frame number. Default is 1 */
+  frame: number;
+  /** Movement state. Default is false */
+  movement: boolean;
+}> &
+  BoxProps;
+
+let refMap: Record<string, string> | undefined;
+
+export function DmIcon(props: Props) {
+  const {
+    className,
+    direction = Direction.SOUTH,
+    fallback,
+    frame = 1,
+    icon_state,
+    icon,
+    movement = false,
+    ...rest
+  } = props;
+
+  const [iconRef, setIconRef] = useState('');
+
+  const query = `${iconRef}?state=${icon_state}&dir=${direction}&movement=${movement}&frame=${frame}`;
+
+  useEffect(() => {
+    async function fetchRefMap() {
+      const response = await fetchRetry(resolveAsset('icon_ref_map.json'));
+      const data = await response.json();
+      refMap = data;
+      setIconRef(data[icon]);
+    }
+
+    if (!refMap) {
+      fetchRefMap();
+    } else {
+      setIconRef(refMap[icon]);
+    }
+  }, []);
+
+  if (!iconRef) return fallback;
+
+  return <Image fixErrors src={query} {...rest} />;
+}