eldrow/index.js

const LENGTH = 5;
const GUESSES = LENGTH + 1;

let guesses = [];
let running = true;
let currentGuess = "";
let lockedGuess = "";
let runningAnim = false;

let hashDate = (date) => {
  return date.getFullYear() + date.getMonth() + date.getDate();
};

const currentWord =
  ANSWERS[hashDate(new Date()) % ANSWERS.length].toUpperCase();

let startGame = () => {
  guesses = [];
  let boardElement = document.getElementById("board");

  boardElement.innerHTML = "";

  for (let i = 0; i < GUESSES; i++) {
    let row = document.createElement("div");
    row.classList.add("row");
    row.id = "row" + i;
    boardElement.appendChild(row);

    for (let j = 0; j < LENGTH; j++) {
      let cell = document.createElement("div");
      cell.classList.add("cell");
      cell.id = "row" + i + "cell" + j;
      cell.classList.add("unguessed");
      row.appendChild(cell);
    }
  }

  running = true;
  currentGuess = "";
};

startGame();

let updateBoard = () => {
  if (runningAnim) return;
  for (let i = 0; i < LENGTH; i++) {
    let cell = document.getElementById(
      "row" + guesses.length + "cell" + (LENGTH - i - 1)
    );
    cell.innerHTML = currentGuess[i] || "";
  }
};

let addLetter = (letter) => {
  if (currentGuess.length < LENGTH) currentGuess += letter;
};

let handleButtonPress = (button) => {
  if (!running || runningAnim) {
    return;
  }

  if (button.id === "backspace") {
    currentGuess = currentGuess.slice(0, -1);
  } else if (button.id === "enter") {
    handleGuess();
  } else {
    addLetter(button.id);
  }

  updateBoard();
};

onkeyup = (event) => {
  if (!running || runningAnim || !event.key.match(/[a-z]/i)) {
    return;
  }

  if (event.key === "Backspace") {
    currentGuess = currentGuess.slice(0, -1);
  } else if (event.key === "Enter") {
    handleGuess();
  } else {
    addLetter(event.key.toUpperCase());
  }

  updateBoard();
};

let buttons = document.getElementsByClassName("letter");

for (let button of buttons) {
  button.addEventListener("click", () => {
    handleButtonPress(button);
  });
}

let handleGuess = () => {
  if (currentGuess.length !== LENGTH) {
    Toastify({
      text: "Not enough letters",
      duration: 1000,
      newWindow: false,
      close: false,
      gravity: "top",
      position: "center",
      stopOnFocus: false,
      className: "toast",
    }).showToast();

    return;
  }

  if (!WORDS.includes(currentGuess.toLowerCase())) {
    Toastify({
      text: "Not in word list",
      duration: 1000,
      newWindow: false,
      close: false,
      gravity: "top",
      position: "center",
      stopOnFocus: false,
      className: "toast",
    }).showToast();

    return;
  }

  lockedGuess = currentGuess;
  runningAnim = true;
  currentGuess = "";

  for (let i = 0; i < LENGTH; i++) {
    let cell = document.getElementById(
      "row" + guesses.length + "cell" + (LENGTH - i - 1)
    );

    setTimeout(() => {
      cell.classList.remove("unguessed");
    }, 50 * (LENGTH - i));

    setTimeout(() => {
      cell.classList.add("guessed");

      if (lockedGuess[i] === currentWord[i]) {
        cell.classList.add("correct");
        document
          .getElementById(lockedGuess[i].toUpperCase())
          .classList.add("correct");
      } else if (currentWord.includes(lockedGuess[i])) {
        cell.classList.add("present");
        document
          .getElementById(lockedGuess[i].toUpperCase())
          .classList.add("present");
      } else {
        cell.classList.add("absent");
        document
          .getElementById(lockedGuess[i].toUpperCase())
          .classList.add("absent");
      }
    }, 300 * (i + 1) + 300);
  }
  console.log(GUESSES, guesses.length);

  if (lockedGuess === currentWord) {
    running = false;
    setTimeout(() => {
      Toastify({
        text: "You win!",
        duration: 1000,
        newWindow: false,
        close: false,
        gravity: "top",
        position: "center",
        stopOnFocus: false,
        className: "toast",
      }).showToast();
      confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 },
      });
    }, 2000);
  } else if (guesses.length == GUESSES - 1) {
    running = false;

    setTimeout(() => {
      Toastify({
        text: "You lose!",
        duration: 1000,
        newWindow: false,
        close: false,
        gravity: "top",
        position: "center",
        stopOnFocus: false,
        className: "toast",
      }).showToast();
    }, 2000);
  }
  setTimeout(() => {
    guesses.push(lockedGuess);
    lockedGuess = "";
    runningAnim = false;
    updateBoard();
  }, 2000);
};