cohost/html/hot_people_who_eat_croissants_are_dangerous.tsx

import { Main } from "./common.tsx";
import { Html, debug_render, 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): string =>
    `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
        num_items
    )}s ease-in-out reverse none running spin;`;

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 = ({ items }, _) => (
    <details class="wheel">
        <summary>
            {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
        </summary>
        <div class="wheel-inner" style={wheel_style(items.length)}>
            {/* <div class="wheel-item empty"></div> */}
            {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
        </div>
    </details>
);

// i'll probably just hardcode the delays... lame but w/e
const Take: Component = ({ subjects, objects, adjectives }, _) => (
    <div class="take">
        <Wheel items={subjects} /> <div class="bridge">who eat</div>{" "}
        <Wheel items={objects} /> <div class="bridge">are</div>{" "}
        <Wheel items={adjectives} />
    </div>
);

// might want to have the final item be seperate
// turned out to be unnecessary
debug_render(
    <Main>
        <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",
            ]}
        />
    </Main>
);