Progress towards a resizable launcher window

lib/api.rb

@@ -47,7 +47,7 @@ class W3DHub
       rescue Async::TimeoutError
         logger.error(LOG_TAG) { "Connection to \"#{url}\" timed out after: #{API_TIMEOUT} seconds" }
         DummyResponse.new
-      rescue EOFError
+      rescue EOFError => e
         logger.error(LOG_TAG) { "Connection to \"#{url}\" errored:" }
         logger.error(LOG_TAG) { e }
         DummyResponse.new

lib/pages/games.rb

@@ -10,11 +10,11 @@ class W3DHub
 
         body.clear do
           # Games List
-          @games_list_container = stack(width: 0.15, height: 1.0, scroll: true) do
+          @games_list_container = stack(width: 0.15, max_width: 148, height: 1.0, scroll: true) do
           end
 
           # Game Menu
-          @game_page_container = stack(width: 0.85, height: 1.0) do
+          @game_page_container = stack(fill: true, height: 1.0) do
           end
         end
 
@@ -70,7 +70,7 @@ class W3DHub
           background game.color
 
           # Release channel
-          flow(width: 1.0, height: 0.03) do
+          flow(width: 1.0, height: 18) do
             # background 0xff_444411
 
             inscription I18n.t(:"games.channel")
@@ -82,11 +82,11 @@ class W3DHub
           end
 
           # Game Stuff
-          flow(width: 1.0, height: 0.88) do
+          flow(width: 1.0, fill: true) do
             # background 0xff_9999ff
 
             # Game options
-            stack(width: 0.25, height: 1.0, padding: 8, scroll: true) do
+            stack(width: 208, height: 1.0, padding: 8, scroll: true) do
               # background 0xff_550055
 
               if Store.application_manager.installed?(game.id, channel.id)
@@ -123,13 +123,13 @@ class W3DHub
             end
 
             # Game News
-            @game_news_container = flow(width: 0.75, height: 1.0, padding: 8, scroll: true) do
+            @game_news_container = flow(fill: true, height: 1.0, padding: 8, scroll: true) do
               # background 0xff_005500
             end
           end
 
           # Play buttons
-          flow(width: 1.0, height: 0.09, padding_top: 6) do
+          flow(width: 1.0, height: 48, padding_top: 6) do
             # background 0xff_551100
 
             if Store.application_manager.installed?(game.id, channel.id)
@@ -209,7 +209,7 @@ class W3DHub
         if (feed = @game_news[game.id])
           @game_news_container.clear do
             feed.items.sort_by { |i| i.timestamp }.reverse[0..9].each do |item|
-              flow(width: 0.5, height: 128, margin: 4) do
+              flow(width: 0.5, max_width: 312, height: 128, margin: 4) do
                 # background 0x88_000000
 
                 path = Cache.path(item.image)

lib/pages/login.rb

@@ -104,7 +104,9 @@ class W3DHub
             end
           end
 
-          image Cache.path(Store.account.avatar_uri), height: 1.0
+          stack(fill: true, height: 1.0) do
+            image Cache.path(Store.account.avatar_uri), height: 1.0
+          end
         end
       end
 

lib/pages/server_browser.rb

@@ -21,7 +21,7 @@ class W3DHub
               inscription "<b>#{I18n.t(:"server_browser.filters")}</b>"
             end
 
-            flow(width: 1.0, height: 0.06) do
+            flow(width: 1.0, height: 32) do
               flow(width: 0.75, height: 1.0) do
                 @filters.each do |app_id, enabled|
                   app = Store.applications.games.find { |a| a.id == app_id.to_s }
@@ -49,7 +49,7 @@ class W3DHub
                 end
 
                 para I18n.t(:"server_browser.region")
-                list_box items: ["Any", "North America", "Europe"], choose: Store.settings[:server_list_region], width: 0.2, height: 1.0 do |value|
+                list_box items: ["Any", "North America", "Europe"], choose: Store.settings[:server_list_region], width: 0.2, max_width: 64, height: 1.0 do |value|
                   @filter_region = value
                   Store.settings[:server_list_region] = @filter_region
                   Store.settings.save_settings
@@ -86,14 +86,14 @@ class W3DHub
                 # Players
                 # Ping
                 flow(width: 1.0, height: 0.05) do
-                  stack(width: 0.08) do
+                  stack(width: 48, padding: 4) do
                   end
 
-                  stack(width: 0.50, height: 1.0) do
+                  stack(width: 0.45, height: 1.0) do
                     para "<b>#{I18n.t(:"server_browser.hostname")}</b>", text_wrap: :none, width: 1.0
                   end
 
