Commit Graph

54 Commits

Author SHA1 Message Date
_0Steven
df7e74afb9 Makes input buttons gray out when disabled, instead of solely disabling the input part you get after clicking. (#87588)
## About The Pull Request

While fiddling with NTNRC netadmin mode, I noticed that while renaming
is blocked on `strong = TRUE` channels like `#cargobus`, it doesn't gray
out the button like for deleting the channel.
Instead, clicking it still opens the input menu!... But that part _is_
disabled, thus being just an uninteractable black bar.

So in this pr we just make input buttons' `onClick` not work if
`disabled`, and apply `Button--disabled` to itself if so.
## Why It's Good For The Game

Grayed out button is much better than uninteractable black bar,
especially when normal disabled buttons are _also_ grayed out.
## Changelog
🆑
fix: NTNRC "rename channel" button is now grayed out when unusable.
fix: Genetics console "create advanced injector" button is now grayed
out when unusable.
/🆑
2024-11-01 00:29:57 +01:00
John Willard
1880003270 Reworks silicon/ai access checking & fixes some ui_act's (#84964)
## About The Pull Request

Currently to check for Silicon access, we do:
``if is silicon or is admin ghost or has unlimited silicon privileges or
has machine remote in hand``
What has unlimited silicon privileges? Bots, Drones, and admin ghosts.
To check for AI access, it just checks for AI instead of silicon, and
doesnt check for unlimited silicon privileges.

This was kinda silly, so I thought I should make this a little easier to
understand.
Now all silicon/ai traits come from ``AI_ACCESS_TRAIT`` or
``SILICON_ACCESS_TRAIT``. I made a single exception to keep Admin ghost,
since now instead of being a var on the client, we moved it to using the
same trait but giving it to the client instead, but since we have to
keep parity with previous functionality (admins can spawn in and not
have this on, it only works while as a ghost), I kept previous checks as
well.

No more type checks, removes a silly var on the mob level and another on
the client.

Now while I was doing this, I found a lot of tgui's ``ui_act`` still
uses ``usr`` and the wrong args, so I fixed those wherever I saw them,
and used a mass replace for the args.

Other changes:

- machinery's ``ui_act`` from
https://github.com/tgstation/tgstation/pull/81250 had ``isAI`` replaced
with ``HAS_AI_ACCESS``, this has been reverted. Machine wands and admin
ghosts no longer get kicked off things not on cameras. This was my
fault, I overlooked this when adding Human AI.
- Human AI's wand gives AI control as long as it's in your hand, you can
swap to your offhand. I hope this doesn't end up going horribly,
otherwise I'll revert this part. It should let human AIs not have their
UI closed on them when swapping to eat food or use their door wand or
whatnot.
- Bots previously had special checks to scan reagents and be
unobservant, I replaced this with giving them the trait. I also fixed an
instance of unobservant not being used, so now statues don't affect the
basic creature, whatever that is.

## Why It's Good For The Game

This is an easier to understand way of handling silicon access and makes
these mobs more consistent between eachother.
Other than what I've mentioned above, this should have no impact on
gameplay itself.

## Changelog

🆑
fix: Statues don't count as eyes to creatures.
fix: Human AIs and Admin ghosts no longer get kicked off of machines
that aren't on cameranets.
/🆑
2024-08-19 10:43:45 +00:00
norsvenska
5f80128fa9 Corrects 200+ instances of "it's" where it should've been "its" instead (#85169)
## About The Pull Request

it's - conjunction of "it" and "is"
its - possessive form of "it"

grammar is hard, and there were a lot of places where "it's" was used
where it shouldn't have been. i went and painstakingly searched the
entire repository for these instances, spending a few hours on it. i
completely ignored the changelog archive, and i may have missed some
outliers. most player-facing ones should be corrected, though
## Why It's Good For The Game
proper grammar is good

## Changelog
🆑
spellcheck: Numerous instances of "it's" have been properly replaced
with "its"
/🆑
2024-07-21 13:41:37 -06:00
SyncIt21
159fdd3d7e [NO GBP] NumberInput patches (#82000)
## About The Pull Request
1. Removes event parameter (`e`) from `onChange()` & `onDrag()` for 2
reasons
- The event cannot be statically typed because it's called when you both
either hit the enter key(it's a keyboard event) & during dragging (now
it's a mouse event). Currently there is no code that depends on this
object and even if it did type checking for which type of event is a
pain so this isn't the right way to provide that data
- The event is stale/has wrong data when dragging has started. This is
because when dragging begins it calls `setInterval()` which keeps
reusing the event object from that 1 time click and not the event data
while dragging thus the data is stale and should be discarded & not
passed to user

2. Removed `suppressFlickering` from Number Input. This was only used by
Atmos monitoring console and the comment explaining why it was used was
also wrong (there is no such asynchronous call in the back end). What
this var did was difficult to understand anyway and after removing its
only 1 use we can clean it up with no side effects.

3. Removed `updateRate`. Not used anywhere and a constant of 400ms
should be sufficient for most purposes anyway

4. Fixes #81995. Dragging the Number Input will only send data to the
back end if that value changes & not send the same value every 400ms.
Simple logic (compare old value with the new) and yet efficient results,
This applies when you hit enter or click outside of the field as well

5. You can once again drag your mouse anywhere in the window outside the
number input field to vary the value by large amounts
 
## Changelog
🆑
fix: number input dragging will only send payload to backend when its
value changes, Same applies when you hit enter or click outside the
field, the value must have changed to trigger the back end
fix: You can once again drag your mouse anywhere in the window outside
the number input field to vary the value by large amounts
code: removed unnecessary variables(suppressFlickering, updateRate &
event object param for handlers) from Number Input
/🆑
2024-03-24 00:30:11 -07:00
Jeremiah
e6c791bd2c Partially reverts popper component [no gbp] (#80930)
<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->

## About The Pull Request
As requested by @mothblocks I implemented react-popper instead.

Perks:
1. Seemingly handles the positioning bug that I wrestled with in #80883.
2. Performance seems just as good.
3. Should fix issue presented in
[NovaSector#434](https://github.com/NovaSector/NovaSector/issues/434)

Cons: 
1. Tiny amount more code

<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->

## Why It's Good For The Game
Bug fixes
Mothblocks asked for it
Fixes #80929
<!-- Argue for the merits of your changes and how they benefit the game,
especially if they are controversial and/or far reaching. If you can't
actually explain WHY what you are doing will improve the game, then it
probably isn't good for the game in the first place. -->

## Changelog

<!-- If your PR modifies aspects of the game that can be concretely
observed by players or admins you should add a changelog. If your change
does NOT meet this description, remove this section. Be sure to properly
mark your PRs to prevent unnecessary GBP loss. You can read up on GBP
and it's effects on PRs in the tgstation guides for contributors. Please
note that maintainers freely reserve the right to remove and add tags
should they deem it appropriate. You can attempt to finagle the system
all you want, but it's best to shoot for clear communication right off
the bat. -->

🆑
fix: Poppers (like the prefs menu options) shouldn't be hidden beneath
the character preview anymore.
/🆑

<!-- Both 🆑's are required for the changelog to work! You can put
your name to the right of the first 🆑 if you want to overwrite your
GitHub username as author ingame. -->
<!-- You can use multiple of the same prefix (they're only used for the
icon ingame) and delete the unneeded ones. Despite some of the tags,
changelogs should generally represent how a player might be affected by
the changes rather than a summary of the PR's contents. -->
2024-01-15 07:05:22 +01:00
Jeremiah
657829aa5e Improves popper/dropdown performance (#80883)
## About The Pull Request
This implements a new popper library which seems to handle poppers much
faster.

Updates documentation and adds prior documentation to on dropdown hover
effects.

![image](https://github.com/tgstation/tgstation/assets/42397676/b06729f4-1bad-4b9a-a6b4-a7fe4d2b16cd)

This is a fairly complex issue, if you want to read about it:

<details>
<summary>More info</summary>

When I first rebuilt dropdowns and poppers, I tried using this library.
However, doing so had a visual bug which the original dropdown was using
a hack for:

```tsx
      // HACK: We don't want to create a wrapper, as it could break the layout
      // of consumers, so we use findDOMNode.
      // This is usually bad as refs are usually better, but refs did
      // not work in this case, as they weren't propagating correctly.
      // A previous attempt was made as a render prop that passed an ID,
      // but this made consuming use too unwieldly.
      // Because this component is written in TypeScript, we will know
      // immediately if this internal variable is removed.
      //
      // eslint-disable-next-line react/no-find-dom-node
      const domNode = findDOMNode(this) as Element;
      if (!domNode) {
        return;
      }
```

I thought I could skirt it by keeping the portal rendered but the
content inside conditionally rendered, but doing so created mass lag as
each popper was still rendering invisible elements. This is probably not
an issue for modern browsers, but tgui does not like this.

The alternative is still hacky but the performance is much better. I
tested this on a custom UI with 30 dropdowns and the scrolling/fps is
much, much smoother.

</details>

## Why It's Good For The Game
Fixes #80878
## Changelog
🆑
fix: Dropdowns should be more performant
/🆑
2024-01-11 16:59:07 -08:00
Jeremiah
8b6b96d446 Input changes take XII: Responsive small lists (#80720)
## About The Pull Request
Admittedly it's been tough to find a sweet spot that will let us handle
large lists and basic inputs. This PR aims to address this by adding the
`expensive` prop on Input. This introduces the debounce that #80688
without compromising the responsiveness of smaller filters like those in
orbit, giving the author the keys to monitor performance of their UIs.
On a more human note inputs just feel better with this PR.

Along with this change I've expanded documentation for the typescript
types and included a discriminating union to let contributors know that
the `expensive` prop requires `onInput` to work.
## Why It's Good For The Game
Bug fixes, responsiveness, etc
## Changelog
🆑
fix: Search bars for smaller lists should return to their former
responsiveness.
/🆑
2024-01-05 18:02:35 +00:00
Jeremiah
98cb01f04b Rewrites dropdown and popper components as FCs (#80556)
<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->

## About The Pull Request
Completely rewrites the popper and dropdown component as functional
components

`Popper` component now has built in `onClickOutside` and `placement`
props

![Biyq8wSTKI](https://github.com/tgstation/tgstation/assets/42397676/653636cc-6b41-421f-b116-558287d336ee)

<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->

## Why It's Good For The Game
Fixes some weirdness with dropdowns due to the recent react conversion +
code maintenance
<!-- Argue for the merits of your changes and how they benefit the game,
especially if they are controversial and/or far reaching. If you can't
actually explain WHY what you are doing will improve the game, then it
probably isn't good for the game in the first place. -->

## Changelog

<!-- If your PR modifies aspects of the game that can be concretely
observed by players or admins you should add a changelog. If your change
does NOT meet this description, remove this section. Be sure to properly
mark your PRs to prevent unnecessary GBP loss. You can read up on GBP
and it's effects on PRs in the tgstation guides for contributors. Please
note that maintainers freely reserve the right to remove and add tags
should they deem it appropriate. You can attempt to finagle the system
all you want, but it's best to shoot for clear communication right off
the bat. -->

🆑
fix: Dropdowns and pop-up menus have been rewritten. This should fix an
issue where dropdown text was accidentally scrolling if hovered. Please
report any issues on the repo
/🆑

<!-- Both 🆑's are required for the changelog to work! You can put
your name to the right of the first 🆑 if you want to overwrite your
GitHub username as author ingame. -->
<!-- You can use multiple of the same prefix (they're only used for the
icon ingame) and delete the unneeded ones. Despite some of the tags,
changelogs should generally represent how a player might be affected by
the changes rather than a summary of the PR's contents. -->
2023-12-30 20:22:22 -08:00
Jeremiah
eb590ca5a6 Fixes input boxes [No gbp] (#80490)
## About The Pull Request
One of the quirks of react is that we're no longer using onChange the
same as Inferno - React's version is a synthetic event. I made the
mistake of thinking it would be okay. Many interfaces are using onChange
events to send messages to byond (very laggy), others are using it to
close the input (closes each keypress).

So this was the alternative- I hope to replicate the behavior via onBlur
&& onEnter. I went through to undo most of the onInput -> onChange
replacements of #80340 where it made sense. Other inputs which should
safely use onChange (DEFINITELY to send messages) remain as such.

Example of an input which used onChange now working with this PR:

![aUojN0owHO](https://github.com/tgstation/tgstation/assets/42397676/82aa1d44-360d-4978-bef8-12720d7b4c70)
## Why It's Good For The Game
Bug fixes
Fixes #80486
## Changelog
🆑
fix: Name input in character setup should work properly now.
fix: Many inputs should feel more responsive.
/🆑
2023-12-20 20:12:15 -08:00
Jeremiah
cf9043e78b Input component in tsx (#80340)
## About The Pull Request
Converts Input to a typescript functional component. Clears up some
usages of onInput => onChange.
## Why It's Good For The Game
More typescript components + better dev exp
## Changelog
N/A nothing player facing
2023-12-16 13:42:04 +01:00
Jeremiah
d197ab7faa Deprecates inferno state hook (#80195)
## About The Pull Request
Marks useLocalState as deprecated. Removes a lot of its usages. I even
wrote some documentation to boot!

This is no longer necessary, as it was Inferno specific. Now that we
have real hooks, use them!
```tsx
// Old
const [someState, setSomeState] = useLocalState(context, 'some_state_identifier', false);

// Now
const [someState, setSomeState] = useState(false);
```

Read more! Or the rest of the React documentation, it's great: [React
State](https://react.dev/learn/state-a-components-memory)


## Why It's Good For The Game
We don't need uselocalstate anymore. Easier to read and probably faster
this way

## Changelog

N/A nothing player facing
2023-12-12 16:44:10 -08:00
Jeremiah
0454525d75 Ports React [READY] (#80044)
## About The Pull Request
Moves us from Inferno 7.4.11 to React 18.2. This is a big project! You
might find errors here. Sometimes I get carried away fixing external
issues, I'll try to atomize them into separate PRs.

- [x] Implements React
- [x] CSS kebab to camel case
- [x] Some typescript refactors 
- [x] Atomize what I can
- [x] Fix dropdowns (opens in the wrong location)
- [x] Fix wonky button placement in a few UIs
- [x] Cleanup
## Why It's Good For The Game
- It'd be nice to just have real hooks. Our implementation is probably
the best possible for Inferno, don't get me wrong.
- React is just easier to maintain and easier to read. It's the web dev
standard.

Closes #78221 
## Changelog
🆑
refactor: TGUI V5: The UI has had its entire engine replaced with React
v18.2. This might cause obvious or laughably broken UIs in places you
wouldn't expect. Please report any issues you find to the repo!
/🆑

---------

Co-authored-by: Mothblocks <35135081+Mothblocks@users.noreply.github.com>
2023-12-08 22:30:49 +01:00
Rob Bailey
b8fc54a914 Dropdowns v2 (#75164)
## About The Pull Request

Complete rewrite of dropdowns to use popper elements that are injected
at the body level.
This means they are now horribly overcomplicated and also suck a lot
less

![2023-05-04_06-57-12](https://user-images.githubusercontent.com/5194834/236229806-2f676e7b-d6c5-427a-af2f-520d883be790.gif)
Also ported `Icon` to typescript for a reason that didn't end up making
it in the PR

## Why It's Good For The Game

![image](https://user-images.githubusercontent.com/5194834/236226086-35ec2009-e9a9-404b-9b52-3ab8de0a0ae6.png)

![image](https://user-images.githubusercontent.com/5194834/236226573-880c0380-0f70-41c7-90c6-d51ba4238561.png)

## Changelog
🆑
add: good tgui dropdowns
del: tgui dropdown suck
qol: tgui dropdowns suck less
balance: buffed tgui dropdowns
/🆑
2023-05-07 12:40:18 -07:00
ZeWaka
836d1c65d4 TGUI Button iconPosition prop documentation (#71489)
## About The Pull Request

documents the `iconPosition` tgui button prop from 55109

## Why It's Good For The Game

people can know it exists

## Changelog

no
2022-11-24 22:08:04 +02:00
AnturK
4d6a8bc537 515 Compatibility (#71161)
Makes the code compatible with 515.1594+

Few simple changes and one very painful one.
Let's start with the easy:
* puts call behind `LIBCALL` define, so call_ext is properly used in 515
* Adds `NAMEOF_STATIC(_,X)` macro for nameof in static definitions since
src is now invalid there.
* Fixes tgui and devserver. From 515 onward the tmp3333{procid} cache
directory is not appened to base path in browser controls so we don't
check for it in base js and put the dev server dummy window file in
actual directory not the byond root.
* Renames the few things that had /final/ in typepath to ultimate since
final is a new keyword

And the very painful change:
`.proc/whatever` format is no longer valid, so we're replacing it with
new nameof() function. All this wrapped in three new macros.
`PROC_REF(X)`,`TYPE_PROC_REF(TYPE,X)`,`GLOBAL_PROC_REF(X)`. Global is
not actually necessary but if we get nameof that does not allow globals
it would be nice validation.
This is pretty unwieldy but there's no real alternative.
If you notice anything weird in the commits let me know because majority
was done with regex replace.

@tgstation/commit-access Since the .proc/stuff is pretty big change.

Co-authored-by: san7890 <the@san7890.com>
Co-authored-by: Mothblocks <35135081+Mothblocks@users.noreply.github.com>
2022-11-15 03:50:11 +00:00
vincentiusvin
b7f7b5700e LabeledList Kitchen Sink (#69532)
Looks like I've documented most of the labeledlist props in my previous PR so there is pretty much nothing else to do here except className.

Why It's Good For The Game

More examples for newer coders.
2022-08-29 22:42:58 -07:00
vincentiusvin
6f8e2a9d71 Lets LabeledList.Item's label wrap if they want. Docs the rest of the props. (#69459)
* Adds wrap toggle

* Documentation

* Less ambiguity
2022-08-28 17:18:42 +03:00
magatsuchi
a34003d4f6 adds the "refresh TGUI" debug verb (#67265)
About The Pull Request

adds the Refresh TGUI verb to the debug category OOC category, but it isn't locked behind any permissions. i'd put it in OOC, but.. eeeeeeh? there's not real much use for this verb other for debuggers. i put it in the OOC category
Why It's Good For The Game

debug purposes mostly

not player facing lole
2022-05-27 15:13:01 +12:00
magatsuchi
bea9387458 refactors statpanel to use tgui API (#66971)
refactors the status panel to utilize the tgui/byond communication APIs instead of passing along href data, as well as converts the entirety of it into a datum/tgui_window

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
2022-05-16 07:12:05 +03:00
Aleksej Komarov
b86cf89125 tgui: API improvements + docs (#65943)
About The Pull Request

This pull request improves tgui API in many ways.

Using TGUI for custom HTML popups

This standardizes and simplifies the process of HTML popup creation and DM <-> JS communication.

Makes tgui window API a perfect alternative for old-style browser panels. It will be super useful for @Iamgoofball since he wanted to make a lightweight browser element that plays background music, and this will make his life a lot easier.

It is now possible to create tgui windows with fully inlined JS and CSS, which can be used to make unkillable tgui-based UIs (can't white/blue screen due to network errors). You can split files into JS and CSS, and still serve a single HTML file using this.

Moved sendMessage function to the Byond API object, where it rightfully belongs, and now supports a shorthand form: Byond.sendMessage(type, payload). This shortens and simplifies a lot of code.

Refactored window.update to no longer be public. Now to subscribe to incoming messages, you should use new public APIs: Byond.subscribe(fn) and Byond.subscribeTo(type, fn), and TGUI internally uses these functions as well, which reduces boilerplate in index.js.

Renamed window.__windowId__ to Byond.windowId (old variable is still available for backwards compatibility).

Byond API now supports null id, e.g. Byond.winget(null, 'url'), which makes things like this possible:

// Fetch URL of a currently connected server
Byond.winget(null, 'url').then((serverUrl) => {
  // Connect to this server (opens a new dreamseeker instance)
  Byond.call(serverUrl);
  // Close this client because new instance is connecting
  Byond.command('.quit');
});

Certain polyfills are now statically compiled (commited into git) and are baked into tgui.html. The downside is that HTML went 16 kB -> 50 kB. The upside is that you can now use a relatively modern level API with full support for IE8 when writing plain old html UIs using /datum/tgui_window directly. They are committed into git, because polyfills will never need to be updated (unless of course we randomly decide to get rid of ie8.js and html5shiv.js).
Breaking Changes

No breaking changes. This should be tested for regressions. Upgrading is simple if you're on a relatively up-to-date branch - copy paste all affected tgui files and you're good.
2022-04-18 14:07:55 +12:00
LemonInTheDark
12a90800c5 Adds tooltips to /tg/c keywords. Adds support for chat embedded tgui components (#65383)
* Refactors tcg code a bit. Adds support for "keywords"

Idea is to allow card makers to embed tooltips in their card
descriptions.
These tooltips are defined in the keywords.json file
They can be referenced using {$keyword_name}

I've also done some refactoring to move more logic and state onto the
subsystem, and implemented a few keywords from the wiki

* New keywords, applies the old ones to the second card set

* Adds support for embedding react components in tgui chat

This is done by adding the data-component attribute to an html element
The value of that attibute is the component you want to use.
New components can be added by modifying the TGUI_CHAT_COMPONENTS list
in tgui-panel/chat/renderer.js.

Props can also be passed in in a limited capacity.
Any props you wish to pass must be added to
TGUI_CHAT_ATTRIBUTES_TO_PROPS.
This is due to a style restriction of html attributes, they cannot
contain an upper case char.
Use this list to convert between attibute compatible text and the prop's
name.

Props support 3 datatypes.
true and false can be passed by wrapping them in ""s. (Note to self add
a special char here to prevent colison with people just passing the
string true.
Numbers are supported in a limited capacity. Whitespace is not allowed,
but floats and ints are fair game.
And of course, strings are fully supported.

I've currently added support for Tooltip, since that's what I'm using
this for. Also added some tooltip html styles to the chat css.

* Implements the embedded component system to make tcg cards have nice pretty tooltips so people don't need to have the wiki open on one screen

* Adds documentation for embedding tgui components in chat, adds some protection against accidentially sending true as a bool

* Adds italitcs to the tooltips, moves the span stuff to a macro

* tGUI -> tgui, thank fikou

Co-authored-by: Fikou <23585223+Fikou@users.noreply.github.com>

* Style suggestions

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>

* Removes unneeded key from the components list

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>

* Removes needless span

* Actually adds the tooltip, oops

Co-authored-by: Fikou <23585223+Fikou@users.noreply.github.com>
Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
2022-03-15 11:36:31 +02:00
vincentiusvin
47ee4b0ab0 Brings back button vertical alignment prop (#65054)
poggers??

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
2022-03-02 18:15:31 +02:00
Doctor Pope
aa034d02cd Fixed spelling of possession, separate, and cemetery (#63203)
Just fixes some spelling for gangs. I also fixed misspellings for "posession" to "possession". Fixed "seperate " to "Separate" Fixed "Cemetary" to "Cemetery"
2021-12-03 13:29:29 -08:00
vincentiusvin
2ea640896d Revert "Vertical alignment for tgui button content (#62525)" (#62584)
This reverts commit 8e526a575a.
2021-11-05 01:05:01 +02:00
vincentiusvin
8e526a575a Vertical alignment for tgui button content (#62525)
Adds a verticalAlign prop for buttons that will wrap the content and icons in it in a flexbox and center/flex-end them. Made this an optional prop so it doesn't break browsers with bricked flexboxes.

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
2021-11-04 09:08:04 +02:00
esainane
7f6dab25b8 HFR frontend rework (#61737)
This makes the interface much more usable, and tries to help introduce the concepts involved in a very complicated system. The current interface is a bit clunky to use, and does not offer much guidance as to what actions are possible, or what the implications of taking them might be. You can't see the readouts at the same time you're tweaking the controls. Many failure states are not warned about, or even made clear when they're actively happening. To this end, this PR provides many very helpful qol changes, listed in the changelog below.
2021-10-25 11:20:14 -04:00
esainane
464bae0c22 tgui: Add new and disambiguate old gas colors (#61381)
This PR adds color mappings for new gases, and disambiguates color mappings for old gases where multiple gases used one color - many used red, or purple.

Most of these have been around for a while, but were missing color mappings in interfaces.

This mainly affects the HFR gas list interface.
2021-09-19 20:54:22 +01:00
AnturK
d406419439 Adds preserveWhitespace tgui Box property (#59383)
* Adds preserveWhitespace tgui Box property

* Update Box.tsx

* Update Box.tsx

* Update ExodroneConsole.tsx

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
2021-05-31 01:01:14 -04:00
Celotajs
190d0a0384 Replace alert usage with tgui_alert (#58419)
Pretty much every alert() call is replaced with tgui_alert, except one I replaced with tgalert as a fallback. If tgui_alert exists, why not use it?
2021-05-20 22:43:27 +12:00
Mothblocks
10bee5db78 Popper Tooltips 2 (they don't crash this time) (#58980)
Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
2021-05-17 23:43:40 +03:00
Aleksej Komarov
9bb07456cc Revert "Switch tgui tooltips to popper.js" (#58078)
* Revert "Switch tgui tooltips to popper.js (#57992)"

This reverts commit 206c8215de.

* Revert "Fix Tooltip documentation (#58013)"

This reverts commit e692b05a99.
2021-03-31 05:04:43 -07:00
Mothblocks
e692b05a99 Fix Tooltip documentation (#58013) 2021-03-28 14:54:05 +03:00
Mothblocks
206c8215de Switch tgui tooltips to popper.js (#57992)
* Preliminary popper support

* Switch tooltips to popper.js

* Documentation, change DEFAULT_PLACEMENT
2021-03-27 23:40:58 +02:00
Aleksej Komarov
1fb5d68b53 tgui: Typescript and Jest update (#57081)
Co-authored-by: Mothblocks <35135081+Mothblocks@users.noreply.github.com>
2021-02-22 01:18:35 -08:00
Aleksej Komarov
9d4a3f1556 Nuke Window resizable and improve drag code (#56727) 2021-02-09 15:40:53 +01:00
Aleksej Komarov
ba5d1f1c7e Fix ExoFab UI and Section bugs, improve Tabs, upgrade deps (#56721)
Fixes #56237
    Unblocks #56704

Besides fixing the above mentioned issue with ExoFab UI, I fixed a few tgui component bugs and added a few improvements. Not really atomizable, sorry.
Section changes

    level property is now gone, section level is automatically calculated.
    Nested sections automatically become transparent.
    Nested sections are now properly incapsulated and won't inherit properties of parent sections.
        This allows using nested non-scrollable sections, while parent is, for example, scrollable.

Tabs changes

    Tabs without a parent section will pretend they are a section (and will look as such, with dark background).
    Top corners of tabs are a bit rounded to make it look more like a tab.
    Background color for selected and hovered tabs (previously it was just an underline).
    2px margin around the tabs, to make them stand out a bit from the section background.

Two new props:

    fill - Same as <Section fill>
    fluid - Tabs use full width of the container.

scrollable property was not implemented because it's a bit complicated (requires converting it into a class, registering its scrollable node with tgui, etc). If you need scrollable, just wrap tabs with a Section like a good man.
2021-02-08 18:19:25 -03:00
Aleksej Komarov
a6e60e47e7 tgui 4.3 (#56080) 2021-01-16 19:54:31 -08:00
Rob Bailey
cb01640043 Filterrific! (#55246)
Filter refactor + In Game Filter Editor
Accessed via VV in the dropdown of atoms. "Edit Filters.
Makes filters actually usable.

Co-authored-by: ghgh <hghgh>
2020-12-18 20:05:20 +02:00
Bobbahbrown
24e447418a tgui: Round Gauge (#55230)
This PR introduces the wacky round gauge for showing all of your favourite metrics in half-circle format. Show off those wacky numbers, use some scary blinking lights, feel alive!

I've also gone ahead and included this in the canister and tank (think internals) UIs. I've also done some refactoring of data sending from canisters because GOSH DANG it required some.
2020-11-30 18:48:52 +02:00
Bobbahbrown
4e48e1379d Interview System / Soft Panic Bunker (#54465)
About The Pull Request

Ports and improves my interview system that has been previously used in the summer ball and toolbox tournament events. Allows for a 'softer' panic bunker, wherein players who fall below the required living time limit can still join the server and be restricted to filling out a questionnaire. Upon completing the questionnaire, the player may be allowed into the server by an administrator. If the application is approved, they get a notification that they will be reconnected and upon reconnecting will have all verbs as they usually would. If the application is denied the user is put on a cooldown after which they may submit a new questionnaire.

Players who are being interviewed (herein interviewees) have no verbs other than those required for the stat panel to function, as well as a verb to pull up the interview panel. Interviews do not persist through restarts, and the ability to join that is granted by an accepted interview is only valid for the duration of that round.

Open interviews are listed under a new 'interviews' tab for admins, which is VERY similar to the existing tickets tab.

Below is what a player who is flagged as an interviewee will see when they join the server. They can do nothing but respond to the questionnaire or leave.
image

This is what an administrator sees after an interview is submitted, they will also see a corresponding message within their chatbox, and an age-old BWOINK when an interview is submitted.
image

The interviews tab, which is similar to the tickets menu. You can open the interview manager panel to view all active (including non-submitted) interviews, queued (submitted) interviews, and closed interviews.

image
FAQ:

What happens if someone submits an interview when no admins are on? It's treated like adminhelps are, the message gets sent to TGS to be dispatched off to configured end-points (like Discord or IRC), and the user is notified that their interview was handled this way.

Can you configure the questions? Yes, in config/ there is now a interviews.txt file in which the welcome message and the individual questions can be set and modified.

Can this be turned on and off during a round? Yes, it can be toggled like the panic bunker. It requires the panic bunker to be raised in order to function.

Can interviewees have further questions asked to them? Yes, if you admin-pm them, which is possible using regular means or a conveniently placed button on the interview UI, they will be able to respond to the message.
Technical details

To use the interview system you must have the panic bunker enabled, this is an additional setting for the panic bunker. It can be set through the PANIC_BUNKER_INTERVIEW setting in config.txt, or alternatively enabled in-game as prompted during the panic bunker toggling process. It also can be toggled on its own using a verb added for this purpose, Toggle PB Interviews found under the server tab. These new actions are included in the logging for the panic bunker. I have also added a reporting stat to the world topic status keyword, which now reports if the interview system is on using the keyword interviews.

As mentioned above, for server operators, configure the questions and welcome message in config/interviews.txt.

Note to maintainers and those with big brains I had to add a call to init_verbs on the stat panel window being ready because seemingly a race condition exists wherein the add_verb of the 'view my interview' verb doesn't cause a refresh of the tabs (and therefore doesn't show the 'Interview' tab) when running in dream daemon but running it directly from visual studio code properly shows the tab. Adding a init_verbs call directly after adding the verb didn't seem to help.
A note for downstreams

If you don't use the HTML stat panel (which may not be a bad thing) then you will have to do some conversion from the HTML stat panel stuff used here to the old style stat panels. It's pretty trivial, but just be aware of that. You can see how I used to use the old stat panels in my PR from the summer ball, here, which should be helpful.
Why It's Good For The Game

This allows for a softer version of the panic bunker which impedes the flow of malicious players while allowing genuine players a chance to enter a round to gain enough time to not be affected by the panic bunker's restrictions.
Changelog

🆑 bobbahbrown
add: Added the interview system, a 'soft' panic bunker which lets players who would normally be blocked from joining be interviewed by admins to be selectively allowed to play.
/🆑
2020-10-25 14:10:06 +13:00
ThePotato
fbe2cede66 tgui: Icon Stacking (#54212)
* adds icon stacking to tgui

* Docmentation for Icon.Stack, added classnames to icon, Added a component that can stack child icons.

Co-authored-by: Style Mistake <stylemistake@gmail.com>

* Cosmetic 1

* Cosmetic 2

Co-authored-by: Style Mistake <stylemistake@gmail.com>
2020-10-07 08:37:47 +03:00
Timberpoes
1f23cc281d Enforce preserving parent proc return values across ui_act call stacks (#53964)
All ui_act procs should call parent by default. All procs should preserve the value of the parent proc when it's TRUTHY and pass it down the call stack. No UI should be interactible when its flags or state indicate it should not be, except when explicity overriden by child procs intentionally disregarding parent return values to achieve a specific goal.
2020-09-26 11:52:39 -03:00
ThePotato97
115354be8e It's not confirmMessage, it's confirmContent (#53752) 2020-09-16 01:42:17 +03:00
tralezab
6a25b30b12 Removes "availible" mispellings in codebase (#53046)
* AVAILABLE

* Rebuild tgui

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
2020-08-19 23:57:37 +03:00
Aleksej Komarov
0e1b20e6db tgchat (#52426)
Replaces goonchat with a tgui based chat panel

    Fixes #52898
    Fixes #52663

It is as fast as goonchat was (if not faster in certain circumstances), and is very extensible. It has all the necessary code for sorting messages into categories, which means that one of the next features will be multiple tab support.

Additional features that you will get with tgchat right now:
    Massively faster server-side performance compared to goonchat, especially if batching multiple messages to one client.
    Message persistence across rounds and reconnects. (All messages are stored client-side in IndexedDB)
    More robust scroll tracking. If you scroll up, it will not change the scroll position on new messages like goonchat did.
    Multiple message combining. (Currently set to combine up to 5 messages over last 5 seconds).
    If using the highlighting feature, it highlights the whole message as well as the matching word.
    "Now playing" widget, with preview of the song title, a knob for adjusting the volume and a stop button.

Architecture is as following:
```
to_chat() -+
           |
        SSchat
   (queue, batching)
           |
  window.send_message()
           |
           v
+-------------+
| tgui-panel  |
|+-----------+|
|| tgchat    ||
|+-----------+|
+-------------+
```

Subsystem is basically goonchat, but without all the garbage that slows the servers down (string concatenation, double urlencoding, sanitizing, etc). Now, instead of all that, it's being slowed down by json_encode in /datum/tgui_window/proc/send_message, which IMO is completely worth it, and allows sending various templates and widgets to tgchat.

/datum/tgui_window abstracts the whole window away from you, establishes a nice message-passing interface between DM and JS, with two message queues on each side, automatically loads js/css assets for you, basically does everything. You as a developer only have to worry about sending/receiving messages and write javascript.

tgui-panel is a slimmed down version of tgui, and functions as a container for various widgets, and tgchat is one of them. It of course can be expanded with more stuff.

It's also a separate entry point and a JS bundle, so it's not bloating the main tgui bundle, and is currently sitting at about 230kB.
2020-08-14 13:21:40 +12:00
Aleksej Komarov
0cf00a2645 tgui 4.0 (#52085)
* tgui 4.0 hyper squash

* Upgrade dependencies
2020-07-16 20:13:04 +02:00
spessman-007
5ae305ec9f Resolve issues with incorrect usage of a/an (#51095)
Co-authored-by: NewSta <spessman-007@users.noreply.github.com>
2020-05-25 01:34:34 +08:00
Aleksej Komarov
9acf7a3c84 tgui: Tutorial fix (#50766)
About The Pull Request

Web edit kung-fu for a really dumb mistake in documentation, which makes copypasta not work, and confuses the hell out of newbs.
2020-04-30 19:00:57 +12:00
Aleksej Komarov
5ba866b190 tgui: Better Canister (#50692)
* tgui: Better Canister

* Rebuild tgui
2020-04-27 08:35:06 +03:00
Aleksej Komarov
d86c667901 tgui: Fix Crafting, Tweak Box Units (#50577)
* Fix PersonalCrafting

* Half em units for margin/padding, full em unit for everything else.

* Update docs

* Opsie

* Rebuild tgui

* Let's pretend that IE10 is IE8

Closes #50588

* Assert dominance
2020-04-20 23:24:19 -07:00