moby dick -> hyde

html/read-more.tsx

@@ -0,0 +1,19 @@
+import { render_and_copy } from "./common.tsx";
+
+const DICK_URL = "https://www.gutenberg.org/files/2701/old/moby10b.txt";
+
+const text = await fetch(DICK_URL).then(r => r.text());
+render_and_copy(
+    <div>
+        {text
+            .split(/CHAPTER|Epilogue/)
+            .slice(1)
+            .map(c => (
+                <>
+                    {...c
+                        .split("\r\n\r\n")
+                        .map(p => <p>{p.replaceAll("\r\n", " ")}</p>)}
+                </>
+            ))}
+    </div>
+);

html/webark-countdown-negative.tsx

@@ -0,0 +1,88 @@
+import { render_and_copy } from "./common.tsx";
+
+const Digit = ({
+    length_per_s,
+    digits,
+}: {
+    length_per_s: number;
+    digits: (number | string)[];
+}) => (
+    <div
+        style={{
+            display: "inline-block",
+            fontVariant: "tabular-nums",
+            overflow: "hidden",
+            height: "1rem",
+        }}
+    >
+        <div
+            style={{
+                transform: "translateY(-100%)",
+                animation: `spin ${
+                    (length_per_s * digits.length) / 60
+                }s 0s reverse infinite alternate steps(${digits.length}, end)`,
+                position: "relative",
+            }}
+        >
+            {...digits.map(d => (
+                <div
+                    style={{
+                        height: "1rem",
+                        transform: "translateY(75%)",
+                        textAlign: "right",
+                    }}
+                >
+                    {d}
+                </div>
+            ))}
+        </div>
+    </div>
+);
+
+// silly
+const make_digits = ({
+    up,
+    cycle_up,
+    cycle_down,
+}: {
+    up: number[];
+    cycle_up: number;
+    cycle_down: number;
+}) => [
+    ...new Array(cycle_up).flatMap(() => up),
+    ...new Array(cycle_down).flatMap((_, i) =>
+        i == 0 ? up.toReversed().slice(1) : up.toReversed()
+    ),
+];
+console.log(
+    make_digits({
+        up: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+        cycle_up: 6,
+        cycle_down: 10,
+    })
+);
+
+render_and_copy(
+    <span>
+        <Digit
+            length_per_s={60}
+            digits={new Array(20).fill(undefined).map((_, i) =>
+                (i < 10 ? 10 - i : -(i - 10))
+                    .toString()
+                    .replace(/-([0-9])$/, "-0$1")
+                    .replace(/^([0-9])$/, "0$1")
+            )}
+        />
+        :
+        <Digit
+            length_per_s={1}
+            digits={new Array(60 * 20)
+                .fill(undefined)
+                .map((_, i) =>
+                    (i < 30 * 60 ? 59 - (i % 60) : i % 60)
+                        .toString()
+                        .padStart(2, "0")
+                )}
+        />
+    </span>
+);