103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
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",
|
|
]}
|
|
/>
|
|
);
|