From 3bf8b9a0115d7ee4657b7a8b8083314be3009293 Mon Sep 17 00:00:00 2001 From: Aylong Date: Wed, 7 Aug 2024 22:08:25 +0300 Subject: [PATCH 01/21] It just... works? --- .../client/preference/link_processing.dm | 2 + code/modules/mob/new_player/new_player.dm | 4 +- interface/skin.dmf | 1 - .../code/_title_screen_defines.dm | 132 ++++++++++++++++++ modular_ss220/title_screen/code/new_player.dm | 3 + .../title_screen/code/title_screen_datum.dm | 73 +++++++++- 6 files changed, 207 insertions(+), 8 deletions(-) diff --git a/code/modules/client/preference/link_processing.dm b/code/modules/client/preference/link_processing.dm index 4d41700007f5..bb35b73fed59 100644 --- a/code/modules/client/preference/link_processing.dm +++ b/code/modules/client/preference/link_processing.dm @@ -125,6 +125,7 @@ if(isnewplayer(user)) var/mob/new_player/N = user N.new_player_panel_proc() + user.client << output(active_character.real_name, "title_browser:update_current_character") // SS220 ADDITION - Title Screen if("age") active_character.age = rand(S.min_age , S.max_age) if("hair") @@ -199,6 +200,7 @@ if(isnewplayer(user)) var/mob/new_player/N = user N.new_player_panel_proc() + user.client << output(new_name, "title_browser:update_current_character") // SS220 ADDITION - Title Screen else to_chat(user, "Invalid name. Your name should be at least 2 and at most [MAX_NAME_LEN] characters long. It may only contain the characters A-Z, a-z, -, ' and .") diff --git a/code/modules/mob/new_player/new_player.dm b/code/modules/mob/new_player/new_player.dm index f6fe9420aa0f..53f27090c958 100644 --- a/code/modules/mob/new_player/new_player.dm +++ b/code/modules/mob/new_player/new_player.dm @@ -154,11 +154,11 @@ // SS220 ADDITION END ready = !ready - new_player_panel_proc() + /* new_player_panel_proc() */ src << output(ready, "title_browser:ready") // SS220 REPLACEMENT - TITLE SCREEN if(href_list["skip_antag"]) client.skip_antag = !client.skip_antag - new_player_panel_proc() + /* new_player_panel_proc() */ src << output(client.skip_antag, "title_browser:skip_antag") // SS220 REPLACEMENT - TITLE SCREEN if(href_list["refresh"]) src << browse(null, "window=playersetup") //closes the player setup window diff --git a/interface/skin.dmf b/interface/skin.dmf index 4334163e1364..48aa84d44af6 100644 --- a/interface/skin.dmf +++ b/interface/skin.dmf @@ -186,7 +186,6 @@ window "paramapwindow" saved-params = "icon-size;zoom-mode" zoom-mode = "distort" style = ".center { text-align: center; } .maptext { font-family: 'MS Serif'; font-size: 7px; -dm-text-outline: 1px black; color: white; line-height: 1.1; } .small { font-family: 'Small Fonts'; font-size: 6px; } .big { font-size: 8px; } .reallybig { font-size: 8px; } .extremelybig { font-size: 8px; } .clown { color: #FF69Bf;} .tajaran {color: #803B56;} .skrell {color: #00CED1;} .solcom {color: #22228B;} .com_srus {color: #7c4848;} .zombie\t{color: #7c4848;} .soghun {color: #228B22;} .vox {color: #AA00AA;} .diona {color: #804000; font-weight: bold;} .trinary {color: #727272;} .kidan {color: #664205;} .slime {color: #0077AA;} .moth{color: #869b29;} .drask {color: #a3d4eb;} .vulpkanin {color: #B97A57;} .abductor {color: #800080;} .his_grace { color: #15D512; } .hypnophrase { color: #0d0d0d; font-weight: bold; } .yell { font-weight: bold; } .italics { font-family: 'Small Fonts'; }" - on-show = ".winset \"menu.statusbar.is-checked=true?paramapwindow.status_bar.is-visible=true:paramapwindow.status_bar.is-visible=false\"" elem "title_browser" type = BROWSER pos = 0,0 diff --git a/modular_ss220/title_screen/code/_title_screen_defines.dm b/modular_ss220/title_screen/code/_title_screen_defines.dm index e9961e1391a8..2e9bca1804c1 100644 --- a/modular_ss220/title_screen/code/_title_screen_defines.dm +++ b/modular_ss220/title_screen/code/_title_screen_defines.dm @@ -5,6 +5,7 @@ + Title Screen diff --git a/modular_ss220/title_screen/code/new_player.dm b/modular_ss220/title_screen/code/new_player.dm index 4b32f04fd989..90492346d313 100644 --- a/modular_ss220/title_screen/code/new_player.dm +++ b/modular_ss220/title_screen/code/new_player.dm @@ -1,3 +1,6 @@ /mob/new_player/Login() . = ..() SStitle.show_title_screen_to(client) + +/mob/new_player/new_player_panel_proc() + return diff --git a/modular_ss220/title_screen/code/title_screen_datum.dm b/modular_ss220/title_screen/code/title_screen_datum.dm index 675c28b3ced3..6e7a4b28b404 100644 --- a/modular_ss220/title_screen/code/title_screen_datum.dm +++ b/modular_ss220/title_screen/code/title_screen_datum.dm @@ -24,26 +24,27 @@ if(!viewer) return - winset(viewer, "title_browser", "is-disabled=true;is-visible=true") - winset(viewer, "status_bar", "is-visible=false") + winset(viewer, "title_browser", "is-disabled=false;is-visible=true") + winset(viewer, "paramapwindow.status_bar", "is-visible=false") var/datum/asset/lobby_asset = get_asset_datum(/datum/asset/simple/lobby_fonts) lobby_asset.send(viewer) SSassets.transport.send_assets(viewer, screen_image.name) - viewer << browse(get_title_html(), "window=title_browser") + viewer << browse(get_title_html(viewer, viewer.mob), "window=title_browser") /datum/title_screen/proc/hide_from(client/viewer) if(viewer?.mob) winset(viewer, "title_browser", "is-disabled=true;is-visible=false") - winset(viewer, "status_bar", "is-visible=true") + winset(viewer, "paramapwindow.status_bar", "is-visible=true") /** * Get the HTML of title screen. */ -/datum/title_screen/proc/get_title_html() +/datum/title_screen/proc/get_title_html(client/viewer, mob/user) var/list/html = list(title_html) + var/mob/new_player/player = user var/screen_image_url = SSassets.transport.get_asset_url(asset_cache_item = screen_image) if(screen_image_url) @@ -56,6 +57,68 @@ "} + html += {"
"} + + if(!SSticker || SSticker.current_state <= GAME_STATE_PREGAME) + html += {"[player.ready ? "☑ ГОТОВ" : "☒ НЕ ГОТОВ"]"} + else + html += {" + ПРИСОЕДИНИТЬСЯ + МАНИФЕСТ + "} + + html += {"НАБЛЮДАТЬ"} + + html += {" +
+ SETUP CHARACTER ([uppertext(viewer.prefs.active_character.real_name)]) + GAME OPTIONS + [viewer.skip_antag ? "Антагонист: Выключен" : "Антагонист: Включен"] +
+ SWAP SERVERS + "} + + html += "
" + html += {" + + "} + html += "" return html.Join() From edf4570e17341de2bee9ed7e8c626a9499cc1d21 Mon Sep 17 00:00:00 2001 From: Aylong Date: Thu, 8 Aug 2024 01:46:00 +0300 Subject: [PATCH 02/21] Design progress, more modularity and fixes --- code/controllers/subsystem/SSticker.dm | 2 +- .../client/preference/link_processing.dm | 2 - code/modules/mob/new_player/new_player.dm | 4 +- .../code/_title_screen_defines.dm | 177 +++++++----------- .../title_screen/code/asset_lobby.dm | 3 +- modular_ss220/title_screen/code/new_player.dm | 37 ++++ .../title_screen/code/title_screen_datum.dm | 42 +++-- .../title_screen/icons/SS220_Logo.png | Bin 0 -> 59723 bytes 8 files changed, 137 insertions(+), 130 deletions(-) create mode 100644 modular_ss220/title_screen/icons/SS220_Logo.png diff --git a/code/controllers/subsystem/SSticker.dm b/code/controllers/subsystem/SSticker.dm index f5170711167b..5b4c37841148 100644 --- a/code/controllers/subsystem/SSticker.dm +++ b/code/controllers/subsystem/SSticker.dm @@ -348,7 +348,7 @@ SUBSYSTEM_DEF(ticker) for(var/mob/new_player/N in GLOB.mob_list) if(N.client) - N.new_player_panel_proc() + /* N.new_player_panel_proc() */ SStitle.show_title_screen_to(N.client) // SS220 REPLACEMENT - TITLE SCREEN SSnightshift.check_nightshift(TRUE) diff --git a/code/modules/client/preference/link_processing.dm b/code/modules/client/preference/link_processing.dm index bb35b73fed59..4d41700007f5 100644 --- a/code/modules/client/preference/link_processing.dm +++ b/code/modules/client/preference/link_processing.dm @@ -125,7 +125,6 @@ if(isnewplayer(user)) var/mob/new_player/N = user N.new_player_panel_proc() - user.client << output(active_character.real_name, "title_browser:update_current_character") // SS220 ADDITION - Title Screen if("age") active_character.age = rand(S.min_age , S.max_age) if("hair") @@ -200,7 +199,6 @@ if(isnewplayer(user)) var/mob/new_player/N = user N.new_player_panel_proc() - user.client << output(new_name, "title_browser:update_current_character") // SS220 ADDITION - Title Screen else to_chat(user, "Invalid name. Your name should be at least 2 and at most [MAX_NAME_LEN] characters long. It may only contain the characters A-Z, a-z, -, ' and .") diff --git a/code/modules/mob/new_player/new_player.dm b/code/modules/mob/new_player/new_player.dm index 53f27090c958..f6fe9420aa0f 100644 --- a/code/modules/mob/new_player/new_player.dm +++ b/code/modules/mob/new_player/new_player.dm @@ -154,11 +154,11 @@ // SS220 ADDITION END ready = !ready - /* new_player_panel_proc() */ src << output(ready, "title_browser:ready") // SS220 REPLACEMENT - TITLE SCREEN + new_player_panel_proc() if(href_list["skip_antag"]) client.skip_antag = !client.skip_antag - /* new_player_panel_proc() */ src << output(client.skip_antag, "title_browser:skip_antag") // SS220 REPLACEMENT - TITLE SCREEN + new_player_panel_proc() if(href_list["refresh"]) src << browse(null, "window=playersetup") //closes the player setup window diff --git a/modular_ss220/title_screen/code/_title_screen_defines.dm b/modular_ss220/title_screen/code/_title_screen_defines.dm index 2e9bca1804c1..70cd49f1d3e2 100644 --- a/modular_ss220/title_screen/code/_title_screen_defines.dm +++ b/modular_ss220/title_screen/code/_title_screen_defines.dm @@ -3,9 +3,11 @@ #define DEFAULT_TITLE_HTML {" + Title Screen - Title Screen + + diff --git a/modular_ss220/title_screen/code/new_player.dm b/modular_ss220/title_screen/code/new_player.dm index 9d9298a01b63..1b5f858bacb4 100644 --- a/modular_ss220/title_screen/code/new_player.dm +++ b/modular_ss220/title_screen/code/new_player.dm @@ -20,12 +20,12 @@ client.setup_character() if(href_list["wiki"]) - if(!tgui_alert(usr, "Вики", "Хотите открыть нашу вики?", list("Да", "Нет")) != "Да") + if(tgui_alert(usr, "Хотите открыть нашу вики?", "Вики", list("Да", "Нет")) != "Да") return client << link("https://wiki.ss220.club") if(href_list["discord"]) - if(!tgui_alert(usr, "Дискорд", "Хотите перейти в наш дискорд сервер?", list("Да", "Нет")) != "Да") + if(tgui_alert(usr, "Хотите перейти в наш дискорд сервер?", "Дискорд", list("Да", "Нет")) != "Да") return client << link("https://discord.gg/ss220") diff --git a/modular_ss220/title_screen/code/title_screen_datum.dm b/modular_ss220/title_screen/code/title_screen_datum.dm index 77d6791d78f0..594afd7f76a8 100644 --- a/modular_ss220/title_screen/code/title_screen_datum.dm +++ b/modular_ss220/title_screen/code/title_screen_datum.dm @@ -61,8 +61,8 @@ html += {" "} html += {"
"} @@ -128,7 +128,7 @@ var character_name_slot = document.getElementById("character_slot"); function update_current_character(name) { - character_name_slot.textContent = name.toUpperCase(); + character_name_slot.textContent = name; } "} From 31e5f3e8d47215c96444b47c89e74e65859fa803 Mon Sep 17 00:00:00 2001 From: Aylong Date: Thu, 8 Aug 2024 15:30:26 +0300 Subject: [PATCH 04/21] More design and new lobby art --- .../code/_title_screen_defines.dm | 149 ++++++++++++++---- .../title_screen/code/asset_lobby.dm | 2 +- .../title_screen/code/title_screen_datum.dm | 41 ++--- modular_ss220/title_screen/icons/default.gif | Bin 213840 -> 0 bytes modular_ss220/title_screen/icons/default.jpg | Bin 0 -> 388335 bytes .../icons/{SS220_Logo.png => logo.png} | Bin 6 files changed, 140 insertions(+), 52 deletions(-) delete mode 100644 modular_ss220/title_screen/icons/default.gif create mode 100644 modular_ss220/title_screen/icons/default.jpg rename modular_ss220/title_screen/icons/{SS220_Logo.png => logo.png} (100%) diff --git a/modular_ss220/title_screen/code/_title_screen_defines.dm b/modular_ss220/title_screen/code/_title_screen_defines.dm index 6f7822be0dfe..4e45566e432e 100644 --- a/modular_ss220/title_screen/code/_title_screen_defines.dm +++ b/modular_ss220/title_screen/code/_title_screen_defines.dm @@ -1,4 +1,4 @@ -#define DEFAULT_TITLE_SCREEN_IMAGE_PATH 'modular_ss220/title_screen/icons/default.gif' +#define DEFAULT_TITLE_SCREEN_IMAGE_PATH 'modular_ss220/title_screen/icons/default.jpg' #define DEFAULT_TITLE_HTML {" @@ -31,7 +31,14 @@ } hr { - border: 0.1em solid rgba(255, 255, 255, 0.1); + border: 0; + border-bottom: 0.15em solid rgba(255, 255, 255, 0.1); + } + + i { + width: 1em; + height: 1em; + transition: transform 0.2s; } .bg { @@ -49,24 +56,26 @@ .container_notice { position: absolute; box-sizing: border-box; - width: auto; - top: calc(50% - 10vmin); - right: 25%; - transform: translate(-50%, -50%); + width: 100vw; + top: 0; + left: 20em; + padding-right: 20em; + background-color: rgba(22, 22, 22, 0.85); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + transition: left 0.2s, padding 0.2s; z-index: 1; } + #hide_menu:checked ~ .container_notice { + left: 0; + padding-right: 0; + } + .menu_notice { - display: inline-block; - text-decoration: none; - width: 100%; - text-align: left; - color: red; - text-shadow: 1px 0px black, -1px 0px black, 0px 1px black, 0px -1px black, 2px 0px black, -2px 0px black, 0px 2px black, 0px -2px black; - margin-right: 0%; - margin-top: 0px; - font-size: 3vmin; - line-height: 2vmin; + margin: 0.75em 0.5em; + line-height: 1.75rem; + font-size: 1.5rem; + color: #bd2020; } .container_menu { @@ -74,29 +83,50 @@ flex-direction: column; justify-content: space-between; position: absolute; + overflow: hidden; box-sizing: border-box; bottom: 0; left: 0; - width: 22.5em; + width: 20em; height: 100vh; - background: linear-gradient(90deg, rgba(0,0,0,0.8) 91%, rgba(0,0,0,0) 100%); + background-color: rgba(22, 22, 22, 0.85); + border-right: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.2s; z-index: 2; } + #hide_menu:checked ~ .container_menu { + transform: translateX(-100%); + } + .container_logo { display: flex; flex-direction: column; align-items: center; - margin: 1em 2em 1em 0; + background-color: #191919; + box-shadow: 0 0.25em 1.75em rgba(0,0,0,0.75); } .logo { width: 17.5vw; + padding: 1em; + transform: scale(0.9); + } + + .character_info { + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 100%; + padding: 0.5em 0.75em; + background-color: rgba(255,255,255,0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.1) } .character { width: 100%; - margin: 0 1em; + margin-top: 0.25em; font-weight: bold; font-size: 1.2rem; text-align: right; @@ -104,52 +134,63 @@ } .character:first-of-type { - margin: 1.25em 0 0.5em 1.5em; font-weight: normal; font-size: 1.1rem; text-align: left; + margin: 0; color: #898989; } .container_buttons { flex: 1; text-align: left; - margin: 5em 2em 2.5em 0; + margin: 0.5em 0.5em 0.5em 0 } .menu_button { display: block; cursor: pointer; overflow: hidden; - font-size: 1.4rem; + position: relative; + font-size: 1.35rem; text-decoration: none; box-sizing: border-box; width: 100%; margin-bottom: 0.25em; - padding: 0.25em 0.5em; + padding: 0.25em 0.25em 0.25em 0.5em; color: #898989; border-radius: 0 0.25em 0.25em 0; transition: color 0.2s, background-color 0.2s; } + .menu_button::after { + content: ''; + position: absolute; + top: 50%; + left: 0; + width: 2px; + height: 0; + background-color: #d4dfec; + transform: translateY(-50%); + transition: height 0.2s; + } + + .menu_button:hover::after { + height: 100%; + } + .menu_button:hover, .link_button:hover { background-color: rgba(255, 255, 255, 0.075); color: #d4dfec; } - .menu_button:active - .link_button:active { - background-color: rgba(255,255,255, 0.125); - color: #d4dfec; - } - .container_links { display: flex; - margin-right: 1em; } .link_button { + position: relative; cursor: pointer; width: 100%; font-size: 1.5rem; @@ -157,6 +198,52 @@ color: #898989; transition: color 0.2s, background-color 0.2s; } + + .link_button::after { + content: ''; + position: absolute; + left: 50%; + bottom: 0; + width: 0; + height: 2px; + background-color: #d4dfec; + transform: translateX(-50%); + transition: width 0.2s; + } + + .link_button:hover::after { + width: 100%; + } + + .hide_button { + cursor: pointer; + position: fixed; + bottom: 0; + left: 20em; + padding: 0.9em; + vertical-align: middle; + background-color: rgba(22, 22, 22, 0.85); + color: #898989; + border: 1px solid rgba(255, 255, 255, 0.1); + border-width: 1px 1px 0 0; + transition: color 0.2s, left 0.2s; + } + + .hide_button i { + font-size: 1.5rem; + } + + .hide_button:hover { + color: #d4dfec; + } + + #hide_menu:checked ~ .container_menu .hide_button { + left: 0; + } + + #hide_menu:checked ~ .container_menu .hide_button i { + transform: rotate(180deg); + } diff --git a/modular_ss220/title_screen/code/asset_lobby.dm b/modular_ss220/title_screen/code/asset_lobby.dm index 2222a715656b..4143aa6744b9 100644 --- a/modular_ss220/title_screen/code/asset_lobby.dm +++ b/modular_ss220/title_screen/code/asset_lobby.dm @@ -1,5 +1,5 @@ /datum/asset/simple/lobby assets = list( "FixedsysExcelsior3.01Regular.ttf" = 'modular_ss220/title_screen/html/browser/FixedsysExcelsior3.01Regular.ttf', - "SS220_Logo.png" = 'modular_ss220/title_screen/icons/SS220_Logo.png', + "logo.png" = 'modular_ss220/title_screen/icons/logo.png', ) diff --git a/modular_ss220/title_screen/code/title_screen_datum.dm b/modular_ss220/title_screen/code/title_screen_datum.dm index 594afd7f76a8..3893407f3ee6 100644 --- a/modular_ss220/title_screen/code/title_screen_datum.dm +++ b/modular_ss220/title_screen/code/title_screen_datum.dm @@ -46,6 +46,8 @@ var/list/html = list(title_html) var/mob/new_player/player = user + html += {""} + var/screen_image_url = SSassets.transport.get_asset_url(asset_cache_item = screen_image) if(screen_image_url) html += {""} @@ -56,13 +58,14 @@

[notice]

"} - html += {"
"} html += {" "} html += {"
"} @@ -86,39 +89,37 @@ html += {"
"} html += {"
- - - + + +
"} - - html += "
" + html += {""} + html += {""} html += {"