89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
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>
|
|
);
|