Server profiles can now be deleted from Asterisk and game_title is now correctly saved to server profile when first created.

Gemfile.lock

@@ -3,7 +3,7 @@ GEM
   specs:
     base64 (0.2.0)
     concurrent-ruby (1.2.3)
-    cyberarm_engine (0.24.1)
+    cyberarm_engine (0.24.2)
       excon (~> 0.88)
       gosu (~> 1.1)
       gosu_more_drawables (~> 0.3)

lib/api/applications.rb

@@ -22,7 +22,7 @@ class W3DHub
         def initialize(hash)
           @data = hash
 
-          @id = @data[:id]
+          @id = @data[:id].to_s
           @name = @data[:name]
           @type = @data[:type]
           @category = @data[:category]
@@ -44,7 +44,7 @@ class W3DHub
           def initialize(hash)
             @data = hash
 
-            @id = @data[:id]
+            @id = @data[:id].to_s
             @name = @data[:name]
             @user_level = @data[:"user-level"]
             @current_version = @data[:"current-version"]

lib/application_manager.rb

@@ -459,6 +459,13 @@ class W3DHub
       Store.applications.games.detect { |g| g.id == app_id }&.name
     end
 
+    def channel_name(app_id, channel_id)
+      app = Store.applications.games.detect { |g| g.id.to_s == app_id.to_s }
+      return unless app
+
+      app.channels.detect { |g| g.id.to_s == channel_id.to_s }&.name
+    end
+
     # No application tasks are being done
     def idle?
       !busy?

lib/pages/community.rb

@@ -45,10 +45,10 @@ class W3DHub
               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"
-                link("W3D Hub forums", text_size: 16, tip: "https://w3dhub.com/forum/") { W3DHub.url("https://w3dhub.com/forum/") }
+                link("W3D Hub forums", text_size: 22, tip: "https://w3dhub.com/forum/") { W3DHub.url("https://w3dhub.com/forum/") }
                 para "or join us in"
                 image "#{GAME_ROOT_PATH}/media/social_media_icons/discord.png", height: 16, padding_top: 4
-                link("#tech-support", text_size: 16, tip: "https://discord.com/invite/GYhW7eV") { W3DHub.url("https://discord.com/invite/GYhW7eV") }
+                link("#tech-support", text_size: 22, tip: "https://discord.com/invite/GYhW7eV") { W3DHub.url("https://discord.com/invite/GYhW7eV") }
                 para "on the W3D Hub Discord server"
               end
             end
@@ -113,15 +113,15 @@ class W3DHub
 
             #     stack(width: 0.6, height: 1.0) do
             #       stack(width: 1.0, height: 112) do
-            #         link "<b>#{item.title}</b>", text_size: 18 do
+            #         link "<b>#{item.title}</b>", text_size: 22 do
             #           W3DHub.url(item.uri)
             #         end
-            #         inscription item.blurb.gsub(/\n+/, "\n").strip[0..180]
+            #         para item.blurb.gsub(/\n+/, "\n").strip[0..180]
             #       end
 
             #       flow(width: 1.0) do
-            #         inscription item.timestamp.strftime("%Y-%m-%d"), width: 0.499
-            #         link I18n.t(:"games.read_more"), width: 0.5, text_align: :right, text_size: 16 do
+            #         para item.timestamp.strftime("%Y-%m-%d"), width: 0.499
+            #         link I18n.t(:"games.read_more"), width: 0.5, text_align: :right, text_size: 22 do
             #           W3DHub.url(item.uri)
             #         end
             #       end
@@ -139,12 +139,12 @@ class W3DHub
 
                 stack(fill: true, height: 1.0, padding: 4, border_thickness_left: 1, border_color_left: lighten(Gosu::Color.new(0xff_252525))) do
                   tagline "<b>#{item.title}</b>", width: 1.0
-                  inscription item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true
+                  para item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true
 
-                  flow(width: 1.0, height: 32, margin_top: 8) do
+                  flow(width: 1.0, height: 36, margin_top: 8) do
                     stack(fill: true, height: 1.0) do
                       flow(fill: true)
-                      inscription "#{item.author} • #{item.timestamp.strftime("%Y-%m-%d")}"
+                      para "#{item.author} • #{item.timestamp.strftime("%Y-%m-%d")}"
                     end
 
                     button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4 do

lib/pages/download_manager.rb

