Add ability to resolve absolute URLs; trigger fire, hit, miss sounds (#6)

index.html

@@ -18,6 +18,13 @@
             <app-top-level></app-top-level>
         </div>
 
+        <script>
+            let loc = window.location.href
+            if ( loc.endsWith('index.html') ) loc = loc.slice(0, -('index.html').length)
+            if ( !loc.endsWith('/') ) loc = `${loc}/`
+
+            window.APP_BASE_PATH = loc
+        </script>
         <script src="./lib/vue-2.6.11.js"></script>
         <script src="./lib/vues6.js" type="module"></script>
         <script src="./src/module/start.js" type="module"></script>

src/components/TopLevel.component.js

@@ -198,9 +198,13 @@ export default class TopLevelComponent extends Component {
      * @param {number} row_index
      * @param {number} column_index
      */
-    on_missile_fired([row_index, column_index]) {
+    async on_missile_fired([row_index, column_index]) {
         if ( this.player_is_firing_missiles ) {
-            game_service.attempt_missile_fire([row_index, column_index])
+            await GameSounds.Fire.play()
+            const success = game_service.attempt_missile_fire([row_index, column_index])
+
+            if ( success ) await GameSounds.Hit.play()
+            else await GameSounds.Miss.play()
 
             // Give the user time to see whether they hit or not
             setTimeout(() => {

src/module/sounds.js

@@ -1,3 +1,5 @@
+import { appUrl } from './util.js'
+
 /**
  * A thin wrapper for sound effects.
  */
@@ -23,8 +25,13 @@ class Sound {
     /**
      * Start playing the sound.
      */
-    play() {
-        this.sound.play()
+    async play() {
+        const duration = this.sound.duration
+
+        await this.sound.play()
+        await new Promise(res => {
+            setTimeout(res, duration * 1000)
+        })
     }
 
     /**
@@ -36,11 +43,12 @@ class Sound {
 }
 
 const GameSounds = {
-    Victory: new Sound('/lib/sounds/cartoon_success_fanfair.mp3'),
-    Fire: new Sound('/lib/sounds/zapsplat_warfare_mortar_projectile_launch_002_25232.mp3'),
-    Hit: new Sound('/lib/sounds/zapsplat_warfare_bomb_whizz_in_hit_close_by_explosion_med_003_48060.mp3'),
-    Miss: new Sound('/lib/sounds/zapsplat_nature_water_pour_medium_amount_deep_sudden_fast_002_52765.mp3'),
+    Victory: new Sound(appUrl('/lib/sounds/cartoon_success_fanfair.mp3')),
+    Fire: new Sound(appUrl('/lib/sounds/zapsplat_warfare_mortar_projectile_launch_002_25232.mp3')),
+    Hit: new Sound(appUrl('/lib/sounds/zapsplat_warfare_bomb_whizz_in_hit_close_by_explosion_med_003_48060.mp3')),
+    Miss: new Sound(appUrl('/lib/sounds/zapsplat_nature_water_pour_medium_amount_deep_sudden_fast_002_52765.mp3')),
 }
 
+console.log(GameSounds)
 
 export { GameSounds }

src/module/util.js

@@ -112,3 +112,13 @@ export function clone(obj) {
     }
     return copy
 }
+
+/**
+ * Generate an absolute URL to a file w/in the project directory.
+ * @param {string} path
+ * @return {string}
+ */
+export function appUrl(path) {
+    if ( path.startsWith('/') ) path = path.slice(1)
+    return `${APP_BASE_PATH}${path}`
+}