Styling improvements

This commit is contained in:
2024-02-28 10:52:29 -06:00
parent c2528f7e12
commit f9d401e713
4 changed files with 32 additions and 32 deletions

View File

@@ -121,7 +121,7 @@ class W3DHub
# flow(width: 1.0) do # flow(width: 1.0) do
# inscription item.timestamp.strftime("%Y-%m-%d"), width: 0.499 # inscription item.timestamp.strftime("%Y-%m-%d"), width: 0.499
# link I18n.t(:"games.read_more"), width: 0.5, text_align: :right, text_size: 14 do # link I18n.t(:"games.read_more"), width: 0.5, text_align: :right, text_size: 16 do
# W3DHub.url(item.uri) # W3DHub.url(item.uri)
# end # end
# end # end
@@ -133,21 +133,18 @@ class W3DHub
image_path = Cache.path(item.image) image_path = Cache.path(item.image)
flow(width: 1.0, max_width: 1230, height: 200, margin: 8, border_thickness: 1, border_color: lighten(Gosu::Color.new(0xff_252525))) do 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 background 0x44_000000
image image_path, height: 1.0 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 stack(fill: true, height: 1.0, padding: 4, border_thickness_left: 1, border_color_left: lighten(Gosu::Color.new(0xff_252525))) do
tagline "<b>#{item.title}</b>", width: 1.0 tagline "<b>#{item.title}</b>", width: 1.0
inscription item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true inscription item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true
flow(fill: true)
flow(width: 1.0, height: 32, margin_top: 8) do flow(width: 1.0, height: 32, margin_top: 8) do
stack(fill: true, height: 1.0) do stack(fill: true, height: 1.0) do
flow(fill: true) flow(fill: true)
inscription "#{item.author}#{item.timestamp.strftime("%Y-%m-%d")}" inscription "#{item.author}#{item.timestamp.strftime("%Y-%m-%d")}"
flow(fill: true)
end end
button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4 do button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4 do

View File

