diff --git a/src/features/hud/ui/settings.rs b/src/features/hud/ui/settings.rs index 902b89f..4883089 100644 --- a/src/features/hud/ui/settings.rs +++ b/src/features/hud/ui/settings.rs @@ -10,9 +10,7 @@ pub fn open_settings(commands: &mut Commands) { position_type: PositionType::Absolute, width: percent(100), height: percent(100), - justify_content: JustifyContent::Center, - align_items: AlignItems::Center, - ..default() + ..Node::center() }, ZIndex(1), BackgroundColor(Color::srgba(0.0, 0.0, 0.0, 0.8)), @@ -21,10 +19,9 @@ pub fn open_settings(commands: &mut Commands) { parent .spawn(( Node { - flex_direction: FlexDirection::Column, - align_items: AlignItems::Center, + width: px(700), padding: UiRect::all(px(20.0)), - ..default() + ..Node::vstack(px(20)) }, BackgroundColor(Color::srgb(0.2, 0.2, 0.2)), BorderRadius::all(px(10.0)), @@ -32,12 +29,8 @@ pub fn open_settings(commands: &mut Commands) { .with_children(|parent| { parent.spawn(( Node { - width: percent(100.0), justify_content: JustifyContent::SpaceBetween, - align_items: AlignItems::Center, - margin: UiRect::bottom(px(20.0)), - column_gap: px(20.0), - ..default() + ..Node::hstack(px(20)) }, children![ ( @@ -45,93 +38,73 @@ pub fn open_settings(commands: &mut Commands) { TextFont::from_font_size(40.0), TextColor(Color::WHITE), ), - ( - Button, + pill_button( ButtonType::SettingsClose, + ButtonVariant::Destructive, Node { - width: px(40.0), - height: px(40.0), - justify_content: JustifyContent::Center, - align_items: AlignItems::Center, + width: px(40), + height: px(40), ..default() }, - BackgroundColor(Color::srgb(0.8, 0.2, 0.2)), - BorderRadius::MAX, - children![( - Text::new("X"), - TextFont::from_font_size(24.0), - TextColor(Color::WHITE), - )] - ) + "X", + 24.0 + ), ], )); parent - .spawn(Node { - width: percent(100), - flex_direction: FlexDirection::Column, - margin: UiRect::top(px(10.0)), - row_gap: px(10.0), - ..default() - }) + .spawn(Node::vstack(px(10))) .with_children(|parent| { - parent.spawn(( - Button, + parent.spawn(button( ButtonType::SettingsExit, + ButtonVariant::Secondary, Node { - width: percent(100), - height: px(80), - justify_content: JustifyContent::Center, - align_items: AlignItems::Center, - padding: UiRect::horizontal(px(10.0)), + padding: UiRect::all(px(10)), ..default() }, - BackgroundColor(NORMAL_BUTTON), - BorderRadius::all(px(10)), - children![( - Text::new("Spiel verlassen"), - TextFont::from_font_size(24.0), - TextColor(Color::WHITE) - )], + "Spiel verlassen", + 24.0, )); - parent.spawn(( - Button, + parent.spawn(button( ButtonType::SettingsSave, + ButtonVariant::Secondary, Node { - width: percent(100), - height: px(80), - justify_content: JustifyContent::Center, - align_items: AlignItems::Center, - padding: UiRect::horizontal(px(10.0)), + padding: UiRect::all(px(10)), ..default() }, - BackgroundColor(NORMAL_BUTTON), - BorderRadius::all(px(10)), - children![( - Text::new("Spiel speichern"), - TextFont::from_font_size(24.0), - TextColor(Color::WHITE) - )], + "Spiel speichern", + 24.0, )); parent.spawn(( Node { - width: percent(100), - flex_direction: FlexDirection::Row, - justify_content: JustifyContent::SpaceBetween, - align_items: AlignItems::Center, - column_gap: px(10), - padding: UiRect::horizontal(px(10.0)), - ..default() + justify_content: JustifyContent::Center, + ..Node::hstack(px(30)) }, children![ ( Node { - flex_direction: FlexDirection::Column, + width: percent(40), + ..Node::vstack(px(10)) + }, + children![ + ( + Text::new("Timer Einstellungen"), + TextFont::from_font_size(18.0), + TextColor(Color::WHITE), + ), + ( + Text::new("Tipp: Benutze [Umstellen] um in 10er Schritten zu inkrementieren oder dekrementieren!"), + TextFont::from_font_size(16.0), + TextColor(Color::WHITE) + ) + ] + ), + ( + Node { align_items: AlignItems::Center, - row_gap: px(10), - ..default() + ..Node::vstack(px(10)) }, children![ ( @@ -144,10 +117,8 @@ pub fn open_settings(commands: &mut Commands) { ), ( Node { - flex_direction: FlexDirection::Column, align_items: AlignItems::Center, - row_gap: px(10), - ..default() + ..Node::vstack(px(10)) }, children![ ( @@ -160,10 +131,8 @@ pub fn open_settings(commands: &mut Commands) { ), ( Node { - flex_direction: FlexDirection::Column, align_items: AlignItems::Center, - row_gap: px(10), - ..default() + ..Node::vstack(px(10)) }, children![ ( diff --git a/src/features/hud/ui/timer_settings.rs b/src/features/hud/ui/timer_settings.rs index 014e4f0..e7d599c 100644 --- a/src/features/hud/ui/timer_settings.rs +++ b/src/features/hud/ui/timer_settings.rs @@ -4,9 +4,8 @@ use crate::prelude::*; pub fn timer_settings(timer_type: TimerType) -> impl Bundle { ( Node { - flex_direction: FlexDirection::Row, align_items: AlignItems::Center, - ..default() + ..Node::hstack(px(0)) }, children![ timer_settings_part(SettingsTimerInput::Minutes(timer_type.clone()), 1), @@ -22,28 +21,20 @@ pub fn timer_settings(timer_type: TimerType) -> impl Bundle { fn timer_settings_part(input: SettingsTimerInput, amount: u32) -> impl Bundle { ( - Node { - flex_direction: FlexDirection::Column, - ..default() - }, + Node::vstack(px(0)), children![ - ( - Button, + button( ButtonType::SettingsTimerChange { input: input.clone(), amount: amount as i32 }, + ButtonVariant::Secondary, Node { - width: auto(), - justify_content: JustifyContent::Center, + width: percent(100), ..default() }, - BackgroundColor(NORMAL_BUTTON), - children![ - Text::new("+"), - TextFont::from_font_size(12.0), - TextColor(Color::WHITE) - ] + "+", + 12.0 ), ( input.clone(), @@ -51,23 +42,18 @@ fn timer_settings_part(input: SettingsTimerInput, amount: u32) -> impl Bundle { TextFont::from_font_size(24.0), TextColor(Color::WHITE) ), - ( - Button, + button( ButtonType::SettingsTimerChange { input: input.clone(), - amount: -(amount as i32), + amount: -(amount as i32) }, + ButtonVariant::Secondary, Node { - width: auto(), - justify_content: JustifyContent::Center, + width: percent(100), ..default() }, - BackgroundColor(NORMAL_BUTTON), - children![ - Text::new("-"), - TextFont::from_font_size(12.0), - TextColor(Color::WHITE) - ] + "-", + 12.0 ), ], ) diff --git a/src/features/savegame/ui/load.rs b/src/features/savegame/ui/load.rs index 7517907..ff71740 100644 --- a/src/features/savegame/ui/load.rs +++ b/src/features/savegame/ui/load.rs @@ -21,6 +21,7 @@ pub fn spawn_load_popup(commands: &mut Commands) { width: px(600.0), height: px(500.0), padding: UiRect::all(px(20.0)), + align_items: AlignItems::Center, ..Node::vstack(px(10)) }, BackgroundColor(Color::srgb(0.2, 0.2, 0.2)), diff --git a/src/features/ui/ui/flexbox.rs b/src/features/ui/ui/flexbox.rs index 20728b8..89d8d6c 100644 --- a/src/features/ui/ui/flexbox.rs +++ b/src/features/ui/ui/flexbox.rs @@ -10,7 +10,6 @@ impl Flexbox for Node { fn hstack(spacing: Val) -> Self { Self { flex_direction: FlexDirection::Row, - align_items: AlignItems::Center, column_gap: spacing, ..default() } @@ -19,7 +18,6 @@ impl Flexbox for Node { fn vstack(spacing: Val) -> Self { Self { flex_direction: FlexDirection::Column, - align_items: AlignItems::Center, row_gap: spacing, ..default() }