@@ -39,19 +39,19 @@ class W3DHub
 
                 stack(margin_left: 8, width: 0.75) do
                   @application_name_label = tagline "#{task.application.name}"
-                  @application_version_label = inscription "Version: #{task.target_version} (#{task.channel.id})"
+                  @application_version_label = para "Version: #{task.target_version} (#{task.channel.id})"
                 end
               end
 
               flow(width: 0.30, height: 1.0) do
                 stack(width: 0.499, height: 1.0) do
                   para "Download Speed", width: 1.0, text_align: :center
-                  @download_speed_label = inscription "- b/s", width: 1.0, text_align: :center
+                  @download_speed_label = para "- b/s", width: 1.0, text_align: :center
                 end
 
                 stack(width: 0.5, height: 1.0) do
                   para "Downloaded", width: 1.0, text_align: :center
-                  inscription "---- b / ---- b", width: 1.0, text_align: :center
+                  para "---- b / ---- b", width: 1.0, text_align: :center
                 end
               end
             end
@@ -68,8 +68,8 @@ class W3DHub
                   background 0xff_333333 if i.odd?
 
                   flow(width: 1.0, height: 22) do
-                    @operation_info["#{key}_name"] = inscription operation.label, width: 0.7, text_wrap: :none, tag: "#{key}_name"
-                    @operation_info["#{key}_status"] = inscription operation.value, width: 0.3, text_align: :right, text_wrap: :none, tag: "#{key}_status"
+                    @operation_info["#{key}_name"] = para operation.label, width: 0.7, text_wrap: :none, tag: "#{key}_name"
+                    @operation_info["#{key}_status"] = para operation.value, width: 0.3, text_align: :right, text_wrap: :none, tag: "#{key}_status"
                   end
 
                   @operation_info["#{key}_progress"] = progress fraction: operation.progress, height: 2, width: 1.0, tag: "#{key}_progress"

lib/pages/games.rb

@@ -63,7 +63,7 @@ class W3DHub
                 image "#{GAME_ROOT_PATH}/media/ui_icons/import.png", width: 24, margin_left: -4, margin_top: -6, color: 0xff_ff8800 if Store.application_manager.updateable?(game.id, game.channels.first.id)
               end
 
-              # inscription game.name, width: 1.0, text_align: :center, text_size: 16
+              # para game.name, width: 1.0, text_align: :center
             end
 
             def game_button.hit_element?(x, y)
@@ -128,7 +128,7 @@ class W3DHub
                     flow(width: 1.0, height: 22, margin_bottom: 8) do
                       image "#{GAME_ROOT_PATH}/media/ui_icons/#{hash[:icon]}.png", width: 24 if hash[:icon]
                       image EMPTY_IMAGE, width: 24 unless hash[:icon]
-                      link key, text_size: 18, enabled: hash.key?(:enabled) ? hash[:enabled] : true do
+                      link key, text_size: 22, enabled: hash.key?(:enabled) ? hash[:enabled] : true do
                         hash[:block]&.call
                       end
                     end
@@ -138,7 +138,7 @@ class W3DHub
                 game.web_links.each do |item|
                   flow(width: 1.0, height: 22, margin_bottom: 8) do
                     image "#{GAME_ROOT_PATH}/media/ui_icons/share1.png", width: 24
-                    link item.name, text_size: 18 do
+                    link item.name, text_size: 22 do
                       W3DHub.url(item.uri)
                     end
                   end
@@ -148,7 +148,7 @@ class W3DHub
               if game.channels.count > 1
                 # Release channel
 
-                inscription I18n.t(:"games.game_version"), width: 1.0, text_align: :center
+                para I18n.t(:"games.game_version"), width: 1.0, text_align: :center
 
                 flow(width: 1.0, height: 48) do
                   # background 0xff_444411
@@ -225,7 +225,7 @@ class W3DHub
                 # Height should match Game Banner container height
                 stack(width: 1.0, padding: 16) do
                   title "About #{game.name}", border_bottom_color: 0xff_666666, border_bottom_thickness: 1, width: 1.0
