From 5092c828a713f4e890199a74f9bde4595c385f28 Mon Sep 17 00:00:00 2001 From: Cyberarm Date: Fri, 11 Sep 2026 13:06:59 -0500 Subject: [PATCH] Switch between battleview panel and server information panel when switching between games and server pages respectively. tweak layouts a smidge to correct for content-box to border-box CyberarmEngine gui changes --- lib/pages/games.rb | 8 +++ lib/pages/server_browser.rb | 16 ++++-- lib/states/interface.rb | 110 +++++++++++++++++++++--------------- 3 files changed, 83 insertions(+), 51 deletions(-) diff --git a/lib/pages/games.rb b/lib/pages/games.rb index c2b73be..aa4bff2 100644 --- a/lib/pages/games.rb +++ b/lib/pages/games.rb @@ -34,6 +34,14 @@ module W3DHubLauncher populate_game end + def focus + @parent.show_battleview_panel + end + + def blur + @parent.hide_battleview_panel + end + def populate_game_content_container @game_content_container.clear do # game info container diff --git a/lib/pages/server_browser.rb b/lib/pages/server_browser.rb index 3cc03ca..6b2c413 100644 --- a/lib/pages/server_browser.rb +++ b/lib/pages/server_browser.rb @@ -6,8 +6,6 @@ module W3DHubLauncher def setup @games_filter = [] - CyberarmEngine::EventBus.subscribe("game_server_pings", self, :handle_game_server_pings) - # game bar container flow(width: 1.0, height: 60) do widget(width: 220, height: 1.0, style_class: [:all_button]) do |w| @@ -51,8 +49,16 @@ module W3DHubLauncher populate_server_list end + def focus + CyberarmEngine::EventBus.subscribe("game_server_pings", self, :handle_game_server_pings) + + @parent.show_server_details_panel + end + def blur CyberarmEngine::EventBus.unsubscribe("game_server_pings", self) + + @parent.hide_server_details_panel end def handle_game_server_pings(payload) @@ -64,13 +70,13 @@ module W3DHubLauncher (MemCache[:servers] || []).select { |s| @games_filter.empty? ? true : @games_filter.include?(s.game) }.sort_by { |s| [s.player_count, -s.ping] }.reverse.each do |server| app = MemCache[:applications].find { |a| a.id == server.game } - widget(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: server.channel == "release" ? ALPHA_GRAY : 0xaa_c64600, hover: { background_nine_slice_color: 0xff_5e5c64 } , active: { background_nine_slice_color: 0xaa_5e5c64 }) do + widget(width: 1.0, height: 56 + PADDING, 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: server.channel == "release" ? ALPHA_GRAY : 0xaa_c64600, hover: { background_nine_slice_color: 0xff_5e5c64 } , active: { background_nine_slice_color: 0xaa_5e5c64 }) do # app icon container - image(safe_get_image("#{CACHE_PATH}/icon_#{app.id}.png"), tip: app.name, width: 48, height: 1.0, margin_left: HALF_PADDING) + image(safe_get_image("#{CACHE_PATH}/icon_#{app.id}.png"), tip: app.name, width: 56, height: 1.0, margin_left: HALF_PADDING) # server name, region, and times container stack(fill: true, height: 1.0, margin_left: HALF_PADDING) do - stack(v_align: :center) do + stack(width: 1.0, v_align: :center) do # server name caption server.name, text_wrap: :none, tip: server.name # server info diff --git a/lib/states/interface.rb b/lib/states/interface.rb index e6dbcc4..9393ac0 100644 --- a/lib/states/interface.rb +++ b/lib/states/interface.rb @@ -11,7 +11,7 @@ module W3DHubLauncher # content container stack(width: 1.0, fill: true, margin: PADDING) do # header bar container - flow(width: 1.0, height: 80, margin_bottom: PADDING) do |c| + flow(width: 1.0, height: 100, margin_bottom: PADDING) do |c| # logo + menu button button(safe_get_image("#{ROOT_PATH}/media/logo.png"), image_height: 1.0, background: 0, border_color: 0, hover: { background: 0 }, active: { background: 0, color: 0xff_ffffff }) do |btn| menu(parent: btn) do @@ -51,7 +51,7 @@ module W3DHubLauncher end # self account container - flow(width: 300, height: 80, margin_left: LARGE_PADDING) do + flow(width: 400, height: 80, margin_left: LARGE_PADDING) do # self avatar container stack(width: 80, height: 1.0, background_image: rounded_avatar(safe_get_image("#{ROOT_PATH}/media/default.png"))) do |i| i.subscribe(:clicked_left_mouse_button) do @@ -87,13 +87,13 @@ module W3DHubLauncher end # server details container - @server_details_container = stack(width: 300, height: 1.0, margin_left: HALF_PADDING, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do + @server_details_container = stack(width: 400, height: 1.0, margin_left: LARGE_PADDING, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do tagline "SERVER NAME HERE SERVER NAME HERE SERVER NAME HERE", text_wrap: :none image safe_get_image("#{ROOT_PATH}/media/default_map_preview.png"), width: 1.0, tip: "MAP NAME APPEARS HERE", margin_bottom: PADDING flow(width: 1.0) do stack(fill: true) - button "JOIN", **CTA_BUTTON_THEME + button "JOIN SERVER", **CTA_BUTTON_THEME, width: 1.0 stack(fill: true) end @@ -103,45 +103,45 @@ module W3DHubLauncher flow(width: 1.0) do stack(width: 1.0 / 3) do caption "Map", text_wrap: :none - para "TheBacon.mix", text_wrap: :none + inscription "TheBacon.mix", text_wrap: :none end - stack(width: 1.0 / 3) do + stack(width: 1.0 / 3, margin_left: HALF_PADDING) do caption "Ping", text_wrap: :none - para "9945ms", text_wrap: :none + inscription "9945ms", text_wrap: :none end - stack(width: 1.0 / 3) do + stack(width: 1.0 / 3, margin_left: HALF_PADDING) do caption "Players", text_wrap: :none - para "127/127", text_wrap: :none + inscription "127/127", text_wrap: :none end end flow(width: 1.0) do stack(width: 1.0 / 3) do caption "Next Map", text_wrap: :none - para "Bacon.mix", text_wrap: :none + inscription "Bacon.mix", text_wrap: :none end - stack(width: 1.0 / 3) do + stack(width: 1.0 / 3, margin_left: HALF_PADDING) do caption "Time", text_wrap: :none - para "00:00:00", text_wrap: :none + inscription "00:00:00", text_wrap: :none end - stack(width: 1.0 / 3) do + stack(width: 1.0 / 3, margin_left: HALF_PADDING) do caption "Time Left", text_wrap: :none - para "00:00:00", text_wrap: :none + inscription "00:00:00", text_wrap: :none end end flow(width: 1.0) do stack(width: 1.0 / 3) do caption "Region", text_wrap: :none - para "North America", text_wrap: :none + inscription "North America", text_wrap: :none end - stack(width: 1.0 / 3) do + stack(width: 1.0 / 3, margin_left: HALF_PADDING) do caption "Channel", text_wrap: :none - para "Release", text_wrap: :none + inscription "Release", text_wrap: :none end - stack(width: 1.0 / 3) do + stack(width: 1.0 / 3, margin_left: HALF_PADDING) do caption "Version", text_wrap: :none - para "3.8.1.0", text_wrap: :none + inscription "3.8.1.0", text_wrap: :none end end end @@ -154,19 +154,19 @@ module W3DHubLauncher flow(width: 1.0) do stack(width: 1 / 4.0) do caption "Score", text_wrap: :none - para "450,000", text_wrap: :none + inscription "450,000", text_wrap: :none end stack(width: 1 / 4.0) do caption "Kills", text_wrap: :none - para "4,500", text_wrap: :none + inscription "4,500", text_wrap: :none end stack(width: 1 / 4.0) do caption "Deaths", text_wrap: :none - para "450", text_wrap: :none + inscription "450", text_wrap: :none end stack(width: 1 / 4.0) do caption "Players", text_wrap: :none - para "45/127", text_wrap: :none + inscription "45/127", text_wrap: :none end end @@ -176,21 +176,21 @@ module W3DHubLauncher stack(fill: true) do caption "Name", text_wrap: :none end - stack(width: 1 / 5.0) do + stack(width: 1 / 7.0) do caption "Score", text_wrap: :none end - stack(width: 1 / 6.0) do + stack(width: 1 / 8.0) do caption "Kills", text_wrap: :none end - stack(width: 1 / 4.0) do + stack(width: 1 / 6.0) do caption "Deaths", text_wrap: :none end - # stack(width: 1 / 7.0) do - # caption "Ping", text_wrap: :none - # end - # stack(width: 1 / 7.0) do - # caption "Time", text_wrap: :none - # end + stack(width: 1 / 8.0) do + caption "Ping", text_wrap: :none + end + stack(width: 1 / 6.0) do + caption "Time", text_wrap: :none + end end 24.times do |i| @@ -198,21 +198,21 @@ module W3DHubLauncher stack(fill: true, margin_right: HALF_PADDING) do inscription ["[Dragon]rufeng", "PXD2000", "SteelGhost", "Winter_Spyder", "ChopBam", "cyberarm", "ChAoS", "Silverlight", "moonsense715test", "Name Goes Here Yall"].sample, text_wrap: :none end - stack(width: 1 / 5.0) do + stack(width: 1 / 7.0) do inscription "5,232", text_wrap: :none end - stack(width: 1 / 6.0) do + stack(width: 1 / 8.0) do inscription "341", text_wrap: :none end - stack(width: 1 / 4.0) do + stack(width: 1 / 6.0) do inscription "123", text_wrap: :none end - # stack(width: 1 / 7.0) do - # inscription "431", text_wrap: :none - # end - # stack(width: 1 / 7.0) do - # inscription "00:00:00", text_wrap: :none - # end + stack(width: 1 / 8.0) do + inscription "431", text_wrap: :none + end + stack(width: 1 / 6.0) do + inscription "00:00:00", text_wrap: :none + end end end end @@ -221,7 +221,7 @@ module W3DHubLauncher end # battleview/friends container - @battleview_container = stack(width: 300, height: 1.0, margin_left: LARGE_PADDING, visible: false) do + @battleview_container = stack(width: 400, height: 1.0, margin_left: LARGE_PADDING) do # friend management container flow(width: 1.0, height: 60) do flow(width: 1.0, v_align: :center) do @@ -235,25 +235,25 @@ module W3DHubLauncher stack(width: 1.0, fill: true, margin_top: LARGE_PADDING, scroll: true) do 50.times do |i| # friend container - widget(width: 1.0, height: 48, padding_top: HALF_PADDING, padding_bottom: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, hover: { background_nine_slice_color: ALPHA_GRAY }, active: { background_nine_slice_color: ALPHA_BLACK }) do |w| + widget(width: 1.0, height: 68, padding_top: HALF_PADDING, padding_bottom: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, hover: { background_nine_slice_color: ALPHA_GRAY }, active: { background_nine_slice_color: ALPHA_BLACK }) do |w| w.subscribe(:clicked_left_mouse_button) do puts "HELLO THERE" end # friend avatar container - stack(width: 48, height: 1.0, margin_left: HALF_PADDING, background_image: rounded_avatar(safe_get_image("#{ROOT_PATH}/media/default.png"))) do + stack(width: 48 + HALF_PADDING, height: 1.0, margin_left: HALF_PADDING, background_image: rounded_avatar(safe_get_image("#{ROOT_PATH}/media/default.png")), background_image_mode: :fill) do stack(width: 12, height: 12, v_align: :bottom, h_align: :right, background_image: safe_get_image("#{ROOT_PATH}/media/ui/circle_small.png"), background_image_color: 0xff_26a269) end # 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 + stack(width: 1.0, v_align: :center) do 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 - stack(width: 48, height: 1.0, margin_right: HALF_PADDING, background_image: safe_get_image("#{ROOT_PATH}/media/logo.png")) + stack(width: 48, height: 1.0, margin_right: HALF_PADDING, background_image: safe_get_image("#{ROOT_PATH}/media/logo.png"), background_image_mode: :fill) end end end @@ -263,9 +263,27 @@ module W3DHubLauncher end end + hide_server_details_panel + page(Page::Games) end + def hide_battleview_panel + @battleview_container.hide + end + + def show_battleview_panel + @battleview_container.show + end + + def hide_server_details_panel + @server_details_container.hide + end + + def show_server_details_panel + @server_details_container.show + end + def button_up(id) super