Updated dialogs and welcome screen

lib/pages/community.rb

@@ -6,17 +6,15 @@ class W3DHub
 
         body.clear do
           stack(width: 1.0, height: 1.0, padding: 8) do
-            stack(width: 1.0, height: 0.15) do
+            stack(width: 1.0) do
               tagline "<b>Welcome to #{I18n.t(:app_name)}</b>"
               para "The #{I18n.t(:app_name_simple)} is a one-stop shop for your W3D gaming needs, providing game downloads, automatic updating, an integrated server browser, and centralized management of in-game options."
             end
 
-            flow(width: 1.0, height: 0.15, margin_bottom: 24) do
-              icon_container_width = 0.37
-              flow(width: (1.0 - icon_container_width) / 2, height: 1.0) do
-              end
+            flow(width: 1.0, height: 64, margin_bottom: 24) do
+              flow(fill: true, height: 1.0)
 
-              flow(width: icon_container_width, height: 1.0) do
+              flow(width: 64 * 4 + (3 * 32), height: 1.0) do
                 image "#{GAME_ROOT_PATH}/media/icons/app.png", hover: { color: 0xaa_ffffff }, height: 1.0, tip: "#{I18n.t(:app_name)} Github Repository" do
                   Launchy.open("https://github.com/cyberarm/w3d_hub_linux_launcher")
                 end
@@ -30,16 +28,18 @@ class W3DHub
                   Launchy.open("https://www.facebook.com/w3dhub")
                 end
               end
+
+              flow(fill: true, height: 1.0)
             end
 
-            stack(width: 1.0, height: 0.55) do
-              tagline "<b>Latest Updates</b>", height: 0.1
+            stack(width: 1.0, fill: true) do
+              tagline "<b>Latest Updates</b>"
 
-              @wd3hub_news_container = flow(width: 1.0, height: 0.9, padding: 8, scroll: true) do
+              @wd3hub_news_container = flow(width: 1.0, fill: true, padding: 8, scroll: true) do
               end
             end
 
-            stack(width: 1.0, height: 0.15, margin_top: 16) do
+            stack(width: 1.0, height: 72, margin_top: 16) do
               tagline "<b>Help & Support</b>"
               flow(width: 1.0) do
                 para "For help and support using this launcher or playing any W3D Hub game visit the"
@@ -83,7 +83,7 @@ class W3DHub
 
         return unless news
 
-        news.items[0..9].each do |item|
+        news.items[0..15].each do |item|
           Cache.fetch(uri: item.image, async: false)
         end
 
@@ -98,7 +98,7 @@ class W3DHub
         if (feed = @w3dhub_news)
           @wd3hub_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/games.rb

@@ -194,7 +194,7 @@ class W3DHub
 
         return false unless news
 
-        news.items[0..9].each do |item|
+        news.items[0..15].each do |item|
           Cache.fetch(uri: item.image, async: false)
         end
 

lib/pages/login.rb

@@ -32,7 +32,7 @@ class W3DHub
                   @password.enabled = false
                   btn.enabled = false
 
-                  # Todo lock whole UI until response or timeout
+                  # TODO: lock whole UI until response or timeout
 
                   # Do network stuff
 
@@ -46,7 +46,7 @@ class W3DHub
                         Store.settings[:account][:data] = account
                         Store.settings.save_settings
 
-                        Cache.fetch(account.avatar_uri, force_fetch: true, async: false) if account
+                        Cache.fetch(uri: account.avatar_uri, force_fetch: true, async: false) if account
                         applications = Api.applications if account
                       end
 
@@ -93,7 +93,6 @@ class W3DHub
       def populate_account_info
         @host.instance_variable_get(:"@account_container").clear do
           stack(width: 0.7, height: 1.0) do
-            # background 0xff_222222
             tagline "<b>#{Store.account.username}</b>"
 
             flow(width: 1.0) do
@@ -104,7 +103,8 @@ class W3DHub
             end
           end
 