-                  para "Command & Conquer: Tiberian Sun is a 1999 real-time stretegy video game by Westwood Studios, published by Electronic Arts, releaseed exclusively for Microsoft Windows on August 27th, 1999. The game is the sequel to the 1995 game Command & Conquer. It featured new semi-3D graphics, a more futuristic sci-fi setting, and new gameplay features such as vehicles capable of hovering and burrowing.", width: 1.0, text_size: 20
+                  para "Command & Conquer: Tiberian Sun is a 1999 real-time stretegy video game by Westwood Studios, published by Electronic Arts, releaseed exclusively for Microsoft Windows on August 27th, 1999. The game is the sequel to the 1995 game Command & Conquer. It featured new semi-3D graphics, a more futuristic sci-fi setting, and new gameplay features such as vehicles capable of hovering and burrowing.", width: 1.0
                 end
               end
 
@@ -325,7 +325,7 @@ class W3DHub
                   stack(width: 166, height: 224, margin: 8, background: 0x88_151515, border_color: game.color, border_thickness: 1) do
                     flow(width: 1.0, height: 24, padding: 8) do
                       para "Favorite", fill: true
-                      toggle_button checked: Store.application_manager.favorite?(game.id), text_size: 18, padding_top: 3, padding_right: 3, padding_bottom: 3, padding_left: 3 do |btn|
+                      toggle_button checked: Store.application_manager.favorite?(game.id), text_size: 22, padding_top: 3, padding_right: 3, padding_bottom: 3, padding_left: 3 do |btn|
                         Store.application_manager.favorive(game.id, btn.value)
                         Store.settings.save_settings
 
@@ -424,12 +424,12 @@ class W3DHub
 
                 stack(fill: true, height: 1.0, padding: 4, border_thickness_left: 1, border_color_left: lighten(Gosu::Color.new(game.color))) do
                   tagline "<b>#{item.title}</b>", width: 1.0
-                  inscription item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true
+                  para item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true
 
-                  flow(width: 1.0, height: 32, margin_top: 8) do
+                  flow(width: 1.0, height: 36, margin_top: 8) do
                     stack(fill: true, height: 1.0) do
                       flow(fill: true)
-                      inscription "#{item.author} • #{item.timestamp.strftime("%Y-%m-%d")}"
+                      para "#{item.author} • #{item.timestamp.strftime("%Y-%m-%d")}"
                     end
 
                     button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4, margin_left: 0, margin_top: 0, margin_bottom: 0, margin_right: 0 do
@@ -472,7 +472,7 @@ class W3DHub
                 background 0x44_000000
 
                 title event.title, width: 1.0, text_align: :center
-                tagline event.start_time.strftime("%A"), text_size: 36, width: 1.0, text_align: :center
+                title event.start_time.strftime("%A"), width: 1.0, text_align: :center
                 caption event.start_time.strftime("%B %e, %Y %l:%M %p"), width: 1.0, text_align: :center
               end
             end
@@ -505,12 +505,12 @@ class W3DHub
               stack(width: 0.75, height: 1.0) do
                 stack(width: 1.0, height: 128 - 28) do
                   link(mod[:name]) { W3DHub.url(mod[:url]) }
-                  inscription "Author: #{mod[:author]} | #{mod[:type]} | #{mod[:subtype]}"
+                  para "Author: #{mod[:author]} | #{mod[:type]} | #{mod[:subtype]}"
                   para mod[:description][0..180]
                 end
 
                 flow(width: 1.0, height: 28, padding: 4) do
-                  inscription "Version", width: 0.25, text_align: :center
+                  para "Version", width: 0.25, text_align: :center
                   list_box items: mod[:versions], width: 0.5, enabled: mod[:versions].size > 1, padding_top: 0, padding_bottom: 0
                   button "Install", width: 0.25, padding_top: 0, padding_bottom: 0
                 end

lib/pages/login.rb

@@ -92,19 +92,7 @@ class W3DHub
 
       def populate_account_info
         @host.instance_variable_get(:"@account_container").clear do
-          stack(width: 0.7, height: 1.0) do
-            tagline "<b>#{Store.account.username}</b>"
-
-            flow(width: 1.0) do
-              link(I18n.t(:"interface.log_out"), text_size: 16, width: 0.5) { depopulate_account_info }
-              link I18n.t(:"interface.profile"), text_size: 16, width: 0.49 do
-                W3DHub.url("https://secure.w3dhub.com/forum/index.php?showuser=#{Store.account.id}")
-              end
-            end
-          end
-
           flow(fill: true, height: 1.0) do
-            flow(fill: true) # Fill empty space to push image over to container edge
             avatar_image = get_image(Cache.path(Store.account.avatar_uri))
             mask_image = get_image("#{GAME_ROOT_PATH}/media/textures/circle_mask.png")
 
