reimplements dmicon

dist/components/DmIcon.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { BoxProps } from './Box';
+
+declare enum Direction {
+    NORTH = 1,
+    SOUTH = 2,
+    EAST = 4,
+    WEST = 8,
+    NORTHEAST = 5,
+    NORTHWEST = 9,
+    SOUTHEAST = 6,
+    SOUTHWEST = 10
+}
+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: any;
+}> & BoxProps;
+export declare function DmIcon(props: Props): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

dist/components/DmIcon.js

@@ -0,0 +1,21 @@
+import { jsx as u } from "react/jsx-runtime";
+import { Image as $ } from "./Image.js";
+function x(o) {
+  var r;
+  const {
+    className: l,
+    direction: t = 2,
+    fallback: n,
+    frame: c = 1,
+    icon_state: m,
+    icon: i,
+    movement: s = !1,
+    ...a
+  } = o, e = (r = Byond.iconRefMap) == null ? void 0 : r[i];
+  if (!e) return n;
+  const f = `${e}?state=${m}&dir=${t}&movement=${!!s}&frame=${c}`;
+  return /* @__PURE__ */ u($, { fixErrors: !0, src: f, ...a });
+}
+export {
+  x as DmIcon
+};

global.d.ts

@@ -55,6 +55,11 @@ type ByondType = {
    */
   command(command: string): void;
 
+  /**
+   * Icon reference map from BYOND
+   */
+  iconRefMap: Record<string, string>;
+
   /**
    * Loads a stylesheet into the document.
    */
@@ -72,13 +77,13 @@ type ByondType = {
    */
   parseJson(text: string): any;
 
+  sendMessage(message: TguiMessage): void;
+
   /**
    * Sends a message to `/datum/tgui_window` which hosts this window instance.
    */
   sendMessage(type: string, payload?: any): void;
 
-  sendMessage(message: TguiMessage): void;
-
   /**
    * If `true`, unhandled errors and common mistakes result in a blue screen
    * of death, which stops this window from handling incoming messages and
@@ -115,13 +120,6 @@ type ByondType = {
    */
   windowId: string;
 
-  /**
-   * Retrieves all properties of the BYOND skin element.
-   *
-   * Returns a promise with a key-value object containing all properties.
-   */
-  winget(id: string | null): Promise<object>;
-
   /**
    * Retrieves all properties of the BYOND skin element.
    *
@@ -145,9 +143,11 @@ type ByondType = {
   winget(id: string | null, propNames: string[]): Promise<object>;
 
   /**
-   * Assigns properties to BYOND skin elements in bulk.
+   * Retrieves all properties of the BYOND skin element.
+   *
+   * Returns a promise with a key-value object containing all properties.
    */
-  winset(props: object): void;
+  winget(id: string | null): Promise<object>;
 
   /**
    * Sets a property on the BYOND skin element to a certain value.
@@ -158,6 +158,11 @@ type ByondType = {
    * Assigns properties to the BYOND skin element.
    */
   winset(id: string | null, props: object): void;
+
+  /**
+   * Assigns properties to BYOND skin elements in bulk.
+   */
+  winset(props: object): void;
 };
 
 /**

lib/components/DmIcon.tsx

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+
+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: any;
+}> &
+  BoxProps;
+
+export function DmIcon(props: Props) {
+  const {
+    className,
+    direction = Direction.SOUTH,
+    fallback,
+    frame = 1,
+    icon_state,
+    icon,
+    movement = false,
+    ...rest
+  } = props;
+
+  const iconRef = Byond.iconRefMap?.[icon];
+
+  if (!iconRef) return fallback;
+
+  const query = `${iconRef}?state=${icon_state}&dir=${direction}&movement=${!!movement}&frame=${frame}`;
+
+  return <Image fixErrors src={query} {...rest} />;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "description": "TGUI core component library",
   "keywords": [
     "TGUI",