Begin work on a reusable on-hover color component

The two buttons ("close" and the "Big Red" button) have identical hover
code, except for which color theme they select. I was about to start
work on the cutting board, particularly it's cut-line selectors, and
realized that would make a 3rd copy of this code.

This commit adds just the background color handler. It seems to work as
expected on the CloseButton. I'll finish removing the old observers once
I have the BorderColor version in place.

src/game/mod.rs

@@ -16,16 +16,22 @@ pub mod machines {
 
   use bevy::prelude::*;
 
+  use crate::game::consumables::Fuel;
+
   #[derive(Component)]
+  #[require(Fuel)]
   pub struct CuttingMachine;
 
   #[derive(Component)]
+  #[require(Fuel)]
   pub struct RotatingMachine;
 
   #[derive(Component)]
+  #[require(Fuel)]
   pub struct FlippingMachine;
 
   #[derive(Component)]
+  #[require(Fuel)]
   pub struct TransposingMachine;
 }
 
@@ -33,5 +39,13 @@ pub mod consumables {
   use bevy::prelude::*;
 
   #[derive(Component)]
-  pub struct Fuel(u32);
+  pub struct Fuel(pub u32);
+
+  impl Default for Fuel {
+    fn default() -> Self {
+      Self(5)
+    }
+  }
+  #[derive(Event)]
+  pub struct FuelChanged;
 }

src/main.rs

@@ -1,7 +1,11 @@
-use bevy::{prelude::*, window::WindowResolution};
+use bevy::{color::palettes::css::*, prelude::*, window::WindowResolution};
 use bevy_inspector_egui::{bevy_egui::EguiPlugin, quick::WorldInspectorPlugin};
 
-use crate::game::machines::{CuttingMachine, RotatingMachine};
+use crate::{
+  game::machines::{CuttingMachine, FlippingMachine, RotatingMachine, TransposingMachine},
+  resources::UiTheme,
+  widgets::SpawnUi,
+};
 
 mod assets;
 mod card;
@@ -21,15 +25,7 @@ fn main() {
     .add_plugins(EguiPlugin::default())
     .add_plugins(WorldInspectorPlugin::new())
     .add_plugins(widgets::GameUiPlugin)
-    .add_systems(
+    .add_systems(Startup, (setup, assets::load_assets, dummy_machines))
-      Startup,
-      (
-        setup,
-        assets::load_assets,
-        RotatingMachine::spawn_ui,
-        CuttingMachine::spawn_ui,
-      ),
-    )
     .run();
 }
 
@@ -43,3 +39,55 @@ fn despawn<T: Component>(mut commands: Commands, to_despawn: Query<Entity, With<
     commands.entity(entity).despawn();
   }
 }
+
+/// Dev tool for spawning dummy entities. I'm developing their UIs by hooking
+/// up to these while the TileMap gets ready.
+fn dummy_machines(mut commands: Commands) {
+  // Spawn a dummy Cutting Machine
+  commands
+    .spawn((
+      CuttingMachine,
+      Sprite::from_color(RED, Vec2::splat(40.0)),
+      Transform::from_translation(Vec3::new(-40.0, 40.0, 0.0)),
+      Pickable::default(),
+    ))
+    .observe(spawn_machine_ui::<CuttingMachine>);
+
+  commands
+    .spawn((
+      RotatingMachine,
+      Sprite::from_color(GREEN, Vec2::splat(40.0)),
+      Transform::from_translation(Vec3::new(40.0, 40.0, 0.0)),
+      Pickable::default(),
+    ))
+    .observe(spawn_machine_ui::<RotatingMachine>);
+
+  // TODO: The other observers, once they have a spawner struct & impl.
+  commands
+    .spawn((
+      FlippingMachine,
+      Sprite::from_color(PURPLE, Vec2::splat(40.)),
+      Transform::from_translation(Vec3::new(-40.0, -40.0, 0.0)),
+      Pickable::default(),
+    ))
+    .observe(spawn_machine_ui::<FlippingMachine>);
+
+  commands
+    .spawn((
+      TransposingMachine,
+      Sprite::from_color(DARK_ORANGE, Vec2::splat(40.)),
+      Transform::from_translation(Vec3::new(40.0, -40.0, 0.0)),
+      Pickable::default(),
+    ))
+    .observe(spawn_machine_ui::<TransposingMachine>);
+}
+
+fn spawn_machine_ui<M: SpawnUi>(
+  event: Trigger<Pointer<Click>>,
+  commands: Commands,
+  theme: Res<UiTheme>,
+) {
+  let _entity = event.target;
+  // TODO: Hook up the Fuel component (and spawn one so that I can)
+  M::spawn_ui(commands, theme, event.target());
+}

