Improvements

lib/pages/games_redesign.rb

@@ -18,7 +18,7 @@ class W3DHub
             end
 
             # Game Menu
-            @game_page_container = stack(width: 1.0, fill: true) do
+            @game_page_container = stack(width: 1.0, fill: true, background_image: "#{GAME_ROOT_PATH}/media/textures/noiseb.png", background_image_mode: :tiled) do
               # , background_image: "C:/Users/cyber/Downloads/vlcsnap-2022-04-24-22h24m15s854.png"
             end
           end
@@ -46,9 +46,8 @@ class W3DHub
               image_path = File.exist?("#{GAME_ROOT_PATH}/media/icons/#{game.id}.png") ? "#{GAME_ROOT_PATH}/media/icons/#{game.id}.png" : "#{GAME_ROOT_PATH}/media/icons/default_icon.png"
               image_color = Store.application_manager.installed?(game.id, game.channels.first.id) ? 0xff_ffffff : 0x66_ffffff
 
-              flow(width: 1.0, height: 1.0, margin: 8, background_image: image_path, background_image_color: image_color, background_image_mode: :fill) do
-                image "#{GAME_ROOT_PATH}/media/ui_icons/return.png", width: 24, margin_left: -6, margin_top: -6, color: 0xdd_ff8844 if Store.application_manager.updateable?(game.id, game.channels.first.id)
-                image "#{GAME_ROOT_PATH}/media/ui_icons/import.png", width: 24, margin_left: -4, margin_top: -6, color: 0xdd_ffffff unless Store.application_manager.installed?(game.id, game.channels.first.id)
+              flow(width: 1.0, height: 1.0, margin: 8, background_image: image_path, background_image_color: image_color, background_image_mode: :fill_height) do
+                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: 14
@@ -91,23 +90,21 @@ class W3DHub
               image_path = "#{GAME_ROOT_PATH}/media/banners/#{game.id}.png"
 
               if File.exist?(image_path)
-                stack(width: 360-8, height: 200, margin: 8, background_image: image_path, background_image_mode: :fill_width)
+                image image_path, width: 1.0
               else
-                stack(width: 360-8, height: 200, padding: 8) do
-                  banner game.name unless File.exist?(image_path)
-                end
+                banner game.name unless File.exist?(image_path)
               end
 
-              stack(width: 1.0, fill: true, scroll: true) do
+              stack(width: 1.0, fill: true, scroll: true, margin_top: 32) do
                 if Store.application_manager.installed?(game.id, channel.id)
                   Hash.new.tap { |hash|
-                    hash[I18n.t(:"games.game_settings")] = { icon: "gear", block: proc { Store.application_manager.settings(game.id, channel.id) } }
-                    hash[I18n.t(:"games.wine_configuration")] = { icon: "gear", block: proc { Store.application_manager.wine_configuration(game.id, channel.id) } } if W3DHub.unix?
-                    hash[I18n.t(:"games.game_modifications")] = { icon: "gear", enabled: true, block: proc { populate_game_modifications(game, channel) } }
-                    if game.id != "ren"
-                      hash[I18n.t(:"games.repair_installation")] = { icon: "wrench", block: proc { Store.application_manager.repair(game.id, channel.id) } }
-                      hash[I18n.t(:"games.uninstall_game")] = { icon: "trashCan", block: proc { Store.application_manager.uninstall(game.id, channel.id) } }
-                    end
+                    # hash[I18n.t(:"games.game_settings")] = { icon: "gear", block: proc { Store.application_manager.settings(game.id, channel.id) } }
+                    # hash[I18n.t(:"games.wine_configuration")] = { icon: "gear", block: proc { Store.application_manager.wine_configuration(game.id, channel.id) } } if W3DHub.unix?
+                    # hash[I18n.t(:"games.game_modifications")] = { icon: "gear", enabled: true, block: proc { populate_game_modifications(game, channel) } }
+                    # if game.id != "ren"
+                    #   hash[I18n.t(:"games.repair_installation")] = { icon: "wrench", block: proc { Store.application_manager.repair(game.id, channel.id) } }
+                    #   hash[I18n.t(:"games.uninstall_game")] = { icon: "trashCan", block: proc { Store.application_manager.uninstall(game.id, channel.id) } }
+                    # end
                     hash[I18n.t(:"games.install_folder")] = { icon: nil, block: proc { Store.application_manager.show_folder(game.id, channel.id, :installation) } }
                     hash[I18n.t(:"games.user_data_folder")] = { icon: nil, block: proc { Store.application_manager.show_folder(game.id, channel.id, :user_data) } }
                     hash[I18n.t(:"games.view_screenshots")] = { icon: nil, block: proc { Store.application_manager.show_folder(game.id, channel.id, :screenshots) } }
@@ -134,6 +131,9 @@ class W3DHub
 
               if game.channels.count > 1
                 # Release channel
+
+                inscription I18n.t(:"games.game_version"), width: 1.0, text_align: :center
+
                 flow(width: 1.0, height: 48) do
                   # background 0xff_444411
                   list_box(width: 1.0, items: game.channels.map(&:name), choose: channel.name, enabled: game.channels.count > 1) do |value|
@@ -161,6 +161,22 @@ class W3DHub
                     Store.application_manager.run(game.id, channel.id)
                   end
 
+                  button get_image("#{GAME_ROOT_PATH}/media/ui_icons/gear.png"), tip: I18n.t(:"games.game_options"), image_height: 32, margin_left: 0 do |btn|
+                    items = []
+
+                    items << { label: I18n.t(:"games.game_settings"), block: proc { Store.application_manager.settings(game.id, channel.id) } }
+                    items << { label: I18n.t(:"games.wine_configuration"), block: proc { Store.application_manager.wine_configuration(game.id, channel.id) } } if W3DHub.unix?
+                    items << { label: I18n.t(:"games.game_modifications"), block: proc { populate_game_modifications(game, channel) } }
+                    if game.id != "ren"
+                      items << { label: I18n.t(:"games.repair_installation"), block: proc { Store.application_manager.repair(game.id, channel.id) } }
+                      items << { label: I18n.t(:"games.uninstall_game"), block: proc { Store.application_manager.uninstall(game.id, channel.id) } }
+                    end
+
+                    # From gui_state_ext.rb
+                    # TODO: Implement in engine proper
+                    menu(btn, items: items)
+                  end
+
                 else
                   installing = Store.application_manager.task?(:installer, game.id, channel.id)
 
@@ -277,7 +293,7 @@ class W3DHub
                 # Detailed view
                 news_blurb_container = stack(width: 1.0, height: 1.0, background: 0xaa_000000, padding: 4) do
                   tagline "<b>#{item.title}</b>", width: 1.0
-                  inscription item.timestamp.strftime("%Y-%m-%d")
+                  inscription "#{item.author} • #{item.timestamp.strftime("%Y-%m-%d")}"
                   inscription item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true
 
                   button I18n.t(:"games.read_more"), width: 1.0, margin_top: 8, margin_bottom: 0, padding_top: 4, padding_bottom: 4 do

lib/pages/server_browser.rb

@@ -62,11 +62,19 @@ class W3DHub
                 # button get_image("#{GAME_ROOT_PATH}/media/ui_icons/return.png"), tip: I18n.t(:"server_browser.refresh"), image_height: 1.0, margin_left: 16, padding_left: 2, padding_right: 2, padding_top: 2, padding_bottom: 2 do
                 #   fetch_server_list
                 # end
+
+                flow(fill: true)
+
+                button "Direct Connect", height: 1.0, padding_top: 4, padding_bottom: 4, enabled: false, tip: "Directly connect to a game server (under development)" do
+                  push_state(W3DHub::States::DirectConnectDialog)
+                end
               end
 
-              flow(min_width: 372, width: 0.38, max_width: 512, height: 1.0) do
-                inscription "#{I18n.t(:"server_browser.nickname")}:", width: 0.32
-                @nickname_label = inscription "#{Store.settings[:server_list_username]}", width: 0.6
+              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]}"
                 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
                   prompt_for_nickname(
@@ -74,6 +82,10 @@ class W3DHub
                       @nickname_label.value = entry
                       Store.settings[:server_list_username] = entry
                       Store.settings.save_settings
+
+                      container.recalculate
+                      container.recalculate
+                      container.recalculate
                     end
                   )
                 end
