Skip to content

Commit

Permalink
trying to fix newcardBTN
Browse files Browse the repository at this point in the history
  • Loading branch information
Muge committed Mar 18, 2021
1 parent 3b7f7e5 commit 65cdc70
Show file tree
Hide file tree
Showing 3 changed files with 445 additions and 356 deletions.
159 changes: 112 additions & 47 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
/*Background about the game
/* import { createCards } from 'newData';
*/ /*Background about the game
The game is played taking turns between one players’ hand of 15 cards
AND the other player’s hand.
Expand Down Expand Up @@ -31,7 +34,6 @@ const { current } = require("tap");
// add score to the player1Score

//DOM selection from HTML for player and chosen card and an attribute
const levels = document.getElementsByClassName("levels");

const p1charName = document.querySelector("#p1charName");
const charImg1 = document.querySelector("#charImg1");
Expand All @@ -51,6 +53,8 @@ const p2wisdomLevel = document.querySelector("#p2wisdomLevel");
const p2temperLevel = document.querySelector("#p2temperLevel");
const player2Score = document.querySelector("#p2Score");

const levels = document.querySelectorAll(".levels");

const newGameBtn = document.querySelector("#newGameBtn");

const p1Cont = document.querySelector("#p1Cont");
Expand All @@ -76,34 +80,47 @@ let round = 0;

const pickAPlayer = () => Math.round(Math.random() + 1);

newGameBtn.addEventListener("click", (event) => {
window.location.reload();
newCardBtn.style.display = "none";
});

const hideCard = () => {
if (currentPlayer === 1) {
p2Cont.classList.add("hideCard");
p1Cont.classList.remove("hideCard");
p2Details.style.display = "none";
p1Details.style.display = "block";
newCardBtn.style.display = "none";
} else {
p1Cont.classList.add("hideCard");
p2Cont.classList.remove("hideCard");
p1Details.style.display = "none";
p2Details.style.display = "block";
newCardBtn.style.display = "none";
}
};

const drawP1Card = () => {
p1charName.textContent = currentCard1.name;
charImg1.src = currentCard1.imgs;
charImg1.alt = currentCard1.name;
p1magicLevel.textContent = currentCard1.magic;
p1cunningLevel.textContent = currentCard1.cunning;
p1courageLevel.textContent = currentCard1.courage;
p1wisdomLevel.textContent = currentCard1.wisdom;
p1temperLevel.textContent = currentCard1.temper;
p1charName.textContent = name1;
charImg1.src = img1;
charImg1.alt = name1;
};

levels[0].dataset.level.value = magicLevel1;
levels[1].dataset.level.value = cunningLevel1;
levels[2].dataset.level.value = courageLevel1;
levels[3].dataset.level.value = wisdomLevel1;
levels[4].dataset.level.value = temperLevel1;

levels[5].dataset.level.textContent = magicLevel2;
levels[6].dataset.level.textContent = cunningLevel2;
levels[7].dataset.level.textContent = courageLevel2;
levels[8].dataset.level.textContent = wisdomLevel2;
levels[9].dataset.level.textContent = temperLevel2;

console.log(levels);
console.log(levels[0].dataset.type);
console.log(levels[0].dataset.level);
console.log(magicLevel1);
console.log(levels[0].dataset.level);
console.log(levels[0].dataset.level.value);

const drawP2Card = () => {
p2charName.textContent = currentCard2.name;
charImg2.src = currentCard2.imgs;
Expand Down Expand Up @@ -136,7 +153,7 @@ const revealCard = () => {
newCardBtn.style.display = "block";
};

const winnerHand = (a, b) => {
/* const winnerHand = (a, b) => {
if (a > b) {
alert("P1 won the turn");
pScore1 += 1;
Expand All @@ -152,7 +169,7 @@ const winnerHand = (a, b) => {
tieScore++;
console.log(currentPlayer);
}
};
}; */

