More UI tweaks, prettied up Boot state, Updated Welcome state (may be I'll use it someday? 😁)

lib/pages/login.rb

@@ -105,13 +105,11 @@ class W3DHub
           end
 
           stack(width: 0.7, height: 1.0, margin_left: 8) do
-            link Store.account.username, text_size: 24, font: BOLD_FONT, tip: I18n.t(:"interface.profile"), width: 1.0, text_wrap: :none do
+            link Store.account.username, text_size: 24, font: BOLD_FONT, tip: I18n.t(:"interface.profile"), margin_top: 16, width: 1.0, text_wrap: :none do
               W3DHub.url("https://secure.w3dhub.com/forum/index.php?showuser=#{Store.account.id}")
             end
 
-            flow(width: 1.0) do
+            link(I18n.t(:"interface.log_out"), text_size: 22) { depopulate_account_info }
-              link(I18n.t(:"interface.log_out"), text_size: 22, width: 0.5) { depopulate_account_info }
-            end
           end
         end
       end

lib/states/boot.rb

@@ -8,8 +8,6 @@ class W3DHub
 
         theme(W3DHub::THEME)
 
-        background 0xff_252525
-
         @fraction = 0.0
         @w3dhub_logo = get_image("#{GAME_ROOT_PATH}/media/icons/app.png")
         @tasks = {
@@ -25,23 +23,23 @@ class W3DHub
 
         @task_index = 0
 
-        stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: W3DHub::BORDER_COLOR) do
+        stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: W3DHub::BORDER_COLOR, background_image: "#{GAME_ROOT_PATH}/media/banners/background.png", background_image_color: 0xff_525252, background_image_mode: :fill) do
           stack(width: 1.0, fill: true) do
           end
 
