tgui-core 1.0.0

package/src/debug/KitchenSink.jsx

@@ -0,0 +1,56 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { useState } from 'react';
+
+import { Flex, Section, Tabs } from '../components';
+import { Pane, Window } from '../layouts';
+
+const r = require.context('../stories', false, /\.stories\.jsx$/);
+
+/**
+ * @returns {{
+ *   meta: {
+ *     title: string,
+ *     render: () => any,
+ *   },
+ * }[]}
+ */
+const getStories = () => r.keys().map((path) => r(path));
+
+export const KitchenSink = (props) => {
+  const { panel } = props;
+  const [theme] = useState(null);
+  const [pageIndex, setPageIndex] = useState(0);
+  const stories = getStories();
+  const story = stories[pageIndex];
+  const Layout = panel ? Pane : Window;
+  return (
+    <Layout title="Kitchen Sink" width={600} height={500} theme={theme}>
+      <Flex height="100%">
+        <Flex.Item m={1} mr={0}>
+          <Section fill fitted>
+            <Tabs vertical>
+              {stories.map((story, i) => (
+                <Tabs.Tab
+                  key={i}
+                  color="transparent"
+                  selected={i === pageIndex}
+                  onClick={() => setPageIndex(i)}
+                >
+                  {story.meta.title}
+                </Tabs.Tab>
+              ))}
+            </Tabs>
+          </Section>
+        </Flex.Item>
+        <Flex.Item position="relative" grow={1}>
+          <Layout.Content scrollable>{story.meta.render()}</Layout.Content>
+        </Flex.Item>
+      </Flex>
+    </Layout>
+  );
+};

package/src/debug/actions.js

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { createAction } from 'common/redux';
+
+export const toggleKitchenSink = createAction('debug/toggleKitchenSink');
+export const toggleDebugLayout = createAction('debug/toggleDebugLayout');
+export const openExternalBrowser = createAction('debug/openExternalBrowser');

package/src/debug/hooks.js

@@ -0,0 +1,10 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { useSelector } from '../backend';
+import { selectDebug } from './selectors';
+
+export const useDebug = () => useSelector(selectDebug);

package/src/debug/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+export { useDebug } from './hooks';
+export { KitchenSink } from './KitchenSink';
+export { debugMiddleware, relayMiddleware } from './middleware';
+export { debugReducer } from './reducer';

package/src/debug/middleware.js

@@ -0,0 +1,86 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { KEY_BACKSPACE, KEY_F10, KEY_F11, KEY_F12 } from 'common/keycodes';
+
+import { globalEvents } from '../events';
+import { acquireHotKey } from '../hotkeys';
+import {
+  openExternalBrowser,
+  toggleDebugLayout,
+  toggleKitchenSink,
+} from './actions';
+
+// prettier-ignore
+const relayedTypes = [
+  'backend/update',
+  'chat/message',
+];
+
+export const debugMiddleware = (store) => {
+  acquireHotKey(KEY_F11);
+  acquireHotKey(KEY_F12);
+  globalEvents.on('keydown', (key) => {
+    if (key.code === KEY_F11) {
+      store.dispatch(toggleDebugLayout());
+    }
+    if (key.code === KEY_F12) {
+      store.dispatch(toggleKitchenSink());
+    }
+    if (key.ctrl && key.alt && key.code === KEY_BACKSPACE) {
+      // NOTE: We need to call this in a timeout, because we need a clean
+      // stack in order for this to be a fatal error.
+      setTimeout(() => {
+        // prettier-ignore
+        throw new Error(
+          'OOPSIE WOOPSIE!! UwU We made a fucky wucky!! A wittle'
+          + ' fucko boingo! The code monkeys at our headquarters are'
+          + ' working VEWY HAWD to fix this!');
+      });
+    }
+  });
+  return (next) => (action) => next(action);
+};
+
+export const relayMiddleware = (store) => {
+  const devServer = require('tgui-dev-server/link/client.cjs');
+  const externalBrowser = location.search === '?external';
+  if (externalBrowser) {
+    devServer.subscribe((msg) => {
+      const { type, payload } = msg;
+      if (type === 'relay' && payload.windowId === Byond.windowId) {
+        store.dispatch({
+          ...payload.action,
+          relayed: true,
+        });
+      }
+    });
+  } else {
+    acquireHotKey(KEY_F10);
+    globalEvents.on('keydown', (key) => {
+      if (key === KEY_F10) {
+        store.dispatch(openExternalBrowser());
+      }
+    });
+  }
+  return (next) => (action) => {
+    const { type, payload, relayed } = action;
+    if (type === openExternalBrowser.type) {
+      window.open(location.href + '?external', '_blank');
+      return;
+    }
+    if (relayedTypes.includes(type) && !relayed && !externalBrowser) {
+      devServer.sendMessage({
+        type: 'relay',
+        payload: {
+          windowId: Byond.windowId,
+          action,
+        },
+      });
+    }
+    return next(action);
+  };
+};

