hbd-brian-wordle.js

const answers = [
  ['H', 'A', 'P', 'P', 'Y'],
  ['B', 'I', 'R', 'T', 'H'],
  [' ', 'D', 'A', 'Y', ' '],
  ['B', 'R', 'A', 'I', 'N'],
  ['B', 'R', 'I', 'A', 'N'],
  ['!', '!', '!', '!', '!']
];

const rows = document.querySelectorAll('game-app')[0].shadowRoot.querySelectorAll('game-row');
const ft = rows[0].shadowRoot.querySelectorAll('game-tile');

function fancyTypeTile(row, tile, letter, evaluation) {
  return new Promise(resolve => {
    setTimeout(() => {
      let curTiles = Array.from(row.shadowRoot.querySelectorAll('game-tile[letter]'));
      let curLetters = curTiles.map(tile => tile.getAttribute('letter'));
      row.setAttribute('letters', ' '); //curLetters.join('') + letter);
      curTiles.forEach((curTile, curTileIndex) => {
        curTile.setAttribute('letter', curLetters[curTileIndex]);
      });
      tile.setAttribute('evaluation', evaluation);
      tile.setAttribute('letter', letter);
      console.log("setting tyle", tile, letter, evaluation);
      resolve(true);
    }, 300);
  });
}

function typeTile(row, tile, letter, evaluation) {
  return new Promise(resolve => {
    setTimeout(() => {
      row.setAttribute('letters', (row.getAttribute('letters') || '') + letter);
      tile.setAttribute('evaluation', evaluation);
      tile.setAttribute('letter', letter);
      console.log("setting tyle", tile, letter, evaluation);
      resolve(true);
    }, 300);
  });
}

function flipTile(tile) {
  return new Promise(resolve => {
    setTimeout(() => {
      //tile.setAttribute('reveal', true);
      const tileDiv = tile.shadowRoot.querySelectorAll('.tile')[0];
      tileDiv.setAttribute('data-animation', 'flip-out');
      tileDiv.setAttribute('data-state', tile.getAttribute('evaluation'));
      console.log("revealing tile", tile);
      resolve(true);
    }, 300);
  });
}

function typeRow(row, rowIndex) {
  return new Promise(resolve => {
    setTimeout(async () => {
      const tiles = row.shadowRoot.querySelectorAll('game-tile');
      console.log("About to type row");
      for (const [tileIndex, tile] of tiles.entries()) {
        const letter = answers[rowIndex][tileIndex];
        let evaluation = 'correct';
        if (rowIndex === 3 && (tileIndex === 2 || tileIndex === 3)) {
          evaluation = 'present';
        }
        await typeTile(row, tile, letter, evaluation);
        console.log("Typed tile!");
      };
      resolve(true);
    }, 600);
  });
}

function flipRow(row) {
  return new Promise(resolve => {
    setTimeout(async () => {
      const tiles = row.shadowRoot.querySelectorAll('game-tile');
      for (const [tileIndex, tile] of tiles.entries()) {
        await flipTile(tile, tileIndex);
      }
      resolve(true);
    }, 500);
  });
}

for (const [rowIndex, row] of rows.entries()) {
  await typeRow(row, rowIndex);
  await flipRow(row);
}