Append stuff visually for debugging

appendDebugEvent.ts

/**
 * Appends a new event name to the debug text area.
 * Creates the debug text area if it doesn't exist.
 */
const appendDebugEvent = (eventName: string): void => {
  let debugTextArea = document.getElementById("debugTextArea");

  if (!debugTextArea) {
    // Create and style the debug text area
    debugTextArea = document.createElement("div");
    debugTextArea.id = "debugTextArea";
    debugTextArea.style.position = "fixed";
    debugTextArea.style.bottom = "0";
    debugTextArea.style.width = "100%";
    debugTextArea.style.height = "30%";
    debugTextArea.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
    debugTextArea.style.color = "white";
    debugTextArea.style.overflowY = "auto";
    debugTextArea.style.padding = "10px";
    debugTextArea.style.boxSizing = "border-box";
    debugTextArea.style.fontFamily = "monospace";
    debugTextArea.style.zIndex = "9999";
    document.body.appendChild(debugTextArea);
  }

  // Append the new event
  const newEvent = document.createElement("div");
  newEvent.textContent = eventName;
  debugTextArea.appendChild(newEvent);
  debugTextArea.scrollTop = debugTextArea.scrollHeight;
};