Fix bug on the game

This is my second blog for release 0.3. For this time, I tried to find an issue in the other project to challenge myself. However, even though I tried to find an issue for a week I couldn't find it. and I was a bit tired of finding a good issue for release 0.3. So luckily, an issue I saw while I was doing the release 0.2 comes into my brain. The issue was fixing a bug in the project which I worked on release 0.2. After I finished release 0.2, I asked them that if I can work on it. But, it was difficult for me to fix the bug. So, I gave up and forgot it. so, I tried to search that issue if it is not yet closed and it was still open and no one was assigned to the issue. So, I started to work on the issue.

The issue was about the candies in the game is not movable when they should move. and the issue generator asked to make it movable and give some disadvantages if the move doesn't match the three candies.

So, I edited 3 points. First, make the candies movable if it is a valid move. Second, if the moved candy does not match at least three of the same candies, it will deduct 10 points every move. and finally, if the score goes below 0 it will keep 0.

When I read a code, the problem was the code blocked the move if the move does not make the score. So, I removed one condition to check if the move is matched or not. if it works well, I thought that I can keep that condition and make the change in other parts of the code. However, the condition makes the candies stick to one place and it more severely stick if it is on the side of the board.

After that to deduct the points, in the dragDrop function. I added a condition to get the value from the scoreboard in Html deduct the points and return to the scoreboard and make it not go below 0. This is the full code of dragDrop function after I fixed it.

const dragDrop = (element) => {
    @@ -625,14 +629,23 @@ document.addEventListener('DOMContentLoaded', () => {
    squareIdbeingReplaced = parseInt(element.target.id) //2

    const validMove = isValidMove()
    if (!validMove) {
      squares[squareIdbeingReplaced].style.backgroundImage = colorBeingReplaced
      squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged
      return
    }else{
      if(!isFoundMatching()){
        let tempscore = parseFloat(scoreDisplay.innerText)
        tempscore -=10;
        if(tempscore<0){
          tempscore =0;
        }
        scoreDisplay.innerHTML = tempscore;
      }
      squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced
      squares[squareIdbeingReplaced].style.backgroundImage = colorBeingDragged
    }

After I fixed everything, I created a pull request to the main branch.
And these are the screenshot after I edited-

First, match the blocks to get points

Second, make a wrong move to deduct 10 points

and keep making the wrong move to make the score to 0.

This Pull Request was satisfied personally because I gave up once. The javascript code for this single game was too long... However, once I looked back on this issue after a few weeks from the first time that I saw this issue, it seems like I can work on it. Hence, I copied the code to a new js file and started to break down the codes and categorize it. After I finish categorizing it seems very easy to read and understand. So, when I start to edit the bug, it was very smooth because I fully understand the whole game logic.

It was a very nice experience because it gave me a chance to read and fully understand others' codes. As this is my last pull request for release 0.3, I hope in release 0.4 I can also learn a lot like in release 0.3.