fix: Use UI components for GameScreen settings

This commit is contained in:
demenik
2025-11-28 15:32:51 +01:00
parent 202f62b41c
commit 2d0f51ff3d
4 changed files with 59 additions and 105 deletions

View File

@@ -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![
(

View File

@@ -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
),
],
)

View File

@@ -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)),

View File

@@ -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()
}