Should hopefully work..

.github/workflows/autobuild_tgui.yml

@@ -0,0 +1,36 @@
+name: Autobuild TGUI
+
+on:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'tgui-next/**.js'
+      - 'tgui-next/**.scss'
+
+jobs:
+  build:
+    name: Rebuild TGUI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+         node-version: '>=12.13'
+      - name: Get Dependencies
+        run: yarn install
+        working-directory: ./tgui-next
+      - name: Build TGUI
+        run: yarn run build
+        working-directory: ./tgui-next
+      - name: Commit Artifacts
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "TGUI"
+          git commit -m "Automatic TGUI Rebuild [ci skip]" -a
+      - name: Push Artifacts
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

tgui-next/README.md

@@ -65,6 +65,9 @@ Run one of the following:
   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.
+  In order to use, you should start the game server first, connect to it so dreamseeker is
+  open, then start the dev server. You'll know if it's hooked correctly if data gets dumped
+  to the log when tgui windows are opened.
 - `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
@@ -220,7 +223,6 @@ This way, `Button` can pull out the `className` generated by the `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`).
 
@@ -239,6 +241,8 @@ Props:
 - `height: number` - Box height.
 - `minHeight: number` - Box minimum height.
 - `maxHeight: number` - Box maximum height.
+- `fontSize: number` - Font size.
+- `fontFamily: string` - Font family.
 - `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`,
@@ -254,6 +258,7 @@ all available horizontal space.
 - `opacity: number` - Opacity, from 0 to 1.
 - `bold: boolean` - Make text bold.
 - `italic: boolean` - Make text italic.
+- `nowrap: boolean` - Stops text from wrapping.
 - `textAlign: string` - Align text inside the box.
   - `left` (default)
   - `center`
@@ -293,11 +298,55 @@ over 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.
+- `ellipsis: boolean` - If button width is constrained, button text will
+be truncated with an ellipsis. Be careful however, because this prop breaks
+the baseline alignment.
 - `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.
 