//newCardBtn Function
// step 1 - check currentPlayer
Expand All @@ -162,28 +179,85 @@ const winnerHand = (a, b) => {
// step 5 - if currentPlayer lost change the currentPlayer to opposite
// step 6 - add to round value + 1

const drawNewCards = () => {
newCardBtn.addEventListener("click", () => {
if (currentPlayer == 1) {
hideCard();
drawP1Card();
drawP2Card();
p1Score += tieScore;
} else {
hideCard();
drawP1Card();
drawP2Card();
p2Score += tieScore;
const winnerHand = (a, b) => {
const drawNewCards = () => {
newCardBtn.addEventListener("click", () => {
getNextCards();
if (currentPlayer == 1) {
hideCard();
drawP1Card();
drawP2Card();
p1Score += tieScore;
} else {
hideCard();
drawP1Card();
drawP2Card();
p2Score += tieScore;
}
round++;
});
};
};

///// FUNCTIONS TO COMPARE THE LEVELS

const selectAttributes = () => {
if (currentPlayer == 1) {
levelAttrs[0].children.forEach((selection, i) => {
levelAttrs[0].children[i].addEventListener("click", () => {
winnerHand(currentCard1[0][selection], currentCard2[0][selection]);
console.log(currentCard1[0][selection]);
revealCard();
});
});

if (currentPlayer === 2) {
levelAttrs[1].children.forEach((selection, i) => {
levelAttrs[0].children[i].addEventListener("click", () => {
winnerHand(currentCard1[i][selection], currentCard2[i][selection]);
revealCard();
});
});
}
});
round++;
}
};

// OLD MINDSET CODES
newGameBtn.addEventListener("click", () => {
createCards();
gameInit();
newCardBtn.style.display = "none";
});

newCardBtn.addEventListener("click", () => {
if (round < 15) {
selectAttributes();
} else {
if (p1Score > p2Score) {
alert("P1 WINS!");
} else {
alert("P2 WINS!");
}
}
});

// Game Rules for Win and Lose - compare and add score and delete the card
/* const playGame = () => {
gameInit();
if (round < 15) {
selectAttributes();
drawNewCards();
} else {
if (p1Score > p2Score) {
alert("P1 WINS!");
} else {
alert("P2 WINS!");
}
///// FUNCTION TO COMPARE THE LEVELS
}
}
playGame(); */

/*
const checkMagicLevel = () => {
if (currentPlayer === 1) {
Expand Down Expand Up @@ -237,12 +311,6 @@ const checkCourageLevel = () => {
checkCourageLevel();
console.log(levelAttrs[0].children[3]);
console.log(levelAttrs[0].children[4]);

console.log(levelAttrs[1].children[3]);
console.log(levelAttrs[1].children[4]);

//Wisdom Level Comparison
const checkWisdomLevel = () => {
Expand Down Expand Up @@ -278,12 +346,7 @@ const checkTemperLevel = () => {
});
}
};
checkTemperLevel();


gameInit();

drawNewCards();
checkTemperLevel(); */

//it doesn't change the card after the result
//also only magic button works but it give error as well
Expand All @@ -292,12 +355,14 @@ drawNewCards();

// changing the src of an Img property => charImg1.src = "../topTrumps/img/argusFilch.jpg"

/* extras
/* extras
//add a class to close the card so whose turn cannot see the other card
therefore the game could be more enjoyable if you won't see the other card values
*/

////Old version of level comparison functions

//Magic Level Comparison
/* const compareMagicLevel = () => {
if (currentCard1.magic > currentCard2.magic) {
Expand Down
70 changes: 35 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,23 @@ <h3 class="charName" id="p1charName">Cho</h3>
<div class="levelAttributes">
<div class="attribute magic">
<button class="levelAttr">Magic <i class="fas fa-magic"></i></i>
<span class="levels" id="p1magicLevel">30</span></button>
<span class="levels" data-level ="" data-type="magic" id="p1magicLevel">30</span></button>
</div>
<div class="attribute cunning">
<button class="levelAttr">Cunning <i class="fas fa-hat-wizard"></i>
<span class="levels" id="p1cunningLevel">30</span></button>
<span class="levels" data-level ="" data-type="cunning" id="p1cunningLevel">30</span></button>
</div>
<div class="attribute courage">
<button class="levelAttr">Courage <i class="fas fa-quidditch"></i>
<span class="levels" id="p1courageLevel">30</span></button>
<span class="levels" data-level ="" data-type="courage" id="p1courageLevel">30</span></button>
</div>
<div class="attribute wisdom">
<button class="levelAttr">Wisdom <i class="fas fa-mountain"></i>
<span class="levels" id="p1wisdomLevel">30</span></button>
<span class="levels" data-level ="" data-type="wisdom" id="p1wisdomLevel">30</span></button>
</div>
<div class="attribute temper">
<button class="levelAttr">Temper <i class="fas fa-book-dead"></i>
<span class="levels" id="p1temperLevel">30</span></button>
<span class="levels" data-level ="" data-type="temper" id="p1temperLevel">30</span></button>
</div>
</div>
</div>
Expand All @@ -75,42 +75,42 @@ <h3 class="p1Score">Score
</div>

<div class="attrCont">
<div class="attribute name">
<h4 class="charNameTitle">Character Name
<h3 class="charName" id="p2charName">Argus</h3>
</h4>
<div class="attribute name">
<h4 class="charNameTitle">Character Name
<h3 class="charName" id="p2charName">Argus</h3>
</h4>
</div>
<div class="levelAttributes">
<div class="attribute magic">
<button class="levelAttr">Magic <i class="fas fa-magic"></i></i>
<span class="levels" data-level ="" data-type="magic" id="p2magicLevel">30</span></button>
</div>
<div class="levelAttributes">
<div class="attribute magic">
<button class="levelAttr">Magic <i class="fas fa-magic"></i></i>
<span class="levels" id="p2magicLevel">30</span></h4>
</div>
<div class="attribute cunning">
<button class="levelAttr">Cunning <i class="fas fa-hat-wizard"></i>
<span class="levels" id="p2cunningLevel">30</span></button>
</div>
<div class="attribute courage">
<button class="levelAttr">Courage <i class="fas fa-quidditch"></i></i>
<span class="levels" id="p2courageLevel">30</span></h4>
</div>
<div class="attribute wisdom">
<button class="levelAttr">Wisdom <i class="fas fa-mountain"></i>
<span class="levels" id="p2wisdomLevel">30</span></button>
</div>
<div class="attribute temper">
<button class="levelAttr">Temper <i class="fas fa-book-dead"></i>
<span class="levels" id="p2temperLevel">30</span></button>
</div>
<div class="attribute cunning">
<button class="levelAttr">Cunning <i class="fas fa-hat-wizard"></i>
<span class="levels" data-level ="" data-type="cunning" id="p2cunningLevel">30</span></button>
</div>
<div class="attribute courage">
<button class="levelAttr">Courage <i class="fas fa-quidditch"></i></i>
<span class="levels" data-level ="" data-type="courage" id="p2courageLevel">30</span></button>
</div>
<div class="attribute wisdom">
<button class="levelAttr">Wisdom <i class="fas fa-mountain"></i>
<span class="levels" data-level ="" data-type="wisdom" id="p2wisdomLevel">30</span></button>
</div>
<div class="attribute temper">
<button class="levelAttr">Temper <i class="fas fa-book-dead"></i>
<span class="levels" data-level ="" data-type="temper" id="p2temperLevel">30</span></button>
</div>
</div>
</div>

<div class="player2ScoreDiv">
<h3 class="p2Score">Score
<span id="p2Score"></span>
</h3>
</div>
<div class="player2ScoreDiv">
<h3 class="p2Score">Score
<span id="p2Score"></span>
</h3>
</div>
</div>
</div>

</main>

Expand Down
Loading

0 comments on commit 65cdc70

Please sign in to comment.