There is a delay between my borders switching colors. Was wondering how i could fix that as it looks wierd

Question

full code: https://github.com/XxTyaftioNxX/RockPaperScissors jsfiddle: https://jsfiddle.net/45y3sdth/

here the border of the scoreboard update like a second earlier than that of the option-button userChoice_div = document.getElementById(userChoice); scoreBoard_Id = document.getElementById('score');

js

if(resultType === "tie"){
        //changing the color of the option border       
        userChoice_div.classList.add('gray-glow');
        setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);
        //chnaging the color of the scoreboard border
        scoreBoard_Id.classList.add('gray-glow');
        setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 300); 
        //increasing the score     
        userScore = userScore + 1;
        userScore_span.innerHTML = userScore;
        computerScore = computerScore + 1;
        computerScore_span.innerHTML = computerScore;

css

.score-board{
    margin: 20px auto;
    border: 4px solid white;
    border-radius: 5px;
    text-align: center;
    font-family: Times New Roman;
    width: 200px;
    color: white;
    font-size: 30px;
    padding: 15px 20px;
    position: relative;
}

.gray-glow{
    border: 4px solid gray;
    box-shadow: 0 0 10px rgb(61, 68, 70);
}

html

<div class="score-board" id="score">
        <div id="user-label" class="badge">user</div>
        <div id ="comp-label"class="badge">comp</div>
        <span id="user-score">0</span>:<span id="computer-score">0</span>
    </div>
    <div class="result">
        <p>LETS GET THAT BREAD</p>
    </div>
    <div class="choices">
        <div class="choice" id="rock">
            <img src="assets/rock.png" alt="">
        </div>
        <div class="choice" id="paper">
            <img src="assets/paper.png" alt="">
        </div>
        <div class="choice" id="scissors">
            <img src="assets/scissors.png" alt="">
        </div>
    </div> 
    </div> ```

All you're gonna get is assumptions about what might be causing it, you'll have to provide a complete example illustrating the issue at hand. — Rainbow, Oct 04 '19 at 19:00
@ZohirSalak https://github.com/XxTyaftioNxX/RockPaperScissors my full code is there take a look — HypNyx, Oct 04 '19 at 19:30
Try wrapping it in a javascript function and call the function... https://stackoverflow.com/questions/15395347/does-a-browser-truly-read-javascript-line-by-line-or-does-it-make-multiple-passe — demo7up, Oct 04 '19 at 19:43
@ZohirSalak that will not solve the problem. i want both to glow together idk how decreasing the timeout would be of any help — HypNyx, Oct 07 '19 at 18:11
It solved it for me, i don't understand what you're after specifically — Rainbow, Oct 07 '19 at 18:12
@ZohirSalak bro.....I want both of them to start glowing together how do you not understand this. The scorebopard lights up quicker than the buttons. how will decresing the timeout do anything. it just shortens the glow....doesnt mean both start glowing at the same time — HypNyx, Oct 09 '19 at 06:00
Oh i thought you were talking about the blinking being too slow. — Rainbow, Oct 09 '19 at 15:33

Rainbow · Accepted Answer · 2019-10-13T10:48:38.003

You have a transition on the .choice, which explains the delay.

transition:  0.5s ease;

var userScore = 0;
var computerScore = 0;
const userScore_span = document.getElementById('user-score');
const computerScore_span = document.getElementById('computer-score');
const scoreBoard_div = document.querySelector(".score-board");
const result_p = document.querySelector(".result > p");
const rock_div = document.getElementById("rock");
const paper_div = document.getElementById("paper");
const scissors_div = document.getElementById("scissors");
const scoreBoard_Id = document.getElementById('score');

function getComputerChoice() {
  const choices = ["rock", "paper", "scissors"];
  return choices[Math.floor(Math.random() * 3)];
}

function updateScore(resultType) {
  if (resultType === "tie") {
    userScore = userScore + 1;
    userScore_span.innerHTML = userScore;
    computerScore = computerScore + 1;
    computerScore_span.innerHTML = computerScore;

  } else if (resultType === "userWin") {
    userScore = userScore + 1;
    userScore_span.innerHTML = userScore;

  } else {
    computerScore = computerScore + 1;
    computerScore_span.innerHTML = computerScore;
  }
}

function addGlow(resultType, userChoice_div) {
  if (resultType === 'tie') {
    userChoice_div.classList.add('gray-glow');
    scoreBoard_Id.classList.add('gray-glow');
    setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);
    setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 300);

  } else if (resultType === 'userWin') {
    userChoice_div.classList.add('green-glow');
    scoreBoard_Id.classList.add('green-glow');
    setTimeout(() => scoreBoard_Id.classList.remove('green-glow'), 300);
    setTimeout(() => userChoice_div.classList.remove('green-glow'), 300);


  } else {
    userChoice_div.classList.add('red-glow');
    scoreBoard_Id.classList.add('red-glow');
    setTimeout(() => scoreBoard_Id.classList.remove('red-glow'), 300);
    setTimeout(() => userChoice_div.classList.remove('red-glow'), 300);
  }
}

function game(userChoice) {
  const userChoice_div = document.getElementById(userChoice);
  const computerChoice = getComputerChoice();
  const calculateOutput = userChoice.concat(computerChoice);

  switch (calculateOutput) {
    case "rockrock":
    case "paperpaper":
    case "scissorsscissors":
      result_p.innerHTML = "You Both Chose " + userChoice.toUpperCase() + ". Its a TIE!!!"
      updateScore("tie");
      addGlow("tie", userChoice_div);
      break;

    case "rockscissors":
      result_p.innerHTML = "ROCK smashes SCISSORS. The USER wins!!!!"
      updateScore("userWin");
      addGlow("userWin", userChoice_div);
      break;
    case "scissorspaper":
      result_p.innerHTML = "SCISSORS cuts PAPER. The USER wins!!!!"
      updateScore("userWin");
      addGlow("userWin", userChoice_div);
      break;
    case "paperrock":
      result_p.innerHTML = "PAPER covers ROCK. The USER wins!!!!"
      updateScore("userWin");
      addGlow("userWin", userChoice_div);
      break;

    case "paperscissors":
      result_p.innerHTML = "PAPER is cut by SCISSORS. The COMPUTER wins!!!!"
      updateScore("computerWin");
      addGlow("computerWin", userChoice_div);
      break;
    case "scissorsrock":
      result_p.innerHTML = "SCISSORS is smashed by ROCKS. The COMPUTER wins!!!!"
      updateScore("computerWin");
      addGlow("computerWin", userChoice_div);
    case "rockpaper":
      result_p.innerHTML = "ROCK is covered by PAPER. The COMPUTER wins!!!!"
      addGlow("computerWin", userChoice_div);
      break;
  }
}

function main() {
  rock_div.addEventListener('click', function() {

    game("rock");
  });

  paper_div.addEventListener('click', function() {
    game("paper");
  });

  scissors_div.addEventListener('click', function() {
    game("scissors");
  });
}

main();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0e183a;
}

header {
  background: rgb(172, 177, 204);
  padding: 20px;
}

header>h1 {
  color: #25272e;
  text-align: center;
  font-family: sans-serif;
}

.badge {
  background: red;
  font-size: 15px;
  padding: 2px 10px;
  font-family: sans-serif;
  font-weight: bold;
  color: aliceblue;
}

#user-label {
  position: absolute;
  top: 22px;
  left: -27px;
}

#comp-label {
  position: absolute;
  top: 22px;
  right: -30px;
}

.result {
  font-size: 30px;
  color: antiquewhite;
  margin: 45px;
}

.result>p {
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
}

.choices {
  margin: 25px 0x;
  text-align: center;
}

.choice {
  border: 4px solid linen;
  display: inline-flex;
  width: 240px;
  height: 240px;
  padding: 10px;
  border-radius: 50%;
  margin: 0px 15px;
  /* removed */
  /* transition:  0.5s ease; */
}

.score-board {
  margin: 20px auto;
  border: 4px solid white;
  border-radius: 5px;
  text-align: center;
  font-family: Times New Roman;
  width: 200px;
  color: white;
  font-size: 30px;
  padding: 15px 20px;
  position: relative;
}

#action-message {
  text-align: center;
  color: antiquewhite;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 22px;
  margin-top: 38px;
}

.choice:hover {
  cursor: pointer;
  background: #1c3ca3;
}

.score-board {
  margin: 20px auto;
  border: 4px solid white;
  border-radius: 5px;
  text-align: center;
  font-family: Times New Roman;
  width: 200px;
  color: white;
  font-size: 30px;
  padding: 15px 20px;
  position: relative;
}

.gray-glow {
  border: 4px solid gray;
  box-shadow: 0 0 10px rgb(61, 68, 70);
}

.green-glow {
  border: 4px solid green;
  box-shadow: 0 0 10px #7bff00
}

.red-glow {
  border: 4px solid red;
  box-shadow: 0 0 10px #cf0101;
}

<div class="score-board" id="score">
  <div id="user-label" class="badge">user</div>
  <div id="comp-label" class="badge">comp</div>
  <span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
  <p>LETS GET THAT BREAD</p>
</div>
<div class="choices">
  <div class="choice" id="rock">
    <img src="assets/rock.png" alt="">
  </div>
  <div class="choice" id="paper">
    <img src="assets/paper.png" alt="">
  </div>
  <div class="choice" id="scissors">
    <img src="assets/scissors.png" alt="">
  </div>
</div>

Side note: You have a typo in your switch statement the 5th case the word scissors spelled wrong should be scissorspaper instead of scissosrpaper

thankyou so much :) i had been stuck on this for the past 2 weeks lol. Thanks Again — HypNyx, Oct 13 '19 at 15:22
@HypNyx I don't even know how i ran passed it the first time — Rainbow, Oct 13 '19 at 18:46

score 1 · Answer 2 · answered Oct 04 '19 at 19:09

1

Check you code there is 300 set in setTimeout function that is the cause of make the border change a delay set it to 0 or remove the set time out function.

setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 0);

answered Oct 04 '19 at 19:09

Hitech Hitesh

1,641
1
9
18

The setTimeout is used to remove the remove the .gray-glow class after a certain time to give it that blinking effect. The problem at hand is that the blinking in the 'scoreboard' occurs noticeably earlier than that in the 'button' . was wondering how to fix that – HypNyx Oct 04 '19 at 19:15
If you want it to take more time then increase the setTimeout value to 1000 – Hitech Hitesh Oct 04 '19 at 19:19
idk how that will solve my problem, check the link i updated the question. Hope you have a better idea of what i mean after checking it out :D – HypNyx Oct 04 '19 at 19:33
Set your code in an executable environment like codepen jsfiddle or stackblitz not in GitHub i can't run and check the issue – Hitech Hitesh Oct 04 '19 at 19:38
https://jsfiddle.net/45y3sdth/ here is the link to the fiddle. one you run the code you will see a slight delay in blinking of the scoreboard and blinking of the buttons....any help would be greatly appreciated – HypNyx Oct 07 '19 at 01:36

score 0 · Answer 3 · answered Oct 04 '19 at 19:51

I suggest you try to add/remove classes to all elements all at once.

You could add a class such as 'gray-glowers' to all elements that will need the blinking effect.

Then you could get a collection of those elements and add/remove 'gray-glow' all at once. This should cause the border blink effect to display all at the same time. This is untested code but you could try something like this:

const grayGlowers = document.getElementsByClassName('gray-glowers');

grayGlowers.forEach( (el) => {
    el.classList.add('gray-glow');
});

setTimeout( () => {
        grayGlowers.forEach( (el) => {
            el.classList.remove('gray-glow');
        })
    },
    300
);

there are three types of glows based on win, loss and draw...and three buttons which need to be individually triggered and the score-board simultaneously. It would be great help if you could help me out further as i am stuck again lol — HypNyx, Oct 07 '19 at 00:56

There is a delay between my borders switching colors. Was wondering how i could fix that as it looks wierd

3 Answers3