@@ -115,6 +103,14 @@ class W3DHub
 
             image composite_image, width: 1.0
           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"), margin_top: 16, width: 1.0, text_wrap: :none do
+              W3DHub.url("https://secure.w3dhub.com/forum/index.php?showuser=#{Store.account.id}")
+            end
+
+            link(I18n.t(:"interface.log_out"), text_size: 22) { depopulate_account_info }
+          end
         end
       end
 
@@ -137,8 +133,8 @@ class W3DHub
                 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
+                  link(I18n.t(:"interface.log_in"), text_size: 22, width: 0.5) { page(W3DHub::Pages::Login) }
+                  link I18n.t(:"interface.register"), text_size: 22, width: 0.49 do
                     W3DHub.url("https://secure.w3dhub.com/forum/index.php?app=core&module=global&section=register")
                   end
                 end

lib/pages/server_browser.rb

@@ -8,7 +8,7 @@ class W3DHub
 
         @selected_server ||= nil
         @selected_server_container ||= nil
-        @selected_color = 0xff_666655
+        @selected_color = 0xaa_666655
 
         @filters = Store.settings[:server_list_filters] || {}
         @filter_region = Store.settings[:server_list_region] || "Any" # "Any", "North America", "Europe"
@@ -22,14 +22,14 @@ class W3DHub
           stack(width: 1.0, height: 1.0, padding: 8) do
             background 0xaa_252525
 
-            stack(width: 1.0, height: 18) do
-              inscription "<b>#{I18n.t(:"server_browser.filters")}</b>"
+            stack(width: 1.0, height: 22) do
+              para "<b>#{I18n.t(:"server_browser.filters")}</b>", font: BOLD_FONT
             end
 
-            flow(width: 1.0, height: 32) do
+            flow(width: 1.0, height: 36) 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|
+                list_box items: ["Any", "North America", "Europe", "Asia"], 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
@@ -78,8 +78,8 @@ class W3DHub
               flow(min_width: 372, width: 0.38, max_width: 512, height: 1.0) do |container|
                 flow(fill: true)
 
