Integrate battle game

BattleMinigame/BattleClasses.js

@@ -91,7 +91,7 @@
 
     faint() {
       audio.Battle.stop();
-      const dialogBoxElement = document.querySelector('#dialogueBox');
+      const dialogBoxElement = document.querySelector('#dialogue');
       dialogBoxElement.innerHTML = this.name + ' fainted!';
       gsap.to(this.position, {
         y: this.position.y + 20,
@@ -161,6 +161,7 @@
       let dealedDamage = calculateBattleDamage(attack.damage, effectivenessFactor)[0]
       let Critical = calculateBattleDamage(attack.damage, effectivenessFactor)[1]
       recipient.health -= dealedDamage
+      attack.sound.play()
       handleBattleDialog(this.name, attack.name, Critical, effectivenessFactor)
 
       switch (attack.name) {
@@ -201,7 +202,7 @@
         case 'Fireball':
 
           const fireballImage = new Image();
-          fireballImage.src = 'BattleMinigame/BattleMinigameData/fireball.png';
+          fireballImage.src = '../BattleMinigame/BattleMinigameData/fireball.png';
           const fireball = new Sprite({
             position: {
               x: this.position.x,
@@ -245,7 +246,7 @@
           break;
         case 'IceShard':
           const iceshardImage = new Image();
-          iceshardImage.src = 'BattleMinigame/BattleMinigameData/IceShatter_96x96.png';
+          iceshardImage.src = '../BattleMinigame/BattleMinigameData/IceShatter_96x96.png';
           const iceshard = new Sprite({
             position: {
               x: this.position.x,
@@ -289,7 +290,7 @@
           break;
         case 'ThunderStrike':
           const thunderImage = new Image();
-          thunderImage.src = 'BattleMinigame/BattleMinigameData/HolyExplosion_96x96.png';
+          thunderImage.src = '../BattleMinigame/BattleMinigameData/HolyExplosion_96x96.png';
           const thunder = new Sprite({
             position: {
               x: this.position.x,
@@ -333,7 +334,7 @@
           break;
         case 'FireArrow':
           const arrowImage = new Image();
-          arrowImage.src = 'BattleMinigame/BattleMinigameData/fireball.png';
+          arrowImage.src = '../BattleMinigame/BattleMinigameData/fireball.png';
           const arrow = new Sprite({
             position: {
               x: this.position.x,

BattleMinigame/BattleGetData.js

@@ -3,19 +3,19 @@
   function getBackgroundImage(weatherCondition) {
     switch (weatherCondition) {
       case '-20DEG':
-        return 'BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
+        return '../BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
       break
       case '-10DEG':
-        return 'BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
+        return '../BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
       break
       case '0DEG':
-        return 'BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
+        return '../BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
         break;
       case '10DEG':
-        return 'BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
+        return '../BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
         break;
       case '20DEG':
-        return 'BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
+        return '../BattleMinigame/BattleMinigameData/FinalFightBackground.jpg'
         break;
     }
   }

BattleMinigame/BattleInit.js

@@ -7,4 +7,5 @@
   screen.height = 576;
 
   // Get modal of battleminigame
-  const minigameModal =  document.querySelector('#modal');
+  const minigameModal =  document.querySelector('#battleMinigameModal');
+  minigameModal.style.display = 'none';

BattleMinigame/BattleMain.js

@@ -23,6 +23,12 @@
 
    // Load Data for new battle instance
   function initBattle(weatherCondition) {
+
+    minigameModal.style.display = 'block';
+    const infoScroll = document.querySelector('#scroll')
+    const dialogueMain = document.querySelector('#dialogue')
+    dialogueMain.style.display = 'none'
+    infoScroll.style.display = 'none'
     document.querySelector('#dialogueBox').style.display = 'none'
     document.querySelector('#attacksBox').replaceChildren()
 
@@ -50,13 +56,17 @@
     image: battleBackgroundImage,
     });
 
+    audio.Battle.play();
     animateBattle()
 
     draggle.resetPosition()
     // Create a button for each player's attacks
     emby.attacks.forEach(attack => {
     const button = document.createElement('button');
     button.innerHTML = attack.name;
+    button.addEventListener("mouseover", async() => {
+      audio.Hover.play()
+    })
     document.querySelector('#attacksBox').append(button);
     });
 
@@ -76,6 +86,7 @@
         // Push an enemy.faint() method to the queue
         queue.push(() => {
           // Game Won! :]
+          audio.BattleVictory.play()
           draggle.faint();
         });
         // After fainting push an animation event (gsap.to) to the queue
@@ -84,9 +95,11 @@
             opacity: 1,
             // On animation completion disable the display of minigameModal
             onComplete: () => {
-              returnHP(emby.health)
+              // returnHP(emby.health)
               cancelAnimationFrame(animationID)
               minigameModal.style.display = 'none';
+              document.querySelector('#scroll').style.display = 'block'
+              document.querySelector('#dialogue').style.display = 'block'
               gsap.to('#overlappingDiv', {
                 opacity: 0,
               })
@@ -111,6 +124,7 @@
           // push an enemy.faint method to the queue
           queue.push(() => {
             // Peli Hävitty!
+            audio.BattleLose.play()
             emby.faint();
           });
           // After the enemy.faint method push an animation event to the queue
@@ -119,9 +133,11 @@
               opacity: 1,
               // On completion of the animation disable the minigameModal display
               onComplete: () => {
-                returnHP(emby.health)
+                // returnHP(emby.health)
                 cancelAnimationFrame(animationID)
                 minigameModal.style.display = 'none';
+                document.querySelector('#scroll').style.display = 'block'
+                document.querySelector('#dialogue').style.display = 'block'
                 gsap.to('#overlappingDiv', {
                   opacity: 0,
                 })
@@ -152,8 +168,6 @@
     });
   }
 
-  initBattle("20DEG")
-
   // Add an event listener to the dialogBox which appears when there is a method in the queue
    document.querySelector('#dialogueBox').
       addEventListener('click', (e) => {
@@ -168,35 +182,25 @@
         }
       });
 
-  // Start the audio once when player has clicked anywhere on the window
-   addEventListener('click', () => {
-    if (!clicked) {
-      audio.Battle.play();
-      clicked = true;
-    }
-  });
-
-  // Handling for initializing battle.
+  // Handling for initializing battle in battledebug.html.
   // shows the modal in which the battle resides
   const debugActivateElement = document.querySelector('#DEBUGACTIVATE')
 
   debugActivateElement.addEventListener('click', () => {
-      const minigameModal = document.querySelector('#modal');
-      minigameModal.style.display = 'block';
       initBattle("-20DEG")
   });
 
-  async function returnHP(playerHp) {
-    try {
-      const roundHP = Math.floor(playerHp)
-      const response = await fetch(`http://127.0.0.1:5000/getPlayerHp?playerHp=${roundHP}`)
-      const jsonResponse = await response.json()
-      console.log(jsonResponse)
-    }
-    catch (error) {
-      console.log(error)
-    }
-    finally {
-      console.log("Game Data Saved to DB")
-    }
-  }
+  // async function returnHP(playerHp) {
+  //   try {
+  //     const roundHP = Math.floor(playerHp)
+  //     const response = await fetch(`http://127.0.0.1:5000/getPlayerHp?playerHp=${roundHP}`)
+  //     const jsonResponse = await response.json()
+  //     console.log(jsonResponse)
+  //   }
+  //   catch (error) {
+  //     console.log(error)
+  //   }
+  //   finally {
+  //     console.log("Game Data Saved to DB")
+  //   }
+  // }

BattleMinigame/BattleMinigameJSData/Attacks.js

@@ -1,32 +1,37 @@
 const attacks = {
   Tackle: {
     name: 'Tackle',
-    damage: 100,
+    damage: 25,
     type: 'Normal',
-    color: 'beige'
+    color: 'beige',
+    sound: audio.Tackle,
   },
   Fireball: {
     name: 'Fireball',
-    damage: 100,
+    damage: 30,
     type: 'Fire',
-    color: 'orange'
+    color: 'orange',
+    sound: audio.Fire,
   },
   IceShard: {
     name: 'IceShard',
-    damage: 100,
+    damage: 30,
     type: 'Ice',
-    color: 'blue'
+    color: 'blue',
+    sound: audio.Ice,
   },
   ThunderStrike: {
     name: 'ThunderStrike',
-    damage: 100,
+    damage: 30,
     type: 'Electric',
-    color: 'yellow'
+    color: 'yellow',
+    sound: audio.Thunder,
   },
   FireArrow: {
     name: "FireArrow",
-    damage: 100,
+    damage: 25,
     type: 'Fire',
-    color: "orange"
+    color: "orange",
+    sound: audio.Fire,
   },
 }

BattleMinigame/BattleMinigameJSData/Audio.js

@@ -1,6 +1,35 @@
 const audio = {
   Battle: new Howl({
-    src: 'BattleMinigame/BattleMinigameData/Lairbound_battle.mp3',
+    src: '../BattleMinigame/BattleMinigameData/Lairbound_battle.mp3',
     html5: true
-  })
-}
+  }),
+  BattleLose: new Howl({
+    src: '../FrontendMKII/sound/lose.wav',
+    html5: true
+  }),
+  BattleVictory: new Howl({
+    src: '../FrontendMKII/sound/victory.wav',
+    html5: true
+  }),
+  Hover: new Howl({
+    src: '../FrontendMKII/sound/hover.mp3',
+    html5: true
+  }),
+  Tackle: new Howl({
+    src: '../FrontendMKII/sound/attack.mp3',
+    html5: true
+  }),
+  Fire: new Howl({
+    src: '../FrontendMKII/sound/fireball.mp3',
+    html5: true
+  }),
+  Ice: new Howl({
+    src: '../FrontendMKII/sound/ice.wav',
+    html5: true
+  }),
+  Thunder: new Howl({
+    src: '../FrontendMKII/sound/thunder.wav',
+    html5: true
+  }),
+}
+

BattleMinigame/BattleMinigameJSData/Monsters.js

@@ -5,7 +5,7 @@ const monsters = {
         y: 280,
       },
       image: {
-        src: 'BattleMinigame/BattleMinigameData/PlayerDragonSprite.png'
+        src: '../BattleMinigame/BattleMinigameData/PlayerDragonSprite.png'
       },
       frames: {
         max: 4,
@@ -26,7 +26,7 @@ const monsters = {
         x: 730,
         y: 320,
       },
-      image: {src: 'BattleMinigame/BattleMinigameData/YoungIceDragonSprite.png'},
+      image: {src: '../BattleMinigame/BattleMinigameData/YoungIceDragonSprite.png'},
       frames: {
         max: 4,
         hold: 60,
@@ -43,7 +43,7 @@ const monsters = {
         x: 730,
         y: 330,
       },
-      image: {src: 'BattleMinigame/BattleMinigameData/knightSprite.png'},
+      image: {src: '../BattleMinigame/BattleMinigameData/knightSprite.png'},
       frames: {
         max: 4,
         hold: 60,
@@ -60,7 +60,7 @@ const monsters = {
         x: 730,
         y: 330,
       },
-      image: {src: 'BattleMinigame/BattleMinigameData/goblinSprite.png'},
+      image: {src: '../BattleMinigame/BattleMinigameData/goblinSprite.png'},
       frames: {
         max: 4,
         hold: 60,
@@ -77,7 +77,7 @@ const monsters = {
         x: 730,
         y: 220,
       },
-      image: {src: 'BattleMinigame/BattleMinigameData/iceGolemSprite.png'},
+      image: {src: '../BattleMinigame/BattleMinigameData/iceGolemSprite.png'},
       frames: {
         max: 4,
         hold: 60,