nefariously committing terrible code to production

web/public/index.html

@@ -10,5 +10,6 @@
             <div id="code-coverage"></div>
             <div id="flame-graph"></div>
         </main>
+        <pre id="testytestytesty"></pre>
     </body>
 </html>

web/public/index.js

@@ -1,6 +1,46 @@
 const codeCoverageDiv = document.querySelector("#code-coverage");
 const flameGraphDiv = document.querySelector("#flame-graph");
 
+function drawText(text, codeCoverageData) {
+    const tooltip = document.createElement("div");
+    tooltip.style.position = "fixed";
+    document.body.appendChild(tooltip);
+    const entries = codeCoverageData.toSorted((a, b) => b.index - a.index);
+    const charEntries = {};
+    const elements = [];
+    let line = 1;
+    let col = 1;
+    for (let index = 0; index < text.length; ++index) {
+        if (text[index] == "\n") {
+            col = 1;
+            line += 1;
+            elements.push("\n");
+            continue;
+        }
+        const entry = entries.find((entry) => index >= entry.index);
+        charEntries[`${line}-${col}`] = entry;
+
+        const color = (ratio) =>
+            `rgba(${255 - 255 * ratio}, ${255 * ratio}, 125, 0.5)`;
+
+        const span = document.createElement("span");
+        span.style.backgroundColor = color(Math.min(entry.covers / 25, 1));
+        span.innerText = text[index];
+        span.addEventListener("mouseover", (event) => {
+            tooltip.style.display = "block";
+            tooltip.style.left = `${event.clientX + 20}px`;
+            tooltip.style.top = `${event.clientY + 20}px`;
+            tooltip.innerText = `Ran ${entry.covers} time${
+                entry.covers !== 1 ? "s" : ""
+            }`;
+        });
+        elements.push(span);
+        col += 1;
+    }
+
+    testytestytesty.append(...elements);
+}
+
 function loadCodeCoverage(text, codeCoverageData) {
     codeCoverageDiv.innerHTML = `
         <canvas id="code-coverage-canvas"></canvas>
@@ -58,7 +98,8 @@ function loadCodeCoverage(text, codeCoverageData) {
             return;
         }
         const entry = charEntries[key];
-        tooltip.innerText = `Ran ${entry.covers} time${entry.covers !== 1 ? "s" : ""
+        tooltip.innerText = `Ran ${entry.covers} time${
+            entry.covers !== 1 ? "s" : ""
         }`;
         tooltip.style.left = `${e.clientX + 20}px`;
         tooltip.style.top = `${e.clientY + 20}px`;
@@ -172,6 +213,7 @@ const flameGraphData = JSON.parse(
     `{"fn":0,"acc":257,"parent":0,"children":[{"fn":18,"acc":251,"parent":0,"children":[{"fn":12,"acc":30,"parent":1,"children":[]}]}]}`,
 );
 
+drawText(codeData, codeCoverageData);
 loadCodeCoverage(codeData, codeCoverageData);
 loadFlameGraph(flameGraphData, {
     0: "<entry>",