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.

Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-bevy = { version = "0.16.1", features = ["dynamic_linking"]}
+bevy = { version = "0.16.1", features = ["dynamic_linking"] }
 bevy-inspector-egui = "0.33.1"
 
 [profile.dev]

src/assets.rs

@@ -0,0 +1,82 @@
+use bevy::prelude::*;
+use std::path::Path;
+
+pub struct TileImage {
+  name: &'static str,
+  thumbnail_handle: Handle<Image>,
+  tile_handle: Handle<Image>,
+}
+
+#[derive(Resource)]
+pub struct AssetLibrary {
+  tile_images: Vec<TileImage>,
+}
+
+impl AssetLibrary {
+  fn new(asset_server: &AssetServer) -> Self {
+    let tile_names = vec![
+      "corner-ne-1-wall",
+      "corner-ne-2-walls-south",
+      "corner-ne-2-walls-west",
+      "corner-ne-3-walls",
+      "corner-nw-1-wall",
+      "corner-nw-2-walls-south",
+      "corner-nw-2-walls-east",
+      "corner-nw-3-walls",
+      "corner-se-1-wall",
+      "corner-se-2-walls-north",
+      "corner-se-2-walls-west",
+      "corner-se-3-walls",
+      "corner-sw-1-wall",
+      "corner-sw-2-walls-north",
+      "corner-sw-2-walls-east",
+      "corner-sw-3-walls",
+      "full-0-walls",
+      "full-1-wall",
+      "full-2-walls",
+      "full-3-walls",
+      "full-4-walls",
+    ];
+
+    let tile_images = tile_names
+      .iter()
+      .cloned()
+      .map(|name| {
+        let thumbnail_path = Path::new("thumbnails").join(name).with_extension("png");
+        let tile_path = Path::new("tiles").join(name).with_extension("png");
+
+        let thumbnail_handle = asset_server.load::<Image>(thumbnail_path);
+        let tile_handle = asset_server.load::<Image>(tile_path);
+
+        TileImage {
+          name,
+          thumbnail_handle,
+          tile_handle,
+        }
+      })
+      .collect();
+
+    Self { tile_images }
+  }
+
+  pub fn get_thumbnail(&self, name: &str) -> Option<Handle<Image>> {
+    self
+      .tile_images
+      .iter()
+      .find(|&tile| tile.name == name)
+      .map(|tile| tile.thumbnail_handle.clone())
+  }
+
+  pub fn get_tile(&self, name: &str) -> Option<Handle<Image>> {
+    self
+      .tile_images
+      .iter()
+      .find(|&tile| tile.name == name)
+      .map(|tile| tile.tile_handle.clone())
+  }
+}
+
+pub fn load_assets(mut commands: Commands, asset_server: Res<AssetServer>) {
+  let asset_library = AssetLibrary::new(&asset_server);
+  commands.insert_resource(asset_library);
+}

src/card.rs

@@ -1,5 +1,7 @@
 //! TODO: module doc :v
 
