feat: added vocab mountain stats

Author: parnavh

.changeset/fresh-lobsters-brake.md

@@ -0,0 +1,5 @@
+---
+"gregmat-buddy": patch
+---
+
+added stats for vocab mountain

src/entrypoints/gregmat.content/vocab-mountain.ts

@@ -1,5 +1,6 @@
 export async function main() {
   registerKeybinds();
+  addStats();
 }
 
 function eventGenerator(key: KeyboardEvent["key"]) {
@@ -59,3 +60,97 @@ function registerKeybinds() {
     document.body.dispatchEvent(keys.down);
   });
 }
+
+async function addStats() {
+  await waitForElement("button[tabindex='-1']");
+
+  const parent = document.querySelector(
+    ".w-full.flex.flex-col.justify-start.items-center.space-y-2"
+  );
+
+  if (!parent) return;
+
+  let summary = document.getElementById("buddy-stats") as HTMLDivElement;
+
+  if (!summary) {
+    summary = document.createElement("div");
+    summary.textContent = "loading...";
+    summary.classList.add("text-lg", "dark:text-gray-50", "text-center");
+    summary.setAttribute("id", "buddy-stats");
+    parent.prepend(summary);
+  }
+
+  const day = document.querySelector(
+    "h3[class='font-semibold text-lg dark:text-gray-50']"
+  );
+
+  if (!day) return;
+
+  const buttonObserver = new MutationObserver((mutations) => {
+    if (mutations.length > 1) return;
+
+    calculate_stats(summary);
+  });
+
+  const dayObserver = new MutationObserver(() => {
+    calculate_stats(summary);
+    buttonObserver.disconnect();
+    registerChanges();
+  });
+
+  dayObserver.observe(day, {
+    childList: true,
+  });
+
+  function registerChanges() {
+    document.querySelectorAll("button[tabindex='-1']").forEach((button) => {
+      buttonObserver.observe(button, {
+        attributes: true,
+        attributeOldValue: true,
+      });
+    });
+  }
+
+  calculate_stats(summary);
+  registerChanges();
+}
+
+function calculate_stats(summary: HTMLDivElement) {
+  const buttons = document.querySelectorAll("button[tabindex='-1']");
+
+  if (buttons.length === 0) return;
+
+  let total = 0,
+    correct = 0;
+
+  buttons.forEach((button) => {
+    if (button.classList.contains("bg-green-200")) {
+      correct++;
+      total++;
+    } else if (button.classList.contains("bg-red-200")) {
+      total++;
+    }
+  });
+
+  if (total != buttons.length) total = -1;
+
+  summary.innerHTML = getVocabStatsText(correct, total);
+}
+
+function getVocabStatsText(correct: number, total: number) {
+  if (total == -1) {
+    return `Stats: DNF`;
+  }
+
+  const percentage = (correct / total) * 100;
+
+  let color = "#f57c00"; // text-orange-500
+
+  if (percentage >= 90) {
+    color = "#4caf50"; // text-green-500
+  }
+
+  return `Stats: <div class="flex">Accuracy: ${correct}/${total} | <p class="font-semibold ml-1" style="color: ${color};"> ${percentage.toFixed(
+    2
+  )}% </p> </div>`;
+}