package/src/debug/reducer.js

@@ -0,0 +1,22 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+export const debugReducer = (state = {}, action) => {
+  const { type, payload } = action;
+  if (type === 'debug/toggleKitchenSink') {
+    return {
+      ...state,
+      kitchenSink: !state.kitchenSink,
+    };
+  }
+  if (type === 'debug/toggleDebugLayout') {
+    return {
+      ...state,
+      debugLayout: !state.debugLayout,
+    };
+  }
+  return state;
+};

package/src/debug/selectors.js

@@ -0,0 +1,7 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+export const selectDebug = (state) => state.debug;

package/src/drag.ts

@@ -0,0 +1,280 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { storage } from './common/storage';
+import { vecAdd, vecMultiply, vecScale, vecSubtract } from './common/vector';
+
+const pixelRatio = window.devicePixelRatio ?? 1;
+let windowKey = Byond.windowId;
+let dragging = false;
+let resizing = false;
+let screenOffset: [number, number] = [0, 0];
+let screenOffsetPromise: Promise<[number, number]>;
+let dragPointOffset: [number, number];
+let resizeMatrix: [number, number];
+let initialSize: [number, number];
+let size: [number, number];
+
+// Set the window key
+export const setWindowKey = (key: string): void => {
+  windowKey = key;
+};
+
+// Get window position
+export const getWindowPosition = (): [number, number] => [
+  window.screenLeft * pixelRatio,
+  window.screenTop * pixelRatio,
+];
+
+// Get window size
+export const getWindowSize = (): [number, number] => [
+  window.innerWidth * pixelRatio,
+  window.innerHeight * pixelRatio,
+];
+
+// Set window position
+const setWindowPosition = (vec: [number, number]) => {
+  const byondPos = vecAdd(vec, screenOffset);
+  return Byond.winset(Byond.windowId, {
+    pos: byondPos[0] + ',' + byondPos[1],
+  });
+};
+
+// Set window size
+const setWindowSize = (vec: [number, number]) => {
+  return Byond.winset(Byond.windowId, {
+    size: vec[0] + 'x' + vec[1],
+  });
+};
+
+// Get screen position
+const getScreenPosition = (): [number, number] => [
+  0 - screenOffset[0],
+  0 - screenOffset[1],
+];
+
+// Get screen size
+const getScreenSize = (): [number, number] => [
+  window.screen.availWidth * pixelRatio,
+  window.screen.availHeight * pixelRatio,
+];
+
+/**
+ * Moves an item to the top of the recents array, and keeps its length
+ * limited to the number in `limit` argument.
+ *
+ * Uses a strict equality check for comparisons.
+ *
+ * Returns new recents and an item which was trimmed.
+ */
+export const touchRecents = (
+  recents: string[],
+  touchedItem: string,
+  limit = 50
+): [string[], string | undefined] => {
+  const nextRecents: string[] = [touchedItem];
+  let trimmedItem: string | undefined;
+  for (let i = 0; i < recents.length; i++) {
+    const item = recents[i];
+    if (item === touchedItem) {
+      continue;
+    }
+    if (nextRecents.length < limit) {
+      nextRecents.push(item);
+    } else {
+      trimmedItem = item;
+    }
+  }
+  return [nextRecents, trimmedItem];
+};
+
+// Store window geometry in local storage
+const storeWindowGeometry = async () => {
+  const geometry = {
+    pos: getWindowPosition(),
+    size: getWindowSize(),
+  };
+  storage.set(windowKey, geometry);
+  // Update the list of stored geometries
+  const [geometries, trimmedKey] = touchRecents(
+    (await storage.get('geometries')) || [],
+    windowKey
+  );
+  if (trimmedKey) {
+    storage.remove(trimmedKey);
+  }
+  storage.set('geometries', geometries);
+};
+
+// Recall window geometry from local storage and apply it
+export const recallWindowGeometry = async (
+  options: {
+    fancy?: boolean;
+    pos?: [number, number];
+    size?: [number, number];
+    locked?: boolean;
+  } = {}
+) => {
+  const geometry = options.fancy && (await storage.get(windowKey));
+  // options.pos is assumed to already be in display-pixels
+  let pos = geometry?.pos || options.pos;
+  let size = options.size;
+  // Convert size from css-pixels to display-pixels
+  if (size) {
+    size = [size[0] * pixelRatio, size[1] * pixelRatio];
+  }
+  // Wait until screen offset gets resolved
+  await screenOffsetPromise;
+  const areaAvailable = getScreenSize();
+  // Set window size
+  if (size) {
+    // Constraint size to not exceed available screen area
+    size = [
+      Math.min(areaAvailable[0], size[0]),
+      Math.min(areaAvailable[1], size[1]),
+    ];
+    setWindowSize(size);
+  }
+  // Set window position
+  if (pos) {
+    // Constraint window position if monitor lock was set in preferences.
+    if (size && options.locked) {
+      pos = constraintPosition(pos, size)[1];
+    }
+    setWindowPosition(pos);
+    // Set window position at the center of the screen.
+  } else if (size) {
+    pos = vecAdd(
+      vecScale(areaAvailable, 0.5),
+      vecScale(size, -0.5),
+      vecScale(screenOffset, -1.0)
+    );
+    setWindowPosition(pos);
+  }
+};
+
+// Setup draggable window
+export const setupDrag = async () => {
+  // Calculate screen offset caused by the windows taskbar
+  let windowPosition = getWindowPosition();
+
+  screenOffsetPromise = Byond.winget(Byond.windowId, 'pos').then((pos) => [
+    pos.x - windowPosition[0],
+    pos.y - windowPosition[1],
+  ]);
+  screenOffset = await screenOffsetPromise;
+};
+
+/**
+ * Constraints window position to safe screen area, accounting for safe
+ * margins which could be a system taskbar.
+ */
+const constraintPosition = (
+  pos: [number, number],
+  size: [number, number]
+): [boolean, [number, number]] => {
+  const screenPos = getScreenPosition();
+  const screenSize = getScreenSize();
+  const nextPos: [number, number] = [pos[0], pos[1]];
+  let relocated = false;
+  for (let i = 0; i < 2; i++) {
+    const leftBoundary = screenPos[i];
+    const rightBoundary = screenPos[i] + screenSize[i];
+    if (pos[i] < leftBoundary) {
+      nextPos[i] = leftBoundary;
+      relocated = true;
+    } else if (pos[i] + size[i] > rightBoundary) {
+      nextPos[i] = rightBoundary - size[i];
+      relocated = true;
+    }
+  }
+  return [relocated, nextPos];
+};
+
+// Start dragging the window
+export const dragStartHandler = (event) => {
+  dragging = true;
+  dragPointOffset = vecSubtract(
+    [event.screenX, event.screenY],
+    getWindowPosition()
+  ) as [number, number];
+  // Focus click target
+  (event.target as HTMLElement)?.focus();
+  document.addEventListener('mousemove', dragMoveHandler);
+  document.addEventListener('mouseup', dragEndHandler);
+  dragMoveHandler(event);
+};
+
+// End dragging the window
+const dragEndHandler = (event) => {
+  dragMoveHandler(event);
+  document.removeEventListener('mousemove', dragMoveHandler);
+  document.removeEventListener('mouseup', dragEndHandler);
+  dragging = false;
+  storeWindowGeometry();
+};
+
+// Move the window while dragging
+const dragMoveHandler = (event: MouseEvent) => {
+  if (!dragging) {
+    return;
+  }
+  event.preventDefault();
+  setWindowPosition(
+    vecSubtract([event.screenX, event.screenY], dragPointOffset) as [
+      number,
+      number
+    ]
+  );
+};
+
+// Start resizing the window
+export const resizeStartHandler =
+  (x: number, y: number) => (event: MouseEvent) => {
+    resizeMatrix = [x, y];
+    resizing = true;
+    dragPointOffset = vecSubtract(
+      [event.screenX, event.screenY],
+      getWindowPosition()
+    ) as [number, number];
+    initialSize = getWindowSize();
+    // Focus click target
+    (event.target as HTMLElement)?.focus();
+    document.addEventListener('mousemove', resizeMoveHandler);
+    document.addEventListener('mouseup', resizeEndHandler);
+    resizeMoveHandler(event);
+  };
+
+// End resizing the window
+const resizeEndHandler = (event: MouseEvent) => {
+  resizeMoveHandler(event);
+  document.removeEventListener('mousemove', resizeMoveHandler);
+  document.removeEventListener('mouseup', resizeEndHandler);
+  resizing = false;
+  storeWindowGeometry();
+};
+
+// Move the window while resizing
+const resizeMoveHandler = (event: MouseEvent) => {
+  if (!resizing) {
+    return;
+  }
+  event.preventDefault();
+  const currentOffset = vecSubtract(
+    [event.screenX, event.screenY],
+    getWindowPosition()
+  );
+  const delta = vecSubtract(currentOffset, dragPointOffset);
+  // Extra 1x1 area is added to ensure the browser can see the cursor
+  size = vecAdd(initialSize, vecMultiply(resizeMatrix, delta), [1, 1]) as [
+    number,
+    number
+  ];
+  // Sane window size values
+  size[0] = Math.max(size[0], 150 * pixelRatio);
+  size[1] = Math.max(size[1], 50 * pixelRatio);
+  setWindowSize(size);
+};