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

This commit is contained in:
2026-04-16 23:39:16 -05:00
parent 4c283ee4d5
commit 95187f37f4
15 changed files with 68 additions and 25 deletions

View File

@@ -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
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/ren.png"), height: 1.0, padding: HALF_PADDING, 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/woa.png"), height: 1.0, padding: HALF_PADDING, tip: "Battle for Dune: War of Assassins"
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_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, 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, 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, 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 safe_get_image("./media/icons/singleplayer.png"), image_height: 1.0, **CTA_BUTTON_THEME
button safe_get_image("./media/icons/gear.png"), image_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, background_nine_slice: NINE_SLICE_SQUARE, **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, 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 / 3, height: 345, aspect_ratio: 1, margin_left: HALF_PADDING, margin_right: HALF_PADDING, margin_bottom: PADDING) 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: 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: 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/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