-          stack(fill: true, height: 1.0) do
+          flow(fill: true, height: 1.0) do
+            flow(fill: true) # Fill empty space to push image over to container edge
             image Cache.path(Store.account.avatar_uri), height: 1.0
           end
         end
@@ -125,8 +125,7 @@ class W3DHub
             end
 
             @host.instance_variable_get(:"@account_container").clear do
-              stack(width: 0.7, height: 1.0) do
-                # background 0xff_222222
+              stack(width: 1.0, height: 1.0) do
                 tagline "<b>#{I18n.t(:"interface.not_logged_in")}</b>", text_wrap: :none
 
                 flow(width: 1.0) do

lib/pages/server_browser.rb

@@ -17,12 +17,23 @@ class W3DHub
 
         body.clear do
           stack(width: 1.0, height: 1.0, padding: 8) do
-            stack(width: 1.0, height: 0.04) do
+            stack(width: 1.0, height: 18) do
               inscription "<b>#{I18n.t(:"server_browser.filters")}</b>"
             end
 
             flow(width: 1.0, height: 32) do
-              flow(width: 0.75, height: 1.0) do
+              flow(width: 128, height: 1.0) do
+                # para I18n.t(:"server_browser.region"), width: 0.5
+                list_box items: ["Any", "North America", "Europe"], choose: Store.settings[:server_list_region], width: 1.0, height: 1.0, padding_top: 4, padding_bottom: 4 do |value|
+                  @filter_region = value
+                  Store.settings[:server_list_region] = @filter_region
+                  Store.settings.save_settings
+
+                  populate_server_list
+                end
+              end
+
+              flow(fill: true, height: 1.0) do
                 @filters.each do |app_id, enabled|
                   app = Store.applications.games.find { |a| a.id == app_id.to_s }
                   next unless app
@@ -31,7 +42,7 @@ class W3DHub
 
                   image image_path, tip: "#{app.name}", height: 1.0,
                         border_thickness_bottom: 1, border_color_bottom: 0x00_000000,
-                        color: enabled ? 0xff_ffffff : 0xff_444444, hover: { border_color_bottom: 0xff_aaaaaa }, margin_right: 16 do |img|
+                        color: enabled ? 0xff_ffffff : 0xff_444444, hover: { border_color_bottom: 0xff_aaaaaa }, margin_left: 16 do |img|
                     @filters[app_id] = !@filters[app_id]
                     Store.settings[:server_list_filters] = @filters
                     Store.settings.save_settings
@@ -48,21 +59,12 @@ class W3DHub
                   end
                 end
 
-                para I18n.t(:"server_browser.region")
-                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
-
-                  populate_server_list
-                end
-
                 # button get_image("#{GAME_ROOT_PATH}/media/ui_icons/return.png"), tip: I18n.t(:"server_browser.refresh"), image_height: 1.0, margin_left: 16, padding_left: 2, padding_right: 2, padding_top: 2, padding_bottom: 2 do
                 #   fetch_server_list
                 # end
               end
 
-              flow(width: 0.249, height: 1.0) do
+              flow(min_width: 372, width: 0.38, max_width: 512, height: 1.0) do
                 inscription "#{I18n.t(:"server_browser.nickname")}:", width: 0.32
                 @nickname_label = inscription "#{Store.settings[:server_list_username]}", width: 0.6
                 image "#{GAME_ROOT_PATH}/media/ui_icons/wrench.png", height: 16, hover: { color: 0xaa_ffffff }, tip: I18n.t(:"server_browser.set_nickname") do
@@ -78,14 +80,14 @@ class W3DHub
               end
             end
 
-            flow(width: 1.0, height: 0.9, margin_top: 16) do
-              stack(width: 0.62, height: 1.0) do
+            flow(width: 1.0, fill: true, margin_top: 16) do
+              stack(fill: true, height: 1.0) do
                 # Icon
                 # Hostname
                 # Current Map
                 # Players
                 # Ping
