From 3377daa34200890a4e976743f54c09241b5b4062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 01:44:26 +0200
Subject: [PATCH 01/18] add an example using UI & states to create a game menu

---
 Cargo.toml                 |   4 +
 examples/README.md         |   1 +
 examples/game/game_menu.rs | 660 +++++++++++++++++++++++++++++++++++++
 3 files changed, 665 insertions(+)
 create mode 100644 examples/game/game_menu.rs

diff --git a/Cargo.toml b/Cargo.toml
index 57e3f75ce3d4f..3f2a6fd6c1d53 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -330,6 +330,10 @@ path = "examples/game/alien_cake_addict.rs"
 name = "breakout"
 path = "examples/game/breakout.rs"
 
+[[example]]
+name = "game_menu"
+path = "examples/game/game_menu.rs"
+
 # Input
 [[example]]
 name = "char_input_events"
diff --git a/examples/README.md b/examples/README.md
index 189dfede11b55..58c991ad24aed 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -176,6 +176,7 @@ Example | File | Description
 --- | --- | ---
 `alien_cake_addict` | [`game/alien_cake_addict.rs`](./game/alien_cake_addict.rs) | Eat the cakes. Eat them all. An example 3D game
 `breakout` | [`game/breakout.rs`](./game/breakout.rs) | An implementation of the classic game "Breakout"
+`game_menu` | [`game/game_menu.rs`](./game/game_menu.rs) | A simple game menu
 
 ## Input
 
diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
new file mode 100644
index 0000000000000..c437d5e79d321
--- /dev/null
+++ b/examples/game/game_menu.rs
@@ -0,0 +1,660 @@
+use bevy::prelude::*;
+
+const TEXT_COLOR: Color = Color::rgb(0.9, 0.9, 0.9);
+
+#[derive(Clone, Eq, PartialEq, Debug, Hash)]
+enum GameState {
+    Menu,
+    Game,
+}
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_startup_system(setup)
+        .add_state(GameState::Menu)
+        .add_plugin(menu::MenuPlugin)
+        .add_plugin(game::GamePlugin)
+        .run();
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn_bundle(UiCameraBundle::default());
+}
+
+mod game {
+    use bevy::prelude::*;
+
+    pub struct GamePlugin;
+
+    impl Plugin for GamePlugin {
+        fn build(&self, app: &mut App) {
+            app.add_system_set(SystemSet::on_enter(super::GameState::Game).with_system(game_setup))
+                .add_system_set(SystemSet::on_update(super::GameState::Game).with_system(game))
+                .add_system_set(
+                    SystemSet::on_exit(super::GameState::Game)
+                        .with_system(super::despawn_screen::<ScreenGame>),
+                );
+        }
+    }
+
+    #[derive(Component)]
+    struct ScreenGame;
+
+    #[derive(Component)]
+    struct GameTimer(Timer);
+
+    fn game_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                material: materials.add(Color::BLACK.into()),
+                ..Default::default()
+            })
+            .insert(ScreenGame)
+            .with_children(|parent| {
+                parent.spawn_bundle(TextBundle {
+                    style: Style {
+                        margin: Rect::all(Val::Px(50.0)),
+                        ..Default::default()
+                    },
+                    text: Text::with_section(
+                        "Good Game!",
+                        TextStyle {
+                            font: font.clone(),
+                            font_size: 80.0,
+                            color: super::TEXT_COLOR,
+                        },
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+                parent.spawn_bundle(TextBundle {
+                    style: Style {
+                        margin: Rect::all(Val::Px(50.0)),
+                        ..Default::default()
+                    },
+                    text: Text::with_section(
+                        "Will be back to the menu shortly...",
+                        TextStyle {
+                            font: font.clone(),
+                            font_size: 80.0,
+                            color: super::TEXT_COLOR,
+                        },
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+            });
+        commands.spawn_bundle((GameTimer(Timer::from_seconds(5.0, false)), ScreenGame));
+    }
+
+    fn game(
+        time: Res<Time>,
+        mut game_state: ResMut<State<super::GameState>>,
+        mut timer: Query<&mut GameTimer>,
+    ) {
+        if timer.single_mut().0.tick(time.delta()).finished() {
+            game_state.set(super::GameState::Menu).unwrap();
+        }
+    }
+}
+
+mod menu {
+    use bevy::{app::AppExit, prelude::*};
+
+    pub struct MenuPlugin;
+
+    impl Plugin for MenuPlugin {
+        fn build(&self, app: &mut bevy::prelude::App) {
+            app.init_resource::<ButtonMaterials>()
+                .add_state(MenuState::Disabled)
+                .add_system_set(SystemSet::on_enter(super::GameState::Menu).with_system(menu_setup))
+                .add_system_set(SystemSet::on_enter(MenuState::Main).with_system(main_menu_setup))
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::Main)
+                        .with_system(super::despawn_screen::<ScreenMenuMain>),
+                )
+                .add_system_set(
+                    SystemSet::on_enter(MenuState::Preferences).with_system(preferences_menu_setup),
+                )
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::Preferences)
+                        .with_system(super::despawn_screen::<ScreenMenuPreferences>),
+                )
+                .add_system_set(
+                    SystemSet::on_enter(MenuState::PrefDisplay)
+                        .with_system(display_preferences_menu_setup),
+                )
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::PrefDisplay)
+                        .with_system(super::despawn_screen::<ScreenMenuPrefDisplay>),
+                )
+                .add_system_set(
+                    SystemSet::on_enter(MenuState::PrefSound)
+                        .with_system(sound_preferences_menu_setup),
+                )
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::PrefSound)
+                        .with_system(super::despawn_screen::<ScreenMenuPrefSound>),
+                )
+                .add_system_set(
+                    SystemSet::on_enter(MenuState::PrefControls)
+                        .with_system(controls_preferences_menu_setup),
+                )
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::PrefControls)
+                        .with_system(super::despawn_screen::<ScreenMenuPrefControls>),
+                )
+                .add_system_set(
+                    SystemSet::on_update(super::GameState::Menu)
+                        .with_system(menu_action)
+                        .with_system(button_system),
+                );
+        }
+    }
+
+    #[derive(Clone, Eq, PartialEq, Debug, Hash)]
+    enum MenuState {
+        Main,
+        Preferences,
+        PrefDisplay,
+        PrefSound,
+        PrefControls,
+        Disabled,
+    }
+    #[derive(Component)]
+    struct ScreenMenuMain;
+
+    #[derive(Component)]
+    struct ScreenMenuPreferences;
+    #[derive(Component)]
+    struct ScreenMenuPrefDisplay;
+    #[derive(Component)]
+    struct ScreenMenuPrefSound;
+    #[derive(Component)]
+    struct ScreenMenuPrefControls;
+
+    struct ButtonMaterials {
+        normal: Handle<ColorMaterial>,
+        hovered: Handle<ColorMaterial>,
+        pressed: Handle<ColorMaterial>,
+    }
+
+    impl FromWorld for ButtonMaterials {
+        fn from_world(world: &mut World) -> Self {
+            let mut materials = world.get_resource_mut::<Assets<ColorMaterial>>().unwrap();
+            ButtonMaterials {
+                normal: materials.add(Color::rgb(0.15, 0.15, 0.15).into()),
+                hovered: materials.add(Color::rgb(0.25, 0.25, 0.25).into()),
+                pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()),
+            }
+        }
+    }
+
+    #[derive(Component)]
+    enum MenuButtonAction {
+        Play,
+        Preferences,
+        PrefDisplay,
+        PrefSound,
+        PrefControls,
+        BackToMainMenu,
+        BackToPreferences,
+        Quit,
+    }
+
+    fn button_system(
+        button_materials: Res<ButtonMaterials>,
+        mut interaction_query: Query<
+            (&Interaction, &mut Handle<ColorMaterial>),
+            (Changed<Interaction>, With<Button>),
+        >,
+    ) {
+        for (interaction, mut material) in interaction_query.iter_mut() {
+            match *interaction {
+                Interaction::Clicked => {
+                    *material = button_materials.pressed.clone();
+                }
+                Interaction::Hovered => {
+                    *material = button_materials.hovered.clone();
+                }
+                Interaction::None => {
+                    *material = button_materials.normal.clone();
+                }
+            }
+        }
+    }
+
+    fn menu_setup(mut menu_state: ResMut<State<MenuState>>) {
+        let _ = menu_state.set(MenuState::Main);
+    }
+
+    fn main_menu_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        button_materials: Res<ButtonMaterials>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: font.clone(),
+            font_size: 40.0,
+            color: super::TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                material: materials.add(Color::CRIMSON.into()),
+                ..Default::default()
+            })
+            .insert(ScreenMenuMain)
+            .with_children(|parent| {
+                parent.spawn_bundle(TextBundle {
+                    style: Style {
+                        margin: Rect::all(Val::Px(50.0)),
+                        ..Default::default()
+                    },
+                    text: Text::with_section(
+                        "Bevy Game Menu UI",
+                        TextStyle {
+                            font: font.clone(),
+                            font_size: 80.0,
+                            color: super::TEXT_COLOR,
+                        },
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::Play)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "New Game",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::Preferences)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Preferences",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::Quit)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Quit", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn preferences_menu_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        button_materials: Res<ButtonMaterials>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: font.clone(),
+            font_size: 40.0,
+            color: super::TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                material: materials.add(Color::CRIMSON.into()),
+                ..Default::default()
+            })
+            .insert(ScreenMenuPreferences)
+            .with_children(|parent| {
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::PrefDisplay)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Display",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::PrefSound)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Sound",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::PrefControls)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Controls",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::BackToMainMenu)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn display_preferences_menu_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        button_materials: Res<ButtonMaterials>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: font.clone(),
+            font_size: 40.0,
+            color: super::TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                material: materials.add(Color::CRIMSON.into()),
+                ..Default::default()
+            })
+            .insert(ScreenMenuPrefDisplay)
+            .with_children(|parent| {
+                parent.spawn_bundle(TextBundle {
+                    text: Text::with_section(
+                        "Here you could display preferences about display",
+                        button_text_style.clone(),
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::BackToPreferences)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn sound_preferences_menu_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        button_materials: Res<ButtonMaterials>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: font.clone(),
+            font_size: 40.0,
+            color: super::TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                material: materials.add(Color::CRIMSON.into()),
+                ..Default::default()
+            })
+            .insert(ScreenMenuPrefSound)
+            .with_children(|parent| {
+                parent.spawn_bundle(TextBundle {
+                    text: Text::with_section(
+                        "Here you could display preferences about sound",
+                        button_text_style.clone(),
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::BackToPreferences)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn controls_preferences_menu_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        button_materials: Res<ButtonMaterials>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: font.clone(),
+            font_size: 40.0,
+            color: super::TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                material: materials.add(Color::CRIMSON.into()),
+                ..Default::default()
+            })
+            .insert(ScreenMenuPrefControls)
+            .with_children(|parent| {
+                parent.spawn_bundle(TextBundle {
+                    text: Text::with_section(
+                        "Here you could display preferences about controls",
+                        button_text_style.clone(),
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        material: button_materials.normal.clone(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::BackToPreferences)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn menu_action(
+        interaction_query: Query<
+            (&Interaction, &MenuButtonAction),
+            (Changed<Interaction>, With<Button>),
+        >,
+        mut app_exit_events: EventWriter<AppExit>,
+        mut menu_state: ResMut<State<MenuState>>,
+        mut game_state: ResMut<State<super::GameState>>,
+    ) {
+        for (interaction, menu_button_action) in interaction_query.iter() {
+            if *interaction == Interaction::Clicked {
+                match menu_button_action {
+                    MenuButtonAction::Quit => app_exit_events.send(AppExit),
+                    MenuButtonAction::Play => {
+                        game_state.set(super::GameState::Game).unwrap();
+                        menu_state.set(MenuState::Disabled).unwrap()
+                    }
+                    MenuButtonAction::Preferences => {
+                        menu_state.set(MenuState::Preferences).unwrap()
+                    }
+                    MenuButtonAction::PrefDisplay => {
+                        menu_state.set(MenuState::PrefDisplay).unwrap()
+                    }
+                    MenuButtonAction::PrefSound => menu_state.set(MenuState::PrefSound).unwrap(),
+                    MenuButtonAction::PrefControls => {
+                        menu_state.set(MenuState::PrefControls).unwrap()
+                    }
+                    MenuButtonAction::BackToMainMenu => menu_state.set(MenuState::Main).unwrap(),
+                    MenuButtonAction::BackToPreferences => {
+                        menu_state.set(MenuState::Preferences).unwrap()
+                    }
+                }
+            }
+        }
+    }
+}
+
+fn despawn_screen<T: Component>(to_despawn: Query<Entity, With<T>>, mut commands: Commands) {
+    for entity in to_despawn.iter() {
+        commands.entity(entity).despawn_recursive();
+    }
+}

From 1478ebc73ed786ad9f4715d569e1f9ca281c90eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 02:57:37 +0200
Subject: [PATCH 02/18] can set some settings

---
 examples/game/game_menu.rs | 291 ++++++++++++++++++++++++-------------
 1 file changed, 189 insertions(+), 102 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index c437d5e79d321..a5b9552fb4798 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -8,9 +8,26 @@ enum GameState {
     Game,
 }
 
+#[derive(Debug, Component, PartialEq, Eq, Clone, Copy)]
+enum DisplayQuality {
+    Low,
+    Medium,
+    High,
+}
+
+#[derive(Debug)]
+struct Settings {
+    quality: DisplayQuality,
+    volume: u32,
+}
+
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
+        .insert_resource(Settings {
+            quality: DisplayQuality::Medium,
+            volume: 5,
+        })
         .add_startup_system(setup)
         .add_state(GameState::Menu)
         .add_plugin(menu::MenuPlugin)
@@ -48,6 +65,7 @@ mod game {
         mut commands: Commands,
         asset_server: Res<AssetServer>,
         mut materials: ResMut<Assets<ColorMaterial>>,
+        settings: Res<super::Settings>,
     ) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 
@@ -96,6 +114,22 @@ mod game {
                     ),
                     ..Default::default()
                 });
+                parent.spawn_bundle(TextBundle {
+                    style: Style {
+                        margin: Rect::all(Val::Px(50.0)),
+                        ..Default::default()
+                    },
+                    text: Text::with_section(
+                        format!("{:?}", *settings),
+                        TextStyle {
+                            font: font.clone(),
+                            font_size: 40.0,
+                            color: super::TEXT_COLOR,
+                        },
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
             });
         commands.spawn_bundle((GameTimer(Timer::from_seconds(5.0, false)), ScreenGame));
     }
@@ -137,6 +171,9 @@ mod menu {
                     SystemSet::on_enter(MenuState::PrefDisplay)
                         .with_system(display_preferences_menu_setup),
                 )
+                .add_system_set(
+                    SystemSet::on_update(MenuState::PrefDisplay).with_system(quality_button),
+                )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::PrefDisplay)
                         .with_system(super::despawn_screen::<ScreenMenuPrefDisplay>),
@@ -146,16 +183,11 @@ mod menu {
                         .with_system(sound_preferences_menu_setup),
                 )
                 .add_system_set(
-                    SystemSet::on_exit(MenuState::PrefSound)
-                        .with_system(super::despawn_screen::<ScreenMenuPrefSound>),
+                    SystemSet::on_update(MenuState::PrefSound).with_system(volume_button),
                 )
                 .add_system_set(
-                    SystemSet::on_enter(MenuState::PrefControls)
-                        .with_system(controls_preferences_menu_setup),
-                )
-                .add_system_set(
-                    SystemSet::on_exit(MenuState::PrefControls)
-                        .with_system(super::despawn_screen::<ScreenMenuPrefControls>),
+                    SystemSet::on_exit(MenuState::PrefSound)
+                        .with_system(super::despawn_screen::<ScreenMenuPrefSound>),
                 )
                 .add_system_set(
                     SystemSet::on_update(super::GameState::Menu)
@@ -171,7 +203,6 @@ mod menu {
         Preferences,
         PrefDisplay,
         PrefSound,
-        PrefControls,
         Disabled,
     }
     #[derive(Component)]
@@ -183,12 +214,11 @@ mod menu {
     struct ScreenMenuPrefDisplay;
     #[derive(Component)]
     struct ScreenMenuPrefSound;
-    #[derive(Component)]
-    struct ScreenMenuPrefControls;
 
     struct ButtonMaterials {
         normal: Handle<ColorMaterial>,
         hovered: Handle<ColorMaterial>,
+        hovered_pressed: Handle<ColorMaterial>,
         pressed: Handle<ColorMaterial>,
     }
 
@@ -198,18 +228,21 @@ mod menu {
             ButtonMaterials {
                 normal: materials.add(Color::rgb(0.15, 0.15, 0.15).into()),
                 hovered: materials.add(Color::rgb(0.25, 0.25, 0.25).into()),
+                hovered_pressed: materials.add(Color::rgb(0.25, 0.65, 0.25).into()),
                 pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()),
             }
         }
     }
 
+    #[derive(Component)]
+    struct SelectedOption;
+
     #[derive(Component)]
     enum MenuButtonAction {
         Play,
         Preferences,
         PrefDisplay,
         PrefSound,
-        PrefControls,
         BackToMainMenu,
         BackToPreferences,
         Quit,
@@ -218,21 +251,88 @@ mod menu {
     fn button_system(
         button_materials: Res<ButtonMaterials>,
         mut interaction_query: Query<
-            (&Interaction, &mut Handle<ColorMaterial>),
+            (
+                &Interaction,
+                &mut Handle<ColorMaterial>,
+                Option<&SelectedOption>,
+            ),
             (Changed<Interaction>, With<Button>),
         >,
     ) {
-        for (interaction, mut material) in interaction_query.iter_mut() {
+        for (interaction, mut material, selected) in interaction_query.iter_mut() {
             match *interaction {
                 Interaction::Clicked => {
                     *material = button_materials.pressed.clone();
                 }
                 Interaction::Hovered => {
-                    *material = button_materials.hovered.clone();
+                    if selected.is_some() {
+                        *material = button_materials.hovered_pressed.clone();
+                    } else {
+                        *material = button_materials.hovered.clone();
+                    }
                 }
                 Interaction::None => {
-                    *material = button_materials.normal.clone();
+                    if selected.is_some() {
+                        *material = button_materials.pressed.clone();
+                    } else {
+                        *material = button_materials.normal.clone();
+                    }
+                }
+            }
+        }
+    }
+
+    fn quality_button(
+        button_materials: Res<ButtonMaterials>,
+        interaction_query: Query<
+            (&Interaction, &super::DisplayQuality, Entity),
+            (Changed<Interaction>, With<Button>),
+        >,
+        mut selected_query: Query<(Entity, &mut Handle<ColorMaterial>), With<SelectedOption>>,
+        mut commands: Commands,
+        mut settings: ResMut<super::Settings>,
+    ) {
+        for (interaction, quality, entity) in interaction_query.iter() {
+            match *interaction {
+                Interaction::Clicked => {
+                    if settings.quality != *quality {
+                        let (previous_button, mut previous_material) = selected_query.single_mut();
+                        *previous_material = button_materials.normal.clone();
+                        commands.entity(previous_button).remove::<SelectedOption>();
+                        commands.entity(entity).insert(SelectedOption);
+                        settings.quality = *quality;
+                    }
                 }
+                _ => (),
+            }
+        }
+    }
+
+    #[derive(Component)]
+    struct Volume(u32);
+
+    fn volume_button(
+        button_materials: Res<ButtonMaterials>,
+        interaction_query: Query<
+            (&Interaction, &Volume, Entity),
+            (Changed<Interaction>, With<Button>),
+        >,
+        mut selected_query: Query<(Entity, &mut Handle<ColorMaterial>), With<SelectedOption>>,
+        mut commands: Commands,
+        mut settings: ResMut<super::Settings>,
+    ) {
+        for (interaction, volume, entity) in interaction_query.iter() {
+            match *interaction {
+                Interaction::Clicked => {
+                    if settings.volume != volume.0 {
+                        let (previous_button, mut previous_material) = selected_query.single_mut();
+                        *previous_material = button_materials.normal.clone();
+                        commands.entity(previous_button).remove::<SelectedOption>();
+                        commands.entity(entity).insert(SelectedOption);
+                        settings.volume = volume.0;
+                    }
+                }
+                _ => (),
             }
         }
     }
@@ -409,23 +509,6 @@ mod menu {
                             ..Default::default()
                         });
                     });
-                parent
-                    .spawn_bundle(ButtonBundle {
-                        style: button_style.clone(),
-                        material: button_materials.normal.clone(),
-                        ..Default::default()
-                    })
-                    .insert(MenuButtonAction::PrefControls)
-                    .with_children(|parent| {
-                        parent.spawn_bundle(TextBundle {
-                            text: Text::with_section(
-                                "Controls",
-                                button_text_style.clone(),
-                                Default::default(),
-                            ),
-                            ..Default::default()
-                        });
-                    });
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
@@ -447,6 +530,7 @@ mod menu {
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
         mut materials: ResMut<Assets<ColorMaterial>>,
+        settings: Res<super::Settings>,
     ) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 
@@ -476,14 +560,52 @@ mod menu {
             })
             .insert(ScreenMenuPrefDisplay)
             .with_children(|parent| {
-                parent.spawn_bundle(TextBundle {
-                    text: Text::with_section(
-                        "Here you could display preferences about display",
-                        button_text_style.clone(),
-                        Default::default(),
-                    ),
-                    ..Default::default()
-                });
+                parent
+                    .spawn_bundle(NodeBundle {
+                        style: Style {
+                            align_items: AlignItems::Center,
+                            ..Default::default()
+                        },
+                        material: materials.add(Color::CRIMSON.into()),
+                        ..Default::default()
+                    })
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Display Quality",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                        for quality in [
+                            super::DisplayQuality::Low,
+                            super::DisplayQuality::Medium,
+                            super::DisplayQuality::High,
+                        ] {
+                            let mut entity = parent.spawn_bundle(ButtonBundle {
+                                style: Style {
+                                    size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                                    ..button_style.clone()
+                                },
+                                material: button_materials.normal.clone(),
+                                ..Default::default()
+                            });
+                            entity.insert(quality).with_children(|parent| {
+                                parent.spawn_bundle(TextBundle {
+                                    text: Text::with_section(
+                                        format!("{:?}", quality),
+                                        button_text_style.clone(),
+                                        Default::default(),
+                                    ),
+                                    ..Default::default()
+                                });
+                            });
+                            if settings.quality == quality {
+                                entity.insert(SelectedOption);
+                            }
+                        }
+                    });
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
@@ -505,6 +627,7 @@ mod menu {
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
         mut materials: ResMut<Assets<ColorMaterial>>,
+        settings: Res<super::Settings>,
     ) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 
@@ -534,72 +657,39 @@ mod menu {
             })
             .insert(ScreenMenuPrefSound)
             .with_children(|parent| {
-                parent.spawn_bundle(TextBundle {
-                    text: Text::with_section(
-                        "Here you could display preferences about sound",
-                        button_text_style.clone(),
-                        Default::default(),
-                    ),
-                    ..Default::default()
-                });
                 parent
-                    .spawn_bundle(ButtonBundle {
-                        style: button_style,
-                        material: button_materials.normal.clone(),
+                    .spawn_bundle(NodeBundle {
+                        style: Style {
+                            align_items: AlignItems::Center,
+                            ..Default::default()
+                        },
+                        material: materials.add(Color::CRIMSON.into()),
                         ..Default::default()
                     })
-                    .insert(MenuButtonAction::BackToPreferences)
                     .with_children(|parent| {
                         parent.spawn_bundle(TextBundle {
-                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            text: Text::with_section(
+                                "Volume",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
                             ..Default::default()
                         });
+                        for volume in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
+                            let mut entity = parent.spawn_bundle(ButtonBundle {
+                                style: Style {
+                                    size: Size::new(Val::Px(30.0), Val::Px(65.0)),
+                                    ..button_style.clone()
+                                },
+                                material: button_materials.normal.clone(),
+                                ..Default::default()
+                            });
+                            entity.insert(Volume(volume));
+                            if settings.volume == volume {
+                                entity.insert(SelectedOption);
+                            }
+                        }
                     });
-            });
-    }
-
-    fn controls_preferences_menu_setup(
-        mut commands: Commands,
-        asset_server: Res<AssetServer>,
-        button_materials: Res<ButtonMaterials>,
-        mut materials: ResMut<Assets<ColorMaterial>>,
-    ) {
-        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-
-        let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-            margin: Rect::all(Val::Px(20.0)),
-            justify_content: JustifyContent::Center,
-            align_items: AlignItems::Center,
-            ..Default::default()
-        };
-        let button_text_style = TextStyle {
-            font: font.clone(),
-            font_size: 40.0,
-            color: super::TEXT_COLOR,
-        };
-
-        commands
-            .spawn_bundle(NodeBundle {
-                style: Style {
-                    margin: Rect::all(Val::Auto),
-                    flex_direction: FlexDirection::ColumnReverse,
-                    align_items: AlignItems::Center,
-                    ..Default::default()
-                },
-                material: materials.add(Color::CRIMSON.into()),
-                ..Default::default()
-            })
-            .insert(ScreenMenuPrefControls)
-            .with_children(|parent| {
-                parent.spawn_bundle(TextBundle {
-                    text: Text::with_section(
-                        "Here you could display preferences about controls",
-                        button_text_style.clone(),
-                        Default::default(),
-                    ),
-                    ..Default::default()
-                });
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
@@ -640,9 +730,6 @@ mod menu {
                         menu_state.set(MenuState::PrefDisplay).unwrap()
                     }
                     MenuButtonAction::PrefSound => menu_state.set(MenuState::PrefSound).unwrap(),
-                    MenuButtonAction::PrefControls => {
-                        menu_state.set(MenuState::PrefControls).unwrap()
-                    }
                     MenuButtonAction::BackToMainMenu => menu_state.set(MenuState::Main).unwrap(),
                     MenuButtonAction::BackToPreferences => {
                         menu_state.set(MenuState::Preferences).unwrap()

From 829b46b974575ce9f42bae054a9b8f5f2407b9e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 03:20:10 +0200
Subject: [PATCH 03/18] clippy

---
 examples/game/game_menu.rs | 47 ++++++++++++++------------------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index a5b9552fb4798..35ed50cf136df 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -293,17 +293,14 @@ mod menu {
         mut settings: ResMut<super::Settings>,
     ) {
         for (interaction, quality, entity) in interaction_query.iter() {
-            match *interaction {
-                Interaction::Clicked => {
-                    if settings.quality != *quality {
-                        let (previous_button, mut previous_material) = selected_query.single_mut();
-                        *previous_material = button_materials.normal.clone();
-                        commands.entity(previous_button).remove::<SelectedOption>();
-                        commands.entity(entity).insert(SelectedOption);
-                        settings.quality = *quality;
-                    }
+            if *interaction == Interaction::Clicked {
+                if settings.quality != *quality {
+                    let (previous_button, mut previous_material) = selected_query.single_mut();
+                    *previous_material = button_materials.normal.clone();
+                    commands.entity(previous_button).remove::<SelectedOption>();
+                    commands.entity(entity).insert(SelectedOption);
+                    settings.quality = *quality;
                 }
-                _ => (),
             }
         }
     }
@@ -322,17 +319,14 @@ mod menu {
         mut settings: ResMut<super::Settings>,
     ) {
         for (interaction, volume, entity) in interaction_query.iter() {
-            match *interaction {
-                Interaction::Clicked => {
-                    if settings.volume != volume.0 {
-                        let (previous_button, mut previous_material) = selected_query.single_mut();
-                        *previous_material = button_materials.normal.clone();
-                        commands.entity(previous_button).remove::<SelectedOption>();
-                        commands.entity(entity).insert(SelectedOption);
-                        settings.volume = volume.0;
-                    }
+            if *interaction == Interaction::Clicked {
+                if settings.volume != volume.0 {
+                    let (previous_button, mut previous_material) = selected_query.single_mut();
+                    *previous_material = button_materials.normal.clone();
+                    commands.entity(previous_button).remove::<SelectedOption>();
+                    commands.entity(entity).insert(SelectedOption);
+                    settings.volume = volume.0;
                 }
-                _ => (),
             }
         }
     }
@@ -348,7 +342,6 @@ mod menu {
         mut materials: ResMut<Assets<ColorMaterial>>,
     ) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
             margin: Rect::all(Val::Px(20.0)),
@@ -447,8 +440,6 @@ mod menu {
         button_materials: Res<ButtonMaterials>,
         mut materials: ResMut<Assets<ColorMaterial>>,
     ) {
-        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
             margin: Rect::all(Val::Px(20.0)),
@@ -457,7 +448,7 @@ mod menu {
             ..Default::default()
         };
         let button_text_style = TextStyle {
-            font: font.clone(),
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
             font_size: 40.0,
             color: super::TEXT_COLOR,
         };
@@ -532,8 +523,6 @@ mod menu {
         mut materials: ResMut<Assets<ColorMaterial>>,
         settings: Res<super::Settings>,
     ) {
-        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
             margin: Rect::all(Val::Px(20.0)),
@@ -542,7 +531,7 @@ mod menu {
             ..Default::default()
         };
         let button_text_style = TextStyle {
-            font: font.clone(),
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
             font_size: 40.0,
             color: super::TEXT_COLOR,
         };
@@ -629,8 +618,6 @@ mod menu {
         mut materials: ResMut<Assets<ColorMaterial>>,
         settings: Res<super::Settings>,
     ) {
-        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
             margin: Rect::all(Val::Px(20.0)),
@@ -639,7 +626,7 @@ mod menu {
             ..Default::default()
         };
         let button_text_style = TextStyle {
-            font: font.clone(),
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
             font_size: 40.0,
             color: super::TEXT_COLOR,
         };

From d4fb85bdf14e4210873644265c52bb29f2466d0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 03:30:13 +0200
Subject: [PATCH 04/18] more clippy

---
 examples/game/game_menu.rs | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 35ed50cf136df..194d82bfa1789 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -293,14 +293,12 @@ mod menu {
         mut settings: ResMut<super::Settings>,
     ) {
         for (interaction, quality, entity) in interaction_query.iter() {
-            if *interaction == Interaction::Clicked {
-                if settings.quality != *quality {
-                    let (previous_button, mut previous_material) = selected_query.single_mut();
-                    *previous_material = button_materials.normal.clone();
-                    commands.entity(previous_button).remove::<SelectedOption>();
-                    commands.entity(entity).insert(SelectedOption);
-                    settings.quality = *quality;
-                }
+            if *interaction == Interaction::Clicked && settings.quality != *quality {
+                let (previous_button, mut previous_material) = selected_query.single_mut();
+                *previous_material = button_materials.normal.clone();
+                commands.entity(previous_button).remove::<SelectedOption>();
+                commands.entity(entity).insert(SelectedOption);
+                settings.quality = *quality;
             }
         }
     }
@@ -319,14 +317,12 @@ mod menu {
         mut settings: ResMut<super::Settings>,
     ) {
         for (interaction, volume, entity) in interaction_query.iter() {
-            if *interaction == Interaction::Clicked {
-                if settings.volume != volume.0 {
-                    let (previous_button, mut previous_material) = selected_query.single_mut();
-                    *previous_material = button_materials.normal.clone();
-                    commands.entity(previous_button).remove::<SelectedOption>();
-                    commands.entity(entity).insert(SelectedOption);
-                    settings.volume = volume.0;
-                }
+            if *interaction == Interaction::Clicked && settings.volume != volume.0 {
+                let (previous_button, mut previous_material) = selected_query.single_mut();
+                *previous_material = button_materials.normal.clone();
+                commands.entity(previous_button).remove::<SelectedOption>();
+                commands.entity(entity).insert(SelectedOption);
+                settings.volume = volume.0;
             }
         }
     }

From 108447ffbf360cd1b9f185817c3416e63f803a01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 04:33:58 +0200
Subject: [PATCH 05/18] add comments and a splash screen

---
 examples/game/game_menu.rs | 229 +++++++++++++++++++++++++++----------
 1 file changed, 168 insertions(+), 61 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 194d82bfa1789..14801dd48d706 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -1,9 +1,14 @@
 use bevy::prelude::*;
 
+// This example will display a simple menu using Bevy UI where you can start a new game,
+// change some settings or quit. There are no actual game, it will just display the current
+// settings for 5 seconds before going back to the menu.
+
 const TEXT_COLOR: Color = Color::rgb(0.9, 0.9, 0.9);
 
 #[derive(Clone, Eq, PartialEq, Debug, Hash)]
 enum GameState {
+    Splash,
     Menu,
     Game,
 }
@@ -15,6 +20,7 @@ enum DisplayQuality {
     High,
 }
 
+// Simple settings struct, it will be added as a resource to the Bevy app
 #[derive(Debug)]
 struct Settings {
     quality: DisplayQuality,
@@ -24,24 +30,92 @@ struct Settings {
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
+        // Insert the settings struct as a resource with its initial values
         .insert_resource(Settings {
             quality: DisplayQuality::Medium,
-            volume: 5,
+            volume: 7,
         })
         .add_startup_system(setup)
-        .add_state(GameState::Menu)
+        // Start the game in the Splash state
+        .add_state(GameState::Splash)
+        // Adds the plugins for each state
+        .add_plugin(splash::SplashPlugin)
         .add_plugin(menu::MenuPlugin)
         .add_plugin(game::GamePlugin)
         .run();
 }
 
+// As there isn't an actual game, setup is just adding a `UiCameraBundle`
 fn setup(mut commands: Commands) {
     commands.spawn_bundle(UiCameraBundle::default());
 }
 
+mod splash {
+    use bevy::prelude::*;
+
+    // This plugin will display a splash screen with Bevy logo for 1 second before switching to the menu
+    pub struct SplashPlugin;
+
+    impl Plugin for SplashPlugin {
+        fn build(&self, app: &mut bevy::prelude::App) {
+            app.add_system_set(
+                SystemSet::on_enter(super::GameState::Splash).with_system(splash_setup),
+            )
+            .add_system_set(SystemSet::on_update(super::GameState::Splash).with_system(countdown))
+            .add_system_set(
+                SystemSet::on_exit(super::GameState::Splash)
+                    .with_system(super::despawn_screen::<ScreenSplash>),
+            );
+        }
+    }
+
+    // Tag component used to tag entities added on the splash screen
+    #[derive(Component)]
+    struct ScreenSplash;
+
+    #[derive(Component)]
+    struct SplashTimer(Timer);
+
+    fn splash_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        let icon = asset_server.load("branding/icon.png");
+        // Display the logo
+        commands
+            .spawn_bundle(ImageBundle {
+                style: Style {
+                    // This will center the logo
+                    margin: Rect::all(Val::Auto),
+                    // This will set the logo to be 200px wide, and auto adjust its height
+                    size: Size::new(Val::Px(200.0), Val::Auto),
+                    ..Default::default()
+                },
+                material: materials.add(icon.into()),
+                ..Default::default()
+            })
+            .insert(ScreenSplash)
+            .insert(SplashTimer(Timer::from_seconds(1.0, false)));
+    }
+
+    // Tick the timer, and change state when finished
+    fn countdown(
+        mut game_state: ResMut<State<super::GameState>>,
+        time: Res<Time>,
+        mut timer: Query<&mut SplashTimer>,
+    ) {
+        if timer.single_mut().0.tick(time.delta()).finished() {
+            game_state.set(super::GameState::Menu).unwrap();
+        }
+    }
+}
+
 mod game {
     use bevy::prelude::*;
 
+    // This plugin will contain the game. In this case, it's just be a screen that will
+    // display the current settings for 5 seconds before returning to the menu
     pub struct GamePlugin;
 
     impl Plugin for GamePlugin {
@@ -55,6 +129,7 @@ mod game {
         }
     }
 
+    // Tag component used to tag entities added on the game screen
     #[derive(Component)]
     struct ScreenGame;
 
@@ -70,10 +145,16 @@ mod game {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 
         commands
+            // First create a `NodeBundle` for centering what we want to display
             .spawn_bundle(NodeBundle {
                 style: Style {
+                    // This will center the current node
                     margin: Rect::all(Val::Auto),
+                    // This will display its children in a column, from top to bottom
                     flex_direction: FlexDirection::ColumnReverse,
+                    // `align_items` will align children on the cross axis. Here the main axis is
+                    // vertical (column), so the cross axis is horizontal. This will center the
+                    // children
                     align_items: AlignItems::Center,
                     ..Default::default()
                 },
@@ -82,22 +163,7 @@ mod game {
             })
             .insert(ScreenGame)
             .with_children(|parent| {
-                parent.spawn_bundle(TextBundle {
-                    style: Style {
-                        margin: Rect::all(Val::Px(50.0)),
-                        ..Default::default()
-                    },
-                    text: Text::with_section(
-                        "Good Game!",
-                        TextStyle {
-                            font: font.clone(),
-                            font_size: 80.0,
-                            color: super::TEXT_COLOR,
-                        },
-                        Default::default(),
-                    ),
-                    ..Default::default()
-                });
+                // Display two lines of text, the second one with the current settings
                 parent.spawn_bundle(TextBundle {
                     style: Style {
                         margin: Rect::all(Val::Px(50.0)),
@@ -123,7 +189,7 @@ mod game {
                         format!("{:?}", *settings),
                         TextStyle {
                             font: font.clone(),
-                            font_size: 40.0,
+                            font_size: 60.0,
                             color: super::TEXT_COLOR,
                         },
                         Default::default(),
@@ -131,9 +197,11 @@ mod game {
                     ..Default::default()
                 });
             });
+        // Spawn a 5 timer to trigger going back to the menu
         commands.spawn_bundle((GameTimer(Timer::from_seconds(5.0, false)), ScreenGame));
     }
 
+    // Tick the timer, and change state when finished
     fn game(
         time: Res<Time>,
         mut game_state: ResMut<State<super::GameState>>,
@@ -148,47 +216,59 @@ mod game {
 mod menu {
     use bevy::{app::AppExit, prelude::*};
 
+    // This plugin manages the menu, with 5 different screens:
+    // - a main menu with "New Game", "Settings", "Quit"
+    // - a settings menu with two submenus and a back button
+    // - two settings screen with a setting that can be set and a back button
     pub struct MenuPlugin;
 
     impl Plugin for MenuPlugin {
         fn build(&self, app: &mut bevy::prelude::App) {
             app.init_resource::<ButtonMaterials>()
+                // At start, the menu is not enabled. This will be changed in `menu_setup` when
+                // entering the `GameState::Menu` state.
+                // Current screen in the menu is handled by an indepent state from `GameState`
                 .add_state(MenuState::Disabled)
                 .add_system_set(SystemSet::on_enter(super::GameState::Menu).with_system(menu_setup))
+                // Systems to handle the main menu screen
                 .add_system_set(SystemSet::on_enter(MenuState::Main).with_system(main_menu_setup))
                 .add_system_set(
                     SystemSet::on_exit(MenuState::Main)
                         .with_system(super::despawn_screen::<ScreenMenuMain>),
                 )
+                // Systems to handle the settings menu screen
                 .add_system_set(
-                    SystemSet::on_enter(MenuState::Preferences).with_system(preferences_menu_setup),
+                    SystemSet::on_enter(MenuState::Settings).with_system(settings_menu_setup),
                 )
                 .add_system_set(
-                    SystemSet::on_exit(MenuState::Preferences)
-                        .with_system(super::despawn_screen::<ScreenMenuPreferences>),
+                    SystemSet::on_exit(MenuState::Settings)
+                        .with_system(super::despawn_screen::<ScreenMenuSettings>),
                 )
+                // Systems to handle the display settings screen
                 .add_system_set(
-                    SystemSet::on_enter(MenuState::PrefDisplay)
-                        .with_system(display_preferences_menu_setup),
+                    SystemSet::on_enter(MenuState::SettingsDisplay)
+                        .with_system(display_settings_menu_setup),
                 )
                 .add_system_set(
-                    SystemSet::on_update(MenuState::PrefDisplay).with_system(quality_button),
+                    SystemSet::on_update(MenuState::SettingsDisplay).with_system(quality_button),
                 )
                 .add_system_set(
-                    SystemSet::on_exit(MenuState::PrefDisplay)
-                        .with_system(super::despawn_screen::<ScreenMenuPrefDisplay>),
+                    SystemSet::on_exit(MenuState::SettingsDisplay)
+                        .with_system(super::despawn_screen::<ScreenMenuSettingsDisplay>),
                 )
+                // Systems to handle the sound settings screen
                 .add_system_set(
-                    SystemSet::on_enter(MenuState::PrefSound)
-                        .with_system(sound_preferences_menu_setup),
+                    SystemSet::on_enter(MenuState::SettingsSound)
+                        .with_system(sound_settings_menu_setup),
                 )
                 .add_system_set(
-                    SystemSet::on_update(MenuState::PrefSound).with_system(volume_button),
+                    SystemSet::on_update(MenuState::SettingsSound).with_system(volume_button),
                 )
                 .add_system_set(
-                    SystemSet::on_exit(MenuState::PrefSound)
-                        .with_system(super::despawn_screen::<ScreenMenuPrefSound>),
+                    SystemSet::on_exit(MenuState::SettingsSound)
+                        .with_system(super::despawn_screen::<ScreenMenuSettingsSound>),
                 )
+                // Common systems to all screens that handles buttons behaviour
                 .add_system_set(
                     SystemSet::on_update(super::GameState::Menu)
                         .with_system(menu_action)
@@ -197,23 +277,31 @@ mod menu {
         }
     }
 
+    // State used for the current menu screen
     #[derive(Clone, Eq, PartialEq, Debug, Hash)]
     enum MenuState {
         Main,
-        Preferences,
-        PrefDisplay,
-        PrefSound,
+        Settings,
+        SettingsDisplay,
+        SettingsSound,
         Disabled,
     }
+
+    // Tag component used to tag entities added on the main menu screen
     #[derive(Component)]
     struct ScreenMenuMain;
 
+    // Tag component used to tag entities added on the settings menu screen
     #[derive(Component)]
-    struct ScreenMenuPreferences;
+    struct ScreenMenuSettings;
+
+    // Tag component used to tag entities added on the display settings menu screen
     #[derive(Component)]
-    struct ScreenMenuPrefDisplay;
+    struct ScreenMenuSettingsDisplay;
+
+    // Tag component used to tag entities added on the sound settings menu screen
     #[derive(Component)]
-    struct ScreenMenuPrefSound;
+    struct ScreenMenuSettingsSound;
 
     struct ButtonMaterials {
         normal: Handle<ColorMaterial>,
@@ -234,20 +322,23 @@ mod menu {
         }
     }
 
+    // Tag component used to mark wich setting is currently selected
     #[derive(Component)]
     struct SelectedOption;
 
+    // All actions that can be triggered from a button click
     #[derive(Component)]
     enum MenuButtonAction {
         Play,
-        Preferences,
-        PrefDisplay,
-        PrefSound,
+        Settings,
+        SettingsDisplay,
+        SettingsSound,
         BackToMainMenu,
-        BackToPreferences,
+        BackToSettings,
         Quit,
     }
 
+    // This system handles changing all buttons color based on mouse interaction
     fn button_system(
         button_materials: Res<ButtonMaterials>,
         mut interaction_query: Query<
@@ -282,6 +373,7 @@ mod menu {
         }
     }
 
+    // This system updates the settings when a new value for display quality is selected
     fn quality_button(
         button_materials: Res<ButtonMaterials>,
         interaction_query: Query<
@@ -306,6 +398,7 @@ mod menu {
     #[derive(Component)]
     struct Volume(u32);
 
+    // This system updates the settings when a new value for volume is selected
     fn volume_button(
         button_materials: Res<ButtonMaterials>,
         interaction_query: Query<
@@ -338,6 +431,7 @@ mod menu {
         mut materials: ResMut<Assets<ColorMaterial>>,
     ) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+        // Common style for all buttons on the screen
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
             margin: Rect::all(Val::Px(20.0)),
@@ -364,6 +458,7 @@ mod menu {
             })
             .insert(ScreenMenuMain)
             .with_children(|parent| {
+                // Display the game name
                 parent.spawn_bundle(TextBundle {
                     style: Style {
                         margin: Rect::all(Val::Px(50.0)),
@@ -380,6 +475,11 @@ mod menu {
                     ),
                     ..Default::default()
                 });
+
+                // Display three buttons for each action available from the main menu:
+                // - new game
+                // - settings
+                // - quit
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style.clone(),
@@ -403,11 +503,11 @@ mod menu {
                         material: button_materials.normal.clone(),
                         ..Default::default()
                     })
-                    .insert(MenuButtonAction::Preferences)
+                    .insert(MenuButtonAction::Settings)
                     .with_children(|parent| {
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section(
-                                "Preferences",
+                                "Settings",
                                 button_text_style.clone(),
                                 Default::default(),
                             ),
@@ -430,7 +530,7 @@ mod menu {
             });
     }
 
-    fn preferences_menu_setup(
+    fn settings_menu_setup(
         mut commands: Commands,
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
@@ -460,15 +560,16 @@ mod menu {
                 material: materials.add(Color::CRIMSON.into()),
                 ..Default::default()
             })
-            .insert(ScreenMenuPreferences)
+            .insert(ScreenMenuSettings)
             .with_children(|parent| {
+                // Display two buttons for the submenus
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style.clone(),
                         material: button_materials.normal.clone(),
                         ..Default::default()
                     })
-                    .insert(MenuButtonAction::PrefDisplay)
+                    .insert(MenuButtonAction::SettingsDisplay)
                     .with_children(|parent| {
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section(
@@ -485,7 +586,7 @@ mod menu {
                         material: button_materials.normal.clone(),
                         ..Default::default()
                     })
-                    .insert(MenuButtonAction::PrefSound)
+                    .insert(MenuButtonAction::SettingsSound)
                     .with_children(|parent| {
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section(
@@ -496,6 +597,7 @@ mod menu {
                             ..Default::default()
                         });
                     });
+                // Display the back button to return to the main menu screen
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
@@ -512,7 +614,7 @@ mod menu {
             });
     }
 
-    fn display_preferences_menu_setup(
+    fn display_settings_menu_setup(
         mut commands: Commands,
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
@@ -543,8 +645,10 @@ mod menu {
                 material: materials.add(Color::CRIMSON.into()),
                 ..Default::default()
             })
-            .insert(ScreenMenuPrefDisplay)
+            .insert(ScreenMenuSettingsDisplay)
             .with_children(|parent| {
+                // Create a new `NodeBundle`, this time not setting its `flex_direction`. It will
+                // use the default value, `FlexDirection::Row`, from left to right.
                 parent
                     .spawn_bundle(NodeBundle {
                         style: Style {
@@ -555,6 +659,7 @@ mod menu {
                         ..Default::default()
                     })
                     .with_children(|parent| {
+                        // Display a label for the current setting
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section(
                                 "Display Quality",
@@ -563,6 +668,7 @@ mod menu {
                             ),
                             ..Default::default()
                         });
+                        // Display a button for each possible value
                         for quality in [
                             super::DisplayQuality::Low,
                             super::DisplayQuality::Medium,
@@ -591,13 +697,14 @@ mod menu {
                             }
                         }
                     });
+                // Display the back button to return to the settings screen
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
                         material: button_materials.normal.clone(),
                         ..Default::default()
                     })
-                    .insert(MenuButtonAction::BackToPreferences)
+                    .insert(MenuButtonAction::BackToSettings)
                     .with_children(|parent| {
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section("Back", button_text_style, Default::default()),
@@ -607,7 +714,7 @@ mod menu {
             });
     }
 
-    fn sound_preferences_menu_setup(
+    fn sound_settings_menu_setup(
         mut commands: Commands,
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
@@ -638,7 +745,7 @@ mod menu {
                 material: materials.add(Color::CRIMSON.into()),
                 ..Default::default()
             })
-            .insert(ScreenMenuPrefSound)
+            .insert(ScreenMenuSettingsSound)
             .with_children(|parent| {
                 parent
                     .spawn_bundle(NodeBundle {
@@ -679,7 +786,7 @@ mod menu {
                         material: button_materials.normal.clone(),
                         ..Default::default()
                     })
-                    .insert(MenuButtonAction::BackToPreferences)
+                    .insert(MenuButtonAction::BackToSettings)
                     .with_children(|parent| {
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section("Back", button_text_style, Default::default()),
@@ -706,16 +813,16 @@ mod menu {
                         game_state.set(super::GameState::Game).unwrap();
                         menu_state.set(MenuState::Disabled).unwrap()
                     }
-                    MenuButtonAction::Preferences => {
-                        menu_state.set(MenuState::Preferences).unwrap()
+                    MenuButtonAction::Settings => menu_state.set(MenuState::Settings).unwrap(),
+                    MenuButtonAction::SettingsDisplay => {
+                        menu_state.set(MenuState::SettingsDisplay).unwrap()
                     }
-                    MenuButtonAction::PrefDisplay => {
-                        menu_state.set(MenuState::PrefDisplay).unwrap()
+                    MenuButtonAction::SettingsSound => {
+                        menu_state.set(MenuState::SettingsSound).unwrap()
                     }
-                    MenuButtonAction::PrefSound => menu_state.set(MenuState::PrefSound).unwrap(),
                     MenuButtonAction::BackToMainMenu => menu_state.set(MenuState::Main).unwrap(),
-                    MenuButtonAction::BackToPreferences => {
-                        menu_state.set(MenuState::Preferences).unwrap()
+                    MenuButtonAction::BackToSettings => {
+                        menu_state.set(MenuState::Settings).unwrap()
                     }
                 }
             }

From e72f2d3077bbbd00bd9b88a1d20a9a36ac4bf400 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 08:25:05 +0200
Subject: [PATCH 06/18] nobody is super

---
 examples/game/game_menu.rs | 82 +++++++++++++++++++-------------------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 14801dd48d706..395bf68abe4f6 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -53,19 +53,18 @@ fn setup(mut commands: Commands) {
 mod splash {
     use bevy::prelude::*;
 
+    use super::{despawn_screen, GameState};
     // This plugin will display a splash screen with Bevy logo for 1 second before switching to the menu
     pub struct SplashPlugin;
 
     impl Plugin for SplashPlugin {
         fn build(&self, app: &mut bevy::prelude::App) {
-            app.add_system_set(
-                SystemSet::on_enter(super::GameState::Splash).with_system(splash_setup),
-            )
-            .add_system_set(SystemSet::on_update(super::GameState::Splash).with_system(countdown))
-            .add_system_set(
-                SystemSet::on_exit(super::GameState::Splash)
-                    .with_system(super::despawn_screen::<ScreenSplash>),
-            );
+            app.add_system_set(SystemSet::on_enter(GameState::Splash).with_system(splash_setup))
+                .add_system_set(SystemSet::on_update(GameState::Splash).with_system(countdown))
+                .add_system_set(
+                    SystemSet::on_exit(GameState::Splash)
+                        .with_system(despawn_screen::<ScreenSplash>),
+                );
         }
     }
 
@@ -101,12 +100,12 @@ mod splash {
 
     // Tick the timer, and change state when finished
     fn countdown(
-        mut game_state: ResMut<State<super::GameState>>,
+        mut game_state: ResMut<State<GameState>>,
         time: Res<Time>,
         mut timer: Query<&mut SplashTimer>,
     ) {
         if timer.single_mut().0.tick(time.delta()).finished() {
-            game_state.set(super::GameState::Menu).unwrap();
+            game_state.set(GameState::Menu).unwrap();
         }
     }
 }
@@ -114,17 +113,18 @@ mod splash {
 mod game {
     use bevy::prelude::*;
 
+    use super::{despawn_screen, GameState, Settings, TEXT_COLOR};
+
     // This plugin will contain the game. In this case, it's just be a screen that will
     // display the current settings for 5 seconds before returning to the menu
     pub struct GamePlugin;
 
     impl Plugin for GamePlugin {
         fn build(&self, app: &mut App) {
-            app.add_system_set(SystemSet::on_enter(super::GameState::Game).with_system(game_setup))
-                .add_system_set(SystemSet::on_update(super::GameState::Game).with_system(game))
+            app.add_system_set(SystemSet::on_enter(GameState::Game).with_system(game_setup))
+                .add_system_set(SystemSet::on_update(GameState::Game).with_system(game))
                 .add_system_set(
-                    SystemSet::on_exit(super::GameState::Game)
-                        .with_system(super::despawn_screen::<ScreenGame>),
+                    SystemSet::on_exit(GameState::Game).with_system(despawn_screen::<ScreenGame>),
                 );
         }
     }
@@ -140,7 +140,7 @@ mod game {
         mut commands: Commands,
         asset_server: Res<AssetServer>,
         mut materials: ResMut<Assets<ColorMaterial>>,
-        settings: Res<super::Settings>,
+        settings: Res<Settings>,
     ) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 
@@ -174,7 +174,7 @@ mod game {
                         TextStyle {
                             font: font.clone(),
                             font_size: 80.0,
-                            color: super::TEXT_COLOR,
+                            color: TEXT_COLOR,
                         },
                         Default::default(),
                     ),
@@ -190,7 +190,7 @@ mod game {
                         TextStyle {
                             font: font.clone(),
                             font_size: 60.0,
-                            color: super::TEXT_COLOR,
+                            color: TEXT_COLOR,
                         },
                         Default::default(),
                     ),
@@ -204,11 +204,11 @@ mod game {
     // Tick the timer, and change state when finished
     fn game(
         time: Res<Time>,
-        mut game_state: ResMut<State<super::GameState>>,
+        mut game_state: ResMut<State<GameState>>,
         mut timer: Query<&mut GameTimer>,
     ) {
         if timer.single_mut().0.tick(time.delta()).finished() {
-            game_state.set(super::GameState::Menu).unwrap();
+            game_state.set(GameState::Menu).unwrap();
         }
     }
 }
@@ -216,6 +216,8 @@ mod game {
 mod menu {
     use bevy::{app::AppExit, prelude::*};
 
+    use super::{despawn_screen, DisplayQuality, GameState, Settings, TEXT_COLOR};
+
     // This plugin manages the menu, with 5 different screens:
     // - a main menu with "New Game", "Settings", "Quit"
     // - a settings menu with two submenus and a back button
@@ -229,12 +231,12 @@ mod menu {
                 // entering the `GameState::Menu` state.
                 // Current screen in the menu is handled by an indepent state from `GameState`
                 .add_state(MenuState::Disabled)
-                .add_system_set(SystemSet::on_enter(super::GameState::Menu).with_system(menu_setup))
+                .add_system_set(SystemSet::on_enter(GameState::Menu).with_system(menu_setup))
                 // Systems to handle the main menu screen
                 .add_system_set(SystemSet::on_enter(MenuState::Main).with_system(main_menu_setup))
                 .add_system_set(
                     SystemSet::on_exit(MenuState::Main)
-                        .with_system(super::despawn_screen::<ScreenMenuMain>),
+                        .with_system(despawn_screen::<ScreenMenuMain>),
                 )
                 // Systems to handle the settings menu screen
                 .add_system_set(
@@ -242,7 +244,7 @@ mod menu {
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::Settings)
-                        .with_system(super::despawn_screen::<ScreenMenuSettings>),
+                        .with_system(despawn_screen::<ScreenMenuSettings>),
                 )
                 // Systems to handle the display settings screen
                 .add_system_set(
@@ -254,7 +256,7 @@ mod menu {
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::SettingsDisplay)
-                        .with_system(super::despawn_screen::<ScreenMenuSettingsDisplay>),
+                        .with_system(despawn_screen::<ScreenMenuSettingsDisplay>),
                 )
                 // Systems to handle the sound settings screen
                 .add_system_set(
@@ -266,11 +268,11 @@ mod menu {
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::SettingsSound)
-                        .with_system(super::despawn_screen::<ScreenMenuSettingsSound>),
+                        .with_system(despawn_screen::<ScreenMenuSettingsSound>),
                 )
                 // Common systems to all screens that handles buttons behaviour
                 .add_system_set(
-                    SystemSet::on_update(super::GameState::Menu)
+                    SystemSet::on_update(GameState::Menu)
                         .with_system(menu_action)
                         .with_system(button_system),
                 );
@@ -377,12 +379,12 @@ mod menu {
     fn quality_button(
         button_materials: Res<ButtonMaterials>,
         interaction_query: Query<
-            (&Interaction, &super::DisplayQuality, Entity),
+            (&Interaction, &DisplayQuality, Entity),
             (Changed<Interaction>, With<Button>),
         >,
         mut selected_query: Query<(Entity, &mut Handle<ColorMaterial>), With<SelectedOption>>,
         mut commands: Commands,
-        mut settings: ResMut<super::Settings>,
+        mut settings: ResMut<Settings>,
     ) {
         for (interaction, quality, entity) in interaction_query.iter() {
             if *interaction == Interaction::Clicked && settings.quality != *quality {
@@ -407,7 +409,7 @@ mod menu {
         >,
         mut selected_query: Query<(Entity, &mut Handle<ColorMaterial>), With<SelectedOption>>,
         mut commands: Commands,
-        mut settings: ResMut<super::Settings>,
+        mut settings: ResMut<Settings>,
     ) {
         for (interaction, volume, entity) in interaction_query.iter() {
             if *interaction == Interaction::Clicked && settings.volume != volume.0 {
@@ -442,7 +444,7 @@ mod menu {
         let button_text_style = TextStyle {
             font: font.clone(),
             font_size: 40.0,
-            color: super::TEXT_COLOR,
+            color: TEXT_COLOR,
         };
 
         commands
@@ -469,7 +471,7 @@ mod menu {
                         TextStyle {
                             font: font.clone(),
                             font_size: 80.0,
-                            color: super::TEXT_COLOR,
+                            color: TEXT_COLOR,
                         },
                         Default::default(),
                     ),
@@ -546,7 +548,7 @@ mod menu {
         let button_text_style = TextStyle {
             font: asset_server.load("fonts/FiraSans-Bold.ttf"),
             font_size: 40.0,
-            color: super::TEXT_COLOR,
+            color: TEXT_COLOR,
         };
 
         commands
@@ -619,7 +621,7 @@ mod menu {
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
         mut materials: ResMut<Assets<ColorMaterial>>,
-        settings: Res<super::Settings>,
+        settings: Res<Settings>,
     ) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
@@ -631,7 +633,7 @@ mod menu {
         let button_text_style = TextStyle {
             font: asset_server.load("fonts/FiraSans-Bold.ttf"),
             font_size: 40.0,
-            color: super::TEXT_COLOR,
+            color: TEXT_COLOR,
         };
 
         commands
@@ -670,9 +672,9 @@ mod menu {
                         });
                         // Display a button for each possible value
                         for quality in [
-                            super::DisplayQuality::Low,
-                            super::DisplayQuality::Medium,
-                            super::DisplayQuality::High,
+                            DisplayQuality::Low,
+                            DisplayQuality::Medium,
+                            DisplayQuality::High,
                         ] {
                             let mut entity = parent.spawn_bundle(ButtonBundle {
                                 style: Style {
@@ -719,7 +721,7 @@ mod menu {
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
         mut materials: ResMut<Assets<ColorMaterial>>,
-        settings: Res<super::Settings>,
+        settings: Res<Settings>,
     ) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
@@ -731,7 +733,7 @@ mod menu {
         let button_text_style = TextStyle {
             font: asset_server.load("fonts/FiraSans-Bold.ttf"),
             font_size: 40.0,
-            color: super::TEXT_COLOR,
+            color: TEXT_COLOR,
         };
 
         commands
@@ -803,14 +805,14 @@ mod menu {
         >,
         mut app_exit_events: EventWriter<AppExit>,
         mut menu_state: ResMut<State<MenuState>>,
-        mut game_state: ResMut<State<super::GameState>>,
+        mut game_state: ResMut<State<GameState>>,
     ) {
         for (interaction, menu_button_action) in interaction_query.iter() {
             if *interaction == Interaction::Clicked {
                 match menu_button_action {
                     MenuButtonAction::Quit => app_exit_events.send(AppExit),
                     MenuButtonAction::Play => {
-                        game_state.set(super::GameState::Game).unwrap();
+                        game_state.set(GameState::Game).unwrap();
                         menu_state.set(MenuState::Disabled).unwrap()
                     }
                     MenuButtonAction::Settings => menu_state.set(MenuState::Settings).unwrap(),

From c6de40080ffb62c6d3ff499a1a0086f39aff958a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 08:37:22 +0200
Subject: [PATCH 07/18] remove universal settings resource

---
 examples/game/game_menu.rs | 87 ++++++++++++--------------------------
 1 file changed, 28 insertions(+), 59 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 395bf68abe4f6..d86453560d704 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -20,21 +20,15 @@ enum DisplayQuality {
     High,
 }
 
-// Simple settings struct, it will be added as a resource to the Bevy app
-#[derive(Debug)]
-struct Settings {
-    quality: DisplayQuality,
-    volume: u32,
-}
+#[derive(Debug, Component, PartialEq, Eq, Clone, Copy)]
+struct Volume(u32);
 
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
-        // Insert the settings struct as a resource with its initial values
-        .insert_resource(Settings {
-            quality: DisplayQuality::Medium,
-            volume: 7,
-        })
+        // Insert as resource the initial value for the settings resources
+        .insert_resource(DisplayQuality::Medium)
+        .insert_resource(Volume(7))
         .add_startup_system(setup)
         // Start the game in the Splash state
         .add_state(GameState::Splash)
@@ -113,7 +107,7 @@ mod splash {
 mod game {
     use bevy::prelude::*;
 
-    use super::{despawn_screen, GameState, Settings, TEXT_COLOR};
+    use super::{despawn_screen, DisplayQuality, GameState, Volume, TEXT_COLOR};
 
     // This plugin will contain the game. In this case, it's just be a screen that will
     // display the current settings for 5 seconds before returning to the menu
@@ -140,7 +134,8 @@ mod game {
         mut commands: Commands,
         asset_server: Res<AssetServer>,
         mut materials: ResMut<Assets<ColorMaterial>>,
-        settings: Res<Settings>,
+        display_quality: Res<DisplayQuality>,
+        volume: Res<Volume>,
     ) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 
@@ -186,7 +181,7 @@ mod game {
                         ..Default::default()
                     },
                     text: Text::with_section(
-                        format!("{:?}", *settings),
+                        format!("quality: {:?} - {:?}", *display_quality, *volume),
                         TextStyle {
                             font: font.clone(),
                             font_size: 60.0,
@@ -216,7 +211,7 @@ mod game {
 mod menu {
     use bevy::{app::AppExit, prelude::*};
 
-    use super::{despawn_screen, DisplayQuality, GameState, Settings, TEXT_COLOR};
+    use super::{despawn_screen, DisplayQuality, GameState, Volume, TEXT_COLOR};
 
     // This plugin manages the menu, with 5 different screens:
     // - a main menu with "New Game", "Settings", "Quit"
@@ -252,7 +247,8 @@ mod menu {
                         .with_system(display_settings_menu_setup),
                 )
                 .add_system_set(
-                    SystemSet::on_update(MenuState::SettingsDisplay).with_system(quality_button),
+                    SystemSet::on_update(MenuState::SettingsDisplay)
+                        .with_system(setting_button::<DisplayQuality>),
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::SettingsDisplay)
@@ -264,7 +260,8 @@ mod menu {
                         .with_system(sound_settings_menu_setup),
                 )
                 .add_system_set(
-                    SystemSet::on_update(MenuState::SettingsSound).with_system(volume_button),
+                    SystemSet::on_update(MenuState::SettingsSound)
+                        .with_system(setting_button::<Volume>),
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::SettingsSound)
@@ -376,48 +373,20 @@ mod menu {
     }
 
     // This system updates the settings when a new value for display quality is selected
-    fn quality_button(
+    fn setting_button<T: Component + PartialEq + Copy>(
         button_materials: Res<ButtonMaterials>,
-        interaction_query: Query<
-            (&Interaction, &DisplayQuality, Entity),
-            (Changed<Interaction>, With<Button>),
-        >,
+        interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
         mut selected_query: Query<(Entity, &mut Handle<ColorMaterial>), With<SelectedOption>>,
         mut commands: Commands,
-        mut settings: ResMut<Settings>,
+        mut setting: ResMut<T>,
     ) {
         for (interaction, quality, entity) in interaction_query.iter() {
-            if *interaction == Interaction::Clicked && settings.quality != *quality {
-                let (previous_button, mut previous_material) = selected_query.single_mut();
-                *previous_material = button_materials.normal.clone();
-                commands.entity(previous_button).remove::<SelectedOption>();
-                commands.entity(entity).insert(SelectedOption);
-                settings.quality = *quality;
-            }
-        }
-    }
-
-    #[derive(Component)]
-    struct Volume(u32);
-
-    // This system updates the settings when a new value for volume is selected
-    fn volume_button(
-        button_materials: Res<ButtonMaterials>,
-        interaction_query: Query<
-            (&Interaction, &Volume, Entity),
-            (Changed<Interaction>, With<Button>),
-        >,
-        mut selected_query: Query<(Entity, &mut Handle<ColorMaterial>), With<SelectedOption>>,
-        mut commands: Commands,
-        mut settings: ResMut<Settings>,
-    ) {
-        for (interaction, volume, entity) in interaction_query.iter() {
-            if *interaction == Interaction::Clicked && settings.volume != volume.0 {
+            if *interaction == Interaction::Clicked && *setting != *quality {
                 let (previous_button, mut previous_material) = selected_query.single_mut();
                 *previous_material = button_materials.normal.clone();
                 commands.entity(previous_button).remove::<SelectedOption>();
                 commands.entity(entity).insert(SelectedOption);
-                settings.volume = volume.0;
+                *setting = *quality;
             }
         }
     }
@@ -621,7 +590,7 @@ mod menu {
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
         mut materials: ResMut<Assets<ColorMaterial>>,
-        settings: Res<Settings>,
+        display_quality: Res<DisplayQuality>,
     ) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
@@ -671,7 +640,7 @@ mod menu {
                             ..Default::default()
                         });
                         // Display a button for each possible value
-                        for quality in [
+                        for quality_setting in [
                             DisplayQuality::Low,
                             DisplayQuality::Medium,
                             DisplayQuality::High,
@@ -684,17 +653,17 @@ mod menu {
                                 material: button_materials.normal.clone(),
                                 ..Default::default()
                             });
-                            entity.insert(quality).with_children(|parent| {
+                            entity.insert(quality_setting).with_children(|parent| {
                                 parent.spawn_bundle(TextBundle {
                                     text: Text::with_section(
-                                        format!("{:?}", quality),
+                                        format!("{:?}", quality_setting),
                                         button_text_style.clone(),
                                         Default::default(),
                                     ),
                                     ..Default::default()
                                 });
                             });
-                            if settings.quality == quality {
+                            if *display_quality == quality_setting {
                                 entity.insert(SelectedOption);
                             }
                         }
@@ -721,7 +690,7 @@ mod menu {
         asset_server: Res<AssetServer>,
         button_materials: Res<ButtonMaterials>,
         mut materials: ResMut<Assets<ColorMaterial>>,
-        settings: Res<Settings>,
+        volume: Res<Volume>,
     ) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
@@ -767,7 +736,7 @@ mod menu {
                             ),
                             ..Default::default()
                         });
-                        for volume in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
+                        for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
                             let mut entity = parent.spawn_bundle(ButtonBundle {
                                 style: Style {
                                     size: Size::new(Val::Px(30.0), Val::Px(65.0)),
@@ -776,8 +745,8 @@ mod menu {
                                 material: button_materials.normal.clone(),
                                 ..Default::default()
                             });
-                            entity.insert(Volume(volume));
-                            if settings.volume == volume {
+                            entity.insert(Volume(volume_setting));
+                            if *volume == Volume(volume_setting) {
                                 entity.insert(SelectedOption);
                             }
                         }

From 88bb5a3ee1826756ec927c2dc5d1a758d0168aa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 08:41:30 +0200
Subject: [PATCH 08/18] rename screen tag structs

---
 examples/game/game_menu.rs | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index d86453560d704..081489a2b7b70 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -57,14 +57,14 @@ mod splash {
                 .add_system_set(SystemSet::on_update(GameState::Splash).with_system(countdown))
                 .add_system_set(
                     SystemSet::on_exit(GameState::Splash)
-                        .with_system(despawn_screen::<ScreenSplash>),
+                        .with_system(despawn_screen::<OnSplashScreen>),
                 );
         }
     }
 
     // Tag component used to tag entities added on the splash screen
     #[derive(Component)]
-    struct ScreenSplash;
+    struct OnSplashScreen;
 
     #[derive(Component)]
     struct SplashTimer(Timer);
@@ -88,7 +88,7 @@ mod splash {
                 material: materials.add(icon.into()),
                 ..Default::default()
             })
-            .insert(ScreenSplash)
+            .insert(OnSplashScreen)
             .insert(SplashTimer(Timer::from_seconds(1.0, false)));
     }
 
@@ -118,14 +118,14 @@ mod game {
             app.add_system_set(SystemSet::on_enter(GameState::Game).with_system(game_setup))
                 .add_system_set(SystemSet::on_update(GameState::Game).with_system(game))
                 .add_system_set(
-                    SystemSet::on_exit(GameState::Game).with_system(despawn_screen::<ScreenGame>),
+                    SystemSet::on_exit(GameState::Game).with_system(despawn_screen::<OnGameScreen>),
                 );
         }
     }
 
     // Tag component used to tag entities added on the game screen
     #[derive(Component)]
-    struct ScreenGame;
+    struct OnGameScreen;
 
     #[derive(Component)]
     struct GameTimer(Timer);
@@ -156,7 +156,7 @@ mod game {
                 material: materials.add(Color::BLACK.into()),
                 ..Default::default()
             })
-            .insert(ScreenGame)
+            .insert(OnGameScreen)
             .with_children(|parent| {
                 // Display two lines of text, the second one with the current settings
                 parent.spawn_bundle(TextBundle {
@@ -193,7 +193,7 @@ mod game {
                 });
             });
         // Spawn a 5 timer to trigger going back to the menu
-        commands.spawn_bundle((GameTimer(Timer::from_seconds(5.0, false)), ScreenGame));
+        commands.spawn_bundle((GameTimer(Timer::from_seconds(5.0, false)), OnGameScreen));
     }
 
     // Tick the timer, and change state when finished
@@ -231,7 +231,7 @@ mod menu {
                 .add_system_set(SystemSet::on_enter(MenuState::Main).with_system(main_menu_setup))
                 .add_system_set(
                     SystemSet::on_exit(MenuState::Main)
-                        .with_system(despawn_screen::<ScreenMenuMain>),
+                        .with_system(despawn_screen::<OnMainMenuScreen>),
                 )
                 // Systems to handle the settings menu screen
                 .add_system_set(
@@ -239,7 +239,7 @@ mod menu {
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::Settings)
-                        .with_system(despawn_screen::<ScreenMenuSettings>),
+                        .with_system(despawn_screen::<OnSettingsMenuScreen>),
                 )
                 // Systems to handle the display settings screen
                 .add_system_set(
@@ -252,7 +252,7 @@ mod menu {
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::SettingsDisplay)
-                        .with_system(despawn_screen::<ScreenMenuSettingsDisplay>),
+                        .with_system(despawn_screen::<OnDisplaySettingsMenuScreen>),
                 )
                 // Systems to handle the sound settings screen
                 .add_system_set(
@@ -265,7 +265,7 @@ mod menu {
                 )
                 .add_system_set(
                     SystemSet::on_exit(MenuState::SettingsSound)
-                        .with_system(despawn_screen::<ScreenMenuSettingsSound>),
+                        .with_system(despawn_screen::<OnSoundSettingsMenuScreen>),
                 )
                 // Common systems to all screens that handles buttons behaviour
                 .add_system_set(
@@ -288,19 +288,19 @@ mod menu {
 
     // Tag component used to tag entities added on the main menu screen
     #[derive(Component)]
-    struct ScreenMenuMain;
+    struct OnMainMenuScreen;
 
     // Tag component used to tag entities added on the settings menu screen
     #[derive(Component)]
-    struct ScreenMenuSettings;
+    struct OnSettingsMenuScreen;
 
     // Tag component used to tag entities added on the display settings menu screen
     #[derive(Component)]
-    struct ScreenMenuSettingsDisplay;
+    struct OnDisplaySettingsMenuScreen;
 
     // Tag component used to tag entities added on the sound settings menu screen
     #[derive(Component)]
-    struct ScreenMenuSettingsSound;
+    struct OnSoundSettingsMenuScreen;
 
     struct ButtonMaterials {
         normal: Handle<ColorMaterial>,
@@ -427,7 +427,7 @@ mod menu {
                 material: materials.add(Color::CRIMSON.into()),
                 ..Default::default()
             })
-            .insert(ScreenMenuMain)
+            .insert(OnMainMenuScreen)
             .with_children(|parent| {
                 // Display the game name
                 parent.spawn_bundle(TextBundle {
@@ -531,7 +531,7 @@ mod menu {
                 material: materials.add(Color::CRIMSON.into()),
                 ..Default::default()
             })
-            .insert(ScreenMenuSettings)
+            .insert(OnSettingsMenuScreen)
             .with_children(|parent| {
                 // Display two buttons for the submenus
                 parent
@@ -616,7 +616,7 @@ mod menu {
                 material: materials.add(Color::CRIMSON.into()),
                 ..Default::default()
             })
-            .insert(ScreenMenuSettingsDisplay)
+            .insert(OnDisplaySettingsMenuScreen)
             .with_children(|parent| {
                 // Create a new `NodeBundle`, this time not setting its `flex_direction`. It will
                 // use the default value, `FlexDirection::Row`, from left to right.
@@ -716,7 +716,7 @@ mod menu {
                 material: materials.add(Color::CRIMSON.into()),
                 ..Default::default()
             })
-            .insert(ScreenMenuSettingsSound)
+            .insert(OnSoundSettingsMenuScreen)
             .with_children(|parent| {
                 parent
                     .spawn_bundle(NodeBundle {

From acad9d37635de41b70735aa0fa4d9ccf8e9674f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 13 Oct 2021 09:04:37 +0200
Subject: [PATCH 09/18] timers as resources

---
 examples/game/game_menu.rs | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 081489a2b7b70..7d9cfddbd4d98 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -88,17 +88,17 @@ mod splash {
                 material: materials.add(icon.into()),
                 ..Default::default()
             })
-            .insert(OnSplashScreen)
-            .insert(SplashTimer(Timer::from_seconds(1.0, false)));
+            .insert(OnSplashScreen);
+        commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, false)));
     }
 
     // Tick the timer, and change state when finished
     fn countdown(
         mut game_state: ResMut<State<GameState>>,
         time: Res<Time>,
-        mut timer: Query<&mut SplashTimer>,
+        mut timer: ResMut<SplashTimer>,
     ) {
-        if timer.single_mut().0.tick(time.delta()).finished() {
+        if timer.0.tick(time.delta()).finished() {
             game_state.set(GameState::Menu).unwrap();
         }
     }
@@ -193,16 +193,16 @@ mod game {
                 });
             });
         // Spawn a 5 timer to trigger going back to the menu
-        commands.spawn_bundle((GameTimer(Timer::from_seconds(5.0, false)), OnGameScreen));
+        commands.insert_resource(GameTimer(Timer::from_seconds(5.0, false)));
     }
 
     // Tick the timer, and change state when finished
     fn game(
         time: Res<Time>,
         mut game_state: ResMut<State<GameState>>,
-        mut timer: Query<&mut GameTimer>,
+        mut timer: ResMut<GameTimer>,
     ) {
-        if timer.single_mut().0.tick(time.delta()).finished() {
+        if timer.0.tick(time.delta()).finished() {
             game_state.set(GameState::Menu).unwrap();
         }
     }

From 56aa730c2c139833b6de622401616e5223d59c79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Thu, 14 Oct 2021 23:57:06 +0200
Subject: [PATCH 10/18] improve comments

Co-Authored-By: Anselmo Sampietro <23332153+wilk10@users.noreply.github.com>
---
 examples/game/game_menu.rs | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 7d9cfddbd4d98..980d2aa30a410 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -1,7 +1,7 @@
 use bevy::prelude::*;
 
 // This example will display a simple menu using Bevy UI where you can start a new game,
-// change some settings or quit. There are no actual game, it will just display the current
+// change some settings or quit. There is no actual game, it will just display the current
 // settings for 5 seconds before going back to the menu.
 
 const TEXT_COLOR: Color = Color::rgb(0.9, 0.9, 0.9);
@@ -145,7 +145,8 @@ mod game {
                 style: Style {
                     // This will center the current node
                     margin: Rect::all(Val::Auto),
-                    // This will display its children in a column, from top to bottom
+                    // This will display its children in a column, from top to bottom. Unlike
+                    // in Flexbox, Bevy origin is on bottom left, so the vertical axis is reversed
                     flex_direction: FlexDirection::ColumnReverse,
                     // `align_items` will align children on the cross axis. Here the main axis is
                     // vertical (column), so the cross axis is horizontal. This will center the
@@ -224,7 +225,7 @@ mod menu {
             app.init_resource::<ButtonMaterials>()
                 // At start, the menu is not enabled. This will be changed in `menu_setup` when
                 // entering the `GameState::Menu` state.
-                // Current screen in the menu is handled by an indepent state from `GameState`
+                // Current screen in the menu is handled by an independent state from `GameState`
                 .add_state(MenuState::Disabled)
                 .add_system_set(SystemSet::on_enter(GameState::Menu).with_system(menu_setup))
                 // Systems to handle the main menu screen

From 80f515c7fd3a86d0fa6cb674eb41f61b9b96c5f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Fri, 15 Oct 2021 00:28:15 +0200
Subject: [PATCH 11/18] move asset credits to the existing file

---
 CREDITS.md                        | 3 +++
 assets/models/AlienCake/README.md | 5 -----
 2 files changed, 3 insertions(+), 5 deletions(-)
 delete mode 100644 assets/models/AlienCake/README.md

diff --git a/CREDITS.md b/CREDITS.md
index cefd08df93ad4..e246f9145b2fe 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -16,3 +16,6 @@
 
 * Generic RPG Pack (CC0 license) by [Bakudas](https://twitter.com/bakudas) and [Gabe Fern](https://twitter.com/_Gabrielfer)
 * Environment maps (`.hdr` files) from [HDRIHaven](https://hdrihaven.com) (CC0 license)
+* Alien from [Kenney's Space Kit](https://www.kenney.nl/assets/space-kit)
+* Cake from [Kenney's Food Kit](https://www.kenney.nl/assets/food-kit)
+* Ground tile from [Kenney's Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit)
diff --git a/assets/models/AlienCake/README.md b/assets/models/AlienCake/README.md
deleted file mode 100644
index 2cf86d3d8bd0d..0000000000000
--- a/assets/models/AlienCake/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Assets are from [Kenney](https://www.kenney.nl)
-
-- alien from [Space Kit](https://www.kenney.nl/assets/space-kit)
-- cake from [Food Kit](https://www.kenney.nl/assets/food-kit)
-- ground tile from [Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit)

From daee08a757a5f44038b53d6ac07dc4f5df890c98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Fri, 15 Oct 2021 00:28:52 +0200
Subject: [PATCH 12/18] add icons to main menu buttons

---
 CREDITS.md                               |   1 +
 assets/textures/Game Icons/exitRight.png | Bin 0 -> 384 bytes
 assets/textures/Game Icons/right.png     | Bin 0 -> 368 bytes
 assets/textures/Game Icons/wrench.png    | Bin 0 -> 637 bytes
 examples/game/game_menu.rs               |  33 ++++++++++++++++++++++-
 5 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 assets/textures/Game Icons/exitRight.png
 create mode 100644 assets/textures/Game Icons/right.png
 create mode 100644 assets/textures/Game Icons/wrench.png

diff --git a/CREDITS.md b/CREDITS.md
index e246f9145b2fe..a1817921d9da3 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -19,3 +19,4 @@
 * Alien from [Kenney's Space Kit](https://www.kenney.nl/assets/space-kit)
 * Cake from [Kenney's Food Kit](https://www.kenney.nl/assets/food-kit)
 * Ground tile from [Kenney's Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit)
+* Game icons from [Kenney's Game Iconss](https://www.kenney.nl/assets/game-icons)
diff --git a/assets/textures/Game Icons/exitRight.png b/assets/textures/Game Icons/exitRight.png
new file mode 100644
index 0000000000000000000000000000000000000000..de78ab6f0f02523b296d723667143949cbeab8d7
GIT binary patch
literal 384
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<k3?!S*bfg0*mUKs7M+SzC{oH>NS%G}r0G|-o
z|HJ{Ha-hP1@~AC97GFt_U$B0Ez5o9E_UH50zn>q^U}?nt0x0vu)5S3);_%z+8+i{I
z2sm8yIS_JYqMdgN1D8~lidaIkbfehPg^Y?_)|G57T@#K>E8eesC~wlUpWYKwt*`R-
zubSY*rTOIi$x`XIhbprhPEMS>LFiJ=Ja(5`|DJC0SR~mqS>v(7v6D8B6_1_Nd8~Bo
zq{(CDV<%N6EBSV`=}s_Hd+gJta>U}X>f)Z+66*JR=1ZtMvrS-E*Y}$@=Z>YI&y@O<
zgDyXt1bs~Q|9G9F;#qdHqkOl3&y;+xrp`~iVFrP95gcl#`0Wn5oD5y)=eB7{eD?CG
raqFV|zRf8~_c=A+Rk8ICLnZUc3ejV2ulW;!{$=oV^>bP0l+XkKN&B!b

literal 0
HcmV?d00001

diff --git a/assets/textures/Game Icons/right.png b/assets/textures/Game Icons/right.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f2480f9a5465d9ff1a9869dadebfd96ae9847d1
GIT binary patch
literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<k3?!S*bfg0*mUKs7M+SzC{oH>NS%G}T0G|-o
z|F{8A2~e_Mb?rSMi>oBaFZjLvdHwbK^W*0;gb7!60Y#s9x;TbJ9DaL!Bkv&xp4P-H
zw?r1V1?ik-2`tl1JbXUP%kx^Gnm&8Kqsa7sm)C1_p1*1PVQX~CMAtgcyyu4NdSs4E
zBt7|}<oj&$9@oh;Cs`S*KU#7|#br*&%$|<PN|S{OC#4rD`CamHJmNWRWru~Qk*c8j
zXCL1qCrvI36dIi_ahc;|q${X?+sFUNNwv?cg6hvy3=H@GJ#getAe-8=^{EL-|2kRK
zo;_AFFqE%t?EERg?{lVq2~fI%*XK-l>wzORZ#jXC9YBUGuTM|dYiH@36TE@=_rC5m
h_qV%>{j~nXGVj^VH@k`s?*sam!PC{xWt~$(69Aegr)2;D

literal 0
HcmV?d00001

diff --git a/assets/textures/Game Icons/wrench.png b/assets/textures/Game Icons/wrench.png
new file mode 100644
index 0000000000000000000000000000000000000000..440e7edc41af9d033991f50595721ea70e2da744
GIT binary patch
literal 637
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j3?$ucQqzDGOS+@4BLl<6e(pbstU$hTfKQ0)
ze^LNY6HvM6)~0VjmOx36UvPfEy#M<9`|It`^T+GIpU)8Y-g*xM1LI9k7srr{dv9-c
z=N(qyVGa1yAi*)^|NmQ_m#;ld+|F{}=Q4|Z!IY-nYQz5ch-J#MFFo9?E=}zF<C?N$
zN6Pa%8+;!7c5F=D95gS_A<0tDy&y&J`BOK8O=@nQEcb-tIv-p<s+GzrpZG62tiUj9
z>aMPIQTYS8sugaM7xs3ChLtow5n1k(v~i(Zq^ZZFZBql;Se^bnwA2o3)Hx)`+q+-9
z+hV1_9l_4G9aB%8m7BO!c4CyfUb#Z`)0~6}YY#~%JaO-QYWE~MvDfKshkg7D;p{1Q
z`kp*)^>fzZI(p@7)TdKxPeg3sy5A}r_E1nOz;%bDY>425?D?Pk48@<lNpp2-V%2(f
zi{;L;6UrAu5>9pR>`pkf`eEKzg{MzhBpuS<oSoq%ws6n?@2|gloxQ*FsP<ItjqX=X
zjk7mTz41f$I@262)vVw}v(hFvnRTrSTx9kB(UeN1MUnS@zg~DtNp{8aHdTkB=}Qei
zRi-OHI@tWk|31e_1!MaXVUe5KKSNv>n3x)uew5+1(b{x(-o~H7oRK*?XLlCd>HoWB
zr;u9A51nrtTYPq?rZygXvFFjj$l5hNyruk1&r)uP{(t4LQf>MbyWF1LkIWw~`#!nw
q$0~vJCbQ;{+*okzlswt5EYG>e``Tg7SO0(sfWgz%&t;ucLK6V2UpT@5

literal 0
HcmV?d00001

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 980d2aa30a410..5bca43319edcb 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -405,12 +405,25 @@ mod menu {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
         // Common style for all buttons on the screen
         let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            size: Size::new(Val::Px(250.0), Val::Px(65.0)),
             margin: Rect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
         };
+        let button_icon_style = Style {
+            size: Size::new(Val::Px(30.0), Val::Auto),
+            // This takes the icons out of the flexbox flow, to be positionned exactly
+            position_type: PositionType::Absolute,
+            // The icon will be close to the left border of the button
+            position: Rect {
+                left: Val::Px(10.0),
+                right: Val::Auto,
+                top: Val::Auto,
+                bottom: Val::Auto,
+            },
+            ..Default::default()
+        };
         let button_text_style = TextStyle {
             font: font.clone(),
             font_size: 40.0,
@@ -460,6 +473,12 @@ mod menu {
                     })
                     .insert(MenuButtonAction::Play)
                     .with_children(|parent| {
+                        let icon = asset_server.load("textures/Game Icons/right.png");
+                        parent.spawn_bundle(ImageBundle {
+                            style: button_icon_style.clone(),
+                            material: materials.add(icon.into()),
+                            ..Default::default()
+                        });
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section(
                                 "New Game",
@@ -477,6 +496,12 @@ mod menu {
                     })
                     .insert(MenuButtonAction::Settings)
                     .with_children(|parent| {
+                        let icon = asset_server.load("textures/Game Icons/wrench.png");
+                        parent.spawn_bundle(ImageBundle {
+                            style: button_icon_style.clone(),
+                            material: materials.add(icon.into()),
+                            ..Default::default()
+                        });
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section(
                                 "Settings",
@@ -494,6 +519,12 @@ mod menu {
                     })
                     .insert(MenuButtonAction::Quit)
                     .with_children(|parent| {
+                        let icon = asset_server.load("textures/Game Icons/exitRight.png");
+                        parent.spawn_bundle(ImageBundle {
+                            style: button_icon_style,
+                            material: materials.add(icon.into()),
+                            ..Default::default()
+                        });
                         parent.spawn_bundle(TextBundle {
                             text: Text::with_section("Quit", button_text_style, Default::default()),
                             ..Default::default()

From eeb1f0765a2d0529a65ad064bc0a98772f41e4cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Fri, 15 Oct 2021 00:39:05 +0200
Subject: [PATCH 13/18] typo

---
 CREDITS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CREDITS.md b/CREDITS.md
index a1817921d9da3..f4e570483b7e8 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -19,4 +19,4 @@
 * Alien from [Kenney's Space Kit](https://www.kenney.nl/assets/space-kit)
 * Cake from [Kenney's Food Kit](https://www.kenney.nl/assets/food-kit)
 * Ground tile from [Kenney's Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit)
-* Game icons from [Kenney's Game Iconss](https://www.kenney.nl/assets/game-icons)
+* Game icons from [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons)

From 0cf3ff0d57f085b1980b90440a4a6bf4b6f398c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Fri, 15 Oct 2021 08:35:53 +0200
Subject: [PATCH 14/18] add license info to Kenney assets

---
 CREDITS.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/CREDITS.md b/CREDITS.md
index f4e570483b7e8..b646a0662dbf7 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -16,7 +16,7 @@
 
 * Generic RPG Pack (CC0 license) by [Bakudas](https://twitter.com/bakudas) and [Gabe Fern](https://twitter.com/_Gabrielfer)
 * Environment maps (`.hdr` files) from [HDRIHaven](https://hdrihaven.com) (CC0 license)
-* Alien from [Kenney's Space Kit](https://www.kenney.nl/assets/space-kit)
-* Cake from [Kenney's Food Kit](https://www.kenney.nl/assets/food-kit)
-* Ground tile from [Kenney's Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit)
-* Game icons from [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons)
+* Alien from [Kenney's Space Kit](https://www.kenney.nl/assets/space-kit) (CC0 1.0 Universal)
+* Cake from [Kenney's Food Kit](https://www.kenney.nl/assets/food-kit) (CC0 1.0 Universal)
+* Ground tile from [Kenney's Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit) (CC0 1.0 Universal)
+* Game icons from [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons) (CC0 1.0 Universal)

From e74909d292900d560234569ab5befd0149af99a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 20 Oct 2021 01:40:12 +0200
Subject: [PATCH 15/18] more comments

Co-Authored-By: Jerome Humbert <6532395+djeedai@users.noreply.github.com>
---
 examples/game/game_menu.rs | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 5bca43319edcb..713226604d795 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -6,6 +6,7 @@ use bevy::prelude::*;
 
 const TEXT_COLOR: Color = Color::rgb(0.9, 0.9, 0.9);
 
+// Enum that will be used as a global state for the game
 #[derive(Clone, Eq, PartialEq, Debug, Hash)]
 enum GameState {
     Splash,
@@ -13,6 +14,7 @@ enum GameState {
     Game,
 }
 
+// One of the two settings that can be set through the menu. It will be a resource in the app
 #[derive(Debug, Component, PartialEq, Eq, Clone, Copy)]
 enum DisplayQuality {
     Low,
@@ -20,6 +22,7 @@ enum DisplayQuality {
     High,
 }
 
+// One of the two settings that can be set through the menu. It will be a resource in the app
 #[derive(Debug, Component, PartialEq, Eq, Clone, Copy)]
 struct Volume(u32);
 
@@ -30,7 +33,7 @@ fn main() {
         .insert_resource(DisplayQuality::Medium)
         .insert_resource(Volume(7))
         .add_startup_system(setup)
-        // Start the game in the Splash state
+        // Declare the game state, and set its startup value
         .add_state(GameState::Splash)
         // Adds the plugins for each state
         .add_plugin(splash::SplashPlugin)
@@ -48,13 +51,19 @@ mod splash {
     use bevy::prelude::*;
 
     use super::{despawn_screen, GameState};
+
     // This plugin will display a splash screen with Bevy logo for 1 second before switching to the menu
     pub struct SplashPlugin;
 
     impl Plugin for SplashPlugin {
         fn build(&self, app: &mut bevy::prelude::App) {
-            app.add_system_set(SystemSet::on_enter(GameState::Splash).with_system(splash_setup))
+            // As this plugin is managing the splash screen, it will focus on the state `GameState::Splash`
+            app
+                // When entering the state, spawn everything needed for this screen
+                .add_system_set(SystemSet::on_enter(GameState::Splash).with_system(splash_setup))
+                // While in this state, run the `countdown` system
                 .add_system_set(SystemSet::on_update(GameState::Splash).with_system(countdown))
+                // When exiting the state, despawn everything that was spawned for this screen
                 .add_system_set(
                     SystemSet::on_exit(GameState::Splash)
                         .with_system(despawn_screen::<OnSplashScreen>),
@@ -67,6 +76,7 @@ mod splash {
     struct OnSplashScreen;
 
     #[derive(Component)]
+    // Newtype to use a `Timer` for this screen as a resource
     struct SplashTimer(Timer);
 
     fn splash_setup(
@@ -89,6 +99,7 @@ mod splash {
                 ..Default::default()
             })
             .insert(OnSplashScreen);
+        // Insert the timer as a resource
         commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, false)));
     }
 
@@ -193,7 +204,7 @@ mod game {
                     ..Default::default()
                 });
             });
-        // Spawn a 5 timer to trigger going back to the menu
+        // Spawn a 5 seconds timer to trigger going back to the menu
         commands.insert_resource(GameTimer(Timer::from_seconds(5.0, false)));
     }
 
@@ -303,6 +314,8 @@ mod menu {
     #[derive(Component)]
     struct OnSoundSettingsMenuScreen;
 
+    // Helper struct used as a resource that will hold the different materials for the buttons.
+    // It will be created from its `FromWorld` implementation when added to the application.
     struct ButtonMaterials {
         normal: Handle<ColorMaterial>,
         hovered: Handle<ColorMaterial>,
@@ -373,7 +386,8 @@ mod menu {
         }
     }
 
-    // This system updates the settings when a new value for display quality is selected
+    // This system updates the settings when a new value for a setting is selected, and marks
+    // the button as the one currently selected
     fn setting_button<T: Component + PartialEq + Copy>(
         button_materials: Res<ButtonMaterials>,
         interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
@@ -833,6 +847,7 @@ mod menu {
     }
 }
 
+// Generic system that takes a component as a parameter, and will despawn all entities with that component
 fn despawn_screen<T: Component>(to_despawn: Query<Entity, With<T>>, mut commands: Commands) {
     for entity in to_despawn.iter() {
         commands.entity(entity).despawn_recursive();

From 07140ec5aaae6df5576c147f65a8bb487a7d9f91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Wed, 20 Oct 2021 01:40:45 +0200
Subject: [PATCH 16/18] some code style changes

---
 examples/game/game_menu.rs | 72 +++++++++++++++++++++++---------------
 1 file changed, 43 insertions(+), 29 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 713226604d795..54dbad7c82ed3 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -75,7 +75,6 @@ mod splash {
     #[derive(Component)]
     struct OnSplashScreen;
 
-    #[derive(Component)]
     // Newtype to use a `Timer` for this screen as a resource
     struct SplashTimer(Timer);
 
@@ -138,7 +137,6 @@ mod game {
     #[derive(Component)]
     struct OnGameScreen;
 
-    #[derive(Component)]
     struct GameTimer(Timer);
 
     fn game_setup(
@@ -192,15 +190,35 @@ mod game {
                         margin: Rect::all(Val::Px(50.0)),
                         ..Default::default()
                     },
-                    text: Text::with_section(
-                        format!("quality: {:?} - {:?}", *display_quality, *volume),
-                        TextStyle {
-                            font: font.clone(),
-                            font_size: 60.0,
-                            color: TEXT_COLOR,
-                        },
-                        Default::default(),
-                    ),
+                    text: Text {
+                        sections: vec![
+                            TextSection {
+                                value: format!("quality: {:?}", *display_quality),
+                                style: TextStyle {
+                                    font: font.clone(),
+                                    font_size: 60.0,
+                                    color: Color::BLUE,
+                                },
+                            },
+                            TextSection {
+                                value: " - ".to_string(),
+                                style: TextStyle {
+                                    font: font.clone(),
+                                    font_size: 60.0,
+                                    color: TEXT_COLOR,
+                                },
+                            },
+                            TextSection {
+                                value: format!("volume: {:?}", *volume),
+                                style: TextStyle {
+                                    font: font.clone(),
+                                    font_size: 60.0,
+                                    color: Color::GREEN,
+                                },
+                            },
+                        ],
+                        ..Default::default()
+                    },
                     ..Default::default()
                 });
             });
@@ -364,23 +382,19 @@ mod menu {
         >,
     ) {
         for (interaction, mut material, selected) in interaction_query.iter_mut() {
-            match *interaction {
-                Interaction::Clicked => {
-                    *material = button_materials.pressed.clone();
+            match (*interaction, selected) {
+                (Interaction::Clicked, _) => *material = button_materials.pressed.clone(),
+                (Interaction::Hovered, Some(_)) => {
+                    *material = button_materials.hovered_pressed.clone()
                 }
-                Interaction::Hovered => {
-                    if selected.is_some() {
-                        *material = button_materials.hovered_pressed.clone();
-                    } else {
-                        *material = button_materials.hovered.clone();
-                    }
+                (Interaction::Hovered, None) => {
+                    *material = button_materials.hovered.clone();
                 }
-                Interaction::None => {
-                    if selected.is_some() {
-                        *material = button_materials.pressed.clone();
-                    } else {
-                        *material = button_materials.normal.clone();
-                    }
+                (Interaction::None, Some(_)) => {
+                    *material = button_materials.pressed.clone();
+                }
+                (Interaction::None, None) => {
+                    *material = button_materials.normal.clone();
                 }
             }
         }
@@ -395,13 +409,13 @@ mod menu {
         mut commands: Commands,
         mut setting: ResMut<T>,
     ) {
-        for (interaction, quality, entity) in interaction_query.iter() {
-            if *interaction == Interaction::Clicked && *setting != *quality {
+        for (interaction, button_setting, entity) in interaction_query.iter() {
+            if *interaction == Interaction::Clicked && *setting != *button_setting {
                 let (previous_button, mut previous_material) = selected_query.single_mut();
                 *previous_material = button_materials.normal.clone();
                 commands.entity(previous_button).remove::<SelectedOption>();
                 commands.entity(entity).insert(SelectedOption);
-                *setting = *quality;
+                *setting = *button_setting;
             }
         }
     }

From c412d0e7076d3a35f3f24c442f7adf05190a018a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Mockers?= <mockersf@gmail.com>
Date: Thu, 21 Oct 2021 02:39:32 +0200
Subject: [PATCH 17/18] style improvement

Co-Authored-By: Jerome Humbert <6532395+djeedai@users.noreply.github.com>
---
 examples/game/game_menu.rs | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 54dbad7c82ed3..5c689781c71f4 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -382,20 +382,12 @@ mod menu {
         >,
     ) {
         for (interaction, mut material, selected) in interaction_query.iter_mut() {
-            match (*interaction, selected) {
-                (Interaction::Clicked, _) => *material = button_materials.pressed.clone(),
-                (Interaction::Hovered, Some(_)) => {
-                    *material = button_materials.hovered_pressed.clone()
-                }
-                (Interaction::Hovered, None) => {
-                    *material = button_materials.hovered.clone();
-                }
-                (Interaction::None, Some(_)) => {
-                    *material = button_materials.pressed.clone();
-                }
-                (Interaction::None, None) => {
-                    *material = button_materials.normal.clone();
-                }
+            *material = match (*interaction, selected) {
+                (Interaction::Clicked, _) => button_materials.pressed.clone(),
+                (Interaction::Hovered, Some(_)) => button_materials.hovered_pressed.clone(),
+                (Interaction::Hovered, None) => button_materials.hovered.clone(),
+                (Interaction::None, Some(_)) => button_materials.pressed.clone(),
+                (Interaction::None, None) => button_materials.normal.clone(),
             }
         }
     }

From ba1e2b006b3ad9382b023e6de236ab0f302a5c59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois?= <8672791+mockersf@users.noreply.github.com>
Date: Tue, 14 Dec 2021 14:48:22 +0100
Subject: [PATCH 18/18] update for new UI

---
 examples/game/game_menu.rs | 121 ++++++++++++-------------------------
 1 file changed, 40 insertions(+), 81 deletions(-)

diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
index 5c689781c71f4..8bc0a155b31f5 100644
--- a/examples/game/game_menu.rs
+++ b/examples/game/game_menu.rs
@@ -78,11 +78,7 @@ mod splash {
     // Newtype to use a `Timer` for this screen as a resource
     struct SplashTimer(Timer);
 
-    fn splash_setup(
-        mut commands: Commands,
-        asset_server: Res<AssetServer>,
-        mut materials: ResMut<Assets<ColorMaterial>>,
-    ) {
+    fn splash_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         let icon = asset_server.load("branding/icon.png");
         // Display the logo
         commands
@@ -94,7 +90,7 @@ mod splash {
                     size: Size::new(Val::Px(200.0), Val::Auto),
                     ..Default::default()
                 },
-                material: materials.add(icon.into()),
+                image: UiImage(icon),
                 ..Default::default()
             })
             .insert(OnSplashScreen);
@@ -142,7 +138,6 @@ mod game {
     fn game_setup(
         mut commands: Commands,
         asset_server: Res<AssetServer>,
-        mut materials: ResMut<Assets<ColorMaterial>>,
         display_quality: Res<DisplayQuality>,
         volume: Res<Volume>,
     ) {
@@ -163,7 +158,7 @@ mod game {
                     align_items: AlignItems::Center,
                     ..Default::default()
                 },
-                material: materials.add(Color::BLACK.into()),
+                color: Color::BLACK.into(),
                 ..Default::default()
             })
             .insert(OnGameScreen)
@@ -251,7 +246,7 @@ mod menu {
 
     impl Plugin for MenuPlugin {
         fn build(&self, app: &mut bevy::prelude::App) {
-            app.init_resource::<ButtonMaterials>()
+            app
                 // At start, the menu is not enabled. This will be changed in `menu_setup` when
                 // entering the `GameState::Menu` state.
                 // Current screen in the menu is handled by an independent state from `GameState`
@@ -332,26 +327,10 @@ mod menu {
     #[derive(Component)]
     struct OnSoundSettingsMenuScreen;
 
-    // Helper struct used as a resource that will hold the different materials for the buttons.
-    // It will be created from its `FromWorld` implementation when added to the application.
-    struct ButtonMaterials {
-        normal: Handle<ColorMaterial>,
-        hovered: Handle<ColorMaterial>,
-        hovered_pressed: Handle<ColorMaterial>,
-        pressed: Handle<ColorMaterial>,
-    }
-
-    impl FromWorld for ButtonMaterials {
-        fn from_world(world: &mut World) -> Self {
-            let mut materials = world.get_resource_mut::<Assets<ColorMaterial>>().unwrap();
-            ButtonMaterials {
-                normal: materials.add(Color::rgb(0.15, 0.15, 0.15).into()),
-                hovered: materials.add(Color::rgb(0.25, 0.25, 0.25).into()),
-                hovered_pressed: materials.add(Color::rgb(0.25, 0.65, 0.25).into()),
-                pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()),
-            }
-        }
-    }
+    const NORMAL_BUTTON: Color = Color::rgb(0.15, 0.15, 0.15);
+    const HOVERED_BUTTON: Color = Color::rgb(0.25, 0.25, 0.25);
+    const HOVERED_PRESSED_BUTTON: Color = Color::rgb(0.25, 0.65, 0.25);
+    const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
 
     // Tag component used to mark wich setting is currently selected
     #[derive(Component)]
@@ -371,23 +350,18 @@ mod menu {
 
     // This system handles changing all buttons color based on mouse interaction
     fn button_system(
-        button_materials: Res<ButtonMaterials>,
         mut interaction_query: Query<
-            (
-                &Interaction,
-                &mut Handle<ColorMaterial>,
-                Option<&SelectedOption>,
-            ),
+            (&Interaction, &mut UiColor, Option<&SelectedOption>),
             (Changed<Interaction>, With<Button>),
         >,
     ) {
-        for (interaction, mut material, selected) in interaction_query.iter_mut() {
-            *material = match (*interaction, selected) {
-                (Interaction::Clicked, _) => button_materials.pressed.clone(),
-                (Interaction::Hovered, Some(_)) => button_materials.hovered_pressed.clone(),
-                (Interaction::Hovered, None) => button_materials.hovered.clone(),
-                (Interaction::None, Some(_)) => button_materials.pressed.clone(),
-                (Interaction::None, None) => button_materials.normal.clone(),
+        for (interaction, mut color, selected) in interaction_query.iter_mut() {
+            *color = match (*interaction, selected) {
+                (Interaction::Clicked, _) => PRESSED_BUTTON.into(),
+                (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
+                (Interaction::Hovered, None) => HOVERED_BUTTON.into(),
+                (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
+                (Interaction::None, None) => NORMAL_BUTTON.into(),
             }
         }
     }
@@ -395,16 +369,15 @@ mod menu {
     // This system updates the settings when a new value for a setting is selected, and marks
     // the button as the one currently selected
     fn setting_button<T: Component + PartialEq + Copy>(
-        button_materials: Res<ButtonMaterials>,
         interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
-        mut selected_query: Query<(Entity, &mut Handle<ColorMaterial>), With<SelectedOption>>,
+        mut selected_query: Query<(Entity, &mut UiColor), With<SelectedOption>>,
         mut commands: Commands,
         mut setting: ResMut<T>,
     ) {
         for (interaction, button_setting, entity) in interaction_query.iter() {
             if *interaction == Interaction::Clicked && *setting != *button_setting {
-                let (previous_button, mut previous_material) = selected_query.single_mut();
-                *previous_material = button_materials.normal.clone();
+                let (previous_button, mut previous_color) = selected_query.single_mut();
+                *previous_color = NORMAL_BUTTON.into();
                 commands.entity(previous_button).remove::<SelectedOption>();
                 commands.entity(entity).insert(SelectedOption);
                 *setting = *button_setting;
@@ -416,12 +389,7 @@ mod menu {
         let _ = menu_state.set(MenuState::Main);
     }
 
-    fn main_menu_setup(
-        mut commands: Commands,
-        asset_server: Res<AssetServer>,
-        button_materials: Res<ButtonMaterials>,
-        mut materials: ResMut<Assets<ColorMaterial>>,
-    ) {
+    fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
         // Common style for all buttons on the screen
         let button_style = Style {
@@ -458,7 +426,7 @@ mod menu {
                     align_items: AlignItems::Center,
                     ..Default::default()
                 },
-                material: materials.add(Color::CRIMSON.into()),
+                color: Color::CRIMSON.into(),
                 ..Default::default()
             })
             .insert(OnMainMenuScreen)
@@ -488,7 +456,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style.clone(),
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::Play)
@@ -496,7 +464,7 @@ mod menu {
                         let icon = asset_server.load("textures/Game Icons/right.png");
                         parent.spawn_bundle(ImageBundle {
                             style: button_icon_style.clone(),
-                            material: materials.add(icon.into()),
+                            image: UiImage(icon),
                             ..Default::default()
                         });
                         parent.spawn_bundle(TextBundle {
@@ -511,7 +479,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style.clone(),
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::Settings)
@@ -519,7 +487,7 @@ mod menu {
                         let icon = asset_server.load("textures/Game Icons/wrench.png");
                         parent.spawn_bundle(ImageBundle {
                             style: button_icon_style.clone(),
-                            material: materials.add(icon.into()),
+                            image: UiImage(icon),
                             ..Default::default()
                         });
                         parent.spawn_bundle(TextBundle {
@@ -534,7 +502,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::Quit)
@@ -542,7 +510,7 @@ mod menu {
                         let icon = asset_server.load("textures/Game Icons/exitRight.png");
                         parent.spawn_bundle(ImageBundle {
                             style: button_icon_style,
-                            material: materials.add(icon.into()),
+                            image: UiImage(icon),
                             ..Default::default()
                         });
                         parent.spawn_bundle(TextBundle {
@@ -553,12 +521,7 @@ mod menu {
             });
     }
 
-    fn settings_menu_setup(
-        mut commands: Commands,
-        asset_server: Res<AssetServer>,
-        button_materials: Res<ButtonMaterials>,
-        mut materials: ResMut<Assets<ColorMaterial>>,
-    ) {
+    fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
             margin: Rect::all(Val::Px(20.0)),
@@ -580,7 +543,7 @@ mod menu {
                     align_items: AlignItems::Center,
                     ..Default::default()
                 },
-                material: materials.add(Color::CRIMSON.into()),
+                color: Color::CRIMSON.into(),
                 ..Default::default()
             })
             .insert(OnSettingsMenuScreen)
@@ -589,7 +552,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style.clone(),
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::SettingsDisplay)
@@ -606,7 +569,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style.clone(),
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::SettingsSound)
@@ -624,7 +587,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::BackToMainMenu)
@@ -640,8 +603,6 @@ mod menu {
     fn display_settings_menu_setup(
         mut commands: Commands,
         asset_server: Res<AssetServer>,
-        button_materials: Res<ButtonMaterials>,
-        mut materials: ResMut<Assets<ColorMaterial>>,
         display_quality: Res<DisplayQuality>,
     ) {
         let button_style = Style {
@@ -665,7 +626,7 @@ mod menu {
                     align_items: AlignItems::Center,
                     ..Default::default()
                 },
-                material: materials.add(Color::CRIMSON.into()),
+                color: Color::CRIMSON.into(),
                 ..Default::default()
             })
             .insert(OnDisplaySettingsMenuScreen)
@@ -678,7 +639,7 @@ mod menu {
                             align_items: AlignItems::Center,
                             ..Default::default()
                         },
-                        material: materials.add(Color::CRIMSON.into()),
+                        color: Color::CRIMSON.into(),
                         ..Default::default()
                     })
                     .with_children(|parent| {
@@ -702,7 +663,7 @@ mod menu {
                                     size: Size::new(Val::Px(150.0), Val::Px(65.0)),
                                     ..button_style.clone()
                                 },
-                                material: button_materials.normal.clone(),
+                                color: NORMAL_BUTTON.into(),
                                 ..Default::default()
                             });
                             entity.insert(quality_setting).with_children(|parent| {
@@ -724,7 +685,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::BackToSettings)
@@ -740,8 +701,6 @@ mod menu {
     fn sound_settings_menu_setup(
         mut commands: Commands,
         asset_server: Res<AssetServer>,
-        button_materials: Res<ButtonMaterials>,
-        mut materials: ResMut<Assets<ColorMaterial>>,
         volume: Res<Volume>,
     ) {
         let button_style = Style {
@@ -765,7 +724,7 @@ mod menu {
                     align_items: AlignItems::Center,
                     ..Default::default()
                 },
-                material: materials.add(Color::CRIMSON.into()),
+                color: Color::CRIMSON.into(),
                 ..Default::default()
             })
             .insert(OnSoundSettingsMenuScreen)
@@ -776,7 +735,7 @@ mod menu {
                             align_items: AlignItems::Center,
                             ..Default::default()
                         },
-                        material: materials.add(Color::CRIMSON.into()),
+                        color: Color::CRIMSON.into(),
                         ..Default::default()
                     })
                     .with_children(|parent| {
@@ -794,7 +753,7 @@ mod menu {
                                     size: Size::new(Val::Px(30.0), Val::Px(65.0)),
                                     ..button_style.clone()
                                 },
-                                material: button_materials.normal.clone(),
+                                color: NORMAL_BUTTON.into(),
                                 ..Default::default()
                             });
                             entity.insert(Volume(volume_setting));
@@ -806,7 +765,7 @@ mod menu {
                 parent
                     .spawn_bundle(ButtonBundle {
                         style: button_style,
-                        material: button_materials.normal.clone(),
+                        color: NORMAL_BUTTON.into(),
                         ..Default::default()
                     })
                     .insert(MenuButtonAction::BackToSettings)