Added support for round avatars, added nine slice images, added rounded corners to a lot of stuff, tweaked theme.

.gitignore

@@ -6,7 +6,3 @@ data/logs/*
 !data/logs/.gitkeep
 _*.*
 *.log
-media/icons/*
-!media/icons/app.*
-!media/icons/default_icon.png
-!media/icons/w3dhub.png

lib/gui_ext.rb

@@ -11,5 +11,15 @@ module W3DHubLauncher
 
       WHITE_IMAGE
     end
+
+    def rounded_avatar(image)
+      circle = get_image("./media/ui/circle.png")
+      scale = [(circle.width.to_f / image.width).abs, (circle.width.to_f / image.height).abs].min
+
+      Gosu.render(circle.width, circle.height) do
+        image.draw_rot(circle.width / 2, circle.height / 2, 0, 0, 0.5, 0.5, scale, scale)
+        circle.draw(0, 0, 1, 1, 1, 0xff_ffffff, :multiply)
+      end
+    end
   end
 end

lib/theme.rb

@@ -11,8 +11,16 @@ module W3DHubLauncher
 
   FONT_MONO = "./media/fonts/NotoSansMono-Regular.ttf"
 
+  NINE_SLICE_EDGE = 8
+  NINE_SLICE_ROUNDED = "./media/ui/rounded.png"
+  NINE_SLICE_ROUNDED_LEFT = "./media/ui/rounded_left.png"
+  NINE_SLICE_ROUNDED_RIGHT = "./media/ui/rounded_right.png"
+  NINE_SLICE_ROUNDED_TOP = "./media/ui/rounded_top.png"
+  NINE_SLICE_ROUNDED_BOTTOM = "./media/ui/rounded_bottom.png"
+  NINE_SLICE_SQUARE = "./media/ui/square.png"
+
   CTA_BUTTON_THEME = {
-    background: 0xff_1a5fb4
+    background_nine_slice_color: 0xff_1a5fb4
   }
 
   THEME = {
@@ -35,9 +43,23 @@ module W3DHubLauncher
     Button: {
       font: FONT_BOLD,
       text_shadow: false,
-      background: 0x88_5e5c64,
+      color: 0xff_ffffff,
-      border_thickness: 1,
+      background: 0,#x88_5e5c64,
-      border_color: 0xff_000000
+      background_nine_slice: NINE_SLICE_ROUNDED,
+      background_nine_slice_from_edge: NINE_SLICE_EDGE,
+      background_nine_slice_mode: :stretched,
+      background_nine_slice_color: 0x88_5e5c64,
+      border_thickness: 0,
+      hover: {
+        color: 0xcc_ffffff,
+        background: 0,
+        background_nine_slice_color: 0xff_5e5c64
+      },
+      active: {
+        color: 0x88_ffffff,
+        background: 0,
+        background_nine_slice_color: 0xaa_5e5c64
+      }
     },
     EditLine: {
       font: FONT_REGULAR
@@ -63,6 +85,7 @@ module W3DHubLauncher
       text_size: 24,
       text_align: :left,
       font: FONT_REGULAR,
+      background_nine_slice: NINE_SLICE_SQUARE,
       background: 0xee_000000,
       border_color: 0xaa_000000,
       hover: {
@@ -71,6 +94,15 @@ module W3DHubLauncher
       active: {
         background: 0xee_444444
       }
+    },
+    ToolTip: {
+      text_size: 24,
+      background: 0,#x88_5e5c64,
+      background_nine_slice: NINE_SLICE_ROUNDED,
+      background_nine_slice_from_edge: NINE_SLICE_EDGE,
+      background_nine_slice_mode: :stretched,
+      background_nine_slice_color: 0xdd_5e5c64,
+      border_thickness: 0
     }
   }
 end

lib/window.rb

@@ -17,7 +17,7 @@ module W3DHubLauncher
       # root container - background image
       stack(width: 1.0, height: 1.0, background_image: safe_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: ALPHA_BLACK) do
+        flow(width: 1.0, height: 1.0, background: 0xaa_000000) do
           # content container
           stack(fill: true, height: 1.0, margin: PADDING, margin_right: LARGE_PADDING) do
             # header bar container
@@ -50,18 +50,18 @@ module W3DHubLauncher
             stack(width: 1.0, fill: true) do
               # game bar container
               flow(width: 1.0, height: 60) do
-                flow(width: 220, height: 1.0, background: ALPHA_BLACK) do
+                flow(width: 220, height: 1.0, 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: 40, margin_left: PADDING, v_align: :center, h_align: :center) do
                     image safe_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
+                flow(fill: true, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK, margin_left: PADDING) do
-                  image safe_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 safe_get_image("./data/cache/apb.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0x88_5e5c64, border_thickness_bottom: 3, border_color_bottom: 0xff_3584e4, tip: "Red Alert: A Path Beyond"
-                  image safe_get_image("./data/cache/ren.png"), height: 1.0, padding: HALF_PADDING, tip: "Command & Conquer: Renegade"
+                  image safe_get_image("./data/cache/ren.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Command & Conquer: Renegade"
-                  image safe_get_image("./data/cache/tsr.png"), height: 1.0, padding: HALF_PADDING, tip: "Tiberian Sun: Reborn"
+                  image safe_get_image("./data/cache/tsr.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Tiberian Sun: Reborn"
-                  image safe_get_image("./data/cache/woa.png"), height: 1.0, padding: HALF_PADDING, tip: "Battle for Dune: War of Assassins"
+                  image safe_get_image("./data/cache/woa.png"), height: 1.0, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0, tip: "Battle for Dune: War of Assassins"
                 end
               end
 
@@ -83,16 +83,16 @@ module W3DHubLauncher
                   caption "Game Version"
                   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 "PLAY", fill: true, height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_LEFT, **CTA_BUTTON_THEME
-                    button safe_get_image("./media/icons/singleplayer.png"), image_height: 1.0, **CTA_BUTTON_THEME
+                    button safe_get_image("./media/icons/singleplayer.png"), image_height: 1.0, background_nine_slice: NINE_SLICE_SQUARE, **CTA_BUTTON_THEME
-                    button safe_get_image("./media/icons/gear.png"), image_height: 1.0, **CTA_BUTTON_THEME
+                    button safe_get_image("./media/icons/gear.png"), image_height: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_RIGHT, **CTA_BUTTON_THEME
                   end
                   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, 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
+                  flow(width: 1.0, height: 1.0, max_height: 380, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
                     image safe_get_image("./media/background.png"), fill: true, aspect_ratio: 16.0 / 9.0
 
                     stack(fill: true, height: 1.0, margin_left: PADDING) do
@@ -109,8 +109,9 @@ module W3DHubLauncher
                   # 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: safe_get_image("./media/background.png"), background_image_mode: :fill, border_thickness: 1, border_color: Gosu::Color::BLACK) do
+                      stack(width: 1.0 / 3, height: 345, aspect_ratio: 1, margin_left: HALF_PADDING, margin_right: HALF_PADDING, margin_bottom: PADDING) 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
+                        stack(width: 1.0, fill: true, background_image: safe_get_image("./media/background.png"), background_image_mode: :fill)
+                        stack(width: 1.0, height: 1.0 / 3, padding: PADDING, v_align: :bottom, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK, 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
@@ -127,9 +128,9 @@ module W3DHubLauncher
             # self account container
             flow(width: 1.0, height: 80) do
               # self avatar container
-              stack(width: 80, height: 1.0, background_image: safe_get_image("./media/default.png")) do
+              stack(width: 80, height: 1.0, background_image: rounded_avatar(safe_get_image("./media/default.png"))) do
                 # self online state container
-                stack(width: 20, height: 20, v_align: :bottom, h_align: :right, background_image: safe_get_image("./media/icons/contrast.png"), background_image_color: 0xff_26a269)
+                stack(width: 20, height: 20, v_align: :bottom, h_align: :right, background_image: safe_get_image("./media/ui/circle_small.png"), background_image_color: 0xff_26a269)
               end
 
               stack(fill: true, height: 1.0, margin_left: HALF_PADDING) do
@@ -152,7 +153,7 @@ module W3DHubLauncher
 
             # friend management container
             flow(width: 1.0, height: 60, margin_top: PADDING) do
-              flow(width: 1.0) do # FIXME: , v_align: :center
+              flow(width: 1.0, v_align: :center) do
                 button safe_get_image("./media/icons/singleplayer.png"), image_height: 1.0
                 button safe_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
@@ -160,13 +161,13 @@ module W3DHubLauncher
             end
 
             # friends/clanmates list container
-            stack(width: 1.0, fill: true, margin_top: PADDING, scroll: true) do
+            stack(width: 1.0, fill: true, margin_top: LARGE_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
+                flow(width: 1.0, height: 48, padding_top: HALF_PADDING, padding_bottom: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_color: 0, hover: { background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0x44_000000 }) do
                   # friend avatar container
-                  stack(width: 48, height: 1.0, background_image: safe_get_image("./media/default.png")) do
+                  stack(width: 48, height: 1.0, margin_left: HALF_PADDING, background_image: rounded_avatar(safe_get_image("./media/default.png"))) do
-                    stack(width: 12, height: 12, v_align: :bottom, h_align: :right, background_image: safe_get_image("./media/icons/contrast.png"), background_image_color: 0xff_26a269)
+                    stack(width: 12, height: 12, v_align: :bottom, h_align: :right, background_image: safe_get_image("./media/ui/circle_small.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
@@ -176,7 +177,7 @@ module W3DHubLauncher
                     end
                   end
                   # friend active application container
-                  stack(width: 48, height: 1.0, background_image: safe_get_image("./media/logo.png"))
+                  stack(width: 48, height: 1.0, margin_right: HALF_PADDING, background_image: safe_get_image("./media/logo.png"))
                 end
               end
             end

media/icons/license.txt

@@ -0,0 +1,14 @@
+
+###############################################################################
+
+	Game icon pack by Kenney Vleugels (www.kenney.nl)
+
+			------------------------------
+
+			        License (CC0)
+	       http://creativecommons.org/publicdomain/zero/1.0/
+
+	You may use these graphics in personal and commercial projects.
+	Credit (Kenney or www.kenney.nl) would be nice but is not mandatory.
+
+###############################################################################