-                  flow(width: 0.24, height: 1.0) do
+                  flow(fill: true, height: 1.0) do
                     para "<b>#{I18n.t(:"server_browser.current_map")}</b>", text_wrap: :none, width: 1.0
                   end
 
@@ -101,7 +101,7 @@ class W3DHub
                     para "<b>#{I18n.t(:"server_browser.players")}</b>", text_wrap: :none, width: 1.0
                   end
 
-                  stack(width: 0.06) do
+                  stack(width: 48) do
                     para "<b>#{I18n.t(:"server_browser.ping")}</b>", text_wrap: :none, width: 1.0
                   end
                 end
@@ -175,9 +175,11 @@ class W3DHub
             i += 1
 
             server_container = flow(width: 1.0, height: 48, hover: { background: 0xff_555566 }, active: { background: 0xff_555588 }) do
-              background 0xff_333333 if i.odd?
+              background 0xff_333333 if i.even?
 
-              image game_icon(server), width: 0.08, padding: 4
+              flow(width: 48, height: 1.0, padding: 4) do
+                image game_icon(server), height: 1.0
+              end
 
               stack(width: 0.45, height: 1.0) do
                 inscription "<b>#{server&.status&.name}</b>"
@@ -188,11 +190,11 @@ class W3DHub
                 end
               end
 
-              flow(width: 0.30, height: 1.0) do
+              flow(fill: true, height: 1.0) do
                 inscription "#{server&.status&.map}"
               end
 
-              flow(width: 0.1, height: 1.0) do
+              flow(width: 0.11, height: 1.0) do
                 inscription "#{server&.status&.player_count}/#{server&.status&.max_players}"
               end
 
@@ -205,7 +207,9 @@ class W3DHub
               #   image "#{GAME_ROOT_PATH}/media/ui_icons/signal1.png", width: 0.05, color: 0xff_800000
               # end
 
-              image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 0.05, color: 0xff_444444
+              flow(width: 48, height: 1.0, padding: 4) do
+                image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", height: 1.0, color: 0xff_444444
+              end
             end
 
             def server_container.hit_element?(x, y)
@@ -389,7 +393,6 @@ class W3DHub
       end
 
       def server_game_balance(server)
-
         data = {
           icon: BLACK_IMAGE,
           color: 0xff_ffffff,
@@ -415,27 +418,27 @@ class W3DHub
         data[:team_0_score] = team_0_score
         data[:team_1_score] = team_1_score
 
-        data[:icon] = if  server.status.players.size < 20 && server.game != "ren"
+        data[:icon] = if server.status.players.size < 20 && server.game != "ren"
-          data[:color] = 0xff_600000
+                        data[:color] = 0xff_600000
-          data[:message] = "Too few players for a balanced game"
+                        data[:message] = "Too few players for a balanced game"
-          "#{GAME_ROOT_PATH}/media/ui_icons/cross.png"
+                        "#{GAME_ROOT_PATH}/media/ui_icons/cross.png"
-        elsif team_0_score + team_1_score < 2_500
+                      elsif team_0_score + team_1_score < 2_500
-          data[:message] = "Score to low to estimate game balance"
+                        data[:message] = "Score to low to estimate game balance"
-          data[:color] = 0xff_444444
+                        data[:color] = 0xff_444444
-          "#{GAME_ROOT_PATH}/media/ui_icons/question.png"
+                        "#{GAME_ROOT_PATH}/media/ui_icons/question.png"
-        elsif ratio.between?(0.75, 1.25)
+                      elsif ratio.between?(0.75, 1.25)
-          data[:message] = "Game seems balanced based on score"
+                        data[:message] = "Game seems balanced based on score"
-          data[:color] = 0xff_008000
+                        data[:color] = 0xff_008000
-          "#{GAME_ROOT_PATH}/media/ui_icons/checkmark.png"
+                        "#{GAME_ROOT_PATH}/media/ui_icons/checkmark.png"
-        elsif ratio < 0.75
+                      elsif ratio < 0.75
-          data[:color] = 0xff_dd8800
+                        data[:color] = 0xff_dd8800
-          data[:message] = "#{server.status.teams[0].name} is winning significantly"
+                        data[:message] = "#{server.status.teams[0].name} is winning significantly"
-          "#{GAME_ROOT_PATH}/media/ui_icons/arrowRight.png"
+                        "#{GAME_ROOT_PATH}/media/ui_icons/arrowRight.png"
-        else
+                      else
-          data[:color] = 0xff_dd8800
+                        data[:color] = 0xff_dd8800
-          data[:message] = "#{server.status.teams[1].name} is winning significantly"
+                        data[:message] = "#{server.status.teams[1].name} is winning significantly"
-          "#{GAME_ROOT_PATH}/media/ui_icons/arrowLeft.png"
+                        "#{GAME_ROOT_PATH}/media/ui_icons/arrowLeft.png"
-        end
+                      end
 
         data
       end

lib/states/boot.rb

@@ -24,14 +24,16 @@ class W3DHub
         @task_index = 0
 
         stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: 0xff_aaaaaa) do
