Merge pull request #27 from lukaszdutka/MNG-112-Animations

Mng 112 some showing up pokemon animations

index.html

@@ -107,12 +107,14 @@ <h2 id='fight-page-player1-name'>Ash</h2>
                     <img class="pokeballWithPokemon" src='./assets/pokeball.png' alt='Pokeball'>
                     <img class="pokeballWithPokemon" src='./assets/pokeball.png' alt='Pokeball'>
                     <img class="pokeballWithPokemon" src='./assets/pokeball.png' alt='Pokeball'>
+                    <div id="underline1"></div>
                 </div>
                 <div class='playerDetails' id='fight-page-player2'>
                     <h2 id='fight-page-player2-name'>Misty</h2>
                     <img class="pokeballWithPokemon" src='./assets/pokeball.png' alt='Pokeball'>
                     <img class="pokeballWithPokemon" src='./assets/pokeball.png' alt='Pokeball'>
                     <img class="pokeballWithPokemon" src='./assets/pokeball.png' alt='Pokeball'>
+                    <div id="underline2"></div>
                 </div>
             </div>
             <div class="activePlayerInfo" id="active-player-info">
@@ -128,6 +130,7 @@ <h2>HP:</h2>
                             <div class="hpBar" id="hp-bar-player1"></div>
                         </div>
                     </div>
+                    <div class="boom-player1"></div>
                 </div>
                 <div class="pokemonDetails">
                     <img id="pokemon-image-player2" src='./assets/bulbasaur.png' alt='Pokemon'>
@@ -138,6 +141,7 @@ <h2>HP:</h2>
                             <div class="hpBar" id="hp-bar-player2"></div>
                         </div>
                     </div>
+                    <div class="boom-player2"></div>
                 </div>
             </div>
             <div class="gameActions">

src/choosePokemonsPage/addChosenPokemon.ts

@@ -11,6 +11,8 @@ export const addChosenPokemon = (
   const pokemonName = clickedPokemon.id;
   const newPokemonObject: Pokemon = factory.getPokemonByName(pokemonName);
   activePlayer.addPokemon(newPokemonObject);
-  clickedPokemon.style.cursor = "default";
-  clickedPokemon.style.filter = "grayscale(100%)";
+  setTimeout(() => {
+    clickedPokemon.setAttribute("id", "disabledImg");
+  }, 500);
+  clickedPokemon.style.animation = "heartbeat 1s ease-in-out both";
 };

src/choosePokemonsPage/createPokeballs.ts

@@ -13,4 +13,5 @@ export const createPokeballs = (playerOne: Player, activePlayer: Player) => {
     "src",
     `./${playerLastPokemonName}.png`
   );
+  playerPokeballs[numberOfLastPokemon].style.animation = "bounce-in-fwd 1.1s both";
 };

src/fightPage/animations.ts

