Generalisation of OnExit/OnEnter behaviour

[Guelakais]

That's my current code:

use bevy::{
    DefaultPlugins,
    app::{App, Startup, Update},
    color::{
        Color, Srgba,
        palettes::basic::{AQUA, BLACK, BLUE, FUCHSIA, MAROON, RED, SILVER, TEAL},
    },
    core_pipeline::core_2d::Camera2d,
    dev_tools::states::log_transitions,
    ecs::{
        change_detection::ResMut,
        component::Component,
        prelude::{Changed, Commands, Query, With, Without},
    },
    prelude::{
        AlignItems, AppExtStates, BackgroundColor, BorderColor, BorderRadius, BoxShadowSamples,
        Bundle, Button, Entity, Interaction, IsDefaultUiCamera, JustifyContent, NextState, Node,
        OnEnter, OnExit, Resource, SpawnRelated, States, Text, UiRect, Val, children, default,
    },
};
use strum::{Display, EnumIter, IntoEnumIterator};

const NORMAL_BUTTON: Color = Color::Srgba(Srgba::BLUE);
const HOVERED_BUTTON: Color = Color::Srgba(Srgba::RED);
const PRESSED_BUTTON: Color = Color::Srgba(Srgba::BLACK);
#[derive(Component)]
struct MenuData;
#[derive(Default, Debug, EnumIter, Component, Display, Eq, PartialEq, Hash, States, Clone)]
enum Buttons {
    #[default]
    Home,
    Settings,
    Projects,
    About,
    Credits,
    Quit,
}
impl Buttons {
    fn button_color(&self) -> BackgroundColor {
        match *self {
            Buttons::Home => BackgroundColor(TEAL.into()),
            Buttons::Settings => BackgroundColor(AQUA.into()),
            Buttons::Projects => BackgroundColor(FUCHSIA.into()),
            Buttons::About => BackgroundColor(MAROON.into()),
            Buttons::Credits => BackgroundColor(SILVER.into()),
            Buttons::Quit => BackgroundColor(BLACK.into()),
        }
    }
}

#[derive(Debug, EnumIter, Component, Display, States, Clone, Eq, Hash, PartialEq, Default)]
enum MenuState {
    #[default]
    Main,
    Settings,
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .init_state::<MenuState>()
        .init_state::<Buttons>()
        .add_systems(Startup, setup_camera)
        .add_systems(OnEnter(MenuState::Main), setup_window)
        .add_systems(OnEnter(Buttons::Home), home_window)
        .add_systems(OnEnter(Buttons::Settings), settings_window)
        .add_systems(OnEnter(Buttons::Projects), project_window)
        .add_systems(OnEnter(Buttons::About), about_window)
        .add_systems(OnEnter(Buttons::Credits), credits_window)
        .add_systems(OnEnter(Buttons::Quit), despawn_screen::<Node, MenuData>)
        .add_systems(OnExit(Buttons::Home), despawn_screen::<Buttons, MenuState>)
        .add_systems(
            OnExit(Buttons::Settings),
            despawn_screen::<Buttons, MenuState>,
        )
        .add_systems(
            OnExit(Buttons::Credits),
            despawn_screen::<Buttons, MenuState>,
        )
        .add_systems(
            OnExit(Buttons::Projects),
            despawn_screen::<Buttons, MenuState>,
        )
        .add_systems(OnExit(Buttons::About), despawn_screen::<Buttons, MenuState>)
        .add_systems(
            Update,
            (
                button_system,
                log_transitions::<Buttons>,
                log_transitions::<MenuState>,
            ),
        )
        .run();
}

