From 73ff91b42e0fb24d389b3c4c407a375811268117 Mon Sep 17 00:00:00 2001
From: Fabien JUIF <fabien.juif@gmail.com>
Date: Sat, 9 Dec 2023 11:08:39 +0100
Subject: [PATCH] :sparkles: audio

---
 README.md                   |   1 +
 assets/credits.md           |   5 ++++
 assets/sounds/explosion.ogg | Bin 0 -> 11787 bytes
 src/audio.rs                |  48 +++++++++++++++++++++++++++++
 src/main.rs                 |  26 ++++++++++++----
 src/minions.rs              |  40 ++++++++++++++++++-------
 web/index.html              |  58 ++++++++++++++++++++++++------------
 7 files changed, 144 insertions(+), 34 deletions(-)
 create mode 100644 assets/credits.md
 create mode 100644 assets/sounds/explosion.ogg
 create mode 100644 src/audio.rs

diff --git a/README.md b/README.md
index 35919f8..2b2d59a 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@ I aim to explore every aspect of building a game with Bevy without having a spec
 
 - [x] Implement a satisfactory camera (refer to [bevy-cameraman](https://github.com/fabienjuif/bevy_cameraman))
 - [x] Integrate physics/collision mechanics
+- [x] Audio
 - [ ] Develop responsive player control/kinematics
 - [ ] Incorporate particle systems
 - [ ] Explore networking capabilities
diff --git a/assets/credits.md b/assets/credits.md
new file mode 100644
index 0000000..d564e31
--- /dev/null
+++ b/assets/credits.md
@@ -0,0 +1,5 @@
+# Credits
+
+## Audio
+
+- [explosion.ogg](https://freesound.org/people/Werra/sounds/244394/) - edited
diff --git a/assets/sounds/explosion.ogg b/assets/sounds/explosion.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..451a43c86f5ea93e9313f8d239f12b19a2d0d557
GIT binary patch
literal 11787
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
HA58xN-Lsbj

literal 0
HcmV?d00001

diff --git a/src/audio.rs b/src/audio.rs
new file mode 100644
index 0000000..2fedbf8
--- /dev/null
+++ b/src/audio.rs
@@ -0,0 +1,48 @@
+use bevy::prelude::*;
+use bevy_cameraman::Cameraman;
+
+const DEBUG: bool = false;
+
+pub struct AudioPlugin;
+
+impl Plugin for AudioPlugin {
+    fn build(&self, app: &mut App) {
+        app.add_systems(PostStartup, setup);
+    }
+}
+
+fn setup(mut commands: Commands, query_camera: Query<Entity, With<Cameraman>>) {
+    let gap = 200.;
+    let listener = SpatialListener::new(gap);
+
+    for entity in &query_camera {
+        let mut cmd = commands.entity(entity);
+        let cmd = cmd.insert((SpatialBundle::default(), listener.clone()));
+
+        if DEBUG {
+            cmd.with_children(|parent| {
+                // left ear
+                parent.spawn(SpriteBundle {
+                    sprite: Sprite {
+                        color: Color::RED,
+                        custom_size: Some(Vec2::splat(20.0)),
+                        ..default()
+                    },
+                    transform: Transform::from_xyz(-gap / 2.0, 0.0, 0.0),
+                    ..default()
+                });
+
+                // right ear
+                parent.spawn(SpriteBundle {
+                    sprite: Sprite {
+                        color: Color::GREEN,
+                        custom_size: Some(Vec2::splat(20.0)),
+                        ..default()
+                    },
+                    transform: Transform::from_xyz(gap / 2.0, 0.0, 0.0),
+                    ..default()
+                });
+            });
+        }
+    }
+}
diff --git a/src/main.rs b/src/main.rs
index c008585..7fe2994 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,3 +1,4 @@
+mod audio;
 mod castles;
 mod common;
 mod health;
@@ -7,6 +8,7 @@ mod player;
 mod racks;
 mod teams;
 
+use audio::AudioPlugin;
 use bevy::{
     log::{Level, LogPlugin},
     prelude::*,
@@ -24,16 +26,29 @@ use racks::RacksPlugin;
 use teams::TeamsPlugin;
 use xxhash_rust::xxh3::xxh3_64;
 
+const AUDIO_SCALE: f32 = 1. / 100.0;
+
 fn main() {
     let mut app = App::new();
     let seed = b"13U2x";
 
     app.add_plugins((
-        DefaultPlugins.set(LogPlugin {
-            level: Level::TRACE,
-            filter: "wgpu=error,bevy_render=warn,bevy_app=warn,bevy_ecs=warn,naga=warn,gilrs=warn,game::health=info,game::racks=info"
-                .to_string(),
-        }),
+        DefaultPlugins
+            .set(LogPlugin {
+                level: Level::TRACE,
+                filter: [
+                    "wgpu=error",
+                    "bevy_render=warn,bevy_app=warn,bevy_ecs=warn",
+                    "naga=warn",
+                    "gilrs=warn",
+                    "game::health=info,game::racks=info",
+                ]
+                .join(","),
+            })
+            .set(bevy::audio::AudioPlugin {
+                spatial_scale: bevy::audio::SpatialScale::new_2d(AUDIO_SCALE),
+                ..default()
+            }),
         RngPlugin::new().with_rng_seed(xxh3_64(seed)),
         PhysicsPlugin,
         TeamsPlugin,
@@ -42,6 +57,7 @@ fn main() {
         CastlesPlugin,
         HealthPlugin,
         LocalPlayerPlugin,
+        AudioPlugin,
     ))
     // --- camera ---
     .add_plugins((
diff --git a/src/minions.rs b/src/minions.rs
index 344b2de..31f19a8 100644
--- a/src/minions.rs
+++ b/src/minions.rs
@@ -12,6 +12,8 @@ const DESTROY_MINIONS_AFTER_SECS: f32 = 120.;
 const DECAY_VALUE_PER_SEC: f32 = 10.;
 const REWARDS_GOLD: f32 = 1.;
 
+const EXPLOSION_AUDIO_ID: &str = "sounds/explosion.ogg";
+
 pub struct MinionsPlugin;
 
 // TODO: move this into common
@@ -25,21 +27,30 @@ struct Minion {
     had_exploded: bool,
 }
 
+#[derive(Resource)]
+struct AudioExplosion(Handle<AudioSource>);
+
 impl Plugin for MinionsPlugin {
     fn build(&self, app: &mut App) {
-        app.add_systems(
-            Update,
-            (
-                update_move_minions,
-                check_collisions_minions,
-                decay_life,
-                explosion_damage,
-            ),
-        )
-        .add_systems(PostUpdate, (destroy_minions, destroy_after_timer));
+        app.add_systems(Startup, setup_audio)
+            .add_systems(
+                Update,
+                (
+                    update_move_minions,
+                    check_collisions_minions,
+                    decay_life,
+                    explosion_damage,
+                ),
+            )
+            .add_systems(PostUpdate, (destroy_minions, destroy_after_timer));
     }
 }
 
+fn setup_audio(mut commands: Commands, server: Res<AssetServer>) {
+    let handle = server.load(EXPLOSION_AUDIO_ID);
+    commands.insert_resource(AudioExplosion(handle));
+}
+
 #[derive(Bundle)]
 pub struct MinionBundle {
     minion: Minion,
@@ -111,12 +122,14 @@ struct ExplosionBundle {
     sensor: Sensor,
     collider: Collider,
     timer_destroyable: TimeDestroyable,
+    audio: AudioBundle,
 }
 
 impl ExplosionBundle {
     pub fn new(
         meshes: &mut ResMut<Assets<Mesh>>,
         materials: &mut ResMut<Assets<ColorMaterial>>,
+        audio_asset: &Handle<AudioSource>,
         mut translation: Vec3,
         team: Team,
     ) -> Self {
@@ -138,6 +151,10 @@ impl ExplosionBundle {
             timer_destroyable: TimeDestroyable {
                 timer: Timer::from_seconds(0.2, bevy::time::TimerMode::Once),
             },
+            audio: AudioBundle {
+                source: audio_asset.clone(),
+                settings: PlaybackSettings::ONCE.with_spatial(true),
+            },
         }
     }
 }
@@ -239,6 +256,7 @@ fn check_collisions_minions(
     mut commands: Commands,
     mut meshes: ResMut<Assets<Mesh>>,
     mut materials: ResMut<Assets<ColorMaterial>>,
+    audio_explosion: Res<AudioExplosion>,
     mut collision_events: EventReader<CollisionEvent>,
     // queries
     mut query_minions: Query<(&Transform, &Team, &mut Minion), With<Minion>>,
@@ -268,6 +286,7 @@ fn check_collisions_minions(
                     commands.spawn(ExplosionBundle::new(
                         &mut meshes,
                         &mut materials,
+                        &audio_explosion.0,
                         transform_a.translation,
                         team_a.clone(),
                     ));
@@ -305,6 +324,7 @@ fn check_collisions_minions(
                 commands.spawn(ExplosionBundle::new(
                     &mut meshes,
                     &mut materials,
+                    &audio_explosion.0,
                     minion_transform.translation,
                     minion_team.clone(),
                 ));
diff --git a/web/index.html b/web/index.html
index 9c6ec15..8f4124b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,50 +1,70 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>An other bevy 2D game</title>
     <style>
       body {
-        background: linear-gradient(
-          45deg,
-          #4b0082  0%,
-          #8a2be2  100%
-        );
+        background: linear-gradient(45deg, #4b0082 0%, #8a2be2 100%);
         background-repeat: no-repeat;
         background-size: cover;
         height: 100vh;
         margin: 0;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         color: #ffffff;
       }
+
       h1 {
         font-size: 2.5em;
         text-align: center;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
         padding: 2em;
+        margin: 0; /* Remove default margin for better alignment */
       }
-      canvas {
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-        outline: none;
+
+      button {
+        background-color: #ff8c00;
+        color: #ffffff;
+        font-size: 1.5em;
+        padding: 0.5em 1em;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+      }
+
+      button:hover {
+        background-color: #ffa500;
       }
     </style>
   </head>
   <body>
     <h1>An other bevy 2D game</h1>
+    <button onclick="play()">Play</button>
     <script type="module">
-      import init from './wasm_game.js'
-      init()
-    </script>
-    <script>
-        interval = setInterval(function () {
-          let canvas = document.getElementsByTagName("canvas")[0]
+      import init from "./wasm_game.js";
+
+      window.play = function () {
+        // Hide header and button
+        document.querySelector("h1").style.display = "none";
+        document.querySelector("button").style.display = "none";
+
+        // Call your initialization function
+        init();
+
+        // Focus on the canvas
+        let interval = setInterval(function () {
+          let canvas = document.getElementsByTagName("canvas")[0];
           if (canvas) {
-            canvas.focus()
-            clearInterval(interval)
+            canvas.focus();
+            clearInterval(interval);
           }
-        }, 100)
+        }, 100);
+      };
     </script>
   </body>
 </html>