cohost/html/webark-countdown-negative.tsx

89 lines
2.1 KiB
TypeScript
Raw Normal View History

2023-12-30 01:39:37 -05:00
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>
);