+### `Button.Checkbox`
+
+A ghetto checkbox, made entirely using existing Button API.
+
+Props:
+
+- See inherited props: [Button](#button)
+- `checked: boolean` - Boolean value, which marks the checkbox as checked.
+
+### `Button.Confirm`
+
+A button with a an extra confirmation step, using native button component.
+
+Props:
+
+- See inherited props: [Button](#button)
+- `confirmMessage: string` - Text to display after first click; defaults to "Confirm?"
+- `confirmColor: string` - Color to display after first click; default to "bad"
+
+### `Button.Input`
+
+A button that turns into an input box after the first click. Turns back into a button after the user hits enter, defocuses, or hits escape. Enter and defocus commit, while escape cancels.
+
+Props:
+ - See inherited props: [Box](#box)
+ - `fluid`: fill availible horizontal space
+ - `onCommit: (e, value) => void`: function that is called after the user defocuses the input or presses enter
+ - `currentValue: string`: default string to display when the input is shown
+ - `defaultValue: string`: default value emitted if the user leaves the box blank when hitting enter or defocusing. If left undefined, will cancel the change on a blank defocus/enter
+
+### `Collapsible`
+
+Displays contents when open, acts as a fluid button when closed. Click to toggle, closed by default.
+
+Props:
+  - See inherited props: [Box](#box)
+  - `children: any` - What is collapsed when closed
+  - `title: string` - Text to display on the button for collapsing
+  - `color: string` - Color of the button; see [Button](#button)
+  - `buttons: any` - Buttons or other content to render inline with the button
+
 ### `ColorBox`
 
 Displays a 1-character wide colored square. Can be used as a status indicator,
@@ -319,6 +368,21 @@ Props:
 
 - See inherited props: [Box](#box)
 
+### `Dropdown`
+
+A simple dropdown box component. Lets the user select from a list of options and displays selected entry.
+
+Props:
+
+  - See inherited props: [Box](#box)
+  - `options: string[]` - An array of strings which will be displayed in the dropdown when open
+  - `selected: string` - Currently selected entry
+  - `width: number` - Width of dropdown button and resulting menu
+  - `over: boolean` - dropdown renders over instead of below
+  - `color: string` - color of dropdown button
+  - `onClick: (e) => void` - Called when dropdown button is clicked
+  - `onSelected: (value) => void` - Called when a value is picked from the list, `value` is the value that was picked
+
 ### `Flex`
 
 Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
@@ -350,6 +414,10 @@ two flex items as far as possible from each other.
 Props:
 
 - See inherited props: [Box](#box)
+- `spacing: number` - Spacing between flex items, in integer units
+(1 unit - 0.5em). Does not directly relate to a flex css property
+(adds a modifier class under the hood), and only integer numbers are
+supported.
 - `direction: string` - This establishes the main-axis, thus defining the
 direction flex items are placed in the flex container.
   - `row` (default) - left to right.
@@ -406,6 +474,7 @@ 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.
@@ -432,7 +501,7 @@ Props:
 
 Props:
 
-- See inherited props: [Table.Cell](#table-cell)
+- See inherited props: [Table.Cell](#tablecell)
 - `size: number` (default: 1) - Size of the column relative to other columns.
 
 ### `Icon`
@@ -445,7 +514,6 @@ Renders one of the FontAwesome icons of your choice.
 
 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`
 
@@ -470,7 +538,9 @@ Props:
 
 - See inherited props: [Box](#box)
 - `value: string` - Value of an input.
+- `placeholder: string` - Text placed into Input box when value is otherwise nothing. Clears automatically when focused.
 - `fluid: boolean` - Fill all available horizontal space.
+- `selfClear: boolean` - Clear after hitting enter, as well as remain focused when this happens. Useful for things like chat inputs
 - `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.
@@ -562,6 +632,9 @@ 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.
+- `height: string|numer` - Height of the element, in `Box` units or pixels.
+- `lineHeight: string|number` - lineHeight of the element, in `Box` units or pixels.
+- `fontSize: string|number` - fontSize 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
@@ -738,6 +811,8 @@ Props:
 
 - `vertical: boolean` - Use a vertical configuration, where tabs will appear
 stacked on the left side of the container.
+- `altSelection` - Whether the tab buttons select via standard select (color change) or by adding a white indicator to the selected tab.
+  Intended for usage on interfaces where tab color has relevance.
 - `children: Tab[]` - This component only accepts tabs as its children.
 
 ### `Tabs.Tab`

tools/hooks/install.sh

@@ -10,6 +10,11 @@ for f in *.merge; do
 	echo Installing merge driver: ${f%.merge}
 	git config --replace-all merge.${f%.merge}.driver "tools/hooks/$f %P %O %A %B %L"
 done
-echo Installing Python dependencies
+
+echo "Installing tgui hooks"
+../../tgui-next/bin/tgui --install-git-hooks
+
+echo "Installing Python dependencies"
 ./python.sh -m pip install -r ../mapmerge2/requirements.txt
+
 echo "Done"

tools/travis/build_tgui.sh

@@ -1,7 +1,25 @@
 #!/bin/bash
 set -euo pipefail
 
-cd tgui
-source ~/.nvm/nvm.sh
+## Change to project root relative to the script
+cd "$(dirname "${0}")/../.."
+base_dir="$(pwd)"
+
+## The final authority on what's required to fully build the project
+source dependencies.sh
+
+## Setup NVM
+if [[ -e ~/.nvm/nvm.sh ]]; then
+	source ~/.nvm/nvm.sh
+	nvm use "${NODE_VERSION}"
+fi
+
+echo "Building 'tgui'"
+cd "${base_dir}/tgui"
 npm ci
 node node_modules/gulp/bin/gulp.js --min
+
+echo "Building 'tgui-next'"
+cd "${base_dir}/tgui-next"
+bin/tgui --clean
+bin/tgui

tools/travis/install_build_tools.sh

@@ -5,6 +5,8 @@ source dependencies.sh
 
 source ~/.nvm/nvm.sh
 nvm install $NODE_VERSION
+nvm use $NODE_VERSION
+npm install --global yarn
 
 pip3 install --user PyYaml
 pip3 install --user beautifulsoup4