+use bevy::ecs::component::Component;
+
 /// Value for the "sub tiles" inside a room tile
 #[derive(Clone, Copy, Debug, Default, PartialEq)]
 pub enum Cell {
@@ -47,7 +49,7 @@ pub enum RotationDir {
 
 /// An invidiual room, or "card" in the player's hand. The room may
 /// *or may not* be valid, yet.
-#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[derive(Clone, Copy, Component, Debug, Default, PartialEq)]
 pub struct Card {
   cells: [Cell; 9],
   nw: bool,
@@ -114,19 +116,211 @@ impl Card {
 
   /// Cuts this Card on the given line. Returns two cards
   pub fn cut(self, line: CutLine) -> (Self, Self) {
-    todo!();
+    let is_cut: fn(usize, usize) -> bool = match line {
+      CutLine::VertLeft => |x, _| x > 0,
+      CutLine::VertRight => |x, _| x > 1,
+      CutLine::HorizUpper => |_, y| y > 0,
+      CutLine::HorizLower => |_, y| y > 1,
+    };
+
+    let mut first_card = Self::default();
+    let mut second_card = Self::default();
+
+    macro_rules! perform_cut {
+      ( $dir:ident, $index:literal ) => {
+        if is_cut($index % 3, $index / 3) {
+          second_card.cells[$index] = self.cells[$index];
+          second_card.$dir = self.$dir;
+        } else {
+          first_card.cells[$index] = self.cells[$index];
+          first_card.$dir = self.$dir;
+        }
+      };
+
+      ( $index:literal ) => {
+        if is_cut($index % 3, $index / 3) {
+          second_card.cells[$index] = self.cells[$index];
+        } else {
+          first_card.cells[$index] = self.cells[$index];
+        }
+      };
+    }
+
+    perform_cut!(nw, 0);
+    perform_cut!(n, 1);
+    perform_cut!(ne, 2);
+    perform_cut!(w, 3);
+    perform_cut!(4);
+    perform_cut!(e, 5);
+    perform_cut!(sw, 6);
+    perform_cut!(s, 7);
+    perform_cut!(se, 8);
+
+    (first_card, second_card)
   }
 
   pub fn flip(self, flip: FlipDir) -> Self {
-    todo!();
+    let mut new_card = Self::default();
+
+    let transform = match flip {
+      FlipDir::Horizontal => |cell: Cell| match cell {
+        Cell::NW => Cell::NE,
+        Cell::NE => Cell::NW,
+        Cell::SW => Cell::SE,
+        Cell::SE => Cell::SW,
+        other => other,
+      },
+      FlipDir::Vertical => |cell: Cell| match cell {
+        Cell::NW => Cell::SW,
+        Cell::NE => Cell::SE,
+        Cell::SW => Cell::NW,
+        Cell::SE => Cell::NE,
+        other => other,
+      },
+    };
+
+    // Check for doors
+    macro_rules! assign_cell {
+      ( ($source_dir:ident, $source_index:literal), ($dest_dir:ident, $dest_index:literal), $repeat:expr ) => {
+        new_card.cells[$dest_index] = transform(self.cells[$source_index]);
+        new_card.$dest_dir = self.$source_dir;
+        if $repeat == true {
+          new_card.cells[$source_index] = transform(self.cells[$dest_index]);
+          new_card.$source_dir = self.$dest_dir;
+        }
+      };
+    }
+
+    match flip {
+      FlipDir::Horizontal => {
+        assign_cell!((nw, 0), (ne, 2), true);
+        assign_cell!((w, 3), (e, 5), true);
+        assign_cell!((sw, 6), (se, 8), true);
+        assign_cell!((n, 1), (n, 1), false);
+        assign_cell!((s, 7), (s, 7), false);
+      }
+      FlipDir::Vertical => {
+        assign_cell!((nw, 0), (sw, 6), true);
+        assign_cell!((n, 1), (s, 7), true);
+        assign_cell!((ne, 2), (se, 8), true);
+        assign_cell!((w, 3), (w, 3), false);
+        assign_cell!((e, 5), (e, 5), false);
+      }
+    }
+
+    new_card.cells[4] = transform(self.cells[4]);
+
+    new_card
   }
 
   pub fn transpose(self, other: Self, selection: TransposeSelection) -> (Self, Self) {
-    todo!();
+    let is_transposed: fn(usize, usize) -> bool = match selection {
+      TransposeSelection::Column(TransposeIndex::First) => |x, _| x == 0,
+      TransposeSelection::Column(TransposeIndex::Second) => |x, _| x == 1,
+      TransposeSelection::Column(TransposeIndex::Third) => |x, _| x == 2,
+      TransposeSelection::Row(TransposeIndex::First) => |_, y| y == 0,
+      TransposeSelection::Row(TransposeIndex::Second) => |_, y| y == 1,
+      TransposeSelection::Row(TransposeIndex::Third) => |_, y| y == 2,
+    };
+
+    let mut first_card = Self::default();
+    let mut second_card = Self::default();
+
+    macro_rules! perform_transpose {
+      ( $dir:ident, $index:literal ) => {
+        if is_transposed($index % 3, $index / 3) {
+          first_card.cells[$index] = other.cells[$index];
+          second_card.cells[$index] = self.cells[$index];
+
+          first_card.$dir = other.$dir;
+          second_card.$dir = self.$dir;
+        } else {
+          first_card.cells[$index] = self.cells[$index];
+          second_card.cells[$index] = other.cells[$index];
+
+          first_card.$dir = self.$dir;
+          second_card.$dir = other.$dir;
+        }
+      };
+
+      ( $index:literal ) => {
+        if is_transposed($index % 3, $index / 3) {
+          first_card.cells[$index] = other.cells[$index];
+          second_card.cells[$index] = self.cells[$index];
+        } else {
+          first_card.cells[$index] = self.cells[$index];
+          second_card.cells[$index] = other.cells[$index];
+        }
+      };
+    }
+
+    perform_transpose!(nw, 0);
+    perform_transpose!(n, 1);
+    perform_transpose!(ne, 2);
+    perform_transpose!(w, 3);
+    perform_transpose!(4);
+    perform_transpose!(e, 5);
+    perform_transpose!(sw, 6);
+    perform_transpose!(s, 7);
+    perform_transpose!(se, 8);
+
+    (first_card, second_card)
   }
 
-  pub fn rotate(self, dir: RotationDir) {
-    todo!();
+  pub fn rotate(self, dir: RotationDir) -> Self {
+    let mut new_card = Self::default();
+
+    let transform = match dir {
+      RotationDir::Clockwise => |cell: Cell| match cell {
+        Cell::NW => Cell::NE,
+        Cell::NE => Cell::SE,
+        Cell::SE => Cell::SW,
+        Cell::SW => Cell::NW,
+        other => other,
+      },
+      RotationDir::CounterClockwise => |cell: Cell| match cell {
+        Cell::NW => Cell::SW,
+        Cell::SW => Cell::SE,
+        Cell::SE => Cell::NW,
+        Cell::NE => Cell::NW,
+        other => other,
+      },
+    };
+
+    // Check for doors
+    macro_rules! assign_cell {
+      ( ($source_dir:ident, $source_index:literal), ($dest_dir:ident, $dest_index:literal) ) => {
+        new_card.cells[$dest_index] = transform(self.cells[$source_index]);
+        new_card.$dest_dir = self.$source_dir;
+      };
+    }
+
+    match dir {
+      RotationDir::Clockwise => {
+        assign_cell!((nw, 0), (ne, 2));
+        assign_cell!((n, 1), (e, 5));
+        assign_cell!((ne, 2), (se, 8));
+        assign_cell!((e, 5), (s, 7));
+        assign_cell!((se, 8), (sw, 6));
+        assign_cell!((s, 7), (w, 3));
+        assign_cell!((sw, 6), (nw, 0));
+        assign_cell!((w, 3), (n, 1));
+      }
+      RotationDir::CounterClockwise => {
+        assign_cell!((nw, 0), (sw, 6));
+        assign_cell!((w, 3), (s, 7));
+        assign_cell!((sw, 6), (se, 8));
+        assign_cell!((s, 7), (e, 5));
+        assign_cell!((se, 8), (ne, 2));
+        assign_cell!((e, 5), (n, 1));
+        assign_cell!((ne, 2), (nw, 0));
+        assign_cell!((n, 1), (w, 3));
+      }
+    }
+
+    new_card.cells[4] = transform(self.cells[4]);
+
+    new_card
   }
 }
 
@@ -144,6 +338,20 @@ pub const NW_TRIANGLE: [Cell; 9] = [
   Cell::NW, Cell::Filled, Cell::Filled,
 ];
 
+#[rustfmt::skip]
+pub const SW_TRIANGLE: [Cell; 9] = [
+  Cell::SW, Cell::Filled, Cell::Filled,
+  Cell::Empty, Cell::SW, Cell::Filled,
+  Cell::Empty, Cell::Empty, Cell::SW,
+];
+
+#[rustfmt::skip]
+pub const NE_TRIANGLE: [Cell; 9] = [
+  Cell::NE, Cell::Empty, Cell::Empty,
+  Cell::Filled, Cell::NE, Cell::Empty,
+  Cell::Filled, Cell::Filled, Cell::NE
+];
+
 #[rustfmt::skip]
 pub const OCTAGON: [Cell; 9] = [
   Cell::NW, Cell::Filled, Cell::NE,
@@ -303,41 +511,371 @@ mod test {
 
   #[test]
   fn cut_octagon() {
-    todo!();
+    // Original octagon
+    let octagon = Card {
+      cells: OCTAGON,
+      ..Default::default()
+    };
+
+    // Pairs of each different slice option
+    let vert_left_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::NW, Cell::Empty, Cell::Empty,
+          Cell::Filled, Cell::Empty, Cell::Empty,
+          Cell::SW, Cell::Empty, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Filled, Cell::NE,
+          Cell::Empty, Cell::Filled, Cell::Filled,
+          Cell::Empty, Cell::Filled, Cell::SE,
+        ],
+        ..Default::default()
+      },
+    );
+
+    let vert_right_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::NW, Cell::Filled, Cell::Empty,
+          Cell::Filled, Cell::Filled, Cell::Empty,
+          Cell::SW, Cell::Filled, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::NE,
+          Cell::Empty, Cell::Empty, Cell::Filled,
+          Cell::Empty, Cell::Empty, Cell::SE,
+        ],
+        ..Default::default()
+      },
+    );
+
+    let horiz_top_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::NW, Cell::Filled, Cell::NE,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Filled, Cell::Filled, Cell::Filled,
+          Cell::SW, Cell::Filled, Cell::SE,
+        ],
+        ..Default::default()
+      },
+    );
+
+    let horiz_bottom_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::NW, Cell::Filled, Cell::NE,
+          Cell::Filled, Cell::Filled, Cell::Filled,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::SW, Cell::Filled, Cell::SE,
+        ],
+        ..Default::default()
+      },
+    );
+
+    // Run tests
+    let result_vleft = octagon.clone().cut(CutLine::VertLeft);
+    assert_eq!(result_vleft, vert_left_pair);
+
+    let result_vright = octagon.clone().cut(CutLine::VertRight);
+    assert_eq!(result_vright, vert_right_pair);
+
+    let result_hupper = octagon.clone().cut(CutLine::HorizUpper);
+    assert_eq!(result_hupper, horiz_top_pair);
+
+    let result_hlower = octagon.cut(CutLine::HorizLower);
+    assert_eq!(result_hlower, horiz_bottom_pair);
   }
 
   #[test]
   fn cut_triangle() {
-    todo!();
+    let tri = Card {
+      cells: NW_TRIANGLE,
+      ..Default::default()
+    };
+
+    // Pairs of each different slice option
+    let vert_left_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::NW, Cell::Empty, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::NW,
+          Cell::Empty, Cell::NW, Cell::Filled,
+          Cell::Empty, Cell::Filled, Cell::Filled,
+        ],
+        ..Default::default()
+      },
+    );
+
+    let vert_right_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Empty, Cell::NW, Cell::Empty,
+          Cell::NW, Cell::Filled, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::NW,
+          Cell::Empty, Cell::Empty, Cell::Filled,
+          Cell::Empty, Cell::Empty, Cell::Filled,
+        ],
+        ..Default::default()
+      },
+    );
+
+    let horiz_top_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::NW,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Empty, Cell::NW, Cell::Filled,
+          Cell::NW, Cell::Filled, Cell::Filled,
+        ],
+        ..Default::default()
+      },
+    );
+
+    let horiz_bottom_pair = (
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::NW,
+          Cell::Empty, Cell::NW, Cell::Filled,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+        ],
+        ..Default::default()
+      },
+      Card {
+        #[rustfmt::skip]
+        cells: [
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::Empty, Cell::Empty, Cell::Empty,
+          Cell::NW, Cell::Filled, Cell::Filled,
+        ],
+        ..Default::default()
+      },
+    );
+
+    // Run tests
+    let result_vleft = tri.clone().cut(CutLine::VertLeft);
+    assert_eq!(result_vleft, vert_left_pair);
+
+    let result_vright = tri.clone().cut(CutLine::VertRight);
+    assert_eq!(result_vright, vert_right_pair);
+
+    let result_hupper = tri.clone().cut(CutLine::HorizUpper);
+    assert_eq!(result_hupper, horiz_top_pair);
+
+    let result_hlower = tri.cut(CutLine::HorizLower);
+    assert_eq!(result_hlower, horiz_bottom_pair);
   }
 
   #[test]
   fn flip_triangle_vertical() {
-    todo!();
+    let tri = Card {
+      cells: NW_TRIANGLE,
+      ..Default::default()
+    };
+
+    let expected = Card {
+      cells: SW_TRIANGLE,
+      ..Default::default()
+    };
+
+    let result = tri.flip(FlipDir::Vertical);
+
+    assert_eq!(result, expected);
   }
 
   #[test]
   fn flip_triangle_horizontal() {
-    todo!();
+    let tri = Card {
+      cells: NW_TRIANGLE,
+      ..Default::default()
+    };
+
+    let expected = Card {
+      cells: NE_TRIANGLE,
+      ..Default::default()
+    };
+
+    let result = tri.flip(FlipDir::Horizontal);
+
+    assert_eq!(result, expected);
   }
 
