Added some fonts, fleshed out more of main layout

lib/window.rb

@@ -14,37 +14,109 @@ module W3DHubLauncher
     HALF_PADDING = 10
     ALPHA_BLACK = 0x88_000000
 
-    def setup
-      theme({
+    FONT_LIGHT = "./media/fonts/NotoSans-Light.ttf"
+    FONT_REGULAR = "./media/fonts/NotoSans-Regular.ttf"
+    FONT_BOLD = "./media/fonts/NotoSans-Bold.ttf"
+    FONT_BLACK = "./media/fonts/NotoSans-Black.ttf"
+
+    FONT_MONO = "./media/fonts/NotoSansMono-Regular.ttf"
+
+    CTA_BUTTON_THEME = {
+      background: 0xff_1a5fb4
+    }
+
+    THEME = {
       TextBlock: {
         text_static: true,
-          font: "Noto Sans"
+        font: FONT_REGULAR,
+        text_shadow: true,
+        text_shadow_color: 0x44_000000
       },
       Link: {
-          color: 0xff_dddddd,
+        font: FONT_REGULAR,
+        color: 0xff_bbbbbb,
         hover: {
           color: 0xff_ffffff
         },
         active: {
-            color: 0xff_aaaaaa
+          color: 0xff_888888
+        }
+      },
+      Button: {
+        font: FONT_BOLD,
+        text_shadow: false,
+        background: 0x88_5e5c64,
+        border_thickness: 1,
+        border_color: 0xff_000000
+      },
+      EditLine: {
+        font: FONT_REGULAR
+      },
+      ListBox: {
+        text_align: :left,
+        text_size: 24,
+        font: FONT_REGULAR,
+        # background: 0xaa_000000,
+        # border_color: 0xff_000000,
+        # hover: {
+        #   background: 0xaa_222222
+        # },
+        # active: {
+        #   background: 0xaa_444444
+        # }
+      },
+      Menu: {
+        border_thickness: 1,
+        border_color: 0xff_000000
+      },
+      MenuItem: {
+        text_size: 24,
+        text_align: :left,
+        font: FONT_REGULAR,
+        background: 0xee_000000,
+        border_color: 0xaa_000000,
+        hover: {
+          background: 0xee_222222
+        },
+        active: {
+          background: 0xee_444444
         }
       }
-      })
+    }
+
+    def setup
+      theme(THEME)
 
       # root container - background image
-      stack(width: 1.0, height: 1.0, background_image: get_image("./media/background.png"), background_image_mode: :fill) do
+      stack(width: 1.0, height: 1.0, background_image: get_image("/run/media/cyberarm/Storage/W3DHub/Launcher/package-cache/games/apb/background.png.package"), background_image_mode: :fill) do
         # root container - background image tint
-        flow(width: 1.0, height: 1.0, background: 0x88_000000) do
+        flow(width: 1.0, height: 1.0, background: ALPHA_BLACK) do
           # content container
           stack(fill: true, height: 1.0, margin: PADDING, margin_right: LARGE_PADDING) do
             # header bar container
