mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

good enough animation

Browse source 
now for twitter imitation
This commit is contained in:
mehbark 2023-07-10 16:50:36 -04:00
parent d51763dfc3
commit 3de300ffa5
1 changed files with 20 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
html/hot_people_who_eat_croissants_are_dangerous.tsx
View file

@ -1,4 +1,4 @@
import { Html, debug_render } from "./html.ts";
import { Html, debug_render, render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";
const peopleify = (...people: string[]): string[] =>
@ -6,10 +6,10 @@ const peopleify = (...people: string[]): string[] =>
const animation_length = (num_items: number): number => num_items / 5;
const wheel_style = (num_items: number, delay_seconds = 0): string =>
const wheel_style = (num_items: number): 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;`;
)}s ease-in-out reverse none running spin;`;
const get_delays = (...lengths: number[]): number[] => {
let out = [0];
@ -18,34 +18,27 @@ const get_delays = (...lengths: number[]): number[] => {
}
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>)}
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>
</div>
</details>
);
// 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>
);
};
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