diff --git a/.dockerignore b/.dockerignore index 400701794c..8e675af8cb 100644 --- a/.dockerignore +++ b/.dockerignore @@ -17,7 +17,7 @@ TGS3.json cfg data SQL -tgui/node_modules +node_modules tgstation.dmb tgstation.int tgstation.rsc diff --git a/.editorconfig b/.editorconfig index 95e40c0cd3..79c4b77c52 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,7 +11,3 @@ indent_size = 2 [*.py] indent_style = space - -[/tgui/**/*.{js,styl,ract,json,html}] -indent_style = space -indent_size = 2 diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ca988698e4..0aadbbdb6d 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -78,7 +78,6 @@ # stylemistake /tgui @stylemistake -/tgui-next @stylemistake # Qustinnus /code/datums/components/mood.dm @Qustinnus diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index aa699f25d8..817626d228 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -258,11 +258,11 @@ This prevents nesting levels from getting deeper then they need to be. * Areas should not be var-edited on a map to change it's name or attributes. All areas of a single type and it's altered instances are considered the same area within the code, and editing their variables on a map can lead to issues with powernets and event subsystems which are difficult to debug. ### User Interfaces -* All new player-facing user interfaces must use TGUI-next; TGUI is deprecated. +* All new player-facing user interfaces must use TGUI. * Raw HTML is permitted for admin and debug UIs. -* Documentation for TGUI-next can be found at: - * [tgui-next/README.md](../tgui-next/README.md) - * [tgui-next/tutorial-and-examples.md](../tgui-next/docs/tutorial-and-examples.md) +* Documentation for TGUI can be found at: + * [tgui/README.md](../tgui/README.md) + * [tgui/tutorial-and-examples.md](../tgui/docs/tutorial-and-examples.md) ### Other Notes * Code should be modular where possible; if you are working on a new addition, then strongly consider putting it in its own file unless it makes sense to put it with similar ones (i.e. a new tool would go in the "tools.dm" file) @@ -343,7 +343,7 @@ for(var/obj/item/sword/S in bag_of_swords) if(!best_sword || S.damage > best_sword.damage) best_sword = S ``` -specifies a type for DM to filter by. +specifies a type for DM to filter by. With the previous example that's perfectly fine, we only want swords, but here the bag only contains swords? Is DM still going to try to filter because we gave it a type to filter by? YES, and here comes the inefficiency. Wherever a list (or other container, such as an atom (in which case you're technically accessing their special contents list, but that's irrelevant)) contains datums of the same datatype or subtypes of the datatype you require for your loop's body, you can circumvent DM's filtering and automatic ```istype()``` checks by writing the loop as such: @@ -380,7 +380,7 @@ mob ``` This does NOT mean that you can access it everywhere like a global var. Instead, it means that that var will only exist once for all instances of its type, in this case that var will only exist once for all mobs - it's shared across everything in its type. (Much more like the keyword `static` in other languages like PHP/C++/C#/Java) -Isn't that confusing? +Isn't that confusing? There is also an undocumented keyword called `static` that has the same behaviour as global but more correctly describes BYOND's behaviour. Therefore, we always use static instead of global where we need it, as it reduces suprise when reading BYOND code. diff --git a/.github/workflows/autobuild_tgui.yml b/.github/workflows/autobuild_tgui.yml index b680139f74..226ea2b7ce 100644 --- a/.github/workflows/autobuild_tgui.yml +++ b/.github/workflows/autobuild_tgui.yml @@ -5,8 +5,8 @@ on: branches: - 'master' paths: - - 'tgui-next/**.js' - - 'tgui-next/**.scss' + - 'tgui/**.js' + - 'tgui/**.scss' jobs: build: @@ -23,7 +23,7 @@ jobs: node-version: '>=12.13' - name: Build TGUI run: bin/tgui --ci - working-directory: ./tgui-next + working-directory: ./tgui - name: Commit Artifacts run: | git config --local user.email "action@github.com" diff --git a/.travis.yml b/.travis.yml index 5ebfab3789..880562ca65 100644 --- a/.travis.yml +++ b/.travis.yml @@ -24,7 +24,7 @@ matrix: - tools/travis/check_filedirs.sh tgstation.dme - tools/travis/check_changelogs.sh - find . -name "*.php" -print0 | xargs -0 -n1 php -l - - find . -name "*.json" -not -path "./tgui/node_modules/*" -print0 | xargs -0 python3 ./tools/json_verifier.py + - find . -name "*.json" -not -path "*/node_modules/*" -print0 | xargs -0 python3 ./tools/json_verifier.py - tools/travis/build_tgui.sh - tools/travis/check_grep.sh - ~/dreamchecker diff --git a/README.md b/README.md index d522caa885..99f824ca64 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ ## /tg/station codebase -[![Build Status](https://travis-ci.org/tgstation/tgstation.png)](https://travis-ci.org/tgstation/tgstation) [![Krihelimeter](https://www.krihelinator.xyz/badge/tgstation/tgstation)](https://www.krihelinator.xyz) -[![Percentage of issues still open](https://isitmaintained.com/badge/open/tgstation/tgstation.svg)](https://isitmaintained.com/project/tgstation/tgstation "Percentage of issues still open") [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/tgstation/tgstation.svg)](https://isitmaintained.com/project/tgstation/tgstation "Average time to resolve an issue") ![Coverage](https://img.shields.io/badge/coverage---2%25-red.svg) +[![Build Status](https://travis-ci.org/tgstation/tgstation.png)](https://travis-ci.org/tgstation/tgstation) [![Krihelimeter](https://www.krihelinator.xyz/badge/tgstation/tgstation)](https://www.krihelinator.xyz) +[![Percentage of issues still open](https://isitmaintained.com/badge/open/tgstation/tgstation.svg)](https://isitmaintained.com/project/tgstation/tgstation "Percentage of issues still open") [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/tgstation/tgstation.svg)](https://isitmaintained.com/project/tgstation/tgstation "Average time to resolve an issue") ![Coverage](https://img.shields.io/badge/coverage---2%25-red.svg) [![forthebadge](https://forthebadge.com/images/badges/built-with-resentment.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/contains-technical-debt.svg)](https://user-images.githubusercontent.com/8171642/50290880-ffef5500-043a-11e9-8270-a2e5b697c86c.png) [![forinfinityandbyond](https://user-images.githubusercontent.com/5211576/29499758-4efff304-85e6-11e7-8267-62919c3688a9.gif)](https://www.reddit.com/r/SS13/comments/5oplxp/what_is_the_main_problem_with_byond_as_an_engine/dclbu1a) * **Website:** https://www.tgstation13.org @@ -9,7 +9,7 @@ * **Wiki** https://tgstation13.org/wiki/Main_Page * **Codedocs:** https://codedocs.tgstation13.org/ * **IRC:** irc://irc.rizon.net/coderbus or if you dont have an IRC client, you can click [here](https://kiwiirc.com/client/irc.rizon.net:6667/?&theme=cli#coderbus) - + ## DOWNLOADING There are a number of ways to download the source code. Some are described here, an alternative all-inclusive guide is also located at https://www.tgstation13.org/wiki/Downloading_the_source_code @@ -95,7 +95,7 @@ the new version. ## HOSTING If you'd like a more robust server hosting option for tgstation and its -derivatives. Check out our server tools suite at +derivatives. Check out our server tools suite at https://github.com/tgstation/tgstation-server ## MAPS @@ -131,7 +131,7 @@ The SQL backend requires a Mariadb server running 10.2 or later. Mysql is not su If you are hosting a testing server on windows you can use a standalone version of MariaDB pre load with a blank (but initialized) tgdb database. Find them here: https://tgstation13.download/database/ Just unzip and run for a working (but insecure) database server. Includes a zipped copy of the data folder for easy resetting back to square one. -## WEB/CDN RESOURCE DELIVERY +## WEB/CDN RESOURCE DELIVERY Web delivery of game resources makes it quicker for players to join and reduces some of the stress on the game server. @@ -163,8 +163,6 @@ Font Awesome font files, used by tgui, are licensed under the SIL Open Font Lice tgui assets are licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-sa/4.0/). The TGS3 API is licensed as a subproject under the MIT license. -See tgui/LICENSE.md for the MIT license. -See tgui/assets/fonts/SIL-OFL-1.1-LICENSE.md for the SIL Open Font License. See the footers of code/\_\_DEFINES/server\_tools.dm, code/modules/server\_tools/st\_commands.dm, and code/modules/server\_tools/st\_inteface.dm for the MIT license. All assets including icons and sound are under a [Creative Commons 3.0 BY-SA license](https://creativecommons.org/licenses/by-sa/3.0/) unless otherwise indicated. diff --git a/code/controllers/subsystem/tgui.dm b/code/controllers/subsystem/tgui.dm index c687a3b20e..17caad9b77 100644 --- a/code/controllers/subsystem/tgui.dm +++ b/code/controllers/subsystem/tgui.dm @@ -11,7 +11,7 @@ SUBSYSTEM_DEF(tgui) var/basehtml // The HTML base used for all UIs. /datum/controller/subsystem/tgui/PreInit() - basehtml = file2text('tgui-next/packages/tgui/public/tgui-main.html') + basehtml = file2text('tgui/packages/tgui/public/tgui.html') /datum/controller/subsystem/tgui/Shutdown() close_all_uis() diff --git a/code/modules/client/asset_cache.dm b/code/modules/client/asset_cache.dm index 68911fa5af..6010d282bf 100644 --- a/code/modules/client/asset_cache.dm +++ b/code/modules/client/asset_cache.dm @@ -388,18 +388,12 @@ GLOBAL_LIST_EMPTY(asset_datums) /datum/asset/simple/tgui assets = list( - // tgui - "tgui.css" = 'tgui/assets/tgui.css', - "tgui.js" = 'tgui/assets/tgui.js', - // tgui-next - "tgui-main.html" = 'tgui-next/packages/tgui/public/tgui-main.html', - "tgui-fallback.html" = 'tgui-next/packages/tgui/public/tgui-fallback.html', - "tgui.bundle.js" = 'tgui-next/packages/tgui/public/tgui.bundle.js', - "tgui.bundle.css" = 'tgui-next/packages/tgui/public/tgui.bundle.css', - "shim-html5shiv.js" = 'tgui-next/packages/tgui/public/shim-html5shiv.js', - "shim-ie8.js" = 'tgui-next/packages/tgui/public/shim-ie8.js', - "shim-dom4.js" = 'tgui-next/packages/tgui/public/shim-dom4.js', - "shim-css-om.js" = 'tgui-next/packages/tgui/public/shim-css-om.js', + "tgui.bundle.js" = 'tgui/packages/tgui/public/tgui.bundle.js', + "tgui.bundle.css" = 'tgui/packages/tgui/public/tgui.bundle.css', + "shim-html5shiv.js" = 'tgui/packages/tgui/public/shim-html5shiv.js', + "shim-ie8.js" = 'tgui/packages/tgui/public/shim-ie8.js', + "shim-dom4.js" = 'tgui/packages/tgui/public/shim-dom4.js', + "shim-css-om.js" = 'tgui/packages/tgui/public/shim-css-om.js', ) /datum/asset/group/tgui diff --git a/tgui-next/.gitattributes b/tgui-next/.gitattributes deleted file mode 100644 index 0016cc3bf6..0000000000 --- a/tgui-next/.gitattributes +++ /dev/null @@ -1,10 +0,0 @@ -* 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 diff --git a/tgui-next/.gitignore b/tgui-next/.gitignore deleted file mode 100644 index 416ca3768d..0000000000 --- a/tgui-next/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -node_modules -*.log -package-lock.json - -/packages/tgui/public/.tmp/**/* -/packages/tgui/public/**/*.hot-update.* -/packages/tgui/public/**/*.map diff --git a/tgui-next/README.md b/tgui-next/README.md deleted file mode 100644 index beb7aaff80..0000000000 --- a/tgui-next/README.md +++ /dev/null @@ -1,855 +0,0 @@ -# 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. - 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 -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 ``), 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) => ` - -### `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 `
` by default that can be changed -with the `as` property. Let's say you want to use a `` instead: - -```jsx - - `), 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) => ` + +### `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 `
` by default that can be changed +with the `as` property. Let's say you want to use a `` instead: + +```jsx + +