Changes to CSS and game logic

[imCaseSensitive]

Tried to randomize the card deck, but couldn't implement it properly.

I've left the randomizer function commented out in game logic.

Thanks!

[dhuang612]

Hi,

I reviewed your code, here are some changes to make it so that the card number information shows up correctly. When you do a f5 refresh the puzzles randomize like you wanted. But a game over starts you off with the same one, does that work? This goes near the top to set it at the beginning.

let timeRemaining = 5
let cardNumber = 1

Then we under updateTimer function we change the number that we are display.

const updateDisplay = () => {
    resetTimer()
    countElement.textContent = `${cardNumber}/${puzzles.length}`

Under correct guess we update the number up 1 also under the setTimeout function add in the if statement.

const correctAnswer = () => {
    cardBlock.className += ' correct'
    countElement.className += ' correct'
    guessElement.className += 'correct'
    cardNumber ++

   if (cardNumber <= puzzles.length) {
            loadCard(puzzles[cardNumber])

Then finally under gameover function we reset it to 1 for the restart, along with updating the game to be finished when the cardNumber = the total number of items within the puzzles array.

const gameOver = () => {
 if (incorrectGuesses > 4 || cardNumber === puzzles.length) {
        rhymeElement.textContent = 'Game Over!'
        guessElement.removeEventListener("keydown", assignListeners)
        cardNumber = 1

No other changes were made, I left your shufflearray function unchanged.

debugging this also made me realize, we don't congratulate the player upon winning we just have a game over sign, setting up some logic for that sounds like something else we can add. Thanks for contributing!

[Arcaster42]

Do you want to add in the changes suggested to work out the bugs? If not, I'll close this. Otherwise, I'll keep it open and merge with new changes.

[Arcaster42]

Closing stale PR.