Updated dialogs and welcome screen

lib/states/message_dialog.rb

@@ -8,25 +8,31 @@ class W3DHub
 
         background 0xee_444444
 
-        stack(width: 1.0, height: 1.0, margin: 128, background: 0xee_222222) do
+        flow(width: 1.0, height: 1.0) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
+          flow(fill: true, height: 1.0)
+
+          stack(width: 1.0, height: 1.0, max_width: MAX_PAGE_WIDTH, margin: 128, background: 0xee_222222) do
+            flow(width: 1.0, height: 32, padding: 8) do
               background 0x88_000000
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", width: 0.04, align: :center, color: 0xff_ff8800
+              image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", width: 32, align: :center, color: 0xff_ff8800
 
               tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
             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
             end
 
-          stack(width: 1.0, height: 0.1, padding: 8) do
+            stack(width: 1.0, height: 40, padding: 8) do
               button "Okay", width: 1.0 do
                 pop_state
               end
             end
           end
+
+          flow(fill: true, height: 1.0)
+        end
       end
 
       def draw

lib/states/prompt_dialog.rb

@@ -8,27 +8,30 @@ class W3DHub
 
         background 0xee_444444
 
-        stack(width: 1.0, height: 1.0, margin: 128, background: 0xee_222222) do
+        flow(width: 1.0, height: 1.0) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
+          flow(fill: true, height: 1.0)
+
+          stack(width: 1.0, max_width: MAX_PAGE_WIDTH, height: 1.0, margin: 128, background: 0xee_222222) do
+            flow(width: 1.0, height: 32, padding: 8) do
               background 0x88_000000
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 0.04, align: :center, color: 0xff_ff8800
+              image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 32, align: :center, color: 0xff_ff8800
 
               tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
             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
               @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: 0.1, padding: 8) do
+            flow(width: 1.0, height: 40, padding: 8) do
               button "Cancel", width: 0.25 do
                 pop_state
                 @options[:cancel_callback]&.call(@prompt_entry.value)
               end
 
-            stack(width: 0.5)
+              stack(fill: true)
 
               @accept_button = button "Accept", width: 0.25 do
                 if @options[:valid_callback]&.call(@prompt_entry.value)
@@ -39,6 +42,9 @@ class W3DHub
             end
           end
 
+          flow(fill: true, height: 1.0)
+        end
+
         @prompt_entry.subscribe(:changed) do
           if @options[:valid_callback]
             if @options[:valid_callback].call(@prompt_entry.value)

lib/states/welcome.rb

@@ -8,24 +8,30 @@ class W3DHub
         background 0x88_252525
 
 
-        @card_container = stack(width: 1.0, height: 1.0, margin: 128, padding: 16) do
+        flow(width: 1.0, height: 1.0) 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
           end
 
+          flow(fill: true)
+        end
+
         @card_container.clear do
           card_welcome
         end
       end
 
       def card_welcome
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "Welcome", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Welcome to the #{I18n.t(:app_name_simple)}"
           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: 0.1) do
+        flow(width: 1.0, height: 40) do
-          stack(width: 0.83, height: 1.0) do
+          stack(fill: true, height: 1.0) do
             link "Skip", border_color_bottom: 0xff_777777 do
               pop_state
             end
@@ -38,7 +44,7 @@ class W3DHub
       end
 
       def card_getting_started
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "Getting Started", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Import C&C Renegade"
           caption "You can import your installed copy of Renegade if it wasn't automatically imported from the Games tab. If you need to procure a copy of Renegade, EA's Origin Store has the Command & Conquer The Ultimate Collection available. We cannot provide Renegade for installation.", width: 1.0, margin_left: 32
@@ -49,8 +55,8 @@ 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: 0.9) do
+        flow(width: 1.0, height: 40) do
-          flow(width: 0.83, height: 1.0) do
+          flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_welcome }
             end
@@ -67,7 +73,7 @@ class W3DHub
       end
 
       def card_communitiy
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "W3D Hub Community", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Forums"
           caption "Join our forum community", margin_left: 32
@@ -82,8 +88,8 @@ class W3DHub
           caption "Subscribe to our YouTube channel", margin_left: 32
         end
 
-        flow(width: 1.0, height: 0.1) do
+        flow(width: 1.0, height: 40) do
-          flow(width: 0.83, height: 1.0) do
+          flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_getting_started }
             end

lib/window.rb

@@ -18,6 +18,7 @@ class W3DHub
       end
 
       # push_state(W3DHub::States::DemoInputDelay)
+      # push_state(W3DHub::States::Welcome)
       push_state(W3DHub::States::Boot)
     end