Handle machine button UI events with observers

Observers are "just" systems with a Trigger as their first parameter.
I've made 4 systems to handle the start and stop of the press and hover
actions.

Having the button *actually* do something (not just change colors) will
be achieved by attaching another button to the on-press trigger. I'm
expecting that the machine-ui-spawning system will do that, but in
principle it could be done by anything with access to the UI's button
entity ID.

src/widgets.rs

@@ -20,7 +20,7 @@ pub fn spawn_cutter_machine_ui(mut commands: Commands) {
         Pickable::default(),
         children![(Text::new("Uses: <n>"), TextColor(BLACK.into()),)],
       ));
-    
+
       // Center panel (placeholder for the Card view)
       commands.spawn((
         Node::default(),
@@ -119,4 +119,67 @@ fn spawn_machine_button(commands: &mut ChildSpawnerCommands) {
       TextShadow::default(),
     ],
   ));
+  builder.observe(button_hover_start);
+  builder.observe(button_hover_stop);
+  builder.observe(button_press_start);
+  builder.observe(button_press_stop);
+  builder.observe(second_on_press_event);
+}
+
+/// 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>>,
+  // TODO: pull in a theme resource (also: make a theme resource)
+) {
+  // Get the components for only the Trigger's target entity
+  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+    *bg = PINK.into();
+    *border = RED.into();
+  }
+}
+
+fn button_hover_stop(
+  event: Trigger<Pointer<Out>>,
+  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+  // TODO: pull in a theme resource (also: make a theme resource)
+) {
+  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+    *bg = RED.into();
+    *border = DARK_RED.into();
+  }
+}
+
+fn button_press_start(
+  event: Trigger<Pointer<Pressed>>,
+  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+  // TODO: pull in a theme resource (also: make a theme resource)
+) {
+  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+    *bg = GREEN.into();
+    *border = DARK_GREEN.into();
+  }
+}
+
+fn button_press_stop(
+  event: Trigger<Pointer<Released>>,
+  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+  // TODO: pull in a theme resource (also: make a theme resource)
+) {
+  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+    *bg = RED.into();
+    *border = DARK_RED.into();
+  }
+}
+
+fn second_on_press_event(
+  event: Trigger<Pointer<Pressed>>,
+  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+  // TODO: pull in a theme resource (also: make a theme resource)
+) {
+  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
+    dbg!("Hello, from a second Pointer<Pressed> observer!");
+  }
 }