tgui-core 1.0.2 → 1.0.4

package/src/hotkeys.ts

@@ -1,212 +1,212 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import * as keycodes from './common/keycodes';
-
-import { globalEvents, KeyEvent } from './events';
-
-// BYOND macros, in `key: command` format.
-const byondMacros: Record<string, string> = {};
-
-// Default set of acquired keys, which will not be sent to BYOND.
-const hotKeysAcquired = [
-  keycodes.KEY_ESCAPE,
-  keycodes.KEY_ENTER,
-  keycodes.KEY_SPACE,
-  keycodes.KEY_TAB,
-  keycodes.KEY_CTRL,
-  keycodes.KEY_SHIFT,
-  keycodes.KEY_UP,
-  keycodes.KEY_DOWN,
-  keycodes.KEY_LEFT,
-  keycodes.KEY_RIGHT,
-  keycodes.KEY_F5,
-];
-
-// State of passed-through keys.
-const keyState: Record<string, boolean> = {};
-
-// Custom listeners for key events
-const keyListeners: ((key: KeyEvent) => void)[] = [];
-
-/**
- * Converts a browser keycode to BYOND keycode.
- */
-const keyCodeToByond = (keyCode: number) => {
-  if (keyCode === 16) return 'Shift';
-  if (keyCode === 17) return 'Ctrl';
-  if (keyCode === 18) return 'Alt';
-  if (keyCode === 33) return 'Northeast';
-  if (keyCode === 34) return 'Southeast';
-  if (keyCode === 35) return 'Southwest';
-  if (keyCode === 36) return 'Northwest';
-  if (keyCode === 37) return 'West';
-  if (keyCode === 38) return 'North';
-  if (keyCode === 39) return 'East';
-  if (keyCode === 40) return 'South';
-  if (keyCode === 45) return 'Insert';
-  if (keyCode === 46) return 'Delete';
-
-  if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90)) {
-    return String.fromCharCode(keyCode);
-  }
-  if (keyCode >= 96 && keyCode <= 105) {
-    return 'Numpad' + (keyCode - 96);
-  }
-  if (keyCode >= 112 && keyCode <= 123) {
-    return 'F' + (keyCode - 111);
-  }
-  if (keyCode === 188) return ',';
-  if (keyCode === 189) return '-';
-  if (keyCode === 190) return '.';
-};
-
-/**
- * Keyboard passthrough logic. This allows you to keep doing things
- * in game while the browser window is focused.
- */
-const handlePassthrough = (key: KeyEvent) => {
-  const keyString = String(key);
-  // In addition to F5, support reloading with Ctrl+R and Ctrl+F5
-  if (keyString === 'Ctrl+F5' || keyString === 'Ctrl+R') {
-    location.reload();
-    return;
-  }
-  // Prevent passthrough on Ctrl+F
-  if (keyString === 'Ctrl+F') {
-    return;
-  }
-  // NOTE: Alt modifier is pretty bad and sticky in IE11.
-
-  if (
-    key.event.defaultPrevented ||
-    key.isModifierKey() ||
-    hotKeysAcquired.includes(key.code)
-  ) {
-    return;
-  }
-  const byondKeyCode = keyCodeToByond(key.code);
-  if (!byondKeyCode) {
-    return;
-  }
-  // Macro
-  const macro = byondMacros[byondKeyCode];
-  if (macro) {
-    return Byond.command(macro);
-  }
-  // KeyDown
-  if (key.isDown() && !keyState[byondKeyCode]) {
-    keyState[byondKeyCode] = true;
-    const command = `KeyDown "${byondKeyCode}"`;
-    return Byond.command(command);
-  }
-  // KeyUp
-  if (key.isUp() && keyState[byondKeyCode]) {
-    keyState[byondKeyCode] = false;
-    const command = `KeyUp "${byondKeyCode}"`;
-    return Byond.command(command);
-  }
-};
-
-/**
- * Acquires a lock on the hotkey, which prevents it from being
- * passed through to BYOND.
- */
-export const acquireHotKey = (keyCode: number) => {
-  hotKeysAcquired.push(keyCode);
-};
-
-/**
- * Makes the hotkey available to BYOND again.
- */
-export const releaseHotKey = (keyCode: number) => {
-  const index = hotKeysAcquired.indexOf(keyCode);
-  if (index >= 0) {
-    hotKeysAcquired.splice(index, 1);
-  }
-};
-
-export const releaseHeldKeys = () => {
-  for (let byondKeyCode of Object.keys(keyState)) {
-    if (keyState[byondKeyCode]) {
-      keyState[byondKeyCode] = false;
-      Byond.command(`KeyUp "${byondKeyCode}"`);
-    }
-  }
-};
-
-type ByondSkinMacro = {
-  command: string;
-  name: string;
-};
-
-export const setupHotKeys = () => {
-  // Read macros
-  Byond.winget('default.*').then((data: Record<string, string>) => {
-    // Group each macro by ref
-    const groupedByRef: Record<string, ByondSkinMacro> = {};
-    for (let key of Object.keys(data)) {
-      const keyPath = key.split('.');
-      const ref = keyPath[1];
-      const prop = keyPath[2];
-      if (ref && prop) {
-        // This piece of code imperatively adds each property to a
-        // ByondSkinMacro object in the order we meet it, which is hard
-        // to express safely in typescript.
-        if (!groupedByRef[ref]) {
-          groupedByRef[ref] = {} as any;
-        }
-        groupedByRef[ref][prop] = data[key];
-      }
-    }
-    // Insert macros
-    const escapedQuotRegex = /\\"/g;
-
-    const unescape = (str: string) =>
-      str.substring(1, str.length - 1).replace(escapedQuotRegex, '"');
-    for (let ref of Object.keys(groupedByRef)) {
-      const macro = groupedByRef[ref];
-      const byondKeyName = unescape(macro.name);
-      byondMacros[byondKeyName] = unescape(macro.command);
-    }
-  });
-  // Setup event handlers
-  globalEvents.on('window-blur', () => {
-    releaseHeldKeys();
-  });
-  globalEvents.on('key', (key: KeyEvent) => {
-    for (const keyListener of keyListeners) {
-      keyListener(key);
-    }
-    handlePassthrough(key);
-  });
-};
-
-/**
- * Registers for any key events, such as key down or key up.
- * This should be preferred over directly connecting to keydown/keyup
- * as it lets tgui prevent the key from reaching BYOND.
- *
- * If using in a component, prefer KeyListener, which automatically handles
- * stopping listening when unmounting.
- *
- * @param callback The function to call whenever a key event occurs
- * @returns A callback to stop listening
- */
-export const listenForKeyEvents = (callback: (key: KeyEvent) => void) => {
-  keyListeners.push(callback);
-
-  let removed = false;
-
-  return () => {
-    if (removed) {
-      return;
-    }
-
-    removed = true;
-    keyListeners.splice(keyListeners.indexOf(callback), 1);
-  };
-};
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import * as keycodes from '../common/keycodes';
+
+import { globalEvents, KeyEvent } from './events';
+
+// BYOND macros, in `key: command` format.
+const byondMacros: Record<string, string> = {};
+
+// Default set of acquired keys, which will not be sent to BYOND.
+const hotKeysAcquired = [
+  keycodes.KEY_ESCAPE,
+  keycodes.KEY_ENTER,
+  keycodes.KEY_SPACE,
+  keycodes.KEY_TAB,
+  keycodes.KEY_CTRL,
+  keycodes.KEY_SHIFT,
+  keycodes.KEY_UP,
+  keycodes.KEY_DOWN,
+  keycodes.KEY_LEFT,
+  keycodes.KEY_RIGHT,
+  keycodes.KEY_F5,
+];
+
+// State of passed-through keys.
+const keyState: Record<string, boolean> = {};
+
+// Custom listeners for key events
+const keyListeners: ((key: KeyEvent) => void)[] = [];
+
+/**
+ * Converts a browser keycode to BYOND keycode.
+ */
+const keyCodeToByond = (keyCode: number) => {
+  if (keyCode === 16) return 'Shift';
+  if (keyCode === 17) return 'Ctrl';
+  if (keyCode === 18) return 'Alt';
+  if (keyCode === 33) return 'Northeast';
+  if (keyCode === 34) return 'Southeast';
+  if (keyCode === 35) return 'Southwest';
+  if (keyCode === 36) return 'Northwest';
+  if (keyCode === 37) return 'West';
+  if (keyCode === 38) return 'North';
+  if (keyCode === 39) return 'East';
+  if (keyCode === 40) return 'South';
+  if (keyCode === 45) return 'Insert';
+  if (keyCode === 46) return 'Delete';
+
+  if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90)) {
+    return String.fromCharCode(keyCode);
+  }
+  if (keyCode >= 96 && keyCode <= 105) {
+    return 'Numpad' + (keyCode - 96);
+  }
+  if (keyCode >= 112 && keyCode <= 123) {
+    return 'F' + (keyCode - 111);
+  }
+  if (keyCode === 188) return ',';
+  if (keyCode === 189) return '-';
+  if (keyCode === 190) return '.';
+};
+
+/**
+ * Keyboard passthrough logic. This allows you to keep doing things
+ * in game while the browser window is focused.
+ */
+const handlePassthrough = (key: KeyEvent) => {
+  const keyString = String(key);
+  // In addition to F5, support reloading with Ctrl+R and Ctrl+F5
+  if (keyString === 'Ctrl+F5' || keyString === 'Ctrl+R') {
+    location.reload();
+    return;
+  }
+  // Prevent passthrough on Ctrl+F
+  if (keyString === 'Ctrl+F') {
+    return;
+  }
+  // NOTE: Alt modifier is pretty bad and sticky in IE11.
+
+  if (
+    key.event.defaultPrevented ||
+    key.isModifierKey() ||
+    hotKeysAcquired.includes(key.code)
+  ) {
+    return;
+  }
+  const byondKeyCode = keyCodeToByond(key.code);
+  if (!byondKeyCode) {
+    return;
+  }
+  // Macro
+  const macro = byondMacros[byondKeyCode];
+  if (macro) {
+    return Byond.command(macro);
+  }
+  // KeyDown
+  if (key.isDown() && !keyState[byondKeyCode]) {
+    keyState[byondKeyCode] = true;
+    const command = `KeyDown "${byondKeyCode}"`;
+    return Byond.command(command);
+  }
+  // KeyUp
+  if (key.isUp() && keyState[byondKeyCode]) {
+    keyState[byondKeyCode] = false;
+    const command = `KeyUp "${byondKeyCode}"`;
+    return Byond.command(command);
+  }
+};
+
+/**
+ * Acquires a lock on the hotkey, which prevents it from being
+ * passed through to BYOND.
+ */
+export const acquireHotKey = (keyCode: number) => {
+  hotKeysAcquired.push(keyCode);
+};
+
+/**
+ * Makes the hotkey available to BYOND again.
+ */
+export const releaseHotKey = (keyCode: number) => {
+  const index = hotKeysAcquired.indexOf(keyCode);
+  if (index >= 0) {
+    hotKeysAcquired.splice(index, 1);
+  }
+};
+
+export const releaseHeldKeys = () => {
+  for (let byondKeyCode of Object.keys(keyState)) {
+    if (keyState[byondKeyCode]) {
+      keyState[byondKeyCode] = false;
+      Byond.command(`KeyUp "${byondKeyCode}"`);
+    }
+  }
+};
+
+type ByondSkinMacro = {
+  command: string;
+  name: string;
+};
+
+export const setupHotKeys = () => {
+  // Read macros
+  Byond.winget('default.*').then((data: Record<string, string>) => {
+    // Group each macro by ref
+    const groupedByRef: Record<string, ByondSkinMacro> = {};
+    for (let key of Object.keys(data)) {
+      const keyPath = key.split('.');
+      const ref = keyPath[1];
+      const prop = keyPath[2];
+      if (ref && prop) {
+        // This piece of code imperatively adds each property to a
+        // ByondSkinMacro object in the order we meet it, which is hard
+        // to express safely in typescript.
+        if (!groupedByRef[ref]) {
+          groupedByRef[ref] = {} as any;
+        }
+        groupedByRef[ref][prop] = data[key];
+      }
+    }
+    // Insert macros
+    const escapedQuotRegex = /\\"/g;
+
+    const unescape = (str: string) =>
+      str.substring(1, str.length - 1).replace(escapedQuotRegex, '"');
+    for (let ref of Object.keys(groupedByRef)) {
+      const macro = groupedByRef[ref];
+      const byondKeyName = unescape(macro.name);
+      byondMacros[byondKeyName] = unescape(macro.command);
+    }
+  });
+  // Setup event handlers
+  globalEvents.on('window-blur', () => {
+    releaseHeldKeys();
+  });
+  globalEvents.on('key', (key: KeyEvent) => {
+    for (const keyListener of keyListeners) {
+      keyListener(key);
+    }
+    handlePassthrough(key);
+  });
+};
+
+/**
+ * Registers for any key events, such as key down or key up.
+ * This should be preferred over directly connecting to keydown/keyup
+ * as it lets tgui prevent the key from reaching BYOND.
+ *
+ * If using in a component, prefer KeyListener, which automatically handles
+ * stopping listening when unmounting.
+ *
+ * @param callback The function to call whenever a key event occurs
+ * @returns A callback to stop listening
+ */
+export const listenForKeyEvents = (callback: (key: KeyEvent) => void) => {
+  keyListeners.push(callback);
+
+  let removed = false;
+
+  return () => {
+    if (removed) {
+      return;
+    }
+
+    removed = true;
+    keyListeners.splice(keyListeners.indexOf(callback), 1);
+  };
+};

