From c2528f7e12dc220f79a2e39bf8ff7ba5cc57f5bb Mon Sep 17 00:00:00 2001 From: Cyberarm Date: Tue, 27 Feb 2024 22:17:17 -0600 Subject: [PATCH] Added background image for whole Interface, made user avatar rounded, redid news layout, misc. tweaks for better contrast with background image --- .gitignore | 4 +-- Gemfile.lock | 8 ++--- lib/pages/community.rb | 55 ++++++++++--------------------- lib/pages/download_manager.rb | 8 ++++- lib/pages/games.rb | 62 ++++++++++++----------------------- lib/pages/login.rb | 10 +++++- lib/pages/server_browser.rb | 2 ++ lib/pages/settings.rb | 2 ++ lib/states/interface.rb | 2 +- 9 files changed, 64 insertions(+), 89 deletions(-) diff --git a/.gitignore b/.gitignore index d5105fe..c92b40f 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,4 @@ _*.* media/icons/* !media/icons/app.* !media/icons/default_icon.png -!media/icons/w3dhub.png -media/banners/* -!media/banners/.gitkeep \ No newline at end of file +!media/icons/w3dhub.png \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index a418a13..4555794 100644 --- a/Gemfile.lock +++ b/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) diff --git a/lib/pages/community.rb b/lib/pages/community.rb index 0ee0d54..d8d0e92 100644 --- a/lib/pages/community.rb +++ b/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 "Welcome to #{I18n.t(:app_name)}" 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 "#{item.title}", 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 "#{item.title}", 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 diff --git a/lib/pages/download_manager.rb b/lib/pages/download_manager.rb index 4ffd744..b5ad9f1 100644 --- a/lib/pages/download_manager.rb +++ b/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 diff --git a/lib/pages/games.rb b/lib/pages/games.rb index 4557623..d899b03 100644 --- a/lib/pages/games.rb +++ b/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 "#{item.title}", 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 "#{item.title}", 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 diff --git a/lib/pages/login.rb b/lib/pages/login.rb index be93145..963b19d 100644 --- a/lib/pages/login.rb +++ b/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 diff --git a/lib/pages/server_browser.rb b/lib/pages/server_browser.rb index 78bdad5..19e1baa 100644 --- a/lib/pages/server_browser.rb +++ b/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 "#{I18n.t(:"server_browser.filters")}" end diff --git a/lib/pages/settings.rb b/lib/pages/settings.rb index cfe068f..8ae2fd8 100644 --- a/lib/pages/settings.rb +++ b/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 "Language" flow(width: 1.0, height: 0.12) do para "Launcher Language", width: 0.249, margin_left: 32, margin_top: 12 diff --git a/lib/states/interface.rb b/lib/states/interface.rb index 5e84bac..87e3aed 100644 --- a/lib/states/interface.rb +++ b/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