clean up layout

src/start_menu.rs

@@ -1,4 +1,5 @@
 use bevy::prelude::*;
+use bevy::text::DEFAULT_FONT_HANDLE;
 use tracing::info;
 
 pub struct StartMenu {}
@@ -10,12 +11,20 @@ struct Title;
 struct QuitButton;
 
 fn title_text() -> TextBundle {
-    TextBundle::from_section("Rock, Paper, Scissors", TextStyle::default())
+    let style = TextStyle {
+        font: DEFAULT_FONT_HANDLE.typed(),
+        font_size: 32.0,
+        color: Color::WHITE,
+    };
+    TextBundle::from_section("Rock, Paper, Scissors", style)
 }
 
 fn quit_button() -> ButtonBundle {
     ButtonBundle {
         style: Style {
+            flex_direction: FlexDirection::Column,
+            align_items: AlignItems::Center,
+            display: Display::Flex,
             width: Val::Px(150.0),
             height: Val::Px(65.0),
             ..default()
@@ -26,27 +35,50 @@ fn quit_button() -> ButtonBundle {
 }
 
 fn click_quit(
-    mut actions: Query<&Interaction, (Changed<Interaction>, With<QuitButton>)>,
+    mut actions: Query<
+        (&Interaction, &mut BackgroundColor),
+        (Changed<Interaction>, With<QuitButton>),
+    >,
     mut quit: ResMut<Events<bevy::app::AppExit>>,
 ) {
-    for interaction in &mut actions {
+    for (interaction, mut bg) in &mut actions {
         match interaction {
             Interaction::Pressed => {
                 info!("Quit button clicked");
+                bg.0 = Color::BLUE;
                 quit.send_default();
             }
-            Interaction::Hovered => {}
-            Interaction::None => {}
+            Interaction::Hovered => {
+                bg.0 = Color::rgb(0.4, 0.3, 0.3);
+            }
+            Interaction::None => {
+                bg.0 = Color::rgb(0.4, 0.2, 0.2);
+            }
         }
     }
 }
 
+fn vertical_spacer(height: f32) -> NodeBundle {
+    NodeBundle {
+        style: Style {
+            min_height: Val::Px(height),
+            ..default()
+        },
+        ..default()
+    }
+}
+
 fn setup(mut commands: Commands) {
     commands.spawn(Camera2dBundle::default());
 
     commands
         .spawn(NodeBundle {
             style: Style {
+                padding: UiRect {
+                    top: Val::Px(30.0),
+                    ..default()
+                },
+                display: Display::Flex,
                 width: Val::Percent(100.0),
                 flex_direction: FlexDirection::Column,
                 align_items: AlignItems::Center,
@@ -57,10 +89,29 @@ fn setup(mut commands: Commands) {
         })
         .with_children(|column| {
             column.spawn((Title, title_text()));
+            column.spawn(vertical_spacer(20.0));
             column
                 .spawn((QuitButton, quit_button()))
                 .with_children(|button| {
-                    button.spawn(TextBundle::from_section("Quit", TextStyle::default()));
+                    let style = TextStyle {
+                        font: DEFAULT_FONT_HANDLE.typed(),
+                        font_size: 24.0,
+                        color: Color::WHITE,
+                    };
+                    button.spawn(
+                        TextBundle::from_section("Quit", style)
+                            .with_text_alignment(TextAlignment::Center)
+                            .with_style(Style {
+                                display: Display::Flex,
+                                margin: UiRect {
+                                    left: Val::Auto,
+                                    right: Val::Auto,
+                                    top: Val::Auto,
+                                    bottom: Val::Auto,
+                                },
+                                ..Default::default()
+                            }),
+                    );
                 });
         });
 }