+  /// Test transposition on column 1
   #[test]
   fn transpose_vertical() {
-    todo!();
+    let left_shape = Card {
+      cells: OCTAGON,
+      ..Default::default()
+    };
+
+    // It's a small NW triangle.
+    let right_shape = Card {
+      #[rustfmt::skip]
+      cells: [
+        Cell::Filled, Cell::Empty, Cell::Empty,
+        Cell::SE, Cell::Empty, Cell::NW,
+        Cell::Empty, Cell::NW, Cell::Filled,
+      ],
+      ..Default::default()
+    };
+
+    let expected_left = Card {
+      #[rustfmt::skip]
+      cells: [
+        Cell::Filled, Cell::Filled, Cell::NE,
+        Cell::SE, Cell::Filled, Cell::Filled,
+        Cell::Empty, Cell::Filled, Cell::SE,
+      ],
+      ..Default::default()
+    };
+
+    let expected_right = Card {
+      #[rustfmt::skip]
+      cells: [
+        Cell::NW, Cell::Empty, Cell::Empty,
+        Cell::Filled, Cell::Empty, Cell::NW,
+        Cell::SW, Cell::NW, Cell::Filled,
+      ],
+      ..Default::default()
+    };
+
+    let (res_left, res_right) = left_shape.transpose(
+      right_shape,
+      TransposeSelection::Column(TransposeIndex::First),
+    );
+    assert_eq!(res_left, expected_left);
+    assert_eq!(res_right, expected_right);
   }
 
