feat: added and improved keybindings vocab

.changeset/selfish-drinks-shout.md

@@ -0,0 +1,5 @@
+---
+"gregmat-buddy": patch
+---
+
+improved keybindings

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

@@ -1,5 +1,6 @@
 export async function main() {
   registerKeybinds();
+  showKeybinds();
   addStats();
 }
 
@@ -11,10 +12,14 @@ function eventGenerator(key: KeyboardEvent["key"]) {
 }
 
 const keys = {
-  down: eventGenerator("ArrowDown"),
-  up: eventGenerator("ArrowUp"),
-  left: eventGenerator("ArrowLeft"),
-  right: eventGenerator("ArrowRight"),
+  j: eventGenerator("ArrowDown"),
+  k: eventGenerator("ArrowUp"),
+  h: eventGenerator("ArrowLeft"),
+  l: eventGenerator("ArrowRight"),
+  m: eventGenerator("d"),
+  ",": eventGenerator("s"),
+  correct: eventGenerator("g"),
+  incorrect: eventGenerator("r"),
 } as const;
 
 function isNotesFocused() {
@@ -25,40 +30,79 @@ function isNotesFocused() {
 
 function registerKeybinds() {
   document.addEventListener("keydown", (ev) => {
-    let key = null;
+    if (!ev.key.match(/^[hjkluim,]$/i) || isNotesFocused()) return;
 
-    if (isNotesFocused()) return;
+    const eventKey = ev.key.toLowerCase();
 
-    switch (ev.key) {
-      case String(ev.key.match(/^j$/i)):
-        key = keys.down;
-        break;
+    let key = null;
 
-      case String(ev.key.match(/^k$/i)):
-        key = keys.up;
+    switch (eventKey) {
+      case "h":
+      case "j":
+      case "k":
+      case "l":
+      case "m":
+      case ",":
+        key = keys[eventKey];
         break;
 
-      case String(ev.key.match(/^l$/i)):
-        key = keys.right;
+      case "u":
+        document.body.dispatchEvent(keys.correct);
+        key = keys.j;
         break;
 
-      case String(ev.key.match(/^h$/i)):
-        key = keys.left;
+      case "i":
+        document.body.dispatchEvent(keys.incorrect);
+        key = keys.j;
         break;
     }
 
     if (!key) return;
 
     document.body.dispatchEvent(key);
   });
+}
+
+async function showKeybinds() {
+  await waitForElement("button[tabindex='-1']");
+
+  const shown = !!document.getElementById("buddy-nav");
+
+  if (shown) return;
+
+  const container = document.querySelector(
+    ".flex.w-full.flex-row.flex-wrap.justify-center.space-x-6.mt-6.gap-y-2.gap-x-2"
+  );
+
+  if (!container || container.childNodes.length < 6) return;
+  const nodes = container.childNodes;
 
-  document.addEventListener("keyup", (ev) => {
-    if (!ev.key.match(/^[grf]$/i)) return;
+  const vimNav = nodes[0].cloneNode(true) as HTMLDivElement;
+  vimNav.setAttribute("id", "buddy-nav");
+  vimNav.classList.add("font-semibold");
 
-    if (isNotesFocused()) return;
+  let idx = 0;
 
-    document.body.dispatchEvent(keys.down);
+  vimNav.querySelectorAll("button").forEach((button) => {
+    button.innerHTML = ["k", "h", "j", "l"][idx++];
   });
+
+  idx = 0;
+
+  for (let i = 1; i < 6; i++) {
+    if (i == 4) continue;
+    const copy = (nodes[i] as HTMLDivElement)
+      .querySelector(".flex.flex-row.justify-center.w-full")
+      ?.cloneNode(true);
+
+    if (!copy) return;
+
+    copy.childNodes[0].childNodes[0].textContent = ["m", "u", "i", ","][idx++];
+
+    nodes[i].childNodes[0].appendChild(copy);
+  }
+
+  container.insertBefore(vimNav, nodes[1]);
 }
 
 async function addStats() {