Split off games and server browser into pages, theme tweaks.

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

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

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: {

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("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
+                  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
+            @page_host = 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
             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
+                      caption ["Silverlight", "PXD2000", "Alstar", "SteelGhost", "FRAYDO"].sample, text_wrap: :none
-                      inscription "RA_Under • 13:52", text_wrap: :none, text_size: 14, margin_top: -HALF_PADDING
+                      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

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"