feat: Add popup helper (#59)

flake.nix

@@ -24,10 +24,10 @@
 
       rust-toolchain = with fenix.packages.${system};
         combine [
-          stable.rustc
-          stable.cargo
-          stable.rust-src
-          stable.rust-analyzer
+          beta.rustc
+          beta.cargo
+          beta.rust-src
+          beta.rust-analyzer
         ];
 
       bevyDeps = with pkgs; [

src/features/ui/mod.rs

@@ -1,4 +1,4 @@
-use crate::prelude::{button::update_buttons, *};
+use crate::prelude::{button::update_buttons, popups::handle_popup_close, *};
 use bevy::{input::mouse::*, picking::hover::HoverMap};
 
 pub mod components;
@@ -15,6 +15,8 @@ impl Plugin for UiPlugin {
         app.add_observer(on_scroll_handler);
 
         app.add_systems(Update, update_buttons);
+
+        app.add_systems(Update, handle_popup_close);
     }
 }
 

src/features/ui/ui/mod.rs

@@ -1,7 +1,9 @@
 pub mod button;
 pub mod flexbox;
+pub mod popups;
 pub mod texts;
 
 pub use button::{button, pill_button};
 pub use flexbox::Flexbox;
+pub use popups::popup;
 pub use texts::{text, text_with_component};

src/features/ui/ui/popups.rs

@@ -0,0 +1,79 @@
+use super::super::messages::ClosePopupMessage;
+use crate::prelude::*;
+
+#[derive(Component)]
+pub struct PopupRoot;
+
+#[derive(Component)]
+pub struct PopupCloseButton;
+
+pub fn popup(
+    root: impl Component,
+    title: String,
+    mut node: Node,
+    child: impl Bundle,
+) -> impl Bundle {
+    node.padding = UiRect::all(px(20));
+
+    (
+        PopupRoot,
+        root,
+        Node {
+            position_type: PositionType::Absolute,
+            width: percent(100),
+            height: percent(100),
+            ..Node::center()
+        },
+        ZIndex(100),
+        BackgroundColor(Color::srgba(0., 0., 0., 0.8)),
+        GlobalTransform::default(),
+        children![(
+            node,
+            BackgroundColor(Color::srgb(0.2, 0.2, 0.2)),
+            BorderRadius::all(px(10)),
+            children![
+                (
+                    Node {
+                        justify_content: JustifyContent::SpaceBetween,
+                        align_items: AlignItems::Center,
+                        ..Node::hstack(px(20))
+                    },
+                    children![
+                        text(title, 40.0, Color::WHITE),
+                        button(
+                            PopupCloseButton,
+                            ButtonVariant::Destructive,
+                            Node {
+                                width: px(40),
+                                height: px(40),
+                                ..Node::center()
+                            },
+                            |color| text("X", 24.0, color)
+                        )
+                    ]
+                ),
+                child
+            ]
+        )],
+    )
+}
+
+pub fn handle_popup_close(
+    mut commands: Commands,
+    root_query: Query<Entity, With<PopupRoot>>,
+    mut messages: MessageReader<ClosePopupMessage>,
+    buttons: Query<&Interaction, (Changed<Interaction>, With<PopupCloseButton>)>,
+) {
+    for _ in messages.read() {
+        root_query
+            .iter()
+            .for_each(|root| commands.entity(root).despawn());
+    }
+
+    buttons.iter().for_each(|i| match i {
+        Interaction::Pressed => root_query
+            .iter()
+            .for_each(|root| commands.entity(root).despawn()),
+        _ => (),
+    });
+}