-            flow(width: 1.0, height: 80, background: ALPHA_BLACK, margin_bottom: PADDING) do
-              title "LOGO"
-              title "GAMES"
-              title "SERVERS"
-              flow(fill: true)
-              title "_"
-              title "I"
+            flow(width: 1.0, height: 80, margin_bottom: PADDING) do |c|
+              # logo + menu button
+              button(get_image("./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("About")
+                  menu_item("Exit") do
+                    window.close
+                  end
+                end.show
+              end
+
+              stack(fill: true, height: 1.0) do
+                stack(fill: true)
+                flow(width: 1.0) do
+                  link "GAMES", text_v_align: :center, font: FONT_BLACK, margin_left: PADDING
+                  link "SERVERS", text_v_align: :center, font: FONT_BLACK, margin_left: PADDING
+                  stack(fill: true)
+                  image get_image("./media/icons/import.png"), height: 40, color: 0xff_bbbbbb
+                  image get_image("./media/icons/information.png"), height: 40, color: 0xff_bbbbbb
+                end
+                stack(fill: true)
+              end
             end
 
             # page content container
@@ -52,11 +124,14 @@ module W3DHubLauncher
               # game bar container
               flow(width: 1.0, height: 60) do
                 flow(width: 220, height: 1.0, background: ALPHA_BLACK) do
-                  link "ALL GAMES"
+                  flow(width: 1.0, height: 40, margin_left: PADDING, v_align: :center, h_align: :center) do
+                    image get_image("./media/icons/menuGrid.png"), height: 40, color: 0xff_bbbbbb
+                    link "ALL GAMES", text_size: 24, font: FONT_BLACK, height: 1.0, text_v_align: :center
+                  end
                 end
 
                 flow(fill: true, height: 1.0, background: ALPHA_BLACK, margin_left: PADDING) do
-                  image get_image("./data/cache/apb.png"), height: 1.0, padding: HALF_PADDING, background:0x88_5e5c64, border_thickness: 3, border_color_bottom: 0xff_3584e4, tip: "Red Alert: A Path Beyond"
+                  image get_image("./data/cache/apb.png"), height: 1.0, padding: HALF_PADDING, background:0x88_5e5c64, border_thickness_bottom: 3, border_color_bottom: 0xff_3584e4, tip: "Red Alert: A Path Beyond"
                   image get_image("./data/cache/ren.png"), height: 1.0, padding: HALF_PADDING, tip: "Command & Conquer: Renegade"
                   image get_image("./data/cache/tsr.png"), height: 1.0, padding: HALF_PADDING, tip: "Tiberian Sun: Reborn"
                   image get_image("./data/cache/woa.png"), height: 1.0, padding: HALF_PADDING, tip: "Battle for Dune: War of Assassins"
@@ -64,38 +139,38 @@ module W3DHubLauncher
               end
 
               # game content container
-              flow(width: 1.0, height: 1.0, margin_top: PADDING) do
+              flow(width: 1.0, fill: true, margin_top: PADDING) do
                 # game info container
-                stack(width: 340, height: 1.0, debug: true) do
+                stack(width: 340, height: 1.0) do
                   # logo
-                  image get_image("./media/background.png"), width: 1.0, max_height: 124
+                  image get_image("/run/media/cyberarm/Storage/W3DHub/Launcher/package-cache/games/apb/logo.png.package"), width: 1.0, max_height: 124
 
                   # web links
-                  stack(width: 1.0, fill: nil, padding: 0, padding_top: LARGE_PADDING, padding_bottom: nil, debug_color: 0xff_0000ff, debug: true) do
-                    link "Modifications"
-                    link "Bug Tracker", padding_top: LARGE_PADDING
-                    link "Player Statistics"
+                  stack(width: 1.0, fill: true, padding: 0, padding_top: LARGE_PADDING) do
+                    link "Modifications", text_size: 24
+                    link "Bug Tracker", text_size: 24
+                    link "Player Statistics", text_size: 24
                   end
 
                   # launching ta game
                   caption "Game Version"
-                  list_box items: [ "Release", "Open Testing" ], width: 1.0
-                  flow(width: 1.0) do
-                    button "PLAY", fill: true
-                    button "{}"
-                    button "[]"
+                  list_box items: [ "Release", "Open Testing" ], width: 1.0, margin_bottom: PADDING
+                  flow(width: 1.0, height: 60) do
+                    button "PLAY", fill: true, height: 1.0, **CTA_BUTTON_THEME
+                    button get_image("./media/icons/singleplayer.png"), image_height: 1.0, **CTA_BUTTON_THEME
+                    button get_image("./media/icons/gear.png"), image_height: 1.0, **CTA_BUTTON_THEME
                   end
-                  inscription "Version: 3.9.2.15"
+                  inscription "Version: 3.9.2.15", margin_top: PADDING
                 end
 
                 # game events and news container
-                stack(fill: true, height: 1.0, margin_left: LARGE_PADDING) do
-                  flow(width: 1.0, max_height: 380, background: ALPHA_BLACK) do
+                stack(fill: true, height: 1.0, margin_left: LARGE_PADDING, scroll: true) do
+                  flow(width: 1.0, height: 1.0, max_height: 380, background: ALPHA_BLACK, border_thickness: 1, border_color: Gosu::Color::BLACK) do
                     image get_image("./media/background.png"), fill: true, aspect_ratio: 16.0 / 9.0
 
                     stack(fill: true, height: 1.0, margin_left: PADDING) do
-                      caption "Upcoming Event", color: 0xff_22aa11
-                      title "Red Alert: A Path Beyond Game Night"
+                      caption "Upcoming Event", color: 0xff_22aa11, font: FONT_BOLD
+                      title "Red Alert: A Path Beyond Game Night", font: FONT_BOLD
                       tagline "July 11, 2028"
 
                       flow(fill: true)
@@ -103,26 +178,80 @@ module W3DHubLauncher
                       button "Read More", margin_left: PADDING, margin_right: LARGE_PADDING, margin_bottom: PADDING, width: 1.0
                     end
                   end
+
+                  # news container
+                  flow(width: 1.0, margin_top: PADDING) do
+                    9.times do
+                      stack(width: 1.0 / 3, height: 345, aspect_ratio: 1, margin_left: HALF_PADDING, margin_right: HALF_PADDING, margin_bottom: PADDING, background: ALPHA_BLACK, background_image: get_image("./media/background.png"), background_image_mode: :fill, border_thickness: 1, border_color: Gosu::Color::BLACK) do
+                        stack(width: 1.0, height: 1.0 / 3, padding: PADDING, v_align: :bottom, background: 0xdd_000000, border_thickness_top: 1, border_color_top: Gosu::Color::BLACK) do
+                          caption "NEWS", color: 0x88_ffffff, font: FONT_BOLD
+                          tagline "A News Item Post A News Item Post", font: FONT_BOLD
+                        end
+                      end
+                    end
+                  end
                 end
               end
             end
           end
 
           # battleview/friends container
-          stack(width: 0.25, max_width: 300, height: 1.0, margin: PADDING, margin_left: 0, background: 0x88_888888) do
-            title "FRIENDS"
+          stack(width: 300, height: 1.0, margin: PADDING, margin_left: 0) do
+            # self account container
+            flow(width: 1.0, height: 80) do
+              # self avatar container
+              stack(width: 80, height: 1.0, background_image: get_image("./media/default.png")) do
+                # self online state container
+                stack(width: 20, height: 20, v_align: :bottom, h_align: :right, background_image: get_image("./media/icons/contrast.png"), background_image_color: 0xff_26a269)
               end
+
+              stack(fill: true, height: 1.0, margin_left: HALF_PADDING) do
+                flow(fill: true)
+                # self name
+                caption "moonsense715test", font: FONT_BLACK, text_wrap: :none
+                # self set online state
+                link "Online ▼", text_size: 18 do |l|
+                  menu(parent: l) do
+                    menu_item("Online")
+                    menu_item("Do Not Disturb")
+                    menu_item("Away")
+                    menu_item("Invisible")
+                    menu_item("Sign Out")
+                  end.show
                 end
+                flow(fill: true)
               end
             end
 
-    def setup
-      stack(width: 1.0, height: 1.0, background: 0xff_111111) do
-        button "HELLO", margin: 40
-        stack(width: 50, height: 50, margin: 32, padding: 16, border_thickness: 10, border_color: 0xff424242, background: 0xff_242424) { para "HI" }
-        stack(width: 0.5, height: 0.5, margin_top: 40, margin_left: 40, border_thickness: 10, border_color: 0xff424242, background: 0xff_242424) do
-          stack(width: 0.5, fill: true, margin_top: 40, margin_left: 40, border_thickness: 10, border_color: 0xff424242, background: 0xff_242424) do
-            stack(width: 0.5, fill: true, margin_top: 40, margin_left: 40, border_thickness: 10, border_color: 0xff424242, background: 0xff_242424) do
+            # friend management container
+            flow(width: 1.0, height: 60, margin_top: PADDING) do
+              flow(width: 1.0) do # FIXME: , v_align: :center
+                button get_image("./media/icons/singleplayer.png"), image_height: 1.0
+                button get_image("./media/icons/gear.png"), image_height: 1.0, margin_left: HALF_PADDING
+                edit_line "", margin_left: HALF_PADDING, fill: true, height: 1.0
+              end
+            end
+
+            # Q
+            stack(width: 1.0, fill: true, margin_top: PADDING, scroll: true) do
+              50.times do |i|
+                # friend container
+                flow(width: 1.0, height: 48, margin_bottom: HALF_PADDING, hover: { background: 0x44_000000 }) do
+                  # friend avatar container
+                  stack(width: 48, height: 1.0, background_image: get_image("./media/default.png")) do
+                    stack(width: 12, height: 12, v_align: :bottom, h_align: :right, background_image: get_image("./media/icons/contrast.png"), background_image_color: 0xff_26a269)
+                  end
+                  # friend name and status container
+                  stack(fill: true, height: 1.0, margin_left: HALF_PADDING, margin_right: HALF_PADDING) do
+                    stack(v_align: :center) do
+                      caption "moonsense#{715 * i % 1000 }test", font: FONT_BOLD, text_wrap: :none, text_size: 20
+                      inscription "RA_Under • 13:52", text_wrap: :none, text_size: 14, margin_top: -HALF_PADDING
+                    end
+                  end
+                  # friend active application container
+                  stack(width: 48, height: 1.0, background_image: get_image("./media/logo.png"))
+                end
+              end
             end
           end
         end

media/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/latin-greek-cyrillic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

w3d_hub_linux_launcher.rb

@@ -6,6 +6,6 @@ end
 
 require_relative "lib/window"
 
-GUI_DEBUG = true
-window = W3DHubLauncher::Window.new(width: 1280, height: 800, resizable: true)
+# window = W3DHubLauncher::Window.new(width: 1280, height: 800, resizable: true)
+window = W3DHubLauncher::Window.new(width: 1920, height: 1080, resizable: true)
 window.show