shikix/GS13NG
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

yeehaw it's done

Browse Source
This commit is contained in:
Seris02
2020-02-05 16:54:57 +08:00
parent 49f80d52a8 c458c243a7
commit 6cc6aa12be
633 changed files with 38003 additions and 6217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui-next/.editorconfig
+13
View File
@@ -0,0 +1,13 @@
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
max_line_length = 80
tgui-next/.eslintignore
+6
View File
@@ -0,0 +1,6 @@
/**/node_modules
/**/*.bundle.*
/**/*.chunk.*
/**/*.hot-update.*
/packages/inferno/**
/packages/tgui/public/shim-*.js
tgui-next/.eslintrc-harder.yml
+14
View File
@@ -0,0 +1,14 @@
rules:
## Enforce a maximum cyclomatic complexity allowed in a program
complexity: [error, { max: 25 }]
## Enforce consistent brace style for blocks
brace-style: [error, stroustrup, { allowSingleLine: false }]
## Enforce the consistent use of either backticks, double, or single quotes
quotes: [error, single, {
avoidEscape: true,
allowTemplateLiterals: true,
}]
react/jsx-closing-bracket-location: [error, {
selfClosing: after-props,
nonEmpty: after-props,
}]
tgui-next/.eslintrc.yml
+749
View File
@@ -0,0 +1,749 @@
parser: babel-eslint
parserOptions:
ecmaVersion: 2019
sourceType: module
ecmaFeatures:
jsx: true
env:
es6: true
browser: true
node: true
plugins:
- react
settings:
react:
version: '16.10'
rules:
## Possible Errors
## ----------------------------------------
## Enforce “for” loop update clause moving the counter in the right
## direction.
# for-direction: error
## Enforce return statements in getters
# getter-return: error
## Disallow using an async function as a Promise executor
no-async-promise-executor: error
## Disallow await inside of loops
# no-await-in-loop: error
## Disallow comparing against -0
# no-compare-neg-zero: error
## Disallow assignment operators in conditional expressions
no-cond-assign: error
## Disallow the use of console
# no-console: error
## Disallow constant expressions in conditions
# no-constant-condition: error
## Disallow control characters in regular expressions
# no-control-regex: error
## Disallow the use of debugger
no-debugger: error
## Disallow duplicate arguments in function definitions
no-dupe-args: error
## Disallow duplicate keys in object literals
no-dupe-keys: error
## Disallow duplicate case labels
no-duplicate-case: error
## Disallow empty block statements
# no-empty: error
## Disallow empty character classes in regular expressions
no-empty-character-class: error
## Disallow reassigning exceptions in catch clauses
no-ex-assign: error
## Disallow unnecessary boolean casts
no-extra-boolean-cast: error
## Disallow unnecessary parentheses
# no-extra-parens: warn
## Disallow unnecessary semicolons
no-extra-semi: error
## Disallow reassigning function declarations
no-func-assign: error
## Disallow assigning to imported bindings
no-import-assign: error
## Disallow variable or function declarations in nested blocks
no-inner-declarations: error
## Disallow invalid regular expression strings in RegExp constructors
no-invalid-regexp: error
## Disallow irregular whitespace
no-irregular-whitespace: error
## Disallow characters which are made with multiple code points in character
## class syntax
no-misleading-character-class: error
## Disallow calling global object properties as functions
no-obj-calls: error
## Disallow calling some Object.prototype methods directly on objects
no-prototype-builtins: error
## Disallow multiple spaces in regular expressions
no-regex-spaces: error
## Disallow sparse arrays
no-sparse-arrays: error
## Disallow template literal placeholder syntax in regular strings
no-template-curly-in-string: error
## Disallow confusing multiline expressions
no-unexpected-multiline: error
## Disallow unreachable code after return, throw, continue, and break
## statements
# no-unreachable: warn
## Disallow control flow statements in finally blocks
no-unsafe-finally: error
## Disallow negating the left operand of relational operators
no-unsafe-negation: error
## Disallow assignments that can lead to race conditions due to usage of
## await or yield
# require-atomic-updates: error
## Require calls to isNaN() when checking for NaN
use-isnan: error
## Enforce comparing typeof expressions against valid strings
valid-typeof: error
## Best practices
## ----------------------------------------
## Enforce getter and setter pairs in objects and classes
# accessor-pairs: error
## Enforce return statements in callbacks of array methods
# array-callback-return: error
## Enforce the use of variables within the scope they are defined
# block-scoped-var: error
## Enforce that class methods utilize this
# class-methods-use-this: error
## Enforce a maximum cyclomatic complexity allowed in a program
complexity: [error, { max: 50 }]
## Require return statements to either always or never specify values
# consistent-return: error
## Enforce consistent brace style for all control statements
curly: [error, all]
## Require default cases in switch statements
# default-case: error
## Enforce default parameters to be last
# default-param-last: error
## Enforce consistent newlines before and after dots
dot-location: [error, property]
## Enforce dot notation whenever possible
# dot-notation: error
## Require the use of === and !==
eqeqeq: [error, always]
## Require for-in loops to include an if statement
# guard-for-in: error
## Enforce a maximum number of classes per file
# max-classes-per-file: error
## Disallow the use of alert, confirm, and prompt
# no-alert: error
## Disallow the use of arguments.caller or arguments.callee
# no-caller: error
## Disallow lexical declarations in case clauses
no-case-declarations: error
## Disallow division operators explicitly at the beginning of regular
## expressions
# no-div-regex: error
## Disallow else blocks after return statements in if statements
# no-else-return: error
## Disallow empty functions
# no-empty-function: error
## Disallow empty destructuring patterns
no-empty-pattern: error
## Disallow null comparisons without type-checking operators
# no-eq-null: error
## Disallow the use of eval()
# no-eval: error
## Disallow extending native types
# no-extend-native: error
## Disallow unnecessary calls to .bind()
# no-extra-bind: error
## Disallow unnecessary labels
# no-extra-label: error
## Disallow fallthrough of case statements
no-fallthrough: error
## Disallow leading or trailing decimal points in numeric literals
# no-floating-decimal: error
## Disallow assignments to native objects or read-only global variables
no-global-assign: error
## Disallow shorthand type conversions
# no-implicit-coercion: error
## Disallow variable and function declarations in the global scope
# no-implicit-globals: error
## Disallow the use of eval()-like methods
# no-implied-eval: error
## Disallow this keywords outside of classes or class-like objects
# no-invalid-this: error
## Disallow the use of the __iterator__ property
# no-iterator: error
## Disallow labeled statements
# no-labels: error
## Disallow unnecessary nested blocks
# no-lone-blocks: error
## Disallow function declarations that contain unsafe references inside
## loop statements
# no-loop-func: error
## Disallow magic numbers
# no-magic-numbers: error
## Disallow multiple spaces
no-multi-spaces: warn
## Disallow multiline strings
# no-multi-str: error
## Disallow new operators outside of assignments or comparisons
# no-new: error
## Disallow new operators with the Function object
# no-new-func: error
## Disallow new operators with the String, Number, and Boolean objects
# no-new-wrappers: error
## Disallow octal literals
no-octal: error
## Disallow octal escape sequences in string literals
no-octal-escape: error
## Disallow reassigning function parameters
# no-param-reassign: error
## Disallow the use of the __proto__ property
# no-proto: error
## Disallow variable redeclaration
no-redeclare: error
## Disallow certain properties on certain objects
# no-restricted-properties: error
## Disallow assignment operators in return statements
no-return-assign: error
## Disallow unnecessary return await
# no-return-await: error
## Disallow javascript: urls
# no-script-url: error
## Disallow assignments where both sides are exactly the same
no-self-assign: error
## Disallow comparisons where both sides are exactly the same
# no-self-compare: error
## Disallow comma operators
no-sequences: error
## Disallow throwing literals as exceptions
# no-throw-literal: error
## Disallow unmodified loop conditions
# no-unmodified-loop-condition: error
## Disallow unused expressions
# no-unused-expressions: error
## Disallow unused labels
no-unused-labels: warn
## Disallow unnecessary calls to .call() and .apply()
# no-useless-call: error
## Disallow unnecessary catch clauses
# no-useless-catch: error
## Disallow unnecessary concatenation of literals or template literals
# no-useless-concat: error
## Disallow unnecessary escape characters
no-useless-escape: warn
## Disallow redundant return statements
# no-useless-return: error
## Disallow void operators
# no-void: error
## Disallow specified warning terms in comments
# no-warning-comments: error
## Disallow with statements
no-with: error
## Enforce using named capture group in regular expression
# prefer-named-capture-group: error
## Require using Error objects as Promise rejection reasons
# prefer-promise-reject-errors: error
## Disallow use of the RegExp constructor in favor of regular expression
## literals
# prefer-regex-literals: error
## Enforce the consistent use of the radix argument when using parseInt()
radix: error
## Disallow async functions which have no await expression
# require-await: error
## Enforce the use of u flag on RegExp
# require-unicode-regexp: error
## Require var declarations be placed at the top of their containing scope
# vars-on-top: error
## Require parentheses around immediate function invocations
# wrap-iife: error
## Require or disallow “Yoda” conditions
# yoda: error
## Strict mode
## ----------------------------------------
## Require or disallow strict mode directives
strict: error
## Variables
## ----------------------------------------
## Require or disallow initialization in variable declarations
# init-declarations: error
## Disallow deleting variables
no-delete-var: error
## Disallow labels that share a name with a variable
# no-label-var: error
## Disallow specified global variables
# no-restricted-globals: error
## Disallow variable declarations from shadowing variables declared in
## the outer scope
# no-shadow: error
## Disallow identifiers from shadowing restricted names
no-shadow-restricted-names: error
## Disallow the use of undeclared variables unless mentioned
## in /*global*/ comments
no-undef: error
## Disallow initializing variables to undefined
no-undef-init: error
## Disallow the use of undefined as an identifier
# no-undefined: error
## Disallow unused variables
# no-unused-vars: error
## Disallow the use of variables before they are defined
# no-use-before-define: error
## Code style
## ----------------------------------------
## Enforce linebreaks after opening and before closing array brackets
array-bracket-newline: [error, consistent]
## Enforce consistent spacing inside array brackets
array-bracket-spacing: [error, never]
## Enforce line breaks after each array element
# array-element-newline: error
## Disallow or enforce spaces inside of blocks after opening block and
## before closing block
block-spacing: [error, always]
## Enforce consistent brace style for blocks
# brace-style: [error, stroustrup, { allowSingleLine: false }]
## Enforce camelcase naming convention
# camelcase: error
## Enforce or disallow capitalization of the first letter of a comment
# capitalized-comments: error
## Require or disallow trailing commas
comma-dangle: [error, always-multiline]
## Enforce consistent spacing before and after commas
comma-spacing: [error, { before: false, after: true }]
## Enforce consistent comma style
comma-style: [error, last]
## Enforce consistent spacing inside computed property brackets
computed-property-spacing: [error, never]
## Enforce consistent naming when capturing the current execution context
# consistent-this: error
## Require or disallow newline at the end of files
# eol-last: error
## Require or disallow spacing between function identifiers and their
## invocations
func-call-spacing: [error, never]
## Require function names to match the name of the variable or property
## to which they are assigned
# func-name-matching: error
## Require or disallow named function expressions
# func-names: error
## Enforce the consistent use of either function declarations or expressions
func-style: [error, expression]
## Enforce line breaks between arguments of a function call
# function-call-argument-newline: error
## Enforce consistent line breaks inside function parentheses
## NOTE: This rule does not honor a newline on opening paren.
# function-paren-newline: [error, never]
## Disallow specified identifiers
# id-blacklist: error
## Enforce minimum and maximum identifier lengths
# id-length: error
## Require identifiers to match a specified regular expression
# id-match: error
## Enforce the location of arrow function bodies
# implicit-arrow-linebreak: error
## Enforce consistent indentation
indent: [error, 2, { SwitchCase: 1 }]
## Enforce the consistent use of either double or single quotes in JSX
## attributes
jsx-quotes: [error, prefer-double]
## Enforce consistent spacing between keys and values in object literal
## properties
key-spacing: [error, { beforeColon: false, afterColon: true }]
## Enforce consistent spacing before and after keywords
keyword-spacing: [error, { before: true, after: true }]
## Enforce position of line comments
# line-comment-position: error
## Enforce consistent linebreak style
# linebreak-style: error
## Require empty lines around comments
# lines-around-comment: error
## Require or disallow an empty line between class members
# lines-between-class-members: error
## Enforce a maximum depth that blocks can be nested
# max-depth: error
## Enforce a maximum line length
max-len: [error, {
code: 80,
## Ignore imports
ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
ignoreUrls: true,
ignoreRegExpLiterals: true,
}]
## Enforce a maximum number of lines per file
# max-lines: error
## Enforce a maximum number of line of code in a function
# max-lines-per-function: error
## Enforce a maximum depth that callbacks can be nested
# max-nested-callbacks: error
## Enforce a maximum number of parameters in function definitions
# max-params: error
## Enforce a maximum number of statements allowed in function blocks
# max-statements: error
## Enforce a maximum number of statements allowed per line
# max-statements-per-line: error
## Enforce a particular style for multiline comments
# multiline-comment-style: error
## Enforce newlines between operands of ternary expressions
multiline-ternary: [error, always-multiline]
## Require constructor names to begin with a capital letter
# new-cap: error
## Enforce or disallow parentheses when invoking a constructor with no
## arguments
# new-parens: error
## Require a newline after each call in a method chain
# newline-per-chained-call: error
## Disallow Array constructors
# no-array-constructor: error
## Disallow bitwise operators
# no-bitwise: error
## Disallow continue statements
# no-continue: error
## Disallow inline comments after code
# no-inline-comments: error
## Disallow if statements as the only statement in else blocks
# no-lonely-if: error
## Disallow mixed binary operators
# no-mixed-operators: error
## Disallow mixed spaces and tabs for indentation
no-mixed-spaces-and-tabs: error
## Disallow use of chained assignment expressions
# no-multi-assign: error
## Disallow multiple empty lines
# no-multiple-empty-lines: error
## Disallow negated conditions
# no-negated-condition: error
## Disallow nested ternary expressions
# no-nested-ternary: error
## Disallow Object constructors
# no-new-object: error
## Disallow the unary operators ++ and --
# no-plusplus: error
## Disallow specified syntax
# no-restricted-syntax: error
## Disallow all tabs
# no-tabs: error
## Disallow ternary operators
# no-ternary: error
## Disallow trailing whitespace at the end of lines
# no-trailing-spaces: error
## Disallow dangling underscores in identifiers
# no-underscore-dangle: error
## Disallow ternary operators when simpler alternatives exist
# no-unneeded-ternary: error
## Disallow whitespace before properties
no-whitespace-before-property: error
## Enforce the location of single-line statements
# nonblock-statement-body-position: error
## Enforce consistent line breaks inside braces
# object-curly-newline: [error, { multiline: true }]
## Enforce consistent spacing inside braces
object-curly-spacing: [error, always]
## Enforce placing object properties on separate lines
# object-property-newline: error
## Enforce variables to be declared either together or separately in
## functions
# one-var: error
## Require or disallow newlines around variable declarations
# one-var-declaration-per-line: error
## Require or disallow assignment operator shorthand where possible
# operator-assignment: error
## Enforce consistent linebreak style for operators
operator-linebreak: [error, before]
## Require or disallow padding within blocks
# padded-blocks: error
## Require or disallow padding lines between statements
# padding-line-between-statements: error
## Disallow using Object.assign with an object literal as the first
## argument and prefer the use of object spread instead.
# prefer-object-spread: error
## Require quotes around object literal property names
# quote-props: error
## Enforce the consistent use of either backticks, double, or single quotes
# quotes: [error, single]
## Require or disallow semicolons instead of ASI
semi: error
## Enforce consistent spacing before and after semicolons
semi-spacing: [error, { before: false, after: true }]
## Enforce location of semicolons
semi-style: [error, last]
## Require object keys to be sorted
# sort-keys: error
## Require variables within the same declaration block to be sorted
# sort-vars: error
## Enforce consistent spacing before blocks
space-before-blocks: [error, always]
## Enforce consistent spacing before function definition opening parenthesis
space-before-function-paren: [error, {
anonymous: always,
named: never,
asyncArrow: always,
}]
## Enforce consistent spacing inside parentheses
space-in-parens: [error, never]
## Require spacing around infix operators
# space-infix-ops: error
## Enforce consistent spacing before or after unary operators
# space-unary-ops: error
## Enforce consistent spacing after the // or /* in a comment
spaced-comment: [error, always]
## Enforce spacing around colons of switch statements
switch-colon-spacing: [error, { before: false, after: true }]
## Require or disallow spacing between template tags and their literals
template-tag-spacing: [error, never]
## Require or disallow Unicode byte order mark (BOM)
# unicode-bom: [error, never]
## Require parenthesis around regex literals
# wrap-regex: error
## ES6
## ----------------------------------------
## Require braces around arrow function bodies
# arrow-body-style: error
## Require parentheses around arrow function arguments
arrow-parens: [error, as-needed]
## Enforce consistent spacing before and after the arrow in arrow functions
arrow-spacing: [error, { before: true, after: true }]
## Require super() calls in constructors
# constructor-super: error
## Enforce consistent spacing around * operators in generator functions
generator-star-spacing: [error, { before: false, after: true }]
## Disallow reassigning class members
no-class-assign: error
## Disallow arrow functions where they could be confused with comparisons
# no-confusing-arrow: error
## Disallow reassigning const variables
no-const-assign: error
## Disallow duplicate class members
no-dupe-class-members: error
## Disallow duplicate module imports
# no-duplicate-imports: error
## Disallow new operators with the Symbol object
no-new-symbol: error
## Disallow specified modules when loaded by import
# no-restricted-imports: error
## Disallow this/super before calling super() in constructors
no-this-before-super: error
## Disallow unnecessary computed property keys in object literals
# no-useless-computed-key: error
## Disallow unnecessary constructors
# no-useless-constructor: error
## Disallow renaming import, export, and destructured assignments to the
## same name
# no-useless-rename: error
## Require let or const instead of var
no-var: error
## Require or disallow method and property shorthand syntax for object
## literals
# object-shorthand: error
## Require using arrow functions for callbacks
prefer-arrow-callback: error
## Require const declarations for variables that are never reassigned after
## declared
# prefer-const: error
## Require destructuring from arrays and/or objects
# prefer-destructuring: error
## Disallow parseInt() and Number.parseInt() in favor of binary, octal, and
## hexadecimal literals
# prefer-numeric-literals: error
## Require rest parameters instead of arguments
# prefer-rest-params: error
## Require spread operators instead of .apply()
# prefer-spread: error
## Require template literals instead of string concatenation
# prefer-template: error
## Require generator functions to contain yield
# require-yield: error
## Enforce spacing between rest and spread operators and their expressions
# rest-spread-spacing: error
## Enforce sorted import declarations within modules
# sort-imports: error
## Require symbol descriptions
# symbol-description: error
## Require or disallow spacing around embedded expressions of template
## strings
# template-curly-spacing: error
## Require or disallow spacing around the * in yield* expressions
yield-star-spacing: [error, { before: false, after: true }]
## React
## ----------------------------------------
## Enforces consistent naming for boolean props
react/boolean-prop-naming: error
## Forbid "button" element without an explicit "type" attribute
react/button-has-type: error
## Prevent extraneous defaultProps on components
react/default-props-match-prop-types: error
## Rule enforces consistent usage of destructuring assignment in component
# react/destructuring-assignment: [error, always, { ignoreClassFields: true }]
## Prevent missing displayName in a React component definition
react/display-name: error
## Forbid certain props on Components
# react/forbid-component-props: error
## Forbid certain props on DOM Nodes
# react/forbid-dom-props: error
## Forbid certain elements
# react/forbid-elements: error
## Forbid certain propTypes
# react/forbid-prop-types: error
## Forbid foreign propTypes
# react/forbid-foreign-prop-types: error
## Prevent using this.state inside this.setState
react/no-access-state-in-setstate: error
## Prevent using Array index in key props
# react/no-array-index-key: error
## Prevent passing children as props
react/no-children-prop: error
## Prevent usage of dangerous JSX properties
react/no-danger: error
## Prevent problem with children and props.dangerouslySetInnerHTML
react/no-danger-with-children: error
## Prevent usage of deprecated methods, including component lifecycle
## methods
react/no-deprecated: error
## Prevent usage of setState in componentDidMount
react/no-did-mount-set-state: error
## Prevent usage of setState in componentDidUpdate
react/no-did-update-set-state: error
## Prevent direct mutation of this.state
react/no-direct-mutation-state: error
## Prevent usage of findDOMNode
react/no-find-dom-node: error
## Prevent usage of isMounted
react/no-is-mounted: error
## Prevent multiple component definition per file
# react/no-multi-comp: error
## Prevent usage of shouldComponentUpdate when extending React.PureComponent
react/no-redundant-should-component-update: error
## Prevent usage of the return value of React.render
react/no-render-return-value: error
## Prevent usage of setState
# react/no-set-state: error
## Prevent common casing typos
react/no-typos: error
## Prevent using string references in ref attribute.
react/no-string-refs: error
## Prevent using this in stateless functional components
react/no-this-in-sfc: error
## Prevent invalid characters from appearing in markup
react/no-unescaped-entities: error
## Prevent usage of unknown DOM property (fixable)
react/no-unknown-property: error
## Prevent usage of unsafe lifecycle methods
react/no-unsafe: error
## Prevent definitions of unused prop types
react/no-unused-prop-types: error
## Prevent definitions of unused state properties
react/no-unused-state: error
## Prevent usage of setState in componentWillUpdate
react/no-will-update-set-state: error
## Enforce ES5 or ES6 class for React Components
react/prefer-es6-class: error
## Enforce that props are read-only
react/prefer-read-only-props: error
## Enforce stateless React Components to be written as a pure function
react/prefer-stateless-function: error
## Prevent missing props validation in a React component definition
# react/prop-types: error
## Prevent missing React when using JSX
# react/react-in-jsx-scope: error
## Enforce a defaultProps definition for every prop that is not a required
## prop
# react/require-default-props: error
## Enforce React components to have a shouldComponentUpdate method
# react/require-optimization: error
## Enforce ES5 or ES6 class for returning value in render function
react/require-render-return: error
## Prevent extra closing tags for components without children (fixable)
react/self-closing-comp: error
## Enforce component methods order (fixable)
# react/sort-comp: error
## Enforce propTypes declarations alphabetical sorting
# react/sort-prop-types: error
## Enforce the state initialization style to be either in a constructor or
## with a class property
react/state-in-constructor: error
## Enforces where React component static properties should be positioned.
# react/static-property-placement: error
## Enforce style prop value being an object
react/style-prop-object: error
## Prevent void DOM elements (e.g. <img />, <br />) from receiving children
react/void-dom-elements-no-children: error
## JSX-specific rules
## ----------------------------------------
## Enforce boolean attributes notation in JSX (fixable)
react/jsx-boolean-value: error
## Enforce or disallow spaces inside of curly braces in JSX attributes and
## expressions.
# react/jsx-child-element-spacing: error
## Validate closing bracket location in JSX (fixable)
react/jsx-closing-bracket-location: [error, {
## NOTE: Not really sure about enforcing this one
selfClosing: false,
nonEmpty: after-props,
}]
## Validate closing tag location in JSX (fixable)
react/jsx-closing-tag-location: error
## Enforce or disallow newlines inside of curly braces in JSX attributes and
## expressions (fixable)
react/jsx-curly-newline: error
## Enforce or disallow spaces inside of curly braces in JSX attributes and
## expressions (fixable)
react/jsx-curly-spacing: error
## Enforce or disallow spaces around equal signs in JSX attributes (fixable)
react/jsx-equals-spacing: error
## Restrict file extensions that may contain JSX
# react/jsx-filename-extension: error
## Enforce position of the first prop in JSX (fixable)
# react/jsx-first-prop-new-line: error
## Enforce event handler naming conventions in JSX
react/jsx-handler-names: error
## Validate JSX indentation (fixable)
react/jsx-indent: [error, 2, {
checkAttributes: true,
}]
## Validate props indentation in JSX (fixable)
react/jsx-indent-props: [error, 2]
## Validate JSX has key prop when in array or iterator
react/jsx-key: error
## Validate JSX maximum depth
react/jsx-max-depth: [error, { max: 6 }] ## Generous
## Limit maximum of props on a single line in JSX (fixable)
# react/jsx-max-props-per-line: error
## Prevent usage of .bind() and arrow functions in JSX props
# react/jsx-no-bind: error
## Prevent comments from being inserted as text nodes
react/jsx-no-comment-textnodes: error
## Prevent duplicate props in JSX
react/jsx-no-duplicate-props: error
## Prevent usage of unwrapped JSX strings
# react/jsx-no-literals: error
## Prevent usage of unsafe target='_blank'
react/jsx-no-target-blank: error
## Disallow undeclared variables in JSX
react/jsx-no-undef: error
## Disallow unnecessary fragments (fixable)
react/jsx-no-useless-fragment: error
## Limit to one expression per line in JSX
# react/jsx-one-expression-per-line: error
## Enforce curly braces or disallow unnecessary curly braces in JSX
# react/jsx-curly-brace-presence: error
## Enforce shorthand or standard form for React fragments
react/jsx-fragments: error
## Enforce PascalCase for user-defined JSX components
react/jsx-pascal-case: error
## Disallow multiple spaces between inline JSX props (fixable)
react/jsx-props-no-multi-spaces: error
## Disallow JSX props spreading
# react/jsx-props-no-spreading: error
## Enforce default props alphabetical sorting
# react/jsx-sort-default-props: error
## Enforce props alphabetical sorting (fixable)
# react/jsx-sort-props: error
## Validate whitespace in and around the JSX opening and closing brackets
## (fixable)
react/jsx-tag-spacing: error
## Prevent React to be incorrectly marked as unused
react/jsx-uses-react: error
## Prevent variables used in JSX to be incorrectly marked as unused
react/jsx-uses-vars: error
## Prevent missing parentheses around multilines JSX (fixable)
react/jsx-wrap-multilines: error
tgui-next/.gitattributes
+10
View File
@@ -0,0 +1,10 @@
* text=auto
## Enforce text mode and LF line breaks
*.js text eol=lf
*.css text eol=lf
*.html text eol=lf
*.json text eol=lf
## Treat bundles as binary and ignore them during conflicts
*.bundle.* binary merge=tgui-merge-bundle
tgui-next/.gitignore
+7
View File
@@ -0,0 +1,7 @@
node_modules
*.log
package-lock.json
/packages/tgui/public/.tmp/**/*
/packages/tgui/public/**/*.hot-update.*
/packages/tgui/public/**/*.map
tgui-next/README.md
+780
View File
@@ -0,0 +1,780 @@
# tgui
## Introduction
tgui is a robust user interface framework of /tg/station.
tgui is very different from most UIs you will encounter in BYOND programming.
It is heavily reliant on Javascript and web technologies as opposed to DM.
If you are familiar with NanoUI (a library which can be found on almost
every other SS13 codebase), tgui should be fairly easy to pick up.
## Learn tgui
People come to tgui from different backgrounds and with different
learning styles. Whether you prefer a more theoretical or a practical
approach, we hope you’ll find this section helpful.
### Practical tutorial
If you are completely new to frontend and prefer to **learn by doing**,
start with our [practical tutorial](docs/tutorial-and-examples.md).
### Guides
This project uses **Inferno** - a very fast UI rendering engine with a similar
API to React. Take your time to read these guides:
- [React guide](https://reactjs.org/docs/hello-world.html)
- [Inferno documentation](https://infernojs.org/docs/guides/components) -
highlights differences with React.
If you were already familiar with an older, Ractive-based tgui, and want
to translate concepts between old and new tgui, read this
[interface conversion guide](docs/converting-old-tgui-interfaces.md).
## Pre-requisites
You will need these programs to start developing in tgui:
- [Node v12.13+](https://nodejs.org/en/download/)
- [Yarn v1.19+](https://yarnpkg.com/en/docs/install)
- [MSys2](https://www.msys2.org/) (optional)
> MSys2 closely replicates a unix-like environment which is necessary for
> the `bin/tgui` script to run. It comes with a robust "mintty" terminal
> emulator which is better than any standard Windows shell, it supports
> "git" out of the box (almost like Git for Windows, but better), has
> a "pacman" package manager, and you can install a text editor like "vim"
> for a full boomer experience.
## Usage
**For MSys2, Git Bash, WSL, Linux or macOS users:**
First and foremost, change your directory to `tgui-next`.
Run `bin/tgui --install-git-hooks` (optional) to install merge drivers
which will assist you in conflict resolution when rebasing your branches.
Run one of the following:
- `bin/tgui` - build the project in production mode.
- `bin/tgui --dev` - launch a development server.
- tgui development server provides you with incremental compilation,
hot module replacement and logging facilities in all running instances
of tgui. In short, this means that you will instantly see changes in the
game as you code it. Very useful, highly recommended.
- `bin/tgui --dev --reload` - reload byond cache once.
- `bin/tgui --dev --debug` - run server with debug logging enabled.
- `bin/tgui --dev --no-hot` - disable hot module replacement (helps when
doing development on IE8).
- `bin/tgui --lint` - show problems with the code.
- `bin/tgui --lint --fix` - auto-fix problems with the code.
- `bin/tgui --analyze` - run a bundle analyzer.
- `bin/tgui --clean` - clean up project repo.
- `bin/tgui [webpack options]` - build the project with custom webpack
options.
**For everyone else:**
If you haven't opened the console already, you can do that by holding
Shift and right clicking on the `tgui-next` folder, then pressing
either `Open command window here` or `Open PowerShell window here`.
Run `yarn install` to install npm dependencies, then one of the following:
- `yarn run build` - build the project in production mode.
- `yarn run watch` - launch a development server.
- `yarn run lint` - show problems with the code.
- `yarn run lint --fix` - auto-fix problems with the code.
- `yarn run analyze` - run a bundle analyzer.
We also got some batch files in store, for those who don't like fiddling
with the console:
- `bin/tgui-build.bat` - build the project in production mode.
- `bin/tgui-dev-server.bat` - launch a development server.
> Remember to always run a full build before submitting a PR. It creates
> a compressed javascript bundle which is then referenced from DM code.
> We prefer to keep it version controlled, so that people could build the
> game just by using Dream Maker.
## Project structure
- `/packages` - Each folder here represents a self-contained Node module.
- `/packages/common` - Helper functions
- `/packages/tgui/index.js` - Application entry point.
- `/packages/tgui/components` - Basic UI building blocks.
- `/packages/tgui/interfaces` - Actual in-game interfaces.
Interface takes data via the `state` prop and outputs an html-like stucture,
which you can build using existing UI components.
- `/packages/tgui/routes.js` - This is where you want to register new
interfaces, otherwise they simply won't load.
- `/packages/tgui/layout.js` - A root-level component, holding the
window elements, like the titlebar, buttons, resize handlers. Calls
`routes.js` to decide which component to render.
- `/packages/tgui/styles/main.scss` - CSS entry point.
- `/packages/tgui/styles/atomic.scss` - Atomic CSS classes.
These are very simple, tiny, reusable CSS classes which you can use and
combine to change appearance of your elements. Keep them small.
- `/packages/tgui/styles/components.scss` - CSS classes which are used
in UI components, and most of the stylesheets referenced here are located
in `/packages/tgui/components`. These stylesheets closely follow the
[BEM](https://en.bem.info/methodology/) methodology.
- `/packages/tgui/styles/functions.scss` - Useful SASS functions.
Stuff like `lighten`, `darken`, `luminance` are defined here.
## Component reference
> Notice: This documentation might be out of date, so always check the source
> code to see the most up-to-date information.
These are the components which you can use for interface construction.
If you have trouble finding the exact prop you need on a component,
please note, that most of these components inherit from other basic
components, such as `Box`. This component in particular provides a lot
of styling options for all components, e.g. `color` and `opacity`, thus
it is used a lot in this framework.
There are a few important semantics you need to know about:
- `content` prop is a synonym to a `children` prop.
- `content` is better used when your element is a self-closing tag
(like `<Button content="Hello" />`), and when content is small and simple
enough to fit in a prop. Keep in mind, that this prop is **not** native
to React, and is a feature of this component system.
- `children` is better used when your element is a full tag (like
`<Button>Hello</Button>`), and when content is long and complex. This is
a native React prop (unlike `content`), and contains all elements you
defined between the opening and the closing tag of an element.
- You should never use both on a same element.
- You should never use `children` explicitly as a prop on an element.
- Inferno supports both camelcase (`onClick`) and lowercase (`onclick`)
event names.
- Camel case names are what's called "synthetic" events, and are the
*preferred way* of handling events in React, for efficiency and
performance reasons. Please read
[Inferno Event Handling](https://infernojs.org/docs/guides/event-handling)
to understand what this is about.
- Lower case names are native browser events and should be used sparingly,
for example when you need an explicit IE8 support. **DO NOT** use
lowercase event handlers unless you really know what you are doing.
- [Button](#button) component straight up does not support lowercase event
handlers. Use the camel case `onClick` instead.
### `AnimatedNumber`
This component provides animations for numeric values.
Props:
- `value: number` - Value to animate.
- `initial: number` - Initial value to use in animation when element
first appears. If you set initial to `0` for example, number will always
animate starting from `0`, and if omitted, it will not play an initial
animation.
- `format: value => value` - Output formatter.
- Example: `value => Math.round(value)`.
- `children: (formattedValue, rawValue) => any` - Pull the animated number to
animate more complex things deeper in the DOM tree.
- Example: `(_, value) => <Icon rotation={value} />`
### `BlockQuote`
Just a block quote, just like this example in markdown:
> Here's an example of a block quote.
Props:
- See inherited props: [Box](#box)
### `Box`
The Box component serves as a wrapper component for most of the CSS utility
needs. It creates a new DOM element, a `<div>` by default that can be changed
with the `as` property. Let's say you want to use a `<span>` instead:
```jsx
<Box as="span" m={1}>
<Button />
</Box>
```
This works great when the changes can be isolated to a new DOM element.
For instance, you can change the margin this way.
However, sometimes you have to target the underlying DOM element.
For instance, you want to change the text color of the button. The Button
component defines its own color. CSS inheritance doesn't help.
To workaround this problem, the Box children accept a render props function.
This way, `Button` can pull out the `className` generated by the `Box`.
```jsx
<Box color="primary">
{props => <Button {...props} />}
</Box>
```
`Box` units, like width, height and margins can be defined in two ways:
- By plain numbers (1 unit equals `0.5em`);
- In absolute measures, by providing a full unit string (e.g. `100px`).
Units which are used in `Box` are `0.5em`, which are half font-size.
Default font size is `12px`, so each unit is effectively `6px` in size.
If you need more precision, you can always use fractional numbers.
Props:
- `as: string` - The component used for the root node.
- `color: string` - Applies an atomic `color-<name>` class to the element.
- See `styles/atomic/color.scss`.
- `width: number` - Box width.
- `minWidth: number` - Box minimum width.
- `maxWidth: number` - Box maximum width.
- `height: number` - Box height.
- `minHeight: number` - Box minimum height.
- `maxHeight: number` - Box maximum height.
- `lineHeight: number` - Directly affects the height of text lines.
Useful for adjusting button height.
- `inline: boolean` - Forces the `Box` to appear as an `inline-block`,
or in other words, makes the `Box` flow with the text instead of taking
all available horizontal space.
- `m: number` - Margin on all sides.
- `mx: number` - Horizontal margin.
- `my: number` - Vertical margin.
- `mt: number` - Top margin.
- `mb: number` - Bottom margin.
- `ml: number` - Left margin.
- `mr: number` - Right margin.
- `opacity: number` - Opacity, from 0 to 1.
- `bold: boolean` - Make text bold.
- `italic: boolean` - Make text italic.
- `textAlign: string` - Align text inside the box.
- `left` (default)
- `center`
- `right`
- `position: string` - A direct mapping to `position` CSS property.
- `relative` - Relative positioning.
- `absolute` - Absolute positioning.
- `fixed` - Fixed positioning.
- `color: string` - An alias to `textColor`.
- `textColor: string` - Sets text color.
- `#ffffff` - Hex format
- `rgba(255, 255, 255, 1)` - RGB format
- `purple` - Applies an atomic `color-<name>` class to the element.
See `styles/color-map.scss`.
- `backgroundColor: string` - Sets background color.
- `#ffffff` - Hex format
- `rgba(255, 255, 255, 1)` - RGB format
### `Button`
Buttons allow users to take actions, and make choices, with a single click.
Props:
- See inherited props: [Box](#box)
- `fluid: boolean` - Fill all available horizontal space.
- `icon: string` - Adds an icon to the button.
- `color: string` - Button color, as defined in `variables.scss`.
- There is also a special color `transparent` - makes the button
transparent and slightly dim when inactive.
- `disabled: boolean` - Disables and greys out the button.
- `selected: boolean` - Activates the button (gives it a green color).
- `tooltip: string` - A fancy, boxy tooltip, which appears when hovering
over the button.
- `tooltipPosition: string` - Position of the tooltip.
- `top` - Show tooltip above the button.
- `bottom` (default) - Show tooltip below the button.
- `left` - Show tooltip on the left of the button.
- `right` - Show tooltip on the right of the button.
- `title: string` - A native browser tooltip, which appears when hovering
over the button.
- `content/children: any` - Content to render inside the button.
- `onClick: function` - Called when element is clicked.
### `ColorBox`
Displays a 1-character wide colored square. Can be used as a status indicator,
or for visually representing a color.
If you want to set a background color on an element, use a plain
[Box](#box) instead.
Props:
- See inherited props: [Box](#box)
- `color: string` - Color of the box.
### `Dimmer`
Dims surrounding area to emphasize content placed inside.
Props:
- See inherited props: [Box](#box)
### `Flex`
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
If you are new to or unfamiliar with flexbox, we encourage you to read this
[CSS-Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Consists of two elements: `<Flex>` and `<Flex.Item>`. Both of them provide
the most straight-forward mapping to flex CSS properties as possible.
One of the most basic usage of flex, is to align certain elements
to the left, and certain elements to the right:
```jsx
<Flex>
<Flex.Item>
Button description
</Flex.Item>
<Flex.Item grow={1} />
<Flex.Item>
<Button content="Perform an action" />
</Flex.Item>
</Flex>
```
Flex item with `grow` property serves as a "filler", to separate the other
two flex items as far as possible from each other.
Props:
- See inherited props: [Box](#box)
- `direction: string` - This establishes the main-axis, thus defining the
direction flex items are placed in the flex container.
- `row` (default) - left to right.
- `row-reverse` - right to left.
- `column` - top to bottom.
- `column-reverse` - bottom to top.
- `wrap: string` - By default, flex items will all try to fit onto one line.
You can change that and allow the items to wrap as needed with this property.
- `nowrap` (default) - all flex items will be on one line
- `wrap` - flex items will wrap onto multiple lines, from top to bottom.
- `wrap-reverse` - flex items will wrap onto multiple lines from bottom to top.
- `align: string` - Default alignment of all children.
- `stretch` (default) - stretch to fill the container.
- `start` - items are placed at the start of the cross axis.
- `end` - items are placed at the end of the cross axis.
- `center` - items are centered on the cross axis.
- `baseline` - items are aligned such as their baselines align.
- `justify: string` - This defines the alignment along the main axis.
It helps distribute extra free space leftover when either all the flex
items on a line are inflexible, or are flexible but have reached their
maximum size. It also exerts some control over the alignment of items
when they overflow the line.
- `flex-start` (default) - items are packed toward the start of the
flex-direction.
- `flex-end` - items are packed toward the end of the flex-direction.
- `space-between` - items are evenly distributed in the line; first item is
on the start line, last item on the end line
- `space-around` - items are evenly distributed in the line with equal space
around them. Note that visually the spaces aren't equal, since all the items
have equal space on both sides. The first item will have one unit of space
against the container edge, but two units of space between the next item
because that next item has its own spacing that applies.
- `space-evenly` - items are distributed so that the spacing between any two
items (and the space to the edges) is equal.
- TBD (not all properties are supported in IE11).
### `Flex.Item`
Props:
- See inherited props: [Box](#box)
- `order: number` - By default, flex items are laid out in the source order.
However, the order property controls the order in which they appear in the
flex container.
- `grow: number` - This defines the ability for a flex item to grow if
necessary. It accepts a unitless value that serves as a proportion. It
dictates what amount of the available space inside the flex container the
item should take up. This number is unit-less and is relative to other
siblings.
- `shrink: number` - This defines the ability for a flex item to shrink
if necessary. Inverse of `grow`.
- `basis: string` - This defines the default size of an element before the
remaining space is distributed. It can be a length (e.g. `20%`, `5rem`, etc.),
an `auto` or `content` keyword.
- `align: string` - This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. See: [Flex](#flex).
### `Grid`
Helps you to divide horizontal space into two or more equal sections.
It is essentially a single-row `Table`, but with some extra features.
Example:
```jsx
<Grid>
<Grid.Column>
<Section title="Section 1" content="Hello world!" />
</Grid.Column>
<Grid.Column size={2}>
<Section title="Section 2" content="Hello world!" />
</Grid.Column>
</Grid>
```
Props:
- See inherited props: [Table](#table)
### `Grid.Column`
Props:
- See inherited props: [Table.Cell](#table-cell)
- `size: number` (default: 1) - Size of the column relative to other columns.
### `Icon`
Renders one of the FontAwesome icons of your choice.
```jsx
<Icon name="plus" />
```
To smoothen the transition from v4 to v5, we have added a v4 semantic to
transform names with `-o` suffixes to FA Regular icons. For example:
- `square` will get transformed to `fas square`
- `square-o` will get transformed to `far square`
Props:
- See inherited props: [Box](#box)
- `name: string` - Icon name.
- `size: number` - Icon size. `1` is normal size, `2` is two times bigger.
Fractional numbers are supported.
- `rotation: number` - Icon rotation, in degrees.
- `spin: boolean` - Whether an icon should be spinning. Good for load
indicators.
### `Input`
A basic text input, which allow users to enter text into a UI.
> Input does not support custom font size and height due to the way
> it's implemented in CSS. Eventually, this needs to be fixed.
Props:
- See inherited props: [Box](#box)
- `value: string` - Value of an input.
- `fluid: boolean` - Fill all available horizontal space.
- `onChange: (e, value) => void` - An event, which fires when you commit
the text by either unfocusing the input box, or by pressing the Enter key.
- `onInput: (e, value) => void` - An event, which fires on every keypress.
### `LabeledList`
LabeledList is a continuous, vertical list of text and other content, where
every item is labeled. It works just like a two column table, where first
column is labels, and second column is content.
```jsx
<LabeledList>
<LabeledList.Item label="Item">
Content
</LabeledList.Item>
</LabeledList>
```
If you want to have a button on the right side of an item (for example,
to perform some sort of action), there is a way to do that:
```jsx
<LabeledList>
<LabeledList.Item
label="Item"
buttons={(
<Button content="Click me!" />
)}>
Content
</LabeledList.Item>
</LabeledList>
```
Props:
- `children: LabeledList.Item` - Items to render.
### `LabeledList.Item`
Props:
- `label: string` - Item label.
- `color: string` - Sets the color of the text.
- `buttons: any` - Buttons to render aside the content.
- `content/children: any` - Content of this labeled item.
### `LabeledList.Divider`
Adds some empty space between LabeledList items.
Example:
```jsx
<LabeledList>
<LabeledList.Item label="Foo">
Content
</LabeledList.Item>
<LabeledList.Divider size={1} />
</LabeledList>
```
Props:
- `size: number` - Size of the divider.
### `NoticeBox`
A notice box, which warns you about something very important.
Props:
- See inherited props: [Box](#box)
### `NumberInput`
A fancy, interactive number input, which you can either drag up and down
to fine tune the value, or single click it to manually type a number.
Props:
- `animated: boolean` - Animates the value if it was changed externally.
- `fluid: boolean` - Fill all available horizontal space.
- `value: number` - Value itself.
- `unit: string` - Unit to display to the right of value.
- `minValue: number` - Lowest possible value.
- `maxValue: number` - Highest possible value.
- `step: number` (default: 1) - Adjust value by this amount when
dragging the input.
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
to travel to adjust value by one `step`.
- `width: string|number` - Width of the element, in `Box` units or pixels.
- `format: value => value` - Format value using this function before
displaying it.
- `suppressFlicker: number` - A number in milliseconds, for which the input
will hold off from updating while events propagate through the backend.
Default is about 250ms, increase it if you still see flickering.
- `onChange: (e, value) => void` - An event, which fires when you release
the input, or successfully enter a number.
- `onDrag: (e, value) => void` - An event, which fires about every 500ms
when you drag the input up and down, on release and on manual editing.
### `ProgressBar`
Progress indicators inform users about the status of ongoing processes.
```jsx
<ProgressBar value={0.6} />
```
Usage of `ranges` prop:
```jsx
<ProgressBar
ranges={{
good: [0.5, Infinity],
average: [0.25, 0.5],
bad: [-Infinity, 0.25],
}}
value={0.6} />
```
Props:
- `value: number` - Current progress as a floating point number between
`minValue` (default: 0) and `maxValue` (default: 1). Determines the
percentage and how filled the bar is.
- `minValue: number` - Lowest possible value.
- `maxValue: number` - Highest possible value.
- `ranges: { color: [from, to] }` - Applies a `color` to the progress bar
based on whether the value lands in the range between `from` and `to`.
- `color: string` - Color of the progress bar.
- `content/children: any` - Content to render inside the progress bar.
### `Section`
Section is a surface that displays content and actions on a single topic.
They should be easy to scan for relevant and actionable information.
Elements, like text and images, should be placed in them in a way that
clearly indicates hierarchy.
Section can also be titled to clearly define its purpose.
```jsx
<Section title="Cargo">
Here you can order supply crates.
</Section>
```
If you want to have a button on the right side of an section title
(for example, to perform some sort of action), there is a way to do that:
```jsx
<Section
title="Cargo"
buttons={(
<Button content="Send shuttle" />
)}>
Here you can order supply crates.
</Section>
```
- See inherited props: [Box](#box)
- `title: string` - Title of the section.
- `level: number` - Section level in hierarchy. Default is 1, higher number
means deeper level of nesting. Must be an integer number.
- `buttons: any` - Buttons to render aside the section title.
- `content/children: any` - Content of this section.
### `Table`
A straight forward mapping to a standard html table, which is slightly
simplified (does not need a `<tbody>` tag) and with sane default styles
(e.g. table width is 100% by default).
Example:
```jsx
<Table>
<Table.Row>
<Table.Cell bold>
Hello world!
</Table.Cell>
<Table.Cell collapsing color="label">
Label
</Table.Cell>
</Table.Row>
</Table>
```
Props:
- See inherited props: [Box](#box)
- `collapsing: boolean` - Collapses table to the smallest possible size.
### `Table.Row`
A straight forward mapping to `<tr>` element.
Props:
- See inherited props: [Box](#box)
### `Table.Cell`
A straight forward mapping to `<td>` element.
Props:
- See inherited props: [Box](#box)
- `collapsing: boolean` - Collapses table cell to the smallest possible size,
and stops any text inside from wrapping.
### `Tabs`
Tabs make it easy to explore and switch between different views.
Here is an example of how you would construct a simple tabbed view:
```jsx
<Tabs>
<Tabs.Tab label="Item one">
Content for Item one.
</Tabs.Tab>
<Tabs.Tab label="Item two">
Content for Item two.
</Tabs.Tab>
</Tabs>
```
This is a rather simple example. In the real world, you might be
constructing very complex tabbed views which can tax UI performance.
This is because your tabs are being rendered regardless of their
visibility status!
There is a simple fix however. Tabs accept functions as children, which
will be called to retrieve content only when the tab is visible:
```jsx
<Tabs>
<Tabs.Tab key="tab_1" label="Item one">
{() => (
<Fragment>
Content for Item one.
</Fragment>
)}
</Tabs.Tab>
<Tabs.Tab key="tab_2" label="Item two">
{() => (
<Fragment>
Content for Item two.
</Fragment>
)}
</Tabs.Tab>
</Tabs>
```
You might not always need this, but it is highly recommended to always
use this method. Notice the `key` prop on tabs - it uniquely identifies
the tab and is used for determining which tab is currently active. It can
be either explicitly provided as a `key` prop, or if omitted, it will be
implicitly derived from the tab's `label` prop.
Props:
- `vertical: boolean` - Use a vertical configuration, where tabs will appear
stacked on the left side of the container.
- `children: Tab[]` - This component only accepts tabs as its children.
### `Tabs.Tab`
An individual tab element. Tabs function like buttons, so they inherit
a lot of `Button` props.
Props:
- See inherited props: [Button](#button)
- `key: string` - A unique identifier for the tab.
- `label: string` - Tab label.
- `icon: string` - Tab icon.
- `content/children: any` - Content to render inside the tab.
- `onClick: function` - Called when element is clicked.
### `Tooltip`
A boxy tooltip from tgui 1. It is very hacky in its current state, and
requires setting `position: relative` on the container.
Please note, that [Button](#button) component has a `tooltip` prop, and
it is recommended to use that prop instead.
Usage:
```jsx
<Box position="relative">
Sample text.
<Tooltip
position="bottom"
content="Box tooltip" />
</Box>
```
Props:
- `position: string` - Tooltip position.
- `content/children: string` - Content of the tooltip. Must be a plain string.
Fragments or other elements are **not** supported.
tgui-next/bin/tgui
+159
View File
@@ -0,0 +1,159 @@
#!/bin/bash
set -e
shopt -s globstar
shopt -s expand_aliases
## Initial set-up
## --------------------------------------------------------
## Returns an absolute path to file
alias tgui-realpath="readlink -f"
## Fallbacks for GNU readlink
## Detecting GNU coreutils http://stackoverflow.com/a/8748344/319952
if ! readlink --version >/dev/null 2>&1; then
if hash greadlink 2>/dev/null; then
alias tgui-realpath="greadlink -f"
else
alias tgui-realpath="perl -MCwd -le 'print Cwd::abs_path(shift)'"
fi
fi
## Find a canonical path to project root
base_dir="$(dirname "$(tgui-realpath "${0}")")/.."
base_dir="$(tgui-realpath "${base_dir}")"
## Add locally installed node programs to path
PATH="${PATH}:node_modules/.bin"
## Functions
## --------------------------------------------------------
## Installs node modules
task-install() {
cd "${base_dir}"
yarn install
}
## Runs webpack
task-webpack() {
cd "${base_dir}/packages/tgui"
webpack "${@}"
}
## Runs a development server
task-dev-server() {
cd "${base_dir}/packages/tgui-dev-server"
exec node --experimental-modules index.js "${@}"
}
## Run a linter through all packages
task-eslint() {
cd "${base_dir}"
eslint ./packages "${@}"
}
## Mr. Proper
task-clean() {
cd "${base_dir}"
rm -rf packages/tgui/public/.tmp
rm -rf **/node_modules
rm -f **/package-lock.json
}
## Installs merge drivers and git hooks
task-install-git-hooks() {
cd "${base_dir}"
local git_root
local git_base_dir
git_root="$(git rev-parse --show-toplevel)"
git_base_dir="${base_dir/${git_root}/.}"
git config --replace-all merge.tgui-merge-bundle.driver \
"${git_base_dir}/bin/tgui --merge=bundle %O %A %B %L"
echo "tgui: Merge drivers have been successfully installed!"
}
## Bundle merge driver
task-merge-bundle() {
local file_ancestor="${1}"
local file_current="${2}"
local file_other="${3}"
local conflict_marker_size="${4}"
echo "tgui: Discarding a local tgui build"
## Do nothing (file_current will be merged and is what we want to keep).
exit 0
}
## Main
## --------------------------------------------------------
if [[ ${1} == "--merge"* ]]; then
if [[ ${1} == "--merge=bundle" ]]; then
shift 1
task-merge-bundle "${@}"
fi
echo "Unknown merge strategy: ${1}"
exit 1
fi
if [[ ${1} == "--install-git-hooks" ]]; then
shift 1
task-install-git-hooks
exit 0
fi
## Continuous integration scenario
if [[ ${1} == "--ci" ]]; then
task-clean
task-install
task-eslint
task-webpack --mode=production
exit 0
fi
if [[ ${1} == "--clean" ]]; then
task-clean
exit 0
fi
if [[ ${1} == "--dev" ]]; then
shift
task-install
task-dev-server "${@}"
exit 0
fi
if [[ ${1} == '--lint' ]]; then
shift 1
task-install
task-eslint "${@}"
exit 0
fi
if [[ ${1} == '--lint-harder' ]]; then
shift 1
task-install
task-eslint -c .eslintrc-harder.yml "${@}"
exit 0
fi
## Analyze the bundle
if [[ ${1} == '--analyze' ]]; then
task-install
task-webpack --mode=production --analyze
exit 0
fi
## Make a production webpack build
if [[ -z ${1} ]]; then
task-install
task-eslint
task-webpack --mode=production
exit 0
fi
## Run webpack with custom flags
task-install
task-webpack "${@}"
tgui-next/bin/tgui-build.bat
+5
View File
@@ -0,0 +1,5 @@
@echo off
cd "%~dp0\.."
call yarn install
call yarn run build
timeout /t 9
tgui-next/bin/tgui-dev-server.bat
+4
View File
@@ -0,0 +1,4 @@
@echo off
cd "%~dp0\.."
call yarn install
call yarn run watch
tgui-next/docs/converting-old-tgui-interfaces.md
+322
View File
@@ -0,0 +1,322 @@
# Converting old tgui interfaces to tgui-next
This guide is going to assume you already know roughly how tgui-next works, how to make new uis, etc. It's mostly aimed at helping translate concepts between tgui and tgui-next, and clarify some confusing parts of the transition.
## Backend
Backend in almost every case does not require any changes. In particularly heavy ui cases, something to be aware of is the new `ui_static_data()` proc. This proc allows you to split some data sent to the interface off into data that will only be sent on ui initialize and when manually updated by elsewhere in the code. Useful for things like cargo where you have a very large set of mostly identical code.
Keep in mind that for uis where *all* data doesn't need to be live updating, you can just toggle off autoupdate for the ui instead of messing with static data.
## Frontend
The very first thing to note is the name of the `ract` file containing the old interface. Whatever the name is (minus the extension) is going to be what the route key is going to be.
One thing I like to do before starting work on a conversion is screenshot what the old interface looks like so I have something to reference to make sure that the styling can line up as well.
## General syntax changes
Ractive has a fairly different templating syntax from React.
### `data`
You likely already know that React data inserts look like this
```jsx
{data.example_data}
```
Ractive looks very similar, the only real difference is that React uses one paranthesis instead of two.
```ractive
{{data.example_data}}
```
However, you may occasionally come across data inserts that instead of referencing the `data` var or things contained within it instead reference `adata`. `adata` was short for animated data, and was used for smooth number animations in interfaces. instead of having a seperate data structure for this. tgui-next instead uses a component, which is `AnimatedNumber`.
`AnimatedNumber` is used like this
```jsx
<AnimatedNumber value={data.example_data}/>
```
Make sure you don't forget to import it.
### Conditionals
Ractive conditionals look very different from React conditionals.
A ractive `if` (only render if result of expression is true) looks like this
```ractive
{{#if data.condition}}
<span>Example Render</span>
{{/if}}
```
The equivalent React would be
```jsx
{!!data.condition && (
<Fragment>Example Render</Fragment>
)}
```
This might look a bit intimidating compared to the reactive part but it's not as complicated as it seems:
1. A new jsx context is opened with `{}`
2. jsx contexts like this always render whatever the return value is, so we can use `&&` to return a value we want. `&&` returns the last true value (or not "falsey" because this is js).
3. jsx tags are never "falsey", so a conditioned paired with a jsx tag will mean the condition being true will continue on and return the tag. `()` is just used to contain the tag
4. The `!!` is not a special operator, it is a literal double negation. This is because most `false` values coming from byond are going to actually be `0`, which would be rendered if the condition is false. Negating `0` returns `true`, negating `true` returns `false`, which isn't rendered.
5. `Fragment` is actually a true "dead tag". It's similar to `span` in that it just contains things without providing functionality, but it's unwrapped before the final render and children of it are injected into its parent. In a case where you only need to render text without any styling, it's probably better to just return a string literal (`"Example Render"`), but this was just to illustrate that you can put any tag in this expression.
You don't really need to know all this to understand how to use it, but I find it helps with understanding when things go wrong.
Ractive conditionals can have an `else` as well
```ractive
{{#if data.condition}}
value
{{else}}
other value
{{/if}}
```
Similarly to the previous example, just add a `||` operator to handle the
"falsy" condition:
```jsx
{!!data.condition && (
<Fragment>value</Fragment>
) || (
<Fragment>other value</Fragment>
)}
```
There's also our good old friend - the ternary:
```jsx
{data.condition ? 'value' : 'other value'}
```
Keep in mind you can also use tags here like the conditional example,
and you can mix string literals, values, and tags as well.
```jsx
{data.is_robot ? (
<Button content="Robot Button"/>
) : 'Not a robot'}
```
### Loops
Ractive has loops for iterating over data and inserting something for each
member of an array or object
```
{{#each data.list_of_foo}}
foo {{number}} is here.
{{/each}}
```
This didn't care whether the data was an array or an object, and members of each entry of the loop were "unwrapped" so to say. `{{number}}` in that example is referring to the `{{number}}` value on the entry of the list for that iterate.
The React equivalent to this is going to be `map`.
_AN IMPORTANT DISTINCTION HERE IS THAT NOW WE CARE WHETHER THIS IS AN OBJECT OR AN ARRAY BEING ACTED ON._
Objects are represented by `{}`, arrays by `[]`
"How can I tell?" you may ask. It's fairly simple, associated lists on the byond side are going to be turned into objects when they get json converted, normal lists are going to be turned into arrays.
`list("bla", "blo")` would become `["bla", "blo"]` and `list("foo" = 1, "bar" = 2)` would become `{"foo": 1, "bar": 2}`
First things first, above the `return` of the function you're making the interface in, you're going to want to add something like this
```jsx
const things = data.things || [];
```
This ensures that you'll never be reading a null entry by mistake. Substitute `{}` for objects as appropriate.
If it's an array, you'll want to do this in the template
```jsx
{things.map(thing => (
<Fragment>Thing {thing.number} is here!</Fragment>
))}
```
`map` is a function that calls a passed function (a lambda) on each entry, and returns the value. You should already know that returned tags and values (except `false`) get rendered, so that's how it's rendering each time.
A lambda is what's known as an anonymous function, it's a function that doesn't have a name that's only used for a specific usage. `map` wants a function that has one parameter, so we define one parameter then use `=>` to say the parameter has to do with the following block.
`parameter => ()` is just a shorthand for `parameter => {return();}`
This is quite a bit higher concept than ractive's each statements, so feel free to look around and ~~copy paste~~ learn from how other interfaces use this.
Now for objects, there's a genuinely pretty gross syntax here. We apoligize, it's related to ie8 compatibility nonsense.
```jsx
{map((value, key) => {
return (
<Fragment>Key is {key}, value is {value}</Fragment>
);
})(fooObject)}
```
Again, sorry for this syntax. `fooObject` would be the object being iterated on, value would be the value of the iterated entry on the list, and key would be the key. the naming of value and key isn't important here, but knowing that it goes `value`, `key` in that order is important.
It is sometimes better to preemptively convert an object to array before
the big return statement, like this:
```jsx
const fooArray = map((value, key) => {
return { key, value };
})(fooObject);
```
Or if you just want to discard all keys, this will also work nicely:
```jsx
const fooArray = toArray(fooObject);
```
Also occasionally you'd see an else:
```
{{#each data.potentially_empty_list}}
Thing "{{name}}" is in this list!
{{else}}
None found!
{{/each}}
```
This would iterate using the first contents each time, or display the second option if the list was empty.
To do a similar thing in JSX, just check if array is empty like this:
```jsx
{fooArray.length === 0 && 'fooArray is empty.'}
{fooArray.map(foo => (
<Fragment>Foo is {foo}</Fragment>
))}
```
### Extra Stuff
I'll put some extra stuff here when I think of it.
## Components
This will be a reference of tgui components and the tgui-next equivalent.
### `ui-display`
Equivalent of `<ui-display>` is `<Section>`
```
<ui-display title="Status">
Contents
</ui-display>
```
becomes
```jsx
<Section title="Status">
Contents
</Section>
```
A feature sometimes used is if `ui-display` has the `button` property, it will contain a `partial` command. This becomes the `buttons` property on `Section`:
```
<ui-display title="Status" button>
{{#partial button}}
<ui-button /> // lots more button bullshit here
{{/partial}}
Contents
</ui-display>
```
becomes
```jsx
<Section
title="Status"
buttons={(
<Button />
)}>
Contents
</Section>
```
### `ui-section`
Very important to note `ui-section` is NOT the equivalent of `Section`
`<ui-section>` does not have a direct equivalent, but the closest equivalent is `<LabeledList>`
```
<ui-section label="power">
No Power
</ui-section>
<ui-section label="connection">
No Connection
</ui-section>
```
becomes
```jsx
<LabeledList>
<LabeledList.Item label="power">
No Power
</LabeledList.Item>
<LabeledList.Item label="connection">
No Connection
</LabeledList.Item>
</LabeledList>
```
Important to note that `LabeledList.Item` has `buttons` as well.
Also good to know that if you need the contents of a `LabeledList.Item` to be colored, you can just set the `color` prop on it instead of putting a `span` inside it.
### `ui-notice`
`<ui-notice>` has a direct equivalent in `<NoticeBox>`
```
<ui-notice>
Notice stuff!
</ui-notice>
```
becomes
```jsx
<NoticeBox>
Notice stuff!
</NoticeBox>
```
### `ui-button`
The equivalent of `ui-button` is `Button` but it works quite a bit differently.
```
<ui-button
state='{{data.condition ? "disabled" : null}}'
action="ui_action"
params={param: value}>
Click
</ui-button>
```
becomes
```
<Button
content="Click"
disabled={data.condition}
onClick={() => act(ref, "ui_action", {param: value})}/>
```
tgui-next/docs/tutorial-and-examples.md
+245
View File
@@ -0,0 +1,245 @@
# Tutorial and Examples
## Main concepts
Basic tgui backend code consists of the following vars and procs:
```
ui_interact(mob/user, ui_key, datum/tgui/ui, force_open,
datum/tgui/master_ui, datum/ui_state/state)
ui_data(mob/user)
ui_act(action, params)
```
- `src_object` - The atom, which UI corresponds to in the game world.
- `ui_interact` - The proc where you will handle a request to open an
interface. Typically, you would update an existing UI (if it exists),
or set up a new instance of UI by calling the `SStgui` subsystem.
- `ui_data` - In this proc you munges whatever complex data your `src_object`
has into an associative list, which will then be sent to UI as a JSON string.
- `ui_act` - This proc receives user actions and reacts to them by changing
the state of the game.
- `ui_state` (set in `ui_interact`) - This var dictates under what conditions
a UI may be interacted with. This may be the standard checks that check if
you are in range and conscious, or more.
Once backend is complete, you create an new interface component on the
frontend, which will receive this JSON data and render it on screen.
States are easy to write and extend, and what make tgui interactions so
powerful. Because states can be overridden from other procs, you can build
powerful interactions for embedded objects or remote access.
## Using It
### Backend
Let's start with a very basic hello world.
```dm
/obj/machinery/my_machine/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/ui_state/state = default_state)
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
if(!ui)
ui = new(user, src, ui_key, "my_machine", name, 300, 300, master_ui, state)
ui.open()
```
This is the proc that defines our interface. There's a bit going on here, so
let's break it down. First, we override the ui_interact proc on our object. This
will be called by `interact` for you, which is in turn called by `attack_hand`
(or `attack_self` for items). `ui_interact` is also called to update a UI (hence
the `try_update_ui`), so we accept an existing UI to update. The `state` is a
default argument so that a caller can overload it with named arguments
(`ui_interact(state = overloaded_state)`) if needed.
Inside the `if(!ui)` block (which means we are creating a new UI), we choose our
template, title, and size; we can also set various options like `style` (for
themes), or autoupdate. These options will be elaborated on later (as will
`ui_state`s).
After `ui_interact`, we need to define `ui_data`. This just returns a list of
data for our object to use. Let's imagine our object has a few vars:
```dm
/obj/machinery/my_machine/ui_data(mob/user)
var/list/data = list()
data["health"] = health
data["color"] = color
return data
```
The `ui_data` proc is what people often find the hardest about tgui, but its
really quite simple! You just need to represent your object as numbers, strings,
and lists, instead of atoms and datums.
Finally, the `ui_act` proc is called by the interface whenever the user used an
input. The input's `action` and `params` are passed to the proc.
```dm
/obj/machinery/my_machine/ui_act(action, params)
if(..())
return
switch(action)
if("change_color")
var/new_color = params["color"]
if(!(color in allowed_coors))
return
color = new_color
. = TRUE
update_icon()
```
The `..()` (parent call) is very important here, as it is how we check that the
user is allowed to use this interface (to avoid so-called href exploits). It is
also very important to clamp and sanitize all input here. Always assume the user
is attempting to exploit the game.
Also note the use of `. = TRUE` (or `FALSE`), which is used to notify the UI
that this input caused an update. This is especially important for UIs that do
not auto-update, as otherwise the user will never see their change.
### Frontend
Finally, you have to make a UI component. This is also a source of
confusion for many new users. If you got some basic javascript and HTML
knowledge, that should ease the learning process, although we recommend
getting yourself introduced to
[React and JSX](https://reactjs.org/docs/introducing-jsx.html).
A component is not a regular HTML. A component is a pure function, which
accepts a `props` object (it contains properties passed to a component),
and outputs an HTML-like structure consisting of regular HTML elements and
other UI components.
Interface component will always receive 1 prop which is called `state`.
This object contains a few special values:
- `config` is always the same and is part of core tgui
(it will be explained later),
- `data` is the data returned from `ui_data`
```jsx
import { Section, LabeledList } from '../components';
const SampleInterface = props => {
const { state } = props;
const { config, data } = state;
const { ref } = config;
return (
<Section title="Health status">
<LabeledList>
<LabeledList.Item label="Health">
{data.health}
</LabeledList.Item>
<LabeledList.Item label="Color">
{data.color}
</LabeledList.Item>
</LabeledList>
</Section>
);
};
```
This syntax can be very confusing at first, but it is very important to
realize that this is just a natural extension of javascript. Here's a few
examples of this syntax:
Return a different element based on a condition:
```jsx
if (condition) {
return <Foo />;
}
return <Bar />;
```
Conditionally render a element inside of another element:
```jsx
<Box>
{showProgress && (
<ProgressBar value={progress} />
)}
</Box>
```
Looping over the array to make an element for each item:
```jsx
<LabeledList>
{items.map(item => (
<LabeledList.Item key={item.id} label={item.label}>
{item.content}
</LabeledList.Item>
))}
</LabeledList>
```
### Routing table
Once you finished creating your interface, you need to add a route entry to
the large `ROUTES` object, otherwise tgui won't know when and how to render
your interface. Key of this `ROUTES` object corresponds to the interface
name you use in DM code.
```js
import { SampleInterface } from './interfaces/SampleInterface';
const ROUTES = {
sample_interface: {
component: () => SampleInterface,
scrollable: true,
},
};
```
## Copypasta
We all do it, even the best of us. If you just want to make a tgui **fast**,
here's what you need (note that you'll probably be forced to clean your shit up
upon code review):
```dm
/obj/copypasta/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/ui_state/state = default_state) // Remember to use the appropriate state.
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
if(!ui)
ui = new(user, src, ui_key, "copypasta", name, 300, 300, master_ui, state)
ui.open()
/obj/copypasta/ui_data(mob/user)
var/list/data = list()
data["var"] = var
return data
/obj/copypasta/ui_act(action, params)
if(..())
return
if(action == "copypasta")
var/newvar = params["var"]
// A demo of proper input sanitation.
var = CLAMP(newvar, min_val, max_val)
return TRUE
update_icon() // Not applicable to all objects.
```
And the template:
```jsx
import { Section, LabeledList } from '../components';
const SampleInterface = props => {
const { state } = props;
const { config, data } = state;
const { ref } = config;
return (
<Section title="Section name">
<LabeledList>
<LabeledList.Item label="Variable">
{data.var}
</LabeledList.Item>
</LabeledList>
</Section>
);
};
```
tgui-next/package.json
+19
View File
@@ -0,0 +1,19 @@
{
"private": true,
"name": "tgui-next",
"version": "0.1.0",
"workspaces": [
"packages/*"
],
"scripts": {
"build": "eslint packages && cd packages/tgui && npx webpack --mode=production",
"watch": "cd packages/tgui-dev-server && node --experimental-modules index.js",
"analyze": "cd packages/tgui && npx webpack --mode=production --env.analyze=1",
"lint": "eslint packages"
},
"dependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-react": "^7.17.0"
}
}
tgui-next/packages/common/collections.js
+153
View File
@@ -0,0 +1,153 @@
/**
* Converts a given collection to an array.
*
* - Arrays are returned unmodified;
* - If object was provided, keys will be discarded;
* - Everything else will result in an empty array.
*/
export const toArray = collection => {
if (Array.isArray(collection)) {
return collection;
}
if (typeof collection === 'object') {
const hasOwnProperty = Object.prototype.hasOwnProperty;
const result = [];
for (let i in collection) {
if (hasOwnProperty.call(collection, i)) {
result.push(collection[i]);
}
}
return result;
}
return [];
};
/**
* Creates an array of values by running each element in collection
* thru an iteratee function. The iteratee is invoked with three
* arguments: (value, index|key, collection).
*
* If collection is 'null' or 'undefined', it will be returned "as is"
* without emitting any errors (which can be useful in some cases).
*/
export const map = iterateeFn => collection => {
if (collection === null && collection === undefined) {
return collection;
}
if (Array.isArray(collection)) {
const result = [];
for (let i = 0; i < collection.length; i++) {
result.push(iterateeFn(collection[i], i, collection));
}
return result;
}
if (typeof collection === 'object') {
const hasOwnProperty = Object.prototype.hasOwnProperty;
const result = [];
for (let i in collection) {
if (hasOwnProperty.call(collection, i)) {
result.push(iterateeFn(collection[i], i, collection));
}
}
return result;
}
throw new Error(`map() can't iterate on type ${typeof collection}`);
};
const COMPARATOR = (objA, objB) => {
const criteriaA = objA.criteria;
const criteriaB = objB.criteria;
const length = criteriaA.length;
for (let i = 0; i < length; i++) {
const a = criteriaA[i];
const b = criteriaB[i];
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
}
return 0;
};
/**
* Creates an array of elements, sorted in ascending order by the results
* of running each element in a collection thru each iteratee.
*
* Iteratees are called with one argument (value).
*/
export const sortBy = (...iterateeFns) => array => {
if (!Array.isArray(array)) {
return array;
}
let length = array.length;
// Iterate over the array to collect criteria to sort it by
let mappedArray = [];
for (let i = 0; i < length; i++) {
const value = array[i];
mappedArray.push({
criteria: iterateeFns.map(fn => fn(value)),
value,
});
}
// Sort criteria using the base comparator
mappedArray.sort(COMPARATOR);
// Unwrap values
while (length--) {
mappedArray[length] = mappedArray[length].value;
}
return mappedArray;
};
/**
* A fast implementation of reduce.
*/
export const reduce = (reducerFn, initialValue) => array => {
const length = array.length;
let i;
let result;
if (initialValue === undefined) {
i = 1;
result = array[0];
}
else {
i = 0;
result = initialValue;
}
for (; i < length; i++) {
result = reducerFn(result, array[i], i, array);
}
return result;
};
/**
* Creates an array of grouped elements, the first of which contains
* the first elements of the given arrays, the second of which contains
* the second elements of the given arrays, and so on.
*/
export const zip = (...arrays) => {
if (arrays.length === 0) {
return;
}
const numArrays = arrays.length;
const numValues = arrays[0].length;
const result = [];
for (let valueIndex = 0; valueIndex < numValues; valueIndex++) {
const entry = [];
for (let arrayIndex = 0; arrayIndex < numArrays; arrayIndex++) {
entry.push(arrays[arrayIndex][valueIndex]);
}
result.push(entry);
}
return result;
};
/**
* This method is like "zip" except that it accepts iteratee to
* specify how grouped values should be combined. The iteratee is
* invoked with the elements of each group.
*/
export const zipWith = iterateeFn => (...arrays) => {
return map(values => iterateeFn(...values))(zip(...arrays));
};
tgui-next/packages/common/fp.js
+41
View File
@@ -0,0 +1,41 @@
/**
* Creates a function that returns the result of invoking the given
* functions, where each successive invocation is supplied the return
* value of the previous.
*/
export const flow = (...funcs) => (input, ...rest) => {
let output = input;
for (let func of funcs) {
// Recurse into the array of functions
if (Array.isArray(func)) {
output = flow(...func)(output, ...rest);
}
else if (func) {
output = func(output, ...rest);
}
}
return output;
};
/**
* Composes single-argument functions from right to left.
*
* All functions might accept a context in form of additional arguments.
* If the resulting function is called with more than 1 argument, rest of
* the arguments are passed to all functions unchanged.
*
* @param {...Function} funcs The functions to compose
* @returns {Function} A function obtained by composing the argument functions
* from right to left. For example, compose(f, g, h) is identical to doing
* (input, ...rest) => f(g(h(input, ...rest), ...rest), ...rest)
*/
export const compose = (...funcs) => {
if (funcs.length === 0) {
return arg => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
return funcs.reduce((a, b) => (value, ...rest) =>
a(b(value, ...rest), ...rest));
};
tgui-next/packages/common/logging.js
+66
View File
@@ -0,0 +1,66 @@
const inception = Date.now();
// Runtime detection
const isNode = process && process.release && process.release.name === 'node';
let isChrome = false;
try {
isChrome = window.navigator.userAgent.toLowerCase().includes('chrome');
}
catch {}
// Timestamping function
const getTimestamp = () => {
const timestamp = String(Date.now() - inception)
.padStart(4, '0')
.padStart(7, ' ');
const seconds = timestamp.substr(0, timestamp.length - 3);
const millis = timestamp.substr(-3);
return `${seconds}.${millis}`;
};
const getPrefix = (() => {
if (isNode) {
// Escape sequences
const ESC = {
dimmed: '\x1b[38;5;240m',
bright: '\x1b[37;1m',
reset: '\x1b[0m',
};
return ns => [
`${ESC.dimmed}${getTimestamp()} ${ESC.bright}${ns}${ESC.reset}`,
];
}
if (isChrome) {
// Styles
const styles = {
dimmed: 'color: #888',
bright: 'font-weight: bold',
};
return ns => [
`%c${getTimestamp()}%c ${ns}`,
styles.dimmed,
styles.bright,
];
}
return ns => [
`${getTimestamp()} ${ns}`,
];
})();
/**
* Creates a logger object.
*/
export const createLogger = ns => ({
log: (...args) => console.log(...getPrefix(ns), ...args),
trace: (...args) => console.trace(...getPrefix(ns), ...args),
debug: (...args) => console.debug(...getPrefix(ns), ...args),
info: (...args) => console.info(...getPrefix(ns), ...args),
warn: (...args) => console.warn(...getPrefix(ns), ...args),
error: (...args) => console.error(...getPrefix(ns), ...args),
});
/**
* Explicitly log with chosen namespace.
*/
export const directLog = (ns, ...args) =>
console.log(...getPrefix(ns), ...args);
tgui-next/packages/common/math.js
+19
View File
@@ -0,0 +1,19 @@
/**
* Limits a number to the range between 'min' and 'max'.
*/
export const clamp = (value, min = 0, max = 1) => {
return Math.max(min, Math.min(value, max));
};
/**
* Returns a rounded number.
* TODO: Replace this native rounding function with a more robust one.
*/
export const round = value => Math.round(value);
/**
* Returns a string representing a number in fixed point notation.
*/
export const toFixed = (value, fractionDigits = 0) => {
return Number(value).toFixed(fractionDigits);
};
tgui-next/packages/common/package.json
+6
View File
@@ -0,0 +1,6 @@
{
"private": true,
"name": "common",
"version": "0.1.0",
"type": "module"
}
tgui-next/packages/common/react.js
Vendored
+67
View File
@@ -0,0 +1,67 @@
/**
* Helper for conditionally adding/removing classes in React
*
* @param {any[]} classNames
* @return {string}
*/
export const classes = classNames => {
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 const normalizeChildren = children => {
if (Array.isArray(children)) {
return children.flat().filter(value => value);
}
if (typeof children === 'object') {
return [children];
}
return [];
};
/**
* Shallowly checks if two objects are different.
* Credit: https://github.com/developit/preact-compat
*/
export const shallowDiffers = (a, b) => {
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;
};
/**
* Default inferno hooks for pure components.
*/
export const pureComponentHooks = {
onComponentShouldUpdate: (lastProps, nextProps) => {
return shallowDiffers(lastProps, nextProps);
},
};
/**
* A helper to determine whether to render an item.
*/
export const isFalsy = value => {
return value === undefined
|| value === null
|| value === false;
};
tgui-next/packages/common/redux.js
+65
View File
@@ -0,0 +1,65 @@
import { compose } from './fp';
/**
* Creates a Redux store.
*/
export const createStore = (reducer, enhancer) => {
// Apply a store enhancer (applyMiddleware is one of them).
if (enhancer) {
return enhancer(createStore)(reducer);
}
let currentState;
let listeners = [];
const getState = () => currentState;
const subscribe = listener => {
listeners.push(listener);
};
const dispatch = action => {
currentState = reducer(currentState, action);
listeners.forEach(fn => fn());
};
// This creates the initial store by causing each reducer to be called
// with an undefined state
dispatch({
type: '@@INIT',
});
return {
dispatch,
subscribe,
getState,
};
};
/**
* Creates a store enhancer which applies middleware to all dispatched
* actions.
*/
export const applyMiddleware = (...middlewares) => {
return createStore => (reducer, ...args) => {
const store = createStore(reducer, ...args);
let dispatch = () => {
throw new Error(
'Dispatching while constructing your middleware is not allowed.');
};
const storeApi = {
getState: store.getState,
dispatch: (action, ...args) => dispatch(action, ...args),
};
const chain = middlewares.map(middleware => middleware(storeApi));
dispatch = compose(...chain)(store.dispatch);
return {
...store,
dispatch,
};
};
};
tgui-next/packages/common/string.babel-plugin.cjs
+70
View File
@@ -0,0 +1,70 @@
/**
* @file
* We are using a .cjs extension because:
*
* 1. Webpack CLI only supports CommonJS modules;
* 2. tgui-dev-server supports both, but we still need to signal NodeJS
* to import it as a CommonJS module, hence .cjs extension.
*
* We need to copy-paste the whole "multiline" function because we can't
* synchronously import an ES module from a CommonJS module.
*
* This plugin saves overall about 10KB on the final bundle size, so it's
* sort of worth it.
*/
/**
* Removes excess whitespace and indentation from the string.
*/
const multiline = str => {
const lines = str.split('\n');
// Determine base indentation
let minIndent;
for (let line of lines) {
for (let indent = 0; indent < line.length; indent++) {
const char = line[indent];
if (char !== ' ') {
if (minIndent === undefined || indent < minIndent) {
minIndent = indent;
}
break;
}
}
}
if (!minIndent) {
minIndent = 0;
}
// Remove this base indentation and trim the resulting string
// from both ends.
return lines
.map(line => line.substr(minIndent).trimRight())
.join('\n')
.trim();
};
const StringPlugin = ref => {
return {
visitor: {
TaggedTemplateExpression: path => {
if (path.node.tag.name === 'multiline') {
const { quasi } = path.node;
if (quasi.expressions.length > 0) {
throw new Error('Multiline tag does not support expressions!');
}
if (quasi.quasis.length > 1) {
throw new Error('Quasis is longer than 1');
}
const { value } = quasi.quasis[0];
value.raw = multiline(value.raw);
value.cooked = multiline(value.cooked);
path.replaceWith(quasi);
}
},
},
};
};
module.exports = {
__esModule: true,
default: StringPlugin,
};
tgui-next/packages/common/string.js
+127
View File
@@ -0,0 +1,127 @@
/**
* Removes excess whitespace and indentation from the string.
*/
export const multiline = str => {
if (Array.isArray(str)) {
// Small stub to allow usage as a template tag
return multiline(str.join(''));
}
const lines = str.split('\n');
// Determine base indentation
let minIndent;
for (let line of lines) {
for (let indent = 0; indent < line.length; indent++) {
const char = line[indent];
if (char !== ' ') {
if (minIndent === undefined || indent < minIndent) {
minIndent = indent;
}
break;
}
}
}
if (!minIndent) {
minIndent = 0;
}
// Remove this base indentation and trim the resulting string
// from both ends.
return lines
.map(line => line.substr(minIndent).trimRight())
.join('\n')
.trim();
};
/**
* Matches strings with wildcards.
* Example: testGlobPattern('*@domain')('user@domain') === true
*/
export const testGlobPattern = pattern => {
const escapeString = str => str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
const regex = new RegExp('^'
+ pattern.split(/\*+/).map(escapeString).join('.*')
+ '$');
return str => regex.test(str);
};
export const capitalize = str => {
// Handle array
if (Array.isArray(str)) {
return str.map(capitalize);
}
// Handle string
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};
export const toTitleCase = str => {
// Handle array
if (Array.isArray(str)) {
return str.map(toTitleCase);
}
// Pass non-string
if (typeof str !== 'string') {
return str;
}
// Handle string
const WORDS_UPPER = ['Id', 'Tv'];
const WORDS_LOWER = [
'A', 'An', 'And', 'As', 'At', 'But', 'By', 'For', 'For', 'From', 'In',
'Into', 'Near', 'Nor', 'Of', 'On', 'Onto', 'Or', 'The', 'To', 'With',
];
let currentStr = str.replace(/([^\W_]+[^\s-]*) */g, str => {
return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
});
for (let word of WORDS_LOWER) {
const regex = new RegExp('\\s' + word + '\\s', 'g');
currentStr = currentStr.replace(regex, str => str.toLowerCase());
}
for (let word of WORDS_UPPER) {
const regex = new RegExp('\\b' + word + '\\b', 'g');
currentStr = currentStr.replace(regex, str => str.toLowerCase());
}
return currentStr;
};
/**
* Decodes HTML entities, and removes unnecessary HTML tags.
*
* @param {String} str Encoded HTML string
* @return {String} Decoded HTML string
*/
export const decodeHtmlEntities = str => {
if (!str) {
return str;
}
const translate_re = /&(nbsp|amp|quot|lt|gt|apos);/g;
const translate = {
nbsp: ' ',
amp: '&',
quot: '"',
lt: '<',
gt: '>',
apos: '\'',
};
return str
// Newline tags
.replace(/<br>/gi, '\n')
.replace(/<\/?[a-z0-9-_]+[^>]*>/gi, '')
// Basic entities
.replace(translate_re, (match, entity) => translate[entity])
// Decimal entities
.replace(/&#?([0-9]+);/gi, (match, numStr) => {
const num = parseInt(numStr, 10);
return String.fromCharCode(num);
})
// Hex entities
.replace(/&#x?([0-9a-f]+);/gi, (match, numStr) => {
const num = parseInt(numStr, 16);
return String.fromCharCode(num);
});
};
/**
* Converts an object into a query string,
*/
export const buildQueryString = obj => Object.keys(obj)
.map(key => encodeURIComponent(key)
+ '=' + encodeURIComponent(obj[key]))
.join('&');
tgui-next/packages/common/vector.js
+48
View File
@@ -0,0 +1,48 @@
import { map, reduce, zipWith } from './collections';
/**
* Creates a vector, with as many dimensions are there are arguments.
*/
export const vecCreate = (...components) => {
if (Array.isArray(components[0])) {
return [...components[0]];
}
return components;
};
const ADD = (a, b) => a + b;
const SUB = (a, b) => a - b;
const MUL = (a, b) => a * b;
const DIV = (a, b) => a / b;
export const vecAdd = (...vecs) => {
return reduce((a, b) => zipWith(ADD)(a, b))(vecs);
};
export const vecSubtract = (...vecs) => {
return reduce((a, b) => zipWith(SUB)(a, b))(vecs);
};
export const vecMultiply = (...vecs) => {
return reduce((a, b) => zipWith(MUL)(a, b))(vecs);
};
export const vecDivide = (...vecs) => {
return reduce((a, b) => zipWith(DIV)(a, b))(vecs);
};
export const vecScale = (vec, n) => {
return map(x => x * n)(vec);
};
export const vecInverse = vec => {
return map(x => -x)(vec);
};
export const vecLength = vec => {
return Math.sqrt(reduce(ADD)(zipWith(MUL)(vec, vec)));
};
export const vecNormalize = vec => {
return vecDivide(vec, vecLength(vec));
};
tgui-next/packages/tgui-dev-server/index.js
+22
View File
@@ -0,0 +1,22 @@
import { setupWebpack, getWebpackConfig } from './webpack.js';
import { reloadByondCache } from './reloader.js';
const noHot = process.argv.includes('--no-hot');
const reloadOnce = process.argv.includes('--reload');
const setupServer = async () => {
const config = await getWebpackConfig({
mode: 'development',
hot: !noHot,
});
// Reload cache once
if (reloadOnce) {
const bundleDir = config.output.path;
await reloadByondCache(bundleDir);
return;
}
// Run a development server
await setupWebpack(config);
};
setupServer();
tgui-next/packages/tgui-dev-server/link/client.js
+145
View File
@@ -0,0 +1,145 @@
let socket;
const queue = [];
const subscribers = [];
const ensureConnection = () => {
if (process.env.NODE_ENV !== 'production') {
if (!window.WebSocket) {
return;
}
if (!socket || socket.readyState === WebSocket.CLOSED) {
const DEV_SERVER_IP = process.env.DEV_SERVER_IP || '127.0.0.1';
socket = new WebSocket(`ws://${DEV_SERVER_IP}:3000`);
socket.onopen = () => {
// Empty the message queue
while (queue.length !== 0) {
const msg = queue.shift();
socket.send(msg);
}
};
socket.onmessage = event => {
const msg = JSON.parse(event.data);
for (let subscriber of subscribers) {
subscriber(msg);
}
};
}
}
};
if (process.env.NODE_ENV !== 'production') {
window.onunload = () => socket && socket.close();
}
const subscribe = fn => subscribers.push(fn);
/**
* A json serializer which handles circular references and other junk.
*/
const serializeObject = obj => {
let refs = [];
const json = JSON.stringify(obj, (key, value) => {
if (typeof value === 'object' && value !== null) {
// Circular reference
if (refs.includes(value)) {
return '[circular ref]';
}
refs.push(value);
// Error object
if (value instanceof Error) {
return {
__error__: true,
string: String(value),
stack: value.stack,
};
}
return value;
}
if (typeof value === 'number' && !Number.isFinite(value)) {
return {
__number__: String(value),
};
}
return value;
});
refs = null;
return json;
};
const sendRawMessage = msg => {
if (process.env.NODE_ENV !== 'production') {
const json = serializeObject(msg);
// Send message using WebSocket
if (window.WebSocket) {
ensureConnection();
if (socket.readyState === WebSocket.OPEN) {
socket.send(json);
}
else {
// Keep only 10 latest messages in the queue
if (queue.length > 10) {
queue.shift();
}
queue.push(json);
}
}
// Send message using plain HTTP request.
else {
const DEV_SERVER_IP = process.env.DEV_SERVER_IP || '127.0.0.1';
const req = new XMLHttpRequest();
req.open('POST', `http://${DEV_SERVER_IP}:3001`);
req.timeout = 500;
req.send(json);
}
}
};
export const sendLogEntry = (level, ns, ...args) => {
if (process.env.NODE_ENV !== 'production') {
try {
sendRawMessage({
type: 'log',
payload: {
level,
ns: ns || 'client',
args,
},
});
}
catch (err) {}
}
};
export const setupHotReloading = () => {
if (process.env.NODE_ENV !== 'production'
&& process.env.WEBPACK_HMR_ENABLED
&& window.WebSocket) {
if (module.hot) {
ensureConnection();
sendLogEntry(0, null, 'setting up hot reloading');
subscribe(msg => {
const { type } = msg;
sendLogEntry(0, null, 'received', type);
if (type === 'hotUpdate') {
const status = module.hot.status();
if (status !== 'idle') {
sendLogEntry(0, null, 'hot reload status:', status);
return;
}
module.hot
.check({
ignoreUnaccepted: true,
ignoreDeclined: true,
ignoreErrored: true,
})
.then(modules => {
sendLogEntry(0, null, 'outdated modules', modules);
})
.catch(err => {
sendLogEntry(0, null, 'reload error', err);
});
}
});
}
}
};
tgui-next/packages/tgui-dev-server/link/retrace.js
+76
View File
@@ -0,0 +1,76 @@
import { createLogger } from 'common/logging.js';
import fs from 'fs';
import { basename } from 'path';
import SourceMap from 'source-map';
import StackTraceParser from 'stacktrace-parser';
import { resolveGlob } from '../util.js';
const logger = createLogger('retrace');
const { SourceMapConsumer } = SourceMap;
const sourceMaps = [];
export const loadSourceMaps = async bundleDir => {
// Destroy and garbage collect consumers
while (sourceMaps.length !== 0) {
const { consumer } = sourceMaps.shift();
consumer.destroy();
}
// Load new sourcemaps
const paths = await resolveGlob(bundleDir, '*.map');
for (let path of paths) {
try {
const file = basename(path).replace('.map', '');
const consumer = await new SourceMapConsumer(
JSON.parse(fs.readFileSync(path, 'utf8')));
sourceMaps.push({ file, consumer });
}
catch (err) {
logger.error(err);
}
}
logger.log(`loaded ${sourceMaps.length} source maps`);
};
export const retrace = stack => {
const header = stack.split(/\n\s.*at/)[0];
const mappedStack = StackTraceParser.parse(stack)
.map(frame => {
if (!frame.file) {
return frame;
}
// Find the correct source map
const sourceMap = sourceMaps.find(sourceMap => {
return frame.file.includes(sourceMap.file);
});
if (!sourceMap) {
return frame;
}
// Map the frame
const { consumer } = sourceMap;
const mappedFrame = consumer.originalPositionFor({
source: basename(frame.file),
line: frame.lineNumber,
column: frame.column,
});
return {
...frame,
file: mappedFrame.source,
lineNumber: mappedFrame.line,
column: mappedFrame.column,
};
})
.map(frame => {
// Stringify the frame
const { file, methodName, lineNumber } = frame;
if (!file) {
return ` at ${methodName}`;
}
const compactPath = file
.replace(/^webpack:\/\/\/?/, './')
.replace(/.*node_modules\//, '');
return ` at ${methodName} (${compactPath}:${lineNumber})`;
})
.join('\n');
return header + '\n' + mappedStack;
};
tgui-next/packages/tgui-dev-server/link/server.js
+117
View File
@@ -0,0 +1,117 @@
import { createLogger, directLog } from 'common/logging.js';
import http from 'http';
import { inspect } from 'util';
import WebSocket from 'ws';
import { retrace, loadSourceMaps } from './retrace.js';
const logger = createLogger('link');
const DEBUG = process.argv.includes('--debug');
export { loadSourceMaps };
export const setupLink = () => {
logger.log('setting up');
const wss = setupWebSocketLink();
setupHttpLink();
return {
wss,
};
};
export const broadcastMessage = (link, msg) => {
const { wss } = link;
const clients = [...wss.clients];
logger.log(`broadcasting ${msg.type} to ${clients.length} clients`);
for (let client of clients) {
const json = JSON.stringify(msg);
client.send(json);
}
};
const deserializeObject = obj => {
return JSON.parse(obj, (key, value) => {
if (typeof value === 'object' && value !== null) {
if (value.__error__) {
return retrace(value.stack);
}
if (value.__number__) {
return parseFloat(value.__number__);
}
return value;
}
return value;
});
};
const handleLinkMessage = msg => {
const { type, payload } = msg;
if (type === 'log') {
const { level, ns, args } = payload;
// Skip debug messages
if (level <= 0 && !DEBUG) {
return;
}
directLog(ns, ...args.map(arg => {
if (typeof arg === 'object') {
return inspect(arg, {
depth: Infinity,
colors: true,
compact: 8,
});
}
return arg;
}));
return;
}
logger.log('unhandled message', msg);
};
// WebSocket-based client link
const setupWebSocketLink = () => {
const port = 3000;
const wss = new WebSocket.Server({ port });
wss.on('connection', ws => {
logger.log('client connected');
ws.on('message', json => {
const msg = deserializeObject(json);
handleLinkMessage(msg);
});
ws.on('close', () => {
logger.log('client disconnected');
});
});
logger.log(`listening on port ${port} (WebSocket)`);
return wss;
};
// One way HTTP-based client link for IE8
const setupHttpLink = () => {
const port = 3001;
const server = http.createServer((req, res) => {
if (req.method === 'POST') {
let body = '';
req.on('data', chunk => {
body += chunk.toString();
});
req.on('end', () => {
const msg = JSON.parse(body);
handleLinkMessage(msg);
res.end();
});
return;
}
res.write('Hello');
res.end();
});
server.listen(port);
logger.log(`listening on port ${port} (HTTP)`);
};
tgui-next/packages/tgui-dev-server/package.json
+12
View File
@@ -0,0 +1,12 @@
{
"private": true,
"name": "tgui-dev-server",
"version": "0.1.0",
"type": "module",
"dependencies": {
"glob": "^7.1.4",
"source-map": "^0.7.3",
"stacktrace-parser": "^0.1.7",
"ws": "^7.1.2"
}
}
tgui-next/packages/tgui-dev-server/reloader.js
+66
View File
@@ -0,0 +1,66 @@
import { createLogger } from 'common/logging.js';
import fs from 'fs';
import os from 'os';
import { basename } from 'path';
import { promisify } from 'util';
import { resolveGlob, resolvePath } from './util.js';
const logger = createLogger('reloader');
const HOME = os.homedir();
const SEARCH_LOCATIONS = [
// Windows
`${HOME}/*/BYOND/cache`,
// Wine
`${HOME}/.wine/drive_c/users/*/*/BYOND/cache`,
// Lutris
`${HOME}/Games/byond/drive_c/users/*/*/BYOND/cache`,
// WSL
`/mnt/c/Users/*/*/BYOND/cache`,
];
let cacheRoot;
export const findCacheRoot = async () => {
if (cacheRoot) {
return cacheRoot;
}
logger.log('looking for byond cache');
// Find BYOND cache folders
for (let pattern of SEARCH_LOCATIONS) {
const paths = await resolveGlob(pattern);
if (paths.length > 0) {
cacheRoot = paths[0];
logger.log(`found cache at '${cacheRoot}'`);
return cacheRoot;
}
}
logger.log('found no cache directories');
};
export const reloadByondCache = async bundleDir => {
const cacheRoot = await findCacheRoot();
if (!cacheRoot) {
return;
}
// Find tmp folders in cache
const cacheDirs = await resolveGlob(cacheRoot, './tmp*');
if (cacheDirs.length === 0) {
logger.log('found no tmp folder in cache');
return;
}
const assets = await resolveGlob(bundleDir, './*.+(bundle|hot-update).*');
for (let cacheDir of cacheDirs) {
// Clear garbage
const garbage = await resolveGlob(cacheDir, './*.+(bundle|hot-update).*');
for (let file of garbage) {
await promisify(fs.unlink)(file);
}
// Copy assets
for (let asset of assets) {
const destination = resolvePath(cacheDir, basename(asset));
await promisify(fs.copyFile)(asset, destination);
}
logger.log(`copied ${assets.length} files to '${cacheDir}'`);
}
};
tgui-next/packages/tgui-dev-server/util.js
+26
View File
@@ -0,0 +1,26 @@
import glob from 'glob';
import { resolve as resolvePath } from 'path';
import fs from 'fs';
import { promisify } from 'util';
export { resolvePath };
/**
* Combines path.resolve with glob patterns.
*/
export const resolveGlob = async (...sections) => {
const unsafePaths = await promisify(glob)(
resolvePath(...sections), {
strict: false,
silent: true,
});
const safePaths = [];
for (let path of unsafePaths) {
try {
await promisify(fs.stat)(path);
safePaths.push(path);
}
catch {}
}
return safePaths;
};
tgui-next/packages/tgui-dev-server/webpack.js
+54
View File
@@ -0,0 +1,54 @@
import { createLogger } from 'common/logging.js';
import fs from 'fs';
import { createRequire } from 'module';
import { promisify } from 'util';
import webpack from 'webpack';
import { broadcastMessage, loadSourceMaps, setupLink } from './link/server.js';
import { reloadByondCache } from './reloader.js';
import { resolveGlob } from './util.js';
const logger = createLogger('webpack');
export const getWebpackConfig = async options => {
const require = createRequire(import.meta.url);
const createConfig = await require('../tgui/webpack.config.js');
return createConfig({}, options);
};
export const setupWebpack = async config => {
logger.log('setting up');
const bundleDir = config.output.path;
// Setup link
const link = setupLink();
// Instantiate the compiler
const compiler = webpack(config);
// Clear garbage before compiling
compiler.hooks.watchRun.tapPromise('tgui-dev-server', async () => {
const files = await resolveGlob(bundleDir, './*.hot-update.*');
logger.log(`clearing garbage (${files.length} files)`);
for (let file of files) {
await promisify(fs.unlink)(file);
}
logger.log('compiling');
});
// Start reloading when it's finished
compiler.hooks.done.tap('tgui-dev-server', async stats => {
// Load source maps
await loadSourceMaps(bundleDir);
// Reload cache
await reloadByondCache(bundleDir);
// Notify all clients that update has happened
broadcastMessage(link, {
type: 'hotUpdate',
});
});
// Start watching
logger.log('watching for changes');
compiler.watch({}, (err, stats) => {
if (err) {
logger.error('compilation error', err);
return;
}
logger.log(stats.toString(config.devServer.stats));
});
};
tgui-next/packages/tgui/assets/bg-nanotrasen.svg
+8
View File
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 425 200" opacity=".33">
<path d="m 178.00399,0.03869 -71.20393,0 a 6.7613422,6.0255495 0 0 0 -6.76134,6.02555 l 0,187.87147 a 6.7613422,6.0255495 0 0 0 6.76134,6.02554 l 53.1072,0 a 6.7613422,6.0255495 0 0 0 6.76135,-6.02554 l 0,-101.544018 72.21628,104.699398 a 6.7613422,6.0255495 0 0 0 5.76015,2.87016 l 73.55487,0 a 6.7613422,6.0255495 0 0 0 6.76135,-6.02554 l 0,-187.87147 a 6.7613422,6.0255495 0 0 0 -6.76135,-6.02555 l -54.71644,0 a 6.7613422,6.0255495 0 0 0 -6.76133,6.02555 l 0,102.61935 L 183.76413,2.90886 a 6.7613422,6.0255495 0 0 0 -5.76014,-2.87017 z" />
<path d="M 4.8446333,22.10875 A 13.412039,12.501842 0 0 1 13.477588,0.03924 l 66.118315,0 a 5.3648158,5.000737 0 0 1 5.364823,5.00073 l 0,79.87931 z" />
<path d="m 420.15535,177.89119 a 13.412038,12.501842 0 0 1 -8.63295,22.06951 l -66.11832,0 a 5.3648152,5.000737 0 0 1 -5.36482,-5.00074 l 0,-79.87931 z" />
</svg>
<!-- This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. -->
<!-- http://creativecommons.org/licenses/by-sa/4.0/ -->
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

tgui-next/packages/tgui/assets/bg-syndicate.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 200 289.742" opacity=".33">
<path d="m 93.537677,0 c -18.113125,0 -34.220133,3.11164 -48.323484,9.33437 -13.965092,6.22167 -24.612442,15.07114 -31.940651,26.5471 -7.1899398,11.33789 -10.3012266,24.74911 -10.3012266,40.23478 0,10.64662 2.7250026,20.46465 8.1751116,29.45258 5.615277,8.98686 14.038277,17.35204 25.268821,25.09436 11.230544,7.60531 26.507421,15.41835 45.830514,23.43782 19.983748,8.29557 34.848848,15.55471 44.592998,21.77638 9.74414,6.22273 16.7617,12.8585 21.05572,19.90951 4.29404,7.05208 6.44193,15.76408 6.44193,26.13459 0,16.17702 -5.20196,28.48222 -15.60673,36.91682 -10.2396,8.4347 -25.02203,12.6523 -44.345169,12.6523 -14.038171,0 -25.515247,-1.6594 -34.433618,-4.9777 -8.91837,-3.4566 -16.185572,-8.7113 -21.800839,-15.7633 -5.615277,-7.0521 -10.074795,-16.66088 -13.377899,-28.82812 l -24.7731626293945,0 0,56.82632 C 33.856769,286.07601 63.74904,289.74201 89.678383,289.74201 c 16.020027,0 30.719787,-1.3827 44.097337,-4.1479 13.54272,-2.9043 25.1041,-7.4676 34.68309,-13.6893 9.74413,-6.3597 17.34042,-14.5195 22.79052,-24.4748 5.4501,-10.09332 8.17511,-22.39959 8.17511,-36.91682 0,-12.99764 -3.3021,-24.33539 -9.90829,-34.0146 -6.44105,-9.81725 -15.52545,-18.52707 -27.25146,-26.13133 -11.56085,-7.60427 -27.91083,-15.83142 -49.05066,-24.68022 -17.50644,-7.19012 -30.719668,-13.68948 -39.638038,-19.49701 -8.918371,-5.80752 -18.607474,-12.43409 -24.096524,-18.87417 -5.426043,-6.36616 -9.658826,-15.07003 -9.658826,-24.88729 0,-9.26401 2.075414,-17.21345 6.223454,-23.85033 11.098298,-14.39748 41.286638,-1.79507 45.075609,24.34762 4.839392,6.77491 8.84935,16.24729 12.029515,28.4156 l 20.53234,0 0,-55.99967 c -4.47825,-5.92448 -9.95488,-10.63222 -15.90837,-14.37411 1.64055,0.47905 3.19039,1.02376 4.63865,1.64024 6.49861,2.62607 12.16793,7.32747 17.0073,14.10345 4.83939,6.77491 8.84935,16.24567 12.02952,28.41397 0,0 8.48128,-0.12894 8.48978,-0.002 0.41776,6.41494 -1.75339,9.45286 -4.12342,12.56104 -2.4174,3.16978 -5.14486,6.78973 -4.00278,13.0029 1.50786,8.20318 10.18354,10.59642 14.62194,9.31154 -3.31842,-0.49911 -5.31855,-1.74948 -5.31855,-1.74948 0,0 1.87646,0.99868 5.65117,-1.35981 -3.27695,0.95571 -10.70529,-0.79738 -11.80125,-6.76313 -0.95752,-5.20861 0.94654,-7.29514 3.40113,-10.51482 2.45462,-3.21968 5.28426,-6.95831 4.6843,-14.48824 l 0.003,0.002 8.92676,0 0,-55.99967 c -15.07125,-3.87168 -27.65314,-6.36042 -37.74671,-7.46586 -9.95531,-1.10755 -20.18823,-1.65981 -30.696613,-1.65981 z m 70.321603,17.30893 0.23805,40.3049 c 1.31808,1.22666 2.43965,2.27815 3.34081,3.10602 4.83939,6.77491 8.84934,16.24566 12.02951,28.41397 l 20.53234,0 0,-55.99967 c -6.67731,-4.59381 -19.83643,-10.47309 -36.14071,-15.82522 z m -28.12049,5.60551 8.56479,17.71655 c -11.97037,-6.46697 -13.84678,-9.71726 -8.56479,-17.71655 z m 22.79705,0 c 2.7715,7.99929 1.78741,11.24958 -4.49354,17.71655 l 4.49354,-17.71655 z m 15.22195,24.00848 8.56479,17.71655 c -11.97038,-6.46697 -13.84679,-9.71726 -8.56479,-17.71655 z m 22.79704,0 c 2.7715,7.99929 1.78741,11.24958 -4.49354,17.71655 l 4.49354,-17.71655 z m -99.11384,2.20764 8.56479,17.71655 c -11.970382,-6.46697 -13.846782,-9.71726 -8.56479,-17.71655 z m 22.79542,0 c 2.7715,7.99929 1.78741,11.24958 -4.49354,17.71655 l 4.49354,-17.71655 z" />
</svg>
<!-- This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. -->
<!-- http://creativecommons.org/licenses/by-sa/4.0/ -->
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

tgui-next/packages/tgui/backend.js
+95
View File
@@ -0,0 +1,95 @@
import { UI_DISABLED, UI_INTERACTIVE } from './constants';
import { tridentVersion, act as _act } from './byond';
/**
* This file provides a clear separation layer between backend updates
* and what state our React app sees.
*
* Sometimes backend can response without a "data" field, but our final
* state will still contain previous "data" because we are merging
* the response with already existing state.
*/
/**
* Creates a backend update action.
*/
export const backendUpdate = state => ({
type: 'backendUpdate',
payload: state,
});
/**
* Precisely defines state changes.
*/
export const backendReducer = (state, action) => {
const { type, payload } = action;
if (type === 'backendUpdate') {
// Merge config
const config = {
...state.config,
...payload.config,
};
// Merge data
const data = {
...state.data,
...payload.static_data,
...payload.data,
};
// Calculate our own fields
const visible = config.status !== UI_DISABLED;
const interactive = config.status === UI_INTERACTIVE;
// Return new state
return {
...state,
config,
data,
visible,
interactive,
};
}
return state;
};
/**
* @typedef BackendState
* @type {{
* config: {
* title: string,
* status: number,
* screen: string,
* style: string,
* interface: string,
* fancy: number,
* locked: number,
* observer: number,
* window: string,
* ref: string,
* },
* data: any,
* visible: boolean,
* interactive: boolean,
* }}
*/
/**
* A React hook (sort of) for getting tgui state and related functions.
*
* This is supposed to be replaced with a real React Hook, which can only
* be used in functional components. DO NOT use it in class-based components!
*
* @return {BackendState & {
* act: (action: string, params?: object) => void,
* }}
*/
export const useBackend = props => {
// TODO: Dispatch "act" calls as Redux actions
const { state, dispatch } = props;
const ref = state.config.ref;
const act = (action, params = {}) => _act(ref, action, params);
return {
...state,
act,
};
};
tgui-next/packages/tgui/byond.js
+84
View File
@@ -0,0 +1,84 @@
import { buildQueryString } from 'common/string';
/**
* Version of Trident engine used in Internet Explorer.
*
* - IE 8 - Trident 4.0
* - IE 11 - Trident 7.0
*
* @return An integer number or 'null' if this is not a trident engine.
*/
export const tridentVersion = (() => {
const { userAgent } = navigator;
const groups = userAgent.match(/Trident\/(\d+).+?;/i);
const majorVersion = groups[1];
if (!majorVersion) {
return null;
}
return parseInt(majorVersion, 10);
})();
/**
* Helper to generate a BYOND href given 'params' as an object
* (with an optional 'url' for eg winset).
*/
const href = (url, params = {}) => {
return 'byond://' + url + '?' + buildQueryString(params);
};
export const callByond = (url, params = {}) => {
window.location.href = href(url, params);
};
/**
* A high-level abstraction of BYJAX. Makes a call to BYOND and returns
* a promise, which (if endpoint has a callback parameter) resolves
* with the return value of that call.
*/
export const callByondAsync = (url, params = {}) => {
// Create a callback array if it doesn't exist yet
window.__callbacks__ = window.__callbacks__ || [];
// Create a Promise and push its resolve function into callback array
const callbackIndex = window.__callbacks__.length;
const promise = new Promise(resolve => {
// TODO: Fix a potential memory leak
window.__callbacks__.push(resolve);
});
// Call BYOND client
window.location.href = href(url, {
...params,
callback: `__callbacks__[${callbackIndex}]`,
});
return promise;
};
/**
* Literally types a command on the client.
*/
export const runCommand = command => callByond('winset', { command });
/**
* Helper to make a BYOND ui_act() call on the UI 'src' given an 'action'
* and optional 'params'.
*/
export const act = (src, action, params = {}) => {
return callByond('', { src, action, ...params });
};
/**
* Calls 'winget' on window, retrieving value by the 'key'.
*/
export const winget = async (win, key) => {
const obj = await callByondAsync('winget', {
id: win,
property: key,
});
return obj[key];
};
/**
* Calls 'winset' on window, setting 'key' to 'value'.
*/
export const winset = (win, key, value) => callByond('winset', {
[`${win}.${key}`]: value,
});
tgui-next/packages/tgui/components/AnimatedNumber.js
+77
View File
@@ -0,0 +1,77 @@
import { clamp, toFixed } from 'common/math';
import { Component } from 'inferno';
const FPS = 20;
const Q = 0.5;
const isSafeNumber = value => {
return typeof value === 'number'
&& Number.isFinite(value)
&& !Number.isNaN(value);
};
export class AnimatedNumber extends Component {
constructor(props) {
super(props);
this.timer = null;
this.state = {
value: 0,
};
// Use provided initial state
if (isSafeNumber(props.initial)) {
this.state.value = props.initial;
}
// Set initial state with value provided in props
else if (isSafeNumber(props.value)) {
this.state.value = Number(props.value);
}
}
tick() {
const { props, state } = this;
const currentValue = Number(state.value);
const targetValue = Number(props.value);
// Avoid poisoning our state with infinities and NaN
if (!isSafeNumber(targetValue)) {
return;
}
// Smooth the value using an exponential moving average
const value = currentValue * Q + targetValue * (1 - Q);
this.setState({ value });
}
componentDidMount() {
this.timer = setInterval(() => this.tick(), 1000 / FPS);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
const { props, state } = this;
const { format, children } = props;
const currentValue = state.value;
const targetValue = props.value;
// Directly display values which can't be animated
if (!isSafeNumber(targetValue)) {
return targetValue || null;
}
let formattedValue = currentValue;
// Use custom formatter
if (format) {
formattedValue = format(currentValue);
}
// Fix our animated precision at target value's precision.
else {
const fraction = String(targetValue).split('.')[1];
const precision = fraction ? fraction.length : 0;
formattedValue = toFixed(currentValue, clamp(precision, 0, 8));
}
// Use a custom render function
if (typeof children === 'function') {
return children(formattedValue, currentValue);
}
return formattedValue;
}
}
tgui-next/packages/tgui/components/BlockQuote.js
+14
View File
@@ -0,0 +1,14 @@
import { classes } from 'common/react';
import { Box } from './Box';
export const BlockQuote = props => {
const { className, ...rest } = props;
return (
<Box
className={classes([
'BlockQuote',
className,
])}
{...rest} />
);
};
tgui-next/packages/tgui/components/Box.js
+186
View File
@@ -0,0 +1,186 @@
import { classes, isFalsy, pureComponentHooks } from 'common/react';
import { createVNode } from 'inferno';
import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
import { CSS_COLORS } from '../constants';
const UNIT_PX = 6;
/**
* Coverts our rem-like spacing unit into a CSS unit.
*/
export const unit = value => {
if (typeof value === 'string') {
return value;
}
if (typeof value === 'number') {
return (value * UNIT_PX) + 'px';
}
};
const isColorCode = str => !isColorClass(str);
const isColorClass = str => typeof str === 'string'
&& CSS_COLORS.includes(str);
const mapRawPropTo = attrName => (style, value) => {
if (!isFalsy(value)) {
style[attrName] = value;
}
};
const mapUnitPropTo = attrName => (style, value) => {
if (!isFalsy(value)) {
style[attrName] = unit(value);
}
};
const mapBooleanPropTo = (attrName, attrValue) => (style, value) => {
if (!isFalsy(value)) {
style[attrName] = attrValue;
}
};
const mapDirectionalUnitPropTo = (attrName, dirs) => (style, value) => {
if (!isFalsy(value)) {
for (let i = 0; i < dirs.length; i++) {
style[attrName + '-' + dirs[i]] = unit(value);
}
}
};
const mapColorPropTo = attrName => (style, value) => {
if (isColorCode(value)) {
style[attrName] = value;
}
};
const styleMapperByPropName = {
// Direct mapping
position: mapRawPropTo('position'),
overflow: mapRawPropTo('overflow'),
overflowX: mapRawPropTo('overflow-x'),
overflowY: mapRawPropTo('overflow-y'),
top: mapUnitPropTo('top'),
bottom: mapUnitPropTo('bottom'),
left: mapUnitPropTo('left'),
right: mapUnitPropTo('right'),
width: mapUnitPropTo('width'),
minWidth: mapUnitPropTo('min-width'),
maxWidth: mapUnitPropTo('max-width'),
height: mapUnitPropTo('height'),
minHeight: mapUnitPropTo('min-height'),
maxHeight: mapUnitPropTo('max-height'),
fontSize: mapUnitPropTo('font-size'),
fontFamily: mapRawPropTo('font-family'),
lineHeight: mapUnitPropTo('line-height'),
opacity: mapRawPropTo('opacity'),
textAlign: mapRawPropTo('text-align'),
verticalAlign: mapRawPropTo('vertical-align'),
// Boolean props
inline: mapBooleanPropTo('display', 'inline-block'),
bold: mapBooleanPropTo('font-weight', 'bold'),
italic: mapBooleanPropTo('font-style', 'italic'),
nowrap: mapBooleanPropTo('white-space', 'nowrap'),
// Margins
m: mapDirectionalUnitPropTo('margin', ['top', 'bottom', 'left', 'right']),
mx: mapDirectionalUnitPropTo('margin', ['left', 'right']),
my: mapDirectionalUnitPropTo('margin', ['top', 'bottom']),
mt: mapUnitPropTo('margin-top'),
mb: mapUnitPropTo('margin-bottom'),
ml: mapUnitPropTo('margin-left'),
mr: mapUnitPropTo('margin-right'),
// Color props
color: mapColorPropTo('color'),
textColor: mapColorPropTo('color'),
backgroundColor: mapColorPropTo('background-color'),
// Utility props
fillPositionedParent: (style, value) => {
if (value) {
style['position'] = 'absolute';
style['top'] = 0;
style['bottom'] = 0;
style['left'] = 0;
style['right'] = 0;
}
},
};
export const computeBoxProps = props => {
const computedProps = {};
const computedStyles = {};
// Compute props
for (let propName of Object.keys(props)) {
if (propName === 'style') {
continue;
}
const propValue = props[propName];
const mapPropToStyle = styleMapperByPropName[propName];
if (mapPropToStyle) {
mapPropToStyle(computedStyles, propValue);
}
else {
computedProps[propName] = propValue;
}
}
// Concatenate styles
Object.assign(computedStyles, props.style);
let style = '';
for (let attrName of Object.keys(computedStyles)) {
const attrValue = computedStyles[attrName];
style += attrName + ':' + attrValue + ';';
}
if (style.length > 0) {
computedProps.style = style;
}
return computedProps;
};
export const Box = props => {
const {
as = 'div',
className,
content,
children,
...rest
} = props;
const color = props.textColor || props.color;
const backgroundColor = props.backgroundColor;
// Render props
if (typeof children === 'function') {
return children(computeBoxProps(props));
}
const computedProps = computeBoxProps(rest);
// Render a wrapper element
return createVNode(
VNodeFlags.HtmlElement,
as,
classes([
className,
isColorClass(color) && 'color-' + color,
isColorClass(backgroundColor) && 'color-bg-' + backgroundColor,
]),
content || children,
ChildFlags.UnknownChildren,
computedProps);
};
Box.defaultHooks = pureComponentHooks;
/**
* A hack to force certain things (like tables) to position correctly
* inside bugged things, like Flex in Internet Explorer.
*/
const ForcedBox = props => {
const { children, ...rest } = props;
return (
<Box position="relative" {...rest}>
<Box fillPositionedParent>
{children}
</Box>
</Box>
);
};
ForcedBox.defaultHooks = pureComponentHooks;
Box.Forced = ForcedBox;
tgui-next/packages/tgui/components/Button.js
+257
View File
@@ -0,0 +1,257 @@
import { classes, pureComponentHooks } from 'common/react';
import { tridentVersion, act } from '../byond';
import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from '../hotkeys';
import { createLogger } from '../logging';
import { refocusLayout } from '../refocus';
import { Box } from './Box';
import { Icon } from './Icon';
import { Tooltip } from './Tooltip';
import { Input } from './Input';
import { Component, createRef } from 'inferno';
import { Grid } from './Grid';
const logger = createLogger('Button');
export const Button = props => {
const {
className,
fluid,
icon,
color,
disabled,
selected,
tooltip,
tooltipPosition,
ellipsis,
content,
iconRotation,
iconSpin,
children,
onclick,
onClick,
...rest
} = props;
const hasContent = !!(content || children);
// A warning about the lowercase onclick
if (onclick) {
logger.warn(
`Lowercase 'onclick' is not supported on Button and lowercase`
+ ` prop names are discouraged in general. Please use a camelCase`
+ `'onClick' instead and read: `
+ `https://infernojs.org/docs/guides/event-handling`);
}
// IE8: Use a lowercase "onclick" because synthetic events are fucked.
// IE8: Use an "unselectable" prop because "user-select" doesn't work.
return (
<Box as="span"
className={classes([
'Button',
fluid && 'Button--fluid',
disabled && 'Button--disabled',
selected && 'Button--selected',
hasContent && 'Button--hasContent',
ellipsis && 'Button--ellipsis',
(color && typeof color === 'string')
? 'Button--color--' + color
: 'Button--color--default',
className,
])}
tabIndex={!disabled && '0'}
unselectable={tridentVersion <= 4}
onclick={e => {
refocusLayout();
if (!disabled && onClick) {
onClick(e);
}
}}
onKeyDown={e => {
const keyCode = window.event ? e.which : e.keyCode;
// Simulate a click when pressing space or enter.
if (keyCode === KEY_SPACE || keyCode === KEY_ENTER) {
e.preventDefault();
if (!disabled && onClick) {
onClick(e);
}
return;
}
// Refocus layout on pressing escape.
if (keyCode === KEY_ESCAPE) {
e.preventDefault();
refocusLayout();
return;
}
}}
{...rest}>
{icon && (
<Icon name={icon} rotation={iconRotation} spin={iconSpin} />
)}
{content}
{children}
{tooltip && (
<Tooltip
content={tooltip}
position={tooltipPosition} />
)}
</Box>
);
};
Button.defaultHooks = pureComponentHooks;
export const ButtonCheckbox = props => {
const { checked, ...rest } = props;
return (
<Button
color="transparent"
icon={checked ? 'check-square-o' : 'square-o'}
selected={checked}
{...rest} />
);
};
Button.Checkbox = ButtonCheckbox;
export class ButtonConfirm extends Component {
constructor() {
super();
this.state = {
clickedOnce: false,
};
this.handleClick = () => {
if (this.state.clickedOnce) {
this.setClickedOnce(false);
}
};
}
setClickedOnce(clickedOnce) {
this.setState({
clickedOnce,
});
if (clickedOnce) {
setTimeout(() => window.addEventListener('click', this.handleClick));
}
else {
window.removeEventListener('click', this.handleClick);
}
}
render() {
const {
confirmMessage = "Confirm?",
confirmColor = "bad",
color,
content,
onClick,
...rest
} = this.props;
return (
<Button
content={this.state.clickedOnce ? confirmMessage : content}
color={this.state.clickedOnce ? confirmColor : color}
onClick={() => this.state.clickedOnce
? onClick()
: this.setClickedOnce(true)}
{...rest}
/>
);
}
}
Button.Confirm = ButtonConfirm;
export class ButtonInput extends Component {
constructor() {
super();
this.inputRef = createRef();
this.state = {
inInput: false,
};
}
setInInput(inInput) {
this.setState({
inInput,
});
if (this.inputRef) {
const input = this.inputRef.current;
if (inInput) {
input.value = this.props.currentValue || "";
try {
input.focus();
input.select();
}
catch {}
}
}
}
commitResult(e) {
if (this.inputRef) {
const input = this.inputRef.current;
const hasValue = (input.value !== "");
if (hasValue) {
this.props.onCommit(e, input.value);
return;
} else {
if (!this.props.defaultValue) {
return;
}
this.props.onCommit(e, this.props.defaultValue);
}
}
}
render() {
const {
fluid,
content,
color = 'default',
placeholder,
maxLength,
...rest
} = this.props;
return (
<Box
className={classes([
'Button',
fluid && 'Button--fluid',
'Button--color--' + color,
])}
{...rest}
onClick={() => this.setInInput(true)}>
<div>
{content}
</div>
<input
ref={this.inputRef}
className="NumberInput__input"
style={{
'display': !this.state.inInput ? 'none' : undefined,
'text-align': 'left',
}}
onBlur={e => {
if (!this.state.inInput) {
return;
}
this.setInInput(false);
this.commitResult(e);
}}
onKeyDown={e => {
if (e.keyCode === KEY_ENTER) {
this.setInInput(false);
this.commitResult(e);
return;
}
if (e.keyCode === KEY_ESCAPE) {
this.setInInput(false);
}
}}
/>
</Box>
);
}
}
Button.Input = ButtonInput;
tgui-next/packages/tgui/components/Chart.js
Vendored
+121
View File
@@ -0,0 +1,121 @@
import { map, zipWith } from 'common/collections';
import { Component, createRef } from 'inferno';
import { Box } from './Box';
import { pureComponentHooks } from 'common/react';
import { tridentVersion } from '../byond';
const normalizeData = (data, scale, rangeX, rangeY) => {
if (data.length === 0) {
return [];
}
const min = zipWith(Math.min)(...data);
const max = zipWith(Math.max)(...data);
if (rangeX !== undefined) {
min[0] = rangeX[0];
max[0] = rangeX[1];
}
if (rangeY !== undefined) {
min[1] = rangeY[0];
max[1] = rangeY[1];
}
const normalized = map(point => {
return zipWith((value, min, max, scale) => {
return (value - min) / (max - min) * scale;
})(point, min, max, scale);
})(data);
return normalized;
};
const dataToPolylinePoints = data => {
let points = '';
for (let i = 0; i < data.length; i++) {
const point = data[i];
points += point[0] + ',' + point[1] + ' ';
}
return points;
};
class LineChart extends Component {
constructor(props) {
super(props);
this.ref = createRef();
this.state = {
// Initial guess
viewBox: [600, 200],
};
this.handleResize = () => {
const element = this.ref.current;
this.setState({
viewBox: [element.offsetWidth, element.offsetHeight],
});
};
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
const {
data = [],
rangeX,
rangeY,
fillColor = 'none',
strokeColor = '#ffffff',
strokeWidth = 2,
...rest
} = this.props;
const { viewBox } = this.state;
const normalized = normalizeData(data, viewBox, rangeX, rangeY);
// Push data outside viewBox and form a fillable polygon
if (normalized.length > 0) {
const first = normalized[0];
const last = normalized[normalized.length - 1];
normalized.push([viewBox[0] + strokeWidth, last[1]]);
normalized.push([viewBox[0] + strokeWidth, -strokeWidth]);
normalized.push([-strokeWidth, -strokeWidth]);
normalized.push([-strokeWidth, first[1]]);
}
const points = dataToPolylinePoints(normalized);
return (
<Box position="relative" {...rest}>
{props => (
<div ref={this.ref} {...props}>
<svg
viewBox={`0 0 ${viewBox[0]} ${viewBox[1]}`}
preserveAspectRatio="none"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
overflow: 'hidden',
}}>
<polyline
transform={`scale(1, -1) translate(0, -${viewBox[1]})`}
fill={fillColor}
stroke={strokeColor}
strokeWidth={strokeWidth}
points={points} />
</svg>
</div>
)}
</Box>
);
}
}
LineChart.defaultHooks = pureComponentHooks;
const Stub = props => null;
// IE8: No inline svg support
export const Chart = {
Line: tridentVersion <= 4 ? Stub : LineChart,
};
tgui-next/packages/tgui/components/Collapsible.js
+51
View File
@@ -0,0 +1,51 @@
import { Component } from 'inferno';
import { Box } from './Box';
import { Button } from './Button';
export class Collapsible extends Component {
constructor(props) {
super(props);
const { open } = props;
this.state = {
open: open || false,
};
}
render() {
const { props } = this;
const { open } = this.state;
const {
children,
color = 'default',
title,
buttons,
...rest
} = props;
return (
<Box mb={1}>
<div className="Table">
<div className="Table__cell">
<Button
fluid
color={color}
icon={open ? 'chevron-down' : 'chevron-right'}
onClick={() => this.setState({ open: !open })}
{...rest}>
{title}
</Button>
</div>
{buttons && (
<div className="Table__cell Table__cell--collapsing">
{buttons}
</div>
)}
</div>
{open && (
<Box mt={1}>
{children}
</Box>
)}
</Box>
);
}
}
tgui-next/packages/tgui/components/ColorBox.js
+19
View File
@@ -0,0 +1,19 @@
import { classes, pureComponentHooks } from 'common/react';
import { Box } from './Box';
export const ColorBox = props => {
const { color, content, className, ...rest } = props;
return (
<Box
className={classes([
'ColorBox',
className,
])}
color={content ? null : 'transparent'}
backgroundColor={color}
content={content || '.'}
{...rest} />
);
};
ColorBox.defaultHooks = pureComponentHooks;
tgui-next/packages/tgui/components/Dimmer.js
+19
View File
@@ -0,0 +1,19 @@
import { Box } from './Box';
export const Dimmer = props => {
const { style, ...rest } = props;
return (
<Box
style={{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
'background-color': 'rgba(0, 0, 0, 0.75)',
'z-index': 1,
...style,
}}
{...rest} />
);
};
tgui-next/packages/tgui/components/Dropdown.js
+115
View File
@@ -0,0 +1,115 @@
import { classes } from 'common/react';
import { Component, createRef } from 'inferno';
import { Box } from './Box';
import { Icon } from './Icon';
export class Dropdown extends Component {
constructor(props) {
super(props);
this.state = {
selected: props.selected,
open: false,
};
this.handleClick = () => {
if (this.state.open) {
this.setOpen(false);
}
};
}
componentWillUnmount() {
window.removeEventListener('click', this.handleClick);
}
setOpen(open) {
this.setState({ open: open });
if (open) {
setTimeout(() => window.addEventListener('click', this.handleClick));
this.menuRef.focus();
}
else {
window.removeEventListener('click', this.handleClick);
}
}
setSelected(selected) {
this.setState({
selected: selected,
});
this.setOpen(false);
this.props.onSelected(selected);
}
buildMenu() {
const { options = [] } = this.props;
const ops = options.map(option => (
<div
key={option}
className="Dropdown__menuentry"
onClick={e => {
this.setSelected(option);
}}>
{option}
</div>
));
return ops.length ? ops : 'No Options Found';
}
render() {
const { props } = this;
const {
color = 'default',
over,
width,
onClick,
selected,
...boxProps
} = props;
const {
className,
...rest
} = boxProps;
const adjustedOpen = over ? !this.state.open : this.state.open;
const menu = this.state.open ? (
<div
ref={menu => { this.menuRef = menu; }}
tabIndex="-1"
style={{
'width': width,
}}
className={classes([
'Dropdown__menu',
over && 'Dropdown__over',
])}>
{this.buildMenu()}
</div>
) : null;
return (
<div className="Dropdown">
<Box
width={width}
className={classes([
'Dropdown__control',
'Button',
'Button--color--' + color,
className,
])}
{...rest}
onClick={e => {
this.setOpen(!this.state.open);
}}>
<span className="Dropdown__selected-text">
{this.state.selected}
</span>
<span className="Dropdown__arrow-button">
<Icon name={adjustedOpen ? 'chevron-up' : 'chevron-down'} />
</span>
</Box>
{menu}
</div>
);
}
}
tgui-next/packages/tgui/components/Flex.js
+66
View File
@@ -0,0 +1,66 @@
import { classes, pureComponentHooks } from 'common/react';
import { Box } from './Box';
export const computeFlexProps = props => {
const {
className,
direction,
wrap,
align,
justify,
spacing = 0,
...rest
} = props;
return {
className: classes([
'Flex',
spacing > 0 && 'Flex--spacing--' + spacing,
className,
]),
style: {
...rest.style,
'flex-direction': direction,
'flex-wrap': wrap,
'align-items': align,
'justify-content': justify,
},
...rest,
};
};
export const Flex = props => (
<Box {...computeFlexProps(props)} />
);
Flex.defaultHooks = pureComponentHooks;
export const computeFlexItemProps = props => {
const {
className,
grow,
order,
align,
...rest
} = props;
return {
className: classes([
'Flex__item',
className,
]),
style: {
...rest.style,
'flex-grow': grow,
'order': order,
'align-self': align,
},
...rest,
};
};
export const FlexItem = props => (
<Box {...computeFlexItemProps(props)} />
);
FlexItem.defaultHooks = pureComponentHooks;
Flex.Item = FlexItem;
tgui-next/packages/tgui/components/Grid.js
+31
View File
@@ -0,0 +1,31 @@
import { Table } from './Table';
import { pureComponentHooks } from 'common/react';
export const Grid = props => {
const { children, ...rest } = props;
return (
<Table {...rest}>
<Table.Row>
{children}
</Table.Row>
</Table>
);
};
Grid.defaultHooks = pureComponentHooks;
export const GridColumn = props => {
const { size = 1, style, ...rest } = props;
return (
<Table.Cell
style={{
width: size + '%',
...style,
}}
{...rest} />
);
};
Grid.defaultHooks = pureComponentHooks;
Grid.Column = GridColumn;
tgui-next/packages/tgui/components/Icon.js
+30
View File
@@ -0,0 +1,30 @@
import { classes, pureComponentHooks } from 'common/react';
import { Box } from './Box';
const FA_OUTLINE_REGEX = /-o$/;
export const Icon = props => {
const { name, size, spin, className, style = {}, rotation, ...rest } = props;
if (size) {
style['font-size'] = (size * 100) + '%';
}
if (typeof rotation === 'number') {
style['transform'] = `rotate(${rotation}deg)`;
}
const faRegular = FA_OUTLINE_REGEX.test(name);
const faName = name.replace(FA_OUTLINE_REGEX, '');
return (
<Box
as="i"
className={classes([
className,
faRegular ? 'far' : 'fas',
'fa-' + faName,
spin && 'fa-spin',
])}
style={style}
{...rest} />
);
};
Icon.defaultHooks = pureComponentHooks;
tgui-next/packages/tgui/components/Input.js
+138
View File
@@ -0,0 +1,138 @@
import { classes, isFalsy } from 'common/react';
import { Component, createRef } from 'inferno';
import { Box } from './Box';
const toInputValue = value => {
if (isFalsy(value)) {
return '';
}
return value;
};
export class Input extends Component {
constructor() {
super();
this.inputRef = createRef();
this.state = {
editing: false,
};
this.handleInput = e => {
const { editing } = this.state;
const { onInput } = this.props;
if (!editing) {
this.setEditing(true);
}
if (onInput) {
onInput(e, e.target.value);
}
};
this.handleFocus = e => {
const { editing } = this.state;
if (!editing) {
this.setEditing(true);
}
};
this.handleBlur = e => {
const { editing } = this.state;
const { onChange } = this.props;
if (editing) {
this.setEditing(false);
if (onChange) {
onChange(e, e.target.value);
}
}
};
this.handleKeyDown = e => {
const { onInput, onChange, onEnter } = this.props;
if (e.keyCode === 13) {
this.setEditing(false);
if (onChange) {
onChange(e, e.target.value);
}
if (onInput) {
onInput(e, e.target.value);
}
if (onEnter) {
onEnter(e, e.target.value);
}
if (this.props.selfClear) {
e.target.value = '';
} else {
e.target.blur();
}
return;
}
if (e.keyCode === 27) {
this.setEditing(false);
e.target.value = toInputValue(this.props.value);
e.target.blur();
return;
}
};
}
componentDidMount() {
const nextValue = this.props.value;
const input = this.inputRef.current;
if (input) {
input.value = toInputValue(nextValue);
}
}
componentDidUpdate(prevProps, prevState) {
const { editing } = this.state;
const prevValue = prevProps.value;
const nextValue = this.props.value;
const input = this.inputRef.current;
if (input && !editing && prevValue !== nextValue) {
input.value = toInputValue(nextValue);
}
}
setEditing(editing) {
this.setState({ editing });
}
render() {
const { props } = this;
// Input only props
const {
selfClear,
onInput,
onChange,
onEnter,
value,
maxLength,
placeholder,
...boxProps
} = props;
// Box props
const {
className,
fluid,
...rest
} = boxProps;
return (
<Box
className={classes([
'Input',
fluid && 'Input--fluid',
className,
])}
{...rest}>
<div className="Input__baseline">
.
</div>
<input
ref={this.inputRef}
className="Input__input"
placeholder={placeholder}
onInput={this.handleInput}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
maxLength={maxLength} />
</Box>
);
}
}
tgui-next/packages/tgui/components/LabeledList.js
+75
View File
@@ -0,0 +1,75 @@
import { classes, pureComponentHooks } from 'common/react';
import { Box, unit } from './Box';
export const LabeledList = props => {
const { children } = props;
return (
<table className="LabeledList">
{children}
</table>
);
};
LabeledList.defaultHooks = pureComponentHooks;
export const LabeledListItem = props => {
const {
className,
label,
labelColor = 'label',
color,
buttons,
content,
children,
} = props;
return (
<tr
className={classes([
'LabeledList__row',
className,
])}>
<Box
as="td"
color={labelColor}
className={classes([
'LabeledList__cell',
'LabeledList__label',
])}
content={label + ':'} />
<Box
as="td"
color={color}
className={classes([
'LabeledList__cell',
'LabeledList__content',
])}
colSpan={buttons ? undefined : 2}>
{content}
{children}
</Box>
{buttons && (
<td className="LabeledList__cell LabeledList__buttons">
{buttons}
</td>
)}
</tr>
);
};
LabeledListItem.defaultHooks = pureComponentHooks;
export const LabeledListDivider = props => {
const { size = 1 } = props;
return (
<tr className="LabeledList__row">
<td style={{
'padding-bottom': unit(size),
}} />
</tr>
);
};
LabeledListDivider.defaultHooks = pureComponentHooks;
LabeledList.Item = LabeledListItem;
LabeledList.Divider = LabeledListDivider;
tgui-next/packages/tgui/components/NoticeBox.js
+16
View File
@@ -0,0 +1,16 @@
import { classes, pureComponentHooks } from 'common/react';
import { Box } from './Box';
export const NoticeBox = props => {
const { className, ...rest } = props;
return (
<Box
className={classes([
'NoticeBox',
className,
])}
{...rest} />
);
};
NoticeBox.defaultHooks = pureComponentHooks;
tgui-next/packages/tgui/components/NumberInput.js
+259
View File
@@ -0,0 +1,259 @@
import { clamp } from 'common/math';
import { classes, pureComponentHooks } from 'common/react';
import { Component, createRef } from 'inferno';
import { tridentVersion } from '../byond';
import { AnimatedNumber } from './AnimatedNumber';
import { Box } from './Box';
export class NumberInput extends Component {
constructor(props) {
super(props);
const { value } = props;
this.inputRef = createRef();
this.state = {
value,
dragging: false,
editing: false,
internalValue: null,
origin: null,
suppressingFlicker: false,
};
// Suppresses flickering while the value propagates through the backend
this.flickerTimer = null;
this.suppressFlicker = () => {
const { suppressFlicker } = this.props;
if (suppressFlicker > 0) {
this.setState({
suppressingFlicker: true,
});
clearTimeout(this.flickerTimer);
this.flickerTimer = setTimeout(() => this.setState({
suppressingFlicker: false,
}), suppressFlicker);
}
};
this.handleDragStart = e => {
const { value } = this.props;
const { editing } = this.state;
if (editing) {
return;
}
document.body.style['pointer-events'] = 'none';
this.ref = e.target;
this.setState({
dragging: false,
origin: e.screenY,
value,
internalValue: value,
});
this.timer = setTimeout(() => {
this.setState({
dragging: true,
});
}, 250);
this.dragInterval = setInterval(() => {
const { dragging, value } = this.state;
const { onDrag } = this.props;
if (dragging && onDrag) {
onDrag(e, value);
}
}, 500);
document.addEventListener('mousemove', this.handleDragMove);
document.addEventListener('mouseup', this.handleDragEnd);
};
this.handleDragMove = e => {
const { minValue, maxValue, step, stepPixelSize } = this.props;
this.setState(prevState => {
const state = { ...prevState };
const offset = state.origin - e.screenY;
if (prevState.dragging) {
const stepOffset = Number.isFinite(minValue)
? minValue % step
: 0;
// Translate mouse movement to value
// Give it some headroom (by increasing clamp range by 1 step)
state.internalValue = clamp(
state.internalValue + offset * step / stepPixelSize,
minValue - step, maxValue + step);
// Clamp the final value
state.value = clamp(
state.internalValue
- state.internalValue % step
+ stepOffset,
minValue, maxValue);
state.origin = e.screenY;
}
else if (Math.abs(offset) > 4) {
state.dragging = true;
}
return state;
});
};
this.handleDragEnd = e => {
const { onChange, onDrag } = this.props;
const { dragging, value, internalValue } = this.state;
document.body.style['pointer-events'] = 'auto';
clearTimeout(this.timer);
clearInterval(this.dragInterval);
this.setState({
dragging: false,
editing: !dragging,
origin: null,
});
document.removeEventListener('mousemove', this.handleDragMove);
document.removeEventListener('mouseup', this.handleDragEnd);
if (dragging) {
this.suppressFlicker();
if (onChange) {
onChange(e, value);
}
if (onDrag) {
onDrag(e, value);
}
}
else if (this.inputRef) {
const input = this.inputRef.current;
input.value = internalValue;
// IE8: Dies when trying to focus a hidden element
// (Error: Object does not support this action)
try {
input.focus();
input.select();
}
catch {}
}
};
}
render() {
const {
dragging,
editing,
value: intermediateValue,
suppressingFlicker,
} = this.state;
const {
className,
fluid,
animated,
value,
unit,
minValue,
maxValue,
height,
width,
lineHeight,
fontSize,
format,
onChange,
onDrag,
} = this.props;
let displayValue = value;
if (dragging || suppressingFlicker) {
displayValue = intermediateValue;
}
// IE8: Use an "unselectable" prop because "user-select" doesn't work.
const renderContentElement = value => (
<div
className="NumberInput__content"
unselectable={tridentVersion <= 4}>
{value + (unit ? ' ' + unit : '')}
</div>
);
const contentElement = (animated && !dragging && !suppressingFlicker && (
<AnimatedNumber
value={displayValue}
format={format}>
{renderContentElement}
</AnimatedNumber>
) || (
renderContentElement(format ? format(displayValue) : displayValue)
));
return (
<Box
className={classes([
'NumberInput',
fluid && 'NumberInput--fluid',
className,
])}
minWidth={width}
minHeight={height}
lineHeight={lineHeight}
fontSize={fontSize}
onMouseDown={this.handleDragStart}>
<div className="NumberInput__barContainer">
<div
className="NumberInput__bar"
style={{
height: clamp(
(displayValue - minValue) / (maxValue - minValue) * 100,
0, 100) + '%',
}} />
</div>
{contentElement}
<input
ref={this.inputRef}
className="NumberInput__input"
style={{
display: !editing ? 'none' : undefined,
height: height,
'line-height': lineHeight,
'font-size': fontSize,
}}
onBlur={e => {
if (!editing) {
return;
}
const value = clamp(e.target.value, minValue, maxValue);
this.setState({
editing: false,
value,
});
this.suppressFlicker();
if (onChange) {
onChange(e, value);
}
if (onDrag) {
onDrag(e, value);
}
}}
onKeyDown={e => {
if (e.keyCode === 13) {
const value = clamp(e.target.value, minValue, maxValue);
this.setState({
editing: false,
value,
});
this.suppressFlicker();
if (onChange) {
onChange(e, value);
}
if (onDrag) {
onDrag(e, value);
}
return;
}
if (e.keyCode === 27) {
this.setState({
editing: false,
});
return;
}
}} />
</Box>
);
}
}
NumberInput.defaultHooks = pureComponentHooks;
NumberInput.defaultProps = {
minValue: -Infinity,
maxValue: +Infinity,
step: 1,
stepPixelSize: 1,
suppressFlicker: 50,
};
tgui-next/packages/tgui/components/ProgressBar.js
+50
View File
@@ -0,0 +1,50 @@
import { classes, pureComponentHooks } from 'common/react';
import { clamp, toFixed } from 'common/math';
export const ProgressBar = props => {
const {
value,
minValue = 0,
maxValue = 1,
ranges = {},
content,
children,
} = props;
const scaledValue = (value - minValue) / (maxValue - minValue);
const hasContent = content !== undefined || children !== undefined;
let { color } = props;
// Cycle through ranges in key order to determine progressbar color.
if (!color) {
for (let rangeName of Object.keys(ranges)) {
const range = ranges[rangeName];
if (range && value >= range[0] && value <= range[1]) {
color = rangeName;
break;
}
}
}
// Default color
if (!color) {
color = 'default';
}
return (
<div
className={classes([
'ProgressBar',
'ProgressBar--color--' + color,
])}>
<div
className="ProgressBar__fill"
style={{
'width': (clamp(scaledValue, 0, 1) * 100) + '%',
}} />
<div className="ProgressBar__content">
{hasContent && content}
{hasContent && children}
{!hasContent && toFixed(scaledValue * 100) + '%'}
</div>
</div>
);
};
ProgressBar.defaultHooks = pureComponentHooks;
tgui-next/packages/tgui/components/Section.js
+44
View File
@@ -0,0 +1,44 @@
import { classes, isFalsy, pureComponentHooks } from 'common/react';
import { Box } from './Box';
export const Section = props => {
const {
className,
title,
level = 1,
buttons,
content,
children,
...rest
} = props;
const hasTitle = !isFalsy(title) || !isFalsy(buttons);
const hasContent = !isFalsy(content) || !isFalsy(children);
return (
<Box
className={classes([
'Section',
'Section--level--' + level,
className,
])}
{...rest}>
{hasTitle && (
<div className="Section__title">
<span className="Section__titleText">
{title}
</span>
<div className="Section__buttons">
{buttons}
</div>
</div>
)}
{hasContent && (
<div className="Section__content">
{content}
{children}
</div>
)}
</Box>
);
};
Section.defaultHooks = pureComponentHooks;
tgui-next/packages/tgui/components/Table.js
+59
View File
@@ -0,0 +1,59 @@
import { classes, pureComponentHooks } from 'common/react';
import { Box } from './Box';
export const Table = props => {
const { collapsing, className, content, children, ...rest } = props;
return (
<Box
as="table"
className={classes([
'Table',
collapsing && 'Table--collapsing',
className,
])}
{...rest}>
<tbody>
{content}
{children}
</tbody>
</Box>
);
};
Table.defaultHooks = pureComponentHooks;
export const TableRow = props => {
const { className, header, ...rest } = props;
return (
<Box
as="tr"
className={classes([
'Table__row',
header && 'Table__row--header',
className,
])}
{...rest} />
);
};
TableRow.defaultHooks = pureComponentHooks;
export const TableCell = props => {
const { className, collapsing, header, ...rest } = props;
return (
<Box
as="td"
className={classes([
'Table__cell',
collapsing && 'Table__cell--collapsing',
header && 'Table__cell--header',
className,
])}
{...rest} />
);
};
TableCell.defaultHooks = pureComponentHooks;
Table.Row = TableRow;
Table.Cell = TableCell;
tgui-next/packages/tgui/components/Tabs.js
+135
View File
@@ -0,0 +1,135 @@
import { classes, normalizeChildren } from 'common/react';
import { Component } from 'inferno';
import { Box } from './Box';
import { Button } from './Button';
// A magic value for enforcing type safety
const TAB_MAGIC_TYPE = 'Tab';
const validateTabs = tabs => {
for (let tab of tabs) {
if (!tab.props || tab.props.__type__ !== TAB_MAGIC_TYPE) {
const json = JSON.stringify(tab, null, 2);
throw new Error('<Tabs> only accepts children of type <Tabs.Tab>.'
+ 'This is what we received: ' + json);
}
}
};
export class Tabs extends Component {
constructor(props) {
super(props);
this.state = {
activeTabKey: null,
};
}
getActiveTab() {
const { state, props } = this;
const tabs = normalizeChildren(props.children);
validateTabs(tabs);
// Get active tab
let activeTabKey = props.activeTab || state.activeTabKey;
// Verify that active tab exists
let activeTab = tabs
.find(tab => {
const key = tab.key || tab.props.label;
return key === activeTabKey;
});
// Set first tab as the active tab
if (!activeTab) {
activeTab = tabs[0];
activeTabKey = activeTab && (activeTab.key || activeTab.props.label);
}
return {
tabs,
activeTab,
activeTabKey,
};
}
render() {
const { props } = this;
const {
className,
vertical,
children,
...rest
} = props;
const {
tabs,
activeTab,
activeTabKey,
} = this.getActiveTab();
// Retrieve tab content
let content = null;
if (activeTab) {
content = activeTab.props.content || activeTab.props.children;
}
// Get children by calling a wrapper function
if (typeof content === 'function') {
content = content(activeTabKey);
}
return (
<Box
className={classes([
'Tabs',
vertical && 'Tabs--vertical',
className,
])}
{...rest}>
<div className="Tabs__tabBox">
{tabs.map(tab => {
const {
className,
label,
content, // ignored
children, // ignored
onClick,
highlight,
...rest
} = tab.props;
const key = tab.key || tab.props.label;
const active = tab.active || key === activeTabKey;
return (
<Button
key={key}
className={classes([
'Tabs__tab',
active && 'Tabs__tab--active',
highlight && !active && 'color-yellow',
className,
])}
selected={active}
color="transparent"
onClick={e => {
this.setState({ activeTabKey: key });
if (onClick) {
onClick(e, tab);
}
}}
{...rest}>
{label}
</Button>
);
})}
</div>
<div className="Tabs__content">
{content || null}
</div>
</Box>
);
}
}
/**
* A dummy component, which is used for carrying props for the
* tab container.
*/
export const Tab = props => null;
Tab.defaultProps = {
__type__: TAB_MAGIC_TYPE,
};
Tabs.Tab = Tab;
tgui-next/packages/tgui/components/TitleBar.js
+51
View File
@@ -0,0 +1,51 @@
import { classes, pureComponentHooks } from 'common/react';
import { toTitleCase } from 'common/string';
import { tridentVersion } from '../byond';
import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
import { Icon } from './Icon';
const statusToColor = status => {
switch (status) {
case UI_INTERACTIVE:
return 'good';
case UI_UPDATE:
return 'average';
case UI_DISABLED:
default:
return 'bad';
}
};
export const TitleBar = props => {
const { className, title, status, fancy, onDragStart, onClose } = props;
return (
<div
className={classes([
'TitleBar',
className,
])}>
<Icon
className="TitleBar__statusIcon"
color={statusToColor(status)}
name="eye" />
<div className="TitleBar__title">
{title === title.toLowerCase() ? toTitleCase(title) : title}
</div>
<div
className="TitleBar__dragZone"
onMousedown={e => fancy && onDragStart(e)} />
{!!fancy && (
<div
className="TitleBar__close TitleBar__clickable"
// IE8: Synthetic onClick event doesn't work on IE8.
// IE8: Use a plain character instead of a unicode symbol.
// eslint-disable-next-line react/no-unknown-property
onclick={onClose}>
{tridentVersion <= 4 ? 'x' : '×'}
</div>
)}
</div>
);
};
TitleBar.defaultHooks = pureComponentHooks;
tgui-next/packages/tgui/components/Toast.js
+57
View File
@@ -0,0 +1,57 @@
import { pureComponentHooks } from 'common/react';
export const Toast = props => {
const { content, children } = props;
return (
<div className="Layout__toast">
{content}
{children}
</div>
);
};
Toast.defaultHooks = pureComponentHooks;
let toastTimeout;
/**
* Shows a toast at the bottom of the screen.
*
* Takes the store's dispatch function, and text as a second argument.
*/
export const showToast = (dispatch, text) => {
if (toastTimeout) {
clearTimeout(toastTimeout);
}
toastTimeout = setTimeout(() => {
toastTimeout = undefined;
dispatch({
type: 'hideToast',
});
}, 5000);
dispatch({
type: 'showToast',
payload: { text },
});
};
export const toastReducer = (state, action) => {
const { type, payload } = action;
if (type === 'showToast') {
const { text } = payload;
return {
...state,
toastText: text,
};
}
if (type === 'hideToast') {
return {
...state,
toastText: null,
};
}
return state;
};
tgui-next/packages/tgui/components/Tooltip.js
+20
View File
@@ -0,0 +1,20 @@
import { classes } from 'common/react';
export const Tooltip = props => {
const {
content,
position = 'bottom',
} = props;
// Empirically calculated length of the string,
// at which tooltip text starts to overflow.
const long = typeof content === 'string' && content.length > 35;
return (
<div
className={classes([
'Tooltip',
long && 'Tooltip--long',
position && 'Tooltip--' + position,
])}
data-tooltip={content} />
);
};
tgui-next/packages/tgui/components/index.js
+23
View File
@@ -0,0 +1,23 @@
export { AnimatedNumber } from './AnimatedNumber';
export { BlockQuote } from './BlockQuote';
export { Box } from './Box';
export { Button } from './Button';
export { ColorBox } from './ColorBox';
export { Collapsible } from './Collapsible';
export { Dimmer } from './Dimmer';
export { Dropdown } from './Dropdown';
export { Flex } from './Flex';
export { Grid } from './Grid';
export { Icon } from './Icon';
export { Input } from './Input';
export { LabeledList } from './LabeledList';
export { NoticeBox } from './NoticeBox';
export { NumberInput } from './NumberInput';
export { ProgressBar } from './ProgressBar';
export { Section } from './Section';
export { Table } from './Table';
export { Tabs } from './Tabs';
export { TitleBar } from './TitleBar';
export { Toast } from './Toast';
export { Tooltip } from './Tooltip';
export { Chart } from './Chart';
tgui-next/packages/tgui/constants.js
+214
View File
@@ -0,0 +1,214 @@
// UI states, which are mirrored from the BYOND code.
export const UI_INTERACTIVE = 2;
export const UI_UPDATE = 1;
export const UI_DISABLED = 0;
export const UI_CLOSE = -1;
// All game related colors are stored here
export const COLORS = {
// Department colors
department: {
captain: '#c06616',
security: '#e74c3c',
medbay: '#3498db',
science: '#9b59b6',
engineering: '#f1c40f',
cargo: '#f39c12',
centcom: '#00c100',
other: '#c38312',
},
// Damage type colors
damageType: {
oxy: '#3498db',
toxin: '#2ecc71',
burn: '#e67e22',
brute: '#e74c3c',
},
};
// Colors defined in CSS
export const CSS_COLORS = [
'black',
'white',
'red',
'orange',
'yellow',
'olive',
'green',
'teal',
'blue',
'violet',
'purple',
'pink',
'brown',
'grey',
'good',
'average',
'bad',
'label',
];
export const RADIO_CHANNELS = [
{
name: 'Syndicate',
freq: 1213,
color: '#a52a2a',
},
{
name: 'Red Team',
freq: 1215,
color: '#ff4444',
},
{
name: 'Blue Team',
freq: 1217,
color: '#3434fd',
},
{
name: 'CentCom',
freq: 1337,
color: '#2681a5',
},
{
name: 'Supply',
freq: 1347,
color: '#b88646',
},
{
name: 'Service',
freq: 1349,
color: '#6ca729',
},
{
name: 'Science',
freq: 1351,
color: '#c68cfa',
},
{
name: 'Command',
freq: 1353,
color: '#5177ff',
},
{
name: 'Medical',
freq: 1355,
color: '#57b8f0',
},
{
name: 'Engineering',
freq: 1357,
color: '#f37746',
},
{
name: 'Security',
freq: 1359,
color: '#dd3535',
},
{
name: 'AI Private',
freq: 1447,
color: '#d65d95',
},
{
name: 'Common',
freq: 1459,
color: '#1ecc43',
},
];
const GASES = [
{
'id': 'o2',
'name': 'Oxygen',
'label': 'O₂',
'color': 'blue',
},
{
'id': 'n2',
'name': 'Nitrogen',
'label': 'N₂',
'color': 'red',
},
{
'id': 'co2',
'name': 'Carbon Dioxide',
'label': 'CO₂',
'color': 'grey',
},
{
'id': 'plasma',
'name': 'Plasma',
'label': 'Plasma',
'color': 'pink',
},
{
'id': 'water_vapor',
'name': 'Water Vapor',
'label': 'H₂O',
'color': 'grey',
},
{
'id': 'nob',
'name': 'Hyper-noblium',
'label': 'Hyper-nob',
'color': 'teal',
},
{
'id': 'n2o',
'name': 'Nitrous Oxide',
'label': 'N₂O',
'color': 'red',
},
{
'id': 'no2',
'name': 'Nitryl',
'label': 'NO₂',
'color': 'brown',
},
{
'id': 'tritium',
'name': 'Tritium',
'label': 'Tritium',
'color': 'green',
},
{
'id': 'bz',
'name': 'BZ',
'label': 'BZ',
'color': 'purple',
},
{
'id': 'stim',
'name': 'Stimulum',
'label': 'Stimulum',
'color': 'purple',
},
{
'id': 'pluox',
'name': 'Pluoxium',
'label': 'Pluoxium',
'color': 'blue',
},
{
'id': 'miasma',
'name': 'Miasma',
'label': 'Miasma',
'color': 'olive',
},
];
export const getGasLabel = (gasId, fallbackValue) => {
const gasSearchString = String(gasId).toLowerCase();
const gas = GASES.find(gas => gas.id === gasSearchString
|| gas.name.toLowerCase() === gasSearchString);
return gas && gas.label
|| fallbackValue
|| gasId;
};
export const getGasColor = gasId => {
const gasSearchString = String(gasId).toLowerCase();
const gas = GASES.find(gas => gas.id === gasSearchString
|| gas.name.toLowerCase() === gasSearchString);
return gas && gas.color;
};
tgui-next/packages/tgui/drag.js
+146
View File
@@ -0,0 +1,146 @@
import { vecAdd, vecInverse, vecMultiply } from 'common/vector';
import { winget, winset } from './byond';
import { createLogger } from './logging';
const logger = createLogger('drag');
let ref;
let dragging = false;
let resizing = false;
let screenOffset = [0, 0];
let dragPointOffset;
let resizeMatrix;
let initialSize;
let size;
const getWindowPosition = ref => {
return winget(ref, 'pos').then(pos => [pos.x, pos.y]);
};
const setWindowPosition = (ref, vec) => {
return winset(ref, 'pos', vec[0] + ',' + vec[1]);
};
const setWindowSize = (ref, vec) => {
return winset(ref, 'size', vec[0] + ',' + vec[1]);
};
export const setupDrag = async state => {
logger.log('setting up');
ref = state.config.window;
// Calculate offset caused by windows taskbar
const realPosition = await getWindowPosition(ref);
screenOffset = [
realPosition[0] - window.screenLeft,
realPosition[1] - window.screenTop,
];
// Constraint window position
const [relocated, safePosition] = constraintPosition(realPosition);
if (relocated) {
setWindowPosition(ref, safePosition);
}
logger.debug('current state', { ref, screenOffset });
};
/**
* Constraints window position to safe screen area, accounting for safe
* margins which could be a system taskbar.
*/
const constraintPosition = position => {
let x = position[0];
let y = position[1];
let relocated = false;
// Left
if (x < 0) {
x = 0;
relocated = true;
}
// Right
else if (x + window.innerWidth > window.screen.availWidth) {
x = window.screen.availWidth - window.innerWidth;
relocated = true;
}
// Top
if (y < 0) {
y = 0;
relocated = true;
}
// Bottom
else if (y + window.innerHeight > window.screen.availHeight) {
y = window.screen.availHeight - window.innerHeight;
relocated = true;
}
return [relocated, [x, y]];
};
export const dragStartHandler = event => {
logger.log('drag start');
dragging = true;
dragPointOffset = [
window.screenLeft - event.screenX,
window.screenTop - event.screenY,
];
document.addEventListener('mousemove', dragMoveHandler);
document.addEventListener('mouseup', dragEndHandler);
dragMoveHandler(event);
};
const dragEndHandler = event => {
logger.log('drag end');
dragMoveHandler(event);
document.removeEventListener('mousemove', dragMoveHandler);
document.removeEventListener('mouseup', dragEndHandler);
dragging = false;
};
const dragMoveHandler = event => {
if (!dragging) {
return;
}
event.preventDefault();
setWindowPosition(ref, vecAdd(
[event.screenX, event.screenY],
screenOffset,
dragPointOffset));
};
export const resizeStartHandler = (x, y) => event => {
resizeMatrix = [x, y];
logger.log('resize start', resizeMatrix);
resizing = true;
dragPointOffset = [
window.screenLeft - event.screenX,
window.screenTop - event.screenY,
];
initialSize = [
window.innerWidth,
window.innerHeight,
];
document.addEventListener('mousemove', resizeMoveHandler);
document.addEventListener('mouseup', resizeEndHandler);
resizeMoveHandler(event);
};
const resizeEndHandler = event => {
logger.log('resize end', size);
resizeMoveHandler(event);
document.removeEventListener('mousemove', resizeMoveHandler);
document.removeEventListener('mouseup', resizeEndHandler);
resizing = false;
};
const resizeMoveHandler = event => {
if (!resizing) {
return;
}
event.preventDefault();
size = vecAdd(initialSize, vecMultiply(resizeMatrix, vecAdd(
[event.screenX, event.screenY],
vecInverse([window.screenLeft, window.screenTop]),
dragPointOffset,
[1, 1])));
// Sane window size values
size[0] = Math.max(size[0], 250);
size[1] = Math.max(size[1], 120);
setWindowSize(ref, size);
};
tgui-next/packages/tgui/hotkeys.js
+257
View File
@@ -0,0 +1,257 @@
import { createLogger } from './logging';
import { callByond, tridentVersion } from './byond';
const logger = createLogger('hotkeys');
// Key codes
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_ESCAPE = 27;
export const KEY_SPACE = 32;
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_EQUAL = 187;
export const KEY_MINUS = 189;
const MODIFIER_KEYS = [
KEY_CTRL,
KEY_ALT,
KEY_SHIFT,
];
const NO_PASSTHROUGH_KEYS = [
KEY_ESCAPE,
KEY_ENTER,
KEY_SPACE,
KEY_TAB,
KEY_CTRL,
KEY_SHIFT,
];
// Tracks the "pressed" state of keys
const keyState = {};
const createHotkeyString = (ctrlKey, altKey, shiftKey, keyCode) => {
let str = '';
if (ctrlKey) {
str += 'Ctrl+';
}
if (altKey) {
str += 'Alt+';
}
if (shiftKey) {
str += 'Shift+';
}
if (keyCode >= 48 && keyCode <= 90) {
str += String.fromCharCode(keyCode);
}
else {
str += '[' + keyCode + ']';
}
return str;
};
/**
* Parses the event and compiles information about the keypress.
*/
const getKeyData = e => {
const keyCode = window.event ? e.which : e.keyCode;
const { ctrlKey, altKey, shiftKey } = e;
return {
keyCode,
ctrlKey,
altKey,
shiftKey,
hasModifierKeys: ctrlKey || altKey || shiftKey,
keyString: createHotkeyString(ctrlKey, altKey, shiftKey, keyCode),
};
};
/**
* Keyboard passthrough logic. This allows you to keep doing things
* in game while the browser window is focused.
*/
const handlePassthrough = (e, eventType) => {
if (e.defaultPrevented) {
return;
}
const targetName = e.target && e.target.localName;
if (targetName === 'input' || targetName === 'textarea') {
return;
}
const keyData = getKeyData(e);
const { keyCode, ctrlKey, shiftKey } = keyData;
// NOTE: We pass through only Alt of all modifier keys, because Alt
// modifier (for toggling run/walk) is implemented very shittily
// in our codebase. We pass no other modifier keys, because they can
// be used internally as tgui hotkeys.
if (ctrlKey || shiftKey || NO_PASSTHROUGH_KEYS.includes(keyCode)) {
return;
}
// Send this keypress to BYOND
if (eventType === 'keydown' && !keyState[keyCode]) {
logger.debug('passthrough', eventType, keyData);
return callByond('', { __keydown: keyCode });
}
if (eventType === 'keyup' && keyState[keyCode]) {
logger.debug('passthrough', eventType, keyData);
return callByond('', { __keyup: keyCode });
}
};
/**
* Cleanup procedure for keyboard passthrough, which should be called
* whenever you're unloading tgui.
*/
export const releaseHeldKeys = () => {
for (let keyCode of Object.keys(keyState)) {
if (keyState[keyCode]) {
logger.log(`releasing [${keyCode}] key`);
keyState[keyCode] = false;
callByond('', { __keyup: keyCode });
}
}
};
const handleHotKey = (e, eventType, dispatch) => {
if (eventType !== 'keyup') {
return;
}
const keyData = getKeyData(e);
const {
ctrlKey,
altKey,
keyCode,
hasModifierKeys,
keyString,
} = keyData;
// Dispatch a detected hotkey as a store action
if (hasModifierKeys && !MODIFIER_KEYS.includes(keyCode)) {
logger.log(keyString);
// Fun stuff
if (ctrlKey && altKey && keyCode === 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(() => {
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!');
});
}
dispatch({
type: 'hotKey',
payload: keyData,
});
}
};
/**
* Subscribe to an event when browser window has been completely
* unfocused. Conveniently fires events when the browser window
* is closed from the outside.
*/
const subscribeToLossOfFocus = listenerFn => {
let timeout;
document.addEventListener('focusout', () => {
timeout = setTimeout(listenerFn);
});
document.addEventListener('focusin', () => {
clearTimeout(timeout);
});
window.addEventListener('beforeunload', listenerFn);
};
/**
* Subscribe to keydown/keyup events with globally tracked key state.
*/
const subscribeToKeyPresses = listenerFn => {
document.addEventListener('keydown', e => {
const keyCode = window.event ? e.which : e.keyCode;
listenerFn(e, 'keydown');
keyState[keyCode] = true;
});
document.addEventListener('keyup', e => {
const keyCode = window.event ? e.which : e.keyCode;
listenerFn(e, 'keyup');
keyState[keyCode] = false;
});
};
// Middleware
export const hotKeyMiddleware = store => {
const { dispatch } = store;
// Subscribe to key events
subscribeToKeyPresses((e, eventType) => {
// IE8: Can't determine the focused element, so by extension it passes
// keypresses when inputs are focused.
if (tridentVersion > 4) {
handlePassthrough(e, eventType);
}
handleHotKey(e, eventType, dispatch);
});
// IE8: focusin/focusout only available on IE9+
if (tridentVersion > 4) {
// Clean up when browser window completely loses focus
subscribeToLossOfFocus(() => {
releaseHeldKeys();
});
}
// Pass through store actions (do nothing)
return next => action => next(action);
};
// Reducer
export const hotKeyReducer = (state, action) => {
const { type, payload } = action;
if (type === 'hotKey') {
const { ctrlKey, altKey, keyCode } = payload;
// Toggle kitchen sink mode
if (ctrlKey && altKey && keyCode === KEY_EQUAL) {
return {
...state,
showKitchenSink: !state.showKitchenSink,
};
}
return state;
}
return state;
};
tgui-next/packages/tgui/index.js
+167
View File
@@ -0,0 +1,167 @@
import 'core-js/es';
import 'core-js/web/immediate';
import 'core-js/web/queue-microtask';
import 'core-js/web/timers';
import 'regenerator-runtime/runtime';
import './polyfills';
import { loadCSS } from 'fg-loadcss';
import { render } from 'inferno';
import { setupHotReloading } from 'tgui-dev-server/link/client';
import { backendUpdate } from './backend';
import { tridentVersion } from './byond';
import { setupDrag } from './drag';
import { createLogger } from './logging';
import { getRoute } from './routes';
import { createStore } from './store';
const logger = createLogger();
const store = createStore();
const reactRoot = document.getElementById('react-root');
let initialRender = true;
let handedOverToOldTgui = false;
const renderLayout = () => {
// Short-circuit the renderer
if (handedOverToOldTgui) {
return;
}
// Mark the beginning of the render
let startedAt;
if (process.env.NODE_ENV !== 'production') {
startedAt = Date.now();
}
try {
const state = store.getState();
// Initial render setup
if (initialRender) {
logger.log('initial render', state);
// ----- Old TGUI chain-loader: begin -----
const route = getRoute(state);
// Route was not found, load old TGUI
if (!route) {
logger.info('loading old tgui');
// Short-circuit the renderer
handedOverToOldTgui = true;
// Unsubscribe from updates
window.update = window.initialize = () => {};
// IE8: Use a redirection method
if (tridentVersion <= 4) {
setTimeout(() => {
location.href = 'tgui-fallback.html?ref=' + window.__ref__;
}, 10);
return;
}
// Inject current state into the data holder
const holder = document.getElementById('data');
holder.textContent = JSON.stringify(state);
// Load old TGUI by injecting new scripts
loadCSS('v4shim.css');
loadCSS('tgui.css');
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'tgui.js';
head.appendChild(script);
// Bail
return;
}
// ----- Old TGUI chain-loader: end -----
// Setup dragging
setupDrag(state);
}
// Start rendering
const { Layout } = require('./layout');
const element = <Layout state={state} dispatch={store.dispatch} />;
render(element, reactRoot);
}
catch (err) {
logger.error('rendering error', err);
}
// Report rendering time
if (process.env.NODE_ENV !== 'production') {
const finishedAt = Date.now();
const diff = finishedAt - startedAt;
const diffFrames = (diff / 16.6667).toFixed(2);
logger.debug(`rendered in ${diff}ms (${diffFrames} frames)`);
if (initialRender) {
const diff = finishedAt - window.__inception__;
const diffFrames = (diff / 16.6667).toFixed(2);
logger.log(`fully loaded in ${diff}ms (${diffFrames} frames)`);
}
}
if (initialRender) {
initialRender = false;
}
};
// Parse JSON and report all abnormal JSON strings coming from BYOND
const parseStateJson = json => {
let reviver = (key, value) => {
if (typeof value === 'object' && value !== null) {
if (value.__number__) {
return parseFloat(value.__number__);
}
}
return value;
};
// IE8: No reviver for you!
// See: https://stackoverflow.com/questions/1288962
if (tridentVersion <= 4) {
reviver = undefined;
}
try {
return JSON.parse(json, reviver);
}
catch (err) {
logger.log(err);
logger.log('What we got:', json);
const msg = err && err.message;
throw new Error('JSON parsing error: ' + msg);
}
};
const setupApp = () => {
// Subscribe for redux state updates
store.subscribe(() => {
renderLayout();
});
// Subscribe for bankend updates
window.update = window.initialize = stateJson => {
const state = parseStateJson(stateJson);
// Backend update dispatches a store action
store.dispatch(backendUpdate(state));
};
// Enable hot module reloading
if (module.hot) {
setupHotReloading();
module.hot.accept(['./layout', './routes'], () => {
renderLayout();
});
}
// Process the early update queue
while (true) {
let stateJson = window.__updateQueue__.shift();
if (!stateJson) {
break;
}
window.update(stateJson);
}
// Dynamically load font-awesome from browser's cache
loadCSS('font-awesome.css');
};
// IE8: Wait for DOM to properly load
if (tridentVersion <= 4 && document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupApp);
}
else {
setupApp();
}
tgui-next/packages/tgui/interfaces/Achievements.js
+134
View File
@@ -0,0 +1,134 @@
import { useBackend } from '../backend';
import { Box, Icon, Table, Tabs } from '../components';
export const Achievement = props => {
const {
name,
desc,
icon_class,
value,
} = props;
return (
<tr key={name}>
<td style={{ 'padding': '6px' }}>
<Box className={icon_class} />
</td>
<td style={{ 'vertical-align': 'top' }}>
<h1>{name}</h1>
{desc}
<Box
color={value ? 'good' : 'bad'}
content={value ? 'Unlocked' : 'Locked'} />
</td>
</tr>
);
};
export const Score = props => {
const {
name,
desc,
icon_class,
value,
} = props;
return (
<tr key={name}>
<td style={{ 'padding': '6px' }}>
<Box className={icon_class} />
</td>
<td style={{ 'vertical-align': 'top' }}>
<h1>{name}</h1>
{desc}
<Box
color={value > 0 ? 'good' : 'bad'}
content={value > 0 ? `Earned ${value} times` : 'Locked'} />
</td>
</tr>
);
};
export const Achievements = props => {
const { data } = useBackend(props);
return (
<Tabs>
{data.categories.map(category => (
<Tabs.Tab
key={category}
label={category}>
<Box as="Table">
{data.achievements
.filter(x => x.category === category)
.map(achievement => {
if (achievement.score) {
return (
<Score
key={achievement.name}
name={achievement.name}
desc={achievement.desc}
icon_class={achievement.icon_class}
value={achievement.value} />
);
}
return (
<Achievement
key={achievement.name}
name={achievement.name}
desc={achievement.desc}
icon_class={achievement.icon_class}
value={achievement.value} />
);
})}
</Box>
</Tabs.Tab>
))}
<Tabs.Tab
label="High Scores">
<Tabs vertical>
{data.highscore.map(highscore => (
<Tabs.Tab
key={highscore.name}
label={highscore.name}>
<Table>
<Table.Row className="candystripe">
<Table.Cell color="label" textAlign="center">
#
</Table.Cell>
<Table.Cell color="label" textAlign="center">
Key
</Table.Cell>
<Table.Cell color="label" textAlign="center">
Score
</Table.Cell>
</Table.Row>
{Object.keys(highscore.scores).map((key, index) => (
<Table.Row
key={key}
className="candystripe"
m={2}>
<Table.Cell color="label" textAlign="center">
{index+1}
</Table.Cell>
<Table.Cell
color={key === data.user_ckey && 'green'}
textAlign="center">
{index === 0 && (
<Icon name="crown" color="gold" mr={2} />
)}
{key}
{index === 0 && (
<Icon name="crown" color="gold" ml={2} />
)}
</Table.Cell>
<Table.Cell textAlign="center">
{highscore.scores[key]}
</Table.Cell>
</Table.Row>
))}
</Table>
</Tabs.Tab>
))}
</Tabs>
</Tabs.Tab>
</Tabs>
);
};
tgui-next/packages/tgui/interfaces/AiAirlock.js
+196
View File
@@ -0,0 +1,196 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, LabeledList, Section } from '../components';
export const AiAirlock = props => {
const { act, data } = useBackend(props);
const dangerMap = {
2: {
color: 'good',
localStatusText: 'Offline',
},
1: {
color: 'average',
localStatusText: 'Caution',
},
0: {
color: 'bad',
localStatusText: 'Optimal',
},
};
const statusMain = dangerMap[data.power.main] || dangerMap[0];
const statusBackup = dangerMap[data.power.backup] || dangerMap[0];
const statusElectrify = dangerMap[data.shock] || dangerMap[0];
return (
<Fragment>
<Section title="Power Status">
<LabeledList>
<LabeledList.Item
label="Main"
color={statusMain.color}
buttons={(
<Button
icon="lightbulb-o"
disabled={!data.power.main}
content="Disrupt"
onClick={() => act('disrupt-main')} />
)}>
{data.power.main ? 'Online' : 'Offline'}
{' '}
{(!data.wires.main_1 || !data.wires.main_2)
&& '[Wires have been cut!]'
|| (data.power.main_timeleft > 0
&& `[${data.power.main_timeleft}s]`)}
</LabeledList.Item>
<LabeledList.Item
label="Backup"
color={statusBackup.color}
buttons={(
<Button
icon="lightbulb-o"
disabled={!data.power.backup}
content="Disrupt"
onClick={() => act('disrupt-backup')} />
)}>
{data.power.backup ? 'Online' : 'Offline'}
{' '}
{(!data.wires.backup_1 || !data.wires.backup_2)
&& '[Wires have been cut!]'
|| (data.power.backup_timeleft > 0
&& `[${data.power.backup_timeleft}s]`)}
</LabeledList.Item>
<LabeledList.Item
label="Electrify"
color={statusElectrify.color}
buttons={(
<Fragment>
<Button
icon="wrench"
disabled={!(data.wires.shock && data.shock === 0)}
content="Restore"
onClick={() => act('shock-restore')} />
<Button
icon="bolt"
disabled={!data.wires.shock}
content="Temporary"
onClick={() => act('shock-temp')} />
<Button
icon="bolt"
disabled={!data.wires.shock}
content="Permanent"
onClick={() => act('shock-perm')} />
</Fragment>
)}>
{data.shock === 2 ? 'Safe' : 'Electrified'}
{' '}
{!data.wires.shock
&& '[Wires have been cut!]'
|| (data.shock_timeleft > 0
&& `[${data.shock_timeleft}s]`)
|| (data.shock_timeleft === -1
&& '[Permanent]')}
</LabeledList.Item>
</LabeledList>
</Section>
<Section title="Access and Door Control">
<LabeledList>
<LabeledList.Item
label="ID Scan"
color="bad"
buttons={(
<Button
icon={data.id_scanner ? 'power-off' : 'times'}
content={data.id_scanner ? 'Enabled' : 'Disabled'}
selected={data.id_scanner}
disabled={!data.wires.id_scanner}
onClick={() => act('idscan-toggle')} />
)}>
{!data.wires.id_scanner && '[Wires have been cut!]'}
</LabeledList.Item>
<LabeledList.Item
label="Emergency Access"
buttons={(
<Button
icon={data.emergency ? 'power-off' : 'times'}
content={data.emergency ? 'Enabled' : 'Disabled'}
selected={data.emergency}
onClick={() => act('emergency-toggle')} />
)} />
<LabeledList.Divider />
<LabeledList.Item
label="Door Bolts"
color="bad"
buttons={(
<Button
icon={data.locked ? 'lock' : 'unlock'}
content={data.locked ? 'Lowered' : 'Raised'}
selected={data.locked}
disabled={!data.wires.bolts}
onClick={() => act('bolt-toggle')} />
)}>
{!data.wires.bolts && '[Wires have been cut!]'}
</LabeledList.Item>
<LabeledList.Item
label="Door Bolt Lights"
color="bad"
buttons={(
<Button
icon={data.lights ? 'power-off' : 'times'}
content={data.lights ? 'Enabled' : 'Disabled'}
selected={data.lights}
disabled={!data.wires.lights}
onClick={() => act('light-toggle')} />
)}>
{!data.wires.lights && '[Wires have been cut!]'}
</LabeledList.Item>
<LabeledList.Item
label="Door Force Sensors"
color="bad"
buttons={(
<Button
icon={data.safe ? 'power-off' : 'times'}
content={data.safe ? 'Enabled' : 'Disabled'}
selected={data.safe}
disabled={!data.wires.safe}
onClick={() => act('safe-toggle')} />
)}>
{!data.wires.safe && '[Wires have been cut!]'}
</LabeledList.Item>
<LabeledList.Item
label="Door Timing Safety"
color="bad"
buttons={(
<Button
icon={data.speed ? 'power-off' : 'times'}
content={data.speed ? 'Enabled' : 'Disabled'}
selected={data.speed}
disabled={!data.wires.timing}
onClick={() => act('speed-toggle')} />
)}>
{!data.wires.timing && '[Wires have been cut!]'}
</LabeledList.Item>
<LabeledList.Divider />
<LabeledList.Item
label="Door Control"
color="bad"
buttons={(
<Button
icon={data.opened ? 'sign-out-alt' : 'sign-in-alt'}
content={data.opened ? 'Open' : 'Closed'}
selected={data.opened}
disabled={(data.locked || data.welded)}
onClick={() => act('open-close')} />
)}>
{!!(data.locked || data.welded) && (
<span>
[Door is {data.locked ? 'bolted' : ''}
{(data.locked && data.welded) ? ' and ' : ''}
{data.welded ? 'welded' : ''}!]
</span>
)}
</LabeledList.Item>
</LabeledList>
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/AirAlarm.js
+461
View File
@@ -0,0 +1,461 @@
import { toFixed } from 'common/math';
import { decodeHtmlEntities } from 'common/string';
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, NumberInput, Section } from '../components';
import { getGasLabel } from '../constants';
import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
export const AirAlarm = props => {
const { state } = props;
const { act, data } = useBackend(props);
const locked = data.locked && !data.siliconUser;
return (
<Fragment>
<InterfaceLockNoticeBox
siliconUser={data.siliconUser}
locked={data.locked}
onLockStatusChange={() => act('lock')} />
<AirAlarmStatus state={state} />
{!locked && (
<AirAlarmControl state={state} />
)}
</Fragment>
);
};
const AirAlarmStatus = props => {
const { data } = useBackend(props);
const entries = (data.environment_data || [])
.filter(entry => entry.value >= 0.01);
const dangerMap = {
0: {
color: 'good',
localStatusText: 'Optimal',
},
1: {
color: 'average',
localStatusText: 'Caution',
},
2: {
color: 'bad',
localStatusText: 'Danger (Internals Required)',
},
};
const localStatus = dangerMap[data.danger_level] || dangerMap[0];
return (
<Section title="Air Status">
<LabeledList>
{entries.length > 0 && (
<Fragment>
{entries.map(entry => {
const status = dangerMap[entry.danger_level] || dangerMap[0];
return (
<LabeledList.Item
key={entry.name}
label={entry.name}
color={status.color}>
{toFixed(entry.value, 2)}{entry.unit}
</LabeledList.Item>
);
})}
<LabeledList.Item
label="Local status"
color={localStatus.color}>
{localStatus.localStatusText}
</LabeledList.Item>
<LabeledList.Item
label="Area status"
color={data.atmos_alarm || data.fire_alarm ? 'bad' : 'good'}>
{data.atmos_alarm && 'Atmosphere Alarm'
|| data.fire_alarm && 'Fire Alarm'
|| 'Nominal'}
</LabeledList.Item>
</Fragment>
) || (
<LabeledList.Item
label="Warning"
color="bad">
Cannot obtain air sample for analysis.
</LabeledList.Item>
)}
{!!data.emagged && (
<LabeledList.Item
label="Warning"
color="bad">
Safety measures offline. Device may exhibit abnormal behavior.
</LabeledList.Item>
)}
</LabeledList>
</Section>
);
};
const AIR_ALARM_ROUTES = {
home: {
title: 'Air Controls',
component: () => AirAlarmControlHome,
},
vents: {
title: 'Vent Controls',
component: () => AirAlarmControlVents,
},
scrubbers: {
title: 'Scrubber Controls',
component: () => AirAlarmControlScrubbers,
},
modes: {
title: 'Operating Mode',
component: () => AirAlarmControlModes,
},
thresholds: {
title: 'Alarm Thresholds',
component: () => AirAlarmControlThresholds,
},
};
const AirAlarmControl = props => {
const { state } = props;
const { act, config } = useBackend(props);
const route = AIR_ALARM_ROUTES[config.screen] || AIR_ALARM_ROUTES.home;
const Component = route.component();
return (
<Section
title={route.title}
buttons={config.screen !== 'home' && (
<Button
icon="arrow-left"
content="Back"
onClick={() => act('tgui:view', {
screen: 'home',
})} />
)}>
<Component state={state} />
</Section>
);
};
// Home screen
// --------------------------------------------------------
const AirAlarmControlHome = props => {
const { act, data } = useBackend(props);
const {
mode,
atmos_alarm,
} = data;
return (
<Fragment>
<Button
icon={atmos_alarm
? 'exclamation-triangle'
: 'exclamation'}
color={atmos_alarm && 'caution'}
content="Area Atmosphere Alarm"
onClick={() => act(atmos_alarm ? 'reset' : 'alarm')} />
<Box mt={1} />
<Button
icon={mode === 3
? 'exclamation-triangle'
: 'exclamation'}
color={mode === 3 && 'danger'}
content="Panic Siphon"
onClick={() => act('mode', {
mode: mode === 3 ? 1 : 3,
})} />
<Box mt={2} />
<Button
icon="sign-out-alt"
content="Vent Controls"
onClick={() => act('tgui:view', {
screen: 'vents',
})} />
<Box mt={1} />
<Button
icon="filter"
content="Scrubber Controls"
onClick={() => act('tgui:view', {
screen: 'scrubbers',
})} />
<Box mt={1} />
<Button
icon="cog"
content="Operating Mode"
onClick={() => act('tgui:view', {
screen: 'modes',
})} />
<Box mt={1} />
<Button
icon="chart-bar"
content="Alarm Thresholds"
onClick={() => act('tgui:view', {
screen: 'thresholds',
})} />
</Fragment>
);
};
// Vents
// --------------------------------------------------------
const AirAlarmControlVents = props => {
const { state } = props;
const { data } = useBackend(props);
const { vents } = data;
if (!vents || vents.length === 0) {
return 'Nothing to show';
}
return vents.map(vent => (
<Vent key={vent.id_tag}
state={state}
{...vent} />
));
};
const Vent = props => {
const {
id_tag,
long_name,
power,
checks,
excheck,
incheck,
direction,
external,
internal,
extdefault,
intdefault,
} = props;
const { act } = useBackend(props);
return (
<Section
level={2}
title={decodeHtmlEntities(long_name)}
buttons={(
<Button
icon={power ? 'power-off' : 'times'}
selected={power}
content={power ? 'On' : 'Off'}
onClick={() => act('power', {
id_tag,
val: Number(!power),
})} />
)}>
<LabeledList>
<LabeledList.Item label="Mode">
{direction === 'release' ? 'Pressurizing' : 'Releasing'}
</LabeledList.Item>
<LabeledList.Item label="Pressure Regulator">
<Button
icon="sign-in-alt"
content="Internal"
selected={incheck}
onClick={() => act('incheck', {
id_tag,
val: checks,
})} />
<Button
icon="sign-out-alt"
content="External"
selected={excheck}
onClick={() => act('excheck', {
id_tag,
val: checks,
})} />
</LabeledList.Item>
{!!incheck && (
<LabeledList.Item label="Internal Target">
<NumberInput
value={Math.round(internal)}
unit="kPa"
width="75px"
minValue={0}
step={10}
maxValue={5066}
onChange={(e, value) => act('set_internal_pressure', {
id_tag,
value,
})} />
<Button
icon="undo"
disabled={intdefault}
content="Reset"
onClick={() => act('reset_internal_pressure', {
id_tag,
})} />
</LabeledList.Item>
)}
{!!excheck && (
<LabeledList.Item label="External Target">
<NumberInput
value={Math.round(external)}
unit="kPa"
width="75px"
minValue={0}
step={10}
maxValue={5066}
onChange={(e, value) => act('set_external_pressure', {
id_tag,
value,
})} />
<Button
icon="undo"
disabled={extdefault}
content="Reset"
onClick={() => act('reset_external_pressure', {
id_tag,
})} />
</LabeledList.Item>
)}
</LabeledList>
</Section>
);
};
// Scrubbers
// --------------------------------------------------------
const AirAlarmControlScrubbers = props => {
const { state } = props;
const { data } = useBackend(props);
const { scrubbers } = data;
if (!scrubbers || scrubbers.length === 0) {
return 'Nothing to show';
}
return scrubbers.map(scrubber => (
<Scrubber
key={scrubber.id_tag}
state={state}
{...scrubber} />
));
};
const Scrubber = props => {
const {
long_name,
power,
scrubbing,
id_tag,
widenet,
filter_types,
} = props;
const { act } = useBackend(props);
return (
<Section
level={2}
title={decodeHtmlEntities(long_name)}
buttons={(
<Button
icon={power ? 'power-off' : 'times'}
content={power ? 'On' : 'Off'}
selected={power}
onClick={() => act('power', {
id_tag,
val: Number(!power),
})} />
)}>
<LabeledList>
<LabeledList.Item label="Mode">
<Button
icon={scrubbing ? 'filter' : 'sign-in-alt'}
color={scrubbing || 'danger'}
content={scrubbing ? 'Scrubbing' : 'Siphoning'}
onClick={() => act('scrubbing', {
id_tag,
val: Number(!scrubbing),
})} />
<Button
icon={widenet ? 'expand' : 'compress'}
selected={widenet}
content={widenet ? 'Expanded range' : 'Normal range'}
onClick={() => act('widenet', {
id_tag,
val: Number(!widenet),
})} />
</LabeledList.Item>
<LabeledList.Item label="Filters">
{scrubbing
&& filter_types.map(filter => (
<Button key={filter.gas_id}
icon={filter.enabled ? 'check-square-o' : 'square-o'}
content={getGasLabel(filter.gas_id, filter.gas_name)}
title={filter.gas_name}
selected={filter.enabled}
onClick={() => act('toggle_filter', {
id_tag,
val: filter.gas_id,
})} />
))
|| 'N/A'}
</LabeledList.Item>
</LabeledList>
</Section>
);
};
// Modes
// --------------------------------------------------------
const AirAlarmControlModes = props => {
const { act, data } = useBackend(props);
const { modes } = data;
if (!modes || modes.length === 0) {
return 'Nothing to show';
}
return modes.map(mode => (
<Fragment key={mode.mode}>
<Button
icon={mode.selected ? 'check-square-o' : 'square-o'}
selected={mode.selected}
color={mode.selected && mode.danger && 'danger'}
content={mode.name}
onClick={() => act('mode', { mode: mode.mode })} />
<Box mt={1} />
</Fragment>
));
};
// Thresholds
// --------------------------------------------------------
const AirAlarmControlThresholds = props => {
const { act, data } = useBackend(props);
const { thresholds } = data;
return (
<table
className="LabeledList"
style={{ width: '100%' }}>
<thead>
<tr>
<td />
<td className="color-bad">min2</td>
<td className="color-average">min1</td>
<td className="color-average">max1</td>
<td className="color-bad">max2</td>
</tr>
</thead>
<tbody>
{thresholds.map(threshold => (
<tr key={threshold.name}>
<td className="LabeledList__label">{threshold.name}</td>
{threshold.settings.map(setting => (
<td key={setting.val}>
<Button
content={toFixed(setting.selected, 2)}
onClick={() => act('threshold', {
env: setting.env,
var: setting.val,
})} />
</td>
))}
</tr>
))}
</tbody>
</table>
);
};
tgui-next/packages/tgui/interfaces/AirlockElectronics.js
+138
View File
@@ -0,0 +1,138 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, Section, Tabs } from '../components';
export const AirlockElectronics = props => {
const { act, data } = useBackend(props);
const regions = data.regions || [];
const diffMap = {
0: {
icon: 'times-circle',
},
1: {
icon: 'stop-circle',
},
2: {
icon: 'check-circle',
},
};
const checkAccessIcon = accesses => {
let oneAccess = false;
let oneInaccess = false;
accesses.forEach(element => {
if (element.req) {
oneAccess = true;
}
else {
oneInaccess = true;
}
});
if (!oneAccess && oneInaccess) {
return 0;
}
else if (oneAccess && oneInaccess) {
return 1;
}
else {
return 2;
}
};
return (
<Fragment>
<Section title="Main">
<LabeledList>
<LabeledList.Item
label="Access Required">
<Button
icon={data.oneAccess ? 'unlock' : 'lock'}
content={data.oneAccess ? 'One' : 'All'}
onClick={() => act('one_access')}
/>
</LabeledList.Item>
<LabeledList.Item
label="Mass Modify">
<Button
icon="check-double"
content="Grant All"
onClick={() => act('grant_all')}
/>
<Button
icon="undo"
content="Clear All"
onClick={() => act('clear_all')}
/>
</LabeledList.Item>
<LabeledList.Item
label="Unrestricted Access">
<Button
icon={data.unres_direction & 1 ? 'check-square-o' : 'square-o'}
content="North"
selected={data.unres_direction & 1}
onClick={() => act('direc_set', {
unres_direction: '1',
})}
/>
<Button
icon={data.unres_direction & 2 ? 'check-square-o' : 'square-o'}
content="East"
selected={data.unres_direction & 2}
onClick={() => act('direc_set', {
unres_direction: '2',
})}
/>
<Button
icon={data.unres_direction & 4 ? 'check-square-o' : 'square-o'}
content="South"
selected={data.unres_direction & 4}
onClick={() => act('direc_set', {
unres_direction: '4',
})}
/>
<Button
icon={data.unres_direction & 8 ? 'check-square-o' : 'square-o'}
content="West"
selected={data.unres_direction & 8}
onClick={() => act('direc_set', {
unres_direction: '8',
})}
/>
</LabeledList.Item>
</LabeledList>
</Section>
<Section title="Access">
<Box height="261px">
<Tabs vertical>
{regions.map(region => {
const { name } = region;
const accesses = region.accesses || [];
const icon = diffMap[checkAccessIcon(accesses)].icon;
return (
<Tabs.Tab
key={name}
icon={icon}
label={name}>
{() => accesses.map(access => (
<Box key={access.id}>
<Button
icon={access.req ? 'check-square-o' : 'square-o'}
content={access.name}
selected={access.req}
onClick={() => act('set', {
access: access.id,
})} />
</Box>
))}
</Tabs.Tab>
);
})}
</Tabs>
</Box>
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/Apc.js
+229
View File
@@ -0,0 +1,229 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
export const Apc = props => {
const { act, data } = useBackend(props);
const locked = data.locked && !data.siliconUser;
const powerStatusMap = {
2: {
color: 'good',
externalPowerText: 'External Power',
chargingText: 'Fully Charged',
},
1: {
color: 'average',
externalPowerText: 'Low External Power',
chargingText: 'Charging',
},
0: {
color: 'bad',
externalPowerText: 'No External Power',
chargingText: 'Not Charging',
},
};
const malfMap = {
1: {
icon: 'terminal',
content: 'Override Programming',
action: 'hack',
},
2: {
icon: 'caret-square-down',
content: 'Shunt Core Process',
action: 'occupy',
},
3: {
icon: 'caret-square-left',
content: 'Return to Main Core',
action: 'deoccupy',
},
4: {
icon: 'caret-square-down',
content: 'Shunt Core Process',
action: 'occupy',
},
};
const externalPowerStatus = powerStatusMap[data.externalPower]
|| powerStatusMap[0];
const chargingStatus = powerStatusMap[data.chargingStatus]
|| powerStatusMap[0];
const channelArray = data.powerChannels || [];
const malfStatus = malfMap[data.malfStatus] || malfMap[0];
const adjustedCellChange = data.powerCellStatus / 100;
if (data.failTime > 0) {
return (
<NoticeBox>
<b><h3>SYSTEM FAILURE</h3></b>
<i>
I/O regulators malfunction detected!
Waiting for system reboot...
</i>
<br />
Automatic reboot in {data.failTime} seconds...
<Button
icon="sync"
content="Reboot Now"
onClick={() => act('reboot')} />
</NoticeBox>
);
}
return (
<Fragment>
<InterfaceLockNoticeBox
siliconUser={data.siliconUser}
locked={data.locked}
onLockStatusChange={() => act('lock')} />
<Section title="Power Status">
<LabeledList>
<LabeledList.Item
label="Main Breaker"
color={externalPowerStatus.color}
buttons={(
<Button
icon={data.isOperating ? 'power-off' : 'times'}
content={data.isOperating ? 'On' : 'Off'}
selected={data.isOperating && !locked}
disabled={locked}
onClick={() => act('breaker')} />
)}>
[ {externalPowerStatus.externalPowerText} ]
</LabeledList.Item>
<LabeledList.Item label="Power Cell">
<ProgressBar
color="good"
value={adjustedCellChange} />
</LabeledList.Item>
<LabeledList.Item
label="Charge Mode"
color={chargingStatus.color}
buttons={(
<Button
icon={data.chargeMode ? 'sync' : 'close'}
content={data.chargeMode ? 'Auto' : 'Off'}
disabled={locked}
onClick={() => act('charge')} />
)}>
[ {chargingStatus.chargingText} ]
</LabeledList.Item>
</LabeledList>
</Section>
<Section title="Power Channels">
<LabeledList>
{channelArray.map(channel => {
const { topicParams } = channel;
return (
<LabeledList.Item
key={channel.title}
label={channel.title}
buttons={(
<Fragment>
<Box inline mx={2}
color={channel.status >= 2 ? 'good' : 'bad'}>
{channel.status >= 2 ? 'On' : 'Off'}
</Box>
<Button
icon="sync"
content="Auto"
selected={!locked && (
channel.status === 1 || channel.status === 3
)}
disabled={locked}
onClick={() => act('channel', topicParams.auto)} />
<Button
icon="power-off"
content="On"
selected={!locked && channel.status === 2}
disabled={locked}
onClick={() => act('channel', topicParams.on)} />
<Button
icon="times"
content="Off"
selected={!locked && channel.status === 0}
disabled={locked}
onClick={() => act('channel', topicParams.off)} />
</Fragment>
)}>
{channel.powerLoad}
</LabeledList.Item>
);
})}
<LabeledList.Item label="Total Load">
<b>{data.totalLoad}</b>
</LabeledList.Item>
</LabeledList>
</Section>
<Section
title="Misc"
buttons={!!data.siliconUser && (
<Fragment>
{!!data.malfStatus && (
<Button
icon={malfStatus.icon}
content={malfStatus.content}
color="bad"
onClick={() => act(malfStatus.action)} />
)}
<Button
icon="lightbulb-o"
content="Overload"
onClick={() => act('overload')} />
</Fragment>
)}>
<LabeledList.Item
label="Cover Lock"
buttons={(
<Button
icon={data.coverLocked ? 'lock' : 'unlock'}
content={data.coverLocked ? 'Engaged' : 'Disengaged'}
disabled={locked}
onClick={() => act('cover')} />
)} />
<LabeledList.Item
label="Emergency Lighting"
buttons={(
<Button
icon="lightbulb-o"
content={data.emergencyLights ? 'Enabled' : 'Disabled'}
disabled={locked}
onClick={() => act('emergency_lighting')} />
)} />
<LabeledList.Item
label="Night Shift Lighting"
buttons={(
<Button
icon="lightbulb-o"
content={data.nightshiftLights ? 'Enabled' : 'Disabled'}
disabled={locked}
onClick={() => act('toggle_nightshift')} />
)} />
</Section>
{data.hijackable && (
<Section
title="Hijacking"
buttons={(
<Fragment>
<Button
icon="unlock"
content="Hijack"
disabled={data.hijacker}
onClick={() => act('hijack')} />
<Button
icon="lock"
content="Lockdown"
disabled={!data.lockdownavail}
onClick={() => act('lockdown')} />
<Button
icon="lightbulb-o"
content="Drain"
disabled={!data.drainavail}
onClick={() => act('drain')} />
</Fragment>
)} />
)}
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/AtmosAlertConsole.js
+44
View File
@@ -0,0 +1,44 @@
import { useBackend } from '../backend';
import { Button, Section } from '../components';
export const AtmosAlertConsole = props => {
const { act, data } = useBackend(props);
const priorityAlerts = data.priority || [];
const minorAlerts = data.minor || [];
return (
<Section title="Alarms">
<ul>
{priorityAlerts.length > 0 ? (
priorityAlerts.map(alert => (
<li key={alert}>
<Button
icon="times"
content={alert}
color="bad"
onClick={() => act('clear', { zone: alert })} />
</li>
))
) : (
<li className="color-good">
No Priority Alerts
</li>
)}
{minorAlerts.length > 0 ? (
minorAlerts.map(alert => (
<li key={alert}>
<Button
icon="times"
content={alert}
color="average"
onClick={() => act('clear', { zone: alert })} />
</li>
))
) : (
<li className="color-good">
No Minor Alerts
</li>
)}
</ul>
</Section>
);
};
tgui-next/packages/tgui/interfaces/AtmosControlConsole.js
+100
View File
@@ -0,0 +1,100 @@
import { map } from 'common/collections';
import { toFixed } from 'common/math';
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, LabeledList, NumberInput, Section } from '../components';
export const AtmosControlConsole = props => {
const { act, data } = useBackend(props);
const sensors = data.sensors || [];
return (
<Fragment>
<Section
title={!!data.tank && sensors[0].long_name}>
{sensors.map(sensor => {
const gases = sensor.gases || {};
return (
<Section
key={sensor.id_tag}
title={!data.tank && sensor.long_name}
level={2}>
<LabeledList>
<LabeledList.Item label="Pressure">
{toFixed(sensor.pressure, 2) + ' kPa'}
</LabeledList.Item>
{!!sensor.temperature && (
<LabeledList.Item label="Temperature">
{toFixed(sensor.temperature, 2) + ' K'}
</LabeledList.Item>
)}
{map((gasPercent, gasId) => {
return (
<LabeledList.Item label={gasId}>
{toFixed(gasPercent, 2) + '%'}
</LabeledList.Item>
);
})(gases)}
</LabeledList>
</Section>
);
})}
</Section>
{data.tank && (
<Section
title="Controls"
buttons={(
<Button
icon="undo"
content="Reconnect"
onClick={() => act('reconnect')} />
)}>
<LabeledList>
<LabeledList.Item label="Input Injector">
<Button
icon={data.inputting ? 'power-off' : 'times'}
content={data.inputting ? 'Injecting' : 'Off'}
selected={data.inputting}
onClick={() => act('input')} />
</LabeledList.Item>
<LabeledList.Item label="Input Rate">
<NumberInput
value={data.inputRate}
unit="L/s"
width="63px"
minValue={0}
maxValue={200}
// This takes an exceptionally long time to update
// due to being an async signal
suppressFlicker={2000}
onChange={(e, value) => act('rate', {
rate: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Output Regulator">
<Button
icon={data.outputting ? 'power-off' : 'times'}
content={data.outputting ? 'Open' : 'Closed'}
selected={data.outputting}
onClick={() => act('output')} />
</LabeledList.Item>
<LabeledList.Item label="Output Pressure">
<NumberInput
value={parseFloat(data.outputPressure)}
unit="kPa"
width="75px"
minValue={0}
maxValue={4500}
step={10}
// This takes an exceptionally long time to update
// due to being an async signal
suppressFlicker={2000}
onChange={(e, value) => act('pressure', {
pressure: value,
})} />
</LabeledList.Item>
</LabeledList>
</Section>
)}
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/AtmosFilter.js
+52
View File
@@ -0,0 +1,52 @@
import { useBackend } from '../backend';
import { Button, LabeledList, NumberInput, Section } from '../components';
import { getGasLabel } from '../constants';
export const AtmosFilter = props => {
const { act, data } = useBackend(props);
const filterTypes = data.filter_types || [];
return (
<Section>
<LabeledList>
<LabeledList.Item label="Power">
<Button
icon={data.on ? 'power-off' : 'times'}
content={data.on ? 'On' : 'Off'}
selected={data.on}
onClick={() => act('power')} />
</LabeledList.Item>
<LabeledList.Item label="Transfer Rate">
<NumberInput
animated
value={parseFloat(data.rate)}
width="63px"
unit="L/s"
minValue={0}
maxValue={200}
onDrag={(e, value) => act('rate', {
rate: value,
})} />
<Button
ml={1}
icon="plus"
content="Max"
disabled={data.rate === data.max_rate}
onClick={() => act('rate', {
rate: 'max',
})} />
</LabeledList.Item>
<LabeledList.Item label="Filter">
{filterTypes.map(filter => (
<Button
key={filter.id}
selected={filter.selected}
content={getGasLabel(filter.id, filter.name)}
onClick={() => act('filter', {
mode: filter.id,
})} />
))}
</LabeledList.Item>
</LabeledList>
</Section>
);
};
tgui-next/packages/tgui/interfaces/AtmosMixer.js
+66
View File
@@ -0,0 +1,66 @@
import { useBackend } from '../backend';
import { Button, LabeledList, NumberInput, Section } from '../components';
export const AtmosMixer = props => {
const { act, data } = useBackend(props);
return (
<Section>
<LabeledList>
<LabeledList.Item label="Power">
<Button
icon={data.on ? 'power-off' : 'times'}
content={data.on ? 'On' : 'Off'}
selected={data.on}
onClick={() => act('power')} />
</LabeledList.Item>
<LabeledList.Item label="Output Pressure">
<NumberInput
animated
value={parseFloat(data.set_pressure)}
unit="kPa"
width="75px"
minValue={0}
maxValue={4500}
step={10}
onChange={(e, value) => act('pressure', {
pressure: value,
})} />
<Button
ml={1}
icon="plus"
content="Max"
disabled={data.set_pressure === data.max_pressure}
onClick={() => act('pressure', {
pressure: 'max',
})} />
</LabeledList.Item>
<LabeledList.Item label="Node 1">
<NumberInput
animated
value={data.node1_concentration}
unit="%"
width="60px"
minValue={0}
maxValue={100}
stepPixelSize={2}
onDrag={(e, value) => act('node1', {
concentration: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Node 2">
<NumberInput
animated
value={data.node2_concentration}
unit="%"
width="60px"
minValue={0}
maxValue={100}
stepPixelSize={2}
onDrag={(e, value) => act('node2', {
concentration: value,
})} />
</LabeledList.Item>
</LabeledList>
</Section>
);
};
tgui-next/packages/tgui/interfaces/AtmosPump.js
+63
View File
@@ -0,0 +1,63 @@
import { useBackend } from '../backend';
import { Button, LabeledList, NumberInput, Section } from '../components';
export const AtmosPump = props => {
const { act, data } = useBackend(props);
return (
<Section>
<LabeledList>
<LabeledList.Item label="Power">
<Button
icon={data.on ? 'power-off' : 'times'}
content={data.on ? 'On' : 'Off'}
selected={data.on}
onClick={() => act('power')} />
</LabeledList.Item>
{data.max_rate ? (
<LabeledList.Item label="Transfer Rate">
<NumberInput
animated
value={parseFloat(data.rate)}
width="63px"
unit="L/s"
minValue={0}
maxValue={200}
onChange={(e, value) => act('rate', {
rate: value,
})} />
<Button
ml={1}
icon="plus"
content="Max"
disabled={data.rate === data.max_rate}
onClick={() => act('rate', {
rate: 'max',
})} />
</LabeledList.Item>
) : (
<LabeledList.Item label="Output Pressure">
<NumberInput
animated
value={parseFloat(data.pressure)}
unit="kPa"
width="75px"
minValue={0}
maxValue={4500}
step={10}
onChange={(e, value) => act('pressure', {
pressure: value,
})} />
<Button
ml={1}
icon="plus"
content="Max"
disabled={data.pressure === data.max_pressure}
onClick={() => act('pressure', {
pressure: 'max',
})} />
</LabeledList.Item>
)}
</LabeledList>
</Section>
);
};
tgui-next/packages/tgui/interfaces/BankMachine.js
+33
View File
@@ -0,0 +1,33 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, LabeledList, NoticeBox, Section } from '../components';
export const BankMachine = props => {
const { act, data } = useBackend(props);
const {
current_balance,
siphoning,
station_name,
} = data;
return (
<Fragment>
<Section title={station_name + ' Vault'}>
<LabeledList>
<LabeledList.Item label="Current Balance"
buttons={(
<Button
icon={siphoning ? 'times' : 'sync'}
content={siphoning ? 'Stop Siphoning' : 'Siphon Credits'}
selected={siphoning}
onClick={() => act(siphoning ? 'halt' : 'siphon')} />
)}>
{current_balance + ' cr'}
</LabeledList.Item>
</LabeledList>
</Section>
<NoticeBox textAlign="center">
Authorized personnel only
</NoticeBox>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/Bepis.js
+109
View File
@@ -0,0 +1,109 @@
import { multiline } from 'common/string';
import { Fragment } from 'inferno';
import { act } from '../byond';
import { Section, LabeledList, Button, NumberInput, Box, Grid } from '../components';
export const Bepis = props => {
const { state } = props;
const { config, data } = state;
const { ref } = config;
const {
amount,
} = data;
return (
<Section title="Business Exploration Protocol Incubation Sink">
<Section
title="Information"
backgroundColor="#450F44"
buttons={(
<Button
icon="power-off"
content={data.manual_power ? 'Off' : 'On'}
selected={!data.manual_power}
onClick={() => act(ref, 'toggle_power')} />
)}>
All you need to know about the B.E.P.I.S. and you!
The B.E.P.I.S. performs hundreds of tests a second
using electrical and financial resources to invent
new products, or discover new technologies otherwise
overlooked for being too risky or too niche to produce!
</Section>
<Section
title="Payer's Account"
buttons={(
<Button
icon="redo-alt"
content="Reset Account"
onClick={() => act(ref, 'account_reset')} />
)}>
Console is currently being operated
by {data.account_owner ? data.account_owner : 'no one'}.
</Section>
<Grid>
<Grid.Column size={1.5}>
<Section title="Stored Data and Statistics">
<LabeledList>
<LabeledList.Item label="Deposited Credits">
{data.stored_cash}
</LabeledList.Item>
<LabeledList.Item label="Investment Variability">
{data.accuracy_percentage}%
</LabeledList.Item>
<LabeledList.Item label="Innovation Bonus">
{data.positive_cash_offset}
</LabeledList.Item>
<LabeledList.Item label="Risk Offset"
color="bad">
{data.negative_cash_offset}
</LabeledList.Item>
<LabeledList.Item label="Deposit Amount">
<NumberInput
value={amount}
unit="Credits"
minValue={100}
maxValue={30000}
step={100}
stepPixelSize={2}
onChange={(e, value) => act(ref, 'amount', {
amount: value,
})} />
</LabeledList.Item>
</LabeledList>
</Section>
<Box>
<Button
icon="donate"
content="Deposit Credits"
disabled={data.manual_power === 1 || data.silicon_check === 1}
onClick={() => act(ref, 'deposit_cash')}
/>
<Button
icon="eject"
content="Withdraw Credits"
disabled={data.manual_power === 1}
onClick={() => act(ref, 'withdraw_cash')} />
</Box>
</Grid.Column>
<Grid.Column>
<Section title="Market Data and Analysis">
<Box>
Average technology cost: {data.mean_value}
</Box>
{data.error_name && (
<Box color="bad">
Previous Failure Reason: Deposited cash value too low.
Please insert more money for future success.
</Box>
)}
<Box m={1} />
<Button
icon="microscope"
disabled={data.manual_power === 1}
onClick={() => act(ref, 'begin_experiment')}
content="Begin Testing" />
</Section>
</Grid.Column>
</Grid>
</Section>
);
};
tgui-next/packages/tgui/interfaces/BluespaceArtillery.js
+78
View File
@@ -0,0 +1,78 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
export const BluespaceArtillery = props => {
const { act, data } = useBackend(props);
const {
notice,
connected,
unlocked,
target,
} = data;
return (
<Fragment>
{!!notice && (
<NoticeBox>
{notice}
</NoticeBox>
)}
{connected ? (
<Fragment>
<Section
title="Target"
buttons={(
<Button
icon="crosshairs"
disabled={!unlocked}
onClick={() => act('recalibrate')} />
)}>
<Box
color={target ? 'average' : 'bad'}
fontSize="25px">
{target || 'No Target Set'}
</Box>
</Section>
<Section>
{unlocked ? (
<Box style={{ margin: 'auto' }}>
<Button
fluid
content="FIRE"
color="bad"
disabled={!target}
fontSize="30px"
textAlign="center"
lineHeight="46px"
onClick={() => act('fire')} />
</Box>
) : (
<Fragment>
<Box
color="bad"
fontSize="18px">
Bluespace artillery is currently locked.
</Box>
<Box mt={1}>
Awaiting authorization via keycard reader from at minimum
two station heads.
</Box>
</Fragment>
)}
</Section>
</Fragment>
) : (
<Section>
<LabeledList>
<LabeledList.Item label="Maintenance">
<Button
icon="wrench"
content="Complete Deployment"
onClick={() => act('build')} />
</LabeledList.Item>
</LabeledList>
</Section>
)}
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/BorgPanel.js
+135
View File
@@ -0,0 +1,135 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
export const BorgPanel = props => {
const { act, data } = useBackend(props);
const borg = data.borg || {};
const cell = data.cell || {};
const cellPercent = cell.charge / cell.maxcharge;
const channels = data.channels || [];
const modules = data.modules || [];
const upgrades = data.upgrades || [];
const ais = data.ais || [];
const laws = data.laws || [];
return (
<Fragment>
<Section
title={borg.name}
buttons={(
<Button
icon="pencil-alt"
content="Rename"
onClick={() => act('rename')} />
)}>
<LabeledList>
<LabeledList.Item label="Status">
<Button
icon={borg.emagged ? 'check-square-o' : 'square-o'}
content="Emagged"
selected={borg.emagged}
onClick={() => act('toggle_emagged')} />
<Button
icon={borg.lockdown ? 'check-square-o' : 'square-o'}
content="Locked Down"
selected={borg.lockdown}
onClick={() => act('toggle_lockdown')} />
<Button
icon={borg.scrambledcodes ? 'check-square-o' : 'square-o'}
content="Scrambled Codes"
selected={borg.scrambledcodes}
onClick={() => act('toggle_scrambledcodes')} />
</LabeledList.Item>
<LabeledList.Item label="Charge">
{!cell.missing ? (
<ProgressBar
value={cellPercent}
content={cell.charge + ' / ' + cell.maxcharge} />
) : (
<span className="color-bad">No cell installed</span>
) }
<br />
<Button
icon="pencil-alt"
content="Set"
onClick={() => act('set_charge')} />
<Button
icon="eject"
content="Change"
onClick={() => act('change_cell')} />
<Button
icon="trash"
content="Remove"
color="bad"
onClick={() => act('remove_cell')} />
</LabeledList.Item>
<LabeledList.Item label="Radio Channels">
{channels.map(channel => (
<Button
key={channel.name}
icon={channel.installed ? 'check-square-o' : 'square-o'}
content={channel.name}
selected={channel.installed}
onClick={() => act('toggle_radio', {
channel: channel.name,
})} />
))}
</LabeledList.Item>
<LabeledList.Item label="Module">
{modules.map(module => (
<Button
key={module.type}
icon={borg.active_module === module.type
? 'check-square-o'
: 'square-o'}
content={module.name}
selected={borg.active_module === module.type}
onClick={() => act('setmodule', {
module: module.type,
})} />
))}
</LabeledList.Item>
<LabeledList.Item label="Upgrades">
{upgrades.map(upgrade => (
<Button
key={upgrade.type}
icon={upgrade.installed ? 'check-square-o' : 'square-o'}
content={upgrade.name}
selected={upgrade.installed}
onClick={() => act('toggle_upgrade', {
upgrade: upgrade.type,
})} />
))}
</LabeledList.Item>
<LabeledList.Item label="Master AI">
{ais.map(ai => (
<Button
key={ai.ref}
icon={ai.connected ? 'check-square-o' : 'square-o'}
content={ai.name}
selected={ai.connected}
onClick={() => act('slavetoai', {
slavetoai: ai.ref,
})} />
))}
</LabeledList.Item>
</LabeledList>
</Section>
<Section
title="Laws"
buttons={(
<Button
icon={borg.lawupdate ? 'check-square-o' : 'square-o'}
content="Lawsync"
selected={borg.lawupdate}
onClick={() => act('toggle_lawupdate')} />
)}>
{laws.map(law => (
<Box key={law}>
{law}
</Box>
))}
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/BrigTimer.js
+55
View File
@@ -0,0 +1,55 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, Section } from '../components';
export const BrigTimer = props => {
const { act, data } = useBackend(props);
return (
<Section
title="Cell Timer"
buttons={(
<Fragment>
<Button
icon="clock-o"
content={data.timing ? 'Stop' : 'Start'}
selected={data.timing}
onClick={() => act(data.timing ? 'stop' : 'start')} />
<Button
icon="lightbulb-o"
content={data.flash_charging ? 'Recharging' : 'Flash'}
disabled={data.flash_charging}
onClick={() => act('flash')} />
</Fragment>
)}>
<Button
icon="fast-backward"
onClick={() => act('time', { adjust: -600 })} />
<Button
icon="backward"
onClick={() => act('time', { adjust: -100 })} />
{' '}
{String(data.minutes).padStart(2, '0')}:
{String(data.seconds).padStart(2, '0')}
{' '}
<Button
icon="forward"
onClick={() => act('time', { adjust: 100 })} />
<Button
icon="fast-forward"
onClick={() => act('time', { adjust: 600 })} />
<br />
<Button
icon="hourglass-start"
content="Short"
onClick={() => act('preset', { preset: 'short' })} />
<Button
icon="hourglass-start"
content="Medium"
onClick={() => act('preset', { preset: 'medium' })} />
<Button
icon="hourglass-start"
content="Long"
onClick={() => act('preset', { preset: 'long' })} />
</Section>
);
};
tgui-next/packages/tgui/interfaces/Canister.js
+121
View File
@@ -0,0 +1,121 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { AnimatedNumber, Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
export const Canister = props => {
const { act, data } = useBackend(props);
return (
<Fragment>
<NoticeBox>
The regulator {data.hasHoldingTank ? 'is' : 'is not'} connected
to a tank.
</NoticeBox>
<Section
title="Canister"
buttons={(
<Button
icon="pencil-alt"
content="Relabel"
onClick={() => act('relabel')} />
)}>
<LabeledList>
<LabeledList.Item label="Pressure">
<AnimatedNumber value={data.tankPressure} /> kPa
</LabeledList.Item>
<LabeledList.Item
label="Port"
color={data.portConnected ? 'good' : 'average'}
content={data.portConnected ? 'Connected' : 'Not Connected'} />
{!!data.isPrototype && (
<LabeledList.Item label="Access">
<Button
icon={data.restricted ? 'lock' : 'unlock'}
color="caution"
content={data.restricted
? 'Restricted to Engineering'
: 'Public'}
onClick={() => act('restricted')} />
</LabeledList.Item>
)}
</LabeledList>
</Section>
<Section title="Valve">
<LabeledList>
<LabeledList.Item label="Release Pressure">
<ProgressBar
value={data.releasePressure
/ (data.maxReleasePressure - data.minReleasePressure)}>
<AnimatedNumber value={data.releasePressure} /> kPa
</ProgressBar>
</LabeledList.Item>
<LabeledList.Item label="Pressure Regulator">
<Button
icon="undo"
disabled={data.releasePressure === data.defaultReleasePressure}
content="Reset"
onClick={() => act('pressure', {
pressure: 'reset',
})} />
<Button
icon="minus"
disabled={data.releasePressure <= data.minReleasePressure}
content="Min"
onClick={() => act('pressure', {
pressure: 'min',
})} />
<Button
icon="pencil-alt"
content="Set"
onClick={() => act('pressure', {
pressure: 'input',
})} />
<Button
icon="plus"
disabled={data.releasePressure >= data.maxReleasePressure}
content="Max"
onClick={() => act('pressure', {
pressure: 'max',
})} />
</LabeledList.Item>
<LabeledList.Item label="Valve">
<Button
icon={data.valveOpen ? 'unlock' : 'lock'}
color={data.valveOpen
? (data.hasHoldingTank ? 'caution' : 'danger')
: null}
content={data.valveOpen ? 'Open' : 'Closed'}
onClick={() => act('valve')} />
</LabeledList.Item>
</LabeledList>
</Section>
<Section
title="Holding Tank"
buttons={!!data.hasHoldingTank && (
<Button
icon="eject"
color={data.valveOpen && 'danger'}
content="Eject"
onClick={() => act('eject')} />
)}>
{!!data.hasHoldingTank && (
<LabeledList>
<LabeledList.Item label="Label">
{data.holdingTank.name}
</LabeledList.Item>
<LabeledList.Item label="Pressure">
<AnimatedNumber value={data.holdingTank.tankPressure} /> kPa
</LabeledList.Item>
</LabeledList>
)}
{!data.hasHoldingTank && (
<Box color="average">
No Holding Tank
</Box>
)}
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/Cargo.js
+339
View File
@@ -0,0 +1,339 @@
import { map } from 'common/collections';
import { Fragment } from 'inferno';
import { act } from '../byond';
import { AnimatedNumber, Box, Button, LabeledList, Section, Tabs } from '../components';
import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
export const Cargo = props => {
const { state } = props;
const { config, data } = state;
const { ref } = config;
const supplies = data.supplies || {};
const requests = data.requests || [];
const cart = data.cart || [];
const cartTotalAmount = cart
.reduce((total, entry) => total + entry.cost, 0);
const cartButtons = !data.requestonly && (
<Fragment>
<Box inline mx={1}>
{cart.length === 0 && 'Cart is empty'}
{cart.length === 1 && '1 item'}
{cart.length >= 2 && cart.length + ' items'}
{' '}
{cartTotalAmount > 0 && `(${cartTotalAmount} cr)`}
</Box>
<Button
icon="times"
color="transparent"
content="Clear"
onClick={() => act(ref, 'clear')} />
</Fragment>
);
return (
<Fragment>
<Section
title="Cargo"
buttons={(
<Box inline bold>
<AnimatedNumber value={Math.round(data.points)} /> credits
</Box>
)}>
<LabeledList>
<LabeledList.Item label="Shuttle">
{data.docked && !data.requestonly && (
<Button
content={data.location}
onClick={() => act(ref, 'send')} />
) || data.location}
</LabeledList.Item>
<LabeledList.Item label="CentCom Message">
{data.message}
</LabeledList.Item>
{(data.loan && !data.requestonly) ? (
<LabeledList.Item label="Loan">
{!data.loan_dispatched ? (
<Button
content="Loan Shuttle"
disabled={!(data.away && data.docked)}
onClick={() => act(ref, 'loan')} />
) : (
<Box color="bad">Loaned to Centcom</Box>
)}
</LabeledList.Item>
) : ''}
</LabeledList>
</Section>
<Tabs mt={2}>
<Tabs.Tab
key="catalog"
label="Catalog"
icon="list"
lineHeight="23px">
{() => (
<Section
title="Catalog"
buttons={cartButtons}>
<Catalog state={state} supplies={supplies} />
</Section>
)}
</Tabs.Tab>
<Tabs.Tab
key="requests"
label={`Requests (${requests.length})`}
icon="envelope"
highlight={requests.length > 0}
lineHeight="23px">
{() => (
<Section
title="Active Requests"
buttons={!data.requestonly && (
<Button
icon="times"
content="Clear"
color="transparent"
onClick={() => act(ref, 'denyall')} />
)}>
<Requests state={state} requests={requests} />
</Section>
)}
</Tabs.Tab>
{!data.requestonly && (
<Tabs.Tab
key="cart"
label={`Checkout (${cart.length})`}
icon="shopping-cart"
highlight={cart.length > 0}
lineHeight="23px">
{() => (
<Section
title="Current Cart"
buttons={cartButtons}>
<Cart state={state} cart={cart} />
</Section>
)}
</Tabs.Tab>
)}
</Tabs>
</Fragment>
);
};
const Catalog = props => {
const { state, supplies } = props;
const { config, data } = state;
const { ref } = config;
const renderTab = key => {
const supply = supplies[key];
const packs = supply.packs;
return (
<table className="LabeledList">
{packs.map(pack => (
<tr
key={pack.name}
className="LabeledList__row candystripe">
<td className="LabeledList__cell LabeledList__label">
{pack.name}:
</td>
<td className="LabeledList__cell">
{!!pack.small_item && (
<Fragment>Small Item</Fragment>
)}
</td>
<td className="LabeledList__cell">
{!!pack.access && (
<Fragment>Restrictions Apply</Fragment>
)}
</td>
<td className="LabeledList__cell LabeledList__buttons">
<Button fluid
content={(data.self_paid
? Math.round(pack.cost * 1.1)
: pack.cost) + ' credits'}
tooltip={pack.desc}
tooltipPosition="left"
onClick={() => act(ref, 'add', {
id: pack.id,
})} />
</td>
</tr>
))}
</table>
);
};
return (
<Tabs vertical>
{map(supply => {
const name = supply.name;
return (
<Tabs.Tab key={name} label={name}>
{renderTab}
</Tabs.Tab>
);
})(supplies)}
</Tabs>
);
};
const Requests = props => {
const { state, requests } = props;
const { config, data } = state;
const { ref } = config;
if (requests.length === 0) {
return (
<Box color="good">
No Requests
</Box>
);
}
// Labeled list reimplementation to squeeze extra columns out of it
return (
<table className="LabeledList">
{requests.map(request => (
<Fragment key={request.id}>
<tr className="LabeledList__row candystripe">
<td className="LabeledList__cell LabeledList__label">
#{request.id}:
</td>
<td className="LabeledList__cell LabeledList__content">
{request.object}
</td>
<td className="LabeledList__cell">
By <b>{request.orderer}</b>
</td>
<td className="LabeledList__cell">
<i>{request.reason}</i>
</td>
<td className="LabeledList__cell LabeledList__buttons">
{request.cost} credits
{' '}
{!data.requestonly && (
<Fragment>
<Button
icon="check"
color="good"
onClick={() => act(ref, 'approve', {
id: request.id,
})} />
<Button
icon="times"
color="bad"
onClick={() => act(ref, 'deny', {
id: request.id,
})} />
</Fragment>
)}
</td>
</tr>
</Fragment>
))}
</table>
);
};
const Cart = props => {
const { state, cart } = props;
const { config, data } = state;
const { ref } = config;
return (
<Fragment>
{cart.length === 0 && 'Nothing in cart'}
{cart.length > 0 && (
<LabeledList>
{cart.map(entry => (
<LabeledList.Item
key={entry.id}
className="candystripe"
label={'#' + entry.id}
buttons={(
<Fragment>
<Box inline mx={2}>
{!!entry.paid && (<b>[Paid Privately]</b>)}
{' '}
{entry.cost} credits
</Box>
<Button
icon="minus"
onClick={() => act(ref, 'remove', {
id: entry.id,
})} />
</Fragment>
)}>
{entry.object}
</LabeledList.Item>
))}
</LabeledList>
)}
{cart.length > 0 && !data.requestonly && (
<Box mt={2}>
{data.away === 1 && data.docked === 1 && (
<Button
color="green"
style={{
'line-height': '28px',
'padding': '0 12px',
}}
content="Confirm the order"
onClick={() => act(ref, 'send')} />
) || (
<Box opacity={0.5}>
Shuttle in {data.location}.
</Box>
)}
</Box>
)}
</Fragment>
);
};
export const CargoExpress = props => {
const { state } = props;
const { config, data } = state;
const { ref } = config;
const supplies = data.supplies || {};
return (
<Fragment>
<InterfaceLockNoticeBox
siliconUser={data.siliconUser}
locked={data.locked}
onLockStatusChange={() => act(ref, 'lock')}
accessText="a QM-level ID card" />
{!data.locked &&(
<Fragment>
<Section
title="Cargo Express"
buttons={(
<Box inline bold>
<AnimatedNumber value={Math.round(data.points)} /> credits
</Box>
)}>
<LabeledList>
<LabeledList.Item label="Landing Location">
<Button
content="Cargo Bay"
selected={!data.usingBeacon}
onClick={() => act(ref, 'LZCargo')} />
<Button
selected={data.usingBeacon}
disabled={!data.hasBeacon}
onClick={() => act(ref, 'LZBeacon')}>
{data.beaconzone} ({data.beaconName})
</Button>
<Button
content={data.printMsg}
disabled={!data.canBuyBeacon}
onClick={() => act(ref, 'printBeacon')} />
</LabeledList.Item>
<LabeledList.Item label="Notice">
{data.message}
</LabeledList.Item>
</LabeledList>
</Section>
<Catalog state={state} supplies={supplies} />
</Fragment>
)}
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/CellularEmporium.js
+54
View File
@@ -0,0 +1,54 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, Section } from '../components';
export const CellularEmporium = props => {
const { act, data } = useBackend(props);
const { abilities } = data;
return (
<Fragment>
<Section>
<LabeledList>
<LabeledList.Item
label="Genetic Points"
buttons={(
<Button
icon="undo"
content="Readapt"
disabled={!data.can_readapt}
onClick={() => act('readapt')} />
)}>
{data.genetic_points_remaining}
</LabeledList.Item>
</LabeledList>
</Section>
<Section>
<LabeledList>
{abilities.map(ability => (
<LabeledList.Item
key={ability.name}
className="candystripe"
label={ability.name}
buttons={(
<Fragment>
{ability.dna_cost}
{' '}
<Button
content={ability.owned ? 'Evolved' : 'Evolve'}
selected={ability.owned}
onClick={() => act('evolve', {
name: ability.name,
})} />
</Fragment>
)}>
{ability.desc}
<Box color="good">
{ability.helptext}
</Box>
</LabeledList.Item>
))}
</LabeledList>
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/CentcomPodLauncher.js
+450
View File
@@ -0,0 +1,450 @@
import { multiline } from 'common/string';
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, LabeledList, NoticeBox, Section } from '../components';
// This is more or less a direct port from old tgui, with some slight
// text cleanup. But yes, it actually worked like this.
export const CentcomPodLauncher = props => {
const { act, data } = useBackend(props);
return (
<Fragment>
<NoticeBox>
To use this, simply spawn the atoms you want in one of the five
Centcom Supplypod Bays. Items in the bay will then be launched inside
your supplypod, one turf-full at a time! You can optionally use the
following buttons to configure how the supplypod acts.
</NoticeBox>
<Section
title="Centcom Pod Customization (To be used against Helen Weinstein)">
<LabeledList>
<LabeledList.Item label="Supply Bay">
<Button
content="Bay #1"
selected={data.bayNumber === 1}
onClick={() => act('bay1')} />
<Button
content="Bay #2"
selected={data.bayNumber === 2}
onClick={() => act('bay2')} />
<Button
content="Bay #3"
selected={data.bayNumber === 3}
onClick={() => act('bay3')} />
<Button
content="Bay #4"
selected={data.bayNumber === 4}
onClick={() => act('bay4')} />
<Button
content="ERT Bay"
selected={data.bayNumber === 5}
tooltip={multiline`
This bay is located on the western edge of CentCom. Its the
glass room directly west of where ERT spawn, and south of the
CentCom ferry. Useful for launching ERT/Deathsquads/etc. onto
the station via drop pods.
`}
onClick={() => act('bay5')} />
</LabeledList.Item>
<LabeledList.Item label="Teleport to">
<Button
content={data.bay}
onClick={() => act('teleportCentcom')} />
<Button
content={data.oldArea ? data.oldArea : 'Where you were'}
disabled={!data.oldArea}
onClick={() => act('teleportBack')} />
</LabeledList.Item>
<LabeledList.Item label="Clone Mode" >
<Button
content="Launch Clones"
selected={data.launchClone}
tooltip={multiline`
Choosing this will create a duplicate of the item to be
launched in Centcom, allowing you to send one type of item
multiple times. Either way, the atoms are forceMoved into
the supplypod after it lands (but before it opens).
`}
onClick={() => act('launchClone')} />
</LabeledList.Item>
<LabeledList.Item label="Launch style">
<Button
content="Ordered"
selected={data.launchChoice === 1}
tooltip={multiline`
Instead of launching everything in the bay at once, this
will "scan" things (one turf-full at a time) in order, left
to right and top to bottom. undoing will reset the "scanner"
to the top-leftmost position.
`}
onClick={() => act('launchOrdered')} />
<Button
content="Random"
selected={data.launchChoice === 2}
tooltip={multiline`
Instead of launching everything in the bay at once, this
will launch one random turf of items at a time.
`}
onClick={() => act('launchRandom')} />
</LabeledList.Item>
<LabeledList.Item label="Explosion">
<Button
content="Custom Size"
selected={data.explosionChoice === 1}
tooltip={multiline`
This will cause an explosion of whatever size you like
(including flame range) to occur as soon as the supplypod
lands. Dont worry, supply-pods are explosion-proof!
`}
onClick={() => act('explosionCustom')} />
<Button
content="Adminbus"
selected={data.explosionChoice === 2}
tooltip={multiline`
This will cause a maxcap explosion (dependent on server
config) to occur as soon as the supplypod lands. Dont worry,
supply-pods are explosion-proof!
`}
onClick={() => act('explosionBus')} />
</LabeledList.Item>
<LabeledList.Item label="Damage">
<Button
content="Custom Damage"
selected={data.damageChoice === 1}
tooltip={multiline`
Anyone caught under the pod when it lands will be dealt
this amount of brute damage. Sucks to be them!
`}
onClick={() => act('damageCustom')} />
<Button
content="Gib"
selected={data.damageChoice === 2}
tooltip={multiline`
This will attempt to gib any mob caught under the pod when
it lands, as well as dealing a nice 5000 brute damage. Ya
know, just to be sure!
`}
onClick={() => act('damageGib')} />
</LabeledList.Item>
<LabeledList.Item label="Effects">
<Button
content="Stun"
selected={data.effectStun}
tooltip={multiline`
Anyone who is on the turf when the supplypod is launched
will be stunned until the supplypod lands. They cant get
away that easy!
`}
onClick={() => act('effectStun')} />
<Button
content="Delimb"
selected={data.effectLimb}
tooltip={multiline`
This will cause anyone caught under the pod to lose a limb,
excluding their head.
`}
onClick={() => act('effectLimb')} />
<Button
content="Yeet Organs"
selected={data.effectOrgans}
tooltip={multiline`
This will cause anyone caught under the pod to lose all
their limbs and organs in a spectacular fashion.
`}
onClick={() => act('effectOrgans')} />
</LabeledList.Item>
<LabeledList.Item label="Movement">
<Button
content="Bluespace"
selected={data.effectBluespace}
tooltip={multiline`
Gives the supplypod an advanced Bluespace Recyling Device.
After opening, the supplypod will be warped directly to the
surface of a nearby NT-designated trash planet (/r/ss13).
`}
onClick={() => act('effectBluespace')} />
<Button
content="Stealth"
selected={data.effectStealth}
tooltip={multiline`
This hides the red target icon from appearing when you
launch the supplypod. Combos well with the "Invisible"
style. Sneak attack, go!
`}
onClick={() => act('effectStealth')} />
<Button
content="Quiet"
selected={data.effectQuiet}
tooltip={multiline`
This will keep the supplypod from making any sounds, except
for those specifically set by admins in the Sound section.
`}
onClick={() => act('effectQuiet')} />
<Button
content="Reverse Mode"
selected={data.effectReverse}
tooltip={multiline`
This pod will not send any items. Instead, after landing,
the supplypod will close (similar to a normal closet closing),
and then launch back to the right centcom bay to drop off any
new contents.
`}
onClick={() => act('effectReverse')} />
<Button
content="Missile Mode"
selected={data.effectMissile}
tooltip={multiline`
This pod will not send any items. Instead, it will immediately
delete after landing (Similar visually to setting openDelay
& departDelay to 0, but this looks nicer). Useful if you just
wanna fuck some shit up. Combos well with the Missile style.
`}
onClick={() => act('effectMissile')} />
<Button
content="Any Descent Angle"
selected={data.effectCircle}
tooltip={multiline`
This will make the supplypod come in from any angle. Im not
sure why this feature exists, but here it is.
`}
onClick={() => act('effectCircle')} />
<Button
content="Machine Gun Mode"
selected={data.effectBurst}
tooltip={multiline`
This will make each click launch 5 supplypods inaccuratly
around the target turf (a 3x3 area). Combos well with the
Missile Mode if you dont want shit lying everywhere after.
`}
onClick={() => act('effectBurst')} />
<Button
content="Specific Target"
selected={data.effectTarget}
tooltip={multiline`
This will make the supplypod target a specific atom, instead
of the mouses position. Smiting does this automatically!
`}
onClick={() => act('effectTarget')} />
</LabeledList.Item>
<LabeledList.Item label="Name/Desc">
<Button
content="Custom Name/Desc"
selected={data.effectName}
tooltip="Allows you to add a custom name and description."
onClick={() => act('effectName')} />
<Button
content="Alert Ghosts"
selected={data.effectAnnounce}
tooltip={multiline`
Alerts ghosts when a pod is launched. Useful if some dumb
shit is aboutta come outta the pod.
`}
onClick={() => act('effectAnnounce')} />
</LabeledList.Item>
<LabeledList.Item label="Sound">
<Button
content="Custom Falling Sound"
selected={data.fallingSound}
tooltip={multiline`
Choose a sound to play as the pod falls. Note that for this
to work right you should know the exact length of the sound,
in seconds.
`}
onClick={() => act('fallSound')} />
<Button
content="Custom Landing Sound"
selected={data.landingSound}
tooltip="Choose a sound to play when the pod lands."
onClick={() => act('landingSound')} />
<Button
content="Custom Opening Sound"
selected={data.openingSound}
tooltip="Choose a sound to play when the pod opens."
onClick={() => act('openingSound')} />
<Button
content="Custom Leaving Sound"
selected={data.leavingSound}
tooltip={multiline`
Choose a sound to play when the pod departs (whether that be
delection in the case of a bluespace pod, or leaving for
centcom for a reversing pod).
`}
onClick={() => act('leavingSound')} />
<Button
content="Admin Sound Volume"
selected={data.soundVolume}
tooltip={multiline`
Choose the volume for the sound to play at. Default values
are between 1 and 100, but hey, do whatever. Im a tooltip,
not a cop.
`}
onClick={() => act('soundVolume')} />
</LabeledList.Item>
<LabeledList.Item label="Timers">
<Button
content="Custom Falling Duration"
selected={data.fallDuration !== 4}
tooltip={multiline`
Set how long the animation for the pod falling lasts. Create
dramatic, slow falling pods!
`}
onClick={() => act('fallDuration')} />
<Button
content="Custom Landing Time"
selected={data.landingDelay !== 20}
tooltip={multiline`
Choose the amount of time it takes for the supplypod to hit
the station. By default this value is 0.5 seconds.
`}
onClick={() => act('landingDelay')} />
<Button
content="Custom Opening Time"
selected={data.openingDelay !== 30}
tooltip={multiline`
Choose the amount of time it takes for the supplypod to open
after landing. Useful for giving whatevers inside the pod a
nice dramatic entrance! By default this value is 3 seconds.
`}
onClick={() => act('openingDelay')} />
<Button
content="Custom Leaving Time"
selected={data.departureDelay !== 30}
tooltip={multiline`
Choose the amount of time it takes for the supplypod to leave
after landing. By default this value is 3 seconds.
`}
onClick={() => act('departureDelay')} />
</LabeledList.Item>
<LabeledList.Item label="Style">
<Button
content="Standard"
selected={data.styleChoice === 1}
tooltip={multiline`
Same color scheme as the normal station-used supplypods
`}
onClick={() => act('styleStandard')} />
<Button
content="Advanced"
selected={data.styleChoice === 2}
tooltip={multiline`
The same as the stations upgraded blue-and-white
Bluespace Supplypods
`}
onClick={() => act('styleBluespace')} />
<Button
content="Syndicate"
selected={data.styleChoice === 4}
tooltip={multiline`
A menacing black and blood-red. Great for sending meme-ops
in style!
`}
onClick={() => act('styleSyndie')} />
<Button
content="Deathsquad"
selected={data.styleChoice === 5}
tooltip={multiline`
A menacing black and dark blue. Great for sending deathsquads
in style!
`}
onClick={() => act('styleBlue')} />
<Button
content="Cult Pod"
selected={data.styleChoice === 6}
tooltip="A blood and rune covered cult pod!"
onClick={() => act('styleCult')} />
<Button
content="Missile"
selected={data.styleChoice === 7}
tooltip={multiline`
A large missile. Combos well with a missile mode, so the
missile doesnt stick around after landing.
`}
onClick={() => act('styleMissile')} />
<Button
content="Syndicate Missile"
selected={data.styleChoice === 8}
tooltip={multiline`
A large blood-red missile. Combos well with missile mode,
so the missile doesnt stick around after landing.
`}
onClick={() => act('styleSMissile')} />
<Button
content="Supply Crate"
selected={data.styleChoice === 9}
tooltip="A large, dark-green military supply crate."
onClick={() => act('styleBox')} />
<Button
content="HONK"
selected={data.styleChoice === 10}
tooltip="A colorful, clown inspired look."
onClick={() => act('styleHONK')} />
<Button
content="~Fruit"
selected={data.styleChoice === 11}
tooltip="For when an orange is angry"
onClick={() => act('styleFruit')} />
<Button
content="Invisible"
selected={data.styleChoice === 12}
tooltip={multiline`
Makes the supplypod invisible! Useful for when you want to
use this feature with a gateway or something. Combos well
with the "Stealth" and "Quiet Landing" effects.
`}
onClick={() => act('styleInvisible')} />
<Button
content="Gondola"
selected={data.styleChoice === 13}
tooltip={multiline`
This gondola can control when he wants to deliver his supplies
if he has a smart enough mind, so offer up his body to ghosts
for maximum enjoyment. (Make sure to turn off bluespace and
set a arbitrarily high open-time if you do!
`}
onClick={() => act('styleGondola')} />
<Button
content="Show Contents (See Through Pod)"
selected={data.styleChoice === 14}
tooltip={multiline`
By selecting this, the pod will instead look like whatevers
inside it (as if it were the contents falling by themselves,
without a pod). Useful for launching mechs at the station
and standing tall as they soar in from the heavens.
`}
onClick={() => act('styleSeeThrough')} />
</LabeledList.Item>
</LabeledList>
</Section>
<Section>
<LabeledList>
<LabeledList.Item
label={data.numObjects + ' turfs in ' + data.bay}
buttons={(
<Fragment>
<Button
content="undo Pody Bay"
tooltip={multiline`
Manually undoes the possible things to launch in the
pod bay.
`}
onClick={() => act('undo')} />
<Button
content="Enter Launch Mode"
selected={data.giveLauncher}
tooltip="THE CODEX ASTARTES CALLS THIS MANEUVER: STEEL RAIN"
onClick={() => act('giveLauncher')} />
<Button
content="Clear Selected Bay"
color="bad"
tooltip={multiline`
This will delete all objs and mobs from the selected bay.
`}
tooltipPosition="left"
onClick={() => act('clearBay')} />
</Fragment>
)} />
</LabeledList>
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/ChemAcclimator.js
+76
View File
@@ -0,0 +1,76 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, LabeledList, NumberInput, Section } from '../components';
export const ChemAcclimator = props => {
const { act, data } = useBackend(props);
return (
<Fragment>
<Section title="Acclimator">
<LabeledList>
<LabeledList.Item label="Current Temperature">
{data.chem_temp} K
</LabeledList.Item>
<LabeledList.Item label="Target Temperature">
<NumberInput
value={data.target_temperature}
unit="K"
width="59px"
minValue={0}
maxValue={1000}
step={5}
stepPixelSize={2}
onChange={(e, value) => act('set_target_temperature', {
temperature: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Acceptable Temp. Difference">
<NumberInput
value={data.allowed_temperature_difference}
unit="K"
width="59px"
minValue={1}
maxValue={data.target_temperature}
stepPixelSize={2}
onChange={(e, value) => {
act('set_allowed_temperature_difference', {
temperature: value,
});
}} />
</LabeledList.Item>
</LabeledList>
</Section>
<Section
title="Status"
buttons={(
<Button
icon="power-off"
content={data.enabled ? "On" : "Off"}
selected={data.enabled}
onClick={() => act('toggle_power')} />
)}>
<LabeledList>
<LabeledList.Item label="Volume">
<NumberInput
value={data.max_volume}
unit="u"
width="50px"
minValue={data.reagent_volume}
maxValue={200}
step={2}
stepPixelSize={2}
onChange={(e, value) => act('change_volume', {
volume: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Current Operation">
{data.acclimate_state}
</LabeledList.Item>
<LabeledList.Item label="Current State">
{data.emptying ? 'Emptying' : 'Filling'}
</LabeledList.Item>
</LabeledList>
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/ChemDebugSynthesizer.js
+73
View File
@@ -0,0 +1,73 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { AnimatedNumber, Box, Button, LabeledList, NumberInput, Section } from '../components';
export const ChemDebugSynthesizer = props => {
const { act, data } = useBackend(props);
const {
amount,
beakerCurrentVolume,
beakerMaxVolume,
isBeakerLoaded,
beakerContents = [],
} = data;
return (
<Section
title="Recipient"
buttons={isBeakerLoaded ? (
<Fragment>
<Button
icon="eject"
content="Eject"
onClick={() => act('ejectBeaker')} />
<NumberInput
value={amount}
unit="u"
minValue={1}
maxValue={beakerMaxVolume}
step={1}
stepPixelSize={2}
onChange={(e, value) => act('amount', {
amount: value,
})} />
<Button
icon="plus"
content="Input"
onClick={() => act('input')} />
</Fragment>
) : (
<Button
icon="plus"
content="Create Beaker"
onClick={() => act('makecup')} />
)}>
{isBeakerLoaded ? (
<Fragment>
<Box>
<AnimatedNumber value={beakerCurrentVolume} />
{' / ' + beakerMaxVolume + ' u'}
</Box>
{beakerContents.length > 0 ? (
<LabeledList>
{beakerContents.map(chem => (
<LabeledList.Item
key={chem.name}
label={chem.name}>
{chem.volume} u
</LabeledList.Item>
))}
</LabeledList>
) : (
<Box color="bad">
Recipient Empty
</Box>
)}
</Fragment>
) : (
<Box color="average">
No Recipient
</Box>
)}
</Section>
);
};
tgui-next/packages/tgui/interfaces/ChemFilter.js
+94
View File
@@ -0,0 +1,94 @@
import { Component, Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, Grid, Section, Input } from '../components';
export const ChemFilterPane = props => {
const { act } = useBackend(props);
const { title, list, reagentName, onReagentInput } = props;
const titleKey = title.toLowerCase();
return (
<Section
title={title}
minHeight={40}
ml={0.5}
mr={0.5}
buttons={(
<Fragment>
<Input
placeholder="Reagent"
width="140px"
onInput={(e, value) => onReagentInput(value)} />
<Button
icon="plus"
onClick={() => act('add', {
which: titleKey,
name: reagentName,
})} />
</Fragment>
)}>
{list.map(filter => (
<Fragment key={filter}>
<Button
fluid
icon="minus"
content={filter}
onClick={() => act('remove', {
which: titleKey,
reagent: filter,
})} />
</Fragment>
))}
</Section>
);
};
export class ChemFilter extends Component {
constructor() {
super();
this.state = {
leftReagentName: '',
rightReagentName: '',
};
}
setLeftReagentName(leftReagentName) {
this.setState({
leftReagentName,
});
}
setRightReagentName(rightReagentName) {
this.setState({
rightReagentName,
});
}
render() {
const { state } = this.props;
const { data } = state;
const {
left = [],
right = [],
} = data;
return (
<Grid>
<Grid.Column>
<ChemFilterPane
title="Left"
list={left}
reagentName={this.state.leftReagentName}
onReagentInput={value => this.setLeftReagentName(value)}
state={state} />
</Grid.Column>
<Grid.Column>
<ChemFilterPane
title="Right"
list={right}
reagentName={this.state.rightReagentName}
onReagentInput={value => this.setRightReagentName(value)}
state={state} />
</Grid.Column>
</Grid>
);
}
}
tgui-next/packages/tgui/interfaces/ChemPress.js
+53
View File
@@ -0,0 +1,53 @@
import { useBackend } from '../backend';
import { Box, Button, Input, LabeledList, NumberInput, Section } from '../components';
export const ChemPress = props => {
const { act, data } = useBackend(props);
const {
pill_size,
pill_name,
pill_style,
pill_styles = [],
} = data;
return (
<Section>
<LabeledList>
<LabeledList.Item label="Pill Volume">
<NumberInput
value={pill_size}
unit="u"
width="43px"
minValue={5}
maxValue={50}
step={1}
stepPixelSize={2}
onChange={(e, value) => act('change_pill_size', {
volume: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Pill Name">
<Input
value={pill_name}
onChange={(e, value) => act('change_pill_name', {
name: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Pill Style">
{pill_styles.map(pill => (
<Button
key={pill.id}
width={5}
selected={pill.id === pill_style}
textAlign="center"
color="transparent"
onClick={() => act('change_pill_style', {
id: pill.id,
})}>
<Box mx={-1} className={pill.class_name} />
</Button>
))}
</LabeledList.Item>
</LabeledList>
</Section>
);
};
tgui-next/packages/tgui/interfaces/ChemReactionChamber.js
+98
View File
@@ -0,0 +1,98 @@
import { Component } from 'inferno';
import { act } from '../byond';
import { Box, Button, LabeledList, NumberInput, Section, Input } from '../components';
import { map } from 'common/collections';
import { classes } from 'common/react';
export class ChemReactionChamber extends Component {
constructor() {
super();
this.state = {
reagentName: "",
reagentQuantity: 1,
};
}
setReagentName(reagentName) {
this.setState({
reagentName,
});
}
setReagentQuantity(reagentQuantity) {
this.setState({
reagentQuantity,
});
}
render() {
const { state } = this.props;
const { config, data } = state;
const { ref } = config;
const emptying = data.emptying;
const reagents = data.reagents || [];
return (
<Section
title="Reagents"
buttons={(
<Box
inline
bold
color={emptying ? "bad" : "good"} >
{emptying ? "Emptying" : "Filling"}
</Box>
)} >
<LabeledList>
<tr className="LabledList__row">
<td
colSpan="2"
className="LabeledList__cell" >
<Input
fluid
value=""
placeholder="Reagent Name"
onInput={(e, value) => this.setReagentName(value)} />
</td>
<td
className={classes([
"LabeledList__buttons",
"LabeledList__cell",
])} >
<NumberInput
value={this.state.reagentQuantity}
minValue={1}
maxValue={100}
step={1}
stepPixelSize={3}
width="39px"
onDrag={(e, value) => this.setReagentQuantity(value)} />
<Box inline mr={1} />
<Button
icon="plus"
onClick={() => act(ref, 'add', {
chem: this.state.reagentName,
amount: this.state.reagentQuantity,
})} />
</td>
</tr>
{map((amount, reagent) => (
<LabeledList.Item
key={reagent}
label={reagent}
buttons={(
<Button
icon="minus"
color="bad"
onClick={() => act(ref, 'remove', {
chem: reagent,
})} />
)}>
{amount}
</LabeledList.Item>
))(reagents)}
</LabeledList>
</Section>
);
}
}
tgui-next/packages/tgui/interfaces/ChemSplitter.js
+48
View File
@@ -0,0 +1,48 @@
import { toFixed } from 'common/math';
import { useBackend } from '../backend';
import { LabeledList, NumberInput, Section } from '../components';
export const ChemSplitter = props => {
const { act, data } = useBackend(props);
const {
straight,
side,
max_transfer,
} = data;
return (
<Section>
<LabeledList>
<LabeledList.Item label="Straight">
<NumberInput
value={straight}
unit="u"
width="55px"
minValue={1}
maxValue={max_transfer}
format={value => toFixed(value, 2)}
step={0.05}
stepPixelSize={4}
onChange={(e, value) => act('set_amount', {
target: 'straight',
amount: value,
})} />
</LabeledList.Item>
<LabeledList.Item label="Side">
<NumberInput
value={side}
unit="u"
width="55px"
minValue={1}
maxValue={max_transfer}
format={value => toFixed(value, 2)}
step={0.05}
stepPixelSize={4}
onChange={(e, value) => act('set_amount', {
target: 'side',
amount: value,
})} />
</LabeledList.Item>
</LabeledList>
</Section>
);
};
tgui-next/packages/tgui/interfaces/ChemSynthesizer.js
+42
View File
@@ -0,0 +1,42 @@
import { toFixed } from 'common/math';
import { useBackend } from '../backend';
import { Box, Button, Section } from '../components';
export const ChemSynthesizer = props => {
const { act, data } = useBackend(props);
const {
amount,
current_reagent,
chemicals = [],
possible_amounts = [],
} = data;
return (
<Section>
<Box>
{possible_amounts.map(possible_amount => (
<Button
icon="plus"
key={toFixed(possible_amount, 0)}
content={toFixed(possible_amount, 0)}
selected={possible_amount === amount}
onClick={() => act('amount', {
target: possible_amount,
})} />
))}
</Box>
<Box mt={1}>
{chemicals.map(chemical => (
<Button
key={chemical.id}
icon="tint"
content={chemical.title}
width="129px"
selected={chemical.id === current_reagent}
onClick={() => act('select', {
reagent: chemical.id,
})} />
))}
</Box>
</Section>
);
};
tgui-next/packages/tgui/interfaces/CodexGigas.js
+98
View File
@@ -0,0 +1,98 @@
import { useBackend } from '../backend';
import { Button, LabeledList, Section } from '../components';
// TODO: refactor the backend of this it's a trainwreck
export const CodexGigas = props => {
const { act, data } = useBackend(props);
const prefixes = [
"Dark",
"Hellish",
"Fallen",
"Fiery",
"Sinful",
"Blood",
"Fluffy",
];
const titles = [
"Lord",
"Prelate",
"Count",
"Viscount",
"Vizier",
"Elder",
"Adept",
];
const names = [
"hal",
"ve",
"odr",
"neit",
"ci",
"quon",
"mya",
"folth",
"wren",
"geyr",
"hil",
"niet",
"twou",
"phi",
"coa",
];
const suffixes = [
"the Red",
"the Soulless",
"the Master",
"the Lord of all things",
"Jr.",
];
return (
<Section>
{data.name}
<LabeledList>
<LabeledList.Item label="Prefix">
{prefixes.map(prefix => (
<Button
key={prefix.toLowerCase()}
content={prefix}
disabled={data.currentSection !== 1}
onClick={() => act(prefix + ' ')} />
))}
</LabeledList.Item>
<LabeledList.Item label="Title">
{titles.map(title => (
<Button
key={title.toLowerCase()}
content={title}
disabled={data.currentSection > 2}
onClick={() => act(title + ' ')} />
))}
</LabeledList.Item>
<LabeledList.Item label="Name">
{names.map(name => (
<Button
key={name.toLowerCase()}
content={name}
disabled={data.currentSection > 4}
onClick={() => act(name)} />
))}
</LabeledList.Item>
<LabeledList.Item label="Suffix">
{suffixes.map(suffix => (
<Button
key={suffix.toLowerCase()}
content={suffix}
disabled={data.currentSection !== 4}
onClick={() => act(' ' + suffix)} />
))}
</LabeledList.Item>
<LabeledList.Item label="Submit">
<Button
content="Search"
disabled={data.currentSection < 4}
onClick={() => act('search')} />
</LabeledList.Item>
</LabeledList>
</Section>
);
};
tgui-next/packages/tgui/interfaces/ComputerFabricator.js
+403
View File
@@ -0,0 +1,403 @@
import { multiline } from 'common/string';
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, Grid, Section, Table, Tooltip } from '../components';
export const ComputerFabricator = props => {
const { state } = props;
const { act, data } = useBackend(props);
return (
<Fragment>
<Section italic fontSize="20px">
Your perfect device, only three steps away...
</Section>
{data.state !== 0 && (
<Button
fluid
mb={1}
icon="circle"
content="Clear Order"
onClick={() => act('clean_order')} />
)}
<CFScreen state={state} />
</Fragment>
);
};
// This had a pretty gross backend so this was unfortunately one of the
// best ways of doing it.
const CFScreen = props => {
const { act, data } = useBackend(props);
if (data.state === 0) {
return (
<Section
title="Step 1"
minHeight={51}>
<Box
mt={5}
bold
textAlign="center"
fontSize="40px">
Choose your Device
</Box>
<Box mt={3}>
<Grid width="100%">
<Grid.Column>
<Button
fluid
icon="laptop"
content="Laptop"
textAlign="center"
fontSize="30px"
lineHeight="50px"
onClick={() => act('pick_device', {
pick: '1',
})} />
</Grid.Column>
<Grid.Column>
<Button
fluid
icon="tablet-alt"
content="Tablet"
textAlign="center"
fontSize="30px"
lineHeight="50px"
onClick={() => act('pick_device', {
pick: '2',
})} />
</Grid.Column>
</Grid>
</Box>
</Section>
);
}
if (data.state === 1) {
return (
<Section
title="Step 2: Customize your device"
minHeight={47}
buttons={(
<Box bold color="good">
{data.totalprice} cr
</Box>
)}>
<Table>
<Table.Row>
<Table.Cell
bold
position="relative">
Battery:
<Tooltip
content={multiline`
Allows your device to operate without external utility power
source. Advanced batteries increase battery life.
`}
position="right" />
</Table.Cell>
<Table.Cell >
<Button
content="Standard"
selected={data.hw_battery === 1}
onClick={() => act('hw_battery', {
battery: '1',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Upgraded"
selected={data.hw_battery === 2}
onClick={() => act('hw_battery', {
battery: '2',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Advanced"
selected={data.hw_battery === 3}
onClick={() => act('hw_battery', {
battery: '3',
})} />
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell
bold
position="relative">
Hard Drive:
<Tooltip
content={multiline`
Stores file on your device. Advanced drives can store more
files, but use more power, shortening battery life.
`}
position="right" />
</Table.Cell>
<Table.Cell>
<Button
content="Standard"
selected={data.hw_disk === 1}
onClick={() => act('hw_disk', {
disk: '1',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Upgraded"
selected={data.hw_disk === 2}
onClick={() => act('hw_disk', {
disk: '2',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Advanced"
selected={data.hw_disk === 3}
onClick={() => act('hw_disk', {
disk: '3',
})} />
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell bold position="relative">
Network Card:
<Tooltip
content={multiline`
Allows your device to wirelessly connect to stationwide NTNet
network. Basic cards are limited to on-station use, while
advanced cards can operate anywhere near the station, which
includes asteroid outposts
`}
position="right" />
</Table.Cell>
<Table.Cell>
<Button
content="None"
selected={data.hw_netcard === 0}
onClick={() => act('hw_netcard', {
netcard: '0',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Standard"
selected={data.hw_netcard === 1}
onClick={() => act('hw_netcard', {
netcard: '1',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Advanced"
selected={data.hw_netcard === 2}
onClick={() => act('hw_netcard', {
netcard: '2',
})} />
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell bold position="relative">
Nano Printer:
<Tooltip
content={multiline`
A device that allows for various paperwork manipulations,
such as, scanning of documents or printing new ones.
This device was certified EcoFriendlyPlus and is capable of
recycling existing paper for printing purposes.
`}
position="right" />
</Table.Cell>
<Table.Cell>
<Button
content="None"
selected={data.hw_nanoprint === 0}
onClick={() => act('hw_nanoprint', {
print: '0',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Standard"
selected={data.hw_nanoprint === 1}
onClick={() => act('hw_nanoprint', {
print: '1',
})} />
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell bold position="relative">
Card Reader:
<Tooltip
content={multiline`
Adds a slot that allows you to manipulate RFID cards.
Please note that this is not necessary to allow the device
to read your identification, it is just necessary to
manipulate other cards.
`}
position="right" />
</Table.Cell>
<Table.Cell>
<Button
content="None"
selected={data.hw_card === 0}
onClick={() => act('hw_card', {
card: '0',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Standard"
selected={data.hw_card === 1}
onClick={() => act('hw_card', {
card: '1',
})} />
</Table.Cell>
</Table.Row>
{data.devtype !== 2 && (
<Fragment>
<Table.Row>
<Table.Cell bold position="relative">
Processor Unit:
<Tooltip
content={multiline`
A component critical for your device's functionality.
It allows you to run programs from your hard drive.
Advanced CPUs use more power, but allow you to run
more programs on background at once.
`}
position="right" />
</Table.Cell>
<Table.Cell>
<Button
content="Standard"
selected={data.hw_cpu === 1}
onClick={() => act('hw_cpu', {
cpu: '1',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Advanced"
selected={data.hw_cpu === 2}
onClick={() => act('hw_cpu', {
cpu: '2',
})} />
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell bold position="relative">
Tesla Relay:
<Tooltip
content={multiline`
An advanced wireless power relay that allows your device
to connect to nearby area power controller to provide
alternative power source. This component is currently
unavailable on tablet computers due to size restrictions.
`}
position="right" />
</Table.Cell>
<Table.Cell>
<Button
content="None"
selected={data.hw_tesla === 0}
onClick={() => act('hw_tesla', {
tesla: '0',
})} />
</Table.Cell>
<Table.Cell>
<Button
content="Standard"
selected={data.hw_tesla === 1}
onClick={() => act('hw_tesla', {
tesla: '1',
})} />
</Table.Cell>
</Table.Row>
</Fragment>
)}
</Table>
<Button
fluid
mt={3}
content="Confirm Order"
color="good"
textAlign="center"
fontSize="18px"
lineHeight="26px"
onClick={() => act('confirm_order')} />
</Section>
);
}
if (data.state === 2) {
return (
<Section
title="Step 3: Payment"
minHeight={47}>
<Box
italic
textAlign="center"
fontSize="20px">
Your device is ready for fabrication...
</Box>
<Box
bold
mt={2}
textAlign="center"
fontSize="16px">
<Box inline>
Please insert the required
</Box>
{' '}
<Box inline color="good">
{data.totalprice} cr
</Box>
</Box>
<Box
bold
mt={1}
textAlign="center"
fontSize="18px">
Current:
</Box>
<Box
bold
mt={0.5}
textAlign="center"
fontSize="18px"
color={data.credits >= data.totalprice ? "good" : "bad"}>
{data.credits} cr
</Box>
<Button
fluid
content="Purchase"
disabled={data.credits < data.totalprice}
mt={8}
color="good"
textAlign="center"
fontSize="20px"
lineHeight="28px"
onClick={() => act('purchase')} />
</Section>
);
}
if (data.state === 3) {
return (
<Section
minHeight={47}>
<Box
bold
textAlign="center"
fontSize="28px"
mt={10}>
Thank you for your purchase!
</Box>
<Box
italic
mt={1}
textAlign="center">
If you experience any difficulties with your new device, please
contact your local network administrator.
</Box>
</Section>
);
}
return null;
};
tgui-next/packages/tgui/interfaces/Crayon.js
+61
View File
@@ -0,0 +1,61 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Button, LabeledList, Section } from '../components';
export const Crayon = props => {
const { act, data } = useBackend(props);
const capOrChanges = data.has_cap || data.can_change_colour;
const drawables = data.drawables || [];
return (
<Fragment>
{!!capOrChanges && (
<Section title="Basic">
<LabeledList>
<LabeledList.Item label="Cap">
<Button
icon={data.is_capped ? 'power-off' : 'times'}
content={data.is_capped ? 'On' : 'Off'}
selected={data.is_capped}
onClick={() => act('toggle_cap')} />
</LabeledList.Item>
</LabeledList>
<Button
content="Select New Color"
onClick={() => act('select_colour')} />
</Section>
)}
<Section title="Stencil">
<LabeledList>
{drawables.map(drawable => {
const items = drawable.items || [];
return (
<LabeledList.Item
key={drawable.name}
label={drawable.name}>
{items.map(item => (
<Button
key={item.item}
content={item.item}
selected={item.item === data.selected_stencil}
onClick={() => act('select_stencil', {
item: item.item,
})} />
))}
</LabeledList.Item>
);
})}
</LabeledList>
</Section>
<Section title="Text">
<LabeledList>
<LabeledList.Item label="Current Buffer">
{data.text_buffer}
</LabeledList.Item>
</LabeledList>
<Button
content="New Text"
onClick={() => act('enter_text')} />
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/CrewConsole.js
+131
View File
@@ -0,0 +1,131 @@
import { useBackend } from '../backend';
import { Box, Button, ColorBox, Section, Table } from '../components';
import { COLORS } from '../constants';
const HEALTH_COLOR_BY_LEVEL = [
'#17d568',
'#2ecc71',
'#e67e22',
'#ed5100',
'#e74c3c',
'#ed2814',
];
const jobIsHead = jobId => jobId % 10 === 0;
const jobToColor = jobId => {
if (jobId === 0) {
return COLORS.department.captain;
}
if (jobId >= 10 && jobId < 20) {
return COLORS.department.security;
}
if (jobId >= 20 && jobId < 30) {
return COLORS.department.medbay;
}
if (jobId >= 30 && jobId < 40) {
return COLORS.department.science;
}
if (jobId >= 40 && jobId < 50) {
return COLORS.department.engineering;
}
if (jobId >= 50 && jobId < 60) {
return COLORS.department.cargo;
}
if (jobId >= 200 && jobId < 230) {
return COLORS.department.centcom;
}
return COLORS.department.other;
};
const healthToColor = (oxy, tox, burn, brute) => {
const healthSum = oxy + tox + burn + brute;
const level = Math.min(Math.max(Math.ceil(healthSum / 25), 0), 5);
return HEALTH_COLOR_BY_LEVEL[level];
};
const HealthStat = props => {
const { type, value } = props;
return (
<Box
inline
width={4}
color={COLORS.damageType[type]}
textAlign="center">
{value}
</Box>
);
};
export const CrewConsole = props => {
const { act, data } = useBackend(props);
const sensors = data.sensors || [];
return (
<Section minHeight={90}>
<Table>
<Table.Row>
<Table.Cell bold>
Name
</Table.Cell>
<Table.Cell bold collapsing />
<Table.Cell bold collapsing textAlign="center">
Vitals
</Table.Cell>
<Table.Cell bold>
Position
</Table.Cell>
{!!data.link_allowed && (
<Table.Cell bold collapsing>
Tracking
</Table.Cell>
)}
</Table.Row>
{sensors.map(sensor => (
<Table.Row key={sensor.name}>
<Table.Cell
bold={jobIsHead(sensor.ijob)}
color={jobToColor(sensor.ijob)}>
{sensor.name} ({sensor.assignment})
</Table.Cell>
<Table.Cell collapsing textAlign="center">
<ColorBox
color={healthToColor(
sensor.oxydam,
sensor.toxdam,
sensor.burndam,
sensor.brutedam)} />
</Table.Cell>
<Table.Cell collapsing textAlign="center">
{sensor.oxydam !== null ? (
<Box inline>
<HealthStat type="oxy" value={sensor.oxydam} />
{'/'}
<HealthStat type="toxin" value={sensor.toxdam} />
{'/'}
<HealthStat type="burn" value={sensor.burndam} />
{'/'}
<HealthStat type="brute" value={sensor.brutedam} />
</Box>
) : (
sensor.life_status ? 'Alive' : 'Dead'
)}
</Table.Cell>
<Table.Cell>
{sensor.pos_x !== null ? sensor.area : 'N/A'}
</Table.Cell>
{!!data.link_allowed && (
<Table.Cell collapsing>
<Button
content="Track"
disabled={!sensor.can_track}
onClick={() => act('select_person', {
name: sensor.name,
})} />
</Table.Cell>
)}
</Table.Row>
))}
</Table>
</Section>
);
};
tgui-next/packages/tgui/interfaces/Cryo.js
+108
View File
@@ -0,0 +1,108 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { AnimatedNumber, Button, LabeledList, ProgressBar, Section } from '../components';
import { BeakerContents } from './common/BeakerContents';
export const Cryo = props => {
const { act, data } = useBackend(props);
const damageTypes = [
{
label: "Brute",
type: "bruteLoss",
},
{
label: "Respiratory",
type: "oxyLoss",
},
{
label: "Toxin",
type: "toxLoss",
},
{
label: "Burn",
type: "fireLoss",
},
];
return (
<Fragment>
<Section title="Occupant">
<LabeledList>
<LabeledList.Item
label="Occupant"
content={data.occupant.name ? data.occupant.name : "No Occupant"} />
{!!data.hasOccupant && (
<Fragment>
<LabeledList.Item
label="State"
content={data.occupant.stat}
color={data.occupant.statstate} />
<LabeledList.Item
label="Temperature"
color={data.occupant.temperaturestatus}>
<AnimatedNumber value={data.occupant.bodyTemperature} /> K
</LabeledList.Item>
<LabeledList.Item label="Health">
<ProgressBar
value={data.occupant.health / data.occupant.maxHealth}
color={(data.occupant.health > 0) ? "good" : "average"}>
<AnimatedNumber value={data.occupant.health} />
</ProgressBar>
</LabeledList.Item>
{(damageTypes.map(damageType => (
<LabeledList.Item
key={damageType.id}
label={damageType.label}>
<ProgressBar
value={data.occupant[damageType.type]/100}>
<AnimatedNumber value={data.occupant[damageType.type]} />
</ProgressBar>
</LabeledList.Item>
)))}
</Fragment>
)}
</LabeledList>
</Section>
<Section title="Cell">
<LabeledList>
<LabeledList.Item
label="Power"
content={(
<Button
icon={data.isOperating ? "power-off" : "times"}
disabled={data.isOpen}
onClick={() => act('power')}
color={data.isOperating && ("green")}>
{data.isOperating ? "On" : "Off"}
</Button>
)} />
<LabeledList.Item label="Temperature">
<AnimatedNumber value={data.cellTemperature} /> K
</LabeledList.Item>
<LabeledList.Item label="Door">
<Button
icon={data.isOpen ? "unlock" : "lock"}
onClick={() => act('door')}
content={data.isOpen ? "Open" : "Closed"} />
<Button
icon={data.autoEject ? "sign-out-alt" : "sign-in-alt"}
onClick={() => act('autoeject')}
content={data.autoEject ? "Auto" : "Manual"} />
</LabeledList.Item>
</LabeledList>
</Section>
<Section
title="Beaker"
buttons={(
<Button
icon="eject"
disabled={!data.isBeakerLoaded}
onClick={() => act('ejectbeaker')}
content="Eject" />
)}>
<BeakerContents
beakerLoaded={data.isBeakerLoaded}
beakerContents={data.beakerContents} />
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/DecalPainter.js
+63
View File
@@ -0,0 +1,63 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { AnimatedNumber, Box, Button, LabeledList, ProgressBar, Section, Tabs } from '../components';
export const DecalPainter = props => {
const { act, data } = useBackend(props);
const decal_list = data.decal_list || [];
const color_list = data.color_list || [];
const dir_list = data.dir_list || [];
return (
<Fragment>
<Section title="Decal Type">
{decal_list.map(decal => {
return (
<Button
key={decal.decal}
content={decal.name}
selected={decal.decal === data.decal_style}
onClick={() => act('select decal', {
decals: decal.decal,
})} />
);
})}
</Section>
<Section title="Decal Color">
{color_list.map(color => {
return (
<Button
key={color.colors}
content={color.colors === "red"
? "Red"
: color.colors === "white"
? "White"
: "Yellow"}
selected={color.colors === data.decal_color}
onClick={() => act('select color', {
colors: color.colors,
})} />
);
})}
</Section>
<Section title="Decal Direction">
{dir_list.map(dir => {
return (
<Button
key={dir.dirs}
content={dir.dirs === 1
? "North"
: dir.dirs === 2
? "South"
: dir.dirs === 4
? "East"
: "West"}
selected={dir.dirs === data.decal_direction}
onClick={() => act('selected direction', {
dirs: dir.dirs,
})} />
);
})}
</Section>
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/DisposalUnit.js
+71
View File
@@ -0,0 +1,71 @@
import { useBackend } from '../backend';
import { Button, LabeledList, ProgressBar, Section } from '../components';
export const DisposalUnit = props => {
const { act, data } = useBackend(props);
let stateColor;
let stateText;
if (data.full_pressure) {
stateColor = 'good';
stateText = 'Ready';
}
else if (data.panel_open) {
stateColor = 'bad';
stateText = 'Power Disabled';
}
else if (data.pressure_charging) {
stateColor = 'average';
stateText = 'Pressurizing';
}
else {
stateColor = 'bad';
stateText = 'Off';
}
return (
<Section>
<LabeledList>
<LabeledList.Item
label="State"
color={stateColor}>
{stateText}
</LabeledList.Item>
<LabeledList.Item
label="Pressure">
<ProgressBar
value={data.per}
color="good" />
</LabeledList.Item>
<LabeledList.Item
label="Handle">
<Button
icon={data.flush ? 'toggle-on' : 'toggle-off'}
disabled={data.isai || data.panel_open}
content={data.flush ? 'Disengage' : 'Engage'}
onClick={() => act(data.flush
? 'handle-0'
: 'handle-1')}
/>
</LabeledList.Item>
<LabeledList.Item
label="Eject">
<Button
icon="sign-out-alt"
disabled={data.isai}
content="Eject Contents"
onClick={() => act('eject')} />
</LabeledList.Item>
<LabeledList.Item
label="Power">
<Button
icon="power-off"
disabled={data.panel_open}
selected={data.pressure_charging}
onClick={() => act(data.pressure_charging
? 'pump-0'
: 'pump-1')}
/>
</LabeledList.Item>
</LabeledList>
</Section>
);
};
tgui-next/packages/tgui/interfaces/DnaVault.js
+74
View File
@@ -0,0 +1,74 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, Grid, LabeledList, ProgressBar, Section } from '../components';
export const DnaVault = props => {
const { act, data } = useBackend(props);
const {
completed,
used,
choiceA,
choiceB,
dna,
dna_max,
plants,
plants_max,
animals,
animals_max,
} = data;
return (
<Fragment>
<Section title="DNA Vault Database">
<LabeledList>
<LabeledList.Item label="Human DNA">
<ProgressBar
value={dna / dna_max}
content={dna + ' / ' + dna_max + ' Samples'} />
</LabeledList.Item>
<LabeledList.Item label="Plant DNA">
<ProgressBar
value={plants / plants_max}
content={plants + ' / ' + plants_max + ' Samples'} />
</LabeledList.Item>
<LabeledList.Item label="Animal DNA">
<ProgressBar
value={animals / animals}
content={animals + ' / ' + animals_max + ' Samples'} />
</LabeledList.Item>
</LabeledList>
</Section>
{!!(completed && !used) && (
<Section title="Personal Gene Therapy">
<Box
bold
textAlign="center"
mb={1}>
Applicable Gene Therapy Treatments
</Box>
<Grid>
<Grid.Column>
<Button
fluid
bold
content={choiceA}
textAlign="center"
onClick={() => act('gene', {
choice: choiceA,
})} />
</Grid.Column>
<Grid.Column>
<Button
fluid
bold
content={choiceB}
textAlign="center"
onClick={() => act('gene', {
choice: choiceB,
})} />
</Grid.Column>
</Grid>
</Section>
)}
</Fragment>
);
};
tgui-next/packages/tgui/interfaces/EightBallVote.js
+57
View File
@@ -0,0 +1,57 @@
import { useBackend } from '../backend';
import { Box, Button, Grid, Section, NoticeBox } from '../components';
import { toTitleCase } from 'common/string';
export const EightBallVote = props => {
const { act, data } = useBackend(props);
const {
question,
shaking,
answers = [],
} = data;
if (!shaking) {
return (
<NoticeBox>
No question is currently being asked.
</NoticeBox>
);
}
return (
<Section>
<Box
bold
textAlign="center"
fontSize="16px"
m={1}>
&quot;{question}&quot;
</Box>
<Grid>
{answers.map(answer => (
<Grid.Column key={answer.answer}>
<Button
fluid
bold
content={toTitleCase(answer.answer)}
selected={answer.selected}
fontSize="16px"
lineHeight="24px"
textAlign="center"
mb={1}
onClick={() => act('vote', {
answer: answer.answer,
})} />
<Box
bold
textAlign="center"
fontSize="30px">
{answer.amount}
</Box>
</Grid.Column>
))}
</Grid>
</Section>
);
};
tgui-next/packages/tgui/interfaces/EmergencyShuttleConsole.js
+115
View File
@@ -0,0 +1,115 @@
import { Box, Section, Button, Grid } from '../components';
import { useBackend } from '../backend';
export const EmergencyShuttleConsole = props => {
const { act, data } = useBackend(props);
const {
timer_str,
enabled,
emagged,
engines_started,
authorizations_remaining,
authorizations = [],
} = data;
return (
<Section>
<Box
bold
fontSize="40px"
textAlign="center"
fontFamily="monospace">
{timer_str}
</Box>
<Box
textAlign="center"
fontSize="16px"
mb={1}>
<Box
inline
bold>
ENGINES:
</Box>
<Box
inline
color={engines_started ? 'good' : 'average'}
ml={1}>
{engines_started ? 'Online' : 'Idle'}
</Box>
</Box>
<Section
title="Early Launch Authorization"
level={2}
buttons={(
<Button
icon="times"
content="Repeal All"
color="bad"
disabled={!enabled}
onClick={() => act('abort')} />
)}>
<Grid>
<Grid.Column>
<Button
fluid
icon="exclamation-triangle"
color="good"
content="AUTHORIZE"
disabled={!enabled}
onClick={() => act('authorize')} />
</Grid.Column>
<Grid.Column>
<Button
fluid
icon="minus"
content="REPEAL"
disabled={!enabled}
onClick={() => act('repeal')} />
</Grid.Column>
</Grid>
<Section
title="Authorizations"
level={3}
minHeight="150px"
buttons={(
<Box
inline
bold
color={emagged ? 'bad' : 'good'}>
{emagged ? 'ERROR' : 'Remaining: ' + authorizations_remaining}
</Box>
)}>
{authorizations.length > 0 ? (
authorizations.map(authorization => (
<Box
key={authorization.name}
bold
fontSize="16px"
className="candystripe">
{authorization.name} ({authorization.job})
</Box>
))
) : (
<Box
bold
textAlign="center"
fontSize="16px"
color="average">
No Active Authorizations
</Box>
)}
{authorizations.map(authorization => (
<Box
key={authorization.name}
bold
fontSize="16px"
className="candystripe">
{authorization.name} ({authorization.job})
</Box>
))}
</Section>
</Section>
</Section>
);
};
tgui-next/packages/tgui/interfaces/EngravedMessage.js
+98
View File
@@ -0,0 +1,98 @@
import { decodeHtmlEntities } from 'common/string';
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, Grid, LabeledList, Section } from '../components';
export const EngravedMessage = props => {
const { act, data } = useBackend(props);
const {
admin_mode,
creator_key,
creator_name,
has_liked,
has_disliked,
hidden_message,
is_creator,
num_likes,
num_dislikes,
realdate,
} = data;
return (
<Fragment>
<Section>
<Box
bold
textAlign="center"
fontSize="20px"
mb={2}>
{decodeHtmlEntities(hidden_message)}
</Box>
<Grid>
<Grid.Column>
<Button
fluid
icon="arrow-up"
content={" " + num_likes}
disabled={is_creator}
selected={has_liked}
textAlign="center"
fontSize="16px"
lineHeight="24px"
onClick={() => act('like')} />
</Grid.Column>
<Grid.Column>
<Button
fluid
icon="circle"
disabled={is_creator}
selected={!has_disliked && !has_liked}
textAlign="center"
fontSize="16px"
lineHeight="24px"
onClick={() => act('neutral')} />
</Grid.Column>
<Grid.Column>
<Button
fluid
icon="arrow-down"
content={" " + num_dislikes}
disabled={is_creator}
selected={has_disliked}
textAlign="center"
fontSize="16px"
lineHeight="24px"
onClick={() => act('dislike')} />
</Grid.Column>
</Grid>
</Section>
<Section>
<LabeledList>
<LabeledList.Item label="Created On">
{realdate}
</LabeledList.Item>
</LabeledList>
</Section>
<Section />
{!!admin_mode && (
<Section
title="Admin Panel"
buttons={(
<Button
icon="times"
content="Delete"
color="bad"
onClick={() => act('delete')} />
)}>
<LabeledList>
<LabeledList.Item label="Creator Ckey">
{creator_key}
</LabeledList.Item>
<LabeledList.Item label="Creator Character Name">
{creator_name}
</LabeledList.Item>
</LabeledList>
</Section>
)}
</Fragment>
);
};

Some files were not shown because too many files have changed in this diff Show More