All Key Bindings: "
dat += "Reset to Default "
@@ -806,10 +753,10 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
/datum/preferences/proc/get_gear_metadata(var/datum/gear/G)
- . = loadout_gear[G.display_name]
+ . = loadout_gear[G.index_name]
if(!.)
. = list()
- loadout_gear[G.display_name] = .
+ loadout_gear[G.index_name] = .
/datum/preferences/proc/get_tweak_metadata(var/datum/gear/G, var/datum/gear_tweak/tweak)
var/list/metadata = get_gear_metadata(G)
@@ -1280,6 +1227,58 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
SetChoices(user)
return 1
+/**
+ * Rebuilds the `loadout_gear` list of the [active_character], and returns the total end cost.
+ *
+ * Caches and cuts the existing [/datum/character_save/var/loadout_gear] list and remakes it, checking the `subtype_selection_cost` and overall cost validity of each item.
+ *
+ * If the item's [/datum/gear/var/subtype_selection_cost] is `FALSE`, any future items with the same [/datum/gear/var/main_typepath] will have their cost skipped.
+ * If adding the item will take the total cost over the maximum, it won't be added to the list.
+ *
+ * Arguments:
+ * * new_item - A new [/datum/gear] item to be added to the `loadout_gear` list.
+ */
+/datum/preferences/proc/build_loadout(datum/gear/new_item)
+ var/total_cost = 0
+ var/list/type_blacklist = list()
+ var/list/loadout_cache = loadout_gear.Copy()
+ loadout_gear.Cut()
+ tgui_loadout_gear.Cut()
+ choosen_gears.Cut()
+ if(new_item)
+ loadout_cache += "[new_item.index_name]"
+
+ for(var/item in loadout_cache)
+ var/datum/gear/gear = GLOB.gear_datums[item]
+ if(!gear)
+ continue
+ var/added_cost = gear.cost
+ if(!gear.subtype_cost_overlap) // If listings of the same subtype shouldn't have their cost added.
+ if(gear.path in type_blacklist)
+ added_cost = 0
+ else
+ type_blacklist += gear.path
+ if((total_cost + added_cost) > max_gear_slots)
+ continue // If the final cost is too high, don't add the item.
+ var/item_cache = loadout_cache[item]
+ loadout_gear[item] = item_cache ? item_cache : list()
+ var/tgui_data = list()
+ for(var/datum/gear_tweak/tweak in gear.gear_tweaks)
+ var/text_path = "[tweak.type]"
+ if(!(text_path in item_cache))
+ continue
+ var/params = item_cache[text_path]
+ var/list/data =tweak.get_tgui_data(params)
+ tgui_data[text_path] = data["display_param"]
+ tgui_data["name"] = data["name"]
+ tgui_data["icon"] = data["icon"]
+ tgui_data["icon_file"] = data["icon_file"]
+ tgui_data["icon_state"] = data["icon_state"]
+ tgui_loadout_gear[gear] = tgui_data
+ choosen_gears[item] = gear
+ total_cost += added_cost
+ return total_cost
+
/datum/preferences/proc/ResetJobs()
job_support_high = 0
job_support_med = 0
@@ -1491,47 +1490,6 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
SetRecords(user)
- if(href_list["preference"] == "gear")
- if(href_list["toggle_gear"])
- var/datum/gear/TG = GLOB.gear_datums[href_list["toggle_gear"]]
- if(TG.display_name in loadout_gear)
- loadout_gear -= TG.display_name
- choosen_gears -= TG.display_name
- else
- if(!TG.can_select(cl = user.client, species_name = S.name)) // all gear checks there, no jobs while prefs
- return
- var/total_cost = 0
- var/list/type_blacklist = list()
- for(var/gear_name in loadout_gear)
- var/datum/gear/G = GLOB.gear_datums[gear_name]
- if(istype(G))
- if(!G.subtype_cost_overlap)
- if(G.subtype_path in type_blacklist)
- continue
- type_blacklist += G.subtype_path
- total_cost += G.cost
-
- if((total_cost + TG.cost) <= max_gear_slots)
- loadout_gear += TG.display_name
- choosen_gears[TG.display_name] += new TG.type
- else if(href_list["gear"] && href_list["tweak"])
- var/datum/gear/gear = choosen_gears[href_list["gear"]]
- var/datum/gear_tweak/tweak = locate(href_list["tweak"])
- if(!tweak || !istype(gear) || !(tweak in gear.gear_tweaks))
- return
- var/metadata = tweak.get_metadata(user, get_tweak_metadata(gear, tweak))
- if(!metadata)
- return
- set_tweak_metadata(gear, tweak, metadata)
- else if(href_list["select_category"])
- gear_tab = href_list["select_category"]
- else if(href_list["clear_loadout"])
- loadout_gear.Cut()
- choosen_gears.Cut()
-
- ShowChoices(user)
- return
-
switch(href_list["task"])
if("random")
var/datum/robolimb/robohead
@@ -1763,16 +1721,16 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if("hair")
if(species in list(SPECIES_HUMAN, SPECIES_UNATHI, SPECIES_TAJARAN, SPECIES_SKRELL, SPECIES_MACNINEPERSON, SPECIES_VULPKANIN, SPECIES_VOX, SPECIES_WRYN)) //Species that have hair. (No HAS_HAIR flag)
var/input = "Choose your character's hair colour:"
- var/new_hair = input(user, input, "Character Preference", h_colour) as color|null
- if(new_hair)
+ var/new_hair = tgui_input_color(user, input, "Character Preference", h_colour)
+ if(!isnull(new_hair))
h_colour = new_hair
if("secondary_hair")
if(species in list(SPECIES_HUMAN, SPECIES_UNATHI, SPECIES_TAJARAN, SPECIES_SKRELL, SPECIES_MACNINEPERSON, SPECIES_VULPKANIN, SPECIES_VOX))
var/datum/sprite_accessory/hair_style = GLOB.hair_styles_public_list[h_style]
if(hair_style.secondary_theme && !hair_style.no_sec_colour)
- var/new_hair = input(user, "Choose your character's secondary hair colour:", "Character Preference", h_sec_colour) as color|null
- if(new_hair)
+ var/new_hair = tgui_input_color(user, "Choose your character's secondary hair colour:", "Character Preference", h_sec_colour)
+ if(!isnull(new_hair))
h_sec_colour = new_hair
if("h_style")
@@ -1820,8 +1778,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
h_grad_offset_y = clamp(text2num(expl[2]) || 0, -16, 16)
if("h_grad_colour")
- var/result = input(user, "Choose your character's hair gradient colour:", "Character Preference", h_grad_colour) as color|null
- if(result)
+ var/result = tgui_input_color(user, "Choose your character's hair gradient colour:", "Character Preference", h_grad_colour)
+ if(!isnull(result))
h_grad_colour = result
if("h_grad_alpha")
@@ -1833,8 +1791,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if("headaccessory")
if(S.bodyflags & HAS_HEAD_ACCESSORY) //Species with head accessories.
var/input = "Choose the colour of your your character's head accessory:"
- var/new_head_accessory = input(user, input, "Character Preference", hacc_colour) as color|null
- if(new_head_accessory)
+ var/new_head_accessory = tgui_input_color(user, input, "Character Preference", hacc_colour)
+ if(!isnull(new_head_accessory))
hacc_colour = new_head_accessory
if("ha_style")
@@ -1913,8 +1871,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if("m_head_colour")
if(S.bodyflags & HAS_HEAD_MARKINGS) //Species with head markings.
var/input = "Choose the colour of your your character's head markings:"
- var/new_markings = input(user, input, "Character Preference", m_colours["head"]) as color|null
- if(new_markings)
+ var/new_markings = tgui_input_color(user, input, "Character Preference", m_colours["head"])
+ if(!isnull(new_markings))
m_colours["head"] = new_markings
if("m_style_body")
@@ -1939,8 +1897,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if("m_body_colour")
if(S.bodyflags & HAS_BODY_MARKINGS) //Species with body markings/tattoos.
var/input = "Choose the colour of your your character's body markings:"
- var/new_markings = input(user, input, "Character Preference", m_colours["body"]) as color|null
- if(new_markings)
+ var/new_markings = tgui_input_color(user, input, "Character Preference", m_colours["body"])
+ if(!isnull(new_markings))
m_colours["body"] = new_markings
if("m_style_tail")
@@ -1969,8 +1927,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if("m_tail_colour")
if(S.bodyflags & HAS_TAIL_MARKINGS) //Species with tail markings.
var/input = "Choose the colour of your your character's tail markings:"
- var/new_markings = input(user, input, "Character Preference", m_colours["tail"]) as color|null
- if(new_markings)
+ var/new_markings = tgui_input_color(user, input, "Character Preference", m_colours["tail"])
+ if(!isnull(new_markings))
m_colours["tail"] = new_markings
if("body_accessory")
@@ -1995,16 +1953,16 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if("facial")
if(species in list(SPECIES_HUMAN, SPECIES_UNATHI, SPECIES_TAJARAN, SPECIES_SKRELL, SPECIES_MACNINEPERSON, SPECIES_VULPKANIN, SPECIES_VOX)) //Species that have facial hair. (No HAS_HAIR_FACIAL flag)
- var/new_facial = input(user, "Choose your character's facial-hair colour:", "Character Preference", f_colour) as color|null
- if(new_facial)
+ var/new_facial = tgui_input_color(user, "Choose your character's facial-hair colour:", "Character Preference", f_colour)
+ if(!isnull(new_facial))
f_colour = new_facial
if("secondary_facial")
if(species in list(SPECIES_HUMAN, SPECIES_UNATHI, SPECIES_TAJARAN, SPECIES_SKRELL, SPECIES_MACNINEPERSON, SPECIES_VULPKANIN, SPECIES_VOX))
var/datum/sprite_accessory/facial_hair_style = GLOB.facial_hair_styles_list[f_style]
if(facial_hair_style.secondary_theme && !facial_hair_style.no_sec_colour)
- var/new_facial = input(user, "Choose your character's secondary facial-hair colour:", "Character Preference", f_sec_colour) as color|null
- if(new_facial)
+ var/new_facial = tgui_input_color(user, "Choose your character's secondary facial-hair colour:", "Character Preference", f_sec_colour)
+ if(!isnull(new_facial))
f_sec_colour = new_facial
if("f_style")
@@ -2054,8 +2012,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
underwear = new_underwear
if("underwear_color")
- var/new_uwear_color = input(user, "Choose your character's underwear colour:", "Character Preference", underwear_color) as color|null
- if(new_uwear_color)
+ var/new_uwear_color = tgui_input_color(user, "Choose your character's underwear colour:", "Character Preference", underwear_color)
+ if(!isnull(new_uwear_color))
underwear_color = new_uwear_color
if("undershirt")
@@ -2074,8 +2032,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
undershirt = new_undershirt
if("undershirt_color")
- var/new_ushirt_color = input(user, "Choose your character's undershirt colour:", "Character Preference", undershirt_color) as color|null
- if(new_ushirt_color)
+ var/new_ushirt_color = tgui_input_color(user, "Choose your character's undershirt colour:", "Character Preference", undershirt_color)
+ if(!isnull(new_ushirt_color))
undershirt_color = new_ushirt_color
if("socks")
@@ -2094,8 +2052,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
socks = new_socks
if("eyes")
- var/new_eyes = input(user, "Choose your character's eye colour:", "Character Preference", e_colour) as color|null
- if(new_eyes)
+ var/new_eyes = tgui_input_color(user, "Choose your character's eye colour:", "Character Preference", e_colour)
+ if(!isnull(new_eyes))
e_colour = new_eyes
if("s_tone")
@@ -2121,13 +2079,13 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if("skin")
if((S.bodyflags & HAS_SKIN_COLOR) || ((S.bodyflags & HAS_BODYACC_COLOR) && GLOB.body_accessory_by_species[species]) || check_rights(R_ADMIN, 0, user))
- var/new_skin = input(user, "Choose your character's skin colour: ", "Character Preference", s_colour) as color|null
- if(new_skin)
+ var/new_skin = tgui_input_color(user, "Choose your character's skin colour: ", "Character Preference", s_colour)
+ if(!isnull(new_skin))
s_colour = new_skin
if("ooccolor")
- var/new_ooccolor = input(user, "Choose your OOC colour:", "Game Preference", ooccolor) as color|null
- if(new_ooccolor)
+ var/new_ooccolor = tgui_input_color(user, "Choose your OOC colour:", "Game Preference", ooccolor)
+ if(!isnull(new_ooccolor))
ooccolor = new_ooccolor
if("bag")
@@ -2135,6 +2093,11 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
if(new_backbag)
backbag = new_backbag
+ if("loadout")
+ var/datum/ui_module/loadout/loadout = new()
+ loadout.ui_interact(user)
+ return FALSE
+
if("nt_relation")
var/new_relation = tgui_input_list(user, "Choose your relation to NT. Note that this represents what others can find out about your character by researching your background, not what your character actually thinks.", "Character Preference", list("Loyal", "Supportive", "Neutral", "Skeptical", "Opposed"))
if(new_relation)
@@ -2489,8 +2452,8 @@ GLOBAL_LIST_INIT(special_role_times, list( //minimum age (in days) for accounts
toggles2 ^= PREFTOGGLE_2_AFKWATCH
if("UIcolor")
- var/UI_style_color_new = input(user, "Choose your UI color, dark colors are not recommended!", UI_style_color) as color|null
- if(!UI_style_color_new) return
+ var/UI_style_color_new = tgui_input_color(user, "Choose your UI color, dark colors are not recommended!", UI_style_color)
+ if(isnull(UI_style_color_new)) return
UI_style_color = UI_style_color_new
if(ishuman(usr)) //mid-round preference changes, for aesthetics
diff --git a/code/modules/client/preference/preferences_toggles.dm b/code/modules/client/preference/preferences_toggles.dm
index d047654588f..4bbd63e44ca 100644
--- a/code/modules/client/preference/preferences_toggles.dm
+++ b/code/modules/client/preference/preferences_toggles.dm
@@ -434,8 +434,8 @@
blackbox_message = "Set Own OOC"
/datum/preference_toggle/special_toggle/set_ooc_color/set_toggles(client/user)
- var/new_ooccolor = input(usr, "Please select your OOC color.", "OOC color", user.prefs.ooccolor) as color|null
- if(new_ooccolor)
+ var/new_ooccolor = tgui_input_color(usr, "Please select your OOC color.", "OOC color", user.prefs.ooccolor)
+ if(!isnull(new_ooccolor))
user.prefs.ooccolor = new_ooccolor
to_chat(usr, "Your OOC color has been set to [new_ooccolor].")
else
diff --git a/code/modules/customitems/item_defines.dm b/code/modules/customitems/item_defines.dm
index cb5b6bf4768..b92fc9ae696 100644
--- a/code/modules/customitems/item_defines.dm
+++ b/code/modules/customitems/item_defines.dm
@@ -111,8 +111,8 @@
/obj/item/fluff/tattoo_gun/elliot_cybernetic_tat/attack_self(mob/user as mob)
if(!used)
- var/ink_color = input("Please select an ink color.", "Tattoo Ink Color", rgb(tattoo_r, tattoo_g, tattoo_b)) as color|null
- if(ink_color && !(user.incapacitated() || used) )
+ var/ink_color = tgui_input_color("Please select an ink color.", "Tattoo Ink Color", rgb(tattoo_r, tattoo_g, tattoo_b))
+ if(!isnull(ink_color) && !(user.incapacitated() || used) )
tattoo_r = color2R(ink_color)
tattoo_g = color2G(ink_color)
tattoo_b = color2B(ink_color)
diff --git a/code/modules/mob/living/carbon/human/species/machine.dm b/code/modules/mob/living/carbon/human/species/machine.dm
index c12df2472d3..853aa7a42a6 100644
--- a/code/modules/mob/living/carbon/human/species/machine.dm
+++ b/code/modules/mob/living/carbon/human/species/machine.dm
@@ -153,11 +153,11 @@
if(!head_organ)
return
if(!robohead.is_monitor) //If they've got a prosthetic head and it isn't a monitor, they've no screen to adjust. Instead, let them change the colour of their optics!
- var/optic_colour = input(H, "Select optic colour", H.m_colours["head"]) as color|null
+ var/optic_colour = tgui_input_color(H, "Select optic colour", H.m_colours["head"])
if(H.incapacitated(INC_IGNORE_RESTRAINED|INC_IGNORE_GRABBED))
to_chat(H, "Ваша попытка сменить отображаемый цвет была прервана.")
return
- if(optic_colour)
+ if(!isnull(optic_colour))
H.change_markings(optic_colour, "head")
else if(robohead.is_monitor) //Means that the character's head is a monitor (has a screen). Time to customize.
diff --git a/code/modules/projectiles/guns/energy/kinetic_accelerator.dm b/code/modules/projectiles/guns/energy/kinetic_accelerator.dm
index 31574f8430a..57fd110b524 100644
--- a/code/modules/projectiles/guns/energy/kinetic_accelerator.dm
+++ b/code/modules/projectiles/guns/energy/kinetic_accelerator.dm
@@ -798,7 +798,10 @@
/obj/item/borg/upgrade/modkit/tracer/adjustable/attack_self(mob/user)
- bolt_color = input(user,"","Choose Color",bolt_color) as color|null
+ var/color = tgui_input_color(user,"","Choose Color",bolt_color)
+ if(isnull(color))
+ return
+ bolt_color = color
#undef COMPATIBILITY_STANDART
diff --git a/code/modules/spacepods/spacepod.dm b/code/modules/spacepods/spacepod.dm
index 4973d3ce5a3..d98001ab186 100644
--- a/code/modules/spacepods/spacepod.dm
+++ b/code/modules/spacepods/spacepod.dm
@@ -103,7 +103,9 @@
if("Windows")
part_type = WINDOW
else
- var/coloradd = input(user, "Choose a color", "Color") as color
+ var/coloradd = tgui_input_color(user, "Choose a color", "Color")
+ if(isnull(coloradd))
+ return
colors[part_type] = coloradd
if(!has_paint)
has_paint = 1
diff --git a/code/modules/tgui/modules/appearance_changer.dm b/code/modules/tgui/modules/appearance_changer.dm
index 7983d32b064..ab1719a0a54 100644
--- a/code/modules/tgui/modules/appearance_changer.dm
+++ b/code/modules/tgui/modules/appearance_changer.dm
@@ -72,8 +72,8 @@
if("skin_color")
if(can_change_skin_color())
- var/new_skin = input(usr, "Choose your character's skin colour: ", "Skin Color", owner.skin_colour) as color|null
- if(new_skin && (!..()) && owner.change_skin_color(new_skin))
+ var/new_skin = tgui_input_color(usr, "Choose your character's skin colour: ", "Skin Color", owner.skin_colour)
+ if(!isnull(new_skin) && (!..()) && owner.change_skin_color(new_skin))
update_dna()
if("hair")
@@ -83,14 +83,14 @@
if("hair_color")
if(can_change(APPEARANCE_HAIR_COLOR))
- var/new_hair = input("Please select hair color.", "Hair Color", head_organ.hair_colour) as color|null
- if(new_hair && (!..()) && owner.change_hair_color(new_hair))
+ var/new_hair = tgui_input_color("Please select hair color.", "Hair Color", head_organ.hair_colour)
+ if(!isnull(new_hair) && (!..()) && owner.change_hair_color(new_hair))
update_dna()
if("secondary_hair_color")
if(can_change(APPEARANCE_SECONDARY_HAIR_COLOR))
- var/new_hair = input("Please select secondary hair color.", "Secondary Hair Color", head_organ.sec_hair_colour) as color|null
- if(new_hair && (!..()) && owner.change_hair_color(new_hair, 1))
+ var/new_hair = tgui_input_color("Please select secondary hair color.", "Secondary Hair Color", head_organ.sec_hair_colour)
+ if(!isnull(new_hair) && (!..()) && owner.change_hair_color(new_hair, 1))
update_dna()
if("hair_gradient")
@@ -124,21 +124,21 @@
if("facial_hair_color")
if(can_change(APPEARANCE_FACIAL_HAIR_COLOR))
- var/new_facial = input("Please select facial hair color.", "Facial Hair Color", head_organ.facial_colour) as color|null
- if(new_facial && (!..()) && owner.change_facial_hair_color(new_facial))
+ var/new_facial = tgui_input_color("Please select facial hair color.", "Facial Hair Color", head_organ.facial_colour)
+ if(!isnull(new_facial) && (!..()) && owner.change_facial_hair_color(new_facial))
update_dna()
if("secondary_facial_hair_color")
if(can_change(APPEARANCE_SECONDARY_FACIAL_HAIR_COLOR))
- var/new_facial = input("Please select secondary facial hair color.", "Secondary Facial Hair Color", head_organ.sec_facial_colour) as color|null
- if(new_facial && (!..()) && owner.change_facial_hair_color(new_facial, 1))
+ var/new_facial = tgui_input_color("Please select secondary facial hair color.", "Secondary Facial Hair Color", head_organ.sec_facial_colour)
+ if(!isnull(new_facial) && (!..()) && owner.change_facial_hair_color(new_facial, 1))
update_dna()
if("eye_color")
if(can_change(APPEARANCE_EYE_COLOR))
var/obj/item/organ/internal/eyes/eyes_organ = owner.get_int_organ(/obj/item/organ/internal/eyes)
- var/new_eyes = input("Please select eye color.", "Eye Color", eyes_organ.eye_colour) as color|null
- if(new_eyes && (!..()) && owner.change_eye_color(new_eyes))
+ var/new_eyes = tgui_input_color("Please select eye color.", "Eye Color", eyes_organ.eye_colour)
+ if(!isnull(new_eyes) && (!..()) && owner.change_eye_color(new_eyes))
update_dna()
if("head_accessory")
@@ -148,8 +148,8 @@
if("head_accessory_color")
if(can_change_head_accessory())
- var/new_head_accessory = input("Please select head accessory color.", "Head Accessory Color", head_organ.headacc_colour) as color|null
- if(new_head_accessory && (!..()) && owner.change_head_accessory_color(new_head_accessory))
+ var/new_head_accessory = tgui_input_color("Please select head accessory color.", "Head Accessory Color", head_organ.headacc_colour)
+ if(!isnull(new_head_accessory) && (!..()) && owner.change_head_accessory_color(new_head_accessory))
update_dna()
if("head_marking")
@@ -159,8 +159,8 @@
if("head_marking_color")
if(can_change_markings("head"))
- var/new_markings = input("Please select head marking color.", "Marking Color", owner.m_colours["head"]) as color|null
- if(new_markings && (!..()) && owner.change_marking_color(new_markings, "head"))
+ var/new_markings = tgui_input_color("Please select head marking color.", "Marking Color", owner.m_colours["head"])
+ if(!isnull(new_markings) && (!..()) && owner.change_marking_color(new_markings, "head"))
update_dna()
if("body_marking")
@@ -170,8 +170,8 @@
if("body_marking_color")
if(can_change_markings("body"))
- var/new_markings = input("Please select body marking color.", "Marking Color", owner.m_colours["body"]) as color|null
- if(new_markings && (!..()) && owner.change_marking_color(new_markings, "body"))
+ var/new_markings = tgui_input_color("Please select body marking color.", "Marking Color", owner.m_colours["body"])
+ if(!isnull(new_markings) && (!..()) && owner.change_marking_color(new_markings, "body"))
update_dna()
if("tail_marking")
@@ -181,8 +181,8 @@
if("tail_marking_color")
if(can_change_markings("tail"))
- var/new_markings = input("Please select tail marking color.", "Marking Color", owner.m_colours["tail"]) as color|null
- if(new_markings && (!..()) && owner.change_marking_color(new_markings, "tail"))
+ var/new_markings = tgui_input_color("Please select tail marking color.", "Marking Color", owner.m_colours["tail"])
+ if(!isnull(new_markings) && (!..()) && owner.change_marking_color(new_markings, "tail"))
update_dna()
if("body_accessory")
diff --git a/code/modules/tgui/tgui_datum.dm b/code/modules/tgui/tgui_datum.dm
index 90372951958..960930d03b3 100644
--- a/code/modules/tgui/tgui_datum.dm
+++ b/code/modules/tgui/tgui_datum.dm
@@ -103,6 +103,8 @@
/datum/tgui/proc/send_assets()
var/flushqueue = window.send_asset(get_asset_datum(
/datum/asset/simple/namespaced/fontawesome))
+ flushqueue |= window.send_asset(get_asset_datum(
+ /datum/asset/json/icon_ref_map))
for(var/datum/asset/asset in src_object.ui_assets(user))
flushqueue |= window.send_asset(asset)
if(flushqueue)
diff --git a/code/modules/tgui/tgui_input/color_input.dm b/code/modules/tgui/tgui_input/color_input.dm
new file mode 100644
index 00000000000..7ba4b9ed3e0
--- /dev/null
+++ b/code/modules/tgui/tgui_input/color_input.dm
@@ -0,0 +1,132 @@
+/**
+ * Creates a TGUI color picker window and returns the user's response.
+ *
+ * This proc should be used to create a color picker that the caller will wait for a response from.
+ * Arguments:
+ * * user - The user to show the picker to.
+ * * title - The of the picker modal, shown on the top of the TGUI window.
+ * * timeout - The timeout of the picker, after which the modal will close and qdel itself. Set to zero for no timeout.
+ * * autofocus - The bool that controls if this picker should grab window focus.
+ */
+/proc/tgui_input_color(mob/user, message, title, default = "#000000", timeout = 0, autofocus = TRUE, ui_state = GLOB.always_state)
+ if(!user)
+ user = usr
+ if(!istype(user))
+ if(!isclient(user))
+ CRASH("We passed something that wasn't a user/client in a TGUI Input Color! The passed thing was [user]!")
+ var/client/client = user
+ user = client.mob
+
+ if(isnull(user.client))
+ return
+
+ // Client does NOT have tgui_input on: Returns regular input
+ if(user.client?.prefs?.toggles2 & PREFTOGGLE_2_DISABLE_TGUI_INPUT)
+ return input(user, message, title, default) as color|null
+
+ var/datum/tgui_input_color/picker = new(user, message, title, default, timeout, autofocus, ui_state)
+ picker.ui_interact(user)
+ picker.wait()
+ if(picker)
+ . = picker.choice
+ qdel(picker)
+
+/**
+ * tgui_input_color
+ *
+ * Datum used for instantiating and using a TGUI-controlled color picker.
+ */
+/datum/tgui_input_color
+ /// The title of the TGUI window
+ var/title
+ /// The message to show the user
+ var/message
+ /// The default choice, used if there is an existing value
+ var/default
+ /// The color the user selected, null if no selection has been made
+ var/choice
+ /// The time at which the tgui_input_color was created, for displaying timeout progress.
+ var/start_time
+ /// The lifespan of the tgui_input_color, after which the window will close and delete itself.
+ var/timeout
+ /// The bool that controls if this modal should grab window focus
+ var/autofocus
+ /// Boolean field describing if the tgui_input_color was closed by the user.
+ var/closed
+ /// The attached timer that handles this objects timeout deletion
+ var/deletion_timer
+ /// The TGUI UI state that will be returned in ui_state(). Default: always_state
+ var/datum/ui_state/state
+
+/datum/tgui_input_color/New(mob/user, message, title, default, timeout, autofocus, ui_state)
+ src.autofocus = autofocus
+ src.title = title
+ src.default = default
+ src.message = message
+ src.state = ui_state
+
+ if(timeout)
+ src.timeout = timeout
+ start_time = world.time
+ deletion_timer = QDEL_IN(src, timeout)
+
+/datum/tgui_input_color/Destroy(force, ...)
+ SStgui.close_uis(src)
+ state = null
+ deltimer(deletion_timer)
+ return ..()
+
+/**
+ * Waits for a user's response to the tgui_input_color's prompt before returning. Returns early if
+ * the window was closed by the user.
+ */
+/datum/tgui_input_color/proc/wait()
+ while(!choice && !closed && !QDELETED(src))
+ stoplag(1)
+
+/datum/tgui_input_color/ui_interact(mob/user, datum/tgui/ui)
+ ui = SStgui.try_update_ui(user, src, ui)
+ if(!ui)
+ ui = new(user, src, "ColorPickerModal")
+ ui.open()
+ ui.set_autoupdate(timeout > 0)
+
+/datum/tgui_input_color/ui_close(mob/user)
+ closed = TRUE
+
+/datum/tgui_input_color/ui_state(mob/user)
+ return state
+
+/datum/tgui_input_color/ui_static_data(mob/user)
+ var/list/data = list()
+ data["autofocus"] = autofocus
+ data["large_buttons"] = !user.client?.prefs || (user.client.prefs.toggles2 & PREFTOGGLE_2_LARGE_INPUT_BUTTONS)
+ data["swapped_buttons"] = !user.client?.prefs || (user.client.prefs.toggles2 & PREFTOGGLE_2_SWAP_INPUT_BUTTONS)
+ data["title"] = title
+ data["default_color"] = default
+ data["message"] = message
+ return data
+
+/datum/tgui_input_color/ui_data(mob/user)
+ var/list/data = list()
+ if(timeout)
+ data["timeout"] = CLAMP01((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS))
+ return data
+
+/datum/tgui_input_color/ui_act(action, list/params)
+ . = ..()
+ if(.)
+ return
+
+ switch(action)
+ if("submit")
+ if(!findtext(params["entry"], GLOB.is_color))
+ return
+ choice = params["entry"]
+ closed = TRUE
+ SStgui.close_uis(src)
+ return TRUE
+ if("cancel")
+ closed = TRUE
+ SStgui.close_uis(src)
+ return TRUE
diff --git a/paradise.dme b/paradise.dme
index 3a819c87632..9659e3d1ec2 100644
--- a/paradise.dme
+++ b/paradise.dme
@@ -1758,6 +1758,7 @@
#include "code\modules\asset_cache\assets\asset_cloning.dm"
#include "code\modules\asset_cache\assets\asset_common.dm"
#include "code\modules\asset_cache\assets\asset_emoji.dm"
+#include "code\modules\asset_cache\assets\asset_icon_ref_map.dm"
#include "code\modules\asset_cache\assets\asset_id_card.dm"
#include "code\modules\asset_cache\assets\asset_jquery.dm"
#include "code\modules\asset_cache\assets\asset_lobby.dm"
@@ -1899,6 +1900,7 @@
#include "code\modules\client\preference\loadout\loadout_racial.dm"
#include "code\modules\client\preference\loadout\loadout_shoes.dm"
#include "code\modules\client\preference\loadout\loadout_suit.dm"
+#include "code\modules\client\preference\loadout\loadout_tgui.dm"
#include "code\modules\client\preference\loadout\loadout_uniform.dm"
#include "code\modules\clothing\clothing.dm"
#include "code\modules\clothing\chameleon\_chameleon_actions.dm"
@@ -3169,6 +3171,7 @@
#include "code\modules\tgui\states\strippable_state.dm"
#include "code\modules\tgui\states\zlevel.dm"
#include "code\modules\tgui\tgui_input\alert_input.dm"
+#include "code\modules\tgui\tgui_input\color_input.dm"
#include "code\modules\tgui\tgui_input\keycombo_input.dm"
#include "code\modules\tgui\tgui_input\list_input.dm"
#include "code\modules\tgui\tgui_input\number_input.dm"
diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
index af744b61793..c02ec546d68 100644
--- a/tgui/docs/component-reference.md
+++ b/tgui/docs/component-reference.md
@@ -31,6 +31,7 @@ Make sure to add new items to this list if you document new components.
- [`Icon.Stack`](#iconstack)
- [`ImageButton`](#imagebutton)
- [`ImageButton.Item`](#imagebuttonitem)
+ - [`ImageButtonTS`](#imagebuttonts)
- [`Input`](#input)
- [`Knob`](#knob)
- [`LabeledControls`](#labeledcontrols)
@@ -70,16 +71,16 @@ Event handlers are callbacks that you can attack to various element to
listen for browser events. Inferno supports 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.
+- 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.
+ 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 does not support the lowercase `onclick` event.
-Use the camel case `onClick` instead.
+ Use the camel case `onClick` instead.
## `tgui/components`
@@ -91,13 +92,13 @@ This component provides animations for numeric values.
- `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.
+ 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.
+ animate more complex things deeper in the DOM tree.
- Example: `(_, value) => `
### `BlockQuote`
@@ -133,9 +134,7 @@ 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
-
- {props => }
-
+{(props) => }
```
**Box Units**
@@ -166,10 +165,10 @@ Default font size (`1rem`) is equal to `12px`.
- `fontSize: number` - Font size.
- `fontFamily: string` - Font family.
- `lineHeight: number` - Directly affects the height of text lines.
-Useful for adjusting button height.
+ 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.
+ 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.
@@ -201,7 +200,7 @@ all available horizontal space.
- `#ffffff` - Hex format
- `rgba(255, 255, 255, 1)` - RGB format
- `purple` - Applies an atomic `color-` class to the element.
- See `styles/color-map.scss`.
+ See `styles/color-map.scss`.
- `backgroundColor: string` - Sets background color.
- `#ffffff` - Hex format
- `rgba(255, 255, 255, 1)` - RGB format
@@ -217,17 +216,17 @@ Buttons allow users to take actions, and make choices, with a single click.
- `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.
+ 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.
+ over the button.
- `tooltipPosition?: string` - Position of the tooltip. See [`Popper`](#Popper) for valid options.
- `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.
+ 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.
+ over the button.
- `children: any` - Content to render inside the button.
- `onClick: function` - Called when element is clicked.
@@ -261,11 +260,11 @@ commit, while escape cancels.
- See inherited props: [Box](#box)
- `fluid`: fill available horizontal space
- `onCommit: (e, value) => void`: function that is called after the user
-defocuses the input or presses enter
+ 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
+ blank when hitting enter or defocusing. If left undefined, will cancel the
+ change on a blank defocus/enter
### `ByondUi`
@@ -302,8 +301,8 @@ It supports a full set of `Box` properties for layout purposes.
- See inherited props: [Box](#box)
- `params: any` - An object with parameters, which are directly passed to
-the `winset` proc call. You can find a full reference of these parameters
-in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html).
+ the `winset` proc call. You can find a full reference of these parameters
+ in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html).
### `Collapsible`
@@ -350,7 +349,7 @@ Works like the good old `` element, but it's fancier.
- `vertical: boolean` - Divide content vertically.
- `hidden: boolean` - Divider can divide content without creating a dividing
-line.
+ line.
### `Dropdown`
@@ -362,7 +361,7 @@ and displays selected entry.
- See inherited props: [Box](#box)
- See inherited props: [Icon](#icon)
- `options: string[] | DropdownEntry[]` - An array of strings which will be displayed in the
-dropdown when open. See Dropdown.tsx for more adcanced usage with DropdownEntry
+ dropdown when open. See Dropdown.tsx for more adcanced usage with DropdownEntry
- `selected: any` - Currently selected entry
- `width: string` - Width of dropdown button and resulting menu; css width value
- `over: boolean` - Dropdown renders over instead of below
@@ -388,13 +387,9 @@ to the left, and certain elements to the right:
```jsx
-
- Button description
-
+ Button description
-
+
```
@@ -407,17 +402,17 @@ effectively places the last flex item to the very end of the flex container.
- See inherited props: [Box](#box)
- ~~`spacing: number`~~ - **Removed in tgui 4.3**,
-use [Stack](#stack) instead.
+ use [Stack](#stack) instead.
- `inline: boolean` - Makes flexbox container inline, with similar behavior
-to an `inline` property on a `Box`.
+ to an `inline` property on a `Box`.
- `direction: string` - This establishes the main-axis, thus defining the
-direction flex items are placed in the flex container.
+ 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.
+ 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.
@@ -428,22 +423,22 @@ You can change that and allow the items to wrap as needed with this property.
- `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.
+ 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-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
+ 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.
+ 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.
+ items (and the space to the edges) is equal.
- TBD (not all properties are supported in IE11).
### `Flex.Item`
@@ -452,24 +447,24 @@ when they overflow the line.
- 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.
+ However, the order property controls the order in which they appear in the
+ flex container.
- `grow: number | boolean` - 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.
+ 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 | boolean` - This defines the ability for a flex item to
-shrink if necessary. Inverse of `grow`.
+ shrink if necessary. Inverse of `grow`.
- `basis: number | string` - This defines the default size of an element
-before any flex-related calculations are done. Has to be a length
-(e.g. `20%`, `5rem`), an `auto` or `content` keyword.
+ before any flex-related calculations are done. Has to be a length
+ (e.g. `20%`, `5rem`), an `auto` or `content` keyword.
- **Important:** IE11 flex is buggy, and auto width/height calculations
- can sometimes end up in a circular dependency. This usually happens, when
- working with tables inside flex (they have wacky internal widths and such).
- Setting basis to `0` breaks the loop and fixes all of the problems.
+ can sometimes end up in a circular dependency. This usually happens, when
+ working with tables inside flex (they have wacky internal widths and such).
+ Setting basis to `0` breaks the loop and fixes all of the problems.
- `align: string` - This allows the default alignment (or the one specified by
-align-items) to be overridden for individual flex items. See: [Flex](#flex).
+ align-items) to be overridden for individual flex items. See: [Flex](#flex).
### `Grid`
@@ -485,14 +480,10 @@ Example:
```jsx
-
- Hello world!
-
+ Hello world!
-
- Hello world!
-
+ Hello world!
```
@@ -518,6 +509,7 @@ 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`
@@ -526,10 +518,10 @@ transform names with `-o` suffixes to FA Regular icons. For example:
- 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.
+ Fractional numbers are supported.
- `rotation: number` - Icon rotation, in degrees.
- `spin: boolean` - Whether an icon should be spinning. Good for load
-indicators.
+ indicators.
### `Icon.Stack`
@@ -558,26 +550,26 @@ Has support for base64, spritesheets and URLs.
- `asset: boolean` - Enables spritesheets support.
- `vertical: boolean` - Makes the button a inlined vertical rectangle.
- `color: string` - By default, the button is semi-transparent. You can change the overall colour,
-all colours are available in KitchenSink in the corresponding section.
+ all colours are available in KitchenSink in the corresponding section.
- `title: string` - The top text, it will always be bold, and also adds a divider between title and content.
-Disabled if there is no content.
+ Disabled if there is no content.
- `content: string|any` - All main content, usually text, but you can put in other components if you like.
-Makes the vertical button square if empty.
+ Makes the vertical button square if empty.
- `selected: boolean` - Makes button selected (green) if true.
- `disabled: boolean` - Makes button disabled (red) if true. Also disables onClick.
- `disabledContent: string` - If button disabled and disabledContent filled, it will be used instead content.
- `image: string` - Base64 image, simple. Disabled if asset support enabled.
- `imageUrl: string` - PNG image or other asset. Make sure you use existing simple asset! Example: imageUrl={'image.png'}
- `imageAsset: string` - If you have enabled asset support, write here which spritesheet to use.
-Example: imageAsset={'spritesheet_name64x64'}
+ Example: imageAsset={'spritesheet_name64x64'}
- `imageSize: string` - Sets the size of the image and adjusts the size of the button itself accordingly.
-Example: imageSize={'64px'}
+ Example: imageSize={'64px'}
- `tooltip: string` - A fancy, boxy tooltip, which appears when hovering
-over the button.
+ over the button.
- `tooltipPosition: string` - Position of the tooltip. See [`Popper`](#Popper) for valid options.
- `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.
+ be truncated with an ellipsis. Be careful however, because this prop breaks
+ the baseline alignment.
- `children: ImageButton.Item|any` - Items that are added to the right of the horizontal button.
- `onClick: function` - Called when element is clicked. Also enables hover effects.
@@ -589,25 +581,60 @@ Additional button/s for ImageButton.
> Available only in horizontal mode, if you try add it to vertical, you're gonna be disappointed
**Props:**
+
- See inherited props: [Box](#box)
- `color: string` - By default, the button is semi-transparent. You can change the overall colour,
-all colours are available in KitchenSink in the corresponding section.
+ all colours are available in KitchenSink in the corresponding section.
- `content: string|any` - All main content, usually text, but you can put in other components if you like.
-Try to not make it too long.
+ Try to not make it too long.
- `selected: boolean` - Makes button selected (green) if true.
- `disabled: boolean` - Makes button disabled (red) if true. Also disables onClick.
- `disabledContent: string` - If button disabled and disabledContent filled, it will be used instead content.
- `tooltip: string` - A fancy, boxy tooltip, which appears when hovering
-over the button.
+ over the button.
- `tooltipPosition: string` - Position of the tooltip. See [`Popper`](#Popper) for valid options.
- `icon: string` - Adds an icon to the button. By default it will be under content.
- `iconColor: string` - Paints icon if it used.
- `iconPosition: string` - You can make an icon above the content.
-Example: iconPosition={'top'}
+ Example: iconPosition={'top'}
- `iconSize: number` - Adjusts the size of the icon.
- `children: any` - Similar to content.
- `onClick: function` - Called when element is clicked.
+### `ImageButtonTS`
+
+A Robust button is specifically for sticking a picture in it.
+
+**Props:**
+
+- See inherited props: [Box](#box)
+- `asset: string[]` - Asset cache. Example: `asset={`assetname32x32, ${thing.key}`}`
+- `base64: string` - Classic way to put images. Example: `base64={thing.image}`
+- `buttons: any` - Special section for any component, or, content.
+ Quite a small area at the bottom of the image in non-fluid mode.
+ Has a style overrides, best to use [Button](#button) inside.
+- `buttonsAlt: boolean` - Enables alternative buttons layout.
+ With fluid, makes buttons like a humburger.
+ Without, moves it to top, and disables pointer-events.
+- `children: any` - Content under image.
+- `className: string` - Applies a CSS class to the element.
+- `color: string` - Color of the button, but without `transparent`; see [Button](#button)
+- `disabled: boolean` - Makes button disabled and dark red if true.
+ Also disables onClick & onRightClick.
+- `selected: boolean` - Makes button selected and green if true.
+- `dmFallback: any` - Optional. Adds a "stub" when loading DmIcon.
+- `dmIcon: string` - Parameter `icon` of component `DmIcon`.
+- `dmIconState: string` - Parameter `icon_state` of component `DmIcon`.
+ For proper work of `DmIcon` it is necessary that both parameters are filled in!
+- `fluid: boolean` - Changes the layout of the button, making it fill the entire horizontally available space.
+ Allows the use of `title`
+- `imageSize: number` - Parameter responsible for the size of the image, component and standard "stubs".
+ Measured in pixels. `imageSize={64}` = 64px.
+- `imageSrc: string` - Prop `src` of . Example: `imageSrc={resolveAsset(thing.image)}`
+- `onClick: (e) => void` - Called when button is clicked with LMB.
+- `onRightClick: (e) => void` - Called when button is clicked with RMB.
+- `title: string` - Requires `fluid` for work. Bold text with divider betwen content.
+
### `Input`
A basic text input, which allow users to enter text into a UI.
@@ -620,12 +647,12 @@ A basic text input, which allow users to enter text into a UI.
- See inherited props: [Box](#box)
- `value: string` - Value of an input.
- `placeholder: string` - Text placed into Input box when it's empty,
-otherwise nothing. Clears automatically when focused.
+ 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.
+ 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.
+ 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.
### `Knob`
@@ -641,30 +668,30 @@ Single click opens an input box to manually type in a number.
- `animated: boolean` - Animates the value if it was changed externally.
- `bipolar: boolean` - Knob can be bipolar or unipolar.
- `size: number` - Relative size of the knob. `1` is normal size, `2` is two
-times bigger. Fractional numbers are supported.
+ times bigger. Fractional numbers are supported.
- `color: string` - Color of the outer ring around the knob.
- `value: number` - Value itself, controls the position of the cursor.
- `unit: string` - Unit to display to the right of value.
- `minValue: number` - Lowest possible value.
- `maxValue: number` - Highest possible value.
- `fillValue: number` - If set, this value will be used to set the fill
-percentage of the outer ring independently of the main value.
+ percentage of the outer ring independently of the main value.
- `ranges: { color: [from, to] }` - Applies a `color` to the outer ring around
-the knob based on whether the value lands in the range between `from` and `to`.
-See an example of this prop in [ProgressBar](#progressbar).
+ the knob based on whether the value lands in the range between `from` and `to`.
+ See an example of this prop in [ProgressBar](#progressbar).
- `step: number` (default: 1) - Adjust value by this amount when
-dragging the input.
+ dragging the input.
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
-to travel to adjust value by one `step`.
+ to travel to adjust value by one `step`.
- `format: value => value` - Format value using this function before
-displaying it.
+ 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.
+ 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.
+ 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.
+ when you drag the input up and down, on release and on manual editing.
### `Popper`
@@ -702,9 +729,7 @@ column is labels, and second column is content.
```jsx
-
- Content
-
+ Content
```
@@ -713,13 +738,7 @@ to perform some sort of action), there is a way to do that:
```jsx
-
- Click me!
-
- )}>
+ Click me!}>
Content
@@ -746,9 +765,7 @@ Example:
```jsx
-
- Content
-
+ Content
```
@@ -794,22 +811,22 @@ to fine tune the value, or single click it to manually type a number.
- `minValue: number` - Lowest possible value.
- `maxValue: number` - Highest possible value.
- `step: number` (default: 1) - Adjust value by this amount when
-dragging the input.
+ dragging the input.
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
-to travel to adjust value by one `step`.
+ 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.
+ 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.
+ 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.
+ 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.
+ when you drag the input up and down, on release and on manual editing.
### `ProgressBar`
@@ -828,18 +845,19 @@ Usage of `ranges` prop:
average: [0.25, 0.5],
bad: [-Infinity, 0.25],
}}
- value={0.6} />
+ 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` (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`.
+ based on whether the value lands in the range between `from` and `to`.
- `color: string` - Color of the progress bar.
- `children: any` - Content to render inside the progress bar.
@@ -853,13 +871,14 @@ The RoundGauge component provides a visual representation of a single metric, as
value={tankPressure}
minValue={0}
maxValue={pressureLimit}
- alertAfter={pressureLimit * 0.70}
+ alertAfter={pressureLimit * 0.7}
ranges={{
- "good": [0, pressureLimit * 0.70],
- "average": [pressureLimit * 0.70, pressureLimit * 0.85],
- "bad": [pressureLimit * 0.85, pressureLimit],
+ 'good': [0, pressureLimit * 0.7],
+ 'average': [pressureLimit * 0.7, pressureLimit * 0.85],
+ 'bad': [pressureLimit * 0.85, pressureLimit],
}}
- format={formatPressure} />
+ format={formatPressure}
+/>
```
The alert on the gauge is optional, and will only be shown if the `alertAfter` prop is defined. When defined, the alert will begin to flash the respective color upon which the needle currently rests, as defined in the `ranges` prop.
@@ -886,22 +905,14 @@ clearly indicates hierarchy.
Section can also be titled to clearly define its purpose.
```jsx
-
- Here you can order supply crates.
-
+Here you can order supply crates.
```
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
-
- Send shuttle
-
- )}>
+Send shuttle}>
Here you can order supply crates.
```
@@ -909,7 +920,7 @@ If you want to have a button on the right side of an section title
- 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.
+ means deeper level of nesting. Must be an integer number.
- `buttons: any` - Buttons to render aside the section title.
- `fill: boolean` - If true, fills all available vertical space.
- `fitted: boolean` - If true, removes all section padding.
@@ -933,23 +944,23 @@ Single click opens an input box to manually type in a number.
- `minValue: number` - Lowest possible value.
- `maxValue: number` - Highest possible value.
- `fillValue: number` - If set, this value will be used to set the fill
-percentage of the progress bar filler independently of the main value.
+ percentage of the progress bar filler independently of the main value.
- `ranges: { color: [from, to] }` - Applies a `color` to the slider
-based on whether the value lands in the range between `from` and `to`.
-See an example of this prop in [ProgressBar](#progressbar).
+ based on whether the value lands in the range between `from` and `to`.
+ See an example of this prop in [ProgressBar](#progressbar).
- `step: number` (default: 1) - Adjust value by this amount when
-dragging the input.
+ dragging the input.
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
-to travel to adjust value by one `step`.
+ to travel to adjust value by one `step`.
- `format: value => value` - Format value using this function before
-displaying it.
+ 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.
+ 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.
+ 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.
+ when you drag the input up and down, on release and on manual editing.
### `Stack`
@@ -965,13 +976,9 @@ Stacks can be vertical by adding a `vertical` property.
```jsx
-
- Button description
-
+ Button description
-
+
```
@@ -986,9 +993,7 @@ Make sure to use the `fill` property.
-
- Sidebar
-
+ Sidebar
@@ -998,9 +1003,7 @@ Make sure to use the `fill` property.
-
- Bottom pane
-
+ Bottom pane
@@ -1032,9 +1035,7 @@ Example:
```jsx
-
- Hello world!
-
+ Hello world!
Label
@@ -1063,7 +1064,7 @@ A straight forward mapping to `
` element.
- See inherited props: [Box](#box)
- `collapsing: boolean` - Collapses table cell to the smallest possible size,
-and stops any text inside from wrapping.
+ and stops any text inside from wrapping.
### `Tabs`
@@ -1099,9 +1100,7 @@ Tabs also support a vertical configuration. This is usually paired with a
```jsx
-
- ...
-
+ ...
Tab content.
@@ -1113,7 +1112,7 @@ Tabs also support a vertical configuration. This is usually paired with a
- See inherited props: [Box](#box)
- `vertical: boolean` - Use a vertical configuration, where tabs will be
-stacked vertically.
+ stacked vertically.
- `children: Tab[]` - This component only accepts tabs as its children.
### `Tabs.Tab`
@@ -1125,8 +1124,8 @@ a lot of `Button` props.
- See inherited props: [Button](#button)
- `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.
+ change) or by adding a white indicator to the selected tab.
+ Intended for usage on interfaces where tab color has relevance.
- `icon: string` - Tab icon.
- `children: any` - Tab text.
- `onClick: function` - Called when element is clicked.
@@ -1143,9 +1142,7 @@ Usage:
```jsx
-
- Sample text.
-
+ Sample text.
```
@@ -1153,7 +1150,7 @@ Usage:
- `position?: string` - Tooltip position. See [`Popper`](#Popper) for valid options. Defaults to "auto".
- `content: string` - Content of the tooltip. Must be a plain string.
-Fragments or other elements are **not** supported.
+ Fragments or other elements are **not** supported.
## `tgui/layouts`
@@ -1167,9 +1164,7 @@ Example:
```jsx
-
- Hello, world!
-
+ Hello, world!
```
@@ -1184,9 +1179,9 @@ Example:
- `height: number` - Window height.
- `noClose: boolean` - Controls the ability to close the window.
- `children: any` - Child elements, which are rendered directly inside the
-window. If you use a [Dimmer](#dimmer) or [Modal](#modal) in your UI,
-they should be put as direct childs of a Window, otherwise you should be
-putting your content into [Window.Content](#windowcontent).
+ window. If you use a [Dimmer](#dimmer) or [Modal](#modal) in your UI,
+ they should be put as direct childs of a Window, otherwise you should be
+ putting your content into [Window.Content](#windowcontent).
### `Window.Content`
diff --git a/tgui/packages/common/color.ts b/tgui/packages/common/color.ts
new file mode 100644
index 00000000000..9022cccfdc2
--- /dev/null
+++ b/tgui/packages/common/color.ts
@@ -0,0 +1,359 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+const EPSILON = 0.0001;
+
+export class Color {
+ r: number;
+ g: number;
+ b: number;
+ a: number;
+
+ constructor(r = 0, g = 0, b = 0, a = 1) {
+ this.r = r;
+ this.g = g;
+ this.b = b;
+ this.a = a;
+ }
+
+ toString() {
+ return `rgba(${this.r | 0}, ${this.g | 0}, ${this.b | 0}, ${this.a | 0})`;
+ }
+
+ /**
+ * Creates a color from the CSS hex color notation.
+ */
+ static fromHex(hex: string): Color {
+ return new Color(
+ parseInt(hex.substr(1, 2), 16),
+ parseInt(hex.substr(3, 2), 16),
+ parseInt(hex.substr(5, 2), 16)
+ );
+ }
+
+ /**
+ * Linear interpolation of two colors.
+ */
+ static lerp(c1: Color, c2: Color, n: number): Color {
+ return new Color(
+ (c2.r - c1.r) * n + c1.r,
+ (c2.g - c1.g) * n + c1.g,
+ (c2.b - c1.b) * n + c1.b,
+ (c2.a - c1.a) * n + c1.a
+ );
+ }
+
+ /**
+ * Loops up the color in the provided list of colors
+ * with linear interpolation.
+ */
+ static lookup(value: number, colors: Color[] = []): Color {
+ const len = colors.length;
+ if (len < 2) {
+ throw new Error('Needs at least two colors!');
+ }
+ const scaled = value * (len - 1);
+ if (value < EPSILON) {
+ return colors[0];
+ }
+ if (value >= 1 - EPSILON) {
+ return colors[len - 1];
+ }
+ const ratio = scaled % 1;
+ const index = scaled | 0;
+ return Color.lerp(colors[index], colors[index + 1], ratio);
+ }
+}
+
+/*
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const round = (
+ number: number,
+ digits = 0,
+ base = Math.pow(10, digits)
+): number => {
+ return Math.round(base * number) / base;
+};
+
+export interface RgbColor {
+ r: number;
+ g: number;
+ b: number;
+}
+
+export interface RgbaColor extends RgbColor {
+ a: number;
+}
+
+export interface HslColor {
+ h: number;
+ s: number;
+ l: number;
+}
+
+export interface HslaColor extends HslColor {
+ a: number;
+}
+
+export interface HsvColor {
+ h: number;
+ s: number;
+ v: number;
+}
+
+export interface HsvaColor extends HsvColor {
+ a: number;
+}
+
+export type ObjectColor =
+ | RgbColor
+ | HslColor
+ | HsvColor
+ | RgbaColor
+ | HslaColor
+ | HsvaColor;
+
+export type AnyColor = string | ObjectColor;
+
+/**
+ * Valid CSS units.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+ */
+const angleUnits: Record = {
+ grad: 360 / 400,
+ turn: 360,
+ rad: 360 / (Math.PI * 2),
+};
+
+export const hexToHsva = (hex: string): HsvaColor => rgbaToHsva(hexToRgba(hex));
+
+export const hexToRgba = (hex: string): RgbaColor => {
+ if (hex[0] === '#') hex = hex.substring(1);
+
+ if (hex.length < 6) {
+ return {
+ r: parseInt(hex[0] + hex[0], 16),
+ g: parseInt(hex[1] + hex[1], 16),
+ b: parseInt(hex[2] + hex[2], 16),
+ a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1,
+ };
+ }
+
+ return {
+ r: parseInt(hex.substring(0, 2), 16),
+ g: parseInt(hex.substring(2, 4), 16),
+ b: parseInt(hex.substring(4, 6), 16),
+ a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1,
+ };
+};
+
+export const parseHue = (value: string, unit = 'deg'): number => {
+ return Number(value) * (angleUnits[unit] || 1);
+};
+
+export const hslaStringToHsva = (hslString: string): HsvaColor => {
+ const matcher =
+ /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+ const match = matcher.exec(hslString);
+
+ if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+ return hslaToHsva({
+ h: parseHue(match[1], match[2]),
+ s: Number(match[3]),
+ l: Number(match[4]),
+ a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+ });
+};
+
+export const hslStringToHsva = hslaStringToHsva;
+
+export const hslaToHsva = ({ h, s, l, a }: HslaColor): HsvaColor => {
+ s *= (l < 50 ? l : 100 - l) / 100;
+
+ return {
+ h: h,
+ s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
+ v: l + s,
+ a,
+ };
+};
+
+export const hsvaToHex = (hsva: HsvaColor): string =>
+ rgbaToHex(hsvaToRgba(hsva));
+
+export const hsvaToHsla = ({ h, s, v, a }: HsvaColor): HslaColor => {
+ const hh = ((200 - s) * v) / 100;
+
+ return {
+ h: round(h),
+ s: round(
+ hh > 0 && hh < 200
+ ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100
+ : 0
+ ),
+ l: round(hh / 2),
+ a: round(a, 2),
+ };
+};
+
+export const hsvaToHslString = (hsva: HsvaColor): string => {
+ const { h, s, l } = hsvaToHsla(hsva);
+ return `hsl(${h}, ${s}%, ${l}%)`;
+};
+
+export const hsvaToHsvString = (hsva: HsvaColor): string => {
+ const { h, s, v } = roundHsva(hsva);
+ return `hsv(${h}, ${s}%, ${v}%)`;
+};
+
+export const hsvaToHsvaString = (hsva: HsvaColor): string => {
+ const { h, s, v, a } = roundHsva(hsva);
+ return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+};
+
+export const hsvaToHslaString = (hsva: HsvaColor): string => {
+ const { h, s, l, a } = hsvaToHsla(hsva);
+ return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+};
+
+export const hsvaToRgba = ({ h, s, v, a }: HsvaColor): RgbaColor => {
+ h = (h / 360) * 6;
+ s = s / 100;
+ v = v / 100;
+
+ const hh = Math.floor(h),
+ b = v * (1 - s),
+ c = v * (1 - (h - hh) * s),
+ d = v * (1 - (1 - h + hh) * s),
+ module = hh % 6;
+
+ return {
+ r: [v, c, b, b, d, v][module] * 255,
+ g: [d, v, v, c, b, b][module] * 255,
+ b: [b, b, d, v, v, c][module] * 255,
+ a: round(a, 2),
+ };
+};
+
+export const hsvaToRgbString = (hsva: HsvaColor): string => {
+ const { r, g, b } = hsvaToRgba(hsva);
+ return `rgb(${round(r)}, ${round(g)}, ${round(b)})`;
+};
+
+export const hsvaToRgbaString = (hsva: HsvaColor): string => {
+ const { r, g, b, a } = hsvaToRgba(hsva);
+ return `rgba(${round(r)}, ${round(g)}, ${round(b)}, ${round(a, 2)})`;
+};
+
+export const hsvaStringToHsva = (hsvString: string): HsvaColor => {
+ const matcher =
+ /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+ const match = matcher.exec(hsvString);
+
+ if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+ return roundHsva({
+ h: parseHue(match[1], match[2]),
+ s: Number(match[3]),
+ v: Number(match[4]),
+ a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+ });
+};
+
+export const hsvStringToHsva = hsvaStringToHsva;
+
+export const rgbaStringToHsva = (rgbaString: string): HsvaColor => {
+ const matcher =
+ /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+ const match = matcher.exec(rgbaString);
+
+ if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+ return rgbaToHsva({
+ r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
+ g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
+ b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
+ a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),
+ });
+};
+
+export const rgbStringToHsva = rgbaStringToHsva;
+
+const format = (number: number) => {
+ const hex = number.toString(16);
+ return hex.length < 2 ? '0' + hex : hex;
+};
+
+export const rgbaToHex = ({ r, g, b, a }: RgbaColor): string => {
+ const alphaHex = a < 1 ? format(round(a * 255)) : '';
+ return (
+ '#' + format(round(r)) + format(round(g)) + format(round(b)) + alphaHex
+ );
+};
+
+export const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => {
+ const max = Math.max(r, g, b);
+ const delta = max - Math.min(r, g, b);
+
+ // prettier-ignore
+ const hh = delta
+ ? max === r
+ ? (g - b) / delta
+ : max === g
+ ? 2 + (b - r) / delta
+ : 4 + (r - g) / delta
+ : 0;
+
+ return {
+ h: 60 * (hh < 0 ? hh + 6 : hh),
+ s: max ? (delta / max) * 100 : 0,
+ v: (max / 255) * 100,
+ a,
+ };
+};
+
+export const roundHsva = (hsva: HsvaColor): HsvaColor => ({
+ h: round(hsva.h),
+ s: round(hsva.s),
+ v: round(hsva.v),
+ a: round(hsva.a, 2),
+});
+
+export const rgbaToRgb = ({ r, g, b }: RgbaColor): RgbColor => ({ r, g, b });
+
+export const hslaToHsl = ({ h, s, l }: HslaColor): HslColor => ({ h, s, l });
+
+export const hsvaToHsv = (hsva: HsvaColor): HsvColor => {
+ const { h, s, v } = roundHsva(hsva);
+ return { h, s, v };
+};
+
+const hexMatcher = /^#?([0-9A-F]{3,8})$/i;
+
+export const validHex = (value: string, alpha?: boolean): boolean => {
+ const match = hexMatcher.exec(value);
+ const length = match ? match[1].length : 0;
+
+ return (
+ length === 3 || // '#rgb' format
+ length === 6 || // '#rrggbb' format
+ (!!alpha && length === 4) || // '#rgba' format
+ (!!alpha && length === 8) // '#rrggbbaa' format
+ );
+};
diff --git a/tgui/packages/tgui/components/Interactive.tsx b/tgui/packages/tgui/components/Interactive.tsx
new file mode 100644
index 00000000000..f0a0dfe1389
--- /dev/null
+++ b/tgui/packages/tgui/components/Interactive.tsx
@@ -0,0 +1,153 @@
+/**
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { clamp } from 'common/math';
+import { Component, InfernoNode, createRef, RefObject } from 'inferno';
+
+export interface Interaction {
+ left: number;
+ top: number;
+}
+
+// Finds the proper window object to fix iframe embedding issues
+const getParentWindow = (node?: HTMLDivElement | null): Window => {
+ return (node && node.ownerDocument.defaultView) || self;
+};
+
+// Returns a relative position of the pointer inside the node's bounding box
+const getRelativePosition = (
+ node: HTMLDivElement,
+ event: MouseEvent
+): Interaction => {
+ const rect = node.getBoundingClientRect();
+ const pointer = event as MouseEvent;
+ return {
+ left: clamp(
+ (pointer.pageX - (rect.left + getParentWindow(node).pageXOffset)) /
+ rect.width,
+ 0,
+ 1
+ ),
+ top: clamp(
+ (pointer.pageY - (rect.top + getParentWindow(node).pageYOffset)) /
+ rect.height,
+ 0,
+ 1
+ ),
+ };
+};
+
+export interface InteractiveProps {
+ onMove: (interaction: Interaction) => void;
+ onKey: (offset: Interaction) => void;
+ children: InfernoNode[];
+ style?: any;
+}
+
+export class Interactive extends Component {
+ containerRef: RefObject;
+ props: InteractiveProps;
+
+ constructor(props: InteractiveProps) {
+ super();
+ this.props = props;
+ this.containerRef = createRef();
+ }
+
+ handleMoveStart = (event: MouseEvent) => {
+ const el = this.containerRef?.current;
+ if (!el) return;
+
+ // Prevent text selection
+ event.preventDefault();
+ el.focus();
+ this.props.onMove(getRelativePosition(el, event));
+ this.toggleDocumentEvents(true);
+ };
+
+ handleMove = (event: MouseEvent) => {
+ // Prevent text selection
+ event.preventDefault();
+
+ // If user moves the pointer outside of the window or iframe bounds and release it there,
+ // `mouseup`/`touchend` won't be fired. In order to stop the picker from following the cursor
+ // after the user has moved the mouse/finger back to the document, we check `event.buttons`
+ // and `event.touches`. It allows us to detect that the user is just moving his pointer
+ // without pressing it down
+ const isDown = event.buttons > 0;
+
+ if (isDown && this.containerRef?.current) {
+ this.props.onMove(getRelativePosition(this.containerRef.current, event));
+ } else {
+ this.toggleDocumentEvents(false);
+ }
+ };
+
+ handleMoveEnd = () => {
+ this.toggleDocumentEvents(false);
+ };
+
+ handleKeyDown = (event: KeyboardEvent) => {
+ const keyCode = event.which || event.keyCode;
+
+ // Ignore all keys except arrow ones
+ if (keyCode < 37 || keyCode > 40) return;
+ // Do not scroll page by arrow keys when document is focused on the element
+ event.preventDefault();
+ // Send relative offset to the parent component.
+ // We use codes (37←, 38↑, 39→, 40↓) instead of keys ('ArrowRight', 'ArrowDown', etc)
+ // to reduce the size of the library
+ this.props.onKey({
+ left: keyCode === 39 ? 0.05 : keyCode === 37 ? -0.05 : 0,
+ top: keyCode === 40 ? 0.05 : keyCode === 38 ? -0.05 : 0,
+ });
+ };
+
+ toggleDocumentEvents(state?: boolean) {
+ const el = this.containerRef?.current;
+ const parentWindow = getParentWindow(el);
+
+ // Add or remove additional pointer event listeners
+ const toggleEvent = state
+ ? parentWindow.addEventListener
+ : parentWindow.removeEventListener;
+ toggleEvent('mousemove', this.handleMove);
+ toggleEvent('mouseup', this.handleMoveEnd);
+ }
+
+ componentDidMount() {
+ this.toggleDocumentEvents(true);
+ }
+
+ componentWillUnmount() {
+ this.toggleDocumentEvents(false);
+ }
+
+ render() {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
diff --git a/tgui/packages/tgui/components/Pointer.tsx b/tgui/packages/tgui/components/Pointer.tsx
new file mode 100644
index 00000000000..409972a7dfc
--- /dev/null
+++ b/tgui/packages/tgui/components/Pointer.tsx
@@ -0,0 +1,46 @@
+/**
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { classes } from 'common/react';
+import { InfernoNode } from 'inferno';
+
+interface PointerProps {
+ className?: string;
+ top?: number;
+ left: number;
+ color: string;
+}
+
+export const Pointer = ({
+ className,
+ color,
+ left,
+ top = 0.5,
+}: PointerProps): InfernoNode => {
+ const nodeClassName = classes(['react-colorful__pointer', className]);
+
+ const style = {
+ top: `${top * 100}%`,
+ left: `${left * 100}%`,
+ };
+
+ return (
+
"
- if(ticked)
- for(var/datum/gear_tweak/tweak in ticked.gear_tweaks)
- dat += "