[tooltip]
@@ -60,216 +69,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 += {"
"}
-
- 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 += {"
"}
- html += create_icon_button(player, "picture", "Сменить изображение", "right")
- html += create_icon_button(player, "notice", "Оставить уведомление", "right")
- html += create_icon_button(player, "css", "Заменить CSS лобби", "right")
- html += {"
"}
-
- if(length(GLOB.lobby_station_traits))
- 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..cb2969b97af5b
--- /dev/null
+++ b/modular_bandastation/title_screen/code/title_screen_html.dm
@@ -0,0 +1,257 @@
+#define MAX_STATION_TRAIT_BUTTONS_VERTICAL 3
+
+/**
+ * Get the HTML of title screen.
+ */
+/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/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/chat)
+ var/mob/dead/new_player/player = user
+ var/list/html = list()
+ html += {"
+
+
+
+
Title Screen
+
+
+
+ [sheet.css_tag()]
+
+
+
+ "}
+
+ if(screen_image_url)
+ html += {"
"}
+
+ html += {""}
+ html += {"
[SStitle.notice]
"}
+ html += {"
"}
+ html += {"
+
+
+
+ "}
+
+ html += {"
+
+
+
+ "}
+
+ 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 += {"
"}
+
+ if(length(GLOB.lobby_station_traits))
+ html += {"
"}
+
+ html += {"
"}
+ html += create_icon_button(player, "picture", "Сменить изображение", "right")
+ html += create_icon_button(player, "notice", "Оставить уведомление", "right")
+ html += create_icon_button(player, "css", "Заменить CSS лобби", "right")
+ html += {"
"}
+
+ html += {"
+
+ "}
+
+ html += {"
"}
+ html += {"
+
+ "}
+
+ html += ""
+
+ return html.Join()
+
+#undef MAX_STATION_TRAIT_BUTTONS_VERTICAL
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 ee224a9d328fc..d3dab037af564 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.
*/
@@ -96,7 +93,7 @@
* Adds a notice to the main title screen in the form of big red text!
*/
/datum/controller/subsystem/title/proc/set_notice(new_notice)
- notice = sanitize_text(new_notice) || null
+ notice = emoji_parse(sanitize_text(new_notice)) || null
title_output_to_all(notice, "update_notice")
/**
@@ -134,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`")
@@ -149,6 +146,9 @@
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 97%
rename from modular_bandastation/title_screen/html/title_screen.css
rename to modular_bandastation/title_screen/html/title_screen_default.css
index 8fd6626a311ac..4226e23bf9f85 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");
@@ -147,17 +146,16 @@ img {
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 {
@@ -229,7 +227,7 @@ input,
pointer-events: none;
position: absolute;
left: 31.5px;
- bottom: -17.5px;
+ bottom: -19.5px;
z-index: 1;
}
@@ -237,9 +235,13 @@ 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);
+}
+
+.logo {
+ display: none;
}
/**
@@ -265,6 +267,7 @@ input,
.lobby_buttons-center {
top: 8px;
+ text-transform: uppercase;
}
.lobby_buttons-bottom {
@@ -367,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
new file mode 100644
index 0000000000000..9725aa7d1c0b7
--- /dev/null
+++ b/modular_bandastation/title_screen/html/title_screen_minimalistic.css
@@ -0,0 +1,419 @@
+@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;
+}
+
+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;
+}
+
+img.default {
+ display: none;
+}
+
+.logo {
+ height: 235px;
+ transform: scale(0.75) translateY(-10px);
+}
+
+#container_notice {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: calc(100vw - 20rem);
+ font-size: 26px;
+ font-family: Pix Cyrillic;
+ 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;
+}
+
+/**
+ * MARK: Layout
+ */
+.lobby_wrapper {
+ width: 20rem;
+ 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-right:before,
+.lobby_buttons-bottom:before,
+.lobby_buttons-left: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;
+ margin-bottom: 0.25em;
+ margin-right: 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 .lobby-text:before {
+ content: '\f0c8';
+ font-family: 'Font Awesome 6 Free';
+ font-style: normal;
+ font-weight: 400;
+ margin-right: 0.33em;
+}
+
+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 .lobby-text:before {
+ content: '\f14a';
+ font-family: 'Font Awesome 6 Free';
+ font-style: normal;
+ font-weight: 400;
+ margin-right: 0.33em;
+}
+
+/**
+ * MARK: Traits
+ */
+.lobby_buttons-left a.lobby_element {
+ overflow: visible;
+}
+
+.lobby_buttons-left .lobby-tooltip .lobby-tooltip-title {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.lobby_buttons-left .lobby-tooltip .lobby-tooltip-content {
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ width: 30vw;
+ padding: 0.25em 0.5em;
+ background-color: rgba(22, 22, 22, 0.85);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 0.25em;
+ box-shadow: 0 0 0.5em 0.25em rgba(0, 0 ,0, 0.5);
+ transform: translate(105%, calc(-2rem + 1px));
+ transition: opacity 0.2s;
+}
+
+.lobby_buttons-left a.lobby_element:hover .lobby-tooltip .lobby-tooltip-content {
+ opacity: 1;
+ transition-delay: 0.75s;
+}
+
+.lobby_buttons-left a.lobby_element:after {
+ background-color: hsl(345, 100%, 70%);
+}
+
+.lobby_buttons-left a.lobby_element.active:after {
+ background-color: hsl(140, 100%, 70%);
+}
+
+.lobby_buttons-left .lobby_element .lobby-tooltip .lobby-tooltip-title {
+ color: hsl(345, 100%, 70%);
+}
+
+.lobby_buttons-left .lobby_element .lobby-tooltip .lobby-tooltip-title:before {
+ display: inline-block;
+ width: 22px;
+ content: '\f0c8';
+ font-family: 'Font Awesome 6 Free';
+ font-weight: 400;
+ text-align: center;
+ font-style: normal;
+ margin-right: 0.33em;
+}
+
+.lobby_buttons-left .lobby_element.active .lobby-tooltip .lobby-tooltip-title {
+ color: hsl(140, 100%, 70%);
+}
+
+.lobby_buttons-left .lobby_element.active .lobby-tooltip .lobby-tooltip-title:before {
+ display: inline-block;
+ width: 22px;
+ content: '\f14a';
+ font-family: 'Font Awesome 6 Free';
+ font-weight: 400;
+ text-align: center;
+ font-style: normal;
+ margin-right: 0.33em;
+}
+
+/**
+ * MARK: Admin buttons
+ */
+.lobby_buttons-right .lobby_element:hover {
+ color: #f5b52b;
+}
+
+.lobby_buttons-right .lobby_element:after {
+ background-color: #f5b52b;
+}
+
+/**
+ * MARK: Font Awesome
+ */
+.lobby_buttons-center .lobby_element .lobby-text:before,
+.lobby_buttons-right .lobby_element .lobby-tooltip .lobby-tooltip-content:before,
+.lobby_buttons-bottom .lobby_element .lobby-tooltip .lobby-tooltip-content:before {
+ display: inline-block;
+ width: 22px;
+ text-align: center;
+ font-family: 'Font Awesome 6 Free';
+ font-style: normal;
+ font-weight: 900;
+ margin-right: 0.33em;
+}
+
+.lobby-late_join .lobby-text:before {
+ content: '\f11b'
+}
+
+.lobby-observe .lobby-text:before {
+ content: '\f6e2';
+}
+
+.lobby-character_setup .lobby-text:before {
+ content: '\e548';
+}
+
+.lobby-changelog .lobby-tooltip .lobby-tooltip-content:before {
+ content: '\f70e';
+}
+
+.lobby-settings .lobby-tooltip .lobby-tooltip-content:before {
+ content: '\f013';
+}
+
+.lobby-manifest .lobby-tooltip .lobby-tooltip-content:before {
+ content: '\f46d';
+}
+
+.lobby-wiki .lobby-tooltip .lobby-tooltip-content:before {
+ content: '\f02d';
+}
+
+.lobby-picture .lobby-tooltip .lobby-tooltip-content:before {
+ content: '\f03e';
+}
+
+.lobby-notice .lobby-tooltip .lobby-tooltip-content:before {
+ content: '\f06a';
+}
+
+.lobby-css .lobby-tooltip .lobby-tooltip-content:before {
+ content: '\f1c9';
+}
+
+/**
+ * MARK: Character info
+ */
+.lobby-name {
+ position: absolute;
+ top: 0;
+ display: flex;
+ flex-direction: column;
+ 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;
+ top: 0;
+ 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(101%);
+ 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 {
+ transform: translateX(-100%);
+ box-shadow: none;
+}
+
+#hide_menu:checked ~ .lobby_wrapper .lobby_container .lobby-collapse:before {
+ transform: scale(1.33) rotate(180deg);
+}
+
+#hide_menu:checked ~ #container_notice {
+ width: 100vw;
+}
diff --git a/modular_bandastation/title_screen/icons/lobby_collapse.png b/modular_bandastation/title_screen/icons/lobby_collapse.png
index ca31216cc7829..0ddd53c2ca1ad 100644
Binary files a/modular_bandastation/title_screen/icons/lobby_collapse.png and b/modular_bandastation/title_screen/icons/lobby_collapse.png differ
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,
+};