From 89a39e81f1b92705984297b0e47c193670a55456 Mon Sep 17 00:00:00 2001 From: Aylong Date: Thu, 26 Dec 2024 13:26:45 +0200 Subject: [PATCH 01/19] Trying to fix missed image --- .../title_screen/_title_screen.dme | 3 +- .../code/_title_screen_defines.dm | 1 - .../title_screen/code/title_screen_datum.dm | 213 ---------------- .../title_screen/code/title_screen_html.dm | 232 ++++++++++++++++++ .../title_screen/html/title_screen.css | 8 +- .../title_screen/icons/lobby_collapse.png | Bin 489 -> 435 bytes 6 files changed, 238 insertions(+), 219 deletions(-) create mode 100644 modular_bandastation/title_screen/code/title_screen_html.dm diff --git a/modular_bandastation/title_screen/_title_screen.dme b/modular_bandastation/title_screen/_title_screen.dme index f7a54bf69588a..12d32614e54ed 100644 --- a/modular_bandastation/title_screen/_title_screen.dme +++ b/modular_bandastation/title_screen/_title_screen.dme @@ -2,9 +2,10 @@ #include "code/_title_screen_defines.dm" #include "code/asset_lobby.dm" -#include "code/title_screen_datum.dm" #include "code/new_player.dm" #include "code/station_traits.dm" #include "code/title_screen_controls.dm" +#include "code/title_screen_datum.dm" +#include "code/title_screen_html.dm" #include "code/title_screen_pref_middleware.dm" #include "code/title_screen_subsystem.dm" diff --git a/modular_bandastation/title_screen/code/_title_screen_defines.dm b/modular_bandastation/title_screen/code/_title_screen_defines.dm index 538f1923efe25..180f547bdaf8a 100644 --- a/modular_bandastation/title_screen/code/_title_screen_defines.dm +++ b/modular_bandastation/title_screen/code/_title_screen_defines.dm @@ -1,4 +1,3 @@ -#define MAX_STATION_TRAIT_BUTTONS_VERTICAL 3 #define DEFAULT_TITLE_SCREEN_IMAGE_PATH 'modular_bandastation/title_screen/icons/default.png' #define DEFAULT_TITLE_SCREEN_HTML_CSS 'modular_bandastation/title_screen/html/title_screen.css' #define TITLE_SCREENS_LOCATION "config/title_screens/images/" diff --git a/modular_bandastation/title_screen/code/title_screen_datum.dm b/modular_bandastation/title_screen/code/title_screen_datum.dm index 609cc0d36042f..ad4209314ed6e 100644 --- a/modular_bandastation/title_screen/code/title_screen_datum.dm +++ b/modular_bandastation/title_screen/code/title_screen_datum.dm @@ -60,216 +60,3 @@ "} -/** - * Get the HTML of title screen. - */ -/datum/title_screen/proc/get_title_html(client/viewer, mob/user) - var/screen_image_url = SSassets.transport.get_asset_url(asset_cache_item = screen_image) - var/mob/dead/new_player/player = user - var/list/html = list() - html += {" - - - - Title Screen - - - - - - "} - - if(screen_image_url) - html += {""} - - html += {"
[SStitle.notice]
"} - html += {""} - html += {"
"} - html += {" -
- - - "} - - html += {"
"} - if(!SSticker || SSticker.current_state <= GAME_STATE_PREGAME) - html += create_main_button(player, "toggle_ready", "ГОТОВ", player.ready == PLAYER_READY_TO_PLAY ? "good" : "bad") - else - html += create_main_button(player, "late_join", "ИГРАТЬ") - - html += create_main_button(player, "observe", "СЛЕДИТЬ") - html += create_main_button(player, "character_setup", "НАСТРОЙКА ПЕРСОНАЖА") - html += {"
[player.client.prefs.read_preference(/datum/preference/name/real_name)]
"} - html += {"
"} - - html += {"
"} - html += create_icon_button(player, "changelog", "Открыть чейнджлог") - html += create_icon_button(player, "settings", "Настройки игры") - html += create_icon_button(player, "manifest", "Манифест персонала") - html += create_icon_button(player, "wiki", "Перейти на вики") - html += {"
"} - - html += {""} - - if(length(GLOB.lobby_station_traits)) - html += {"
"} - - var/number = 0 - for(var/datum/station_trait/job/trait as anything in GLOB.lobby_station_traits) - if(!istype(trait)) - continue // Skip trait if it is not a job - - if(!trait.can_display_lobby_button(player.client)) - continue - - if(number > MAX_STATION_TRAIT_BUTTONS_VERTICAL) // 3 is a maximum - break - - number++ - var/traitID = replacetext(replacetext("[trait.type]", "/datum/station_trait/job/", ""), "/", "-") - var/assigned = LAZYFIND(trait.lobby_candidates, player) - html += {" - -
- - - -
- -
- [trait.name] - [trait.button_desc] -
- - "} - - html += {"
"} - - html += {" - - "} - - html += {"
"} - html += {" - - "} - - html += "" - - return html.Join() - -#undef MAX_STATION_TRAIT_BUTTONS_VERTICAL diff --git a/modular_bandastation/title_screen/code/title_screen_html.dm b/modular_bandastation/title_screen/code/title_screen_html.dm new file mode 100644 index 0000000000000..f930764fbea57 --- /dev/null +++ b/modular_bandastation/title_screen/code/title_screen_html.dm @@ -0,0 +1,232 @@ +#define MAX_STATION_TRAIT_BUTTONS_VERTICAL 3 + +/** + * Get the HTML of title screen. + */ +/datum/title_screen/proc/get_title_html(client/viewer, mob/user) + var/screen_image_url = SSassets.transport.get_asset_url(asset_cache_item = screen_image) + var/mob/dead/new_player/player = user + var/list/html = list() + html += {" + + + + Title Screen + + + + + + "} + + if(screen_image_url) + html += {""} + + html += {"
[SStitle.notice]
"} + html += {""} + html += {"
"} + html += {" +
+ + + "} + + html += {"
"} + if(!SSticker || SSticker.current_state <= GAME_STATE_PREGAME) + html += create_main_button(player, "toggle_ready", "ГОТОВ", player.ready == PLAYER_READY_TO_PLAY ? "good" : "bad") + else + html += create_main_button(player, "late_join", "ИГРАТЬ") + + html += create_main_button(player, "observe", "СЛЕДИТЬ") + html += create_main_button(player, "character_setup", "НАСТРОЙКА ПЕРСОНАЖА") + html += {"
[player.client.prefs.read_preference(/datum/preference/name/real_name)]
"} + html += {"
"} + + html += {"
"} + html += create_icon_button(player, "changelog", "Открыть чейнджлог") + html += create_icon_button(player, "settings", "Настройки игры") + html += create_icon_button(player, "manifest", "Манифест персонала") + html += create_icon_button(player, "wiki", "Перейти на вики") + html += {"
"} + + html += {""} + + if(length(GLOB.lobby_station_traits)) + html += {"
"} + + var/number = 0 + for(var/datum/station_trait/job/trait as anything in GLOB.lobby_station_traits) + if(!istype(trait)) + continue // Skip trait if it is not a job + + if(!trait.can_display_lobby_button(player.client)) + continue + + if(number > MAX_STATION_TRAIT_BUTTONS_VERTICAL) // 3 is a maximum + break + + number++ + var/traitID = replacetext(replacetext("[trait.type]", "/datum/station_trait/job/", ""), "/", "-") + var/assigned = LAZYFIND(trait.lobby_candidates, player) + html += {" + +
+ + + +
+ +
+ [trait.name] + [trait.button_desc] +
+ + "} + + html += {"
"} + + html += {" + + "} + + html += {"
"} + html += {" + + "} + + html += "" + + return html.Join() + +#undef MAX_STATION_TRAIT_BUTTONS_VERTICAL diff --git a/modular_bandastation/title_screen/html/title_screen.css b/modular_bandastation/title_screen/html/title_screen.css index 8fd6626a311ac..5c8b32530c333 100644 --- a/modular_bandastation/title_screen/html/title_screen.css +++ b/modular_bandastation/title_screen/html/title_screen.css @@ -229,7 +229,7 @@ input, pointer-events: none; position: absolute; left: 31.5px; - bottom: -17.5px; + bottom: -19.5px; z-index: 1; } @@ -237,9 +237,9 @@ input, pointer-events: all; cursor: pointer; width: 19px; - height: 15px; - text-indent: -2px; - transform: translate(3.8px, 53.5px) scale(1.25, 0.75); + height: 13px; + text-indent: 5.2px; + transform: translate(3.8px, 53.5px) scale(1.75, 0.75); } /** diff --git a/modular_bandastation/title_screen/icons/lobby_collapse.png b/modular_bandastation/title_screen/icons/lobby_collapse.png index ca31216cc7829ffd9067ed2c5d9109eb3ad74b69..0ddd53c2ca1ad0595afa4b7e9bb0974af8249385 100644 GIT binary patch delta 396 zcmV;70dxN81G58=F@J4IL_t(oh3%KWOT$1IhTljbbn2EtX&X{IbcuFQh+9TMD7v_H zDVeKK$9CwdpmcR}b8-*A?RAMJEuvwWXjmpaZwUX7WO^(^X8wc>{0fqSuyt%5TgTS1b@-3g`K1O9 zI`84UVi)0;8h=87OfLrj`-e>efZaV80C0Efqhc4sIe^ShE>Z91`byJgp!2hy@XS?m z-06RUOsh)uEoUL1=cfmZgOQd?UGR9Xv~hiVC-HbH$S@2gP+Ai8UPOKklzQvd%=I4y qX|sW8RfWGNDj5eOO}uIu^8vX@m_kmdUfloy002ovP6b4+LSTYvy|?uM delta 450 zcmV;z0X_b+1L*^hF@K{;L_t(oh3%I=NCHtD$G;bXIJw_*3du2c(nKma;i4COdx^mH)?-rOy zrkz15?MQnGp9y{4sEoeL%YLGlD%SKzK9EomH sVlO2eGwAm)9u2jnKy#Sr`fRuG0i=Adx9cYC_y7O^07*qoM6N<$f;rOCE&u=k From 4c5ee1f8026a78c182debacb60d54c4e7f3036d3 Mon Sep 17 00:00:00 2001 From: Aylong Date: Thu, 26 Dec 2024 15:05:06 +0200 Subject: [PATCH 02/19] Trully fix image --- .../title_screen/code/asset_lobby.dm | 1 + .../title_screen/code/new_player.dm | 4 ++ .../title_screen/code/title_screen_html.dm | 54 ++++++++++++------- 3 files changed, 40 insertions(+), 19 deletions(-) diff --git a/modular_bandastation/title_screen/code/asset_lobby.dm b/modular_bandastation/title_screen/code/asset_lobby.dm index 8c3fad11a4333..91cf9a82b7eb5 100644 --- a/modular_bandastation/title_screen/code/asset_lobby.dm +++ b/modular_bandastation/title_screen/code/asset_lobby.dm @@ -1,5 +1,6 @@ /datum/asset/simple/html_title_screen assets = list( + "ss220_logo.png" = 'icons/ui/common/ss220.png', "lobby_background.png" = 'modular_bandastation/title_screen/icons/lobby_background.png', "lobby_toggle_ready.png" = 'modular_bandastation/title_screen/icons/lobby_toggle_ready.png', "lobby_late_join.png" = 'modular_bandastation/title_screen/icons/lobby_late_join.png', diff --git a/modular_bandastation/title_screen/code/new_player.dm b/modular_bandastation/title_screen/code/new_player.dm index 85e22af762d58..ff4e4d0b3c100 100644 --- a/modular_bandastation/title_screen/code/new_player.dm +++ b/modular_bandastation/title_screen/code/new_player.dm @@ -97,6 +97,10 @@ else SEND_SOUND(src, sound('sound/misc/menu/menu_rolldown1.ogg')) + // Удалить нахуй потом + else if(href_list["runtime"]) + stack_trace("Title Screen: [href_list["runtime"]]") + else if(href_list["focus"]) winset(client, "map", "focus=true") diff --git a/modular_bandastation/title_screen/code/title_screen_html.dm b/modular_bandastation/title_screen/code/title_screen_html.dm index f930764fbea57..b62ebeebd2bb3 100644 --- a/modular_bandastation/title_screen/code/title_screen_html.dm +++ b/modular_bandastation/title_screen/code/title_screen_html.dm @@ -22,7 +22,7 @@ "} if(screen_image_url) - html += {""} + html += {""} html += {"
[SStitle.notice]
"} html += {""} @@ -101,6 +101,17 @@ html += {""} html += {" "} diff --git a/modular_bandastation/title_screen/code/title_screen_subsystem.dm b/modular_bandastation/title_screen/code/title_screen_subsystem.dm index ee224a9d328fc..8c005e23deb6a 100644 --- a/modular_bandastation/title_screen/code/title_screen_subsystem.dm +++ b/modular_bandastation/title_screen/code/title_screen_subsystem.dm @@ -61,9 +61,6 @@ INVOKE_ASYNC(current_title_screen, TYPE_PROC_REF(/datum/title_screen, show_to), viewer) - if(check_rights_for(viewer, R_ADMIN|R_DEBUG)) - addtimer(CALLBACK(src, PROC_REF(title_output), viewer, "true", "admin_buttons_visibility"), 1.75 SECONDS, TIMER_UNIQUE|TIMER_OVERRIDE|TIMER_CLIENT_TIME) - /** * Hide the title screen from specific client. */ diff --git a/modular_bandastation/title_screen/html/title_screen.css b/modular_bandastation/title_screen/html/title_screen.css index 5c8b32530c333..3ce8e57145904 100644 --- a/modular_bandastation/title_screen/html/title_screen.css +++ b/modular_bandastation/title_screen/html/title_screen.css @@ -158,6 +158,10 @@ input, visibility: hidden !important; } +.invisible { + visibility: hidden; +} + *, *::before, *::after { From e2f27cae5dcc9bc1bc22dc3e1e83f66847052acb Mon Sep 17 00:00:00 2001 From: Aylong Date: Thu, 26 Dec 2024 23:03:16 +0200 Subject: [PATCH 05/19] Lobby style preference --- .../code/_title_screen_defines.dm | 1 - .../code/title_screen_controls.dm | 7 +- .../title_screen/code/title_screen_datum.dm | 15 +++- .../title_screen/code/title_screen_html.dm | 4 +- .../code/title_screen_pref_middleware.dm | 15 ++++ .../code/title_screen_subsystem.dm | 4 +- ...le_screen.css => title_screen_default.css} | 1 - .../html/title_screen_minimalistic.css | 81 +++++++++++++++++++ .../bandastation/lobby_style.tsx | 8 ++ 9 files changed, 123 insertions(+), 13 deletions(-) rename modular_bandastation/title_screen/html/{title_screen.css => title_screen_default.css} (99%) create mode 100644 modular_bandastation/title_screen/html/title_screen_minimalistic.css create mode 100644 tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bandastation/lobby_style.tsx diff --git a/modular_bandastation/title_screen/code/_title_screen_defines.dm b/modular_bandastation/title_screen/code/_title_screen_defines.dm index 180f547bdaf8a..abe9246ee79e5 100644 --- a/modular_bandastation/title_screen/code/_title_screen_defines.dm +++ b/modular_bandastation/title_screen/code/_title_screen_defines.dm @@ -1,3 +1,2 @@ #define DEFAULT_TITLE_SCREEN_IMAGE_PATH 'modular_bandastation/title_screen/icons/default.png' -#define DEFAULT_TITLE_SCREEN_HTML_CSS 'modular_bandastation/title_screen/html/title_screen.css' #define TITLE_SCREENS_LOCATION "config/title_screens/images/" diff --git a/modular_bandastation/title_screen/code/title_screen_controls.dm b/modular_bandastation/title_screen/code/title_screen_controls.dm index f469a7c028303..7bd2f73181613 100644 --- a/modular_bandastation/title_screen/code/title_screen_controls.dm +++ b/modular_bandastation/title_screen/code/title_screen_controls.dm @@ -9,13 +9,10 @@ ADMIN_VERB(change_title_screen, R_FUN, "Title Screen: Change", ADMIN_VERB_NO_DES if("Меняем") var/file = input(usr) as icon|null if(file) - SStitle.set_title_image(file) + SStitle.set_title_image(usr, file) if("Сбрасываем") - SStitle.set_title_image() - - log_admin("[key_name(usr)] is changing the title screen.") - message_admins("[key_name_admin(usr)] is changing the title screen.") + SStitle.set_title_image(usr) /** * Sets a titlescreen notice, a big red text on the main screen. diff --git a/modular_bandastation/title_screen/code/title_screen_datum.dm b/modular_bandastation/title_screen/code/title_screen_datum.dm index ad4209314ed6e..1f357f63a2b7e 100644 --- a/modular_bandastation/title_screen/code/title_screen_datum.dm +++ b/modular_bandastation/title_screen/code/title_screen_datum.dm @@ -1,6 +1,11 @@ +GLOBAL_LIST_INIT(available_lobby_styles, list( + "По-умолчанию" = 'modular_bandastation/title_screen/html/title_screen_default.css', + "Минималистичный" = 'modular_bandastation/title_screen/html/title_screen_minimalistic.css', +)) + /datum/title_screen - /// All title screen styles. - var/title_css = DEFAULT_TITLE_SCREEN_HTML_CSS + /// Custom CSS. Can be changed by admins or coders. If empty, will be used from user preferences. + var/title_css /// The current title screen being displayed, as `/datum/asset_cache_item` var/datum/asset_cache_item/screen_image @@ -31,7 +36,11 @@ fontawesome.send(viewer) SSassets.transport.send_assets(viewer, screen_image.name) - viewer << browse(get_title_html(viewer, viewer.mob), "window=title_browser") + if(!title_css) + viewer << browse(get_title_html(viewer, viewer.mob, GLOB.available_lobby_styles[viewer.prefs.read_preference(/datum/preference/choiced/lobby_style)]), "window=title_browser") + else + viewer << browse(get_title_html(viewer, viewer.mob, title_css), "window=title_browser") + /datum/title_screen/proc/hide_from(client/viewer) if(viewer?.mob) diff --git a/modular_bandastation/title_screen/code/title_screen_html.dm b/modular_bandastation/title_screen/code/title_screen_html.dm index 8a9cff9ed2fae..010d02b51acb0 100644 --- a/modular_bandastation/title_screen/code/title_screen_html.dm +++ b/modular_bandastation/title_screen/code/title_screen_html.dm @@ -3,7 +3,7 @@ /** * Get the HTML of title screen. */ -/datum/title_screen/proc/get_title_html(client/viewer, mob/user) +/datum/title_screen/proc/get_title_html(client/viewer, mob/user, styles) var/screen_image_url = SSassets.transport.get_asset_url(asset_cache_item = screen_image) var/mob/dead/new_player/player = user var/list/html = list() @@ -15,7 +15,7 @@ diff --git a/modular_bandastation/title_screen/code/title_screen_pref_middleware.dm b/modular_bandastation/title_screen/code/title_screen_pref_middleware.dm index d3e011033ea06..3de02e4ff4a1d 100644 --- a/modular_bandastation/title_screen/code/title_screen_pref_middleware.dm +++ b/modular_bandastation/title_screen/code/title_screen_pref_middleware.dm @@ -18,3 +18,18 @@ SStitle.update_character_name(user, value) return TRUE + +// Title Screen Preferences +/datum/preference/choiced/lobby_style + category = PREFERENCE_CATEGORY_GAME_PREFERENCES + savefile_key = "lobby_style" + savefile_identifier = PREFERENCE_PLAYER + +/datum/preference/choiced/lobby_style/init_possible_values() + return assoc_to_keys(GLOB.available_lobby_styles) + +/datum/preference/choiced/lobby_style/create_default_value() + return GLOB.available_lobby_styles[1] + +/datum/preference/choiced/lobby_style/apply_to_client(client/client, value) + client.fix_title_screen() diff --git a/modular_bandastation/title_screen/code/title_screen_subsystem.dm b/modular_bandastation/title_screen/code/title_screen_subsystem.dm index 8c005e23deb6a..45e42b0cc21b2 100644 --- a/modular_bandastation/title_screen/code/title_screen_subsystem.dm +++ b/modular_bandastation/title_screen/code/title_screen_subsystem.dm @@ -131,7 +131,7 @@ /** * Changes title image to desired */ -/datum/controller/subsystem/title/proc/set_title_image(desired_image_file) +/datum/controller/subsystem/title/proc/set_title_image(user, desired_image_file) if(desired_image_file) if(!isfile(desired_image_file)) CRASH("Not a file passed to `/datum/controller/subsystem/title/proc/set_title_image`") @@ -145,6 +145,8 @@ for(var/mob/dead/new_player/viewer as anything in GLOB.new_player_list) INVOKE_ASYNC(src, PROC_REF(update_title_image_for_client), viewer.client) + log_admin("[key_name(user)] is changing the title screen.") + message_admins("[key_name_admin(user)] is changing the title screen.") /** * Sends title image to client and updates title screen for it diff --git a/modular_bandastation/title_screen/html/title_screen.css b/modular_bandastation/title_screen/html/title_screen_default.css similarity index 99% rename from modular_bandastation/title_screen/html/title_screen.css rename to modular_bandastation/title_screen/html/title_screen_default.css index 3ce8e57145904..e04c8d890a152 100644 --- a/modular_bandastation/title_screen/html/title_screen.css +++ b/modular_bandastation/title_screen/html/title_screen_default.css @@ -1,4 +1,3 @@ - @font-face { font-family: "Pix Cyrillic"; src: url("PixCyrillic.ttf"); diff --git a/modular_bandastation/title_screen/html/title_screen_minimalistic.css b/modular_bandastation/title_screen/html/title_screen_minimalistic.css new file mode 100644 index 0000000000000..7fde7595f8cb1 --- /dev/null +++ b/modular_bandastation/title_screen/html/title_screen_minimalistic.css @@ -0,0 +1,81 @@ +@font-face { + font-family: "Pix Cyrillic"; + src: url("PixCyrillic.ttf"); +} + +/** + * MARK: Common + */ +body, +html { + font-family: sans-serif; + font-size: 15px; + overflow: hidden; + text-align: center; + -ms-user-select: none; + user-select: none; + cursor: default; + position: static; + width: 100%; + height: 100%; + margin: 0; + background-color: black; +} + +img { + pointer-events: none; + border-style: none; +} + +hr { + border: 0; + border-bottom: 0.15em solid rgba(255, 255, 255, 0.1); +} + +input, +.hidden { + display: none !important; + visibility: hidden !important; +} + +.invisible { + visibility: hidden; +} + +*, +*::before, +*::after { + position: relative; + box-sizing: border-box; +} + +.pixelated { + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; +} + +.bg { + position: absolute; + width: auto; + height: 100vmin; + min-width: 100vmin; + min-height: 100vmin; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 0; +} + +#container_notice { + position: absolute; + box-sizing: border-box; + bottom: 0; + width: 100vw; + font-size: 26px; + padding: 0.5em 0 0.33em; + background-color: rgba(22, 22, 22, 0.85); + color: hsl(345, 100%, 70%); + border-top: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(24px); + z-index: 2; +} diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bandastation/lobby_style.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bandastation/lobby_style.tsx new file mode 100644 index 0000000000000..88fbf2e457325 --- /dev/null +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bandastation/lobby_style.tsx @@ -0,0 +1,8 @@ +import { Feature } from '../../base'; +import { FeatureDropdownInput } from '../../dropdowns'; + +export const lobby_style: Feature = { + name: 'Lobby Style', + category: 'UI', + component: FeatureDropdownInput, +}; From 7077bf2dbf31c363a082a1407f81dc44d5a4366b Mon Sep 17 00:00:00 2001 From: Aylong Date: Fri, 27 Dec 2024 18:21:25 +0200 Subject: [PATCH 06/19] Minimalistic theme WiP --- .../title_screen/code/title_screen_datum.dm | 6 +- .../title_screen/code/title_screen_html.dm | 31 ++- .../html/title_screen_default.css | 11 +- .../html/title_screen_minimalistic.css | 239 +++++++++++++++++- 4 files changed, 261 insertions(+), 26 deletions(-) diff --git a/modular_bandastation/title_screen/code/title_screen_datum.dm b/modular_bandastation/title_screen/code/title_screen_datum.dm index 1f357f63a2b7e..afb9dfbd25e08 100644 --- a/modular_bandastation/title_screen/code/title_screen_datum.dm +++ b/modular_bandastation/title_screen/code/title_screen_datum.dm @@ -51,7 +51,7 @@ GLOBAL_LIST_INIT(available_lobby_styles, list( return {" [text] - + "} @@ -59,9 +59,9 @@ GLOBAL_LIST_INIT(available_lobby_styles, list( return {"
- +
- + [tooltip ? {"
[tooltip] diff --git a/modular_bandastation/title_screen/code/title_screen_html.dm b/modular_bandastation/title_screen/code/title_screen_html.dm index 010d02b51acb0..2ab196bb4879b 100644 --- a/modular_bandastation/title_screen/code/title_screen_html.dm +++ b/modular_bandastation/title_screen/code/title_screen_html.dm @@ -14,6 +14,7 @@ Title Screen + @@ -24,23 +25,29 @@ if(screen_image_url) html += {"Загрузка..."} - html += {"
[SStitle.notice]
"} html += {""} + html += {"
[SStitle.notice]
"} html += {"
"} html += {"
- - + + + "} + + html += {" + "} html += {"
"} if(!SSticker || SSticker.current_state <= GAME_STATE_PREGAME) - html += create_main_button(player, "toggle_ready", "ГОТОВ", player.ready == PLAYER_READY_TO_PLAY ? "good" : "bad") + html += create_main_button(player, "toggle_ready", "Готов", player.ready == PLAYER_READY_TO_PLAY ? "good" : "bad") else - html += create_main_button(player, "late_join", "ИГРАТЬ") + html += create_main_button(player, "late_join", "Играть") - html += create_main_button(player, "observe", "СЛЕДИТЬ") - html += create_main_button(player, "character_setup", "НАСТРОЙКА ПЕРСОНАЖА") + html += create_main_button(player, "observe", "Следить") + html += create_main_button(player, "character_setup", "Настройка персонажа") html += {"
[player.client.prefs.read_preference(/datum/preference/name/real_name)]
"} html += {"
"} @@ -77,11 +84,11 @@ html += {"
- - - + + +
- +
[trait.name] [trait.button_desc] @@ -94,7 +101,7 @@ html += {" "} diff --git a/modular_bandastation/title_screen/html/title_screen_default.css b/modular_bandastation/title_screen/html/title_screen_default.css index e04c8d890a152..4226e23bf9f85 100644 --- a/modular_bandastation/title_screen/html/title_screen_default.css +++ b/modular_bandastation/title_screen/html/title_screen_default.css @@ -146,11 +146,6 @@ img { border-style: none; } -hr { - border: 0; - border-bottom: 0.15em solid rgba(255, 255, 255, 0.1); -} - input, .hidden { display: none !important; @@ -245,6 +240,10 @@ input, transform: translate(3.8px, 53.5px) scale(1.75, 0.75); } +.logo { + display: none; +} + /** * MARK: Positioning */ @@ -268,6 +267,7 @@ input, .lobby_buttons-center { top: 8px; + text-transform: uppercase; } .lobby_buttons-bottom { @@ -370,6 +370,7 @@ input, align-items: center; vertical-align: middle; justify-content: center; + text-transform: none; top: -1px; height: 18px; width: 110px; diff --git a/modular_bandastation/title_screen/html/title_screen_minimalistic.css b/modular_bandastation/title_screen/html/title_screen_minimalistic.css index 7fde7595f8cb1..60a2ce0913c7e 100644 --- a/modular_bandastation/title_screen/html/title_screen_minimalistic.css +++ b/modular_bandastation/title_screen/html/title_screen_minimalistic.css @@ -8,6 +8,8 @@ */ body, html { + display: flex; + flex-direction: column; font-family: sans-serif; font-size: 15px; overflow: hidden; @@ -27,11 +29,6 @@ img { border-style: none; } -hr { - border: 0; - border-bottom: 0.15em solid rgba(255, 255, 255, 0.1); -} - input, .hidden { display: none !important; @@ -70,12 +67,242 @@ input, position: absolute; box-sizing: border-box; bottom: 0; - width: 100vw; + right: 0; + width: 76vw; font-size: 26px; padding: 0.5em 0 0.33em; background-color: rgba(22, 22, 22, 0.85); color: hsl(345, 100%, 70%); border-top: 1px solid rgba(255, 255, 255, 0.1); + transition: width 0.2s; backdrop-filter: blur(24px); z-index: 2; } + +img.default { + display: none; +} + +.logo { + height: 235px; + transform: scale(0.75) translateY(-10px); +} + +/** + * MARK: Layout + */ +.lobby_wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 20em; + height: 100vh; +} + +.lobby_container { + display: flex; + flex-direction: column; + position: absolute; + box-sizing: border-box; + bottom: 0; + left: 0; + width: 20em; + height: 100vh; + background-color: rgba(22, 22, 22, 0.85); + border-right: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0.5em 0 1.25em rgba(0, 0 ,0, 0.5); + transition: transform 0.2s, box-shadow 0.2s; + backdrop-filter: blur(24px); + z-index: 3; +} + +.lobby_buttons-center { + overflow: hidden; + padding-top: 5.5em; +} + +/** + * MARK: Separators + */ +.lobby_buttons-bottom:before, +.lobby_buttons-right:before { + content: ''; + display: block; + height: 1px; + width: 100%; + margin: 0.5em 0; + background-color: rgba(255, 255, 255, 0.1); +} + +/** + * MARK: Buttons + */ +a.lobby_element { + display: block; + overflow: hidden; + position: relative; + font-size: 1.35rem; + text-align: left; + text-decoration: none; + box-sizing: border-box; + width: 95%; + margin-bottom: 0.25em; + padding: 0.25em 0.25em 0.25em 0.5em; + color: #898989; + border: 1px solid transparent; + border-radius: 0 0.25em 0.25em 0; + transition: color 0.2s, background-color 0.2s, border-color 0.2s; + -webkit-user-drag: none; +} + +a.lobby_element:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 2px; + height: 100%; + background-color: #d4dfec; + transform: scaleY(0); + transform-origin: center; + transition: transform 0.2s, background-color 0.2s; +} + +a.lobby_element:hover { + background-color: rgba(255, 255, 255, 0.075); + color: #d4dfec; +} + +a.lobby_element:hover:after { + transform: scaleY(1); +} + +.bad { + color: hsl(345, 100%, 70%) !important; +} + +a.lobby_element.bad:before { + content: '\f0c8'; + font-family: 'Font Awesome 6 Free'; + font-style: normal; + font-weight: 400; + margin: 0 0.25em 0 0.1em; +} + +a.lobby_element.bad:after { + background-color: hsl(345, 100%, 70%); +} + +.good { + color: hsl(140, 100%, 70%) !important; +} + +a.lobby_element.good:after { + background-color: hsl(140, 100%, 70%); +} + +a.lobby_element.good:before { + content: '\f14a'; + font-family: 'Font Awesome 6 Free'; + font-style: normal; + font-weight: 400; + margin: 0 0.25em 0 0.1em; +} + +/** + * MARK: Admin buttons + */ +.lobby_buttons-right .lobby_element:hover { + color: #f5b52b; +} + +.lobby_buttons-right .lobby_element:after { + background-color: #f5b52b; +} + +/** + * MARK: Character info + */ +.lobby-name { + position: absolute; + top: 0; + display: flex; + flex-direction: column; + box-sizing: border-box; + font-size: 1.2rem; + font-weight: bold; + text-align: right; + width: 100%; + padding: 0.5em 0.75em; + background-color: rgba(255, 255, 255, 0.05); + color: #d4dfec; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.5); +} + +.lobby-name:before { + content: 'На смену прибывает...'; + font-weight: normal; + text-align: left; + font-size: 1.1rem; + margin: 0; + color: #898989; +} + +#character_name { + margin-top: 0.25em; +} + +/** + * MARK: Collapse button + */ +.lobby-collapse { + cursor: pointer; + position: absolute; + right: 0; + display: flex; + justify-content: center; + align-items: center; + height: 3.5rem; + width: 3.5rem; + background-color: rgba(22, 22, 22, 0.85); + color: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.1); + border-left-color: transparent; + transform: translateX(100%); + transition: color 0.2s; +} + +.lobby-collapse:hover { + color: rgba(255, 255, 255, 0.75); +} + +.lobby-collapse:before { + content: '\f100'; + font-family: 'Font Awesome 6 Free'; + font-style: normal; + font-weight: 900; + transform: scale(1.33); + transition: transform 0.2s; +} + +#collapse { + display: none; +} + +/** + * MARK: Checkbox handling + */ +#hide_menu:checked ~ .lobby_wrapper .lobby_container { + transform: translateX(-100%); + box-shadow: none; +} + +#hide_menu:checked ~ #container_notice { + width: 100vw; +} + +#hide_menu:checked ~ .lobby_wrapper .lobby_container .lobby-collapse:before { + transform: scale(1.33) rotate(180deg); +} From 2965ab932c5f77882d6a8af652ce5329d51d4019 Mon Sep 17 00:00:00 2001 From: Aylong Date: Fri, 27 Dec 2024 18:57:34 +0200 Subject: [PATCH 07/19] Minimalistic lobby traits --- .../title_screen/code/title_screen_html.dm | 20 +++--- .../html/title_screen_minimalistic.css | 67 ++++++++++++++++++- 2 files changed, 78 insertions(+), 9 deletions(-) diff --git a/modular_bandastation/title_screen/code/title_screen_html.dm b/modular_bandastation/title_screen/code/title_screen_html.dm index 2ab196bb4879b..73e6b3ec62646 100644 --- a/modular_bandastation/title_screen/code/title_screen_html.dm +++ b/modular_bandastation/title_screen/code/title_screen_html.dm @@ -58,12 +58,6 @@ html += create_icon_button(player, "wiki", "Перейти на вики") html += {"
"} - html += {""} - if(length(GLOB.lobby_station_traits)) html += {"
"} @@ -98,6 +92,12 @@ html += {"
"} + html += {""} + html += {"