Make menus more consistent for about/help screens

src/deck.rs

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

src/menu.rs

@@ -283,33 +283,58 @@ 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 {
-                position_type: PositionType::Absolute,
                 width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
+                justify_content: JustifyContent::SpaceBetween,
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                flex_direction: FlexDirection::Column,
                 ..default()
             },
         ))
         .with_children(|parent| {
+            parent.spawn(Node::default()).with_children(|parent| {
                 parent
-                .spawn(button_builder(Node {
+                    .spawn((
-                    position_type: PositionType::Absolute,
+                        Button,
-                    top: Val::Px(0.0),
+                        BackgroundColor(BLACK.with_alpha(0.9).into()),
-                    left: Val::Px(0.0),
+                        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(Text("Menu".to_string()));
+                        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,
+            Node {
+                position_type: PositionType::Absolute,
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                flex_direction: FlexDirection::Column,
+                ..default()
+            },
+        ))
+        .with_children(|parent| {
             parent
                 .spawn((
                     Node {
@@ -346,33 +371,57 @@ 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 {
-                position_type: PositionType::Absolute,
                 width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
+                justify_content: JustifyContent::SpaceBetween,
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                flex_direction: FlexDirection::Column,
                 ..default()
             },
         ))
         .with_children(|parent| {
+            parent.spawn(Node::default()).with_children(|parent| {
                 parent
-                .spawn(button_builder(Node {
+                    .spawn((
-                    position_type: PositionType::Absolute,
+                        Button,
-                    top: Val::Px(0.0),
+                        BackgroundColor(BLACK.with_alpha(0.9).into()),
-                    left: Val::Px(0.0),
+                        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(Text("Menu".to_string()));
+                        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,
+            Node {
+                position_type: PositionType::Absolute,
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                flex_direction: FlexDirection::Column,
+                ..default()
+            },
+        ))
+        .with_children(|parent| {
             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