import { Html, debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";
const peopleify = (...people: string[]): string[] =>
people.map(p => `${p} people`);
const animation_length = (num_items: number): number => num_items / 5;
const wheel_style = (num_items: number, delay_seconds = 0): string =>
`transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
num_items
)}s 0s ease-in-out reverse none running spin; animation-delay: ${delay_seconds}s;`;
const get_delays = (...lengths: number[]): number[] => {
let out = [0];
for (const l of lengths) {
out.push((out.at(-1) ?? 0) + animation_length(l));
}
return out;
};
const Wheel: Component = ({ delay_seconds }, children) => (
{...children.map(i =>
{i}
)}
);
// i'll probably just hardcode the delays... lame but w/e
const Take: Component = ({ subjects, objects, adjectives }, _) => {
const [d1, d2, d3] = get_delays(
subjects.length,
objects.length,
adjectives.length
);
console.log(get_delays(subjects.length, objects.length, adjectives.length));
return (
{...subjects} who eat{" "}
{...objects} are{" "}
{...adjectives}
);
};
// might want to have the final item be seperate
// turned out to be unnecessary
debug_render(
);