-                flow(width: 1.0, height: 0.05) do
+                flow(width: 1.0, height: 24) do
                   stack(width: 48, padding: 4) do
                   end
 
@@ -106,12 +108,12 @@ class W3DHub
                   end
                 end
 
-                @server_list_container = stack(width: 1.0, height: 0.95, scroll: true) do
+                @server_list_container = stack(width: 1.0, fill: true, scroll: true) do
                   para I18n.t(:"server_browser.fetching_server_list")
                 end
               end
 
-              @game_server_info_container = stack(width: 0.38, height: 1.0) do
+              @game_server_info_container = stack(min_width: 372, width: 0.38, max_width: 512, height: 1.0) do
                 para I18n.t(:"server_browser.no_server_selected"), width: 1.0, text_align: :center
               end
             end
@@ -244,13 +246,13 @@ class W3DHub
       def populate_server_info(server)
         @game_server_info_container.clear do
           stack(width: 1.0, height: 1.0, padding: 8) do
-            stack(width: 1.0, height: 0.3) do
+            stack(width: 1.0, height: 220) do
               flow(width: 1.0, height: 0.2) do
                 image game_icon(server), width: 0.05
                 tagline server.status.name, width: 0.949, text_wrap: :none
               end
 
-              stack(width: 1.0, height: 0.25) do
+              stack(width: 1.0, height: 0.2) do
                 game_installed = Store.application_manager.installed?(server.game, server.channel)
                 game_updatable = Store.application_manager.updateable?(server.game, server.channel)
                 style = server.channel != "release" ? TESTING_BUTTON : {}
@@ -294,30 +296,42 @@ class W3DHub
                 end
               end
 
-              stack(width: 1.0, height: 0.55, margin_top: 16) do
-                flow(width: 1.0, height: 0.33) do
+              # Server Info
+              stack(width: 1.0, fill: true, margin_top: 16) do
+                flow(width: 1.0) do
                   inscription "<b>#{I18n.t(:"server_browser.game")}</b>", width: 0.28, text_wrap: :none
                   inscription "#{game_name(server.game)} (#{server.channel})", width: 0.71, text_wrap: :none
                 end
 
-                flow(width: 1.0, height: 0.33) do
+                flow(width: 1.0) do
                   inscription "<b>#{I18n.t(:"server_browser.map")}</b>", width: 0.28, text_wrap: :none
                   inscription server.status.map, width: 0.71, text_wrap: :none
                 end
 
-                flow(width: 1.0, height: 0.33) do
+                flow(width: 1.0) do
                   inscription "<b>#{I18n.t(:"server_browser.max_players")}</b>", width: 0.28, text_wrap: :none
                   inscription "#{server.status.max_players}", width: 0.71, text_wrap: :none
                 end
+
+                flow(width: 1.0) do
+                  inscription "<b>#{I18n.t(:"server_browser.time")}</b>", width: 0.28, text_wrap: :none
+                  inscription formatted_rentime(server.status.started), width: 0.71, text_wrap: :none
+                end
+
+                flow(width: 1.0) do
+                  inscription "<b>#{I18n.t(:"server_browser.remaining")}</b>", width: 0.28, text_wrap: :none
+                  inscription "#{server.status.remaining}", width: 0.71, text_wrap: :none
+                end
               end
             end
 
             game_balance = server_game_balance(server)
 
-            flow(width: 1.0, height: 0.1, border_thickness_bottom: 2, border_color_bottom: 0x44_ffffff) do
+            # Game score and balance display
+            flow(width: 1.0, height: 48, border_thickness_bottom: 2, border_color_bottom: 0x44_ffffff) do
               stack(width: 0.4, height: 1.0) do
                 para "<b>#{server.status.teams[0].name} (#{server.status.players.select { |pl| pl.team == 0 }.count})</b>", width: 1.0, text_align: :center