fn setup_camera(mut commands: Commands) {
    commands.spawn((Camera2d, IsDefaultUiCamera, BoxShadowSamples(6)));
}
fn setup_window(mut commands: Commands) {
    commands
        .spawn((
            Node {
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                width: Val::Percent(100.0),
                column_gap: Val::Px(60.),
                padding: UiRect::vertical(Val::Px(10.)),
                ..default()
            },
            BackgroundColor(Srgba::GREEN.into()),
        ))
        .with_children(|parent| {
            // Spawn three pill-shaped buttons
            Buttons::iter().for_each(|button_name| {
                parent.spawn((
                    Button,
                    Node {
                        height: Val::Px(30.0),
                        width: Val::Px(120.0),
                        align_items: AlignItems::Center,
                        justify_content: JustifyContent::Center,
                        ..default()
                    },
                    children![Text::new(format!("{button_name}"))],
                    BorderRadius::new(
                        Val::Percent(20.),
                        Val::Percent(20.),
                        Val::Percent(20.),
                        Val::Percent(20.),
                    ),
                    button_name,
                    MenuState::Main,
                ));
            });
        });
}
fn dummy_window(button_name: Buttons) -> impl Bundle {
    (
        Node {
            height: Val::Percent(90.0),
            width: Val::Percent(90.0),
            left: Val::Percent(5.),
            top: Val::Percent(8.),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            ..default()
        },
        button_name.button_color(),
        button_name,
    )
}

fn credits_window(mut commands: Commands) {
    commands.spawn(dummy_window(Buttons::Credits));
}
fn about_window(mut commands: Commands) {
    commands.spawn(dummy_window(Buttons::About));
}
fn project_window(mut commands: Commands) {
    commands.spawn(dummy_window(Buttons::Projects));
}
fn settings_window(mut commands: Commands) {
    commands.spawn(dummy_window(Buttons::Settings));
}
fn home_window(mut commands: Commands) {
    commands.spawn(dummy_window(Buttons::Home));
}
fn button_system(
    mut next_state: ResMut<NextState<Buttons>>,
    interaction_query: Query<
        (
            &Interaction,
            &mut BackgroundColor,
            &mut BorderColor,
            &Buttons,
        ),
        (Changed<Interaction>, With<Button>),
    >,
) {
    interaction_query.into_iter().for_each(
        |(interaction, mut color, mut border_color, button_name)| match *interaction {
            Interaction::Pressed => {
                *color = PRESSED_BUTTON.into();
                border_color.0 = RED.into();
                next_state.set(button_name.clone());
            }
            Interaction::Hovered => {
                *color = HOVERED_BUTTON.into();
                border_color.0 = Color::WHITE;
            }
            Interaction::None => {
                *color = NORMAL_BUTTON.into();
                border_color.0 = BLUE.into();
            }
        },
    );
}

// Generic system that takes a component as a parameter, and will despawn all entities with that component
fn despawn_screen<T: Component, U: Component>(
    to_despawn: Query<Entity, (With<T>, Without<U>)>,
    mut commands: Commands,
) {
    to_despawn.into_iter().for_each(|entity| {
        commands.entity(entity).despawn();
    });
}

As you can see, the code above uses a lot of OnEnter() and OnExit() methods to switch through the individual submenus. In principle, the behaviour to be achieved is quite simple: you want to enter a submenu -> you leave the existing one. At the same time, the basic structure of all submenus is comparable. Is there a way to generalise this so that fewer systems or fewer OnEnter() or OnExit() methods have to be written?

[Henauxg]

To improve your usage of OnExit, you could use StateScoped on your entities. This would automatically cleanup your entities when leaving a specific state.
As an example:

fn dummy_window(button_name: Buttons) -> impl Bundle {
    (
        StateScoped(button_name),
        Node {
            // ...
            ..default()
        },
        // ...
    )
}

The entity spawned with this would be de-spawned automatically when leaving the state button_name (which is a bit weird as a state name by the way)

[Henauxg]

For the OnEnter bahaviors, you could use generics to simplify your current code, but I would suspect that as your project grows, you will need to have custom behaviors on such OnEnter systems.
One thing that can help with organization of such states/systems is to architect your code into many plugins. A very good example of that can be found in the bevy_new_2d repository. See their Screen enum which is similar to your Buttons and how they split their functionnalitites in multiple modules with each its own plugin function handling OnEnter/OnExit behaviors.