+  /// Test transposition on row 3
   #[test]
   fn transpose_horizontal() {
-    todo!();
+    let left_shape = Card {
+      cells: OCTAGON,
+      ..Default::default()
+    };
+
+    let right_shape = Card {
+      #[rustfmt::skip]
+      cells: [
+        Cell::Filled, Cell::Empty, Cell::Empty,
+        Cell::SE, Cell::Empty, Cell::NW,
+        Cell::Empty, Cell::NW, Cell::Filled,
+      ],
+      ..Default::default()
+    };
+
+    let expected_left = Card {
+      #[rustfmt::skip]
+      cells: [
+        Cell::NW, Cell::Filled, Cell::NE,
+        Cell::Filled, Cell::Filled, Cell::Filled,
+        Cell::Empty, Cell::NW, Cell::Filled,
+      ],
+      ..Default::default()
+    };
+
+    let expected_right = Card {
+      #[rustfmt::skip]
+      cells: [
+        Cell::Filled, Cell::Empty, Cell::Empty,
+        Cell::SE, Cell::Empty, Cell::NW,
+        Cell::SW, Cell::Filled, Cell::SE,
+      ],
+      ..Default::default()
+    };
+
+    let (res_left, res_right) =
+      left_shape.transpose(right_shape, TransposeSelection::Row(TransposeIndex::Third));
+    assert_eq!(res_left, expected_left);
+    assert_eq!(res_right, expected_right);
   }
 
   #[test]
   fn rotate_clockwise() {
-    todo!();
+    let shape = Card {
+      cells: NW_TRIANGLE,
+      ..Default::default()
+    };
+
+    let expected = Card {
+      cells: NE_TRIANGLE,
+      ..Default::default()
+    };
+
+    let result = shape.rotate(RotationDir::Clockwise);
+    assert_eq!(result, expected);
   }
 
   #[test]
   fn rotate_counter_clockwise() {
-    todo!();
+    let shape = Card {
+      cells: NE_TRIANGLE,
+      ..Default::default()
+    };
+
+    let expected = Card {
+      cells: NW_TRIANGLE,
+      ..Default::default()
+    };
+
+    let result = shape.rotate(RotationDir::CounterClockwise);
+    assert_eq!(result, expected);
   }
 }