src/resources.rs

@@ -36,7 +36,7 @@ pub struct UiTheme {
 }
 
 impl FromWorld for UiTheme {
-  fn from_world(world: &mut World) -> Self {
+  fn from_world(_world: &mut World) -> Self {
     Self {
       pane_bg: SLATE_100.into(),
 

src/widgets/fuel_gauge.rs

@@ -0,0 +1,69 @@
+use bevy::{
+  color::palettes::css::*,
+  ecs::{component::HookContext, world::DeferredWorld},
+  prelude::*,
+  ui::Val::*,
+};
+
+use crate::game::consumables::{Fuel, FuelChanged};
+
+#[derive(Component)]
+#[require(Label)]
+#[component(on_add = FuelGauge::refresh_label)]
+pub struct FuelGauge(Entity);
+
+impl FuelGauge {
+  /// Default bundle for a machine's fuel gauge widget. Give it the ID of the
+  /// machine whose info it is displaying.
+  pub fn bundle(target: Entity) -> impl Bundle {
+    (
+      FuelGauge(target),
+      Node {
+        min_width: Px(20.0),
+        min_height: Px(10.0),
+        ..default()
+      },
+      BackgroundColor(GREEN.into()),
+      Text::new("Fuel: "),
+    )
+  }
+
+  /// Observer system to update the [`FuelGauge`] widget when a machine emits a
+  /// [`FuelChanged`] event.
+  pub fn detect_fuel_change(
+    event: Trigger<FuelChanged>,
+    fuel_levels: Query<&Fuel>,
+    mut gauges: Query<(&FuelGauge, &mut Text)>,
+  ) {
+    // Find the FuelGauge that references the same Entity as the event target.
+    // That gauge's `Text` is the one to update.
+    let (_, mut label) = gauges
+      .iter_mut()
+      .find(|(gauge, _label)| gauge.0 == event.target())
+      .expect("Couldn't find any fuel gauges");
+
+    let fuel = fuel_levels.get(event.target()).expect(
+      "Logic error: a `FuelChanged` event was targetted at an entity with no `Fuel` component.",
+    );
+    label.0 = format!("Fuel: {}", fuel.0);
+  }
+
+  fn refresh_label(mut world: DeferredWorld, ctx: HookContext) {
+    // Get the machine ID from the FuelGauge component.
+    let Some(machine_id) = world.get::<FuelGauge>(ctx.entity).map(|fg| fg.0) else {
+      panic!("Couldn't get a FuelGauge during it's on-add hook run!");
+    };
+    // and fuel level
+    let Some(fuel) = world.get::<Fuel>(machine_id).map(|lvl| lvl.0) else {
+      // TODO: Maybe don't panic and just emit a warning.
+      panic!("Couldn't get a Fuel for a machine during a FuelGauge on-add hook.");
+    };
+
+    // Get an excl ref to the Text component so we can redraw its text
+    let Some(mut label) = world.get_mut::<Text>(ctx.entity) else {
+      panic!()
+    };
+
+    label.0 = format!("Fuel: {}", fuel);
+  }
+}

src/widgets/machines.rs

@@ -1,25 +1,18 @@
-use bevy::{color::palettes::css::*, prelude::*, ui::Val::*};
+use bevy::{color::palettes::css::*, prelude::*};
 
 use crate::{
-  game::machines::*,
+  game::{consumables::FuelChanged, machines::*},
   resources::UiTheme,
-  widgets::{BigRedButton, machine_ui_base},
+  widgets::{BigRedButton, SpawnUi, fuel_gauge::FuelGauge, machine_ui_base},
 };
 
-impl CuttingMachine {
+impl SpawnUi for CuttingMachine {
-  pub fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>) {
+  fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>, machine_id: Entity) {
     let base_entity = machine_ui_base(&mut commands, "Cutting Machine", &theme);
     commands.entity(base_entity).with_children(|commands| {
       // Left panel. For fuel or machine stats or whatever.
-      commands.spawn((
+      // TODO: Pass along target machine, not the UI's root entity.
-        Node {
+      commands.spawn(FuelGauge::bundle(machine_id));
-          padding: UiRect::all(Px(10.0)),
-          ..default()
-        },
-        BackgroundColor(GREEN.into()),
-        Pickable::default(),
-        children![(Text::new("Uses: <n>"), TextColor(BLACK.into()),)],
-      ));
 
       // Center panel (placeholder for the Card view)
       commands.spawn((
@@ -42,24 +35,24 @@ impl CuttingMachine {
           BackgroundColor(DARK_GRAY.into()),
           Pickable::default(),
         ))
-        .with_children(|cmds| BigRedButton::spawn_big_red_button(cmds, "CUT"));
+        .with_children(|cmds| {
+          let mut button_cmds = cmds.spawn(BigRedButton::bundle("CUT"));
+          button_cmds.observe(move |trigger: Trigger<Pointer<Click>>, mut com: Commands| {
+            dbg!("Cut button pressed. Triggering a FuelChanged event");
+            com.trigger_targets(FuelChanged, machine_id);
+          });
+          // TODO: Attach on-press observer so this machine can do something
+          // in response to that button being pressed
+        });
     });
   }
 }
 
-impl RotatingMachine {
+impl SpawnUi for RotatingMachine {
-  pub fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>) {
+  fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>, machine_id: Entity) {
     let base_entity = machine_ui_base(&mut commands, "Rotating Machine", &theme);
     commands.entity(base_entity).with_children(|commands| {
-      commands.spawn((
+      commands.spawn(FuelGauge::bundle(machine_id));
-        Node {
-          padding: UiRect::all(Px(10.0)),
-          ..Default::default()
-        },
-        BackgroundColor(GREEN.into()),
-        Pickable::default(),
-        children![(Text::new("Uses: <n>"), TextColor(BLACK.into()))],
-      ));
 
       // Center panel (placeholder for input-output rotation)
       commands.spawn((
@@ -82,7 +75,80 @@ impl RotatingMachine {
           BackgroundColor(DARK_GRAY.into()),
           Pickable::default(),
         ))
-        .with_children(|cmds| BigRedButton::spawn_big_red_button(cmds, "TURN"));
+        .with_children(|cmds| {
+          let _button_cmds = cmds.spawn(BigRedButton::bundle("TURN"));
+          // TODO: Attach on-press observer to the button.
+        });
+    });
+  }
+}
+
+impl SpawnUi for FlippingMachine {
+  fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>, machine_id: Entity) {
+    let base_entity = machine_ui_base(&mut commands, "Flipping Machine", &theme);
+    commands.entity(base_entity).with_children(|commands| {
+      commands.spawn(FuelGauge::bundle(machine_id));
+
+      // Center panel (placeholder)
+      commands.spawn((
+        Node::default(),
+        BackgroundColor(BLUE.into()),
+        Pickable::default(),
+        children![
+          Text::new("Card Flipping placeholder"),
+          TextColor(MAGENTA.into()),
+        ],
+      ));
+
+      // Right panel go button
+      commands
+        .spawn((
+          Node {
+            align_items: AlignItems::End,
+            ..Default::default()
+          },
+          BackgroundColor(DARK_GRAY.into()),
+          Pickable::default(),
+        ))
+        .with_children(|cmds| {
+          let _button_cmds = cmds.spawn(BigRedButton::bundle("FLIP"));
+          // TODO: Attach on-press observer to the button.
+        });
+    });
+  }
+}
+
+impl SpawnUi for TransposingMachine {
+  fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>, machine_id: Entity) {
+    let base_entity = machine_ui_base(&mut commands, "Transposing Machine", &theme);
+    commands.entity(base_entity).with_children(|commands| {
+      commands.spawn(FuelGauge::bundle(machine_id));
+
+      // Center panel (placeholder)
+      commands.spawn((
+        Node::default(),
+        BackgroundColor(BLUE.into()),
+        Pickable::default(),
+        children![
+          Text::new("Card Transposition placeholder"),
+          TextColor(MAGENTA.into()),
+        ],
+      ));
+
+      // Right panel go button
+      commands
+        .spawn((
+          Node {
+            align_items: AlignItems::End,
+            ..Default::default()
+          },
+          BackgroundColor(DARK_GRAY.into()),
+          Pickable::default(),
+        ))
+        .with_children(|cmds| {
+          let _button_cmds = cmds.spawn(BigRedButton::bundle("SWAP"));
+          // TODO: Attach on-press observer to the button.
+        });
     });
   }
 }

src/widgets/mod.rs

@@ -1,10 +1,11 @@
 //! Catch-all location for UI bits
 
+mod fuel_gauge;
 pub mod machines;
 
 use bevy::{color::palettes::css::*, prelude::*, ui::Val::*};
 
-use crate::resources::UiTheme;
+use crate::{resources::UiTheme, widgets::fuel_gauge::FuelGauge};
 
 /// Plugin to set up systems & resources for the custom UI elements
 ///
@@ -17,13 +18,28 @@ impl Plugin for GameUiPlugin {
     app
       .init_resource::<UiTheme>()
       .register_type::<UiTheme>()
+      .add_observer(HoverBackgroundcolor::hover_start)
+      .add_observer(HoverBackgroundcolor::hover_stop)
       .add_observer(CloseButton::hover_start)
       .add_observer(CloseButton::hover_stop)
       .add_observer(CloseButton::press_start)
-      .add_observer(CloseButton::press_stop);
+      .add_observer(CloseButton::press_stop)
+      .add_observer(BigRedButton::button_hover_start)
+      .add_observer(BigRedButton::button_hover_stop)
+      .add_observer(BigRedButton::button_press_start)
+      .add_observer(BigRedButton::button_press_stop)
+      .add_observer(FuelGauge::detect_fuel_change);
   }
 }
 
+/// Machines spawn their UI through this trait.
+///
+/// This exists mainly so that I can write generic functions and have the compiler
+/// expand the code for me, instead of doing it by hand.
+pub trait SpawnUi {
+  fn spawn_ui(commands: Commands, theme: Res<UiTheme>, machine_id: Entity);
+}
+
 /// The base panel for the machines that manipulate the room cards.
 ///
 /// This function is not a valid Bevy System because of how the Commands struct
@@ -87,10 +103,17 @@ fn machine_ui_base(commands: &mut Commands, header: impl Into<String>, theme: &U
 pub struct BigRedButton;
 
 impl BigRedButton {
-  // TODO: Hook up action handling (callback? Observer? Some other weird component?)
+  /// Default bundle for a Big Red Button. Remember to attach on-press observers!
-  fn spawn_big_red_button(commands: &mut ChildSpawnerCommands, text: impl Into<String>) {
+  ///
-    let mut builder = commands.spawn((
+  /// I haven't figure out what will receive the on-press events, so I'm moving
+  /// the problem. It will not be the button's job to hook up the event notice.
+  ///
+  /// TODO: Pass in the UiTheme struct
+  fn bundle(text: impl Into<String>) -> impl Bundle {
+    (
+      // TODO: Remove `Button`? Add `Button` to the `CloseButton` bundle?
       Button,
+      BigRedButton,
       Node {
         width: Px(60.0),
         height: Px(60.0),
@@ -112,11 +135,7 @@ impl BigRedButton {
         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);
   }
 
   /// Re-color the button when a pointer passes over it
@@ -124,7 +143,7 @@ impl BigRedButton {
     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>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<BigRedButton>>,
     ui_theme: Res<UiTheme>,
   ) {
     // Get the components for only the Trigger's target entity
@@ -139,7 +158,7 @@ impl BigRedButton {
 
   fn button_hover_stop(
     event: Trigger<Pointer<Out>>,
-    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<BigRedButton>>,
     ui_theme: Res<UiTheme>,
   ) {
     if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
@@ -150,7 +169,7 @@ impl BigRedButton {
 
   fn button_press_start(
     event: Trigger<Pointer<Pressed>>,
-    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<BigRedButton>>,
     ui_theme: Res<UiTheme>,
   ) {
     if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
@@ -161,7 +180,7 @@ impl BigRedButton {
 
   fn button_press_stop(
     event: Trigger<Pointer<Released>>,
-    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<BigRedButton>>,
     ui_theme: Res<UiTheme>,
   ) {
     if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
@@ -177,9 +196,12 @@ impl BigRedButton {
 pub struct CloseButton(Entity);
 
 impl CloseButton {
-  /// Spawn a button that will despawn the top-most node when pressed.
+  /// Default bundle for a panel's close button. Pass in the entity to despawn.
+  ///
+  /// TODO: Pass in the UiTheme struct
   fn bundle(target: Entity) -> impl Bundle {
     (
+      // TODO: Add `Button`? Remove `Button` from the BigRedButton bundle?
       CloseButton(target),
       Node {
         width: Px(20.0),
@@ -196,6 +218,7 @@ impl CloseButton {
       BackgroundColor(GRAY.into()),
       BorderColor(DARK_GRAY.into()),
       BorderRadius::all(Px(2.0)),
+      HoverBackgroundcolor::new(GREEN.into()),
       children![(
         // TODO: Replace with an icon/sprite
         Text::new("X"),
@@ -204,7 +227,7 @@ impl CloseButton {
     )
   }
 
-  pub fn hover_start(
+  fn 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`]
@@ -213,23 +236,23 @@ impl CloseButton {
   ) {
     // 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.quiet_hover_bg;
+      // bg.0 = ui_theme.quiet_hover_bg;
       border.0 = ui_theme.quiet_hover_border;
     }
   }
 
-  pub fn hover_stop(
+  fn hover_stop(
     event: Trigger<Pointer<Out>>,
     mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<CloseButton>>,
     ui_theme: Res<UiTheme>,
   ) {
     if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-      bg.0 = ui_theme.quiet_bg;
+      // bg.0 = ui_theme.quiet_bg;
       border.0 = ui_theme.quiet_border;
     }
   }
 
-  pub fn press_start(
+  fn press_start(
     event: Trigger<Pointer<Pressed>>,
     mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<CloseButton>>,
     ui_theme: Res<UiTheme>,
@@ -240,7 +263,7 @@ impl CloseButton {
     }
   }
 
-  pub fn press_stop(
+  fn press_stop(
     event: Trigger<Pointer<Released>>,
     mut commands: Commands,
     mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor, &CloseButton)>,
@@ -253,3 +276,48 @@ impl CloseButton {
     }
   }
 }
+
+/// Background color to use for an item being hovered over.
+///
+/// Adding this to an entity both sets the color and implicitly enables the
+/// on-hover behavior. Without it, the system(s) don't find the entity and so
+/// no color changing is exhibited.
+#[derive(Component)]
+struct HoverBackgroundcolor {
+  pub color: Color,
+  // hold onto the original so it can be put back
+  orig_bg: Option<Color>,
+}
+
+impl HoverBackgroundcolor {
+  fn new(color: Color) -> Self {
+    Self {
+      color,
+      orig_bg: None,
+    }
+  }
+
+  fn 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 colors: Query<(&mut HoverBackgroundcolor, &mut BackgroundColor)>,
+  ) {
+    // Get the components for only the Trigger's target entity
+    if let Ok((mut hover, mut bg)) = colors.get_mut(event.target()) {
+      hover.orig_bg = Some(bg.0); // store the original
+      bg.0 = hover.color;
+    }
+  }
+
+  fn hover_stop(
+    event: Trigger<Pointer<Out>>,
+    mut colors: Query<(&HoverBackgroundcolor, &mut BackgroundColor)>,
+  ) {
+    if let Ok((hover, mut bg)) = colors.get_mut(event.target()) {
+      bg.0 = hover
+        .orig_bg
+        .expect("Tried to restore an original color but there was none!");
+    }
+  }
+}