@@ -248,16 +260,21 @@ class W3DHub
           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
+                flow(fill: true)
+
                 image game_icon(server), width: 0.05
-                tagline server.status.name, width: 0.949, text_wrap: :none
+                tagline server.status.name, text_wrap: :none
+
+                flow(fill: true)
               end
 
-              stack(width: 1.0, height: 0.2) do
+              flow(width: 1.0, height: 0.2) do
                 game_installed = Store.application_manager.installed?(server.game, server.channel)
                 game_updatable = Store.application_manager.updateable?(server.game, server.channel)
                 style = server.channel != "release" ? TESTING_BUTTON : {}
 
-                button "<b>#{I18n.t(:"server_browser.join_server")}</b>", margin_left: 96, enabled: (game_installed && !game_updatable), **style do
+                flow(fill: true)
+                button "<b>#{I18n.t(:"server_browser.join_server")}</b>", enabled: (game_installed && !game_updatable), **style do
                   # Check for nickname
                   #   prompt for nickname
                   # !abort unless nickname set
@@ -294,6 +311,13 @@ class W3DHub
                     end
                   end
                 end
+
+                if Store.developer_mode
+                  list_box(items: (1..12).to_a.map(&:to_s), margin_left: 16, **TESTING_BUTTON)
+                  button "Multijoin", tip: "Launch multiple clients with configured username_\#{number}", **TESTING_BUTTON, enabled: true
+                end
+
+                flow(fill: true)
               end
 
               # Server Info
@@ -329,17 +353,22 @@ class W3DHub
 
             # Game score and balance display
             flow(width: 1.0, height: 48, border_thickness_bottom: 2, border_color_bottom: 0x44_ffffff) do
-              stack(width: 0.4, height: 1.0) do
+              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 formatted_score(game_balance[:team_0_score].to_i), width: 1.0, text_align: :center
               end
 
               stack(width: 0.2, height: 1.0) do
-                image game_balance[:icon], height: 0.5, margin_left: 20, tip: game_balance[:message], color: game_balance[:color]
+                flow(width: 1.0, height: 0.5) do
+                  flow(fill: true)
+                  image game_balance[:icon], height: 1.0, tip: game_balance[:message], color: game_balance[:color]
+                  flow(fill: true)
+                end
+
                 para game_balance[:ratio].round(2).to_s, width: 1.0, text_align: :center
               end
 
-              stack(width: 0.4, height: 1.0) do
+              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 formatted_score(game_balance[:team_1_score].to_i), width: 1.0, text_align: :center
               end
@@ -347,7 +376,7 @@ class W3DHub
 
             # Team roster
             flow(width: 1.0, fill: true, scroll: true) do
-              stack(width: 0.499) 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?