Demo the UI with a dummy machine

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.

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,

src/game/mod.rs

@@ -1,4 +1,3 @@
-
 use bevy::prelude::*;
 
 /// Data component for info about the player's current set of cards.
@@ -7,7 +6,7 @@ use bevy::prelude::*;
 ///
 /// [`Self::low_water_mark`] is the threshold for drawing new cards on-room-enter.
 #[derive(Component)]
-pub struct PlayerHand{
+pub struct PlayerHand {
   cards: Vec<Entity>,
   capacity: u8,
   low_water_mark: u8,

src/main.rs

@@ -1,6 +1,11 @@
-use bevy::{prelude::*, window::WindowResolution};
+use bevy::{color::palettes::css::GREEN, prelude::*, window::WindowResolution};
 use bevy_inspector_egui::{bevy_egui::EguiPlugin, quick::WorldInspectorPlugin};
 
+use crate::{
+  game::machines::{CuttingMachine, RotatingMachine},
+  resources::UiTheme,
+};
+
 mod assets;
 mod card;
 mod game;
@@ -18,16 +23,8 @@ fn main() {
     }))
     .add_plugins(EguiPlugin::default())
     .add_plugins(WorldInspectorPlugin::new())
-    .init_resource::<resources::UiTheme>()
-    .register_type::<resources::UiTheme>()
-    .add_systems(
-      Startup,
-      (
-        setup,
-        assets::load_assets,
-        widgets::spawn_rotator_machine_ui,
-      ),
-    )
+    .add_plugins(widgets::GameUiPlugin)
+    .add_systems(Startup, (setup, assets::load_assets, dummy_machine))
     .run();
 }
 
@@ -41,3 +38,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,217 +1,265 @@
 //! Catch-all location for UI bits
 
-use bevy::{
-  color::palettes::{css::*, tailwind::*},
-  prelude::*,
-  ui::Val::*,
-};
+pub mod machines;
+
+use bevy::{color::palettes::css::*, prelude::*, ui::Val::*};
 
 use crate::resources::UiTheme;
 
-pub fn spawn_cutter_machine_ui(mut commands: Commands) {
-  commands
-    .spawn((machine_ui_base("Cutting Machine"),))
-    .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()),)],
-      ));
+/// 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;
 
-      // 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| 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"));
-    });
+impl Plugin for GameUiPlugin {
+  fn build(&self, app: &mut App) {
+    app
+      .init_resource::<UiTheme>()
+      .register_type::<UiTheme>()
+      .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);
+  }
 }
 
 /// The base panel for the machines that manipulate the room cards.
-fn machine_ui_base(header: impl Into<String>) -> impl Bundle {
-  (
-    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(SLATE_100.into()),
-    BorderRadius::all(Percent(2.0)),
-    children![(
-      // TODO: A real node with stuff in it (buttons, maybe?)
+///
+/// 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 {
-        justify_content: JustifyContent::Center,
-        grid_column: GridPlacement::span(3),
+        // 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(RED.into()),
-      Pickable::default(),
+      BackgroundColor(theme.pane_bg),
+      BorderRadius::all(Percent(2.0)),
       children![(
-        Text::new(header),
+        // 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)),
+      children![(
+        // TODO: Replace with an icon/sprite
+        Text::new("X"),
         TextColor(BLACK.into()),
-        // TODO: Text shadow, maybe. I couldn't make it look good.
       )],
-    )],
-  )
-}
+    )
+  }
 
-// TODO: Hook up action handling (callback? Observer? Some other weird component?)
-fn spawn_machine_button(commands: &mut ChildSpawnerCommands, text: impl Into<String>) {
-  let mut builder = commands.spawn((
-    Button,
-    Node {
-      width: Px(60.0),
-      height: Px(60.0),
-      aspect_ratio: Some(1.0),
+  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;
+    }
+  }
 
-      // Why is it "align_items" to center the text vertically,
-      // but "justify_*content*" to center it horizontally?
-      align_items: AlignItems::Center,
-      // align_content: AlignContent::Center,
-      justify_content: JustifyContent::Center,
-      border: UiRect::all(Px(2.0)),
-      ..Default::default()
-    },
-    BackgroundColor(RED.into()),
-    BorderColor(DARK_RED.into()),
-    BorderRadius::MAX,
-    children![
-      Text::new(text),
-      TextColor(WHITE.into()),
-      TextShadow::default(),
-    ],
-  ));
-  builder.observe(button_hover_start);
-  builder.observe(button_hover_stop);
-  builder.observe(button_press_start);
-  builder.observe(button_press_stop);
-}
+  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;
+    }
+  }
 
-/// Re-color the button when a pointer passes over it
-fn button_hover_start(
-  event: Trigger<Pointer<Over>>,
-  // Get button background and border colors so we can change them.
-  // Filter for *changed* interactions, and only entities with a [`Button`]
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  // Get the components for only the Trigger's target entity
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_hover_bg;
-    border.0 = ui_theme.brb_hover_border;
-  }
-}
-
-// TODO: Consolidate these with the help of a NewType enum and `trigger_map()`
-// see: https://github.com/bevyengine/bevy/issues/14649
-
-fn button_hover_stop(
-  event: Trigger<Pointer<Out>>,
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_bg;
-    border.0 = ui_theme.brb_border;
-  }
-}
-
-fn button_press_start(
-  event: Trigger<Pointer<Pressed>>,
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_pressed_bg;
-    border.0 = ui_theme.brb_pressed_border;
-  }
-}
-
-fn button_press_stop(
-  event: Trigger<Pointer<Released>>,
-  mut button_colors: Query<(&mut BackgroundColor, &mut BorderColor), With<Button>>,
-  ui_theme: Res<UiTheme>,
-) {
-  if let Ok((mut bg, mut border)) = button_colors.get_mut(event.target()) {
-    bg.0 = ui_theme.brb_bg;
-    border.0 = ui_theme.brb_border;
+  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();
+    }
   }
 }