From d9a1c9c2a71243eb899dae789392b46fa612f3da Mon Sep 17 00:00:00 2001
From: demenik <dominik.bernroider@icloud.com>
Date: Tue, 9 Dec 2025 13:21:51 +0100
Subject: [PATCH] feat: Replace old popup with new UI element

---
 src/features/hud/components.rs         |   1 -
 src/features/hud/mod.rs                |  28 +---
 src/features/inventory/components.rs   |   1 -
 src/features/inventory/mod.rs          |  28 +---
 src/features/inventory/ui/inventory.rs |  75 +++-------
 src/features/savegame/components.rs    |   1 -
 src/features/savegame/mod.rs           |  17 +--
 src/features/savegame/ui/load.rs       | 189 ++++++++++---------------
 src/features/shop/components.rs        |   2 -
 src/features/shop/mod.rs               |  27 +---
 src/features/shop/ui/shop.rs           |  68 +++------
 11 files changed, 115 insertions(+), 322 deletions(-)

diff --git a/src/features/hud/components.rs b/src/features/hud/components.rs
index 6d93783..9de7636 100644
--- a/src/features/hud/components.rs
+++ b/src/features/hud/components.rs
@@ -15,7 +15,6 @@ pub enum TextType {
 #[derive(Component)]
 pub enum ButtonType {
     SettingsOpen,
-    SettingsClose,
     SettingsExit,
     SettingsSave,
     SettingsTimerChange {
diff --git a/src/features/hud/mod.rs b/src/features/hud/mod.rs
index 4d358dd..4661850 100644
--- a/src/features/hud/mod.rs
+++ b/src/features/hud/mod.rs
@@ -1,6 +1,5 @@
 use crate::features::phase::components::TimerSettings;
 use crate::features::savegame::messages::SavegameDumpMessage;
-use crate::features::ui::messages::ClosePopupMessage;
 use crate::features::{inventory, shop};
 use crate::prelude::*;
 use components::*;
@@ -17,27 +16,11 @@ impl Plugin for HudPlugin {
         app.add_systems(OnExit(AppState::GameScreen), cleanup);
         app.add_systems(
             Update,
-            (update_status, buttons, update_timer_settings, close_popup)
-                .run_if(in_state(AppState::GameScreen)),
+            (update_status, buttons, update_timer_settings).run_if(in_state(AppState::GameScreen)),
         );
     }
 }
 
-fn close_popup(
-    mut commands: Commands,
-    mut close_popup_reader: MessageReader<ClosePopupMessage>,
-    root_query: Query<(Entity, &RootMarker)>,
-) {
-    for _ in close_popup_reader.read() {
-        for (entity, root) in root_query.iter() {
-            match *root {
-                RootMarker::Settings => commands.entity(entity).despawn(),
-                _ => {}
-            }
-        }
-    }
-}
-
 fn setup(mut commands: Commands) {
     commands.spawn((
         RootMarker::Status,
@@ -106,7 +89,6 @@ fn update_status(phase_res: Res<CurrentPhase>, mut text_query: Query<(&mut Text,
 fn buttons(
     mut commands: Commands,
     mut interaction_query: Query<(&Interaction, &ButtonType), (Changed<Interaction>, With<Button>)>,
-    root_query: Query<(Entity, &RootMarker)>,
     mut savegame_messages: MessageWriter<SavegameDumpMessage>,
     mut next_state: ResMut<NextState<AppState>>,
     mut timer_settings: ResMut<TimerSettings>,
@@ -117,14 +99,6 @@ fn buttons(
                 ButtonType::SettingsOpen => {
                     open_settings(&mut commands);
                 }
-                ButtonType::SettingsClose => {
-                    for (entity, root) in root_query.iter() {
-                        match *root {
-                            RootMarker::Settings => commands.entity(entity).despawn(),
-                            _ => {}
-                        }
-                    }
-                }
                 ButtonType::SettingsExit => {
                     savegame_messages.write(SavegameDumpMessage);
                     next_state.set(AppState::StartScreen);
diff --git a/src/features/inventory/components.rs b/src/features/inventory/components.rs
index b5889bc..6185bac 100644
--- a/src/features/inventory/components.rs
+++ b/src/features/inventory/components.rs
@@ -199,5 +199,4 @@ pub enum RootMarker {
 #[derive(Component)]
 pub enum ButtonType {
     InventoryOpen,
-    InventoryClose,
 }
diff --git a/src/features/inventory/mod.rs b/src/features/inventory/mod.rs
index bfdaf76..55c8811 100644
--- a/src/features/inventory/mod.rs
+++ b/src/features/inventory/mod.rs
@@ -1,4 +1,3 @@
-use crate::features::ui::messages::ClosePopupMessage;
 use crate::{features::inventory::ui::open_inventory, prelude::*};
 use components::*;
 
@@ -11,35 +10,17 @@ impl Plugin for InventoryPlugin {
     fn build(&self, app: &mut App) {
         app.init_resource::<Inventory>();
 
-        app.add_systems(
-            Update,
-            (buttons, close_popup).run_if(in_state(AppState::GameScreen)),
-        );
+        app.add_systems(Update, buttons.run_if(in_state(AppState::GameScreen)));
 
         #[cfg(debug_assertions)]
         app.add_systems(Update, debug_modify_berries);
     }
 }
 
-fn close_popup(
-    mut commands: Commands,
-    mut close_popup_reader: MessageReader<ClosePopupMessage>,
-    root_query: Query<(Entity, &RootMarker)>,
-) {
-    for _ in close_popup_reader.read() {
-        for (entity, root) in root_query.iter() {
-            match *root {
-                RootMarker::Inventory => commands.entity(entity).despawn(),
-            }
-        }
-    }
-}
-
 fn buttons(
     mut commands: Commands,
     mut interaction_query: Query<(&Interaction, &ButtonType), (Changed<Interaction>, With<Button>)>,
     itemstack_query: Query<&ItemStack>,
-    root_query: Query<(Entity, &RootMarker)>,
     game_config: Res<GameConfig>,
     asset_server: Res<AssetServer>,
 ) {
@@ -49,13 +30,6 @@ fn buttons(
                 ButtonType::InventoryOpen => {
                     open_inventory(&mut commands, itemstack_query, &game_config, &asset_server);
                 }
-                ButtonType::InventoryClose => {
-                    for (entity, root) in root_query.iter() {
-                        match *root {
-                            RootMarker::Inventory => commands.entity(entity).despawn(),
-                        }
-                    }
-                }
             },
             _ => {}
         }
diff --git a/src/features/inventory/ui/inventory.rs b/src/features/inventory/ui/inventory.rs
index f045e65..d98ce79 100644
--- a/src/features/inventory/ui/inventory.rs
+++ b/src/features/inventory/ui/inventory.rs
@@ -1,4 +1,4 @@
-use super::super::components::{ButtonType, RootMarker};
+use super::super::components::RootMarker;
 use crate::prelude::GameConfig;
 use crate::{features::inventory::ui::list_itemstack, prelude::*};
 
@@ -8,63 +8,26 @@ pub fn open_inventory(
     game_config: &Res<GameConfig>,
     asset_server: &Res<AssetServer>,
 ) {
-    commands
-        .spawn((
-            RootMarker::Inventory,
-            Node {
-                position_type: PositionType::Absolute,
-                width: percent(100),
-                height: percent(100),
-                ..Node::center()
-            },
-            ZIndex(1),
-            BackgroundColor(Color::srgba(0.0, 0.0, 0.0, 0.8)),
-            GlobalTransform::default(),
-        ))
-        .with_children(|parent| {
+    spawn_popup(
+        commands,
+        RootMarker::Inventory,
+        "Inventar",
+        Node::default(),
+        |parent| {
             parent
-                .spawn((
-                    Node {
-                        padding: UiRect::all(px(20.0)),
-                        ..Node::vstack(px(0))
-                    },
-                    BackgroundColor(Color::srgb(0.2, 0.2, 0.2)),
-                    BorderRadius::all(px(10.0)),
-                ))
+                .spawn(Node {
+                    width: percent(100),
+                    margin: UiRect::top(px(10.0)),
+                    ..Node::vstack(px(10))
+                })
                 .with_children(|parent| {
-                    parent.spawn((
-                        Node {
-                            width: percent(100.0),
-                            justify_content: JustifyContent::SpaceBetween,
-                            margin: UiRect::bottom(px(20.0)),
-                            ..Node::hstack(px(20))
-                        },
-                        children![
-                            text("Inventar", 40.0, Color::WHITE),
-                            pill_button(
-                                ButtonType::InventoryClose,
-                                ButtonVariant::Destructive,
-                                Node {
-                                    width: px(40),
-                                    height: px(40),
-                                    ..default()
-                                },
-                                |color| text("X", 24.0, color)
-                            ),
-                        ],
-                    ));
-
-                    parent
-                        .spawn(Node {
-                            width: percent(100),
-                            margin: UiRect::top(px(10.0)),
-                            ..Node::vstack(px(10))
-                        })
-                        .with_children(|parent| {
-                            for itemstack in items.iter() {
-                                parent.spawn(list_itemstack(itemstack, game_config, asset_server));
-                            }
+                    items
+                        .iter()
+                        .map(|item| list_itemstack(item, game_config, asset_server))
+                        .for_each(|itemstack| {
+                            parent.spawn(itemstack);
                         });
                 });
-        });
+        },
+    );
 }
diff --git a/src/features/savegame/components.rs b/src/features/savegame/components.rs
index c167311..456bfff 100644
--- a/src/features/savegame/components.rs
+++ b/src/features/savegame/components.rs
@@ -102,5 +102,4 @@ pub enum RootMarker {
 pub enum ButtonType {
     SavegameLoad { savegame_path: SavegamePath },
     SavegameDelete { savegame_path: SavegamePath },
-    PopupClose,
 }
diff --git a/src/features/savegame/mod.rs b/src/features/savegame/mod.rs
index bd65833..61b97e4 100644
--- a/src/features/savegame/mod.rs
+++ b/src/features/savegame/mod.rs
@@ -1,6 +1,5 @@
 use crate::features::phase::components::{SessionTracker, TimerSettings};
 use crate::features::savegame::ui::load_popup_handler;
-use crate::features::ui::messages::ClosePopupMessage;
 use crate::prelude::*;
 use components::*;
 use messages::*;
@@ -21,21 +20,7 @@ impl Plugin for SavegamePlugin {
         app.add_systems(Update, dump_savegame.run_if(in_state(AppState::GameScreen)));
         app.add_systems(Update, load_savegame.run_if(in_state(AppState::GameScreen)));
 
-        app.add_systems(Update, (load_popup_handler, close_popup));
-    }
-}
-
-fn close_popup(
-    mut commands: Commands,
-    mut close_popup_reader: MessageReader<ClosePopupMessage>,
-    root_query: Query<(Entity, &RootMarker)>,
-) {
-    for _ in close_popup_reader.read() {
-        for (entity, root) in root_query.iter() {
-            match *root {
-                RootMarker::PopupSavegameLoad => commands.entity(entity).despawn(),
-            }
-        }
+        app.add_systems(Update, load_popup_handler);
     }
 }
 
diff --git a/src/features/savegame/ui/load.rs b/src/features/savegame/ui/load.rs
index 2a111c4..729cea4 100644
--- a/src/features/savegame/ui/load.rs
+++ b/src/features/savegame/ui/load.rs
@@ -2,126 +2,90 @@ use super::super::components::{ButtonType, RootMarker};
 use crate::{features::savegame::messages::SavegameLoadMessage, prelude::*};
 
 pub fn spawn_load_popup(commands: &mut Commands) {
-    commands
-        .spawn((
-            RootMarker::PopupSavegameLoad,
-            Node {
-                position_type: PositionType::Absolute,
-                width: percent(100),
-                height: percent(100),
-                ..Node::center()
-            },
-            ZIndex(1),
-            BackgroundColor(Color::srgba(0.0, 0.0, 0.0, 0.8)),
-            GlobalTransform::default(),
-        ))
-        .with_children(|parent| {
+    spawn_popup(
+        commands,
+        RootMarker::PopupSavegameLoad,
+        "Spielstand wählen",
+        Node {
+            width: px(600),
+            height: px(500),
+            ..default()
+        },
+        |parent| {
             parent
-                .spawn((
-                    Node {
-                        width: px(600.0),
-                        height: px(500.0),
-                        padding: UiRect::all(px(20.0)),
-                        align_items: AlignItems::Center,
-                        ..Node::vstack(px(10))
-                    },
-                    BackgroundColor(Color::srgb(0.2, 0.2, 0.2)),
-                    BorderRadius::all(px(10.0)),
-                ))
+                .spawn(Node {
+                    width: percent(100),
+                    flex_direction: FlexDirection::Column,
+                    overflow: Overflow::scroll_y(),
+                    padding: UiRect::all(px(10)),
+                    row_gap: px(10),
+                    ..default()
+                })
                 .with_children(|parent| {
-                    parent.spawn((
-                        Node {
-                            width: percent(100.0),
-                            justify_content: JustifyContent::SpaceBetween,
-                            align_items: AlignItems::Center,
-                            margin: UiRect::bottom(px(20.0)),
-                            ..default()
-                        },
-                        children![
-                            text("Spielstand Auswahl", 40.0, Color::WHITE),
-                            pill_button(
-                                ButtonType::PopupClose,
-                                ButtonVariant::Destructive,
-                                Node {
-                                    width: px(40),
-                                    height: px(40),
-                                    ..default()
-                                },
-                                |color| text("X", 24.0, color)
-                            )
-                        ],
-                    ));
-
-                    parent
-                        .spawn(Node {
-                            width: percent(100),
-                            flex_direction: FlexDirection::Column,
-                            overflow: Overflow::scroll_y(),
-                            margin: UiRect::all(px(20.0)),
-                            row_gap: px(10.0),
-                            ..default()
-                        })
-                        .with_children(|parent| {
-                            for savegame in SavegamePath::list() {
-                                parent.spawn(
-                                    button(
-                                        ButtonType::SavegameLoad { savegame_path: savegame.path.clone() },
-                                        ButtonVariant::Secondary,
-                                        Node {
-                                            width: percent(100),
-                                            padding: UiRect::all(px(10)),
-                                            ..Node::center()
-                                        },
-                                        |color| (
+                    for savegame in SavegamePath::list() {
+                        parent.spawn(button(
+                            ButtonType::SavegameLoad {
+                                savegame_path: savegame.path.clone(),
+                            },
+                            ButtonVariant::Secondary,
+                            Node {
+                                width: percent(100),
+                                padding: UiRect::all(px(10)),
+                                ..Node::center()
+                            },
+                            |color| {
+                                (
+                                    Node {
+                                        width: percent(100),
+                                        align_items: AlignItems::Center,
+                                        ..Node::hstack(px(10))
+                                    },
+                                    children![
+                                        (
                                             Node {
                                                 width: percent(100),
-                                                align_items: AlignItems::Center,
-                                                ..Node::hstack(px(10))
+                                                height: percent(100),
+                                                flex_direction: FlexDirection::Column,
+                                                justify_content: JustifyContent::Center,
+                                                ..default()
                                             },
-                                            children![(
-                                                Node {
-                                                    width: percent(100),
-                                                    height: percent(100),
-                                                    flex_direction: FlexDirection::Column,
-                                                    justify_content: JustifyContent::Center,
-                                                    ..default()
-                                                },
-                                                children![
-                                                    text(
-                                                        format!("Spielstand {}", savegame.index + 1),
-                                                        24.0,
-                                                        color
+                                            children![
+                                                text(
+                                                    format!("Spielstand {}", savegame.index + 1),
+                                                    24.0,
+                                                    color
+                                                ),
+                                                text(
+                                                    format!(
+                                                        "Beeren: {}, Fokusphasen abgeschlossen: {}",
+                                                        savegame.total_berries,
+                                                        savegame.completed_focus
                                                     ),
-                                                    text(
-                                                        format!(
-                                                            "Beeren: {}, Fokusphasen abgeschlossen: {}",
-                                                            savegame.total_berries,
-                                                            savegame.completed_focus
-                                                        ),
-                                                        18.0,
-                                                        Color::WHITE,
-                                                    ),
-                                                ]
-                                            ),
-                                            pill_button(
-                                                ButtonType::SavegameDelete {
-                                                    savegame_path: savegame.path.clone()
-                                                },
-                                                ButtonVariant::Destructive,
-                                                Node {
-                                                    width: px(40),
-                                                    height: px(40),
-                                                    ..default()
-                                                },
-                                                |color| text("X", 24.0, color)
-                                            )]
+                                                    18.0,
+                                                    Color::WHITE,
+                                                ),
+                                            ]
+                                        ),
+                                        pill_button(
+                                            ButtonType::SavegameDelete {
+                                                savegame_path: savegame.path.clone()
+                                            },
+                                            ButtonVariant::Destructive,
+                                            Node {
+                                                width: px(40),
+                                                height: px(40),
+                                                ..default()
+                                            },
+                                            |color| text("X", 24.0, color)
                                         )
-                                    ),
-                                );
-                            }
-                        });
+                                    ],
+                                )
+                            },
+                        ));
+                    }
                 });
-        });
+        },
+    );
 }
 
 pub fn load_popup_handler(
@@ -135,7 +99,6 @@ pub fn load_popup_handler(
         match *interaction {
             Interaction::Pressed => {
                 match button_type {
-                    ButtonType::PopupClose => {}
                     ButtonType::SavegameLoad { savegame_path } => {
                         commands.insert_resource(savegame_path.clone());
                         next_state.set(AppState::GameScreen);
diff --git a/src/features/shop/components.rs b/src/features/shop/components.rs
index 3ef70b0..d479bbd 100644
--- a/src/features/shop/components.rs
+++ b/src/features/shop/components.rs
@@ -8,7 +8,6 @@ pub enum RootMarker {
 #[derive(Component)]
 pub enum ButtonType {
     ShopOpen,
-    ShopClose,
     ShopBuyItem(ShopOffer),
 }
 
@@ -71,4 +70,3 @@ impl ShopOffer {
         }
     }
 }
-
diff --git a/src/features/shop/mod.rs b/src/features/shop/mod.rs
index 2268529..ccb0cfa 100644
--- a/src/features/shop/mod.rs
+++ b/src/features/shop/mod.rs
@@ -1,4 +1,3 @@
-use crate::features::ui::messages::ClosePopupMessage;
 use crate::prelude::*;
 use components::*;
 use ui::open_shop;
@@ -10,24 +9,7 @@ pub struct ShopPlugin;
 
 impl Plugin for ShopPlugin {
     fn build(&self, app: &mut App) {
-        app.add_systems(
-            Update,
-            (buttons, close_popup).run_if(in_state(AppState::GameScreen)),
-        );
-    }
-}
-
-fn close_popup(
-    mut commands: Commands,
-    mut close_popup_reader: MessageReader<ClosePopupMessage>,
-    root_query: Query<(Entity, &RootMarker)>,
-) {
-    for _ in close_popup_reader.read() {
-        for (entity, root) in root_query.iter() {
-            match *root {
-                RootMarker::Shop => commands.entity(entity).despawn(),
-            }
-        }
+        app.add_systems(Update, buttons.run_if(in_state(AppState::GameScreen)));
     }
 }
 
@@ -46,13 +28,6 @@ fn buttons(
                 ButtonType::ShopOpen => {
                     open_shop(&mut commands, &game_config, &asset_server);
                 }
-                ButtonType::ShopClose => {
-                    for (entity, root) in root_query.iter() {
-                        match *root {
-                            RootMarker::Shop => commands.entity(entity).despawn(),
-                        }
-                    }
-                }
                 ButtonType::ShopBuyItem(offer) => {
                     if offer.buy(&mut inventory, &mut commands, &mut items) {
                         // Item bought, exit the menu
diff --git a/src/features/shop/ui/shop.rs b/src/features/shop/ui/shop.rs
index c730772..0b260ab 100644
--- a/src/features/shop/ui/shop.rs
+++ b/src/features/shop/ui/shop.rs
@@ -9,56 +9,20 @@ pub fn open_shop(
     // TODO: calculate tile_count
     let offers = ShopOffer::list_all(game_config, 0);
 
-    commands
-        .spawn((
-            RootMarker::Shop,
-            Node {
-                position_type: PositionType::Absolute,
-                width: percent(100),
-                height: percent(100),
-                ..Node::center()
-            },
-            ZIndex(1),
-            BackgroundColor(Color::srgba(0.0, 0.0, 0.0, 0.8)),
-            GlobalTransform::default(),
-        ))
-        .with_children(|parent| {
-            parent
-                .spawn((
-                    Node {
-                        width: px(700),
-                        padding: UiRect::all(px(20.0)),
-                        ..Node::vstack(px(20))
-                    },
-                    BackgroundColor(Color::srgb(0.2, 0.2, 0.2)),
-                    BorderRadius::all(px(10.0)),
-                ))
-                .with_children(|parent| {
-                    parent.spawn((
-                        Node {
-                            justify_content: JustifyContent::SpaceBetween,
-                            ..Node::hstack(px(20))
-                        },
-                        children![
-                            text("Shop", 40.0, Color::WHITE),
-                            pill_button(
-                                ButtonType::ShopClose,
-                                ButtonVariant::Destructive,
-                                Node {
-                                    width: px(40),
-                                    height: px(40),
-                                    ..default()
-                                },
-                                |color| text("X", 24.0, color)
-                            ),
-                        ],
-                    ));
-
-                    parent.spawn(Node::vstack(px(10))).with_children(|parent| {
-                        for offer in offers {
-                            parent.spawn(shop_offer(&offer, game_config, asset_server));
-                        }
-                    });
-                });
-        });
+    spawn_popup(
+        commands,
+        RootMarker::Shop,
+        "Einkaufsladen",
+        Node {
+            width: px(700),
+            ..default()
+        },
+        |parent| {
+            parent.spawn(Node::vstack(px(10))).with_children(|parent| {
+                for offer in offers {
+                    parent.spawn(shop_offer(&offer, game_config, asset_server));
+                }
+            });
+        },
+    );
 }