update

app/ui-cube.js

@@ -15,7 +15,8 @@
     showPrimalPoint: true,
     selectedConnectorId: null,
     selectedWallId: null,
-    selectedEdgeId: null
+    selectedEdgeId: null,
+    focusMode: false
   };
 
   const CUBE_VERTICES = [
@@ -126,12 +127,15 @@
 
   function getElements() {
     return {
+      cubeSectionEl: document.getElementById("cube-section"),
+      cubeLayoutEl: document.getElementById("cube-layout"),
       viewContainerEl: document.getElementById("cube-view-container"),
       rotateLeftEl: document.getElementById("cube-rotate-left"),
       rotateRightEl: document.getElementById("cube-rotate-right"),
       rotateUpEl: document.getElementById("cube-rotate-up"),
       rotateDownEl: document.getElementById("cube-rotate-down"),
       rotateResetEl: document.getElementById("cube-rotate-reset"),
+      focusToggleEl: document.getElementById("cube-focus-toggle"),
       markerModeEl: document.getElementById("cube-marker-mode"),
       connectorToggleEl: document.getElementById("cube-connector-toggle"),
       primalToggleEl: document.getElementById("cube-primal-toggle"),
@@ -301,23 +305,58 @@
     return cubeMathUi.getEdgeDirectionLabelForWall(wallId, edgeId);
   }
 
+  function rotateAndRender(deltaX, deltaY) {
+    setRotation(state.rotationX + deltaX, state.rotationY + deltaY);
+    render(getElements());
+  }
+
+  function resetRotationAndRender() {
+    setRotation(18, -28);
+    render(getElements());
+  }
+
+  function isKeyboardEditableTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+
+    if (target.isContentEditable) {
+      return true;
+    }
+
+    return ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+  }
+
+  function isCubeFocusKeyboardModeActive(elements = getElements()) {
+    return Boolean(state.focusMode)
+      && elements?.cubeSectionEl instanceof HTMLElement
+      && !elements.cubeSectionEl.hidden;
+  }
+
+  function syncFocusControls(elements) {
+    if (elements?.cubeLayoutEl instanceof HTMLElement) {
+      elements.cubeLayoutEl.classList.toggle("is-cube-focus", Boolean(state.focusMode));
+    }
+
+    if (elements?.focusToggleEl instanceof HTMLButtonElement) {
+      elements.focusToggleEl.setAttribute("aria-pressed", state.focusMode ? "true" : "false");
+      elements.focusToggleEl.textContent = state.focusMode ? "Show Full Cube" : "Focus Cube";
+    }
+  }
+
   function bindRotationControls(elements) {
     if (state.controlsBound) {
       return;
     }
 
-    const rotateAndRender = (deltaX, deltaY) => {
-      setRotation(state.rotationX + deltaX, state.rotationY + deltaY);
-      render(getElements());
-    };
-
     elements.rotateLeftEl?.addEventListener("click", () => rotateAndRender(0, -9));
     elements.rotateRightEl?.addEventListener("click", () => rotateAndRender(0, 9));
     elements.rotateUpEl?.addEventListener("click", () => rotateAndRender(-9, 0));
     elements.rotateDownEl?.addEventListener("click", () => rotateAndRender(9, 0));
-    elements.rotateResetEl?.addEventListener("click", () => {
-      setRotation(18, -28);
-      render(getElements());
+    elements.rotateResetEl?.addEventListener("click", resetRotationAndRender);
+    elements.focusToggleEl?.addEventListener("click", () => {
+      state.focusMode = !state.focusMode;
+      syncFocusControls(getElements());
     });
 
     elements.markerModeEl?.addEventListener("change", (event) => {
@@ -351,6 +390,41 @@
       });
     }
 
+    document.addEventListener("keydown", (event) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+
+      if (!isCubeFocusKeyboardModeActive(getElements())) {
+        return;
+      }
+
+      if (isKeyboardEditableTarget(event.target)) {
+        return;
+      }
+
+      switch (String(event.key || "").toLowerCase()) {
+        case "a":
+          event.preventDefault();
+          rotateAndRender(0, -9);
+          break;
+        case "d":
+          event.preventDefault();
+          rotateAndRender(0, 9);
+          break;
+        case "w":
+          event.preventDefault();
+          rotateAndRender(-9, 0);
+          break;
+        case "s":
+          event.preventDefault();
+          rotateAndRender(9, 0);
+          break;
+        default:
+          break;
+      }
+    });
+
     state.controlsBound = true;
   }
 
@@ -620,6 +694,8 @@
   }
 
   function render(elements) {
+    syncFocusControls(elements);
+
     if (elements?.markerModeEl) {
       elements.markerModeEl.value = state.markerDisplayMode;
     }