Add Join button to title screen

src/state/title_screen.rs

@@ -52,16 +52,28 @@ const BOLD_TEXT_STYLE: TextStyle = TextStyle {
     font_size: 0.0,
     color: TEXT_COLOR,
 };
-const BORDER_COLOR: Color = Color::rgb(0.510, 0.612, 0.769);
-const BORDER_WIDTH: f32 = 2.0;
+
 const BACKGROUND_COLOR: Color = Color::rgb(0.580, 0.682, 0.839);
+const BORDER_COLOR: Color = Color::rgb(0.510, 0.612, 0.769);
+const BORDER_WIDTH: f32 = 1.5;
+
 const HEADER_BACKGROUND_COLOR: Color = Color::rgb(0.549, 0.647, 0.796);
 const HEADER_FONT_SIZE: f32 = 12.0;
 const HEADER_TEXT: &str = "Bevy Jam #4: The Game";
+
 const BODY_FONT_SIZE: f32 = 7.0;
 const BODY_TEXT: &str = "Welcome to the fourth official Bevy Jam!\n \nIn this 9 day event, your goal is to make a game in Bevy Engine,\nthe free and open-source game engine built in Rust.\n \nThe theme is: That's a LOT of Entities!";
 const THEME: &str = "That's a LOT of Entities!";
 
+const BUTTON_TEXT_STYLE: TextStyle = TextStyle {
+    font: BOLD_FONT_HANDLE,
+    font_size: 0.0,
+    color: Color::WHITE,
+};
+const BUTTON_FONT_SIZE: f32 = 12.0;
+const BUTTON_BACKGROUND_COLOR: Color = Color::rgb(0.000, 0.188, 0.702);
+const BUTTON_BORDER_COLOR: Color = Color::rgb(0.118, 0.306, 0.820);
+
 #[derive(AssetCollection, Resource, Reflect, Default)]
 #[reflect(Resource)]
 pub struct TitleScreenAssets {}
@@ -108,6 +120,7 @@ fn enter_title_screen(mut commands: Commands, root: Res<AppRoot>, config: Res<Co
                 style: Style {
                     width: Val::Percent(100.0),
                     height: Val::Percent(100.0),
+                    align_items: AlignItems::Center,
                     border: UiRect::axes(vw(BORDER_WIDTH), vh(BORDER_WIDTH)),
                     flex_direction: FlexDirection::Column,
                     ..default()
@@ -146,11 +159,8 @@ fn enter_title_screen(mut commands: Commands, root: Res<AppRoot>, config: Res<Co
     commands
         .spawn((
             Name::new("HeaderText"),
-            TextBundle {
-                text: Text::from_section(HEADER_TEXT, BOLD_TEXT_STYLE)
-                    .with_alignment(TextAlignment::Center),
-                ..default()
-            },
+            TextBundle::from_section(HEADER_TEXT, BOLD_TEXT_STYLE)
+                .with_text_alignment(TextAlignment::Center),
             FontSize::new(vh(HEADER_FONT_SIZE)),
         ))
         .set_parent(header_container);
@@ -194,6 +204,32 @@ fn enter_title_screen(mut commands: Commands, root: Res<AppRoot>, config: Res<Co
             ))
             .set_parent(body_container);
     }
+
+    let join_button = commands
+        .spawn((
+            Name::new("JoinButton"),
+            ButtonBundle {
+                style: Style {
+                    margin: UiRect::top(vh(10.0)),
+                    padding: UiRect::axes(vw(6.0), vh(4.0)),
+                    border: UiRect::axes(vw(BORDER_WIDTH), vh(BORDER_WIDTH)),
+                    ..default()
+                },
+                background_color: BackgroundColor(BUTTON_BACKGROUND_COLOR),
+                border_color: BorderColor(BUTTON_BORDER_COLOR),
+                ..default()
+            },
+        ))
+        .set_parent(container)
+        .id();
+
+    commands
+        .spawn((
+            Name::new("JoinButtonText"),
+            TextBundle::from_section("Join", BUTTON_TEXT_STYLE),
+            FontSize::new(vh(BUTTON_FONT_SIZE)),
+        ))
+        .set_parent(join_button);
 }
 
 fn exit_title_screen(mut commands: Commands, root: Res<AppRoot>) {