tgui-core 1.0.0

package/src/layouts/Layout.tsx

@@ -0,0 +1,75 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+import { useEffect, useRef } from 'react';
+
+import {
+  BoxProps,
+  computeBoxClassName,
+  computeBoxProps,
+} from '../components/Box';
+import { addScrollableNode, removeScrollableNode } from '../events';
+
+type Props = Partial<{
+  theme: string;
+}> &
+  BoxProps;
+
+export function Layout(props: Props) {
+  const { className, theme = 'nanotrasen', children, ...rest } = props;
+
+  return (
+    <div className={'theme-' + theme}>
+      <div
+        className={classes(['Layout', className, computeBoxClassName(rest)])}
+        {...computeBoxProps(rest)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+type ContentProps = Partial<{
+  scrollable: boolean;
+}> &
+  BoxProps;
+
+function LayoutContent(props: ContentProps) {
+  const { className, scrollable, children, ...rest } = props;
+  const node = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const self = node.current;
+
+    if (self && scrollable) {
+      addScrollableNode(self);
+    }
+    return () => {
+      if (self && scrollable) {
+        removeScrollableNode(self);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={classes([
+        'Layout__content',
+        scrollable && 'Layout__content--scrollable',
+        className,
+        computeBoxClassName(rest),
+      ])}
+      ref={node}
+      {...computeBoxProps(rest)}
+    >
+      {children}
+    </div>
+  );
+}
+
+Layout.Content = LayoutContent;

package/src/layouts/NtosWindow.tsx

@@ -0,0 +1,162 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { BooleanLike } from '../common/react';
+
+import { resolveAsset } from '../assets';
+import { useBackend } from '../backend';
+import { Box } from '../components/Box';
+import { Button } from '../components/Button';
+import { Window } from './Window';
+
+export type NTOSData = {
+  authenticatedUser: string | null;
+  authIDName: string;
+  comp_light_color: string;
+  has_id: BooleanLike;
+  has_light: BooleanLike;
+  id_name: string;
+  light_on: BooleanLike;
+  login: Login;
+  pai: string | null;
+  PC_batteryicon: string | null;
+  PC_batterypercent: string | null;
+  PC_device_theme: string;
+  PC_lowpower_mode: BooleanLike;
+  PC_ntneticon: string;
+  PC_programheaders: Program[];
+  PC_showexitprogram: BooleanLike;
+  PC_stationdate: string;
+  PC_stationtime: string;
+  programs: Program[];
+  proposed_login: Login;
+  removable_media: string[];
+  show_imprint: BooleanLike;
+};
+
+type Program = {
+  alert: BooleanLike;
+  desc: string;
+  header_program: BooleanLike;
+  icon: string;
+  name: string;
+  running: BooleanLike;
+};
+
+type Login = {
+  IDInserted?: BooleanLike;
+  IDJob: string | null;
+  IDName: string | null;
+};
+
+export const NtosWindow = (props) => {
+  const { title, width = 575, height = 700, children } = props;
+  const { act, data } = useBackend<NTOSData>();
+  const {
+    PC_device_theme,
+    PC_batteryicon,
+    PC_batterypercent,
+    PC_ntneticon,
+    PC_stationdate,
+    PC_stationtime,
+    PC_programheaders = [],
+    PC_showexitprogram,
+    PC_lowpower_mode,
+  } = data;
+
+  return (
+    <Window title={title} width={width} height={height} theme={PC_device_theme}>
+      <div className="NtosWindow">
+        <div className="NtosWindow__header NtosHeader">
+          <div className="NtosHeader__left">
+            <Box inline bold mr={2}>
+              <Button
+                width="26px"
+                lineHeight="22px"
+                textAlign="left"
+                tooltip={PC_stationdate}
+                color="transparent"
+                icon="calendar"
+                tooltipPosition="bottom"
+              />
+              {PC_stationtime}
+            </Box>
+            <Box inline italic mr={2} opacity={0.33}>
+              {(PC_device_theme === 'syndicate' && 'Syndix') || 'NtOS'}
+              {!!PC_lowpower_mode && ' - RUNNING ON LOW POWER MODE'}
+            </Box>
+          </div>
+          <div className="NtosHeader__right">
+            {PC_programheaders.map((header) => (
+              <Box key={header.icon} inline mr={1}>
+                <img
+                  className="NtosHeader__icon"
+                  src={resolveAsset(header.icon)}
+                />
+              </Box>
+            ))}
+            <Box inline>
+              {PC_ntneticon && (
+                <img
+                  className="NtosHeader__icon"
+                  src={resolveAsset(PC_ntneticon)}
+                />
+              )}
+            </Box>
+            {!!PC_batteryicon && (
+              <Box inline mr={1}>
+                <img
+                  className="NtosHeader__icon"
+                  src={resolveAsset(PC_batteryicon)}
+                />
+                {PC_batterypercent}
+              </Box>
+            )}
+            {!!PC_showexitprogram && (
+              <Button
+                color="transparent"
+                icon="window-minimize-o"
+                tooltip="Minimize"
+                tooltipPosition="bottom"
+                onClick={() => act('PC_minimize')}
+              />
+            )}
+            {!!PC_showexitprogram && (
+              <Button
+                color="transparent"
+                icon="window-close-o"
+                tooltip="Close"
+                tooltipPosition="bottom-start"
+                onClick={() => act('PC_exit')}
+              />
+            )}
+            {!PC_showexitprogram && (
+              <Button
+                textAlign="center"
+                color="transparent"
+                icon="power-off"
+                tooltip="Power off"
+                tooltipPosition="bottom-start"
+                onClick={() => act('PC_shutdown')}
+              />
+            )}
+          </div>
+        </div>
+        {children}
+      </div>
+    </Window>
+  );
+};
+
+const NtosWindowContent = (props) => {
+  return (
+    <div className="NtosWindow__content">
+      <Window.Content {...props} />
+    </div>
+  );
+};
+
+NtosWindow.Content = NtosWindowContent;

package/src/layouts/Pane.tsx

@@ -0,0 +1,56 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+import { useBackend } from '../backend';
+import { Box, BoxProps } from '../components/Box';
+import { useDebug } from '../debug';
+import { Layout } from './Layout';
+
+type Props = Partial<{
+  theme: string;
+}> &
+  BoxProps;
+
+export function Pane(props: Props) {
+  const { theme, children, className, ...rest } = props;
+  const { suspended } = useBackend();
+  const { debugLayout = false } = useDebug();
+
+  return (
+    <Layout className={classes(['Window', className])} theme={theme} {...rest}>
+      <Box fillPositionedParent className={debugLayout && 'debug-layout'}>
+        {!suspended && children}
+      </Box>
+    </Layout>
+  );
+}
+
+type ContentProps = Partial<{
+  fitted: boolean;
+  scrollable: boolean;
+}> &
+  BoxProps;
+
+function PaneContent(props: ContentProps) {
+  const { className, fitted, children, ...rest } = props;
+
+  return (
+    <Layout.Content
+      className={classes(['Window__content', className])}
+      {...rest}
+    >
+      {fitted ? (
+        children
+      ) : (
+        <div className="Window__contentPadding">{children}</div>
+      )}
+    </Layout.Content>
+  );
+}
+
+Pane.Content = PaneContent;

package/src/layouts/Window.tsx

@@ -0,0 +1,227 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+import { decodeHtmlEntities, toTitleCase } from '../common/string';
+import { PropsWithChildren, ReactNode, useEffect } from 'react';
+
+import { backendSuspendStart, globalStore, useBackend } from '../backend';
+import { Icon } from '../components/Icon';
+import { BoxProps } from '../components/Box';
+import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
+import { useDebug } from '../debug';
+import { toggleKitchenSink } from '../debug/actions';
+import {
+  dragStartHandler,
+  recallWindowGeometry,
+  resizeStartHandler,
+  setWindowKey,
+} from '../drag';
+import { Layout } from './Layout';
+
+const DEFAULT_SIZE: [number, number] = [400, 600];
+
+type Props = Partial<{
+  buttons: ReactNode;
+  canClose: boolean;
+  height: number;
+  theme: string;
+  title: string;
+  width: number;
+}> &
+  PropsWithChildren;
+
+export const Window = (props: Props) => {
+  const {
+    canClose = true,
+    theme,
+    title,
+    children,
+    buttons,
+    width,
+    height,
+  } = props;
+
+  const { config, suspended } = useBackend();
+  const { debugLayout = false } = useDebug();
+
+  useEffect(() => {
+    const updateGeometry = () => {
+      const options = {
+        ...config.window,
+        size: DEFAULT_SIZE,
+      };
+
+      if (width && height) {
+        options.size = [width, height];
+      }
+      if (config.window?.key) {
+        setWindowKey(config.window.key);
+      }
+      recallWindowGeometry(options);
+    };
+
+    Byond.winset(Byond.windowId, {
+      'can-close': Boolean(canClose),
+    });
+
+    updateGeometry();
+
+    return () => {};
+  }, [width, height]);
+
+  const dispatch = globalStore.dispatch;
+  const fancy = config.window?.fancy;
+
+  // Determine when to show dimmer
+  const showDimmer =
+    config.user &&
+    (config.user.observer
+      ? config.status < UI_DISABLED
+      : config.status < UI_INTERACTIVE);
+
+  return suspended ? null : (
+    <Layout className="Window" theme={theme}>
+      <TitleBar
+        className="Window__titleBar"
+        title={title || decodeHtmlEntities(config.title)}
+        status={config.status}
+        fancy={fancy}
+        onDragStart={dragStartHandler}
+        onClose={() => {
+          dispatch(backendSuspendStart());
+        }}
+        canClose={canClose}
+      >
+        {buttons}
+      </TitleBar>
+      <div className={classes(['Window__rest', debugLayout && 'debug-layout'])}>
+        {!suspended && children}
+        {showDimmer && <div className="Window__dimmer" />}
+      </div>
+      {fancy && (
+        <>
+          <div
+            className="Window__resizeHandle__e"
+            onMouseDown={resizeStartHandler(1, 0) as any}
+          />
+          <div
+            className="Window__resizeHandle__s"
+            onMouseDown={resizeStartHandler(0, 1) as any}
+          />
+          <div
+            className="Window__resizeHandle__se"
+            onMouseDown={resizeStartHandler(1, 1) as any}
+          />
+        </>
+      )}
+    </Layout>
+  );
+};
+
+type ContentProps = Partial<{
+  className: string;
+  fitted: boolean;
+  scrollable: boolean;
+  vertical: boolean;
+}> &
+  BoxProps &
+  PropsWithChildren;
+
+const WindowContent = (props: ContentProps) => {
+  const { className, fitted, children, ...rest } = props;
+
+  return (
+    <Layout.Content
+      className={classes(['Window__content', className])}
+      {...rest}
+    >
+      {(fitted && children) || (
+        <div className="Window__contentPadding">{children}</div>
+      )}
+    </Layout.Content>
+  );
+};
+
+Window.Content = WindowContent;
+
+const statusToColor = (status) => {
+  switch (status) {
+    case UI_INTERACTIVE:
+      return 'good';
+    case UI_UPDATE:
+      return 'average';
+    case UI_DISABLED:
+    default:
+      return 'bad';
+  }
+};
+
+type TitleBarProps = Partial<{
+  canClose: boolean;
+  className: string;
+  fancy: boolean;
+  onClose: (e) => void;
+  onDragStart: (e) => void;
+  status: number;
+  title: string;
+}> &
+  PropsWithChildren;
+
+const TitleBar = (props: TitleBarProps) => {
+  const {
+    className,
+    title,
+    status,
+    canClose,
+    fancy,
+    onDragStart,
+    onClose,
+    children,
+  } = props;
+  const dispatch = globalStore.dispatch;
+
+  const finalTitle =
+    (typeof title === 'string' &&
+      title === title.toLowerCase() &&
+      toTitleCase(title)) ||
+    title;
+
+  return (
+    <div className={classes(['TitleBar', className])}>
+      {(status === undefined && (
+        <Icon className="TitleBar__statusIcon" name="tools" opacity={0.5} />
+      )) || (
+        <Icon
+          className="TitleBar__statusIcon"
+          color={statusToColor(status)}
+          name="eye"
+        />
+      )}
+      <div
+        className="TitleBar__dragZone"
+        onMouseDown={(e) => fancy && onDragStart && onDragStart(e)}
+      />
+      <div className="TitleBar__title">
+        {finalTitle}
+        {!!children && <div className="TitleBar__buttons">{children}</div>}
+      </div>
+      {process.env.NODE_ENV !== 'production' && (
+        <div
+          className="TitleBar__devBuildIndicator"
+          onClick={() => dispatch(toggleKitchenSink())}
+        >
+          <Icon name="bug" />
+        </div>
+      )}
+      {Boolean(fancy && canClose) && (
+        <div className="TitleBar__close TitleBar__clickable" onClick={onClose}>
+          ×
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer.ts

@@ -0,0 +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;
+  }
+};

package/styles/base.scss

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:math';
+
+$color-fg: #ffffff !default;
+$color-bg: #252525 !default;
+$color-bg-section: rgba(0, 0, 0, 0.33) !default;
+$color-bg-grad-spread: 2% !default;
+$color-bg-start: color.adjust(
+  $color-bg,
+  $lightness: $color-bg-grad-spread
+) !default;
+$color-bg-end: color.adjust(
+  $color-bg,
+  $lightness: -$color-bg-grad-spread
+) !default;
+
+$unit: 12px;
+$font-size: 1 * $unit !default;
+$border-radius: 0.16em !default;
+
+@function em($px) {
+  @return 1em * math.div($px, $unit);
+}
+
+@function rem($px) {
+  @return 1rem * math.div($px, $unit);
+}

package/styles/colors.scss

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+
+// Base colors
+$black: #000000 !default;
+$white: #ffffff !default;
+$red: #db2828 !default;
+$orange: #f2711c !default;
+$yellow: #fbd608 !default;
+$olive: #b5cc18 !default;
+$green: #20b142 !default;
+$teal: #00b5ad !default;
+$blue: #2185d0 !default;
+$violet: #6435c9 !default;
+$purple: #a333c8 !default;
+$pink: #e03997 !default;
+$brown: #a5673f !default;
+$grey: #767676 !default;
+$light-grey: #aaa !default;
+
+$primary: #4972a1 !default;
+$good: #5baa27 !default;
+$average: #f08f11 !default;
+$bad: #db2828 !default;
+$label: #7e90a7 !default;
+
+// Background and foreground color lightness ratios
+$bg-lightness: -15% !default;
+$fg-lightness: 10% !default;
+
+@function bg($color) {
+  @return color.scale($color, $lightness: $bg-lightness);
+}
+
+@function fg($color) {
+  @return color.scale($color, $lightness: $fg-lightness);
+}
+
+// Mappings of color names
+
+$_gen_map: (
+  "black": $black,
+  "white": $white,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "olive": $olive,
+  "green": $green,
+  "teal": $teal,
+  "blue": $blue,
+  "violet": $violet,
+  "purple": $purple,
+  "pink": $pink,
+  "brown": $brown,
+  "grey": $grey,
+  "light-grey": $light-grey,
+  "good": $good,
+  "average": $average,
+  "bad": $bad,
+  "label": $label,
+);
+
+// Foreground color names for which to generate a color map
+$fg-map-keys: map.keys($_gen_map) !default;
+// Background color names for which to generate a color map
+$bg-map-keys: map.keys($_gen_map) !default;
+
+$fg-map: ();
+@each $color-name in $fg-map-keys {
+  $fg-map: map-merge(
+    $fg-map,
+    (
+      $color-name: fg(map.get($_gen_map, $color-name)),
+    )
+  );
+}
+
+$bg-map: ();
+@each $color-name in $bg-map-keys {
+  $bg-map: map-merge(
+    $bg-map,
+    (
+      $color-name: bg(map.get($_gen_map, $color-name)),
+    )
+  );
+}

package/styles/components/BlockQuote.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use '../base.scss';
+@use '../colors.scss';
+
+$color-default: colors.fg(colors.$label) !default;
+
+.BlockQuote {
+  color: $color-default;
+  border-left: base.em(2px) solid $color-default;
+  padding-left: 0.5em;
+  margin-bottom: 0.5em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}