-                para game_balance[:team_0_score].to_i.to_s, width: 1.0, text_align: :center
+                para formatted_score(game_balance[:team_0_score].to_i), width: 1.0, text_align: :center
               end
 
               stack(width: 0.2, height: 1.0) do
@@ -327,34 +341,39 @@ class W3DHub
 
               stack(width: 0.4, height: 1.0) do
                 para "<b>#{server.status.teams[1].name} (#{server.status.players.select { |pl| pl.team == 1 }.count})</b>", width: 1.0, text_align: :center
-                para game_balance[:team_1_score].to_i.to_s, width: 1.0, text_align: :center
+                para formatted_score(game_balance[:team_1_score].to_i), width: 1.0, text_align: :center
               end
             end
 
-            flow(width: 1.0, height: 0.60, scroll: true) do
+            # Team roster
+            flow(width: 1.0, fill: true, scroll: true) do
               stack(width: 0.5) do
-                server.status.players.select { |ply| ply.team == 0 }.sort_by { |ply| ply.score }.reverse.each do |player|
+                server.status.players.select { |ply| ply.team == 0 }.sort_by { |ply| ply.score }.reverse.each_with_index do |player, i|
                   flow(width: 1.0, height: 18) do
+                    background 0xff_333333 if i.even?
+
                     stack(width: 0.6, height: 1.0) do
                       inscription player.nick, text_size: 14, text_wrap: :none
                     end
 
                     stack(width: 0.4, height: 1.0) do
-                      inscription "#{player.score}", text_size: 14, width: 1.0, text_align: :right, text_wrap: :none
+                      inscription formatted_score(player.score), text_size: 14, width: 1.0, text_align: :right, text_wrap: :none
                     end
                   end
                 end
               end
 
               stack(width: 0.5, border_thickness_left: 2, border_color_left: 0xff_000000) do
-                server.status.players.select { |ply| ply.team == 1 }.sort_by { |ply| ply.score }.reverse.each do |player|
+                server.status.players.select { |ply| ply.team == 1 }.sort_by { |ply| ply.score }.reverse.each_with_index do |player, i|
                   flow(width: 1.0, height: 18) do
+                    background 0xff_333333 if i.even?
+
                     stack(width: 0.6, height: 1.0) do
                       inscription player.nick, text_size: 14, text_wrap: :none
                     end
 
                     stack(width: 0.4, height: 1.0) do
-                      inscription "#{player.score}", text_size: 14, width: 1.0, text_align: :right, text_wrap: :none
+                      inscription formatted_score(player.score), text_size: 14, width: 1.0, text_align: :right, text_wrap: :none
                     end
                   end
                 end
@@ -485,6 +504,20 @@ class W3DHub
           window.push_state(W3DHub::States::MessageDialog, type: "?", title: "?", message: "?")
         end
       end
+
+      def formatted_score(int)
+        int.to_s.reverse.scan(/.{1,3}/).join(",").reverse
+      end
+
+      def formatted_rentime(time)
+        range = Time.now - Time.parse(time)
+
+        hours   = range / 60.0 / 60.0 / 24.0
+        minutes = (range / 60.0) % 59
+        seconds = range % 59
+
+        format("%02d:%02d:%02d", hours, minutes, seconds)
+      end
     end
   end
 end

lib/states/interface.rb

@@ -27,78 +27,87 @@ class W3DHub
 
         theme(W3DHub::THEME)
 
-        stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: 0xff_aaaaaa) do
-          background 0xff_252525
+        @interface_container = flow(width: 1.0, height: 1.0) do
+          # TODO: Override this background color to be a darkened version of the selected games
+          #       or a default color
+          background 0xff_212121..0xff_111111
 
-          @header_container = flow(width: 1.0, height: 100, padding: 4) do
-            image "#{GAME_ROOT_PATH}/media/icons/app.png", width: 108
+          flow(fill: true, height: 1.0)
 
-            stack(fill: true, height: 1.0) do
-              # background 0xff_885500
+          stack(width: 1.0, max_width: MAX_PAGE_WIDTH, height: 1.0, border_thickness: 1, border_color: 0xff_aaaaaa) do
+            background 0xff_252525
 
