Improvements

lib/states/interface.rb

@@ -152,52 +152,107 @@ class W3DHub
 
             flow(width: 1.0, height: 0.06) do
               flow(width: 0.75, height: 1.0) do
-                image "#{GAME_ROOT_PATH}/media/icons/ren.png", height: 1.0
+                image "#{GAME_ROOT_PATH}/media/icons/ren.png", height: 1.0 do |img|
-                image "#{GAME_ROOT_PATH}/media/icons/ecw.png", height: 1.0, margin_left: 32
+                  if img.style.color == 0xff_444444
-                image "#{GAME_ROOT_PATH}/media/icons/ia.png", height: 1.0, margin_left: 32
+                    img.style.color = 0xff_ffffff
-                image "#{GAME_ROOT_PATH}/media/icons/apb.png", height: 1.0, margin_left: 32
+                    img.style.default[:color] = 0xff_ffffff
-                image "#{GAME_ROOT_PATH}/media/icons/tsr.png", height: 1.0, margin_left: 32, margin_right: 32
+                  else
+                    img.style.color = 0xff_444444
+                    img.style.default[:color] = 0xff_444444
+                  end
+                end
+                image "#{GAME_ROOT_PATH}/media/icons/ecw.png", height: 1.0, margin_left: 32 do |img|
+                  if img.style.color == 0xff_444444
+                    img.style.color = 0xff_ffffff
+                    img.style.default[:color] = 0xff_ffffff
+                  else
+                    img.style.color = 0xff_444444
+                    img.style.default[:color] = 0xff_444444
+                  end                end
+                image "#{GAME_ROOT_PATH}/media/icons/ia.png", height: 1.0, margin_left: 32 do |img|
+                  if img.style.color == 0xff_444444
+                    img.style.color = 0xff_ffffff
+                    img.style.default[:color] = 0xff_ffffff
+                  else
+                    img.style.color = 0xff_444444
+                    img.style.default[:color] = 0xff_444444
+                  end                end
+                image "#{GAME_ROOT_PATH}/media/icons/apb.png", height: 1.0, margin_left: 32 do |img|
+                  if img.style.color == 0xff_444444
+                    img.style.color = 0xff_ffffff
+                    img.style.default[:color] = 0xff_ffffff
+                  else
+                    img.style.color = 0xff_444444
+                    img.style.default[:color] = 0xff_444444
+                  end                end
+                image "#{GAME_ROOT_PATH}/media/icons/tsr.png", height: 1.0, margin_left: 32, margin_right: 32 do |img|
+                  if img.style.color == 0xff_444444
+                    img.style.color = 0xff_ffffff
+                    img.style.default[:color] = 0xff_ffffff
+                  else
+                    img.style.color = 0xff_444444
+                    img.style.default[:color] = 0xff_444444
+                  end                end
                 para "Region"
                 list_box items: ["Any", "North America", "Europe"], width: 0.25
               end
 
-              flow(width: 0.25, height: 1.0) do
+              flow(width: 0.249, height: 1.0) do
                 inscription "Nickname:"
                 inscription "Cyberarm"
-                image EMPTY_IMAGE, height: 1.0
+                image "#{GAME_ROOT_PATH}/media/ui_icons/wrench.png", height: 16
               end
             end
 
             flow(width: 1.0, height: 0.9, margin_top: 16) do
               stack(width: 0.62, height: 1.0, scroll: true) do
-                para "SERVERS"
                 # Icon
                 # Hostname
                 # Current Map
                 # Players
                 # Ping
+                flow(width: 1.0, height: 48) do
+                  stack(width: 0.08) do
+                  end
+
+                  stack(width: 0.50, height: 1.0) do
+                    para "<b>Hostname</b>", text_wrap: :none, width: 1.0
+                  end
+
+                  flow(width: 0.24, height: 1.0) do
+                    para "<b>Current Map</b>", text_wrap: :none, width: 1.0
+                  end
+
+                  flow(width: 0.11, height: 1.0) do
+                    para "<b>Players</b>", text_wrap: :none, width: 1.0
+                  end
+
+                  stack(width: 0.06) do
+                    para "<b>Ping</b>", text_wrap: :none, width: 1.0
+                  end
+                end
 
                 15.times do |i|
                   flow(width: 1.0, height: 48) do
                     background 0xff_333333 if i.odd?
 
