Create a BigRedButton struct, like CloseButton

The `BigRedButton` should be a real struct and component so that I can
query for it later.

I'm following the same API pattern as the `CloseButton` struct, in that
there is a spawner using the `Commands` (or `ChildSpawnerCommands`) and
the observer functions are static methods.

src/widgets/mod.rs

@@ -82,86 +82,92 @@ fn machine_ui_base(commands: &mut Commands, header: impl Into<String>, theme: &U
   root_pane
 }
 
-// TODO: Hook up action handling (callback? Observer? Some other weird component?)
-fn spawn_big_red_button(commands: &mut ChildSpawnerCommands, text: impl Into<String>) {
-  let mut builder = commands.spawn((
-    Button,
-    Node {
-      width: Px(60.0),
-      height: Px(60.0),
-      aspect_ratio: Some(1.0),
+/// The "Big Red Button" that makes a machine perform it's action.
+#[derive(Component)]
+pub struct BigRedButton;
 
-      // 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(text),
-      TextColor(WHITE.into()),
-      TextShadow::default(),
-    ],
-  ));
-  builder.observe(button_hover_start);
-  builder.observe(button_hover_stop);
-  builder.observe(button_press_start);
-  builder.observe(button_press_stop);
-}
+impl BigRedButton {
+  // TODO: Hook up action handling (callback? Observer? Some other weird component?)
+  fn spawn_big_red_button(commands: &mut ChildSpawnerCommands, text: impl Into<String>) {
+    let mut builder = commands.spawn((
+      Button,
+      Node {
+        width: Px(60.0),
+        height: Px(60.0),
+        aspect_ratio: Some(1.0),
 
-/// Re-color the button when a pointer passes over it
-fn button_hover_start(
-  event: Trigger<Pointer<Over>>,
-  // Get button background and border colors so we can change them.
-  // Filter for *changed* interactions, and only entities with a [`Button`]
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  // Get the components for only the Trigger's target entity
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_hover_bg;
-    border.0 = ui_theme.brb_hover_border;
+        // 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(text),
+        TextColor(WHITE.into()),
+        TextShadow::default(),
+      ],
+    ));
+    builder.observe(BigRedButton::button_hover_start);
+    builder.observe(BigRedButton::button_hover_stop);
+    builder.observe(BigRedButton::button_press_start);
+    builder.observe(BigRedButton::button_press_stop);
   }
-}
 
-// TODO: Consolidate these with the help of a NewType enum and `trigger_map()`
-// see: https://github.com/bevyengine/bevy/issues/14649
-
-fn button_hover_stop(
-  event: Trigger<Pointer<Out>>,
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_bg;
-    border.0 = ui_theme.brb_border;
+  /// Re-color the button when a pointer passes over it
+  fn button_hover_start(
+    event: Trigger<Pointer<Over>>,
+    // Get button background and border colors so we can change them.
+    // Filter for *changed* interactions, and only entities with a [`Button`]
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+    ui_theme: Res<UiTheme>,
+  ) {
+    // Get the components for only the Trigger's target entity
+    if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+      bg.0 = ui_theme.brb_hover_bg;
+      border.0 = ui_theme.brb_hover_border;
+    }
   }
-}
 
-fn button_press_start(
-  event: Trigger<Pointer<Pressed>>,
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_pressed_bg;
-    border.0 = ui_theme.brb_pressed_border;
+  // TODO: Consolidate these with the help of a NewType enum and `trigger_map()`
+  // see: https://github.com/bevyengine/bevy/issues/14649
+
+  fn button_hover_stop(
+    event: Trigger<Pointer<Out>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+    ui_theme: Res<UiTheme>,
+  ) {
+    if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+      bg.0 = ui_theme.brb_bg;
+      border.0 = ui_theme.brb_border;
+    }
   }
-}
 
-fn button_press_stop(
-  event: Trigger<Pointer<Released>>,
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_bg;
-    border.0 = ui_theme.brb_border;
+  fn button_press_start(
+    event: Trigger<Pointer<Pressed>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+    ui_theme: Res<UiTheme>,
+  ) {
+    if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+      bg.0 = ui_theme.brb_pressed_bg;
+      border.0 = ui_theme.brb_pressed_border;
+    }
+  }
+
+  fn button_press_stop(
+    event: Trigger<Pointer<Released>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+    ui_theme: Res<UiTheme>,
+  ) {
+    if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+      bg.0 = ui_theme.brb_bg;
+      border.0 = ui_theme.brb_border;
+    }
   }
 }