From 36610295cda60ada668f1ef94d6a03697dd524bc Mon Sep 17 00:00:00 2001 From: Cyberarm Date: Fri, 17 Apr 2026 17:43:05 -0500 Subject: [PATCH] Split off games and server browser into pages, theme tweaks. --- lib/pages/games.rb | 82 ++++++++++++++++++++++++++++++++++ lib/pages/server_browser.rb | 69 +++++++++++++++++++++++++++++ lib/theme.rb | 18 ++++++++ lib/window.rb | 86 ++++-------------------------------- media/ui/rounded_small.png | Bin 0 -> 212 bytes w3d_hub_linux_launcher.rb | 2 + 6 files changed, 179 insertions(+), 78 deletions(-) create mode 100644 media/ui/rounded_small.png diff --git a/lib/pages/games.rb b/lib/pages/games.rb index e69de29..bd7ec81 100644 --- a/lib/pages/games.rb +++ b/lib/pages/games.rb @@ -0,0 +1,82 @@ +module W3DHubLauncher + module Page + class Games < CyberarmEngine::Page + include GuiExt + + def setup + # game bar container + flow(width: 1.0, height: 60) do + flow(width: 220, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do + flow(width: 1.0, height: 40, margin_left: PADDING, v_align: :center, h_align: :center) do + image safe_get_image("./media/icons/menuGrid.png"), height: 40, color: 0xff_bbbbbb + link "ALL GAMES", text_size: 24, font: FONT_BLACK, height: 1.0, text_v_align: :center + end + end + + flow(fill: true, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK, margin_left: PADDING) do + image safe_get_image("./data/cache/apb.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0x88_5e5c64, border_thickness_bottom: 3, border_color_bottom: 0xff_3584e4, tip: "Red Alert: A Path Beyond" + image safe_get_image("./data/cache/ren.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Command & Conquer: Renegade" + image safe_get_image("./data/cache/tsr.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Tiberian Sun: Reborn" + image safe_get_image("./data/cache/woa.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Battle for Dune: War of Assassins" + end + end + + # game content container + flow(width: 1.0, fill: true, margin_top: LARGE_PADDING) do + # game info container + stack(width: 340, height: 1.0) do + # logo + image safe_get_image("/run/media/cyberarm/Storage/W3DHub/Launcher/package-cache/games/apb/logo.png.package"), width: 1.0, max_height: 124 + + # web links + stack(width: 1.0, fill: true, padding: 0, padding_top: LARGE_PADDING) do + link "Modifications", text_size: 24 + link "Bug Tracker", text_size: 24 + link "Player Statistics", text_size: 24 + end + + # launching ta game + caption "Game Version" + list_box items: [ "Release", "Open Testing" ], width: 1.0, margin_bottom: PADDING + flow(width: 1.0, height: 60) do + button "PLAY", fill: true, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_LEFT, **CTA_BUTTON_THEME + button safe_get_image("./media/icons/singleplayer.png"), image_height: 1.0, background_nine_slice: NINE_SLICE_SQUARE, **CTA_BUTTON_THEME + button safe_get_image("./media/icons/gear.png"), image_height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_RIGHT, **CTA_BUTTON_THEME + end + inscription "Version: 3.9.2.15", margin_top: PADDING + end + + # game events and news container + stack(fill: true, height: 1.0, margin_left: LARGE_PADDING, scroll: true) do + flow(width: 1.0, height: 1.0, max_height: 380, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do + image safe_get_image("./media/background.png"), fill: true, aspect_ratio: 16.0 / 9.0 + + stack(fill: true, height: 1.0, margin_left: PADDING) do + caption "Upcoming Event".upcase, color: 0xff_22aa11 + title "Red Alert: A Path Beyond Game Night" + tagline "July 11, 2028" + + flow(fill: true) + + button "Read More", margin_left: PADDING, margin_right: LARGE_PADDING, margin_bottom: PADDING, width: 1.0 + end + end + + # news container + flow(width: 1.0, margin_top: PADDING) do + 9.times do + stack(width: 1.0 / 3, height: 345, aspect_ratio: 1, margin_left: HALF_PADDING, margin_right: HALF_PADDING, margin_bottom: PADDING) do + stack(width: 1.0, fill: true, background_image: safe_get_image("./media/background.png"), background_image_mode: :fill) + stack(width: 1.0, height: 1.0 / 3, padding: PADDING, v_align: :bottom, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK, border_thickness_top: 1, border_color_top: Gosu::Color::BLACK) do + caption "NEWS", color: 0x88_ffffff + tagline "A News Item Post A News Item Post" + end + end + end + end + end + end + end + end + end +end diff --git a/lib/pages/server_browser.rb b/lib/pages/server_browser.rb index e69de29..c4525dc 100644 --- a/lib/pages/server_browser.rb +++ b/lib/pages/server_browser.rb @@ -0,0 +1,69 @@ +module W3DHubLauncher + module Page + class ServerBrowser < CyberarmEngine::Page + include GuiExt + + def setup + # game bar container + flow(width: 1.0, height: 60) do + flow(width: 220, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do + flow(width: 1.0, height: 40, margin_left: PADDING, v_align: :center, h_align: :center) do + image safe_get_image("./media/icons/menuGrid.png"), height: 40, color: 0xff_bbbbbb + link "ALL SERVERS", text_size: 24, font: FONT_BLACK, height: 1.0, text_v_align: :center + end + end + + flow(fill: true, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK, margin_left: PADDING) do + image safe_get_image("./data/cache/apb.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0x88_5e5c64, border_thickness_bottom: 3, border_color_bottom: 0xff_3584e4, tip: "Red Alert: A Path Beyond" + image safe_get_image("./data/cache/ren.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Command & Conquer: Renegade" + image safe_get_image("./data/cache/tsr.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Tiberian Sun: Reborn" + image safe_get_image("./data/cache/woa.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Battle for Dune: War of Assassins" + end + end + + # game content container + stack(width: 1.0, fill: true, margin_top: LARGE_PADDING, scroll: true) do + 10.times do + flow(width: 1.0, height: 48, padding_top: HALF_PADDING, padding_bottom: HALF_PADDING, margin_bottom: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0x44_000000, hover: { background_nine_slice_color: 0x88_000000 }) do + # app icon container + image(safe_get_image("./data/cache/apb.png"), width: 48, height: 1.0, margin_left: HALF_PADDING) + # friend name and status container + stack(fill: true, height: 1.0, margin_left: HALF_PADDING) do + stack(v_align: :center) do + # server name + caption ["Really Long Server Name Goes Here", "[US][W3D Hub] APB Game Night", "[US][W3D Hub] APB Co-op 3.7", "Really Long Server Name Goes Here Really Long Server Name Goes Here"].sample, text_wrap: :none + # server info + a = ["North America", "South America", "Europe", "Asia", "Antarctica", "Arctica", "Oceania"] + inscription "#{a.sample} • 13:52 / #{rand > 0.5 ? '∞' : '30:00'}", text_wrap: :none, margin_top: -HALF_PADDING + end + end + # server map + stack(width: 256, height: 1.0, margin_left: HALF_PADDING) do + stack(width: 1.0, fill: true, v_align: :center) do + caption ["RA_Under", "C&C Superduple Long Map Name Goes Here", "RA_NorthByNorthWest", "RA_HostileWatersParadox", "RA_PacificThreat"].sample, text_wrap: :none, width: 1.0, text_align: :center + inscription "map", text_wrap: :none, width: 1.0, text_align: :center, margin_top: -HALF_PADDING + end + end + + # server player count + stack(width: 96, height: 1.0, margin_left: HALF_PADDING) do + stack(width: 1.0, fill: true, v_align: :center) do + caption format("%d / %d", rand(60), rand(60..127)), width: 1.0, text_align: :center + inscription "players", text_wrap: :none, width: 1.0, text_align: :center, margin_top: -HALF_PADDING + end + end + # server ping + flow(width: 96, height: 1.0, margin_left: HALF_PADDING, margin_right: HALF_PADDING) do + stack(fill: true, height: 1.0, v_align: :center) do + caption format("%d ms", rand(16..360)), width: 1.0, text_align: :center + inscription "ping", text_wrap: :none, width: 1.0, text_align: :center, margin_top: -HALF_PADDING + end + stack(width: 8, height: rand(0.25..1.0), v_align: :center, min_height: 8, background_nine_slice: NINE_SLICE_ROUNDED_SMALL, background_nine_slice_from_edge: NINE_SLICE_EDGE_SMALL, background_nine_slice_color: [0xff_26a269, 0xff_e5a50a, 0xff_a51d2d, 0xff_3d3846].sample) + end + end + end + end + end + end + end +end diff --git a/lib/theme.rb b/lib/theme.rb index b1c818a..527cfcd 100644 --- a/lib/theme.rb +++ b/lib/theme.rb @@ -12,7 +12,9 @@ module W3DHubLauncher FONT_MONO = "./media/fonts/NotoSansMono-Regular.ttf" NINE_SLICE_EDGE = 8 + NINE_SLICE_EDGE_SMALL = 4 NINE_SLICE_ROUNDED = "./media/ui/rounded.png" + NINE_SLICE_ROUNDED_SMALL = "./media/ui/rounded_small.png" NINE_SLICE_ROUNDED_LEFT = "./media/ui/rounded_left.png" NINE_SLICE_ROUNDED_RIGHT = "./media/ui/rounded_right.png" NINE_SLICE_ROUNDED_TOP = "./media/ui/rounded_top.png" @@ -40,6 +42,21 @@ module W3DHubLauncher color: 0xff_888888 } }, + Inscription: { + text_size: 18 + }, + Caption: { + font: FONT_BOLD + }, + Tagline: { + font: FONT_BOLD + }, + Title: { + font: FONT_BOLD + }, + Banner: { + font: FONT_BLACK + }, Button: { font: FONT_BOLD, text_shadow: false, @@ -68,6 +85,7 @@ module W3DHubLauncher text_align: :left, text_size: 24, font: FONT_REGULAR, + padding_left: HALF_PADDING # background: 0xaa_000000, # border_color: 0xff_000000, # hover: { diff --git a/lib/window.rb b/lib/window.rb index 29454c6..9fa71d4 100644 --- a/lib/window.rb +++ b/lib/window.rb @@ -36,8 +36,8 @@ module W3DHubLauncher stack(fill: true, height: 1.0) do stack(fill: true) flow(width: 1.0) do - link "GAMES", text_v_align: :center, font: FONT_BLACK, margin_left: PADDING - link "SERVERS", text_v_align: :center, font: FONT_BLACK, margin_left: PADDING + link("GAMES", text_v_align: :center, font: FONT_BLACK, margin_left: PADDING) { page(Page::Games) } + link("SERVERS", text_v_align: :center, font: FONT_BLACK, margin_left: PADDING) { page(Page::ServerBrowser) } stack(fill: true) image safe_get_image("./media/icons/import.png"), height: 40, color: 0xff_bbbbbb image safe_get_image("./media/icons/information.png"), height: 40, color: 0xff_bbbbbb @@ -47,79 +47,7 @@ module W3DHubLauncher end # page content container - stack(width: 1.0, fill: true) do - # game bar container - flow(width: 1.0, height: 60) do - flow(width: 220, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do - flow(width: 1.0, height: 40, margin_left: PADDING, v_align: :center, h_align: :center) do - image safe_get_image("./media/icons/menuGrid.png"), height: 40, color: 0xff_bbbbbb - link "ALL GAMES", text_size: 24, font: FONT_BLACK, height: 1.0, text_v_align: :center - end - end - - flow(fill: true, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK, margin_left: PADDING) do - image safe_get_image("./data/cache/apb.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0x88_5e5c64, border_thickness_bottom: 3, border_color_bottom: 0xff_3584e4, tip: "Red Alert: A Path Beyond" - image safe_get_image("./data/cache/ren.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Command & Conquer: Renegade" - image safe_get_image("./data/cache/tsr.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Tiberian Sun: Reborn" - image safe_get_image("./data/cache/woa.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Battle for Dune: War of Assassins" - end - end - - # game content container - flow(width: 1.0, fill: true, margin_top: LARGE_PADDING) do - # game info container - stack(width: 340, height: 1.0) do - # logo - image safe_get_image("/run/media/cyberarm/Storage/W3DHub/Launcher/package-cache/games/apb/logo.png.package"), width: 1.0, max_height: 124 - - # web links - stack(width: 1.0, fill: true, padding: 0, padding_top: LARGE_PADDING) do - link "Modifications", text_size: 24 - link "Bug Tracker", text_size: 24 - link "Player Statistics", text_size: 24 - end - - # launching ta game - caption "Game Version" - list_box items: [ "Release", "Open Testing" ], width: 1.0, margin_bottom: PADDING - flow(width: 1.0, height: 60) do - button "PLAY", fill: true, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_LEFT, **CTA_BUTTON_THEME - button safe_get_image("./media/icons/singleplayer.png"), image_height: 1.0, background_nine_slice: NINE_SLICE_SQUARE, **CTA_BUTTON_THEME - button safe_get_image("./media/icons/gear.png"), image_height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_RIGHT, **CTA_BUTTON_THEME - end - inscription "Version: 3.9.2.15", margin_top: PADDING - end - - # game events and news container - stack(fill: true, height: 1.0, margin_left: LARGE_PADDING, scroll: true) do - flow(width: 1.0, height: 1.0, max_height: 380, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do - image safe_get_image("./media/background.png"), fill: true, aspect_ratio: 16.0 / 9.0 - - stack(fill: true, height: 1.0, margin_left: PADDING) do - caption "Upcoming Event", color: 0xff_22aa11, font: FONT_BOLD - title "Red Alert: A Path Beyond Game Night", font: FONT_BOLD - tagline "July 11, 2028" - - flow(fill: true) - - button "Read More", margin_left: PADDING, margin_right: LARGE_PADDING, margin_bottom: PADDING, width: 1.0 - end - end - - # news container - flow(width: 1.0, margin_top: PADDING) do - 9.times do - stack(width: 1.0 / 3, height: 345, aspect_ratio: 1, margin_left: HALF_PADDING, margin_right: HALF_PADDING, margin_bottom: PADDING) do - stack(width: 1.0, fill: true, background_image: safe_get_image("./media/background.png"), background_image_mode: :fill) - stack(width: 1.0, height: 1.0 / 3, padding: PADDING, v_align: :bottom, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK, border_thickness_top: 1, border_color_top: Gosu::Color::BLACK) do - caption "NEWS", color: 0x88_ffffff, font: FONT_BOLD - tagline "A News Item Post A News Item Post", font: FONT_BOLD - end - end - end - end - end - end + @page_host = stack(width: 1.0, fill: true) do end end @@ -136,7 +64,7 @@ module W3DHubLauncher stack(fill: true, height: 1.0, margin_left: HALF_PADDING) do flow(fill: true) # self name - caption "moonsense715test", font: FONT_BLACK, text_wrap: :none + caption "cyberarm", font: FONT_BLACK, text_wrap: :none # self set online state link "Online ▼", text_size: 18 do |l| menu(parent: l) do @@ -172,8 +100,8 @@ module W3DHubLauncher # friend name and status container stack(fill: true, height: 1.0, margin_left: HALF_PADDING, margin_right: HALF_PADDING) do stack(v_align: :center) do - caption "moonsense#{715 * (i + 1) % 1000}test", font: FONT_BOLD, text_wrap: :none, text_size: 20 - inscription "RA_Under • 13:52", text_wrap: :none, text_size: 14, margin_top: -HALF_PADDING + caption ["Silverlight", "PXD2000", "Alstar", "SteelGhost", "FRAYDO"].sample, text_wrap: :none + inscription "RA_Under • 13:52", text_wrap: :none, margin_top: -HALF_PADDING end end # friend active application container @@ -184,6 +112,8 @@ module W3DHubLauncher end end end + + page(Page::Games) end end end diff --git a/media/ui/rounded_small.png b/media/ui/rounded_small.png new file mode 100644 index 0000000000000000000000000000000000000000..ed0f7486bc6678c3a3afd134939598ec76b58102 GIT binary patch literal 212 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F5he4R}c>anMprB-l zYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt+k3E{-7BNQ@--On9N|-o zbN;_y#Oz1lW=Yp9bCp$Xjg05h`6ntlI53qRs5oXGU3%q-+(*4BA=!(caB55v>rIq% zV0_l`hkaj(3-^y_jm82Nah1!&J}%diU6gOMVOKSy%R77NKCz;cK+70BUHx3vIVCg! E0LSe{@&Et; literal 0 HcmV?d00001 diff --git a/w3d_hub_linux_launcher.rb b/w3d_hub_linux_launcher.rb index 636ec5c..3f24e8e 100644 --- a/w3d_hub_linux_launcher.rb +++ b/w3d_hub_linux_launcher.rb @@ -7,6 +7,8 @@ end require_relative "lib/version" require_relative "lib/gui_ext" require_relative "lib/theme" +require_relative "lib/pages/games" +require_relative "lib/pages/server_browser" require_relative "lib/window" require_relative "lib/worker"