src/constants.rs

@@ -1,12 +0,0 @@
-//! Program constants & defaults
-
-use bevy::prelude::*;
-
-#[derive(Debug, Reflect, Resource)]
-struct ConfigDefaults {}
-
-impl FromWorld for ConfigDefaults {
-  fn from_world(world: &mut World) -> Self {
-    todo!()
-  }
-}

src/game/mod.rs

@@ -0,0 +1,51 @@
+use bevy::prelude::*;
+
+/// Data component for info about the player's current set of cards.
+///
+/// [`Self::capacity`] is the maximum hand size.
+///
+/// [`Self::low_water_mark`] is the threshold for drawing new cards on-room-enter.
+#[derive(Component)]
+pub struct PlayerHand {
+  cards: Vec<Entity>,
+  capacity: u8,
+  low_water_mark: u8,
+}
+
+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;
+}
+
+pub mod consumables {
+  use bevy::prelude::*;
+
+  #[derive(Component)]
+  pub struct Fuel(pub u32);
+
+  impl Default for Fuel {
+    fn default() -> Self {
+      Self(5)
+    }
+  }
+  #[derive(Event)]
+  pub struct FuelChanged;
+}

src/main.rs

@@ -1,8 +1,16 @@
-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, FlippingMachine, RotatingMachine, TransposingMachine},
+  resources::UiTheme,
+  widgets::SpawnUi,
+};
+
+mod assets;
 mod card;