-                inscription "#{I18n.t(:"server_browser.nickname")}:"
-                @nickname_label = inscription "#{Store.settings[:server_list_username]}"
+                para "#{I18n.t(:"server_browser.nickname")}:"
+                @nickname_label = para "#{Store.settings[:server_list_username]}"
                 image "#{GAME_ROOT_PATH}/media/ui_icons/wrench.png", height: 16, hover: { color: 0xaa_ffffff }, tip: I18n.t(:"server_browser.set_nickname") do
                   # Prompt for player name
                   W3DHub.prompt_for_nickname(
@@ -105,23 +105,23 @@ class W3DHub
                 # Players
                 # Ping
                 flow(width: 1.0, height: 24) do
-                  stack(width: 48, padding: 4) do
+                  stack(width: 56, padding: 4) do
                   end
 
                   stack(width: 0.45, height: 1.0) do
-                    para "<b>#{I18n.t(:"server_browser.hostname")}</b>", text_wrap: :none, width: 1.0
+                    para "<b>#{I18n.t(:"server_browser.hostname")}</b>", text_wrap: :none, width: 1.0, font: BOLD_FONT
                   end
 
                   flow(fill: true, height: 1.0) do
-                    para "<b>#{I18n.t(:"server_browser.current_map")}</b>", text_wrap: :none, width: 1.0
+                    para "<b>#{I18n.t(:"server_browser.current_map")}</b>", text_wrap: :none, width: 1.0, font: BOLD_FONT
                   end
 
                   flow(width: 0.11, height: 1.0) do
-                    para "<b>#{I18n.t(:"server_browser.players")}</b>", text_wrap: :none, width: 1.0
+                    para "<b>#{I18n.t(:"server_browser.players")}</b>", text_wrap: :none, width: 1.0, font: BOLD_FONT
                   end
 
-                  stack(width: 48) do
-                    para "<b>#{I18n.t(:"server_browser.ping")}</b>", text_wrap: :none, width: 1.0
+                  stack(width: 56) do
+                    para "<b>#{I18n.t(:"server_browser.ping")}</b>", text_wrap: :none, width: 1.0, font: BOLD_FONT
                   end
                 end
 
@@ -248,7 +248,7 @@ class W3DHub
         server_ping    = find_element_by_tag(server_container, :ping)
 
         server_name.value = "<b>#{server&.status&.name}</b>"
-        server_channel.value = server.channel
+        server_channel.value = Store.application_manager.channel_name(server.game, server.channel).to_s
         server_region.value = server.region
         server_map.value = server&.status&.map
         player_count.value = "#{server&.status&.player_count}/#{server&.status&.max_players}"
@@ -303,35 +303,35 @@ class W3DHub
           Store.server_list.each do |server|
             next unless @filters[server.game.to_sym]
             next unless server.region == @filter_region || @filter_region == "Any"
-            # next unless server.channel == "release"
+            next unless Store.application_manager.channel_name(server.game, server.channel) # can user access required game and channel for this server?
 
             i += 1
 
-            server_container = flow(width: 1.0, height: 48, hover: { background: 0xff_555566 }, active: { background: 0xff_555588 }, tag: server.id, tip: ping_tip(server)) do
-              background 0xff_333333 if i.even?
+            server_container = flow(width: 1.0, height: 56, hover: { background: 0xaa_555566 }, active: { background: 0xaa_555588 }, tag: server.id, tip: ping_tip(server)) do
+              background 0x88_333333 if i.even?
 
-              flow(width: 48, height: 1.0, padding: 4) do
+              flow(width: 56, height: 1.0, padding: 4) do
                 image game_icon(server), height: 1.0, tag: :game_icon
               end
 
               stack(width: 0.45, height: 1.0) do
-                inscription "<b>#{server&.status&.name}</b>", tag: :server_name
+                para server&.status&.name, tag: :server_name, font: BOLD_FONT, text_wrap: :none
 
                 flow(width: 1.0, height: 1.0) do
-                  inscription server.channel, margin_right: 64, text_size: 16, tag: :server_channel
-                  inscription server.region, text_size: 16, tag: :server_region
+                  para Store.application_manager.channel_name(server.game, server.channel).to_s, width: 172, margin_right: 8, tag: :server_channel
+                  para server.region, tag: :server_region
                 end
               end
 
               flow(fill: true, height: 1.0) do
-                inscription "#{server&.status&.map}", tag: :server_map
+                para "#{server&.status&.map}", tag: :server_map
               end
 
               flow(width: 0.11, height: 1.0) do
-                inscription "#{server&.status&.player_count}/#{server&.status&.max_players}", tag: :player_count
+                para "#{server&.status&.player_count}/#{server&.status&.max_players}", tag: :player_count
               end
 
-              flow(width: 48, height: 1.0, padding: 4) do
+              flow(width: 56, height: 1.0, padding: 4) do
                 image ping_icon(server), height: 1.0, tag: :ping
               end
             end
@@ -368,17 +368,17 @@ 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: 220) do
-              flow(width: 1.0, height: 0.2) do
+            stack(width: 1.0, height: 208) do
+              flow(width: 1.0, height: 34) do
                 flow(fill: true)
 
-                image game_icon(server), width: 0.05
-                tagline server.status.name, text_wrap: :none
+                image game_icon(server), height: 1.0
+                title server.status.name, text_wrap: :none
 
                 flow(fill: true)
               end
 
-              flow(width: 1.0, height: 0.2) do
+              flow(width: 1.0, height: 46, margin_top: 16, margin_bottom: 16) 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 : {}
@@ -422,8 +422,8 @@ class W3DHub
                   end
                 end
 
-                if Store.developer_mode
-                  list_box(items: (1..12).to_a.map(&:to_s), margin_left: 16, **TESTING_BUTTON)
+                if W3DHUB_DEVELOPER
+                  list_box(items: (1..12).to_a.map(&:to_s), margin_left: 16, width: 72, tip: "Number of game clients", **TESTING_BUTTON)
                   button "Multijoin", tip: "Launch multiple clients with configured username_\#{number}", **TESTING_BUTTON, enabled: true
                 end
 
@@ -431,30 +431,25 @@ class W3DHub
               end
 
               # Server Info