@@ -0,0 +1,64 @@
+import { GameHandler } from "../gameHandlerClass";
+
+const selectPokemonImage = () => {
+  return [
+     document.getElementById("pokemon-image-player1") as HTMLImageElement, 
+     document.getElementById("pokemon-image-player2") as HTMLImageElement,
+     document.querySelector(".boom-player1") as HTMLDivElement,
+     document.querySelector(".boom-player2") as HTMLDivElement
+   ];
+}
+
+export const animationShowCurrentPokemon = (gameHandler: GameHandler) => {
+ const pokemonImage = selectPokemonImage();
+ if(gameHandler.playerOne.name === gameHandler.currentPlayer.name) {
+   //Active Player 1
+   pokemonImage[0].style.backgroundColor = "green";
+   pokemonImage[1].style.backgroundColor = "transparent";
+ } else {
+   //Active Player 2
+   pokemonImage[0].style.backgroundColor = "transparent";
+   pokemonImage[1].style.backgroundColor = "green";
+ }
+} 
+
+export const animationHittedPokemon = (gameHandler: GameHandler) => {
+ const pokemonImage = selectPokemonImage();
+ if(gameHandler.playerOne.name === gameHandler.currentPlayer.name) {
+   pokemonImage[3].style.display = "block";
+   setTimeout(()=>{
+     pokemonImage[3].style.display = "none";
+     pokemonImage[1].style.animation = "jello-horizontal 0.7s both";
+     pokemonImage[1].style.animationDelay = "0.2s";
+   }, 500);
+ } else {
+   pokemonImage[2].style.display = "block";
+   setTimeout(()=>{
+     pokemonImage[2].style.display = "none";
+     pokemonImage[0].style.animation = "jello-horizontal 0.7s both";
+     pokemonImage[0].style.animationDelay = "0.2s";
+   }, 500);
+ }
+ setTimeout(() => {
+   pokemonImage[0].style.animation = "none";
+   pokemonImage[1].style.animation = "none";
+ }, 1500)
+}
+
+export const animationSwitchPokemonExit = (gameHandler: GameHandler) => {
+ const pokemonImage = selectPokemonImage();
+ if(gameHandler.playerOne.name === gameHandler.currentPlayer.name) {
+   pokemonImage[0].style.animation = "bounce-out-bck 1.5s both";
+ } else {
+   pokemonImage[1].style.animation = "bounce-out-bck 1.5s both";
+ }
+}
+
+export const animationSwitchPokemonEntry = (gameHandler: GameHandler) => {
+ const pokemonImage = selectPokemonImage();
+ if(gameHandler.playerOne.name === gameHandler.currentPlayer.name) {
+   pokemonImage[0].style.animation = "bounce-in-fwd .6s both";
+ } else {
+   pokemonImage[1].style.animation = "bounce-in-fwd .6s both";
+ }
+}

src/fightPage/buttonsEventListeners.ts

@@ -5,6 +5,7 @@ import { createActivePlayer } from "./createActivePlayer";
 import { createHPBars } from "./createHPBars";
 import { createFightPagePokeballs } from "./createFightPagePokeballs";
 import { updateMovesList } from "./updateMovesList";