-mod constants;
+mod game;
+mod resources;
 mod widgets;
 
 fn main() {
@@ -16,5 +24,70 @@ fn main() {
     }))
     .add_plugins(EguiPlugin::default())
     .add_plugins(WorldInspectorPlugin::new())
+    .add_plugins(widgets::GameUiPlugin)
+    .add_systems(Startup, (setup, assets::load_assets, dummy_machines))
     .run();
 }
+
+fn setup(mut commands: Commands) {
+  commands.spawn(Camera2d);
+}
+
+/// Generic utility for despawning entities that have a given component.
+fn despawn<T: Component>(mut commands: Commands, to_despawn: Query<Entity, With<T>>) {
+  for entity in to_despawn {
+    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

@@ -0,0 +1,58 @@
+//! Program constants & defaults
+
+use bevy::{
+  color::palettes::{css::*, tailwind::SLATE_100},
+  prelude::*,
+};
+
+#[derive(Debug, Reflect, Resource)]
+#[reflect(Resource)]
+pub struct UiTheme {
+  // Colors for the machine UI panes
+  // (and others, but we're not there yet)
+  pub pane_bg: Color,
+
+  // Colors for the "Big Red Buttons" (the main actions of the machines)
+  // normal
+  pub brb_bg: Color,
+  pub brb_border: Color,
+  // hover
+  pub brb_hover_bg: Color,
+  pub brb_hover_border: Color,
+  // pressed
+  pub brb_pressed_bg: Color,
+  pub brb_pressed_border: Color,
+
+  // Colors for low-priority buttons
+  // normal
+  pub quiet_bg: Color,
+  pub quiet_border: Color,
+  // hover
+  pub quiet_hover_bg: Color,
+  pub quiet_hover_border: Color,
+  // pressed
+  pub quiet_pressed_bg: Color,
+  pub quiet_pressed_border: Color,
+}
+
+impl FromWorld for UiTheme {
+  fn from_world(_world: &mut World) -> Self {
+    Self {
+      pane_bg: SLATE_100.into(),
+
+      brb_bg: RED.into(),
+      brb_border: DARK_RED.into(),
+      brb_hover_bg: PINK.into(),
+      brb_hover_border: RED.into(),
+      brb_pressed_bg: GREEN.into(),
+      brb_pressed_border: DARK_GREEN.into(),
+
+      quiet_bg: GRAY.into(),
+      quiet_border: DARK_GRAY.into(),
+      quiet_hover_bg: DARK_GRAY.into(),
+      quiet_hover_border: LIGHT_GRAY.into(),
+      quiet_pressed_bg: LIGHT_GRAY.into(),
+      quiet_pressed_border: GRAY.into(),
+    }
+  }
+}

src/widgets.rs

@@ -1 +0,0 @@
-//! Catch-all location for UI bits

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

@@ -0,0 +1,154 @@
+use bevy::{color::palettes::css::*, prelude::*};
+
+use crate::{
+  game::{consumables::FuelChanged, machines::*},
+  resources::UiTheme,
+  widgets::{BigRedButton, SpawnUi, fuel_gauge::FuelGauge, machine_ui_base},
+};
+
+impl SpawnUi for CuttingMachine {
+  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.
+      // TODO: Pass along target machine, not the UI's root entity.
+      commands.spawn(FuelGauge::bundle(machine_id));
+
+      // 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(|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 SpawnUi for RotatingMachine {
+  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(FuelGauge::bundle(machine_id));
+
+      // Center panel (placeholder for input-output rotation)
+      commands.spawn((
+        Node::default(),
+        BackgroundColor(BLUE.into()),
+        Pickable::default(),
+        children![
+          Text::new("Card rotation side-by-side placeholder"),
+          TextColor(MAGENTA.into()),
+        ],
+      ));
+
+      // Right panel for the rotation controls
+      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("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

@@ -0,0 +1,323 @@
+//! Catch-all location for UI bits
+
+mod fuel_gauge;
+pub mod machines;
+
+use bevy::{color::palettes::css::*, prelude::*, ui::Val::*};
+
+use crate::{resources::UiTheme, widgets::fuel_gauge::FuelGauge};
+
+/// Plugin to set up systems & resources for the custom UI elements
+///
+/// The UiTheme resource is initialized and the button press Observers
+/// are registered here.
+pub struct GameUiPlugin;
+
+impl Plugin for GameUiPlugin {
+  fn build(&self, app: &mut App) {
+    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(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
+/// 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 {
+        // 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(theme.pane_bg),
+      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(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
+}
+
+/// The "Big Red Button" that makes a machine perform it's action.
+#[derive(Component)]
+pub struct BigRedButton;
+
+impl BigRedButton {
+  /// Default bundle for a Big Red Button. Remember to attach on-press observers!
+  ///
+  /// 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),
+        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(text),
+        TextColor(WHITE.into()),
+        TextShadow::default(),
+      ],
+    )
+  }
+
+  /// 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<BigRedButton>>,
+    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;
+    }
+  }
+
+  // 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<BigRedButton>>,
+    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<BigRedButton>>,
+    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<BigRedButton>>,
+    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;
+    }
+  }
+}
+
+/// Button marker for closing (despawning) an in-game menu entity.
+#[derive(Component)]
+#[require(Button)]
+pub struct CloseButton(Entity);
+
+impl CloseButton {
+  /// 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),
+        height: Px(20.0),
+        aspect_ratio: Some(1.0),
+        align_items: AlignItems::Center,
+        justify_content: JustifyContent::Center,
+        border: UiRect::all(Px(1.0)),
+        ..Default::default()
+      },
+      // TODO: Get colors *somehow.*
+      // - Turn this function into a Bevy System, require `Res<...>`
+      // - Just pass in the colors, let the caller figure out sourcing them.
+      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"),
+        TextColor(BLACK.into()),
+      )],
+    )
+  }
+
+  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 button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<CloseButton>>,
+    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.quiet_hover_bg;
+      border.0 = ui_theme.quiet_hover_border;
+    }
+  }
+
+  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;
+      border.0 = ui_theme.quiet_border;
+    }
+  }
+
+  fn press_start(
+    event: Trigger<Pointer<Pressed>>,
+    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_pressed_bg;
+      border.0 = ui_theme.quiet_pressed_border;
+    }
+  }
+
+  fn press_stop(
+    event: Trigger<Pointer<Released>>,
+    mut commands: Commands,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor, &CloseButton)>,
+    ui_theme: Res<UiTheme>,
+  ) {
+    if let Ok((mut bg, mut border, CloseButton(target))) = button_colors.get_mut(event.target()) {
+      bg.0 = ui_theme.quiet_bg;
+      border.0 = ui_theme.quiet_border;
+      commands.entity(*target).despawn();
+    }
+  }
+}
+
+/// 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!");
+    }
+  }
+}