tgui-core 1.1.8 → 1.1.9

package/lib/common/keycodes.ts

@@ -0,0 +1,86 @@
+/**
+ * All possible browser keycodes, in one file.
+ *
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+export const KEY_BACKSPACE = 8;
+export const KEY_TAB = 9;
+export const KEY_ENTER = 13;
+export const KEY_SHIFT = 16;
+export const KEY_CTRL = 17;
+export const KEY_ALT = 18;
+export const KEY_PAUSE = 19;
+export const KEY_CAPSLOCK = 20;
+export const KEY_ESCAPE = 27;
+export const KEY_SPACE = 32;
+export const KEY_PAGEUP = 33;
+export const KEY_PAGEDOWN = 34;
+export const KEY_END = 35;
+export const KEY_HOME = 36;
+export const KEY_LEFT = 37;
+export const KEY_UP = 38;
+export const KEY_RIGHT = 39;
+export const KEY_DOWN = 40;
+export const KEY_INSERT = 45;
+export const KEY_DELETE = 46;
+export const KEY_0 = 48;
+export const KEY_1 = 49;
+export const KEY_2 = 50;
+export const KEY_3 = 51;
+export const KEY_4 = 52;
+export const KEY_5 = 53;
+export const KEY_6 = 54;
+export const KEY_7 = 55;
+export const KEY_8 = 56;
+export const KEY_9 = 57;
+export const KEY_A = 65;
+export const KEY_B = 66;
+export const KEY_C = 67;
+export const KEY_D = 68;
+export const KEY_E = 69;
+export const KEY_F = 70;
+export const KEY_G = 71;
+export const KEY_H = 72;
+export const KEY_I = 73;
+export const KEY_J = 74;
+export const KEY_K = 75;
+export const KEY_L = 76;
+export const KEY_M = 77;
+export const KEY_N = 78;
+export const KEY_O = 79;
+export const KEY_P = 80;
+export const KEY_Q = 81;
+export const KEY_R = 82;
+export const KEY_S = 83;
+export const KEY_T = 84;
+export const KEY_U = 85;
+export const KEY_V = 86;
+export const KEY_W = 87;
+export const KEY_X = 88;
+export const KEY_Y = 89;
+export const KEY_Z = 90;
+export const KEY_F1 = 112;
+export const KEY_F2 = 113;
+export const KEY_F3 = 114;
+export const KEY_F4 = 115;
+export const KEY_F5 = 116;
+export const KEY_F6 = 117;
+export const KEY_F7 = 118;
+export const KEY_F8 = 119;
+export const KEY_F9 = 120;
+export const KEY_F10 = 121;
+export const KEY_F11 = 122;
+export const KEY_F12 = 123;
+export const KEY_SEMICOLON = 186;
+export const KEY_EQUAL = 187;
+export const KEY_COMMA = 188;
+export const KEY_MINUS = 189;
+export const KEY_PERIOD = 190;
+export const KEY_SLASH = 191;
+export const KEY_LEFT_BRACKET = 219;
+export const KEY_BACKSLASH = 220;
+export const KEY_RIGHT_BRACKET = 221;
+export const KEY_QUOTE = 222;

package/{dist/common/keys.d.ts → lib/common/keys.ts}

@@ -20,27 +20,28 @@
  *
  *
  */
