9bd86e85b5
* Initial Commit
* Not quite all was staged, apparently.
* Multiline no longer necessary
* For my convenience...
* Forgot an important little tidbit in routes.tsx
* This updated, apparently.
* And now hell breaks loose
* First batch
* Second Batch
* Third batch (Unit Tests)
* Improvised shotgun ammo is gone; Vibebots are refactored
* UpdatePath sweeps in our fulp_modules/_maps folder
* I can't bring myself to do it.
* Map stuff
* Didn't mean to leave this uncommented
* I carpet-bombed them with Find-Replace. Let's see what linters think
* I sure do hope this is comprehensive and doesn't break other things
* This may take a while
* Next Round
* Hopefully the last batch before getting on with actual fixes
* Telescreens
* :/
* Stragglers
* Helio Emergency Shuttle; NearStation adjustments.
* Only one more commit for greenchecks... Shuttle code be dammed.
* Pff, the file was missing
* Same treatment as the other map files.
* Missed a comma :P
* BZ chambers for Xenobiology
* Odd. Most of these got done earlier. Not sure why this one wasn't.
* Mapping sweep. I didn't adjust C_tags in Theia. Another time.
* The balloon alerts overlap
* I hate TGU I hate TGU
* I meant to say "I hate TG" on the last one. Freudian slip.
* Fix Fix
* Nanite research cost rebalance
* TGU-Update: Step 0
* Yeah I figured it'd do this.
* I accidentally undid this
* Failed to catch this one
* I don't trust hundredths not to break or be broken somewhere.
* Little air alarm tweaks
* Ports #1228
* Stuff I missed
* Silly
* TGU so nice we're going to make it thrice
* Yarn
* Should be all? Fixes cult stun too.
* Thermomachine layers
* Free square spellcheck to rerun tests and see if it's consistent
* All credit goes to QLA for reminding me to actually do this
* Update to e40becd742
* github folder
3.2 KiB
Chat Embedded Components
Have you ever embedded html into tgui chat? Maybe just css stuff like <span class='alien'> </span>?
Have you ever wanted to embed tgui components instead? For styling or ease of use of course.
Well we have a system for that! You can pass component information in via html attributes, and it'll be rendered in chat. How? Let's get into it.
How it works
Here's a sample span that embeds a tooltip around the wrapped text.
<span data-component=\"Tooltip\" data-content=\"Hey it works!\">Does it work?</span>
There's two components here, let's break them down.
Targeting a component
Telling tgui chat what component you want to render is really simple. You just embed its name in the data-component attribute.
You saw it before, but for reference,
<div data-component=\"Tooltip\"></div>
this tells the div to render a tooltip.
There is a bit of nuance here however.
We can't embed components that haven't been prewhitelisted.
This isn't because of security concerns or anything, we just can't lookup components by their name without creating a lookup table.
You can find that in tgui chat's renderer under the name TGUI_CHAT_COMPONENTS
Adding a new component is simple, just add its name to the dictionary, and import it into the file.
Sending props
Ok, so we know how to render a component, but that's nearly useless unless we also know how to send extra info alongside it.
So how's that work?
The syntax is similar to sending a component, but has a bit more caveats. We have two bits of info to contend with. The name of the prop, and its value. First then, how do you send the name of a prop?
Sending a prop's name
<span {component setting} data-content={value}></span
It's really simple, just another data attribute, with the name you want to refer to the property by.
Something important to note here, data attribute names cannot contain any upper case chars, or anything that isn't XML compatible.
Because of this, we need to do another map of sent name -> intended name. This can also be found in the renderer file with the name TGUI_CHAT_ATTRIBUTES_TO_PROPS
Sending a prop's value
Setting a prop's value is as simple as giving the data-content attribute a string value.
This does mean that we can only send strings to javascript. Because of this, we do some parsing js side to pull out other values you may want to send.
There's three supported datatypes.
Booleans
Booleans are send by sending a string in the form
data-bool=\"$true\" and "data-bool=\"$false\"
The $ char is included to allow you to send the string "true" without breaking anything.
Please keep this restriction in mind.
Numbers
Numbers are simpler then the above. If you send a string with no whitespace that can be parsed as an int or float, it will be.
So data-int=\"-10\" will be parsed as -10
data-float=\"10.2\" will also be correctly handled, treated as 10.2
Strings
Strings are the most simple. If a value is passed to an html attribute, and it doesn't meet any of the above requirements, it will be
data-string=\"hey man, it works!\"