Replace base-ui bundle with a spawning function

src/widgets/mod.rs

@@ -2,58 +2,66 @@
 
 pub mod machines;
 
-use bevy::{
-  color::palettes::{css::*, tailwind::*},
-  prelude::*,
-  ui::Val::*,
-};
+use bevy::{color::palettes::css::*, prelude::*, ui::Val::*};
 
 use crate::resources::UiTheme;
 
 /// The base panel for the machines that manipulate the room cards.
-fn machine_ui_base(header: impl Into<String>) -> impl Bundle {
-  (
-    Node {
-      // Position & size
-      position_type: PositionType::Relative,
-      width: Percent(60.0),
-      height: Percent(60.0),
-      top: Percent(20.0),
-      left: Percent(20.0),
-
-      // 5x5 grid, padding & gutters, etc
-      aspect_ratio: Some(1.0),
-      display: Display::Grid,
-      padding: UiRect::all(Val::Px(10.0)),
-      grid_template_columns: vec![
-        GridTrack::min_content(),
-        GridTrack::flex(1.0),
-        GridTrack::min_content(),
-      ],
-      grid_template_rows: vec![GridTrack::min_content(), GridTrack::flex(1.0)],
-      row_gap: Val::Px(5.0),
-      column_gap: Val::Px(5.0),
-
-      ..default()
-    },
-    BackgroundColor(SLATE_100.into()),
-    BorderRadius::all(Percent(2.0)),
-    children![(
-      // TODO: A real node with stuff in it (buttons, maybe?)
+///
+/// This function is not a valid Bevy System because of how the Commands struct
+/// is passed through. Users are meant to call this *from* a System to create a
+/// base UI Node. That system then re-acquires an [`EntityCommands`] and adds
+/// child nodes to fill out the panel.
+fn machine_ui_base(commands: &mut Commands, header: impl Into<String>, theme: &UiTheme) -> Entity {
+  let root_pane = commands
+    .spawn((
       Node {
-        justify_content: JustifyContent::Center,
-        grid_column: GridPlacement::span(2),
+        // Position & size
+        position_type: PositionType::Relative,
+        width: Percent(60.0),
+        height: Percent(60.0),
+        top: Percent(20.0),
+        left: Percent(20.0),
+
+        // 5x5 grid, padding & gutters, etc
+        aspect_ratio: Some(1.0),
+        display: Display::Grid,
+        padding: UiRect::all(Val::Px(10.0)),
+        grid_template_columns: vec![
+          GridTrack::min_content(),
+          GridTrack::flex(1.0),
+          GridTrack::min_content(),
+        ],
+        grid_template_rows: vec![GridTrack::min_content(), GridTrack::flex(1.0)],
+        row_gap: Val::Px(5.0),
+        column_gap: Val::Px(5.0),
+
         ..default()
       },
-      BackgroundColor(RED.into()),
-      Pickable::default(),
+      BackgroundColor(theme.pane_bg),
+      BorderRadius::all(Percent(2.0)),
       children![(
-        Text::new(header),
-        TextColor(BLACK.into()),
-        // TODO: Text shadow, maybe. I couldn't make it look good.
-      )],
-    ),],
-  )
+        // TODO: A real node with stuff in it (buttons, maybe?)
+        Node {
+          justify_content: JustifyContent::Center,
+          grid_column: GridPlacement::span(2),
+          ..default()
+        },
+        BackgroundColor(RED.into()),
+        Pickable::default(),
+        children![(
+          Text::new(header),
+          TextColor(BLACK.into()),
+          // TODO: Text shadow, maybe. I couldn't make it look good.
+        )],
+      ),],
+    ))
+    .id();
+
+  commands.entity(root_pane).with_children(|cmds| {
+    cmds.spawn(CloseButton::bundle(root_pane));
+  });
+  root_pane
 }
 
 // TODO: Hook up action handling (callback? Observer? Some other weird component?)