-              @app_info_container = flow(width: 1.0, height: 0.65) do
-                # background 0xff_8855ff
+            @header_container = flow(width: 1.0, height: 100, padding: 4) do
+              image "#{GAME_ROOT_PATH}/media/icons/app.png", width: 108
 
-                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
-                      flow(width: 1.0, height: 0.65) do
-                        @application_taskbar_label = inscription "", width: 0.60, text_wrap: :none
-                        @application_taskbar_status_label = inscription "", width: 0.40, text_align: :right, text_wrap: :none
+              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(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
+                        flow(width: 1.0, height: 0.65) do
+                          @application_taskbar_label = inscription "", width: 0.60, text_wrap: :none
+                          @application_taskbar_status_label = inscription "", width: 0.40, text_align: :right, text_wrap: :none
+                        end
+
+                        @application_taskbar_progressbar = progress fraction: 0.0, height: 2, width: 1.0
                       end
-
-                      @application_taskbar_progressbar = progress fraction: 0.0, height: 2, width: 1.0
                     end
                   end
-                end
 
-                @account_container = flow(width: 256, height: 1.0) do
-                  stack(width: 0.7, height: 1.0) do
-                    background 0xff_222222
-                    tagline "<b>#{I18n.t(:"interface.not_logged_in")}</b>", text_wrap: :none
+                  @account_container = flow(width: 256, height: 1.0) do
+                    stack(width: 1.0, height: 1.0) do
+                      tagline "<b>#{I18n.t(:"interface.not_logged_in")}</b>", text_wrap: :none
 
-                    flow(width: 1.0) do
-                      link(I18n.t(:"interface.log_in"), text_size: 16, width: 0.5) { page(W3DHub::Pages::Login) }
-                      link I18n.t(:"interface.register"), text_size: 16, width: 0.49 do
-                        Launchy.open("https://secure.w3dhub.com/forum/index.php?app=core&module=global&section=register")
+                      flow(width: 1.0) do
+                        link(I18n.t(:"interface.log_in"), text_size: 16, width: 0.5) { page(W3DHub::Pages::Login) }
+                        link I18n.t(:"interface.register"), text_size: 16, width: 0.49 do
+                          Launchy.open("https://secure.w3dhub.com/forum/index.php?app=core&module=global&section=register")
+                        end
                       end
                     end
                   end
                 end
-              end
 
-              @navigation_container = flow(width: 1.0, height: 0.35) do
-                # background 0xff_666666
-                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
+                @navigation_container = flow(width: 1.0, height: 0.35) do
+                  # background 0xff_666666
+                  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
 
-                  link I18n.t(:"interface.server_browser"), margin_left: 18 do
-                    page(W3DHub::Pages::ServerBrowser)
-                  end
+                    link I18n.t(:"interface.server_browser"), margin_left: 18 do
+                      page(W3DHub::Pages::ServerBrowser)
+                    end
 
-                  link I18n.t(:"interface.community"), margin_left: 18 do
-                    page(W3DHub::Pages::Community)
-                  end
+                    link I18n.t(:"interface.community"), margin_left: 18 do
+                      page(W3DHub::Pages::Community)
+                    end
 
-                  link I18n.t(:"interface.downloads"), margin_left: 18 do
-                    page(W3DHub::Pages::DownloadManager)
-                  end
+                    link I18n.t(:"interface.downloads"), margin_left: 18 do
+                      page(W3DHub::Pages::DownloadManager)
+                    end
 
-                  link I18n.t(:"interface.settings"), margin_left: 18 do
-                    page(W3DHub::Pages::Settings)
+                    link I18n.t(:"interface.settings"), margin_left: 18 do
+                      page(W3DHub::Pages::Settings)
+                    end
+                    flow(fill: true, height: 1.0) # Hacky centering
                   end
-                  flow(fill: true, height: 1.0) # Hacky centering
                 end
               end
             end
+
+            @content_container = flow(width: 1.0, fill: true) do
+            end
           end
 
-          @content_container = flow(width: 1.0, fill: true) do
-          end
+          flow(fill: true, height: 1.0)
         end
 
         if Store.account

lib/states/message_dialog.rb

@@ -8,24 +8,30 @@ class W3DHub
 
         background 0xee_444444
 
-        stack(width: 1.0, height: 1.0, margin: 128, background: 0xee_222222) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
-            background 0x88_000000
+        flow(width: 1.0, height: 1.0) do
+          flow(fill: true, height: 1.0)
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", width: 0.04, align: :center, color: 0xff_ff8800
+          stack(width: 1.0, height: 1.0, max_width: MAX_PAGE_WIDTH, margin: 128, background: 0xee_222222) do
+            flow(width: 1.0, height: 32, padding: 8) do
+              background 0x88_000000
 
-            tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
-          end
+              image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", width: 32, align: :center, color: 0xff_ff8800
 
-          stack(width: 1.0, height: 0.78, padding: 16) do
-            para @options[:message], width: 1.0
-          end
+              tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
+            end
 
-          stack(width: 1.0, height: 0.1, padding: 8) do
-            button "Okay", width: 1.0 do
-              pop_state
+            stack(width: 1.0, fill: true, padding: 16) do
+              para @options[:message], width: 1.0
+            end
+
+            stack(width: 1.0, height: 40, padding: 8) do
+              button "Okay", width: 1.0 do
+                pop_state
+              end
             end
           end
+
+          flow(fill: true, height: 1.0)
         end
       end
 

lib/states/prompt_dialog.rb

@@ -8,35 +8,41 @@ class W3DHub
 
         background 0xee_444444
 
-        stack(width: 1.0, height: 1.0, margin: 128, background: 0xee_222222) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
-            background 0x88_000000
+        flow(width: 1.0, height: 1.0) do
+          flow(fill: true, height: 1.0)
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 0.04, align: :center, color: 0xff_ff8800
+          stack(width: 1.0, max_width: MAX_PAGE_WIDTH, height: 1.0, margin: 128, background: 0xee_222222) do
+            flow(width: 1.0, height: 32, padding: 8) do
+              background 0x88_000000
 
-            tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
-          end
+              image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 32, align: :center, color: 0xff_ff8800
 
-          stack(width: 1.0, height: 0.78, padding: 16) do
-            para @options[:message], width: 1.0
-            @prompt_entry = edit_line @options[:prefill].to_s, margin_top: 24, width: 1.0, autofocus: true, focus: true, type: @options[:input_type] == :password ? :password : :text
-          end
-
-          flow(width: 1.0, height: 0.1, padding: 8) do
-            button "Cancel", width: 0.25 do
-              pop_state
-              @options[:cancel_callback]&.call(@prompt_entry.value)
+              tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
             end
 
-            stack(width: 0.5)
+            stack(width: 1.0, fill: true, padding: 16) do
+              para @options[:message], width: 1.0
+              @prompt_entry = edit_line @options[:prefill].to_s, margin_top: 24, width: 1.0, autofocus: true, focus: true, type: @options[:input_type] == :password ? :password : :text
+            end
 
-            @accept_button = button "Accept", width: 0.25 do
-              if @options[:valid_callback]&.call(@prompt_entry.value)
+            flow(width: 1.0, height: 40, padding: 8) do
+              button "Cancel", width: 0.25 do
                 pop_state
-                @options[:accept_callback]&.call(@prompt_entry.value)
+                @options[:cancel_callback]&.call(@prompt_entry.value)
+              end
+
+              stack(fill: true)
+
+              @accept_button = button "Accept", width: 0.25 do
+                if @options[:valid_callback]&.call(@prompt_entry.value)
+                  pop_state
+                  @options[:accept_callback]&.call(@prompt_entry.value)
+                end
               end
             end
           end
+
+          flow(fill: true, height: 1.0)
         end
 
         @prompt_entry.subscribe(:changed) do

lib/states/welcome.rb

@@ -8,8 +8,14 @@ class W3DHub
         background 0x88_252525
 
 
-        @card_container = stack(width: 1.0, height: 1.0, margin: 128, padding: 16) do
-          background 0xff_252525
+        flow(width: 1.0, height: 1.0) do
+          flow(fill: true)
+
+          @card_container = stack(width: 1.0, max_width: MAX_PAGE_WIDTH, height: 1.0, max_height: 720, margin: 128, padding: 16) do
+            background 0xff_252525
+          end
+
+          flow(fill: true)
         end
 
         @card_container.clear do
@@ -18,14 +24,14 @@ class W3DHub
       end
 
       def card_welcome
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "Welcome", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Welcome to the #{I18n.t(:app_name_simple)}"
           caption "The #{I18n.t(:app_name_simple)} is a one-stop shop for your W3D gaming needs, providing game downloads, automatic updating, an integrated server browser, and centralized management of in-game options.", width: 1.0, margin_left: 32
         end
 
-        flow(width: 1.0, height: 0.1) do
-          stack(width: 0.83, height: 1.0) do
+        flow(width: 1.0, height: 40) do
+          stack(fill: true, height: 1.0) do
             link "Skip", border_color_bottom: 0xff_777777 do
               pop_state
             end
@@ -38,7 +44,7 @@ class W3DHub
       end
 
       def card_getting_started
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "Getting Started", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Import C&C Renegade"
           caption "You can import your installed copy of Renegade if it wasn't automatically imported from the Games tab. If you need to procure a copy of Renegade, EA's Origin Store has the Command & Conquer The Ultimate Collection available. We cannot provide Renegade for installation.", width: 1.0, margin_left: 32
@@ -49,8 +55,8 @@ class W3DHub
           caption "Browse our selection of games from the left panel of the Games tab.\n• Interim Apex - Renegade but with hundreds of vehicles and characters.\n• Red Alert: A Path Beyond - DESCRIPTION\n• Tiberian Sun: Reborn - DESCRIPTION\n\nAnd more... Check out the left panel on the Games tab.", width: 1.0, margin_left: 32
         end
 
-        flow(width: 1.0, height: 0.9) do
-          flow(width: 0.83, height: 1.0) do
+        flow(width: 1.0, height: 40) do
+          flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_welcome }
             end