@@ -51,7 +51,7 @@ class W3DHub
selected = game == @focused_game selected = game == @focused_game
game_button = stack(width: 64, height: 1.0, border_thickness_bottom: 4, game_button = stack(width: 64, height: 1.0, border_thickness_bottom: 4,
border_color_bottom: selected ? 0xff_00acff : 0x00_000000, border_color_bottom: selected ? 0xff_0074e0 : 0x00_000000,
hover: { background: selected ? game.color : 0xff_444444 }, hover: { background: selected ? game.color : 0xff_444444 },
padding_left: 4, padding_right: 4, tip: game.name) do padding_left: 4, padding_right: 4, tip: game.name) do
background game.color if selected background game.color if selected
@@ -63,7 +63,7 @@ class W3DHub
image "#{GAME_ROOT_PATH}/media/ui_icons/import.png", width: 24, margin_left: -4, margin_top: -6, color: 0xff_ff8800 if Store.application_manager.updateable?(game.id, game.channels.first.id) image "#{GAME_ROOT_PATH}/media/ui_icons/import.png", width: 24, margin_left: -4, margin_top: -6, color: 0xff_ff8800 if Store.application_manager.updateable?(game.id, game.channels.first.id)
end end
# inscription game.name, width: 1.0, text_align: :center, text_size: 14 # inscription game.name, width: 1.0, text_align: :center, text_size: 16
end end
def game_button.hit_element?(x, y) def game_button.hit_element?(x, y)
@@ -159,17 +159,17 @@ class W3DHub
end end
# Play buttons # Play buttons
flow(width: 1.0, height: 48, padding_top: 6, margin_bottom: 16) do flow(width: 1.0, height: 52, padding_top: 6) do
# background 0xff_551100 # background 0xff_551100
if Store.application_manager.installed?(game.id, channel.id) if Store.application_manager.installed?(game.id, channel.id)
if Store.application_manager.updateable?(game.id, channel.id) if Store.application_manager.updateable?(game.id, channel.id)
button "<b>#{I18n.t(:"interface.install_update")}</b>", fill: true, text_size: 32, **UPDATE_BUTTON do button "<b>#{I18n.t(:"interface.install_update")}</b>", fill: true, text_size: 30, **UPDATE_BUTTON do
Store.application_manager.update(game.id, channel.id) Store.application_manager.update(game.id, channel.id)
end end
else else
play_now_server = Store.application_manager.play_now_server(game.id, channel.id) play_now_server = Store.application_manager.play_now_server(game.id, channel.id)
play_now_button = button "<b>#{I18n.t(:"interface.play")}</b>", fill: true, text_size: 32, enabled: !play_now_server.nil? do play_now_button = button "<b>#{I18n.t(:"interface.play")}</b>", fill: true, text_size: 30, enabled: !play_now_server.nil? do
Store.application_manager.play_now(game.id, channel.id) Store.application_manager.play_now(game.id, channel.id)
end end
@@ -418,24 +418,21 @@ class W3DHub
image_path = Cache.path(item.image) image_path = Cache.path(item.image)
flow(width: 1.0, max_width: 869, height: 200, margin: 8, 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 background 0x44_000000
image image_path, height: 1.0 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 stack(fill: true, height: 1.0, padding: 4, border_thickness_left: 1, border_color_left: lighten(Gosu::Color.new(game.color))) do
tagline "<b>#{item.title}</b>", width: 1.0 tagline "<b>#{item.title}</b>", width: 1.0
inscription item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true inscription item.blurb.gsub(/\n+/, "\n").strip[0..1024], fill: true
flow(fill: true)
flow(width: 1.0, height: 32, margin_top: 8) do flow(width: 1.0, height: 32, margin_top: 8) do
stack(fill: true, height: 1.0) do stack(fill: true, height: 1.0) do
flow(fill: true) flow(fill: true)
inscription "#{item.author}#{item.timestamp.strftime("%Y-%m-%d")}" inscription "#{item.author}#{item.timestamp.strftime("%Y-%m-%d")}"
flow(fill: true)
end end
button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4 do button I18n.t(:"games.read_more"), width: 1.0, max_width: 128, padding_top: 4, padding_bottom: 4, margin_left: 0, margin_top: 0, margin_bottom: 0, margin_right: 0 do
W3DHub.url(item.uri) W3DHub.url(item.uri)
end end
end end
@@ -472,7 +469,7 @@ class W3DHub
@game_events_container.clear do @game_events_container.clear do
events.flatten.each do |event| events.flatten.each do |event|
stack(fill: true, height: 1.0, margin_left: 8, margin_right: 8, border_thickness: 1, border_color: lighten(Gosu::Color.new(game.color))) do stack(fill: true, height: 1.0, margin_left: 8, margin_right: 8, border_thickness: 1, border_color: lighten(Gosu::Color.new(game.color))) do
background 0xaa_222222 background 0x44_000000
title event.title, width: 1.0, text_align: :center title event.title, width: 1.0, text_align: :center
tagline event.start_time.strftime("%A"), text_size: 36, width: 1.0, text_align: :center tagline event.start_time.strftime("%A"), text_size: 36, width: 1.0, text_align: :center

View File

@@ -318,8 +318,8 @@ class W3DHub
inscription "<b>#{server&.status&.name}</b>", tag: :server_name inscription "<b>#{server&.status&.name}</b>", tag: :server_name
flow(width: 1.0, height: 1.0) do flow(width: 1.0, height: 1.0) do
inscription server.channel, margin_right: 64, text_size: 14, tag: :server_channel inscription server.channel, margin_right: 64, text_size: 16, tag: :server_channel
inscription server.region, text_size: 14, tag: :server_region inscription server.region, text_size: 16, tag: :server_region
end end
end end
@@ -492,11 +492,11 @@ class W3DHub
background 0xff_333333 if i.even? background 0xff_333333 if i.even?
stack(width: 0.6, height: 1.0) do stack(width: 0.6, height: 1.0) do
inscription player.nick, text_size: 14, text_wrap: :none inscription player.nick, text_size: 16, text_wrap: :none
end end
stack(width: 0.4, height: 1.0) do stack(width: 0.4, height: 1.0) do
inscription formatted_score(player.score), text_size: 14, width: 1.0, text_align: :right, text_wrap: :none inscription formatted_score(player.score), text_size: 16, width: 1.0, text_align: :right, text_wrap: :none
end end
end end
end end
@@ -508,11 +508,11 @@ class W3DHub
background 0xff_333333 if i.even? background 0xff_333333 if i.even?
stack(width: 0.6, height: 1.0) do stack(width: 0.6, height: 1.0) do
inscription player.nick, text_size: 14, text_wrap: :none inscription player.nick, text_size: 16, text_wrap: :none
end end
stack(width: 0.4, height: 1.0) do stack(width: 0.4, height: 1.0) do
inscription formatted_score(player.score), text_size: 14, width: 1.0, text_align: :right, text_wrap: :none inscription formatted_score(player.score), text_size: 16, width: 1.0, text_align: :right, text_wrap: :none
end end
end end
end end

View File

@@ -28,6 +28,7 @@ class W3DHub
}, },
TextBlock: { TextBlock: {
font: BOLD_FONT, font: BOLD_FONT,
text_color: 0xff_f2f2f2,
text_border: false, text_border: false,
text_shadow: true, text_shadow: true,
text_shadow_size: 1, text_shadow_size: 1,
@@ -53,13 +54,18 @@ class W3DHub
padding_left: 16, padding_left: 16,
padding_right: 16, padding_right: 16,
padding_bottom: 8, padding_bottom: 8,
border_thickness: 2,
border_color: Gosu::Color::NONE, border_color: Gosu::Color::NONE,
background: 0xff_00acff, background: 0xff_0074e0,
hover: { hover: {
background: 0xff_bee6fd text_color: 0xff_f2f2f2,
background: 0xff_004c94,
border_color: 0xff_0074e0
}, },
active: { active: {
background: 0xff_add5ec text_color: 0xff_aaaaaa,
background: 0xff_005aad,
border_color: 0xff_0074e0
} }
}, },
ToggleButton: { ToggleButton: {
@@ -70,7 +76,7 @@ class W3DHub
checkmark_image: "#{GAME_ROOT_PATH}/media/ui_icons/checkmark.png" checkmark_image: "#{GAME_ROOT_PATH}/media/ui_icons/checkmark.png"
}, },
Progress: { Progress: {
fraction_background: 0xff_00acff, fraction_background: 0xff_0074e0,
border_thickness: 0 border_thickness: 0
}, },
ListBox: { ListBox: {
@@ -78,7 +84,7 @@ class W3DHub
padding_right: 8 padding_right: 8
}, },
Slider: { Slider: {
border_color: 0xff_00acff border_color: 0xff_0074e0
}, },
Handle: { Handle: {
text_size: 18, text_size: 18,
@@ -87,12 +93,12 @@ class W3DHub
padding_right: 2, padding_right: 2,
padding_bottom: 8, padding_bottom: 8,
border_color: Gosu::Color::NONE, border_color: Gosu::Color::NONE,
background: 0xff_00acff, background: 0xff_0074e0,
hover: { hover: {
background: 0xff_bee6fd background: 0xff_004c94
}, },
active: { active: {
background: 0xff_add5ec background: 0xff_005aad
} }
} }
} }