DEV Community

Need help with The Odin's Project, Rock Paper Scissors assignment ️

Chantae P. on July 13, 2022

** update: figured out THAT particular problem. Now I need to console.log the scores and increment it when either player wins. I made sur...
Read full post
Collapse
 
badgamerbad profile image
Vipul Dessai • • Edited

Well for the starters the function playerWeapon and selectedWeapons should return something, so that your vars can hold the value they return.

Why its returning "Tie" is because

undefined === undefined // true
Enter fullscreen mode Exit fullscreen mode

Tip: create local variable inside your function, do not take them as argument and modify them (this is mutation and its bad)

Collapse
 
taepal467 profile image
Chantae P. •

Thank you so much for your help. But thankfully I actually figured it out myself. The only thing is, now I have a new problem lol. Now I need to figure out how to show the scores and increment it when either player wins🤔

Collapse
 
qavsdev profile image
QAvsDEV •

In JavaScript, there is a concept of truthy and falsy values. When used in place of booleans, all values except for false, 0, "" (empty string), null, undefined, and NaN will evaluate as true, because they are considered truthy.

In your code

if (playerWin) {
  playerScoreCount++;
}
Enter fullscreen mode Exit fullscreen mode

the playerWin variable always evaluates to true because you've defined it as "You Win!", which is a non-empty string, which in turn is truthy. Same goes for the computerWin variable.

You should have boolean variables which are reset to false each round, and then one of them is set to true in the if-blocks, where you compare the inputs to determine who wins.

As to how to show the score, do it in the same way as you update the weapons each round.

Hope this helps!

Thread Thread
 
taepal467 profile image
Chantae P. •

Thank you for the help. But I've finally figured it out myself. Here is the solution I came up with:

 if (computerSelection === "📜" && playerSelection === "🪨") {
        computerScoreCount ++;
        computerScore.textContent = computerScoreCount;
        console.log("computer score: ", computerScoreCount);
        console.log("Computer Wins!");
      } else if (playerSelection === "📜" && computerSelection === "🪨") {
        playerScoreCount ++;
        playerScore.textContent = playerScoreCount;
        console.log("player score: ", playerScoreCount);
        console.log("You Win!");
      }

      if (computerSelection === "✂" && playerSelection === "📜") {
        computerScoreCount ++;
        computerScore.textContent = computerScoreCount;
        console.log("computer score: ", computerScoreCount);
        console.log("Computer Wins!");
      } else if (playerSelection === "✂" && computerSelection === "📜") {
        playerScoreCount ++;
        playerScore.textContent = playerScoreCount;
        console.log("player score: ", playerScoreCount);
        console.log("You Win!");
      }

      if (computerSelection === "🪨" && playerSelection === "✂") {
        computerScoreCount ++;
        computerScore.textContent = computerScoreCount;
        console.log("computer score: ", computerScoreCount);
        console.log("Computer Wins!");
      } else if (playerSelection === "🪨" && computerSelection === "✂") {
        playerScoreCount ++;
        playerScore.textContent = playerScoreCount;
        console.log("player score: ", playerScoreCount);
        console.log("You Win!");
      }

      if (computerSelection === playerSelection) {
          console.log("Tie!");
      } else if (playerScoreCount === 5) {
        console.log("Congratulations! You've Won!")
      } else if (computerScoreCount === 5) {
        console.log("Computer Wins. Play again?");
      }
Enter fullscreen mode Exit fullscreen mode

Eventually I will remove all the console.log's and clean up the code a bit, once I have everything working the way it should.

Thread Thread
 
qavsdev profile image
QAvsDEV •

Yep, that's the way to do it - first get the code working, then clean it up (also known as refactoring).

When refactoring, consider incrementing the score and updating the UI in one place only. That way, if you need to change anything about the score logic or the HTML elements change, you'll need to change it once, instead of 6 times.

This may not be as important for this throwaway project, but it's a well-known software development principle called DRY (Don't Repeat Yourself). Eliminating duplicate code leads to a codebase which is more readable and much less error-prone.

Anyways, congrats on figuring it out and good luck with your next challenges!

Thread Thread
 
taepal467 profile image
Chantae P. •

Thank you so much! I've finished my project and here's the end result

And yes I am very aware of DRY. I try to not have duplicate code.

Thread Thread
 
qavsdev profile image
QAvsDEV •

Great job!

Thread Thread
 
taepal467 profile image
Chantae P. •

Thanks!

Collapse
 
badgamerbad profile image
Vipul Dessai • • Edited

Well done, you have completed it, but i think instead of using if else and repeated code, you should use a hash map
To do so you have to use "Map" datatype available in JS, then do the mapping for what beats what

paper => rock
scissor => paper
rock => scissor
Enter fullscreen mode Exit fullscreen mode

Then you can get the mapped value by using player weapon as a key for the hash map and if that value is equal to the computer selection, then player has beat the computer else its a win for the computer

if(ruleMap.get(playerSelection) === computerSelection) {
    playerScoreCount++;
}
else {
    computerScoreCount++;
}
Enter fullscreen mode Exit fullscreen mode

Edge case will be to check first if both have selected a same weapon and then check the mapping.

Collapse
 
taepal467 profile image
Chantae P. •

Thank you for showing me a different perspective on writing code. But hash mapping is way too advanced for me right now. But I will definitely keep this as a future reference for when I get more advanced with using JavaScript.

Collapse
 
badgamerbad profile image
Vipul Dessai •

Happy to help, however hash-map is advance, but here the problem is not that complex, so you should try it, once you start using the correct data structure, you will fall in love with them and effectively it will help you excel programming.

Collapse
 
qavsdev profile image
QAvsDEV •

Nice and concise - love it