Make menus more consistent for about/help screens

src/deck.rs

@@ -1,7 +1,4 @@
-use bevy::{
-    prelude::*,
-    utils::{HashMap, RandomState},
-};
+use bevy::{prelude::*, utils::HashMap};
 
 /// Deck and Cards
 pub struct DeckPlugin;

src/menu.rs

@@ -283,7 +283,44 @@ fn set_set_count(
     query.single_mut().0 = format!("{}", set_number.get(trigger.entity()).unwrap().0);
 }
 
-fn setup_about(mut commands: Commands) {
+fn setup_about(mut commands: Commands, server: Res<AssetServer>) {
+    commands
+        .spawn((
+            ViewState::About,
+            Node {
+                width: Val::Percent(100.0),
+                justify_content: JustifyContent::SpaceBetween,
+                ..default()
+            },
+        ))
+        .with_children(|parent| {
+            parent.spawn(Node::default()).with_children(|parent| {
+                parent
+                    .spawn((
+                        Button,
+                        BackgroundColor(BLACK.with_alpha(0.9).into()),
+                        Node {
+                            margin: UiRect::all(Val::Px(5.0)),
+                            padding: UiRect::all(Val::Px(5.0)),
+                            border: UiRect::all(Val::Px(1.0)),
+                            height: Val::Px(40.0),
+                            ..default()
+                        },
+                        BorderColor(WHITE.into()),
+                        GlobalZIndex(1),
+                    ))
+                    .with_children(|parent| {
+                        parent.spawn(ImageNode {
+                            image: server.load("kenney_game-icons/PNG/White/1x/home.png"),
+                            ..default()
+                        });
+                    })
+                    .observe(button_hover_on)
+                    .observe(button_hover_off)
+                    .observe(button_set_state(ViewState::Menu));
+            });
+        });
+
     commands
         .spawn((
             ViewState::About,
@@ -298,18 +335,6 @@ fn setup_about(mut commands: Commands) {
             },
         ))
         .with_children(|parent| {
-            parent
-                .spawn(button_builder(Node {
-                    position_type: PositionType::Absolute,
-                    top: Val::Px(0.0),
-                    left: Val::Px(0.0),
-                    ..default()
-                }))
-                .with_children(|parent| {
-                    parent.spawn(Text("Menu".to_string()));
-                })
-                .observe(button_set_state(ViewState::Menu));
-
             parent
                 .spawn((
                     Node {
@@ -346,7 +371,43 @@ fn setup_about(mut commands: Commands) {
         });
 }
 
-fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>) {
+fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>, server: Res<AssetServer>) {
+    commands
+        .spawn((
+            ViewState::HowToPlay,
+            Node {
+                width: Val::Percent(100.0),
+                justify_content: JustifyContent::SpaceBetween,
+                ..default()
+            },
+        ))
+        .with_children(|parent| {
+            parent.spawn(Node::default()).with_children(|parent| {
+                parent
+                    .spawn((
+                        Button,
+                        BackgroundColor(BLACK.with_alpha(0.9).into()),
+                        Node {
+                            margin: UiRect::all(Val::Px(5.0)),
+                            padding: UiRect::all(Val::Px(5.0)),
+                            border: UiRect::all(Val::Px(1.0)),
+                            height: Val::Px(40.0),
+                            ..default()
+                        },
+                        BorderColor(WHITE.into()),
+                        GlobalZIndex(1),
+                    ))
+                    .with_children(|parent| {
+                        parent.spawn(ImageNode {
+                            image: server.load("kenney_game-icons/PNG/White/1x/home.png"),
+                            ..default()
+                        });
+                    })
+                    .observe(button_hover_on)
+                    .observe(button_hover_off)
+                    .observe(button_set_state(ViewState::Menu));
+            });
+        });
     commands
         .spawn((
             ViewState::HowToPlay,
@@ -361,18 +422,6 @@ fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>) {
             },
         ))
         .with_children(|parent| {
-            parent
-                .spawn(button_builder(Node {
-                    position_type: PositionType::Absolute,
-                    top: Val::Px(0.0),
-                    left: Val::Px(0.0),
-                    ..default()
-                }))
-                .with_children(|parent| {
-                    parent.spawn(Text("Menu".to_string()));
-                })
-                .observe(button_set_state(ViewState::Menu));
-
             parent.spawn((Node {
                     width: Val::Px(500.0),
                     align_items: AlignItems::Center,

todo.txt

@@ -1,6 +1,5 @@
 TODO:
 * Make "set" button visually interesting when 3 cards selected
-* Make menus consistent
 
 Later:
 * Make button(s) look pretty