Check-in the progress

Lots of nested components are making my head hurt. I'm not sure how to
solve the button call-back problem, yet.

src/widgets.rs

@@ -7,34 +7,47 @@ use bevy::{
 };
 
 pub fn spawn_cutter_machine_ui(mut commands: Commands) {
-  commands.spawn((
+  commands
-    machine_ui_base(),
+    .spawn((machine_ui_base("Cutting Machine"),))
-    children![
+    .with_children(|commands| {
-      (
+      // Left panel. For fuel or machine stats or whatever.
-        // TODO: A real node with stuff in it (buttons, maybe?)
+      commands.spawn((
         Node {
-          grid_column: GridPlacement::start_span(2, 3),
+          padding: UiRect::all(Px(10.0)),
           ..default()
         },
-        BackgroundColor(RED.into()),
-        Pickable::default()
-      ),
-      (
-        Node::default(),
         BackgroundColor(GREEN.into()),
-        Pickable::default()
+        Pickable::default(),
-      ),
+        children![(Text::new("Uses: <n>"), TextColor(BLACK.into()),)],
-      (
+      ));
+    
+      // Center panel (placeholder for the Card view)
+      commands.spawn((
         Node::default(),
         BackgroundColor(BLUE.into()),
         Pickable::default(),
-      )
+        children![(
-    ],
+          Text::new("Card cut view placeholder"),
-  ));
+          TextColor(MAGENTA.into()),
+          TextShadow::default(),
+        ),],
+      ));
+      // Right panel for the "CUT" button
+      commands
+        .spawn((
+          Node {
+            align_items: AlignItems::End,
+            ..Default::default()
+          },
+          BackgroundColor(DARK_GRAY.into()),
+          Pickable::default(),
+        ))
+        .with_children(spawn_machine_button);
+    });
 }
 
 /// The base panel for the machines that manipulate the room cards.
-fn machine_ui_base() -> impl Bundle {
+fn machine_ui_base(header: impl Into<String>) -> impl Bundle {
   (
     Node {
       // Position & size
@@ -48,8 +61,12 @@ fn machine_ui_base() -> impl Bundle {
       aspect_ratio: Some(1.0),
       display: Display::Grid,
       padding: UiRect::all(Val::Px(10.0)),
-      grid_template_columns: RepeatedGridTrack::flex(5, 1.0),
+      grid_template_columns: vec![
-      grid_template_rows: RepeatedGridTrack::flex(5, 1.0),
+        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),
 
@@ -57,5 +74,49 @@ fn machine_ui_base() -> impl Bundle {
     },
     BackgroundColor(SLATE_100.into()),
     BorderRadius::all(Percent(2.0)),
+    children![(
+      // TODO: A real node with stuff in it (buttons, maybe?)
+      Node {
+        justify_content: JustifyContent::Center,
+        grid_column: GridPlacement::span(3),
+        ..default()
+      },
+      BackgroundColor(RED.into()),
+      Pickable::default(),
+      children![(
+        Text::new(header),
+        TextColor(BLACK.into()),
+        // TODO: Text shadow, maybe. I couldn't make it look good.
+      )],
+    )],
   )
 }
+
+// TODO: Pass in button text
+// TODO: Hook up action handling (callback? Observer? Some other weird component?)
+fn spawn_machine_button(commands: &mut ChildSpawnerCommands) {
+  let mut builder = commands.spawn((
+    Button,
+    Node {
+      width: Px(60.0),
+      height: Px(60.0),
+      aspect_ratio: Some(1.0),
+
+      // Why is it "align_items" to center the text vertically,
+      // but "justify_*content*" to center it horizontally?
+      align_items: AlignItems::Center,
+      // align_content: AlignContent::Center,
+      justify_content: JustifyContent::Center,
+      border: UiRect::all(Px(2.0)),
+      ..Default::default()
+    },
+    BackgroundColor(RED.into()),
+    BorderColor(DARK_RED.into()),
+    BorderRadius::MAX,
+    children![
+      Text::new("CUT"),
+      TextColor(WHITE.into()),
+      TextShadow::default(),
+    ],
+  ));
+}