Homogenize dialog styling

lib/dialog.rb

@@ -1,5 +1,7 @@
 module W3DHubLauncher
   class Dialog < CyberarmEngine::Dialog
+    include GuiExt
+
     def setup
       theme(THEME)
 

lib/dialogs/about.rb

@@ -4,12 +4,12 @@ module W3DHubLauncher
       def setup
         super
 
-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0xee_63452c) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
           flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
             banner "About", width: 1.0, text_align: :center
           end
 
-          stack(width: 1.0, fill: true, scroll: true, margin_left: PADDING, margin_right: PADDING, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
+          stack(style_class: [:dialog_container]) do
             title NAME
             tagline format("v%s (%s)", VERSION, VERSION_NAME), margin_left: PADDING
             para "© 2021 - #{Time.now.year} cyberarm", margin_left: PADDING

lib/dialogs/account.rb

@@ -4,19 +4,19 @@ module W3DHubLauncher
       def setup
         super
 
-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
-          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
+          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
             banner "Account", width: 1.0, text_align: :center
           end
 
-          stack(width: 1.0, fill: true, scroll: true, padding_left: PADDING, padding_right: PADDING) do
+          stack(style_class: [:dialog_container]) do
             button "Sign In", tip: "https://sso.w3d.cyberarm.dev" do
               # use SSO service
               pop_state
             end
           end
 
-          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
           end
         end
       end

lib/dialogs/downloads.rb

@@ -4,12 +4,12 @@ module W3DHubLauncher
       def setup
         super
 
-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
-          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
+          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
             banner "Downloads", width: 1.0, text_align: :center
           end
 
-          stack(width: 1.0, fill: true, scroll: true, padding_left: PADDING, padding_right: PADDING) do
+          stack(style_class: [:dialog_container]) do
             50.times do
               stack(width: 1.0, margin_top: HALF_PADDING, margin_bottom: HALF_PADDING) do
                 flow(width: 1.0) do
@@ -22,10 +22,10 @@ module W3DHubLauncher
             end
           end
 
-          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
             flow(fill: true)
 
-            button "Close" do
+            button "Close", **CTA_BUTTON_THEME do
               pop_state
             end
 

lib/dialogs/import_application.rb

@@ -7,12 +7,12 @@ module W3DHubLauncher
         @application = @options[:application]
         @channel = @options[:channel]
 
-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0xee_63452c) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
           flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
             banner "Import Application", width: 1.0, text_align: :center
           end
 
