let letters = [];

let targetWord = '';

let tempWord = ''; // Temp string to track remaining letters

let collectedLetters = [];

let wordLength = 2; // Start with word length 2

let timer = 60; // Fixed timer in seconds

let startTime;

let gameState = 'WAIT'; // Initial state is 'WAIT' (before the game starts)

​

function setup() {

  createCanvas(800, 600);

  jar = new Jar();

  createStartButton();

}

​

function draw() {

  drawBackground();

​

  if (gameState === 'PLAY') {

    // Update timer

    let timeLeft = timer - int((millis() - startTime) / 1000);

    if (timeLeft <= 0) {

      gameState = 'GAMEOVER'; // End the game if the timer runs out

    }

​

    // Display timer and word dynamically

    updateTimerDisplay(timeLeft);

    displayCollectedLetters();

​

    // Update and display falling letters

    updateLetters();

​

    // Update and display jar

    jar.update();

    jar.display();

​

    // Check for round completion

    if (isRoundComplete()) {

      wordLength++; // Increase word length for the next round

      startNewRound(); // Start the next round

    }

  } else if (gameState === 'GAMEOVER') {

    displayGameOver();

  }

}

​

async function startNewRound() {

  collectedLetters = []; // Clear collected letters

  targetWord = await getNewWord(wordLength); // Get a new target word of increasing length

  tempWord = targetWord; // Initialize tempWord with the target word

  startTime = millis(); // Reset timer

  letters = []; // Clear existing letters

  gameState = 'PLAY'; // Set game state to play

}

​

function handleLetterCatch(caughtLetter) {

  if (tempWord.includes(caughtLetter)) {

    // Remove the first occurrence of the letter from tempWord

    tempWord = tempWord.replace(caughtLetter, '');

    collectedLetters.push(caughtLetter); // Add to collected for display purposes

  } else {

    gameState = 'GAMEOVER'; // End the game for an incorrect letter

  }

}

​

async function getNewWord(length) {

  let url = `https://api.datamuse.com/words?sp=?${'?'.repeat(length)}&max=1`; // Generate a word with specified length

  try {

    let response = await fetch(url);

    let data = await response.json();

    if (data.length > 0) {

      return data[0].word.toUpperCase(); // Return the first word in uppercase

    } else {

      console.error('No word found of this length.');

      return 'ERROR';

    }

  } catch (error) {

    console.error('Error fetching word:', error);

    return 'ERROR';

  }

}

​

function isRoundComplete() {

  return tempWord.length === 0; // Round is complete when tempWord is empty

}

​

function updateTimerDisplay(timeLeft) {

  const timerElement = document.getElementById('timer');

  if (timerElement) {

    timerElement.innerText = `Time Left: ${timeLeft}`;

  }

}

​

function displayCollectedLetters() {

  textSize(20);

  for (let i = 0; i < targetWord.length; i++) {

    let letter = targetWord[i];

    // Check if the letter is collected and color it green if so

    if (collectedLetters.includes(letter) && 

        collectedLetters.filter(l => l === letter).length <= targetWord.split(letter).length - 1) {

      fill(0, 200, 0); // Green for correctly collected letters

    } else {

      fill(255); // White for uncollected letters

    }

    text(letter, 50 + i * 30, 60); // Display each letter

  }

}

​

function updateLetters() {

  // Add new letters periodically

  if (frameCount % 30 === 0) {

    letters.push(new Letter());

  }

​

  // Update and display letters

  for (let i = letters.length - 1; i >= 0; i--) {

    letters[i].update();

    letters[i].display();

    if (letters[i].offScreen()) {

      letters.splice(i, 1);

    } else if (letters[i].caught(jar)) {

      handleLetterCatch(letters[i].letter);

      letters.splice(i, 1); // Remove letter after it’s caught

    }

  }

}

​

function createStartButton() {

  const startButton = document.createElement('button');

  startButton.innerText = 'Start Game';

  startButton.style.position = 'absolute';

  startButton.style.left = '50%';

  startButton.style.top = '50%';

  startButton.style.transform = 'translate(-50%, -50%)';

  startButton.style.padding = '10px 20px';

  startButton.style.fontSize = '20px';

  startButton.style.cursor = 'pointer';

  startButton.onclick = async () => {

    document.body.removeChild(startButton); // Remove button after starting

    await startNewRound(); // Start the first round

  };

  document.body.appendChild(startButton);

}

​

function displayGameOver() {

  textSize(48);

  fill(255, 255, 255);

  textAlign(CENTER, CENTER);

  text('Game Over!', width / 2, height / 2 - 50);

  textSize(24);

  text('Press the Restart Button', width / 2, height / 2);

​

  // Check if a restart button already exists

  if (!document.getElementById('restart-button')) {

    // Create restart button

    const restartButton = document.createElement('button');

    restartButton.id = 'restart-button'; // Add an ID to identify this button

    restartButton.innerText = 'Restart Game';

    restartButton.style.position = 'absolute';

    restartButton.style.left = '50%';

    restartButton.style.top = '70%';

    restartButton.style.transform = 'translate(-50%, -50%)';

    restartButton.style.padding = '10px 20px';

    restartButton.style.fontSize = '20px';

    restartButton.style.cursor = 'pointer';

​

    // Restart the game on button click

    restartButton.onclick = () => {

      document.body.removeChild(restartButton); // Remove the restart button

      resetGame(); // Reset the game

    };

​

    document.body.appendChild(restartButton);

  }

}

​

function resetGame() {

  wordLength = 2; // Reset word length to start at 2

  gameState = 'WAIT'; // Set game state to wait

  targetWord = ''; // Clear the target word

  tempWord = ''; // Clear temporary word

  letters = []; // Clear falling letters

  collectedLetters = []; // Clear collected letters

​

  // Update displays

  updateTimerDisplay(timer); // Reset timer display

​

  createStartButton(); // Show start button again

}

​

function drawBackground() {

  for (let y = 1; y < height; y++) {

    let r = map(y, 0, height, 0, 100);

    let g = map(y, 0, height, 50, 200);

    let b = map(y, 0, height, 200, 255);

    stroke(190, 10, 10);

    line(0, y, width, y);

  }

}

​

// Letter and Jar classes remain unchanged.

​