cohost/html/hot_people_who_eat_croissants_are_dangerous.tsx

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) => (
    <div class="wheel">
        <div
            class="wheel-inner"
            style={wheel_style(children.length, delay_seconds)}
        >
            <div class="wheel-item empty"></div>
            {...children.map(i => <div class="wheel-item">{i}</div>)}
        </div>
    </div>
);

// 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 (
        <div class="take">
            <Wheel delay_seconds={d1}>{...subjects}</Wheel> who eat{" "}
            <Wheel delay_seconds={d2}>{...objects}</Wheel> are{" "}
            <Wheel delay_seconds={d3}>{...adjectives}</Wheel>
        </div>
    );
};

// might want to have the final item be seperate
// turned out to be unnecessary
debug_render(
    <Take
        subjects={peopleify(
            "poor",
            "fat",
            "dumb",
            "tall",
            "short",
            "poor",
            "fat",
            "dumb",
            "tall",
            "hot"
        )}
        objects={[
            "apples",
            "bread",
            "pasta",
            "candy",
            "rice",
            "beans",
            "apples",
            "bread",
            "candy",
            "rice",
            "beans",
            "apples",
            "bread",
            "pasta",
            "candy",
            "rice",
            "croissants",
        ]}
        adjectives={[
            "vibes",
            "mean",
            "dumb",
            "cool",
            "hot",
            "stupid",
            "funny",
            "vibes",
            "mean",
            "dumb",
            "cool",
            "hot",
            "stupid",
            "dangerous",
        ]}
    />
);