-          stack(width: 1.0, fill: true, scroll: true, margin_left: PADDING, margin_right: PADDING, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
+          stack(style_class: [:dialog_container]) do
             title format("%s (%s)", @application.name, @channel.name)
             caption "Path to application executable:"
             @path_input = edit_line "", width: 1.0

lib/dialogs/server.rb

@@ -4,12 +4,12 @@ module W3DHubLauncher
       def setup
         super
 
-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
-          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
+          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
             banner "Downloads", width: 1.0, text_align: :center
           end
 
-          stack(width: 1.0, fill: true, scroll: true, padding_left: PADDING, padding_right: PADDING) do
+          stack(style_class: [:dialog_container]) do
             50.times do
               stack(width: 1.0, margin_top: HALF_PADDING, margin_bottom: HALF_PADDING) do
                 flow(width: 1.0) do
@@ -22,10 +22,10 @@ module W3DHubLauncher
             end
           end
 
-          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
             flow(fill: true)
 
-            button "Close" do
+            button "Close", **CTA_BUTTON_THEME do
               pop_state
             end
 

lib/dialogs/settings.rb

@@ -0,0 +1,100 @@
+module W3DHubLauncher
+  class Dialog
+    class Settings < W3DHubLauncher::Dialog
+      def setup
+        super
+
+        stack(width: 0.75, max_width: 1280, height: 0.75, max_height: 800, style_class: [:dialog]) do
+          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
+            banner "Launcher Settings", width: 1.0, text_align: :center
+          end
+
+          item_height = 40 + PADDING
+          settings = MemCache[:settings]
+
+          stack(width: 1.0, fill: true, scroll: true, margin_left: PADDING, margin_right: PADDING, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
+            flow(width: 1.0, height: item_height, margin_top: PADDING) do
+            tagline "Nickname", height: 1.0, text_v_align: :center
+            @nickname = edit_line settings&.preferences&.nickname || Etc.getlogin, fill: true
+            end
+            inscription "Nickname to use when joining servers.", margin_left: PADDING
+
+            flow(width: 1.0, height: item_height, margin_top: HALF_PADDING) do
+            tagline "Launcher package cache directory", height: 1.0, text_v_align: :center
+            @launcher_package_cache_directory = edit_line settings&.preferences&.launcher_package_cache_directory || DEFAULT_PACKAGE_CACHE_PATH, fill: true
+            button "Browse..."
+            end
+            inscription "Location where the launcher will download application packages.", margin_left: PADDING
+
+            flow(width: 1.0, height: item_height, margin_top: HALF_PADDING) do
+              tagline "Application installation directory", height: 1.0, text_v_align: :center
+              @application_installation_directory = edit_line settings&.preferences&.application_installation_directory || DEFAULT_APPLICATIONS_PATH, fill: true
+              button "Browse..."
+            end
+            inscription "Location where the launcher will install new applications.", margin_left: PADDING
+
+            flow(width: 1.0, height: item_height, margin_top: HALF_PADDING) do
+              tagline "Wine prefix path", height: 1.0, text_v_align: :center
+              @wine_prefix_path = edit_line settings&.preferences&.wine_prefix_path || "", fill: true
+              button "Browse..."
+            end
+            inscription "Location of wine prefix to use. Leave blank to use default.", margin_left: PADDING
+
+            flow(width: 1.0, height: item_height, margin_top: HALF_PADDING) do
+              tagline "Wine command", height: 1.0, text_v_align: :center
+              @wine_command = edit_line settings&.preferences&.wine_command || "wine", fill: true
+              button "Browse..."
+            end
+            inscription "Path to wine executable. Use <c=f80>wine</c> for system installed wine.", margin_left: PADDING
+
+            flow(width: 1.0, height: item_height, margin_top: HALF_PADDING) do
+              tagline "Winetricks command", height: 1.0, text_v_align: :center
+              @winetricks_command = edit_line settings&.preferences&.winetricks_command || "winetricks", fill: true
+              button "Browse..."
+            end
+            inscription "Path to winetricks executable. Use <c=f80>winetricks</c> for system installed winetricks.", margin_left: PADDING
+          end
+
+          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
+            button "Close" do
+              pop_state
+            end
+
+            flow(fill: true)
+
+            button "Save", **CTA_BUTTON_THEME do |btn|
+              btn.enabled = false
+
+              settings = MemCache[:settings]
+
+              # update user preferences
+              settings.preferences.nickname = @nickname.value.strip
+              settings.preferences.launcher_package_cache_directory = @launcher_package_cache_directory.value.strip
+              settings.preferences.application_installation_directory = @application_installation_directory.value.strip
+              settings.preferences.wine_prefix_path = @wine_prefix_path.value.strip
+              settings.preferences.wine_command = @wine_command.value.strip
+              settings.preferences.winetricks_command = @winetricks_command.value.strip
+
+              Worker::Api.update_settings(settings) do |result|
+                if result.okay?
+                   on_main_thread(proc {
+                     MemCache[:settings] = settings
+                     pop_state
+                   })
+                else
+                  # FIXME: Somehow something went wrong... show an error message.
+                  btn.enabled = true
+                end
+              end
+            end
+          end
+        end
+      end
+
+      # FIXME: Check settings for validity before saving
+      def valid?
+        true
+      end
+    end
+  end
+end

lib/states/interface.rb

@@ -17,7 +17,9 @@ module W3DHubLauncher
                 # logo + menu button
                 button(safe_get_image("#{ROOT_PATH}/media/logo.png"), image_height: 1.0, background: 0, border_color: 0, hover: { background: 0 }, active: { background: 0, color: 0xff_ffffff }) do |btn|
                   menu(parent: btn) do
-                    menu_item("Settings")
+                    menu_item("Settings") do
+                      dialog(Dialog::Settings)
+                    end
                     menu_item("About") do
                       dialog(Dialog::About)
                     end

lib/theme.rb

@@ -195,6 +195,24 @@ module W3DHubLauncher
         background_nine_slice_color: 0x88_5e5c64,
         border_color_bottom: 0xff_3584e4
       }
+    },
+    dialog: {
+      h_align: :center,
+      v_align: :center,
+      background_nine_slice: NINE_SLICE_ROUNDED,
+      background_nine_slice_from_edge: NINE_SLICE_EDGE,
+      background_nine_slice_color: 0xee_63452c
+    },
+    dialog_container: {
+      width: 1.0,
+      fill: true,
+      scroll: true,
+      margin_left: PADDING,
+      margin_right: PADDING,
+      padding: HALF_PADDING,
+      background_nine_slice: NINE_SLICE_ROUNDED,
+      background_nine_slice_from_edge: NINE_SLICE_EDGE,
+      background_nine_slice_color: ALPHA_BLACK
     }
   }
 end

lib/worker.rb

@@ -110,7 +110,7 @@ module W3DHubLauncher
     end
 
     def game_server_hub_websocket
-      WebSocketClient.new.connect("ws://localhost:9292/api/websocket") do |websocket|
+      WebSocketClient.new.connect("wss://gsh.w3d.cyberarm.dev/api/websocket") do |websocket|
         websocket.on(:open) do
           # puts "CONNECTED"
 

w3d_hub_linux_launcher.rb

@@ -42,6 +42,7 @@ require_relative "lib/dialogs/downloads"
 require_relative "lib/dialogs/server"
 require_relative "lib/dialogs/account"
 require_relative "lib/dialogs/import_application"
+require_relative "lib/dialogs/settings"
 require_relative "lib/states/boot"
 require_relative "lib/states/interface"
 require_relative "lib/window"