cube: add keyboard controls

.gitignore

@@ -3,7 +3,7 @@
 !.gitignore
 
 !site/
-!site/**/ 
+!site/**/
 
 !*.nu
 

site/_includes/cube.vto

@@ -76,6 +76,14 @@
         this.z - that.z,
       );
     },
+
+    mul(that) {
+      return Vec(
+        this.x * that.x,
+        this.y * that.y,
+        this.z * that.z,
+      );
+    },
   });
 
   Vec.ZERO = Vec(0, 0, 0);
@@ -118,18 +126,30 @@
   const sensitivityMouse = 0.01;
   const sensitivityWheel = 0.006;
 
-  // 15 seconds.
-  const screensaverTimeoutMs = 15 * 1000;
+  // 10 seconds.
+  const screensaverTimeoutMs = 10 * 1000;
+  // 10 minutes.
+  const stateDeleteTimeoutMs = 10 * 60 * 1000;
+
+  const lastSave = JSON.parse(localStorage.getItem("lastSave"));
+  if (!lastSave || Date.now() - lastSave > stateDeleteTimeoutMs) {
+    localStorage.removeItem("mouseDown");
+    localStorage.removeItem("mouseLastMove");
+    localStorage.removeItem("mousePrevious");
+    localStorage.removeItem("cubeOrient");
+    localStorage.removeItem("velocity");
+    localStorage.removeItem("impulseThisFrame");
+  }
 
   const mouse = {
-    down: false,
-    lastMove: -screensaverTimeoutMs,
-    previous: Vec.ZERO,
-  };
+      down:     JSON.parse(localStorage.getItem("mouseDown"))            ?? false,
+      lastMove: JSON.parse(localStorage.getItem("mouseLastMove"))        ?? -screensaverTimeoutMs,
+      previous: Vec(...JSON.parse(localStorage.getItem("mousePrevious")) ?? [0, 0, 0, 1]),
+    };
 
   const orient = {
     elements: document.querySelectorAll("cube-itself"),
-    quat: Quat(0, 0, 0, 1),
+    quat: Quat(...JSON.parse(localStorage.getItem("cubeOrient")) ?? [0, 0, 0, 1]),
 
     set(q) {
       this.quat = q;
@@ -145,9 +165,84 @@
     },
   };
 
-  let velocity = Vec.ZERO;
-  let impulseThisFrame = Vec.ZERO;
-  let impulseIdle = Vec(2, 2, -2);
+  let velocity = Vec(...JSON.parse(localStorage.getItem("velocity")) ?? [0, 0, 0]);
+
+  let impulseThisFrame = Vec(...JSON.parse(localStorage.getItem("impulseThisFrame")) ?? [0, 0, 0]);
+
+  window.addEventListener("beforeunload", () => {
+    localStorage.setItem("mouseDown", JSON.stringify(mouse.down));
+    localStorage.setItem("mouseLastMove", JSON.stringify(-(globalThis.performance.now() - mouse.lastMove)));
+    localStorage.setItem("mousePrevious", JSON.stringify([
+      mouse.previous.x,
+      mouse.previous.y,
+      mouse.previous.z,
+      mouse.previous.w,
+    ]));
+
+    localStorage.setItem("cubeOrient", JSON.stringify([
+      orient.quat.x,
+      orient.quat.y,
+      orient.quat.z,
+      orient.quat.w,
+    ]));
+
+    localStorage.setItem("velocity", JSON.stringify([
+      velocity.x,
+      velocity.y,
+      velocity.z,
+    ]));
+
+    localStorage.setItem("impulseThisFrame", JSON.stringify([
+      impulseThisFrame.x,
+      impulseThisFrame.y,
+      impulseThisFrame.z,
+    ]));
+
+    localStorage.setItem("lastSave", JSON.stringify(Date.now()));
+  });
+
+  document.addEventListener("keydown", (event) => {
+    const shift = event.shiftKey ? Vec(-1, -1, -1) : Vec(1, 1, 1);
+
+    let effect;
+
+    switch (event.key) {
+      case "Enter":
+        effect = Vec(0, 0, 4).mul(shift);
+        break;
+
+      case " ":
+        effect = Vec(4, 0, 0).mul(shift);
+        break;
+
+      case "h":
+      case "ArrowLeft":
+        effect = Vec(0, -4, 0);
+        break;
+
+      case "j":
+      case "ArrowDown":
+        effect = Vec(-4, 0, 0);
+        break;
+
+      case "k":
+      case "ArrowUp":
+        effect = Vec(4, 0, 0);
+        break;
+
+      case "l":
+      case "ArrowRight":
+        effect = Vec(0, 4, 0);
+        break;
+
+      default:
+        return;
+    }
+
+    velocity = velocity.sum(effect);
+
+    mouse.lastMove = globalThis.performance.now();
+  });
 
   const handleUp = () => {
     mouse.down = false;
@@ -261,6 +356,7 @@
     }
 
     if (globalThis.performance.now() - mouse.lastMove > screensaverTimeoutMs) {
+      const impulseIdle = Vec(2, 2, -2);
       velocity = velocity.sum(impulseIdle.scale(effectiveDelta));
     }
 

site/_includes/text.vto

@@ -37,9 +37,9 @@ layout: default.vto
   Copyright © {{ Temporal.Now.plainDateISO().year }}
 
   <a draggable="false" class="flex items-center pl-2" href="/" alt="RGBCube">
-  {{ set cube_size = "0.75rem" }}
+  {{ set cube_size  = "0.75rem" }}
   {{ set cube_small = true }}
-  {{ set cube_last = true }}
+  {{ set cube_last  = true }}
   {{ include "rgbcube.vto" }}
   </a>
 </footer>

site/assets/css/default.css

@@ -230,10 +230,9 @@ html, body {
   code:not(pre > code) {
     @apply border-1 border-dotted px-2 py-0.5 border-black dark:border-white;
 
-    &:not(a code) {
-      a:hover &, a:active & {
-        @apply border-transparent;
-      }
+    a:hover &:not(:is(h1, h2, h3, h4, h5, h6) *),
+    a:active &:not(:is(h1, h2, h3, h4, h5, h6) *) {
+      @apply border-transparent;
     }
   }
 

site/blog.vto

@@ -162,12 +162,12 @@ Blog Articles
         context.shadowColor = "#94f475";
         context.textBaseline = "top";
         context.textAlign = "center";
-  
+
         for (const strip of strips) {
           context.font = `${strip.size}px sans`;
 
           if (strip.y > canvas.height + (strip.size * 40)) {
-            Object.assign(strip, randomStrip())
+            Object.assign(strip, randomStrip());
           }
 
           let { y: yCopy } = strip;
@@ -192,7 +192,7 @@ Blog Articles
 
           strip.y += strip.deltaY;
         }
-        
+
         data.animationFrameId = requestAnimationFrame(animate);
       };
 

site/blog/test.md

@@ -2,6 +2,7 @@
 date: 2024-01-01
 title: Test
 description: "Testing"
+draft: true
 ---
 
 # Test