-                    image "#{GAME_ROOT_PATH}/media/icons/ecw.png", width: 0.08
+                    image "#{GAME_ROOT_PATH}/media/icons/ren.png", width: 0.08, padding: 4
 
-                    stack(width: 0.50, height: 1.0) do
+                    stack(width: 0.45, height: 1.0) do
-                      para "<b>[W3DHub] GAME SERVER"
+                      inscription "<b>[W3DHub] GAME SERVER"
 
                       flow(width: 1.0, height: 1.0) do
-                        inscription "Release", margin_right: 64
+                        inscription "Release", margin_right: 64, text_size: 14
-                        inscription "North America"
+                        inscription "North America", text_size: 14
                       end
                     end
 
-                    flow(width: 0.25, height: 1.0) do
+                    flow(width: 0.30, height: 1.0) do
-                      para "MAP NAME"
+                      inscription "C&C_Vile_Facility_D3.mix"
                     end
 
                     flow(width: 0.1, height: 1.0) do
-                      para "99/127"
+                      inscription "127/127"
                     end
 
                     image "#{GAME_ROOT_PATH}/media/ui_icons/signal3.png", width: 0.05, color: 0xff_008000
@@ -208,7 +263,7 @@ class W3DHub
               end
 
               @game_server_info_container = stack(width: 0.38, height: 1.0) do
-                para "SERVER INFO"
+                para "No server selected", width: 1.0, text_align: :center
               end
             end
           end
@@ -303,7 +358,7 @@ class W3DHub
         @content_container.clear do
           stack(width: 1.0, height: 1.0, padding: 64) do
             para "<b>Language</b>"
-            para "Select the UI language you'd like to use in the W3D Hub Launcher. You should restart the launcher after changing this setting before the ui will update"
+            para "Select the UI language you'd like to use in the W3D Hub Launcher. You should restart the launcher after changing this setting before the ui will update", width: 1.0
             list_box items: ["English", "French", "German"], width: 1.0
 
             para "<b>Folder Paths</b>", margin_top: 32
@@ -329,7 +384,7 @@ class W3DHub
 
             para "<b>Diagnostics</b>"
             check_box "Enable Automatic Error Reporting", text_size: 16
-            inscription "If this is enabled the launcher will automatically report errors to the development team, along with basic information about your machine, such as operating system."
+            inscription "If this is enabled the launcher will automatically report errors to the development team, along with basic information about your machine, such as operating system.", width: 1.0
 
             button "Save", margin_top: 32
           end
@@ -467,9 +522,32 @@ 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.2) do
+            stack(width: 1.0, height: 0.3) do
-              tagline "[W3D Hub] GAME SERVER"
+              flow(width: 1.0, height: 0.2) do
-              button "Join Server"
+                image "#{GAME_ROOT_PATH}/media/icons/ia.png", height: 24
+                tagline "[W3D Hub] GAME SERVER"
+              end
+
+              stack(width: 1.0, height: 0.25) do
+                button "<b>Join Server</b>"
+              end
+
+              stack(width: 1.0, height: 0.55, margin_top: 16) do
+                flow(width: 1.0, height: 0.33) do
+                  inscription "<b>Game</b>", width: 0.4
+                  inscription "GAME (branch)", width: 0.6
+                end
+
+                flow(width: 1.0, height: 0.33) do
+                  inscription "<b>Map</b>", width: 0.4
+                  inscription "C&C_Islands.mix", width: 0.6
+                end
+
+                flow(width: 1.0, height: 0.33) do
+                  inscription "<b>Max Players</b>", width: 0.4
+                  inscription "127", width: 0.6
+                end
+              end
             end
 
             flow(width: 1.0, height: 0.05) do
@@ -482,7 +560,7 @@ class W3DHub
               end
             end
 
-            flow(width: 1.0, height: 0.75) do
+            flow(width: 1.0, height: 0.65) do
               stack(width: 0.5, height: 1.0, scroll: true) do
                 15.times do |i|
                   flow(width: 1.0, height: 18) do