package/src/renderer.ts

@@ -1,50 +1,50 @@
-import { perf } from './common/perf';
-import { ReactNode } from 'react';
-import { createRoot, Root } from 'react-dom/client';
-
-let reactRoot: Root;
-let initialRender: string | boolean = true;
-let suspended = false;
-
-// These functions are used purely for profiling.
-export const resumeRenderer = () => {
-  initialRender = initialRender || 'resumed';
-  suspended = false;
-};
-
-export const suspendRenderer = () => {
-  suspended = true;
-};
-
-type CreateRenderer = <T extends unknown[] = [unknown]>(
-  getVNode?: (...args: T) => ReactNode
-) => (...args: T) => void;
-
-enum Render {
-  Start = 'render/start',
-  Finish = 'render/finish',
-}
-
-// prettier-ignore
-export const createRenderer: CreateRenderer = (getVNode) => (...args) => {
-  perf.mark(Render.Start);
-  // Start rendering
-  if (!reactRoot) {
-    const element = document.getElementById('react-root');
-    reactRoot = createRoot(element!);
-  }
-  if (getVNode) {
-    reactRoot.render(getVNode(...args));
-  }
-  else {
-    reactRoot.render(args[0] as any);
-  }
-  perf.mark(Render.Finish);
-  if (suspended) {
-    return;
-  }
- 
-  if (initialRender) {
-    initialRender = false;
-  }
-};
+import { perf } from '../common/perf';
+import { ReactNode } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+
+let reactRoot: Root;
+let initialRender: string | boolean = true;
+let suspended = false;
+
+// These functions are used purely for profiling.
+export const resumeRenderer = () => {
+  initialRender = initialRender || 'resumed';
+  suspended = false;
+};
+
+export const suspendRenderer = () => {
+  suspended = true;
+};
+
+type CreateRenderer = <T extends unknown[] = [unknown]>(
+  getVNode?: (...args: T) => ReactNode
+) => (...args: T) => void;
+
+enum Render {
+  Start = 'render/start',
+  Finish = 'render/finish',
+}
+
+export const createRenderer: CreateRenderer =
+  (getVNode) =>
+  (...args) => {
+    perf.mark(Render.Start);
+    // Start rendering
+    if (!reactRoot) {
+      const element = document.getElementById('react-root');
+      reactRoot = createRoot(element!);
+    }
+    if (getVNode) {
+      reactRoot.render(getVNode(...args));
+    } else {
+      reactRoot.render(args[0] as any);
+    }
+    perf.mark(Render.Finish);
+    if (suspended) {
+      return;
+    }
+
+    if (initialRender) {
+      initialRender = false;
+    }
+  };

