script.js

const filename = "4000-most-common-english-words.csv";
const poolSize = 1000;
const textLength = 10;

let currentIndex = 0;

async function getWords(n) {
  try {
    const response = await fetch(filename);
    const text = await response.text();

    const words = text
      .split("\n")
      .map(line => line.trim())
      .filter(line => line.length > 0);

    return words.slice(0, n);
  } catch (error) {
    return `text not found: ${error.message}`;
  }
}

async function getText() {
  const words = await getWords(poolSize);

  if (typeof words === "string") return words;

  const result =[];

  while (result.length < textLength) {
    let shuffled = [...words].sort(() => Math.random() - 0.5);

    if (words.length > 1 && result.length > 0) {
      const lastWord = result[result.length - 1];
      if (shuffled[0] === lastWord) {
        shuffled = [shuffled[1], shuffled[0], ...shuffled.slice(2)];
      }
    }

    const remaining = textLength - result.length;
    result.push(...shuffled.slice(0, remaining));
  }

  return result;
}

async function loadText() {
  const result = await getText();
  const fullText = result.join(" ");
  currentIndex = 0;

  const textEl = document.getElementById("text");
  textEl.innerHTML = fullText
    .split("")
    .map((char, i) => `<span id="char-${i}">${char === " " ? "&nbsp;" : char}</span>`)
    .join("");

  // CREATE THE FLOATING CURSOR ONCE
  const cursorEl = document.createElement("div");
  cursorEl.id = "cursor";
  textEl.appendChild(cursorEl);

  updateCursor();
}

function updateCursor() {
  const cursor = document.getElementById("cursor");
  const span = document.getElementById(`char-${currentIndex}`);
  
  if (span && cursor) {
    cursor.style.left = span.offsetLeft + "px";
    cursor.style.top = span.offsetTop + "px";
    cursor.style.height = span.offsetHeight + "px";
  } 
  else if (!span && cursor && currentIndex > 0) {
    const lastSpan = document.getElementById(`char-${currentIndex - 1}`);
    if (lastSpan) {
      cursor.style.left = (lastSpan.offsetLeft + lastSpan.offsetWidth) + "px";
    }
  }
}

window.addEventListener("resize", updateCursor);

document.addEventListener("keydown", (e) => {
  if (e.key === " ") e.preventDefault(); 
  
  if (e.key.length !== 1) return;

  const span = document.getElementById(`char-${currentIndex}`);
  if (!span) return;

  const expected = span.innerText === "\u00a0" ? " " : span.innerText;

  if (e.key === expected) {
    span.style.color = "black";
    currentIndex++;
    
    // MOVE THE INDEPENDENT CURSOR (No classList.add happening here!)
    updateCursor(); 
  }
});

document.getElementById("restart").addEventListener("click", loadText);
document.getElementById("restart").addEventListener("keydown", (e) => {
  if (e.key === "Enter") loadText();
});

loadText();