diff --git a/BattleMinigame/BattleClasses.js b/BattleMinigame/BattleClasses.js index bd6ba9c..2da157d 100644 --- a/BattleMinigame/BattleClasses.js +++ b/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, diff --git a/BattleMinigame/BattleGetData.js b/BattleMinigame/BattleGetData.js index ae413a7..c3e2bfa 100644 --- a/BattleMinigame/BattleGetData.js +++ b/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; } } diff --git a/BattleMinigame/BattleInit.js b/BattleMinigame/BattleInit.js index 31bf61e..67005e4 100644 --- a/BattleMinigame/BattleInit.js +++ b/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'; diff --git a/BattleMinigame/BattleMain.js b/BattleMinigame/BattleMain.js index 32a6686..218f826 100644 --- a/BattleMinigame/BattleMain.js +++ b/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,6 +56,7 @@ image: battleBackgroundImage, }); + audio.Battle.play(); animateBattle() draggle.resetPosition() @@ -57,6 +64,9 @@ 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") + // } + // } diff --git a/BattleMinigame/BattleMinigameJSData/Attacks.js b/BattleMinigame/BattleMinigameJSData/Attacks.js index 9203c1a..ecc6e16 100644 --- a/BattleMinigame/BattleMinigameJSData/Attacks.js +++ b/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, }, } \ No newline at end of file diff --git a/BattleMinigame/BattleMinigameJSData/Audio.js b/BattleMinigame/BattleMinigameJSData/Audio.js index d4935f7..3a65be3 100644 --- a/BattleMinigame/BattleMinigameJSData/Audio.js +++ b/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 - }) -} \ No newline at end of file + }), + 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 + }), +} + diff --git a/BattleMinigame/BattleMinigameJSData/Monsters.js b/BattleMinigame/BattleMinigameJSData/Monsters.js index 4f344e1..a141c94 100644 --- a/BattleMinigame/BattleMinigameJSData/Monsters.js +++ b/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, diff --git a/BattleDebug.html b/FrontendMKII/BattleDebug.html similarity index 68% rename from BattleDebug.html rename to FrontendMKII/BattleDebug.html index 6fd5431..ecdff9a 100644 --- a/BattleDebug.html +++ b/FrontendMKII/BattleDebug.html @@ -7,13 +7,13 @@ - - - - - - - + + + + + + + @@ -126,7 +126,7 @@ color: #f0f8e0; cursor: pointer; } - .modal { + .battleMinigameModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ @@ -138,7 +138,7 @@ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } - .modal-content { + .battleMinigameModal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; @@ -152,41 +152,41 @@

Lairbound Legends

-