-          stack(width: 1.0, height: 75) do
+          stack(width: 1.0, height: 60) do
-            @progressbar = progress height: 25, width: 1.0
+            flow(width: 1.0, height: 26, margin_left: 16, margin_right: 16, margin_bottom: 8, margin_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
               para "#{I18n.t(:app_name)} #{W3DHub::VERSION}", width: 0.5, text_align: :right
             end
+
+            @progressbar = progress height: 4, width: 1.0, margin_left: 16, margin_right: 16, margin_bottom: 8
           end
         end
       end
 
       def draw
-        Gosu.draw_circle(window.width / 2, window.height / 2, @w3dhub_logo.width * (0.6 + Math.cos(Gosu.milliseconds / 1000.0 * Math::PI).abs * 0.05), 128, 0x44_000000, 32)
+        Gosu.draw_circle(window.width / 2, window.height / 2, @w3dhub_logo.width * (0.6 + Math.cos(Gosu.milliseconds / 1000.0 * Math::PI).abs * 0.05), 128, 0xaa_353535, 32)
         @w3dhub_logo.draw_rot(window.width / 2, window.height / 2, 32)
 
         super

lib/states/dialogs/confirm_dialog.rb

@@ -6,22 +6,22 @@ class W3DHub
 
         theme(W3DHub::THEME)
 
-        background 0xee_444444
+        background 0xaa_525252
 
         stack(width: 1.0, max_width: 720, height: 1.0, max_height: 480, v_align: :center, h_align: :center, background: 0xee_222222) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
+          flow(width: 1.0, height: 48, padding: 8) do
             background 0x88_000000
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 0.04, align: :center, color: 0xaa_ff0000
+            image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", height: 1.0, align: :center, color: 0xaa_ff0000
 
-            tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
+            title "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center, font: BOLD_FONT
           end
 
-          stack(width: 1.0, height: 0.78, padding: 16) do
+          stack(width: 1.0, fill: true, padding: 16) do
             para @options[:message], width: 1.0, text_align: :center
           end
 
-          flow(width: 1.0, height: 0.1, padding: 8) do
+          flow(width: 1.0, height: 46, padding: 8) do
             button "Cancel", width: 0.25 do
               pop_state
               @options[:cancel_callback]&.call

lib/states/dialogs/direct_connect_dialog.rb

@@ -7,16 +7,16 @@ class W3DHub
 
         theme(W3DHub::THEME)
 
-        background 0xee_444444
+        background 0xaa_525252
 
         stack(width: 1.0, max_width: 720, height: 1.0, max_height: 540, v_align: :center, h_align: :center, background: 0xee_222222) do
           # Title bar
-          flow(width: 1.0, height: 32, padding: 8) do
+          flow(width: 1.0, height: 36, padding: 8) do
             background 0x88_000000
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/export.png", width: 32, align: :center, color: 0xaa_ffffff
+            image "#{GAME_ROOT_PATH}/media/ui_icons/export.png", height: 1.0, align: :center, color: 0xaa_ffffff
 
-            tagline "<b>#{I18n.t(:"server_browser.direct_connect")}</b>", fill: true, text_align: :center
+            title "<b>#{I18n.t(:"server_browser.direct_connect")}</b>", fill: true, text_align: :center, font: BOLD_FONT
           end
 
           stack(width: 1.0, fill: true, scroll: true) do

lib/states/dialogs/game_settings_dialog.rb

@@ -13,13 +13,13 @@ class W3DHub
 
         @game_settings = GameSettings.new(@app_id, @channel)
 
-        background 0xee_444444
+        background 0xaa_525252
 
         stack(width: 1.0, max_width: 720, height: 1.0, max_height: 680, v_align: :center, h_align: :center, background: 0xee_222222, border_thickness: 2, border_color: 0xff_444444, padding: 10) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
+          flow(width: 1.0, height: 36, padding: 8) do
             background Store.application_manager.color(@app_id)
 
-            title @options[:title] || Store.application_manager.name(@app_id) || "Game Settings", fill: true, text_align: :center
+            title @options[:title] || Store.application_manager.name(@app_id) || "Game Settings", fill: true, text_align: :center, font: BOLD_FONT
           end
 
           stack(width: 1.0, fill: true, padding: 16, margin_top: 10) do
@@ -28,49 +28,49 @@ class W3DHub
                 tagline "General"
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Default to First Person", fill: true
+                  para "Default to First Person", fill: true, text_wrap: :none
                   toggle_button tip: "Default to First Person", checked: @game_settings.get_value(:default_to_first_person), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:default_to_first_person, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Background Downloads", fill: true
+                  para "Background Downloads", fill: true, text_wrap: :none
                   toggle_button tip: "Background Downloads", checked: @game_settings.get_value(:background_downloads), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:background_downloads, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Enable Hints", fill: true
+                  para "Enable Hints", fill: true, text_wrap: :none
                   toggle_button tip: "Enable Hints", checked: @game_settings.get_value(:hints_enabled), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:hints_enabled, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Enable Chat Log", fill: true
+                  para "Enable Chat Log", fill: true, text_wrap: :none
                   toggle_button tip: "Enable Chat Log", checked: @game_settings.get_value(:chat_log), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:chat_log, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Show FPS", fill: true
+                  para "Show FPS", fill: true, text_wrap: :none
                   toggle_button tip: "Show FPS", checked: @game_settings.get_value(:show_fps), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:show_fps, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Show Velocity", fill: true
+                  para "Show Velocity", fill: true, text_wrap: :none
                   toggle_button tip: "Show Velocity", checked: @game_settings.get_value(:show_velocity), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:show_velocity, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Show Damage Numbers", fill: true
+                  para "Show Damage Numbers", fill: true, text_wrap: :none
                   toggle_button tip: "Show Damage Numbers", checked: @game_settings.get_value(:show_damage_numbers), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:show_damage_numbers, btn.value)
                   end
@@ -87,7 +87,7 @@ class W3DHub
 
                   current_res = "#{@game_settings.get_value(:resolution_width)}x#{@game_settings.get_value(:resolution_height)}"
 
-                  para "Resolution", fill: true
+                  para "Resolution", fill: true, text_wrap: :none
                   list_box items: res_options, choose: current_res, width: 172, **BUTTON_STYLE do |value|
                     w, h = value.split("x", 2)
 