+import { animationShowCurrentPokemon, animationHittedPokemon, animationSwitchPokemonExit, animationSwitchPokemonEntry } from "./animations";
 
 export const actionsButtonEventListener = (
   //player: Player,
@@ -22,6 +23,7 @@ export const actionsButtonEventListener = (
   const mangoButton = document.querySelector("#mangoButton")! as HTMLDivElement;
   const mango = document.querySelector("#mango")! as HTMLDivElement;
 
+  // animationShowCurrentPokemon(gameHandler);
   animationButtonsEntry(battleButtons);
 
   attackButton.addEventListener("click", () => {
@@ -57,6 +59,7 @@ export const attacksButtonEventListener = (gameHandler: GameHandler) => {
   )! as HTMLCollectionOf<HTMLElement>;
   const backButton = document.querySelector("#backButton")! as HTMLDivElement;
 
+  // animationShowCurrentPokemon(gameHandler);
   animationButtonsEntry(battleButtons);
   magicFunction(attackButtonOne, battleButtons, gameHandler, attack);
   magicFunction(attackButtonTwo, battleButtons, gameHandler, attack);
@@ -75,6 +78,7 @@ export const switchButtonEventListener = (gameHandler: GameHandler) => {
   )! as HTMLCollectionOf<HTMLElement>;
   const backButton = document.querySelector("#backButton")! as HTMLDivElement;
 
+  // animationShowCurrentPokemon(gameHandler);
   animationButtonsEntry(battleButtons);
 
   magicFunction(switchButtonOne, battleButtons, gameHandler, switchPoke);
@@ -89,15 +93,17 @@ const magicFunction = (
   functionToCall?: any
 ) => {
   button.addEventListener("click", (e) => {
-    console.log(`${button.innerText} used!`);
+    // console.log(`${button.innerText} used!`);
     if (functionToCall) {
       functionToCall(gameHandler, e);
-      updateMovesList(gameHandler, functionToCall, e);
-      createActivePokemon(gameHandler);
-      createHPBars(gameHandler.playerOne, gameHandler.playerTwo);
-      createFightPagePokeballs(gameHandler);
-      gameHandler.switchPlayer();
-      createActivePlayer(gameHandler);
+        updateMovesList(gameHandler, functionToCall, e);
+      setTimeout(() => {
+        createHPBars(gameHandler.playerOne, gameHandler.playerTwo);
+        createFightPagePokeballs(gameHandler);
+        gameHandler.switchPlayer();
+        createActivePlayer(gameHandler);
+        createActivePokemon(gameHandler);
+      }, 1500);
     }
     setTimeout(() => {
       gameHandler.generateActionButtons();
@@ -123,13 +129,19 @@ const animationButtonsExit = (buttons: HTMLCollectionOf<HTMLElement>) => {
 };
 
 export const attack = (gameHandler: GameHandler) => {
-  console.log("bum bum bach!");
+  setTimeout(()=>{
+    animationHittedPokemon(gameHandler);
+  }, 500);
 };
 
 export const switchPoke = (gameHandler: GameHandler, event: Event) => {
+  animationSwitchPokemonExit(gameHandler);
   const nameOfChosenPokemon = (event.currentTarget as HTMLDivElement)
     .textContent;
-  gameHandler.switchPokemon(nameOfChosenPokemon!);
+  setTimeout(()=>{
+    gameHandler.switchPokemon(nameOfChosenPokemon!);
+    animationSwitchPokemonEntry(gameHandler);
+  }, 1500)
 };
 
 export const eatMango = (gameHandler: GameHandler) => {
@@ -139,3 +151,4 @@ export const eatMango = (gameHandler: GameHandler) => {
   mango.innerHTML = "0";
   mangoButton.classList.add("disabledButton");
 };
+

src/fightPage/createActivePlayer.ts

@@ -7,11 +7,21 @@ export const createActivePlayer = (gameHandler: GameHandler) => {
   activePlayerArea.textContent = `${gameHandler.currentPlayer.name} now is your turn. Get the revenge!`;
   const playerOneUnderlineArea = document.querySelector("#fight-page-player1");
   const playerTwoUnderlineArea = document.querySelector("#fight-page-player2");
+  const underlineOne = document.querySelector("#underline1") as HTMLDivElement;
+  const underlineTwo = document.querySelector("#underline2") as HTMLDivElement;
   if (gameHandler.currentPlayer === gameHandler.playerOne) {
-    playerTwoUnderlineArea?.classList.remove("activePlayer");
+    setTimeout(() => {
+     playerTwoUnderlineArea?.classList.remove("activePlayer");
+    }, 500);
     playerOneUnderlineArea?.classList.add("activePlayer");
+    underlineTwo.style.animation = "scale-out-horizontal 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both";
+    underlineOne.style.animation = "scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both";
   } else {
-    playerOneUnderlineArea?.classList.remove("activePlayer");
+    setTimeout(() => {
+      playerOneUnderlineArea?.classList.remove("activePlayer");
+     }, 500);
     playerTwoUnderlineArea?.classList.add("activePlayer");
+    underlineOne.style.animation = "scale-out-horizontal 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both";
+    underlineTwo.style.animation = "scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both";
   }
 };

src/gameHandlerClass.ts

@@ -64,7 +64,7 @@ export class GameHandler {
 
   generateActionButtons(): void {
     const player = this.currentPlayer;
-    console.log("Start - action modal");
+    // console.log("Start - action modal");
     const actionContainer = document.querySelector("#actionModals")!;
     actionContainer.innerHTML = `
                     <div class="button battleButton" id="attackButton">attack</div>
@@ -75,7 +75,7 @@ export class GameHandler {
 
   generateAttackButtons(): void {
     const player = this.currentPlayer;
-    console.log("Attack choose modal");
+    // console.log("Attack choose modal");
     const actionContainer = document.querySelector("#actionModals")!;
     actionContainer.innerHTML = `
                     <div class="button battleButton" id="attackButtonOne">${player.getActivePokemon.moves[0].moveName}</div>
@@ -86,7 +86,7 @@ export class GameHandler {
 
   generateSwitchButtons(): void {
     const player = this.currentPlayer;
-    console.log("Switch choose modal");
+    // console.log("Switch choose modal");
     const actionContainer = document.querySelector("#actionModals")!;
     actionContainer.innerHTML = `
                     <div class="button battleButton" id="switchButtonOne">${player.notActivePokemons[0].name}</div>