added sounds and sound library

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-_site
+_site
+assets/sounds/405423__straget__wall-clock-ticking.wav

assets/js/init.js

@@ -1,6 +1,7 @@
 //-script.
 // load and setup swup
 let swup;
+let globalSounds = {};
 $(document).ready(()=>{
     swup = new Swup({
         plugins: [new SwupScrollPlugin()]
@@ -12,7 +13,10 @@ $(document).ready(()=>{
     });
 
     // look for script with data-load-script and exec
-    swup.on('contentReplaced', loadScripts)
+    swup.on('contentReplaced', loadScripts);
+
+    // init sounds
+    loadGlobalSounds();
 });
 
 
@@ -24,5 +28,17 @@ function loadScripts() {
     try { swup.scrollTo(document.body, 0); } catch {}
 }
 
+// function for loading global win and fail sounds
+function loadGlobalSounds() {
+    if (Howl) {
+        globalSounds.win = new Howl({ 
+            src: '/assets/sounds/win.mp3'
+        });
+        globalSounds.fail = new Howl({ 
+            src: '/assets/sounds/fail.mp3'
+        });
+    }
+}
+
 // simple reverse string function
 const reverse = str => String(str).split("").reverse().join("");

assets/js/level-adhd.js

@@ -23,6 +23,9 @@ var adhd = {
     order: [],
     orderIndex: 0,
 
+    // sounds
+    sounds: {},
+
     // initialisation
     init() {
 
@@ -37,6 +40,9 @@ var adhd = {
         console.log(this.shuffle([0, 1, 2, 3, 4]));
         this.addOrder();
 
+        // sound
+        this.loadSounds();
+
     },
 
     addOrder() {
@@ -53,6 +59,8 @@ var adhd = {
 
     // function called by bomb wire buttons
     cutWire(index) {
+        this.sounds.snip.play();
+
         if (index == this.order[this.orderIndex]) {
 
             // CORRECT WIRE
@@ -72,8 +80,7 @@ var adhd = {
     },
 
 
-    // creating order
-
+    // creating order shuffle function
     shuffle(array) {
         for (var i = array.length - 1; i > 0; i--) {
             var j = Math.floor(Math.random() * (i + 1));
@@ -84,7 +91,8 @@ var adhd = {
         return array;
     },
 
-    // methods
+    // runs every 41 ms ~= 24 fps
+    // updates clock and stops game if time is up
     updateClock() {
 
         adhd.time = new Date(adhd.TOTAL_TIME - (new Date().getTime() - adhd.startTime));
@@ -120,29 +128,69 @@ var adhd = {
     },
 
     hidePopUp() {
+        // hide
         $('#popup').removeClass('active');
+        // play alarm if not yet playing
+        //if (!this.sounds.alarm.playing()) this.sounds.alarm.play();
+        this.sounds.alarm.mute(false);
     },
 
     showPopUp(time = '00:30') {
+        // show
         $('#popup').addClass('active');
 
         time = ' '+time+'!!';
         $('#time').text( $('#time').attr('data-original-text') + time);
     },
 
+
+    // register SOUNDS
+    loadSounds() {
+        // load alarm sound: loop
+        this.sounds.alarm = new Howl({
+            src: '/assets/sounds/alarm.mp3',
+            loop: true,
+            autoplay: true
+        });
+
+        // explosion: one-shot
+        this.sounds.explosion = new Howl({
+            src: '/assets/sounds/explosion.mp3',
+            loop: false,
+            autoplay: false
+        });
+
+        // wire cut: one-shot
+        this.sounds.snip = new Howl({
+            src: '/assets/sounds/snip.mp3',
+            loop: false,
+            autoplay: false
+        });
+    },
+
+    // quickly stop all sounds
+    stopSounds() {
+        this.sounds.alarm.stop();
+    },
+
     // WIN GAME
     endGame() {
         console.log('you win');
 
         clearInterval(this.clockInterval);
         showScore(100 + (this.time.getSeconds() + this.time.getMinutes()*60) * 3.3); // calc score based on time left
+
+        adhd.stopSounds();
     },
 
     // hide game and show explosion
     stopGame() {
         clearInterval(this.clockInterval);
         $('#in-game').empty();
         $('#fail').addClass('active');
+
+        this.stopSounds();
+        this.sounds.explosion.play();
     },
 
     retry() {
@@ -155,5 +203,6 @@ var adhd = {
 adhd.init();
 
 function unload() {
+    adhd.stopSounds();
     delete adhd;
 }

assets/js/stars.js

@@ -33,6 +33,12 @@ function showScore(score = 0) {
     // show it
     $('#score-background').css('display', 'flex');
 
+    // play it
+    if (score < 100) 
+        globalSounds.fail.play();
+    else
+        globalSounds.win.play();
+
     // animate it (remove animation class)
     setTimeout(() => { $('#score').removeClass('is-animating') }, 100);
 

src/_includes/layouts/head.pug

@@ -31,6 +31,9 @@ head
 	script(src='/assets/js/SwupScrollPlugin.min.js')
 	script(src='/assets/js/init.js')
 
+	//- howler audio library
+	script(src='/assets/js/howler.core.min.js')
+
 	//- star script
 	script(src='/assets/js/stars.js')
 	//- timer script

styles/_head.scss

@@ -91,4 +91,5 @@ a:focus, button:focus {
 
 button {
     border: none;
+    font-family: $fontFamily;
 }