@@ -67,7 +73,7 @@ class W3DHub
       end
 
       def card_communitiy
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "W3D Hub Community", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Forums"
           caption "Join our forum community", margin_left: 32
@@ -82,8 +88,8 @@ class W3DHub
           caption "Subscribe to our YouTube channel", margin_left: 32
         end
 
-        flow(width: 1.0, height: 0.1) do
-          flow(width: 0.83, height: 1.0) do
+        flow(width: 1.0, height: 40) do
+          flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_getting_started }
             end

lib/theme.rb

@@ -2,6 +2,8 @@ class W3DHub
   REGULAR_FONT = "#{GAME_ROOT_PATH}/media/fonts/NotoSans-Regular.ttf"
   BOLD_FONT = "#{GAME_ROOT_PATH}/media/fonts/NotoSans-Bold.ttf"
 
+  MAX_PAGE_WIDTH = 1200
+
   TESTING_BUTTON = {
     background: 0xff_ff8800,
     hover: {

lib/window.rb

@@ -18,6 +18,7 @@ class W3DHub
       end
 
       # push_state(W3DHub::States::DemoInputDelay)
+      # push_state(W3DHub::States::Welcome)
       push_state(W3DHub::States::Boot)
     end
 

locales/en.yml

@@ -53,3 +53,5 @@ en:
     set_nickname_message: Set a nickname that will be used when joining a server
     enter_password: Enter Password
     enter_password_message: This server requires a password
+    time: Time
+    remaining: Remaining