package/stories/Blink.stories.tsx

@@ -0,0 +1,20 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Blink, Section } from '../components';
+
+export const meta = {
+  title: 'Blink',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  return (
+    <Section>
+      <Blink>Blink</Blink>
+    </Section>
+  );
+};

package/stories/BlockQuote.stories.tsx

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { BlockQuote, Section } from '../components';
+import { BoxWithSampleText } from './common';
+
+export const meta = {
+  title: 'BlockQuote',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  return (
+    <Section>
+      <BlockQuote>
+        <BoxWithSampleText />
+      </BlockQuote>
+    </Section>
+  );
+};

package/stories/Box.stories.tsx

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Box, Section } from '../components';
+
+export const meta = {
+  title: 'Box',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  return (
+    <Section>
+      <Box bold>bold</Box>
+      <Box italic>italic</Box>
+      <Box opacity={0.5}>opacity 0.5</Box>
+      <Box opacity={0.25}>opacity 0.25</Box>
+      <Box m={2}>m: 2</Box>
+      <Box textAlign="left">left</Box>
+      <Box textAlign="center">center</Box>
+      <Box textAlign="right">right</Box>
+    </Section>
+  );
+};

package/stories/Button.stories.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Box, Button, Section } from '../components';
+
+export const meta = {
+  title: 'Button',
+  render: () => <Story />,
+};
+
+const COLORS_SPECTRUM = [
+  'red',
+  'orange',
+  'yellow',
+  'olive',
+  'green',
+  'teal',
+  'blue',
+  'violet',
+  'purple',
+  'pink',
+  'brown',
+  'grey',
+];
+
+const COLORS_STATES = ['good', 'average', 'bad', 'black', 'white'];
+
+const Story = (props) => {
+  return (
+    <Section>
+      <Box mb={1}>
+        <Button content="Simple" />
+        <Button selected content="Selected" />
+        <Button content="Alt Selected" />
+        <Button disabled content="Disabled" />
+        <Button color="transparent" content="Transparent" />
+        <Button icon="cog" content="Icon" />
+        <Button icon="power-off" />
+        <Button fluid content="Fluid" />
+        <Button
+          my={1}
+          lineHeight={2}
+          minWidth={15}
+          textAlign="center"
+          content="With Box props"
+        />
+      </Box>
+      <Box mb={1}>
+        {COLORS_STATES.map((color) => (
+          <Button key={color} color={color} content={color} />
+        ))}
+        <br />
+        {COLORS_SPECTRUM.map((color) => (
+          <Button key={color} color={color} content={color} />
+        ))}
+        <br />
+        {COLORS_SPECTRUM.map((color) => (
+          <Box inline mx="7px" key={color} color={color}>
+            {color}
+          </Box>
+        ))}
+      </Box>
+    </Section>
+  );
+};