10fastfingers mods

speech.ts

const speechedWords = new Set<number>();
const skip = 1;

const skipNNodes = (node: Node, n: number): Node =>
  n === 0 ? node : skipNNodes(node.nextSibling, n - 1);

const getWordId = (element: Element) => Number(element.getAttribute("wordnr"));

function speechText(element: Element) {
  if (skip > 0) {
    // 10fastfingers has blank #text after span
    const skipped = skipNNodes(element, skip * 2);
    if (skipped instanceof Element) element = skipped;
  }

  if (speechedWords.has(getWordId(element))) {
    return;
  }

  const utter = new SpeechSynthesisUtterance();
  utter.rate = 1.2;
  utter.lang = "en";
  utter.text = element.textContent;

  speechSynthesis.speak(utter);
  speechedWords.add(getWordId(element));

  return utter;
}

function highlightHandler(mutation: MutationRecord) {
  if (!(mutation.target instanceof Element)) {
    return;
  }

  if (
    mutation.target.classList.contains("correct") &&
    getWordId(mutation.target) === Math.max(...speechedWords.values())
  ) {
    speechSynthesis.cancel();
  }

  if (mutation.target.classList.contains("highlight")) {
    speechText(mutation.target);
  }
}

function removeHandler(mutation: MutationRecord) {
  if (mutation.removedNodes.length) {
    speechedWords.clear();
  }
}

function mutationHandler(
  mutations: MutationRecord[],
  _mutationObserver: MutationObserver
) {
  for (const mutation of mutations) {
    switch (mutation.type) {
      case "attributes":
        highlightHandler(mutation);
      case "childList":
        removeHandler(mutation);
      default:
        return;
    }
  }
}

function observeWords(node: Element) {
  const mutationObserver = new MutationObserver(mutationHandler);

  mutationObserver.observe(node, {
    subtree: true,
    childList: true,
    attributes: true,
    attributeFilter: ["class"],
    attributeOldValue: true
  });
}

function main() {
  const element = document.querySelector("#words > #row1");
  if (element) observeWords(element);
}

main();