v0.0.13

Author: CarcajadaArtificial

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Version History
 
+### v0.0.13
+
+- Added the `<PointlessProcess⁄>`, `<Countdown⁄>`, and `<ImageModal⁄>` islands.
+- Minor updates in the `<Counter/>`, `<GibberishChat/>`, and `<RandomQuote/>`
+  islands.
+
 ### v0.0.12
 
 - Started the development for the `<PointlessProcess⁄>` island.

islands/Countdown.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "preact/hooks";
+
+export default function CountdownTimer(
+  props: { seconds: number; onFinish?: () => void },
+) {
+  const [timeLeft, setTimeLeft] = useState(props.seconds);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((t) => {
+        if (t <= 1) {
+          if (props.onFinish) props.onFinish();
+          clearInterval(timer);
+          return 0;
+        }
+        return t - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const minutes = String(Math.floor(timeLeft / 60));
+  const seconds = String(timeLeft % 60);
+
+  return (
+    <span
+      class="countdown font-mono text-6xl"
+      aria-live="polite"
+    >
+      <span style={{ "--value": minutes }} aria-label={minutes}>
+        {minutes}
+      </span>
+      :
+      <span style={{ "--value": seconds }} aria-label={seconds}>
+        {seconds}
+      </span>
+    </span>
+  );
+}

islands/Counter.tsx

@@ -6,24 +6,35 @@ interface CounterProps {
 
 export default function Counter(props: CounterProps) {
   return (
-    <div class="flex gap-8 py-6">
-      <button
-        type="button"
-        class="btn btn-primary"
-        onClick={() => props.count.value -= 1}
-        tabIndex={0}
-      >
-        -1
-      </button>
-      <p class="text-3xl tabular-nums">{props.count}</p>
-      <button
-        type="button"
-        class="btn btn-primary"
-        onClick={() => props.count.value += 1}
-        tabIndex={0}
-      >
-        +1
-      </button>
+    <div class="col-span-full md:col-span-3 lg:col-span-4">
+      <div class="prose p-1-2 bg-base-200">
+        <h2>Counter</h2>
+      </div>
+      <div class="bg-dotted p-1-2">
+        <div class="prose">
+          This is the signal based Counter island that comes with Fresh init.
+        </div>
+
+        <div class="flex justify-center gap-3-4 py-1-1 mx-auto">
+          <button
+            type="button"
+            class="btn btn-primary btn-sm"
+            onClick={() => props.count.value -= 1}
+            tabIndex={0}
+          >
+            -1
+          </button>
+          <span class="text-xl tabular-nums">{props.count}</span>
+          <button
+            type="button"
+            class="btn btn-primary btn-sm"
+            onClick={() => props.count.value += 1}
+            tabIndex={0}
+          >
+            +1
+          </button>
+        </div>
+      </div>
     </div>
   );
 }

islands/GibberishChat.tsx

@@ -44,7 +44,7 @@ export default function () {
         <form class="join" onSubmit={userSubmit}>
           <input
             id="gibberish-input"
-            class="join-item input input-sm"
+            class="join-item input input-sm mr-px"
             type="text"
             tabindex={0}
           />

islands/ImageModal.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "preact/hooks";
+import { handleKeyboard, Key } from "@carcajada/teclas";
+
+export default function ImageModal(props: { src: string }) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dlg = dialogRef.current!;
+    const onBackdropClick = (e: MouseEvent) => {
+      if (e.target === dlg) dlg.close();
+    };
+    dlg.addEventListener("click", onBackdropClick);
+    return () => dlg.removeEventListener("click", onBackdropClick);
+  }, []);
+
+  return (
+    <div>
+      <img
+        class="vignette cursor-pointer"
+        tabindex={0}
+        src={props.src}
+        onClick={() => dialogRef.current!.showModal()}
+        onKeyUp={handleKeyboard([
+          { keys: [Key.Enter], cb: () => dialogRef.current!.showModal() },
+        ])}
+      />
+      <dialog ref={dialogRef} class="modal">
+        <div class="modal-box inline-block w-auto max-w-none overflow-auto p-0">
+          <img
+            class="vignette max-w-none max-h-[90vh] block"
+            style={{ width: "auto", height: "auto" }}
+            src={props.src}
+          />
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button type="submit">close</button>
+        </form>
+      </dialog>
+    </div>
+  );
+}

islands/Keynav.tsx

@@ -37,67 +37,50 @@ function findCandidate(
     max: currentRect.right + padding,
   };
 
-  let closest: HTMLElement | null = null;
-  let minDistance = Infinity;
+  type Entry = { el: HTMLElement; distance: number };
+  const entries: Entry[] = [];
 
   for (const el of candidates) {
     if (el === current) continue;
     const rect = el.getBoundingClientRect();
-    let distance: number = Infinity;
+    let distance = Infinity;
+    let ok = false;
 
     switch (direction) {
       case "ArrowRight":
-        if (
-          rect.left > currentRect.right &&
-          overlaps(rect.top, rect.bottom, paddedY.min, paddedY.max)
-        ) {
-          distance = rect.left - currentRect.right;
-        } else {
-          continue;
-        }
+        ok = rect.left > currentRect.right &&
+          overlaps(rect.top, rect.bottom, paddedY.min, paddedY.max);
+        if (ok) distance = rect.left - currentRect.right;
         break;
-
       case "ArrowLeft":
-        if (
-          rect.right < currentRect.left &&
-          overlaps(rect.top, rect.bottom, paddedY.min, paddedY.max)
-        ) {
-          distance = currentRect.left - rect.right;
-        } else {
-          continue;
-        }
+        ok = rect.right < currentRect.left &&
+          overlaps(rect.top, rect.bottom, paddedY.min, paddedY.max);
+        if (ok) distance = currentRect.left - rect.right;
         break;
-
       case "ArrowDown":
-        if (
-          rect.top > currentRect.bottom &&
-          overlaps(rect.left, rect.right, paddedX.min, paddedX.max)
-        ) {
-          distance = rect.top - currentRect.bottom;
-        } else {
-          continue;
-        }
+        ok = rect.top > currentRect.bottom &&
+          overlaps(rect.left, rect.right, paddedX.min, paddedX.max);
+        if (ok) distance = rect.top - currentRect.bottom;
         break;
-
       case "ArrowUp":
-        if (
-          rect.bottom < currentRect.top &&
-          overlaps(rect.left, rect.right, paddedX.min, paddedX.max)
-        ) {
-          distance = currentRect.top - rect.bottom;
-        } else {
-          continue;
-        }
+        ok = rect.bottom < currentRect.top &&
+          overlaps(rect.left, rect.right, paddedX.min, paddedX.max);
+        if (ok) distance = currentRect.top - rect.bottom;
         break;
     }
 
-    if (distance < minDistance) {
-      minDistance = distance;
-      closest = el;
-    }
+    if (ok) entries.push({ el, distance });
+  }
+
+  if (entries.length === 0) return null;
+
+  // pick the entry with the smallest distance
+  let best = entries[0];
+  for (const e of entries) {
+    if (e.distance < best.distance) best = e;
   }
 
-  return closest;
+  return best.el;
 }
 
 function resetShake(el: HTMLElement, exclude?: ShakeClass) {