-          stack(width: 1.0, height: 0.925) do
+          stack(width: 1.0, fill: true) do
           end
 
-          @progressbar = progress height: 0.025, width: 1.0
+          stack(width: 1.0, height: 75) do
+            @progressbar = progress height: 25, width: 1.0
 
-          flow(width: 1.0, height: 0.05, padding_left: 16, padding_right: 16, padding_bottom: 8, padding_top: 8) do
+            flow(width: 1.0, fill: true, padding_left: 16, padding_right: 16, padding_bottom: 8, padding_top: 8) do
-            @status_label = caption "Starting #{I18n.t(:app_name_simple)}...", width: 0.5
+              @status_label = caption "Starting #{I18n.t(:app_name_simple)}...", width: 0.5
-            inscription "#{I18n.t(:app_name)} #{W3DHub::VERSION}", width: 0.5, text_align: :right
+              inscription "#{I18n.t(:app_name)} #{W3DHub::VERSION}", width: 0.5, text_align: :right
+            end
           end
         end
       end

lib/states/interface.rb

@@ -30,16 +30,16 @@ class W3DHub
         stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: 0xff_aaaaaa) do
           background 0xff_252525
 
-          @header_container = flow(width: 1.0, height: 0.15, padding: 4) do
+          @header_container = flow(width: 1.0, height: 100, padding: 4) do
-            image "#{GAME_ROOT_PATH}/media/icons/app.png", width: 0.11
+            image "#{GAME_ROOT_PATH}/media/icons/app.png", width: 108
 
-            stack(width: 0.89, height: 1.0) do
+            stack(fill: true, height: 1.0) do
               # background 0xff_885500
 
               @app_info_container = flow(width: 1.0, height: 0.65) do
                 # background 0xff_8855ff
 
-                stack(width: 0.75, height: 1.0) do
+                stack(fill: true, height: 1.0) do
                   title "<b>#{I18n.t(:"app_name")}</b>", height: 0.5
                   flow(width: 1.0, height: 0.5) do
                     @application_taskbar_container = stack(width: 1.0, height: 1.0, margin_left: 16, margin_right: 16) do
@@ -53,9 +53,9 @@ class W3DHub
                   end
                 end
 
-                @account_container = flow(width: 0.25, height: 1.0) do
+                @account_container = flow(width: 256, height: 1.0) do
                   stack(width: 0.7, height: 1.0) do
-                    # background 0xff_222222
+                    background 0xff_222222
                     tagline "<b>#{I18n.t(:"interface.not_logged_in")}</b>", text_wrap: :none
 
                     flow(width: 1.0) do
@@ -70,7 +70,8 @@ class W3DHub
 
               @navigation_container = flow(width: 1.0, height: 0.35) do
                 # background 0xff_666666
-                flow(width: 1.0, height: 1.0, padding_left: 75) do
+                flow(width: 1.0, height: 1.0) do
+                  flow(fill: true, height: 1.0) # Hacky centering
                   link I18n.t(:"interface.games") do
                     page(W3DHub::Pages::Games)
                   end
@@ -90,12 +91,13 @@ class W3DHub
                   link I18n.t(:"interface.settings"), margin_left: 18 do
                     page(W3DHub::Pages::Settings)
                   end
+                  flow(fill: true, height: 1.0) # Hacky centering
                 end
               end
             end
           end
 
-          @content_container = flow(width: 1.0, height: 0.85) do
+          @content_container = flow(width: 1.0, fill: true) do
           end
         end
 

w3d_hub_linux_launcher.rb

@@ -106,7 +106,7 @@ Thread.new do
 end
 
 logger.info(W3DHub::LOG_TAG) { "Launching window..." }
-W3DHub::Window.new(width: 980, height: 720, borderless: false).show unless defined?(Ocra)
+W3DHub::Window.new(width: 980, height: 720, borderless: false, resizable: true).show unless defined?(Ocra)
 W3DHub::BackgroundWorker.shutdown!
 
 # Wait for BackgroundWorker to return