Initial card => tilemap

This finally shows the basic operating principle of the machine UIs.
There will be some object out in the world that, when clicked, will open
a new UI screen to operate the machine.

Next up is to attach various bits of info, like a `Fuel` component on
the machine which the UI widget locates and displays as text. This gives
me the infrastructure necessary to begin that work.

Cargo.toml

@@ -6,6 +6,7 @@ edition = "2024"
 [dependencies]
 bevy = { version = "0.16.1", features = ["dynamic_linking"] }
 bevy-inspector-egui = "0.33.1"
+bevy_ecs_tilemap = "0.16.0"
 
 [profile.dev]
 opt-level = 1

src/assets.rs

@@ -2,14 +2,14 @@ use bevy::prelude::*;
 use std::path::Path;
 
 pub struct TileImage {
-  name: &'static str,
+  pub name: &'static str,
-  thumbnail_handle: Handle<Image>,
+  pub thumbnail_handle: Handle<Image>,
-  tile_handle: Handle<Image>,
+  pub tile_handle: Handle<Image>,
 }
 
 #[derive(Resource)]
 pub struct AssetLibrary {
-  tile_images: Vec<TileImage>,
+  pub tile_images: Vec<TileImage>,
 }
 
 impl AssetLibrary {
@@ -33,7 +33,8 @@ impl AssetLibrary {
       "corner-sw-3-walls",
       "full-0-walls",
       "full-1-wall",
-      "full-2-walls",
+      "full-2-walls-corner",
+      "full-2-walls-hallway",
       "full-3-walls",
       "full-4-walls",
     ];
@@ -59,6 +60,15 @@ impl AssetLibrary {
     Self { tile_images }
   }
 
+  pub fn get_index(&self, name: &str) -> Option<u32> {
+    self
+      .tile_images
+      .iter()
+      .enumerate()
+      .find(|(_, tile)| tile.name == name)
+      .map(|(index, _)| index as u32)
+  }
+
   pub fn get_thumbnail(&self, name: &str) -> Option<Handle<Image>> {
     self
       .tile_images

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 {
@@ -12,6 +14,25 @@ pub enum Cell {
   Filled,
 }
 
+#[derive(Clone, Copy, Debug)]
+pub struct Walls {
+  pub north: bool,
+  pub east: bool,
+  pub south: bool,
+  pub west: bool,
+}
+
+impl Walls {
+  pub fn new(north: bool, east: bool, south: bool, west: bool) -> Self {
+    Self {
+      north,
+      east,
+      south,
+      west,
+    }
+  }
+}
+
 #[derive(Clone, Copy, Debug)]
 pub enum CutLine {
   VertLeft,
@@ -47,17 +68,17 @@ 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],
+  pub cells: [Cell; 9],
-  nw: bool,
+  pub nw: bool,
-  n: bool,
+  pub n: bool,
-  ne: bool,
+  pub ne: bool,
-  w: bool,
+  pub w: bool,
-  e: bool,
+  pub e: bool,
-  sw: bool,
+  pub sw: bool,
-  s: bool,
+  pub s: bool,
-  se: bool,
+  pub se: bool,
 }
 
 impl Card {

src/game/map.rs

@@ -0,0 +1,439 @@
+use bevy::prelude::*;
+use bevy_ecs_tilemap::prelude::*;
+
+use crate::assets::AssetLibrary;
+use crate::card::{Card, Cell, Walls};
+
+pub fn setup_test_tilemap(mut commands: Commands, assets: Res<AssetLibrary>) {
+  let tilemap_entity = commands.spawn_empty().id();
+  let tilemap_id = TilemapId(tilemap_entity);
+
+  let map_size = TilemapSize { x: 9, y: 9 };
+  let mut tile_storage = TileStorage::empty(map_size);
+
+  let card = Card {
+    cells: [
+      Cell::NW,
+      Cell::Filled,
+      Cell::NE,
+      Cell::Filled,
+      Cell::Filled,
+      Cell::Filled,
+      Cell::SW,
+      Cell::Filled,
+      Cell::SE,
+    ],
+    ..Default::default()
+  };
+
+  add_card_to_tilemap(
+    &card,
+    &assets,
+    TilePos { x: 0, y: 2 },
+    tilemap_id,
+    &mut commands,
+    &mut tile_storage,
+  );
+
+  let tile_size = TilemapTileSize { x: 48.0, y: 48.0 };
+  let grid_size = tile_size.into();
+  let map_type = TilemapType::default();
+
+  let texture_handles = assets
+    .tile_images
+    .iter()
+    .map(|image| image.tile_handle.clone())
+    .collect();
+
+  commands.entity(tilemap_entity).insert(TilemapBundle {
+    grid_size,
+    map_type,
+    size: map_size,
+    storage: tile_storage,
+    texture: TilemapTexture::Vector(texture_handles),
+    tile_size,
+    anchor: TilemapAnchor::BottomLeft,
+    ..Default::default()
+  });
+}
+
+/// Returns a cell description for a tilemap, including the texture index and a flip configuration
+fn get_cell_description(
+  cell: &Cell,
+  walls: &Walls,
+  assets: &AssetLibrary,
+) -> Option<(u32, TileFlip)> {
+  // Filter allowed walls
+  let walls = match cell {
+    Cell::NW => Walls {
+      north: false,
+      east: walls.east,
+      south: walls.south,
+      west: false,
+    },
+    Cell::NE => Walls {
+      north: false,
+      east: false,
+      south: walls.south,
+      west: walls.west,
+    },
+    Cell::SE => Walls {
+      north: walls.north,
+      east: false,
+      south: false,
+      west: walls.west,
+    },
+    Cell::SW => Walls {
+      north: walls.north,
+      east: walls.east,
+      south: false,
+      west: false,
+    },
+    _ => *walls,
+  };
+
+  let wall_count = (if walls.north { 1 } else { 0 })
+    + (if walls.east { 1 } else { 0 })
+    + (if walls.south { 1 } else { 0 })
+    + (if walls.west { 1 } else { 0 });
+
+  match (cell, wall_count) {
+    (Cell::Empty, _) => None,
+    (Cell::NW, 0) => Some((
+      assets.get_index("corner-nw-1-wall").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::NW, 1) => {
+      if walls.east {
+        Some((
+          assets.get_index("corner-nw-2-walls-east").unwrap(),
+          TileFlip::default(),
+        ))
+      } else if walls.south {
+        Some((
+          assets.get_index("corner-nw-2-walls-south").unwrap(),
+          TileFlip::default(),
+        ))
+      } else {
+        unreachable!()
+      }
+    }
+    (Cell::NW, 2) => Some((
+      assets.get_index("corner-nw-3-walls").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::NE, 0) => Some((
+      assets.get_index("corner-ne-1-wall").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::NE, 1) => {
+      if walls.west {
+        Some((
+          assets.get_index("corner-ne-2-walls-west").unwrap(),
+          TileFlip::default(),
+        ))
+      } else if walls.south {
+        Some((
+          assets.get_index("corner-ne-2-walls-south").unwrap(),
+          TileFlip::default(),
+        ))
+      } else {
+        unreachable!()
+      }
+    }
+    (Cell::NE, 2) => Some((
+      assets.get_index("corner-ne-3-walls").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::SE, 0) => Some((
+      assets.get_index("corner-se-1-wall").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::SE, 1) => {
+      if walls.west {
+        Some((
+          assets.get_index("corner-se-2-walls-west").unwrap(),
+          TileFlip::default(),
+        ))
+      } else if walls.north {
+        Some((
+          assets.get_index("corner-se-2-walls-north").unwrap(),
+          TileFlip::default(),
+        ))
+      } else {
+        unreachable!()
+      }
+    }
+    (Cell::SE, 2) => Some((
+      assets.get_index("corner-se-3-walls").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::SW, 0) => Some((
+      assets.get_index("corner-sw-1-wall").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::SW, 1) => {
+      if walls.east {
+        Some((
+          assets.get_index("corner-sw-2-walls-east").unwrap(),
+          TileFlip::default(),
+        ))
+      } else if walls.north {
+        Some((
+          assets.get_index("corner-sw-2-walls-north").unwrap(),
+          TileFlip::default(),
+        ))
+      } else {
+        unreachable!()
+      }
+    }
+    (Cell::SW, 2) => Some((
+      assets.get_index("corner-sw-3-walls").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::Filled, 0) => Some((
+      assets.get_index("full-0-walls").unwrap(),
+      TileFlip::default(),
+    )),
+    (Cell::Filled, 1) => {
+      if walls.north {
+        Some((
+          assets.get_index("full-1-wall").unwrap(),
+          TileFlip::default(),
+        ))
+      } else if walls.east {
+        Some((
+          assets.get_index("full-1-wall").unwrap(),
+          TileFlip {
+            x: true,
+            y: false,
+            d: true,
+          },
+        ))
+      } else if walls.south {
+        Some((
+          assets.get_index("full-1-wall").unwrap(),
+          TileFlip {
+            x: false,
+            y: true,
+            d: false,
+          },
+        ))
+      } else {
+        // walls.west
+        Some((
+          assets.get_index("full-1-wall").unwrap(),
+          TileFlip {
+            x: false,
+            y: false,
+            d: true,
+          },
+        ))
+      }
+    }
+    (Cell::Filled, 2) => {
+      if walls.west && walls.north {
+        Some((
+          assets.get_index("full-2-walls-corner").unwrap(),
+          TileFlip::default(),
+        ))
+      } else if walls.north && walls.east {
+        Some((
+          assets.get_index("full-2-walls-corner").unwrap(),
+          TileFlip {
+            x: true,
+            y: false,
+            d: false,
+          },
+        ))
+      } else if walls.east && walls.south {
+        Some((
+          assets.get_index("full-2-walls-corner").unwrap(),
+          TileFlip {
+            x: true,
+            y: true,
+            d: false,
+          },
+        ))
+      } else if walls.south && walls.west {
+        Some((
+          assets.get_index("full-2-walls-corner").unwrap(),
+          TileFlip {
+            x: false,
+            y: true,
+            d: false,
+          },
+        ))
+      } else if walls.north && walls.south {
+        Some((
+          assets.get_index("full-2-walls-hallway").unwrap(),
+          TileFlip {
+            x: false,
+            y: false,
+            d: false,
+          },
+        ))
+      } else if walls.east && walls.west {
+        Some((
+          assets.get_index("full-2-walls-hallway").unwrap(),
+          TileFlip {
+            x: false,
+            y: false,
+            d: true,
+          },
+        ))
+      } else {
+        unreachable!()
+      }
+    }
+    (Cell::Filled, 3) => {
+      if !walls.north {
+        Some((
+          assets.get_index("full-3-walls").unwrap(),
+          TileFlip {
+            x: false,
+            y: true,
+            d: true,
+          },
+        ))
+      } else if !walls.east {
+        Some((
+          assets.get_index("full-3-walls").unwrap(),
+          TileFlip::default(),
+        ))
+      } else if !walls.south {
+        Some((
+          assets.get_index("full-3-walls").unwrap(),
+          TileFlip {
+            x: false,
+            y: false,
+            d: true,
+          },
+        ))
+      } else if walls.west {
+        Some((
+          assets.get_index("full-3-walls").unwrap(),
+          TileFlip {
+            x: true,
+            y: false,
+            d: false,
+          },
+        ))
+      } else {
+        unreachable!()
+      }
+    }
+    (Cell::Filled, 4) => Some((
+      assets.get_index("full-4-walls").unwrap(),
+      TileFlip::default(),
+    )),
+    _ => unreachable!(),
+  }
+}
+
+/// Returns an array of cell descriptions, starting from the top right tile and moving right to left, top to bottom
+fn get_card_description(card: &Card, assets: &AssetLibrary) -> [Option<(u32, TileFlip)>; 9] {
+  let mut walls = [
+    Walls::new(true, false, false, true),
+    Walls::new(true, false, false, false),
+    Walls::new(true, true, false, false),
+    Walls::new(false, false, false, true),
+    Walls::new(false, false, false, false),
+    Walls::new(false, true, false, false),
+    Walls::new(false, false, true, true),
+    Walls::new(false, false, true, false),
+    Walls::new(false, true, true, false),
+  ];
+
+  if card.cells[0] == Cell::Empty {
+    walls[1].west = true;
+    walls[3].north = true;
+  }
+  if card.cells[1] == Cell::Empty {
+    walls[0].east = true;
+    walls[2].west = true;
+    walls[4].north = true;
+  }
+  if card.cells[2] == Cell::Empty {
+    walls[1].east = true;
+    walls[5].north = true;
+  }
+  if card.cells[3] == Cell::Empty {
+    walls[0].south = true;
+    walls[4].west = true;
+    walls[6].north = true;
+  }
+  if card.cells[4] == Cell::Empty {
+    walls[1].south = true;
+    walls[3].east = true;
+    walls[5].west = true;
+    walls[7].north = true;
+  }
+  if card.cells[5] == Cell::Empty {
+    walls[2].south = true;
+    walls[4].east = true;
+    walls[8].north = true;
+  }
+  if card.cells[6] == Cell::Empty {
+    walls[7].west = true;
+    walls[3].south = true;
+  }
+  if card.cells[7] == Cell::Empty {
+    walls[6].east = true;
+    walls[8].west = true;
+    walls[4].south = true;
+  }
+  if card.cells[8] == Cell::Empty {
+    walls[7].east = true;
+    walls[5].south = true;
+  }
+
+  card
+    .cells
+    .iter()
+    .zip(walls.iter())
+    .map(|(cell, walls)| get_cell_description(cell, walls, assets))
+    .collect::<Vec<_>>()
+    .try_into()
+    .unwrap()
+}
+
+fn add_card_to_tilemap(
+  card: &Card,
+  assets: &AssetLibrary,
+  top_left: TilePos,
+  tilemap_id: TilemapId,
+  commands: &mut Commands,
+  tile_storage: &mut TileStorage,
+) {
+  get_card_description(card, assets)
+    .iter()
+    .enumerate()
+    .for_each(|(index, desc)| {
+      let dx = (index as u32) % 3;
+      let dy = (index as u32) / 3;
+
+      let position = TilePos {
+        x: top_left.x + dx,
+        y: top_left.y - dy,
+      };
+
+      match desc {
+        Some((texture_index, flip)) => {
+          let tile_entity = commands
+            .spawn(TileBundle {
+              position,
+              tilemap_id,
+              texture_index: TileTextureIndex(*texture_index),
+              flip: *flip,
+              ..Default::default()
+            })
+            .id();
+          tile_storage.set(&position, tile_entity);
+        }
+        None => {
+          tile_storage.remove(&position);
+        }
+      };
+    });
+}

src/game/mod.rs

@@ -1,6 +1,8 @@
-
 use bevy::prelude::*;
 
+pub mod map;
+pub mod player;
+
 /// Data component for info about the player's current set of cards.
 ///
 /// [`Self::capacity`] is the maximum hand size.

src/game/player.rs

@@ -0,0 +1,28 @@
+use bevy::prelude::*;
+
+#[derive(Component)]
+#[require(Transform)]
+pub struct Player;
+
+pub fn spawn_player(
+  mut commands: Commands,
+  mut meshes: ResMut<Assets<Mesh>>,
+  mut materials: ResMut<Assets<ColorMaterial>>,
+) {
+  let shape = Circle::new(12.0);
+  let mesh = meshes.add(shape);
+
+  let color = Color::srgb(1., 0., 0.);
+  let material = materials.add(color);
+
+  commands.spawn((
+    Player,
+    Mesh2d(mesh),
+    MeshMaterial2d(material),
+    Transform::from_translation(Vec3 {
+      x: 72.,
+      y: 72.,
+      z: 1.,
+    }),
+  ));
+}

src/main.rs

@@ -1,6 +1,12 @@
-use bevy::{prelude::*, window::WindowResolution};
+use bevy::{color::palettes::css::GREEN, prelude::*, window::WindowResolution};
+use bevy_ecs_tilemap::prelude::*;
 use bevy_inspector_egui::{bevy_egui::EguiPlugin, quick::WorldInspectorPlugin};
 
+use crate::{
+  game::machines::{CuttingMachine, RotatingMachine},
+  resources::UiTheme,
+};
+
 mod assets;
 mod card;
 mod game;
@@ -18,6 +24,8 @@ fn main() {
     }))
     .add_plugins(EguiPlugin::default())
     .add_plugins(WorldInspectorPlugin::new())
+    .add_plugins(widgets::GameUiPlugin)
+    .add_plugins(TilemapPlugin)
     .init_resource::<resources::UiTheme>()
     .register_type::<resources::UiTheme>()
     .add_systems(
@@ -25,14 +33,30 @@ fn main() {
       (
         setup,
         assets::load_assets,
-        widgets::spawn_rotator_machine_ui,
+        game::map::setup_test_tilemap,
-      ),
+        dummy_machine,
+      )
+        .chain(),
     )
     .run();
 }
 
 fn setup(mut commands: Commands) {
-  commands.spawn(Camera2d);
+  commands.spawn((
+    Camera2d,
+    Projection::Orthographic(OrthographicProjection {
+      scaling_mode: bevy::render::camera::ScalingMode::AutoMin {
+        min_width: 360.0,
+        min_height: 240.0,
+      },
+      ..OrthographicProjection::default_2d()
+    }),
+    Transform::from_translation(Vec3 {
+      x: 72.,
+      y: 72.,
+      z: 0.,
+    }),
+  ));
 }
 
 /// Generic utility for despawning entities that have a given component.
@@ -41,3 +65,27 @@ fn despawn<T: Component>(mut commands: Commands, to_despawn: Query<Entity, With<
     commands.entity(entity).despawn();
   }
 }
+
+fn dummy_machine(
+  mut commands: Commands,
+  // mut meshes: ResMut<Assets<Mesh>>,
+  // mut materials: ResMut<Assets<ColorMaterial>>,
+) {
+  commands
+    .spawn((
+      Sprite::from_color(GREEN, Vec2::splat(40.0)),
+      // WARN: Mesh picking is not part of the `DefaultPlugins` plugin collection!
+      // (but sprite picking is!)
+
+      // Mesh2d(meshes.add(Rectangle::new(25., 25.))),
+      // MeshMaterial2d(materials.add(ColorMaterial::from_color(GREEN))),
+      Transform::default(),
+      Pickable::default(),
+    ))
+    .observe(
+      |event: Trigger<Pointer<Click>>, commands: Commands, theme: Res<UiTheme>| {
+        let entity = event.target;
+        CuttingMachine::spawn_ui(commands, theme);
+      },
+    );
+}

src/resources.rs

@@ -1,11 +1,16 @@
 //! Program constants & defaults
 
-use bevy::{color::palettes::css::*, prelude::*};
+use bevy::{
+  color::palettes::{css::*, tailwind::SLATE_100},
+  prelude::*,
+};
 
 #[derive(Debug, Reflect, Resource)]
 #[reflect(Resource)]
 pub struct UiTheme {
-  // TODO: Panes
+  // 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
@@ -17,17 +22,37 @@ pub struct UiTheme {
   // 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 {
+  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/machines.rs

@@ -0,0 +1,95 @@
+use bevy::{color::palettes::css::*, prelude::*, ui::Val::*};
+
+use crate::{
+  game::machines::*,
+  resources::UiTheme,
+  widgets::{BigRedButton, machine_ui_base},
+};
+
+impl CuttingMachine {
+  pub fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>) {
+    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((
+        Node {
+          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((
+        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 _button_cmds = cmds.spawn(BigRedButton::bundle("CUT"));
+          // TODO: Attach on-press observer so this machine can do something
+          // in response to that button being pressed
+        });
+    });
+  }
+}
+
+impl RotatingMachine {
+  pub fn spawn_ui(mut commands: Commands, theme: Res<UiTheme>) {
+    let base_entity = machine_ui_base(&mut commands, "Rotating Machine", &theme);
+    commands.entity(base_entity).with_children(|commands| {
+      commands.spawn((
+        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((
+        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.
+        });
+    });
+  }
+}

src/widgets/mod.rs

@@ -1,95 +1,42 @@
 //! Catch-all location for UI bits
 
-use bevy::{
+pub mod machines;
-  color::palettes::{css::*, tailwind::*},
+
-  prelude::*,
+use bevy::{color::palettes::css::*, prelude::*, ui::Val::*};
-  ui::Val::*,
-};
 
 use crate::resources::UiTheme;
 
-pub fn spawn_cutter_machine_ui(mut commands: Commands) {
+/// Plugin to set up systems & resources for the custom UI elements
-  commands
+///
-    .spawn((machine_ui_base("Cutting Machine"),))
+/// The UiTheme resource is initialized and the button press Observers
-    .with_children(|commands| {
+/// are registered here.
-      // Left panel. For fuel or machine stats or whatever.
+pub struct GameUiPlugin;
-      commands.spawn((
-        Node {
-          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)
+impl Plugin for GameUiPlugin {
-      commands.spawn((
+  fn build(&self, app: &mut App) {
-        Node::default(),
+    app
-        BackgroundColor(BLUE.into()),
+      .init_resource::<UiTheme>()
-        Pickable::default(),
+      .register_type::<UiTheme>()
-        children![(
+      .add_observer(CloseButton::hover_start)
-          Text::new("Card cut view placeholder"),
+      .add_observer(CloseButton::hover_stop)
-          TextColor(MAGENTA.into()),
+      .add_observer(CloseButton::press_start)
-          TextShadow::default(),
+      .add_observer(CloseButton::press_stop)
-        ),],
+      .add_observer(BigRedButton::button_hover_start)
-      ));
+      .add_observer(BigRedButton::button_hover_stop)
-      // Right panel for the "CUT" button
+      .add_observer(BigRedButton::button_press_start)
-      commands
+      .add_observer(BigRedButton::button_press_stop);
-        .spawn((
-          Node {
-            align_items: AlignItems::End,
-            ..Default::default()
-          },
-          BackgroundColor(DARK_GRAY.into()),
-          Pickable::default(),
-        ))
-        .with_children(|cmds| spawn_machine_button(cmds, "CUT"));
-    });
   }
-
-pub fn spawn_rotator_machine_ui(mut commands: Commands) {
-  commands
-    .spawn((machine_ui_base("Rotating Machine"),))
-    .with_children(|commands| {
-      commands.spawn((
-        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((
-        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| spawn_machine_button(cmds, "TURN"));
-    });
 }
 
 /// The base panel for the machines that manipulate the room cards.
-fn machine_ui_base(header: impl Into<String>) -> impl Bundle {
+///
-  (
+/// 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,
@@ -113,13 +60,13 @@ fn machine_ui_base(header: impl Into<String>) -> impl Bundle {
 
         ..default()
       },
-    BackgroundColor(SLATE_100.into()),
+      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(3),
+          grid_column: GridPlacement::span(2),
           ..default()
         },
         BackgroundColor(RED.into()),
@@ -129,14 +76,32 @@ fn machine_ui_base(header: impl Into<String>) -> impl Bundle {
           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
 }
 
-// TODO: Hook up action handling (callback? Observer? Some other weird component?)
+/// The "Big Red Button" that makes a machine perform it's action.
-fn spawn_machine_button(commands: &mut ChildSpawnerCommands, text: impl Into<String>) {
+#[derive(Component)]
-  let mut builder = commands.spawn((
+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),
@@ -158,11 +123,7 @@ fn spawn_machine_button(commands: &mut ChildSpawnerCommands, text: impl Into<Str
         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);
   }
 
   /// Re-color the button when a pointer passes over it
@@ -170,7 +131,7 @@ 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>>,
+    mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<BigRedButton>>,
     ui_theme: Res<UiTheme>,
   ) {
     // Get the components for only the Trigger's target entity
@@ -185,7 +146,7 @@ fn button_hover_start(
 
   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()) {
@@ -196,7 +157,7 @@ fn button_hover_stop(
 
   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()) {
@@ -207,7 +168,7 @@ fn button_press_start(
 
   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()) {
@@ -215,3 +176,90 @@ fn button_press_stop(
       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)),
+      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();
+    }
+  }
+}