@@ -97,21 +97,21 @@ class W3DHub
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Windowed Mode", fill: true
+                  para "Windowed Mode", fill: true, text_wrap: :none
                   list_box items: @game_settings.get(:windowed_mode).options.map { |v| v[0] }, choose: @game_settings.get_value(:windowed_mode), width: 172, **BUTTON_STYLE do |value|
                     @game_settings.set_value(:windowed_mode, value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Enable VSync", fill: true
+                  para "Enable VSync", fill: true, text_wrap: :none
                   toggle_button tip: "Enable VSync", checked: @game_settings.get_value(:vsync), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:vsync, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Anti-aliasing", fill: true
+                  para "Anti-aliasing", fill: true, text_wrap: :none
                   list_box items: @game_settings.get(:anti_aliasing).options.map { |v| v[0] }, choose: @game_settings.get_value(:anti_aliasing), width: 72, **BUTTON_STYLE do |value|
                     @game_settings.set_value(:anti_aliasing, value)
                   end
@@ -124,7 +124,7 @@ class W3DHub
                 tagline "Audio"
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Master Volume", fill: true
+                  para "Master Volume", fill: true, text_wrap: :none
                   slider(height: 1.0, width: 172, value: @game_settings.get_value(:master_volume), margin_right: 8).subscribe(:changed) do |slider|
                     @game_settings.set_value(:master_volume, slider.value)
                   end
@@ -135,7 +135,7 @@ class W3DHub
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Sound Effects", fill: true
+                  para "Sound Effects", fill: true, text_wrap: :none
                   slider(height: 1.0, width: 172, value: @game_settings.get_value(:sound_effects_volume), margin_right: 8).subscribe(:changed) do |slider|
                     @game_settings.set_value(:sound_effects_volume, slider.value)
                   end
@@ -146,7 +146,7 @@ class W3DHub
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Dialogue", fill: true
+                  para "Dialogue", fill: true, text_wrap: :none
                   slider(height: 1.0, width: 172, value: @game_settings.get_value(:sound_dialog_volume), margin_right: 8).subscribe(:changed) do |slider|
                     @game_settings.set_value(:sound_dialog_volume, slider.value)
                   end
@@ -157,7 +157,7 @@ class W3DHub
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Music", fill: true
+                  para "Music", fill: true, text_wrap: :none
                   slider(height: 1.0, width: 172, value: @game_settings.get_value(:sound_music_volume), margin_right: 8).subscribe(:changed) do |slider|
                     @game_settings.set_value(:sound_music_volume, slider.value)
                   end
@@ -168,7 +168,7 @@ class W3DHub
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Cinematic", fill: true
+                  para "Cinematic", fill: true, text_wrap: :none
                   slider(height: 1.0, width: 172, value: @game_settings.get_value(:sound_cinematic_volume), margin_right: 8).subscribe(:changed) do |slider|
                     @game_settings.set_value(:sound_cinematic_volume, slider.value)
                   end
@@ -179,7 +179,7 @@ class W3DHub
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Play Sound with Game in Background", fill: true
+                  para "Play Sound with Game in Background", fill: true, text_wrap: :none
                   toggle_button tip: "Play Sound with Game in Background", checked: @game_settings.get_value(:sound_in_background), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:sound_in_background, btn.value)
                   end
