audio inspector is pretty good actually

bin/audio-inspect.rs

@@ -16,7 +16,7 @@ fn main() {
         ))
         .add_systems(PreStartup, (load,))
         .add_systems(Startup, (init,))
-        .add_systems(Update, (save, update))
+        .add_systems(Update, (save, update, sort_buttons))
         .run()
 }
 
@@ -41,24 +41,22 @@ fn load(server: Res<AssetServer>) {
 fn init(mut commands: Commands) {
     commands.spawn(Camera3dBundle { ..default() });
 
-    commands
+    commands.spawn((
-        .spawn((
         NodeBundle {
             style: Style {
                 width: Val::Percent(100.0),
                 height: Val::Percent(100.0),
                 align_items: AlignItems::FlexStart,
-                    flex_direction: FlexDirection::Column,
+                align_content: AlignContent::FlexStart,
+                flex_direction: FlexDirection::Row,
+                flex_wrap: FlexWrap::Wrap,
                 ..default()
             },
             background_color: BackgroundColor(Color::MIDNIGHT_BLUE),
             ..default()
         },
         Container,
-        ))
+    ));
-        .with_children(|parent| {
-            // Something might go here...
-        });
 }
 
 ///
@@ -89,11 +87,25 @@ fn save(
 
                 commands
                     .spawn((
+                        Name::new(format!("{}", title)),
                         ButtonBundle {
-                            style: Style { ..default() },
+                            style: Style {
+                                border: UiRect::all(Val::Px(1.0)),
+                                margin: UiRect::all(Val::Px(2.0)),
+                                padding: UiRect::all(Val::Px(2.0)),
+                                ..default()
+                            },
+                            border_color: BorderColor(Color::BLACK),
+                            ..default()
+                        },
+                        AudioBundle {
+                            source: handle.clone(),
+                            settings: PlaybackSettings {
+                                mode: bevy::audio::PlaybackMode::Loop,
+                                paused: true,
                                 ..default()
                             },
-                        AudioItem(handle.clone()),
+                        },
                     ))
                     .with_children(|parent| {
                         parent.spawn(TextBundle::from_section(title, style));
@@ -110,5 +122,57 @@ fn save(
     }
 }
 
+fn sort_buttons(
+    mut container: Query<&mut Children, (With<Container>, Changed<Children>)>,
+    names: Query<&Name, With<Parent>>,
+) {
+    container.iter_mut().for_each(|mut children| {
+        children.sort_by(|&a, &b| {
+            names
+                .get(a)
+                .expect("Button has name")
+                .cmp(names.get(b).expect("Button has name"))
+        });
+    });
+}
+
 /// Update loop; play/pause/volume
-fn update() {}
+fn update(
+    mut interactions: Query<
+        (&Interaction, &AudioSink, &mut BackgroundColor),
+        (With<Button>, Changed<Interaction>),
+    >,
+) {
+    interactions
+        .iter_mut()
+        .for_each(|(interaction, sink, mut bg_color)| {
+            // Toggle audio loop
+
+            // Toggle background color
+            bg_color.0 = match interaction {
+                Interaction::Hovered => {
+                    if bg_color.0 == Color::ORANGE {
+                        Color::ORANGE
+                    } else {
+                        Color::ORANGE_RED
+                    }
+                }
+                Interaction::Pressed => {
+                    sink.toggle();
+
+                    if bg_color.0 == Color::ORANGE {
+                        Color::WHITE
+                    } else {
+                        Color::ORANGE
+                    }
+                }
+                Interaction::None => {
+                    if bg_color.0 == Color::ORANGE_RED {
+                        Color::WHITE
+                    } else {
+                        bg_color.0
+                    }
+                }
+            }
+        })
+}