[seanwessmith]

here's a script that will highlight previously visited squares as red. as a nice bonus it replaces the instructions with more accurate ones

  // Get all square elements
  squareElements = [...document.querySelectorAll("[data-testid='white-square']"), ...document.querySelectorAll("[data-testid='black-square']")];
  
  // create array of elements that have been landed on
  // these need to be set to red every time because the board resets every move
  let modifiedElements = [];
  observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach(function(addedNode) {
          key = addedNode.getAttribute('data-testid').split('-')[1];
          if (!modifiedElements.includes(key)) {
            modifiedElements.push(key);
          }
          for (let i = 0; i < modifiedElements.length; i++) {
            el = squareElements.find(e => {
              return e.getAttribute('data-squareid') === modifiedElements[i]
            })
            el.style.backgroundColor = 'red';
          }
        });
      }
    });
  });
  
  // observe all square elements
  for (let i = 0; i < squareElements.length; i++) {
    observer.observe(squareElements[i], { childList: true, subtree: true });
  }
  
  // replace instructions with more accurate instructions
  instructions = document.querySelector('section p')
  instructions.innerHTML = 'Move to the square indicated below the board without moving to a square the queen can capture and without capturing the queen. Once accomplished a new square will be indicated. Repeat until all possible squares are done.';

[wglass]

very clever little hack -- had to fix the first couple of lines to remove extra newlines and "...."

[seanwessmith]

thanks! not used to the HN code comments. fixed it