-              stack(width: 1.0, fill: true, margin_top: 16) do
+              stack(width: 1.0, fill: true, margin_bottom: 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
+                  para "<b>#{I18n.t(:"server_browser.game")}</b>", width: 0.12, text_wrap: :none, font: BOLD_FONT
+                  para "#{game_name(server.game)} (#{server.channel})", width: 0.71, text_wrap: :none
                 end
 
                 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
+                  para "<b>#{I18n.t(:"server_browser.map")}</b>", width: 0.12, text_wrap: :none, font: BOLD_FONT
+                  para server.status.map, width: 0.71, text_wrap: :none
                 end
 
                 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
+                  para "<b>#{I18n.t(:"server_browser.time")}</b>", width: 0.12, text_wrap: :none, font: BOLD_FONT
+                  para formatted_rentime(server.status.started), text_wrap: :none
 
-                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
+                  unless server.status.remaining =~ /00:00:00|00.00.00/
+                    para "<b>#{I18n.t(:"server_browser.remaining")}</b>", margin_left: 16, margin_right: 8, text_wrap: :none, font: BOLD_FONT
+                    para "#{server.status.remaining}", text_wrap: :none
+                  end
                 end
               end
             end
@@ -462,9 +457,9 @@ class W3DHub
             game_balance = server_game_balance(server)
 
             # Game score and balance display
-            flow(width: 1.0, height: 48, border_thickness_bottom: 2, border_color_bottom: 0x44_ffffff) do
+            flow(width: 1.0, height: 52, border_thickness_bottom: 2, border_color_bottom: 0x44_ffffff) do
               stack(fill: true, 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 "#{server.status.teams[0].name} (#{server.status.players.select { |pl| pl.team == 0 }.count})", width: 1.0, text_align: :center, font: BOLD_FONT
                 para formatted_score(game_balance[:team_0_score].to_i), width: 1.0, text_align: :center
               end
 
@@ -479,7 +474,7 @@ class W3DHub
               end
 
               stack(fill: true, 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 "#{server.status.teams[1].name} (#{server.status.players.select { |pl| pl.team == 1 }.count})", width: 1.0, text_align: :center, font: BOLD_FONT
                 para formatted_score(game_balance[:team_1_score].to_i), width: 1.0, text_align: :center
               end
             end
@@ -488,15 +483,15 @@ class W3DHub
             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_with_index do |player, i|
-                  flow(width: 1.0, height: 18) do
-                    background 0xff_333333 if i.even?
+                  flow(width: 1.0, height: 26) do
+                    background 0xaa_333333 if i.even?
 
                     stack(width: 0.6, height: 1.0) do
-                      inscription player.nick, text_size: 16, text_wrap: :none
+                      para player.nick, text_wrap: :none
                     end
 
                     stack(width: 0.4, height: 1.0) do
-                      inscription formatted_score(player.score), text_size: 16, width: 1.0, text_align: :right, text_wrap: :none
+                      para formatted_score(player.score), width: 1.0, text_align: :right, text_wrap: :none
                     end
                   end
                 end
@@ -504,15 +499,15 @@ class W3DHub
 
               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_with_index do |player, i|
-                  flow(width: 1.0, height: 18) do
-                    background 0xff_333333 if i.even?
+                  flow(width: 1.0, height: 26) do
+                    background 0xaa_333333 if i.even?
 
                     stack(width: 0.6, height: 1.0) do
-                      inscription player.nick, text_size: 16, text_wrap: :none
+                      para player.nick, text_wrap: :none
                     end
 
                     stack(width: 0.4, height: 1.0) do
-                      inscription formatted_score(player.score), text_size: 16, width: 1.0, text_align: :right, text_wrap: :none
+                      para formatted_score(player.score), width: 1.0, text_align: :right, text_wrap: :none
                     end
                   end
                 end

lib/pages/settings.rb

@@ -11,7 +11,7 @@ class W3DHub
               para "<b>Launcher Language</b>", width: 0.249, margin_left: 32, margin_top: 12
               stack(width: 0.75) do
                 @language_menu = list_box items: I18n.available_locales.map { |l| expand_language_code(l.to_s) }, choose: expand_language_code(Store.settings[:language]), width: 1.0
-                inscription "Select the UI language you'd like to use in the W3D Hub Launcher."
+                para "Select the UI language you'd like to use in the W3D Hub Launcher."
               end
             end
 
@@ -22,7 +22,7 @@ class W3DHub
 
                 stack(width: 0.75) do
                   @app_install_dir_input = edit_line Store.settings[:app_install_dir], width: 1.0
-                  inscription "The folder into which new games and apps will be installed by the launcher"
+                  para "The folder into which new games and apps will be installed by the launcher"
                 end
               end
 
@@ -31,7 +31,7 @@ class W3DHub
 
                 stack(width: 0.75) do
                   @package_cache_dir_input = edit_line Store.settings[:package_cache_dir], width: 1.0
-                  inscription "A folder which will be used to cache downloaded packages used to install games and apps"
+                  para "A folder which will be used to cache downloaded packages used to install games and apps"
                 end
               end
             end
@@ -42,7 +42,7 @@ class W3DHub
                 para "<b>Wine Command</b>", width: 0.249, margin_left: 32, margin_top: 12
                 stack(width: 0.75) do
                   @wine_command_input = edit_line Store.settings[:wine_command], width: 1.0
-                  inscription "Command to use to for Windows compatiblity layer"
+                  para "Command to use to for Windows compatiblity layer"
                 end
               end
 
@@ -50,7 +50,7 @@ class W3DHub
                 para "<b>Wine Prefix</b>", width: 0.249, margin_left: 32, margin_top: 12
                 stack(width: 0.75) do
                   @wine_prefix_toggle = toggle_button checked: Store.settings[:wine_prefix]
-                  inscription "Whether each game gets its own prefix. Uses global/default prefix by default."
+                  para "Whether each game gets its own prefix. Uses global/default prefix by default."
                 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
-            @progressbar = progress height: 25, width: 1.0
-
-            flow(width: 1.0, fill: true, padding_left: 16, padding_right: 16, padding_bottom: 8, padding_top: 8) do
+          stack(width: 1.0, height: 60) do
+            flow(width: 1.0, height: 26, margin_left: 16, margin_right: 16, margin_bottom: 8, margin_top: 8) do
               @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
+              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
@@ -41,7 +41,7 @@ class W3DHub
                 end
 
                 @server_delete_button = button get_image("#{GAME_ROOT_PATH}/media/ui_icons/minus.png"), image_height: 1.0, tip: "Remove selected profile" do
-                  push_state(ConfirmDialog, message: "Purge server profile")
+                  push_state(ConfirmDialog, title: "Are you sure?", message: "Remove Server Profile: \"#{@server_profiles_list.value}\"?", accept_callback: -> { delete_server_profile(server_profile_from_name(@server_profiles_list.value)) })
                 end
 
                 @server_edit_button = button get_image("#{GAME_ROOT_PATH}/media/ui_icons/save.png"), image_height: 1.0, tip: "Edit and save selected profile" do
@@ -162,7 +162,7 @@ class W3DHub
             end
           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
             end
@@ -257,7 +257,7 @@ class W3DHub
               server_profile: @server_profiles_list.value,
               server_hostname: @server_hostname.value,
               server_port: @server_port.value,
-              game: @games_list.value,
+              game_title: @games_list.value,
               launch_arguments: @launch_arguments.value,
               irc_profile: @irc_profiles_list.value
             }
@@ -275,6 +275,24 @@ class W3DHub
         @changes_made = false
       end
 
+      def delete_server_profile(profile)
+        index = W3DHub::Store[:asterisk_config].server_profiles.index(profile)
+        return unless index
+
+        W3DHub::Store[:asterisk_config].server_profiles.delete(profile)
+
+        W3DHub::Store[:asterisk_config].save_config
+
+        @server_profiles_list.items = W3DHub::Store[:asterisk_config].server_profiles.map { |pf| pf.name }
+        if W3DHub::Store[:asterisk_config].server_profiles.size.positive?
+          @server_profiles_list.choose = W3DHub::Store[:asterisk_config].server_profiles[index - 1 > 0 ? index - 1 : 0].name
+        end
+      end
+
+      def server_profile_from_name(name)
+        W3DHub::Store[:asterisk_config].server_profiles.find { |pf| name == pf.name }
+      end
+
       def game_from_title(title)
         W3DHub::Store[:asterisk_config].games.find { |g| title == g.title }
       end
@@ -362,7 +380,8 @@ class W3DHub
       end
 
       def delete_irc_profile(profile)
-        index = W3DHub::Store[:asterisk_config].irc_profiles.index(profile) || 0
+        index = W3DHub::Store[:asterisk_config].irc_profiles.index(profile)
+        return unless index
 
         W3DHub::Store[:asterisk_config].irc_profiles.delete(profile)
 

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,36 +38,40 @@ 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 do
+                link I18n.t(:"interface.games").upcase, text_size: 34, font: BOLD_FONT do
                   page(W3DHub::Pages::Games)
                 end
 
-                link I18n.t(:"interface.servers").upcase, text_size: 34, margin_left: 12 do
+                link I18n.t(:"interface.servers").upcase, text_size: 34, font: BOLD_FONT, margin_left: 12 do
                   page(W3DHub::Pages::ServerBrowser)
                 end
 
-                link I18n.t(:"interface.community").upcase, text_size: 34, margin_left: 12 do
+                link I18n.t(:"interface.community").upcase, text_size: 34, font: BOLD_FONT, margin_left: 12 do
                   page(W3DHub::Pages::Community)
                 end
 
-                link I18n.t(:"interface.downloads").upcase, text_size: 34, margin_left: 12 do
+                link I18n.t(:"interface.downloads").upcase, text_size: 34, font: BOLD_FONT, margin_left: 12 do
                   page(W3DHub::Pages::DownloadManager)
                 end
 
-                link I18n.t(:"interface.settings").upcase, text_size: 34, margin_left: 12 do
+                link I18n.t(:"interface.settings").upcase, text_size: 34, font: BOLD_FONT, margin_left: 12 do
                   page(W3DHub::Pages::Settings)
                 end
               end
 
+              @nav_padding_bottom_container = flow(fill: true)
+
               # Installer task display
-              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
+              @application_taskbar_container = flow(width: 1.0, height: 0.5) 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 = inscription "", width: 0.60, text_wrap: :none
-                    @application_taskbar_status_label = inscription "", width: 0.40, text_align: :right, text_wrap: :none
+                    @application_taskbar_label = para "", width: 0.60, text_wrap: :none
+                    @application_taskbar_status_label = para "", width: 0.40, text_align: :right, text_wrap: :none
                   end
 
                   @application_taskbar_progressbar = progress fraction: 0.0, height: 2, width: 1.0
@@ -89,8 +93,8 @@ class W3DHub
                   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
+                    link(I18n.t(:"interface.log_in"), text_size: 22, width: 0.5) { page(W3DHub::Pages::Login) }
+                    link I18n.t(:"interface.register"), text_size: 22, width: 0.49 do
                       W3DHub.url("https://secure.w3dhub.com/forum/index.php?app=core&module=global&section=register")
                     end
                   end
@@ -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

@@ -20,20 +20,47 @@ class W3DHub
 
   THEME = {
     ToolTip: {
-      background: 0xff_dedede,
-      color: 0xaa_000000,
-      text_size: 18,
+      background: 0xff_222222,
+      color: 0xff_f2f2f2,
+      text_size: 22,
+      text_static: true,
       text_border: false,
       text_shadow: false
     },
     TextBlock: {
-      font: BOLD_FONT,
+      font: REGULAR_FONT,
+      text_static: true,
       text_color: 0xff_f2f2f2,
       text_border: false,
       text_shadow: true,
       text_shadow_size: 1,
       text_shadow_color: 0x88_000000
     },
+    Banner: { # < TextBlock
+      text_size: 48,
+      font: BOLD_FONT
+    },
+    Title: { # < TextBlock
+      text_size: 34,
+      font: BOLD_FONT
+    },
+    Subtitle: { # < TextBlock
+      text_size: 28,
+      font: BOLD_FONT
+    },
+    Tagline: { # < TextBlock
+      text_size: 26,
+      font: BOLD_FONT
+    },
+    Caption: { # < TextBlock
+      text_size: 24
+    },
+    Para: { # < TextBlock
+      text_size: 22
+    },
+    Inscription: { # < TextBlock
+      text_size: 18
+    },
     EditLine: {
       border_thickness: 2,
       border_color: Gosu::Color::WHITE,
@@ -42,14 +69,15 @@ class W3DHub
     Link: {
       color: 0xff_cdcdcd,
       hover: {
-        color: Gosu::Color::WHITE
+        color: 0xff_f2f2f2
       },
       active: {
         color: 0xff_eeeeee
       }
     },
     Button: {
-      text_size: 18,
+      font: BOLD_FONT,
+      text_size: 22,
       padding_top: 8,
       padding_left: 16,
       padding_right: 16,
@@ -76,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
     },
@@ -87,7 +116,7 @@ class W3DHub
       border_color: 0xff_0074e0
     },
     Handle: {
-      text_size: 18,
+      text_size: 22,
       padding_top: 8,
       padding_left: 2,
       padding_right: 2,

lib/version.rb

@@ -1,4 +1,4 @@
 class W3DHub
   DIR_NAME = "W3DHubAlt"
-  VERSION = "0.2.0"
+  VERSION = "0.3.1"
 end