CODEWITHSUNDEEP
javascripthtmladdition
Jeffrey Ti
Jeffrey Ti

Reputation: 3

Trouble Adding to Player's Score Count in Card Game

I am making a two-player card game where each player guesses if a card flipped from a deck of cards will be either 7 and below or 8 and above.

If the person guesses correctly, I want them to get a point. However, I am having trouble adding to their scores.

let deckId = ''
const btns = document.querySelectorAll('.btn')
let playerOneTurn
let currentPlayer = ".playOneGuess"
let currentScore = '.playerOneScore'
let playerOneGuess = document.querySelector('.playOneGuess')
let playerTwoGuess = document.querySelector('.playTwoGuess')
let dealerNumber = document.querySelector('.dealerNumber')
let score = document.querySelector('.score')

btns.forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    const styles = e.currentTarget.classList

    if (styles.contains('belowSevFive')) {
      document.querySelector(currentPlayer).innerText = '8 and above';
      document.querySelector(currentScore).classList.add('eight')
    } else if (styles.contains('aboveSevFive')) {
      document.querySelector(currentPlayer).innerText = '7 and below';
      document.querySelector(currentScore).classList.add('seven')
    }
    swap(currentPlayer);
  })
})

function swap(current) {
  if (currentPlayer === ".playOneGuess") {
    currentPlayer = ".playTwoGuess";
    currentScore = '.playerTwoScore';
    document.querySelector('.playerTurn').innerText = "Player 2's Turn!"
  } else {
    currentPlayer = ".playOneGuess";
    currentScore = '.playerOneScore';
  }
}

fetch('https://www.deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
  .then(res => res.json()) // parse response as JSON
  .then(data => {
    console.log(data)
    deckId = data.deck_id

  })
  .catch(err => {
    console.log(`error ${err}`)
  });

document.querySelector('.deal').addEventListener('click', drawCard)

function drawCard() {
  const url = `https://www.deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`

  fetch(url)
    .then(res => res.json()) // parse response as JSON
    .then(data => {
      console.log(data)
      document.querySelector('#dealer').src = data.cards[0].image
      dealerNumber.innerText = convertToNum(data.cards[0].value)
      addingScore()

    })
    .catch(err => {
      console.log(`error ${err}`)
    });
}

function addingScore() {
  if (Number(dealerNumber.value) >= 8) {
    parseInt(document.querySelector('.eight').textContent) ++
  } else if (Number(dealerNumber.value) <= 7) {
    parseInt(document.querySelector('.seven').textContent) ++
  }
  console.log(addingScore)
}

function convertToNum(val) {
  if (val === 'ACE') {
    return 14
  } else if (val === 'KING') {
    return 13
  } else if (val === 'QUEEN') {
    return 12
  } else if (val === 'JACK') {
    return 11
  } else {
    return Number(val)
  }
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="This is where your description goes">
  <meta name="keywords" content="one, two, three">

  <title>Title in the tab</title>

  <!-- external CSS link -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <h1>Card Game!</h1>

  <div class='deal'>Deal One Card</div>

  <h1>Dealer</h1>
  <img id="dealer" src="" alt="playing card">
  <h3 class="dealerNumber"></h3>

  <h2 class="playerTurn">Player 1's Turn!</h2>
  <button class="btn aboveSevFive">8 and Above</button>
  <button class="btn belowSevFive">7 and Below</button>

  <div class="one">
    <h2>Player 1</h2>
    <span class="play playOneGuess" id="p1"></span>
    <span class="playerOneScore score">0</span>
  </div>

  <div class="two">
    <h2>Player 2</h2>
    <span class="play playTwoGuess" id="p2"></span>
    <span class="playerTwoScore score">0</span>
  </div>

  <h3>Result</h3>
</body>

</html>

When the player clicks a button, the "eight" or "seven" class will be appended to their score span. After I click for the card to get dealt, the value of the dealt card will be compared with the guesses, and I wanted points to be added to players who guessed correctly. It looks like my appending class is working and the function seems to be working fine. I'm not sure if I'm supposed to add a p1 = 0 and p2 = 0 as global variables in the javascript document from the get-go. Please let me know any of your suggestions! Hope I'm not spamming you with too much code...

Upvotes: 0

Views: 123

Answers (1)

Gopal
Gopal

Reputation: 673

try this! added a new variable for the player1 score and player2 score

let deckId = ''
const btns = document.querySelectorAll('.btn')
let playerOneTurn
let currentPlayer = ".playOneGuess"
let currentScore = '.playerOneScore'
let playerOneGuess = document.querySelector('.playOneGuess')
let playerTwoGuess = document.querySelector('.playTwoGuess')
let playerOneScoreElem = document.querySelector('.playerOneScore')
let playerTwoScoreElem = document.querySelector('.playerTwoScore')
let playerOneScore = 0;
let playerTwoScore = 0;
let dealerNumber = document.querySelector('.dealerNumber')
let score = document.querySelector('.score')

function swap(current) {
  if (currentPlayer === ".playOneGuess") {
    currentPlayer = ".playTwoGuess";
    currentScore = '.playerTwoScore';
    document.querySelector('.playerTurn').innerText = "Player 2's Turn!"
  }
  else {
    currentPlayer = ".playOneGuess";
    currentScore = '.playerOneScore';
  }
}

fetch('https://www.deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
      .then(res => res.json()) // parse response as JSON
      .then(data => {
        console.log(data)
        deckId = data.deck_id
        
      })
      .catch(err => {
          console.log(`error ${err}`)
      });

document.querySelector('.deal').addEventListener('click', drawCard)
document.querySelector('.aboveSevFive').addEventListener('click', aboveSevFive)
document.querySelector('.belowSevFive').addEventListener('click', belowSevFive)

function drawCard(){
  const url = `https://www.deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`

  fetch(url)
      .then(res => res.json()) // parse response as JSON
      .then(data => {
        console.log(data)
        document.querySelector('#dealer').src = data.cards[0].image 
        dealerNumber.innerText = convertToNum(data.cards[0].value) 
        addingScore()

      })
      .catch(err => {
          console.log(`error ${err}`)
      });
}

function aboveSevFive(){
  if (Number(dealerNumber.value) >= 8){
    if (currentPlayer === ".playOneGuess" && currentScore == '.playerOneScore') {
        playerOneScoreElem.innerText = ++playerOneScore;
    }
    if(currentPlayer === ".playTwoGuess" && currentScore == '.playerTwoScore') {
        playerTwoScoreElem.innerText = ++playerTwoScore;
    }
  }
}

function belowSevFive(){
  if (Number(dealerNumber.value) <= 7){
    if (currentPlayer === ".playOneGuess" && currentScore == '.playerOneScore') {
        playerOneScoreElem.innerText = ++playerOneScore;
    }
    if(currentPlayer === ".playTwoGuess" && currentScore == '.playerTwoScore') {
        playerTwoScoreElem.innerText = ++playerTwoScore;
    }
  }
}

function convertToNum(val){
  if(val === 'ACE'){
    return 14
  }else if(val === 'KING'){
    return 13
  }else if(val === 'QUEEN'){
    return 12
  }else if(val === 'JACK'){
    return 11
  }else{
    return Number(val)
  }
}

Upvotes: 0

Related Questions