@@ -190,14 +190,14 @@ class W3DHub
                 tagline "Performance"
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Texture Detail", fill: true
+                  para "Texture Detail", fill: true, text_wrap: :none
                   list_box items: @game_settings.get(:texture_detail).options.map { |v| v[0] }, choose: @game_settings.get_value(:texture_detail), width: 172, **BUTTON_STYLE do |value|
                     @game_settings.set_value(:texture_detail, value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Texture Filtering", fill: true
+                  para "Texture Filtering", fill: true, text_wrap: :none
                   list_box items: @game_settings.get(:texture_filtering).options.map { |v| v[0] }, choose: @game_settings.get_value(:texture_filtering), width: 172, **BUTTON_STYLE do |value|
                     @game_settings.set_value(:texture_filtering, value)
                   end
@@ -218,21 +218,21 @@ class W3DHub
                 # end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "Shadow Resolution", fill: true
+                  para "Shadow Resolution", fill: true, text_wrap: :none
                   list_box items: @game_settings.get(:shadow_resolution).options.map { |v| v[0] }, choose: @game_settings.get_value(:shadow_resolution), width: 172, **BUTTON_STYLE do |value|
                     @game_settings.set_value(:shadow_resolution, value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "High Quality Shadows", fill: true
+                  para "High Quality Shadows", fill: true, text_wrap: :none
                   toggle_button tip: "High Quality Shadows", checked: @game_settings.get_value(:background_downloads), **BUTTON_STYLE do |btn|
                     @game_settings.set_value(:background_downloads, btn.value)
                   end
                 end
 
                 flow(width: 1.0, height: 24, margin: 4, margin_left: 10) do
-                  para "FPS Limit", fill: true
+                  para "FPS Limit", fill: true, text_wrap: :none
                   list_box items: @game_settings.get(:fps).options.map { |v| v[0] }, choose: @game_settings.get_value(:fps), width: 172, **BUTTON_STYLE do |value|
                     @game_settings.set_value(:fps, value.to_i)
                   end

lib/states/dialogs/message_dialog.rb

@@ -6,22 +6,22 @@ class W3DHub
 
         theme(W3DHub::THEME)
 
-        background 0xee_444444
+        background 0xaa_525252
 
         stack(width: 1.0, max_width: 720, height: 1.0, max_height: 480, v_align: :center, h_align: :center, background: 0xee_222222) do
-          flow(width: 1.0, height: 32, padding: 8) do
+          flow(width: 1.0, height: 36, padding: 8) do
             background 0x88_000000
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", width: 32, align: :center, color: 0xff_ff8800
+            image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", height: 1.0, align: :center, color: 0xff_ff8800
 
-            tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
+            title "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center, font: BOLD_FONT
           end
 
           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
+          stack(width: 1.0, height: 46, padding: 8) do
             button "Okay", width: 1.0 do
               pop_state
             end

lib/states/dialogs/prompt_dialog.rb

@@ -6,15 +6,15 @@ class W3DHub
 
         theme(W3DHub::THEME)
 
-        background 0xee_444444
+        background 0xaa_525252
 
         stack(width: 1.0, max_width: 720, height: 1.0, max_height: 256, v_align: :center, h_align: :center, background: 0xee_222222) do
-          flow(width: 1.0, height: 32, padding: 8) do
+          flow(width: 1.0, height: 36, padding: 8) do
             background 0x88_000000
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 32, align: :center, color: 0xff_ff8800
+            image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", height: 1.0, align: :center, color: 0xff_ff8800
 
-            tagline "<b>#{@options[:title]}</b>", fill: true, text_align: :center
+            title "<b>#{@options[:title]}</b>", fill: true, text_align: :center, font: BOLD_FONT
           end
 
           stack(width: 1.0, fill: true, padding: 16) do
@@ -22,7 +22,7 @@ class W3DHub
             @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: 40, padding: 8) do
+          flow(width: 1.0, height: 46, padding: 8) do
             button "Cancel", width: 0.25 do
               pop_state
               @options[:cancel_callback]&.call(@prompt_entry.value)

lib/states/interface.rb

@@ -38,7 +38,9 @@ class W3DHub
             end
 
             @navigation_container = stack(fill: true, height: 1.0) do
-              flow(width: 1.0, fill: true) do
+              @nav_padding_top_container = flow(fill: true)
+
+              flow(width: 1.0, height: 36) do
                 # background 0xff_666666
 
                 link I18n.t(:"interface.games").upcase, text_size: 34, font: BOLD_FONT do
@@ -62,9 +64,11 @@ class W3DHub
                 end
               end
 
+              @nav_padding_bottom_container = flow(fill: true)
+
               # Installer task display
-              flow(width: 1.0, height: 0.5) do
+              @application_taskbar_container = 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
+                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 = para "", width: 0.60, text_wrap: :none
                     @application_taskbar_status_label = para "", width: 0.40, text_align: :right, text_wrap: :none
@@ -172,11 +176,15 @@ class W3DHub
       end
 
       def show_application_taskbar
+        @nav_padding_top_container.hide
+        @nav_padding_bottom_container.hide
         @application_taskbar_container.show
       end
 
       def hide_application_taskbar
         @application_taskbar_container.hide
+        @nav_padding_top_container.show
+        @nav_padding_bottom_container.show
       end
 
       def update_interface_task_status(task)

lib/states/welcome.rb

@@ -5,14 +5,13 @@ class W3DHub
         window.show_cursor = true
 
         theme(W3DHub::THEME)
-        background 0x88_252525
 
 
-        flow(width: 1.0, height: 1.0) do
+        flow(width: 1.0, height: 1.0, background_image: "#{GAME_ROOT_PATH}/media/banners/background.png", background_image_color: 0xff_525252, background_image_mode: :fill) 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
+            background 0xaa_353535
           end
 
           flow(fill: true)
@@ -30,7 +29,7 @@ class W3DHub
           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: 40) do
+        flow(width: 1.0, height: 46) do
           stack(fill: true, height: 1.0) do
             link "Skip", border_color_bottom: 0xff_777777 do
               pop_state
@@ -55,7 +54,7 @@ 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: 40) do
+        flow(width: 1.0, height: 46) do
           flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_welcome }
@@ -88,7 +87,7 @@ class W3DHub
           caption "Subscribe to our YouTube channel", margin_left: 32
         end
 
-        flow(width: 1.0, height: 40) do
+        flow(width: 1.0, height: 46) do
           flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_getting_started }

lib/theme.rb

@@ -104,6 +104,7 @@ class W3DHub
       checkmark_image: "#{GAME_ROOT_PATH}/media/ui_icons/checkmark.png"
     },
     Progress: {
+      background: 0xff_353535,
       fraction_background: 0xff_0074e0,
       border_thickness: 0
     },