Added background image for whole Interface, made user avatar rounded, redid news layout, misc. tweaks for better contrast with background image

.gitignore

@@ -9,6 +9,4 @@ _*.*
 media/icons/*
 !media/icons/app.*
 !media/icons/default_icon.png
-!media/icons/w3dhub.png
-media/banners/*
-!media/banners/.gitkeep
+!media/icons/w3dhub.png

Gemfile.lock

@@ -2,15 +2,15 @@ GEM
   remote: https://rubygems.org/
   specs:
     base64 (0.2.0)
-    concurrent-ruby (1.2.2)
-    cyberarm_engine (0.24.0)
+    concurrent-ruby (1.2.3)
+    cyberarm_engine (0.24.1)
       excon (~> 0.88)
       gosu (~> 1.1)
       gosu_more_drawables (~> 0.3)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
     event_emitter (0.2.6)
-    excon (0.108.0)
+    excon (0.109.0)
     ffi (1.16.3)
     ffi-win32-extensions (1.0.4)
       ffi
@@ -22,7 +22,7 @@ GEM
     rake (13.1.0)
     rexml (3.2.6)
     rubyzip (2.3.2)
-    sdl2-bindings (0.2.2)
+    sdl2-bindings (0.2.3)
       ffi (~> 1.15)
     websocket (1.2.10)
     websocket-client-simple (0.8.0)

lib/pages/community.rb

@@ -6,6 +6,8 @@ class W3DHub
 
         body.clear do
           stack(width: 1.0, height: 1.0, padding: 8) do
+            background 0xaa_252525
+
             stack(width: 1.0) do
               tagline "<b>Welcome to #{I18n.t(:app_name)}</b>"
               para "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."
@@ -129,52 +131,29 @@ class W3DHub
 
             feed.items.sort_by { |i| i.timestamp }.reverse[0..9].each do |item|
               image_path = Cache.path(item.image)
-              news_blurb_container = nil
-              news_title_container = nil
 
-              news_container = stack(width: 300, height: 300, margin: 8, background_image: image_path, border_thickness: 1, border_color: lighten(Gosu::Color.new(0xff_252525))) do
-                background 0x88_000000
+              flow(width: 1.0, max_width: 1230, height: 200, margin: 8, border_thickness: 1, border_color: lighten(Gosu::Color.new(0xff_252525))) do
+                background 0x22_000000
 
-                # Detailed view
-                news_blurb_container = stack(width: 1.0, height: 1.0, background: 0xaa_000000, padding: 4) do
+                image image_path, height: 1.0
+
+                stack(fill: true, height: 1.0, background: 0x44_000000, padding: 4, border_thickness_left: 1, border_color_left: lighten(Gosu::Color.new(0xff_252525))) do
                   tagline "<b>#{item.title}</b>", width: 1.0
-                  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
-                    W3DHub.url(item.uri)
-                  end
-                end
-
-                # Just title
-                news_title_container = stack(width: 1.0, height: 1.0) do
                   flow(fill: true)
 
-                  tagline "<b>#{item.title}</b>", width: 1.0, background: 0xaa_000000, padding: 4
-                end
-              end
+                  flow(width: 1.0, height: 32, margin_top: 8) do
+                    stack(fill: true, height: 1.0) do
+                      flow(fill: true)
+                      inscription "#{item.author} • #{item.timestamp.strftime("%Y-%m-%d")}"
+                      flow(fill: true)
+                    end
 
-              news_blurb_container.hide
-
-              def news_container.hit_element?(x, y)
-                return unless hit?(x, y)
-
-                if @children.first.visible? && (btn = @children.first.children.find { |child| child.visible? && child.is_a?(CyberarmEngine::Element::Button) && child.hit?(x, y) })
-                  btn
-                else
-                  self
-                end
-              end
-
-              news_container.subscribe(:enter) do
-                news_title_container.hide
-                news_blurb_container.show
-              end
-
-              news_container.subscribe(:leave) do
-                unless news_container.hit?(window.mouse_x, window.mouse_y)
-                  news_title_container.show
-                  news_blurb_container.hide
+                    button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4 do
+                      W3DHub.url(item.uri)
+                    end
+                  end
                 end
               end
             end

lib/pages/download_manager.rb

@@ -9,7 +9,11 @@ class W3DHub
 
         unless task
           body.clear do
-            tagline "No operations pending.", width: 1.0, text_align: :center, margin: 128
+            stack(width: 1.0, height: 1.0) do
+              background 0xaa_252525
+
+              tagline "No operations pending.", width: 1.0, text_align: :center, margin: 128
+            end
           end
 
           return
@@ -23,6 +27,8 @@ class W3DHub
 
         body.clear do
           stack(width: 1.0, height: 1.0) do
+            background 0xaa_252525
+
             # TODO: Show correct application details here
             flow(width: 1.0, height: 0.1, padding: 8) do
               background task.application.color

lib/pages/games.rb

@@ -31,7 +31,7 @@ class W3DHub
 
       def populate_games_list
         @games_list_container.clear do
-          background 0xff_121920
+          background 0xaa_121920
 
           stack(width: 128, height: 1.0) do
             flow(fill: true)
@@ -86,9 +86,12 @@ class W3DHub
         Store.settings[:last_selected_channel] = channel.id
 
         @game_page_container.clear do
-          background game.color
-          @game_page_container.style.background_image_color = game.color
-          @game_page_container.style.default[:background_image_color] = game.color
+          game_color = Gosu::Color.new(game.color)
+          game_color.alpha = 0x88
+
+          background game_color
+          @game_page_container.style.background_image_color = game_color
+          @game_page_container.style.default[:background_image_color] = game_color
           @game_page_container.update_background_image
 
           # Game Stuff
@@ -413,52 +416,29 @@ class W3DHub
 
             feed.items.sort_by { |i| i.timestamp }.reverse[0..9].each do |item|
               image_path = Cache.path(item.image)
-              news_blurb_container = nil
-              news_title_container = nil
 
-              news_container = stack(width: 300, height: 300, margin: 8, background_image: image_path, border_thickness: 1, border_color: lighten(Gosu::Color.new(game.color))) do
+              flow(width: 1.0, max_width: 869, height: 200, margin: 8, border_thickness: 1, border_color: lighten(Gosu::Color.new(game.color))) do
                 background 0x88_000000
 
-                # Detailed view
-                news_blurb_container = stack(width: 1.0, height: 1.0, background: 0xaa_000000, padding: 4) do
+                image image_path, height: 1.0
+
+                stack(fill: true, height: 1.0, background: 0x44_000000, padding: 4, border_thickness_left: 1, border_color_left: lighten(Gosu::Color.new(game.color))) do
                   tagline "<b>#{item.title}</b>", width: 1.0
-                  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
-                    W3DHub.url(item.uri)
-                  end
-                end
-
-                # Just title
-                news_title_container = stack(width: 1.0, height: 1.0) do
                   flow(fill: true)
 
-                  tagline "<b>#{item.title}</b>", width: 1.0, background: 0xaa_000000, padding: 4
-                end
-              end
+                  flow(width: 1.0, height: 32, margin_top: 8) do
+                    stack(fill: true, height: 1.0) do
+                      flow(fill: true)
+                      inscription "#{item.author} • #{item.timestamp.strftime("%Y-%m-%d")}"
+                      flow(fill: true)
+                    end
 
-              news_blurb_container.hide
-
-              def news_container.hit_element?(x, y)
-                return unless hit?(x, y)
-
-                if @children.first.visible? && (btn = @children.first.children.find { |child| child.visible? && child.is_a?(CyberarmEngine::Element::Button) && child.hit?(x, y) })
-                  btn
-                else
-                  self
-                end
-              end
-
-              news_container.subscribe(:enter) do
-                news_title_container.hide
-                news_blurb_container.show
-              end
-
-              news_container.subscribe(:leave) do
-                unless news_container.hit?(window.mouse_x, window.mouse_y)
-                  news_title_container.show
-                  news_blurb_container.hide
+                    button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4 do
+                      W3DHub.url(item.uri)
+                    end
+                  end
                 end
               end
             end

lib/pages/login.rb

@@ -105,7 +105,15 @@ class W3DHub
 
           flow(fill: true, height: 1.0) do
             flow(fill: true) # Fill empty space to push image over to container edge
-            image Cache.path(Store.account.avatar_uri), height: 1.0
+            avatar_image = get_image(Cache.path(Store.account.avatar_uri))
+            mask_image = get_image("#{GAME_ROOT_PATH}/media/textures/circle_mask.png")
+
+            composite_image = Gosu.render(256, 256) do
+              avatar_image.draw(0, 0, 0)
+              mask_image.draw(0, 0, 1, 1, 1, 0xff_ffffff, :multiply)
+            end
+
+            image composite_image, width: 1.0
           end
         end
       end

lib/pages/server_browser.rb

@@ -20,6 +20,8 @@ class W3DHub
 
         body.clear do
           stack(width: 1.0, height: 1.0, padding: 8) do
+            background 0xaa_252525
+
             stack(width: 1.0, height: 18) do
               inscription "<b>#{I18n.t(:"server_browser.filters")}</b>"
             end

lib/pages/settings.rb

@@ -4,6 +4,8 @@ class W3DHub
       def setup
         body.clear do
           stack(width: 1.0, height: 1.0, padding: 16, scroll: true) do
+            background 0xaa_252525
+
             para "<b>Language</b>"
             flow(width: 1.0, height: 0.12) do
               para "<b>Launcher Language</b>", width: 0.249, margin_left: 32, margin_top: 12

lib/states/interface.rb

@@ -27,7 +27,7 @@ class W3DHub
 
         theme(W3DHub::THEME)
 
-        @interface_container = stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: W3DHub::BORDER_COLOR) do
+        @interface_container = stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: W3DHub::BORDER_COLOR, background_image: "#{GAME_ROOT_PATH}/media/banners/background.png", background_image_color: 0xff_525252, background_image_mode: :fill) do
           background 0xff_252525
 
           @header_container = flow(width: 1.0, height: 84, padding: 4, border_thickness_bottom: 1, border_color_bottom: W3DHub::BORDER_COLOR) do