-export declare enum KEY {
-    Alt = "Alt",
-    Backspace = "Backspace",
-    Control = "Control",
-    Delete = "Delete",
-    Down = "ArrowDown",
-    End = "End",
-    Enter = "Enter",
-    Esc = "Esc",
-    Escape = "Escape",
-    Home = "Home",
-    Insert = "Insert",
-    Left = "ArrowLeft",
-    PageDown = "PageDown",
-    PageUp = "PageUp",
-    Right = "ArrowRight",
-    Shift = "Shift",
-    Space = " ",
-    Tab = "Tab",
-    Up = "ArrowUp"
+export enum KEY {
+  Alt = 'Alt',
+  Backspace = 'Backspace',
+  Control = 'Control',
+  Delete = 'Delete',
+  Down = 'ArrowDown',
+  End = 'End',
+  Enter = 'Enter',
+  Esc = 'Esc',
+  Escape = 'Escape',
+  Home = 'Home',
+  Insert = 'Insert',
+  Left = 'ArrowLeft',
+  PageDown = 'PageDown',
+  PageUp = 'PageUp',
+  Right = 'ArrowRight',
+  Shift = 'Shift',
+  Space = ' ',
+  Tab = 'Tab',
+  Up = 'ArrowUp',
 }
+
 /**
  * ### isEscape
  *
@@ -52,4 +53,6 @@ export declare enum KEY {
  * @param key - the key to check, typically from event.key
  * @returns true if key is Escape or Esc, false otherwise
  */
-export declare function isEscape(key: string): boolean;
+export function isEscape(key: string): boolean {
+  return key === KEY.Esc || key === KEY.Escape;
+}

package/lib/common/math.ts

@@ -0,0 +1,76 @@
+/**
+ * Limits a number to the range between 'min' and 'max'.
+ */
+export function clamp(value, min, max) {
+  return value < min ? min : value > max ? max : value;
+}
+
+/**
+ * Limits a number between 0 and 1.
+ */
+export function clamp01(value) {
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+
+/**
+ * Scales a number to fit into the range between min and max.
+ */
+export function scale(value, min, max) {
+  return (value - min) / (max - min);
+}
+
+/**
+ * Robust number rounding, similar to PHP's round() function.
+ *
+ * @url https://stackoverflow.com/questions/53450248/how-to-round-in-javascript-like-php-do/54721202#54721202
+ */
+export function round(num, dec) {
+  const num_sign = num >= 0 ? 1 : -1;
+  return parseFloat(
+    (
+      Math.round(num * Math.pow(10, dec) + num_sign * 0.0001) /
+      Math.pow(10, dec)
+    ).toFixed(dec),
+  );
+}
+
+/**
+ * Returns a string representing a number in fixed point notation.
+ */
+export function toFixed(value, fractionDigits = 0) {
+  return Number(value).toFixed(Math.max(fractionDigits, 0));
+}
+
+/**
+ * Checks whether a value is within the provided range.
+ *
+ * Range is an array of two numbers, for example: [0, 15].
+ */
+export function inRange(value, range) {
+  return range && value >= range[0] && value <= range[1];
+}
+
+/**
+ * Walks over the object with ranges, comparing value against every range,
+ * and returns the key of the first matching range.
+ *
+ * Range is an array of two numbers, for example: [0, 15].
+ */
+export function keyOfMatchingRange(value, ranges) {
+  for (const rangeName of Object.keys(ranges)) {
+    const range = ranges[rangeName];
+    if (inRange(value, range)) {
+      return rangeName;
+    }
+  }
+}
+
+/**
+ * Get number of digits following the decimal point in a number
+ */
+export function numberOfDecimalDigits(value) {
+  if (Math.floor(value) !== value) {
+    return value.toString().split('.')[1].length || 0;
+  }
+  return 0;
+}

package/lib/common/perf.ts

@@ -0,0 +1,72 @@
+/**
+ * Ghetto performance measurement tools.
+ *
+ * Uses NODE_ENV to remove itself from production builds.
+ *
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+const FPS = 60;
+const FRAME_DURATION = 1000 / FPS;
+
+// True if Performance API is supported
+const supportsPerf = !!window.performance?.now;
+// High precision markers
+const hpMarkersByName: Record<string, number> = {};
+// Low precision markers
+const lpMarkersByName: Record<string, number> = {};
+
+/**
+ * Marks a certain spot in the code for later measurements.
+ */
+function mark(name: string, timestamp?: number): void {
+  if (process.env.NODE_ENV !== 'production') {
+    if (supportsPerf && !timestamp) {
+      hpMarkersByName[name] = performance.now();
+    }
+    lpMarkersByName[name] = timestamp || Date.now();
+  }
+}
+
+/**
+ * Calculates and returns the difference between two markers as a string.
+ *
+ * Use logger.log() to print the measurement.
+ */
+function measure(markerNameA: string, markerNameB: string): string | undefined {
+  if (process.env.NODE_ENV === 'production') return;
+
+  let markerA = hpMarkersByName[markerNameA];
+  let markerB = hpMarkersByName[markerNameB];
+
+  if (!markerA || !markerB) {
+    markerA = lpMarkersByName[markerNameA];
+    markerB = lpMarkersByName[markerNameB];
+  }
+
+  const duration = Math.abs(markerB - markerA);
+
+  return formatDuration(duration);
+}
+
+/**
+ * Formats a duration in milliseconds and frames.
+ */
+function formatDuration(duration: number): string {
+  const durationInFrames = duration / FRAME_DURATION;
+
+  return (
+    duration.toFixed(duration < 10 ? 1 : 0) +
+    'ms ' +
+    '(' +
+    durationInFrames.toFixed(2) +
+    ' frames)'
+  );
+}
+
+export const perf = {
+  mark,
+  measure,
+};

package/lib/common/random.ts

@@ -0,0 +1,32 @@
+import { clamp } from './math';
+
+/**
+ * Returns random number between lowerBound exclusive and upperBound inclusive
+ */
+export function randomNumber(lowerBound: number, upperBound: number) {
+  return Math.random() * (upperBound - lowerBound) + lowerBound;
+}
+
+/**
+ * Returns random integer between lowerBound exclusive and upperBound inclusive
+ */
+export function randomInteger(lowerBound: number, upperBound: number) {
+  lowerBound = Math.ceil(lowerBound);
+  upperBound = Math.floor(upperBound);
+  return Math.floor(Math.random() * (upperBound - lowerBound) + lowerBound);
+}
+
+/**
+ * Returns random array element
+ */
+export const randomPick = <T>(array: T[]) => {
+  return array[Math.floor(Math.random() * array.length)];
+};
+
+/**
+ * Return 1 with probability P percent; otherwise 0
+ */
+export function randomProb(probability: number) {
+  const normalized = clamp(probability, 0, 100) / 100;
+  return Math.random() <= normalized;
+}

package/lib/common/react.ts

@@ -0,0 +1,59 @@
+/**
+ * Helper for conditionally adding/removing classes in React
+ */
+export function classes(classNames: (string | BooleanLike)[]) {
+  let className = '';
+  for (let i = 0; i < classNames.length; i++) {
+    const part = classNames[i];
+    if (typeof part === 'string') {
+      className += part + ' ';
+    }
+  }
+  return className;
+}
+
+/**
+ * Normalizes children prop, so that it is always an array of VDom
+ * elements.
+ */
+export function normalizeChildren<T>(children: T | T[]) {
+  if (Array.isArray(children)) {
+    return children.flat().filter((value) => value) as T[];
+  }
+  if (typeof children === 'object') {
+    return [children];
+  }
+  return [];
+}
+
+/**
+ * Shallowly checks if two objects are different.
+ * Credit: https://github.com/developit/preact-compat
+ */
+export function shallowDiffers(a: object, b: object) {
+  let i;
+  for (i in a) {
+    if (!(i in b)) {
+      return true;
+    }
+  }
+  for (i in b) {
+    if (a[i] !== b[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * A common case in tgui, when you pass a value conditionally, these are
+ * the types that can fall through the condition.
+ */
+export type BooleanLike = number | boolean | null | undefined;
+
+/**
+ * A helper to determine whether the object is renderable by React.
+ */
+export function canRender(value: unknown) {
+  return value !== undefined && value !== null && typeof value !== 'boolean';
+}

package/lib/common/redux.ts

@@ -0,0 +1,187 @@
+export type Reducer<State = any, ActionType extends Action = AnyAction> = (
+  state: State | undefined,
+  action: ActionType,
+) => State;
+
+export type Store<State = any, ActionType extends Action = AnyAction> = {
+  dispatch: Dispatch<ActionType>;
+  getState: () => State;
+  subscribe: (listener: () => void) => void;
+};
+
+type MiddlewareAPI<State = any, ActionType extends Action = AnyAction> = {
+  dispatch: Dispatch<ActionType>;
+  getState: () => State;
+};
+
+export type Middleware = <State = any, ActionType extends Action = AnyAction>(
+  storeApi: MiddlewareAPI<State, ActionType>,
+) => (next: Dispatch<ActionType>) => Dispatch<ActionType>;
+
+export type Action<TType = any> = {
+  type: TType;
+};
+
+export type AnyAction = Action & {
+  [extraProps: string]: any;
+};
+
+export type Dispatch<ActionType extends Action = AnyAction> = (
+  action: ActionType,
+) => void;
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type StoreEnhancer = (createStoreFunction: Function) => Function;
+
+type PreparedAction = {
+  meta?: any;
+  payload?: any;
+};
+
+/**
+ * Creates a Redux store.
+ */
+export function createStore<State, ActionType extends Action = AnyAction>(
+  reducer: Reducer<State, ActionType>,
+  enhancer?: StoreEnhancer,
+): Store<State, ActionType> {
+  // Apply a store enhancer (applyMiddleware is one of them).
+  if (enhancer) {
+    return enhancer(createStore)(reducer);
+  }
+
+  let currentState: State;
+  const listeners: Array<() => void> = [];
+
+  const getState = (): State => currentState;
+
+  function subscribe(listener: () => void): void {
+    listeners.push(listener);
+  }
+
+  function dispatch(action: ActionType): void {
+    currentState = reducer(currentState, action);
+    for (let i = 0; i < listeners.length; i++) {
+      listeners[i]();
+    }
+  }
+
+  // This creates the initial store by causing each reducer to be called
+  // with an undefined state
+  dispatch({ type: '@@INIT' } as ActionType);
+
+  return {
+    dispatch,
+    subscribe,
+    getState,
+  };
+}
+
+/**
+ * Creates a store enhancer which applies middleware to all dispatched
+ * actions.
+ */
+export function applyMiddleware(...middlewares: Middleware[]): StoreEnhancer {
+  return (
+    createStoreFunction: (reducer: Reducer, enhancer?: StoreEnhancer) => Store,
+  ) => {
+    return (reducer, ...args): Store => {
+      const store = createStoreFunction(reducer, ...args);
+
+      let dispatch: Dispatch = () => {
+        throw new Error(
+          'Dispatching while constructing your middleware is not allowed.',
+        );
+      };
+
+      const storeApi: MiddlewareAPI = {
+        getState: store.getState,
+        dispatch: (action, ...args) => dispatch(action, ...args),
+      };
+
+      const chain = middlewares.map((middleware) => middleware(storeApi));
+      dispatch = chain.reduceRight(
+        (next, middleware) => middleware(next),
+        store.dispatch,
+      );
+
+      return {
+        ...store,
+        dispatch,
+      };
+    };
+  };
+}
+
+/**
+ * Combines reducers by running them in their own object namespaces as
+ * defined in reducersObj paramter.
+ *
+ * Main difference from redux/combineReducers is that it preserves keys
+ * in the state that are not present in the reducers object. This function
+ * is also more flexible than the redux counterpart.
+ */
+export function combineReducers(reducersObj: Record<string, Reducer>): Reducer {
+  const keys = Object.keys(reducersObj);
+
+  return (prevState = {}, action) => {
+    const nextState = { ...prevState };
+    let hasChanged = false;
+
+    for (const key of keys) {
+      const reducer = reducersObj[key];
+      const prevDomainState = prevState[key];
+      const nextDomainState = reducer(prevDomainState, action);
+
+      if (prevDomainState !== nextDomainState) {
+        hasChanged = true;
+        nextState[key] = nextDomainState;
+      }
+    }
+
+    return hasChanged ? nextState : prevState;
+  };
+}
+
+/**
+ * A utility function to create an action creator for the given action
+ * type string. The action creator accepts a single argument, which will
+ * be included in the action object as a field called payload. The action
+ * creator function will also have its toString() overriden so that it
+ * returns the action type, allowing it to be used in reducer logic that
+ * is looking for that action type.
+ *
+ * @param {string} type The action type to use for created actions.
+ * @param {any} prepare (optional) a method that takes any number of arguments
+ * and returns { payload } or { payload, meta }. If this is given, the
+ * resulting action creator will pass it's arguments to this method to
+ * calculate payload & meta.
+ *
+ * @public
+ */
+export function createAction<TAction extends string>(
+  type: TAction,
+  prepare?: (...args: any[]) => PreparedAction,
+) {
+  function actionCreator(...args: any[]) {
+    let action: Action<TAction> & PreparedAction = { type };
+
+    if (prepare) {
+      const prepared = prepare(...args);
+      if (!prepared) {
+        throw new Error('prepare function did not return an object');
+      }
+      action = { ...action, ...prepared };
+    } else {
+      action.payload = args[0];
+    }
+
+    return action;
+  }
+
+  actionCreator.toString = () => type;
+  actionCreator.type = type;
+  actionCreator.match = (action) => action.type === type;
+
+  return actionCreator;
+}