99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
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>
|
|
);
|