MNG-113 Add game logs (#26)

index.html

@@ -141,22 +141,7 @@ <h2>HP:</h2>
                 </div>
             </div>
             <div class="gameActions">
-                <div class="gameLogs">
-                    <p>Pikachu used Thunder Shock!</p>
-                    <p>Bulbasaur used Mango</p>
-                    <p>Pikachu used Thunder Shock!</p>
-                    <p>Bulbasaur used Mango</p>
-                    <p>Pikachu used Thunder Shock!</p>
-                    <p>Bulbasaur used Mango</p>
-                    <p>Pikachu used Thunder Shock!</p>
-                    <p>Bulbasaur used Mango</p>
-                    <p>Pikachu used Thunder Shock!</p>
-                    <p>Bulbasaur used Mango</p>
-                    <p>Pikachu used Thunder Shock!</p>
-                    <p>Bulbasaur used Mango</p>
-                    <p>Pikachu used Thunder Shock!</p>
-                    <p>Bulbasaur used Mango</p>
-                </div>
+                <div class="gameLogs"></div>
                 <div class="buttonsContainer" id="actionModals">
                     <!-- <div class="button battleButton">attack</div>
                     <div class="button battleButton">switch</div>

src/fightPage/buttonsEventListeners.ts

@@ -4,6 +4,7 @@ import { createActivePokemon } from "./createActivePokemon";
 import { createActivePlayer } from "./createActivePlayer";
 import { createHPBars } from "./createHPBars";
 import { createFightPagePokeballs } from "./createFightPagePokeballs";
+import { updateMovesList } from "./updateMovesList";
 
 export const actionsButtonEventListener = (
   //player: Player,
@@ -91,6 +92,7 @@ const magicFunction = (
     console.log(`${button.innerText} used!`);
     if (functionToCall) {
       functionToCall(gameHandler, e);
+      updateMovesList(gameHandler, functionToCall, e);
       createActivePokemon(gameHandler);
       createHPBars(gameHandler.playerOne, gameHandler.playerTwo);
       createFightPagePokeballs(gameHandler);
@@ -122,17 +124,17 @@ const animationButtonsExit = (buttons: HTMLCollectionOf<HTMLElement>) => {
   }
 };
 
-const attack = (gameHandler: GameHandler) => {
+export const attack = (gameHandler: GameHandler) => {
   console.log("bum bum bach!");
 };
 
-const switchPoke = (gameHandler: GameHandler, event: Event) => {
+export const switchPoke = (gameHandler: GameHandler, event: Event) => {
   const nameOfChosenPokemon = (event.currentTarget as HTMLDivElement)
     .textContent;
   gameHandler.switchPokemon(nameOfChosenPokemon!);
 };
 
-const eatMango = (gameHandler: GameHandler) => {
+export const eatMango = (gameHandler: GameHandler) => {
   const mangoButton = document.querySelector("#mangoButton")! as HTMLDivElement;
   const mango = document.querySelector("#mango")! as HTMLDivElement;
   gameHandler.currentPlayer.useMango();

src/fightPage/updateMovesList.ts

@@ -0,0 +1,32 @@
+import { GameHandler } from "../gameHandlerClass";
+import { attack, switchPoke, eatMango } from "./buttonsEventListeners";
+
+export const updateMovesList = (
+  gameHandler: GameHandler,
+  calledFunction: any,
+  event: Event
+) => {
+  const moveList = document.querySelector(".gameLogs")!;
+  const newMove = document.createElement("p");
+  let newMoveText = document.createTextNode("No move found");
+  const pokemonName = gameHandler.currentPlayer.getActivePokemon.name;
+  const buttonContent = (event.currentTarget as HTMLDivElement).textContent;
+  const playerName = gameHandler.currentPlayer.name;
+  console.log();
+  switch (calledFunction) {
+    case attack:
+      newMoveText.nodeValue = `${playerName}: ${pokemonName} used ${buttonContent}!`;
+      break;
+    case switchPoke:
+      newMoveText.nodeValue = `${playerName} changed Pokemon: ${pokemonName} comes into play!`;
+      break;
+    case eatMango:
+      newMoveText.nodeValue = `${playerName} used mango: ${pokemonName} is healed!`;
+      break;
+    default:
+      console.log("No move found");
+  }
+  console.log(newMove);
+  newMove.append(newMoveText);
+  moveList.insertBefore(newMove, moveList.firstChild);
+};

styles/SASS/_responsive.scss

@@ -134,8 +134,7 @@
             justify-content: space-evenly;
 
            .gameLogs {
-                height: auto;
-                max-height: 30vh;
+                height: 30vh;
                 width: 45%;
                 order: 2;
             }