From 9dcef290ec296af9f2d59b51dc05b85ffd2769d9 Mon Sep 17 00:00:00 2001 From: Watermelon914 <37270891+Watermelon914@users.noreply.github.com> Date: Thu, 26 Oct 2023 05:42:32 +0100 Subject: [PATCH] Reworks the styling of the announcements and expands major announcements to also be colourable. (#79236) ## About The Pull Request The styling of the announcements has been reworked and major announcements can now be coloured too. Syndicate and hostile announcements have been given a red/orange. Wizard federation now has a purple colour. Admins can set what colour they want their announcements to be and they can also set the announcement subheader now. The colour scheme for darkmode has been changed slightly and the colour scheme for lightmode has been completely revamped. Main text body of the announcements are no longer striped to allow for easier reading. Rolled back the changes to deadchat notifications, they're now back to being normal text. Shuttle-related announcements now have an orange background
Light mode pictures ![image](https://github.com/tgstation/tgstation/assets/37270891/30f56511-5c98-48ae-9f72-605a813b3103) ![image](https://github.com/tgstation/tgstation/assets/37270891/18741f85-834d-40d6-a7d3-b179760cebfa) ![image](https://github.com/tgstation/tgstation/assets/37270891/e6df8e19-8bb7-4aa4-9e44-f5d6d78563e0) ![image](https://github.com/tgstation/tgstation/assets/37270891/d791f0c5-bcc9-4f39-8c49-e6552e3dbfdd)
Dark mode pictures ![image](https://github.com/tgstation/tgstation/assets/37270891/5c383dd4-b435-4a2e-8e28-b78e73c4da96) ![image](https://github.com/tgstation/tgstation/assets/37270891/46dd1d1a-22b4-4613-85d3-aeb5be26b3b2) ![image](https://github.com/tgstation/tgstation/assets/37270891/e3b28b75-42b7-467a-b23d-748b12e3c093) ![image](https://github.com/tgstation/tgstation/assets/37270891/6a606798-42ac-4c1e-9246-9ff8f478239d)
## Why It's Good For The Game The colours for light mode were hard to read due to bad colour combinations, which caused the foreground and background to have too low contrast. Additionally, I felt like the styling was less immersive overall and that there didn't need to be so much noise over the main text body. ## Changelog :cl: add: Reworked the colour schemes for the minor and major announcements as well as their layout del: Rolled back changes to deadchat notifications admin: Admins can now select the colour of their announcements as well as the subheader when creating a command report. /:cl: --------- Co-authored-by: Watermelon914 <3052169-Watermelon914@users.noreply.gitlab.com> --- code/__HELPERS/priority_announce.dm | 34 ++-- code/controllers/subsystem/communications.dm | 2 +- code/modules/admin/verbs/commandreport.dm | 22 ++- .../nukeop/equipment/nuclear_challenge.dm | 4 +- .../antagonists/pirate/pirate_event.dm | 6 +- .../antagonists/pirate/pirate_gangs.dm | 6 + .../wizard/grand_ritual/finales/all_access.dm | 2 +- .../wizard/grand_ritual/finales/armageddon.dm | 2 +- code/modules/events/shuttle_insurance.dm | 6 +- code/modules/mob/mob_helpers.dm | 2 +- code/modules/shuttle/emergency.dm | 10 +- .../tgui-panel/styles/tgchat/chat-dark.scss | 164 ++++++++++++----- .../tgui-panel/styles/tgchat/chat-light.scss | 166 ++++++++++++++---- .../tgui/interfaces/CommandReport.tsx | 55 +++++- 14 files changed, 370 insertions(+), 111 deletions(-) diff --git a/code/__HELPERS/priority_announce.dm b/code/__HELPERS/priority_announce.dm index 2b5ee76f02e..96902875fef 100644 --- a/code/__HELPERS/priority_announce.dm +++ b/code/__HELPERS/priority_announce.dm @@ -2,14 +2,19 @@ // these four are just text spans that furnish the TEXT itself with the appropriate CSS classes #define MAJOR_ANNOUNCEMENT_TITLE(string) ("" + string + "") +#define SUBHEADER_ANNOUNCEMENT_TITLE(string) ("" + string + "") #define MAJOR_ANNOUNCEMENT_TEXT(string) ("" + string + "") #define MINOR_ANNOUNCEMENT_TITLE(string) ("" + string + "") #define MINOR_ANNOUNCEMENT_TEXT(string) ("" + string + "") +#define ANNOUNCEMENT_HEADER(string) ("" + string + "") + // these two are the ones that actually give the striped background #define CHAT_ALERT_DEFAULT_SPAN(string) ("
" + string + "
") #define CHAT_ALERT_COLORED_SPAN(color, string) ("
" + string + "
") +#define ANNOUNCEMENT_COLORS list("default", "green", "blue", "pink", "yellow", "orange", "red", "purple") + /** * Make a big red text announcement to * @@ -32,7 +37,7 @@ * * encode_title - if TRUE, the title will be HTML encoded * * encode_text - if TRUE, the text will be HTML encoded */ -/proc/priority_announce(text, title = "", sound, type, sender_override, has_important_message = FALSE, list/mob/players, encode_title = TRUE, encode_text = TRUE) +/proc/priority_announce(text, title = "", sound, type, sender_override, has_important_message = FALSE, list/mob/players, encode_title = TRUE, encode_text = TRUE, color_override) if(!text) return @@ -55,7 +60,7 @@ if(ANNOUNCEMENT_TYPE_PRIORITY) header = MAJOR_ANNOUNCEMENT_TITLE("Priority Announcement") if(length(title) > 0) - header += MINOR_ANNOUNCEMENT_TITLE(title) + header += SUBHEADER_ANNOUNCEMENT_TITLE(title) if(ANNOUNCEMENT_TYPE_CAPTAIN) header = MAJOR_ANNOUNCEMENT_TITLE("Captain's Announcement") GLOB.news_network.submit_article(text, "Captain's Announcement", "Station Announcements", null) @@ -64,15 +69,19 @@ else header += generate_unique_announcement_header(title, sender_override) - announcement_strings += header + announcement_strings += ANNOUNCEMENT_HEADER(header) ///If the announcer overrides alert messages, use that message. if(SSstation.announcer.custom_alert_message && !has_important_message) - announcement_strings += SSstation.announcer.custom_alert_message + announcement_strings += MAJOR_ANNOUNCEMENT_TEXT(SSstation.announcer.custom_alert_message) else announcement_strings += MAJOR_ANNOUNCEMENT_TEXT(text) - var/finalized_announcement = CHAT_ALERT_DEFAULT_SPAN(jointext(announcement_strings, "
")) + var/finalized_announcement + if(color_override) + finalized_announcement = CHAT_ALERT_COLORED_SPAN(color_override, jointext(announcement_strings, "")) + else + finalized_announcement = CHAT_ALERT_DEFAULT_SPAN(jointext(announcement_strings, "")) dispatch_announcement_to_players(finalized_announcement, players, sound) @@ -118,14 +127,15 @@ message = html_encode(message) var/list/minor_announcement_strings = list() - minor_announcement_strings += MINOR_ANNOUNCEMENT_TITLE(title) + if(title != null && title != "") + minor_announcement_strings += ANNOUNCEMENT_HEADER(MINOR_ANNOUNCEMENT_TITLE(title)) minor_announcement_strings += MINOR_ANNOUNCEMENT_TEXT(message) var/finalized_announcement if(color_override) - finalized_announcement = CHAT_ALERT_COLORED_SPAN(color_override, jointext(minor_announcement_strings, "
")) + finalized_announcement = CHAT_ALERT_COLORED_SPAN(color_override, jointext(minor_announcement_strings, "")) else - finalized_announcement = CHAT_ALERT_DEFAULT_SPAN(jointext(minor_announcement_strings, "
")) + finalized_announcement = CHAT_ALERT_DEFAULT_SPAN(jointext(minor_announcement_strings, "")) var/custom_sound = sound_override || (alert ? 'sound/misc/notice1.ogg' : 'sound/misc/notice2.ogg') dispatch_announcement_to_players(finalized_announcement, players, custom_sound, should_play_sound) @@ -148,10 +158,10 @@ message = selected_level.lowering_to_announcement var/list/level_announcement_strings = list() - level_announcement_strings += MINOR_ANNOUNCEMENT_TITLE(title) + level_announcement_strings += ANNOUNCEMENT_HEADER(MINOR_ANNOUNCEMENT_TITLE(title)) level_announcement_strings += MINOR_ANNOUNCEMENT_TEXT(message) - var/finalized_announcement = CHAT_ALERT_COLORED_SPAN(current_level_color, jointext(level_announcement_strings, "
")) + var/finalized_announcement = CHAT_ALERT_COLORED_SPAN(current_level_color, jointext(level_announcement_strings, "")) dispatch_announcement_to_players(finalized_announcement, GLOB.player_list, current_level_sound) @@ -165,9 +175,9 @@ returnable_strings += MAJOR_ANNOUNCEMENT_TITLE(sender_override) if(length(title) > 0) - returnable_strings += MINOR_ANNOUNCEMENT_TITLE(title) + returnable_strings += SUBHEADER_ANNOUNCEMENT_TITLE(title) - return jointext(returnable_strings, "
") + return jointext(returnable_strings, "") /// Proc that just dispatches the announcement to our applicable audience. Only the announcement is a mandatory arg. /proc/dispatch_announcement_to_players(announcement, list/players, sound_override = null, should_play_sound = TRUE) diff --git a/code/controllers/subsystem/communications.dm b/code/controllers/subsystem/communications.dm index d34a066e859..5d2d5a2e7f4 100644 --- a/code/controllers/subsystem/communications.dm +++ b/code/controllers/subsystem/communications.dm @@ -38,7 +38,7 @@ SUBSYSTEM_DEF(communications) else var/list/message_data = user.treat_message(input) if(syndicate) - priority_announce(html_decode(message_data["message"]), null, 'sound/misc/announce_syndi.ogg', ANNOUNCEMENT_TYPE_SYNDICATE, has_important_message = TRUE, players = players) + priority_announce(html_decode(message_data["message"]), null, 'sound/misc/announce_syndi.ogg', ANNOUNCEMENT_TYPE_SYNDICATE, has_important_message = TRUE, players = players, color_override = "red") else priority_announce(html_decode(message_data["message"]), null, 'sound/misc/announce.ogg', ANNOUNCEMENT_TYPE_CAPTAIN, has_important_message = TRUE, players = players) COOLDOWN_START(src, nonsilicon_message_cooldown, COMMUNICATION_COOLDOWN) diff --git a/code/modules/admin/verbs/commandreport.dm b/code/modules/admin/verbs/commandreport.dm index badf3babb66..f64dabd34d3 100644 --- a/code/modules/admin/verbs/commandreport.dm +++ b/code/modules/admin/verbs/commandreport.dm @@ -50,6 +50,10 @@ var/print_report = TRUE /// The sound that's going to accompany our message. var/played_sound = DEFAULT_ANNOUNCEMENT_SOUND + /// The colour of the announcement when sent + var/announcement_color = "default" + /// The subheader to include when sending the announcement. Keep blank to not include a subheader + var/subheader = "" /// A static list of preset names that can be chosen. var/list/preset_names = list(CENTCOM_PRESET, SYNDICATE_PRESET, WIZARD_PRESET, CUSTOM_PRESET) @@ -79,6 +83,8 @@ data["announce_contents"] = announce_contents data["print_report"] = print_report data["played_sound"] = played_sound + data["announcement_color"] = announcement_color + data["subheader"] = subheader return data @@ -86,6 +92,7 @@ var/list/data = list() data["command_name_presets"] = preset_names data["announcer_sounds"] = list(DEFAULT_ANNOUNCEMENT_SOUND) + GLOB.announcer_keys + data["announcement_colors"] = ANNOUNCEMENT_COLORS return data @@ -108,6 +115,13 @@ announce_contents = !announce_contents if("toggle_printing") print_report = !print_report + if("update_announcement_color") + var/colors = ANNOUNCEMENT_COLORS + var/chosen_color = params["updated_announcement_color"] + if(chosen_color in colors) + announcement_color = chosen_color + if("set_subheader") + subheader = params["new_subheader"] if("submit_report") if(!command_name) to_chat(ui_user, span_danger("You can't send a report with no command name.")) @@ -136,7 +150,13 @@ report_sound = SSstation.announcer.get_rand_report_sound() if(announce_contents) - priority_announce(command_report_content, null, report_sound, has_important_message = TRUE) + var/chosen_color = announcement_color + if(chosen_color == "default") + if(command_name == SYNDICATE_PRESET) + chosen_color = "red" + else if(command_name == WIZARD_PRESET) + chosen_color = "purple" + priority_announce(command_report_content, subheader == ""? null : subheader, report_sound, has_important_message = TRUE, color_override = chosen_color) if(!announce_contents || print_report) print_command_report(command_report_content, "[announce_contents ? "" : "Classified "][command_name] Update", !announce_contents) diff --git a/code/modules/antagonists/nukeop/equipment/nuclear_challenge.dm b/code/modules/antagonists/nukeop/equipment/nuclear_challenge.dm index 0da863d1f49..9bff5c06b24 100644 --- a/code/modules/antagonists/nukeop/equipment/nuclear_challenge.dm +++ b/code/modules/antagonists/nukeop/equipment/nuclear_challenge.dm @@ -73,7 +73,7 @@ GLOBAL_LIST_EMPTY(jam_on_wardec) war_was_declared(memo = war_declaration) /obj/item/nuclear_challenge/proc/war_was_declared(mob/living/user, memo) - priority_announce(memo, title = "Declaration of War", sound = 'sound/machines/alarm.ogg', has_important_message = TRUE) + priority_announce(memo, title = "Declaration of War", sound = 'sound/machines/alarm.ogg', has_important_message = TRUE, sender_override = "Nuclear Operative Outpost", color_override = "red") if(user) to_chat(user, "You've attracted the attention of powerful forces within the syndicate. \ A bonus bundle of telecrystals has been granted to your team. Great things await you if you complete the mission.") @@ -168,7 +168,7 @@ GLOBAL_LIST_EMPTY(jam_on_wardec) return #endif - priority_announce(memo, title = "Declaration of War", sound = 'sound/machines/alarm.ogg', has_important_message = TRUE) + priority_announce(memo, title = "Declaration of War", sound = 'sound/machines/alarm.ogg', has_important_message = TRUE, sender_override = "Nuclear Operative Outpost", color_override = "red") /obj/item/nuclear_challenge/literally_just_does_the_message/distribute_tc() return diff --git a/code/modules/antagonists/pirate/pirate_event.dm b/code/modules/antagonists/pirate/pirate_event.dm index 60be511b6ca..2a2162fda68 100644 --- a/code/modules/antagonists/pirate/pirate_event.dm +++ b/code/modules/antagonists/pirate/pirate_event.dm @@ -42,7 +42,7 @@ /proc/pirates_answered(datum/comm_message/threat, datum/pirate_gang/chosen_gang, payoff, initial_send_time) if(world.time > initial_send_time + RESPONSE_MAX_TIME) - priority_announce(chosen_gang.response_too_late, sender_override = chosen_gang.ship_name) + priority_announce(chosen_gang.response_too_late, sender_override = chosen_gang.ship_name, color_override = chosen_gang.announcement_color) return if(!threat?.answered) return @@ -51,9 +51,9 @@ if(plundered_account) if(plundered_account.adjust_money(-payoff)) chosen_gang.paid_off = TRUE - priority_announce(chosen_gang.response_received, sender_override = chosen_gang.ship_name) + priority_announce(chosen_gang.response_received, sender_override = chosen_gang.ship_name, color_override = chosen_gang.announcement_color) else - priority_announce(chosen_gang.response_not_enough, sender_override = chosen_gang.ship_name) + priority_announce(chosen_gang.response_not_enough, sender_override = chosen_gang.ship_name, color_override = chosen_gang.announcement_color) /proc/spawn_pirates(datum/comm_message/threat, datum/pirate_gang/chosen_gang) if(chosen_gang.paid_off) diff --git a/code/modules/antagonists/pirate/pirate_gangs.dm b/code/modules/antagonists/pirate/pirate_gangs.dm index 8011150f950..d048a068116 100644 --- a/code/modules/antagonists/pirate/pirate_gangs.dm +++ b/code/modules/antagonists/pirate/pirate_gangs.dm @@ -47,6 +47,8 @@ GLOBAL_LIST_INIT(heavy_pirate_gangs, init_pirate_gangs(is_heavy = TRUE)) /// Have the pirates been paid off? var/paid_off = FALSE + /// The colour of their announcements when sent to players + var/announcement_color = "red" /datum/pirate_gang/New() . = ..() @@ -133,6 +135,7 @@ GLOBAL_LIST_INIT(heavy_pirate_gangs, init_pirate_gangs(is_heavy = TRUE)) response_received = "Thank you for your generosity. Your money will not be wasted." response_too_late = "We hope you like skin cancer!" response_not_enough = "This is not nearly enough for our operations. I'm afraid we'll have to borrow some." + announcement_color = "purple" ///Previous Nanotrasen Assitant workers fired for many reasons now looking for revenge and your bank account. /datum/pirate_gang/grey @@ -150,6 +153,7 @@ GLOBAL_LIST_INIT(heavy_pirate_gangs, init_pirate_gangs(is_heavy = TRUE)) response_received = "Wait, you ACTUALLY gave us the money? Thanks, but we're coming for the rest anyways!" response_too_late = "Nothing, huh? Looks like the Tide's coming aboard!" response_not_enough = "You trying to cheat us? That's fine, we'll take your station as collateral." + announcement_color = "yellow" ///Agents from the space I.R.S. heavily armed to stea- I mean, collect the station's tax dues /datum/pirate_gang/irs @@ -172,6 +176,7 @@ GLOBAL_LIST_INIT(heavy_pirate_gangs, init_pirate_gangs(is_heavy = TRUE)) response_too_late = "Too late, A team has already been sent out resolve this matter directly." response_not_enough = "You filed your taxes incorrectly, A team has been sent to assist in liquidating assets and arrest you for tax fraud. \ Nothing personel kid." + announcement_color = "yellow" //Mutated Ethereals who have adopted bluespace technology in all the wrong ways. /datum/pirate_gang/lustrous @@ -190,3 +195,4 @@ GLOBAL_LIST_INIT(heavy_pirate_gangs, init_pirate_gangs(is_heavy = TRUE)) response_received = "An excellent haul, the synthesis shall resume." response_too_late = "You were not ready then, and now that time has passed. We can only go forward, never back." response_not_enough = "You have insulted us, but there shall be no feud, only swift justice!" + announcement_color = "purple" diff --git a/code/modules/antagonists/wizard/grand_ritual/finales/all_access.dm b/code/modules/antagonists/wizard/grand_ritual/finales/all_access.dm index 07958ed94a7..ab699e74064 100644 --- a/code/modules/antagonists/wizard/grand_ritual/finales/all_access.dm +++ b/code/modules/antagonists/wizard/grand_ritual/finales/all_access.dm @@ -14,4 +14,4 @@ target_door.req_one_access = list() INVOKE_ASYNC(target_door, TYPE_PROC_REF(/obj/machinery/door/airlock, open)) CHECK_TICK - priority_announce("AULIE OXIN FIERA!!", null, 'sound/magic/knock.ogg', sender_override = "[invoker.real_name]") + priority_announce("AULIE OXIN FIERA!!", null, 'sound/magic/knock.ogg', sender_override = "[invoker.real_name]", color_override = "purple") diff --git a/code/modules/antagonists/wizard/grand_ritual/finales/armageddon.dm b/code/modules/antagonists/wizard/grand_ritual/finales/armageddon.dm index c4bba539c35..94b6254d459 100644 --- a/code/modules/antagonists/wizard/grand_ritual/finales/armageddon.dm +++ b/code/modules/antagonists/wizard/grand_ritual/finales/armageddon.dm @@ -31,7 +31,7 @@ ) /datum/grand_finale/armageddon/trigger(mob/living/carbon/human/invoker) - priority_announce(pick(possible_last_words), null, 'sound/magic/voidblink.ogg', sender_override = "[invoker.real_name]") + priority_announce(pick(possible_last_words), null, 'sound/magic/voidblink.ogg', sender_override = "[invoker.real_name]", color_override = "purple") var/turf/current_location = get_turf(invoker) invoker.gib(DROP_ALL_REMAINS) diff --git a/code/modules/events/shuttle_insurance.dm b/code/modules/events/shuttle_insurance.dm index d1e39125e34..4fce9c556b8 100644 --- a/code/modules/events/shuttle_insurance.dm +++ b/code/modules/events/shuttle_insurance.dm @@ -47,12 +47,12 @@ /datum/round_event/shuttle_insurance/proc/answered() if(EMERGENCY_AT_LEAST_DOCKED) - priority_announce("You are definitely too late to purchase insurance, my friends. Our agents don't work on site.",sender_override = ship_name) + priority_announce("You are definitely too late to purchase insurance, my friends. Our agents don't work on site.",sender_override = ship_name, color_override = "red") return if(insurance_message && insurance_message.answered == 1) var/datum/bank_account/station_balance = SSeconomy.get_dep_account(ACCOUNT_CAR) if(!station_balance?.adjust_money(-insurance_evaluation)) - priority_announce("You didn't send us enough money for shuttle insurance. This, in the space layman's terms, is considered scamming. We're keeping your money, scammers!",sender_override = ship_name) + priority_announce("You didn't send us enough money for shuttle insurance. This, in the space layman's terms, is considered scamming. We're keeping your money, scammers!", sender_override = ship_name, color_override = "red") return - priority_announce("Thank you for purchasing shuttle insurance!",sender_override = ship_name) + priority_announce("Thank you for purchasing shuttle insurance!", sender_override = ship_name, color_override = "red") SSshuttle.shuttle_insurance = TRUE diff --git a/code/modules/mob/mob_helpers.dm b/code/modules/mob/mob_helpers.dm index 18fa4a9796a..5f52e79aaab 100644 --- a/code/modules/mob/mob_helpers.dm +++ b/code/modules/mob/mob_helpers.dm @@ -267,7 +267,7 @@ flashwindow = TRUE, ignore_mapload = TRUE, ignore_key, - header, + header = "", notify_suiciders = TRUE, notify_volume = 100 ) diff --git a/code/modules/shuttle/emergency.dm b/code/modules/shuttle/emergency.dm index 39e65b75285..4e46fcffc59 100644 --- a/code/modules/shuttle/emergency.dm +++ b/code/modules/shuttle/emergency.dm @@ -358,7 +358,7 @@ else SSshuttle.emergency_last_call_loc = null - priority_announce("The emergency shuttle has been called. [red_alert ? "Red Alert state confirmed: Dispatching priority shuttle. " : "" ]It will arrive in [timeLeft(600)] minutes.[reason][SSshuttle.emergency_last_call_loc ? "\n\nCall signal traced. Results can be viewed on any communications console." : "" ][SSshuttle.admin_emergency_no_recall ? "\n\nWarning: Shuttle recall subroutines disabled; Recall not possible." : ""]", null, ANNOUNCER_SHUTTLECALLED, ANNOUNCEMENT_TYPE_PRIORITY) + priority_announce("The emergency shuttle has been called. [red_alert ? "Red Alert state confirmed: Dispatching priority shuttle. " : "" ]It will arrive in [timeLeft(600)] minutes.[reason][SSshuttle.emergency_last_call_loc ? "\n\nCall signal traced. Results can be viewed on any communications console." : "" ][SSshuttle.admin_emergency_no_recall ? "\n\nWarning: Shuttle recall subroutines disabled; Recall not possible." : ""]", null, ANNOUNCER_SHUTTLECALLED, ANNOUNCEMENT_TYPE_PRIORITY, color_override = "orange") /obj/docking_port/mobile/emergency/cancel(area/signalOrigin) if(mode != SHUTTLE_CALL) @@ -373,7 +373,7 @@ SSshuttle.emergency_last_call_loc = signalOrigin else SSshuttle.emergency_last_call_loc = null - priority_announce("The emergency shuttle has been recalled.[SSshuttle.emergency_last_call_loc ? " Recall signal traced. Results can be viewed on any communications console." : "" ]", null, ANNOUNCER_SHUTTLERECALLED, ANNOUNCEMENT_TYPE_PRIORITY) + priority_announce("The emergency shuttle has been recalled.[SSshuttle.emergency_last_call_loc ? " Recall signal traced. Results can be viewed on any communications console." : "" ]", null, ANNOUNCER_SHUTTLERECALLED, ANNOUNCEMENT_TYPE_PRIORITY, color_override = "orange") SSticker.emergency_reason = null @@ -462,7 +462,7 @@ mode = SHUTTLE_DOCKED setTimer(SSshuttle.emergency_dock_time) send2adminchat("Server", "The Emergency Shuttle has docked with the station.") - priority_announce("[SSshuttle.emergency] has docked with the station. You have [timeLeft(600)] minutes to board the Emergency Shuttle.", null, ANNOUNCER_SHUTTLEDOCK, ANNOUNCEMENT_TYPE_PRIORITY) + priority_announce("[SSshuttle.emergency] has docked with the station. You have [timeLeft(600)] minutes to board the Emergency Shuttle.", null, ANNOUNCER_SHUTTLEDOCK, ANNOUNCEMENT_TYPE_PRIORITY, color_override = "orange") ShuttleDBStuff() addtimer(CALLBACK(src, PROC_REF(announce_shuttle_events)), 20 SECONDS) @@ -514,7 +514,7 @@ mode = SHUTTLE_ESCAPE launch_status = ENDGAME_LAUNCHED setTimer(SSshuttle.emergency_escape_time * engine_coeff) - priority_announce("The Emergency Shuttle has left the station. Estimate [timeLeft(600)] minutes until the shuttle docks at Central Command.", null, null, ANNOUNCEMENT_TYPE_PRIORITY) + priority_announce("The Emergency Shuttle has left the station. Estimate [timeLeft(600)] minutes until the shuttle docks at Central Command.", null, null, ANNOUNCEMENT_TYPE_PRIORITY, color_override = "orange") INVOKE_ASYNC(SSticker, TYPE_PROC_REF(/datum/controller/subsystem/ticker, poll_hearts)) SSmapping.mapvote() //If no map vote has been run yet, start one. @@ -579,7 +579,7 @@ mode = SHUTTLE_ESCAPE launch_status = ENDGAME_LAUNCHED setTimer(SSshuttle.emergency_escape_time) - priority_announce("The Emergency Shuttle is preparing for direct jump. Estimate [timeLeft(600)] minutes until the shuttle docks at Central Command.", null, null, ANNOUNCEMENT_TYPE_PRIORITY) + priority_announce("The Emergency Shuttle is preparing for direct jump. Estimate [timeLeft(600)] minutes until the shuttle docks at Central Command.", null, null, ANNOUNCEMENT_TYPE_PRIORITY, color_override = "orange") ///Generate a list of events to run during the departure /obj/docking_port/mobile/emergency/proc/setup_shuttle_events() diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss index 411154815ae..53450444c9e 100644 --- a/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss +++ b/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss @@ -4,6 +4,7 @@ */ @use 'sass:map'; +@use 'sass:color'; em { font-style: normal; @@ -944,69 +945,152 @@ em { border-bottom: 1px dashed #fff; } -.major_announcement_title { - color: #ff0066; - text-decoration: underline; - font-weight: bold; - font-size: 175%; -} - -.major_announcement_text { - color: #eaeaea; - font-weight: bold; - font-size: 125%; -} - -.minor_announcement_title { - color: #33d5ff; - font-weight: bold; - font-size: 150%; -} - -.minor_announcement_text { - color: #eaeaea; - font-size: 125%; -} - $alert-stripe-colors: ( - 'default': #292929, + 'default': #00283a, 'green': #003d00, 'blue': #00283a, 'pink': #30001b, 'yellow': #574a00, 'orange': #593400, - 'red': #540000, + 'red': #420000, 'purple': #2c0030, ); -$alert-background-colors: ( - 'default': #252525, - 'green': #003800, +$alert-stripe-alternate-colors: ( + 'default': #003045, + 'green': #004700, 'blue': #003045, 'pink': #400025, 'yellow': #4d4100, 'orange': #6b4200, - 'red': #6b0000, - 'purple': #3a0040, + 'red': #520000, + 'purple': #38003d, ); +$alert-major-header-colors: ( + 'default': #33d5ff, + 'green': #00ff80, + 'blue': #33d5ff, + 'pink': #ff80b3, + 'yellow': #fff4e0, + 'orange': #feefe7, + 'red': #ffa8c4, + 'purple': #c7a1f7, +); + +$alert-subheader-header-colors: ( + 'default': #ff9ebb, + 'green': #ffb3c9, + 'blue': #ff9ebb, + 'pink': #75e3ff, + 'yellow': #75e3ff, + 'orange': #bdf1ff, + 'red': #75e3ff, + 'purple': #75e3ff, +); + +$border-width: 4; + +$border-width-px: $border-width * 1px; + +.major_announcement_title { + font-size: 175%; + padding: 0rem 0.5rem; + line-height: 100%; + text-align: left; + text-decoration: none; + width: 100%; +} + +.subheader_announcement_text { + font-weight: bold; + padding: 0 0.5rem; + padding-top: 0.25rem; + line-height: 100%; + width: 100%; + height: 100%; + text-align: left; + font-size: 125%; +} + +.major_announcement_text { + color: #eaeaea; + background-color: #131313; + font-weight: bold; + font-size: 100%; + text-align: left; + padding: 0.5rem 0.5rem; + width: 100%; + height: 100%; +} + +.minor_announcement_title { + font-weight: bold; + padding: 0 0.5rem; + padding-top: 0; + line-height: 100%; + width: 100%; + height: 100%; + text-align: left; + font-size: 150%; +} + +.minor_announcement_text { + background-color: #202020; + color: #eaeaea; + padding: 0.5rem 0.5rem; + text-align: left; + font-size: 100%; +} + +.announcement_header { + padding: 0.5rem 0; + display: flex; + flex-direction: column; +} + @each $color-name, $color-value in $alert-stripe-colors { .chat_alert_#{$color-name} { color: #ffffff; - padding: 0.5em 0.5em; - margin-bottom: 0.5em; + padding: 0.5rem 0.5rem; box-shadow: none; font-weight: bold; - border: 1px solid $color-value; - margin: 0.5em 0 0.5em 0; - padding: 0.5em 0.75em; - background-color: map.get($alert-background-colors, $color-name); - background-image: repeating-linear-gradient( + margin: 1rem 0 1rem 0; + padding: 0; + display: flex; + flex-direction: column; + border-image: repeating-linear-gradient( -45deg, - transparent, - transparent 10px, + map.get($alert-stripe-alternate-colors, $color-name), + map.get($alert-stripe-alternate-colors, $color-name) 10px, $color-value 10px, $color-value 20px ); + border-image-slice: $border-width fill; + border-width: $border-width-px; + border-image-width: $border-width-px; + border-image-outset: 0 0 0 0; + border-image-repeat: repeat repeat; + border-style: solid; + } + + .chat_alert_#{$color-name} .major_announcement_title { + color: map.get($alert-major-header-colors, $color-name); + } + + .chat_alert_#{$color-name} .minor_announcement_title { + color: map.get($alert-major-header-colors, $color-name); + } + + .chat_alert_#{$color-name} .subheader_announcement_text { + color: map.get($alert-subheader-header-colors, $color-name); + } + + .chat_alert_#{$color-name} .minor_announcement_text { + background-color: darken(map.get($alert-stripe-colors, $color-name), 5); + } + + .chat_alert_#{$color-name} .major_announcement_text { + background-color: darken(map.get($alert-stripe-colors, $color-name), 5); } } diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss index d1be181be43..c33f43e6f9b 100644 --- a/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss +++ b/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss @@ -4,6 +4,7 @@ */ @use 'sass:map'; +@use 'sass:color'; html, body { @@ -976,69 +977,158 @@ h2.alert { border-bottom: 1px dashed #000; } +$alert-stripe-colors: ( + 'default': #b3bfff, + 'green': #adffad, + 'blue': #b3bfff, + 'pink': #ffb3df, + 'yellow': #fff3b3, + 'orange': #ffe2b3, + 'red': #ffb3b3, + 'purple': #fac2ff, +); + +$alert-stripe-alternate-colors: ( + 'default': #bdc8ff, + 'green': #bdffbd, + 'blue': #bdc8ff, + 'pink': #ffc2e5, + 'yellow': #fff5c2, + 'orange': #ffe8c2, + 'red': #ffc2c2, + 'purple': #fbd1ff, +); + +$alert-major-header-colors: ( + 'default': #003061, + 'green': #005229, + 'blue': #003061, + 'pink': #800033, + 'yellow': #754900, + 'orange': #823208, + 'red': #800029, + 'purple': #450d8c, +); + +$alert-subheader-header-colors: ( + 'default': #6b0020, + 'green': #6b0020, + 'blue': #6b0020, + 'pink': #002c85, + 'yellow': #002c85, + 'orange': #002c85, + 'red': #002c85, + 'purple': #002c85, +); + +$border-width: 4; + +$border-width-px: $border-width * 1px; + .major_announcement_title { - color: #ff0066; - text-decoration: underline; - font-weight: bold; font-size: 175%; + padding: 0rem 0.5rem; + line-height: 100%; + text-align: left; + text-decoration: none; + width: 100%; } -.major_announcement_text { - color: #202020; +.subheader_announcement_text { font-weight: bold; + padding: 0 0.5rem; + padding-top: 0.25rem; + line-height: 100%; + width: 100%; + height: 100%; + text-align: left; font-size: 125%; } -.minor_announcement_title { - color: #007ee6; +.major_announcement_text { + color: #131313; + background-color: #eaeaea; font-weight: bold; + font-size: 100%; + text-align: left; + padding: 0.5rem 0.5rem; + width: 100%; + height: 100%; +} + +.minor_announcement_title { + font-weight: bold; + padding: 0 0.5rem; + padding-top: 0; + line-height: 100%; + width: 100%; + height: 100%; + text-align: left; font-size: 150%; } .minor_announcement_text { + background-color: #eaeaea; color: #202020; - font-size: 125%; + padding: 0.5rem 0.5rem; + text-align: left; + font-size: 100%; } -$alert-stripe-colors: ( - 'default': #dedede, - 'green': #c2ffcc, - 'blue': #b8e6ff, - 'pink': #ffc2f4, - 'yellow': #ffe880, - 'orange': #ffbb99, - 'red': #ff99aa, - 'purple': #d7c2ff, -); - -$alert-background-colors: ( - 'default': #d1d1d1, - 'green': #a8ffb7, - 'blue': #a8e1ff, - 'pink': #ffb3f3, - 'yellow': #fff0ad, - 'orange': #ffc9ad, - 'red': #ffadbb, - 'purple': #ccb3ff, -); +.announcement_header { + padding: 0.5rem 0; + display: flex; + flex-direction: column; +} @each $color-name, $color-value in $alert-stripe-colors { .chat_alert_#{$color-name} { color: #ffffff; - padding: 0.5em 0.5em; - margin-bottom: 0.5em; + padding: 0.5rem 0.5rem; box-shadow: none; font-weight: bold; - border: 1px solid $color-value; - margin: 0.5em 0 0.5em 0; - padding: 0.5em 0.75em; - background-color: map.get($alert-background-colors, $color-name); - background-image: repeating-linear-gradient( + margin: 1rem 0 1rem 0; + padding: 0; + display: flex; + flex-direction: column; + border-image: repeating-linear-gradient( -45deg, - transparent, - transparent 10px, + map.get($alert-stripe-alternate-colors, $color-name), + map.get($alert-stripe-alternate-colors, $color-name) 10px, $color-value 10px, $color-value 20px ); + border-image-slice: $border-width fill; + border-width: $border-width-px; + border-image-width: $border-width-px; + border-image-outset: 0 0 0 0; + border-image-repeat: repeat repeat; + border-style: solid; + } + + .chat_alert_#{$color-name} .major_announcement_title { + color: map.get($alert-major-header-colors, $color-name); + } + + .chat_alert_#{$color-name} .minor_announcement_title { + color: map.get($alert-major-header-colors, $color-name); + } + + .chat_alert_#{$color-name} .subheader_announcement_text { + color: map.get($alert-subheader-header-colors, $color-name); + } + + .chat_alert_#{$color-name} .minor_announcement_text { + background-color: lighten( + map.get($alert-stripe-alternate-colors, $color-name), + 5 + ); + } + + .chat_alert_#{$color-name} .major_announcement_text { + background-color: lighten( + map.get($alert-stripe-alternate-colors, $color-name), + 5 + ); } } diff --git a/tgui/packages/tgui/interfaces/CommandReport.tsx b/tgui/packages/tgui/interfaces/CommandReport.tsx index f299e25a709..85669ad38c5 100644 --- a/tgui/packages/tgui/interfaces/CommandReport.tsx +++ b/tgui/packages/tgui/interfaces/CommandReport.tsx @@ -1,5 +1,5 @@ import { useBackend, useLocalState } from '../backend'; -import { Button, Dropdown, Input, Section, Stack, TextArea } from '../components'; +import { Box, Button, Dropdown, Input, Section, Stack, TextArea } from '../components'; import { Window } from '../layouts'; type Data = { @@ -8,6 +8,9 @@ type Data = { command_name: string; command_name_presets: string[]; command_report_content: string; + announcement_color: string; + announcement_colors: string[]; + subheader: string; custom_name: string; played_sound: string; print_report: string; @@ -18,15 +21,17 @@ export const CommandReport = () => { + + - + @@ -71,6 +76,50 @@ const CentComName = (props, context) => { ); }; +/** Allows the user to set the "sender" of the message via dropdown */ +const SubHeader = (props, context) => { + const { act, data } = useBackend(context); + const { subheader } = data; + + return ( +
+ Keep blank to not include a subheader + + act('set_subheader', { + new_subheader: value, + }) + } + /> +
+ ); +}; + +/** Features a section with dropdown for the announcement colour. */ +const AnnouncementColor = (props, context) => { + const { act, data } = useBackend(context); + const { announcement_colors = [], announcement_color } = data; + + return ( +
+ + act('update_announcement_color', { + updated_announcement_color: value, + }) + } + /> +
+ ); +}; + /** Features a section with dropdown for sounds. */ const AnnouncementSound = (props, context) => { const { act, data } = useBackend(context);